Hook up live preview

background/usercss-helper.js

@@ -81,16 +81,24 @@
     sourceCode,
     checkDup,
     metaOnly,
+    vars,
   }) {
-    const task = buildMeta({sourceCode});
-    return (metaOnly ? task : task.then(usercss.buildCode))
-      .then(style => {
-        if (!checkDup) {
-          return {style};
-        }
-        return find(style)
-          .then(dup => ({style, dup}));
-      });
+    return usercss.buildMeta(sourceCode)
+      .then(style =>
+        Promise.all([
+          metaOnly ? style : doBuild(style),
+          checkDup ? find(style) : undefined
+        ])
+      )
+      .then(([style, dup]) => ({style, dup}));
+
+    function doBuild(style) {
+      if (vars) {
+        const oldStyle = {usercssData: {vars}};
+        usercss.assignVars(style, oldStyle);
+      }
+      return usercss.buildCode(style);
+    }
   }
 
   // Parse the source, apply customizations, report fatal/syntax errors

edit.html

@@ -30,6 +30,7 @@
     <script src="content/apply.js"></script>
     <script src="edit/util.js"></script>
     <script src="edit/regexp-tester.js"></script>
+    <script src="edit/live-preview.js"></script>
     <script src="edit/applies-to-line-widget.js"></script>
     <script src="edit/source-editor.js"></script>
     <script src="edit/colorpicker-helper.js"></script>

edit/live-preview.js

@@ -4,7 +4,6 @@ function createLivePreview() {
   let previewer;
   return {update};
 
-  // {id, enabled, sourceCode, sections}
   function update(data) {
     if (!previewer) {
       if (!data.id || !data.enabled) {

edit/source-editor.js

@@ -5,7 +5,7 @@ global createAppliesToLineWidget messageBox
 global sectionsToMozFormat
 global exclusions
 global beforeUnload
-global createMetaCompiler linter
+global createMetaCompiler linter createLivePreview
 */
 'use strict';
 
@@ -37,14 +37,19 @@ function createSourceEditor(style) {
 
   editors.push(cm);
 
+  const livePreview = createLivePreview();
+  livePreview.enable(Boolean(style.id));
+
   $('#enabled').onchange = function () {
     const value = this.checked;
     dirty.modify('enabled', style.enabled, value);
     style.enabled = value;
+    updateLivePreview();
   };
 
   cm.on('changes', () => {
     dirty.modify('sourceGeneration', savedGeneration, cm.changeGeneration());
+    updateLivePreview();
   });
 
   CodeMirror.commands.prevEditor = cm => nextPrevMozDocument(cm, -1);
@@ -87,6 +92,20 @@ function createSourceEditor(style) {
     });
   });
 
+  function updateLivePreview() {
+    if (!style.id) {
+      return;
+    }
+    API.buildUsercss({
+      sourceCode: cm.getValue(),
+      vars: style.usercssData.vars
+    })
+      .then(newStyle => {
+        delete newStyle.enabled;
+        livePreview.update(Object.assign({}, style, newStyle));
+      });
+  }
+
   function initAppliesToLineWidget() {
     const PREF_NAME = 'editor.appliesToLineWidget';
     const widget = createAppliesToLineWidget(cm);
@@ -204,6 +223,7 @@ function createSourceEditor(style) {
       styleId = style.id;
       $('#preview-label').classList.remove('hidden');
       updateMeta();
+      livePreview.enable(Boolean(style.id));
     }
   }