mirrors/Firefox-UI-Fix
1
Fork 0
mirror of https://github.com/black7375/Firefox-UI-Fix.git synced 2025-12-06 02:30:54 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions
Page: Options
Pages
Compatibility Issues Solution Home Installation Guide Options Screenshots Show Off Your Config Tips Tutorial Uninstallation Guide [Article] 0. Firefox UI UX history [Article] 1. How to make a better default Firefox UI
51 Options
Irihi edited this page 2025-05-16 21:49:16 +09:00
Table of Contents

🔔🔔 Various flags are exclusively for v5.0.0.

Previous versions must edit the code directly by referring to Legacy tips.

IMPORTANT

Since v5.0.0, it has become easier than modifying CSS directly, but there are still caveats.

Common

Restart is required after setting up.

The option system is built using CSS -moz-bool-pref() @supports function as a base.
@supports change in CSS is not detected in real time. (Only start time)

For more information, see Doc: Restrictions.

Using scripts

Scripts such as install.sh and install.ps1 can easily override styles and settings.

userChrome overrides

  • ./userChrome-overrides.css (Will be copied <FIREFOX_PROFILE>/chrome/)
  • <FIREFOX_PROFILE>/chrome/

userContent overrides

  • ./userContent-overrides.css (Will be copied <FIREFOX_PROFILE>/chrome/)
  • <FIREFOX_PROFILE>/chrome/userContent-overrides.css

user.js overrides

  • <FIREFOX_PROFILE>/user-overrides.js
  • ./user-overrides.js (Will be copied <FIREFOX_PROFILE>/chrome/)
  • <FIREFOX_PROFILE>/chrome/user-overrides.js

from Doc: Project Structure

Using user.js

File user.js must modify the file located in <FIREFOX_PROFILE>/user.js, not <FIREFOX_PROFILE>/chrome/user.js.

Turn off settings that cause conflicts explicitly.
If you want to change the new tab button to a small square shape?

user_pref("userChrome.tab.newtab_button_like_tab",     true); // Original
// user_pref("userChrome.tab.newtab_button_smaller",   true); // Photon

Replace the existing settings to false and add a new setting.

user_pref("userChrome.tab.newtab_button_like_tab",  false); // Original
user_pref("userChrome.tab.newtab_button_smaller",   true);  // Photon

Using about:configs

It is recommended to erase <FIREFOX_PROFILE>/user.js after first run.
If not, firefox will overwrite it back to user.js's value every time it restarts.

As with user.js, conflicting settings must be explicitly set.
In the case of the above example.

  • userChrome.tab.newtab_button_like_tab to false
  • userChrome.tab.newtab_button_smaller to true

Etcs..

Distribution Settings

This is the difference between the default value of photon-style and proton-style

Original (Click) 
user_pref("userChrome.tab.connect_to_window",          true); // Original, Photon
user_pref("userChrome.tab.color_like_toolbar",         true); // Original, Photon

user_pref("userChrome.tab.lepton_like_padding",        true); // Original
user_pref("userChrome.tab.photon_like_padding",       false); // Photon

user_pref("userChrome.tab.dynamic_separator",          true); // Original, Proton
user_pref("userChrome.tab.static_separator",          false); // Photon
user_pref("userChrome.tab.static_separator.selected_accent", false); // Just option

user_pref("userChrome.tab.newtab_button_like_tab",     true); // Original
user_pref("userChrome.tab.newtab_button_smaller",     false); // Photon
user_pref("userChrome.tab.newtab_button_proton",      false); // Proton

user_pref("userChrome.icon.panel_full",                true); // Original, Proton
user_pref("userChrome.icon.panel_photon",             false); // Photon
user_pref("userChrome.icon.panel_sparse",             false); // Just option

// Original Only
user_pref("userChrome.tab.box_shadow",                 true);
user_pref("userChrome.tab.bottom_rounded_corner",      true);

// Photon Only
user_pref("userChrome.tab.photon_like_contextline",   false);
user_pref("userChrome.rounding.square_tab",           false);
Photon Style (Click) 
user_pref("userChrome.tab.connect_to_window",          true); // Original, Photon
user_pref("userChrome.tab.color_like_toolbar",         true); // Original, Photon

user_pref("userChrome.tab.lepton_like_padding",       false); // Original
user_pref("userChrome.tab.photon_like_padding",        true); // Photon

user_pref("userChrome.tab.dynamic_separator",         false); // Original, Proton
user_pref("userChrome.tab.static_separator",           true); // Photon
user_pref("userChrome.tab.static_separator.selected_accent", false); // Just option

