rafaelmardojai/firefox-gnome-theme

A GNOME👣 theme for Firefox🔥

Hi there 👋

I'm a Web Developer working on open source projects in my free time, mainly GNOME desktop related projects.

I work on nice native GNOME apps and also develop themes to integrate popular software with GNOME.

Apps for GNOME

• Blanket
• Dialect (co-maintainer)
• Forge Sparks
• Share Preview
• Webfont Kit Generator
• Diccionario de la Lengua

GNOME integration themes

• Firefox GNOME theme
• Thunderbird GNOME theme

If you want to support my work, you can donate me, here you can find how.

firefox-gnome-theme's Issues

Popover in developer tools

Screenshot:

Fix GNOME stack icons coloring issues

The headerbar buttons color need some improvements. they are greyed out. even with the dark theme enabled.

The headerbar buttons with light theme (they should be black like the reload button!!).

The headerbar buttons with dark theme (they should be in white color!).

Hide the tab bar when only one tab that is open doesn't work

I use Firefox 68.0 on Ubuntu 18.04

Script Errors

This errors occurs when the auto install method is applied.

./scripts/install.sh: linha 26: cd: /home/arch/.mozilla/firefox//*.default: Arquivo ou diretório inexistente
Installing theme in /home/arch/Repositories/firefox-gnome-theme
Coping repo in /home/arch/Repositories/firefox-gnome-theme/chrome
cp: não é possível copiar um diretório, '/home/arch/Repositories/firefox-gnome-theme', para si próprio, '/home/arch/Repositories/firefox-gnome-theme/chrome/firefox-gnome-theme'
Enabling GNOMISH extra features
Set configuration user.js file
Done.

Browser shadow slightly visible on second screen when in fullscreen

I'm using two monitors. When using Firefox in fullscreen the shadow of the browser is slightly visible on the second monitor. I have the "Hide Single Tabs" option enabled if that's important.

matching-autocomplete-width isn't working after upgrading to firefox 67.0.3

matching-autocomplete-width isn't working after upgrading to firefox 67.0.3

Instructions unclear

Do we clone the repo into the chrome folder, or do we just replace our userChrome.css with the one in this repo?

It looks like the userChrome.css is dependent on the themes folder in this repo, but you cannot tell this from the README.

Empty space at the right side of tab bar

There's an empty space to the right of the tabs at all times, which doesn't seem to serve a purpose and makes the tab bar look uneven.

The space does not seemingly represent an element which could be removed via ‘Customize…’ However, it does shrink to a smaller length when the window's width decreases significantly (to 400px or so).

I'm running GNU Icecat 60.7.2 (freed & tweaked Firefox), installed with the package manager GNU Guix on Parabola GNU+Linux-libre (freed Arch). I suppose the issue might stem from my somewhat odd setup, but am not sure. Please let me know if I can do anything to investigate further!

Extension pop-ups have inconsistent white background

Pop-ups of extensions may have white background or background of other colors. Like this one:

Is there any way to make the white gray, or crop the original popups instead of adding borders with round corners?

Mozilla Account icon

I use Fedora 30, Firefox 67 and the latest firefox-gnome-theme. Mozilla account name is above the icon in the menu.

(Thanks for the project, I am really happy to use it)

Window inactive issues

Latest Firefox on Wayland. Fedora. When dragging headerbar the window chrome becomes unfocused.

Missing optoin to enable/disable colored URL bar in private browsing

The option is referenced here:

firefox-gnome-theme/userChrome.css

Line 13 in 9c4b43b

* If you are using it, you might wanna enable the next feature too. Also you

The "next feature" referenced here was "Replace the private browsing indicator with a colored URL bar", but is currently missing.

Improvements/Issues dump

Broken :

• Add Bookmark buttons look broken
• Add Search engine option from address bar looks broken
• Extensions like feeds use dark font on dark backgrounds
• Volume button too close to X button
• Bookmark animation is broken
• Dropdown selected tab with blue line gets obscured when hovering

Improvements :

