Closed Bug 1586054 Opened 5 years ago Closed 5 years ago

Address bar results have transparent background with certain webextension themes

Categories

(Firefox :: Address Bar, defect, P2)

defect
Points:
2

Tracking

()

RESOLVED FIXED
Firefox 72
Iteration:
72.1 - Oct 21 - Nov 3
Tracking Status
firefox72 --- fixed

People

(Reporter: mconca, Assigned: dao)

References

Details

Attachments

(2 files)

Attached image transparent_urlbar.png (deleted) —

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.

Do you have a userchrome.css?

Flags: needinfo?(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
Flags: needinfo?(mconca)

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

Priority: -- → P2
Summary: Address bar drops down with transparent background, centered text → Address bar results have transparent background with certain webextension themes

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.

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.

(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.

Flags: needinfo?(cneiman)
Flags: needinfo?(cneiman)

Handing this over to Philipp.

Flags: needinfo?(philipp)

(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.

Flags: needinfo?(philipp) → needinfo?(dao+bmo)

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

Flags: needinfo?(dao+bmo)

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.

(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.

Flags: needinfo?(philipp)

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.

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.

Flags: needinfo?(philipp)

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.

Flags: needinfo?(cneiman)

(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.

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.

(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?

Flags: needinfo?(cneiman) → needinfo?(awagner)
Flags: needinfo?(awagner) → needinfo?(philipp)
Assignee: nobody → dao+bmo
Status: NEW → ASSIGNED
Iteration: --- → 72.1 - Oct 21 - Nov 3
Points: --- → 2
Pushed by dgottwald@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/853135d7dade Ensure at least 70% opacity for toolbar_field_focus. r=mikedeboer
Flags: needinfo?(philipp)
Depends on: 1590759
Status: ASSIGNED → RESOLVED
Closed: 5 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 72
Blocks: 1601664
Blocks: 1628601
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: