1424617 - Webextension badge is blurry in darktext themes

Status: RESOLVED FIXED

(Firefox :: Theme, defect)

Description

[Oriol Brufau [:Oriol]]

Attachment: screenshot.png

Install https://addons.mozilla.org/en-US/firefox/addon/the-snowy-mountains-theme/

Install some webextension with browserAction badges, e.g. https://addons.mozilla.org/en-US/firefox/addon/ublock-origin/

The badge text is white and it has a white text-shadow, so the text appears blurry. It's so ugly and annoying.

The problem is that themes with dark text have a white text shadow
  :root:-moz-lwtheme-darktext {
    text-shadow: 0 -0.5px 1.5px white;
  }
and themes with bright text have a black text shadow
  :root:-moz-lwtheme-brighttext {
    text-shadow: 1px 1px 1.5px black;
  }

The Default theme is OK because it does not have the rules above.

The Light and Dark themes are OK because the rules above are overridden by
  :root:-moz-lwtheme {
    text-shadow: none;
  }

For bright text themes like https://addons.mozilla.org/en-US/firefox/addon/electric-chaos/ it's not a big problem because the badge has white color so a black shadow does not look blurry.

There are also the following rules:

  toolbarbutton:-moz-lwtheme {
    text-shadow: none;
  }
  toolbarbutton:-moz-lwtheme:not([disabled="true"]) {
    text-shadow: inherit;
  }

removing the latter would solve the problem.

Comment 1

[Oriol Brufau [:Oriol]]

Attachment: Bug 1424617 - Remove text-shadow in webextension badges.

Review commit: https://reviewboard.mozilla.org/r/207508/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/207508/

Comment 2

[Dão Gottwald [:dao]]

Comment on attachment 8936805 [details]
Bug 1424617 - Remove text-shadow in webextension badges.

https://reviewboard.mozilla.org/r/207508/#review213608

::: toolkit/themes/windows/global/toolbarbutton.css
(Diff revision 1)
> -    text-shadow: none;
> +  text-shadow: none;
> -  }
> +}
>  
> -  toolbarbutton:-moz-lwtheme:not([disabled="true"]) {
> -    text-shadow: inherit;
> -  }

We should keep inheriting text-shadow here for toolbarbutton labels.

::: toolkit/themes/windows/global/toolbarbutton.css:127
(Diff revision 1)
>    background-color: #d90000;
>    font-size: 10px;
>    font-weight: bold;
>    padding: 0 2px 1px;
>    color: #fff;
>    border-radius: 2px;

Please remove the text-shadow here

::: toolkit/themes/windows/global/toolbarbutton.css:127
(Diff revision 1)
>    background-color: #d90000;
>    font-size: 10px;
>    font-weight: bold;
>    padding: 0 2px 1px;
>    color: #fff;
>    border-radius: 2px;

Please just remove the text-shadow here

Comment 3

[Oriol Brufau [:Oriol]]

Comment on attachment 8936805 [details]
Bug 1424617 - Remove text-shadow in webextension badges.

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/207508/diff/1-2/

Comment 4

[Dão Gottwald [:dao]]

Comment on attachment 8936805 [details]
Bug 1424617 - Remove text-shadow in webextension badges.

https://reviewboard.mozilla.org/r/207508/#review213610

::: commit-message-5f52c:1
(Diff revision 2)
> +Bug 1424617 - Remove text-shadow in webextension badges.

Presumably this problem exists across platforms. Have you checked the linux and osx stylesheets?

::: toolkit/themes/windows/global/toolbarbutton.css:138
(Diff revision 2)
>    font-size: 10px;
>    font-weight: bold;
>    padding: 0 2px 1px;
>    color: #fff;
>    border-radius: 2px;
> +  text-shadow: none;

nit: this makes a bit more sense if you move it right after the background-color or color declarations

Comment 5

[Oriol Brufau [:Oriol]]

Comment on attachment 8936805 [details]
Bug 1424617 - Remove text-shadow in webextension badges.

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/207508/diff/2-3/

Comment 6

[Dão Gottwald [:dao]]

Comment on attachment 8936805 [details]
Bug 1424617 - Remove text-shadow in webextension badges.

https://reviewboard.mozilla.org/r/207508/#review213612

Thanks!

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/ff0c2391364e
Remove text-shadow in webextension badges. r=dao

Comment 8

[Oriol Brufau [:Oriol]]

(In reply to Dão Gottwald [::dao] from comment #4)
> Presumably this problem exists across platforms. Have you checked the linux
> and osx stylesheets?

True, Linux has the same problem. I don't have osx to check but probably too.

Comment 9

[Andrei Ciure[:aciure]]

https://hg.mozilla.org/mozilla-central/rev/ff0c2391364e

Comment 10

[Dão Gottwald [:dao]]

Comment on attachment 8936805 [details]
Bug 1424617 - Remove text-shadow in webextension badges.

Approval Request Comment
[Feature/Bug causing the regression]: /
[User impact if declined]: see attachment 8936144 [details]
[Is this code covered by automated tests?]: no
[Has the fix been verified in Nightly?]: no
[Needs manual test from QE? If yes, steps to reproduce]: 
[List of other uplifts needed for the feature/fix]: /
[Is the change risky?]: no
[Why is the change risky/not risky?]: trivial CSS fix
[String changes made/needed]: /

Comment 11

[Gerry Chang [:gchang]]

Comment on attachment 8936805 [details]
Bug 1424617 - Remove text-shadow in webextension badges.

Polish UI. Beta58+.

Comment 12

[Sebastian Hengst [:aryx] (needinfo me if it's about an intermittent or backout)]

https://hg.mozilla.org/releases/mozilla-beta/rev/1218f89a7b61