Change: switch to worker-util

edit.html

@@ -24,6 +24,7 @@
     <script src="js/localization.js"></script>
     <script src="js/script-loader.js"></script>
     <script src="js/storage-util.js"></script>
+    <script src="js/worker-util.js"></script>
     <script src="content/apply.js"></script>
     <script src="edit/util.js"></script>
     <script src="edit/regexp-tester.js"></script>
@@ -96,8 +97,6 @@
     <script src="edit/linter-report.js"></script>
     <script src="edit/linter-config-dialog.js"></script>
 
-    <script src="edit/editor-worker.js"></script>
-
     <link id="cm-theme" rel="stylesheet">
 
     <template data-id="appliesTo">

edit/edit.js

@@ -6,10 +6,14 @@ global setupCodeMirror
 global beautify
 global initWithSectionStyle addSections removeSection getSectionsHashes
 global sectionsToMozFormat
-global moveFocus editorWorker
+global moveFocus workerUtil
 */
 'use strict';
 
+const editorWorker = workerUtil.createWorker({
+  url: '/edit/editor-worker-body.js'
+});
+
 let styleId = null;
 // only the actually dirty items here
 let dirty = {};
@@ -449,7 +453,7 @@ function fromMozillaFormat() {
 
   function doImport({replaceOldStyle = false}) {
     lockPageUI(true);
-    editorWorker.parseMozFormat({code: popup.codebox.getValue().trim()})
+    API.parseMozFormat({code: popup.codebox.getValue().trim()})
       .then(({sections, errors}) => {
         // shouldn't happen but just in case
         if (!sections.length && errors.length) {

edit/editor-worker-body.js

@@ -1,28 +1,25 @@
-/* global importScripts parseMozFormat parserlib CSSLint require */
+/* global importScripts parseMozFormat parserlib CSSLint require workerUtil */
 'use strict';
 
+importScripts('/js/worker-util.js');
+const {createAPI, loadScript} = workerUtil;
+
 createAPI({
   csslint: (code, config) => {
-    loadParserLib();
-    loadScript(['/vendor-overwrites/csslint/csslint.js']);
+    loadScript('/vendor-overwrites/csslint/parserlib.js', '/vendor-overwrites/csslint/csslint.js');
     return CSSLint.verify(code, config).messages
       .map(m => Object.assign(m, {rule: {id: m.rule.id}}));
   },
   stylelint: (code, config) => {
-    loadScript(['/vendor/stylelint-bundle/stylelint-bundle.min.js']);
+    loadScript('/vendor/stylelint-bundle/stylelint-bundle.min.js');
     return require('stylelint').lint({code, config});
   },
-  parseMozFormat: data => {
-    loadParserLib();
-    loadScript(['/js/moz-parser.js']);
-    return parseMozFormat(data);
-  },
   getStylelintRules,
   getCsslintRules
 });
 
 function getCsslintRules() {
-  loadScript(['/vendor-overwrites/csslint/csslint.js']);
+  loadScript('/vendor-overwrites/csslint/csslint.js');
   return CSSLint.getRules().map(rule => {
     const output = {};
     for (const [key, value] of Object.entries(rule)) {
@@ -35,7 +32,7 @@ function getCsslintRules() {
 }
 
 function getStylelintRules() {
-  loadScript(['/vendor/stylelint-bundle/stylelint-bundle.min.js']);
+  loadScript('/vendor/stylelint-bundle/stylelint-bundle.min.js');
   const stylelint = require('stylelint');
   const options = {};
   const rxPossible = /\bpossible:("(?:[^"]*?)"|\[(?:[^\]]*?)\]|\{(?:[^}]*?)\})/g;
@@ -71,48 +68,3 @@ function getStylelintRules() {
   }
   return options;
 }
-
-function loadParserLib() {
-  if (typeof parserlib !== 'undefined') {
-    return;
-  }
-  importScripts('/vendor-overwrites/csslint/parserlib.js');
-  parserlib.css.Tokens[parserlib.css.Tokens.COMMENT].hide = false;
-}
-
-const loadedUrls = new Set();
-function loadScript(urls) {
-  urls = urls.filter(u => !loadedUrls.has(u));
-  importScripts(...urls);
-  urls.forEach(u => loadedUrls.add(u));
-}
-
-function createAPI(methods) {
-  self.onmessage = e => {
-    const message = e.data;
-    Promise.resolve()
-      .then(() => methods[message.action](...message.args))
-      .then(result => ({
-        id: message.id,
-        error: false,
-        data: result
-      }))
-      .catch(err => ({
-        id: message.id,
-        error: true,
-        data: cloneError(err)
-      }))
-      .then(data => self.postMessage(data));
-  };
-}
-
-function cloneError(err) {
-  return Object.assign({
-    name: err.name,
-    stack: err.stack,
-    message: err.message,
-    lineNumber: err.lineNumber,
-    columnNumber: err.columnNumber,
-    fileName: err.fileName
-  }, err);
-}

edit/editor-worker.js

@@ -1,39 +0,0 @@
-'use strict';
-
-// eslint-disable-next-line no-var
-var editorWorker = (() => {
-  let worker;
-  return new Proxy({}, {
-    get: (target, prop) =>
-      (...args) => {
-        if (!worker) {
-          worker = createWorker();
-        }
-        return worker.invoke(prop, args);
-      }
-  });
-
-  function createWorker() {
-    let id = 0;
-    const pendingResponse = new Map();
-    const worker = new Worker('/edit/editor-worker-body.js');
-    worker.onmessage = e => {
-      const message = e.data;
-      pendingResponse.get(message.id)[message.error ? 'reject' : 'resolve'](message.data);
-      pendingResponse.delete(message.id);
-    };
-    return {invoke};
-
-    function invoke(action, args) {
-      return new Promise((resolve, reject) => {
-        pendingResponse.set(id, {resolve, reject});
-        worker.postMessage({
-          id,
-          action,
-          args
-        });
-        id++;
-      });
-    }
-  }
-})();