firefox-133-minimal-ui-instructions

1.) Open your current Firefox Profile folder
    a.) On the Firefox address bar type about:support
    b.) Folder path is in “Profile Folder” section, use that and navigate to it
2.) create a folder called chrome (if it doesnt exist)
3.) go into created folder and create a userChrome.css file
4.) In userChrome.css paste in code from:
        
        (use the gist snippet below)
        
5.) activate custom stylesheets in Firefox:
    a.) navigate firefox to about:config
    b.) accept warning
    c.) change toolkit.legacyUserProfileCustomizations.stylesheets flag to true
6.) Install Tree Style Tab
7.) Browse to URL: "about:addons" - Select 'Tree Style Tab' -> 'Preferences' tab -> 'Extra style rules for sidebar contents' - paste in the content from treestyletab.css from:
        
        (use the gist snippet below)

8.) Restart firefox

treestyletab.css

/* Show title of unread tabs with red and italic font */
/*
:root.sidebar tab-item.unread .label-content {
  color: red !important;
  font-style: italic !important;
}
*/

/* Add private browsing indicator per tab */
/*
:root.sidebar tab-item.private-browsing tab-label:before {
  content: "🕶";
}
*/




/* Hide border on tab bar, force its state to 'scroll', adjust margin-left for width of scrollbar. */
#tabbar {
  border: 0;
  scrollbar-width: none;
  overflow: scroll !important;
  margin-top:  0 !important;
}

/* Include 'reveal' animation ... stagers by level */
#tabbar .tab {
  transition: 0.1s margin-top, 0.2s 0.1s margin-left, 0.2s 0.1s visibility;
}

/* delay transitions on open */
#tabbar:not(:hover) .tab {
  transition-delay: 0s;
  margin-left: 0;
}

/* animate twisty reveal */
#tabbar .tab .twisty {
  transition: 0.2s margin;
}

/* general tabs */
.tab {
  background-color: transparent;
}
.tab,
.tab.pinned {
  height: 2.8em;
}

/* Push tab labels slightly to the right so they're completely hidden in collapsed state, but still look fine while expanded. */
.tab .label {
  margin-left: 1em;
}

/* fix closebox */
.tab .closebox {
  margin-left:  0;
}

.tab .counter {
  margin-left:  auto;
  display: inline-block !important;
}

/* Hide .twisty and adjust margins so favicons have 7px on left. */
#tabbar:not(:hover) .tab .twisty {
  visibility: hidden;
  margin-left: -12px;
  transition-delay: 0s;
}


/* hide closebox unless needed */
.tab:not(:hover) .closebox {
  visibility: hidden;
}

/* Hide sound playing/muted button. */
.sound-button {
  margin-left: 0;
  display: inline-block;
  visibility: collapse;
}

.tab.audible .sound-button {
  visibility: visible;
  margin-left: 0.25em;
}

.tab:not([data-child-ids]) .counter {
  /* visibility: hidden; */
}

tab-item:not(.subtree-collapsed) .counter {
  visibility: hidden;
} 

/* Hide 'new tab' button. */
.newtab-button {
  display: none;
}

/* active tab */
.tab.active {
  background-color: rgba(255, 255, 255, 0.05) !important;
  box-shadow:  inset 3px 0 0 #ffffff99 !important;
}
.tab:hover,
.tab.active:hover {
  background-color: inherit;
}
.tab.active .label {
  font-weight: bold;
  color: #f4f4f4 !important;
}
.tab .label,
.tab.active .label {
  border-bottom:  1px solid transparent;
}
.tab:hover .label,
.tab.active:hover .label {
  border-bottom:  1px dotted;
  min-width:  0 !important;
  flex-shrink:  1 !important;
  flex-grow:  unset !important;
}

/* pending / unloaded tabs */
.tab.discarded {
  background-color: #1d1d1d;
}
.tab.discarded .label {
  color: #efefefCC !important;
}
.tab.discarded:hover .label {
  color: #efefef !important;
}

/* Adjust style for tab that has sound playing. */
.tab.sound-playing .favicon::after,
.tab.muted .favicon::after {
  content: '🔊';
  z-index: var(--favicon-base-z-index);
  position: absolute;
  font-size: 0.5em;
  bottom: -0.35em;
  right: -0.7em;
}

/* Adjust style for tab that is muted. */
.tab.muted .favicon::after {
  content: '🔇';
}

/* Pinned tabs: */
/* Hide all non-active pinned tabs (these are included in top-bar instead) */
/*.tab.pinned {
  position: relative;
  max-width: none;
  width: auto;
  top: 0 !important;
  left: 0 !important;
}
.tab.pinned:not(.active) {
  display: none;
}
.tab.pinned .label {
  display: block;
}
.tab.pinned .sound-button {
  position: relative;
  transform: none;
}
.tab.pinned .twisty {
  display: block;
  min-width: none;
  width: auto;
}*/

userChrome.css

/*Command + L on Mac to focus on address bar*/
#nav-bar {
  /* customize this value. */
  --navbar-margin: -44px;
  margin-top: var(--navbar-margin);
  /*margin-bottom: 0;*/
  /*z-index: -100;*/
  /*transition: all 0.3s 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;*/
}

/*
 *    Hide Tabs on Topbar
 */
#TabsToolbar {
    visibility: collapse;
}

