Tips

Reddit Support Threads

Sync UI

Refer:

Apply

services.sync.prefs.dangerously_allow_arbitrary to true
services.sync.prefs.sync.browser.uiCustomization.state to true
services.sync.prefs.sync.browser.uidensity to true

Privacy

Please refer to the following settings:

Only Sharpen Scrolling

Before - After

Refer: https://github.com/black7375/Firefox-UI-Fix/issues/188

Other refs:

Apply

https://github.com/black7375/Firefox-UI-Fix/blob/9ae9cc29e8e7549b85570977982544c1cc0bad5d/user.js#L193-L198

Legacy

Add this codes at user.js

//         Pref                                             Value      Original
user_pref("mousewheel.min_line_scroll_amount",                 10); //        5
user_pref("general.smoothScroll.mouseWheel.durationMinMS",     80); //       50
user_pref("general.smoothScroll.currentVelocityWeighting", "0.15"); //   "0.25"
user_pref("general.smoothScroll.stopDecelerationWeighting", "0.6"); //    "0.4"

Smooth Scrolling

Refer: https://github.com/black7375/Firefox-UI-Fix/issues/188

Apply

Legacy

Add this codes at user.js

// ** Scrolling Options ********************************************************
// based on natural smooth scrolling v2 by aveyo
// this preset will reset couple extra variables for consistency
//         Pref                                              Value                 Original
user_pref("apz.allow_zooming",                               true);            ///     true
user_pref("apz.force_disable_desktop_zooming_scrollbars",   false);            ///    false
user_pref("apz.paint_skipping.enabled",                      true);            ///     true
user_pref("apz.windows.use_direct_manipulation",             true);            ///     true
user_pref("dom.event.wheel-deltaMode-lines.always-disabled", true);            ///    false
user_pref("general.smoothScroll.currentVelocityWeighting", "0.12");            ///   "0.25" <- 1. If scroll too slow, set to "0.15"
user_pref("general.smoothScroll.durationToIntervalRatio",    1000);            ///      200
user_pref("general.smoothScroll.lines.durationMaxMS",         100);            ///      150
user_pref("general.smoothScroll.lines.durationMinMS",           0);            ///      150
user_pref("general.smoothScroll.mouseWheel.durationMaxMS",    100);            ///      200
user_pref("general.smoothScroll.mouseWheel.durationMinMS",      0);            ///       50
user_pref("general.smoothScroll.mouseWheel.migrationPercent", 100);            ///      100
user_pref("general.smoothScroll.msdPhysics.continuousMotionMaxDeltaMS", 12);   ///      120
user_pref("general.smoothScroll.msdPhysics.enabled",                  true);   ///    false
user_pref("general.smoothScroll.msdPhysics.motionBeginSpringConstant", 200);   ///     1250
user_pref("general.smoothScroll.msdPhysics.regularSpringConstant",     200);   ///     1000
user_pref("general.smoothScroll.msdPhysics.slowdownMinDeltaMS",         10);   ///       12
user_pref("general.smoothScroll.msdPhysics.slowdownMinDeltaRatio",  "1.20");   ///    "1.3"
user_pref("general.smoothScroll.msdPhysics.slowdownSpringConstant",   1000);   ///     2000
user_pref("general.smoothScroll.other.durationMaxMS",         100);            ///      150
user_pref("general.smoothScroll.other.durationMinMS",           0);            ///      150
user_pref("general.smoothScroll.pages.durationMaxMS",         100);            ///      150
user_pref("general.smoothScroll.pages.durationMinMS",           0);            ///      150
user_pref("general.smoothScroll.pixels.durationMaxMS",        100);            ///      150
user_pref("general.smoothScroll.pixels.durationMinMS",          0);            ///      150
user_pref("general.smoothScroll.scrollbars.durationMaxMS",    100);            ///      150
user_pref("general.smoothScroll.scrollbars.durationMinMS",      0);            ///      150
user_pref("general.smoothScroll.stopDecelerationWeighting", "0.6");            ///    "0.4"
user_pref("layers.async-pan-zoom.enabled",                   true);            ///     true
user_pref("layout.css.scroll-behavior.spring-constant",   "250.0");            ///   "250.0"
user_pref("mousewheel.acceleration.factor",                     3);            ///       10
user_pref("mousewheel.acceleration.start",                     -1);            ///       -1
user_pref("mousewheel.default.delta_multiplier_x",            100);            ///      100
user_pref("mousewheel.default.delta_multiplier_y",            100);            ///      100
user_pref("mousewheel.default.delta_multiplier_z",            100);            ///      100
user_pref("mousewheel.min_line_scroll_amount",                  0);            ///        5
user_pref("mousewheel.system_scroll_override.enabled",       true);            ///     true <- 2. If scroll too fast, set to false
user_pref("mousewheel.system_scroll_override_on_root_content.enabled", false); ///     true
user_pref("mousewheel.transaction.timeout",                  1500);            ///     1500
user_pref("toolkit.scrollbox.horizontalScrollDistance",         4);            ///        5
user_pref("toolkit.scrollbox.verticalScrollDistance",           3);            ///        3

