Broken indentation with custom CSS after 3.8.24 update yesterday

[haoadoreorange]

I have a custom CSS that marks the level in the tree with "bars" (similar to vscode explorer for example). After that 3.8.24 update yesterday, the indentation is broken. What was the API change and how should I fix it ?

Expected result

Actual result

Environment

• Platform (OS): Arch Linux
• Version of Firefox: 100
• Version (or revision) of Tree Style Tab: 3.8.24

Here's the full custom 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: "🕶";
}
*/

/* Tab bar color default Firefox */
:root {
  --tab-surface-regular: var(--theme-colors-tab,
                             var(--theme-colors-frame_inactive));
  --tab-surface-active: var(--theme-colors-tab_selected,
                            var(--theme-colors-toolbar,
                                var(--browser-bg-for-header-image,
                                    var(--tab-like-surface))));
  --tab-surface-active-hover: var(--theme-colors-tab_selected,
                                  var(--theme-colors-toolbar,
                                      var(--browser-bg-for-header-image,
                                          var(--tab-like-surface))));
  --tab-surface-hover: rgba(255,255,255,.1) /* from https://searchfox.org/mozilla-central/rev/8d722de75886d6bffc116772a1db8854e34ee6a7/browser/themes/shared/tabs.inc.css#590 */;
  --tab-border: var(--theme-colors-tab_background_separator,
                    var(--theme-colors-tab_line,
                        var(--theme-colors-tab_background_text-30,
                            hsl(240,9%,32%) /* from https://searchfox.org/mozilla-central/rev/8d722de75886d6bffc116772a1db8854e34ee6a7/browser/themes/shared/tabs.inc.css#684 : --tab-text-regular * 0.3 opacity */)));
  --tab-text-regular: var(--theme-colors-tab_background_text,
                          hsl(240,9%,98%) /* from https://searchfox.org/mozilla-central/rev/8d722de75886d6bffc116772a1db8854e34ee6a7/toolkit/themes/windows/global/tabbox.css#27 */);
  --tabbar-bg: var(--theme-colors-frame,
                   hsl(235,33%,19%) /* from https://searchfox.org/mozilla-central/rev/8d722de75886d6bffc116772a1db8854e34ee6a7/browser/themes/windows/browser-aero.css#59 */);
}

/* Highlight active tab */
/* tab-item.active tab-item-substance {
  height: 39px;
} */
tab-item.active .background {
  background-color: steelblue;
}
tab-item.active .label-content {
  font-weight: bold;
  font-size: 14px;
}
tab-item.active tab-twisty,
tab-item.active .label-content,
tab-item.active tab-counter {
  color: #fff;
}

/* Show closebox only on hover */
/* "#tabbar" is required for TST 3.4.0 and later! */
#tabbar tab-item:not(:hover) tab-closebox {
  visibility: hidden;
  width: 2ch;
}

/* Hide tab counter */
tab-item tab-counter {
  display: none;
}

/* Scrollbar rightside */
:root.left #tabbar {
  direction: ltr;
  overflow-x: hidden;
}
/* hide scrollbar until hovering over tabs */
#tabbar.overflow { scrollbar-width: none; } 
#tabbar.overflow:hover { scrollbar-width: thin; }

/* Hide the new tab button */
.newtab-button-box {
  display: none;
}
#tabbar {
  bottom: 0; /* Eliminate dead space on bottom */
}

/* Hide subpanel */
#subpanel-container {
  display: none;
}
#tabbar-container {
  bottom: 0; /* Eliminate dead space on bottom */
}

