How to debug the styling of the toolbar popups like bookmarks-popup?


I’ve liked to learn how the styling of this toolbar popup was build:

I downloaded the Firefox source code, but didn’t find any sign of the styling of this popup.

Best regards

You need to enable ‘Remote Debugging’ and ‘Enable browser chrome
and add-on debugging toolboxes’ under ‘Advanced settings’ in DevTools.
In the ‘Web Developer’ menu a new ‘Browser Toolbox’ option will
appear. This will allow you to investigate styling for chrome

For what it’s worth, I believe its styling is mainly determined by

1 Like


  1. visit about:debugging, select “this browser” in the left sidebar.
  2. choose the ext you wanna debug, click “inspect”;
  3. select the ext. icon in the right top toolbar. the inspection page will show the debugging info of the ext.