This entire approach of building the UI in XUL and styling it with CSS is the root of the problem, isn’t it?
Adding a layer of abstraction will achieve two things: a lack of fine-grained control over the styling, and even more code to maintain. Every time the implementation (XUL/HTML/native) is changed, the abstraction layer will have to be updated as well. Any abstraction layer will have to make some assumptions, some of which are bound to be problematic later on. Layers of abstraction also eat up CPU cycles, unless we’re talking about a translation/compilation engine, and that would be even more code to develop and maintain.
You know what makes XUL/CSS slow, as it’s currently implemented? The unlimited possibilities. Themers can add any number of expensive CSS selectors and styles and the rendering engine has to support all that, leading to the laggy performance that’s been plaguing the Firefox UI since what, 1956? I mean, on my i7/GTX 680/16GB system, I can actually see the different elements pop in one by one when I open developer tools.
The key to performance in any system is to simplify, reduce, strip things down to essentials. A whole lot of themability could be achieved by providing control over only the following properties:
- Order (some people like tabs below the URL bar, some like them above)
- Size
- Visibility
- Font
- Padding around elements
- Background color/gradient
- Foreground color
- Border width, radius and style (solid, inset, outset)
All of these options could be implemented as color pickers/sliders/drag-and-drop widgets, which would mean that users would have a lot more control over the look and feel of their Firefox instead of having to find the theme that comes closest to their needs.
Users should be able to specify their own icons as SVG files. Being vector glyphs rather than bitmaps, these can be styled using the properties listed above. There should be options to display icon+text, text only, or icon only.
There needs to be a way to define the appearance of a given widget. So if I want text input fields to be a certain style, that style should apply to all text fields within the UI. The same applies to fieldsets, trees, lists, etc.
There should be a way to reset the styling of an element, so that themers can specify only the properties that they want to style, instead of overriding a bunch of predefined styles using extremely convoluted selectors. Over time Firefox’s styles have gotten more and more bloated, meaning that themers have to reset a bunch of properties one by one. It’s insane that code like this should ever have to be written:
#tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after, .tabbrowser-tab:not([selected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before, #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after { -moz-margin-start: -1.5px!important; -moz-margin-end: -1.5px!important; background-image: none)!important; background-position: left bottom 1px!important; background-repeat: no-repeat!important; background-size: 3px 100%!important; content: ""!important; display: -moz-box!important; width: 3px!important; }
And do not, for the love of all that’s holy, mix native UI components with a themable UI. The last thing anyone wants to see is ugly, unthemeable widgets all over their streamlined theme. The sheer number of solutions out there for styling form elements on web pages should be all the evidence anyone needs to understand this.