System Accent Color

-moz-accent-color: Accent Color
-moz-accent-color-foreground: Accent Color with text color

more info: https://github.com/Guerra24/Firefox-UWP-Style

Photon Icons

Search & replace from

https://github.com/FirefoxUX/photon-icons

Firefox in KDE

Before - After

Tabs drawin Title Bar

Apply

browser.tabs.inTitlebar to 1 (FF v96 Above)
browser.tabs.drawInTitlebar to false (FF v95 Below)

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

Always Show Tab Icon

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

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:

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

or Using this addon

favioli

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

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

Remove Closed Button at Pinned Tab

Before - After

Close Button Removed

Apply

userChrome.tab.close_button_at_pinned to true

Legacy

Refer this code

or Refer this

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

Restore Megabar

Before - After

Current Megabar Restore Megabar

Apply

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
userChrome.urlView.always_show_page_actions to true

Legacy

Use this code:

https://github.com/WesleyBranton/Remove-Firefox-Megabar/blob/master/remove_megabar.css

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

Drag Space

Refer: issue #210

Before-After

Non drag space

Apply

userChrome.padding.drag_space to true

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

First tab space

Refer: issue #229

Before-After

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

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

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

Reduce menu padding

Before - After

Large Padding Small Padding

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

Remove Menubar Icon

Before - After

Apply

userChrome.padding.global_menubar to false
userChrome.icon.global_menubar to false

Legacy

Remove this code

Remove Close Button at Hover

Hover close button

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

Remove Panel Strip

Refer: #148, #33

Before - After

Panel Strip Panel Strip Removed

Apply

userChrome.panel.remove_strip to true

Legacy

#appMenu-fxa-separator {
  display: none;
}

Remove Panel Animation

Before - After

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

Back to the original download panel

Apply

userChrome.decoration.download_panel to false

Legacy

Remove this code

https://github.com/black7375/Firefox-UI-Fix/blob/c40b4e28fd97e233d75d633ed68a0667ede2da09/userChrome.css#L395-L443

Photon like Tab

You can just use https://github.com/black7375/Firefox-UI-Fix/tree/photon-like-tab Photon like Tabbar

Tab Width like Photon

userChrome.tab.lepton_like_padding to false
userChrome.tab.photon_like_padding to true

Legacy

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

.tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) {
  max-width: 225px !important;
}

Tab Height like Photon

Legacy

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

  #TabsToolbar {
    --toolbarbutton-inner-padding: 8px; /* Original: calc((var(--tab-min-height) - 16px) / 2) = 10px */
  }

  /* Toolbar Height */
  #TabsToolbar
  .toolbar-items, .tabbrowser-tab,
  .titlebar-buttonbox-container {
    max-height: 34px !important;
  }

  :root[uidensity=compact] #TabsToolbar,
  :root[uidensity=compact] .toolbar-items, .tabbrowser-tab
  :root[uidensity=compact] .titlebar-buttonbox-container {
    max-height: 30px !important;
  }
  :root[uidensity=touch] #TabsToolbar,
  :root[uidensity=touch] .toolbar-items, .tabbrowser-tab
  :root[uidensity=touch] .titlebar-buttonbox-container {
    max-height: 42px !important;
  }

  /* Top Margin */
  .tab-background, .tab-content {
    margin-top: 0 !important;
  }

  /* New Tab Icon - Size Fix */
  :root:not([uidensity=touch]) #tabs-newtab-button > .toolbarbutton-icon  {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

Context Line like Photon

userChrome.tab.photon_like_contextline to true

