Options

---

🔔🔔 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..

• Wiki:Compatibility Issues Solution: Compatibility related options, tips
• Wiki:Tips: Tips except for options

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

userChrome.theme.built_in_contrast

Improves the contrast of the built-in theme.

Before - After

Bundle Light theme

Bundle Dark theme

userChrome.theme.system_default

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

After

Win7

Win8

Win10

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

Mac

Linux Before-After

userChrome.theme.proton_color

Support for base colors needed for proton theme.

userChrome.theme.proton_chrome

• Need userChrome.theme.proton_color

Modify popup windows to suit the proton theme.

Before - After

Dialog

Page Info

Library

..etc

userChrome.theme.fully_color

• Need userChrome.theme.proton_color

Adjust the color to various components.

Before - After

Context Menu

Infobar

Sidebar

Bookmark Popup

Popup Auto Complete

userChrome.theme.fully_dark

• Need userChrome.theme.proton_color

Improve support for darktheme.

Before - After

Blue accent color

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

Before - After

Apply

• userChrome.theme.proton_color.dark_blue_accent to true

Monospace

Before - After

Apply

• userChrome.theme.monospace to true

Decoration

Defaults

userChrome.decoration.cursor

Change the shape of the cursor to make it intuitive.

Before - After

userChrome.decoration.field_border

Posting the cursor to the field show a border.

Before - After

userChrome.decoration.download_panel

Improve the download panel.

Before - After

userChrome.decoration.animate

Implement a variety of fast, smooth animations.

After

Background Color

Arrow rocate

Container Tab

Sound & Pinned Tab

Sidebar

Remove Panel Animation

Before - After

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

Apply

• userChrome.decoration.disable_sidebar_animate to true

Auto Hide

Tab

After

• 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

Apply

• userChrome.autohide.tabbar to true

Nav Bar

After

Apply

• userChrome.autohide.navbar to true

Boomark Bar

After

Apply

• userChrome.autohide.bookmarkbar to true

Side Bar

After

Apply

• userChrome.autohide.sidebar to true

Fill URL Bar

After

• After
• After with One Liner

Apply

• userChrome.autohide.fill_urlbar to true

Buttons

After

• 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

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

• Before
• After
• After (Always)

Apply

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

Tab Bar

Before - After

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

Apply

• userChrome.hidden.navbar to true

Sidebar Header

Before - After

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

Apply

• userChrome.hidden.urlbar_iconbox to true

Bookmark Bar Elements

Before - After

• 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

Apply

• userChrome.hidden.disabled_menu to true

Centered

Tab

Refer: issue #71

Before - After

• 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

Apply

• userChrome.centered.urlbar to true

Bookmark Bar

Before - After

Apply

• userChrome.centered.bookmarkbar to true

Rounding

Distribution

userChrome.rounding.square_tab: Photon

It looks like a square tab.

Before - After

Square Button

Before - After

Apply

• userChrome.rounding.square_button to true

Square Panel & Item

Before - After

Apply

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

Square Popup & Item

Before - After

Apply

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

Square Field & Checkbox

Before - After

Apply

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

Padding

Defaults

userChrome.padding.tabbar_width

Reduce tabbar width.

Before - After

• Show 7 Scrolled Tabs
• Show 8 Scrolled Tabs

userChrome.padding.tabbar_height

Reduce tabbar height.

Before - After

userChrome.padding.toolbar_button

Reduce compact ui dencity's button padding.

Before - After

userChrome.padding.navbar_width

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

Before - After

userChrome.padding.urlbar

Reduce url bar & view.
It works especially in compact ui dencity.

Before - After

userChrome.padding.bookmarkbar

Reduce compact ui dencitie's bookmarkbar height.

Before - After

userChrome.padding.infobar

Reduce infobar height.

Before - After

userChrome.padding.menu

Reduced menu's padding

Before - After

Context Area Menu

Tab Context Menu

Global Menu

userChrome.padding.bookmark_menu

Reduce bookmark menu padding.

Before - After

userChrome.padding.global_menubar

Stretch global menubar to make it easier to click.

Before - After

userChrome.padding.panel

Reduce panel's padding.

Before - After

userChrome.padding.popup_panel

Reduce popup panel padding. It works especially in compact ui dencity.

Before - After

First tab space

Refer: issue #229, #475

Before-After

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.

https://github.com/black7375/Firefox-UI-Fix/blob/dabc91cde340d5a85d092ba03bcdce12db9e6f4e/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

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.

https://github.com/black7375/Firefox-UI-Fix/blob/7acbf850ec212602c5845b640a2fb887e8d93bc9/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

Apply

• userChrome.padding.menu_compact to true

Legacy

• https://github.com/black7375/Firefox-UI-Fix/blob/3b69ca3db5b032fc4c01da6543633aa42b8199de/userChrome.css#L659-L664

Change to

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

Reduce Bookmark menu padding

Before - After

Apply

• userChrome.padding.bookmark_menu.compact to true

Panel Header

Before - After

Apply

• userChrome.padding.panel_header to true

URL View expanding

Before - After

• userChrome.padding.urlView_expanding to true

• userChrome.padding.urlView_result to true

URL View

Icon to Left

• userChrome.urlView.move_icon_to_left to true

Go button

• userChrome.urlView.go_button_when_typing to true

Pageaction button

Before-After

• userChrome.urlView.always_show_page_actions to true

Tab Bar

As Titlebar

Before - After

Apply

• userChrome.tabbar.as_titlebar to true

Tabs on bottom

Before-After

• 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

• 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

