CSS Code for Fx 91.x ESR (and 102.x ESR)

[CBA]

I'm testing the below CSS code (userChrome.css) with Fx 91.11 ESR Portable .. and it's doing pretty much what I want. That said, I'm sure there is some poor and/or redundant code in there. Thus, it would help if someone smarter than I took a look at it and, if/as required, suggested changes. TIA.

Code: Select all

/* make the tabs smaller - similar to the old compact mode */
.toolbar-items, .tabbrowser-tab {
  max-height: 28px;
}
:root[uidensity=touch] .toolbar-items, .tabbrowser-tab {
  max-height: 35px;
}

/* First tab should be touching the left screen edge */
.tabbrowser-tab[first-visible-tab] {
    padding-inline-start: 0px !important;
}

/* Show top border line on the selected tab */
.tab-background[selected="true"] {
	border-top: 2px solid #3d9ce9 !important;
}

/* If you want the background tabs to also have borders */
.tabbrowser-tab:not([selected="true"]) > .tab-stack > .tab-background {
  border: 1px solid rgba(130, 130, 130, 0.5) !important;
}

/* Remove unnecessary padding that was not there before */
.tabbrowser-tab {
    padding-inline: 0px !important;
}

/* Other tab related changes like height, touching the bar */
:root {
  --tab-min-height: 28px !important; /* Height from before photon */
  --tab-block-margin: 0px !important; /* Tabs should touch the bar */
  --tab-shadow-max-size: 0px !important; /* Leftmost tab when unselected is closer
    to the left (default: 8px in Proton)*/
  --tab-border-radius: 0px !important; /* Remove rounded corners */
  --tabs-border-color: none; /* Removes fine line between toolbar and tab background */
}

/* Tighten up drop-down/context/popup menu spacing */
menupopup:not(.in-menulist) > menuitem, 
menupopup:not(.in-menulist) > menu {
  padding-block: 2px !important; /* reduce to 3px, 2px, 1px or 0px as needed */ 
  min-height: unset !important; /* v92.0 - for padding below 4px */
}
:root {
  --arrowpanel-menuitem-padding: 2px 4px !important;
}

Background here: http://forums.mozillazine.org/viewtopic ... &t=3105113

[BruceAWittmeier]

Looks pretty clean.
About all I would add is the statement at the top of the file:
/* Set in about:config pref: toolkit.legacyUserProfileCustomizations.stylesheets to true */

Any duplicates -- the last one always wins.

[CBA]

Many thanks! No need to add the statement at the top as I'm fully aware of this. But, good that you mentioned it .. for others reading this thread.

I'm sure there are various ways to achieve the results I'm looking for .. as my CSS code is a summary of snippets picked from different people. But, I'm always looking to streamline the code (a leftover from my PC-DOS days) .. I noticed that removing the below doesn't make a difference. Or, does it?

Code: Select all

  --tab-shadow-max-size: 0px !important; /* Leftmost tab when unselected is closer to the left (default: 8px in Proton)*/

At any rate, good to have feedback that I'm on the right road .. either the long windy (winding) one or the shortcut.

[CBA]

Still running Fx 91.11 ESR Portable (in parallel with my default Fx 88.0.1) with the above CSS code. It seems I missed one code entry to reduce the vertical spacing of the classic print-preview "scale" pull-down. Not a big deal at all, but in case someone has the CSS code to fix this .. do let me know. TIA.

[CBA]

By chance (luck) I may have found a fix myself. By removing :not(.in-menulist) from the CSS code intended to "tighten up drop-down/context/popup menu spacing", the vertical line spacing was reduced also on the "classic-legacy" print preview "scale" pull-down.

In the meantime I have installed Fx 91.13 ESR (August 23, 2022) as my default using the below updated userChrome.css. Thanks to @jscher2000 for providing the underlying code.

Code: Select all

/* make the tabs smaller - similar to the old compact mode */
.toolbar-items, .tabbrowser-tab {
  max-height: 28px;
}
:root[uidensity=touch] .toolbar-items, .tabbrowser-tab {
  max-height: 35px;
}

/* First tab should be touching the left screen edge */
.tabbrowser-tab[first-visible-tab] {
    padding-inline-start: 0px !important;
}

/* Show top border line on the selected tab */
.tab-background[selected="true"] {
	border-top: 2px solid #3d9ce9 !important;
}

/* If you want the background tabs to also have borders */
.tabbrowser-tab:not([selected="true"]) > .tab-stack > .tab-background {
  border: 1px solid rgba(130, 130, 130, 0.5) !important;
}

/* Remove unnecessary padding that was not there before */
.tabbrowser-tab {
    padding-inline: 0px !important;
}