Legacy

.tab-context-line {
  display: -moz-inline-box !important;
  height: 2px !important;
  border-radius: var(--tab-border-radius, 4px) var(--tab-border-radius, 4px) 0 0 !important;
}

.tabbrowser-tab:is([selected], [multiselected]) .tab-context-line {
  background-color: rgb(10, 132, 255) !important; /* Photon like color
                                                     Default: var(--tab-line-color, rgb(10, 132, 255))
                                                     Automatic: color-mix(in srgb, var(--button-primary-bgcolor) 80%, transparent) */
}

.tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line {
  background-color: rgba(0,0,0,.2) !important;
  opacity: 1 !important;
  transform: none !important;
}
#TabsToolbar[brighttext] .tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line {
  background-color: rgba(255,255,255,.2) !important;
}

.tabbrowser-tab:not([selected="true"], [multiselected]) .tab-context-line {
  opacity: 0 !important;
  transform: scaleX(0) !important;
}
.tabbrowser-tab:not([selected="true"], [multiselected]) .tab-context-line {
  transition: transform 250ms var(--animation-easing-function), opacity 250ms var(--animation-easing-function) !important; /* --animation-easing-function: cubic-bezier(.07, .95, 0, 1); */
}

Right Angle Tab Shape like Photon

userChrome.tab.box_shadow to false
userChrome.tab.bottom_rounded_corner to false
userChrome.rounding.square_tab to true

Legacy

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

:root {
  --proton-tab-block-margin: 0px !important;
  --tab-border-radius: 0px !important;
}

and remove Bottom rounded corner https://github.com/black7375/Firefox-UI-Fix/blob/00b7d9fc123060a7448ad37f714c5242996de5b5/userChrome.css#L167-L204

Tab Divide Line(seperator) like Photon

userChrome.tab.static_separator to true

Legacy

Replace to https://github.com/black7375/Firefox-UI-Fix/blob/0cb6302488ff311cc01dcce2df397439e02b4387/userChrome.css#L222-L259

.tabbrowser-tab::after, #tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[visuallyselected]::before {
  content: "";
  display: block;
}
.tabbrowser-tab::after, .tabbrowser-tab::before {
  border-left: 1px solid var(--lwt-background-tab-separator-color, currentColor) !important;
  margin-block: 5px 4px !important;
  opacity: 0.3 !important;
}
.tabbrowser-tab::before {
  margin-inline-start: -1px !important;
}

:root[tabsintitlebar]:not([extradragspace]) #toolbar-menubar[autohide="true"] + #TabsToolbar .tabbrowser-tab::after, .tabbrowser-tab:hover::after, #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[beforehovered]::after, .tabbrowser-tab[multiselected]::after, #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[before-multiselected]::after {
  margin-top: var(--tabs-top-border-width) !important;
  margin-bottom: 0 !important;
}

/* Selected - Hide */
#tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[beforeselected-visible]::after, #tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[visuallyselected]::before, .tabbrowser-tab[visuallyselected]::after {
  border-color: var(--tabs-border-color) !important;
  margin-top: 0 !important;
  margin-bottom: var(--tabs-navbar-shadow-size) !important;
  opacity: 1 !important;
}

Photon like Panel

You can just use https://github.com/black7375/Firefox-UI-Fix/tree/photon-like-panel

photon like panel

userChrome.icon.panel_sparse to true

Legacy

Replace https://github.com/black7375/Firefox-UI-Fix/blob/d989be1c59c4f8b862ff40cc6e0d9f7938d2b5ce/userChrome.css#L560-L676

/* Padding */
:root {
  --arrowpanel-menublank-padding: calc(var(--arrowpanel-menuicon-padding) * 2 + 8px) !important;
  --arrowpanel-menuimageblank-padding: calc(var(--arrowpanel-menuitem-padding) - 2px) !important;

  /* Blank Menu Left Padding */
  --arrowpanel-menuimageblank-padding-horizontal: calc(var(--arrowpanel-menublank-padding) - 3px) !important;
  --arrowpanel-menuitemblank-padding: calc(var(--arrowpanel-menuitem-padding) + 1px) !important;
}

