From e61877b9f92877ad230ec967efeb4b0dcb215985 Mon Sep 17 00:00:00 2001
From: narcolepticinsomniac <therealdoctorgonzo@gmail.com>
Date: Tue, 5 Dec 2017 06:23:07 -0500
Subject: [PATCH 01/28] Style disabled checkboxes, and use currentColor for
 select text/arrows

Select text color needs to be specified to override system color in Linux. Also got rid of he stupid dotted line around focused element text which still occurs in Linux FF.
---
 global.css | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/global.css b/global.css
index a7910669..79477df8 100644
--- a/global.css
+++ b/global.css
@@ -42,6 +42,19 @@ input[type="checkbox"]:not(.slider):checked + .svg-icon.checked {
   pointer-events: none;
 }
 
+input[type="checkbox"]:not(.slider):disabled {
+  background-color: transparent;
+  border-color: hsl(0, 0%, 50%);
+}
+
+input[type="checkbox"]:not(.slider):disabled + .svg-icon.checked {
+  fill: hsl(0, 0%, 50%);
+}
+
+input[type="checkbox"]:not(.slider):disabled + .svg-icon.checked + span {
+  color: hsl(0, 0%, 50%);
+}
+
 label {
   transition: color .1s;
 }
@@ -50,6 +63,7 @@ select {
   -moz-appearance: none;
   -webkit-appearance: none;
   height: 22px;
+  color: currentColor;
   background-color: transparent;
   border: 1px solid hsl(0, 0%, 66%);
   padding: 0 20px 0 6px;
@@ -72,13 +86,17 @@ select {
   display: inline-flex;
   height: 14px;
   width: 14px;
-  fill: #000;
+  fill: currentColor;
   position: absolute;
   top: 4px;
   right: 4px;
   transition: fill .5s;
 }
 
+::-moz-focus-inner { 
+  border: 0; 
+}
+
 @supports (-moz-appearance: none) {
   .moz-appearance-bug .svg-icon.checked {
     display: none !important;

From 93a8f99b128fbef205a824d667f26b38958530c3 Mon Sep 17 00:00:00 2001
From: narcolepticinsomniac <therealdoctorgonzo@gmail.com>
Date: Tue, 5 Dec 2017 07:50:49 -0500
Subject: [PATCH 02/28] Keep FF garbage separate

---
 global.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/global.css b/global.css
index 79477df8..66cf3bab 100644
--- a/global.css
+++ b/global.css
@@ -93,10 +93,6 @@ select {
   transition: fill .5s;
 }
 
-::-moz-focus-inner { 
-  border: 0; 
-}
-
 @supports (-moz-appearance: none) {
   .moz-appearance-bug .svg-icon.checked {
     display: none !important;
@@ -110,4 +106,8 @@ select {
     padding-left: .75ex;
     padding-right: .75ex;
   }
+
+  ::-moz-focus-inner { 
+    border: 0; 
+  }
 }

From 82e45460fa23303a196031d93d25697c2da4584b Mon Sep 17 00:00:00 2001
From: narcolepticinsomniac <therealdoctorgonzo@gmail.com>
Date: Tue, 5 Dec 2017 08:41:05 -0500
Subject: [PATCH 03/28] Remove obsolete selector which hid filters when lowest
 max-width media-screen kicked in

---
 manage/manage.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/manage/manage.css b/manage/manage.css
index c21a3e5f..00afc575 100644
--- a/manage/manage.css
+++ b/manage/manage.css
@@ -998,7 +998,6 @@ fieldset > label {
   }
 
   #header p,
-  #header fieldset div,
   #backup {
     display: inline-block;
   }

From fe4be8d5db1c0ac4318ad1509f31388ed3ab2478 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Tue, 5 Dec 2017 20:58:39 +0300
Subject: [PATCH 04/28] actually keep "[x] as userccs" together

---
 manage.html       |  2 +-
 manage/manage.css | 15 +++++----------
 2 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/manage.html b/manage.html
index d9340425..c8a6c4eb 100644
--- a/manage.html
+++ b/manage.html
@@ -258,7 +258,7 @@
     <a href="edit.html">
       <button id="add-style-label" i18n-text="addStyleLabel"></button>
     </a>
-    <label id="newStyleAsUsercss-wrapper" class="nobreak">
+    <label id="newStyleAsUsercss-wrapper">
       <input type="checkbox" id="newStyleAsUsercss">
       <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
       <span i18n-text="manageNewStyleAsUsercss" i18n-title="optionsAdvancedNewStyleAsUsercss"></span>
diff --git a/manage/manage.css b/manage/manage.css
index 00afc575..f78df192 100644
--- a/manage/manage.css
+++ b/manage/manage.css
@@ -90,21 +90,16 @@ select {
   margin-bottom: .25em;
 }
 
+#newStyleAsUsercss-wrapper {
+  display: inline-flex;
+}
+
 #newStyleAsUsercss-wrapper:not(:hover) input:not(:checked) ~ a svg {
   fill: #aaa;
 }
 
 #usercss-wiki svg {
-  margin-top: -2px;
-}
-
-.nobreak {
-  white-space: nowrap;
-}
-
-label.nobreak input {
-  vertical-align: sub;
-  margin: 0;
+  margin-top: -4px;
 }
 
 .firefox .chromium-only {

From 69736ef5a137cb301bca4d4aada8c75d949a983b Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Tue, 5 Dec 2017 21:01:10 +0300
Subject: [PATCH 05/28] FF: de-blur svg icons

---
 global.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/global.css b/global.css
index 66cf3bab..28b69ed1 100644
--- a/global.css
+++ b/global.css
@@ -110,4 +110,8 @@ select {
   ::-moz-focus-inner { 
     border: 0; 
   }
+
+  svg {
+    transform: scale(1); /* de-blur */
+  }
 }

From bd0f460c56007e253d09569191c767a772a05820 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Tue, 5 Dec 2017 20:41:08 +0300
Subject: [PATCH 06/28] usercss editor: use real theme color for inputs in
 widgets

---
 edit.html                      |   2 +-
 edit/applies-to-line-widget.js | 144 +++++++++++++++++++++++++--------
 edit/codemirror-default.css    |   4 -
 3 files changed, 111 insertions(+), 39 deletions(-)

diff --git a/edit.html b/edit.html
index 7efc20ce..54b474e3 100644
--- a/edit.html
+++ b/edit.html
@@ -74,7 +74,7 @@
     <link rel="stylesheet" href="/edit/codemirror-default.css">
 
     <template data-id="appliesTo">
-      <li>
+      <li class="applies-to-item">
         <div class="select-resizer">
           <select name="applies-type" class="applies-type style-contributor">
             <option value="url" i18n-text="appliesUrlOption"></option>
diff --git a/edit/applies-to-line-widget.js b/edit/applies-to-line-widget.js
index 91d26f63..aea28e47 100644
--- a/edit/applies-to-line-widget.js
+++ b/edit/applies-to-line-widget.js
@@ -5,7 +5,7 @@ function createAppliesToLineWidget(cm) {
   const THROTTLE_DELAY = 400;
   let TPL, EVENTS, CLICK_ROUTE;
   let widgets = [];
-  let fromLine, toLine, styleVariables;
+  let fromLine, toLine, actualStyle;
   let initialized = false;
   return {toggle};
 
@@ -29,23 +29,14 @@ function createAppliesToLineWidget(cm) {
           $create('label', t('appliesLabel')),
           $create('ul.applies-to-list'),
         ]),
-      listItem:
-        $create('li.applies-to-item', [
-          $create('select.applies-type', [
-            $create('option', {value: 'url'}, t('appliesUrlOption')),
-            $create('option', {value: 'url-prefix'}, t('appliesUrlPrefixOption')),
-            $create('option', {value: 'domain'}, t('appliesDomainOption')),
-            $create('option', {value: 'regexp'}, t('appliesRegexpOption')),
-          ]),
-          $create('input.applies-value', {spellcheck: false}),
-          $create('button.test-regexp', t('styleRegexpTestButton')),
-          $create('button.remove-applies-to', t('appliesRemove')),
-          $create('button.add-applies-to', t('appliesAdd')),
-        ]),
+      listItem: template.appliesTo,
       appliesToEverything:
         $create('li.applies-to-everything', t('appliesToEverything')),
     };
 
