README.md

Description

Toggle Native Tab Bar gives you complete control over your browser's real estate. Whether you prefer the classic horizontal layout or the new native vertical tabs, this extension allows you to toggle that bar on and off instantly whenever you need it. It is the perfect companion for sidebar extensions like Tree Style Tab or Sidebery.

Functionality examples

Firefox now offers two types of sidebars that can be used in combination with this add-on:

• Traditional Sidebar: The standard sidebar used by extensions like Tree Style Tab or Sidebery.
• New Sidebar (Select): The modern Firefox sidebar that allows switching between different sidebar views.
  • Note: In Vertical Tabs mode, these selections are integrated directly into the vertical tab bar.

Horizontal Tabs + Traditional Sidebar (TST)

Horizontal_Tabs-Normal_Sidebar_TST.mp4

Horizontal Tabs + New Sidebar (Select)

Horizontal_Tabs-Sidebar.mp4

Horizontal Tabs + Both Sidebars Visible

Horizontal_Tabs-Sidebar-Normal_Sidebar_TST.mp4

Vertical Tabs - Integrated Vertical Mode

Vertical_Tabs.mp4

Note

These examples show the add-on toggling the native tab bar while correctly preserving the state of both the traditional and new sidebar elements.

How to configure Toggle Native Tab Bar

(REQUIRED) Enable userChrome.css in Firefox (Skip if already enabled)

1. In Firefox, type about:config into the address bar and press Enter.
2. Search for toolkit.legacyUserProfileCustomizations.stylesheets and set it to TRUE to enable custom stylesheets.
3. Next, type about:profiles into the address bar.
4. Find the profile labeled "This is the profile in use and it cannot be deleted."
5. In the same row, click Open Folder under Root Directory to access your profile folder.
6. In the profile folder, create a new folder named chrome (if it doesn’t already exist).
7. Inside the chrome folder, create a file named userChrome.css (ensure it’s not userChrome.css.txt).

These steps will enable custom styling with the userChrome.css file.

(REQUIRED) Enter CSS to hide or show the native tab bar in userChrome.css

1. Open the userChrome.css file you created earlier in the chrome folder.
2. Add one of these CSS solutions to your userChrome.css file (below).
3. Save your userChrome.css file and restart Firefox to apply the changes.

Handling horizontal tab bar (only)

FF133+: Current solution (RECOMMENDED)

 #main-window[titlepreface*=" "] {
     #TabsToolbar {
         display: none;
     }

     #nav-bar {
         .titlebar-buttonbox-container {
             display: flex !important;
         }
     }
 }

FF133+: Original solution

  #main-window[titlepreface*=" "] #TabsToolbar {
      display: none;
  }

Up to FF132: Legacy solution (Only if on FF132 or earlier)

#main-window #titlebar {
    overflow: hidden;
    transition: height 0.3s 0.3s !important;
}

/* Hidden state: Hide native tabs strip */
#main-window[titlepreface*=" "] #titlebar { height: 0 !important; }

/* Hidden state: Fix z-index of active pinned tabs */
#main-window[titlepreface*=" "] #tabbrowser-tabs { z-index: 0 !important; }

Handling horizontal and vertical tab bars (FF136+)

FF136+: Current solution (RECOMMENDED)

#main-window[titlepreface*=" "] {
    #TabsToolbar {
        display: none;
    }

    #nav-bar {
        .titlebar-buttonbox-container {
            display: flex !important;
        }
    }
	
    #sidebar-main {
        display: none;
    }
}

FF136+: Original solution

#main-window[titlepreface*=" "] {
    #TabsToolbar {
        display: none;
    }
	
    #sidebar-main {
        display: none;
    }
}

Explanation & Reference

• This CSS targets the native tab bar components (horizontal and/or vertical) and hides them when a specific condition is met.
• The condition is based on the titlepreface property, which this add-on manipulates by adding or removing a space (" ").
• You can refer to Mozilla’s documentation for more details: MDN WebExtensions API - windows.update

(LIMITATION) Limited access to window control buttons

