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] 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 {