Clicking search result thumbnail (overlay) installs it. So does clicking "install" button.
Fixed author link installing the sytle.
Removed bg-color change on hover.
* same icon in manager
(didn't change the editor config icons as those aren't for usercss)
* "external" icon for USO styles to avoid confusion
(opening a tab is an extremely different action)
* smaller paddings in popup
* removed hover effect on label text
(necause native <select> elements cannot be expanded from js)
* various fixups
* i18n text and titles for all labels.
* Clicking a search result opens the page for that style.
* Descriptions are truncated with (i) info button; expands description when clicked
* Simplified/fixed setLoader() + lds-spinner functionality.
* Right-padding to account for scrollbar when showing search results.
* No 'max-width' anymore -- width adjusts to popup width.
* Description uses ellilpsis on overflow.
* Still needs info/expando (and need to remove title-text)
* Screenshots have 'object-fit:cover' to fill the space.
Unrelated: Hack for search category 'userstyles' (should be userstyles.org)
Unchecked => opens new tab for search page.
Checkbox hidden if inline results are shown (still shows link to "find styles" which opens a new tab by-default).
Main diff: Wrapped onDOMready() & SearchResults() function in IIFE closure.
* [X] const SearchResults = ... // should be inside a closure (IIFE @ Top)
* [X] SearchUserstyles should be firstLetterLowercase
* [X] Don't fetch category on load; use regexp to derive category. (left 'HEAD' code commented-out).
* [X] Don't use XMLHttpRequest() anymore (used in 3 places?): Use download() which accepts custom request params.
* [X] Remove unused getters ('getCurrentPage' & others?)
* [X] const BASE_USO_URL = 'https://userstyles.org'; @ top of searchResults closure. Refer elsewhere.
* [X] const searchUrl = new URL... should be a single multiline statement (new URL('...' +\ '...'
* [X] .innerHTML = ... // use .textContent = ... instead
* [X] Don't use `setAttribute` on 'disabled': $('..-prev').disabled = currentDisplayedPage <= 1 || loading
* [X] Don't use .indexOf() on strings, use .includes()
* [X] Move onDOMReady() code to top of file.
* Fetches 'category' for the current URL when popup is first loaded.
* Customizable styles have "Customize" button next to "Install"
* "Customize" button opens a new tab to the style page.
* Removed all console.log() statements (except when `catch()`ing errors).
* 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.
* "Find more styles for this site" renamed to "Search on userstyles.org".
* Only appears below search results after "Find more styles" is clicked.
* When style is installed from serach results, it no longer appears in the results.
* "Install" uses already-fetched .JSON data. Avoiding useless call to download().
Fetches .json for each search result and asserts style applies to the page.
Still needs:
* Smarter search ("metacritic.com" = 0 results)
* Faster (or parallel) fetching of search result .json files
* Better feedback ("loading" messages)
* Detection of styles that can be Customized
* Install styles using searchResult.json (not downloading)
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 *
