Fx 119: Display > Tab > Customize Styles

[VLM-TechEd]

Fx 119: Display > Tab > Customize Styles

[onemen]

download and try this test build

[pyrates999]

I was able to modify the tab ui by modifying the file chrome/userChrome.css.

Here is my chrome/userChrome.css:

/* 
about:config -> toolkit.legacyUserProfileCustomizations.stylesheets -> true
create <user-profile-dir>/chrome/userChrome.css and insert:
*/

/*
below from: https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/
*/
@import url(chrome/window_control_placeholder_support.css);
@import url(chrome/tabs_on_bottom.css);
@import url(chrome/tabs_on_bottom_menubar_on_top_patch.css);
@import url(chrome/tab_loading_progress_bar.css);

.tabbrowser-tab .tab-background {
  box-shadow: 0 0 0px 1px color-mix(in srgb, currentColor 40%, transparent), 0 10px 10px rgba(255,255,255,0.2) inset !important;
  background-image: var(--toolbar-non-lwt-bgimage) !important;
  border-radius: 3px 3px 0 0 !important;
  margin-bottom: 0px !important;
  max-height: 28px !important;
  max-width: 120px !important;
}

.tabbrowser-tab:not([selected=true]):not([multiselected=true]) .tab-background {
  box-shadow: 0 0 0px 1px color-mix(in srgb, currentColor 40%, transparent), 0 10px 10px rgba(255,255,255,0.2) inset !important;
  background-image: none !important;
  background-color: #dadada !important;
  border-radius: 3px 3px 0 0 !important;
  margin-bottom: 0px !important;
}

.tabbrowser-tab[pending="true"]:not([selected=true]):not([multiselected=true]) .tab-background {
  box-shadow: 0 0 0px 1px color-mix(in srgb, currentColor 40%, transparent), 0 10px 10px rgba(255,255,255,0.2) inset !important;
  background-image: none !important;
  background-color: #ece9da !important;
  border-radius: 3px 3px 0 0 !important;
  margin-bottom: 0px !important;
}

.tabbrowser-tab[pending="true"]:not([selected=true]):not([multiselected=true]) .tab-label {
  color: red !important;
  font-style: italic !important;
}

.tab-close-button:hover {
  background-color: color-mix(in srgb, #000000 15%, transparent) !important;
  color: #ff0000 !important;
}

menupopup>menu,
menupopup>menuitem {
  padding-block: 5px !important;
}

:root {
  --arrowpanel-menuitem-padding: 5px !important;
  --tab-min-height: 28px !important;
  --tab-max-height: 28px !important;
  --tab-min-width: 120px !important;
  --tab-max-width: 120px !important;
}

/*https://raw.githubusercontent.com/MatMoul/firefox-gui-chrome-css/master/chrome/userChrome.css*/
:root:not([inFullscreen]) #a11y-announcement {
	/* Kludge to make "a11y-announcement" a replacement for the "browser-bottombox" element removed by FF 109 */
	display: block !important;
	background-color: var(--toolbar-bgcolor) !important;
}
#a11y-announcement,
#browser-bottombox {
	height: 20px;
	border-top: solid 1px #505050;
}
#statuspanel {
	position: fixed !important;
	height: 20px !important;
	width: 100% !important;
	left: 0px !important;
	bottom: 0px !important;
	padding: 0px !important;
	transition-duration: 0s !important;
	transition-delay: 0s !important;
	transition-property: none !important;
}
#statuspanel-label {
	color: var(--toolbar-color) !important;
	background: transparent !important;
	border: none !important;
}

html[inFullscreen="true"] #a11y-announcement,
html[inFullscreen="true"] #browser-bottombox {
	display:none !important;
}

/* Make status bar invisible when fullscreen */
html[inFullscreen="true"] #statuspanel {
	display:none !important;
}
/* Make status bar visible (as a pop-up box) when fullscreen */
/*
html[inFullscreen="true"] #statuspanel-label {
	border: 1px solid #505050 !important;
	padding-left: 2px !important;
	padding-bottom: 6px !important;
	background: var(--toolbar-bgcolor) !important;
}
*/

and for smaller tabs:

From: https://support.mozilla.org/en-US/kb/compact-mode-workaround-firefox

1. Type about:config in the address bar and press Return. A warning page may appear. Click Accept the Risk and Continue to go to the about:config page.
2. Find the browser.compactmode.show preference.
3. Switch the toggle to true and then close the tab.
4. Click on the menu button fx89menuButton to open the menu panel.
5. Click More Tools menu.
6. Choose Customize Toolbar.
7. At the bottom of the panel, click the Density button.
8. Choose Compact (not supported) from the menu options.
9. Click Done.

This allows me for it to look mostly like how it was in firefox version 56.

[onemen]

test how Tab Mix Plus works for you without chrome/userChrome.css ?

[VLM-TechEd]

Here is what is in my chrome/userChrome.css. I use it primarily to make TMP display multiple spaces in tab names. Could I perhaps put it into StyloaiX instead? /* Fx 110+ */ .tabbrowser-tab .tab-label { white-space: pre !important; } /* .tabbrowser-tab .tab-label { white-space: -moz-pre-space !important; } */ /* Remove Unified Extensions button */ #unified-extensions-button{width: 3px; padding-inline: 0 !important } #unified-extensions-button > .toolbarbutton-icon { width: 0 !important; } From: onemen ***@***.***> Sent: Sunday, November 5, 2023 12:28 AM To: onemen/TabMixPlus ***@***.***> Cc: VLMin ***@***.***>; Author ***@***.***> Subject: Re: [onemen/TabMixPlus] Fx 119: Display > Tab > Customize Styles (Issue #244) test how Tab Mix Plus works for you without chrome/userChrome.css ? — Reply to this email directly, view it on GitHub <#244 (comment)> , or unsubscribe <https://github.com/notifications/unsubscribe-auth/AB6YURQNERXEEHDDYODVE7DYC45ZRAVCNFSM6AAAAAA657DAV2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTOOJTGY3DCMJQGE> . You are receiving this because you authored the thread. <https://github.com/notifications/beacon/AB6YURQNPU75G363DYTJ2ITYC45ZRA5CNFSM6AAAAAA657DAV2WGG33NNVSW45C7OR4XAZNMJFZXG5LFINXW23LFNZ2KUY3PNVWWK3TUL5UWJTTK5EMK2.gif> Message ID: ***@***.*** ***@***.***> >

[VLM-TechEd]

Much better, thank you! Have a wonderful and blessed day!

[onemen]

version 1.0.0-pre.18 is out