1586054 - Address bar results have transparent background with certain webextension themes

Status: RESOLVED FIXED

(Firefox :: Address Bar, defect, P2)

Description

[Mike Conca [:mconca]]

Attachment: transparent_urlbar.png

Starting with Nightly on 03-Oct, typing in the address bar drops it down with a transparent background and the search suggestions centered. The underlying tab content is visible through the drop-down list. See attached image.

STR:

1. Pick a tab, any tab
2. Click the address bar
3. Start typing

System is Windows 10.

Comment 1

[Marco Bonardo [:mak] (Away Apr 25 - May 5)]

Do you have a userchrome.css?

Comment 2

[Mike Conca [:mconca]]

I do not have a userchrome.css file. However, I've narrowed it down and can verify it only happens when I have a theme installed.

STR

1. Create a new profile
2. Install this theme from AMO (probably happens with others, too)
3. Click inside the address bar
4. Start typing

Comment 3

[Takanori MATSUURA]

With "Fall Foggy Forest by MaDonna" theme from AMO, I face the same problem.

Comment 4

[Errolyn]

I am having the same issue, but with the Firefox Color add-on enabled.

Disabling the megabar ( browser.urlbar.megabar = false in about:config ) returns normal opacity and readability to the address bar.

Comment 5

[Caitlin Neiman [:caitmuenster]]

Is the mega bar using the lightweight theme value for the URL bar? We're currently letting theme designers set that value as transparent. We might need to break out the dropdown menu from the URL bar to a) prevent the drop down options from becoming transparent and b) allowing theme designers to style it.

Comment 6

[Dão Gottwald [:dao]]

(In reply to Caitlin Neiman [:caitmuenster] from comment #5)

Is the mega bar using the lightweight theme value for the URL bar?

Yes.

We're currently letting theme designers set that value as transparent.

Can we stop doing that?

We might need to break out the dropdown menu from the URL bar to a) prevent the drop down options from becoming transparent and b) allowing theme designers to style it.

We don't want that. The dropdown is supposed to visually integrate with the textbox.

Comment 7

[Caitlin Neiman [:caitmuenster]]

Handing this over to Philipp.

Comment 8

[Philipp Kewisch [:Fallen] [:📆][:🧩]]

(In reply to Dão Gottwald [::dao] from comment #6)

We're currently letting theme designers set that value as transparent.

Can we stop doing that?

I believe this would take away the possibility to have the background shine through. I'm thinking if it would make more sense to force a non-transparent background in the dropdown instead, is this something you could do? Stopping theme developers from doing that would need time to adjust and communications to affected developers.

Comment 9

[Dão Gottwald [:dao]]

The results list isn't a separate popup anymore, it's part of urlbar and thus just uses its background. We could technically set a separate background on the list, but this would kind of defeat the megabar design...

Comment 10

[Philipp Kewisch [:Fallen] [:📆][:🧩]]

What I'd like to see is that we use one color for the url bar, taken from the theming value. In case this color is transparent, the url has a split background where the part on top of the url bar is transparent and the remaning area is forced to an opaque color, likely whatever color the popup had before the megabar redesign.

If that is technically feasible then I think we should go this route instead of disallowing transparent backgrounds. While it may defeat the purpose of the megabar being a big popup, I think we should leave theme developers this freedom. We can add recommendations to our documentation on using transparent values.

The use case for having a transparent background is valid, and I'd like avoid the comms and deprecation cycle necessary for this sort of change.

Comment 11

[Dão Gottwald [:dao]]

(In reply to Philipp Kewisch [:Fallen] [:📆] from comment #10)

What I'd like to see is that we use one color for the url bar, taken from the theming value. In case this color is transparent, the url has a split background where the part on top of the url bar is transparent and the remaning area is forced to an opaque color, likely whatever color the popup had before the megabar redesign.

Even without any results displayed, the focused megabar overlaps the bottom of the tabs and the top of the content area. This looks pretty broken with a completely transparent background.

Comment 12

[Mike de Boer [:mikedeboer]]

Philipp, are you saying that you'd be prefer to keep the transparency in all urlbar states? I could agree with keeping support for transparency in the unfocused state, but once the user interacts with it so that it's focused (and with the megabar pref on it animates and grows) it's fair game and we take over.
Usability trumps customizability, which is one of the principles which made us decide to delay shipping to Fx 72.

Comment 13

[Philipp Kewisch [:Fallen] [:📆][:🧩]]

My suggestion was actually a bit more complicated and involved having a fake background in Firefox that covers the area that goes outside of the toolbar area.

For a simpler solution, looking at the theme color values, what about using toolbar_field for the unfocused state (which can be transparent), and use popup for the focused state, for the whole toolbar. I don't think the popup value can be transparent.

Comment 14

[Philipp Kewisch [:Fallen] [:📆][:🧩]]

I could also imagine using toolbar_field_focus for the focused state, hoping that isn't allowed to be transparent. Caitlin, do you know which colors are allowed to be transparent? I didn't find this anywhere in our documentation.

Comment 15

[Dão Gottwald [:dao]]

(In reply to Philipp Kewisch [:Fallen] [:📆] from comment #13)

For a simpler solution, looking at the theme color values, what about using toolbar_field for the unfocused state (which can be transparent), and use popup for the focused state, for the whole toolbar.

We could do that, except that ideally the address bar shouldn't drastically change colors when focusing it which I guess it will do with many themes if we repurpose popup like that.

I don't think the popup value can be transparent.

I believe it can actually. I don't see us dropping the alpha channel in LightweightThemeConsumer.jsm.

(In reply to Philipp Kewisch [:Fallen] [:📆] from comment #14)

I could also imagine using toolbar_field_focus for the focused state, hoping that isn't allowed to be transparent.

That's what we're already using.

Comment 16

[Mike de Boer [:mikedeboer]]

So I'd be interested to learn how many addons use transparent color values for toolbar_field_focus and which value (between 0 and 1) they use.
We could also consider to implement a graceful degradation towards only allowing transparency values between 0 and 0.5 - informed by the information we can get from existing addons.

Comment 17

[Caitlin Neiman [:caitmuenster]]

(In reply to Mike de Boer [:mikedeboer] from comment #16)

So I'd be interested to learn how many addons use transparent color values for toolbar_field_focus and which value (between 0 and 1) they use.
We could also consider to implement a graceful degradation towards only allowing transparency values between 0 and 0.5 - informed by the information we can get from existing addons.

Hey Mike, would you be able to provide a regexp for this?

Comment 18

[Dão Gottwald [:dao]]

Attachment: Bug 1586054 - Ensure at least 70% opacity for toolbar_field_focus. r=mikedeboer

Comment 19

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/853135d7dade
Ensure at least 70% opacity for toolbar_field_focus. r=mikedeboer

Comment 20

[Andreea Pavel [:apavel]]

https://hg.mozilla.org/mozilla-central/rev/853135d7dade