Treestyletab: Grouping tabs without indentation, but separating groups by white space

[icher]

Hi.

Old TST (pre-webextensions) allowed grouping tabs without indentation, but separated by white space. May be it was undocumented function or even a bug, only worked by editing about:config variable, some kind of "indent_tabs_until=-1" or like that. It was VERY useful. But new TST can't do that. Is it possible to implement that behavior by webextension-api?

Bookmarks sidebar can use separators ("Add separator" horizontal straight line) -- may be it's the way to go.

[piroor]

Spacings between root level tabs can be emulated with a custom style rules like:

/* show separator space between root level tabs */
tab-item[data-level="0"] {
  margin-top: var(--tab-size);
}
/* cancel needless separators on exceptions */
tab-item[data-level="0"].pinned,
tab-item[data-level="0"].pinned + tab-item[data-level="0"],
tab-item[data-level="0"] + tab-item[data-level="0"]:not([data-child-ids]) {
  margin-top: 0;
}

/* make collapsed tabs visible */
tab-item:not(.pinned).collapsed,
tab-item:not(.pinned).collapsed.collapsed-completely {
  margin-top: 0;
  opacity: 1;
  visibility: visible;
}

Setting the max indent level to zero with this style rules will work like the old one.

[piroor]

Sorry but it won't be a built-in option of TST itself, because:

• The style (appearance and behavior) is quite different from my usecase and codes for the mode never be used on my environment.
• For better maintainability I hope to keep TST clean from such dead codes.

[icher]

Jesus Christ, man, since webextensions I suffering from lack of this feature! It works like a charm. Thanks. I modified it a little bit for my taste:

/* show separator space between root level tabs */
tab-item[data-level="0"] {
  margin-top: 8px;
}

/* cancel needless separators on exceptions */
tab-item[data-level="0"].pinned,
tab-item[data-level="0"].pinned + tab-item[data-level="0"],
tab-item[data-level="0"] + tab-item[data-level="0"]:not([data-child-ids]) {
  margin-top: 0;
}

/* sidebar background */
:root.sidebar #background {
  background: #6c6c6c;
}

Maybe you should add it to the "Code Snippets" documentation.

[irvinm]

@icher, can you close this item? Thanks.

[mimecry]

interestingly, i get a 'ghost' tab in the background of my side bar if i use @icher 's sidebar background color CSS, but only if i replace it with a gradient, such as

/* sidebar background */
:root.sidebar #background {
  background: rgb(238,156,167) linear-gradient(90deg, rgba(238,156,167,1) 0%, rgba(251,193,200,1) 100%);
   opacity: .25 !important;
}

[piroor]

I've added a new section to the code snippets:
https://github.com/piroor/treestyletab/wiki/Code-snippets-for-custom-style-rules#grouping-tabs-with-spaces-instead-of-indented-tree-2777
But I won't maintain it aggressively so it need to be maintained by people who actually use.

[icher]

I've added a new section to the code snippets:
https://github.com/piroor/treestyletab/wiki/Code-snippets-for-custom-style-rules#grouping-tabs-with-spaces-instead-of-indented-tree-2777

Actually, last section "make collapsed tabs visible" do not need, collapse group is useful feature. Without this section all works great. The idea is just economy of space, no change the behaviour.

[piroor]

Actually, last section "make collapsed tabs visible" do not need, collapse group is useful feature.

OK, I've removed the last section.

[mimecry]

@piroor do you have any idea what the 'thing' in my screenshot could be?

[mimecry]

i tried setting tab-item.active to opacity: 0 and this is what i see

edit: managed to capture the entire bar

[piroor]

Ah, it is by design. TST has a "fake" tab behind the background screen element to calculate size of tabs, favicons, and others. It will be revealed unexpectedly for now, if you use transparent color for the #background element. Until I find ouf some better solutions, you shouldn't use transparent color for the background.

[mimecry]

seems like i peeked behind the wizard's curtain by accident :D appreciate the explanation

[piroor]

The commit 9411efb should hide the dummy elements completely.

[mimecry]

amazing work you're doing here, thank you once again!!

[mimecry]

@piroor hmm seems like you managed to get rid of the dummy tab, but these 'open new tab as' (?) options still linger

[mimecry]

well they're only present briefly when you activate the sidebar, so i guess they're not a big deal

[piroor]

@mimecry Sorry I missed that. Here is a workaround:

body > ul[id$="selector"] {
  opacity: 0;
}

Now it is included by default with the commit 61a6fbb6e.