Surprisingly hard to google, thanks to the name of Google's own browser...
I'm making modifications to my userChrome.css file to move the findbar (ctrl-F) to the top right, to mimic what I'm used to in Google Chrome. I'd like to do more customisation, but I've no idea how to find out what each element etc is called.
Is there a simple trick that I'm missing?
Is there a simple trick that I'm missing?
Simply put, yes. Firefox has the Browser Toolbox, which is pretty much exactly what you’d think: The standard F12 Developer Tools, only now they inspect the XUL window.
The linked docs say this:
The Browser Toolbox is not enabled by default. To enable it you need to check the settings “Enable chrome and addon debugging” and “Enable remote debugging”.
To do this, open the Developer Tools Settings, go to the section Advanced Settings, and check the settings “Enable browser chrome and add-on debugging toolboxes” and “Enable remote debugging”.
The Browser Toolbox is then available by pressing Ctrl+Alt+Shift+I (Cmd+Opt+Shift+I on macOS) or from the hamburger menu → More tools (or from the classic menu bar → Tools).
To get the full experience, check “Multiprocess” at the top of the window. You will then also see all browser extensions, tabs and frames.
