Handle Firefox's removal of heavyweight themes

[garrett]

As Mozilla is officially removing heavyweight theme support (discussion), and the Firefox-GNOME theme is a heavyweight theme, that means we must eventually discontinue development of this theme in its current form.

I've looked into it a bit to see what we can possibly do:

Right now, using a Lightweight Theme is impossible, as it only allows one to customize background images and colors. Perhaps Mozilla will extend this in the future? There's some really iffy talk about that in the discussion and bug linked above. Unless Mozilla adds support for changing things via CSS, such as tabs and so on, it's probably not a real option.

If you have tried out the Developer Edition of Firefox, you'll notice it has a theme that is pretty simple looking and kind of looks like a simplified flat version of Adwaita. Poking around the source reveals that they're doing this with some CSS overrides. It's even possible to copy and paste these overrides into userCSS that can be used with Stylish. I think something like the Developer Edition theme is the route we should take.

• More info on the Developer Edition theme: https://wiki.mozilla.org/DevTools/Developer_Edition_Theme
• Shared CSS overrides: https://dxr.mozilla.org/mozilla-central/source/browser/themes/shared/devedition.inc.css
• Linux-specific CSS overrides: https://dxr.mozilla.org/mozilla-central/source/browser/themes/linux/devedition.css

Thanks to a recent bug being fixed, it's now possible to also enable the Developer Theme in plain Firefox too, by use of an extension.

---

Summary: Due to Mozilla's announcement, I think the future is clear: Reimplementation of the theme (with the latest and greatest GNOME styles) piggybacking on the Developer Edition method of overriding the base theme. Ideally we'd fork the Dev Edition Theme enabler extension to make it work for GNOME too. An interim (or even fallback) solution would be to simply reply on userStyles via the Stylish extension.

BTW: For custom icons, we probably would need to have a CSS preprocessor like SASS to bake SVG into the CSS. (A preprocessor isn't necessary, but it would make maintenance much better.)

If Mozilla does enable more advanced lightweight themes, we might be able to become an official lightweight theme too.

[garrett]

Note: The Developer theme has a light and dark version, set with devtools.theme in about:config. The values are dark and light. The light version looks kinda-sorta like GNOME default (if you use your imagination a bit).

[garrett]

Just a simple proof of concept; CSS stacked on top of the Dev theme that identifies some of the basics to customize for tabs:

.tabbrowser-tab:not([selected=true]) {
    color: #999;
}
.tabbrowser-tab[selected=true] {
    color: #000 !important;
    background: inherit;
    box-shadow: 0 -2px 0 blue inset !important;
}

#navigator-toolbox {
    -moz-box-direction: reverse;
}

The last one, #navigator-toolbox, flips everything in the toolbar around vertically. By default, it looks fine, but bookmarks, when on, is at the top, and the menu, when activated, is on the bottom of the stack. It's a solution that mostly works, but we might want to look into others. Still, tabs-on-bottom (in one way, at least) is possible via a CSS one-liner.

[0rAX0]

Oh, people freaking out on a removal of a feature, missed this. 😜

Modifying the dev theme is a smart plan...provided they don't remove or change it in the future.

[garrett]

I'm pretty sure they won't remove the dev theme.

There are a couple routes to go when building on top of the dev theme:

1. Fork it entirely and track along to see if any changes happen.
2. Override parts of the dev theme to make it more GNOMEy.

It's probably best to use it as a basis and do things similar to the dev theme instead of building on top of it. It's a bunch of overrides already — and to override the overrides would probably be messy. :wink:

