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

VERIFIED FIXED in Firefox 55

Status

()

Firefox
Theme
P1
normal
VERIFIED FIXED
9 months ago
9 months ago

People

(Reporter: RyanVM, Assigned: daleharvey)

Tracking

({regression})

Trunk
Firefox 55
regression
Points:
---

Firefox Tracking Flags

(firefox-esr52 unaffected, firefox53 unaffected, firefox54 unaffected, firefox55 verified)

Details

(Whiteboard: [photon-visual][p1])

Attachments

(1 attachment, 2 obsolete attachments)

(Reporter)

Description

9 months ago
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.
Flags: needinfo?(dale)
Will take a look at this
Assignee: nobody → dale
Flags: needinfo?(dale)

Updated

9 months ago
Whiteboard: [photon-visual][p1]

Updated

9 months ago
Flags: qe-verify+
Priority: -- → P1
Created attachment 8868440 [details] [diff] [review]
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
Attachment #8868440 - Flags: review?(dao+bmo)

Comment 3

9 months ago
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.
Attachment #8868440 - Flags: review?(dao+bmo) → review-
Created attachment 8868535 [details] [diff] [review]
Fix typo in location bar background

This is white on hover+focus inside lightweight themes, semi transparent otherwise when inactive
Attachment #8868440 - Attachment is obsolete: true
Attachment #8868535 - Flags: review?(dao+bmo)

Comment 5

9 months ago
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.
Yeh was wondering if I should switch those selectors around, will do
Created attachment 8868541 [details] [diff] [review]
Fix location and search bar background color

Gave it a test, works good
Attachment #8868535 - Attachment is obsolete: true
Attachment #8868535 - Flags: review?(dao+bmo)
Attachment #8868541 - Flags: review?(dao+bmo)

Updated

9 months ago
Attachment #8868541 - Flags: review?(dao+bmo) → review+

Comment 8

9 months ago
Pushed by dharvey@mozilla.com:
https://hg.mozilla.org/integration/mozilla-inbound/rev/c9effeab30da
Fix location and search bar background color. r=dao

Updated

9 months ago
Duplicate of this bug: 1365630

Comment 10

9 months ago
bugherder
https://hg.mozilla.org/mozilla-central/rev/c9effeab30da
Status: NEW → RESOLVED
Last Resolved: 9 months ago
status-firefox55: affected → fixed
Resolution: --- → FIXED
Target Milestone: --- → Firefox 55

Updated

9 months ago
Iteration: --- → 55.6 - May 29
QA Contact: brindusa.tot

Updated

9 months ago
Duplicate of this bug: 1365789

Updated

9 months ago
Duplicate of this bug: 1366036

Updated

9 months ago
Blocks: 1366276

Updated

9 months ago
No longer blocks: 1366276
Depends on: 1366276

Updated

9 months ago
No longer depends on: 1366276
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)
Status: RESOLVED → VERIFIED
Actually this was not testing for hover so back to RESOLVED.
Status: VERIFIED → RESOLVED
Last Resolved: 9 months ago9 months ago
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.
Status: RESOLVED → VERIFIED
status-firefox55: fixed → verified

Updated

9 months ago
Flags: qe-verify+
You need to log in before you can comment on or make changes to this bug.