Hiding the fake context menu has unintended side effects

Zabooby commented 1 year ago

Overview

/*** Hide fake context menu, when right clicking empty area***/
ul[id="tabContextMenu"] {
  display: none;
}

@andreasgrafen found this issue, it seems to have some unintended side effects that breaks usability, as it still opens the context menu – it's just not visible. Resulting in a non-hovered yet hovered state.

https://user-images.githubusercontent.com/35840154/233112215-7e28e5b7-f0b0-451a-b501-2342c0e0a11a.mov

Environment

Platform (OS): Windows 11
Version of Firefox: 112.0.1
Version (or revision) of Tree Style Tab: 3.9.15

irvinm commented 1 year ago

Can you post the CSS you are using to modify the sidebar?

The CSS you posted certainly works with a standard configuration to prevent the context menu from being displayed. It has something to do with interacting with your other CSS. You probably need some CSS to keep some of your changes even when people click in the sidebar, but not on a tab. Just a guess ...

Zabooby commented 1 year ago

Here is my full setup: userChrome.css TST settings I also use the Firefox-UI-Fix but the issues below persist without it.

Here are all the issues I have been struggling with, I'm not sure whether the option above could be causing some of these:

If an unpinned tabs is playing audio/muted the icon is only visible when sidebar is expanded, not an issue for pinned tabs (not sure if this is meant to be a feature)
- The bookmarks toolbar overlaps tabs when switching to the new tab page but the tabs slide down to fix itself. -

I also occasionally get is this weird diagonal effect with pinned tabs.

Other than that, animations are silky smooth and everything else works as expected.

irvinm commented 1 year ago

If an unpinned tabs is playing audio/muted the icon is only visible when sidebar is expanded, not an issue for pinned tabs (not sure if this is meant to be a feature)

This one makes sense to me. Tabs can be "pinned" (favionized) or "non-pinned". Once a tab has been pinned, there is CSS applied to pinned tabs for the sound button. This CSS places the button in the upper-right of a pinned tab. If not pinned, then the sound button remains "in-line" with all of the other elements. Your changes to the sidebar do not change any of this.

You probably need to decide where you want the sound button when not pinned. Either it should be off to the right or moved (all the time) over the favico or something.

Zabooby commented 1 year ago

I want the sound button to be in the same place as pinned tabs. What code do I add?

irvinm commented 1 year ago

I want the sound button to be in the same place as pinned tabs. What code do I add?

This is all just customization and a matter of style and preference. I am just a user like you. You are going to learn how to investigate and make changes yourself. It can be time consuming ...

Not sure if this is what you want or not: (This tries to keep the sound button in a similar place as pinned, but it isn't perfect)

#tabbar:not(:hover) .sound-button {
    right: 145px;
    bottom: 8px;
}

#tabbar .sound-button {
    right: 135px;
    bottom: 8px;
}

irvinm commented 1 year ago

Overview
/*** Hide fake context menu, when right clicking empty area***/
ul[id="tabContextMenu"] {
  display: none;
}
@andreasgrafen found this issue, it seems to have some unintended side effects that breaks usability, as it still opens the context menu – it's just not visible. Resulting in a non-hovered yet hovered state.

So for this one, it has nothing to do with the CSS you have here. Even without it, when you right-click to bring up the menu, you get the same behavior.

Basically, it looks like when you right click and the menu comes up, the CSS evaluates these 2 blocks as now true (not being hovered on) and hence the changes as if the mouse was not on the sidebar.

@piroor does this seem to be the correct behavior?

piroor commented 1 year ago

Sorry I may not understand what is the problem well...

@ andreasgrafen found this issue, it seems to have some unintended side effects that breaks usability, as it still opens the context menu – it's just not visible. Resulting in a non-hovered yet hovered state.

The fake context menu is shown together with an invisible element which covers all contents of the sidebar. You need to hide it also to allow dispatching mouse events while the fake context menu is open. For example:

ul[id="tabContextMenu"],
.menu-ui-blocking-screen.open {
  display: none;
}

If an unpinned tabs is playing audio/muted the icon is only visible when sidebar is expanded, not an issue for pinned tabs (not sure if this is meant to be a feature)

How about this?:

tab-item:not(.faviconized) tab-sound-button {
  position: absolute;
  left: calc(var(--faviconized-tab-size) - var(--sound-button-size));
}

The bookmarks toolbar overlaps tabs when switching to the new tab page but the tabs slide down to fix itself.

Did you try the option?: TST options => turn "Unlock Expert Options" on, "Appearance" => "Suppress visual gap of the sidebar contents produced by temporarily shown/hidden toolbars on following cases" => turn all checkboxes off

I also occasionally get is this weird diagonal effect with pinned tabs.

Did you try the setting?: TST options => turn "Unlock Expert Options" on, "Appearance" => "Show pinned tabs only with their icon" => set "Show N or less tabs for each row" to 1

piroor commented 1 year ago

Anyway this issue tracker only tracks bugs of TST itself. Discussion of custom CSS is out of scope except backward compatibility breakage.

github-actions[bot] commented 1 year ago

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

piroor / treestyletab