Add inline search filters

Closes #757

Mostly just the UI at this point. Centered the dropdown link and menu, and set up translations. Hooked up the menu click function, and I know we don't usually bother with auto-closing menus, but it felt kinda weird with this one, so I added scroll and click listeners to auto-close.

_locales/en/messages.json

@@ -1042,6 +1042,42 @@
   "popupBordersTooltip": {
     "message": "Useful for dark themes in new Chrome as it no longer paints the side borders"
   },
+  "popupFilterRelevance": {
+    "message": "Relevance",
+    "description": "Filter option in search results"
+  },
+  "popupFilterPopularity": {
+    "message": "Popularity",
+    "description": "Filter option in search results"
+  },
+  "popupFilterUpdatedDate": {
+    "message": "Updated date",
+    "description": "Filter option in search results"
+  },
+  "popupFilterCreatedDate": {
+    "message": "Created date",
+    "description": "Filter option in search results"
+  },
+  "popupFilterName": {
+    "message": "Name",
+    "description": "Filter option in search results"
+  },
+  "popupFilterInstallsThisWeek": {
+    "message": "Installs this week",
+    "description": "Filter option in search results"
+  },
+  "popupFilterTotalInstalls": {
+    "message": "Total installs",
+    "description": "Filter option in search results"
+  },
+  "popupFilterAscending": {
+    "message": "Ascending order",
+    "description": "Filter option ascending tooltip in search results"
+  },
+  "popupFilterDescending": {
+    "message": "Descending order",
+    "description": "Filter option descending tooltip in search results"
+  },
   "popupHotkeysInfo": {
     "message": "<1>-<9>, <0>, also on numpad - toggles Nth style (0 is 10)\n<A>-<Z> toggles first style with a name that starts with the letter\n<Shift> opens editor instead of toggling\n<Numpad +> enables listed styles\n<Numpad –> disables listed styles\n<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 *>\nMore info on wiki",
     "description": "NOTE1: preserve < and > symbols so that <hotkey> is styled as a key.\nNOTE2: the last line is displayed as a text of the link to the wiki page.\nNOTE3: this is the list of hotkeys displayed after clicking the right edge of the extension popup."

popup.html

@@ -253,6 +253,58 @@
   <div id="search-results-error" class="hidden"></div>
   <div id="search-results" class="hidden">
     <div class="search-results-nav" data-type="top"></div>
+    <div class="current-filters">
+      <a class="filter-results" href="#" tabindex="0">
+        <svg class="svg-icon ascending" viewBox="0 0 16 16">
+          <path d="M5 12v-12h-2v12h-2.5l3.5 3.5 3.5-3.5h-2.5z"></path>
+          <path d="M7 9h9v2h-9v-2z"></path>
+          <path d="M7 6h7v2h-7v-2z"></path>
+          <path d="M7 3h5v2h-5v-2z"></path>
+          <path d="M7 0h3v2h-3v-2z"></path>
+        </svg>
+        <span class="current-category">Relevance</span>
+        <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"></use></svg>
+      </a>
+      <div class="filter-menu">
+        <div class="filter-radio-wrapper">
+          <label i18n-title="popupFilterAscending">
+            <div>
+              <input type="radio" name="filtersearch">
+              <div class="icon-wrapper filter-ascending">
+                <svg class="svg-icon ascending" viewBox="0 0 16 16">
+                  <path d="M5 12v-12h-2v12h-2.5l3.5 3.5 3.5-3.5h-2.5z"></path>
+                  <path d="M7 9h9v2h-9v-2z"></path>
+                  <path d="M7 6h7v2h-7v-2z"></path>
+                  <path d="M7 3h5v2h-5v-2z"></path>
+                  <path d="M7 0h3v2h-3v-2z"></path>
+                </svg>
+              </div>
+            </div>
+          </label>
+          <label i18n-title="popupFilterDescending">
+            <div>
+              <input type="radio" name="filtersearch">
+              <div class="icon-wrapper filter-descending">
+                <svg class="svg-icon descending" viewBox="0 0 16 16">
+                  <path d="M5 12v-12h-2v12h-2.5l3.5 3.5 3.5-3.5h-2.5z"></path>
+                  <path d="M7 0h9v2h-9v-2z"></path>
+                  <path d="M7 3h7v2h-7v-2z"></path>
+                  <path d="M7 6h5v2h-5v-2z"></path>
+                  <path d="M7 9h3v2h-3v-2z"></path>
+                </svg>
+              </div>
+            </div>
+          </label>
+        </div>
+        <a class="filter-item" href="#" i18n-text="popupFilterRelevance"></a>
+        <a class="filter-item" href="#" i18n-text="popupFilterPopularity"></a>
+        <a class="filter-item" href="#" i18n-text="popupFilterUpdatedDate"></a>
+        <a class="filter-item" href="#" i18n-text="popupFilterCreatedDate"></a>
+        <a class="filter-item" href="#" i18n-text="popupFilterName"></a>
+        <a class="filter-item" href="#" i18n-text="popupFilterInstallsThisWeek"></a>
+        <a class="filter-item" href="#" i18n-text="popupFilterTotalInstalls"></a>
+      </div>
+    </div>
     <div id="search-results-list"></div>
     <div class="search-results-nav" data-type="bottom"></div>
   </div>

popup/search-results.css

@@ -88,6 +88,109 @@ body.search-results-shown {
   font-weight: 600;
 }
 
+.filter-results {
+  display: inline-flex;
+  text-decoration: none;
+}
+
+.filter-results span {
+  padding-left: 5px;
+  color: #333;
+  transition: color .2s;
+}
+
+.filter-results:hover span,
+.filter-results.show-menu span {
+  color: #000;
+}
+
+.filter-results .svg-icon {
+  fill: #666;
+  transition: fill .2s;
+}
+
+.filter-results:hover .svg-icon,
+.filter-results.show-menu .svg-icon {
+  fill: #111;
+}
+
+.filter-results .svg-icon.select-arrow {
+  position: relative;
+  top: -1px;
+  right: unset;
+  left: 1px;
+  transition: fill .2s;
+}
+
+.filter-menu {
+  background-color: #eee;
+  z-index: 10;
+  position: absolute;
+  top: 28px;
+  left: 0;
+  right: 0;
+  margin: auto;
+  width: max-content;
+  flex-direction: column;
+  border-radius: 3px;
+  border: 1px solid #000;
+  box-shadow: 0 1px 2px hsla(0, 0%, 0%, .3);
+  display: none;
+}
+
+.filter-results.show-menu + .filter-menu {
+  display: flex;
+}
+
+.filter-item {
+  text-align: left;
+  text-decoration: none;
+  padding: 8px 24px 8px 16px;
+  transition: color .2s, background-color .2s;
+}
+
+.filter-item:hover {
+  background-color: hsla(0, 0%, 50%, .1)
+}
+
+.filter-radio-wrapper {
+  padding: 8px 16px 4px;
+}
+
+.filter-radio-wrapper input[type="radio"] {
+  margin-left: 0;
+  margin-right: 5px;
+}
+
+.filter-radio-wrapper .icon-wrapper {
+  padding-top: 2px;
+}
+
+.filter-radio-wrapper > label:first-child {
+  margin-right: 14px;
+}
+
+.filter-radio-wrapper > label:hover .svg-icon {
+  fill: #000;
+}
+
+.filter-radio-wrapper > label,
+.filter-radio-wrapper > label * {
+  cursor: pointer;
+}
+
+.filter-radio-wrapper,
+.filter-radio-wrapper label > div {
+  display: flex;
+}
+
+.filter-results .svg-icon,
+.svg-icon.ascending,
+.svg-icon.descending {
+  height: 16px;
+  width: 16px;
+}
+
 .search-result:hover .search-result-title {
   color: initial;
 }
@@ -223,7 +326,16 @@ body.search-results-shown {
 
 .search-results-nav[data-type="top"] {
   padding-top: 1em;
-  margin-bottom: 1em;
+}
+
+.current-filters {
+  padding: .5em 0 .75em;
+  text-align: center;
+  position: relative;
+}
+
+.current-filters > .svg-icon {
+  margin: 4px 0 -4px;
 }
 
 .search-results-nav[data-type="bottom"] {

popup/search-results.js

@@ -102,6 +102,26 @@ window.addEventListener('showStyles:done', function _() {
 
     $('#find-styles-inline-group').classList.add('hidden');
 
+    const filterResults = $('.filter-results');
+
+    function closeMenu(event) {
+      if (event.target.closest('.filter-menu') || event.target.closest('.filter-results')) return;
+      filterResults.classList.remove('show-menu');
+      document.removeEventListener('click', closeMenu, true);
+      document.body.removeEventListener('scroll', closeMenu);
+    }
+
+    filterResults.onclick = () => {
+      filterResults.classList.toggle('show-menu');
+      if (filterResults.classList.contains('show-menu')) {
+        document.addEventListener('click', closeMenu, true);
+        document.body.addEventListener('scroll', closeMenu);
+      } else {
+        document.removeEventListener('click', closeMenu, true);
+        document.body.removeEventListener('scroll', closeMenu);
+      }
+    }
+
     dom.container = $('#search-results');
     dom.container.dataset.empty = '';