Implement sidebar action and make CSS responsive

vhfmag commented 4 years ago

This PR implements a sidebar action for the Firefox browser and, to do so, modifies CSS to make it responsive in the sidebar. The popup's layout hasn't been changed.

The main changes were:

Added the sidebar_action manifest property
Added a .sidebar class in body when the extension HTML is opened from there (via ?location=sidebar)
Removed hardcoded widths and heights in favor of responsive units (body.sidebar, body.sidebar .l-main--tall)
Made .fields-inline a responsive CSS Grid container, preventing the second element from having an odd margin-left when the container wraps (without using negative margins)
Made .input-inline input responsive by unsetting hardcoded 100% width and making it grow and shrink with flex: 1 1 auto

This closes #90

vhfmag commented 4 years ago

A question: is there any reason for the dist folder to be commited?

keithjgrant commented 4 years ago

Very cool. thanks!

keithjgrant / omnibear

Implement sidebar action and make CSS responsive #91