But overall, going this route (either of the above two options, really) means much less code overall (as we don't have to duplicate everything) and fewer updates needed between versions, as we'd just naturally inherit Firefox's changes. The only time we would have to update things based on Firefox releases are if they completely change the naming convention for a widget we retheme or introduce a new widget we want to style differently. (In either case, the look would fall back to standard Firefox, which might even be good enough anyway... instead of breaking or looking quite wrong.)

If we can convince the Mozilla folks to extend the abilities of official lightweight theming to include these CSS overrides, it would help our effort quite a bit.

[garrett]

Over the weekend, I started a new project based on exactly this issue.

https://github.com/gnome-integration-team/firefox-gnome-css

Right now, use Stylish (or some other way to inject user CSS into the browser) for development. Copy and paste the CSS file into Stylish and call it "Firefox-GNOME CSS" (or something similar).

It's far from perfect, but it does serve as a start. It also inherits the light/dark theme from devtool settings, but I did not test the dark theme (and therefore it is probably broken right now).

---

If you want to work on the theme, I suggest visiting chrome://browser/content/browser.xul in Firefox and open up the devtools on that tab. Then look for the stuff to change in the XUL, flip back to the Stylish CSS editor, modify CSS, and click the "Preview" button.

---

Moving to this concept might actually help overall with all the constant theme-related churning from Mozilla, as then our theme would just be an overlay and anything not handled would still work as they made it.

We should be able to then turn the theme into an extension instead, too, and this would let us sidestep the whole themes-going-away, yet we can still have the theme in the official add-ons location, installed with just a click (and updated automatically).

[seleznev]

Hi all! %)

I tried to read all comments, but I still have some questions:

1. Why you choosed dev theme and not the default? I installed the userstyle and it's look same with both themes.
2. What about icons? With default theme (where .toolbarbutton-icon is a button actually) we can't use "opacity" (CSS property) or SVG filters to make icons gray (or blue, etc). I see only three ways:
   • Use Toolbar.png (like the default theme). I prefer this.
   • Have more then 100 .svg files: one icon per file, one color per file.
   • Combine icons in one file, something like Toolbar.svg. Good example is symbolic-icons/connection-icons.svg. It's interesting choose for me, but editing files like this much more difficultly.