user_pref("userChrome.tab.newtab_button_like_tab",    false); // Original
user_pref("userChrome.tab.newtab_button_smaller",      true); // Photon
user_pref("userChrome.tab.newtab_button_proton",      false); // Proton

user_pref("userChrome.icon.panel_full",               false); // Original, Proton
user_pref("userChrome.icon.panel_photon",              true); // Photon
user_pref("userChrome.icon.panel_sparse",             false); // Just option

// Original Only
user_pref("userChrome.tab.box_shadow",                false);
user_pref("userChrome.tab.bottom_rounded_corner",     false);

// Photon Only
user_pref("userChrome.tab.photon_like_contextline",    true);
user_pref("userChrome.rounding.square_tab",            true);
Proton Style (Click) 
user_pref("userChrome.tab.connect_to_window",         false); // Original, Photon
user_pref("userChrome.tab.color_like_toolbar",        false); // Original, Photon

user_pref("userChrome.tab.lepton_like_padding",       false); // Original
user_pref("userChrome.tab.photon_like_padding",       false); // Photon

user_pref("userChrome.tab.dynamic_separator",          true); // Original, Proton
user_pref("userChrome.tab.static_separator",          false); // Photon
user_pref("userChrome.tab.static_separator.selected_accent", false); // Just option

user_pref("userChrome.tab.newtab_button_like_tab",    false); // Original
user_pref("userChrome.tab.newtab_button_smaller",     false); // Photon
user_pref("userChrome.tab.newtab_button_proton",       true); // Proton

user_pref("userChrome.icon.panel_full",                true); // Original, Proton
user_pref("userChrome.icon.panel_photon",             false); // Photon
user_pref("userChrome.icon.panel_sparse",             false); // Just option

// Original Only
user_pref("userChrome.tab.box_shadow",                false);
user_pref("userChrome.tab.bottom_rounded_corner",     false);

// Photon Only
user_pref("userChrome.tab.photon_like_contextline",   false);
user_pref("userChrome.rounding.square_tab",           false);

Theme

Defaults

Built-In Theme Contrast: userChrome.theme.built_in_contrast

Improves the contrast of the built-in theme.

Before - After

Bundle Light theme
Bundle Light Theme Bundle Light Theme Contrast

Bundle Dark theme
Bundle Dark Theme Bundle Dark Theme Contrast

System Look & Feel Theme: userChrome.theme.system_default

Modify System theme — auto theme to fit the system(your OS).

After

Win7
Windows7 System Theme

Win8
Windows8 System Theme

Win10
Windows10's Light System Theme Windows10's Light System Theme with accent titlebar borer Windows10's Dark System Theme Windows10's Dark System Theme with accent titlebar borer

  • Light
  • Light with Title border
  • Dark
  • Dark with Title border

Mac
Mac's Light System Theme Mac's Dark System Theme

Linux Before-After
Linux System Theme Linux System Theme with AccenctColor

Provide Proton Color: userChrome.theme.proton_color

Support for base colors needed for proton theme.

Proton Design Popups: userChrome.theme.proton_chrome
  • Need userChrome.theme.proton_color

Modify popup windows to suit the proton theme.

Before - After

Dialog
Pure dialog Proton dialog

Page Info
Pure page info Proton page info

Library
Pure library Proton library

..etc

Full Color Components: userChrome.theme.fully_color
  • Need userChrome.theme.proton_color

Adjust the color to various components.

Before - After

Context Menu
Context Menu Context Menu with Fully color

Infobar
Infobar Infobar with Fully color

Sidebar
Sidebar Sidebar with Fully color

Bookmark Popup
Bookmark Popup Bookmark Popup with Fully color

Popup Auto Complete
Popup Auto Complete Popup Auto Complete with Fully color

Darkmode Components: userChrome.theme.fully_dark
  • Need userChrome.theme.proton_color

Improve support for darktheme.

Before - After

Light notification at darkmode Dark notification at darkmode

Blue accent color

Change the accent color of the built-in dark theme to blue.

Before - After

Original Accent Color Blue Accent Color

Apply

  • userChrome.theme.proton_color.dark_blue_accent to true

Monospace

Before - After

Sans Serif UI Monospace UI

Apply

  • userChrome.theme.monospace to true

Decoration

Defaults

Change Cursor State: userChrome.decoration.cursor

Change the shape of the cursor to make it intuitive.

Before - After

General cursor Pointer cursor

Field Border: userChrome.decoration.field_border

Posting the cursor to the field show a border.

Before - After

No field border at hover Field border at hover

Improve Download Panel: userChrome.decoration.download_panel

Improve the download panel.

Before - After

