Customizing the TST UI

[libfitz]

Hello!
This may be a lame issue. I've recently migrated from FF56 and since Tree Tab has not been rewritten for WE API, I decided to stick with TST for now. The available styles do not suit me, so I've decided to make my own. However, I failed to find at least a list of available parameters I can customize. Some are listed on the snippets page in the wiki, but not all. So my question is, is there a list of all the options I can customize somewhere, or can I see it in one of the TST's files?

[Lej77]

The sidebar HTML file located at master/webextensions/sidebar/sidebar.html has the general structure of the sidebar elements. You can see a tab's structure with from the element with the id dummy-tab. It seems to be something like this:

<li class="tab">
  <span class="favicon">
    <span class="throbber"></span>
  </span>
  <span class="label"></span>
  <span class="counter"></span>
  <span class="closebox"></button>
</li>

The normal CSS rules applied to the sidebar can be found in master/webextensions/sidebar/styles. The .css files located directly in that folder are always applied to the sidebar while the ones located in the \metal and \square subdirectories seems to only be applied for specific TST styles.

A lot of names for color variables seems to be collected in the rules for the :root element in master/webextensions/sidebar/styles/sidebar/sidebar.css.

---

You could also try to inspect the sidebar webpage with Firefox itself. To do this you need to find the sidebar URL. It should be something like moz-extension://%Extension-id%/sidebar/sidebar.html where %Extension-id% should be replaced with the extensions random id.

Tree Style Tab's id can be found by opening a group tab. Do this by rapidly opening several tabs (hold ctrl+t). You can also do this by entering the URL about:treestyletab-group in the address bar and pressing enter.

TST's group tabs' have the URL moz-extension://%Extension-id%/resources/group-tab.html so you can simply replace resources/group-tab.html with sidebar/sidebar.html.

You could also find the extension id by opening the about:debugging#addons page and searching for Tree Style Tab on it. If you press the Manifest-URL link it will take you to TST's mainfest page that has the URL moz-extension://%Extension-id%/manifest.json.

Once you have opened the sidebar in its own tab you can use Firefox development tools to inspect the page. You can open those through the FIrefox menu button or with the keyboard shortcut ctrl+shift+c.

[libfitz]

@Lej77 thank you for such a detailed reply!

[piroor]

@Lej77 Thanks a lot! I've added a link to your comment from the FAQ (README.md).

[libfitz]

@Lej77 if you have some free time, could you please help me style a few things or point to a right direction? I can't seem to figure out the necessary rules to decrease the margin between the pinned tabs (.tab .faviconized: 0 removed some of the margins, but the icons are still a bit spacy), as well as correctly position the X sign inside the closebox (it's too far to the left/right and well above the closebox center)? And if you could suggest a way to make the tab opened from a pinned one to be appended to the end of the list instead of the beginning, I would really appreciate it. My current rules are here.

[Lej77]

@affectiosus To open pinned tabs to the end of the list you could try to use the extension Pinned Tabs Fix by nralbrecht. However from my testing there seems to be some incompatibility issues with Tree Style Tab. So it works some of the time but not always. Also it seems to work better if it is initialized after TST. So if you deactivate the pinned tab extension and then reactivate it you get better results. Don't know if piroor could do something about that.

[Lej77]

@affectiosus Pinned tabs seems to be controlled via JavaScript at the moment so their position is a bit hard to control. I managed to bypass the JavaScript with the following CSS code:

#tabbar {
  margin-top: 0px !important;
}

.faviconized {
  position: relative !important;
  left: initial !important;
  top: initial !important;
  float: left;
}

.tab:not(.faviconized) {
  clear: left;
}

This does have the side effect of making the pinned tabs scroll with the normal tabs.

[Lej77]

@affectiosus To control the closebox size you can use the following CSS:

:root {
  --closebox-text-margin: 5px;
  --closebox-roundness: 100%;

  --closebox-height: calc(var(--tab-height) * 0.7);
  --closebox-width: var(--closebox-height);
  --closebox-cross-size: 0.8;
}
.closebox {
  min-height: var(--closebox-height);
  max-height: var(--closebox-height);
  min-width: var(--closebox-width);
  max-width: var(--closebox-width);

  margin-left: var(--closebox-text-margin);
  border-radius: calc(var(--closebox-roundness) / 2);
}
.closebox:after {
  height: calc(var(--closebox-height) * var(--closebox-cross-size));
  width: calc(var(--closebox-width) * var(--closebox-cross-size));

  margin-top: calc(var(--closebox-height) * (1 - var(--closebox-cross-size)) / 2);
  margin-left: calc(var(--closebox-width) * (1 - var(--closebox-cross-size)) / 2);
}

