FlexFox

English | 日本語 | 简体中文 | Wiki

FlexFox is a Firefox userChrome theme focused on maximizing usable screen space while preserving accessibility. Toolbars and sidebars automatically collapse when not in use and expand as overlays without shifting page layout. When Sidebery is enabled, native tabs are automatically hidden to maintain a single tab system, avoiding redundant interface elements. It supports extensive customization through preferences and is designed as a flexible foundation for different browsing workflows.

🎬 Feature Showcase Video

Watch the v6.5 feature showcase:

https://github.com/user-attachments/assets/64be5a0e-f97e-4257-aac8-63245791d07b

For better video quality, watch on YouTube:

YouTube Link

🆕 What's New

🦊 Latest: v6.5.6 — See Full Changelog for details.

✨ Features

• Auto-collapsing tabs, toolbars, and sidebars.
• Expands as an overlay without shifting webpage content or causing layout jumps.
• Quickly hide or show tabs and toolbars using keyboard shortcuts or toolbar buttons.
• Automatically hides native tabs when Sidebery is enabled to maximize screen space.
• Optional translucent blur effects for menus, panels, and address bar popups.
• Support for Windows Mica and custom browser wallpapers.
• 11 built-in accent colors with full light and dark mode support, compatible with any Firefox theme.
• Customizable icons for sidebar buttons, bookmark folders, bookmark stars, window controls, and more.
• Optional auto-hide for toolbar buttons and window controls, keeping the interface minimal while remaining easily accessible.
• Extensive appearance customization through Firefox preferences, including:
  • Rounded or squared UI element corners
  • Menu spacing
  • Webpage content margins and borders
  • Flat or embossed address bar styles
  • Tab borders and background colors
  • Animation and transition effects
• Customizable pinned tab layout and area height.
• Floating search box.
• Support for custom style overrides to personalize or extend the default theme.
• Additional quality-of-life enhancements, including:
  • Preventing white flashes while pages are loading
  • Displaying the total number of open tabs on the "List All Tabs" button
• Browsing experience improvements, including:
  • Enhanced active tab visibility for easier navigation between related tabs
  • Grid-based pinned tabs that save space, support large pinned tab collections, and prevent tab shifting when sidebars expand, reducing mouse repositioning
• Minimal performance overhead.

⚙️ Options

FlexFox leaves the native Firefox interface largely undisturbed by default, enabling only the core layout features and essential styles upon installation.

To reproduce many of the layouts and interface customizations shown in the previews, or to modify and revert specific design changes, you can use the following two independent systems.

🧩 Configurable Preferences (about:config)

Most of FlexFox's features, layout toggles, and appearance adjustments are integrated directly into Firefox's preferences system. This allows you to customize browser behavior, enable optional interface enhancements, or restore specific elements back to their native Firefox appearance without modifying any code.

To access these preferences, enter about:config in the address bar and press Enter. If you imported the provided user.js during installation, searching for uc.flex will display all available FlexFox preferences. You can also manually create preferences using the option names listed in the documentation.

📜 User-Customizable Styles

For modifications beyond the built-in preference system, FlexFox provides dedicated user customization files for both interface and webpage styling.

• To modify interface (chrome) styles, create uc-user-settings.css in the components folder
• To modify webpage (content) styles, create uc-custom-content.css in the content folder

Styles and variables copied into these files will override FlexFox's defaults. Since these files are user-managed and not included in the project source, they remain unaffected by future updates.

When reusing styles from existing FlexFox files (such as uc-variables.css), copy the complete selector or rule block to preserve the original context and dependencies.

📖 Usage Guides

• How to recreate the interface shown in the preview video

• How to hide toolbars and sidebars using keyboard shortcuts or toolbar buttons

• How to make Sidebery follow your Firefox theme background

• How to enable Mica or custom wallpapers in Sidebery and web content

• How to improve readability after enabling transparent web content

💿 Installation and Updates

👷 Manual Installation

1. Install Sidebery (optional but recommended).

2. Download the latest FlexFox release from the project's Releases page.

3. Open about:support, locate Profile Folder, and click Open Folder to access your Firefox profile directory.

4. Copy the chrome folder and user.js file from the archive root into your Firefox profile folder.

5. (Optional) Open user.js in a text editor.

   The file contains both FlexFox preferences (uc.flex.*) and optional native Firefox preferences. FlexFox preferences are imported automatically, while native Firefox preferences are provided as commented entries. Remove the leading // only for the native Firefox preferences you wish to change, then verify that the following required preferences remain configured as shown:

   toolkit.legacyUserProfileCustomizations.stylesheets = true
   svg.context-properties.content.enabled = true
   sidebar.visibility = always-show
   

6. Restart Firefox, then delete user.js.

   Do not skip this step. If user.js remains in your profile folder, its settings will be reapplied every time Firefox starts, resetting your preferences and preventing changes made in about:config from taking effect.

7. Configure Sidebery:

   • Open Settings (gear icon).
   • Clear any existing styles from Styles Editor.
   • Go to Help → Import addon data.
   • Import sidebery-settings.json from the Sidebery folder in the downloaded archive.

8. Open about:config and search for uc.flex to view and adjust FlexFox preferences.

🚀 Automated Installation and Updates

FlexFox can be installed and updated automatically using either PowerShell scripts or Git.

If this is your first installation, run one of the methods below and then continue with Manual Installation starting from Step 5.

For future updates, simply re-run the same method. No additional manual steps are required.

💻 PowerShell Script

Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass; & ([scriptblock]::Create((((New-Object Net.WebClient).DownloadString('https://raw.githubusercontent.com/yuuqilin/FlexFox/refs/heads/main/scripts/install-flexfox.ps1')) -replace '^\uFEFF', '')))

Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass; & 'C:\Path\To\install-flexfox.ps1'

powershell.exe -NoProfile -ExecutionPolicy Bypass -File "C:\Path\To\install-flexfox.ps1" -ProfilePath "C:\Path\To\Firefox\Profile" -Silent

🔃 Git Pull

Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass; & 'C:\Path\To\git-pull-chrome-only.ps1' -ProfilePath 'C:\Path\To\Firefox\Profile' -Silent

bash "/path/to/git-pull-chrome-only.sh" --profile-path "/path/to/firefox/profile" --silent

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

git fetch --no-tags --prune origin
git checkout main
git sparse-checkout set /chrome
git merge --no-edit origin/main
git sparse-checkout reapply

🐞 Known Issues

• For Floorp users: Switch to Firefox Proton UI in Floorp's interface options to reduce compatibility issues.
• Tested on Windows only: May require adjustments for other operating systems.

🎖️ Credits

FlexFox builds upon the work of the following excellent projects:

• VerticalFox — provided the foundation for the vertical tab layout and several core layout concepts.
• firefox-csshacks — many essential tweaks and layout fixes used in FlexFox are derived from this invaluable collection.

FlexFox is also inspired by the ideas and aesthetics of these projects:

• EdgyArc-fr
• Edge-Frfox
• ArcWTF
• shimmer
• firefox-gx

Additional icon assets used in FlexFox:

• Custom Brand Icons — modified from elax46's custom-brand-icons.
• Newaita — modified from cbrnix's Newaita.
• Yosemite Buttons — modified from Doublefire-Chen's macos-traffic-light-buttons-as-SVG.
• Yosemite GTK Theme — modified from kxmylo's Yosemite GTK 3.14/3.16 Theme Alpha4.

Special thanks to all these creators for sharing their work with the community.