Download panel Improved download panel

Animations: userChrome.decoration.animate

Implement a variety of fast, smooth animations.

After

Background Color
Smooth background color animatin

Arrow rocate
Arrow rocate animatin at bookmark popup

Container Tab
Container indicator animatin

Sound & Pinned Tab
Sound and pinned tab animation

Sidebar
Sidebar on/off animation

Remove Panel Animation

Before - After

Panel Animation Panel Animation Removed

Apply

  • userChrome.decoration.disable_panel_animate to true
Legacy

Add Follow code

:root {
  --panelui-subview-transition-duration: 1ms !important; /* Disable top right corner menu sliding animation (0ms will not work!) */
}

Remove Sidebar Animation

Before - After

Sidebar Animation Sidebar Animation Removed

Apply

  • userChrome.decoration.disable_sidebar_animate to true

Auto Hide

Tab

After

Autohide Tab Autohide Tab with opacity Autohide Tab with blur

  • After
  • After (Opacity)
  • After (Blur)

Apply

  • userChrome.autohide.tab to true
  • userChrome.autohide.tab.opacity to true (Opacity)
  • userChrome.autohide.tab.blur to true (Blur)

Tab Bar

After

Autohide Tab Bar

Apply

  • userChrome.autohide.tabbar to true

Nav Bar

After

Autohide Nav Bar

Apply

  • userChrome.autohide.navbar to true

Boomark Bar

After

Autohide Bookmark Bar

Apply

  • userChrome.autohide.bookmarkbar to true

Side Bar

After

Autohide Sidebar

Apply

  • userChrome.autohide.sidebar to true

On Linux, there is a bug that closes because no event is detected when dragging, so set the following options additionally. #742

  • widget.gtk.ignore-bogus-leave-notify to 1

Fill URL Bar

After

Fill URL Bar Fill URL Bar with one liner

Apply

  • userChrome.autohide.fill_urlbar to true

Buttons

After

Back Button Forward Button Page Action

  • Back Button
  • Forward Button
  • Page Action

Apply

  • userChrome.autohide.back_button to true
  • userChrome.autohide.forward_button to true
  • userChrome.autohide.page_action to true

Toolbar Overlap Mode

The autohide of each toolbar must be activated to work.

After

Overlap Tab Bar Overlap Nav Bar Overlap Bookmark Bar

Apply

  • userChrome.autohide.toolbar_overlap to true
    • Need userChrome.autohide.tabbar to true for Tab bar
    • Need userChrome.autohide.navbar to true for Nav bar
    • Need userChrome.autohide.bookmarkbar to true for Bookmark bar

In the case of bookmarkbar, it always appears without layout.css.has-selector.enabled to true(Only works Firefox V103 or higher). #457

Hidden

Tab Icon

Before - After

Tabbar with icons Tabbar without icons Tabbar without icons always

  • Before
  • After
  • After (Always)

Apply

  • userChrome.hidden.tab_icon to true
  • userChrome.hidden.tab_icon.always to true (Always)

Tab Bar

Before - After

Tab bar exist Tab bar hidden

Apply

  • userChrome.hidden.tabbar to true

It always appears toolbar padding without layout.css.has-selector.enabled to true(Only works Firefox V103 or higher). #460

Nav Bar

Before - After

Nav bar exist Nav bar hidden

Apply

  • userChrome.hidden.navbar to true

Sidebar Header

Before - After

Sidebar with header Sidebar without header

Apply

  • userChrome.hidden.sidebar_header to true
  • userChrome.hidden.sidebar_header.vertical_tab_only to true: Hide sidebar header only vertical tab addons

URL Bar Iconbox

Before - After

URL Bar Hidden URL Bar Iconbox

Apply

  • userChrome.hidden.urlbar_iconbox to true

Bookmark Bar Elements

Before - After

Centered Bookmarkbar Icon hidden bookmarkbar Label hidden bookmarkbar

  • Before with userChrome.centered.bookmarkbar
  • After (Icon)
  • After (Label)

Apply

  • userChrome.hidden.bookmarkbar_icon to true (Icon)
  • userChrome.hidden.bookmarkbar_label to true (Label)

Disabled Menu

Before - After

Disabled menuitem Hidden disabled menuitem

Apply

  • userChrome.hidden.disabled_menu to true

Centered

Tab

Refer: issue #71

Before - After

None Aligned Tab Centered Tab Centered Tab Label

  • Before
  • After
  • After (Lable)

Apply

  • userChrome.centered.tab to true
  • userChrome.centered.tab.label to true (Lable)
Legacy

Use this code:

/* Based on https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/centered_tab_label.css */
.tab-label-container{ display: grid; justify-content: safe center; align-items: safe center; }
.tab-label,.tab-secondary-label{ overflow: hidden; }

.tabbrowser-tab[selected]:not(:hover) .tab-label-container:not([textoverflow]),
.tabbrowser-tab:not(:hover,[pinned]) .tab-label-container:not([textoverflow]) { margin-inline-end: 5px; }

#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not(:hover,[pinned]) .tab-label-container:not([textoverflow]) { margin-inline-end: 1px; }
#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([selected]):not(:hover, [pinned]) .tab-label-container:not([textoverflow]) { margin-inline-end: 19px; }

URL Bar

Before - After

None Aligned URL Bar Centered URL Bar

Apply

  • userChrome.centered.urlbar to true

Bookmark Bar

Before - After

None Aligned Bookmarkbar Centered Bookmarkbar

Apply

  • userChrome.centered.bookmarkbar to true

Rounding

Distribution

Square Tab: userChrome.rounding.square_tab - Photon

It looks like a square tab.

Before - After

Rounding tab Square tab

Square Button

Before - After

Original Button Square Button

Apply

  • userChrome.rounding.square_button to true

Square Panel & Item

Before - After

Original Panel Square Panel

Apply

  • userChrome.rounding.square_panel to true
  • userChrome.rounding.square_panelitem to true

Square Popup & Item

Before - After

Original Popup Square Popup

Apply

  • userChrome.rounding.square_menupopup to true
  • userChrome.rounding.square_menuitem to true

Square Field & Checkbox

Before - After

Original Field & Checkbox Square Field & Checkbox

Apply

  • userChrome.rounding.square_field to true
  • userChrome.rounding.square_checklabel to true

Padding

Defaults

Reduce Tabbar Width: userChrome.padding.tabbar_width

Before - After

Tabbar Reduced Tabbar Width

  • Show 7 Scrolled Tabs
  • Show 8 Scrolled Tabs
Reduce Tabbar Height: userChrome.padding.tabbar_height

Before - After

Tabbar Reduced Tabbar height

Reduce Toolbar Button Size: userChrome.padding.toolbar_button

Reduce compact ui dencity's button padding.

Before - After

Toolbar Button Reduced Toolbar Button

Reduce Navbar Width: userChrome.padding.navbar_width

There is still only a feature that reduce toolbarspring and increases the size of the URL bar.

Before - After Navbar Reduced Navbar

Reduce URL bar & view: userChrome.padding.urlbar

It works especially in compact ui dencity.

Before - After

URL Bar Reduced URL Bar

Reduce Bookmarkbar: userChrome.padding.bookmarkbar

Reduce compact ui dencitie's bookmarkbar height.

Before - After

Bookmark Bar Reduced Bookmark Bar

Reduce Infobar Height: userChrome.padding.infobar

Before - After

Infobar Reduced Infobar

Reduce Menu's Padding: userChrome.padding.menu

Before - After

Context Area Menu
Context Area Menu Reduced Context Area Menu

Tab Context Menu
Tab Context Menu Reduced Tab Context Menu

Global Menu
Global Menu Reduced Global Menu

Reduce Bookmark Menu: userChrome.padding.bookmark_menu

Before - After

Bookmark menu Reduced Bookmark menu

Stretch Global Menubar: userChrome.padding.global_menubar

Stretch global menubar to make it easier to click.

Before - After

Global menubar Stretched Global menubar

Reduce Panel's Padding: userChrome.padding.panel

Before - After

Panel Reduced Panel

Reduce Popup Panel's Padding: userChrome.padding.popup_panel

It works especially in compact ui dencity.

Before - After

Popup panel Reduced Popup panel

First tab space

Refer: issue #229, #475

Before-After

Non First tab space First tab space

Apply

  • userChrome.padding.first_tab to true
    • userChrome.padding.first_tab.always to true (It works when there is a scroll mode, a pinned tab.)
Legacy

Set --space-left-tabbar to 8px.

dabc91cde3/userChrome.css (L1120-L1123)

  /* for First Tab Space */ 
  :root { 
    --space-left-tabbar: 8px; /* If you want drag space, set to 8px */ 
  }

Drag Space

Refer: issue #210

Before-After

Non drag space Drag space

Apply

  • userChrome.padding.drag_space to true
  • userChrome.padding.drag_space.maximized to true: Maintaining drag space even when maximized mode
Legacy

Set --space-above-tabbar to 8px.

7acbf850ec/userChrome.css (L1180-L1183)

  /* for Extra Drag Space */
  :root {
    --space-above-tabbar: 8px; /* If you want drag space, set to 8px */
  }