• Scrollbar theming (it's not dark on dark mode and doesn't act like GTK programs)
• Find view could be changed to be more similar to Epiphany's and other gnome programs
• Results Not connected to URL bar and no limit to height like Epiphany has
• Certificate information theming
• Permission request buttons theming
• Download overview theming

I didn't create an issue for each since I thought it'd be be too much

Findbar searchbox's text isn't vertically aligned at the center

Findbar searchbox's text isn't vertically aligned at the center

Some cases need to use gnome theme arrow

• History Sidebar
  

• Bookmark manager window
  

• Bookmarking new page
  

Scrollbar theming

Moved from #2

The Close Tab Button Looks Ugly

The Close Tab button doesn't look good. The rectangle that shows up when the cursor hover over the button should be smaller and shouldn't border with the tab.

Make menu dropdown uses gnome icon theme arrows

I think we need to make menu dropdown uses gnome icon theme arrows to match other arrows anywhere else

Also dropdown menus and buttons arrows

Nicely center findbar search field when sidebar is present

Hello, thanks for this theme!

I wanted to mention that the findbar's search field is nicely centered in an ordinary Firefox window, but it is no longer when you have a sidebar such as the bookmarks sidebar open.

It seems to always center itself on your screen, and not on the viewport of the site or the findbar's width.

Thanks!

Support diferent GTK themes

I use the Mojave-Light theme from gnome look and it doesn't use that theme. Any possibility for this to simply adopt the theme from the user instead of having Adwaita coded into it?

Installation script

Please test WIP installation script.

