Various improvements to multi-row_tabs_below_content

This patch makes it easier to change some settings, as well as adds an
optional behavior to show static menubar via custom pref.
This commit is contained in:
MrOtherGuy 2022-05-06 10:16:49 +03:00
parent 961c40c34b
commit df85873f33

View file

@ -1,17 +1,20 @@
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/multi-row_tabs_below_content.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
/* Makes tabs to appear on multiple lines below the web content */
/* Tab reordering will not work and can't be made to work */
/* Make menubar enabled for getting window controls in correct place. Menubar options will be shown as overlay when mouse is at top-left corner */
/* It's recommended to move tabs new-tab-button outside tabs toolbar */
/* Change the --multirow-n-rows to change maximum number of rows before the rows will start to scroll */
/* Scrollbar can't be clicked but the rows can be scrolled with mouse */
/* This maximum visible rows won't work before Fx66 */
/* So this setting does nothing on Fx65 and all tab rows will be shown */
/* Makes tabs to appear on multiple lines below the web content
* Tab reordering will not work and can't be made to work
*
* Make menubar enabled for getting window controls in correct place.
* Menubar options will be shown as overlay when mouse is at top-left corner
* To enable static menubar, create a new boolean pref
* userchrome.multirowtabs.static-menubar.enabled
*
* It's recommended to move tabs new-tab-button outside tabs toolbar
*
* Change the --multirow-n-rows to change maximum number of rows
* before the rows will start to scroll.
* Scrollbar can't be clicked but the rows can be scrolled with mouse.
*/
@-moz-document url(chrome://browser/content/browser.xhtml){
@ -24,6 +27,8 @@ See the above repository for updates as well as full license text. */
--multirow-n-rows: 3;
--multirow-tab-min-width: 100px;
--multirow-tab-dynamic-width: 1; /* Change to 0 for fixed-width tabs using the above width. */
--uc-window-drag-space-width: 30px;
--uc-window-control-width: 138px;
}
@media (-moz-platform: windows),
(-moz-os-version: windows-win7),
@ -35,8 +40,7 @@ See the above repository for updates as well as full license text. */
:root[uidensity="compact"]{ --multirow-toolbar-height: 34px }
:root{ border-top-width: 0px !important }
#main-window > body > box,
#navigator-toolbox{
#navigator-toolbox-background{
-moz-box-ordinal-group: 2;
border-bottom: 0px !important;
}
@ -53,16 +57,15 @@ See the above repository for updates as well as full license text. */
/* For some reason -webkit-box behaves internally like -moz-box, but can be used with fixed position. display: flex would work too but it breaks extension menus. */
display: -webkit-box;
-webkit-box-flex: 1;
margin-left: 30px;
width: calc(100vw - 30px);
margin-left: var(--uc-window-drag-space-width);
width: calc(100vw - var(--uc-window-drag-space-width));
top: var(--multirow-top-padding);
}
#nav-bar-customization-target{ -webkit-box-flex: 1 }
:root[inFullscreen] #nav-bar,
:root[tabsintitlebar] #nav-bar{
margin-right: 138px;
/* width == 100vw - margins */
width: calc(100vw - 168px);
margin-right: var(--uc-window-control-width);
width: calc(100vw - var(--uc-window-control-width) - var(--uc-window-drag-space-width));
}
:root[inFullscreen] #TabsToolbar > #window-controls{
@ -83,7 +86,9 @@ See the above repository for updates as well as full license text. */
#customization-container,
:root:not([inFullscreen]) #content-deck,
:root:not([inFullscreen]) #browser{ margin-top: calc(var(--multirow-toolbar-height) + var(--multirow-top-padding))}
:root:not([inFullscreen]) #browser{
margin-top: calc(var(--multirow-toolbar-height) + var(--multirow-top-padding) + var(--multirow-menubar-height,0px))
}
:root[inFullscreen] #TabsToolbar > #window-controls,
:root[inFullscreen] #toolbar-menubar,
@ -116,15 +121,18 @@ See the above repository for updates as well as full license text. */
height: 100%;
visibility: hidden;
}
#main-menubar{ height: var(--multirow-toolbar-height) }
#toolbar-menubar:hover{ z-index: 2 }
#toolbar-menubar:hover > #menubar-items{
visibility: visible;
background-image: linear-gradient( to left,transparent,var(--lwt-frame) 35px);
}
#toolbar-menubar > .titlebar-buttonbox-container{ background: var(--toolbar-bgcolor); }
#toolbar-menubar > .titlebar-buttonbox-container{
background: var(--toolbar-bgcolor);
order:1000;
}
#menubar-items + spacer{ order: 1000 }
#toolbar-menubar > .titlebar-buttonbox-container > .titlebar-buttonbox{ height: 100% ;}
#main-menubar:last-child{ padding-inline-end: 40px }
@ -138,7 +146,7 @@ See the above repository for updates as well as full license text. */
max-width: 28px !important;
}
:root[tabsintitlebar] #PanelUI-button{ margin-right: 20px; }
:root[tabsintitlebar] #PanelUI-button{ margin-right: var(--uc-window-drag-space-width); }
#tabbrowser-tabs{
min-height: unset !important;
@ -206,4 +214,18 @@ See the above repository for updates as well as full license text. */
#tabbrowser-arrowscrollbox > spacer,
.tabbrowser-tab::after{ display: none !important } /* Also disables tab separators since they mysteriously break tab-row scrolling */
@supports -moz-bool-pref("userchrome.multirowtabs.static-menubar.enabled"){
:root{
--multirow-menubar-height: 28px;
--uc-window-drag-space-width: 0px;
--uc-window-control-width: 0px;
}
#main-menubar,
#toolbar-menubar{ height: var(--multirow-menubar-height); background-image: none; }
#toolbar-menubar > #menubar-items{ visibility: visible; background-image: none !important; }
.titlebar-buttonbox-container{ background: none !important }
:root:not([inFullscreen]) #nav-bar{
top: calc(var(--multirow-menubar-height) + var(--multirow-top-padding));
}
}
}