Reduce menu padding

Before - After

Large Padding Small Padding

Apply

  • userChrome.padding.menu_compact to true
Legacy

Change to

  :root {
    --menu-padding: 2px;
  }
  :root[uidensity=compact] {
    --menu-padding: 0px;
  }

Reduce Bookmark menu padding

Before - After

Large bookmark menu Compact bookmark menu

Apply

  • userChrome.padding.bookmark_menu.compact to true

Panel Header

Before - After

Panel Header Compact Panel Header

Apply

  • userChrome.padding.panel_header to true

URL View expanding

Before - After

Expanding Remove expanding

  • userChrome.padding.urlView_expanding to true

Remove Padding

  • userChrome.padding.urlView_result to true

URL View

Icon to Left

Icon to left

  • userChrome.urlView.move_icon_to_left to true

Go button

Go button

  • userChrome.urlView.go_button_when_typing to true

Pageaction button

Before-After

No Pageaction button Pageaction button

  • userChrome.urlView.always_show_page_actions to true

Tab Bar

As Titlebar

Before - After

Original Tabbar Tabbar as titlebar

Apply

  • userChrome.tabbar.as_titlebar to true

Tabs on bottom

Before-After

Original Tab Position Tabs-on-bottom Tabs-on-bottom above bookmarkbar Tabs-on-bottom menubar on top simplescreenrecorder-2022-08-22_14 42 34

  • Before
  • After
  • After (Above bookmark)
  • After (Menubar on top)
  • After (Hidden single tabmode)

Apply

  • userChrome.tabbar.on_bottom to true
  • userChrome.tabbar.on_bottom.above_bookmark to true (Above bookmark)
  • userChrome.tabbar.on_bottom.menubar_on_top to true (Menubar on top)
  • userChrome.tabbar.on_bottom.hidden_single_tab to true (Hidden single tab mode)
Legacy

First use this code: https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/tabs_on_bottom.css

And also use this code:

/* If Do you want like IE, Add this  */
/*
#PersonalToolbar {
  -moz-box-ordinal-group: 2;
}
*/

/* Navigator toolbox bottom border.
   If Do you want like IE, Remove this
 */
#navigator-toolbox {
  border-bottom-color: var(--toolbar-bgcolor) !important; /* Original: 1px solid var(--chrome-content-separator-color); */
}

/* At Activated Menubar */
:root:not([chromehidden~="menubar"]) #toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-buttonbox-container {
  display: block !important;
}
:root:not([chromehidden~="menubar"]) #toolbar-menubar:not([autohide="true"]) .titlebar-buttonbox-container {
  visibility: hidden;
}

/* Customized https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/window_control_placeholder_support.css */
:root[tabsintitlebar] {
  --uc-window-control-width: 84px; /* Same as .titlebar-buttonbox-container      -  Space reserved for window controls, 84px is default value of linux */
  --uc-window-drag-space-pre: 30px; /* Same as .titlebar-spacer[type="pre-tabs"]  - Extra space reserved on both sides of the nav-bar to be able to drag the window */
  --uc-window-drag-space-post: 25px; /* Same as .titlebar-spacer[type="post-tabs"] */
}
:root[tabsintitlebar][sizemode="maximized"] {
  --uc-window-drag-space-pre: 0px; /* Remove pre space */
}

:root[sizemode="fullscreen"] .titlebar-buttonbox-container {
  display: none !important;
}
:root[sizemode="fullscreen"] #window-controls {
  position: fixed;
  display: flex;
  top: 0;
  right: 0;
  height: 40px;
}
:root[uidensity="compact"][sizemode="fullscreen"] #window-controls {
  height: 32px;
}
#nav-bar {
  border-inline-start-width: var(--uc-window-drag-space-pre, 0px);
  border-inline-end-width: calc(var(--uc-window-control-width, 0px) + var(--uc-window-drag-space-post, 0px));

  border-inline-style: solid !important;
  border-inline-color: var(--toolbar-bgcolor);
}

/* Windows */
@media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8) {
  :root[tabsintitlebar] {
    --uc-window-control-width: 105px;
  }
}

@media (-moz-os-version: windows-win10) {
  :root[tabsintitlebar] {
    --uc-window-control-width: 138px;
  }
}

/* Use this pref to check Mac OS where window controls are on left */
/* This pref defaults to true on Mac and doesn't actually do anything on other platforms. So if your system has window controls on LEFT side you can set the pref to true */
@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
  :root {
    --uc-window-control-width: 72px;
  }
  :root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar {
    border-inline-start-width: calc(var(--uc-window-control-width, 0px) + var(--uc-window-drag-space-post, 0px));
    border-inline-end-width: var(--uc-window-drag-space-pre, 0px);
  }
}

