Toolbar vs Menu WebExtension Demo

This is a quick & dirty demo WebExtension for Firefox to play with styles that adapt to browser action popups invoked from the toolbar versus the (presumably narrower) menu sidebar.

Usage

1. Clone this repo
2. Go to about:debugging in Firefox
3. Load manifest.json as a temporary add-on.

TODOs / Challenges

• [ ] Reliably detect placement in Toolbar vs Menu (mostly works, sometimes buggy)
• [ ] Sub-panels with slide-in transitions
• [x] UX with header title, footer controls, and content area that fills the popup
• [x] Popup from toolbar with fixed 320 x 480 dimensions
• [x] Popup from menu sidebar that adapts to the fixed width and default height

What?

A WebExtension in Firefox can add a button that summons a popup panel, using browser_action in manifest.json.

By default, this button is in the toolbar and the popup is automatically sized to fit the content. However, this button can be moved to the sidebar menu and in this case the popup gets a fixed width. Though, of course, this fixed width is specified in em font units and actually varies depending on font sizes & DPI between platforms.

Anyway. It would be nice to have popup styles that vary between the variable sizing from the toolbar and the fixed width (but semi-variable height!) from the sidebar menu.

Credits

• 718smiley.svg by East718 from Wikimedia Commons