On the Firefox ESR channel, so don’t yet have the native vertical tabs available, but am testing with MrOtherGuy’s vertical tabs css, which work very well. In fact, there is a distinct advantage, in that using the vertical tabs css doesn’t make use of the sidebar; therefore one can have vertical tabs on one side of the screen, and the sidebar on the other side.

Now I’ve found that I can make the css vertical tabs expand on mouse-over, buy adding this to the css: :root:not([customizing]) #tabbrowser-tabs:hover{ width: 220px !important; } (elsewhere I’ve set the width much smaller, so when hover, it expands to this width). I know that I could also add similar code to make the page content shrink by the same amount (pushing the page content over to accommodate the expanded tabs), but my objective is to have the expanded tabs be in front of the page content. The problem is that the tabs are expanding behind the page content. Can someone show me how to have the tabs expand in front of the page content?

Bonus points for one additional trick: I would like the tabs to not expand when the mouse pointer is on the tabs scroll-bar, only when the pointer is on the tabs.

  • MrOtherGuy@lemmy.worldM
    2·
    23 days ago

    You can get tabs over web-content by simply adding z-index to tabbrowser-tabs. So adding this after vertical_tabs code should work:

    :root:not([customizing],[chromehidden~="menubar"]){
  --uc-vertical-tabs-width: 40px;
}
:root:not([customizing]) #tabbrowser-tabs:hover{
  width: 220px !important;
  z-index: 1;
}

    But I’m not sure how you should make scrollbar not trigger expansion.

    • mrqwerky@fedia.ioOP
      1·
      22 days ago

      Many thanks for the reply. Yes, setting z-index brings the tabs in front of the page content. Unfortunately, the tabs are then covering the navbar and statusbar.

      So what I did is set the tabpanel top to height of menubar + height of navbar; and also set the tabpanel height to 100vh - height of menubar - height of navbar - height of statusbar. Height of menubar and height of statusbar can be initialized to ‘0’ for users not using those bars. The way I found the height of the menubar and the height of the statusbar was simply by experimenting, as I don’t know how else to find them (my menubar is less than the default, since I’ve reduced the padding).

      If one can’t determine hover on scrollbar, could you let me know how to set the tabpanel, which I have on the right side of the window, a few pixels to the left of the right edge of the window? That way there will be a slight empty space there, where the mouse pointer won’t cause the tabs to expand.

      Also, how can I reduce the height of the tabs, in order to show more tabs at once?

      Thanks.

      • MrOtherGuy@lemmy.worldM
        2·
        22 days ago

        You should be able to simply set z-index: 1 for #nav-bar as well to not have tabs cover it. And then add margin to both tabs and the content-area to create empty space at right. Then you could also do some hackery to make the scrollbar display in that empty area and make it not respond to mouse events, that would cause the tabs to not expand when scrollbar is hovered. But of course that also means that the scrollbar cannot be clicked - basically it becomes just an indicator, which might be alright.

        So all in all you would add this to vertical_tabs.css:

        :root:not([customizing],[chromehidden~="menubar"]){
  --uc-vertical-tabs-width: 40px;
}
:root:not([customizing]) #tabbrowser-tabs:hover{
  width: 220px !important;
  z-index: 1;
}
#nav-bar{
  z-index: 1;
}
#main-window:not([inDOMFullscreen]) > body > #browser{
  margin-right: calc(var(--uc-vertical-tabs-width) + 8px);
}
:root:not([customizing]) #tabbrowser-tabs{
  margin-right: 8px;
}
#tabs-newtab-button,
.tabbrowser-tab{
  pointer-events: auto;
}
scrollbox[orient="horizontal"]{
  scrollbar-width: thin;
  pointer-events: none;
  margin-right: -8px;
}

        The empty area on right might become “wrong” colored, but you can then just add whatever background-color you want for the #main-window

        Note, you said you have tabs on right side of window so the empty area only works with that.

        • mrqwerky@fedia.ioOP
          1·
          21 days ago

          Many thanks. This works great. I found a 4px wide margin was sufficient for me to park my mouse pointer on the right edge of the screen without expanding tabs, and the background colour is consistent and narrow enough to not be annoying, so I didn’t try moving the scrollbar to the right edge.

          There is another question about the tabs, but it is unrelated to expanding, so I will start a new thread about tab colours.