One Liner

Before - After

Original Tab Bar One Liner One Liner combined navbar One Liner tabbar first One Liner responsive

  • Before
  • After
  • After (Combined Nav Bar)
  • After (Tab Bar First)
  • After (Responsive Mode)

Apply

  • userChrome.tabbar.one_liner to true
  • userChrome.tabbar.one_liner.combine_navbar to true
  • userChrome.tabbar.one_liner.tabbar_first to true
  • userChrome.tabbar.one_liner.responsive to true: One Liner mode works only when the screen size is above 1100px

Tab

Distribution

Connect To Window: userChrome.tab.connect_to_window - Original, Photon

Before - After

Break with window Connected to window

Color Like Toolbar: userChrome.tab.color_like_toolbar - Original, Photon

Before - After

Without Color like toolbar With Color like toolbar

  • Before: Without Color like toolbar
  • After: With Color like toolbar
Lepton Tab Padding: userChrome.tab.lepton_like_padding - Original

Before - After

Default padding Lepton like padding

  • Default padding
  • Lepton like padding
Photon Tab Padding: userChrome.tab.photon_like_padding - Photon

Before - After

Lepton like padding Photon like padding

  • Before: Lepton like padding
  • After: Photon like padding
Dynamic Separator: userChrome.tab.dynamic_separator - Original, Proton

Before typo v6.3.0, the following values were written:

  • userChrome.tab.dynamic_separtor

Before - After

No seperator Dynamic separator

Static Separator: userChrome.tab.static_separator - Photon

Before - After

Dynamic separator Static separator

Static Separator's Selected Accents: userChrome.tab.static_separator.selected_accent - Photon's option

Before - After

Static separator Static accent separator

Tab like Newtab Button: userChrome.tab.newtab_button_like_tab - Original

Before - After

Without Button like Tab With Button like Tab

  • Before: Without button like tab
  • After: With button like tab
Small Newtab Button: userChrome.tab.newtab_button_smaller - Photon

Before - After

Button normal Button smaller

  • Before: Without button smaller
  • After: With button smaller
Proton Newtab Button: userChrome.tab.newtab_button_proton - Proton

Adjust button size for proton style.

Tab Box Shadow: userChrome.tab.box_shadow - Original

Add boxshadow at tab.

Before - After

Without Box Shadow With Box shadow

  • Before: without Box Shadow
  • After: with Box Shadow
Tab Rounded Corner: userChrome.tab.bottom_rounded_corner - Original

Add a small, round corner at the bottom of the tab.

Before - After

Without Bottom Rounded Corner With Bottom Rounded Corner

  • Before: without Bottom Rounded Corner
  • After: with Bottom Rounded Corner
Tab Context Line: userChrome.tab.photon_like_contextline - Photon

Add context line like photon.

Before - After

Without Context line With Context line

  • Before: without Context Line
  • After: with Context Line

Defaults

Multi Selected Contrast: userChrome.tab.multi_selected

Adjust contrast for multi selected tab. Makes it look like the middle of visuallyselected and hover.

Before - After

Mutliselected tab Mutliselected tab with adjsut color

Unloaded Tab: userChrome.tab.unloaded

Adjust opacity for unloaded tab.

Before - After

Default tab Opacity unloaded tab

Truncated Text Cleary: userChrome.tab.letters_cleary

Make the truncated text more cleary.

Before - After

Truncated text Truncated cleary text Truncated text with Overscroll Truncated cleary text with Overscroll

  • Before
  • After
  • Before with Overscroll
  • After with Overscroll
Close Button at Hover: userChrome.tab.close_button_at_hover

Before - After

No close button Hover close button No close button with Overscroll Hover close button with Overscroll

  • Before
  • After
  • Before with Overscroll
  • After with Overscroll
Hide Sound Label: userChrome.tab.sound_hide_label

Hide sound label.

Before - After

Sound label Hide Sound label

Show Sound Icons: userChrome.tab.sound_with_favicons

Consistently make the sound icon location.

Before - After

Sound Tab Sound Tab with hover Sound with favicons

  • Before
  • Before hovered tab
  • After
Show PIP Icon: userChrome.tab.pip

Show PIP(Picture In Picture) icon.

Before - After

Just pip PIP icon

Container Indicator: userChrome.tab.container

Adjust the location so that it is not confused with the selected tab.

Before - After

Container tabs Adjusted Container tabs

Crashed Tab: userChrome.tab.crashed

