Numbered Tabs snippets

[nollinvoyd]

Short description

The numbered tabs snippets don't work for me

Steps to reproduce

Added the following to the extra style rules

/* Tab numbering and counting */
/* All of the options in this section need the raw count of tabs available. This is done using CSS counters: */

#tabbar {
  counter-reset: vtabs atabs tabs;
  /* vtabs tracks visible tabs, atabs tracks active tabs, tabs tracks all tabs */
}
.tab:not(.collapsed):not(.discarded) {
  counter-increment: vtabs atabs tabs;
}
.tab:not(.collapsed) {
  counter-increment: vtabs tabs;
}
.tab:not(.discarded) {
  counter-increment: atabs tabs;
}
.tab {
  counter-increment: tabs;
}

/* Numbering of tabs #1601 */
/* Note: this requires the counting CSS block listed here. */
/*This displays the number of each visible tab along side each tab. */

.tab .active-marker::before {
  background: Highlight;
  color: HighlightText;
  content: counter(vtabs);
  font-size: x-small;
  right: 0.2em;
  padding: 0.2em;
  pointer-events: none;
  position: absolute;
  bottom: 0.2em;
}

I'd also like to change the background color of a read but unfocused tab.

Is there a way to import/export settings? Can that be done by transferring certain folders from one profile to another?

• Platform (OS): WINDOWS 10 1803
• Version of Firefox: 64.0
• Version (or revision) of Tree Style Tab: 2.77

[Lej77]

Tab numbering

Keep the beginning:

#tabbar {
  counter-reset: vtabs atabs tabs;
  /* vtabs tracks visible tabs, atabs tracks active tabs, tabs tracks all tabs */
}
.tab:not(.collapsed):not(.discarded) {
  counter-increment: vtabs atabs tabs;
}
.tab:not(.collapsed) {
  counter-increment: vtabs tabs;
}
.tab:not(.discarded) {
  counter-increment: atabs tabs;
}
.tab {
  counter-increment: tabs;
}

But change the ::before to ::after

.tab .active-marker::after {
  background: Highlight;
  color: HighlightText;
  content: counter(vtabs);
  font-size: x-small;
  right: 0.2em;
  padding: 0.2em;
  pointer-events: none;
  position: absolute;
  bottom: 0.2em;
}

Or you can use something like the following to get more discrete numbering:

.tab .active-marker::after {
  color: var(--tab-text);
  content: counter(vtabs);
  font-size: x-small;
  pointer-events: none;
  position: absolute;
  padding: 0em;
  left: calc(var(--tab-active-marker-size) + 0.2em);
  top: 0.2em;
  z-index: 100000;
}
.tab.faviconized .active-marker::after {
  top: calc(var(--tab-active-marker-size) + 0.0em);
  left: 0.1em;
}

You can show tab numbering only for hovered tabs using:

.tab .active-marker::after {
  opacity: 0;
  transition: 0.2s;
}
.tab:hover .active-marker::after {
  opacity: 1;
}

Background color or read tabs

To change the background color of read tabs that are unfocused the following should work:

.tab:not(.unread):not(.active) {
  background: lightgreen;
}

[nollinvoyd]

This is how things currently look

The yellow tabs is the active tab The tab with the black text is a read tab The tab with the blue text is the unread tab.

This changes the background of both the unfocused read and unread tabs, the only display difference being how the "opacity: 0.75;: value changes the display look of the unread tabs. I would like to pick separate colors.

To change the background color of read tabs that are unfocused the following should work:

.tab:not(.unread):not(.active) {
  background: lightgreen;
}

I have a few other requests. I hope you don't mind if I post here. :)

1. I know it may sound ridiculous given the main purpose of Tree Style Tabs, but Is there any way to disable the tree structure and just make it a straight list if I want to experiment with that. I find that sometimes the secondary tab doesn't seem to relate to the primary. It also shortens the the title area. I know you can drag these tabs to the top, but I'd like to work like a straight list if possible until I learn to better understand tree structure and what settings are best for me.

2. The tabs numbers are superimposed over the closed buttons. I would prefer to have the same sized numbers on the left side, and to the left of the favicon. I'd also like to further shrink the gap between the favicon (or in my preferred case, the tab number), and the left border.

