[Bug] Pinned tabs cannot be precisely clicked, pointer moves not aligned with highlighted tabs

[Piotr-Fr]

Overall

When trying to click pinned tabs, the pointer indicates one tab but another is highlighted

Steps:

Just move the pointer across pinned tabs

Environment

• Platform (OS): Win10 x64
• Version of Firefox: 124.0 (64-bit)
• Version (or revision) of Tree Style Tab: 4.0.8

https://github.com/piroor/treestyletab/assets/82875426/d1c78842-37c7-4658-a184-d95b5a0eb13b

Thank you for the great add-on though. Really needed.

[piroor]

I couldn't reproduce this. Do you use any user style sheet customization?

[Piotr-Fr]

Can't recall right now, I have some extensions. Oddly, after the FF restart, it works. It is random, unfortunately. The issue appeared ca 1 month ago, out of the blue.

[piroor]

Why I asked about user style sheet because it looks something transparent element in pinned tabs expand tabs to right. Something customization with negative margins may trigger such a state.

[Piotr-Fr]

Checked the \AppData\Local\Mozilla\Firefox\Profiles\ \AppData\Roaming\Mozilla\Firefox\Profiles\ in both, no chrome So it looks like no custom styles.

[piroor]

Oops, I meant about TST options => Advanced => user style sheet.

[Piotr-Fr]

Same there, nothing.

[Piotr-Fr]

Now it works, no idea why. Do you know how to 'inspect' these tabs? To see what is going on? Usual F12, and using Inspector works only on sites' content.

[piroor]

Here is an instruction: https://github.com/piroor/treestyletab/wiki/How-to-inspect-tree-of-tabs#how-to-inspect-the-sidebar On the inspector, click the "Pick an element..." button (the leftmost button in the toolbar) and point a pinned tab then you'll see the DOM tree expanded for the pointed element. Please find the element expanding the box of the tab and why it expands the box (positioning, negative margins, or others), by the inspector.

[Piotr-Fr]

OK, got it. Once it is triggered I will check it out.

Please note that Pick an element does not work here. Instructions on Github do though.

[Piotr-Fr]

This works, after turning off left: var(--tab-label-start-offset); in below:

tab-item .extra-items-container.front { justify-content: flex-end; left: var(--tab-label-start-offset); pointer-events: auto; z-index: var(--tab-extra-contents-front-z-index); right: var(--tab-label-end-offset); }

[piroor]

Thanks! I've realized that the "container for extra tab contents" is unexpectedly placed far from faviconized tabs and it may block operations on following tabs as you reported. The commit 38bae01 should fix this.

[Piotr-Fr]

Great, good to know it wasn't something on my machine only.

[herobrauni]

Had the same issue, adding the lines of the commit 38bae01 to my User Style Sheet fixed the misalignment. Sadly the preview of where I'm about to click is no longer highlighting the pinned Icon but just a small circle middle left of it. Might have to do with me just pasting it into User Style Sheet?

In any case, much less anoying than missing the pinned tab due to misalignment. Thanks for the quick fix!

[piroor]

Do you use any other user style sheet? @herobrauni

[herobrauni]

Good catch, I'm using a userChrome.css

#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar > .toolbar-items {
  opacity: 0;
  pointer-events: none;
}
#main-window:not([tabsintitlebar="true"]) #TabsToolbar {
    visibility: collapse !important;
}

#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
  display: none;
}

/* Adding empty space for buttons */
#nav-bar {
    margin-right:140px;
}

/* 15px for dragging whole window by mouse*/
#titlebar {
    appearance: none !important;
    height: 15px;
}

/* Fix for main menu calling by Alt button */
#titlebar > #toolbar-menubar {
    margin-top: 10px;
}

/* Move minimize/restore/close buttons to empty space */
#TabsToolbar > .titlebar-buttonbox-container {
    display: block;
    position: absolute;
    top: 17px;
    right: 1px;
}

[piroor]

Sorry I meant about TST options => Advanced => user style sheet.

[herobrauni]

No I just left the comments and included the added lines that were in the commit.

/* 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-item.faviconized .extra-items-container.front {
  left: var(--faviconized-tab-padding);
  right: var(--faviconized-tab-padding);
}
tab-item.faviconized {
  --faviconized-tab-padding: calc((var(--tab-current-size) - var(--favicon-size)) / 2);
  padding: var(--faviconized-tab-padding);
}

[piroor]

It need to be:

tab-item.faviconized .extra-items-container.front {
  left: var(--faviconized-tab-padding);
  right: var(--faviconized-tab-padding);
}
tab-item.faviconized {
  --faviconized-tab-padding: calc((var(--tab-current-size) - var(--favicon-size)) / 2);
}
tab-item.faviconized tab-item-substance {
  padding: var(--faviconized-tab-padding);
}

Some changes introduced with the commit you referred were overridden by later commits.

[herobrauni]

You are awesome @piroor ! Works like a charm. Thanks a lot.

[github-actions[bot]]

This issue has been closed due to no response within 14 days after labeled as "maybe fixed", 7 days after last reopened, and 7 days after last commented.