A Material Design-inspired userChrome.css theme for Firefox

By Muck
Last update: Dec 29, 2022
Comments: 16

MaterialFox

A Material Design-inspired userChrome.css theme for Firefox

This theme is powered by blood, sweat, and coffee. If you like it, please consider helping out to support its continued development.

What this does

Inspired by Google's Material Design and their latest Google Chrome UI, this theme turns your Firefox into a Material-styled web browser. The aim was to style the browser as closely as possible to Google Chrome, where practical.

This is a userChrome.css theme, which means you must manually add it to your Firefox profile. The theme overrides certain browser styles. Currently, only the main UI is affected (settings pages, etc. are not). More elements of the UI may be styled in the future but a broader scope becomes harder to maintain as Mozilla updates their browser code so some UI styles may be culled or redone if they become unmaintainable.

What version do I use?

Check the releases section. Each release version will match the compatible Firefox version. For example, if you're using Firefox 88, try a v88.x release. If there's no matching release and you're not using an old version of Firefox, go for the latest one. If you're using a beta version of Firefox, you might want to try the master branch, which will have the latest bug fixes.

Installation

Copy the chrome folder and user.js file into your Firefox profile directory. To find your profile directory, go to about:support or about:profiles.
See Recommended instructions if you'd prefer a more Chrome-like experience.
Restart Firefox.

Recommended instructions

Add space above tab bar:

Right click on toolbar -> Customize.
Check Drag Space checkbox.

Replicate Chrome behaviour for clipped tabs:

[about:config] Set browser.tabs.tabClipWidth to 83 (default is 140).

Replicate Chrome's "Not Secure" text on HTTP:

[about:config] Set security.insecure_connection_text.enabled to true.

Please note

Linux is no longer officially supported but you can give it a try – if you'd like to work on it feel free to make a PR.
Some customisation settings may no longer work (such as compact/touch density).
Some custom themes may clash with the address bar.
Some themes using transparency might not work.

Github

https://github.com/muckSponge/MaterialFox

Comments(16)

1

Search broken when using url bar / search bar (72.0.1)
Sanity checks (must complete)
- [/] I have read and followed the installation instructions in the README
- [/] I have not modified the userChrome.css file
- [/] I have tested the latest release or commit on master
Describe the bug It seems the text is being clipped off.

To Reproduce Steps to reproduce the behavior: Type anything into search bar on 72.0.1

System info
- OS: Windows 10
2

Address bar lacks contrast with built-in themes

Firefox's built-in light theme Firefox's built-in dark theme Firefox's built-in default theme - looks better, but I'm not sure if it is fully accurate.

Hover and selected states look fine in all except dark theme. Probably related to #9. Tested on commit b0aa0cd, Firefox 63.0b11, macOS 10.14 (Mojave, light theme).
3

Left tab cut off

Hello,

It seems like the left most tab isn't displayed correctly, I've reinstalled and such, and it seems to be a persistent issue. Adding a spacer shows that that part of the UI is "loading" but it just is cut off somehow
4

Firefox Color support

Not sure if it makes sense to support Firefox Color, but I thought I'd raise the issue anyway; the issue being that some of the pre-selected themes don't play nice with this theme.
5

HTTP passwords are marked secure

