Giter Club home page Giter Club logo

Comments (34)

N-Yuki avatar N-Yuki commented on June 2, 2024 13

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.

garrett avatar garrett commented on June 2, 2024 10
  1. 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.)
  2. Mozilla keeps changing the way XUL themes work, causing bugs and regressions nearly every release, so it's a constant treadmill fixing things.
  3. 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.
  4. 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).
  5. 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.
  6. 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:

  1. Be simpler
    • easier to jump in and help
    • easier to maintain
    • help streamline the review process (less to look at for Mozilla Add-ons)
  2. 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
  3. 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
  4. 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?

  1. Participate in issue #394
  2. Help out with firefox-gnome-css repo (or at least follow along and/or file issues)
  3. ???
  4. 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.

 avatar commented on June 2, 2024 3

Workaround (using terminal):

  1. cd ~/.mozilla/firefox
  2. cd [into-your-profile-folder]/extensions
  3. 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 using grep -rli gnomeb.
  4. file-roller {451500c0-902c-11e0-91e4-0800200c9a66}.xpi (or the XPI file you found).
  5. Doubleclick the file install.rdf. It should open in gedit or another text editor.
  6. 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.
  7. Now file-roller asks of you want to update the archive. Yes of course we want that. Close file-roller.
  8. Now open Firefox and enable the Gnome theme (if it refuses just restart Firefox first). You have to restart. Done!

from firefox-gnome.

lbrfabio avatar lbrfabio commented on June 2, 2024 3

@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.

garrett avatar garrett commented on June 2, 2024 3

FYI: Here's the current state of CSD (client side decoration) in Firefox, from a screenshot within this past week:

2017-08-25 17-11-20 gnome default theme

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.

garrett avatar garrett commented on June 2, 2024 2

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):

screenshot from 2017-08-07 19-04-04

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:

screenshot from 2017-08-07 19-07-10

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):

screenshot from 2017-08-07 19-09-28

You can de-clutter it a bit and add spacers around the location bar, similar to GNOME Web (aka: Epiphany) as well:

screenshot from 2017-08-07 19-14-53

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.

Dreamsorcerer avatar Dreamsorcerer commented on June 2, 2024 2

That looks great. If we can get an integrated header bar, then it would be almost perfect.

from firefox-gnome.

emmanueltouzery avatar emmanueltouzery commented on June 2, 2024 1

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.

ptkato avatar ptkato commented on June 2, 2024 1

@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.

bboozzoo avatar bboozzoo commented on June 2, 2024

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.

 avatar commented on June 2, 2024

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.

t-nelis avatar t-nelis commented on June 2, 2024

@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.

SrAceves avatar SrAceves commented on June 2, 2024

¡Fantásitco! Gracias.

from firefox-gnome.

charles-m-knox avatar charles-m-knox commented on June 2, 2024

Thanks @N-Yuki ! Worked like a charm.

from firefox-gnome.

brittyazel avatar brittyazel commented on June 2, 2024

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.

Ecron avatar Ecron commented on June 2, 2024

And yet not official response from the team...

from firefox-gnome.

tn-osimis avatar tn-osimis commented on June 2, 2024

Note that there is some work to do.

Firefox 48.0 Gnome integration address bar bug

(Sizing, spacing between labels.)

from firefox-gnome.

Dragnucs avatar Dragnucs commented on June 2, 2024

@tn-osimis How did you manage to get rounded window cor,er and empty space around the URL bar?

from firefox-gnome.

tn-osimis avatar tn-osimis commented on June 2, 2024

@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.

Dragnucs avatar Dragnucs commented on June 2, 2024

@tn-osimis Thank you.

from firefox-gnome.

ptkato avatar ptkato commented on June 2, 2024

It might work in Firefox 48, but it's broken in Firefox 50. The options menu freaked out.

from firefox-gnome.

 avatar commented on June 2, 2024

@seleznev @0rAX0 Any updates on this?

from firefox-gnome.

 avatar commented on June 2, 2024

#394 (comment)

from firefox-gnome.

emmanueltouzery avatar emmanueltouzery commented on June 2, 2024

@ptkato thank you! that helped a lot :-)

from firefox-gnome.

eduardohenriquearnold avatar eduardohenriquearnold commented on June 2, 2024

@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.

dyskette avatar dyskette commented on June 2, 2024

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.

captura de pantalla de 2016-11-12 11-29-39

https://github.com/dyskette/firefox-gnome

I haven't tried Firefox 49 yet, but it should be more compatible.

from firefox-gnome.

jhasse avatar jhasse commented on June 2, 2024

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.

Ecron avatar Ecron commented on June 2, 2024

@garrett That's the answer I expected! Thank you so much!! 👍

from firefox-gnome.

rugk avatar rugk commented on June 2, 2024

Also, Firefox Nightly is really nice and amazingly FAST.

Yay 👍

from firefox-gnome.

garrett avatar garrett commented on June 2, 2024

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.

rugk avatar rugk commented on June 2, 2024

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.

garrett avatar garrett commented on June 2, 2024

@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.

rugk avatar rugk commented on June 2, 2024

Some parts already arrived in FF 55 release yesterday or so…

from firefox-gnome.

 avatar commented on June 2, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.