undo fancySelect

js/dlg/config-dialog.js

@@ -255,10 +255,18 @@ async function configDialog(style) {
         case 'dropdown':
         case 'image':
           // TODO: a image picker input?
-          va.input = $create('select', {va, onchange: updateVarOnChange},
-            va.options.map(o => $create('option', {value: o.name}, o.label)));
-          children = [$.fancySelect(va.input)];
-          children[0].classList.add('config-value');
+          children = [
+            $create('.select-resizer.config-value', [
+              va.input = $create('select', {
+                va,
+                onchange: updateVarOnChange,
+              },
+              va.options.map(o =>
+                $create('option', {value: o.name}, o.label))),
+              $create('SVG:svg.svg-icon.select-arrow',
+                $create('SVG:use', {'xlink:href': '#svg-icon-select-arrow'})),
+            ]),
+          ];
           break;
 
         case 'range':

js/dom.js

@@ -27,17 +27,6 @@ Object.assign(EventTarget.prototype, {
 
 $.root = document.documentElement;
 $.rootCL = $.root.classList;
-$.dummies = {
-  select: $create('.select-resizer',
-    $create('SVG:svg.svg-icon.select-arrow',
-      $create('SVG:use', {'xlink:href': '#svg-icon-select-arrow'}))),
-};
-$.fancySelect = el => {
-  const res = $.dummies.select.cloneNode(true);
-  if (el.parentNode) el.replaceWith(res);
-  res.prepend(el);
-  return res;
-};
 
 // Makes the focus outline appear on keyboard tabbing, but not on mouse clicks.
 const focusAccessibility = {

js/localization.js

@@ -29,7 +29,7 @@ Object.assign(t, {
     ')',
     /(?!\b|\s|$)/,
   ].map(rx => rx.source || rx).join(''), 'gu'),
-  SELECTOR: '[i18n], template, select',
+  SELECTOR: '[i18n], template',
 
   HTML(html) {
     return typeof html !== 'string'
@@ -49,9 +49,6 @@ Object.assign(t, {
         t.createTemplate(node);
         continue;
       }
-      if (node.localName === 'select' && (node.nextElementSibling || {}).localName !== 'svg') {
-        $.fancySelect(node);
-      }
       const attr = node.getAttribute('i18n');
       if (!attr) continue;
       for (const part of attr.split(',')) {

popup/search.html

@@ -3,8 +3,19 @@
   <div id="search-results" hidden>
     <div class="search-results-nav" data-type="top"></div>
     <div id="search-params">
-      <div id="search-years"><select></select> - <select></select></div>
+      <div id="search-years">
+        <div class="select-resizer">
+          <select></select>
+          <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
+        </div>
+        -
+        <div class="select-resizer">
+          <select></select>
+          <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
+        </div>
+      </div>
       <input id="search-query" type="search" i18n="placeholder:search, title:searchStyleQueryHint">
+      <div class="select-resizer">
         <select id="search-order" i18n="title:sortStylesHelpTitle">
           <option value="n" i18n="genericTitle">
           <option value="u" i18n="searchResultUpdated">
@@ -12,6 +23,8 @@
           <option value="w" i18n="searchResultWeeklyCount">
           <option value="r" i18n="searchResultRating">
         </select>
+        <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
+      </div>
       <label class="checkbox-wrapper" i18n="searchGlobalStyles">
         <input id="search-globals" type="checkbox" checked>
         <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>