A Material Design-inspired userChrome.css theme for Firefox

  • By Muck
  • Last update: Dec 1, 2022
  • Comments: 17

MaterialFox

A Material Design-inspired userChrome.css theme for Firefox

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

Buy me a coffee

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

  1. 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.
  2. See Recommended instructions if you'd prefer a more Chrome-like experience.
  3. 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(17)

  • 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. image

    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 screenshot 2018-10-04 at 11 02 51 Firefox's built-in dark theme screenshot 2018-10-04 at 11 11 59 Firefox's built-in default theme - looks better, but I'm not sure if it is fully accurate. screenshot 2018-10-04 at 11 14 12

    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

    image

  • 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. ff-urlbar-shield-glitch 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) Screen Recording 2020-08-01 at 6 29 17 AM

    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 Screenshot 2021-04-22 at 09 07 41

    Screenshot 2021-04-22 at 09 09 55

    System info

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

    Added bookmarks folder icon to be like chrome

    Download the below image

    bookmarkfolder

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

    After: 2

  • 13

    Fix: tab bar height, new tab button alignment and multi-account containers colored bar

    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;
    

    2022-08-13 14_22_45-NVIDIA GeForce Overlay DT

    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: 2022-08-13 13_45_52-NVIDIA GeForce Overlay DT

    The tab after: 2022-08-13 13_46_37-NVIDIA GeForce Overlay DT

    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: 2022-08-13 13_51_08-NVIDIA GeForce Overlay DT

    After: 2022-08-13 13_53_24-NVIDIA GeForce Overlay DT

  • 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... Screen Shot 2022-07-24 at 3 08 47 PM 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... Screen Shot 2022-07-24 at 3 34 29 PM

    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 Screen Shot 2022-07-24 at 3 08 47 PM 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.

  • 17

    Address bar totally broken on any dark theme

    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)

    Describe the bug My dude, just copied the files to my Firefox and got this. The toolbar is complete white (background and foreground color)

    To Reproduce I said above.

    Screenshots On system auto theme: Screenshot from 2022-07-17 11-45-25

    On forced firefox dark theme: Screenshot from 2022-07-17 11-45-38

    Only works ok with light theme: Screenshot from 2022-07-17 11-46-07

    It's fine on light theme only.

    System info

    • OS: Ubuntu 22.04
    • Firefox version: 102.0.1