TabMixPlus
TabMixPlus copied to clipboard
onemen
Add option to toggle compact mode for tab height
We can add option to toggle compact mode for tab height, with a simple checkbox.
compact: preference browser.uidensity = 1
normal: preference browser.uidensity = 0
Currently in Firefox 91 the value for compact height is 29px.
We can also add slider to allow the user to set custom height, values can be from 21px to 40px
Mozilla decides to hide Compact Mode in Firefox for new users but keep it for existing ones read more
about:config preference to show Compact Mode in the customize menu (at the bottom) is browser.compactmode.show set to true
I think that this is reason to add it to our preferences for better discovery
We can also add slider to allow the user to set custom height, values can be from 21px to 40px
IMO, this would be an EXCELLENT addition, because it would enable visually impaired individuals (such as me), who must set screen and/or font magnification above standard, to reclaim some vertical screen space.
I also prefer very small height for multi-row tabs. After migrating from Palemoon with ThinTabs addon back to Firefox, I realized that tab height and font is only possible to customize via userChrome.css. Right now I have a quite complex userChrome.css collecting some of the hints into one.
/* https://gist.github.com/chris-vecchio/d6a47fc733559752cc3a09937381d7ae */
/* Firefox userChrome.css */
/*** PROTON TABS TWEAKS ***/
/* SOURCE: https://www.userchrome.org/firefox-89-styling-proton-ui.html#tabstyler */
/* Adjust tab corner shape, optionally remove space below tabs */
#tabbrowser-tabs {
--user-tab-rounding: 0px;
}
.tab-background {
border-radius: var(--user-tab-rounding) var(--user-tab-rounding) 0px 0px !important;
margin-block: 1px 0 !important;
}
#scrollbutton-up,
#scrollbutton-down {
/* 6/10/2021 */
border-top-width: 1px !important;
border-bottom-width: 0 !important;
}
/* Container color bar visibility */
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
margin: 0px max(calc(var(--user-tab-rounding) - 3px), 0px) !important;
}
/* Inactive tabs: Separator line style */
.tabbrowser-tab:not([selected=true]):not([multiselected=true]):not([beforeselected-visible="true"]) .tab-background {
border-right: 1px solid var(--lwt-background-tab-separator-color, rgba(0, 0, 0, .20)) !important;
}
/* For dark backgrounds */
/*[brighttext="true"] .tabbrowser-tab:not([selected=true]):not([multiselected=true]):not([beforeselected-visible="true"]) .tab-background {
border-right: 1px solid var(--lwt-background-tab-separator-color, var(--lwt-selected-tab-background-color, rgba(255, 255, 255, .20))) !important;
}*/
.tabbrowser-tab:not([selected=true]):not([multiselected=true]) .tab-background {
border-radius: 0 !important;
}
/* Remove padding between tabs */
.tabbrowser-tab {
padding-left: 0 !important;
padding-right: 0 !important;
}
/*** END PROTON TABS TWEAKS ***/
/* Set tab fill color and text color */
/*** TIGHTEN UP DROP-DOWN/CONTEXT/POPUP MENU SPACING ***/
/* SOURCE: https://www.userchrome.org/firefox-89-styling-proton-ui.html#menuspacing */
menupopup > menuitem,
menupopup > menu {
padding-block: 2px !important;
min-height: unset !important; /* v92.0 - for padding below 4px */
}
/* Tighten up hamburger menu spacing and square the edges */
:root {
--arrowpanel-menuitem-padding: 2px !important;
--arrowpanel-border-radius: 0px !important;
--arrowpanel-menuitem-border-radius: 0px !important;
}
/*** END TIGHTEN UP DROP-DOWN/CONTEXT/POPUP MENU SPACING ***/
/* Fill new style bookmark folders with specified color */
/* This also works when using "show all bookmarks" */
/* This does not require the image file "folder-item.png" inside the chrome folder */
.bookmark-item[container],
treechildren::-moz-tree-image(container) {
fill: #e67a17 !important;
}
/* Hide dropdown that appears when you type in search bar */
.autocomplete-history-popup,
panel[type=autocomplete-richlistbox],
panel[type=autocomplete] {
display: none !important;
}
/* https://www.reddit.com/r/FirefoxCSS/comments/sazeer/unable_to_decrease_tab_height_after_96_update/ */
/* make the tabs .. pixels high instead of 32 pixels */
:root[uidensity=compact] {
--tab-min-height: 15px !important;
}
/* change the tab font size */
#tabbrowser-tabs .tab-text {
font-size: 8pt !important;
}
/* change the address bar font size */
#urlbar {
font-size: 8pt !important;
}
/* remove back and forward buttions, use mouse side buttons instead lol */
/* #back-button, #forward-button { display:none!important; } */
/* remove X buttons on tabs, just use the middle click instead lol */
#tabbrowser-tabs .tabbrowser-tab .tab-close-button {
display: none!important;
}
/* autohide address bar, im not entirely sure how this works, i copied it off the internet */
/*
#nav-bar {
--navbar-margin: -65px;
margin-top: var(--navbar-margin);
margin-bottom: 0;
z-index: -100;
transition: all 0.1s ease !important;
opacity: 0;
}
#navigator-toolbox:focus-within > #nav-bar,
#navigator-toolbox:hover > #nav-bar
{
margin-top: 0;
margin-bottom: var(--navbar-margin);
z-index: 100;
opacity: 1;
}
.tabmail-tabs *|tab {
font-size: 20px !important;
height: 50px !important;
min-width: 8px !important
}
*/
.tab-label-container {
height: unset !important;
}
@Massimo-B
just set browser.uidensity to 1 in about:config
this will set uidensity to compact, but it only set the height to 29px;
:root[uidensity=compact] {
--tab-min-height: 29px;
}
Thank you! I so appreciate your sharing these scripts. I will try them one by one using StyloaiX. I find that easier to manage than a single, long userChrome.css file.
Elchanan, PE for Vibrant Living Ministries, and Successors
From: Massimo-B @.> Sent: Thursday, March 17, 2022 4:38 AM To: onemen/TabMixPlus @.> Cc: VLMin @.>; Comment @.> Subject: Re: [onemen/TabMixPlus] Add option to toggle compact mode for tab height (#43)
I also prefer very small height for multi-row tabs. After migrating from Palemoon with ThinTabs addon back to Firefox, I realized that tab height and font is only possible to customize via userChrome.css. Right now I have a quite complex userChrome.css collecting some of the hints into one.
/* https://gist.github.com/chris-vecchio/d6a47fc733559752cc3a09937381d7ae */
/* Firefox userChrome.css */
/*** PROTON TABS TWEAKS ***/
/* SOURCE: https://www.userchrome.org/firefox-89-styling-proton-ui.html#tabstyler */
/* Adjust tab corner shape, optionally remove space below tabs */
#tabbrowser-tabs { --user-tab-rounding: 0px; }
.tab-background { border-radius: var(--user-tab-rounding) var(--user-tab-rounding) 0px 0px !important; margin-block: 1px 0 !important; }
#scrollbutton-up, #scrollbutton-down { /* 6/10/2021 */ border-top-width: 1px !important; border-bottom-width: 0 !important; }
/* Container color bar visibility */
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line { margin: 0px max(calc(var(--user-tab-rounding) - 3px), 0px) !important; }
/* Inactive tabs: Separator line style */
.tabbrowser-tab:not([selected=true]):not([multiselected=true]):not([beforeselected-visible="true"]) .tab-background { border-right: 1px solid var(--lwt-background-tab-separator-color, rgba(0, 0, 0, .20)) !important; }
/* For dark backgrounds */
/[brighttext="true"] .tabbrowser-tab:not([selected=true]):not([multiselected=true]):not([beforeselected-visible="true"]) .tab-background { border-right: 1px solid var(--lwt-background-tab-separator-color, var(--lwt-selected-tab-background-color, rgba(255, 255, 255, .20))) !important; }/
.tabbrowser-tab:not([selected=true]):not([multiselected=true]) .tab-background { border-radius: 0 !important; }
/* Remove padding between tabs */
.tabbrowser-tab { padding-left: 0 !important; padding-right: 0 !important; }
/*** END PROTON TABS TWEAKS ***/
/* Set tab fill color and text color */
/*** TIGHTEN UP DROP-DOWN/CONTEXT/POPUP MENU SPACING ***/
/* SOURCE: https://www.userchrome.org/firefox-89-styling-proton-ui.html#menuspacing */
menupopup > menuitem, menupopup > menu { padding-block: 2px !important; min-height: unset !important; /* v92.0 - for padding below 4px */ }
/* Tighten up hamburger menu spacing and square the edges */
:root { --arrowpanel-menuitem-padding: 2px !important; --arrowpanel-border-radius: 0px !important; --arrowpanel-menuitem-border-radius: 0px !important; }
/*** END TIGHTEN UP DROP-DOWN/CONTEXT/POPUP MENU SPACING ***/
/* Fill new style bookmark folders with specified color */
/* This also works when using "show all bookmarks" */
/* This does not require the image file "folder-item.png" inside the chrome folder */
.bookmark-item[container], treechildren::-moz-tree-image(container) { fill: #e67a17 !important; }
/* Hide dropdown that appears when you type in search bar */
.autocomplete-history-popup, panel[type=autocomplete-richlistbox], panel[type=autocomplete] { display: none !important; }
/* https://www.reddit.com/r/FirefoxCSS/comments/sazeer/unable_to_decrease_tab_height_after_96_update/ */
/* make the tabs .. pixels high instead of 32 pixels */
:root[uidensity=compact] { --tab-min-height: 15px !important; }
/* change the tab font size */
#tabbrowser-tabs .tab-text { font-size: 8pt !important; }
/* change the address bar font size */
#urlbar { font-size: 8pt !important; }
/* remove back and forward buttions, use mouse side buttons instead lol */
/* #back-button, #forward-button { display:none!important; } */
/* remove X buttons on tabs, just use the middle click instead lol */
#tabbrowser-tabs .tabbrowser-tab .tab-close-button { display: none!important; }
/* autohide address bar, im not entirely sure how this works, i copied it off the internet */
/* #nav-bar { --navbar-margin: -65px;
margin-top: var(--navbar-margin);
margin-bottom: 0;
z-index: -100;
transition: all 0.1s ease !important;
opacity: 0;
}
#navigator-toolbox:focus-within > #nav-bar, #navigator-toolbox:hover > #nav-bar { margin-top: 0; margin-bottom: var(--navbar-margin); z-index: 100; opacity: 1; }
.tabmail-tabs *|tab {
font-size: 20px !important;
height: 50px !important;
min-width: 8px !important
} */
.tab-label-container { height: unset !important; }
https://user-images.githubusercontent.com/3286728/158800571-caa05ca8-e93d-4980-bac7-2ac74aa22203.png
— Reply to this email directly, view it on GitHub https://github.com/onemen/TabMixPlus/issues/43#issuecomment-1070821846 , or unsubscribe https://github.com/notifications/unsubscribe-auth/AB6YURWJ7DWNFUJPXJU4VK3VAMKRJANCNFSM47Y2B5XQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub . You are receiving this because you commented. https://github.com/notifications/beacon/AB6YURSTYRXAK6BWZIJDUZ3VAMKRJA5CNFSM47Y2B5X2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOH7JXDVQ.gif Message ID: @.*** @.***> >
Thank you. I already have the same browser.uidensity setting. I will work with the scripts you provided.