/* Tree vertical line */
:root.left tab-item {
  --treeline-gap: calc(var(--indent-size)*2);
  --treeline-offset: 0px; 
  --treeline-indent: calc(var(--tab-indent)*2);
  --treeline-indent-offset: calc(var(--treeline-indent) + var(--treeline-offset));
}
:root.left tab-item:not([data-level="0"]):not(.pinned) {
  --treeline-offset: 0.3px;
}
/* Demonstration of indent line for Proton, left side style */
:root tab-item:not(.pinned) tab-item-substance::after {
  bottom: 0;
  content: "";
  opacity: 0.45; /* make border color thinner */
  pointer-events: none;
  position: absolute;
  top: 0;
  width: var(--treeline-indent);
  z-index: 999999;
}
:root.left tab-item:not(.pinned) tab-item-substance::after {
  background: repeating-linear-gradient(
                to right,
                var(--tab-text-regular) 0px,
                var(--tab-text-regular) 1px,
                rgba(0, 0, 0, 0) 1px,
                rgba(0, 0, 0, 0) var(--treeline-gap)
              );
  left: var(--treeline-gap);
}
tab-item tab-item-substance {
  border: unset;
}
/* indent via padding instead of margin */
:root.left tab-item:not(.pinned) tab-item-substance {
  margin-left: 0;
  padding-left: var(--treeline-indent-offset);
}
/* indent hover background */
:root.left tab-item:not(.pinned) .background {
  left: var(--treeline-indent-offset);
}
/* indent drop marker using background instead of tab-item */
tab-item[data-drop-position="self"] tab-item-substance {
  outline: unset !important;
  outline-offset: unset;
}
tab-item[data-drop-position="self"] .background {
  outline: var(--tab-dropmarker-size) solid var(--tab-dropmarker);
  outline-offset: calc(0px - var(--tab-dropmarker-size));
}
/* indent drop marker */
tab-item[data-drop-position]:not([data-drop-position="self"]) tab-item-substance::before {
  left: var(--treeline-indent);
}

/* Container background tab sidebar only */
:root.sidebar tab-item:not(.active) .contextual-identity-marker {
  margin: 0;
  position: absolute;
  pointer-events: none;Full Auto-show/hide Theme
  z-index: 0;
  
  bottom: 0;
  left: var(--treeline-indent-offset);
  right: 0;
  top: 0;
  
  width: unset;
  height: unset;  
    
  opacity: 0.5;
}
:root.sidebar tab-label {
  z-index: 1000;
}
:root.sidebar tab-item.active:not(.pinned) .contextual-identity-marker {
  margin: 0;
  position: absolute;
  pointer-events: none;Full Auto-show/hide Theme
  z-index: 0;
  
  bottom: 0;
  left: var(--treeline-indent-offset);
  right: 0;
  top: calc(39px*1/6);
  
  height: calc(39px*4/6) ;  
}

/* Fix TST Active Tab style */
::part(extra-contents-by-tst-active-tab-in-collapsed-tree_piro_sakura_ne_jp tab-container) {
  margin-left: calc(var(--treeline-indent-offset) - 0.329ch);
}
::part(extra-contents-by-tst-active-tab-in-collapsed-tree_piro_sakura_ne_jp tab) {
  background-color: var(--theme-colors-tab);
}
::part(extra-contents-by-tst-active-tab-in-collapsed-tree_piro_sakura_ne_jp closebox) {
  background-color: var(--theme-colors-tab);
}
::part(extra-contents-by-tst-active-tab-in-collapsed-tree_piro_sakura_ne_jp closebox-icon) {
  background-color: white;
}

[awused]

I also ran into issues with indentation after the update, specifically whenever the tab bar needed to scroll tabs would indent themselves for no reason. I've managed to fix the bug by overriding the CSS changes in 8eb3c08 with CSS. There is a config option for it, but it did nothing for me. Can't say it's the same issue, and the numbers might need to be tweaked for you, but this fixed it for me.

:root.left #tabbar.overflow.scrollbar-autohide tab-item:not(.pinned) tab-item-substance {
  padding-left: 3.5px;
}

:root.right #tabbar.overflow.scrollbar-autohide tab-item:not(.pinned) tab-item-substance {
  padding-right: 0;
}

[piroor]

By the way there is a helper addon TST Indent Line https://addons.mozilla.org/firefox/addon/tst-indent-line/ for the purpose. I made it because simple CSS hack had some limitations.

[piroor]

I've moved this topic from issues to discussions, because basically the priority keeping compatibility for custom CSS is low. I hope custom CSS are maintained and updated by users.

[haoadoreorange]

By the way there is a helper addon TST Indent Line addons.mozilla.org/firefox/addon/tst-indent-line for the purpose. I made it because simple CSS hack had some limitations.

So the issue somehow resolved itself (I've been staying on 3.8.23 until I have time to fix it).

Btw, the custom CSS comes from our discussion in this #2948. There was a code snippet example in the docs but it was removed since the introduction of the tst-indent-line extension. I understand why you made it, but maybe we should keep the snippet ? Since it allows more customization (e.g I prefer to align the line with the icon, its more eye candy to me). What do you think ?

[piroor]

I just hope that the wiki should have effective information. The CSS version indent-line snippet can be enough to be listed as a snippet if it is still effective and usable.