Firefox: Styling XUL

[silverwind]

Stylish for Firefox is able to style the user interface XUL with a style like this:

/* AGENT_SHEET */
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

/* CSS here */

Is there support for this in Web Extensions or should users that have XUL styles convert them to UserChrome.css? Probably something that should be mentioned in the FAQ.

[tophf]

WebExtensions API doesn't provide any means to style the browser UI yet. I agree this should be mentioned in readme and on the site. @schomery, please?

As for userchrome.css, here's an addon to simplify the task: https://github.com/Cauterite/firefox-userchrome-addon but I don't know if it'll continue working in FF57+. It's a bootstrap addon so probably it will but I'm not an expert on this.

[silverwind]

Filed https://bugzilla.mozilla.org/show_bug.cgi?id=1372939. I totally expect them to close this.

[huffstler]

@silverwind yea they're most certainly gonna close it. I've seen several issues related to that, and they're not gonna budge on it. It goes against the reason that they're switching to webextensions, which is separating browsing extensions from the internal workings of firefox. It makes firefox and the extensions more stable as they don't depend on internal api's that break as updates happen.

[r-a-y]

I would recommend closing this, but to make sure to clearly note on the Firefox Addons site that Stylus doesn't support styling XUL due to the lack of proper support in the WebExtensions API.

Mozilla will never support userChrome.css in WebExtensions.

However, if we really wanted to support XUL styling, in theory, we could create a WebExtension Experiment as a supplementary addon. This would only work on Nightly or Developer installs though...

I personally use Generic CSS Loader 2 to style XUL: https://addons.mozilla.org/en-US/firefox/addon/generic-css-loader-2/

It's pretty barebones, but you don't have to restart Firefox in order to view immediate changes. This will not work in Firefox 57 though.

[silverwind]

I've moved to a regular userChrome.css file now, as it'll be the only thing that will work on 57. Is the web site source on GitHub? I'd send you a PR with a FAQ update, but otherwise, we can close this.

[Madis0]

I have thought of a potential way of doing this with WE, but I'm not sure if it should be implemented to Stylus or if it is, should be distributed through AMO (don't want to piss off Mozilla, do we?).

• Users would use a Stylus-like interface for managing their styles, while the actual management is done in the background.
• An extension could fetch the CSS from userstyles.org/other sites
• A native connector program would add/remove/move the code in userChrome.css
• Most things could be previewed by opening a literal interface page (like chrome://browser/content/browser.xul) and applying CSS to it. Edit: I forgot WE can't access internal pages. Still, this could be done if the native connector simply copied the file and then applied CSS.
• A restart would be required to apply the changes - that could be done by native connector, by extension (if possible) or simply directing users to some internal way (such as Shift+F2 and writing restart)
• Updates could be fetched like now and applied through native connector, shown on browser restart

(I discussed this previously on reddit)

[r-a-y]

Using a native connector program sounds like a huge workaround. A WebExtension Experiment would be better, but only Nightly and Developer versions of Firefox would be supported for the time being unless Firefox agrees that the Experiment would be beneficial and merged into the WE API.

[Mathnerd314]

There's supposed to be a JS-accessible WebExtension Theming API, tracked here (partially landed) and with some poor documentation here; maybe Stylus could support those limited properties so that e.g. a dark theme could make the browser dark as well as all the pages.

[tophf]

WebExtension Theming API

According to its documentation, it's not userstyle-compatible so supporting it in Stylus would be like frankensteining two extensions into one.

[Mottie]

Supposedly, reStyle will support Firefox's UI pages.

[tophf]

Yah we need a wiki page with links to the most bleeding edge stuff so that we can direct the frustrated users to happiness.

[narcolepticinsomniac]

I saw reStyle the other day. It uses the WE API to communicate with native applications (like you would a download manager), so you have to install an OS program for it to communicate with. This one looks to be on the up and up, but someone will exploit FF users willingness to try anything to get their old browser back.

And all that, for what? So you can open your userChrome.css file in a shittier browser editor? If it actually updated the CSS without a browser restart, or did anything useful really, I could see recommending it, but unless I'm misunderstanding something about it, I just don't get the point.