• Added uc.flex.style-sidebar-button to switch the sidebar toggle icon (0–4):
  • 0 = Firefox default icon
  • 1 = Firefox Master Brand Logo (default, same as before)
  • 2 = Firefox Browser Logo
  • 3 = Firefox System 1 Logo
  • 4 = Mozilla Flag Symbol
• Added uc.flex.style-toolbar-bgcolor to change the background color of the navbar and sidebar (1–2):
  • 1 = Tokyo Night theme (default, same as before)
  • 2 = Firefox Acorn Design
• Added uc.flex.style-urlbar to customize the URL bar appearance (1–4):
  • 1 = Flat (default, same as before)
  • 2 = Inset (embedded look)
  • 3 = Debossed (pressed-in look)
  • 4 = Seamless (fully merged into the navigation bar)
• Added uc.flex.style-urlbar-center-text to center the URL bar text (default: False).
• Added uc.flex.move-urlbar-popup-to-center to reposition the URL bar popup (0–2):
  • 0 = Disabled (default)
  • 1 = Center when focused
  • 2 = Center only when typing
• Updated uc.flex.dim-urlbar-popup-backdrop to match the new popup behavior (0–2):
  • 0 = No dimming (default)
  • 1 = 35% dim when open
  • 2 = 50% dim when open
• Added uc.flex.style-window-controls to switch the window control icons (1–3):
  • 1 = Traffic Light Buttons (default, same as before)
  • 2 = Yosemite Window Buttons
  • 3 = Yosemite GTK Theme
• Added uc.flex.style-window-controls-shift-up to slightly raise the window controls (default: False).
• Added uc.flex.style-window-controls-shrink-size to reduce the size of window controls (default: False).
• Added uc.flex.move-window-controls-to-left to move window controls to the left edge of the navbar or horizontal tab bar (default: False).
• Added uc.flex.style-web-content-outline to control the outline of the web content area (0–2):
  • 0 = No outline (default)
  • 1 = Shows a highlighted outline only on the focused web content panel in Tab Split View
  • 2 = Shows an outline on all web content panels

• Added support for the Mica visual effect on Windows 11.

  • To enable Mica, configure the following settings in about:config:

    widget.windows.mica = true
    widget.windows.mica.popups = 2
    widget.windows.mica.toplevel-backdrop = 2
    browser.tabs.allow_transparent_browser = true
    uc.flex.browser-mica-transparency-level = 2
    

  • Be sure to set the theme to System theme — auto; Mica won't take effect under other themes.
  • Requires restarting Firefox.
  • For details, see: 🧊 Visual Background & Mica Effects
  • If the Mica background appears obstructed by inactive windows, you can use the shortcut Win + Home to minimize all other windows. For convenience, consider assigning this action to a mouse gesture or automation script.

  Displays the native Mica background effect. Web content transparency (as shown on YouTube) is achieved using the Transparent Zen extension.

  

• For systems that don't support Mica or prefer a fixed wallpaper, FlexFox now supports custom background wallpapers for the browser.

  • Enable it via the following settings in about:config:

    uc.flex.browser-wallpaper-enabled = true
    uc.flex.browser-wallpaper-index = 1
    uc.flex.browser-wallpaper-acrylic-disabled = false
    browser.tabs.allow_transparent_browser = true
    uc.flex.browser-wallpaper-transparency-level = 2
    uc.flex.browser-wallpaper-contrast-level = 2
    

  • Requires restarting Firefox.
  • Supports up to 9 images named main-image-1.jpg to main-image-9.jpg, placed in ../icons/wallpaper/.
  • Wallpapers use an Acrylic blur effect by default. While not identical to native Mica, it offers a similar visual style.
  • Enabling the custom background wallpapers feature overrides the native Mica background. If both Mica and wallpaper are enabled, the wallpaper will be shown.

  Shows the custom background wallpaper feature with Acrylic blur enabled. Compared to native Mica, the blur, tone, and texture are distinct.

  

  A custom wallpaper with Acrylic blur disabled. The wallpaper appears sharp and clear; use the transparency level setting to maintain text readability.

  

• Sample wallpaper sources and credits:

  • a blue and purple background with wavy shapes (Unsplash) – Provided as one of the built-in background options in Firefox's new tab customization.
  • Seashore Waves (Unsplash) – Provided as one of the built-in background options in Firefox's new tab customization.
  • Churning in the Chukchi Sea (NASA) (Download)

• To display Mica or wallpaper backgrounds behind Sidebery and web content, browser.tabs.allow_transparent_browser must be enabled.

  • Web content transparency requires the Transparent Zen or Zen Internet extension.
  • If some pages become unreadable due to full transparency, pairing it with Dark Reader is recommended.