userChrome.tab.connect_to_window: Original, Photon

Before - After

userChrome.tab.color_like_toolbar: Original, Photon

Before - After

• Before: Without Color like toolbar
• After: With Color like toolbar

userChrome.tab.lepton_like_padding: Original

Before - After

• Default padding
• Lepton like padding

userChrome.tab.photon_like_padding: Photon

Before - After

• Before: Lepton like padding
• After: Photon like padding

userChrome.tab.dynamic_separtor: Original, Proton

Before - After

userChrome.tab.static_separator: Photon

Before - After

userChrome.tab.static_separator.selected_accent: Photon's option

Before - After

userChrome.tab.newtab_button_like_tab: Original

Before - After

• Before: Without button like tab
• After: With button like tab

userChrome.tab.newtab_button_smaller: Photon

Before - After

• Before: Without button smaller
• After: With button smaller

userChrome.tab.newtab_button_proton: Proton

Adjust button size for proton style.

userChrome.tab.box_shadow: Original

Add boxshadow at tab.

Before - After

• Before: without Box Shadow
• After: with Box Shadow

userChrome.tab.bottom_rounded_corner: Original

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

Before - After

• Before: without Bottom Rounded Corner
• After: with Bottom Rounded Corner

userChrome.tab.photon_like_contextline: Photon

Add context line like photon.

Before - After

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

Defaults

userChrome.tab.multi_selected

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

Before - After

userChrome.tab.unloaded

Adjust opacity for unloaded tab.

Before - After

userChrome.tab.letters_cleary

Make the truncated text more cleary.

Before - After

• Before
• After
• Before with Overscroll
• After with Overscroll

userChrome.tab.close_button_at_hover

Before - After

• Before
• After
• Before with Overscroll
• After with Overscroll

userChrome.tab.sound_hide_label

Hide sound label.

Before - After

userChrome.tab.sound_with_favicons

Consistently make the sound icon location.

Before - After

• Before
• Before hovered tab
• After

userChrome.tab.pip

Show PIP(Picture In Picture) icon.

Before - After

userChrome.tab.container

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

Before - After

userChrome.tab.crashed

Hide favicon of crashed tab.

Before - After

Always Show Tab Icon

• Sample site: https://www.phoronix.com/forums/

Before - After

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:

• https://github.com/black7375/Firefox-UI-Fix/blob/v4.0.0/userChrome.css#L1287-L1306

or Using this addon

• https://addons.mozilla.org/en-US/firefox/addon/favioli/

Remove Close Button at Hover

Apply

• userChrome.tab.close_button_at_hover to false

Legacy

Remove this code

• https://github.com/black7375/Firefox-UI-Fix/blob/bcac6caf338b5aaed798ccae4cbdab97f0342298/userChrome.css#L1304-L1312

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

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

• https://github.com/black7375/Firefox-UI-Fix/blob/5858485e367106cc74bf36662d020038af88867f/userChrome.css#L390-L434
• https://github.com/black7375/Firefox-UI-Fix/blob/5858485e367106cc74bf36662d020038af88867f/userChrome.css#L390-L467

or Refer this

• https://github.com/black7375/Firefox-UI-Fix/compare/hide-closebutton-at-pinned

Audio Label Show

Before - After

Apply

• userChrome.tab.sound_show_label to true

Legacy

Replace https://github.com/black7375/Firefox-UI-Fix/blob/0cb6302488ff311cc01dcce2df397439e02b4387/userChrome.css#L281-L283

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

Panel

Panel Separator

Refer: #148, #33

Before - After

• 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

Apply

• userChrome.panel.full_width_padding to true

Side Bar

Overlap

Before - After

Apply

• userChrome.sidebar.overlap to true

Full Screen

Defaults

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

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

Icons

Distribution

userChrome.icon.panel_full: Original, Proton

After

userChrome.icon.panel_photon: Photon

After

userChrome.icon.panel_sparse: Just Option

After

Defaults

userChrome.icon.panel

Before - After

userChrome.icon.library

Replace library popup and folder icons.

Before - After

Overview

Library Icons

userChrome.icon.menu

Allow enable follow options:

• userChrome.icon.context_menu
• userChrome.icon.global_menu
• userChrome.icon.global_menubar

userChrome.icon.context_menu

Before - After

userChrome.icon.global_menu

Before - After

userChrome.icon.global_menubar

Before - After

Disable all icons

• userChrome.icon.disabled to true

Account Panel Layout

Original

Legacy

Replace Target: https://github.com/black7375/Firefox-UI-Fix/blob/5858485e367106cc74bf36662d020038af88867f/userChrome.css#L685-L689

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

• 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

• 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

Apply

• userChrome.icon.menu.full to true

Global menu at Mac

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

Before - After

Apply

• userChrome.icon.global_menu.mac to true

Media Player

Defaults

• userContent.player.ui
• userContent.player.icon
• userContent.player.noaudio
• userContent.player.size
• userContent.player.click_to_play
• userContent.player.animate

Two Line

Before - After

Apply

• userContent.player.ui.twoline to true

New Tab

Defaults

• userContent.newTab.field_border
• userContent.newTab.full_icon
• userContent.newTab.animate
• userContent.newTab.pocket_to_last
• userContent.newTab.searchbar

Page

Defaults

• userContent.page.illustration
• userContent.page.proton_color
• userContent.page.dark_mode
  • Need userContent.page.proton_color
• userContent.page.proton
  • Need userContent.page.proton_color

Accent Page Colors

Before - After

• 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

Apply

• userContent.page.monospace to true