Closed Bug 1424617 Opened 2 years ago Closed 2 years ago

Webextension badge is blurry in darktext themes

Categories

(Firefox :: Theme, defect)

defect
Not set

Tracking

()

RESOLVED FIXED
Firefox 59
Tracking Status
firefox57 --- wontfix
firefox58 --- fixed
firefox59 --- fixed

People

(Reporter: Oriol, Assigned: Oriol)

Details

Attachments

(2 files)

Attached image 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 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
Attachment #8936805 - Flags: review?(dao+bmo) → review-
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 on attachment 8936805 [details]
Bug 1424617 - Remove text-shadow in webextension badges.

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

Thanks!
Attachment #8936805 - Flags: review?(dao+bmo) → review+
Assignee: nobody → oriol-bugzilla
Status: NEW → ASSIGNED
OS: Unspecified → All
Hardware: Unspecified → All
Pushed by dgottwald@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/ff0c2391364e
Remove text-shadow in webextension badges. r=dao
(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.
https://hg.mozilla.org/mozilla-central/rev/ff0c2391364e
Status: ASSIGNED → RESOLVED
Closed: 2 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 59
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]: /
Attachment #8936805 - Flags: approval-mozilla-beta?
Comment on attachment 8936805 [details]
Bug 1424617 - Remove text-shadow in webextension badges.

Polish UI. Beta58+.
Attachment #8936805 - Flags: approval-mozilla-beta? → approval-mozilla-beta+
You need to log in before you can comment on or make changes to this bug.