+    $('button', TPL.listItem).insertAdjacentElement('afterend',
+      $create('button.test-regexp', t('styleRegexpTestButton')));
+
     CLICK_ROUTE = {
       '.test-regexp': (item, apply) => {
         regExpTester.toggle();
@@ -136,15 +127,13 @@ function createAppliesToLineWidget(cm) {
       }
     };
 
-    styleVariables = $create('style');
+    actualStyle = $create('style');
     fromLine = 0;
     toLine = cm.doc.size;
 
     cm.on('change', onChange);
     cm.on('optionChange', onOptionChange);
 
-    // is it possible to avoid flickering?
-    window.addEventListener('load', updateWidgetStyle);
     chrome.runtime.onMessage.addListener(onRuntimeMessage);
 
     updateWidgetStyle();
@@ -158,9 +147,8 @@ function createAppliesToLineWidget(cm) {
     widgets.length = 0;
     cm.off('change', onChange);
     cm.off('optionChange', onOptionChange);
-    window.removeEventListener('load', updateWidgetStyle);
     chrome.runtime.onMessage.removeListener(onRuntimeMessage);
-    styleVariables.remove();
+    actualStyle.remove();
   }
 
   function onChange(cm, event) {
@@ -229,24 +217,112 @@ function createAppliesToLineWidget(cm) {
   }
 
   function updateWidgetStyle() {
-    const gutterStyle = getComputedStyle(cm.getGutterElement());
-    const borderStyle = gutterStyle.borderRightWidth !== '0px' ?
-      `${gutterStyle.borderRightWidth} ${gutterStyle.borderRightStyle} ${gutterStyle.borderRightColor}` :
-      `1px solid ${gutterStyle.color}`;
-    const id = Date.now();
-    styleVariables.textContent = `
-      .single-editor {
-        --at-background-color-${id}: ${gutterStyle.backgroundColor};
-        --at-border-top-${id}: ${borderStyle};
-        --at-border-bottom-${id}: ${borderStyle};
-      }
+    const MIN_LUMA = .05;
+    const MIN_LUMA_DIFF = .4;
+    const color = {
+      wrapper: getRealColors(cm.display.wrapper),
+      gutter: getRealColors(cm.display.gutters, {
+        bg: 'backgroundColor',
+        border: 'borderRightColor',
+      }),
+      line: getRealColors('.CodeMirror-linenumber'),
+      comment: getRealColors('span.cm-comment'),
+    };
+    const hasBorder =
+      color.gutter.style.borderRightWidth !== '0px' &&
+      !/transparent|\b0\)/g.test(color.gutter.style.borderRightColor);
+    const diff = {
+      wrapper: Math.abs(color.gutter.bgLuma - color.wrapper.foreLuma),
+      border: hasBorder ? Math.abs(color.gutter.bgLuma - color.gutter.borderLuma) : 0,
+      line: Math.abs(color.gutter.bgLuma - color.line.foreLuma),
+    };
+    const preferLine = diff.line > diff.wrapper || diff.line > MIN_LUMA_DIFF;
+    const fore = preferLine ? color.line.fore : color.wrapper.fore;
+
+    const border = fore.replace(/[\d.]+(?=\))/, MIN_LUMA_DIFF / 2);
+    const borderStyleForced = `1px ${hasBorder ? color.gutter.style.borderRightStyle : 'solid'} ${border}`;
+
+    actualStyle.textContent = `
       .applies-to {
-        background-color: var(--at-background-color-${id});
-        border-top: var(--at-border-top-${id});
-        border-bottom: var(--at-border-bottom-${id});
+        background-color: ${color.gutter.bg};
+        border-top: ${borderStyleForced};
+        border-bottom: ${borderStyleForced};
+      }
+      .applies-to label {
+        color: ${fore};
+      }
+      .applies-to input,
+      .applies-to select {
+        background-color: rgba(255, 255, 255, ${
+          Math.max(MIN_LUMA, Math.pow(Math.max(0, color.gutter.bgLuma - MIN_LUMA * 2), 2)).toFixed(2)
+        });
+        border: ${borderStyleForced};
+        transition: none;
+        color: ${fore};
+      }
+      .applies-to .svg-icon.select-arrow {
+        fill: ${fore};
+        transition: none;
       }
     `;
-    document.documentElement.appendChild(styleVariables);
+    document.documentElement.appendChild(actualStyle);
+
+    function getRealColors(el, targets = {}) {
+      targets.fore = 'color';
+      const colors = {};
+      const done = {};
+      let numDone = 0;
+      let numTotal = 0;
+      for (const k in targets) {
+        colors[k] = {r: 255, g: 255, b: 255, a: 1};
+        numTotal++;
+      }
+      const isDummy = typeof el === 'string';
+      el = isDummy ? cm.display.lineDiv.appendChild($create(el, {style: 'display: none'})) : el;
+      for (let current = el; current; current = current && current.parentElement) {
+        const style = getComputedStyle(current);
+        for (const k in targets) {
+          if (!done[k]) {
+            done[k] = blend(colors[k], style[targets[k]]);
+            numDone += done[k] ? 1 : 0;
+            if (numDone === numTotal) {
+              current = null;
+              break;
+            }
+          }
+        }
+        colors.style = colors.style || style;
+      }
+      if (isDummy) {
+        el.remove();
+      }
+      for (const k in targets) {
+        const {r, g, b, a} = colors[k];
+        colors[k] = `rgba(${r}, ${g}, ${b}, ${a})`;
+        // https://www.w3.org/TR/AERT#color-contrast
+        colors[k + 'Luma'] = (r * .299 + g * .587 + b * .114) / 256;
+      }
+      return colors;
+    }
+
+    function blend(base, color) {
+      const [r, g, b, a = 255] = (color.match(/\d+/g) || []).map(Number);
+      if (a === 255) {
+        base.r = r;
+        base.g = g;
+        base.b = b;
+        base.a = 1;
+      } else if (a) {
+        const mixedA = 1 - (1 - a / 255) * (1 - base.a);
+        const q1 = a / 255 / mixedA;
+        const q2 = base.a * (1 - mixedA) / mixedA;
+        base.r = Math.round(r * q1 + base.r * q2);
+        base.g = Math.round(g * q1 + base.g * q2);
+        base.b = Math.round(b * q1 + base.b * q2);
+        base.a = mixedA;
+      }
+      return Math.abs(base.a - 1) < 1e-3;
+    }
   }
 
   function doUpdate() {
diff --git a/edit/codemirror-default.css b/edit/codemirror-default.css
index 72370f4c..66ef1966 100644
--- a/edit/codemirror-default.css
+++ b/edit/codemirror-default.css
@@ -56,7 +56,3 @@
   position: absolute;
   pointer-events: none;
 }
-
-.CodeMirror-activeline .applies-to ul {
-  z-index: 2;
-}

From 36ec8de04f2d470dfef43e7527e2ba261560f367 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Tue, 5 Dec 2017 20:42:13 +0300
Subject: [PATCH 07/28] stop calc when color is opaque

---
 vendor-overwrites/colorpicker/colorpicker.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/vendor-overwrites/colorpicker/colorpicker.js b/vendor-overwrites/colorpicker/colorpicker.js
index f18e0c85..d52c1fec 100644
--- a/vendor-overwrites/colorpicker/colorpicker.js
+++ b/vendor-overwrites/colorpicker/colorpicker.js
@@ -940,6 +940,9 @@
       realColor.g = Math.round(g * q1 + realColor.g * q2);
       realColor.b = Math.round(b * q1 + realColor.b * q2);
       realColor.a = mixedA;
+      if (Math.abs(realColor.a - 1) < 1e-3) {
+        break;
+      }
     }
     // https://www.w3.org/TR/AERT#color-contrast
     const {r, g, b} = realColor;

From 963930ea1d1dbe7968015bd0fb5301742db062f1 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Tue, 5 Dec 2017 21:32:28 +0300
Subject: [PATCH 08/28] usercss editor: restore "Add" and "Regexp test",
 convert \ in regexps

---
 edit/applies-to-line-widget.js | 33 +++++++++++++++------------------
 edit/edit.css                  |  8 ++++----
 2 files changed, 19 insertions(+), 22 deletions(-)

diff --git a/edit/applies-to-line-widget.js b/edit/applies-to-line-widget.js
index aea28e47..d7cac1b7 100644
--- a/edit/applies-to-line-widget.js
+++ b/edit/applies-to-line-widget.js
@@ -34,13 +34,13 @@ function createAppliesToLineWidget(cm) {
         $create('li.applies-to-everything', t('appliesToEverything')),
     };
 
-    $('button', TPL.listItem).insertAdjacentElement('afterend',
+    $('button', TPL.listItem).insertAdjacentElement('beforebegin',
       $create('button.test-regexp', t('styleRegexpTestButton')));
 
     CLICK_ROUTE = {
       '.test-regexp': (item, apply) => {
         regExpTester.toggle();
-        regExpTester.update([apply.value.text]);
+        regExpTester.update([unescapeDoubleslash(apply.value.text)]);
       },
 
       '.remove-applies-to': (item, apply) => {
@@ -101,18 +101,15 @@ function createAppliesToLineWidget(cm) {
           const apply = item.__apply;
           changeItem(apply, 'type', typeElement.value);
           item.dataset.type = apply.type.text;
+        } else {
+          return EVENTS.oninput.apply(this, arguments);
         }
       },
       oninput({target}) {
         if (target.matches('.applies-value')) {
-          const apply = target.closest('.applies-to-item').__apply;
-          debounce(changeItem, THROTTLE_DELAY, apply, 'value', target.value);
-        }
-      },
-      onfocus({target}) {
-        if (target.matches('.test-regexp')) {
-          const apply = target.closest('.applies-to-item').__apply;
-          updateRegexpTest(apply);
+          const item = target.closest('.applies-to-item');
+          const apply = item.__apply;
+          changeItem(apply, 'value', target.value);
         }
       },
       onclick({target}) {
@@ -489,7 +486,7 @@ function createAppliesToLineWidget(cm) {
     part = apply[part];
     const range = part.mark.find();
     part.mark.clear();
-    newText = newText.replace(/\\/g, '\\\\');
+    newText = unescapeDoubleslash(newText).replace(/\\/g, '\\\\');
     cm.replaceRange(newText, range.from, range.to, 'appliesTo');
     part.mark = cm.markText(
       range.from,
@@ -508,13 +505,9 @@ function createAppliesToLineWidget(cm) {
       );
     }
 
-    updateRegexpTest(apply);
-  }
-
-  function updateRegexpTest(apply) {
     if (apply.type.text === 'regexp') {
       const rx = apply.value.text.trim();
-      regExpTester.update(rx ? [rx] : {});
+      regExpTester.update(rx ? [unescapeDoubleslash(rx)] : {});
     }
   }
 
@@ -526,7 +519,6 @@ function createAppliesToLineWidget(cm) {
     const valueStart = typeEnd + 1 + Number(isQuoted);
     const valueEnd = valueStart + valueText.length;
     const end = valueEnd + Number(isQuoted) + 1;
-    const hasSingleEscapes = /([^\\]|^)\\([^\\]|$)/.test(valueText);
     return {
       start,
       type: {
@@ -535,7 +527,7 @@ function createAppliesToLineWidget(cm) {
         end: typeEnd,
       },
       value: {
-        text: hasSingleEscapes ? valueText : valueText.replace(/\\\\/g, '\\'),
+        text: unescapeDoubleslash(valueText),
         start: valueStart,
         end: valueEnd,
       },
@@ -581,4 +573,9 @@ function createAppliesToLineWidget(cm) {
     const first = s.charAt(0);
     return (first === '"' || first === "'") && s.endsWith(first) ? s.slice(1, -1) : s;
   }
+
+  function unescapeDoubleslash(s) {
+    const hasSingleEscapes = /([^\\]|^)\\([^\\]|$)/.test(s);
+    return hasSingleEscapes ? s : s.replace(/\\\\/g, '\\');
+  }
 }
diff --git a/edit/edit.css b/edit/edit.css
index eadba48e..4df2993d 100644
--- a/edit/edit.css
+++ b/edit/edit.css
@@ -331,11 +331,11 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
   min-height: 1.4rem;
   margin-left: 0.35rem;
 }
-.applies-to li .add-applies-to {
+html:not(.usercss) .applies-to li .add-applies-to {
   visibility: hidden;
   text-align: left;
 }
-.applies-to li:last-child .add-applies-to {
+html:not(.usercss) .applies-to li:last-child .add-applies-to {
   visibility: visible
 }
 .applies-to li .add-applies-to:first-child {
@@ -646,8 +646,8 @@ html:not(.usercss) .usercss-only,
   margin-top: 0.35rem;
 }
 
-.CodeMirror-linewidget .applies-to li:not([data-type="regexp"]) .applies-to-regexp-test {
-  display: none;
+.CodeMirror-linewidget .applies-to li[data-type="regexp"] .test-regexp {
+  display: inline;
 }
 
 .CodeMirror-linewidget li.applies-to-everything {

From 61003b378c083913612ba8481a68a07f87230e00 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Tue, 5 Dec 2017 21:52:24 +0300
Subject: [PATCH 09/28] usercss editor: show all section regexps in tester

---
 edit/applies-to-line-widget.js | 24 ++++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/edit/applies-to-line-widget.js b/edit/applies-to-line-widget.js
index d7cac1b7..5fcccb0d 100644
--- a/edit/applies-to-line-widget.js
+++ b/edit/applies-to-line-widget.js
@@ -38,10 +38,7 @@ function createAppliesToLineWidget(cm) {
       $create('button.test-regexp', t('styleRegexpTestButton')));
 
     CLICK_ROUTE = {
-      '.test-regexp': (item, apply) => {
-        regExpTester.toggle();
-        regExpTester.update([unescapeDoubleslash(apply.value.text)]);
-      },
+      '.test-regexp': showRegExpTester,
 
       '.remove-applies-to': (item, apply) => {
         const applies = item.closest('.applies-to').__applies;
@@ -99,7 +96,7 @@ function createAppliesToLineWidget(cm) {
         if (typeElement) {
           const item = target.closest('.applies-to-item');
           const apply = item.__apply;
-          changeItem(apply, 'type', typeElement.value);
+          changeItem(item, apply, 'type', typeElement.value);
           item.dataset.type = apply.type.text;
         } else {
           return EVENTS.oninput.apply(this, arguments);
@@ -109,7 +106,7 @@ function createAppliesToLineWidget(cm) {
         if (target.matches('.applies-value')) {
           const item = target.closest('.applies-to-item');
           const apply = item.__apply;
-          changeItem(apply, 'value', target.value);
+          changeItem(item, apply, 'value', target.value);
         }
       },
       onclick({target}) {
@@ -479,7 +476,7 @@ function createAppliesToLineWidget(cm) {
     return el;
   }
 
-  function changeItem(apply, part, newText) {
+  function changeItem(itemElement, apply, part, newText) {
     if (!apply) {
       return;
     }
@@ -505,9 +502,8 @@ function createAppliesToLineWidget(cm) {
       );
     }
 
-    if (apply.type.text === 'regexp') {
-      const rx = apply.value.text.trim();
-      regExpTester.update(rx ? [unescapeDoubleslash(rx)] : {});
+    if (apply.type.text === 'regexp' && apply.value.text.trim()) {
+      showRegExpTester(itemElement);
     }
   }
 
@@ -578,4 +574,12 @@ function createAppliesToLineWidget(cm) {
     const hasSingleEscapes = /([^\\]|^)\\([^\\]|$)/.test(s);
     return hasSingleEscapes ? s : s.replace(/\\\\/g, '\\');
   }
+
+  function showRegExpTester(item) {
+    regExpTester.toggle(true);
+    regExpTester.update(
+      item.closest('.applies-to').__applies
+        .filter(a => a.type.text === 'regexp')
+        .map(a => unescapeDoubleslash(a.value.text)));
+  }
 }

From 44ce51e54f8f574d7bf2835a0704c17bb1f1984a Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Tue, 5 Dec 2017 21:55:01 +0300
Subject: [PATCH 10/28] dim regexp-tester note and avoid extending the report
 width

---
 edit/edit.css         |  6 ++++++
 edit/regexp-tester.js | 12 +++++++-----
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/edit/edit.css b/edit/edit.css
index 4df2993d..11c1c08b 100644
--- a/edit/edit.css
+++ b/edit/edit.css
@@ -404,6 +404,12 @@ html:not(.usercss) .applies-to li:last-child .add-applies-to {
   margin-left: -20px;
   margin-top: -1px;
 }
+.regexp-report-note {
+  color: #999;
+  position: absolute;
+  margin: 0 0.5rem 0 0;
+  hyphens: auto;
+}
 /************ help popup ************/
 #help-popup {
   top: 3rem;
diff --git a/edit/regexp-tester.js b/edit/regexp-tester.js
index 4c5e63ff..8da9854c 100644
--- a/edit/regexp-tester.js
+++ b/edit/regexp-tester.js
@@ -160,13 +160,15 @@ var regExpTester = (() => {
           }
         }
       }
-      report.appendChild(
-        $create('p.regexp-report-note',
-          t('styleRegexpTestNote')
-            .split(/(\\+)/)
-            .map(s => (s.startsWith('\\') ? $create('code', s) : s))));
       showHelp(t('styleRegexpTestTitle'), report);
 
+      const note = $create('p.regexp-report-note',
+        t('styleRegexpTestNote')
+          .split(/(\\+)/)
+          .map(s => (s.startsWith('\\') ? $create('code', s) : s)));
+      report.appendChild(note);
+      report.style.paddingBottom = note.offsetHeight + 'px';
+
       report.onclick = event => {
         const target = event.target.closest('a, .regexp-report div');
         if (target) {

From db621b8657fea1a64da29b9cbf23da10aa858a45 Mon Sep 17 00:00:00 2001
From: Rob Garrison <wowmotty@gmail.com>
Date: Tue, 5 Dec 2017 15:05:23 -0600
Subject: [PATCH 11/28] Manage: Make filter & backup containers collapsible

---
 js/prefs.js       |  2 ++
 manage.html       | 17 ++++------
 manage/filters.js |  8 +++++
 manage/manage.css | 82 +++++++++++++++++++++--------------------------
 4 files changed, 54 insertions(+), 55 deletions(-)

diff --git a/js/prefs.js b/js/prefs.js
index 70444b15..4eb5b0db 100644
--- a/js/prefs.js
+++ b/js/prefs.js
@@ -24,6 +24,8 @@ var prefs = new function Prefs() {
     'manage.onlyLocal.invert': false,   // display only externally installed styles
     'manage.onlyUsercss.invert': false, // display only non-usercss (standard) styles
     // UI element state: expanded/collapsed
+    'manage.backup.expanded': true,
+    'manage.filters.expanded': true,
     'manage.options.expanded': true,
     // the new compact layout doesn't look good on Android yet
     'manage.newUI': !navigator.appVersion.includes('Android'),
diff --git a/manage.html b/manage.html
index c8a6c4eb..e051f8ca 100644
--- a/manage.html
+++ b/manage.html
@@ -164,11 +164,8 @@
 <div id="header">
   <h1 id="manage-heading" i18n-text="manageHeading"></h1>
 
-  <fieldset>
-
-    <legend id="filters">
-      <span i18n-text="manageFilters"></span><span id="filters-stats"></span>
-    </legend>
+  <details id="filters" data-pref="manage.filters.expanded">
+    <summary><h2 i18n-text="manageFilters">: <span id="filters-stats"></span></h2></summary>
 
     <div class="filter-selection">
       <label>
@@ -237,7 +234,7 @@
            data-filter=":not(.not-matching)"
            data-filter-hide=".not-matching">
 
-  </fieldset>
+  </details>
 
   <p class="nowrap">
     <button id="check-all-updates" i18n-text="checkAllUpdates"><span id="update-progress"></span></button>
@@ -254,7 +251,7 @@
     <button id="check-all-updates-force" class="hidden" i18n-text="checkAllUpdatesForce"></button>
   </p>
 
-  <p>
+  <p id="add-style-wrapper">
     <a href="edit.html">
       <button id="add-style-label" i18n-text="addStyleLabel"></button>
     </a>
@@ -316,14 +313,14 @@
 
   </details>
 
-  <div id="backup">
-    <h2 id="backup-title" i18n-text="backupButtons"></h2>
+  <details id="backup" data-pref="manage.backup.expanded">
+    <summary><h2 id="backup-title" i18n-text="backupButtons"></h2></summary>
     <span id="backup-message" i18n-text="backupMessage"></span>
     <p>
       <button id="file-all-styles" i18n-text="bckpInstStyles"></button>
       <button id="unfile-all-styles" i18n-text="retrieveBckp"></button>
     </p>
-  </div>
+  </details>
 
   <p id="manage-text" i18n-html="manageText"></p>
 
diff --git a/manage/filters.js b/manage/filters.js
index aae54d43..b8c50909 100644
--- a/manage/filters.js
+++ b/manage/filters.js
@@ -76,6 +76,14 @@ onDOMready().then(onBackgroundReady).then(() => {
     }
   });
 
+  // Adjust width after selects are visible
+  prefs.subscribe(['manage.filters.expanded'], () => {
+    const el = $('#filters');
+    if (el.open) {
+      $$('select', el).forEach(select => select.adjustWidth());
+    }
+  });
+
   filterOnChange({forceRefilter: true});
 });
 
diff --git a/manage/manage.css b/manage/manage.css
index f78df192..60aa6ad3 100644
--- a/manage/manage.css
+++ b/manage/manage.css
@@ -79,6 +79,7 @@ select {
 
 #header h1 {
   margin-top: 0;
+  margin-bottom: .3em;
 }
 
 #header a[href^="edit"] {
@@ -259,9 +260,24 @@ select {
 }
 
 /* collapsibles */
+#header details:not(#filters),
+#add-style-wrapper {
+  padding-bottom: .7em;
+}
 
+#add-style-wrapper,
+#options :last-child,
+#backup :last-child {
+  margin-bottom: 0;
+}
+
+#header details:not([open]),
 #header details:not([open]) h2 {
-  margin-bottom: -.25em;
+  padding-bottom: 0;
+}
+
+#header details[open] summary {
+  padding-bottom: .5em;
 }
 
 #header summary {
@@ -269,7 +285,6 @@ select {
   margin-left: -13px;
   cursor: pointer;
   outline: none;
-  margin-bottom: 8px;
 }
 
 #header summary h2 {
@@ -321,6 +336,7 @@ select {
 
 .filter-selection {
   position: relative;
+  left: -9px;
 }
 
 #header label {
@@ -356,6 +372,7 @@ select {
   max-width: 100%;
   padding-left: 4px;
   padding-right: 14px;
+  margin-left: 4px;
 }
 
 .firefox .filter-selection select {
@@ -381,13 +398,13 @@ select {
   left: 16px;
 }
 
-fieldset > label,
-fieldset > .filter-selection {
+#filters label,
+#filters .filter-selection {
   transition: background-color .25s;
 }
 
-fieldset > label:hover,
-fieldset > .filter-selection:hover {
+#filters label:hover,
+#filters .filter-selection:hover {
   background-color: hsla(0, 0%, 50%, .2);
 }
 
@@ -746,26 +763,18 @@ input[id^="manage.newUI"] {
   display: none !important;
 }
 
-fieldset {
-  border-width: 1px;
-  border-radius: 6px;
-  margin: 1em 0;
-  min-width: 0;
-  max-width: 250px;
-}
-
-fieldset > input,
-fieldset > label {
+#filters input,
+#filters label {
   display: flex;
   align-items: center;
 }
 
-#header fieldset > label {
+#filters label {
   padding-left: 20px;
 }
 
-#header fieldset > label input[type="checkbox"]:not(.slider),
-#header fieldset > label input[type="checkbox"]:not(.slider):checked + .svg-icon.checked{
+#filters label input[type="checkbox"]:not(.slider),
+#filters label input[type="checkbox"]:not(.slider):checked + .svg-icon.checked{
   left: 4px;
 }
 
@@ -773,23 +782,24 @@ fieldset > label {
   border: 1px solid transparent;
 }
 
-#filters.active {
+.active #filters-stats {
   background-color: darkcyan;
   border-color: darkcyan;
   color: white;
+  font-size: 0.7rem;
+  font-weight: normal;
+  padding: 2px 5px;
+  position: relative;
+  top: -2px;
 }
 
 #filters:not(.active) #filters-stats {
   display: none;
 }
 
-#filters-stats::before {
-  content: ": ";
-}
-
 #search {
   width: calc(100% - 4px);
-  margin: 0.25rem 4px 0;
+  margin: 0.25rem 0 0;
   border-radius: 0.25rem;
   padding-left: 0.25rem;
   border-width: 1px;
@@ -1005,8 +1015,7 @@ fieldset > label {
     margin-right: 1em;
   }
 
-  #backup p,
-  #header fieldset {
+  #backup p {
     margin: 0;
   }
 
@@ -1047,12 +1056,6 @@ fieldset > label {
     padding-left: 0;
   }
 
-  fieldset {
-    max-width: none;
-    margin-top: 0;
-    margin-right: 2em;
-  }
-
   #header h1,
   #header h2,
   #header h3,
@@ -1082,21 +1085,10 @@ fieldset > label {
 
   .newUI #header > *:not(h1),
   .newUI #newUIoptions,
-  #newUIoptions > *,
-  fieldset label {
+  #newUIoptions > * {
     display: inline;
   }
 
-  fieldset {
-    border: none;
-    margin: 0;
-    padding: 0 0 1em;
-  }
-
-  fieldset legend {
-    display: none;
-  }
-
   #header label {
     white-space: nowrap;
   }

From 07a05185861d2c7d06d87cdd19f55d5a32ef2d98 Mon Sep 17 00:00:00 2001
From: eight <eight04@gmail.com>
Date: Wed, 6 Dec 2017 05:14:21 +0800
Subject: [PATCH 12/28] Add config dialog to popup (#283)

---
 manage.html                                  |   1 +
 manage/config-dialog.css                     | 102 ++++++++++++++++++
 manage/manage.css                            | 103 -------------------
 msgbox/msgbox.css                            |  19 ++++
 msgbox/msgbox.js                             |  23 +++++
 popup.html                                   |  18 +++-
 popup/hotkeys.js                             |  36 +++++--
 popup/popup.css                              |  26 +++--
 popup/popup.js                               |  24 +++++
 vendor-overwrites/colorpicker/colorpicker.js |  13 ++-
 10 files changed, 240 insertions(+), 125 deletions(-)
 create mode 100644 manage/config-dialog.css

diff --git a/manage.html b/manage.html
index e051f8ca..d8b7b4fe 100644
--- a/manage.html
+++ b/manage.html
@@ -6,6 +6,7 @@
   <title i18n-text="manageTitle"></title>
   <link rel="stylesheet" href="global.css">
   <link rel="stylesheet" href="manage/manage.css">
+  <link rel="stylesheet" href="manage/config-dialog.css">
   <link rel="stylesheet" href="msgbox/msgbox.css">
   <link rel="stylesheet" href="options/onoffswitch.css">
   <link rel="stylesheet" href="vendor-overwrites/colorpicker/colorpicker.css">
diff --git a/manage/config-dialog.css b/manage/config-dialog.css
new file mode 100644
index 00000000..73ceee9f
--- /dev/null
+++ b/manage/config-dialog.css
@@ -0,0 +1,102 @@
+/* config dialog */
+.config-dialog .config-heading {
+  float: right;
+  margin: -1.25rem 0 0 0;
+  font-size: 0.9em;
+}
+
+.config-dialog label {
+  display: flex;
+  padding: .75em 0;
+  align-items: center;
+}
+
+.config-dialog .select-resizer {
+  position: static;
+}
+
+.config-dialog label:first-child {
+  padding-top: 0;
+}
+
+.config-dialog label:last-child {
+  padding-bottom: 0;
+}
+
+.config-dialog label:not(:first-child) {
+  border-top: 1px dotted #ccc;
+}
+
+.config-dialog label > :first-child {
+  margin-right: 8px;
+  flex-grow: 1;
+}
+
+.config-dialog label:not([disabled]) > :first-child {
+  cursor: default;
+}
+
+.config-dialog label:not([disabled]):hover > :first-child {
+  text-shadow: 0 0 0.01px rgba(0, 0, 0, .25);
+  cursor: pointer;
+}
+
+.config-dialog input,
+.config-dialog select,
+.config-dialog .onoffswitch {
+  width: var(--onoffswitch-width);
+  margin: 0;
+  height: 2em;
+  box-sizing: border-box;
+  vertical-align: middle;
+}
+
+.config-dialog .select-resizer,
+.config-dialog select {
+  width: auto;
+  min-width: var(--onoffswitch-width);
+  max-width: 124px;
+  left: auto;
+  position: relative;
+}
+
+.config-dialog .onoffswitch {
+  height: auto;
+  margin: calc((2em - 12px) / 2) 0;
+}
+
+.config-dialog input[type="text"] {
+  padding-left: 0.25em;
+}
+
+.config-dialog label > :last-child {
+  box-sizing: border-box;
+  flex-shrink: 0;
+}
+
+.config-dialog label > :last-child:not(.onoffswitch):not(.select-resizer) > :not(:last-child) {
+  margin-right: 4px;
+}
+
+.cm-colorview::before,
+.color-swatch {
+  width: var(--onoffswitch-width) !important;
+  height: 20px !important;
+}
+
+.cm-colorview::before {
+  margin: 1px !important;
+}
+
+.color-swatch {
+  position: absolute;
+  border: 1px solid gray;
+  margin-top: -22px;
+  cursor: pointer;
+}
+
+.colorpicker-popup {
+  z-index: 2147483647 !important;
+  border: none !important;
+  box-shadow: 3px 3px 50px rgba(0,0,0,.5) !important;
+}
diff --git a/manage/manage.css b/manage/manage.css
index 60aa6ad3..c19e7097 100644
--- a/manage/manage.css
+++ b/manage/manage.css
@@ -865,109 +865,6 @@ input[id^="manage.newUI"] {
   text-overflow: ellipsis;
 }
 
-/* config dialog */
-.config-dialog .config-heading {
-  float: right;
-  margin: -1.25rem 0 0 0;
-  font-size: 0.9em;
-}
-
-.config-dialog label {
-  display: flex;
-  padding: .75em 0;
-  align-items: center;
-}
-
-.config-dialog .select-resizer {
-  position: static;
-}
-
-.config-dialog label:first-child {
-  padding-top: 0;
-}
-
-.config-dialog label:last-child {
-  padding-bottom: 0;
-}
-
-.config-dialog label:not(:first-child) {
-  border-top: 1px dotted #ccc;
-}
-
-.config-dialog label > :first-child {
-  margin-right: 8px;
-  flex-grow: 1;
-}
-
-.config-dialog label:not([disabled]) > :first-child {
-  cursor: default;
-}
-
-.config-dialog label:not([disabled]):hover > :first-child {
-  text-shadow: 0 0 0.01px rgba(0, 0, 0, .25);
-  cursor: pointer;
-}
-
-.config-dialog input,
-.config-dialog select,
-.config-dialog .onoffswitch {
-  width: var(--onoffswitch-width);
-  margin: 0;
-  height: 2em;
-  box-sizing: border-box;
-  vertical-align: middle;
-}
-
-.config-dialog .select-resizer,
-.config-dialog select {
-  width: auto;
-  min-width: var(--onoffswitch-width);
-  max-width: 124px;
-  left: auto;
-  position: relative;
-}
-
-.config-dialog .onoffswitch {
-  height: auto;
-  margin: calc((2em - 12px) / 2) 0;
-}
-
-.config-dialog input[type="text"] {
-  padding-left: 0.25em;
-}
-
-.config-dialog label > :last-child {
-  box-sizing: border-box;
-  flex-shrink: 0;
-}
-
-.config-dialog label > :last-child:not(.onoffswitch):not(.select-resizer) > :not(:last-child) {
-  margin-right: 4px;
-}
-
-.cm-colorview::before,
-.color-swatch {
-  width: var(--onoffswitch-width) !important;
-  height: 20px !important;
-}
-
-.cm-colorview::before {
-  margin: 1px !important;
-}
-
-.color-swatch {
-  position: absolute;
-  border: 1px solid gray;
-  margin-top: -22px;
-  cursor: pointer;
-}
-
-.colorpicker-popup {
-  z-index: 2147483647 !important;
-  border: none !important;
-  box-shadow: 3px 3px 50px rgba(0,0,0,.5) !important;
-}
-
 @keyframes fadein {
   from {
     opacity: 0;
diff --git a/msgbox/msgbox.css b/msgbox/msgbox.css
index da232671..1ababb94 100644
--- a/msgbox/msgbox.css
+++ b/msgbox/msgbox.css
@@ -132,6 +132,25 @@
   margin: 0 .375rem;
 }
 
+/* popup */
+#message-box.stylus-popup {
+  margin: 0;
+  align-items: center;
+  justify-content: center;
+}
+#message-box.stylus-popup > div {
+  max-width: 90vw;
+  top: auto;
+  right: auto;
+}
+#message-box.calculate-size {
+  white-space: nowrap;
+}
+#message-box.calculate-size > div {
+  max-width: none;
+  max-height: none;
+}
+
 @keyframes fadein {
   from {
     opacity: 0;
diff --git a/msgbox/msgbox.js b/msgbox/msgbox.js
index cbe3b44f..839da3d1 100644
--- a/msgbox/msgbox.js
+++ b/msgbox/msgbox.js
@@ -12,6 +12,25 @@ function messageBox({
   bindGlobalListeners();
   createElement();
   document.body.appendChild(messageBox.element);
+  if (location.href.includes('popup.html')) {
+    messageBox.isPopup = true;
+    messageBox.element.classList.add('stylus-popup');
+
+    // calculate size
+    messageBox.element.classList.add('calculate-size');
+    const {offsetWidth, offsetHeight} = messageBox.element.children[0];
+    messageBox.element.classList.remove('calculate-size');
+
+    // for colorpicker
+    const MIN_WIDTH = 350;
+    const MIN_HEIGHT = 250;
+
+    const width = Math.max(Math.min(offsetWidth / 0.9 + 2, 800), MIN_WIDTH);
+    const height = Math.max(Math.min(offsetHeight / 0.9 + 2, 600), MIN_HEIGHT);
+
+    document.body.style.minWidth = `${width}px`;
+    document.body.style.minHeight = `${height}px`;
+  }
   if (onshow) {
     onshow(messageBox.element);
   }
@@ -96,6 +115,10 @@ function messageBox({
     messageBox.element.remove();
     messageBox.element = null;
     messageBox.resolve = null;
+    if (messageBox.isPopup) {
+      document.body.style.minWidth = '';
+      document.body.style.minHeight = '';
+    }
   }
 }
 
diff --git a/popup.html b/popup.html
index f2710b62..c1c725b9 100644
--- a/popup.html
+++ b/popup.html
@@ -4,7 +4,6 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="global.css">
-  <link rel="stylesheet" href="popup/popup.css">
 
   <style id="firefox-transitions-bug-suppressor">
     /* restrict to FF */
@@ -33,6 +32,11 @@
       <div class="actions">
         <a href="#" class="enable" i18n-text="enableStyleLabel"></a>
         <a href="#" class="disable" i18n-text="disableStyleLabel"></a>
+        <a href="#" class="configure" i18n-title="configureStyle">
+          <svg class="svg-icon config" viewBox="0 0 14 16">
+            <path d="m6.2578 1.1191c-0.4526 0-0.81641 0.36381-0.81641 0.81641v0.69531a5.5932 5.5932 0 0 0-1.1328 0.47266l-0.49414-0.49414c-0.16002-0.16002-0.36907-0.24023-0.57812-0.24023-0.20905 0-0.41811 0.080216-0.57812 0.24023l-1.0488 1.0488c-0.32004 0.32004-0.32004 0.83621 0 1.1562l0.49023 0.49023a5.5932 5.5932 0 0 0-0.4668 1.1348h-0.69726c-0.4526 0-0.81641 0.36576-0.81641 0.81836v1.4844c0 0.4526 0.36381 0.81641 0.81641 0.81641h0.69726a5.5932 5.5932 0 0 0 0.4707 1.1328l-0.49414 0.49414c-0.32004 0.32004-0.32004 0.83426 0 1.1543l1.0488 1.0508c0.32004 0.32003 0.83621 0.32003 1.1562 0l0.49023-0.49024a5.5932 5.5932 0 0 0 1.1367 0.4668v0.69727c0 0.4526 0.36381 0.81641 0.81641 0.81641h1.4844c0.4526 0 0.81641-0.36381 0.81641-0.81641v-0.69727a5.5932 5.5932 0 0 0 1.1328-0.4707l0.49414 0.49414c0.32004 0.32003 0.83622 0.32003 1.1562 0l1.0488-1.0508c0.32004-0.32004 0.32004-0.83426 0-1.1543l-0.49023-0.49023a5.5932 5.5932 0 0 0 0.4668-1.1367h0.69726c0.4526 0 0.81641-0.36381 0.81641-0.81641v-1.4844c0-0.4526-0.36381-0.81836-0.81641-0.81836h-0.69726a5.5932 5.5932 0 0 0-0.4707-1.1309l0.49414-0.49414c0.32004-0.32004 0.32004-0.83621 0-1.1562l-1.0488-1.0488c-0.16002-0.16002-0.36907-0.24023-0.57812-0.24023s-0.41811 0.080216-0.57812 0.24023l-0.49023 0.49023a5.5932 5.5932 0 0 0-1.1367-0.4668v-0.69727c0-0.4526-0.36381-0.81641-0.81641-0.81641zm0.56836 0.7793h0.34766c0.22291 0 0.40234 0.17943 0.40234 0.40234v1.1621a4.5763 4.5763 0 0 1 2.2227 0.92383l0.82422-0.82422c0.15762-0.15762 0.41074-0.15762 0.56836 0l0.24609 0.24609c0.15762 0.15762 0.15762 0.41074 0 0.56836l-0.82226 0.82227a4.5763 4.5763 0 0 1 0.91797 2.2246h1.166c0.22291 0 0.40234 0.17943 0.40234 0.40234v0.34766c0 0.22291-0.17943 0.40234-0.40234 0.40234h-1.1641a4.5763 4.5763 0 0 1-0.92188 2.2227l0.82422 0.82422c0.15762 0.15762 0.15762 0.41074 0 0.56836l-0.24609 0.24609c-0.15762 0.15763-0.41074 0.15763-0.56836 0l-0.82227-0.82226a4.5763 4.5763 0 0 1-2.2246 0.91797v1.166c0 0.22291-0.17943 0.40234-0.40234 0.40234h-0.34766c-0.22291 0-0.40234-0.17943-0.40234-0.40234v-1.1641a4.5763 4.5763 0 0 1-2.2227-0.92188l-0.82422 0.82422c-0.15762 0.15763-0.41074 0.15763-0.56836 0l-0.24609-0.24609c-0.15762-0.15762-0.15762-0.41074 0-0.56836l0.82226-0.82226a4.5763 4.5763 0 0 1-0.91797-2.2246h-1.166c-0.22291 0-0.40234-0.17943-0.40234-0.40234v-0.34766c0-0.22291 0.17943-0.40234 0.40234-0.40234h1.1641a4.5763 4.5763 0 0 1 0.92188-2.2227l-0.82422-0.82422c-0.15762-0.15762-0.15762-0.41074 0-0.56836l0.24609-0.24609c0.15762-0.15762 0.41074-0.15762 0.56836 0l0.82227 0.82227a4.5763 4.5763 0 0 1 2.2246-0.91797v-1.166c0-0.22291 0.17943-0.40234 0.40234-0.40234zm0.17383 2.7109a3.3898 3.3898 0 0 0-3.3906 3.3906 3.3898 3.3898 0 0 0 3.3906 3.3887 3.3898 3.3898 0 0 0 3.3906-3.3887 3.3898 3.3898 0 0 0-3.3906-3.3906zm0 1.1875a2.2034 2.2034 0 0 1 2.2031 2.2031 2.2034 2.2034 0 0 1-2.2031 2.2031 2.2034 2.2034 0 0 1-2.2031-2.2031 2.2034 2.2034 0 0 1 2.2031-2.2031z"/>
+          </svg>
+        </a>
         <a class="style-edit-link" href="edit.html?id=" i18n-title="editStyleLabel">
           <svg class="svg-icon edit" viewBox="0 0 14 16">
             <path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 0 1 1.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"/>
@@ -81,11 +85,23 @@
     </div>
   </template>
 
+  <link rel="stylesheet" href="vendor-overwrites/colorpicker/colorpicker.css">
+  <script src="vendor-overwrites/colorpicker/colorpicker.js"></script>
+
+  <link rel="stylesheet" href="msgbox/msgbox.css">
+  <script src="msgbox/msgbox.js"></script>
+
+  <link rel="stylesheet" href="options/onoffswitch.css">
+  <link rel="stylesheet" href="manage/config-dialog.css">
+  <script src="manage/config-dialog.js"></script>
+
   <script src="js/dom.js"></script>
   <script src="js/messaging.js"></script>
   <script src="js/localization.js"></script>
   <script src="js/prefs.js"></script>
   <script src="content/apply.js"></script>
+
+  <link rel="stylesheet" href="popup/popup.css">
   <script src="popup/popup.js"></script>
   <script src="popup/hotkeys.js"></script>
 </head>
diff --git a/popup/hotkeys.js b/popup/hotkeys.js
index 053d7e1c..dedf491b 100644
--- a/popup/hotkeys.js
+++ b/popup/hotkeys.js
@@ -1,18 +1,36 @@
 /* global applyOnMessage installed */
 'use strict';
 
-window.addEventListener('showStyles:done', function _() {
-  window.removeEventListener('showStyles:done', _);
+// eslint-disable-next-line no-var
+var hotkeys = (() => {
+  let togglablesShown;
+  let togglables;
+  let enabled = false;
+  let ready = false;
 
-  let togglablesShown = true;
-  let togglables = getTogglables();
+  window.addEventListener('showStyles:done', function _() {
+    window.removeEventListener('showStyles:done', _);
+    togglablesShown = true;
+    togglables = getTogglables();
+    ready = true;
+    setState(true);
+    initHotkeyInfo();
+  });
 
-  window.addEventListener('keydown', onKeyDown);
-  initHotkeyInfo();
-  return;
+  return {setState};
+
+  function setState(newState = !enabled) {
+    if (!ready) {
+      throw new Error('hotkeys no ready');
+    }
+    if (newState !== enabled) {
+      window[`${newState ? 'add' : 'remove'}EventListener`]('keydown', onKeyDown);
+      enabled = newState;
+    }
+  }
 
   function onKeyDown(event) {
-    if (event.ctrlKey || event.altKey || event.metaKey) {
+    if (event.ctrlKey || event.altKey || event.metaKey || !enabled) {
       return;
     }
     let entry;
@@ -165,4 +183,4 @@ window.addEventListener('showStyles:done', function _() {
       });
     }
   }
-});
+})();
diff --git a/popup/popup.css b/popup/popup.css
index d058ecc2..ed852eb3 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -1,3 +1,12 @@
+:root {
+  --header-width: 280px;
+  --checkbox-width: 24px;
+  --name-padding-left: 40px;
+  --name-padding-right: 40px;
+  --actions-width: 75px;
+  --onoffswitch-width: 60px;
+}
+
 html, body {
   height: min-content;
 }
@@ -14,7 +23,7 @@ body {
   color: #000;
 }
 
-body > div:not(#installed) {
+body > div:not(#installed):not(#message-box):not(.colorpicker-popup) {
   margin-left: 9px;
   margin-right: 9px;
 }
@@ -216,14 +225,15 @@ html[style] .entry:nth-child(10):before {
   content: "0";
 }
 
-.entry .style-edit-link {
-  margin-right: 2px;
+.entry .actions {
+  margin-left: -1px;
+  margin-right: -1px;
 }
 
-.entry .style-edit-link,
-.entry .delete {
+.entry .actions > * {
   display: inline-block;
-  padding: 0 1px 0;
+  padding: 0 1px;
+  margin: 0 1px;
 }
 
 .not-applied .checker,
@@ -331,8 +341,8 @@ body.blocked .actions > .main-controls {
 
 /* Never shown, but can be enabled with a style */
 
-.enable,
-.disable {
+.entry .actions > .enable,
+.entry .actions > .disable {
   display: none;
 }
 
diff --git a/popup/popup.js b/popup/popup.js
index 6b90bfb9..ef3c8e1b 100644
--- a/popup/popup.js
+++ b/popup/popup.js
@@ -1,3 +1,5 @@
+/* global configDialog hotkeys */
+
 'use strict';
 
 let installed;
@@ -245,6 +247,7 @@ function createStyleElement({
   Object.assign(entry, {
     id: ENTRY_ID_PREFIX_RAW + style.id,
     styleId: style.id,
+    styleIsUsercss: Boolean(style.usercssData),
     className: entry.className + ' ' + (style.enabled ? 'enabled' : 'disabled'),
     onmousedown: handleEvent.maybeEdit,
   });
@@ -275,9 +278,18 @@ function createStyleElement({
     }
   });
 
+  const config = $('.configure', entry);
+  if (!style.usercssData && style.updateUrl && style.updateUrl.includes('?') && style.url) {
+    config.href = style.url;
+    config.target = '_blank';
+  } else if (!style.usercssData || !Object.keys(style.usercssData.vars || {}).length) {
+    config.style.display = 'none';
+  }
+
   $('.enable', entry).onclick = handleEvent.toggle;
   $('.disable', entry).onclick = handleEvent.toggle;
   $('.delete', entry).onclick = handleEvent.delete;
+  $('.configure', entry).onclick = handleEvent.configure;
 
   invokeOrPostpone(!postponeDetect, detectSloppyRegexps, {entry, style});
 
@@ -347,6 +359,18 @@ Object.assign(handleEvent, {
     }
   },
 
+  configure(event) {
+    const {styleId, styleIsUsercss} = handleEvent.getClickedStyleElement(event);
+    if (styleIsUsercss) {
+      getStylesSafe({id: styleId}).then(([style]) => {
+        hotkeys.setState(false);
+        configDialog(style).then(() => {
+          hotkeys.setState(true);
+        });
+      });
+    }
+  },
+
   indicator(event) {
     const entry = handleEvent.getClickedStyleElement(event);
     const info = template.regexpProblemExplanation.cloneNode(true);
diff --git a/vendor-overwrites/colorpicker/colorpicker.js b/vendor-overwrites/colorpicker/colorpicker.js
index d52c1fec..1fef896f 100644
--- a/vendor-overwrites/colorpicker/colorpicker.js
+++ b/vendor-overwrites/colorpicker/colorpicker.js
@@ -550,10 +550,7 @@
   }
 
   function onMouseUp(event) {
-    if (releaseMouse(event, ['saturation', 'hue', 'opacity']) &&
-        !event.target.closest('.codemirror-colorview, .colorpicker-popup, .CodeMirror')) {
-      hide();
-    }
+    releaseMouse(event, ['saturation', 'hue', 'opacity']);
   }
 
   function onMouseMove(event) {
@@ -604,6 +601,12 @@
     }
   }
 
+  function onMouseDown(event) {
+    if (!event.target.closest('.colorpicker-popup')) {
+      hide();
+    }
+  }
+
   //endregion
   //region Event utilities
 
@@ -660,6 +663,7 @@
 
   function registerEvents() {
     window.addEventListener('keydown', onKeyDown, true);
+    window.addEventListener('mousedown', onMouseDown, true);
     window.addEventListener('close-colorpicker-popup', onCloseRequest, true);
     $root.addEventListener('mouseleave', snooze);
     $root.addEventListener('mouseenter', stopSnoozing);
@@ -681,6 +685,7 @@
 
   function unregisterEvents() {
     window.removeEventListener('keydown', onKeyDown, true);
+    window.removeEventListener('mousedown', onMouseDown, true);
     window.removeEventListener('close-colorpicker-popup', hide, true);
     $root.removeEventListener('mouseleave', snooze);
     $root.removeEventListener('mouseenter', stopSnoozing);

From 85c67872a5dcc2959f5ccc9eb3c9ea560e885dea Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Wed, 6 Dec 2017 00:24:27 +0300
Subject: [PATCH 13/28] make colorpicker notify embedder on closing

re-enables Esc key in config-dialog after colorpicker closed itself due to an outside click
---
 vendor-overwrites/colorpicker/colorpicker.js | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/vendor-overwrites/colorpicker/colorpicker.js b/vendor-overwrites/colorpicker/colorpicker.js
index 1fef896f..4668406c 100644
--- a/vendor-overwrites/colorpicker/colorpicker.js
+++ b/vendor-overwrites/colorpicker/colorpicker.js
@@ -218,8 +218,11 @@
     setFromHexLettercaseElement();
   }
 
-  function hide() {
+  function hide({notify = true} = {}) {
     if (shown) {
+      if (notify) {
+        colorpickerCallback('');
+      }
       unregisterEvents();
       focusNoScroll(prevFocusedElement);
       $root.remove();
@@ -553,6 +556,12 @@
     releaseMouse(event, ['saturation', 'hue', 'opacity']);
   }
 
+  function onMouseDown(event) {
+    if (event.button === 0 && !event.target.closest('.colorpicker-popup')) {
+      hide();
+    }
+  }
+
   function onMouseMove(event) {
     if (event.button !== 0) {
       return;
@@ -589,7 +598,7 @@
           colorpickerCallback(e.which === 27 ? '' : undefined);
           e.preventDefault();
           e.stopPropagation();
-          hide();
+          hide({notify: false});
           break;
       }
     }
@@ -601,12 +610,6 @@
     }
   }
 
-  function onMouseDown(event) {
-    if (!event.target.closest('.colorpicker-popup')) {
-      hide();
-    }
-  }
-
   //endregion
   //region Event utilities
 

From de74c707784648dd48ba1c066aa5d819431637b3 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Wed, 6 Dec 2017 01:17:22 +0300
Subject: [PATCH 14/28] actually use selected values in popup config dialog

---
 manage/config-dialog.js | 61 +++++++++++++++++++++++------------------
 1 file changed, 35 insertions(+), 26 deletions(-)

diff --git a/manage/config-dialog.js b/manage/config-dialog.js
index 6b24fdaa..972cb92d 100644
--- a/manage/config-dialog.js
+++ b/manage/config-dialog.js
@@ -84,25 +84,28 @@ function configDialog(style) {
       let children;
       switch (va.type) {
         case 'color':
-          va.inputColor = $create('.color-swatch', {va, onclick: showColorpicker});
           children = [
             $create('.cm-colorview', [
-              va.inputColor,
+              va.inputColor = $create('.color-swatch', {
+                va,
+                onclick: showColorpicker
+              }),
             ]),
           ];
           break;
 
         case 'checkbox':
-          va.input = $create('input.slider', {type: 'checkbox'});
-          va.input.onchange = () => {
-            va.dirty = true;
-            va.value = String(Number(va.input.checked));
-          };
           children = [
             $create('span.onoffswitch', [
-              va.input,
+              va.input = $create('input.slider', {
+                type: 'checkbox',
+                onchange() {
+                  va.dirty = true;
+                  va.value = String(Number(va.input.checked));
+                },
+              }),
               $create('span'),
-            ])
+            ]),
           ];
           break;
 
@@ -110,26 +113,32 @@ function configDialog(style) {
         case 'dropdown':
         case 'image':
           // TODO: a image picker input?
-          va.input = $create('.select-resizer', [
-            $create('select', 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'})),
-          ]);
-          va.input.onchange = () => {
-            va.dirty = true;
-            va.value = va.input.value;
-          };
-          children = [va.input];
+          children = [
+            $create('.select-resizer', [
+              va.input = $create('select', {
+                onchange() {
+                  va.dirty = true;
+                  va.value = this.value;
+                }
+              },
+              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;
 
         default:
-          va.input = $create('input', {type: 'text'});
-          va.input.oninput = () => {
-            va.dirty = true;
-            va.value = va.input.value;
-          };
-          children = [va.input];
+          children = [
+            va.input = $create('input', {
+              type: 'text',
+              oninput() {
+                va.dirty = true;
+                va.value = va.input.value;
+              },
+            }),
+          ];
           break;
       }
       elements.push(

From e776a45dfab7ac770f2d2b2343098298fd4d365a Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Wed, 6 Dec 2017 02:59:12 +0300
Subject: [PATCH 15/28] allow continuous tweaking in usercss config dialog

* don't close on clicking "save" to allow continuous tweaking
* dirty item's label is marked with * and switches to italic
* "save" button is enabled when some value differs from saved
* "use default" button is enabled when some value differs from its default
* "close" becomes "cancel" when there are unsaved changed values
---
 manage/config-dialog.css |  10 +++
 manage/config-dialog.js  | 137 +++++++++++++++++++++++++++++----------
 msgbox/msgbox.css        |   7 --
 msgbox/msgbox.js         |  31 ++-------
 4 files changed, 116 insertions(+), 69 deletions(-)

diff --git a/manage/config-dialog.css b/manage/config-dialog.css
index 73ceee9f..9edc3e1a 100644
--- a/manage/config-dialog.css
+++ b/manage/config-dialog.css
@@ -41,6 +41,16 @@
   cursor: pointer;
 }
 
+.config-dialog .dirty:after {
+  content: "*";
+  position: absolute;
+  left: 6px;
+}
+
+.config-dialog .dirty {
+  font-style: italic;
+}
+
 .config-dialog input,
 .config-dialog select,
 .config-dialog .onoffswitch {
diff --git a/manage/config-dialog.js b/manage/config-dialog.js
index 972cb92d..e8929ab1 100644
--- a/manage/config-dialog.js
+++ b/manage/config-dialog.js
@@ -6,35 +6,77 @@ function configDialog(style) {
   const varsHash = deepCopy(data.vars) || {};
   const varNames = Object.keys(varsHash);
   const vars = varNames.map(name => varsHash[name]);
+  let varsInitial = getInitialValues(varsHash);
+
   const elements = [];
   const colorpicker = window.colorpicker();
+  const isPopup = location.href.includes('popup.html');
+  const buttons = {};
 
   buildConfigForm();
   renderValues();
 
   return messageBox({
     title: `${style.name} v${data.version}`,
-    className: 'config-dialog',
+    className: 'config-dialog' + (isPopup ? ' stylus-popup' : ''),
     contents: [
       $create('.config-heading', data.supportURL &&
         $createLink({className: '.external-support', href: data.supportURL}, t('externalFeedback'))),
       $create('.config-body', elements)
     ],
     buttons: [
-      t('confirmSave'),
-      {
-        textContent: t('confirmDefault'),
-        onclick: useDefault
-      },
-      t('confirmCancel')
-    ]
-  }).then(({button, esc}) => {
-    if (button !== 1) {
-      colorpicker.hide();
+      {textContent: t('confirmSave'), dataset: {cmd: 'save'}, disabled: true, onclick: save},
+      {textContent: t('confirmDefault'), dataset: {cmd: 'default'}, onclick: useDefault},
+      {textContent: t('confirmClose'), dataset: {cmd: 'close'}},
+    ],
+    onshow,
+  }).then(() => {
+    document.body.style.minWidth = '';
+    document.body.style.minHeight = '';
+    colorpicker.hide();
+  });
+
+  function getInitialValues(source) {
+    const data = {};
+    for (const name of varNames) {
+      const va = source[name];
+      data[name] = isDefault(va) ? va.default : va.value;
     }
-    if (button > 0 || esc || !vars.length || !vars.some(va => va.dirty)) {
+    return data;
+  }
+
+  function onshow(box) {
+    if (isPopup) {
+      adjustSizeForPopup(box);
+    }
+    box.addEventListener('change', onchange);
+    buttons.save = $('[data-cmd="save"]', box);
+    buttons.default = $('[data-cmd="default"]', box);
+    buttons.close = $('[data-cmd="close"]', box);
+  }
+
+  function onchange({target}) {
+    // invoked after element's own onchange so 'va' contains the updated value
+    const va = target.va;
+    if (va) {
+      va.dirty = varsInitial[va.name] !== (isDefault(va) ? va.default : va.value);
+      target.closest('label').classList.toggle('dirty', va.dirty);
+      updateButtons();
+    }
+  }
+
+  function updateButtons() {
+    const someDirty = vars.some(va => va.dirty);
+    buttons.save.disabled = !someDirty;
+    buttons.default.disabled = vars.every(isDefault);
+    buttons.close.textContent = t(someDirty ? 'confirmCancel' : 'confirmClose');
+  }
+
+  function save() {
+    if (!vars.length || !vars.some(va => va.dirty)) {
       return;
     }
+    style.enabled = true;
     style.reason = 'config';
     const styleVars = style.usercssData.vars;
     const bgStyle = BG.cachedStyles.byId.get(style.id);
@@ -52,7 +94,7 @@ function configDialog(style) {
         error = ['type ', '*' + va.type, ' != ', '*' + bgva.type];
       } else
       if ((va.type === 'select' || va.type === 'dropdown') &&
-          va.value !== null && va.value !== undefined &&
+          !isDefault(va) &&
           bgva.options.every(o => o.name !== va.value)) {
         error = `'${va.value}' not in the updated '${va.type}' list`;
       } else if (!va.dirty) {
@@ -76,8 +118,24 @@ function configDialog(style) {
             $create({tag: 'li', appendChild: msg}))),
       ]);
     }
-    return numValid && BG.usercssHelper.save(style);
-  });
+    return numValid && BG.usercssHelper.save(style).then(saved => {
+      varsInitial = getInitialValues(deepCopy(saved.usercssData.vars));
+      vars.forEach(va => onchange({target: va.input}));
+      updateButtons();
+    });
+  }
+
+  function useDefault() {
+    for (const va of vars) {
+      va.value = null;
+      onchange({target: va.input});
+    }
+    renderValues();
+  }
+
+  function isDefault(va) {
+    return va.value === null || va.value === undefined || va.value === va.default;
+  }
 
   function buildConfigForm() {
     for (const va of vars) {
@@ -86,7 +144,7 @@ function configDialog(style) {
         case 'color':
           children = [
             $create('.cm-colorview', [
-              va.inputColor = $create('.color-swatch', {
+              va.input = $create('.color-swatch', {
                 va,
                 onclick: showColorpicker
               }),
@@ -98,10 +156,10 @@ function configDialog(style) {
           children = [
             $create('span.onoffswitch', [
               va.input = $create('input.slider', {
+                va,
                 type: 'checkbox',
                 onchange() {
-                  va.dirty = true;
-                  va.value = String(Number(va.input.checked));
+                  va.value = va.input.checked ? '1' : '0';
                 },
               }),
               $create('span'),
@@ -116,8 +174,8 @@ function configDialog(style) {
           children = [
             $create('.select-resizer', [
               va.input = $create('select', {
+                va,
                 onchange() {
-                  va.dirty = true;
                   va.value = this.value;
                 }
               },
@@ -132,10 +190,11 @@ function configDialog(style) {
         default:
           children = [
             va.input = $create('input', {
+              va,
               type: 'text',
               oninput() {
-                va.dirty = true;
-                va.value = va.input.value;
+                va.value = this.value;
+                this.dispatchEvent(new Event('change', {bubbles: true}));
               },
             }),
           ];
@@ -151,10 +210,9 @@ function configDialog(style) {
 
   function renderValues() {
     for (const va of vars) {
-      const useDefault = va.value === null || va.value === undefined;
-      const value = useDefault ? va.default : va.value;
+      const value = isDefault(va) ? va.default : va.value;
       if (va.type === 'color') {
-        va.inputColor.style.backgroundColor = value;
+        va.input.style.backgroundColor = value;
         if (colorpicker.options.va === va) {
           colorpicker.setColor(value);
         }
@@ -166,15 +224,6 @@ function configDialog(style) {
     }
   }
 
-  function useDefault() {
-    for (const va of vars) {
-      const hasValue = va.value !== null && va.value !== undefined;
-      va.dirty = hasValue && va.value !== va.default;
-      va.value = null;
-    }
-    renderValues();
-  }
-
   function showColorpicker() {
     window.removeEventListener('keydown', messageBox.listeners.key, true);
     const box = $('#message-box-contents');
@@ -191,9 +240,9 @@ function configDialog(style) {
 
   function onColorChanged(newColor) {
     if (newColor) {
-      this.va.dirty = true;
       this.va.value = newColor;
-      this.va.inputColor.style.backgroundColor = newColor;
+      this.va.input.style.backgroundColor = newColor;
+      this.va.input.dispatchEvent(new Event('change', {bubbles: true}));
     }
     debounce(restoreEscInDialog);
   }
@@ -203,4 +252,22 @@ function configDialog(style) {
       window.addEventListener('keydown', messageBox.listeners.key, true);
     }
   }
+
+  function adjustSizeForPopup(box) {
+    box.style = 'white-space: nowrap !important';
+    box.firstElementChild.style = 'max-width: none; max-height: none;'.replace(/;/g, '!important;');
+    const {offsetWidth, offsetHeight} = box.firstElementChild;
+    box.style = box.firstElementChild.style = '';
+
+    const colorpicker = document.body.appendChild(
+      $create('.colorpicker-popup', {style: 'display: none!important'}));
+    const MIN_WIDTH = parseFloat(getComputedStyle(colorpicker).width) || 350;
+    const MIN_HEIGHT = 250;
+    colorpicker.remove();
+
+    const width = Math.max(Math.min(offsetWidth / 0.9 + 2, 800), MIN_WIDTH);
+    const height = Math.max(Math.min(offsetHeight / 0.9 + 2, 600), MIN_HEIGHT);
+    document.body.style.setProperty('min-width', width + 'px', 'important');
+    document.body.style.setProperty('min-height', height + 'px', 'important');
+  }
 }
diff --git a/msgbox/msgbox.css b/msgbox/msgbox.css
index 1ababb94..cd6cf48d 100644
--- a/msgbox/msgbox.css
+++ b/msgbox/msgbox.css
@@ -143,13 +143,6 @@
   top: auto;
   right: auto;
 }
-#message-box.calculate-size {
-  white-space: nowrap;
-}
-#message-box.calculate-size > div {
-  max-width: none;
-  max-height: none;
-}
 
 @keyframes fadein {
   from {
diff --git a/msgbox/msgbox.js b/msgbox/msgbox.js
index 839da3d1..c02b1eef 100644
--- a/msgbox/msgbox.js
+++ b/msgbox/msgbox.js
@@ -12,25 +12,6 @@ function messageBox({
   bindGlobalListeners();
   createElement();
   document.body.appendChild(messageBox.element);
-  if (location.href.includes('popup.html')) {
-    messageBox.isPopup = true;
-    messageBox.element.classList.add('stylus-popup');
-
-    // calculate size
-    messageBox.element.classList.add('calculate-size');
-    const {offsetWidth, offsetHeight} = messageBox.element.children[0];
-    messageBox.element.classList.remove('calculate-size');
-
-    // for colorpicker
-    const MIN_WIDTH = 350;
-    const MIN_HEIGHT = 250;
-
-    const width = Math.max(Math.min(offsetWidth / 0.9 + 2, 800), MIN_WIDTH);
-    const height = Math.max(Math.min(offsetHeight / 0.9 + 2, 600), MIN_HEIGHT);
-
-    document.body.style.minWidth = `${width}px`;
-    document.body.style.minHeight = `${height}px`;
-  }
   if (onshow) {
     onshow(messageBox.element);
   }
@@ -89,11 +70,11 @@ function messageBox({
           $create(`#${id}-contents`, tHTML(contents)),
           $create(`#${id}-buttons`,
             buttons.map((content, buttonIndex) => content &&
-              $create('button', {
+              $create('button', Object.assign({
                 buttonIndex,
-                textContent: content.textContent || content,
-                onclick: content.onclick || messageBox.listeners.button,
-              }))),
+                textContent: typeof content === 'object' ? '' : content,
+                onclick: messageBox.listeners.button,
+              }, typeof content === 'object' && content)))),
         ]),
       ]);
   }
