486460 - Allow tab opacity to be overridden (personas cause tabs to appear washed out)

Status: RESOLVED FIXED

(Mozilla Labs Graveyard :: Personas Plus, enhancement, P2)

Description

[slyfoxlp]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.0.8) Gecko/2009032609 Firefox/3.0.8 (.NET CLR 3.5.30729)
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.0.8) Gecko/2009032609 Firefox/3.0.8 (.NET CLR 3.5.30729)

With a personas theme enabled (besides default) all tabs get a dull overlay given them a washed out appearance.  I have tab mix plus installed and stylish.  stylish tab themes override the washed out appearance, but tab mix plus's red italics on unread tabs remains washed out.  Please fix this as it makes personas almost unusable.

Reproducible: Always

Steps to Reproduce:
1.enable a personas theme
2.
3.
Actual Results:  
Tabs will have a washout overlay.

Expected Results:  
Normal looking tabs.

Comment 1

[slyfoxlp]

Attachment: Screenshots of error

Comment 2

[Siyivan]

Also happening here.
There's some semitransparence applied on the tabs when using personas. That makes harder to read the tab titles, which is an important part of the browser, whereas showing an image over the tabs is not.

Comment 3

[Siyivan]

Found the relevant lines at jar:personas.jar!/skin/windows/personas.css

/******************************************************************************/
/* Make some elements a little transparent so the persona flavors their look. */

#main-window[persona] .tabbrowser-tab {
  background-color: -moz-dialog;
  opacity: 0.6;
}
#main-window[persona] .tabbrowser-tab[selected="true"] {
  opacity: 0.8;
}


Using instead 0.8 and 1 look much better, although I'd prefer to have the tab text #00000, instead of some dark gray (only make the tab *background* transparent).

Comment 4

[slyfoxlp]

hey, editing the personas.css file worked great.  thanks.  Do you know if this file will get overwritten each time the program updates?

Comment 5

[Tanner M. Young [:tmyoung]]

I have the issue on Windows XP 32-bit.

Comment 6

[:glob ✱]

Attachment: noTransparentTabs.diff

here's a patch which adds a hidden boolean preference "extensions.personas.noTransparentTabs"

when set to true, the tabs are set to 100% opaque (following a restart).

Comment 7

[Myk Melez [:myk] [@mykmelez]]

Byron: thanks for the patch!  It looks good, however I wonder if you can make an enhancement... Chris Beard and I were talking just yesterday about how it would be useful to let users specify the amount of transparency for toolbars and tabs.

So instead of making this a boolean pref, can you make it two string prefs called extensions.personas.override.opacity and extensions.personas.override.activeOpacity that determine the opacities of regular and selected elements, respectively?

The prefs will have to be string prefs, because opacity values can be decimal, and Mozilla's pref system doesn't support decimal prefs.  Putting them in an "override" namespace is for future-proofing, as I expect there'll be other such prefs in the future (f.e. accent color).

In terms of actually applying the values, it should be possible to do something similar to what the PersonaController in personas.js does when applying certain values from personas (like the header background image and titlebar color): it saves the theme's default values on startup, applies the persona's values when the user selects a persona, and reverts to the saved default value when the user selects the "default" persona (i.e. the regular theme).

In this case the logic would be to save the theme's default value (which might be the one in the personas stylesheet), apply the override value (if any) when the user selects a persona, and revert to the saved default value when the user selects the "default" persona.

See references to _defaultHeaderBackgroundImage and _defaultTitlebarColor in personas.js for examples of how this can be done.

Comment 8

[slyfoxlp]

How to we apply this patch so that we do not have to adjust the transparently manually at each update or personnas.  Like where do we physically put the file for it to work automatically?

Thanks.

Comment 9

[:glob ✱]

Attachment: overrideOpacity v1

thanks for the feedback myk :)

this WIP version switches from a boolean to string as requested, and applies the overrides directly.

i'm having some difficultly with getting the default values as there are no tabs in dom at the time startup() is called.

Comment 10

[:glob ✱]

Attachment: overrideOpacity v2

after some thinking, i figured it was easier to simply add the override to the textcolor stylesheet as it's automatically deleted when the default persona is applied.

this patch renames testcolor.css to overlay.css, and inserts override rules into that stylesheet.

Comment 11

[Myk Melez [:myk] [@mykmelez]]

Comment on attachment 402345 [details] [diff] [review]
overrideOpacity v2

(In reply to comment #10)
> after some thinking, i figured it was easier to simply add the override to the
> textcolor stylesheet as it's automatically deleted when the default persona is
> applied.

Ooh, that's a much better approach!  And the patch looks great!  Thanks for the fix!

Comment 12

[Myk Melez [:myk] [@mykmelez]]

Fixed by changeset http://hg.mozilla.org/labs/personas/rev/0bd72b72e0fa.  Changes are part of the latest development build:

https://people.mozilla.com/~cbeard/personas/dist/personas-dev-latest.xpi

Comment 13

[slyfoxlp]

Okay.  Someone please help me (my last question never was).  I'm now using the latest dev one provide in the link above.

Now how do i make it so the tabs have an opacity value of 100%?  What file do I edit now.  And will these changes be permanent from now on even when updating personas... because that is the effect i am trying to achieve.

Thanks.

Comment 14

[Myk Melez [:myk] [@mykmelez]]

slyfoxlp: You can do that by using about:config to create the string preferences extensions.personas.override.opacity and extensions.personas.override.activeOpacity, setting them both to the value "1.0" (without the quotation marks).  For more information about using about:config, see the following support document:

http://kb.mozillazine.org/Editing_configuration

Note I have filed bug 518676 on creating an interface to these preferences. Byron: are you at all interested in hacking on such an interface?

Comment 15

[slyfoxlp]

Attachment: screenshot of about:config

Comment 16

[slyfoxlp]

Thanks Melez for replying.  I did the steps described (as seen in the attached screen shot) and restarted firefox, but it still doesn't work.  Any ideas?

Comment 17

[Myk Melez [:myk] [@mykmelez]]

slyfoxlp: the screenshot shows one of the preference names being "preferences extensions.personas.override.opacity".  That should be just "extensions.personas.override.opacity".  Otherwise, I'm not sure what the problem could be, but I haven't yet tested on Windows 7, and it's possible that there's an OS-specific problem applying opacity.

Comment 18

[slyfoxlp]

putting two strings in about:config extensions.personas.override.activeOpacity
and extensions.personas.override.opacity with values of 1 fixed it.

Thanks so much for the help melez.