搜尋 Mozilla 技術支援網站

防止技術支援詐騙。我們絕對不會要求您撥打電話或發送簡訊,或是提供個人資訊。請用「回報濫用」功能回報可疑的行為。

Learn More

How can I replace to ">" button usage for overflown tabs with a new tab-bar to capture overflown tabs underneath a full tab-bar?

  • 4 回覆
  • 1 有這個問題
  • 47 次檢視
  • 最近回覆由 heetbeet

more options

I am looking for a way to be able to see all open tabs without any tab hiding behind a "more tabs" type of button. Is there a way to generate a new tab-bar underneath the top tab-bar when the top bar gets filled, in order to capture the overflow?

附加的畫面擷圖

被選擇的解決方法

The best substitute for a solution I could find was to allow a thin bar of website icons tabs on the left of the browser. I successfully did this by adjusting the approach from https://www.reddit.com/r/FirefoxCSS/comments/7emhsq/my_compact_treestyletab_css_and_sidebar_hover/ :

A: Install and setup Tree-Tabs add-on to be as thin and slick as possible:

  1. Install https://addons.mozilla.org/en-US/firefox/addon/tree-style-tab/
  2. Set "indent tabs until" to "0" in about:addons -> Tree Style Tab -> preferences
  3. Inject the following settings into the text-box in about:addons -> Tree Style Tab -> preferences -> Advanced -> Extra style rules...


       :root {
           --color-background: rgba(120,140,170,1); /*choose according to color theme*/
           --color-transparent: rgba(0,0,0,0);
       }
       
       /* ################################################ */
       /* ##### SPACIAL SETTINGS ######################### */
       /* ################################################ */
       
       /* change tab height */
       :root {
         --tab-height: 22px !important;
       }
       .tab {
         height: var(--tab-height) !important;
       }
       
       /* hide close button */
       .tab .closebox {
         display: none;
       }
       
       /* hide scrollbar */
       #tabbar { 
         overflow-y: scroll;
       }
       
       :root.left #tabbar,
       #tabContextMenu,
       #tabContextMenu ul {
         margin-left: -19px;
       }
       
       /* Hide .twisty and adjust margins so favicons go to the left. */
       .tab .twisty {
           visibility: hidden;
           margin-left: -12px;
       }
       
       /* Hide 'new tab' button. */
       .newtab-button {
           display: none;
       }
       
       /* ################################################ */
       /* ##### COLOR SETTINGS ########################### */
       /* ################################################ */
       .tab {
           background-color: var(--color-background);
           border-color: var(--color-transparent);
       }
       .tab:hover {
           background-color: var(--color-transparent);
           color: var(--color-transparent);
       }
       .tab.active {
           background-color: var(--color-transparent);
       }
       
       
       /* Rotate tab that has sound playing and make muted tabs transparent. */
       @keyframes spin {
           0% { transform: rotate(0deg); }
           100% { transform: rotate(360deg);}
       }
       .tab.sound-playing .favicon {
           animation: spin 7s linear 0s infinite;
       }
       .tab.muted {
           opacity: 0.5;
       }


B: Now add the ability to make the sidebar as narrow as the icons:

  1. Create a userChrome.css file: on linux under ~/.mozilla/firefox/<number>.default/chrome/userChrome.css, for other platforms see https://www.userchrome.org/
  2. Fill the file with the following code:


       /* Sidebar min and max width removal */
       #sidebar {
           max-width: none !important;
           min-width: 18px !important;
       }
       /* Hide splitter, when using Tree Style Tab. */
       #sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] + #sidebar-splitter {
           display: none !important;
       }
       /* Hide sidebar header, when using Tree Style Tab. */
       #sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
           visibility: collapse;
       }
       /* Shrink sidebar until hovered, when using Tree Style Tab. */
       #sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]{
           min-width: 18px !important;
           max-width: 18px !important;
       }
從原來的回覆中察看解決方案 👍 0

