expose 'preserve_newlines' in beautifier; dehtmlize

fixes #435

_locales/en/messages.json

@@ -929,6 +929,10 @@
     "message": "Indent @media, @supports",
     "description": "CSS-beautifier option"
   },
+  "styleBeautifyPreserveNewlines": {
+    "message": "Preserve new lines",
+    "description": "CSS-beautifier option"
+  },
   "styleCancelEditLabel": {
     "message": "Back to manage",
     "description": "Label for cancel button for style editing"

edit/beautify.js

@@ -16,51 +16,54 @@ function beautify(event) {
   function doBeautify() {
     const tabs = prefs.get('editor.indentWithTabs');
     const options = prefs.get('editor.beautify');
+    for (const k of Object.keys(prefs.defaults['editor.beautify'])) {
+      if (!(k in options)) options[k] = prefs.defaults['editor.beautify'][k];
+    }
     options.indent_size = tabs ? 1 : prefs.get('editor.tabSize');
     options.indent_char = tabs ? '\t' : ' ';
 
     const section = getSectionForChild(event.target);
     const scope = section ? [section.CodeMirror] : editors;
 
-    showHelp(t('styleBeautify'), '<div class="beautify-options">' +
+    showHelp(t('styleBeautify'),
-      optionHtml('.selector1,', 'selector_separator_newline') +
+      $create([
-      optionHtml('.selector2', 'newline_before_open_brace') +
+        $create('.beautify-options', [
-      optionHtml('{', 'newline_after_open_brace') +
+          $createOption('.selector1,', 'selector_separator_newline'),
-      optionHtml('border: none;', 'newline_between_properties', true) +
+          $createOption('.selector2', 'newline_before_open_brace'),
-      optionHtml('display: block;', 'newline_before_close_brace', true) +
+          $createOption('{', 'newline_after_open_brace'),
-      optionHtml('}', 'newline_between_rules') +
+          $createOption('border: none;', 'newline_between_properties', true),
-      `<label style="display: block; clear: both;">
+          $createOption('display: block;', 'newline_before_close_brace', true),
-        <input data-option="indent_conditional" type="checkbox"
+          $createOption('}', 'newline_between_rules'),
-          ${options.indent_conditional !== false ? 'checked' : ''}>
+          $createLabeledCheckbox('preserve_newlines', 'styleBeautifyPreserveNewlines'),
-        <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>` +
+          $createLabeledCheckbox('indent_conditional', 'styleBeautifyIndentConditional'),
-        t('styleBeautifyIndentConditional') + '</label>' +
+        ]),
-      '</div>' +
+        $create('.buttons', [
-      `<div class="buttons">
+          $create('button', {
-        <button role="close" i18n-text="confirmClose"></button>
+            attributes: {role: 'close'},
-        <button role="undo"></button>
+            onclick: showHelp.close,
-      </div>`);
+          }, t('confirmClose')),
+          $create('button', {
+            attributes: {role: 'undo'},
+            onclick() {
+              let undoable = false;
+              for (const cm of scope) {
+                const data = cm.beautifyChange;
+                if (!data || !data[cm.changeGeneration()]) continue;
+                delete data[cm.changeGeneration()];
+                const {scrollX, scrollY} = window;
+                cm.undo();
+                cm.scrollIntoView(cm.getCursor());
+                window.scrollTo(scrollX, scrollY);
+                undoable |= data[cm.changeGeneration()];
+              }
+              this.disabled = !undoable;
+            },
+          }, t(scope.length === 1 ? 'undo' : 'undoGlobal')),
+        ]),
+      ]));
 
     $('#help-popup').className = 'wide';
 
-    $('#help-popup button[role="close"]').onclick = showHelp.close;
-
-    const undoButton = $('#help-popup button[role="undo"]');
-    undoButton.textContent = t(scope.length === 1 ? 'undo' : 'undoGlobal');
-    undoButton.addEventListener('click', () => {
-      let undoable = false;
-      scope.forEach(cm => {
-        if (cm.beautifyChange && cm.beautifyChange[cm.changeGeneration()]) {
-          delete cm.beautifyChange[cm.changeGeneration()];
-          const {scrollX, scrollY} = window;
-          cm.undo();
-          cm.scrollIntoView(cm.getCursor());
-          window.scrollTo(scrollX, scrollY);
-          undoable |= cm.beautifyChange[cm.changeGeneration()];
-        }
-      });
-      undoButton.disabled = !undoable;
-    });
-
     scope.forEach(cm => {
       setTimeout(() => {
         const pos = options.translate_positions =
@@ -82,9 +85,9 @@ function beautify(event) {
           cm.setSelections(selections);
           window.scrollTo(scrollX, scrollY);
           cm.beautifyChange[cm.changeGeneration()] = true;
-          undoButton.disabled = false;
+          $('#help-popup button[role="close"]').disabled = false;
         }
-      }, 0);
+      });
     });
 
     $('.beautify-options').onchange = ({target}) => {
@@ -96,21 +99,41 @@ function beautify(event) {
       doBeautify();
     };
 
-    function optionHtml(label, optionName, indent) {
+    function $createOption(label, optionName, indent) {
       const value = options[optionName];
-      return '<div newline="' + value.toString() + '">' +
+      return (
-        '<span' + (indent ? ' indent' : '') + '>' + label + '</span>' +
+        $create('div', {attributes: {newline: value}}, [
-        '<div class="select-resizer">' +
+          $create('span', indent ? {attributes: {indent: ''}} : {}, label),
-          '<select data-option="' + optionName + '">' +
+          $create('div.select-resizer', [
-            '<option' + (value ? '' : ' selected') + '>&nbsp;</option>' +
+            $create('select', {dataset: {option: optionName}}, [
-            '<option' + (value ? ' selected' : '') + '>\\n</option>' +
+              $create('option', {selected: !value}, '\xA0'),
-          '</select>' +
+              $create('option', {selected: value}, '\\n'),
-          '<svg class="svg-icon select-arrow" viewBox="0 0 1792 1792">' +
+            ]),
-            '<path fill-rule="evenodd" d="M1408 704q0 26-19 45l-448 448q-19 19-45 ' +
+            $create('SVG:svg.svg-icon.select-arrow', {viewBox: '0 0 1792 1792'}, [
-              '19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z"/>' +
+              $create('SVG:path', {
-          '</svg>' +
+                'fill-rule': 'evenodd',
-        '</div>' +
+                'd': 'M1408 704q0 26-19 45l-448 448q-19 19-45 ' +
-      '</div>';
+                     '19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z'
+              }),
+            ]),
+          ]),
+        ])
+      );
+    }
+
+    function $createLabeledCheckbox(optionName, i18nKey) {
+      return (
+        $create('label', {style: 'display: block; clear: both;'}, [
+          $create('input', {
+            type: 'checkbox',
+            dataset: {option: optionName},
+            checked: options[optionName] !== false
+          }),
+          $create('SVG:svg.svg-icon.checked',
+            $create('SVG:use', {'xlink:href': '#svg-icon-checked'})),
+          t(i18nKey),
+        ])
+      );
     }
   }
 }

js/prefs.js

@@ -54,6 +54,7 @@ var prefs = new function Prefs() {
       newline_between_properties: true,
       newline_before_close_brace: true,
       newline_between_rules: false,
+      preserve_newlines: true,
       end_with_newline: false,
       indent_conditional: true,
     },