1365275 - Location and search bars become transparent on hover with a lightweight theme installed

Status: VERIFIED FIXED

(Firefox :: Theme, defect, P1)

Description

[Ryan VanderMeulen [:RyanVM]]

I've only verified this on Win10 at this point, not sure if it's across all OSes or not.

STR:
* Install a LWT from AMO
* Hover the location bar

Expected results:
A similar box shadow effect as you get with the regular themes.

Actual results:
Location bar goes transparent and the LWT bleeds through, which can make text very difficult to read depending on the specific theme installed.

Comment 1

[Dale Harvey (:daleharvey)]

Will take a look at this

Comment 2

[Dale Harvey (:daleharvey)]

Attachment: 1365275-1.patch

Now this has its own bug will stop trying to sneak it in with other patches, in lwttheme the url bar is given a default transparent background, on hover / focus it them used this broken one and becomes opaque

Comment 3

[Dão Gottwald [:dao]]

Comment on attachment 8868440 [details] [diff] [review]
1365275-1.patch

For lightweight themes, we should actually use white on hover/focus, as -moz-field can be black or really any other color, which we don't want in this case.

Comment 4

[Dale Harvey (:daleharvey)]

Attachment: Fix typo in location bar background

This is white on hover+focus inside lightweight themes, semi transparent otherwise when inactive

Comment 5

[Dão Gottwald [:dao]]

Comment on attachment 8868535 [details] [diff] [review]
Fix typo in location bar background

>+#urlbar:-moz-lwtheme,
>+.searchbar-textbox:-moz-lwtheme {
>+  background-color: white;
>+}
>+
> #urlbar:-moz-lwtheme:not(:hover):not([focused="true"]),
> .searchbar-textbox:-moz-lwtheme:not(:hover):not([focused="true"]) {
>   background-color: hsla(0, 100%, 100%, .8);
> }

This is correct but feels a bit backwards. How about:

#urlbar:-moz-lwtheme,
.searchbar-textbox:-moz-lwtheme {
  background-color: hsla(0,0%,100%,.8);
}

#urlbar:-moz-lwtheme:hover,
#urlbar:-moz-lwtheme[focused="true"],
.searchbar-textbox:-moz-lwtheme:hover,
.searchbar-textbox:-moz-lwtheme[focused="true"] {
  background-color: white;
}

You should also set "color: black", since the system text color can be something else.

Comment 6

[Dale Harvey (:daleharvey)]

Yeh was wondering if I should switch those selectors around, will do

Comment 7

[Dale Harvey (:daleharvey)]

Attachment: Fix location and search bar background color

Gave it a test, works good

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/c9effeab30da
Fix location and search bar background color. r=dao

Comment 10

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

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

Comment 13

[Johann Hofmann [:johannh]]

Mozscreenshots confirms:

https://screenshots.mattn.ca/compare/?oldProject=mozilla-central&oldRev=b133ec74e3d0813c0951603209fa283ef0efd8b2&newProject=mozilla-central&newRev=2c783a7b6d05b4b2b417bc5f21b7e40cbf3df077

(Only for the searchbar until bug 1367089 is resolved, but I'm sure the urlbar is fine, too)

Comment 14

[Johann Hofmann [:johannh]]

Actually this was not testing for hover so back to RESOLVED.

Comment 15

[Brindusa Tot, Desktop QA]

Reproduced the bug on Nightly 55.0a1, build ID 20170516122050 on Windows 10 x64, with different themes for the browser.

Verified as fixed on latest Nightly 55.0a1, build ID 20170529030204 on Windows 10 x64, Mac 10.12 and Ubuntu 16.04.