• New option: uc.flex.sidebery-apply-expand-speed-to-toolbars

  • Applies the expand/collapse animation speed used by Sidebery and native vertical tabs to the navigation bar and bookmarks toolbar, unifying all animation speeds.
  • Once unified, you can use uc.flex.sidebery-fast-hover-expand or uc.flex.sidebery-slow-hover-expand to adjust the animation speed of the navigation bar and bookmarks toolbar.
  • When Mica or custom wallpaper is enabled, FlexFox will automatically unify animation speeds internally, so manual adjustment of this option is not needed in those cases.

• Added uc.flex.enable-translucent-urlbar-popup-and-menus: enables a translucent and blurred background for the URL bar popup and various menus. FlexFox normally applies these effects only when Mica or a custom wallpaper is active, and this option allows you to use the translucent popup and menu background even without them. The transparency level of the background can be adjusted using uc.flex.browser-mica-transparency-level (range 0–4, higher values are more transparent). If Mica or a custom wallpaper is already enabled, you don't need this option.

• Added two new layout modes for Sidebery
  • Added uc.flex.sidebery-allow-resizable-width: allows adjusting Sidebery width by dragging the sidebar splitter.
  • Enabling this option disables Sidebery's auto-collapse, but you can still toggle its expanded/collapsed state with the sidebar toggle button (Firefox Logo).
  • To temporarily restore auto-collapse, use the Hide Sidebery shortcut or press F1 to switch to native vertical tabs.
• Added three new layout modes and optimizations for horizontal tabs
  • Deprecated the old option uc.flex.disable-tabs-toolbar-autohide. Horizontal tabs are now visible by default when Sidebery is not active.
  • Added uc.flex.auto-hide-horizontal-tabs-and-keep-navbar: hides horizontal tabs when Sidebery is not active and shows them on hover. Values: 0 = Off, 1 = Tabs below navbar, 2 = Tabs above navbar, 3 = Same layout as 2, but the tab bar appears only when the cursor reaches the top edge of the screen to avoid accidental activation when accessing bookmarks or the navbar. The trigger distance from the top edge can be customized with --uc-tabstoolbar-hover-trigger-width.
  • Added uc.flex.auto-hide-navbar-and-keep-horizontal-tabs: hides the navbar when Sidebery is not active and shows it on hover. Values: 0 = Off, 1 = On. This option overrides the previous auto-hide-horizontal-tabs setting.
  • Added uc.flex.disable-tab-close-button-on-inactive-horizontal-tabs: in horizontal tab mode, by default FlexFox shows the close button on hover for inactive tabs. As tabs become narrower due to more tabs opening, the button automatically shrinks and moves to the top-right to prevent accidental clicks. Enable this option to completely remove the close button.
  • Added uc.flex.show-tab-close-button-on-favicon-hover: in horizontal tab mode, merges the close button with the favicon to save space. The close button is shown only when hovering over the favicon. Enabling this option disables the close button's auto-shrink-and-reposition behavior described above.
  • Added uc.flex.increase-active-horizontal-tab-min-width: keeps the active tab wider when horizontal tabs shrink, so its label remains distinguishable and easier to identify among other tabs. Values:
    • 0 = Off
    • 1 = Minimum width 1.8×, no animation
    • 2 = Minimum width 1.8×, with animation
    • 3 = Minimum width 2×, no animation
    • 4 = Minimum width 2×, with animation
    • Default: 1 (enabled). Set to 0 if you prefer all tabs to keep a fixed width.
  • Pinned horizontal tabs now automatically collapse when exceeding the visible limit. Default visible pinned tabs is 10. Use uc.flex.max-visible-horizontal-pinned-tabs to adjust the setting (range 0–5, corresponding to 2–10 visible pinned tabs; 0 disables auto-collapse in horizontal tabs).

• Added uc.flex.max-visible-horizontal-pinned-tabs to set how many pinned tabs are shown per row (horizontal).

  • Accepts values from 0 to 5 (default 5).
  • In vertical tabs, extra pinned tabs wrap to the next row.
  • In horizontal tabs, extra pinned tabs are automatically collapsed (value corresponds to 2–10 visible pinned tabs).
  • 0 disables auto-collapse in horizontal tabs.

• Added uc.flex.max-visible-vertical-pinned-tabs to set how many pinned tabs are shown per column (vertical).

  • Accepts values from 2 to 8 (default 4).
  • Applies to both native vertical tabs and Sidebery, limiting the panel height.
  • When the number of pinned tabs exceeds the limit, the overflow can be scrolled.
  • Setting it to 0 disables the height limit, allowing the panel to expand freely.

• Added uc.flex.show-pin-tabs-separator-in-expanded-state to always display a separator for the pinned tab panel.

  • Applies only to native vertical tabs.
  • Enabling this option disables the height limit, allowing the panel height to be freely adjusted with the separator.

  