Hide favicon of crashed tab.

Before - After

Favicon with crashed indicator Favicon hide

Always Show Tab Icon

Before - After

No Tab Icon Always Tab Icon

Apply

  • userChrome.tab.always_show_tab_icon to true
Legacy 
.tab-icon-image:not([src], [pinned], [crashed], [busy]) {
  display: -moz-inline-box !important;
}

And Remove These Codes:

or Using this addon

favioli

Remove Close Button at Hover

Hover close button

Apply

  • userChrome.tab.close_button_at_hover to false
Legacy

Remove this code

Always show close button on background tab only on hover

Refer: #280

Apply

  • userChrome.tab.close_button_at_hover to true (Default)
  • userChrome.tab.close_button_at_hover.always to true
Legacy 
.tabbrowser-tab:not([visuallyselected]) .tab-close-button {
  visibility: collapse !important;
  opacity: 0;
}
.tabbrowser-tab:hover .tab-close-button {
  visibility: visible !important;
  opacity: 1;
}

/* Animate */
@media (prefers-reduced-motion: no-preference) {
  /* Fade out */
  .tabbrowser-tab:not([visuallyselected]) .tab-close-button {
    transition: opacity 0.1s var(--animation-easing-function) !important;
  }

  /* Fade in */
  .tabbrowser-tab:hover .tab-close-button {
    transition: opacity 0.25s var(--animation-easing-function) !important;
  }
}

Closed Button at Pinned Tab

Before - After

None close button Close button

Apply

  • userChrome.tab.close_button_at_pinned to true: Show closebutton when hover to selected pinned tab
  • userChrome.tab.close_button_at_pinned.alway to true: Show closebutton when selected pinned tab
  • userChrome.tab.close_button_at_pinned.background to true: Show closebutton when hover to pinned tab
Legacy

Refer this code

or Refer this

Audio Label Show

Before - After

No Audio Label Show Audio Label

Apply

  • userChrome.tab.sound_show_label to true
Legacy

Replace 0cb6302488/userChrome.css (L281-L283)

.tab-secondary-label:is([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]){
  display: -moz-box !important;
}

Supernova Like Context Line

Before - After No Supernova Like Contextline Supernova Like Context Line

Apply

  • userChrome.tab.supernova_like_contextline to true
Option userChrome.tab.contextline_blue_accent is can be used to avoid the contextline color becoming the same as the background in some themes.

Panel

Panel Separator

Refer: #148, #33

Before - After

Panel Strip Panel Strip Removed Full width Panel Strip

  • Before
  • After (Remove strip)
  • After (Full width separator)

Apply

  • Remove strip: userChrome.panel.remove_strip to true
  • Full width separator: userChrome.panel.full_width_separator to true
Legacy 
/* Remove panel strip */
#appMenu-fxa-separator {
  display: none;
}

Full width padding

Before - After

Panel item with margin Panel item with padding

Apply

  • userChrome.panel.full_width_padding to true

Side Bar

Overlap

Before - After

Static Sidebar Overlap Sidebar

Apply

  • userChrome.sidebar.overlap to true

Full Screen

Defaults

Toolbar Overlap Mode: userChrome.fullscreen.overlap

When activate toolbox on hhover at fullscreen, toolbox does not take up space.
(The layout shift of the web content does not occur)

Before - After

Fullscreen mode Overlap Fullscreen mode

Show Bookmarkbar: userChrome.fullscreen.show_bookmarkbar

I don't know the exact reason for the default value, but bookmarkbar is disabled when it is a full screen.
This setting reflects the user's behavior.

Before - After

Fullscreen without bookmarkbar Fullscreen with bookmarkbar

Icons

Distribution

Full Panel Icons: userChrome.icon.panel_full - Original, Proton

After

Panel with Fullicons

Photon like Panel Icons: userChrome.icon.panel_photon - Photon

After

Panel with Photon like icons

Sparse Panel Icons: userChrome.icon.panel_sparse - Just Option

After

Panel with Sparese icons

Defaults

Panel Icons: userChrome.icon.panel

Before - After

Panel without Icons Panel with Icons

Library Icons: userChrome.icon.library

Replace library popup and folder icons.

Before - After

Overview
Default library popup Replaced library popup

Library Icons
Open 1-depth library icons Open multi-depth library icons

Replaced 1-depth library icons Replaced multi-depth library icons

userChrome.icon.menu

Allow enable follow options:

  • userChrome.icon.context_menu
  • userChrome.icon.global_menu
  • userChrome.icon.global_menubar
Context Menu Icons: userChrome.icon.context_menu

Before - After

Context Menu Context Menu with Icons

