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

Firefox Development
#1

Hi,

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

toolbar-bookmark-popup
toolbar-bookmark-popup1161×1026 50.9 KB

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

Best regards

#2

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
panels.

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

1 Like
#3

Steps:

  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.