• Added the uc.flex.show-tab-count-in-alltabs-button option to display the total number of open tabs on the "List All Tabs" button. Values:
  • 0 = Off
  • 1 = Show count of all tabs
  • 2 = Show count of loaded tabs only
• Added the uc.flex.show-tab-number-in-tab-label option to display the index number of each tab on its native tab label. This helps quickly identify tabs when the label is too narrow to show the full title.

• Added the uc.flex.auto-hide-navbar-icons option to hide toolbar item icons (including icons on the navigation bar, bookmarks toolbar, and menu bar) and reveal them on hover. This option does not affect the URL bar or window control buttons.

• Added the uc.flex.auto-hide-urlbar-icons option, enabled by default, which hides URL bar icons and reveals them with a slide-in animation from both sides when hovering over the URL bar.

• Added the uc.flex.auto-hide-window-controls option to hide the window control buttons (minimize, maximize, close) and reveal them when hovering over the edge of the navigation bar.

• The Sidebar toggle button (FlexFox logo) is normally always visible. If it is not placed at the far left or right edge of the navigation bar, or if uc.flex.style-sidebar-button is set to 0, it will follow the auto-hide behavior.

• You can adjust the animation timing and easing by copying the following variables from uc-variables.css into uc-user-settings.css:

  --uc-autohide-navbar-icons-duration
  --uc-hover-navbar-icons-duration
  --uc-autohide-navbar-icons-type
  --uc-collapse-navbar-icons-duration

Preview of auto-hide behavior and theme-based Sidebery background switching:

• FlexFox can now automatically adjust the background color of Sidebery based on the current Firefox theme.
• To enable this feature, go to Sidebery's Settings → Appearance → Color scheme and select "firefox".
  Click to view Sidebery appearance settings screenshot

  

• Added the uc.flex.menu-item-spacing option to control spacing between menu items.
  Accepts the following string values:
  "1" or "small" = compact spacing (default; same as earlier versions)
  "2" or "medium" = moderately spaced
  "3" or "large" = Firefox default (widest spacing)

• You can fine-tune the spacing for individual menus by copying these variables from uc-variables.css and editing them in uc-user-settings.css:

  --uc-app-menu-item-padding-block
  --uc-menu-item-padding-block
  --uc-content-area-context-menu-item-padding-block
  --uc-appMenu-zoom-controls-x-offset

A new visual option has been added: uc.flex.enable-rounded-web-content.

When enabled, this adds padding around the main content area and applies rounded corners and drop shadows, giving web pages a floating, card-like appearance. This style is inspired by the visual aesthetics of Zen and Microsoft Edge.

The option accepts values from 0 (off) to 2; higher values increase the padding around the page content.

You can further adjust the appearance by copying the following variables from uc-variables.css into uc-user-settings.css:

--uc-web-content-margin
--uc-web-content-radius-box

Below is a preview of FlexFox with this feature enabled (uc.flex.enable-rounded-web-content = 1):

A new option uc.flex.revert-to-original-flat-corner-style has been added. Enabling it disables FlexFox's large rounded corners on the URL Bar and Search Bar (9999px) and restores Firefox's native flat corner look.

With Firefox v145, the default corner radius was increased from 4px to 8px, making the native design more rounded. To support both styles, this option has been expanded from a boolean to a numeric setting (0–3). Users upgrading from older versions should remove the previous boolean entry and recreate it as a numeric value.

Available values

• 0 = FlexFox rounded style for the URL Bar and Search Bar (9999px, default)
• 1 = Firefox v145+ rounded style for all elements (8px)
• 2 = Pre-v145 flat style for all elements (4px)
• 3 = FlexFox rounded style for the URL Bar and Search Bar while other elements use the pre-v145 flat style

For further customization, you can fine-tune the corner radius of the address bar, search bar, and find bar by copying the following variables from uc-variables.css into uc-user-settings.css:

--uc-urlbar-border-radius
--uc-urlbar-popup-border-radius
--uc-urlbar-icon-radius
--uc-urlbar-icon-inner-radius
--uc-searchbar-popup-border-radius
--uc-findbar-border-radius

FlexFox now supports Firefox Color, so you can freely customize your browser's appearance with live previews.

To make Firefox Color work with FlexFox, choose any background image from the Custom backgrounds tab on the Firefox Color site, or enable the uc.flex.allow-addons-to-change-toolbar-color setting. Without either of these, your color changes won't take effect.

Here's how FlexFox looks with the Rosé Pine Moon theme applied via Firefox Color:

A new numeric option uc.flex.enable-colored-bookmarks-folder-icons has been added:

