eoger / tabcenter-redux

Vertical Tabs extension for Firefox
Mozilla Public License 2.0
381 stars 67 forks source link

Default "Personal Container Tab" looks identical to default tab when selected. #337

Open zeroibis opened 6 years ago

zeroibis commented 6 years ago

When selected it is not possible to tell the difference between having a normal tab or the default personal container tab selected. This is because the color of the marker on the left part of the selected tab is the same blue color when selected as a normal tab and as a personal container tab by default. This is misleading to new users.

Suggested possible resolutions: -Make the default tab color bar a different color that is not the same as the default container tabs.

-Remove the color bar from a normal tab when it is selected and only display them for container tabs.

-Create a new visual indicator for container tabs such as possibly having the left color bar become a border that "contains" the tab to help users visually recognize that the tab is a container tab.

Keith94 commented 6 years ago

I agree; not only does the identical color make it confusing, it does not adapt to the current theme, making it hard to see against the background in some cases.

-Make the default tab color bar a different color that is not the same as the default container tabs. -Remove the color bar from a normal tab when it is selected and only display them for container tabs.

It could be customized (for now) on the user's side.

.tab:not(.hasContext) {
  --identity-tab-color: darkturquoise; /* use any color, or use transparent for no color */
}

Create a new visual indicator for container tabs such as possibly having the left color bar become a border that "contains" the tab

Yeah, I did notice TST puts the container indicator on the right side, leaving the current tab indicator on the left. I personally like this approach the most. Something like:

.tab.hasContext {
  border-right: 6px solid var(--identity-tab-color);
}
.tab.active .tab-context {
  --identity-tab-color: var(--default-tab-line-color);
}
.tab:not(.active) .tab-context {
  --identity-tab-color: transparent;
}

Result: firefox_2018-05-13_16-18-39

Any opinions or brainstorming ideas are welcome!