@@ -115,10 +96,6 @@ function messageBox({
     messageBox.element.remove();
     messageBox.element = null;
     messageBox.resolve = null;
-    if (messageBox.isPopup) {
-      document.body.style.minWidth = '';
-      document.body.style.minHeight = '';
-    }
   }
 }
 

From 30aeb8d2c4e936f11195e05e09ff2d66a76c65aa Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Wed, 6 Dec 2017 03:16:53 +0300
Subject: [PATCH 16/28] don't fade popup config dialog backdrop as it looks
 glitchy

---
 manage/config-dialog.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/manage/config-dialog.js b/manage/config-dialog.js
index e8929ab1..dacaafc6 100644
--- a/manage/config-dialog.js
+++ b/manage/config-dialog.js
@@ -48,6 +48,7 @@ function configDialog(style) {
   function onshow(box) {
     if (isPopup) {
       adjustSizeForPopup(box);
+      box.style.animationDuration = '0s';
     }
     box.addEventListener('change', onchange);
     buttons.save = $('[data-cmd="save"]', box);

From 579ffcc68d8d2f68b4b40e277ee05b8f745ca11f Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Wed, 6 Dec 2017 03:34:53 +0300
Subject: [PATCH 17/28] removed the extra tag

---
 edit.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/edit.html b/edit.html
index 54b474e3..a1a712ce 100644
--- a/edit.html
+++ b/edit.html
@@ -322,7 +322,7 @@
       <h2><span id="sections-heading" i18n-text="styleSectionsTitle"></span><svg id="sections-help" class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg></h2>
     </section>
     <div id="help-popup">
-      <div class="title"></div><svg id="sections-help" class="svg-icon dismiss"><use xlink:href="#svg-icon-close"/></svg></svg>
+      <div class="title"></div><svg id="sections-help" class="svg-icon dismiss"><use xlink:href="#svg-icon-close"/></svg>
       <div class="contents"></div>
     </div>
 

From 31941110e8877dd7c46098a4ca22e0057681473c Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Wed, 6 Dec 2017 04:18:51 +0300
Subject: [PATCH 18/28] manage: show "x" icon after #filters-stats to reset
 active filters

implements #286
---
 manage.html       |  9 ++++++++-
 manage/filters.js | 22 ++++++++++++++++++++++
 manage/manage.css | 19 +++++++++++++++++++
 3 files changed, 49 insertions(+), 1 deletion(-)

diff --git a/manage.html b/manage.html
index d8b7b4fe..1d23f1ba 100644
--- a/manage.html
+++ b/manage.html
@@ -166,7 +166,14 @@
   <h1 id="manage-heading" i18n-text="manageHeading"></h1>
 
   <details id="filters" data-pref="manage.filters.expanded">
-    <summary><h2 i18n-text="manageFilters">: <span id="filters-stats"></span></h2></summary>
+    <summary>
+      <h2 i18n-text="manageFilters">: <span id="filters-stats"></span></h2>
+      <svg id="reset-filters" class="svg-icon" viewBox="0 0 20 20">
+        <title i18n-text="genericResetLabel"></title>
+        <polygon points="16.2,5.5 14.5,3.8 10,8.3 5.5,3.8 3.8,5.5 8.3,10 3.8,14.5
+                         5.5,16.2 10,11.7 14.5,16.2 16.2,14.5 11.7,10 "/>
+      </svg>
+    </summary>
 
     <div class="filter-selection">
       <label>
diff --git a/manage/filters.js b/manage/filters.js
index b8c50909..522694f6 100644
--- a/manage/filters.js
+++ b/manage/filters.js
@@ -76,6 +76,28 @@ onDOMready().then(onBackgroundReady).then(() => {
     }
   });
 
+  $('#reset-filters').onclick = event => {
+    event.preventDefault();
+    if (!filtersSelector.hide) {
+      return;
+    }
+    for (const el of $$('#filters [data-filter]')) {
+      let value;
+      if (el.type === 'checkbox' && el.checked) {
+        value = el.checked = false;
+      } else if (el.value) {
+        value = el.value = '';
+      }
+      if (value !== undefined) {
+        el.lastValue = value;
+        if (el.id in prefs.readOnlyValues) {
+          prefs.set(el.id, false);
+        }
+      }
+    }
+    filterOnChange({forceRefilter: true});
+  };
+
   // Adjust width after selects are visible
   prefs.subscribe(['manage.filters.expanded'], () => {
     const el = $('#filters');
diff --git a/manage/manage.css b/manage/manage.css
index c19e7097..234d334d 100644
--- a/manage/manage.css
+++ b/manage/manage.css
@@ -793,6 +793,25 @@ input[id^="manage.newUI"] {
   top: -2px;
 }
 
+#reset-filters {
+  position: absolute;
+  margin-top: 2px;
+  fill: hsla(180, 50%, 27%, .5);
+  width: 24px; /* widen the click area a bit */
+  height: 20px;
+  padding: 2px;
+  box-sizing: border-box;
+}
+
+#reset-filters:hover {
+  fill: hsla(180, 50%, 27%, 1);
+}
+
+.firefox #reset-filters {
+  margin-top: 4px;
+}
+
+#filters:not(.active) #reset-filters,
 #filters:not(.active) #filters-stats {
   display: none;
 }

