How can I detect the IDs elements from firefox interface?
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 👍 2All Replies (6)
By the way, we are talking about the new version of firefox ... => 57.0
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.
P.S. You can share ideas and problems here: https://www.reddit.com/r/FirefoxCSS/
Many thanks for this informations.. I must check them asap :D
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
Oh, I found out myself :)) It is a very good tool