• 0: Disabled
• 1: Enables the first set of colored folder icons
• 2: Enables the second set of icons and automatically hides folder labels for a cleaner look

Visual Examples: Below is the default Firefox bookmark folder icon:

Enabling uc.flex.remove-bookmarks-folder-icons will hide the folder icon and show only text labels:

Setting uc.flex.enable-colored-bookmarks-folder-icons to 1 applies the first set of colored icons:

Using 1 together with uc.flex.remove-bookmarks-labels removes text labels and shows only icons:

Setting it to 2 automatically hides labels and enables the second set of icons:

You can customize the icon's color, size, and position by editing the --uc-bookmark-folder-* variables, and replace the folder*.svg files in the ../icons/bookmark/ directory to use your own icons.

• FlexFox now integrates native vertical tabs with Sidebery. When Sidebery is active, the native vertical tabs are automatically hidden, and the sidebar toolbar is collapsed into a colored stripe positioned above Sidebery.
• When Sidebery becomes inactive, such as when a sidebar tool or extension is opened, the native vertical tabs are automatically restored. This provides a usable fallback when Sidebery is not available.
• Native vertical tabs now share the same layout and behavior as Sidebery. They support the same variables for width, transition speed, and trigger area. Features such as locking the sidebar open, fully hiding it, and auto-hiding in fullscreen mode (F11) are also supported. Transitions between the two are seamless, providing a consistent user experience.

FlexFox now supports the UserChrome Toggle Extended extension. After installing and configuring the extension as shown below:

Make sure to click the Apply changes button in the upper-left corner. The settings won't take effect until you do.

Once set up, you can switch between four UI layout modes using keyboard shortcuts:

[!IMPORTANT] Options set in about:config take priority. If a related option is enabled there, it will override the toggle behavior and lock the layout state. To enable hotkey switching, make sure the corresponding option is set to false.

In addition to using keyboard shortcuts, you can also switch layouts using the toggle button provided by the UserChrome Toggle Extended extension.

To change the default hotkeys, click the gear icon in the top-right corner and select Manage Extension Shortcuts from the menu.

For more update logs from earlier versions,
👉 see the history archive on the Wiki

⏫ Back to the beginning of updates

• Online deployment – Run this command in a PowerShell window:

   Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass; iex ((New-Object Net.WebClient).DownloadString('https://raw.githubusercontent.com/yuuqilin/FlexFox/refs/heads/main/deploy-userchrome.ps1') -replace '(?s)<#.*?#>', '')

  Silent online deployment:

   $env:FLEXFOX_INSTALL_MODE = 'silent'; Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass; iex ((New-Object Net.WebClient).DownloadString('https://raw.githubusercontent.com/yuuqilin/FlexFox/refs/heads/main/deploy-userchrome.ps1') -replace '(?s)<#.*?#>', '')

• Local deployment – Download the deploy-userchrome.ps1 script and run it in PowerShell:

   Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass; .\deploy-userchrome.ps1

  Silent local deployment:

   $env:FLEXFOX_INSTALL_MODE = 'silent'; Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass; .\deploy-userchrome.ps1

• Scheduled or Run dialog deployment – Use the following for silent deployment:

   powershell -ExecutionPolicy Bypass -Command "$env:FLEXFOX_INSTALL_MODE = 'silent'; .\deploy-userchrome.ps1"

• Use one of the git-pull-chrome-only scripts inside the scripts folder, depending on your environment. These scripts will:

  • Automatically set your Firefox profile folder as a Git working directory
  • Track the FlexFox repository as a remote
  • Download and update only the chrome folder (excluding all other files)

• Alternatively, you can manually add the remote repository to your Firefox profile folder:

  First-time setup (initialize the profile folder):

  git init
  git remote add origin https://github.com/yuuqilin/FlexFox.git
  git sparse-checkout init --no-cone
  git sparse-checkout set /chrome
  git fetch origin
  git checkout -b main origin/main

  Manual update (after setup):

  git fetch origin
  git checkout main
  git merge origin/main --allow-unrelated-histories

This project is primarily licensed under the MIT License.
However, parts of the source code (see below) incorporate code originally licensed under the Mozilla Public License 2.0 (MPL-2.0).

Specifically, some integrated code sections in uc-sidebar.css are derived from the following project:

• Project: firefox-gx
• Author: @Godiesc
• Repository: https://github.com/Godiesc/firefox-gx
• License: MPL-2.0

All such sections retain the original MPL-2.0 license notice and comply with its terms.
For the full text of the MPL-2.0, please see LICENSES/MPL-2.0.txt.

This project includes additional graphical assets with the following licenses:

• Custom Brand Icons — licensed under CC BY-NC-SA 4.0
• Newaita — licensed under CC BY-NC-SA 3.0
• Yosemite Buttons — licensed under CC BY 3.0