From a712d92b5268c06ca6f6680bf66bab8ffbaca930 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Wed, 6 Dec 2017 04:21:30 +0300
Subject: [PATCH 19/28] fixup db621b86: add .active class only to the block
 title

---
 manage/filters.js | 2 +-
 manage/manage.css | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/manage/filters.js b/manage/filters.js
index 522694f6..e98b754b 100644
--- a/manage/filters.js
+++ b/manage/filters.js
@@ -333,7 +333,7 @@ function showFiltersStats() {
     debounce(showFiltersStats, 100);
     return;
   }
-  $('#filters').classList.toggle('active', filtersSelector.hide !== '');
+  $('#filters summary').classList.toggle('active', filtersSelector.hide !== '');
   const numTotal = BG.cachedStyles.list.length;
   const numHidden = installed.getElementsByClassName('entry hidden').length;
   const numShown = Math.min(numTotal - numHidden, installed.children.length);
diff --git a/manage/manage.css b/manage/manage.css
index 234d334d..dfc1affd 100644
--- a/manage/manage.css
+++ b/manage/manage.css
@@ -811,8 +811,8 @@ input[id^="manage.newUI"] {
   margin-top: 4px;
 }
 
-#filters:not(.active) #reset-filters,
-#filters:not(.active) #filters-stats {
+#filters summary:not(.active) #reset-filters,
+#filters summary:not(.active) #filters-stats {
   display: none;
 }
 

