autosize textareas in style settings (#1360)

edit.html

@@ -471,11 +471,11 @@
           </div>
           <label class="form-group style-include">
             <span class="form-label" i18n-text="styleIncludeLabel"></span>
-            <textarea></textarea>
+            <textarea spellcheck="false" placeholder="*://site1.com/*&#10;*://site2.com/*"></textarea>
           </label>
           <label class="form-group style-exclude">
             <span class="form-label" i18n-text="styleExcludeLabel"></span>
-            <textarea></textarea>
+            <textarea spellcheck="false" placeholder="*://site1.com/*&#10;*://site2.com/*"></textarea>
           </label>
           <!-- <label class="style-always-important">
             <input type="checkbox">

edit/settings.css

@@ -39,7 +39,8 @@
 [disabled] .radio-label {
   opacity: 0.4;
 }
-.style-include textarea,
-.style-exclude textarea {
-  height: 12em;
+.style-settings textarea {
+  resize: vertical;
+  min-height: 2.5em;
+  max-height: 50vh;
 }

edit/settings.js

@@ -1,4 +1,5 @@
-/* global API */
+/* global $ $$ */// dom.js
+/* global API */// msg.js
 /* exported StyleSettings */
 'use strict';
 
@@ -10,10 +11,10 @@ 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-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))),
+    ...[
+      ['.style-include', 'inclusions'],
+      ['.style-exclude', 'exclusions'],
+    ].map(createArea),
   ];
 
   update(style);
@@ -29,12 +30,30 @@ function StyleSettings(editor) {
     if (!newStyle.id) return;
     if (reason === 'editSave' || reason === 'config') return;
     style = newStyle;
-    document.querySelector('.style-settings').disabled = false;
+    $('.style-settings').disabled = false;
     inputs.forEach(i => i.update());
   }
 
+  function createArea([parentSel, type]) {
+    const sel = parentSel + ' textarea';
+    const el = $(sel);
+    el.on('input', () => {
+      const val = el.value;
+      el.rows = val.match(/^/gm).length + !val.endsWith('\n');
+    });
+    return createInput(sel,
+      () => {
+        const list = style[type] || [];
+        const text = list.join('\n');
+        el.rows = (list.length || 1) + 1;
+        return text;
+      },
+      () => API.styles.config(style.id, type, textToList(el.value))
+    );
+  }
+
   function createRadio(selector, getter, setter) {
-    const els = document.querySelectorAll(selector);
+    const els = $$(selector);
     for (const el of els) {
       el.addEventListener('change', e => {
         if (el.checked) {
@@ -54,7 +73,7 @@ function StyleSettings(editor) {
   }
 
   function createInput(selector, getter, setter) {
-    const el = document.querySelector(selector);
+    const el = $(selector);
     el.addEventListener('change', setter);
     return {
       update() {