1908692 - moz-button hover/active states have no visual effect in chrome

Status: VERIFIED FIXED

(Toolkit :: UI Widgets, defect, P2)

Description

[Jonathan Sudiaman [:jsudiaman]]

This is reproducible in the revamped sidebar on Nightly.

Steps to Reproduce

1. Enable the sidebar.revamp pref and restart Firefox if necessary.
2. Open any of the sidebar "tools," e.g., Tabs from other devices, History, Customize sidebar.
3. Hover over the close button on the sidebar panel (which uses a <moz-button>).
4. Click and hold the button.

Expected Result
Hover and active states are shown respectively.

Actual Result
No visual effect is shown. (Works fine in-content, though.)

Comment 1

[Mark Striemer [:mstriemer]]

This is due to bug 1835869. Fixing that should fix this, I've added some comments there for what I think the ideal solution is.

Since the sidebar is using platform colours, these tokens are currently expecting that they will defer to --button-bgcolor and friends which get set in browser-custom-colors.css (and somewhere else for Linux, browser.css?). A temporary fix could be to duplicate the brand value as a fallback for when that variable isn't defined

   "button": {
     "background": {
       "color": {
         "@base": {
           "comment": "TODO Bug 1821203 - Gray use needs to be consolidated",
           "value": {
             "forcedColors": "ButtonFace",
             "brand": {
               "default": "color-mix(in srgb, currentColor 7%, transparent)"
             },
             "platform": {
-              "default": "var(--button-bgcolor)"
+              "default": "var(--button-bgcolor, color-mix(in srgb, currentColor 7%, transparent))"
             }
           }
         },

Comment 2

[Sarah Clements [:sclements]]

I'm only seeing this issue in Nightly for system theme (on mac), and applying a fallback in the design-tokens.json file doesn't fix this.

"hover": {
          "value": {
            "forcedColors": "SelectedItemText",
            "brand": {
              "default": "color-mix(in srgb, currentColor 14%, transparent)"
            },
            "platform": {
              "default": "var(--button-hover-bgcolor, color-mix(in srgb, currentColor 7%, transparent))"
            }
          }
        },
        "active": {
          "value": {
            "forcedColors": "SelectedItemText",
            "brand": {
              "default": "color-mix(in srgb, currentColor 21%, transparent)"
            },
            "platform": {
              "default": "var(--button-active-bgcolor, color-mix(in srgb, currentColor 7%, transparent))"
            }
          }

Am I missing something Mark?

Comment 3

[Mark Striemer [:mstriemer]]

Attachment: Bug 1908692 - Provide a chrome fallback when --button-*-bgcolor vars aren't set r?#sidebar-reviewers,#recomp-reviewers

This should fix the close buttons in the sidebar panes when using the
system theme in light mode.

Ideally the theming code would update the design tokens when it makes
sense based on the theme, rather than having the tokens depend on the
these CSS vars. That is tracked in bug 1835869.

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/e85f5925b4e3
Provide a chrome fallback when --button-*-bgcolor vars aren't set r=sidebar-reviewers,reusable-components-reviewers,desktop-theme-reviewers,dao,nsharpley,hjones

Comment 5

[Norisz Fay [:noriszfay]]

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

Comment 6

[Sarah Clements [:sclements]]

Thanks Mark!

Comment 7

[Mark Striemer [:mstriemer]]

That JSON update looks correct, you may have needed to run ./mach buildtokens to get it to update the .css files?

Comment 8

[Bianca Hidecuti, Desktop Test Engineering [:bhidecuti]]

I was able to reproduce the issue on an affected Nightly 131.0a1 build from 2024-08-20, using Windows 11 and System theme/Firefox Alpenglow theme set in about:addons, while following the steps from Comment 0.
Verified as fixed on Firefox 132.0b5, using macOS 14.7, Windows 11 and Ubuntu 22.04. The buttons have a hover/active visual effect.