From aa4407721279cbab0fb3d73c0ebe89cc5dfd4678 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Wed, 6 Dec 2017 06:22:40 +0300
Subject: [PATCH 20/28] rename #newStyleAsUsercss-wrapper to a standard CSS
 scheme

---
 manage.html       | 2 +-
 manage/manage.css | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/manage.html b/manage.html
index 1d23f1ba..cb4793be 100644
--- a/manage.html
+++ b/manage.html
@@ -263,7 +263,7 @@
     <a href="edit.html">
       <button id="add-style-label" i18n-text="addStyleLabel"></button>
     </a>
-    <label id="newStyleAsUsercss-wrapper">
+    <label id="add-style-as-usercss-wrapper">
       <input type="checkbox" id="newStyleAsUsercss">
       <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
       <span i18n-text="manageNewStyleAsUsercss" i18n-title="optionsAdvancedNewStyleAsUsercss"></span>
diff --git a/manage/manage.css b/manage/manage.css
index dfc1affd..0de5b53b 100644
--- a/manage/manage.css
+++ b/manage/manage.css
@@ -91,11 +91,11 @@ select {
   margin-bottom: .25em;
 }
 
-#newStyleAsUsercss-wrapper {
+#add-style-as-usercss-wrapper {
   display: inline-flex;
 }
 