3. Selecting "Duplicate tab" moves the tab to the end of the list. Could it be set to open next to the selected tab?

4. Any chance of having import/export settings in the future?

Thanks

[nollinvoyd]

This is how things currently look

The yellow tabs is the active tab The tab with the black text is a read tab The tab with the blue text is the unread tab.

This changes the background of both the unfocused read and unread tabs, the only display difference being how the "opacity: 0.75;: value changes the display look of the unread tabs. I would like to pick separate colors.

To change the background color of read tabs that are unfocused the following should work:

.tab:not(.unread):not(.active) {
  background: lightgreen;
}

I have a few other requests. I hope you don't mind if I post here. :)

1. I know it may sound ridiculous given the main purpose of Tree Style Tabs, but Is there any way to disable the tree structure and just make it a straight list if I want to experiment with that. I find that sometimes the secondary tab doesn't seem to relate to the primary. It also shortens the the title area. I know you can drag these tabs to the top, but I'd like to work like a straight list if possible until I learn to better understand tree structure and what settings are best for me.

2. The tabs numbers are superimposed over the closed buttons. I tried the other methods to show the close button, but nothing worked. I would prefer to have the same sized numbers on the left side of the list, and to the left of the favicon. I'd also like to further shrink the gap between the favicon (or in my preferred case, the tab number), and the left border.

3. Selecting "Duplicate tab" moves the tab to the end of the list. Could it be set to open next to the selected tab?

4. Any chance of having import/export settings in the future?

Thanks

[Lej77]

1. There is a section about disabling automatically organized trees in Tree Style Tab's readme.
2. You can show the tab numbering on the left side of the tab with something like:

   
   #tabbar {
   counter-reset: vtabs atabs tabs;
   /* vtabs tracks visible tabs, atabs tracks active tabs, tabs tracks all tabs */
   }
   .tab:not(.collapsed):not(.discarded) {
   counter-increment: vtabs atabs tabs;
   }
   .tab:not(.collapsed) {
   counter-increment: vtabs tabs;
   }
   .tab:not(.discarded) {
   counter-increment: atabs tabs;
   }
   .tab {
   counter-increment: tabs;
   }

.tab .active-marker::after { color: var(--tab-text); content: counter(vtabs); font-size: x-small; pointer-events: none; position: absolute; padding: 0em; left: calc(var(--tab-active-marker-size) + 0.2em); top: 0.2em; z-index: 100000; } .tab.faviconized .active-marker::after { top: calc(var(--tab-active-marker-size) + 0.0em); left: 0.1em; }

3. When I use the `Duplicate tab` context menu item in a clean profile the new tab is placed beside the selected tab, so that should be the default behavior. You can also duplicate the current tab by middle clicking the reload button in the toolbar and in that case the new tab is placed beside the current tab as well so that might be a workaround.

[nollinvoyd]

Since the last TST update, none of the Numbered Tabs css works. They nullify the other code as well. Things have gone backwards

I used to have a close button on the right side. When I tried the numbered tabs code for the right side, the numbers covered up the close button. I had to click on the lower part of the number to close the tab. But now, even after removing the numbered tabs css, the close button is gone.

This is how I currently have it

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

/* Add private browsing indicator per tab */
/*
.tab.private-browsing .label:before {
  content: "??";
}
*/

/* Less visible tab dividers. 
   A black border with a very low alpha slightly darkens any color. */
.tab {
  border: solid 1.0px #000000; 
}

/* As little space before the tab name as possible.
   The fold/unfold icon is not affected. */
.tab:not(.pinned) {
  padding-left: 0px !important; /* !important is required when there are enough tabs to cause a scrollbar */
}

/* Change styling of pending (unloaded) tabs */
.tab.discarded {
  opacity: 0.75;
}

.tab.discarded .label-content {
  color: blue;
}

/* Change tab height */
.tab {
  height: 25px;
}

/* Highlight active tab */
.tab.active {
  height: 39px !important;
  background-color: #ffff80;
}
.tab.active .label {
  font-weight: bold;
  font-size: 14px;
}
.tab.active .twisty,
.tab.active .label,
.tab.active .counter {
  color: red;
}

