2032049 - Extension button is partially cropped off with Nova design tokens CSS rules enabled

Status: RESOLVED FIXED

(WebExtensions :: Frontend, defect)

Description

[Luca Greco [:rpl] [:luca] [:lgreco]]

Attachment: extensions-button-cropped-with-nova-toggled-on.png

With browser.nova.enabled set to true (or browser.design-tokens.nova set to true in older nightly versions), the extensions button icon seems to be cropped off.

Based on a quick look into the CSS rules tied to the nova pref, it seems to be a side effect on the --badge-border-radius variable being overridden with --border-radius-circle (corresponding to 9999px) here in moz-badge.tokens.css from the current --border-radius-small (corresponding to 4px) (which is instead set here in the same moz-badge.tokens.css), and inherited by the toolbar button and the toolbar button icon inside through https://searchfox.org/firefox-main/rev/23974e2d947e31e4ae42ae2758a4416c9a6d8671/browser/themes/shared/toolbarbuttons.css#145.

This bugzilla issue is tracking looking into that and determine what should be tweaked to make sure the extensions button icon isn't cropped when Nova design tokens rules are enabled.

As a side note, along with looking into the issue with the extensions button icon specifically, we should also assess if there will be a similar impact on some extension toolbar button icons (the uBlock icon doesn't seem to be impacted, but it would be worth double-check that it is not just because the shape of the icon doesn't make it visible and so for other extension icons to be potentially impacted instead).

Comment 1

[Luca Greco [:rpl] [:luca] [:lgreco]]

Hi Mark,
I was wondering this issue may have been already noticed and a bug already filed to track it (in which case this may be closed as a duplicate) and if there are additional thoughts about what kind of changes should be applied to avoid the issue described in comment 0.

If the plan is to change the icon to better fit into rounded toolbar icon buttons, then we may want to spun off as a separate bugzilla issue looking into what kind of impact the extensions browserAction buttons may be hitting and how to prevent the custom icons provided by the extensions from being cut off by the circle radius.

Comment 2

[Stephen Thompson [:sthompson]]

This is caused by bug 2031023 and I am working on a fix. This is affecting many toolbar button icons, not just extensions.

Comment 3

[Stephen Thompson [:sthompson]]

Fix from bug 2031023 landed in Nightly today. I can confirm that toolbar button icons no longer get clipped with browser.nova.enabled.