Bugzilla

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
* mitigate 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](https://searchfox.org/mozilla-central/rev/6b91b922725838e2732aeb478b13e5b33e33ce1b/browser/components/aboutlogins/content/components/login-command-button.mjs#41-44),  [2](https://searchfox.org/mozilla-central/source/browser/components/firefoxview/view-syncedtabs.css#5), [3](https://searchfox.org/mozilla-central/rev/6b91b922725838e2732aeb478b13e5b33e33ce1b/browser/components/firefoxview/fxview-tab-list.mjs#456-459), [4](https://searchfox.org/mozilla-central/rev/b0d28aecd58cbd2db00974db2ef8456856169fb4/browser/components/shopping/content/settings.css#5), [6](https://searchfox.org/mozilla-central/rev/b0d28aecd58cbd2db00974db2ef8456856169fb4/browser/components/shopping/content/shopping-card.css#5), [7](https://searchfox.org/mozilla-central/rev/b0d28aecd58cbd2db00974db2ef8456856169fb4/browser/components/shopping/content/shopping-message-bar.css#5)). 

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](https://searchfox.org/mozilla-central/rev/b0d28aecd58cbd2db00974db2ef8456856169fb4/toolkit/content/widgets/message-bar.js#36-38) has led to us loading those styles in the chrome as `message-bar` is used in [notificationbox.js](https://searchfox.org/mozilla-central/rev/b0d28aecd58cbd2db00974db2ef8456856169fb4/toolkit/content/widgets/notificationbox.js#613). 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.

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](https://searchfox.org/mozilla-central/rev/6b91b922725838e2732aeb478b13e5b33e33ce1b/browser/components/aboutlogins/content/components/login-command-button.mjs#41-44),  [2](https://searchfox.org/mozilla-central/source/browser/components/firefoxview/view-syncedtabs.css#5), [3](https://searchfox.org/mozilla-central/rev/6b91b922725838e2732aeb478b13e5b33e33ce1b/browser/components/firefoxview/fxview-tab-list.mjs#456-459), [4](https://searchfox.org/mozilla-central/rev/b0d28aecd58cbd2db00974db2ef8456856169fb4/browser/components/shopping/content/settings.css#5), [6](https://searchfox.org/mozilla-central/rev/b0d28aecd58cbd2db00974db2ef8456856169fb4/browser/components/shopping/content/shopping-card.css#5), [7](https://searchfox.org/mozilla-central/rev/b0d28aecd58cbd2db00974db2ef8456856169fb4/browser/components/shopping/content/shopping-message-bar.css#5)). 

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](https://searchfox.org/mozilla-central/rev/b0d28aecd58cbd2db00974db2ef8456856169fb4/toolkit/content/widgets/message-bar.js#36-38) has led to us loading those styles in the chrome as `message-bar` is used in [notificationbox.js](https://searchfox.org/mozilla-central/rev/b0d28aecd58cbd2db00974db2ef8456856169fb4/toolkit/content/widgets/notificationbox.js#613). 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.