[feature request] expand/collapse on favicon click

[lynxzp]

I think this tree icon do not very required for everyone, so I did hide it, mostly because to add more space for text:
.tab .twisty { display:none; }
http://ipic.su/img/img7/fs/screens_2018.1517012858.png
Now it's impossible to expand/collapse, but not a problem for me - I'm keeping all expanded all time, but it's looks reasonable, ever maybe for making option in configuration or style.

Expand/collapse on favicon click, I think, not bad - this icon not used in other way.

Just suggestion, if someone will like it too.

[piroor]

How about this?

.tab .twisty {
  opacity: 0;
  margin-right: -1.5em;
  position: relative;
  z-index: 10000;
}

[piroor]

I've added it to the code snippets: https://github.com/piroor/treestyletab/wiki/Code-snippets-for-custom-style-rules#hide-twisty-and-collapseexpand-tree-by-clicking-on-tabs-icon-1743

[lynxzp]

Almost perfect, but right side of favicon not clickable.
my fix:

.tab .twisty {
  opacity: 0;
  margin-right: -1.5em;
  position: relative;
  left: 4px;             // <-- here
  z-index: 10000;
}

(I'm not web dev, but now work)

[smokris]

I wanted to be able to keep the twisty visible, and also be able to click on the favicon, so I added these style rules:

#all-tabs .tab .twisty {
  width: 60px !important;
  max-width: 60px !important;
  height: 60px !important;
  max-height: 60px !important;
  position: absolute;
  left: -15px;
  top: -15px;
  z-index: 10000;
}
.tab:not(.collapsed) .twisty::before {
  width: 60px;
  max-width: 60px;
  height: 60px;
  max-height: 60px;
  margin-top: 26px;
  top: 0;
  left: 0;
}
.tab .favicon {
  margin-left: 23px;
}

(You may need to scale the pixel values depending on the height of your tabs.)

[vstepaniuk]

How to show all collapsed tabs in bold style?
Also, how to add a thick lower border to collapsed tabs?
Thank you

[hub2git]

(You may need to scale the pixel values depending on the height of your tabs.)

I'm using https://github.com/piroor/treestyletab/wiki/Code-snippets-for-custom-style-rules#change-tab-height-236

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

@smokris In your code, what exactly do I change?

[smokris]

@hub2git try this:

#all-tabs .tab .twisty {
  top: -18px;
}
.tab .favicon {
  margin-left: 13px;
}

[hub2git]

Thanks Steve for your reply.

Unfortunately, it shifts the icons on my pin tab to the right. The effect
is that I only see the left half of the icons on the pinned tabs.
Another side effect is that it adds unwanted blank space to the left of
each tab (including the non-pinned tabs)
A third side effect is that I no longer can tap the icon on non-pinned tabs
to get them to expand or contract.
Fourth, collapsing tabs still results in a bad collapsing.

Here's how my "Extra Style Rules for sidebar contents" looks like:

/* 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 1px #00000012;
}

/* 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: red;
}

/* Show title of unread tabs in italic */
.tab.unread .label-content {
  font-style: italic;
}

/* Colors a tab based on its container's color. */
.contextual-identity-marker {
  position: absolute !important;
  pointer-events: none;Full Auto-show/hide Theme
  z-index: 0;

  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;

  width: unset !important;
  height: unset !important;

  opacity: 0.28;
}

.tab .twisty {
  margin-right: -1.5em;
  opacity: 0;
  position: relative;
  left: 4px;
  z-index: 10000;
}

/* Only show tab close button on hover */
.tab:not(:hover) .closebox {
  display: none;
}

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

#all-tabs .tab .twisty {
  top: -18px;
}
.tab .favicon {
  margin-left: 13px;
}

[piroor]

I close this because outdated.

[pintassilgo]

https://github.com/piroor/treestyletab/wiki/Code-snippets-for-custom-style-rules#hide-twisty-and-collapseexpand-tree-by-clicking-on-tabs-icon-1743

Just noting that due to changes in 3.2.7 I needed to set !important in opacity and to replace -1.5em by -1em in margin-right.

[not-poma]

Doesn't work for me after the last week update. This one does:

.tab .twisty {
  margin-right: 0;
  position: absolute;
  opacity: 0 !important;
  z-index: 10000;
}

[CoelacanthusHex]

When I use it in 4.0.3, it leads to the tab doesn't reach the right side.

With this CSS:

Without this CSS:

[piroor]

It is due to max-width specified by TST itself. You need to override it with 100% like as:

.tab .twisty {
  margin-right: 0;
  position: absolute;
  opacity: 0 !important;
  z-index: 10000;
}
.tab .ui {
  max-width: 100%;
}