Closed Bug 1365275 Opened 5 years ago Closed 5 years ago

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


(Firefox :: Theme, defect, P1)




Firefox 55
55.6 - May 29
Tracking Status
firefox-esr52 --- unaffected
firefox53 --- unaffected
firefox54 --- unaffected
firefox55 --- verified


(Reporter: ryanvm, Assigned: daleharvey)



(Keywords: regression, Whiteboard: [photon-visual][p1])


(1 file, 2 obsolete files)

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

* 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)
Whiteboard: [photon-visual][p1]
Flags: qe-verify+
Priority: -- → P1
Attached patch 1365275-1.patch (obsolete) — Splinter Review
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 on attachment 8868440 [details] [diff] [review]

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-
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 on attachment 8868535 [details] [diff] [review]
Fix typo in location bar background

>+.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:

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

.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
Gave it a test, works good
Attachment #8868535 - Attachment is obsolete: true
Attachment #8868535 - Flags: review?(dao+bmo)
Attachment #8868541 - Flags: review?(dao+bmo)
Attachment #8868541 - Flags: review?(dao+bmo) → review+
Pushed by
Fix location and search bar background color. r=dao
Duplicate of this bug: 1365630
Closed: 5 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 55
Iteration: --- → 55.6 - May 29
QA Contact: brindusa.tot
Duplicate of this bug: 1365789
Duplicate of this bug: 1366036
Blocks: 1366276
No longer blocks: 1366276
Depends on: 1366276
No longer depends on: 1366276
Actually this was not testing for hover so back to RESOLVED.
Closed: 5 years ago5 years 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.
Flags: qe-verify+
You need to log in before you can comment on or make changes to this bug.