-#newStyleAsUsercss-wrapper:not(:hover) input:not(:checked) ~ a svg {
+#add-style-as-usercss-wrapper:not(:hover) input:not(:checked) ~ a svg {
   fill: #aaa;
 }
 

From 8f9705c165be1edce2371e8a0a5d64f6ba06d576 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Wed, 6 Dec 2017 06:29:54 +0300
Subject: [PATCH 21/28] recognize USO vars ending with -rgb

---
 edit/codemirror-default.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/edit/codemirror-default.js b/edit/codemirror-default.js
index f2c2c452..e68d9f35 100644
--- a/edit/codemirror-default.js
+++ b/edit/codemirror-default.js
@@ -193,7 +193,8 @@ CodeMirror.hint && (() => {
         string[pos - 3] === ']' &&
         string[pos - 4] === ']') {
       const vars = typeof editor !== 'undefined' && (editor.getStyle().usercssData || {}).vars;
-      if (vars && Object.hasOwnProperty.call(vars, string.slice(start + 4, pos - 4))) {
+      const name = vars && string.slice(start + 4, pos - 4);
+      if (vars && Object.hasOwnProperty.call(vars, name.endsWith('-rgb') ? name.slice(0, -4) : name)) {
         token[0] = USO_VALID_VAR;
       } else {
         token[0] = USO_INVALID_VAR;

From 974b1f9152428695e1a3865d051b4ae478593366 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Wed, 6 Dec 2017 06:33:10 +0300
Subject: [PATCH 22/28] csslint: don't throw on errors caused by USO vars

---
 vendor-overwrites/csslint/csslint-worker.js | 34 ++++++++-------------
 1 file changed, 12 insertions(+), 22 deletions(-)

diff --git a/vendor-overwrites/csslint/csslint-worker.js b/vendor-overwrites/csslint/csslint-worker.js
index 03d92460..c5757539 100644
--- a/vendor-overwrites/csslint/csslint-worker.js
+++ b/vendor-overwrites/csslint/csslint-worker.js
@@ -3181,6 +3181,17 @@ Parser.prototype = function() {
              * @private
              */
             _unexpectedToken: function(token) {
+                for (let i = tokenStream._ltIndex - 1; i >= 0; i--) {
+                    const {type, value} = tokenStream._lt[i];
+                    if (type === tokenStream._tokenData.S) {
+                        // NOP
+                    } else if (type === tokenStream._tokenData.COMMENT &&
+                            value[2] === '[' && value[3] === '[' && value.endsWith(']]*/')) {
+                        return;
+                    } else {
+                        break;
+                    }
+                }
                 throw new SyntaxError("Unexpected token '" + token.value + "' at line " + token.startLine + ", col " + token.startCol + ".", token.startLine, token.startCol);
             },
 
@@ -7148,7 +7159,7 @@ TokenStreamBase.prototype = {
             if (tokenTypes.includes(tt)) {
                 return true;
             }
-        } while (tt === 4 && this.LA(0) !== 0);
+        } while (tt === this._tokenData.COMMENT && this.LA(0) !== 0);
 
         //no match found, put the token back
         this.unget();
@@ -10967,25 +10978,6 @@ CSSLint.addFormatter({
     }
 });
 
-if (!CSSLint.suppressUsoVarError) {
-  CSSLint.suppressUsoVarError = true;
-  parserlib.css.Tokens[parserlib.css.Tokens.COMMENT].hide = false;
-  const isUsoVar = ({value}) => value.startsWith('/*[[') && value.endsWith(']]*/');
-  CSSLint.addRule({
-    id: 'uso-vars',
-    init(parser, reporter) {
-      parser.addListener('error', function ({message, line, col}) {
-        if (!isUsoVar(this._tokenStream._token)) {
-          const {_lt, _ltIndex: i} = this._tokenStream;
-          if (i < 2 || !_lt.slice(0, i - 1).reverse().some(isUsoVar)) {
-            reporter.error(message, line, col);
-          }
-        }
-      });
-    },
-  });
-}
-
 self.onmessage = ({data: {action = 'run', code, config}}) => {
   switch (action) {
 
@@ -11000,8 +10992,6 @@ self.onmessage = ({data: {action = 'run', code, config}}) => {
       return;
 
     case 'run':
-      Object.defineProperty(config, 'errors', {get: () => 0, set: () => 0});
-      config['uso-vars'] = 1;
       self.postMessage(CSSLint.verify(code, config).messages.map(m => {
         // the functions are non-tranferable and we need only an id
         m.rule = {id: m.rule.id};

From 69ee57f88f7f056ffbcb037d495bbff4907ec322 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Wed, 6 Dec 2017 06:33:40 +0300
Subject: [PATCH 23/28] manage: search in usercss full source code

---
 manage/filters.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/manage/filters.js b/manage/filters.js
index e98b754b..c4c587ec 100644
--- a/manage/filters.js
+++ b/manage/filters.js
@@ -379,6 +379,7 @@ function searchStyles({immediately, container}) {
         urlMode ||
         isMatchingText(style.name) ||
         style.url && isMatchingText(style.url) ||
+        style.sourceCode && isMatchingText(style.sourceCode) ||
         isMatchingStyle(style)));
     }
     if (entry.classList.contains('not-matching') !== !isMatching) {

From 03b6f6c2630a0bd4c507f595519bbe840c2ee332 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Wed, 6 Dec 2017 09:39:45 +0300
Subject: [PATCH 24/28] manage: search regexps, add search help, fix favicons
 toggle icon

* the toggle icon is now a triangle, rotated when open
---
 _locales/en/messages.json |  6 ++---
 js/messaging.js           |  4 +--
 manage.html               | 22 +++++++++++------
 manage/filters.js         | 47 +++++++++++++++++++++++++++++++----
 manage/manage.css         | 52 ++++++++++++++++++++++++++++++++++++---
 manage/manage.js          | 10 +++++++-
 6 files changed, 120 insertions(+), 21 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 36ce385a..8606964b 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -691,9 +691,9 @@
     "message": "Search contents",
     "description": "Label for the search filter textbox on the Manage styles page"
   },
-  "searchStylesTooltip": {
-    "message": "To show styles for a URL, prefix it with 'url:'\nFor example, url:https://github.com/openstyles/stylus",
-    "description": "Label for the search filter textbox on the Manage styles page"
+  "searchStylesHelp": {
+    "message": "</> key focuses the search field.\nPlain text: search within the name, code, homepage URL and sites it is applied to. Words with less than 3 letters are ignored.\nMatching URL: prefix the search with <url:>, e.g. <url:https://github.com/openstyles/stylus>\nRegular expressions: include slashes and flags, e.g. </foo.*?/simguy>\nExact words: wrap the query in double quotes, e.g. <\"Like this!\">",
+    "description": "Text in the minihelp displayed when clicking (i) icon to the right of the search input field on the Manage styles page"
   },
   "sectionAdd": {
     "message": "Add another section",
diff --git a/js/messaging.js b/js/messaging.js
index 47c8900b..0936870c 100644
--- a/js/messaging.js
+++ b/js/messaging.js
@@ -286,9 +286,9 @@ function tryCatch(func, ...args) {
 }
 
 
-function tryRegExp(regexp) {
+function tryRegExp(regexp, flags) {
   try {
-    return new RegExp(regexp);
+    return new RegExp(regexp, flags);
   } catch (e) {}
 }
 
diff --git a/manage.html b/manage.html
index cb4793be..d9fa2f40 100644
--- a/manage.html
+++ b/manage.html
@@ -237,10 +237,12 @@
       <span i18n-text="manageOnlyUpdates"></span>
     </label>
 
-    <input id="search" type="search" i18n-placeholder="searchStyles" spellcheck="false"
-           i18n-title="searchStylesTooltip"
-           data-filter=":not(.not-matching)"
-           data-filter-hide=".not-matching">
+    <div id="search-wrapper">
+      <input id="search" type="search" i18n-placeholder="searchStyles" spellcheck="false"
+             data-filter=":not(.not-matching)"
+             data-filter-hide=".not-matching">
+      <svg id="search-help" class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
+    </div>
 
   </details>
 
@@ -292,10 +294,11 @@
         <label for="manage.newUI.favicons" i18n-text="manageFavicons">
           <input id="manage.newUI.favicons" type="checkbox">
           <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+          <svg class="svg-icon select-arrow" data-toggle-on-click="#faviconsHelp">
+            <title i18n-text="optionsSubheading"></title>
+            <use xlink:href="#svg-icon-select-arrow"/>
+          </svg>
         </label>
-        <svg class="svg-icon info" viewBox="0 0 14 16" i18n-alt="helpAlt" data-toggle-on-click="#faviconsHelp">
-          <path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path>
-        </svg>
         <div id="faviconsHelp" class="hidden" i18n-text="manageFaviconsHelp">
           <div>
             <label for="manage.newUI.faviconsGray" i18n-text="manageFaviconsGray">
@@ -348,6 +351,11 @@
   <symbol id="svg-icon-select-arrow" viewBox="0 0 1792 1792">
     <path fill-rule="evenodd" d="M1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z"/>
   </symbol>
+
+  <symbol id="svg-icon-help" viewBox="0 0 14 16">
+    <title i18n-text="helpAlt"></title>
+    <path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path>
+  </symbol>
 </svg>
 
 </body>
diff --git a/manage/filters.js b/manage/filters.js
index c4c587ec..87ad4f0a 100644
--- a/manage/filters.js
+++ b/manage/filters.js
@@ -1,4 +1,4 @@
-/* global installed */
+/* global installed messageBox */
 'use strict';
 
 const filtersSelector = {
@@ -31,6 +31,25 @@ onDOMready().then(onBackgroundReady).then(() => {
   if (urlFilterParam) {
     $('#search').value = 'url:' + urlFilterParam;
   }
+  $('#search-help').onclick = () => {
+    messageBox({
+      className: 'help-text',
+      title: t('searchStyles'),
+      contents:
+        $create('ul',
+          t('searchStylesHelp').split('\n').map(line =>
+            $create('li', line.split(/(<.*?>)/).map((s, i, words) => {
+              if (s.startsWith('<')) {
+                const num = words.length;
+                const className = i === num - 2 && !words[num - 1] ? '.last' : '';
+                return $create('mark' + className, s.slice(1, -1));
+              } else {
+                return s;
+              }
+            })))),
+      buttons: [t('confirmOK')],
+    });
+  };
 
   $$('select[id$=".invert"]').forEach(el => {
     const slave = $('#' + el.id.replace('.invert', ''));
@@ -350,10 +369,11 @@ function showFiltersStats() {
 
 function searchStyles({immediately, container}) {
   const searchElement = $('#search');
-  const urlMode = /^\s*url:/i.test(searchElement.value);
+  const value = searchElement.value;
+  const urlMode = /^\s*url:/i.test(value);
   const query = urlMode
-    ? searchElement.value.replace(/^\s*url:/i, '').trim()
-    : searchElement.value.toLocaleLowerCase();
+    ? value.replace(/^\s*url:/i, '').trim()
+    : value.toLocaleLowerCase();
   const queryPrev = searchElement.lastValue || '';
   if (query === queryPrev && !immediately && !container) {
     return;
@@ -364,6 +384,12 @@ function searchStyles({immediately, container}) {
   }
   searchElement.lastValue = query;
 
+  const trimmed = query.trim();
+  const rx = trimmed.startsWith('/') && trimmed.indexOf('/', 1) > 0 &&
+    tryRegExp(...(value.match(/^\s*\/(.*?)\/([gimsuy]*)\s*$/) || []).slice(1));
+  const words = rx ? null :
+    trimmed.startsWith('"') && trimmed.endsWith('"') ? [value.trim().slice(1, -1)] :
+      query.split(/\s+/).filter(s => s.length > 2);
   const searchInVisible = !urlMode && queryPrev && query.includes(queryPrev);
   const entries = container && container.children || container ||
     (searchInVisible ? $$('.entry:not(.hidden)') : installed.children);
@@ -415,6 +441,17 @@ function searchStyles({immediately, container}) {
   }
 
   function isMatchingText(text) {
-    return text.toLocaleLowerCase().indexOf(query) >= 0;
+    if (rx) {
+      return rx.test(text);
+    }
+    for (let pass = 1; pass <= 2; pass++) {
+      for (const word of words) {
+        if (text.includes(word)) {
+          return true;
+        }
+      }
+      text = text.toLocaleLowerCase();
+    }
+    return false;
   }
 }
diff --git a/manage/manage.css b/manage/manage.css
index 0de5b53b..e3e8e476 100644
--- a/manage/manage.css
+++ b/manage/manage.css
@@ -658,6 +658,7 @@ select {
   align-items: center;
   margin-bottom: auto;
   flex-wrap: wrap;
+  position: relative;
 }
 
 #newUIoptions input[type="number"] {
@@ -665,6 +666,18 @@ select {
   margin-right: .5em;
 }
 
+#newUIoptions [data-toggle-on-click] {
+  transform: rotate(-90deg);
+  cursor: pointer;
+  right: -16px;
+  top: 0;
+  pointer-events: auto;
+}
+
+#newUIoptions [data-toggle-on-click][open] {
+  transform: none;
+}
+
 input[id^="manage.newUI"] {
   margin-left: 0;
 }
@@ -763,7 +776,6 @@ input[id^="manage.newUI"] {
   display: none !important;
 }
 
-#filters input,
 #filters label {
   display: flex;
   align-items: center;
@@ -816,14 +828,48 @@ input[id^="manage.newUI"] {
   display: none;
 }
 
+#search-wrapper {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
 #search {
-  width: calc(100% - 4px);
+  flex-grow: 1;
   margin: 0.25rem 0 0;
-  border-radius: 0.25rem;
   padding-left: 0.25rem;
   border-width: 1px;
 }
 
+#search-wrapper .info {
+  margin: 4px -5px 0 8px;
+}
+
+#message-box.help-text > div {
+  max-width: 26rem;
+}
+.help-text li:not(:last-child) {
+  margin-bottom: 1em;
+}
+
+.help-text mark {
+  background-color: rgba(128, 128, 128, .15);
+  color: currentColor;
+  padding: 2px 6px;
+  font-weight: bold;
+  font-family: monospace;
+  border: 1px solid rgba(128, 128, 128, .25);
+  display: inline-block;
+  margin: 2px;
+}
+
+.help-text mark.last {
+  display: block;
+  width: -moz-min-content;
+  width: min-content;
+  white-space: nowrap;
+}
+
 #import ul {
   margin-left: 0;
   padding-left: 0;
diff --git a/manage/manage.js b/manage/manage.js
index 58435e1c..4069337a 100644
--- a/manage/manage.js
+++ b/manage/manage.js
@@ -66,7 +66,15 @@ function initGlobalEvents() {
   $$('[data-toggle-on-click]').forEach(el => {
     // dataset on SVG doesn't work in Chrome 49-??, works in 57+
     const target = $(el.getAttribute('data-toggle-on-click'));
-    el.onclick = () => target.classList.toggle('hidden');
+    el.onclick = event => {
+      event.preventDefault();
+      target.classList.toggle('hidden');
+      if (target.classList.contains('hidden')) {
+        el.removeAttribute('open');
+      } else {
+        el.setAttribute('open', '');
+      }
+    };
   });
 
   // triggered automatically by setupLivePrefs() below

From e3a67351d573b81844885114e595d65701c0cdbf Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Wed, 6 Dec 2017 10:23:28 +0300
Subject: [PATCH 25/28] make protected tokens language-agnostic in search help
 message

---
 _locales/en/messages.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 8606964b..2b1d4f87 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -692,7 +692,7 @@
     "description": "Label for the search filter textbox on the Manage styles page"
   },
   "searchStylesHelp": {
-    "message": "</> key focuses the search field.\nPlain text: search within the name, code, homepage URL and sites it is applied to. Words with less than 3 letters are ignored.\nMatching URL: prefix the search with <url:>, e.g. <url:https://github.com/openstyles/stylus>\nRegular expressions: include slashes and flags, e.g. </foo.*?/simguy>\nExact words: wrap the query in double quotes, e.g. <\"Like this!\">",
+    "message": "</> key focuses the search field.\nPlain text: search within the name, code, homepage URL and sites it is applied to. Words with less than 3 letters are ignored.\nMatching URL: prefix the search with <url:>, e.g. <url:https://github.com/openstyles/stylus>\nRegular expressions: include slashes and flags, e.g. </body.*?\\ba\\b/simguy>\nExact words: wrap the query in double quotes, e.g. <\".header ~ div\">",
     "description": "Text in the minihelp displayed when clicking (i) icon to the right of the search input field on the Manage styles page"
   },
   "sectionAdd": {

From cc57d394431ecf82c2a8ca172856718b895eb0f4 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Wed, 6 Dec 2017 10:37:01 +0300
Subject: [PATCH 26/28] align #filters header; group FF-related rules

---
 manage/manage.css | 53 +++++++++++++++++++++++++++--------------------
 1 file changed, 30 insertions(+), 23 deletions(-)

diff --git a/manage/manage.css b/manage/manage.css
index e3e8e476..a93295f3 100644
--- a/manage/manage.css
+++ b/manage/manage.css
@@ -103,10 +103,6 @@ select {
   margin-top: -4px;
 }
 
-.firefox .chromium-only {
-  display: none;
-}
-
 #installed {
   position: relative;
   padding-left: var(--header-width);
@@ -357,10 +353,6 @@ select {
   margin-top: -2px;
 }
 
-.firefox #header .filter-selection label .checkmate {
-  margin: 0;
-}
-
 .newUI #newUIoptions > label {
   padding-left: 0;
 }
@@ -375,10 +367,6 @@ select {
   margin-left: 4px;
 }
 
-.firefox .filter-selection select {
-  padding-left: 0;
-}
-
 .filter-selection .select-arrow {
   margin-top: 2px;
   top: 0;
@@ -394,10 +382,6 @@ select {
   left: 16px;
 }
 
-.firefox .select-resizer {
-  left: 16px;
-}
-
 #filters label,
 #filters .filter-selection {
   transition: background-color .25s;
@@ -779,9 +763,6 @@ input[id^="manage.newUI"] {
 #filters label {
   display: flex;
   align-items: center;
-}
-
-#filters label {
   padding-left: 20px;
 }
 
@@ -794,6 +775,10 @@ input[id^="manage.newUI"] {
   border: 1px solid transparent;
 }
 
+#filters summary h2 {
+  margin-left: -4px;
+}
+
 .active #filters-stats {
   background-color: darkcyan;
   border-color: darkcyan;
@@ -819,10 +804,6 @@ input[id^="manage.newUI"] {
   fill: hsla(180, 50%, 27%, 1);
 }
 
-.firefox #reset-filters {
-  margin-top: 4px;
-}
-
 #filters summary:not(.active) #reset-filters,
 #filters summary:not(.active) #filters-stats {
   display: none;
@@ -1059,3 +1040,29 @@ input[id^="manage.newUI"] {
     word-break: break-all;
   }
 }
+
+@supports (-moz-appearance: none) {
+  .chromium-only {
+    display: none;
+  }
+
+  #header .filter-selection label .checkmate {
+    margin: 0;
+  }
+
+  .filter-selection select {
+    padding-left: 0;
+  }
+
+  .select-resizer {
+    left: 16px;
+  }
+
+  #reset-filters {
+    margin-top: 4px;
+  }
+
+  #filters summary h2 {
+    margin-left: -2px;
+  }
+}

From 1273903b0586c6bac41aac896e025e165b245811 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Wed, 6 Dec 2017 11:03:43 +0300
Subject: [PATCH 27/28] import usercss files drag'n'dropped into the manage
 page

---
 install-usercss/install-usercss.js |  2 +-
 js/usercss.js                      |  1 +
 manage/import-export.js            | 12 +++++++++++-
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/install-usercss/install-usercss.js b/install-usercss/install-usercss.js
index 3d347955..0d69222b 100644
--- a/install-usercss/install-usercss.js
+++ b/install-usercss/install-usercss.js
@@ -276,7 +276,7 @@
           data.version,
         ]))
       ).then(ok => ok &&
-        BG.usercssHelper.save(BG.deepCopy(Object.assign(style, {reason: 'update'})))
+        BG.usercssHelper.save(BG.deepCopy(Object.assign(style, dup && {reason: 'update'})))
           .then(r => install(deepCopy(r)))
           .catch(err => messageBox.alert(t('styleInstallFailed', err)))
       );
diff --git a/js/usercss.js b/js/usercss.js
index b3a8a07d..4800221d 100644
--- a/js/usercss.js
+++ b/js/usercss.js
@@ -393,6 +393,7 @@ var usercss = (() => {
     };
 
     const style = {
+      reason: 'install',
       enabled: true,
       sourceCode,
       sections: [],
diff --git a/manage/import-export.js b/manage/import-export.js
index a4c91a70..865915c9 100644
--- a/manage/import-export.js
+++ b/manage/import-export.js
@@ -34,7 +34,17 @@ function importFromFile({fileTypeFilter, file} = {}) {
         const fReader = new FileReader();
         fReader.onloadend = event => {
           fileInput.remove();
-          importFromString(event.target.result).then(numStyles => {
+          const text = event.target.result;
+          const maybeUsercss = !/^[\s\r\n]*\[/.test(text) &&
+            (text.includes('==UserStyle==') || /==UserStyle==/i.test(text));
+          (!maybeUsercss ?
+            importFromString(text) :
+            getOwnTab().then(tab => {
+              tab.url = URL.createObjectURL(new Blob([text], {type: 'text/css'}));
+              return BG.usercssHelper.openInstallPage(tab, {direct: true})
+                .then(() => URL.revokeObjectURL(tab.url));
+            })
+          ).then(numStyles => {
             document.body.style.cursor = '';
             resolve(numStyles);
           });

From 0659ff623370afe03d5b31e5694cfb918aeea409 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Wed, 6 Dec 2017 11:35:04 +0300
Subject: [PATCH 28/28] set "use default" button actual state on opening config
 dialog

---
 manage/config-dialog.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/manage/config-dialog.js b/manage/config-dialog.js
index dacaafc6..6c6e3273 100644
--- a/manage/config-dialog.js
+++ b/manage/config-dialog.js
@@ -54,6 +54,7 @@ function configDialog(style) {
     buttons.save = $('[data-cmd="save"]', box);
     buttons.default = $('[data-cmd="default"]', box);
     buttons.close = $('[data-cmd="close"]', box);
+    updateButtons();
   }
 
   function onchange({target}) {