Comments (34)
The workaround above works, but it's easier to just download the source and run ./make-xpi.py --target-version 48 theme
to compile your own xpi from source. You can then open it in Firefox to install.
from firefox-gnome.
- I haven't had the time nor energy to help maintain this project, even though I would like to participate more. I'm sorry.
- BTW: I also haven't done other things I'd like to do either, like my photography either, for the same reasons. 😢
- (I'm not sure about @0rAX0 or @seleznev; just speaking on my own behalf.)
- Mozilla keeps changing the way XUL themes work, causing bugs and regressions nearly every release, so it's a constant treadmill fixing things.
- GNOME changes its look every few releases, so the theme widget styles need to be updated every 6 - 12 months in addition to the bugfixes of Mozilla's introduced issues.
- This is a cosmetic issue, not a huge deal though.
- Firefox now requires signed extensions (a good thing overall), but that means installing your own or from GitHub no longer works by default, making testing more difficult and side-loading almost impossible.
- This requires us to rely on timely Mozilla Add-ons updates (which are not timely — see next point).
- The Mozilla Add-ons review process is almost as slow as glaciers.
- We've had it where they haven't approved the theme for 2 Firefox releases before (and we uploaded new ones in the mean time, which also get delayed). It's frustrating.
- Mozilla has decided to kick XUL themes to the curb, so there's no future for any XUL "heavyweight" theme, including ours.
Reasons 2 - 6 are why it's so difficult to make updates (especially reason 2 combined with reason 5). Reason 6 is why we're kind of in despair, because Firefox basically officially told us that no matter what we do, they will forcefully kill off the project "soon".
For all of the above reasons, I started looking into alternatives to restyle Firefox in one way or another . (See issue #394)
Ideally, the new iteration of the theme would:
- Be simpler
- easier to jump in and help
- easier to maintain
- help streamline the review process (less to look at for Mozilla Add-ons)
- Build on top of the default theme, so it inherits the changes naturally
- instead of replacing it as it does now, requiring updates every release of Firefox
- Build into an extension instead of a theme
- This way, Mozilla Add-ons is still a distribution center for the theme
- This is a work-around to Mozilla killing off themes
- It provides a 1-click way of overhauling the look of Firefox to better fit in with GNOME
- Be possible to include modifications in the extension (eventually)
- include htitle, so we don't have dueling titlebars
- have custom settings baked right in
- possible other better integrations into GNOME
I noticed that the Firefox Developer Edition version of Firefox has a different theme that actually matches points 1 - 3, so I decided to build a quick example of a modification of it as a prototype. There's also an extension in Mozilla Add-ons that enables the Dev theme on the normal version of Firefox, so I think we could re-use its code as a base to build an official extension for the Add-ons store.
Meanwhile, for these early days, using Stylish for developing the theme is probably not a bad idea.
There are certainly some open questions, like how we would include non-system-native icons and if we would have a build script (which could dynamically pull down the dev theme, to keep up to date with upstream and include our overrides on top of their overrides, for example). Doing this would allow us to have different parts split out, or dynamically compile SVG into the CSS for custom icons, instead of having to keep it all in one file.
Right now, the firefox-gnome-css repo contains a short amount of work I did on one weekend as a proof that we could style Firefox to look similar to GNOME without too much effort. It's just a start though, and it definitely needs help. I only implemented some of the basics. Ideally, we'd want to make it look as much like Epiphany as possible. Eventually, we could implement it as an extension to make it easier to install and to provide htitle-like ability to remove the titlebar and make Firefox feel even more like a GNOME app.
Some parts of the current theme should be ported over to this new proof of concept. Right now, I just have it using hardcoded colors (so dark mode won't work properly yet) and I haven't implemented anything complex (like gradients or a more proper button style).
Whenever possible, the theme should use native widgets (although it's often not possible, as they implement forced padding and draw things a little differently for some widgets, such as with tabs). The firefox-gnome-css theme has used some GNOME symbolic stock icons for the back, forward, and menu buttons. It should continue to use as many GNOME symbolic stock icons as possible. (You can find them at /usr/share/icons/gnome/scalable/
— IIRC, you just drop the path and the .svg
when calling the icon.) This should all help with other theme support, including (most importantly) better dark theme support.
So, what can you do?
- Participate in issue #394
- Help out with firefox-gnome-css repo (or at least follow along and/or file issues)
- ???
- Profit* (as defined by Firefox fitting in with GNOME again)
Make Firefox GNOMEy again! *
Can we do it? Yes, we can!*
(* oh sorry — these references/jokes are far too stale... 😉)
from firefox-gnome.
Workaround (using terminal):
cd ~/.mozilla/firefox
cd [into-your-profile-folder]/extensions
- Try to find the Gnome theme XPI file. For me it was
{451500c0-902c-11e0-91e4-0800200c9a66}.xpi
. I don't know if that name is default, if not try to find usinggrep -rli gnomeb
. file-roller {451500c0-902c-11e0-91e4-0800200c9a66}.xpi
(or the XPI file you found).- Doubleclick the file
install.rdf
. It should open in gedit or another text editor. - Scroll to the bottom and find
<em:maxVersion>48.0a1</em:maxVersion>
and change to e.g.<em:maxVersion>50.0a1</em:maxVersion>
. Save and close the file. - Now file-roller asks of you want to update the archive. Yes of course we want that. Close file-roller.
- Now open Firefox and enable the Gnome theme (if it refuses just restart Firefox first). You have to restart. Done!
from firefox-gnome.
@pkato
In firefox 50 the options menu is restored by renaming panelUIOverlay.css to panelUI.css (it's in theme/shared/browser/customizableui)
from firefox-gnome.
FYI: Here's the current state of CSD (client side decoration) in Firefox, from a screenshot within this past week:
This is a crop of a screenshot from WIP code in Firefox issue 1283299: https://bugzilla.mozilla.org/show_bug.cgi?id=1283299 — that issue has several other screenshots in different circumstances too.
from firefox-gnome.
So just a little update...
Here's what Firefox Nightly looks like with absolutely 0 tweaks (there are a couple extensions installed, but that's it):
By default, it sticks out MUCH less than before. This is with the new squared off tabs that just landed.
Hopefully we'll be able to apply a bit of CSS to adjust the tabs a little. I'm not sure if that will be possible in 57 (when all the old XUL and old extensions completely break).
You can select a more compact toolbar to get rid of the circle too, right from the options:
And there's a built-in dark mode as well (this is with the dark theme in GNOME selected and the built-in dark compact theme in Firefox activated):
You can de-clutter it a bit and add spacers around the location bar, similar to GNOME Web (aka: Epiphany) as well:
I'll look to see if there's much customization we can do above and beyond the above — but the great news is that Firefox will, at least, look and feel much less alien by default. It isn't perfect, but it also isn't such a sore thumb by default in Firefox 57+ (which is currently in Nightly).
Also, Firefox Nightly is really nice and amazingly FAST.
from firefox-gnome.
That looks great. If we can get an integrated header bar, then it would be almost perfect.
from firefox-gnome.
can't manage to make it work at all with firefox 49 which is now stable :-(
EDIT: for now installed stylish and gave it that URL https://raw.githubusercontent.com/gnome-integration-team/firefox-gnome-css/master/theme.css from the css-only theme. It's not as good as what the usual integration is.. I guess it'll have to do for now though.
from firefox-gnome.
@emmanueltouzery , the stylish addon is nice and all, but yeah, it is not as great as the actual integration. I can enable it, the integration, by disabling the add-on checking compatibility. If you're using Firefox or Firefox-Developer, you'll not have access to this option unless you install this addon: https://addons.mozilla.org/en-US/firefox/addon/nightly-tester-tools/
from firefox-gnome.
max-version
was updated to 49.0a1
in 7dd405087c9f107811900aa4388f06ed821a4e9, it's just the addons site that carries an old version. In fact the version from Mozila addons site dates back to November 5, 2015, seems like it's heavily out of date.
from firefox-gnome.
The version on the Mozilla addons site is 45.1 (updated March 12 2016), which is also the latest release tag on this Git.
I don't know how updating the Mozilla addons site works, but if it is impossible for the devs here, you could tag another release so we can point our distro's package upstream URL here instead. Fx48 has become stable so the theme is broken for now.
from firefox-gnome.
@N-Yuki Thanks for showing that, I wouldn't have even looked at the build system otherwise. 'Have the feeling it's going to be useful more than once.
from firefox-gnome.
¡Fantásitco! Gracias.
from firefox-gnome.
Thanks @N-Yuki ! Worked like a charm.
from firefox-gnome.
Yes please tag a new release. The package that is included in Archlinux is the same as online, 45.1, and both are broken by default with Firefox 48
from firefox-gnome.
And yet not official response from the team...
from firefox-gnome.
Note that there is some work to do.
(Sizing, spacing between labels.)
from firefox-gnome.
@tn-osimis How did you manage to get rounded window cor,er and empty space around the URL bar?
from firefox-gnome.
@Dragnucs That would be the headerbar style for Gnome which you can apply with Stylish for example. You might also be interested in HTitle and GNotifier for further integration.
from firefox-gnome.
@tn-osimis Thank you.
from firefox-gnome.
It might work in Firefox 48, but it's broken in Firefox 50. The options menu freaked out.
from firefox-gnome.
@seleznev @0rAX0 Any updates on this?
from firefox-gnome.
from firefox-gnome.
@ptkato thank you! that helped a lot :-)
from firefox-gnome.
@N-Yuki method did not work for version 49. I tried compiling the theme with ./make-xpi.py --target-version 49 theme
and when trying to install it says that it could not be installed because the theme isn't compatible with FF 49.0.1.
from firefox-gnome.
If you want, you could use the theme from the fork I did. I updated it to Firefox 48, but t has some personal changes (GNOME 3.20 styled urlbar and buttons, urlbar background like a titlebar and bigger tab height) for my personal use.
https://github.com/dyskette/firefox-gnome
I haven't tried Firefox 49 yet, but it should be more compatible.
from firefox-gnome.
In firefox 50 the options menu is restored by renaming panelUIOverlay.css to panelUI.css (it's in theme/shared/browser/customizableui)
I couldn't find this file in ~. Do I need to compile the xpi from source for this?
from firefox-gnome.
@garrett That's the answer I expected! Thank you so much!! 👍
from firefox-gnome.
Also, Firefox Nightly is really nice and amazingly FAST.
Yay 👍
from firefox-gnome.
GTK+3 is in Firefox on Fedora and in the Flatpak nightlies (Firefox doesn't use GTK+ directly, but does pull in some widget theming and colors from it, as well as uses some native dialogs like save, open, and print).
Client-side-decorations (CSD) for Firefox exist in patches in Bugzilla:
https://bugzilla.mozilla.org/show_bug.cgi?id=1283299
Here's a relatively recent quote (2 months ago):
This came up during a UX review of Photon... We'd certainly like to get the
appearance of Firefox on Linux updated to remove the titlebar, but it sounds
like there's enough work remaining here that's it's not going to happen in
the timeframe for the Photon UI refresh in Firefox 57. But I think we would
be interested in helping with the design and front-end UI once the platform
support for this is in place (subject to the usual resource constrains and
priorities, natch).Thanks for pushing this forward in the meantime!
There was activity on the issue as recent as yesterday.
So, the summary of everything I've seen (including, but not limited to the above), suggests that Mozilla does want to land a bunch of updates of the photon effort (UI refresh) in Firefox 57. They want to have GTK+3 and CSD for that timeframe, but CSD is probably realistically going to slip another release or two (as they have their hands full with the tons of changes landing one after another).
This is all great news. The only downside to all of this is the breaking of legacy themes and extensions, which impacts us. But when we can change the photon-ized version of Firefox, there should hopefully be a lot less we'll need to do (as evidenced by the screenshots).
Firefox 57 and beyond will certainly fit in better with GNOME by default than any other web browser (for example: Chrome) besides the actual GNOME web browsers, such as Epiphany (aka: GNOME Web, the official GNOME web browser) or Eolie (which is a new and nice project, but I wouldn't personally use as my main browser for the time being).
from firefox-gnome.
But when we can change the photon-ized version of Firefox,
Actually Mozilla also wants to expand the way simple themes can be used for customizing Firefox. What this covers is not clear AFAIK, but it should be available in FF 57.
from firefox-gnome.
@rugk: Yep totally. I mentioned that specifically way, way above and covered in recent comments too (oh wait, I think that was another bug where I mentioned it recently).
Right now, we don't know what that extended theme format will cover, what it will look like, or when it will arrive. It isn't needed for 57, so it might slip. Even if it does arrive in 57 (which would be nice), we'll still need at least some documentation.
from firefox-gnome.
Some parts already arrived in FF 55 release yesterday or so…
from firefox-gnome.
Tested it in Firefox 57 Beta 14. Light themes works, but with Adwaita Dark it's not perfect yet. The toolbars are dark, but the dialogs are not.
from firefox-gnome.
Related Issues (20)
- Select box arrow goes missing
- Unable to enable dark variant HOT 8
- GNOME Theme Tweaks menu absent in Firefox 47.0 (and perhaps other versions)
- Support for 'Personal Menu' addon
- Developer tools missing horizontal scrollbar
- Scroll bar one pixel away from edge of window HOT 2
- Compatibility with Firefox 48 HOT 2
- Favicons turn greyscale when unfocused
- "New tab" page on private windows on FF 48
- No indication that a window is private browsing
- Incorrect padding in URL input bar
- GNOME Theme Tweak is "Not compatible with multiprocess"
- Incompatible with Firefox 50 HOT 11
- Alternative now firefox-gnome is going to die (due to firefox advanced theme support removal) HOT 1
- Download dialog broken in Firefox 51
- Menu layout broken, missing options in Firefox 51 HOT 3
- Firefox 53 audio/video controls HOT 2
- Incompatiable with Firefox 57 HOT 5
- Theme obsolete - point to kurogetsusai/firefox-gnome-theme in README HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from firefox-gnome.