1855803 - (moz-button) [meta] moz-button Reusable Component

Status: NEW

(Toolkit :: UI Widgets, enhancement)

Description

[Hanna Jones [:hjones]]

We have many different button variants in use throughout Firefox (primary buttons, ghost icon buttons, split buttons, toolbarbuttons, etc.). It seems worth trying to consolidate these different buttons into a single reusable HTMLElement. Doing so could allow us to:

• replace instances of and deprecate the XUL button: https://searchfox.org/mozilla-central/source/toolkit/content/widgets/button.js
• replace instances of and deprecate the XUL toolbarbutton: https://searchfox.org/mozilla-central/source/toolkit/content/widgets/toolbarbutton.js
• minimize the number of places where we are loading in-content/common.css into a web component's shadow DOM in order to get our default button styles (some examples: 1, 2, 3, 4, 6, 7).

That third point shouldn't be a performance concern, but it will prevent us from making these elements reusable since we don't want to load in-content styles in the chrome. This has happened before - relying on in-content/common.css for button styles in the message-bar component has led to us loading those styles in the chrome as message-bar is used in notificationbox.js. It also seems like overkill to add ~1500 lines of CSS just to get button styles when we're otherwise trying to lean into the benefits of using the shadow DOM to keep our styles lean/encapsulated.