Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Firefox theme (proposal) #78

Open
Scindix opened this issue Sep 25, 2016 · 38 comments

Comments

Projects
None yet
@Scindix
Copy link

commented Sep 25, 2016

I'm not sure if this is the right place for this as strictly spoken it is not a bug report or feature request, but it is the only place I found.

I really love this theme. It is the only gnome theme that really looks bleeding edgy modern.
However it bothered me that firefox doesn't really fit in. So I developed a theme on my own.

I also discovered that a firefox theme is also planned as part of this repository:

Supports of Firefox theme

So I asked myself if you are interested in getting my theme. Some things are hacky, most things were done quick and dirty. Especially that css-keyframe animation that should handle the zooming circle on button works, but not quite as expected (although it strangely worked on my website). Also it is far from complete. I haven't done any menu, about page or private browsing indication yet and the url bar has still some aspects that need to be worked out. But hey it's a start!
The theme is based on the gnome integration theme.

I'm attaching some screenshots and the xpi file. Feel free to use it (if you want to).

screenshot from 2016-09-25 00-19-55
screenshot from 2016-09-25 00-20-58
screenshot from 2016-09-25 00-23-45
out
out2

And here goes the extension itself: https://own.arrakiz.org/index.php/s/t4NWodBqeyWIXmu

(For me the classic theme restorer occasionally chrashed with this theme. So be sure to uninstall it if you have it. And be sure that you have HTitle installed:
https://addons.mozilla.org/en-US/firefox/addon/htitle/?src=userprofile )

@Skehmatics

This comment has been minimized.

Copy link

commented Sep 25, 2016

Do you have your work on github? You should submit a pull request!

The hackyness shows in a lot of ways, but hey its a start

@Scindix

This comment has been minimized.

Copy link
Author

commented Sep 25, 2016

No, (not yet).
The hackyness is kind of the point I didn't have the courage to submit it. I should probably remove the bugs, fix the ripple effect, implement the missing stuff and tidy up the CSS code first.
I originally started this as a just for fun project.
But I will do it when I have more time.

@knight-corvi

This comment has been minimized.

Copy link

commented Sep 25, 2016

This thing looks beautiful!

On Sat, Sep 24, 2016 at 8:04 PM, Cedric Wehrum notifications@github.com
wrote:

No, (not yet).
The hackyness is kind of the point I didn't have the courage to submit it.
I should probably remove the bugs, fix the ripple effect, implement the
missing stuff and tidy up the CSS code first.
I originally started this as a just for fun project.
But I will do it when I have more time.


You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
#78 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ADS0WBdSzfkvmz__0r_54MBrGp8Owipfks5qteS9gaJpZM4KFx9B
.

@USBA

This comment has been minimized.

Copy link

commented Sep 25, 2016

@Scindix It's really cool!
How to install this theme on Firefix ?

@Scindix

This comment has been minimized.

Copy link
Author

commented Sep 25, 2016

@USBA

  1. Install HTitle: https://addons.mozilla.org/en-US/firefox/addon/htitle/?src=userprofile
  2. Go to about:addons and click on extensions. Then click on "Preferences" in the HTitle row.
    For Gnome shell click on "Always", for Unity click on "When maximized". Unity is not supported however. It'll look like the gnome shell version, but with a title bar.
  3. Download the theme: https://own.arrakiz.org/index.php/s/t4NWodBqeyWIXmu
  4. Go to about:addons again and click on the gear icon / "Install Add-on From File": screenshot from 2016-09-25 14-38-39
    Open the downloaded file, click on "Install" and then on "Restart now". Voila!
  5. Be prepared for some bugs.
@cthbleachbit

This comment has been minimized.

Copy link

commented Sep 26, 2016

As a packager, I really go against stuffing chrome, firefox addons here. Firefox theme is great, but it should be in a separate repository as these themes here are for the DEs and not app specific. A link in README to your repository would do the trick.

@USBA

This comment has been minimized.

Copy link

commented Sep 26, 2016

@Scindix Thanks dude. It's really great.

@nana-4

This comment has been minimized.

Copy link
Owner

commented Sep 26, 2016

Wow, it looks really great! Thank you for your hard work!
I'd love to incorporate your brilliant work, but it might be better to have a separate repository as MPL. :)

@nana-4

This comment has been minimized.

Copy link
Owner

commented Sep 26, 2016

@cthbleachbit Hmm, I don't think it's odd to stuff them. Because they are intended to match the appearance of this theme. And also, app specific style are not always only addons. For example, this GTK3 or GTK2 theme also has specific styling for third party apps.

@jgato

This comment has been minimized.

Copy link

commented Oct 3, 2016

wuauuuh it looks really cool!!! But this is how it looks in my firefox
screenshot from 2016-10-03 16-04-13

How do you plan to show the tabs?

:(

@jgato

This comment has been minimized.

Copy link

commented Nov 14, 2016

any progress on that?

@bilelmoussaoui

This comment has been minimized.

Copy link

commented Nov 14, 2016

The theme looks pretty great indeed.
capture d ecran de 2016-11-14 13-18-58
As you can see, there're two issues

  • Maximize and minimize buttons are not colored the same way as the close button.
  • The URL text area is themed differently when it's focused
    capture d ecran de 2016-11-14 13-20-51
    I think that the theming should stay the theme, just add a nice shadow or something else when it's focused. Don't anything about Material design guidelines but it will look better (i hope)
@Scindix

This comment has been minimized.

Copy link
Author

commented Nov 14, 2016

@jgato I'm pretty busy with other stuff right now. But I haven't forgotten it.
The only progress I made so far is that I designed and integrated some plain white icons for common add-ons like AdBlockPlus.
The tab bar and the navigation appear in reversed order for me and not in normal order like for you. I'm using flex-box properties for this. Maybe you are using an older version of Firefox that doesn't support flex-boxes yet or some Add-on or Stylish script that conflicts with the theme? It would be helpful for me to figure out the problen if you could tell me your FF version, your installed Add-ons and your Stylish scripts (if you have any).

@bil-elmoussaoui
I will consider that. I used a similar design concept than gnome browser (epiphany) which I personally really like on a "looks" point of view.
However working with it I discovered some really great disadvantages especially for small screens. So I will probably remove the focus animation.

@jgato

This comment has been minimized.

Copy link

commented Nov 15, 2016

@Scindix I think the problem was the gnome-theme extension I was using, because I have been using gnome theme (theme) for long time. Now:

screenshot from 2016-11-15 07-33-42

As you said, now I have the tabs bar below the navigation bar. I would prefer the other way around, with the tabs bar in the top. I dont know, it looks more modern in my opinion. Other issues I have found :

  • I cannot see minimize, maximize buttons.
  • When I start typing in the navigation bar, the pull down options width is the maximum horizontal of the window. It looks strange and with tinny fonts.

Finally, did you consider that firefox themes will be soon no longer suported? here more info and here the firefox gnome-theme team talking about it and moving to Firefox User Styles.

In any case, this will be my theme nowadays ;)

@nana-4

This comment has been minimized.

Copy link
Owner

commented Nov 15, 2016

Sorry but I was also busy with other stuff, so I could not focus on this.

BTW, I also noticed that Firefox might remove support for heavyweight themes. So I was experimentally making a theme based on the firefox-gnome-css repo and @Scindix 's great theme. This is still under development, so the code is quite dirty and big bugs are left. (e.g. the close button is not displayed on the top right.) But I will publish it in the hope of being helpful for something. 😎

Here: http://pastebin.com/Fz2Sq4Er

It is installable via Stylish.


Update: I've added previews.

  1. with HTitle
    image
  2. without HTitle
    image
@GeorgeSapkin

This comment has been minimized.

Copy link

commented Nov 16, 2016

The only issues with HTitle + Stylish script is that the window becomes undraggable using the top bar and needs to be dragged using that small bar in the top right corner (when window controls are enabled in HTitle settings).

@morsik

This comment has been minimized.

Copy link

commented Nov 24, 2016

@GeorgeSapkin: when using Linux you can drag windows by using Alt+LeftMouseButton (or Super+LeftMouseButton in GNOME Shell) since… always.

I almost never use titlebar for dragging windows, unless I'm eating ;)

@jgato

This comment has been minimized.

Copy link

commented Dec 17, 2016

@nana-4 I dont know why with your version my tabs looks so dark :(

imagen

@nana-4

This comment has been minimized.

Copy link
Owner

commented Dec 22, 2016

@jgato
Sorry for the late reply.
It seems that you are setting devtools.theme to dark.
To display the theme correctly, please reset the value or change the value to light.

image

@jgato

This comment has been minimized.

Copy link

commented Dec 23, 2016

It worked, thanks...

@Baemir

This comment has been minimized.

Copy link

commented Jan 2, 2017

screenshot from 2017-01-02 04-30-05

:(

@nana-4

This comment has been minimized.

Copy link
Owner

commented Jan 2, 2017

@Baemir
I'm not the author of flat-plat.xpi, but you should be able to install it using this:
https://addons.mozilla.org/ja/firefox/addon/checkcompatibility/

@jgato

This comment has been minimized.

Copy link

commented Feb 7, 2017

we are excited for new versions guys :D :D

@Scindix

This comment has been minimized.

Copy link
Author

commented Feb 7, 2017

@Baemir I have stopped development on the xpi extension since nana-4 started developing the Stylish script. As complete themes definitely will be shut down by Firefox I think that makes sense.
I recently checked it and my theme is incompatible with current versions of Firefox. Disabling the "Check compatibility" feature as nana-4 suggested will successfully force Firefox to use the theme, but some menus will be unusable.

@jgato I made some adjustments in the stylish script from nana-4. E.g. making the navigation bar draggable, adding flat icons for browser functions and common plugins or correction the scope of the CSS rules. I will post them here when I'm back home.

However I doubt that this development will lead to something because Mozilla now also announced that they want to shut down their plugin engine altogether by November. (See https://blog.mozilla.org/addons/2016/11/23/add-ons-in-2017/ )
Instead they're replacing it with the all new WebExtensions API which has far less capabilities. I'm still reading through Mozilla's API and thus I still need to confirm this, but it doesn't seem to provide any method of injecting CSS into the browser UI. The developers of Stylish have announced that they will switch to the Chrome WebExtension and make it available for Firefox. However there is currently no support for modifying the browser UI (See https://forum.userstyles.org/discussion/47242/the-future-of-stylish-for-firefox ). They say it's one of their goals to preserve that functionality, but I highly doubt that Mozilla will add necessary API functions as they are shutting down XUL as well. And XUL was the whole basis of being able to style the browser UI via CSS.

It seems that Mozilla's approach of "Make Firefox Great Again" will lead us into a dark future in terms of the freedom that Firefox always provided compared to other browsers. My only hope is that Mozilla puts an unexpected big effort into the WebExtensions API and make it much more potent than anticipated (and much more potent than Chrome's engine). But for the moment it doesn't look like that.

@jgato

This comment has been minimized.

Copy link

commented Feb 7, 2017

good overview @Scindix I have been a supporter of Firefox from years ago, even before of changing the name to Firefox. I have read other articles about complains with this changes and the WebExtensions API, that I dont know how they work.
I remember once programming an addon with XUL and JavaScript but even having to link it with other internal libraries in C. XUL seemed to me like a nightmare, you could modify the XUL of any place powerful, funny, but... it opens the possibility of making a big mess. Specially when you start mixing lots of add-ons. In the other hand, nowadays... at least for me, I use less and less addons, so maybe we dont need so much flexibility in the framework for addons.
Is Webextensions API related to the new [testpilot](https://testpilot.firefox.com/]? These new addos are awesome!! The kind of new-fresh functionalities I like in a browser.
do you also think Mozilla is doing wrong?

@nana-4

This comment has been minimized.

Copy link
Owner

commented Feb 21, 2017

Hi, I'm sorry for the late response.
Well, I investigated a bit about the future trend of Firefox themes and found some good materials.

If my understanding is not wrong, it seems that the new "Firefox theme" will be like the Chrome theme, and detailed customization by CSS is likely to be impossible as @Scindix pointed out. I didn't assume this, haha...

I don't know what will happen in the future, but even if I continue to develop the CSS-based theme, it is likely that efforts will be in vain, so I'd like to stop this work once and see how it goes.

P.S.1. Either way I also would like to see the stylish script adjusted by @Scindix. :D

P.S.2. Although it is true that some functions are restricted by migrating to WebExtensions, I think it is reasonable from the viewpoint of maintainability, standardization, etc.

@The-King-of-Toasters

This comment has been minimized.

Copy link

commented Aug 20, 2017

Just thought show everyone how Flat-Plat looks when using the new Stylo interface on FF 57. IMO the theme integrates well with the new interface, but obviously it is a far cry from the stylish theme posted above.

@davegregg

This comment has been minimized.

Copy link

commented Sep 2, 2017

@The-King-of-Toasters Can you post that image to a longer-term host? I'm getting a 404 right now. Thanks!

@The-King-of-Toasters

This comment has been minimized.

Copy link

commented Sep 27, 2017

@davegregg Sorry for the late reply, here it is on imgur.

@The-King-of-Toasters

This comment has been minimized.

Copy link

commented Nov 17, 2017

Hey all, Mozilla just enabled Client-Side Decorations in the ff59 nightly, here's a screenshot showing how it looks. Other than a official theme I think this is as good as it gets. It's not as gnomey as Gnome Web, but I think a userChrome.css fix could be in order. Although that's up to the discretion of @nana-4. TBH i just want my check boxes fixed first.

@nana-4

This comment has been minimized.

Copy link
Owner

commented Nov 17, 2017

I think userChrome.css is no longer available as well as many extensions (because XUL is no longer used in Firefox). I agree with approaching GNOMEy as much as possible, but now let's await for next-gen themes ability to be announced. :)

p.s. The check box issue has now been fixed now.

@The-King-of-Toasters

This comment has been minimized.

Copy link

commented Nov 20, 2017

Oh no, userChrome is alive and well, there's even a subreddit dedicated to it. It might be harder to style given the UI changes and new documentation (I haven't really looked into that aspect.

People are making some cool stuff like bringing back Australis and colorizing the url bar to match a sites SSL security (which I'm using right now). So the future kinda looks bright.

p.s. The check box issue has now been fixed now.

Neat. Thanks @nana-4!

@nana-4

This comment has been minimized.

Copy link
Owner

commented Nov 20, 2017

@The-King-of-Toasters Oh, I seem to have jumped to the conclusion. Thanks for teaching me!

@ChrisLane

This comment has been minimized.

Copy link

commented May 17, 2018

Any update on a theme for current versions of Firefox?

@nana-4 nana-4 added the support label May 29, 2018

@benneti

This comment has been minimized.

Copy link

commented Dec 9, 2018

@btd1337

This comment has been minimized.

@btd1337

This comment has been minimized.

Copy link

commented Dec 15, 2018

What do you think of being based here?

https://github.com/muckSponge/MaterialFox

@jakiw

This comment has been minimized.

Copy link

commented Feb 16, 2019

I used Firefox color and the GIMP colorpicker to choose the same colors for Firefox as the KDE Materia theme uses for Dolphin: Link

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.