/* Hovered tab */
.tab:hover {
  background: #EBF10B !important;
  opacity: 1;
}

/* Background color or read tabs */
/* To change the background color of read tabs that are unfocused the following should work: */

.tab:not(.unread):not(.active) {
  background: #FFCC99;
}

[Lej77]

You could try to fix your code by search and replacing active-marker with highlighter.

There was some changes to how the active-marker/highlighter function though so both the ::before and the ::after pseudo-elements are in use. This means that to fix the tab numbering code we should use some other element instead. We can do this by replacing .active-marker/.highlighter with for example .burster.

[nollinvoyd]

We can do this by replacing .active-marker/.highlighter with for example .burster.

ok, that brought back the numbered tabs

/* Add private browsing indicator per tab */
/*
.tab.private-browsing .label:before {
  content: "??";
}
*/

/* Less visible tab dividers. 
   A black border with a very low alpha slightly darkens any color. */
.tab {
  border: solid 1.0px #000000; 
}

/* As little space before the tab name as possible.
   The fold/unfold icon is not affected. */
.tab:not(.pinned) {
  padding-left: 0px !important; /* !important is required when there are enough tabs to cause a scrollbar */
}

/* Change styling of pending (unloaded) tabs */
.tab.discarded {
  opacity: 0.75;
}

.tab.discarded .label-content {
  color: blue;
}

/* Change tab height */
.tab {
  height: 25px;
}

/* Highlight active tab */
.tab.active {
  height: 39px !important;
  background-color: #ffff80;
}
.tab.active .label {
  font-weight: bold;
  font-size: 14px;
}
.tab.active .twisty,
.tab.active .label,
.tab.active .counter {
  color: red;
}

/* Hovered tab */
.tab:hover {
  background: #EBF10B !important;
  opacity: 1;
}

/* Background color or read tabs */
/* To change the background color of read tabs that are unfocused the following should work: */

.tab:not(.unread):not(.active) {
  background: #FFCC99;
}

/* Tab numbering and counting */
/* All of the options in this section need the raw count of tabs available. This is done using CSS counters: */

#tabbar {
  counter-reset: vtabs atabs tabs;
  /* vtabs tracks visible tabs, atabs tracks active tabs, tabs tracks all tabs */
}
.tab:not(.collapsed):not(.discarded) {
  counter-increment: vtabs atabs tabs;
}
.tab:not(.collapsed) {
  counter-increment: vtabs tabs;
}
.tab:not(.discarded) {
  counter-increment: atabs tabs;
}
.tab {
  counter-increment: tabs;
}

/* Numbering of tabs #1601 */
/* Note: this requires the counting CSS block listed here. */
/*This displays the number of each visible tab along side each tab. */

/* Numbereed Tabs */

#tabbar {
  counter-reset: vtabs atabs tabs;
  /* vtabs tracks visible tabs, atabs tracks active tabs, tabs tracks all tabs */
}
.tab:not(.collapsed):not(.discarded) {
  counter-increment: vtabs atabs tabs;
}
.tab:not(.collapsed) {
  counter-increment: vtabs tabs;
}
.tab:not(.discarded) {
  counter-increment: atabs tabs;
}
.tab {
  counter-increment: tabs;
}

.tab .burster::after {
  background: Highlight;
  color: HighlightText;
  content: counter(vtabs);
  font-size: x-small;
  right: 0.2em;
  padding: 0.2em;
  pointer-events: none;
  position: absolute;
  bottom: 0.2em;
}

But can't there be a way to better distinguish between the inactive read tab (#6) and the unload tab (#7) by altering the color of the inactive read tab? As of now the only thing creating a difference is the "opacity: 0.75;". Altering that value in either direction produces an unpleasant visual effect, IMO

[irvinm]

Can anyone on this thread confirm if there is a working solution to this? It has been several months since this was reported. @nollinvoyd if there is a working solution, can you close this issue?

[nollinvoyd]

Here's an example of my current display. As I reported in another thread, the css still has problems getting the colors right, but the tabs numbers are there.

I would still prefer to have the tabs numbers on the left side and the close buttons on the right, though, so if that is possible, I could still appreciate some help with that.