/* Other tab related changes like height, touching the bar */
:root {
  --tab-min-height: 28px !important; /* Height from before photon */
  --tab-block-margin: 0px !important; /* Tabs should touch the bar */
  --tab-shadow-max-size: 0px !important; /* Leftmost tab when unselected is closer
    to the left (default: 8px in Proton)*/
  --tab-border-radius: 0px !important; /* Remove rounded corners */
  --tabs-border-color: none; /* Removes fine line between toolbar and tab background */
}

/* Tighten up drop-down/context/popup menu spacing */
menupopup > menuitem, 
menupopup > menu {
  padding-block: 2px !important; /* reduce to 3px, 2px, 1px or 0px as needed */ 
  min-height: unset !important; /* v92.0 - for padding below 4px */
}
:root {
  --arrowpanel-menuitem-padding: 2px 4px !important;
}

[ltsnow]

You're code looks pretty good to me, but I am not an expert merely someone who plays with CSS code a lot.

I kind of assume that you are familiar with this website:

https://github.com/aris-t2/customcssforfx

He is amazing and is constantly updating the code for the beta and even nightly releases, which wouldn't affect you, but I use the release and the nightly builds.

Also, this is the website I use when I have a CSS problem:

https://old.reddit.com/r/FirefoxCSS/

[dickvl]

It might be better to adjust the CSS variable.

Code: Select all

*|*:root { --tab-min-height: 28px !important; }

Support for first-visible-tab and last-visible-tab and a few other class selectors has been removed in 110 and only first-visible-unpinned-tab is left.
https://developer.mozilla.org/en-US/doc ... do-classes

[CBA]

You're code looks pretty good to me, but I am not an expert merely someone who plays with CSS code a lot...

Thanks for the feedback. I know of Aris from the time he maintained the CTR and his efforts, since then, to provide Fx CSS code is admirable. As I try to keep it simple (less is more) his Github website is almost too much. But, I do visit there from time to time. As for the Reddit FirefoxCSS link, that one is new to me and I'll check it out. Thanks again.

[CBA]

It might be better to adjust the CSS variable. *|*:root { --tab-min-height: 28px !important; }

Edited reply: please elaborate as I'm not sure what you mean. TIA. Keep in mind that I'm basically dabbling with the code "blindly"...

Support for first-visible-tab and last-visible-tab and a few other class selectors has been removed in 110 and only first-visible-unpinned-tab is left...

For now, as the classic-legacy print preview is a must, what happens to Fx 110+ is for a later time. I'll be playing around with 91.13 ESR for some time. I do appreciate your feedback!

[CBA]

In the meantime I have installed Fx 91.13 ESR (August 23, 2022) as my default using the below updated userChrome.css ...

In addition to my "default" code above, I'm testing CSS code to "hide the tab bar if there is only one tab" (to get more display space when for example visiting online banks or similar). In spite of the inherent "jerkiness" in moving from no tab to several tabs, there are advantages. This is the code I "found" on Mozilla Support Forum (suggested by cor-el):

Code: Select all

/* Hide Tab bar with only one Tab - [110] */
#tabbrowser-tabs .tabbrowser-tab:only-of-type,
#tabbrowser-tabs .tabbrowser-tab:only-of-type + #tabbrowser-arrowscrollbox-periphery {display:none !important;}
#tabbrowser-tabs, #tabbrowser-arrowscrollbox {min-height:0!important;}

/* #TabsToolbar:not(:hover) */
#alltabs-button {display:none !important;}

The code works fine with Fx 91.13 ESR and 96.0.3 (as well as reportedly Fx 110+ where support for first-visible-tab and last-visible-tab has been removed). For easy access, I have the open a new tab icon placed on the bookmarks toolbar.

[ltsnow]

In the meantime I have installed Fx 91.13 ESR (August 23, 2022) as my default using the below updated userChrome.css ...

In addition to my "default" code above, I'm testing CSS code to "hide the tab bar if there is only one tab" (to get more display space when for example visiting online banks or similar). In spite of the inherent "jerkiness" in moving from no tab to several tabs, there are advantages. This is the code I "found" on Mozilla Support Forum (suggested by cor-el):

Code: Select all

/* Hide Tab bar with only one Tab - [110] */
#tabbrowser-tabs .tabbrowser-tab:only-of-type,
#tabbrowser-tabs .tabbrowser-tab:only-of-type + #tabbrowser-arrowscrollbox-periphery {display:none !important;}
#tabbrowser-tabs, #tabbrowser-arrowscrollbox {min-height:0!important;}

/* #TabsToolbar:not(:hover) */
#alltabs-button {display:none !important;}

The code works fine with Fx 91.13 ESR and 96.0.3 (as well as reportedly Fx 110+ where support for first-visible-tab and last-visible-tab has been removed). For easy access, I have the open a new tab icon placed on the bookmarks toolbar.

Yes, that's the code I've been using since they made a change. Good that you are sharing it with those who do no not know it.

[CBA]

PS: in the meantime I also use the above CSS code with Tor Browser 12.05, which is based on Fx 102.10.0 ESR. Works fine. Mission completed!