所有回覆 (4)

more options

Sorta but not really.

Please let us know if this solved your issue or if need further assistance.

more options

The tree-tabs helper was the closest to a solution, but it takes up so much real estate on my interface. I "solved" this by adding the ability to make the sidebar arbitrarily narrow through adding this file:

~/.mozilla/firefox/<number>.default/chrome/userChrome.css

and fill it with the following:

   #sidebar-box {
       overflow-x: hidden !important;
   }
    #sidebar {
       min-width: 0px !important;
       max-width: none !important;
       overflow-x: hidden !important;
   }

由 heetbeet 於 修改

more options

Hi, please mark "your" answer as the solution. Glad you found something.

more options

選擇的解決方法

The best substitute for a solution I could find was to allow a thin bar of website icons tabs on the left of the browser. I successfully did this by adjusting the approach from https://www.reddit.com/r/FirefoxCSS/comments/7emhsq/my_compact_treestyletab_css_and_sidebar_hover/ :

A: Install and setup Tree-Tabs add-on to be as thin and slick as possible:

  1. Install https://addons.mozilla.org/en-US/firefox/addon/tree-style-tab/
  2. Set "indent tabs until" to "0" in about:addons -> Tree Style Tab -> preferences
  3. Inject the following settings into the text-box in about:addons -> Tree Style Tab -> preferences -> Advanced -> Extra style rules...


       :root {
           --color-background: rgba(120,140,170,1); /*choose according to color theme*/
           --color-transparent: rgba(0,0,0,0);
       }
       
       /* ################################################ */
       /* ##### SPACIAL SETTINGS ######################### */
       /* ################################################ */
       
       /* change tab height */
       :root {
         --tab-height: 22px !important;
       }
       .tab {
         height: var(--tab-height) !important;
       }
       
       /* hide close button */
       .tab .closebox {
         display: none;
       }
       
       /* hide scrollbar */
       #tabbar { 
         overflow-y: scroll;
       }
       
       :root.left #tabbar,
       #tabContextMenu,
       #tabContextMenu ul {
         margin-left: -19px;
       }
       
       /* Hide .twisty and adjust margins so favicons go to the left. */
       .tab .twisty {
           visibility: hidden;
           margin-left: -12px;
       }
       
       /* Hide 'new tab' button. */
       .newtab-button {
           display: none;
       }
       
       /* ################################################ */
       /* ##### COLOR SETTINGS ########################### */
       /* ################################################ */
       .tab {
           background-color: var(--color-background);
           border-color: var(--color-transparent);
       }
       .tab:hover {
           background-color: var(--color-transparent);
           color: var(--color-transparent);
       }
       .tab.active {
           background-color: var(--color-transparent);
       }
       
       
       /* Rotate tab that has sound playing and make muted tabs transparent. */
       @keyframes spin {
           0% { transform: rotate(0deg); }
           100% { transform: rotate(360deg);}
       }
       .tab.sound-playing .favicon {
           animation: spin 7s linear 0s infinite;
       }
       .tab.muted {
           opacity: 0.5;
       }


B: Now add the ability to make the sidebar as narrow as the icons:

  1. Create a userChrome.css file: on linux under ~/.mozilla/firefox/<number>.default/chrome/userChrome.css, for other platforms see https://www.userchrome.org/
  2. Fill the file with the following code:


       /* Sidebar min and max width removal */
       #sidebar {
           max-width: none !important;
           min-width: 18px !important;
       }
       /* Hide splitter, when using Tree Style Tab. */
       #sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] + #sidebar-splitter {
           display: none !important;
       }
       /* Hide sidebar header, when using Tree Style Tab. */
       #sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
           visibility: collapse;
       }
       /* Shrink sidebar until hovered, when using Tree Style Tab. */
       #sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]{
           min-width: 18px !important;
           max-width: 18px !important;
       }

由 heetbeet 於 修改