the problem we fix is that since we add the styles asynchronously, the browsers, esp. Firefox, sometimes apply transitions from the null/default state to the one specified in the injected CSS.
supersedes 72e8213b and 4dbca46b
* 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
* saveStyle: retain only known properties in sections[] and normalize their order
* remove styleDigest on import
* shorten detailed status names in updater
* don't autohide update status message
* Now filtering is done in js
* Visible entries are always at the beginning of #installed
* Hidden entries are always at the end of #installed
* The code tries to minimize DOM reordering operations:
* First pass only moves one hidden entry in hidden groups with odd number of items.
* Second [full] pass runs after repaint.
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
* update state is shown in tooltips that fade out in 10 sec except for .update-problem and .can-update
* when updates are found a filtering option is revealed; when it's checked only entries with updates are shown; when all updates are installed the option automatically hides
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
* "Find styles" is a link so we make it one, just like in the popup.
* We have a dedicated global options UI so it makes no sense to subset only two of them on the manage page, moreover both options are unrelated to managing styles.
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.
