My ideas, observations, crazy plans…



  • While I love the concept of Vivalid, especially given how ChrOpera was basically a giant "go **** yourself" to people who actually used Opera, as I start trying to customize it I'm coming up with a lot of questions and seeing code that seems to have a distinct lack of a roadmap, much less forward planning. Now, I may be a bit harsh, but I'm just going to vent my concerns, frustrations and worries. REmember, I LIKE the project, I'd like to contribute if you'll let me -- but I see a LOT that's just either outright code bloat or broken methodologies that REALLY should be addressed. For example, the SVG hardcoded into the SCRIPTING for the buttons... REALLY? Alt text and titles hardcoded into the SCRIPTING? So much for internationalization of hovers? Endless STATIC markup being generated from the scripting... FOR WHAT? Extra DIV and SPAN that seem to serve NO legitimate purpose? I know it's popular with scripttards, but seriously, abusing BUTTON when you don't even have a FORM to do an <a>nchor's job? I mean, I get that it's using the steaming pile of preprocessor asshattery known as react.js (I think), so legible scripting output user-side is a JOKE... but the utter and complete lack of hooks and isolation of scope cripples the ability to add the simplest of functionality. Much less if it's a technical preview is it REALLY worth vomiting up illegible whitespaces stripped scripttardery? I mean, it's loading over a megabyte of JAVASCRIPT, when you already HAVE a rendering engine providing layout from HTML and CSS... does ANYONE else see a problem here? There are just little niggles too -- like the lack of handling if there's more tabs than height? Would it be so hard to make that container go overflow-y:auto? Even just the trash can and new tab thing sucking down space better used for tabs when set left or right -- trash can in particular would be REALLY nice if we could move it up next to the address bar (especially after axing the pointlessly redundant search bar crap) where we have MORE than enough room for one tiny icon? That would be FAR more useful. I actually tried ripping it from the DOM and placing it there, but it doesn't work. I then tried making an element that's click event was to fire either "mousedown" or "click" with the intent of hiding the existing trash, but that too fails to work even with the old one still showing. Same with making a new tab, sending a click or mousedown event (since you don't seem to have exposed the ability to actually call the proper code for that) for another button elsewhere doesn't seem to fly. No errors are tossed, it just does nothing. There's so much stuff just hardcoded into the theme right now, that you don't even HAVE a real theming system -- scary when the whole browser is being rendered via HTML and CSS. Again, that "react.js" asshattery is REALLY biting you in the ass and will continue to do so long-term -- more so the overzealous use of scope restriction when pages are isolated in <webview>tags seems a bit wonky. [i](though are we getting real webview, or the stupid object tag wrapper that node-webkit was using?)[/i] Just looking at the CSS has me recoiling in horror; px metric fonts? REALLY? So much for interface scaling. Ever heard of WCAG? Naturally the endless grey on grey below accessibility minimums screams "of course not". Ends up a bit like asking if you ever get to the Cloud District. That we have to use some crappy extension built for chrome just to scale the UI, something that one slider and using EM's across the board should have handled from the START? :/ Seriously, if you declare font-size in PX and there's no image interactions involved, you have no business writing CSS. Or #browser, #browser+div, #browser+div+div -- those extra SIBLING div don't seem to exist in any version I tested -- is that legacy code? Something react is vomiting up "because it can"? Much less if you want them all to inherit the same value shouldn't that just be set on BODY? Of course, div#browser itself seems pointless since that doesn't seem to be needed for anything that can't be done directly on BODY either -- unless one is using it for some form of goofy specificity override... and even then. Overall I'm getting the feeling that more than half the DOM objects being generated aren't neccessary, and to be frank at least HALF the CSS belongs in the trash. I don't know if react or some other framework asshattery is responsible for that, but it's really not an encouraging sign to see a white-space stripped mess that then doesn't even use condensed properties, relies on the "lie" of metric-less line-heights, and a host of other development woes that are probably doing a nasty job of banging the brakes on development time. I'm half tempted to throw all your HTML, CSS and JS in the can, and start over clean using just your executable if I can get a handle on how to directly access things like webview's TITLE, favicon, etc, etc... You seem to have a much better functionality than what nw.js provides; to the point I'd be half tempted to suggest you release a nw.js competitor. For now, I've implemented a couple simple things for my own use... one of which is two different tab-close buttons. In both FF and Opera 12/lower I've for ages used "close tab and go to next" and "close tab and go to previous" buttons. To implement these as simply as possible I just grab the tab with .current on it, figure out it's previousSibling or nextSibling .tab node (without assuming the immediate previousSibling or nextSibling is in fact it), send a "click" event to the close button and a "mousedown" to the new tab to make current. I also ripped "rewind" off the DOM from the toolbar an insert it at the beginning as it just makes more sense to me that way. I also hide the SVG buttons in the CSS and replaced them with UTF-8 characters for now. Really I'd try NOT to use SVG as DOM elements there since moving forward when it comes time for users to skin it, you're just making life harder. I did all this with my own little lib of functions since things like React, jQuery -- the majority of off the shelf frameworks -- and I get along like sodium and water. I am NOT a framework friendly person. So, my custom.js (with it's own mini-lib, isolated in a standalone func, loaded from index.html right before ) [code](function(d) { function inSpaceList(needle, haystack) { return new RegExp('(\s|^)' + needle + '(\s|$)').test(haystack); } function classExists(e, n) { return inSpaceList(n, e.className); } function classAdd(e, n) { if (!classExists(e, n)) { e.className += (e.className ? ' ' : '' ) + n; } } function classRemove(e, n) { e.className = e.className.replace( new RegExp('(\s|^)' + n + '(\s|$)'),' ' ) . replace(/^\s+|\s+$/g,''); } function classSwap(e, oldN, newN) { classRemove(e, oldN); classAdd(e, newN); } function splitSelector(selector) { var result = { tag : 'div', id : false, classes : false}, index; if ((index = selector.indexOf('.')) >= 0) { result.classes = selector.substr(index + 1).replace('.', ' '); selector = (index > 0) ? selector.substr(0, index) : ''; } if ((index = selector.indexOf('#')) >= 0) { result.id = selector.substr(index + 1); selector = (index > 0) ? selector.substr(0, index) : ''; } if (selector.length > 0) result.tag = selector; return result; } function make(selector, child, attributes, parent) { selector = splitSelector(selector); var e = document.createElement(selector.tag ? selector.tag : 'div'); if (selector.id) e.id = selector.id; if (selector.classes) e.className = selector.classes; if (child) e.appendChild( (typeof child == 'object') ? child : document.createTextNode(child) ); if (attributes && (attributes instanceof Object)) for (var i in attributes) if (i.indexOf('/webview>) >= 0) { var j = i.split('/webview>), k = e, l; while ((l = j.shift()) && (typeof k[l] == 'object')) k = k[l]; if (l && (typeof k == 'object')) k[l] = attributes[i]; } else e[i] = attributes[i]; if (parent) parent.appendChild(e); return e; } function nodeFlush(e) { while (e.firstChild) e.removeChild(e.firstChild); } function nodeAppend(e, node) { e.appendChild(typeof node == "object" ? node : d.createTextNode(node)); } function nodeReplace(e, node) { nodeFlush(e); nodeAppend(e, node); } function nodeDelete(e) { var p = e.parentNode; if (p) p.removeChild(e); } function nodeMove(e, dest) { nodeDelete(e); nodeAppend(dest, e); } function eventPrevent(e, deselect) { if (e.stopPropagation) e.stopPropagation(); if (e.preventDefault) e.preventDefault(); e.returnValue = false; if (deselect) e.target.blur(); } function eventSend(target, eventType, var_args) { var e = d.createEvent(eventType); e.initEvent.apply(e, Array.prototype.slice.call(arguments, 2)); target.dispatchEvent(e); } function mouseEvent(target, event) { eventSend(target, 'mouseEvents', event, true, true); } function currentTab() { return d.querySelector('#tabs .active') } function previousTab() { var result = currentTab().previousSibling; while (result && ( (result.nodeType != 1) || !classExists(result, 'tab') )) result = result.previousSibling; return result; } function nextTab() { var result = currentTab().nextSibling; while ( result && ((result.nodeType != 1) || !classExists(result, 'tab')) ) result = result.nextSibling; return result; } var main = d.getElementById('main'), toolbar = main.querySelector('.toolbar-addressbar'), back = toolbar.querySelector('.back'), rewind = toolbar.querySelector('.rewind'); nodeDelete(rewind); toolbar.insertBefore(rewind, back); make('button.button-toolbar.closeTabPrev', '\u2927', { title : 'Close Tab and go to Previous', onclick : function(e) { var close = currentTab().querySelector('.close'), target = previousTab() || nextTab(); mouseEvent(close, 'click'); if (target) mouseEvent(target, 'mousedown'); eventPrevent(e, true); } }, toolbar); make('button.button-toolbar.closeTabNext', '\u2929', { title : 'Close Tab and go to Next', onclick : function(e) { var close = currentTab().querySelector('.close'), target = nextTab() || previousTab(); mouseEvent(close, 'click'); if (target) mouseEvent(target, 'mousedown'); eventPrevent(e, true); } }, toolbar); })(document);[/code] ... and my custom.css: (also kills off the home button) [code].button-toolbar { margin:2px 0; border-radius:0.25em; transition:background 0.3s; } .button-toolbar.rewind { margin-left:4px; } .button-toolbar.next, .button-toolbar.rewind, .button-toolbar.forward, .button-toolbar.back, .button-toolbar { display:inline-block !important; width:auto !important; min-width:1.5em !important; height:auto; font-size:150%; line-height:110%; vertical-align:middle; text-align:center; } .button-toolbar:before, .button-toolbar:after, .toolbar-addressbar .loading:before { position:relative; top:-0.1em; } .button-toolbar.next:before { content:'\25B6'; margin-right:-0.2em; } .button-toolbar.next:after { content:'|'; } n .button-toolbar.rewind:before { content:'|'; margin-right:-0.2em; } .button-toolbar.rewind:after { content:'\25C0'; } .button-toolbar.back:before { content:'\25C0'; } .button-toolbar.forward:before { content:'\25B6'; } .button-toolbar.reload:before { content:'\27F3'; } .toolbar-addressbar button.loading:before { content:'\2573'; font:bold 75%/110% arial,helvetica,sans-serif; color:#C00; } .toolbar-addressbar .loading span, .button-toolbar.next span, .button-toolbar.rewind span, .button-toolbar.back span, .button-toolbar.forward span, .button-toolbar.reload span, .searchfield, .button-addressfield.home, .button-tabbar.home, .button-toolbar-small.home, .button-toolbar.home { display:none !important; }[/code] If anyone cares to try them out. I am seriously thinking about sitting down with just your executable and writing my own index.html, css and scripting from scratch just to see if I can kick "react" to the curb and make it easier to work with... and digest from a user-side perspective. I actually started on that with node-js when Opera slapped their logo on Chrome any-old-way and gave actual Opera users the finger, but the limitations of iframes and lack of webview deep sixed that pretty fast -- even now with their webview implementation the lack of access to "document" or other properties under webview.contentWindow limits what one can do without digging into the guts of the engine... ... and I just don't have time for that right now with my failing health; I probably shouldn't even be putting this much effort into it, but it's something to kill the time between doctors visits. I know, I know, hell of a first post... and a short one for me. :p -- edit -- oh and side note, is it just me or has @import died in the latest snapshot? I ended up including custom.css from the index.html since I'm already loading custom.js there anywho. Though, maybe those files should ALWAYS exist as a hook for users to be able to make changes, rather than making us go in and add them manually every time there's a new update?</webview></a>



  • Actually, crazy idea… maybe the trash would be more useful as a panel item?

    Also, does anyone know what value / where you'd change the max allowable width of the tabs when set left or right? It's about 80px short of what I find ideal.

    Though again, that should probably be set in EM, not pixels...



  • Have you tried looking at Thrust?
    It seems to do what you want. It also uses webview.

    I did a very simple browser in it, and it was noticeably faster than Vivaldi.



  • @deathshadow:

    ….Even just the trash can and new tab thing sucking down space better used for tabs when set left or right -- trash can in particular would be REALLY nice if we could move it up next to the address bar (especially after axing the pointlessly redundant search bar crap) where we have MORE than enough room for one tiny icon? That would be FAR more useful.

    I conjured up some CSS to reposition those 2 buttons onto the Address Bar at the left of the URL box, as I already was accustomed to having them and the Bookmark Star all there in Moz browsers.

    But it is dependent upon having the toolbars in specified locations, as all of my position offsets naturally are relative, which is fine by me, as I have decided where I want my toolbars, and will not be changing that to comply with ANY browser author's built-in default constraints.
    ~

    @deathshadow:

    – edit -- oh and side note, is it just me or has @import died in the latest snapshot? I ended up including custom.css from the index.html since I'm already loading custom.js there anywho.

    Though, maybe those files should ALWAYS exist as a hook for users to be able to make changes, rather than making us go in and add them manually every time there's a new update?

    No maybe about that !

    Mozilla does it that way, and I have grown to like it.

    And a great post, BTW !
    ~


Log in to reply
 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.