* Another popup mockup
This is a fraction of what I want to do with the popup, but these are improvements that can be made to the existing version without a complete overhaul. Should be no difference appearance-wise, only some simple enhancements to existing functionality in terms of click area and stylability.
Eliminates ill-conceived `.left-gutter` altogether. Checkboxes and labels are now either parent/child or siblings, with no weird spaces between them, and their hovers can therefore be styled together. `entry` checkbox/label `.style-name` now occupies the entire height/width of the `.entry` to the left of the `.actions` icons, so no more errant clicks.
* Another popup mockup
* Delete popup.css
* Another popup mockup
* Custom checkboxes
* Custom checkboxes
* Subtlety
>an animated checkbox needlessly draws attention to itself
But... I feel the need. Drawing attention to the checkbox is intentional to indicate click action.
>In case the entire row is highlighted there will be no distraction
Clickable area isn't the entire row, it's everything left of action icons. Hovering background on part of the row will look odd, and it's also a less obvious indicator of click action IMO.
Didn't change "disable all" yet. It's a special kinda function, so maybe slightly more drastic is warranted, but I can tone that down too.
numpad 0-9 same as 0-9
numpad + enables all listed
numpad - disables all listed
numpad * and ` (backtick) - toggles initially enabled styles;
doesn't apply to subsequently enabled styles while the popup is open
so you can restore the initial selection after testing stuff:
simply disable all, then toggle i.e. numpad -, numpad *
* in manager use search query like url:https://github.com/openstyles/stylus
* in popup shift-click or right-click on manager button opens it and applies the filter
* localStorage cache is faster than chrome.i18n.get
* TreeWalker is faster than tHTML for removing extraneous whitespace
* simple for() is faster than for-of with [...iterable]
We don't mention the G+ iframe on CWS stylable only when "Out of process iframes" feature is enabled which can be set manually via chrome://flags/#enable-site-per-process. It's still in development and is known to break some sites, which is why it's not enabled by default.
To prevent cross-page leaks we need to create/copy prefs and cachedStyles inside the background page context.
* storage.js is now used only in the background page
* messaging.js now contains less bg-specific methods and more common methods. Added saveStyleSafe, deleteStyleSafe which automatically invoke onRuntimeMessage of the current page or just handleUpdate/handleDelete when notify:false
* prefs.js with 'prefs' for background and UI pages: separate objects because a UI page may load before the background page and it can read prefs from localStorage/sync/defaults
Chrome doesn't garbage-collect (or even leaks) SVG <symbol> referenced via <use> so we'll embed the code directly on manage and popup pages where dozens/hundreds of svgs are displayed.
* restore the correct width of svg icons
* popup: use the standard formatting & SVG <symbol>
* popup .breadcrumbs hover highlight
* manage: black links, transitions; use <p> in #options; trim .homepage
* edit: move regexp tester info link to a template
* Now that our own pages retrieve the styles directly via getStylesSafe the only 0.001% of cases where code:false would be needed (the browser is starting up with some of the tabs showing our built-in pages like editor or manage) is not worth optimizing for.
* According to CSS4 @document specification the entire URL must match. Stylish-for-Chrome implemented it incorrectly since the very beginning. We detect styles that abuse the bug by finding the sections that would have been applied by Stylish but not by us as we follow the spec. Additionally we'll check for invalid regexps.
Popup:
* Enforce 200-800px range for the popup width option
Manage:
* faster search via cachedStyles.byId
* faster restoration of search results on history nav
* style name is clickable and opens the editor
* animated highlight of style element on update/add/save
* expandable extra applies-to targets
* remember scroll position on normal history navigation
* boz-sizing in #header, also in editor
* applies-to targets use structured markup
* get*Tab*, enableStyle and deleteStyle are promisified
Switched info to `i` and found a pretty nice external link icon imo. @tophf As for pixelation on the info icons, you mentioned maybe a lighter color would help. For all icons besides external links, I made them lighter with darker hovers. Besides a really high zoom, I never saw any issue to begin with, but let me know if they're alright. I also changed them to use their exact original dimensions, so maybe that helps.
The icons I used are from right here on Github. They're SVG, so there should't be reliability issues. Wanted to see how they'd look, and I really kinda like it. Thoughts?