When looking at a normal HTTP site, the lock changes to an info icon like Chrome (please recommend users to enable security.insecure_connection_text.enabled for the "Not Secure" text - see PR #27).

However, when looking at a HTTP site with a password field, the info icon persists but the normal lock icon persists too, which is a huge security issue.

I would recommend swapping the broken lock with the warning icon and when the icon exists, make the whole text red, like Chrome in October (also available now on broken HTTPS, FWIW).

Firefox 63.0b6, macOS 10.13.6.
6

Urlbar broken in Fx74 beta
Sanity checks (must complete)
- [x] I have read and followed the installation instructions in the README
- [x] I have not modified the userChrome.css file
- [x] I have tested the latest release or commit on master
To Reproduce Firefox 74

Screenshots

System info
- OS: Windows 10
- Firefox version: 74
7

animated tracking protection icon (shield) positioned incorrectly

Although the static shield icon is not displayed, the space for it is still reserved and pushes the animated icon down. Reproduction link: https://www.minecraft.net/en-us/ OS: Win10 FF Version: 70
8

Opening customize menu with full tab bar makes tabs favicon-only
Sanity checks (must complete)
- [x] I have read and followed the installation instructions in the README
- [x] I have not modified the userChrome.css file
- [x] I have tested the latest release for my Firefox version, or commit on master/beta branch (beta is for Firefox Beta only)
  Note that I'm using Firefox Developer Edition
Describe the bug First: Take changes from https://github.com/muckSponge/MaterialFox/pull/242 to stop tabs from shaking (Issue is reproducible even without this) When the complete tab bar is filled (such that opening a new tab will make tabs smaller), opening the customize menu will remove titles and leave only favicons in all tabs until customize menu is closed and enough tabs are closed to have extra space in the tab bar

To Reproduce Steps to reproduce the behavior:
1. Enable MaterialFox
2. Open enough tabs to fill the tab bar (such that the plus sign is at the extreme right of your window), or shrink your window size so that the existing tabs fill the tab bar
3. Open customize menu ---- [Issue]
4. Close customize menu ---- Issue persists
5. Close enough tabs to have some extra space in the tab bar
6. Titles are visible again
Screenshots (GIF)

System info
- OS: macOS 10.15.6
- Firefox version: 80.0b2
Additional context Note that this issue isn't seen without opening the customize menu (by just opening tabs)
9

Firefox 70 Tracking Protection
Firefox 70 (currently in Nightly) is adding a separate Tracking Protection panel.

Since such feature doesn't exist in Chromium (yet), here's how I would suggest implementing this:
- Align to right with z-index (before or after page actions)
- Set the icon to Chrome's built-in adblock
- Make it appear on hover if disabled/not blocking on site
- Make it permanently appear if blocking
10

Firefox 65

Hello! I just upgraded to Firefox 65 and I get two issues I can explain them better with a picture:

https://imgur.com/a/GKueOkW

I'm running Windows 10
11

New update breaks certain UI Elements (89.0b2 (64-bit), April 2021)
Filing this bug as good practise, unfortantely I don't have the time to attempt a fix.

Describe the bug UI changes breaks some elements.
- Shadow on tabs
- Oval user avatar in menu bar
- Context menus do not align
- Reverts to Firefox icons for home, back etc
To Reproduce Update Firefox Developer Edition to 89.0b2 (64-bit).

Screenshots

System info
- OS: Mac OS
- Firefox version: Developer 89.0b2 (64-bit)
12

Added bookmarks folder icon to be like chrome
Edit: For all fixes in other issues and pull requests you can check out my fork of this repo here

Download the below image

Rename the file to "bookmarkfolder.svg"

Put the file in chrome\icons

Add the following in chrome\icons\icons.css
```
	#personal-bookmarks .bookmark-item
	{
		list-style-image: url(bookmarkfolder.svg) !important; 
	}
```
Before:

After:
13

Fix: tab bar height, new tab button alignment and multi-account containers colored bar
Edit: For all fixes in other issues and pull requests you can check out my fork of this repo here

The tab bar height is fixed by editing the margin:

In chrome\tabbar\tabbar.css

change the following:
```
Line 129:

from:
margin-top: 4px !important;

to:
margin-top: -4px !important;
```
The new tab button will be misaligned, to fix:
```
Line 492:

from:
margin-inline-start: 6px !important;

to:
margin-inline-start: 4px !important;
margin-bottom: 4px !important;
margin-top: 4px !important;
```
The tab before:

The tab after:

If you find any issue in your browser you can edit the margins to your liking.

If you use multi-account containers you will see that the colored bar at the bottom of the tab is either gone or it's gone when switching to another tab, to fix:

In chrome\userChrome.css

add the following:
```
/*move multi-account containers color to the bottom of the tab*/
.tab-context-line {
  margin: var(--tab-min-height) var(--inline-tab-padding) 0 !important;
}
```
In chrome\tabbar\tabbar.css

change the following:
```
Line 529:

from:
height: 2px !important;

to:
height: 6px !important;
```
```
Line 546:

from:
bottom: calc(100% - 9px) !important;

to:
bottom: calc(90% - 9px) !important;
```
Before:

After:
14

Is this project dead?

Last commit a year ago, and the latest Firefox version is now 10 later than the latest release of this theme. I absolutely love this theme and its a great theme. Its just a bit broken on Firefox 103.0!
15

Fixed URL address text padding when urlbar is in focus but not open.
Describe the bug The vertical padding (specifically top padding) of the URL address text is incorrect within its container when you open or switch to a new tab and have focus on the search bar.

To Reproduce Steps to reproduce the behavior:
1. Install MaterialFox chrome folder and user.js to profile root directory
2. Restart Firefox
3. Open new tab or click on address bar -> switch tabs -> return back to original tab (make sure you are not in the focus mode where it shows you autocomplete suggestions list)
Screenshot BEFORE fix Look at the URL text inside the address bar... System info
- OS: MacOS
- Firefox version: 103.0b9
How I fixed it On line #208 in chrome/urlbar/urlbar.css, I separated the horizontal and vertical padding values for the URL address text within the address bar. I noticed that it was setting ALL padding (every direction) to 0 but the desired styling was 0 padding for the horizontal directions (left and right) and automatic (evenly spaced) padding for the vertical directions (top and bottom). Below is the line of code I changed:
```
from
	padding: 0 !important;
to
	padding: 0 auto !important;
```
Screenshot AFTER fix Look at the URL text inside the address bar...

Hope this helps!
16

URL Address Text has incorrect vertical padding while focused after opening new tab.
Sanity checks (must complete)
- [Y] I have read and followed the installation instructions in the README
- [Y] I have not modified the userChrome.css file
- [Y] I have tested the latest release for my Firefox version, or commit on master/beta branch (beta is for Firefox Beta only)
Describe the bug The vertical padding (specifically top padding) of the URL address text is incorrect within its container when you open or switch to a new tab and have focus on the search bar.

To Reproduce Steps to reproduce the behavior:
1. Install MaterialFox chrome folder and user.js to profile root directory
2. Restart Firefox
3. Open new tab or click on address bar -> switch tabs -> return back to original tab (make sure you are not in the focus mode where it shows you autocomplete suggestions list)
Screenshot System info
- OS: MacOS
- Firefox version: 103.0b9
Additional context I have a fix. It's a one line change that I will PR momentarily.