[irvinm]

@piroor is this something you want to pursue at some point?

[piroor]

@nollinvoyd Could you post the full CSS declarations your are currently using? There are some complex discussions, so I cannot imagine what CSS rules are that currently applied on your environmetn.

[nollinvoyd]

What is the current objective. Numbers, colors, or both?

Things have changed a bit lately

This is the display with the numbered tabs snippets included in the css. Two visible and distinct numbers, as opposed to 2 tab numbers with one superimposed over the other. Also, more unwanted color variations.

This is how it looks with tab number css snippets removed from "Extra style rules for sidebar content", but still displaying numbered tabs due to the Numbered Tabs css additions in userchrome.css.

As far as the numbered tabs issue is concerned, this display would be acceptable for me if the empty spacing on the right side could be eliminated. If the remaining tab numbers could be bolder or colorized, that would be great, but I don't supposed that could be done?

This is all my custom css added to the userchrome.css in Aris' CustomCSSforFx set

/* Copyright (c) 2017 Haggai Nuchi
Available for use under the MIT License:
https://opensource.org/licenses/MIT
*/

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

toolbarbutton#alltabs-button {
    -moz-binding: url("userChrome.xml#js");
}

/* From [TABS BELOW NAVIGATION AND BOOKMARKS TOOLBARS] conflicts with menu bar - 
https://github.com/Aris-t2/CustomCSSforFx/issues/132 */

/* don't show back or forward buttons if there's nothing to go back or forward to show */
#ctraddon_back-button[disabled="true"],
#ctraddon_forward-button[disabled="true"],
#back-button[disabled="true"],
#forward-button[disabled="true"] {
 display: none !important;
}

/* HIDE MIN/MAX/CLOSE BUTTONS - breaks tab bar narrowness*/

#toolbar-menubar .titlebar-buttonbox-container,
#toolbar-menubar .titlebar-buttonbox-container *,
#TabsToolbar .titlebar-buttonbox-container,
#TabsToolbar .titlebar-buttonbox-container *,
#titlebar-max,
#titlebar-close,
#titlebar-min,
#titlebar-buttonbox {
  min-width: 1px !important;
  width: 1px !important;
  max-width: 1px !important;
  opacity: 0 !important;
}

/* close icon */
#TabsToolbar #tabbrowser-tabs .tabbrowser-tab:not([pinned]) .tab-close-button {
  -moz-box-ordinal-group: 0 !important;
  -moz-margin-start: -9px !important;
  -moz-margin-end: 0px !important;
}

#main-window #navigator-toolbox #TabsToolbar .close-icon > .toolbarbutton-icon,
#main-window #navigator-toolbox #TabsToolbar .tab-content .close-icon  {
  min-width: 20px !important;
  width: 20px !important;
  min-height: 20px !important;
  height: 20px !important;
}

/* Tab numbers on tabs / Tabs numbers in 'all tabs' popup */ 
#tabbrowser-tabs,
#alltabs-popup, /*Fx60-61 */
#allTabsMenu-allTabsViewTabs { /*Fx62+ */ 
  counter-reset: n_tabs 0; 
}
.tabbrowser-tab .tab-content {
  -moz-padding-start: 0px; 
} 
.tabbrowser-tab .tab-content::before,
.alltabs-item::before, /*Fx60-61 */
.all-tabs-button::before { /*Fx62+ */
  display: -moz-box; 
  -moz-padding-end: 8px; 
  counter-increment: n_tabs; 
  content: counter(n_tabs); 
  font-weight: bold !important; 
  font-size: 14px !important; 
  margin-top: -2px !important; 
}

/* REMOVE EDIT MENU (IF YOU ALREADY USE ALL THE KEYBOARD SHORTCUTS) */
#edit-menu { display: none !important; }
#file-menu { display: none !important; }
#view-menu { display: none !important; }
#history-menu { display: none !important; }
#bookmarksMenu { display: none !important; }

/* drag text encoding button to menu bar before editing userChrome.css */

toolbarbutton#characterencoding-button {
  -moz-binding: url("userChrome.xml#js");
}
#main-window:not([customizing="true"]) toolbarbutton#characterencoding-button {
  visibility: collapse;
}

