First, the toolbars are affected by userChrome.css and not by userContent.css.

Second, here is my thinking on namespaces: https://www.userchrome.org/adding-style-recipes-userchrome-css.html#namespaces

Third, to explore the bits and pieces of a toolbar button, you should dive into the Browser Toolbox, it's like the developer tools' Inspector for the user interface:

https://developer.mozilla.org/docs/Tools/Browser_Toolbox

For NoScript, for example, you have:

<toolbarbutton id="_73a6fe31-595d-460b-a920-fcc0f8843232_-browser-action" widget-id="_73a6fe31-595d-460b-a920-fcc0f8843232_-browser-action" widget-type="view" removable="true" overflows="true" label="NoScript 10.2.0 Blocked 1 of 3 items. <script>: 1/3" tooltiptext="NoScript 10.2.0 Blocked 1 of 3 items. <script>: 1/3" class="toolbarbutton-1 chromeclass-toolbar-additional badged-button webextension-browser-action" constrain-size="true" data-extensionid="{73a6fe31-595d-460b-a920-fcc0f8843232}" badgeStyle="..." style="... --webextension-toolbar-image: url("moz-extension://uuid/img/ui-part64.png"); ..." cui-areatype="toolbar" badge="1"/>

Where you see ... I omitted some stuff. (You'll see I changed the actual UUID to uuid and that's because it's generated by Firefox when you install the extension and will be different for each user. I think for your purposes you don't care since you will override that property-value pair.)

So as a selector for the button you could use the extension ID for NoScript:

toolbarbutton[id*="73a6fe31-595d-460b-a920-fcc0f8843232"]

The *= allows for a match anywhere within the value of the attribute. You can confirm it works by creating a new style sheet in the Browser Toolbox's Style Editor (click the plus) and pasting this:

/* Selector test: blue background for NoScript button */
toolbarbutton[id*="73a6fe31-595d-460b-a920-fcc0f8843232"]{
  background: #00f !important;
}

Within moments, the background of the button should turn blue.

Success?

Okay, next. Firefox assigns a large number of image properties that filter down to the .toolbarbutton-icon in some manner. Presumably this provides something nice to show when you switch themes or have a high density display (e.g., Retina on Mac). The toolbar ones look most applicable:

--webextension-menupanel-image: url(); --webextension-menupanel-image-light: url(); --webextension-menupanel-image-dark: url(); --webextension-menupanel-image-2x: url(); --webextension-menupanel-image-2x-light: url(); --webextension-menupanel-image-2x-dark: url();

--webextension-toolbar-image: url(); --webextension-toolbar-image-light: url(); --webextension-toolbar-image-dark: url(); --webextension-toolbar-image-2x: url(); --webextension-toolbar-image-2x-light: url(); --webextension-toolbar-image-2x-dark: url();

Well, should we care? After all, our override will be !important, so let's ignore that complexity for the moment and just try sticking a different image in. This is the icon of the bookmarks menu button, which on my toolbar is NoScript's neighbor:

/* Replace NoScript toolbar icon */
toolbarbutton[id*="73a6fe31-595d-460b-a920-fcc0f8843232"] .toolbarbutton-icon {
  list-style-image: url(chrome://browser/skin/bookmark-star-on-tray.svg) !important;
}

Boom, there it is!

You're in the neighborhood. I think you can take it from here.

I forgot to mention that Firefox lists extension IDs in two places:

(1) Troubleshooting Information page

In the Extensions table.

(2) about:debugging page

Here you can find both the public extension ID and your unique local ID which is used in some contexts.

I thank you for the detailed reply. Make this a sticky. Yes, I mentioned the Browser Toolbox. I'm not a professional coder or web designer, but I've been modifying themes & apps' UIs in depth for years. From the browser toolbox (CSS & DOM info) I don't see how to come up w/ exact syntax you listed, unless you've worked on this part of browser UI many times.

As noted, how did you come up with the exact syntax:

toolbarbutton[id*="73a6fe31-595d-460b-a920-fcc0f8843232"] .toolbarbutton-icon {
list-style-image: url(chrome://browser/skin/bookmark-star-on-tray.svg) !important;

} Because (for one thing) all I see in the CSS that mentions "list-style-image" (which I knew / thought was needed) is: .webextension-browser-action {

   list-style-image: var(--webextension-toolbar-image, inherit);

} Obviously, you saw? or learned somewhere, that: toolbarbutton[id*="73a6...] should be used, and not ".webextension-browser-action." I can't find it.

Filtering in the HTML or CSS rules sections or in "show DOM properties, I couldn't find .toolbarbutton-icon at all, or anything indicating it should be used after the extension's ID. Where did you come up with the .toolbarbutton-icon?

If you know CSS code for this part of the toolbar like the back of your hand, that's the answer. If you saw enough of the syntax in the browser toolbox so it was obvious what went together, would you mind explaining how & where?

Hi Joebt, you got me started with the example rule, which had an id selector for a different extension followed by .toolbarbutton-icon. Here's how I updated that:

(1) Selector

When I inspected some extension buttons, the id had extra text. I wasn't sure how reliably consistent that part is, so instead of using this for NoScript:

#_73a6fe31-595d-460b-a920-fcc0f8843232_-browser-action .toolbarbutton-icon {}

it seemed safer to use the partial match method with just the extension ID:

toolbarbutton[id*="73a6fe31-595d-460b-a920-fcc0f8843232"] .toolbarbutton-icon {}

But you could use the first syntax if you like.

(2) Rule

Regarding the way button images are now drawn with list-style-image, I've seen that before, but I didn't remember that until I saw it. When I inspected the .toolbarbutton-icon element under the NoScript button, I switched the panel on the right side of the inspector to "Computed" and scanned down the list for where the image URL was specified. (Screenshot attached for reference.) That's usually the rule you need to override.

Also, I mentioned some other rules that distracted me for a while. There were some wrong turns in the journey...

OK - thanks, now we're getting somewhere, but... I'm a little puzzled. This is a little like in Microsoft's distant past, if you wanted to find / delete secret index.dat files that held all browsing history, the ONLY way you could get to them was by already knowing the exact path. :)

in browser toolbox, under the addon's toolbar icon section (computed), if I expand the arrow beside "list-style-image", the line is displayed: .webextension-browser-action var(--webextension-toolbar-image, inherit)

The list-style-image with a url after it is semi-apparent (they are widely spaced under "computed": list-style-image........... ("moz-extension://6c5a...)

url("moz-extension://6c5a7537-8b12-4b8a-b55e-c7c80167684d/icons/icon48.png");

Why / how did you know not to use the code: .webextension-browser-action ? And instead of the last bit : var(--webextension-toolbar-image, inherit) you'd obviously have to enter the path to the replacement icon. In other words, AFAICT, there's nothing in the browser toolbox to get very close to the needed syntax - wording, spacing, punctuation, etc.

The expanded line under "computed" shows "browser.css:315" If you open that, it has: .webextension-browser-action > .toolbarbutton-badge-stack > .toolbarbutton-icon {

 height: 16px;
 width: 16px;

} Then several lines of (varying): .webextension-browser-action {

   list-style-image: var(--webextension-toolbar-image, inherit);
 }

Again, I'd have concluded that the code to use was : .webextension-browser-action, then the "list-style-image"... & the "var(--webextension..." would need replacing w/ "url(/path-to-replacement-icon);"

It's right there bigger'n Texas. How did you know not to use that? Or was there trial & error?

If I blindly scroll way down from the line 315 in browser.css, I see: toolbarbutton.webextension-menuitem > .toolbarbutton-icon {

 width: 16px;
 height: 16px;

} Now, it shows the "toolbarbutton" part you used, and ".toobarbutton-icon" - that we put after the addon ID, but apparently the ".webextension-menuitem> " isn't needed for what we wanted?

I could've played "pick & replace properties & values" all night long before hitting on what you did. It's not that I've never seen these before - some separately, but I've never seen them in the proper syntax to replace an addon's toolbar icon.

And I don't see anything all that close to what you ended up with in the browser toolbox (or computed or the file w/ the rule, browser.css).  Seems to me that DOMi & a companion addon used to give more useful info?

Has Mozilla updated DOMi for Quantum & any of the companion addons for it, to make inspecting easier than DOMi alone?

Hi Joebt, Browser Toolbox is the new DOM Inspector for chrome now that legacy extensions do not work.

I did not test without .toolbarbutton-icon, i.e., I did not test this:

/* Replace NoScript toolbar icon */
toolbarbutton[id*="73a6fe31-595d-460b-a920-fcc0f8843232"] {
  list-style-image: url(chrome://browser/skin/bookmark-star-on-tray.svg) !important;
}

However, that seems to work, too. I guess there is more than one way to override the icon.

Joebt said

in browser toolbox, under the addon's toolbar icon section (computed), if I expand the arrow beside "list-style-image", the line is displayed:

.webextension-browser-action var(--webextension-toolbar-image, inherit)

The list-style-image with a url after it is semi-apparent (they are widely spaced under "computed":

list-style-image........... ("moz-extension://6c5a...) url("moz-extension://6c5a7537-8b12-4b8a-b55e-c7c80167684d/icons/icon48.png");

Why / how did you know not to use the code:

.webextension-browser-action ?

And instead of the last bit : var(--webextension-toolbar-image, inherit)

you'd obviously have to enter the path to the replacement icon.

Oh, I considered that. I spent way too much time looking at all those individual variable definitions, which I listed in my first reply. It's just much more direct to assign a property value of my own than to override/redefine a bunch of variables when you can't be sure which one will be used. If you want to redefine all the variables instead, you probably could do that. Just make sure to use a unique selector or you will end up redefining all of the buttons on the bar.

In the "Computed" panel, you are not seeing the style rule in its original form. What looks like this:

Joebt said

.webextension-browser-action var(--webextension-toolbar-image, inherit)

or in my case

is inside-out from the original:

  .webextension-browser-action {
    list-style-image: var(--webextension-toolbar-image-2x, inherit);
  }

In other words, instead of

selector { property: value }

it shows

property: current value Applicable rules for this property on this element: selector > value

Several hrs later... looking for one elusive syntax error. If nothing else, this has been a lesson in what doesn't work. I spent far more time figuring how to (or watching you ) replace one icon than it took me restyling browser tabs with gradients, to match the complicated custom theme for Linux - Cinnamon. :=(

Since this post is destined to become the Bible on Replacing Addon Toolbar Icons, I wanted to confirm that both methods of replacing the icon work (but it'll probably be entirely different by Fx v68).

toolbarbutton[id*="73a6fe31-595d-460b-a920-fcc0f8843232"] .toolbarbutton-icon {

 list-style-image: url(chrome://browser/skin/bookmark-star-on-tray.svg) !important; }

and: toolbarbutton[id*="73a6fe31-595d-460b-a920-fcc0f8843232"] .toolbarbutton-icon {

 list-style-image: url(chrome://browser/skin/bookmark-star-on-tray.svg) !important; }

A note: To make it easier, when you open Web Developer > Browser Toolbox, then in Menu (the 3 "dots" in upper, R corner of toolbox), check "Disable popup auto hide," then click Settings > Advanced: check "enable browser chrome and addon debugging toolboxes", AND "Enable remote debugging." The next time browser toolbox opens, a popup "An incoming request to permit remote debugging connection was detected. A remote client can take complete control over your browser!

Client Endpoint: 127.0.0.1:38858 Server Endpoint: 127.0.0.1:44727" Don't panic & yank the PC power cord out of the wall or rip out your battery! It's a normal message, after the settings changes & you're trying to look at all parts of the browser & selected the mentioned options.

"In the "Computed" panel, you are not seeing the style rule in its original form. What looks like this: .webextension-browser-action var(--webextension-toolbar-image, inherit)

is inside-out from the original:

.webextension-browser-action {
   list-style-image: var(--webextension-toolbar-image-2x, inherit);
 }"

Yes, I can see that, after you pointed it out. And being inside out helps us quickly determine the proper selectors, properties, values - how? :) I just don't get that the browser toolbox is as straight forward as DOMi was.

Yes, browser toolbox has more info. I'm not sure if some of it is in as useful a form as it could or should be. Maybe if you're a professional coder, that thinks reading the newspaper upside down, held up to a mirror is also a fun Sat. Nite activity, & also have selective mutism around the opposite sex?

Thanks for sticking with this.