This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

How can I detect the IDs elements from firefox interface?

  • 6 replies
  • 2 have this problem
  • 1 view
  • Last reply by pickone

more options

Hi everyone,

      I want to use userChrome.css file to change things in firefox (ex: context menu order, context menu items, right click menu in page, font in tabs... and many other things)... For changing these, I must know the IDs or CLASSes of the selectors/elements and at this link, I can see only a few of everything from firefox http://kb.mozillazine.org/UserChrome.css_Element_Names/IDs#Firefox_menus Which means that I need a tool or something with who I can point the mouse to the item which I want to know the ID/CLASS to put it in userChrome.css for chaning the design. How can I do that? Because, ok, the default ones are somewhere in that link, but I installed many addons and I want to know the IDs from everything. A tool similar to "Inspect element" but for Firefox Interface

Thank you in advance!

Hi everyone, I want to use userChrome.css file to change things in firefox (ex: context menu order, context menu items, right click menu in page, font in tabs... and many other things)... For changing these, I must know the IDs or CLASSes of the selectors/elements and at this link, I can see only a few of everything from firefox http://kb.mozillazine.org/UserChrome.css_Element_Names/IDs#Firefox_menus Which means that I need a tool or something with who I can point the mouse to the item which I want to know the ID/CLASS to put it in userChrome.css for chaning the design. How can I do that? Because, ok, the default ones are somewhere in that link, but I installed many addons and I want to know the IDs from everything. A tool similar to "Inspect element" but for Firefox Interface Thank you in advance!

Modified by pickone

Chosen solution

You can inspect the local copy of the source code of the tolbar area if you paste the following address to the address bar and press Enter/Return to load it:

view-source:chrome://browser/content/browser.xul

That's hard to read as plain text. If you save it locally with a .xml extension and open it in an editor that can add syntax coloring to XML, that will make it easier to spot the ID and class attributes.

Note: The source file doesn't show dynamically generated content like the address bar drop-down or your bookmarks.

To explore interactively, check out the Browser Toolbox. See: https://developer.mozilla.org/docs/To.../Browser_Toolbox. It's not as convenient as the old DOM Inspector combined with the old Element Inspector, but hopefully it will continue to improve.

Read this answer in context 👍 2

All Replies (6)

more options

By the way, we are talking about the new version of firefox ... => 57.0

more options

Chosen Solution

You can inspect the local copy of the source code of the tolbar area if you paste the following address to the address bar and press Enter/Return to load it:

view-source:chrome://browser/content/browser.xul

That's hard to read as plain text. If you save it locally with a .xml extension and open it in an editor that can add syntax coloring to XML, that will make it easier to spot the ID and class attributes.

Note: The source file doesn't show dynamically generated content like the address bar drop-down or your bookmarks.

To explore interactively, check out the Browser Toolbox. See: https://developer.mozilla.org/docs/To.../Browser_Toolbox. It's not as convenient as the old DOM Inspector combined with the old Element Inspector, but hopefully it will continue to improve.

more options

P.S. You can share ideas and problems here: https://www.reddit.com/r/FirefoxCSS/

more options

Many thanks for this informations.. I must check them asap :D

more options

Ok... till now I find Browser Toolbox very useful because it is similar or identical with Inspect element... BUT, how can I point the "Pick an element from the page" with the mouse to the menu where I must right click to see it? :D

more options

Oh, I found out myself :)) It is a very good tool