Options - black7375/Firefox-UI-Fix GitHub Wiki

🔔🔔 Various flags are exclusively for v5.0.0.

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

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

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.

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

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

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

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

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

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);

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);

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);

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

Before - After

Apply

• userChrome.theme.proton_color.dark_blue_accent to true

Before - After

Apply

• userChrome.theme.monospace to true

Before - After

Apply

• userChrome.decoration.disable_panel_animate to true

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

Before - After

Apply

• userChrome.decoration.disable_sidebar_animate to true

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)

After

Apply

• userChrome.autohide.tabbar to true

After

Apply

• userChrome.autohide.navbar to true

After

Apply

• userChrome.autohide.bookmarkbar to true

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

After

• After
• After with One Liner

Apply

• userChrome.autohide.fill_urlbar to true

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

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

Before - After

• Before
• After
• After (Always)

Apply

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

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

Before - After

Apply

• userChrome.hidden.navbar to true

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

Before - After

Apply

• userChrome.hidden.urlbar_iconbox to true

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)

Before - After

Apply

• userChrome.hidden.disabled_menu to true

Refer: issue #71

Before - After

• Before
• After
• After (Lable)

Apply

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

/* 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; }

Before - After

Apply

• userChrome.centered.urlbar to true

Before - After

Apply

• userChrome.centered.bookmarkbar to true

Before - After

Apply

• userChrome.rounding.square_button to true

Before - After

Apply

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

Before - After

Apply

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

Before - After

Apply

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

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

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

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

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

Before - After

Apply

• userChrome.padding.menu_compact to true

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

Before - After

Apply

• userChrome.padding.bookmark_menu.compact to true

Before - After

Apply

• userChrome.padding.panel_header to true

Before - After

• userChrome.padding.urlView_expanding to true

• userChrome.padding.urlView_result to true

• userChrome.urlView.move_icon_to_left to true

• userChrome.urlView.go_button_when_typing to true

Before-After

• userChrome.urlView.always_show_page_actions to true

Before - After

Apply

• userChrome.tabbar.as_titlebar to true

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)

/* 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);
  }
}

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

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

Before - After

Apply

• userChrome.tab.always_show_tab_icon to true

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

or Using this addon

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

Apply

• userChrome.tab.close_button_at_hover to false

Refer: #280

Apply

• userChrome.tab.close_button_at_hover to true (Default)
• userChrome.tab.close_button_at_hover.always to true

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

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

Before - After

Apply

• userChrome.tab.sound_show_label to true

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

Before - After

Apply

• userChrome.tab.supernova_like_contextline to true

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

/* Remove panel strip */
#appMenu-fxa-separator {
  display: none;
}

Before - After

Apply

• userChrome.panel.full_width_padding to true

Before - After

Apply

• userChrome.sidebar.overlap to true

• userChrome.icon.disabled to true

Original

Image to right

• userChrome.icon.account_image_to_right to true

  #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

  #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

  #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;
  }

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

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

Before - After

Apply

• userChrome.icon.global_menu.mac to true

Before - After

Apply

• userContent.player.ui.twoline to true

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

Before - After

Apply

• userContent.page.monospace to true