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

[Antonius32]

A few months ago I made a suggestion with regard to the display of tabs in Pale Moon when a lightweight theme is in use (see this topic). Since then, several changes have been made in this area, and this is how tabs are currently displayed in Pale Moon / Pale Moon for Linux:

Display of tabs for various themes in Pale Moon / Pale Moon for Linux 25.2.1

As you can see, not all themes go well with Pale Moon at the moment, darker themes in particular (with all due respect).

I felt there had to be a way to make Pale Moon's tabs look good for all themes, and so I decided to have another look at the style sheet I shared in the original topic. After some trial and error, I was able to adjust the code to only target background tabs (and the New Tab button), only when a bright lightweight theme is in use (by using the :not(:-moz-lwtheme-brighttext) attribute). This is what the tabs look like when I apply the new style sheet to Pale Moon / Pale Moon for Linux 24.7.2:

Display of tabs for various themes in Pale Moon / Pale Moon for Linux 24.7.2 with the attached style sheet applied

I have attached my new style sheet / userChrome.css file below, so anyone who's interested can download a copy and check it out.

Would it be an option to implement yet another change to the display of tabs in the next version of Pale Moon, to (hopefully) satisfy all Pale Moon users, no matter what kind of theme they use?

userChrome.zip

Style sheet targeting only background tabs and the New Tab button, only when a bright lightweight theme is in use

(465 Bytes) Downloaded 53 times

[Moonchild]

The black text in Linux is certainly not intended, so I'll have a look at fixing that.
As far as the grey background of active tabs is concerned, I respectfully disagree that that would be better because it provides very low contrast between tab text and tab background for active tabs (where this contrast is most important, and the main reason why I changed the style of active tabs for dark themes to begin with).

EDIT:
@trava90 -- Can you confirm a problem with dark personas on Linux? I don't have a Linux VM handy right now -- i do have a potential fix if it's a problem, but need a confirmation first.

[Antonius32]

As far as the grey background of active tabs is concerned, I respectfully disagree that that would be better because it provides very low contrast between tab text and tab background for active tabs

I guess I was focusing too much on aesthetics. Looks aside, I agree with you that with the current style the text on the active tab is easier to read.

The black text in Linux is certainly not intended, so I'll have a look at fixing that.

Thanks!

Oh, and for your information: I tested this with a newly created profile, so I'm sure the black text with dark themes in PM4Linux is not caused by a user preference or by an extension.

[Moonchild]

I'm actually a little surprised this black text wasn't reported before. I verified it as an issue in the current version... Maybe personas aren't that popular among linux users?

[Night Wing]

I'm actually a little surprised this black text wasn't reported before. I verified it as an issue in the current version... Maybe personas aren't that popular among linux users?

Just guessing on my part.

I'm a linux Pale Moon user. But, I don't use dark colored persona (lightweight themes). Dark personas are tough on my eyesight. This is why I use light colored personas instead. There aren't as many linux users as there are Windows users either. This means the vast majority of linux users don't have Pale Moon in the repository of the linux distro they are using.

As an example. The two linux distros I used during the year 2014, linux distros Mint and SolydX don't offer linux Pale Moon in their repositories.

Many non technical users of linux (like me) since we're not power users, if Pale Moon isn't offered in the distro's repository where we can install it using the Software Manager or Synaptic Package Manager, then we have to install it using the Terminal. If we can't install it using the Terminal, then linux Pale Moon doesn't get installed which means the problem with the dark text never gets noticed.

Lastly, many linux users have never even heard of the linux Pale Moon browser.

The above is just food for thought.

[Moonchild]

Pale Moon on Linux is certainly seeing more use by now though, with some distros offering it as a default choice of browser.

Personal limitations aside for the use of dark personas, it'll become more of an issue so this is a bug that needs fixing -- from a local Linux build I made, with the patch in commit [21e34ce] applied, it seems to be fixed -- it was an obvious oversight in the re-theming of persona handling where text color was forced regardless of having a persona active - since the default is dialog text, it would override the text on the loaded persona with the dialog text styling. A problem when you are using a dark persona on an otherwise light OS theme. Likely it would not be an issue on dark OS themes if people would match OS theme and browser theme which could account for it slipping under the radar.

