2019154 - Reorganize urlbar-searchbar.css and update the urlbar view box shadow for Nova

Status: VERIFIED FIXED

(Firefox :: Address Bar, task, P2)

Description

[Drew Willcoxon :adw]

Update the urlbar view border for Nova:

• Looks like a larger border radius than the current one
• A different shadow that's apparently purple-ish

It might make sense to do this as part of bug 2019156.

See Figma for details.

Comment 1

[Drew Willcoxon :adw]

Attachment: Bug 2019154 - Reorganize urlbar-searchbar.css and update the urlbar view box shadow for Nova.

This updates the shadow of the urlbar background for Nova. The spec says to use
a variable called --chrome-box-shadow, which doesn't exist yet. I asked @jules
about that, and they said the token for that variable will be created by the
productivity team. They suggested using our own variable in the meantime. I like
that idea because it means we can proceed without being blocked on other teams.
We can use that approach for the rest of our Nova work, for example in
bug 2019152 D297579 for the input border, whose token doesn't exist yet either
afaict.

I also added some variables to make it easier to support both Nova and Proton.

The shadow is based on the Nova Components library Figma, "Background panel"
component:

https://www.figma.com/design/PqfaOcMGbX5liEXTTUzeYX/Nova-Components--Experimental-?node-id=453-2662&m=dev

Comment 2

[agoloman]

Backed out for causing bc failures @browser_parsable_css.js.

• Backout link
• Push with failures
• Failure Log

Comment 3

[pstanciu]

https://hg.mozilla.org/mozilla-central/rev/22826f44e4f1

Comment 4

[Drew Willcoxon :adw]

Notes for QA

The only intended visible change is that in Nova the urlbar panel/popup/view should have a shadow that matches the Figma spec. It's pretty subtle though.

In addition, please check for any obvious regressions, both with and without Nova, since the patch also refactored some CSS used for both. I already found one regression, bug 2041501. If you're able, please test different combinations of the following:

• Nova enabled and disabled
• Built-in themes
• Third-party themes
• Increased contrast
• High-contrast themes

Comment 5

[Ardelean Oana, Desktop Test Engineering [:oardelean]]

Verified as fixed on Firefox Nightly 154.0a1 and Firefox 153.0b1-build1 on Windows 10, Ubuntu 22, macOS 13.

We also tested some scenarios with Nova enabled/disabled and multiple themes, both default and third-party provided, and High Contrast Mode. More in-depth testing will be performed during the feature testing rounds.