Global Menu Icons: userChrome.icon.global_menu

Before - After

Global Menu Global Menu with Icons

Global Menubar Icons: userChrome.icon.global_menubar

Before - After

Global menubar Global menubar with icons

Disable all icons

  • userChrome.icon.disabled to true

Account Panel Layout

Original

Account Panel Original

Legacy

Replace Target: 5858485e36/userChrome.css (L685-L689)

Image to right

Image to right

  • userChrome.icon.account_image_to_right to true
Legacy 
  #fxa-menu-avatar {
    display: -moz-inline-box !important;
    margin-inline-end: var(--arrowpanel-menuitem-padding);
    -moz-box-ordinal-group: 2 !important;
  }

Text to right

Text to Right

  • userChrome.icon.account_label_to_right to true
Legacy 
  #fxa-menu-avatar {
    display: -moz-inline-box !important;
    margin-inline-end: var(--arrowpanel-menuitem-padding);
  }
  #fxa-menu-header-title, #fxa-menu-header-description {
    text-align: right;
  }

Both to right

Both to Right

  • userChrome.icon.account_image_to_right to true
  • userChrome.icon.account_label_to_right to true
Legacy 
  #fxa-menu-avatar {
    display: -moz-inline-box !important;
    margin-inline-end: var(--arrowpanel-menuitem-padding);
    -moz-box-ordinal-group: 2 !important;
  }
  #fxa-menu-header-title, #fxa-menu-header-description {
    text-align: right;
  }

Full icon menu

The goal is to fill all the menus with icons, but we still missed some things.
We wait for your contribution.

Refer: issue #412

Before - After

Menu Full icon Menu

Apply

  • userChrome.icon.menu.full to true

Global menu at Mac

Due to some bugs, it is not enabled by default.

Before - After

No global icons Global icon

Apply

  • userChrome.icon.global_menu.mac to true

Media Player

Defaults

Improved Player UI: userContent.player.ui

We created a beautiful and contented video/audio player design.

Before - After

Video
Default audio player Enhanced video player

Audio
Default audio player Rounded audio player

Replace Player Icons: userContent.player.icon

Change icon to match player.

Before - After

Without enhanced icon With enchanced icon

No Audio Video Clearly: userContent.player.noaudio

Remove unnecessary elements and make it clean.

Before - After

No sound icon Hidden icon

Adjust Player Size: userContent.player.size

Adjust the size when touching or full screen.

Before - After

image image

Click To Play Interaction: userContent.player.click_to_play
Player Animation: userContent.player.animate

Smooth animation

Before - After

Simple animation Smooth animation

Two Line

Before - After

One line player Two line player

Apply

  • userContent.player.ui.twoline to true

New Tab

Defaults

Newtab Field Border: userContent.newTab.field_border

Before - After

New tab New tab with field border

Newtab Icon Padding: userContent.newTab.full_icon

Before - After

Spaced icon Filled icon

Newtab Animate: userContent.newTab.animate

Before - After

No new tab animate New tab animate

Pocket Contents to Last: userContent.newTab.pocket_to_last

Before - After

Recent activity to last Pocket to last

Improved Searchview: userContent.newTab.searchbar

Improve the layout and color of searchbar.

Before - After

Default Newtab Searchbar Newtab Searchbar

Page

Defaults

Error Illustrations: userContent.page.illustration

Before - After

connectionFailure
No Illustration Illustration

dnsNotFound No Illustration Illustration

Session restore No Illustration Illustration

Wellcom back image Illustration

Tab crashced No Illustration Illustration

..etc

Provide Proton Color: userContent.page.proton_color

Support for base colors needed for proton theme.

Darkmode Contents: userContent.page.dark_mode
  • Need userContent.page.proton_color

Before - After

Addon.org
Light mode Darkmode

Support.org
Light mode Dark mode

Account.com
Light mode Dark mode

Proton Theme Contents: userContent.page.proton
  • Need userContent.page.proton_color

Before - After

View sources
Non proton page Proton page

Directory View Non proton page Proton page

about:plugins
Non proton page Proton page

about:checkerboard
Non proton page Proton page

about:memory
Non proton page Proton page

Accent Page Colors

Before - After

Original Accent Page Blue Accent Page System Accent Page

  • Before
  • After (Blue)
  • After (System)

Apply

  • userContent.page.proton_color.dark_blue_accent to true (Blue)
  • userContent.page.proton_color.system_accent to true (System)
    • widget.non-native-theme.use-theme-accent to true

Monospace

Before - After

Sans Serif Page Monospace Page

Apply

  • userContent.page.monospace to true