• When the native tabs are hidden, the minimize, maximize, and close buttons are not directly accessible. Here are some workarounds:
  • Use the current CSS solution to keep the Firefox native min/max/close buttons. (RECOMMENDED)
  • Use this add-on to temporarily show the native tab bar and regain access to the native window control buttons.
  • Use keyboard shortcuts:
    • Alt+Space, N for minimize
    • Alt+Space, X for maximize
  • Right-click the taskbar and use the context menu options.
  • Use Windows Key + Arrow Keys to move and resize the window.
  • Download and use Firefox add-ons that emulate the window control buttons and place them on the toolbar:
    • Minimize the Window
    • Maximize the Window
    • Close the Window
    • 

(INFO) Add-on icon & Dynamic Coloring

• Modern Minimalist Design: The add-on icon has been updated to a modern SVG design that visually represents both horizontal and vertical tab states.
• Dynamic Icon Color: The add-on now uses native SVG icons with context-fill. To allow the icon to automatically match your Firefox theme colors (staying visible on light, dark, or colorful themes), you must enable dynamic theme support:
  1. Go to about:config.
  2. Set svg.context-properties.content.enabled to true.

Important

Action Required: If you do not enable this setting, the add-on icon will remain black regardless of your theme and will not adapt to light or dark modes.

The icon color automatically adapts to match your browser theme's text color.

• The toolbar icon changes to reflect the current state of the native tab bar:
  • Indicates the native tab bar is currently visible. (Outer frame + tab line)
  • Indicates the native tab bar is currently hidden. (Outer frame only)

Inspiration and credits

• This add-on was inspired by Sidebery's Dynamic Native Tabs feature

  • Dynamic Native Tabs (GitHub Description)
  • While Sidebery focuses on whether its own sidebar is displayed, this add-on toggles only the native tab bar.
  • This allows both the sidebar and native tab bar to be shown simultaneously if desired.
  • You do not even have to show your sidebar to use this add-on.
  • It also offers a more generic implementation that could work with other sidebar add-ons like Tree Style Tab.

• Attribution for the base add-on icon:

  • Icons made by Freepik from www.flaticon.com.

Version History

Version 0.9.7.1 (April 26, 2026) — Icon Refresh

• Icon Refresh: Use the AMO icon for both about:addons page and AMO.

Version 0.9.6 (April 26, 2026) — Vertical Tabs Support & Dynamic Icon Coloring

• Vertical Tabs Support: Updated CSS instructions to support Firefox 136+ native vertical tabs.
• Dynamic Icon Coloring: Implemented dynamic SVG icons with context-fill to automatically match browser themes.
• Storage Modernization: Migrated to the asynchronous browser.storage.local API for improved reliability and data persistence.
• Project Hardening: Implemented CI/CD security best practices and standardized repository metadata (package.json).
• Project Reorganization: Organized all project assets into logical directories (icons/, ui/, options/).
• Build Modernization: Transitioned to the official Mozilla web-ext tool for standardized building and linting.
• Enhanced Options UI: Redesigned the Options page with a modern layout, dynamic versioning, and theme-aware favicons.
• Optimization: Reduced final XPI package size by 25% (compared to v0.9.5) through improved exclusion rules and asset optimization.
• Mozilla Compliance: Updated naming to "add-on" terminology and added accessibility metadata.

Version 0.9.5 (January 12, 2025) — Native Button Support Documentation

• Native Button Support: Documented a new (optional) CSS solution that allows using native min/max/close buttons instead of emulated ones.

Version 0.9.4 (December 14, 2024) — Keyboard Shortcut Support

• Keyboard Shortcut: Added keyboard support with "Ctrl+Alt+T" as the default shortcut to toggle the tab bar.

Version 0.9.3 (November 3, 2024) — Improved Instructions & Formatting

• Update Notifications: Added Firefox 133 userChrome.css change instructions to be displayed after add-on updates.
• Dismissible Instructions: Added a checkbox to disable showing installation instructions after an update until the next required change.
• OS-Specific Guides: Integrated better formatting and PC/Mac-specific instructions for initial userChrome.css setup.

Version 0.9.2 (June 24, 2024) — Bug Fixes

• Window Management: Fixed a bug where creating a new window did not behave as expected.

Version 0.9.1 (March 11, 2024) — Technical Update

• Compatibility Update: Updated the internal title delimiter from "XXX" to " " for better compatibility.

Version 0.9.0 (March 11, 2024) — Initial Release

• Core Functionality: Toggles the native Firefox tab bar via title preface manipulation.