[Solved]Pale Moon + lightweight themes: display of tabs (#2)

[Moonchild]

So, to keep in line with it, an example of a "very difficult" bright-text theme with proper visual glue and slightly better text contrast on inactive tabs:

For most themes the border will not be as pronounced as here. I'm aware that this causes a break in toolbar background images but that is inherent to having tabs on top and requiring this kind of visual aid. The lower opacity of the shading should be sufficient to not make a hard edge.

[Antonius32]

^ I think this looks great!

Could you do the same for bright themes, so when you have the tabs on top, the active tab always appears merged with the Navigation bar?

The other points though, we simply have to disagree on.

I think the above screenshot looks much more "finished". If this is implemented with the next version, I'm happy!!

[Moonchild]

Of course I'll do the same for bright lightweight themes, as well as the same changes for the Linux theming.
I've tweaked it a little more here and there.

[Antonius32]

Great! Thank you, Moonchild!

[trava90]

Yeah the commit should fix both situations, since it will no longer override the persona with the system text color.

I can confirm it works for me when using both dark and light system theme.

[Moonchild]

...the commit should fix both situations...

I can confirm it works for me when using both dark and light system theme.

Thanks for testing!

[Antonius32]

@Moonchild: I noticed that in a recent version a change was made to display an inverted icon for the All Tabs button when a dark (bright-text) theme is in use. Currently the Tab Strip Close button (which can be enabled by setting the value for browser.tabs.closeButtons to 3) and the Close buttons for the Sidebar, the Add-on bar and the Find bar are still displayed with the regular (non-inverted) Close button icon when a dark theme is in use, and while you're at it, I thought you might want to fix that as well. It can be done with with the following CSS:

Code: Select all

#TabsToolbar > .tabs-closebutton:-moz-lwtheme-brighttext,
#sidebar-header > .tabs-closebutton:-moz-lwtheme-brighttext,
#addonbar-closebutton:-moz-lwtheme-brighttext,
.findbar-closebutton:-moz-lwtheme-brighttext {
  list-style-image: url("chrome://global/skin/icons/close-inverted.png");
}

If you want to test the code in a userChrome file, don't forget to add the !important declaration!

[Moonchild]

Currently the Tab Strip Close button ... and the Close buttons for the Sidebar, the Add-on bar and the Find bar are still displayed with the regular (non-inverted) Close button icon when a dark theme is in use

Thanks - I didn't think of those buttons when creating the inverted ones for the tab close function on dark personas.
Thanks for pointing out that I had forgotten them, and since I'm doing front-end css anyway right now, may as well fix it up proper

The code is close, but can be made a bit more generic (the tabs-closebutton class is only used for these features) and globally applicable as a result. it also needs to be put split out to keep things grouped, but for an override file it certainly works the way you posted it

[Antonius32]

The code is close, but can be made a bit more generic (the tabs-closebutton class is only used for these features) and globally applicable as a result.

If you use the tabs-closebutton class name without further specification, the Close button in the All Tabs view is targeted as well, and I think that's undesirable, don't you agree?

[Moonchild]

Yup, but that's still better done with an override based on Element ID since it's a special case as far as styling goes

[Antonius32]

Yup, but that's still better done with an override based on Element ID since it's a special case as far as styling goes

Do you mean the proper way to do this is to first target the tabs-closebutton class as a whole, and then make an exception for the All Tabs view?

Like this:

Code: Select all

.tabs-closebutton:-moz-lwtheme-brighttext {
  list-style-image: url("chrome://global/skin/icons/close-inverted.png");
}

#allTabs-tab-close-button:-moz-lwtheme-brighttext {
  list-style-image: url("chrome://global/skin/icons/close.png");
}

Oh, and I have one more question with regard to the screenshot you posted earlier: don't you think this change could prove problematic for truly dark / black themes?

[Moonchild]

Do you mean the proper way to do this is to first target the tabs-closebutton class as a whole, and then make an exception for the All Tabs view?

If you want to approach it logically, yes.
That way, if there are any other items with the class (which would normally need to styling) they will pick it up. The exception element (because of where it's used) will pick up the more specific rule.

don't you think this change could prove problematic for truly dark / black themes?

No, why would it? Pure black themes are limited to begin with, same as pure white. You can't make black blacker or white whiter.

[Antonius32]

No, why would it? Pure black themes are limited to begin with, same as pure white. You can't make black blacker or white whiter.

All right. I don't actually use a black theme, I was just thinking along with you.

Off-topic:
My extension, Blue Moon Linux, modifies both the Tab Strip Close button and the Sidebar Close button, but targets the first element in one style sheet, and the second in another. Currently the Tab Strip Close button is targeted with this selector:

Code: Select all

#TabsToolbar > .tabs-closebutton

and the Sidebar Close button with this one:

Code: Select all

#sidebar-header > .tabs-closebutton

If I'd target the tabs-closebutton class (that consists of three elements) as a whole in this case, I'd have to override that for two elements in each style sheet. What do you think would be the best solution here?

[Moonchild]

Off-topic:

What do you think would be the best solution here?

Which ever one you are most comfortable with It's your extension and your coding style!

[Antonius32]

Off-topic:

Which ever one you are most comfortable with It's your extension and your coding style!

I think in this case, it's best to target only specific elements, so I'll just leave things the way they are.

[riiis]

The Personas Expression add-on may provide a suitable work-around. This add-on uses the sidebar for its many formatting options. The launch button for the personas-expression sidebar can be found in the status bar.

[Antonius32]

If you use the tabs-closebutton class name without further specification, the Close button in the All Tabs view is targeted as well, and I think that's undesirable, don't you agree?

Yup, but that's still better done with an override based on Element ID since it's a special case as far as styling goes

You probably actually meant like this, correct?

Code: Select all

.tabs-closebutton:not(#allTabs-tab-close-button):-moz-lwtheme-brighttext {
  list-style-image: url("chrome://global/skin/icons/close-inverted.png");
}

[Moonchild]

Um well, I meant more as different rules for sake of logic/clarity, but you should be able to compact it into one like that, I think. I tend to just have cascading rules, myself - much easier to work with, and it's called cascading styles for a reason
Besides, ID overrides class, anyway.

[Antonius32]

I meant more as different rules for sake of logic/clarity (...)

Ah, so you did mean having two separate rules, as in my first example. Thank you for clarifying.

[Antonius32]

I really like the new colour scheme for lightweight themes. Thank you, Moonchild!