[trava90]

Sorry for my delayed post, I was leaving for work when I first saw this thread and didn't have a chance to test until I got home.

Anyway, I use a dark system theme and did not notice this issue when using a dark persona. I have the opposite problem, when using a light persona the active tab text is much too light. So it apparently is related to the system theme in use. I'll do a build with the latest commit and give it a try as well.

[Moonchild]

Sorry for my delayed post, I was leaving for work when I first saw this thread and didn't have a chance to test until I got home.

Anyway, I use a dark system theme and did not notice this issue when using a dark persona. I have the opposite problem, when using a light persona the active tab text is much too light. So it apparently is related to the system theme in use. I'll do a build with the latest commit and give it a try as well.

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

[Antonius32]

Off-topic:
@Night Wing: It really isn't that hard to install Pale Moon on Linux, even when it's not in the repositories for your distro - and you don't need the Terminal to do it. Just download the pminstaller script, right-click on it and choose "Properties" to make sure it's executable, then right-click on it again, choose "Run as root", and enter your root password - the rest is self-explanatory.

As far as the grey background of active tabs is concerned, I respectfully disagree that that would be better because it provides very low contrast between tab text and tab background for active tabs (where this contrast is most important, and the main reason why I changed the style of active tabs for dark themes to begin with).

With all due respect, I'm still not convinced that the current tab style is better overall than the solution I proposed. My areas of concern:

1) While I agree with you that with the current style, for dark themes (on Windows, and on Linux as well, when the commit is implemented), the text on the active tab is easier to read, I think it's harder to distinguish the active tab from the other tabs than it is with the old style (with or without my style sheet applied, because the code does not change anything for dark themes). You need to be able to spot the active tab, before you can read what's on it, don't you agree?

2) I don't think the text on the active tab is more important than the text on the other tabs per se. After all, you already have the content as an indicator, and what's more, the title for the current tab is in the Title bar as well (when you have the tabs on the bottom, that is). To me, the text on the tabs matters most when I want to switch to another tab, and I think that with the current style, for bright themes, the text on background tabs is (slightly) harder to read than it is with the old style with my style sheet applied.

3) For many themes, the current style just doesn't look right to me, especially when you have the tabs on top. Compare the following screenshots:

PM 24.7.2 + user style sheet + medium-dark theme

PM 25.2.1 + medium-dark theme

PM 24.7.2 + user style sheet + fairly dark theme

PM 25.2.1 + fairly dark theme

The Navigation bar has a subtle white shade on it, that becomes more visible near the top. With the adjusted style in PM 24.7.2, the active tab blends in with that nicely, whereas with the current style, things look somewhat, well, "user-set", or "tampered with".

Please don't get me wrong: I'm not making an argument for the sake of it - I'm just trying to do my bit, as a user, by giving feedback in a helpful, respectful manner.

[Moonchild]

Thanks for the feedback. the problem with tabs on top is the fact that the navbar is given a shading -- which is specifically catered to the OLD tab shading method. It just means that I need to adjust this shading to match the current theme. ToT is always going to look odd without this kind of visual trick to somehow "glue" the browser-static controls to the tab (another reason to not use it? ).

I'll tinker with it some more to make it blend better. The other points though, we simply have to disagree on.

(1) Tab distinction should be just as easy, or to a sufficient level, with the current theme. it can always be "more distinguishable" than it was. Make it bright red and it would make your proposed solution "less distinguishable" than that. In addition, as you yourself say: the tab content will also give a clue.
(2) Low contrast text is just bad, no matter how you look at it. Text on an active tab is not necessarily more important, but is certainly also isn't less important, and should be just as easy to read. the small difference in opacity is a tradeoff, too: you can choose to either have min-maxed, maximum-contrast UI or you can have one that sacrifices some of that contrast to provide a more aesthetic approach.

In the end, if you prefer your layout, then you have (and will continue to have) the freedom to adjust any styling in the default theme (with or without skinning) by way of userChrome.css. The problem with skinnable themes is that it is nigh impossible to provide overlays on top of wildcard toolbar backgrounds that will work with 100% of the images. This is why persona design is tricky, and there are many that simply don't work very well for high-productivity use.

[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