Missing `:empty` pseudo-element state on extension icon's badge

[hoangnhan2ka3]

Captchas

• I have read the instructions.
• I have searched existing issues and avoided creating duplicates.
• I am not filing an enhancement request.
• I have checked that this issue cannot be reproduced on Mozilla Firefox.
• I have checked that this issue can be reproduced once I removed all my Mods and Custom CSS.

What happened?

On normal Firefox, extension icon's badges have a display: none property on empty toolbarbutton-badge:

However, on Zen, the :empty pseudo-element seems to be not valid:

And it cannot be overwritten, even with !important.

That leaves a 4x1px badge (a little bar in the top corner of the extension icon) even though it has no content. I'm talking about the 1st, 2nd, and 5th icons:

Version

1.12b

What platform are you seeing the problem on?

Windows - x64

What component is this issue related to?

Extensions

Relevant log output if applicable

[hoangnhan2ka3]

It seems like the html|label.toolbarbutton-badge:empty rule is not valid in Zen (?) but Firefox:

Custom userChrome that doesn't work:

toolbar[mode="icons"] .toolbarbutton-text,
toolbar[mode="text"] .toolbarbutton-icon,
html|label.toolbarbutton-badge:empty {
  display: none !important;
}

Custom userChrome that works:

toolbar[mode="icons"] .toolbarbutton-text,
toolbar[mode="text"] .toolbarbutton-icon,
label.toolbarbutton-badge:empty {
  display: none !important;
}

(Separate html|label to label.toolbarbutton-badge:empty only)

Update:

The toolbar[mode="icons"] .toolbarbutton-text selector also affects the New Tab button that hides the New Tab text:

Before style applied:

After:

So my userChrome to temporary fix the issue is:

label.toolbarbutton-badge:empty {
  display: none !important;
}

[dosubot]

Hi, @hoangnhan2ka3. I'm Dosu, and I'm helping the desktop team manage their backlog. I'm marking this issue as stale.

Issue Summary:

• The :empty pseudo-element was not functioning correctly on extension icon badges in Zen.
• You provided a workaround using userChrome CSS with the selector label.toolbarbutton-badge:empty.
• The workaround successfully hides empty badges, resolving the issue.
• The toolbar[mode="icons"] .toolbarbutton-text selector affected the "New Tab" button text visibility.

Next Steps:

• Please confirm if this issue is still relevant to the latest version of the desktop repository by commenting here.
• If no further updates are provided, the issue will be automatically closed in 7 days.

Thank you for your understanding and contribution!