/* Hide main tabs toolbar */
/*#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar > .toolbar-items {
    opacity: 0;
    pointer-events: none;
}*/
/*#main-window:not([tabsintitlebar="true"]) #TabsToolbar {
    visibility: collapse !important;
}*/

 
/* Sidebar min and max width removal */
/*#sidebar {
    max-width: none !important;
    min-width: 0px !important;
}*/
/* Hide splitter, when using Tree Style Tab. */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] + #sidebar-splitter {
    display: none !important;
}
/* Hide sidebar header, when using Tree Style Tab. */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
    visibility: collapse;
}

/* Shrink sidebar until hovered, when using Tree Style Tab. */
:root {
    --thin-tab-width: 30px;
    --wide-tab-width: 200px;
}
/*#sidebar-box:not([sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]) {
    min-width: var(--wide-tab-width) !important;
    max-width: none !important;
}*/
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] {
    position: relative !important;
    transition: all 100ms !important;
    min-width: var(--thin-tab-width) !important;
    max-width: var(--thin-tab-width) !important;
    z-index: calc(var(--browser-area-z-index-tabbox, 10000) + 1) !important;
}

#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover {
    transition: all 200ms !important;
    transition-delay: 0.1s !important;
    min-width: var(--wide-tab-width) !important;
    max-width: var(--wide-tab-width) !important;
    margin-right: calc((var(--wide-tab-width) - var(--thin-tab-width)) * -1) !important;
}

Thanks man, it work for me,

How do I open a new tab?

Thanks man, it work for me,

How do I open a new tab?

Ctrl + T (Windows/Linux)
command + T (Mac OS X)
https://support.mozilla.org/en-US/kb/keyboard-shortcuts-perform-firefox-tasks-quickly

Thanks man, it work for me,
How do I open a new tab?

Ctrl + T (Windows/Linux) command + T (Mac OS X) https://support.mozilla.org/en-US/kb/keyboard-shortcuts-perform-firefox-tasks-quickly

Thank u very much man!
Bro i have a problem

I can't get to see the icons at the end, not even when the bar expands, and when it contracts then it's worse because I can see less but I can't get down to them.

it always looks as cutted and with scroll down dont solve it.

it is also a bit annoying because, when the bar is collapsed, then the bottom icons (the last opened in my case) are practically lost because the program leaves me much higher with my long list of icons.

Could you help me to fix it please?
I'm not sure how to do this, I tried deleting my old addons but it doesn't seem to solve it.

I had issues displaying the menu bar items using the Alt key on Linux Mint 22 Xfce (via UTM) and Windows 10. So I added this code in userChrome.css to test, which shows fine and can be improved.

#menubar-items {
  width: 391.917px;
}

#toolbar-menubar[autohide="true"] {
  /*height: calc(var(--tab-min-height) + 2 * var(--tab-block-margin));*/
  height: 0px !important;
}

I had issues displaying the menu bar items using the Alt key on Linux Mint 22 Xfce (via UTM) and Windows 10. So I added this code in userChrome.css to test, which shows fine and can be improved.

#menubar-items {
  width: 391.917px;
}

#toolbar-menubar[autohide="true"] {
  /*height: calc(var(--tab-min-height) + 2 * var(--tab-block-margin));*/
  height: 0px !important;
}

Thanks bro, I've add it to the code and restart firefox, but it appear dont solve the problem

the last windows cant be seen

I explain, time the yellow window? That is where I am standing, below it there are other open windows, which I cannot reach, there is no way of seeing them, the only one is navigating using hotkeys, but it is very annoying not to know what they are.

What operating system and version of Firefox are you using? You can check this in about:support.

What operating system and version of Firefox are you using? You can check this in about:support.

So I downloaded LibreWolf 133.0.3-1 on Windows 10 and applied the firefox-133-minimal-ui-instructions but couldn’t reproduce your issues. Try debugging the sidebar by following the instructions below and experiment.

https://www.reddit.com/r/FirefoxCSS/comments/wttjtf/help_with_css_classes_in_tree_style_tabs/il62fzv/

So I downloaded LibreWolf 133.0.3-1 on Windows 10 and applied the firefox-133-minimal-ui-instructions but couldn’t reproduce your issues. Try debugging the sidebar by following the instructions below and experiment.

https://www.reddit.com/r/FirefoxCSS/comments/wttjtf/help_with_css_classes_in_tree_style_tabs/il62fzv/

Thank u bro,

I am trying do it

according to the reddit guide

1. Go to about:debugging and from the left "sidebar" activate "this Firefox" tab. That would list all your running extensions.

2. Now, make sure that TST sidebar is loaded.

3. Hit the "Inspect" button in the TST section of that extension list. This should open an debugging toolbox in a tab (or perhaps window) targeting TST background-page (all extensions have background-page of some kind where the extension internal state is typically stored)

4. Click the "Select iframe"-button in the debugging toolbox top toolbar

5. Clicking that thing should open a popup listing all the currently active documents belonging to that extension. Select the one whose name looks related to sidebar

6. The inspector tab of the toolbox should now render the DOM tree of the TST sidebar document. Very much like how website inspector works.

7. From there you can find all the info you might want figure out. What classes or other attributes the sidebar elements have and what kind of CSS rules are already applied to them by TST internal rules etc.

I am not sure in the step

i am not sure about of Click the "Select iframe"-button in the debugging toolbox top toolbar

in case of the "yes", which should select, 1, 2 OR 3 ??
And then i dont understand what do after of this.

Thank u very much !!!

Yes, that is the iframe button then select 3. Here is learning material for working and debugging with CSS. https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS

Yes, that is the iframe button then select 3. Here is learning material for working and debugging with CSS. https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS

Ok bro thanks, but i dont understand, what should I send to you? I am not developer, but could send you the log or something that can help