From 6a324eb1511c8969a112713f41c8defc2b178a00 Mon Sep 17 00:00:00 2001
From: eight04 <eight04@gmail.com>
Date: Sat, 4 Dec 2021 02:19:17 +0800
Subject: [PATCH 01/11] Add: style settings

---
 _locales/en/messages.json   | 30 ++++++++++++++
 background/style-manager.js |  7 ++++
 edit.html                   | 52 +++++++++++++++++++++++-
 edit/base.js                |  5 ++-
 edit/edit.css               |  5 ++-
 edit/edit.js                | 10 ++++-
 edit/sections-editor.js     |  3 ++
 edit/settings.css           | 31 ++++++++++++++
 edit/settings.js            | 81 +++++++++++++++++++++++++++++++++++++
 edit/source-editor.js       |  3 ++
 edit/tab.css                | 28 +++++++++++++
 edit/tab.js                 | 19 +++++++++
 js/event-emitter.js         | 37 +++++++++++++++++
 13 files changed, 305 insertions(+), 6 deletions(-)
 create mode 100644 edit/settings.css
 create mode 100644 edit/settings.js
 create mode 100644 edit/tab.css
 create mode 100644 edit/tab.js
 create mode 100644 js/event-emitter.js

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 66a885f880..004301a6cb 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -375,6 +375,12 @@
     },
     "description": "Title of the page for editing styles"
   },
+  "editorCodeLabel": {
+    "message": "Code"
+  },
+  "editorSettingLabel": {
+    "message": "Settings"
+  },
   "enableStyleLabel": {
     "message": "Enable",
     "description": "Label for the button to enable a style"
@@ -1634,6 +1640,30 @@
     "message": "As a security precaution, the browser prohibits extensions from affecting its built-in pages (like chrome://version, the standard new tab page as of Chrome 61, about:addons, and so on) as well as other extensions' pages. Each browser also restricts access to its own extensions gallery (like Chrome Web Store or AMO).",
     "description": "Sub-note in the toolbar pop-up when on a URL Stylus can't affect"
   },
+  "styleOriginLabel": {
+    "message": "Style origin"
+  },
+  "styleUpdateUrlLabel": {
+    "message": "Update URL"
+  },
+  "stylePreferSchemeLabel": {
+    "message": "Dark/Light mode"
+  },
+  "styleIncludeLabel": {
+    "message": "User defined inclusion"
+  },
+  "styleIncludeNewLabel": {
+    "message": "Add new inclusion rule"
+  },
+  "styleExcludeLabel": {
+    "message": "User defined exclusion"
+  },
+  "styleExcludeNewLabel": {
+    "message": "Add new exclusion rule"
+  },
+  "stylePriorityLabel": {
+    "message": "Priority"
+  },
   "syncDropboxDeprecated": {
     "message": "Dropbox import/export is replaced by a more advanced style sync in the options page."
   },
