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

Built-In Theme Contrast: userChrome.theme.built_in_contrast

Improves the contrast of the built-in theme.

Before - After

Bundle Light theme

Bundle Dark theme

System Look & Feel 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

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

Page Info

Library

..etc

Full Color Components: 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

Darkmode Components: 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

Change Cursor State: userChrome.decoration.cursor

Change the shape of the cursor to make it intuitive.

Before - After

Field Border: userChrome.decoration.field_border

Posting the cursor to the field show a border.

Before - After

Improve Download Panel: userChrome.decoration.download_panel

Improve the download panel.

Before - After

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

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

• 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

Square Tab: 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

Reduce Tabbar Width: userChrome.padding.tabbar_width

Before - After

• Show 7 Scrolled Tabs
• Show 8 Scrolled Tabs

Reduce Tabbar Height: userChrome.padding.tabbar_height

Before - After

Reduce Toolbar Button Size: userChrome.padding.toolbar_button

Reduce compact ui dencity's button padding.

Before - After

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

Reduce URL bar & view: userChrome.padding.urlbar

It works especially in compact ui dencity.

Before - After

Reduce Bookmarkbar: userChrome.padding.bookmarkbar

Reduce compact ui dencitie's bookmarkbar height.

Before - After

Reduce Infobar Height: userChrome.padding.infobar

Before - After

Reduce Menu's Padding: userChrome.padding.menu

Before - After

Context Area Menu

Tab Context Menu

Global Menu

Reduce Bookmark Menu: userChrome.padding.bookmark_menu

Before - After

Stretch Global Menubar: userChrome.padding.global_menubar

Stretch global menubar to make it easier to click.

Before - After

Reduce Panel's Padding: userChrome.padding.panel

Before - After

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

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

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

Before - After

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

Before - After

• 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

Photon Tab Padding: userChrome.tab.photon_like_padding - Photon

Before - After

• 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

Static Separator: userChrome.tab.static_separator - Photon

Before - After

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

Before - After

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

Before - After

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

Small Newtab Button: userChrome.tab.newtab_button_smaller - Photon

Before - After

• 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

• 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

• 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

• 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

Unloaded Tab: userChrome.tab.unloaded

Adjust opacity for unloaded tab.

Before - After

Truncated Text Cleary: userChrome.tab.letters_cleary

Make the truncated text more cleary.

Before - After

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

Close Button at Hover: userChrome.tab.close_button_at_hover

Before - After

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

Hide Sound Label: userChrome.tab.sound_hide_label

Hide sound label.

Before - After

Show Sound Icons: userChrome.tab.sound_with_favicons

Consistently make the sound icon location.

Before - After

• Before
• Before hovered tab
• After

Show PIP Icon: userChrome.tab.pip

Show PIP(Picture In Picture) icon.

Before - After

Container Indicator: userChrome.tab.container

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

Before - After

Crashed Tab: 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

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

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

Icons

Distribution

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

After

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

After

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

After

Defaults

Panel Icons: userChrome.icon.panel

Before - After

Library Icons: 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

Context Menu Icons: userChrome.icon.context_menu

Before - After

Global Menu Icons: userChrome.icon.global_menu

Before - After

Global Menubar Icons: 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

Improved Player UI: userContent.player.ui

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

Before - After

Video

Audio

Replace Player Icons: userContent.player.icon

Change icon to match player.

Before - After

No Audio Video Clearly: userContent.player.noaudio

Remove unnecessary elements and make it clean.

Before - After

Adjust Player Size: userContent.player.size

Adjust the size when touching or full screen.

Before - After

Click To Play Interaction: userContent.player.click_to_play

Player Animation: userContent.player.animate

Smooth animation

Before - After

Two Line

Before - After

Apply

• userContent.player.ui.twoline to true

New Tab

Defaults

Newtab Field Border: userContent.newTab.field_border

Before - After

Newtab Icon Padding: userContent.newTab.full_icon

Before - After

Newtab Animate: userContent.newTab.animate

Before - After

Pocket Contents to Last: userContent.newTab.pocket_to_last

Before - After

Improved Searchview: userContent.newTab.searchbar

Improve the layout and color of searchbar.

Before - After

Page

Defaults

Error Illustrations: userContent.page.illustration

Before - After

connectionFailure

dnsNotFound

Session restore

Wellcom back

Tab crashced

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

Support.org

Account.com

Proton Theme Contents: userContent.page.proton

• Need userContent.page.proton_color

Before - After

View sources

Directory View

about:plugins

about:checkerboard

about:memory

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