Tips

---

🔔🔔 Various flags are exclusively for v5.0.0.

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

---

Reddit Support Threads

• Firefox 89.0 release (Proton UI): let's help each other make the transition! (support thread)
• Linux VA-API
• Bringing back your preferred colorways

Sync UI

Refer:

• https://support.mozilla.org/en-US/kb/sync-custom-preferences
• https://firefox-source-docs.mozilla.org/modules/libpref/index.html#sync

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

Rollback to Donwnload Behavior

Refer:

• Download Behavior FF v98 above
  • https://support.mozilla.org/en-US/forums/contributors/715624?last=83071#post-83070
• https://connect.mozilla.org/t5/ideas/choose-how-firefox-handles-the-files-you-download-from-the-web/idi-p/897

Apply

• browser.download.improvements_to_download_panel to false
• browser.download.start_downloads_in_tmp_dir to true

Privacy

Please refer to the following settings:

• arkenfox/user.js
• pyllyukko/user.js
• Narsil/desktop_user.js
• LibreWolf settings
• BetterFox
• Disable Firefox Telemetry and Data Collection

Cookie Banner

Apply

• Cookie Banner Handling
  • cookiebanners.service.mode to 2
  • cookiebanners.service.mode.privateBrowsing to 2
• Cookie Banner Hide
  • Download Addon or Add filter

Another Cool Themes

• FirefoxCSS Store
• WaveFox
• quietfoxReborn
• duskFox
• Classic Theme
• MaterialFox
• Firefox GNOME theme
• Firefox UWP Style
• EdgeFox, Edge-Frfox
• Firefox Safari theme, Firefox WhiteSur theme
• Opera-Gx Theme to Firefox Css

Only Sharpen Scrolling

Before - After

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

Other refs:

• https://www.reddit.com/r/firefox/comments/kojli8/actually_smooth_scrolling_for_firefox_now/
• https://www.reddit.com/r/firefox/comments/oqrejt/every_week_or_so_i_have_to_go_into_aboutconfig/
• https://www.reddit.com/r/archlinux/comments/p2gngf/firefox_91_overrides_the_systems_scroll_settings/

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

Apply

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

Customize Context Menu

I don't think it's my project scope.

See:

• https://github.com/stonecrusher/simpleMenuWizard

Windows10 Native Menu

Apply

• browser.display.windows.non_native_menus to 0

Theme

Blue accent color

• userChrome.theme.proton_color.dark_blue_accent to true
• userContent.page.proton_color.dark_blue_accent to true
  • Conflict with userContent.page.proton_color.system_accent

System accent color

• userContent.page.proton_color.system_accent
  • Conflict with userContent.page.proton_color.dark_blue_accent
  • widget.non-native-theme.use-theme-accent to true

Restore Megabar

Before - After

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

Remove Menubar Icon

Before - After

Apply

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

Legacy

Remove this code

• https://github.com/black7375/Firefox-UI-Fix/blob/7acbf850ec212602c5845b640a2fb887e8d93bc9/userChrome.css#L2590
• https://github.com/black7375/Firefox-UI-Fix/blob/7acbf850ec212602c5845b640a2fb887e8d93bc9/userChrome.css#L2634-L2647
• https://github.com/black7375/Firefox-UI-Fix/blob/7acbf850ec212602c5845b640a2fb887e8d93bc9/userChrome.css#L3515-L3537

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

• userChrome.tab.photon_like_padding to true (at user.js)
  • userChrome.tab.lepton_like_padding to false (at user.js)
• userChrome.tab.static_separator to true (at user.js)
  • userChrome.tab.dynamic_separtor to false (at user.js)
• userChrome.tab.box_shadow to false (at user.js)
• userChrome.tab.bottom_rounded_corner to false (at user.js)
• userChrome.tab.photon_like_contextline to true (at user.js)
• userChrome.rounding.square_tab to true (at user.js)

Legacy

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

Tab Width like Photon

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

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

.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

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

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

Before - After

• userChrome.icon.panel_photon to true (at user.js)
  • userChrome.icon.panel_full to false (at user.js)
• userChrome.rounding.square_panel to true
• userChrome.rounding.square_panelitem to true
• userChrome.panel.full_width_separator to true
• userChrome.panel.full_width_padding to true

Legacy

You can just use [https://github.com/black7375/Firefox-UI-Fix/tree/photon-like-panel](https://github.com/black7375/Firefox-UI-Fix/tree/fa7445ddb6b29edc125e0c7fae4ed55a64614d7c)

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