tabcenter-redux icon indicating copy to clipboard operation
tabcenter-redux copied to clipboard

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

Open zeroibis opened this issue 6 years ago • 1 comments

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.

zeroibis avatar Apr 12 '18 13:04 zeroibis

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!

Keith94 avatar May 13 '18 23:05 Keith94