--closebox-text-margin controls distance between title text and the closebox.
--closebox-roundness controls how round the closebox is, 100% is a circle and 0% is a square.

--closebox-height controls the height of the closebox.
--closebox-width controls the width of the closebox.
You can change these to a value like "15px" or you can use the calc expression to have it depend on a variable. Also if the cross doesn't look quite centered then this can because of rounding issues with the closebox's size so you could try increasing it with as small amounts as possible and see if it becomes better.

--closebox-cross-size controls how big the cross is compared to the whole close box. Should be a value between 0 and about 1.2.

[Lej77]

@affectiosus I did some more research about pinned tabs and in the file webextensions/sidebar/pinned-tabs.js at line 56 I found that the JavaScript used the size in the variable gFaviconizedTabSize. This variable is calculated when the sidebar is initialized based on an element in the sidebar. This is done in the file webextensions/sidebar/sidebar.js at line 289. The calculation multiplies the height of the element that has the id dummy-favicon-size-box with a constant named faviconizedTabScale. The contant is defined to the value 1.75 in the file webextensions/common/common.js at line 114.

I made the following CSS code to change the pinned tabs size using this information:

:root {
  --faviconized-tab-size-script: calc(var(--faviconized-tab-size) / 1.75);
}
#dummy-favicon-size-box {
  min-height: var(--faviconized-tab-size-script);
  max-height: var(--faviconized-tab-size-script);
}

Any changes to the pinned tabs' sizes will be applied after the sidebar is closed and reopened.

[libfitz]

@Lej77 thank you so much for your time and effort. If you're fine with a bit more digging, could you please suggest the possible reason(s) for the close mark to "stick" to the top of the tab? It looks more or less like this, no matter what I try:

[Lej77]

@affectiosus Unfortunately, without your styling rules it is very hard for me to understand why the close mark would behave that way. I tried with the ones you linked before but I don't see that problem with them.

Also about opening tabs from pinned tabs at the end of the list. You don't need any other extension for this. Since TST 2.4.6 this can now be done by changing the TST's setting Insertion position of new tabs from pinned tabs to Append to the end of the tree.

[libfitz]

@Lej77 the rules I have now are here. The X mark in the closebox is disabled at the moment. If it may be necessary, I have a few adjustments in the userChrome.css as well, to hide the Firefox's tab bar.

[Lej77]

@affectiosus I had another look at your problem and your right about the cross not being centered. I was testing under TST's No Decoration style and the problem didn't occur there. I modified the CSS code to correctly position the closebox:

:root {
  --closebox-text-margin: 4px;
  --closebox-roundness: 100%;

  --closebox-height: calc(var(--tab-height) * 0.75);
  --closebox-width: var(--closebox-height);
  --closebox-cross-size: 0.75;
}

.closebox::before,
.closebox {
  min-height: var(--closebox-height) !important;
  max-height: var(--closebox-height) !important;
  min-width: var(--closebox-width) !important;
  max-width: var(--closebox-width) !important;
  
  border-radius: calc(var(--closebox-roundness) / 2) !important;
  padding: 0px !important;
  margin: 0px !important;
}
.closebox {
  margin-left: var(--closebox-text-margin) !important;

  margin-top: calc(-1 * var(--closebox-height) / 2) !important;
  margin-bottom: calc(-1 * var(--closebox-height) / 2) !important;
}
.closebox::after {
  height: calc(var(--closebox-height) * var(--closebox-cross-size)) !important;
  width: calc(var(--closebox-width) * var(--closebox-cross-size)) !important;

  margin-top: calc(var(--closebox-height) * (1 - var(--closebox-cross-size)) / 2) !important;
  margin-left: calc(var(--closebox-width) * (1 - var(--closebox-cross-size)) / 2) !important;
}

[libfitz]

@Lej77 thank you a lot! The code you've suggested works better than perfectly.