Skip to content

Options

Jump to bottom Edit New page
MS_Y edited this page Aug 18, 2022 · 50 revisions

🔔🔔 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_separtor",           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_separtor",          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_separtor",           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
  • userChrome.theme.system_default
  • userChrome.theme.proton_color
  • userChrome.theme.proton_chrome
    • Need userChrome.theme.proton_color
  • userChrome.theme.fully_color
    • Need userChrome.theme.proton_color
  • userChrome.theme.fully_dark
    • Need userChrome.theme.proton_color

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

Decoration

Defaults

  • userChrome.decoration.cursor
  • userChrome.decoration.field_border
  • userChrome.decoration.download_panel
  • userChrome.decoration.animate

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

Rounding

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

  • userChrome.padding.tabbar_width
  • userChrome.padding.tabbar_height
  • userChrome.padding.toolbar_button
  • userChrome.padding.navbar_width
  • userChrome.padding.urlbar
  • userChrome.padding.bookmarkbar
  • userChrome.padding.infobar
  • userChrome.padding.menu
  • userChrome.padding.bookmark_menu
  • userChrome.padding.global_menubar
  • userChrome.padding.panel
  • userChrome.padding.popup_panel

First tab space

Refer: issue #229

Before-After

Non First tab space First tab space

Apply

  • userChrome.padding.first_tab to true
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

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.

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

Large Padding Small Padding

Apply

  • userChrome.padding.menu_compact to true
Legacy

Change to

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

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

Defaults

  • userChrome.tab.multi_selected
  • userChrome.tab.unloaded
  • userChrome.tab.letters_cleary
  • userChrome.tab.close_button_at_hover
  • userChrome.tab.sound_hide_label
  • userChrome.tab.sound_with_favicons
  • userChrome.tab.pip
  • userChrome.tab.container
  • userChrome.tab.crashed

Tabs on bottom

Before-After

Original Tab Position Tabs-on-bottom Tabs-on-bottom like IE

  • Before
  • After
  • After (Above bookmark)

Apply

  • userChrome.tab.on_bottom to true
  • userChrome.tab.on_bottom.above_bookmark to true (Above bookmark)
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);
  }
}

tabs on bottom with menubar on top

  • userChrome.tab.on_bottom.menubar_on_top to true

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

Center Tab Label

Refer: issue #71

Before - After

original label centered label

Apply

  • userChrome.tab.centered_label to true
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; }

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

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

Full width padding

Before - After

image image

Apply

  • userChrome.panel.full_width_padding to true

Full Screen

Defaults

  • userChrome.fullscreen.overlap
  • userChrome.fullscreen.show_bookmarkbar

Icons

Defaults

  • userChrome.icon.library
  • userChrome.icon.panel
  • userChrome.icon.menu
  • userChrome.icon.context_menu
  • userChrome.icon.global_menu
  • userChrome.icon.global_menubar

Remove Menubar Icon

Before - After

image image

Apply

  • userChrome.padding.global_menubar to false
  • userChrome.icon.global_menubar to false
Legacy

Remove this code

Account Panel Layout

Original

Account Panel Original

Legacy

Replace Target: https://github.com/black7375/Firefox-UI-Fix/blob/5858485e367106cc74bf36662d020038af88867f/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;
  }

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

image image

Before - After

image image

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 - Blue - System

Original Accent Page Blue Accent Page System Accent Page

Apply

  • Blue Accent: userContent.page.proton_color.dark_blue_accent to true
  • System Accent: userContent.page.proton_color.system_accent to true
Add a custom footer
Add a custom sidebar
Clone this wiki locally