.subviewbutton > .toolbarbutton-text {
  padding-inline-start: var(--arrowpanel-menuicon-padding) !important;
}
#panelMenu_bookmarksMenu .subviewbutton[disabled=true] .toolbarbutton-text,
#appMenu_historyMenu     .subviewbutton[disabled=true] .toolbarbutton-text {
  padding-inline-start: var(--arrowpanel-menublank-padding) !important;
}
#appMenu-proton-update-banner .toolbarbutton-text {
  margin-inline-start: 0 !important;
}

#appMenu-multiView .subviewbutton::before,
#appMenu-proton-update-banner::before {
  display: -moz-inline-box;
  margin-inline-end: var(--arrowpanel-menuicon-padding);
  width:  16px !important;
  height: 16px !important;
}
#appMenu-proton-update-banner {
  margin-bottom: 2px !important;
}
#appMenu-proton-update-banner::before {
  margin-inline-start: var(--arrowpanel-menuitem-padding) !important;
}
#appMenu-fxa-status2,
#appMenu-zoom-controls2 {
  align-items: center;
  padding-top:    var(--arrowpanel-menuimageblank-padding) !important;
  padding-bottom: var(--arrowpanel-menuimageblank-padding) !important;
}
#appMenu-zoom-controls2::before {
  margin-inline-end: 0 !important;
}

/* Icons Color */
#appMenu-multiView .subviewbutton::before,
#appMenu-proton-update-banner::before,
.subviewbutton > image {
  fill: currentColor !important;
  fill-opacity: var(--toolbarbutton-icon-fill-opacity) !important;
  -moz-context-properties: fill !important;
}

/* Panel - Main */
#appMenu-proton-update-banner::before {
  content: url(chrome://browser/skin/whatsnew.svg);
}
#appMenu-fxa-status2::before { /* Don't exist img tag */
  content: url(chrome://browser/skin/fxa/avatar-empty.svg);
}
#appMenu-fxa-status2[fxastatus=signedin]::before { /* Don't exist img tag */
  display: none;
}
#appMenu-fxa-status2[fxastatus=signedin] #appMenu-fxa-label2::before {
  /* url("https://profile.accounts.firefox.com/v1/avatar/a") */
  content: '';
  background-image: var(--avatar-image-url) !important;
}

#appMenu-new-tab-button2,           /* Seperate */
#appMenu-passwords-button,          /* Seperate */
#appMenu-extensions-themes-button,
#appMenu-save-file-button2,         /* Seperate */
#appMenu-find-button2,
#appMenu-more-button2,              /* Seperate */
#appMenu-help-button2,
#appMenu-quit-button2               /* Seperate */ {

  padding-top: var(--arrowpanel-menuitemblank-padding) !important;
  padding-bottom: var(--arrowpanel-menuitemblank-padding) !important;
}
#appMenu-zoom-controls2 {
  padding-inline-start: var(--arrowpanel-menuimageblank-padding-horizontal) !important;
}

#appMenu-new-window-button2 {
  list-style-image: url(chrome://browser/skin/window.svg);
}
#appMenu-new-private-window-button2 {
  list-style-image: url(chrome://browser/skin/privateBrowsing.svg);
}

#appMenu-bookmarks-button{
  list-style-image: url(chrome://browser/skin/bookmark.svg);
}
#appMenu-history-button {
  list-style-image: url(chrome://browser/skin/history.svg);
}
#appMenu-downloads-button {
  list-style-image: url(chrome://browser/skin/downloads/downloads.svg);
}

#appMenu-print-button2 {
  list-style-image: url(chrome://global/skin/icons/print.svg);
}

#appMenu-settings-button {
  list-style-image: url(chrome://global/skin/icons/settings.svg);
}

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Tips

Reddit Support Threads

Sync UI

Privacy

Only Sharpen Scrolling

Smooth Scrolling

System Accent Color

Photon Icons

Firefox in KDE

Audio Label Show

Always Show Tab Icon

Always show close button on background tab only on hover

Remove Closed Button at Pinned Tab

Restore Megabar

Center Tab Label

Drag Space

First tab space

Tabs on bottom

Account Panel Layout

Reduce menu padding

Remove Menubar Icon

Remove Close Button at Hover

Remove Panel Strip

Remove Panel Animation

Back to the original download panel

Photon like Tab

Tab Width like Photon

Tab Height like Photon

Context Line like Photon

Right Angle Tab Shape like Photon

Tab Divide Line(seperator) like Photon

Photon like Panel

Clone this wiki locally