/* fix tab toolbars button width/height for default tabs */

#navigator-toolbox #TabsToolbar .scrollbutton-up,
#navigator-toolbox #TabsToolbar .scrollbutton-down,
#navigator-toolbox #TabsToolbar #alltabs-button,
#navigator-toolbox #TabsToolbar #new-tab-button {
  padding: 0px !important;
}

#navigator-toolbox #TabsToolbar .scrollbutton-up > .toolbarbutton-icon,
#navigator-toolbox #TabsToolbar .scrollbutton-down > .toolbarbutton-icon,
#navigator-toolbox #TabsToolbar #alltabs-button > .toolbarbutton-icon,
#navigator-toolbox #TabsToolbar #new-tab-button > .toolbarbutton-icon,
#navigator-toolbox #TabsToolbar .tabs-newtab-button > .toolbarbutton-icon {
  padding: 0px !important;
  width: 16px !important;
  height: 16px !important;
}

/* hide empty space before and after tabs */
hbox[type="pre-tabs"],
hbox[type="post-tabs"] {
  min-width: 1px !important;
  width: 1px !important;
  max-width: 1px !important;
  opacity: 0 !important;
}

#main-window[tabsintitlebar][sizemode="normal"] #toolbar-menubar[autohide="true"][inactive="true"],
#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] {
  margin-top: unset !important;
}

#main-window[tabsintitlebar] #toolbar-menubar[autohide="true"][inactive="true"] ~ #nav-bar:not(:-moz-lwtheme),
#main-window[tabsintitlebar] #toolbar-menubar[autohide="true"][inactive="true"] ~ #nav-bar {
  -moz-margin-end: 1px !important;
  -moz-appearance: none !important;  
  background: transparent !important;
  border-top: unset !important;
}

#main-window[sizemode="normal"] #navigator-toolbox #nav-bar {
  border-left: 0px !important;
  border-right: 0px !important;
}

#main-window[tabsintitlebar] #toolbar-menubar[autohide="true"][inactive="true"] ~ #nav-bar #nav-bar-customization-target {
  -moz-padding-start: 50px !important;
}

/* REMOVE LASTPASS FROM PAGE CONTEXT MENU */

menuitem[label="LastPass"] {
  display: none !important;
}

/* selected tab text color ****************************/
/* text color */
.tabbrowser-tab[selected] .tab-label {
  color: red !important;
}

/* ALTER THE URLBAR AND SEARCH BAR FONT SIZES */
    #searchbar { font-size: 12px !important; } 
    #urlbar { font-size: 14px !important; } 

/* visited link */
a:visited {
    color: FF0000;
}

/* MAKE THE BOX TO THE LEFT OF THE ADDRESS BAR NARROWER ******************************************************** */
/* Firefox Quantum userChrome.css tweaks ************************************************/
/* Github: https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/locationbar/identitybox_labels_hidden.css */

#identity-icon-labels {
  display: none !important;
}

#identity-box {
  padding-inline-end: 4px !important;
  margin-inline-end: 4px !important;
}

/**/

/* MAKE CUSTOM RESTART BUTTON WORK IN FIREFOX 68 ******************************************************** */
- #PanelUI-menu-button {
+ toolbarbutton#alltabs-button {

[piroor]

I meant about custom user styles applied to TST's sidebar via TST options => Advanced.

By the way, the red dotted border (indicating the box model of DOM elements) and the pale gray number (indicates internal ID of tabs) are shown only when you activate the debug mode of TST itself, with this section:

https://github.com/piroor/treestyletab/blob/5826e09ad4c243ae8f61ceaa9e1ea51ad3a0bf25/webextensions/sidebar/styles/base.css#L69-L82

If you don't need detailed logs in the debugger console, you should turn it off. Otherwise you can cancel debug mode specific styles with CSS rules below:

:root.debug * { outline: none !important; }
:root.debug .tab::after { content: none !important; }

Of course you need to put this to TST options => Advanced.

[irvinm]

@nollinvoyd can you provide an update?

[irvinm]

@piroor another to consider "expired" ...

[piroor]

OK, I close this because there looks to be no progress.