bash <(curl -s https://raw.githubusercontent.com/rafaelmardojai/firefox-gnome-theme/master/scripts/install.sh)

It optionally accepts flags:

• -f $firefox_folder (Sets custom Firefox folder)
• -p $profile_folder (Sets custom profile folder)
• -g (Auto enable GNOMISH extra features hide-single-tab.css & matching-autocomplete-width.css)

For example this will work for flatpak and icecat:
bash <(curl -s https://raw.githubusercontent.com/rafaelmardojai/firefox-gnome-theme/master/scripts/install.sh) -f ~/.var/app/org.mozilla.FirefoxNightly/.mozilla/firefox/

bash <(curl -s https://raw.githubusercontent.com/rafaelmardojai/firefox-gnome-theme/master/scripts/install.sh) -f ~/.mozilla/icecat/

hide-single-tab is not respected in full screen

but I enabled hide-single-tab

"show sidebar" button doesn't remain pressed when sidebar is active.

title is self explanatory. When the sidebar is activated/open, the "show sidebar" button is not activated/pressed. This is an inconsistency since both history and hamburger menus remain pressed when opened.

"List all tabs" button is invisible

The icon to list all tabs is missing when using Adwaita icons provided by the theme. I installed using the install script and the "-g" option. It looks like this.

Different active tab colors

For some reason, the active tab color is different for certain tabs (couldn't identify a pattern yet). At the first image below, it is good but at the second one it is hard to identify the active tab.

Scrollbar theming is broken/bugged in some places

• Sidebar is always "hovered"
• Bookmarks/Library has a darker scrollbar resulting in low visibility of it, it also looks skinnier.

Theme variants behavior

I have discover the @media (prefers-color-scheme: dark/light) media query. So now we have a way to detect if host theme is light or dark when default theme is selected in Firefox.

Should we keep support for Firefox light/dark theme selector? (:-moz-lwtheme and :-moz-lwtheme-brighttext pseudo classes)

There should be a gap here.

THe gap between the title on the title bar and the buttons is non-existent and it's not pleasing.

Distribute patches

I think this is the way to go for easy installation.
New repo should be created to this purpose, and keep this repo as CSS source and theme-hack. (I'm also considering switch to sass/less, for a easy code maintenance and generate a single css file)

I have no idea about patching/packaging, so i'm asking for:

• Figure out what needs to be put where.
• Name proposals, we should rebrand Firefox to distribute it.
• Package maintainers, to distribute css patches.

user.js

A user.js needs to be created.

Proof of concept:

// Enable customChrome.css
user_pref("toolkit.legacyUserProfileCustomizations.stylesheets", true);

// Enable CSD
user_pref("browser.tabs.drawInTitlebar", true);

Installation script should include a flag for dark mode (maybe -d), to add ui.systemUsesDarkTheme.

Download manager icons are too big

I use Fedora 30, Firefox 67 and the latest firefox-gnome-theme.

It is Download manager (sorry for Russian UI). The Back and Forward buttons are too big.

Dragging the headerbar buttons doesn't drag the window

I don't know if this can be implemented in the theme, but in GNOME applications, click+dragging a button in the headerbar drags the window, thus providing a larger draggable area. With this theme, if Firefox has a small window, the UI elements pack closely together, and the draggable area becomes quite small.

Misalignment and extra border in search entry in headerbar

Screenshot:

Theme doesn't respect system fonts settings

Maybe I am missing some fonts?
https://imgur.com/ARnbLmZ
Thanks.

Issue dump 2

• Sign/Account item in the hamburger menu is off-set when not logged in resulting in a blank space.
• Container tab colors are no longer lines but instead circles
• List all tabs has space on the left of the volume icon
• Library and other items use black items on dark backgrounds
• Broken back button functionality due to #14 (It normally can be dragged to show back history)
• Block element item (From ublock origin) in context menu has more spacing than other items

I'll post screenshots if you need

Bookmarks and history sidebar text is unreadable in dark theme

In dark theme, the background of the bookmarks sidebar is white, and text is unreadable:

Most files should not be executable

For all files except the script the executable permissions bits should not be set.

Findbar content alignment

Textbox and next & previous buttons are not aligned as you can see, buttons are higher than textbox

Bookmarks and History use dark background with bad readability

Thanks for fixing previous 2 issues so quickly.

Hope you didn’t mind if I will bring another small issue:

Here are Bookmarks and History side panel. In the light theme, it uses a dark gray background. Black is not really readable on this background.

Scrollbar theming doesn't work in sidebar

Right now it's impossible to fix, :hover doesn't work right in hbox scrollbars.

Moved from #39.

Container colors calls more attention than active tab color indication

I find hard to find the active tab in the tabs bar because it is obfuscated by the container colors which is larger and brighter.

Weird flickering in tab bar when hovered over the close tab button

Findbar items overlap when window is narrow

Screenshot:

Dropping gnome-icons.css

Soon GNOME icons will be included in theme as SVG to fix #8. And Adwaita icon theme will be "hardcoded".

So gnome-icons.css main functionality will be included by default.

But I'm considering create system-icons.css, with similar functionality, for the ones not using Adwaita icons and want to use their system icon theme. But facing moz-icon://stock/ issues.

Inconsistent tab alignment when playing audio

First of all, thank you for the theme! I love it.

I noticed an inconsistency when you have a tab that is sharing your webcam. Definitely not a critical bug -- everything works fine -- but it threw me off for a split second.

Here's what the tab looks like when the tab is focused: (text is centered, all is well)

And here's what the tab looks like when it's unfocused: (text is left-aligned, unlike other tabs)

I'd expect the text to remain centered when the tab is unfocused, but it becomes left-aligned.

Tab resize and place behaviour

Can you keep the default tab resize and place behaviour ? The whole of resizing and moving tabs is frustating

Releasing headerbar buttons after dragging the window activates actions for those buttons

If you drag the window by grabbing some buttons like refresh, back, forward, home, new tab etc and then release the buttons, the action related to the button is activated, e.g. the page refreshes or the window is closed (if the close button is dragged).

"show sidebar" button doesn't remain pressed when sidebar is active.

title is self explanatory. When the sidebar is activated/open, the "show sidebar" button is not activated/pressed. This is an inconsistency since both history and hamburger menus remain pressed when opened.

Bookmarks and History have a much longer pop-up compared to Library's

Title says it at all.

Random black artifacts around hamburger menu on Wayland

There's no pattern related to their appearance:

• usually happens when opening the menu for the first time on a page
• doesn't happen on all pages