1702474 - Search bar panel is missing shadow on light themes

Status: VERIFIED FIXED

(Firefox :: Search, defect, P2)

Description

[Petruta Horea [:phorea], Desktop QA]

Attachment: search bar panel.png

Note

• Mac OSX 10.14 is not affected

Affected versions

• Fx89.0a1 20210329214331

Affected platforms

• Windows 10 64-bit
• Ubuntu 20.04

Preconditions

• The following prefs are enabled in about:config:
  browser.proton.enabled
  browser.proton.toolbar.enabled
  browser.proton.urlbar.enabled

• System theme is light

Steps to reproduce

1. Launch Firefox and enable the search bar.
2. Observe the search bar panel on different websites

Expected result

• Search bar panel is consistent with Proton theme

Actual result

• Search bar panel misses shadow so it's hard to differentiate from page content
• On Ubuntu with default theme, the text from the panel is barely visible
• I would also suggest that for the search bar, the blue border is visible when the panel is opened, this seems a little unaligned with address bar for which the border is shown only when the panel is closed

Regression range

• This was introduced with bug 1695276

Comment 1

[Marco Bonardo [:mak]]

hm, actually there is a border of color --arrowpanel-border-color... but yes this is missing a dropshadow

Comment 2

[Marco Bonardo [:mak]]

This happens because when we set a border-radius, we lose the native dropshadow.

Comment 3

[Marco Bonardo [:mak]]

Neil, since you recently looked into bug 1700148, do we have any luck here for Windows and Linux to draw some dropshadow? The workaround would be to remove the border-radius, but it makes the panel a bit exotic compared to others.
I tried -moz-window-shadow: cliprounded; on #PopupSearchAutoComplete but it doesn't work here.

Comment 4

[Marco Bonardo [:mak]]

My central pull was too old and I didn't have the fix for bug 1700148 in. I see a dropshadow now, but it's square instead of rounded.

Comment 5

[Neil Deakin]

The change in 1700148 applied only to menus. To make it apply to panels as well the filter would need to be removed from SetThemeRegion and ClearThemeRegion. I don't see any reason to limit it anyway.

Comment 6

[Marco Bonardo [:mak]]

I assume by filter you mean the "mPopupType == ePopupTypeMenu" condition

Comment 7

[Marco Bonardo [:mak]]

I'll do some experiments with that code to see how it looks.

Comment 8

[Marco Bonardo [:mak]]

Attachment: Bug 1702474 - Search bar panel is missing shadow or border. r=harry,NeilDeakin

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/ae0f3f0e993a
Search bar panel is missing shadow or border. r=harry,NeilDeakin,desktop-theme-reviewers

Comment 10

[Atila Butkovits]

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

Comment 11

[Pablo]

Hi Marco, I checked this one on Windows10 64bit, MacOS 10.15 and Ubuntu 20 64bit using latest nightly 89.0a1 and this is what i found using the Light Theme:

Windows10: the shadow is missing on the left border only
Ubuntu: There is no shadow in any border and there is no border line also in all sides.
MacOs: It looks fine, it even has a shadow on the left border.

should i open another bug for this? each OS is looking different for light theme.

thanks

Comment 12

[Marco Bonardo [:mak]]

(In reply to Pablo from comment #11)

Hi Marco, I checked this one on Windows10 64bit, MacOS 10.15 and Ubuntu 20 64bit using latest nightly 89.0a1 and this is what i found using the Light Theme:

Windows10: the shadow is missing on the left border only

This is expected, the search bar shadow is drawn by the platform code, we have no control over it. The urlbar can do a custom shadow because the QuantumBar project rewrote it completely to use pure html boxes. The searchbar still uses XUL widgets (albeit converted to xhtml).

Ubuntu: There is no shadow in any border and there is no border line also in all sides.

I see both a shadow and a border on Ubuntu 20 Default, no border on Light (but the shadow is there for me), in either Light or Standard Appearance. Thus I cannot reproduce that. We should use the standard border on Linux Default, and the panel should not be rounded.

MacOs: It looks fine, it even has a shadow on the left border.

Yes, but it's again because macOS does that by itself, we have no control.

should i open another bug for this? each OS is looking different for light theme.

That's expected on Windows and Mac, please check again the Ubuntu problem since that sounds like a bug, but as I said I cannot reproduce.

Comment 13

[Pablo]

hi marco
This is how it looks like on my ubuntu20 default with latest nightly. new profile and i just enabled search bar and i have set the theme to "light" con customize toolbar. Im not sure why i dont see any border or shadow on the dropdown area. sould i open a new bug just in case for ubuntu only?

here are some HD screenshots i took

Comment 14

[Pablo]

Attachment: white.png

Comment 15

[Pablo]

Attachment: black1.png

Comment 16

[Marco Bonardo [:mak]]

I don't know, that's not what I see, please file a bug and we'll try to understand why together.

Comment 17

[Petruta Horea [:phorea], Desktop QA]

Closing as verified fixed in Firefox 89 beta 7.
I could reproduce the Ubuntu issue mentioned above on Firefox 89 beta 5, however it is fixed in latest Nightly 90.0a1 and Firefox 89 beta 7.