Use moz-button-group for panel buttons

Merge Info

Related Issues

• #42641 (closed)

Backporting

Timeline

• Immediate: patchset needed as soon as possible
• Next Minor Stable Release: patchset that needs to be verified in nightly before backport
• Eventually: patchset that needs to be verified in alpha before backport
• No Backport (preferred): patchset for the next major stable

(Optional) Justification

• Emergency security update: patchset fixes CVEs, 0-days, etc
• Censorship event: patchset enables censorship circumvention
• Critical bug-fix: patchset fixes a bug in core-functionality
• Consistency: patchset which would make development easier if it were in both the alpha and release branches; developer tools, build system changes, etc
• Sponsor required: patchset required for sponsor
• Localization: typos and other localization changes that should be also in the release branch
• Other: please explain

Merging

• Merge to tor-browser - !fixups to tor-browser-specific commits, new features, security backports
• Merge to base-browser - !fixups to base-browser-specific commits, new features to be shared with mullvad-browser, and security backports
  • NOTE: if your changeset includes patches to both base-browser and tor-browser please clearly label in the change description which commits should be cherry-picked to base-browser after merging

Issue Tracking

• Link resolved issues with appropriate Release Prep issue for changelog generation

Review

Request Reviewer

• Request review from an applications developer depending on modified system:
  • NOTE: if the MR modifies multiple areas, please /cc all the relevant reviewers (since gitlab only allows 1 reviewer)
  • accessibility : henry
  • android : clairehurst, dan
  • build system : boklm
  • extensions : ma1
  • firefox internals (XUL/JS/XPCOM) : jwilde, ma1
  • fonts : pierov
  • frontend (implementation) : henry
  • frontend (review) : donuts, richard
  • localization : henry, pierov
  • macOS : clairehurst, dan
  • nightly builds : boklm
  • rebases/release-prep : dan, ma1, pierov, richard
  • security : jwilde, ma1
  • signing : boklm, richard
  • updater : pierov
  • windows : jwilde, richard
  • misc/other : pierov, richard

Change Description

"fixup! Bug 40925: Implemented the Security Level component" commit should also be cherry-picked to the base-browser branch.

We use the moz-button-group element for panel buttons and add the footer-button class.

Also, whilst I was testing this I noticed that the "Learn more" link did not have any block-end padding, so its focus outline was cut off by the button group when it was near the bottom (for custom security level). Plus it spanned the full width. So I tweaked the spacing for this element. I also switched from em to px units for the vertical spacing, which is more in line with what other panels do.

How Tested

Download a file and open the downloads panel. The "Got it" button in the warning should have the correct styling.

Open the security level panel, with and without custom security level. Should have the correct styling. When it is custom the "Restore Default" button should be default, otherwise "Settings..." button is default.