3. "Release form" of the theme. You started with userstyle, but this way have many obvious disadvantages. As alternative I suggest "lightweight theme" (not "persona"). In this case we can still have many separated files (combination all resources in CSS file is not necessary), use old building script (with Mozilla's preprocessor, ability to use version-specific code) and still be on AMO website. Good example is https://github.com/seleznev/thunderbird-theme-glw.

// I did nothing for this project for months. I have the reason (a person actually, you know). I'm so sorry. :(

[garrett]

@seleznev:

1. The dev theme builds on top of the default theme, so it inherits all the changes. That's what we'd want to do.
2. Icons are currently being changed by using the GTK+ symbolic icons. Custom icons would probably have to be compiled in via inline SVG in the CSS, I guess?
3. The idea is to have an extension that loads the custom CSS and tweaks some other things that a CSS style can't do (like the htitle stuff and some gnome-tweak-like settings). AFAIK, the problem with every other way of making a theme is that it will no longer be supported or it just changes the background colors. The dev theme, however, is supported (and will be), so it's a good starting point.

The dev theme also can be loaded through userstyles right now, so that's why I started there as a starting point.

[Dragnucs]

@garrett would it be feasible to patch Firefox to be more of a true GTK+ application and not wxGTK?

[garrett]

@Dragnucs: Firefox actually uses GTK+, not wxGTK. They ported it from GTK+2 to GTK+3 recently too. It doesn't use the GTK+ widgets natively, however, but it pulls its platform-specific styles from GTK+, much like LibreOffice does. The problem is that Firefox doesn't use these native widget styles in its main theme — they're used in preferences and other XUL parts of Firefox, however.

[Dreamsorcerer]

Is there any progress on this? In particular, turning it into an addon? If there is an addon easily installable, I'd happily start using and testing it.

[garrett]

@Dragnucs: Firefox does not use wxGTK. Firefox actually does use GTK+ (at a lower-level), but has its own toolkit on top.

@Dreamsorcerer: No progress as of yet. There are too many moving parts. Firefox is in the process of redoing its UI, which should land in Firefox 57. There's simply too much churn in Firefox right now to really start working on this.

---

Firefox is changing... a lot

Firefox is currently getting a UI overhaul, which also includes a new theme. This project is known as "Photon".

Static mockups of Photon:

1. https://www.ghacks.net/2017/03/31/firefox-photon-new-design-mockups-show-interface-and-more/
2. https://www.ghacks.net/2017/04/09/firefox-57-photon-mockups-activity-stream-library-compact-mode-more/

Photon interactive mockup for Linux: https://people-mozilla.org/~shorlander/projects/photon/Mockups/linux.html (be sure to click on the themes on the side)

The good news is that Firefox, by default, will feel less out of place in GNOME compared to how it looks currently.

...However, Firefox 57 also is turning off support for old-style add-ons, going with WebExtensions only. So the plan at the top of this issue probably won't even work.

...But there is a new theme API that's being worked on to officially add some theme support in WebExtensions: https://bugzilla.mozilla.org/show_bug.cgi?id=1330328 — although at the moment, it's not really ready (and it's unclear when it would be).

The roadmap is for all of the changes to land in Firefox 57 (implied above), which should be in mid-November. Details @ https://blog.mozilla.org/addons/2017/02/16/the-road-to-firefox-57-compatibility-milestones/

While these changes introduce a bunch of growing pains all over the place, they're for good causes, as the revamped UI and WebExtensions mean Firefox will be better in the following areas:

• Improved UI/UX
• Stability (some of this has landed with multi-process so far; more is coming soon too)
• Security (sandbox, new WebExtension APIs)
• Speed (revised UI is being tested for speed, and the new WebExtension API and multi-process should also make Firefox snappier)

All-in-all, this is a bunch of good news. Hopefully we'll eventually be able to move forward and use the new theme API and make a WebExtension to make Firefox feel at home in GNOME. The great news is that when that's possible, it should be much easier to maintain too (and hopefully the Mozilla add-on review process will be much quicker then as well).

Summary

1. There's too much churn to move forward with the above plan in this issue
2. Things are dramatically changing in Firefox, so the plan will be invalid soon anyway
3. There are probably going to be official alternate ways to theme Firefox in the (near?) future
4. Meanwhile, Firefox will feel less out of place when running in GNOME, at least

[lunakurame]

Now that FF 57 is finally out, any progress on that? Extensions like Stylish can no longer modify browser's UI, I don't know about that new theme API, but if it's still not good enough, we could use good old userChrome.css files. The installation wouldn't be as nice as a normal theme, but it's not that hard either: just drop the CSS file to (your profile dir)/chrome/userChrome.css and it allows styling all UI elements. For content styling there is a userContent.css file. I just wrote my own styles for FF 57 to make all about: pages dark and remove some UI elements I don't use: https://github.com/kurogetsusai/firefox-user-styles (not related to GNOME, just posting it as an example of userChrome.css styles). I tried using this file from https://github.com/gnome-integration-team/firefox-gnome-css as my userChrome.css and it works. It looks broken on my setup (because of the dark GTK theme), but pretty nice on the light theme, so there's definitely a way to make it look closer to Adwaita.

Edit: This README might also be useful if you're not familiar with writing styles for the userChrome.css file: https://github.com/Aris-t2/CustomCSSforFx

[meshy]

It looks as though this firefox issue is very relevant too: https://bugzilla.mozilla.org/show_bug.cgi?id=1283299

[rugk]

@meshy Indeed, it is. (think a duplicate ticket of this, linked here, was closed) The current conclusion is. (At least) If you use the Fedora build, you can enable widget.allow-client-side-decoration in about:config.

[lunakurame]

Since using the stock Firefox theme is too painful for me and I don't see much going on here, I wrote a theme for Firefox 57+ which looks like Adwaita dark (no light variant tho) using the userChrome.css and userContent.css files. It's pretty simple and not perfect, but good enough for me. I thought it might be useful for you (either for developing your own more complete theme or just using my one), so I'll drop the link here: https://github.com/kurogetsusai/firefox-gnome-theme

It's not really that hard even without XUL extensions, took me like 2 days to write it, just the installation process might be a bit sloppy.

[smithfred]

Point visitors to https://github.com/kurogetsusai/firefox-gnome-theme in the README? See https://github.com/gnome-integration-team/firefox-gnome/issues/428

[Dreamsorcerer]

Any further progress now? Following the Firefox bugs, it seems that things have started settling down.

Obvious things wrong with the default theme that should be changed:

• Tab bar should be below address bar.
• Tab bar should be hidden when only 1 tab (and tabs should use full width).
• Awesome bar should be replaced with page title when not focused.
• Button styling.

[ghost]

@Dreamsorcerer See the comment above yours.

[Dreamsorcerer]

A solution which requires hacking around in your hidden files is not good enough, I don't feel comfortable with that solution. I was hoping for a progress update towards a new web extension or similar.

[lunakurame]

I can't say I know much about the theme API, but as far as I know, the current theme API isn't powerful enough to handle a theme like that, so those CSS files are the only way to make Firefox' UI look like Adwaita, even if that's kinda a hack.

[afranke]

@Dreamsorcerer

• Awesome bar should be replaced with page title when not focused.

We stopped doing it in Epiphany, we should probably not do it here either.

[garrett]

For the past few months, I've had a local, modified git subtree repo mash-up of:

1. https://github.com/kurogetsusai/firefox-gnome-theme
2. https://github.com/smithfred/firefox-gnome-theme-3.26-layer

...But it breaks every single Firefox release.

As of Firefox 60, I think the CSD is pretty stable now (finally!), both in Fedora and outside of Fedora. This Firefox bug tracks the CSD mode: https://bugzilla.mozilla.org/show_bug.cgi?id=1283299 and it gets new updates every day (sometimes multiple per day). But it's getting close to done and also overall the same in 60 and nightly. Finally.

Ideally, there should be combination of the above two repos, with some refactoring (to make it more maintainable and cleaned up) would be the way to go. And then see if we could get it hosted here in this group too, so the maintenance is not tied to a single individual.

[garrett]

BTW: Firefox's theming is nowhere near close to what we need. Unfortunately, the hack is needed.

As such, there should be a friendly way to install it too, with multiple profile support — including Flatpak.

[smithfred]

A solution which requires hacking around in your hidden files is not good enough, I don't feel comfortable with that solution. I was hoping for a progress update towards a new web extension or similar.

It's CSS, which is lower-risk than the JS of a web extension (there's a tiny JS shim in mine for overlay scrollbars, but that's just because that's the only way to apply CSS to that style context).

...But it breaks every single Firefox release.

Aw, come on man, I updated my "layer" maybe a day or two after FF60 ;)

Most of my stuff has actually been pulled into firefox-gnome-theme though, I only made mine because @kurogetsusai abandoned their project for a while ;)

As of FF60 I think it's maybe just the native icons and overlay scrollbars missing from firefox-gnome-theme, but I haven't had the time+motivation to rebase.

As such, there should be a friendly way to install it too, with multiple profile support

I package my own up into an RPM and put it under /usr/share, then it's just a case of adding one line to $profile/chrome/userChrome.css for each profile. I think even that can be abstracted out to a skeleton profile somewhere.

[Roboe]

I think you may find this interesting. There's a new player in town thanks to @rafaelmardojai: https://github.com/rafaelmardojai/firefox-gnome-theme. It was featured on OMG! Ubuntu!.

I've been using it for some days on Debian Buster (latest Fx ESR) and it looks terrific. Also, code is well-organized and split in modules. Couln't find it already mentioned here, so sorry if this has been posted anywhere else.