diff --git a/background/style-manager.js b/background/style-manager.js
index c71a70ba03..a6c8b4ed83 100644
--- a/background/style-manager.js
+++ b/background/style-manager.js
@@ -297,6 +297,13 @@ const styleMan = (() => {
     removeExclusion: removeIncludeExclude.bind(null, 'exclusions'),
     /** @returns {Promise<?StyleObj>} */
     removeInclusion: removeIncludeExclude.bind(null, 'inclusions'),
+
+    async config(id, prop, value) {
+      if (ready.then) await ready;
+      const style = Object.assign({}, id2style(id));
+      style[prop] = value;
+      return saveStyle(style, {reason: 'config', codeIsUpdated: false});
+    },
   };
 
   //#endregion
diff --git a/edit.html b/edit.html
index 23dbeb25ce..4cc9ce665d 100644
--- a/edit.html
+++ b/edit.html
@@ -17,6 +17,7 @@
     <script src="content/apply.js"></script>
 
     <script src="js/sections-util.js"></script>
+    <script src="js/event-emitter.js"></script>
     <script src="edit/codemirror-themes.js"></script> <!-- must precede base.js -->
     <script src="edit/base.js"></script>
 
@@ -61,6 +62,7 @@
     <script src="edit/sections-editor-section.js"></script>
     <script src="edit/sections-editor.js"></script>
     <script src="edit/usw-integration.js"></script>
+    <script src="edit/settings.js"></script>
     <script src="edit/edit.js"></script>
 
     <template data-id="appliesTo">
@@ -239,6 +241,8 @@
     <link href="js/color/color-picker.css" rel="stylesheet">
     <link href="edit/codemirror-default.css" rel="stylesheet">
     <link href="edit/edit.css" rel="stylesheet">
+    <link rel="stylesheet" href="edit/tab.css">
+    <link rel="stylesheet" href="edit/settings.css">
   </head>
 
   <body id="stylus-edit">
@@ -433,7 +437,52 @@ <h2 i18n-text="linterIssues">: <span id="issue-count"></span>
            target="_blank"></a>
       </div>
     </div>
-    <section id="sections"></section>
+    <div class="main tab-container">
+      <div class="tab-bar">
+        <div class="tab-bar-item active" i18n-text="editorCodeLabel"></div>
+        <div class="tab-bar-item" i18n-text="editorSettingLabel"></div>
+      </div>
+      <div class="tab-panel">
+        <section id="sections" class="active"></section>
+        <fieldset class="style-settings" disabled>
+          <!-- <label class="style-origin">
+            <span class="form-label" i18n-text="styleOriginLabel"></span>
+            <input id="styleOrigin" type="text">
+          </label> -->
+          <label class="form-group style-update-url">
+            <span class="form-label" i18n-text="styleUpdateUrlLabel"></span>
+            <input type="text">
+          </label>
+          <label class="form-group style-prefer-scheme">
+            <!-- FIXME: should we use a different message from install page? -->
+            <span class="form-label" i18n-text="installPreferSchemeLabel"></span>
+            <select>
+              <option value="none" i18n-text="installPreferSchemeNone"></option>
+              <option value="dark" i18n-text="installPreferSchemeDark"></option>
+              <option value="light" i18n-text="installPreferSchemeLight"></option>
+            </select>
+          </label>
+          <div class="form-group style-include">
+            <div class="form-label" i18n-text="styleIncludeLabel"></div>
+            <div class="rule-table"></div>
+            <button i18n-text="styleIncludeNewLabel" class="add-rule"></button>
+          </div>
+          <div class="form-group style-exclude">
+            <div class="form-label" i18n-text="styleExcludeLabel"></div>
+            <div class="rule-table"></div>
+            <button i18n-text="styleExcludeNewLabel" class="add-rule"></button>
+          </div>
+          <div class="form-group style-priority">
+            <div class="form-label" i18n-text="stylePriorityLabel"></div>
+            <input type="number">
+          </div>
+          <!-- <label class="style-always-important">
+            <input type="checkbox">
+            <span class="form-label" i18n-text="styleAlwaysImportantLabel"></span>
+          </label> -->
+        </fieldset>
+      </div>
+    </div>
     <div id="help-popup">
       <div class="title"></div><svg id="sections-help" class="svg-icon dismiss"><use xlink:href="#svg-icon-close"/></svg>
       <div class="contents"></div>
@@ -478,5 +527,6 @@ <h2 i18n-text="linterIssues">: <span id="issue-count"></span>
       </symbol>
 
     </svg>
+    <script src="edit/tab.js"></script>
   </body>
 </html>
diff --git a/edit/base.js b/edit/base.js
index bcdf536c4b..f3d4261e82 100644
--- a/edit/base.js
+++ b/edit/base.js
@@ -14,13 +14,14 @@
   tryJSONparse
   tryURL
 */// toolbox.js
+/* global EventEmitter */
 'use strict';
 
 /**
  * @type Editor
  * @namespace Editor
  */
-const editor = {
+const editor = Object.assign(EventEmitter(), {
   style: null,
   dirty: DirtyReporter(),
   isUsercss: false,
@@ -47,7 +48,7 @@ const editor = {
       customName || name || t('styleMissingName')
     } - Stylus`; // the suffix enables external utilities to process our windows e.g. pin on top
   },
-};
+});
 
 //#region pre-init
 
diff --git a/edit/edit.css b/edit/edit.css
index ebaca302e2..8d73a2d92f 100644
--- a/edit/edit.css
+++ b/edit/edit.css
@@ -105,8 +105,11 @@ label {
 #header h1 {
   margin-top: 0;
 }
-#sections {
+.main {
   padding-left: 280px;
+  height: 100%;
+}
+#sections {
   min-height: 0;
   height: 100%;
 }
diff --git a/edit/edit.js b/edit/edit.js
index d98a29e6c2..87c4102df9 100644
--- a/edit/edit.js
+++ b/edit/edit.js
@@ -11,6 +11,7 @@
 /* global linterMan */
 /* global prefs */
 /* global t */// localization.js
+/* global StyleSettings */// settings.js
 'use strict';
 
 //#region init
@@ -18,6 +19,7 @@
 baseInit.ready.then(async () => {
   await waitForSheet();
   (editor.isUsercss ? SourceEditor : SectionsEditor)();
+  StyleSettings(editor);
   await editor.ready;
   editor.ready = true;
   editor.dirty.onChange(editor.updateDirty);
@@ -59,7 +61,8 @@ const IGNORE_UPDATE_REASONS = [
   'editPreview',
   'editPreviewEnd',
   'editSave',
-  'config',
+  // https://github.com/openstyles/stylus/issues/807 is closed without fix
+  // 'config,
 ];
 
 msg.onExtension(request => {
@@ -68,7 +71,10 @@ msg.onExtension(request => {
     case 'styleUpdated':
       if (editor.style.id === style.id && !IGNORE_UPDATE_REASONS.includes(request.reason)) {
         Promise.resolve(request.codeIsUpdated === false ? style : API.styles.get(style.id))
-          .then(newStyle => editor.replaceStyle(newStyle, request.codeIsUpdated));
+          .then(newStyle => {
+            editor.replaceStyle(newStyle, request.codeIsUpdated);
+            editor.emit('styleChange', newStyle, request.reason);
+          });
       }
       break;
     case 'styleDeleted':
diff --git a/edit/sections-editor.js b/edit/sections-editor.js
index e83fec3d92..a1ce5e9c89 100644
--- a/edit/sections-editor.js
+++ b/edit/sections-editor.js
@@ -111,6 +111,9 @@ function SectionsEditor() {
       }
       newStyle = await API.styles.editSave(newStyle);
       destroyRemovedSections();
+      if (!style.id) {
+        editor.emit('styleChange', newStyle, 'new');
+      }
       sessionStore.justEditedStyleId = newStyle.id;
       editor.replaceStyle(newStyle, false);
     },
diff --git a/edit/settings.css b/edit/settings.css
new file mode 100644
index 0000000000..9b338329f4
--- /dev/null
+++ b/edit/settings.css
@@ -0,0 +1,31 @@
+.style-settings {
+  padding: 0.7rem 1.7rem;
+  border: 0;
+  margin: 0;
+}
+.form-group {
+  display: block;
+  margin: .6em 0;
+  padding: 0;
+}
+.form-label {
+  display: inline-block;
+  margin: .3em 0;
+}
+[disabled] .form-label {
+  opacity: 0.4;
+}
+.form-group input[type=text],
+.form-group input[type=number],
+.form-group select {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+}
+.rule-table {
+  display: grid;
+  grid-template-columns: minmax(min-content, 1fr) min-content;
+  grid-gap: .3em;
+  margin: .3em 0;
+}
+
diff --git a/edit/settings.js b/edit/settings.js
new file mode 100644
index 0000000000..cfb9f2c372
--- /dev/null
+++ b/edit/settings.js
@@ -0,0 +1,81 @@
+/* global API */
+/* exported StyleSettings */
+'use strict';
+
+function StyleSettings(editor) {
+  let {style} = editor;
+
+  const inputs = [
+    createInput('.style-update-url input', () => style.updateUrl || '',
+      e => API.styles.config(style.id, 'updateUrl', e.target.value)),
+    createInput('.style-prefer-scheme select', () => style.preferScheme || 'none',
+      e => API.styles.config(style.id, 'preferScheme', e.target.value)),
+    createInput('.style-priority input', () => style.priority || 0,
+      e => API.styles.config(style.id, 'priority', e.target.valueAsNumber)),
+    createRuleTable(document.querySelector('.style-include'), 'inclusions'),
+    createRuleTable(document.querySelector('.style-exclude'), 'exclusions'),
+  ];
+
+  update(style);
+
+  editor.on('styleChange', update);
+
+  function update(newStyle, reason) {
+    if (!newStyle.id) return;
+    if (reason === 'editSave' || reason === 'config') return;
+    style = newStyle;
+    document.querySelector('.style-settings').disabled = false;
+    inputs.forEach(i => i.update());
+  }
+
+  function createInput(selector, getter, setter) {
+    const el = document.querySelector(selector);
+    el.addEventListener('change', setter);
+    return {
+      update() {
+        el.value = getter();
+      },
+    };
+  }
+
+  function createRuleTable(container, type) {
+    const table = container.querySelector('.rule-table');
+    container.querySelector('.add-rule').addEventListener('click', addRule);
+    return {update};
+
+    function update() {
+      // TODO: don't recreate everything
+      table.innerHTML = '';
+      if (!style[type]) {
+        style[type] = [];
+      }
+      style[type].forEach((rule, i) => {
+        const input = document.createElement('input');
+        input.value = rule;
+        input.addEventListener('change', () => {
+          style[type][i] = input.value;
+          API.styles.config(style.id, type, style[type]);
+        });
+        table.append(input);
+
+        const delButton = document.createElement('button');
+        delButton.textContent = 'x';
+        delButton.addEventListener('click', () => {
+          style[type].splice(i, 1);
+          API.styles.config(style.id, type, style[type]);
+          update();
+        });
+        table.append(delButton);
+      });
+    }
+
+    function addRule() {
+      if (!style[type]) {
+        style[type] = [];
+      }
+      style[type].push('');
+      API.styles.config(style.id, type, style[type]);
+      update();
+    }
+  }
+}
diff --git a/edit/source-editor.js b/edit/source-editor.js
index f73643c54e..1efad61fea 100644
--- a/edit/source-editor.js
+++ b/edit/source-editor.js
@@ -71,6 +71,9 @@ function SourceEditor() {
         } else {
           res = await API.usercss.editSave({customName, enabled, id, sourceCode});
           // Awaiting inside `try` so that exceptions go to our `catch`
+          if (!id) {
+            editor.emit('styleChange', res.style, 'new');
+          }
           await replaceStyle(res.style);
         }
         showLog(res);
diff --git a/edit/tab.css b/edit/tab.css
new file mode 100644
index 0000000000..7b581cfa57
--- /dev/null
+++ b/edit/tab.css
@@ -0,0 +1,28 @@
+.tab-container {
+  display: flex;
+  flex-direction: column;
+}
+.tab-bar {
+  display: flex;
+  flex-direction: row;
+  border-bottom: 1px solid silver;
+  padding: 5px 5px 0 15px;
+}
+.tab-bar-item {
+  margin: 0 0.3em;
+  padding: 0.3em 0.6em;
+  border: 1px solid silver;
+  border-bottom: none;
+  background: silver;
+  cursor: pointer;
+}
+.tab-bar-item.active {
+  background: white;
+}
+.tab-panel {
+  flex-grow: 1;
+}
+.tab-panel > :not(.active) {
+  display: none;
+}
+
diff --git a/edit/tab.js b/edit/tab.js
new file mode 100644
index 0000000000..887a6e3a23
--- /dev/null
+++ b/edit/tab.js
@@ -0,0 +1,19 @@
+'use strict';
+
+(() => {
+  for (const container of document.querySelectorAll('.tab-container')) {
+    init(container);
+  }
+
+  function init(container) {
+    const tabButtons = [...container.querySelector('.tab-bar').children];
+    const tabPanels = [...container.querySelector('.tab-panel').children];
+    tabButtons.forEach((button, i) => button.addEventListener('click', () => activate(i)));
+
+    function activate(index) {
+      const toggleActive = (button, i) => button.classList.toggle('active', i === index);
+      tabButtons.forEach(toggleActive);
+      tabPanels.forEach(toggleActive);
+    }
+  }
+})();
diff --git a/js/event-emitter.js b/js/event-emitter.js
new file mode 100644
index 0000000000..df4b691699
--- /dev/null
+++ b/js/event-emitter.js
@@ -0,0 +1,37 @@
+/* exported EventEmitter */
+'use strict';
+
+function EventEmitter() {
+  const listeners = new Map();
+  return {
+    on(ev, cb, opt) {
+      if (!listeners.has(ev)) {
+        listeners.set(ev, new Map());
+      }
+      listeners.get(ev).set(cb, opt);
+      if (opt && opt.runNow) {
+        cb();
+      }
+    },
+    off(ev, cb) {
+      const cbs = listeners.get(ev);
+      if (cbs) {
+        cbs.delete(cb);
+      }
+    },
+    emit(ev, ...args) {
+      const cbs = listeners.get(ev);
+      if (!cbs) return;
+      for (const [cb, opt] of cbs.entries()) {
+        try {
+          cb(...args);
+        } catch (err) {
+          console.error(err);
+        }
+        if (opt && opt.once) {
+          cbs.delete(cb);
+        }
+      }
+    },
+  };
+}

From c0fd7c53b7662444e87b029595cab23f63c4e518 Mon Sep 17 00:00:00 2001
From: eight04 <eight04@gmail.com>
Date: Sat, 4 Dec 2021 23:32:34 +0800
Subject: [PATCH 02/11] Change: use radio instead of select for dark/light mode

---
 edit.html         | 21 ++++++++++++++-------
 edit/settings.css | 17 ++++++++++++++++-
 edit/settings.js  | 22 +++++++++++++++++++++-
 3 files changed, 51 insertions(+), 9 deletions(-)

diff --git a/edit.html b/edit.html
index 4cc9ce665d..22471cbb04 100644
--- a/edit.html
+++ b/edit.html
@@ -453,15 +453,22 @@ <h2 i18n-text="linterIssues">: <span id="issue-count"></span>
             <span class="form-label" i18n-text="styleUpdateUrlLabel"></span>
             <input type="text">
           </label>
-          <label class="form-group style-prefer-scheme">
+          <div class="form-group style-prefer-scheme radio-group">
             <!-- FIXME: should we use a different message from install page? -->
             <span class="form-label" i18n-text="installPreferSchemeLabel"></span>
-            <select>
-              <option value="none" i18n-text="installPreferSchemeNone"></option>
-              <option value="dark" i18n-text="installPreferSchemeDark"></option>
-              <option value="light" i18n-text="installPreferSchemeLight"></option>
-            </select>
-          </label>
+            <label class="radio-item">
+              <input type="radio" name="preferScheme" value="none">
+              <span class="radio-label" i18n-text="installPreferSchemeNone"></span>
+            </label>
+            <label class="radio-item">
+              <input type="radio" name="preferScheme" value="dark">
+              <span class="radio-label" i18n-text="installPreferSchemeDark"></span>
+            </label>
+            <label class="radio-item">
+              <input type="radio" name="preferScheme" value="light">
+              <span class="radio-label" i18n-text="installPreferSchemeLight"></span>
+            </label>
+          </div>
           <div class="form-group style-include">
             <div class="form-label" i18n-text="styleIncludeLabel"></div>
             <div class="rule-table"></div>
diff --git a/edit/settings.css b/edit/settings.css
index 9b338329f4..883c8a489d 100644
--- a/edit/settings.css
+++ b/edit/settings.css
@@ -28,4 +28,19 @@
   grid-gap: .3em;
   margin: .3em 0;
 }
-
+.radio-group .form-label {
+  display: block;
+}
+.radio-item {
+  display: flex;
+  margin: 0.3em 0 .3em;
+  padding: 0;
+  align-items: center;
+  width: max-content;
+}
+.radio-item input {
+  margin: 0 0.6em 0 0;
+}
+[disabled] .radio-label {
+  opacity: 0.4;
+}
diff --git a/edit/settings.js b/edit/settings.js
index cfb9f2c372..89f3430053 100644
--- a/edit/settings.js
+++ b/edit/settings.js
@@ -8,7 +8,7 @@ function StyleSettings(editor) {
   const inputs = [
     createInput('.style-update-url input', () => style.updateUrl || '',
       e => API.styles.config(style.id, 'updateUrl', e.target.value)),
-    createInput('.style-prefer-scheme select', () => style.preferScheme || 'none',
+    createRadio('.style-prefer-scheme input', () => style.preferScheme || 'none',
       e => API.styles.config(style.id, 'preferScheme', e.target.value)),
     createInput('.style-priority input', () => style.priority || 0,
       e => API.styles.config(style.id, 'priority', e.target.valueAsNumber)),
@@ -28,6 +28,26 @@ function StyleSettings(editor) {
     inputs.forEach(i => i.update());
   }
 
+  function createRadio(selector, getter, setter) {
+    const els = document.querySelectorAll(selector);
+    for (const el of els) {
+      el.addEventListener('change', e => {
+        if (el.checked) {
+          setter(e);
+        }
+      });
+    }
+    return {
+      update() {
+        for (const el of els) {
+          if (el.value === getter()) {
+            el.checked = true;
+          }
+        }
+      },
+    };
+  }
+
   function createInput(selector, getter, setter) {
     const el = document.querySelector(selector);
     el.addEventListener('change', setter);

From b1d7abf503649b14992028b7d5b45ffe9f7d560f Mon Sep 17 00:00:00 2001
From: eight04 <eight04@gmail.com>
Date: Sun, 5 Dec 2021 00:24:25 +0800
Subject: [PATCH 03/11] Change: x -> Delete

---
 _locales/en/messages.json | 3 +++
 edit/settings.js          | 4 ++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 004301a6cb..6a21662047 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -1655,6 +1655,9 @@
   "styleIncludeNewLabel": {
     "message": "Add new inclusion rule"
   },
+  "styleIncludeDeleteLabel": {
+    "message": "Delete"
+  },
   "styleExcludeLabel": {
     "message": "User defined exclusion"
   },
diff --git a/edit/settings.js b/edit/settings.js
index 89f3430053..46061cddd6 100644
--- a/edit/settings.js
+++ b/edit/settings.js
@@ -1,4 +1,4 @@
-/* global API */
+/* global API t */
 /* exported StyleSettings */
 'use strict';
 
@@ -79,7 +79,7 @@ function StyleSettings(editor) {
         table.append(input);
 
         const delButton = document.createElement('button');
-        delButton.textContent = 'x';
+        delButton.textContent = t('styleIncludeDeleteLabel');
         delButton.addEventListener('click', () => {
           style[type].splice(i, 1);
           API.styles.config(style.id, type, style[type]);

From 78c24900a0b961c91955fc1a342339d8b382aac4 Mon Sep 17 00:00:00 2001
From: eight04 <eight04@gmail.com>
Date: Sun, 5 Dec 2021 00:30:15 +0800
Subject: [PATCH 04/11] Change: (in|ex)clusion messages

---
 _locales/en/messages.json | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 6a21662047..70c1a8bae3 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -1650,19 +1650,19 @@
     "message": "Dark/Light mode"
   },
   "styleIncludeLabel": {
-    "message": "User defined inclusion"
+    "message": "Custom included sites"
   },
   "styleIncludeNewLabel": {
-    "message": "Add new inclusion rule"
+    "message": "Add new inclusion"
   },
   "styleIncludeDeleteLabel": {
     "message": "Delete"
   },
   "styleExcludeLabel": {
-    "message": "User defined exclusion"
+    "message": "Custom excluded sites"
   },
   "styleExcludeNewLabel": {
-    "message": "Add new exclusion rule"
+    "message": "Add new exclusion"
   },
   "stylePriorityLabel": {
     "message": "Priority"

From 2c38de08c2c1bff4ea8c0615a35b224b315ca852 Mon Sep 17 00:00:00 2001
From: eight04 <eight04@gmail.com>
Date: Sun, 5 Dec 2021 00:41:14 +0800
Subject: [PATCH 05/11] Fix: avoid extra space when there is no rule

---
 edit/settings.css | 5 ++++-
 edit/settings.js  | 1 +
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/edit/settings.css b/edit/settings.css
index 883c8a489d..9eb70e0485 100644
--- a/edit/settings.css
+++ b/edit/settings.css
@@ -26,7 +26,10 @@
   display: grid;
   grid-template-columns: minmax(min-content, 1fr) min-content;
   grid-gap: .3em;
-  margin: .3em 0;
+  margin: 0 0 .3em 0;
+}
+[data-length="0"] .rule-table {
+  margin: 0;
 }
 .radio-group .form-label {
   display: block;
diff --git a/edit/settings.js b/edit/settings.js
index 46061cddd6..c81e09bbcc 100644
--- a/edit/settings.js
+++ b/edit/settings.js
@@ -69,6 +69,7 @@ function StyleSettings(editor) {
       if (!style[type]) {
         style[type] = [];
       }
+      container.dataset.length = style[type].length;
       style[type].forEach((rule, i) => {
         const input = document.createElement('input');
         input.value = rule;

From 94737feb7829c8560c57c5376bed9c80c13774ba Mon Sep 17 00:00:00 2001
From: eight04 <eight04@gmail.com>
Date: Sun, 5 Dec 2021 00:58:23 +0800
Subject: [PATCH 06/11] Fix: UI in mobile

---
 edit/edit.css | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/edit/edit.css b/edit/edit.css
index 8d73a2d92f..157056ba62 100644
--- a/edit/edit.css
+++ b/edit/edit.css
@@ -1180,13 +1180,16 @@ body.linter-disabled .hidden-unless-compact {
   #lint:not([open]) + #footer {
     margin: .25em 0 -1em .25em;
   }
-  #sections {
+  .main {
     height: unset !important;
     padding-left: 0;
     display: flex;
     flex-direction: column;
     flex: 1;
   }
+  .tab-bar {
+    margin-top: var(--fixed-height);
+  }
   #sections > :not(.single-editor) {
     margin: 0 .5rem;
     padding: .5rem 0;

From a7a58c90377febd36ae8e0de5357ae5a2062e3ac Mon Sep 17 00:00:00 2001
From: eight04 <eight04@gmail.com>
Date: Tue, 7 Dec 2021 00:04:09 +0800
Subject: [PATCH 07/11] Change: delete priority

---
 _locales/en/messages.json | 3 ---
 edit.html                 | 4 ----
 edit/settings.js          | 2 --
 3 files changed, 9 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 70c1a8bae3..3ad511d15b 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -1664,9 +1664,6 @@
   "styleExcludeNewLabel": {
     "message": "Add new exclusion"
   },
-  "stylePriorityLabel": {
-    "message": "Priority"
-  },
   "syncDropboxDeprecated": {
     "message": "Dropbox import/export is replaced by a more advanced style sync in the options page."
   },
diff --git a/edit.html b/edit.html
index 22471cbb04..afc4b43631 100644
--- a/edit.html
+++ b/edit.html
@@ -479,10 +479,6 @@ <h2 i18n-text="linterIssues">: <span id="issue-count"></span>
             <div class="rule-table"></div>
             <button i18n-text="styleExcludeNewLabel" class="add-rule"></button>
           </div>
-          <div class="form-group style-priority">
-            <div class="form-label" i18n-text="stylePriorityLabel"></div>
-            <input type="number">
-          </div>
           <!-- <label class="style-always-important">
             <input type="checkbox">
             <span class="form-label" i18n-text="styleAlwaysImportantLabel"></span>
diff --git a/edit/settings.js b/edit/settings.js
index c81e09bbcc..66b9d0cd6f 100644
--- a/edit/settings.js
+++ b/edit/settings.js
@@ -10,8 +10,6 @@ function StyleSettings(editor) {
       e => API.styles.config(style.id, 'updateUrl', e.target.value)),
     createRadio('.style-prefer-scheme input', () => style.preferScheme || 'none',
       e => API.styles.config(style.id, 'preferScheme', e.target.value)),
-    createInput('.style-priority input', () => style.priority || 0,
-      e => API.styles.config(style.id, 'priority', e.target.valueAsNumber)),
     createRuleTable(document.querySelector('.style-include'), 'inclusions'),
     createRuleTable(document.querySelector('.style-exclude'), 'exclusions'),
   ];

From 7e61ea9691fdbf7235ea83feaae6cf808991ab74 Mon Sep 17 00:00:00 2001
From: eight04 <eight04@gmail.com>
Date: Tue, 7 Dec 2021 02:17:41 +0800
Subject: [PATCH 08/11] Change: use textarea for include/exclude, remove
 isCodeUpdated

---
 _locales/en/messages.json   |  9 ------
 background/style-manager.js |  4 +--
 edit.html                   | 18 ++++++------
 edit/edit.js                | 14 ++++------
 edit/sections-editor.js     | 31 +++++++++++++++++----
 edit/settings.css           | 16 ++++-------
 edit/settings.js            | 55 +++++++------------------------------
 edit/source-editor.js       | 26 ++++++++++++++++--
 8 files changed, 79 insertions(+), 94 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 3ad511d15b..be2006e4c9 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -1652,18 +1652,9 @@
   "styleIncludeLabel": {
     "message": "Custom included sites"
   },
-  "styleIncludeNewLabel": {
-    "message": "Add new inclusion"
-  },
-  "styleIncludeDeleteLabel": {
-    "message": "Delete"
-  },
   "styleExcludeLabel": {
     "message": "Custom excluded sites"
   },
-  "styleExcludeNewLabel": {
-    "message": "Add new exclusion"
-  },
   "syncDropboxDeprecated": {
     "message": "Dropbox import/export is replaced by a more advanced style sync in the options page."
   },
diff --git a/background/style-manager.js b/background/style-manager.js
index a6c8b4ed83..be66b53594 100644
--- a/background/style-manager.js
+++ b/background/style-manager.js
@@ -382,7 +382,7 @@ const styleMan = (() => {
       throw new Error('The rule already exists');
     }
     style[type] = list.concat([rule]);
-    return saveStyle(style, {reason: 'styleSettings'});
+    return saveStyle(style, {reason: 'config'});
   }
 
   async function removeIncludeExclude(type, id, rule) {
@@ -393,7 +393,7 @@ const styleMan = (() => {
       return;
     }
     style[type] = list.filter(r => r !== rule);
-    return saveStyle(style, {reason: 'styleSettings'});
+    return saveStyle(style, {reason: 'config'});
   }
 
   function broadcastStyleUpdated(style, reason, method = 'styleUpdated', codeIsUpdated = true) {
diff --git a/edit.html b/edit.html
index afc4b43631..567d498483 100644
--- a/edit.html
+++ b/edit.html
@@ -469,16 +469,14 @@ <h2 i18n-text="linterIssues">: <span id="issue-count"></span>
               <span class="radio-label" i18n-text="installPreferSchemeLight"></span>
             </label>
           </div>
-          <div class="form-group style-include">
-            <div class="form-label" i18n-text="styleIncludeLabel"></div>
-            <div class="rule-table"></div>
-            <button i18n-text="styleIncludeNewLabel" class="add-rule"></button>
-          </div>
-          <div class="form-group style-exclude">
-            <div class="form-label" i18n-text="styleExcludeLabel"></div>
-            <div class="rule-table"></div>
-            <button i18n-text="styleExcludeNewLabel" class="add-rule"></button>
-          </div>
+          <label class="form-group style-include">
+            <span class="form-label" i18n-text="styleIncludeLabel"></span>
+            <textarea></textarea>
+          </label>
+          <label class="form-group style-exclude">
+            <span class="form-label" i18n-text="styleExcludeLabel"></span>
+            <textarea></textarea>
+          </label>
           <!-- <label class="style-always-important">
             <input type="checkbox">
             <span class="form-label" i18n-text="styleAlwaysImportantLabel"></span>
diff --git a/edit/edit.js b/edit/edit.js
index 87c4102df9..eea81cacbb 100644
--- a/edit/edit.js
+++ b/edit/edit.js
@@ -1,5 +1,5 @@
 /* global $ $create messageBoxProxy waitForSheet */// dom.js
-/* global API msg */// msg.js
+/* global msg */// msg.js
 /* global CodeMirror */
 /* global SectionsEditor */
 /* global SourceEditor */
@@ -70,11 +70,7 @@ msg.onExtension(request => {
   switch (request.method) {
     case 'styleUpdated':
       if (editor.style.id === style.id && !IGNORE_UPDATE_REASONS.includes(request.reason)) {
-        Promise.resolve(request.codeIsUpdated === false ? style : API.styles.get(style.id))
-          .then(newStyle => {
-            editor.replaceStyle(newStyle, request.codeIsUpdated);
-            editor.emit('styleChange', newStyle, request.reason);
-          });
+        editor.emit('styleChange', request.style, request.reason, request.codeIsUpdated);
       }
       break;
     case 'styleDeleted':
@@ -165,9 +161,9 @@ window.on('beforeunload', e => {
       }
     },
 
-    toggleStyle() {
-      $('#enabled').checked = !style.enabled;
-      editor.updateEnabledness(!style.enabled);
+    toggleStyle(enabled = style.enabled) {
+      $('#enabled').checked = enabled;
+      editor.updateEnabledness(enabled);
     },
 
     updateDirty() {
diff --git a/edit/sections-editor.js b/edit/sections-editor.js
index a1ce5e9c89..103240b1e3 100644
--- a/edit/sections-editor.js
+++ b/edit/sections-editor.js
@@ -84,16 +84,13 @@ function SectionsEditor() {
         : null;
     },
 
-    async replaceStyle(newStyle, codeIsUpdated) {
-      dirty.clear('name');
+    async replaceStyle(newStyle) {
+      dirty.clear();
       // FIXME: avoid recreating all editors?
-      if (codeIsUpdated !== false) {
-        await initSections(newStyle.sections, {replace: true});
-      }
+      await initSections(newStyle.sections, {replace: true});
       Object.assign(style, newStyle);
       editor.onStyleUpdated();
       updateHeader();
-      dirty.clear();
       // Go from new style URL to edit style URL
       if (style.id && !/[&?]id=/.test(location.search)) {
         history.replaceState({}, document.title, `${location.pathname}?id=${style.id}`);
@@ -131,6 +128,28 @@ function SectionsEditor() {
 
   editor.ready = initSections(style.sections);
 
+  editor.on('styleChange', async (newStyle, reason) => {
+    if (reason === 'new') return; // nothing is new for us
+    if (reason === 'toggle') {
+      if (!dirty.isDirty()) {
+        Object.assign(style, newStyle);
+        updateHeader();
+      }
+      updateLivePreview();
+      return;
+    }
+    if (reason === 'config') {
+      newStyle = await API.styles.get(newStyle.id);
+      delete newStyle.sections;
+      delete newStyle.name;
+      delete newStyle.enabled;
+      Object.assign(style, newStyle);
+      updateLivePreview();
+      return;
+    }
+    editor.replaceStyle(await API.styles.get(newStyle.id));
+  });
+
   /** @param {EditorSection} section */
   function fitToContent(section) {
     const {cm, cm: {display: {wrapper, sizer}}} = section;
diff --git a/edit/settings.css b/edit/settings.css
index 9eb70e0485..16c890d446 100644
--- a/edit/settings.css
+++ b/edit/settings.css
@@ -17,20 +17,12 @@
 }
 .form-group input[type=text],
 .form-group input[type=number],
-.form-group select {
+.form-group select,
+.form-group textarea {
   display: block;
   width: 100%;
   box-sizing: border-box;
 }
-.rule-table {
-  display: grid;
-  grid-template-columns: minmax(min-content, 1fr) min-content;
-  grid-gap: .3em;
-  margin: 0 0 .3em 0;
-}
-[data-length="0"] .rule-table {
-  margin: 0;
-}
 .radio-group .form-label {
   display: block;
 }
@@ -47,3 +39,7 @@
 [disabled] .radio-label {
   opacity: 0.4;
 }
+.style-include textarea,
+.style-exclude textarea {
+  height: 12em;
+}
diff --git a/edit/settings.js b/edit/settings.js
index 66b9d0cd6f..a497e13c28 100644
--- a/edit/settings.js
+++ b/edit/settings.js
@@ -1,4 +1,4 @@
-/* global API t */
+/* global API */
 /* exported StyleSettings */
 'use strict';
 
@@ -10,14 +10,21 @@ function StyleSettings(editor) {
       e => API.styles.config(style.id, 'updateUrl', e.target.value)),
     createRadio('.style-prefer-scheme input', () => style.preferScheme || 'none',
       e => API.styles.config(style.id, 'preferScheme', e.target.value)),
-    createRuleTable(document.querySelector('.style-include'), 'inclusions'),
-    createRuleTable(document.querySelector('.style-exclude'), 'exclusions'),
+    createInput('.style-include textarea', () => (style.inclusions || []).join('\n'),
+      e => API.styles.config(style.id, 'inclusions', textToList(e.target.value))),
+    createInput('.style-exclude textarea', () => (style.exclusions || []).join('\n'),
+      e => API.styles.config(style.id, 'exclusions', textToList(e.target.value))),
   ];
 
   update(style);
 
   editor.on('styleChange', update);
 
+  function textToList(text) {
+    const list = text.split(/\s*\r?\n\s*/g);
+    return list.filter(Boolean);
+  }
+
   function update(newStyle, reason) {
     if (!newStyle.id) return;
     if (reason === 'editSave' || reason === 'config') return;
@@ -55,46 +62,4 @@ function StyleSettings(editor) {
       },
     };
   }
-
-  function createRuleTable(container, type) {
-    const table = container.querySelector('.rule-table');
-    container.querySelector('.add-rule').addEventListener('click', addRule);
-    return {update};
-
-    function update() {
-      // TODO: don't recreate everything
-      table.innerHTML = '';
-      if (!style[type]) {
-        style[type] = [];
-      }
-      container.dataset.length = style[type].length;
-      style[type].forEach((rule, i) => {
-        const input = document.createElement('input');
-        input.value = rule;
-        input.addEventListener('change', () => {
-          style[type][i] = input.value;
-          API.styles.config(style.id, type, style[type]);
-        });
-        table.append(input);
-
-        const delButton = document.createElement('button');
-        delButton.textContent = t('styleIncludeDeleteLabel');
-        delButton.addEventListener('click', () => {
-          style[type].splice(i, 1);
-          API.styles.config(style.id, type, style[type]);
-          update();
-        });
-        table.append(delButton);
-      });
-    }
-
-    function addRule() {
-      if (!style[type]) {
-        style[type] = [];
-      }
-      style[type].push('');
-      API.styles.config(style.id, type, style[type]);
-      update();
-    }
-  }
 }
diff --git a/edit/source-editor.js b/edit/source-editor.js
index 1efad61fea..e372fa92b6 100644
--- a/edit/source-editor.js
+++ b/edit/source-editor.js
@@ -116,6 +116,28 @@ function SourceEditor() {
   if (!$isTextInput(document.activeElement)) {
     cm.focus();
   }
+  editor.on('styleChange', async (newStyle, reason) => {
+    if (reason === 'new') return;
+    if (reason === 'config') {
+      newStyle = await API.styles.get(newStyle.id);
+      delete newStyle.sourceCode;
+      delete newStyle.name;
+      Object.assign(style, newStyle);
+      updateLivePreview();
+      return;
+    }
+    if (reason === 'toggle') {
+      if (dirty.isDirty()) {
+        editor.toggleStyle(newStyle.enabled);
+      } else {
+        style.enabled = newStyle.enabled;
+      }
+      updateMeta();
+      updateLivePreview();
+      return;
+    }
+    replaceStyle(await API.styles.get(newStyle.id));
+  });
 
   async function preprocess(style) {
     const res = await API.usercss.build({
@@ -211,14 +233,12 @@ function SourceEditor() {
     cm.setPreprocessor((style.usercssData || {}).preprocessor);
   }
 
-  function replaceStyle(newStyle, codeIsUpdated) {
+  function replaceStyle(newStyle) {
     dirty.clear('name');
     const sameCode = newStyle.sourceCode === cm.getValue();
     if (sameCode) {
       savedGeneration = cm.changeGeneration();
       dirty.clear('sourceGeneration');
-    }
-    if (codeIsUpdated === false || sameCode) {
       updateEnvironment();
       dirty.clear('enabled');
       updateLivePreview();

From 7a0d00a4babc3710da9c1a331adf5e376478f02e Mon Sep 17 00:00:00 2001
From: eight04 <eight04@gmail.com>
Date: Tue, 7 Dec 2021 02:45:58 +0800
Subject: [PATCH 09/11] Fix: separate toggle

---
 edit/edit.js            | 11 +++++++++--
 edit/sections-editor.js | 22 +++++++++++-----------
 edit/source-editor.js   | 24 +++++++++++-------------
 3 files changed, 31 insertions(+), 26 deletions(-)

diff --git a/edit/edit.js b/edit/edit.js
index eea81cacbb..2e171735ff 100644
--- a/edit/edit.js
+++ b/edit/edit.js
@@ -1,5 +1,5 @@
 /* global $ $create messageBoxProxy waitForSheet */// dom.js
-/* global msg */// msg.js
+/* global msg API */// msg.js
 /* global CodeMirror */
 /* global SectionsEditor */
 /* global SourceEditor */
@@ -70,7 +70,14 @@ msg.onExtension(request => {
   switch (request.method) {
     case 'styleUpdated':
       if (editor.style.id === style.id && !IGNORE_UPDATE_REASONS.includes(request.reason)) {
-        editor.emit('styleChange', request.style, request.reason, request.codeIsUpdated);
+        if (request.reason === 'toggle') {
+          editor.emit('styleToggled', request.style);
+        } else {
+          API.styles.get(request.style.id)
+            .then(style => {
+              editor.emit('styleChange', style, request.reason);
+            });
+        }
       }
       break;
     case 'styleDeleted':
diff --git a/edit/sections-editor.js b/edit/sections-editor.js
index 103240b1e3..306babb583 100644
--- a/edit/sections-editor.js
+++ b/edit/sections-editor.js
@@ -128,18 +128,18 @@ function SectionsEditor() {
 
   editor.ready = initSections(style.sections);
 
-  editor.on('styleChange', async (newStyle, reason) => {
-    if (reason === 'new') return; // nothing is new for us
-    if (reason === 'toggle') {
-      if (!dirty.isDirty()) {
-        Object.assign(style, newStyle);
-        updateHeader();
-      }
-      updateLivePreview();
-      return;
+  editor.on('styleToggled', newStyle => {
+    if (!dirty.isDirty()) {
+      Object.assign(style, newStyle);
+    } else {
+      editor.toggleStyle(newStyle.enabled);
     }
+    updateHeader();
+    updateLivePreview();
+  });
+  editor.on('styleChange', (newStyle, reason) => {
+    if (reason === 'new') return; // nothing is new for us
     if (reason === 'config') {
-      newStyle = await API.styles.get(newStyle.id);
       delete newStyle.sections;
       delete newStyle.name;
       delete newStyle.enabled;
@@ -147,7 +147,7 @@ function SectionsEditor() {
       updateLivePreview();
       return;
     }
-    editor.replaceStyle(await API.styles.get(newStyle.id));
+    editor.replaceStyle(newStyle);
   });
 
   /** @param {EditorSection} section */
diff --git a/edit/source-editor.js b/edit/source-editor.js
index e372fa92b6..138a34f181 100644
--- a/edit/source-editor.js
+++ b/edit/source-editor.js
@@ -116,27 +116,25 @@ function SourceEditor() {
   if (!$isTextInput(document.activeElement)) {
     cm.focus();
   }
-  editor.on('styleChange', async (newStyle, reason) => {
+  editor.on('styleToggled', newStyle => {
+    if (dirty.isDirty()) {
+      editor.toggleStyle(newStyle.enabled);
+    } else {
+      style.enabled = newStyle.enabled;
+    }
+    updateMeta();
+    updateLivePreview();
+  });
+  editor.on('styleChange', (newStyle, reason) => {
     if (reason === 'new') return;
     if (reason === 'config') {
-      newStyle = await API.styles.get(newStyle.id);
       delete newStyle.sourceCode;
       delete newStyle.name;
       Object.assign(style, newStyle);
       updateLivePreview();
       return;
     }
-    if (reason === 'toggle') {
-      if (dirty.isDirty()) {
-        editor.toggleStyle(newStyle.enabled);
-      } else {
-        style.enabled = newStyle.enabled;
-      }
-      updateMeta();
-      updateLivePreview();
-      return;
-    }
-    replaceStyle(await API.styles.get(newStyle.id));
+    replaceStyle(newStyle);
   });
 
   async function preprocess(style) {

From cc314b7be0ed7467467e7d3777c0c973417d0cde Mon Sep 17 00:00:00 2001
From: eight04 <eight04@gmail.com>
Date: Tue, 7 Dec 2021 12:29:54 +0800
Subject: [PATCH 10/11] Fix: minor

---
 edit/source-editor.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/edit/source-editor.js b/edit/source-editor.js
index 138a34f181..ead9e37824 100644
--- a/edit/source-editor.js
+++ b/edit/source-editor.js
@@ -70,10 +70,10 @@ function SourceEditor() {
           messageBoxProxy.alert(t('usercssAvoidOverwriting'), 'danger', t('genericError'));
         } else {
           res = await API.usercss.editSave({customName, enabled, id, sourceCode});
-          // Awaiting inside `try` so that exceptions go to our `catch`
           if (!id) {
             editor.emit('styleChange', res.style, 'new');
           }
+          // Awaiting inside `try` so that exceptions go to our `catch`
           await replaceStyle(res.style);
         }
         showLog(res);

From e820f5de4a2fd6de04e887207ce05195708dd28c Mon Sep 17 00:00:00 2001
From: eight04 <eight04@gmail.com>
Date: Tue, 7 Dec 2021 12:36:59 +0800
Subject: [PATCH 11/11] Fix: remove codeIsUpdated in styleman

---
 background/style-manager.js | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/background/style-manager.js b/background/style-manager.js
index be66b53594..b8243d033e 100644
--- a/background/style-manager.js
+++ b/background/style-manager.js
@@ -283,7 +283,7 @@ const styleMan = (() => {
     async toggle(id, enabled) {
       if (ready.then) await ready;
       const style = Object.assign({}, id2style(id), {enabled});
-      await saveStyle(style, {reason: 'toggle', codeIsUpdated: false});
+      await saveStyle(style, {reason: 'toggle'});
       return id;
     },
 
@@ -302,7 +302,7 @@ const styleMan = (() => {
       if (ready.then) await ready;
       const style = Object.assign({}, id2style(id));
       style[prop] = value;
-      return saveStyle(style, {reason: 'config', codeIsUpdated: false});
+      return saveStyle(style, {reason: 'config'});
     },
   };
 
@@ -396,7 +396,7 @@ const styleMan = (() => {
     return saveStyle(style, {reason: 'config'});
   }
 
-  function broadcastStyleUpdated(style, reason, method = 'styleUpdated', codeIsUpdated = true) {
+  function broadcastStyleUpdated(style, reason, method = 'styleUpdated') {
     const {id} = style;
     const data = id2data(id);
     const excluded = new Set();
@@ -419,7 +419,6 @@ const styleMan = (() => {
     return msg.broadcast({
       method,
       reason,
-      codeIsUpdated,
       style: {
         id,
         md5Url: style.md5Url,
@@ -459,7 +458,7 @@ const styleMan = (() => {
     return handleSave(style, handlingOptions);
   }
 
-  function handleSave(style, {reason, codeIsUpdated, broadcast = true}) {
+  function handleSave(style, {reason, broadcast = true}) {
     const data = id2data(style.id);
     const method = data ? 'styleUpdated' : 'styleAdded';
     if (!data) {
@@ -467,7 +466,7 @@ const styleMan = (() => {
     } else {
       data.style = style;
     }
-    if (broadcast) broadcastStyleUpdated(style, reason, method, codeIsUpdated);
+    if (broadcast) broadcastStyleUpdated(style, reason, method);
     return style;
   }