Merge remote-tracking branch 'upstream/master'

* upstream/master:
  Change: simplify msg.js (#544)
  Add: store the reason why db failed (#550)
  Change: drop less, switch to less-bundle (#542)
  Add: improve import performance (#547)

background/background-worker.js

@@ -108,7 +108,7 @@ function getUsercssCompiler(preprocessor) {
             useFileCache: false,
           };
         }
-        loadScript('/vendor/less/less.min.js');
+        loadScript('/vendor/less-bundle/less.min.js');
         const varDefs = Object.keys(vars).map(key => `@${key}:${vars[key].value};\n`).join('');
         return self.less.render(varDefs + source)
           .then(({css}) => css);

background/background.js

@@ -17,6 +17,7 @@ window.API_METHODS = Object.assign(window.API_METHODS || {}, {
   getStyle: styleManager.get,
   getStylesByUrl: styleManager.getStylesByUrl,
   importStyle: styleManager.importStyle,
+  importManyStyles: styleManager.importMany,
   installStyle: styleManager.installStyle,
   styleExists: styleManager.styleExists,
   toggleStyle: styleManager.toggleStyle,

background/db.js

@@ -1,4 +1,4 @@
-/* global tryCatch chromeLocal ignoreChromeError */
+/* global chromeLocal ignoreChromeError workerUtil */
 /* exported db */
 /*
 Initialize a database. There are some problems using IndexedDB in Firefox:
@@ -18,52 +18,78 @@ const db = (() => {
   };
 
   function prepare() {
-    // we use chrome.storage.local fallback if IndexedDB doesn't save data,
+    return shouldUseIndexedDB().then(
-    // which, once detected on the first run, is remembered in chrome.storage.local
+      ok => {
-    // for reliablility and in localStorage for fast synchronous access
+        if (ok) {
-    // (FF may block localStorage depending on its privacy options)
-
-    // test localStorage
-    const fallbackSet = localStorage.dbInChromeStorage;
-    if (fallbackSet === 'true' || !tryCatch(() => indexedDB)) {
-      useChromeStorage();
-      return Promise.resolve();
-    }
-    if (fallbackSet === 'false') {
-      useIndexedDB();
-      return Promise.resolve();
-    }
-    // test storage.local
-    return chromeLocal.get('dbInChromeStorage')
-      .then(data =>
-        data && data.dbInChromeStorage && Promise.reject())
-      .then(() =>
-        tryCatch(dbExecIndexedDB, 'getAllKeys', IDBKeyRange.lowerBound(1), 1) ||
-        Promise.reject())
-      .then(({target}) => (
-        (target.result || [])[0] ?
-          Promise.reject('ok') :
-          dbExecIndexedDB('put', {id: -1})))
-      .then(() =>
-        dbExecIndexedDB('get', -1))
-      .then(({target}) => (
-        (target.result || {}).id === -1 ?
-          dbExecIndexedDB('delete', -1) :
-          Promise.reject()))
-      .then(() =>
-        Promise.reject('ok'))
-      .catch(result => {
-        if (result === 'ok') {
           useIndexedDB();
         } else {
           useChromeStorage();
         }
+      },
+      err => {
+        useChromeStorage(err);
+      }
+    );
+  }
+
+  function shouldUseIndexedDB() {
+    // we use chrome.storage.local fallback if IndexedDB doesn't save data,
+    // which, once detected on the first run, is remembered in chrome.storage.local
+    // for reliablility and in localStorage for fast synchronous access
+    // (FF may block localStorage depending on its privacy options)
+    if (typeof indexedDB === 'undefined') {
+      return Promise.reject(new Error('indexedDB is undefined'));
+    }
+    // test localStorage
+    const fallbackSet = localStorage.dbInChromeStorage;
+    if (fallbackSet === 'true') {
+      return Promise.resolve(false);
+    }
+    if (fallbackSet === 'false') {
+      return Promise.resolve(true);
+    }
+    // test storage.local
+    return chromeLocal.get('dbInChromeStorage')
+      .then(data => {
+        if (data && data.dbInChromeStorage) {
+          return false;
+        }
+        return testDBSize()
+          .then(ok => ok || testDBMutation());
       });
   }
 
-  function useChromeStorage() {
+  function testDBSize() {
+    return dbExecIndexedDB('getAllKeys', IDBKeyRange.lowerBound(1), 1)
+      .then(event => (
+        event.target.result &&
+        event.target.result.length &&
+        event.target.result[0]
+      ));
+  }
+
+  function testDBMutation() {
+    return dbExecIndexedDB('put', {id: -1})
+      .then(() => dbExecIndexedDB('get', -1))
+      .then(event => {
+        if (!event.target.result) {
+          throw new Error('failed to get previously put item');
+        }
+        if (event.target.result.id !== -1) {
+          throw new Error('item id is wrong');
+        }
+        return dbExecIndexedDB('delete', -1);
+      })
+      .then(() => true);
+  }
+
+  function useChromeStorage(err) {
     exec = dbExecChromeStorage;
     chromeLocal.set({dbInChromeStorage: true}, ignoreChromeError);
+    if (err) {
+      chromeLocal.setValue('dbInChromeStorageReason', workerUtil.cloneError(err));
+      console.warn('Failed to access indexedDB. Switched to storage API.', err);
+    }
     localStorage.dbInChromeStorage = 'true';
   }
 
@@ -74,39 +100,48 @@ const db = (() => {
   }
 
   function dbExecIndexedDB(method, ...args) {
-    return new Promise((resolve, reject) => {
+    return open().then(database => {
-      Object.assign(indexedDB.open('stylish', 2), {
+      if (!method) {
-        onsuccess(event) {
+        return database;
-          const database = event.target.result;
+      }
-          if (!method) {
+      if (method === 'putMany') {
-            resolve(database);
+        return putMany(database, ...args);
-          } else {
+      }
-            const transaction = database.transaction(['styles'], 'readwrite');
+      const mode = method.startsWith('get') ? 'readonly' : 'readwrite';
-            const store = transaction.objectStore('styles');
+      const transaction = database.transaction(['styles'], mode);
-            try {
+      const store = transaction.objectStore('styles');
-              Object.assign(store[method](...args), {
+      return storeRequest(store, method, ...args);
-                onsuccess: event => resolve(event, store, transaction, database),
+    });
-                onerror: reject,
+
-              });
+    function storeRequest(store, method, ...args) {
-            } catch (err) {
+      return new Promise((resolve, reject) => {
-              reject(err);
+        const request = store[method](...args);
-            }
+        request.onsuccess = resolve;
-          }
+        request.onerror = reject;
-        },
+      });
-        onerror(event) {
+    }
-          console.warn(event.target.error || event.target.errorCode);
+
-          reject(event);
+    function open() {
-        },
+      return new Promise((resolve, reject) => {
-        onupgradeneeded(event) {
+        const request = indexedDB.open('stylish', 2);
+        request.onsuccess = () => resolve(request.result);
+        request.onerror = reject;
+        request.onupgradeneeded = event => {
           if (event.oldVersion === 0) {
             event.target.result.createObjectStore('styles', {
               keyPath: 'id',
               autoIncrement: true,
             });
           }
-        },
+        };
       });
-    });
+    }
+
+    function putMany(database, items) {
+      const transaction = database.transaction(['styles'], 'readwrite');
+      const store = transaction.objectStore('styles');
+      return Promise.all(items.map(item => storeRequest(store, 'put', item)));
+    }
   }
 
   function dbExecChromeStorage(method, data) {
@@ -118,17 +153,33 @@ const db = (() => {
 
       case 'put':
         if (!data.id) {
-          return getAllStyles().then(styles => {
+          return getMaxId().then(id => {
-            data.id = 1;
+            data.id = id + 1;
-            for (const style of styles) {
-              data.id = Math.max(data.id, style.id + 1);
-            }
             return dbExecChromeStorage('put', data);
           });
         }
         return chromeLocal.setValue(STYLE_KEY_PREFIX + data.id, data)
           .then(() => (chrome.runtime.lastError ? Promise.reject() : data.id));
 
+      case 'putMany': {
+        const newItems = data.filter(i => !i.id);
+        const doPut = () =>
+          chromeLocal.set(data.reduce((o, item) => {
+            o[STYLE_KEY_PREFIX + item.id] = item;
+            return o;
+          }, {}))
+            .then(() => data.map(d => ({target: {result: d.id}})));
+        if (newItems.length) {
+          return getMaxId().then(id => {
+            for (const item of newItems) {
+              item.id = ++id;
+            }
+            return doPut();
+          });
+        }
+        return doPut();
+      }
+
       case 'delete':
         return chromeLocal.remove(STYLE_KEY_PREFIX + data);
 
@@ -150,5 +201,17 @@ const db = (() => {
         return styles;
       });
     }
+
+    function getMaxId() {
+      return getAllStyles().then(styles => {
+        let result = 0;
+        for (const style of styles) {
+          if (style.id > result) {
+            result = style.id;
+          }
+        }
+        return result;
+      });
+    }
   }
 })();

background/style-manager.js

@@ -55,6 +55,7 @@ const styleManager = (() => {
     editSave,
     findStyle,
     importStyle,
+    importMany,
     toggleStyle,
     setStyleExclusions,
     getAllStyles, // used by import-export
@@ -138,6 +139,18 @@ const styleManager = (() => {
       .then(newData => handleSave(newData, 'import'));
   }
 
+  function importMany(items) {
+    return db.exec('putMany', items)
+      .then(events => {
+        for (let i = 0; i < items.length; i++) {
+          if (!items[i].id) {
+            items[i].id = events[i].target.result;
+          }
+        }
+        return Promise.all(items.map(i => handleSave(i, 'import')));
+      });
+  }
+
   function installStyle(data, reason = null) {
     const style = styles.get(data.id);
     if (!style) {

js/msg.js

@@ -4,30 +4,20 @@
 'use strict';
 
 const msg = (() => {
-  let isBg = false;
+  const runtimeSend = promisify(chrome.runtime.sendMessage.bind(chrome.runtime));
-  if (chrome.extension.getBackgroundPage && chrome.extension.getBackgroundPage() === window) {
+  const tabSend = chrome.tabs && promisify(chrome.tabs.sendMessage.bind(chrome.tabs));
-    isBg = true;
+  const tabQuery = chrome.tabs && promisify(chrome.tabs.query.bind(chrome.tabs));
+
+  const isBg = chrome.extension.getBackgroundPage && chrome.extension.getBackgroundPage() === window;
+  if (isBg) {
     window._msg = {
-      id: 1,
-      storage: new Map(),
       handler: null,
       clone: deepCopy
     };
   }
-  const runtimeSend = promisify(chrome.runtime.sendMessage.bind(chrome.runtime));
+  const bgReady = getBg();
-  const tabSend = chrome.tabs && promisify(chrome.tabs.sendMessage.bind(chrome.tabs));
-  const tabQuery = chrome.tabs && promisify(chrome.tabs.query.bind(chrome.tabs));
-  let bg;
-  const preparing = !isBg && chrome.runtime.getBackgroundPage &&
-    promisify(chrome.runtime.getBackgroundPage.bind(chrome.runtime))()
-      .catch(() => null)
-      .then(_bg => {
-        bg = _bg;
-      });
-  bg = isBg ? window : !preparing ? null : undefined;
   const EXTENSION_URL = chrome.runtime.getURL('');
   let handler;
-  const from_ = location.href.startsWith(EXTENSION_URL) ? 'extension' : 'content';
   const RX_NO_RECEIVER = /Receiving end does not exist/;
   const RX_PORT_CLOSED = /The message port closed before a response was received/;
   return {
@@ -46,33 +36,29 @@ const msg = (() => {
     RX_PORT_CLOSED
   };
 
+  function getBg() {
+    if (isBg) {
+      return Promise.resolve(window);
+    }
+    if (!chrome.runtime.getBackgroundPage) {
+      return Promise.resolve();
+    }
+    return promisify(chrome.runtime.getBackgroundPage.bind(chrome.runtime))()
+      .catch(() => null);
+  }
+
   function send(data, target = 'extension') {
-    if (bg === undefined) {
+    const message = {data, target};
-      return preparing.then(() => send(data, target));
+    return runtimeSend(message).then(unwrapData);
-    }
-    const message = {type: 'direct', data, target, from: from_};
-    if (bg) {
-      exchangeSet(message);
-    }
-    const request = runtimeSend(message).then(unwrapData);
-    if (message.id) {
-      return withCleanup(request, () => bg._msg.storage.delete(message.id));
-    }
-    return request;
   }
 
   function sendTab(tabId, data, options, target = 'tab') {
-    return tabSend(tabId, {type: 'direct', data, target, from: from_}, options)
+    return tabSend(tabId, {data, target}, options)
       .then(unwrapData);
   }
 
   function sendBg(data) {
-    if (bg === undefined) {
+    return bgReady.then(bg => {
-      return preparing.then(doSend);
-    }
-    return withPromiseError(doSend);
-
-    function doSend() {
       if (bg) {
         if (!bg._msg.handler) {
           throw new Error('there is no bg handler');
@@ -84,7 +70,7 @@ const msg = (() => {
           .then(deepCopy);
       }
       return send(data);
-    }
+    });
   }
 
   function ignoreError(err) {
@@ -126,15 +112,12 @@ const msg = (() => {
           if (!dataObj) {
             continue;
           }
-          const message = {type: 'direct', data: dataObj, target, from: from_};
+          const message = {data: dataObj, target};
-          if (isExtension) {
+          requests.push(
-            exchangeSet(message);
+            tabSend(tab.id, message, options)
-          }
+              .then(unwrapData)
-          let request = tabSend(tab.id, message, options).then(unwrapData);
+              .catch(ignoreError)
-          if (message.id) {
+          );
-            request = withCleanup(request, () => bg._msg.storage.delete(message.id));
-          }
-          requests.push(request.catch(ignoreError));
         }
         return Promise.all(requests);
       });
@@ -178,7 +161,7 @@ const msg = (() => {
       extension: []
     };
     if (isBg) {
-      bg._msg.handler = handler;
+      window._msg.handler = handler;
     }
     chrome.runtime.onMessage.addListener(handleMessage);
   }
@@ -202,70 +185,27 @@ const msg = (() => {
     if (!handlers.length) {
       return;
     }
-    if (message.type === 'exchange') {
+    const result = executeCallbacks(handlers, message.data, sender);
-      const pending = exchangeGet(message, true);
+    if (result === undefined) {
-      if (pending) {
+      return;
-        pending.then(response);
-        return true;
-      }
     }
-    return response();
+    Promise.resolve(result)
-
+      .then(
-    function response() {
+        data => ({
-      const result = executeCallbacks(handlers, message.data, sender);
+          error: false,
-      if (result === undefined) {
+          data
-        return;
+        }),
-      }
+        err => ({
-      Promise.resolve(result)
+          error: true,
-        .then(
+          data: Object.assign({
-          data => ({
+            message: err.message || String(err),
-            error: false,
+            // FIXME: do we want to pass the entire stack?
-            data
+            stack: err.stack
-          }),
+          }, err) // this allows us to pass custom properties e.g. `err.index`
-          err => ({
-            error: true,
-            data: Object.assign({
-              message: err.message || String(err),
-              // FIXME: do we want to pass the entire stack?
-              stack: err.stack
-            }, err) // this allows us to pass custom properties e.g. `err.index`
-          })
-        )
-        .then(function doResponse(responseMessage) {
-          if (message.from === 'extension' && bg === undefined) {
-            return preparing.then(() => doResponse(responseMessage));
-          }
-          if (message.from === 'extension' && bg) {
-            exchangeSet(responseMessage);
-          } else {
-            responseMessage.type = 'direct';
-          }
-          return responseMessage;
         })
-        .then(sendResponse);
+      )
-      return true;
+      .then(sendResponse);
-    }
+    return true;
-  }
-
-  function exchangeGet(message, keepStorage = false) {
-    if (bg === undefined) {
-      return preparing.then(() => exchangeGet(message, keepStorage));
-    }
-    message.data = bg._msg.storage.get(message.id);
-    if (keepStorage) {
-      message.data = deepCopy(message.data);
-    } else {
-      bg._msg.storage.delete(message.id);
-    }
-  }
-
-  function exchangeSet(message) {
-    const id = bg._msg.id;
-    bg._msg.storage.set(id, message.data);
-    bg._msg.id++;
-    message.type = 'exchange';
-    message.id = id;
-    delete message.data;
   }
 
   function withPromiseError(fn, ...args) {
@@ -276,46 +216,15 @@ const msg = (() => {
     }
   }
 
-  function withCleanup(p, fn) {
-    return p.then(
-      result => {
-        cleanup();
-        return result;
-      },
-      err => {
-        cleanup();
-        throw err;
-      }
-    );
-
-    function cleanup() {
-      try {
-        fn();
-      } catch (err) {
-        // pass
-      }
-    }
-  }
-
   // {type, error, data, id}
   function unwrapData(result) {
     if (result === undefined) {
       throw new Error('Receiving end does not exist');
     }
-    if (result.type === 'exchange') {
+    if (result.error) {
-      const pending = exchangeGet(result);
+      throw Object.assign(new Error(result.data.message), result.data);
-      if (pending) {
-        return pending.then(unwrap);
-      }
-    }
-    return unwrap();
-
-    function unwrap() {
-      if (result.error) {
-        throw Object.assign(new Error(result.data.message), result.data);
-      }
-      return result.data;
     }
+    return result.data;
   }
 })();
 

manage/import-export.js

@@ -126,13 +126,20 @@ function importFromString(jsonString) {
       oldStyles.map(style => [style.id, style]));
     oldStylesByName = json.length && new Map(
       oldStyles.map(style => [style.name.trim(), style]));
-    return Promise.all(json.map((item, i) => {
+
+    const items = [];
+    json.forEach((item, i) => {
       const info = analyze(item, i);
       if (info) {
-        return API.importStyle(item)
+        items.push({info, item});
-          .then(style => updateStats(style, info));
       }
-    }));
+    });
+    return API.importManyStyles(items.map(i => i.item))
+      .then(styles => {
+        for (let i = 0; i < styles.length; i++) {
+          updateStats(styles[i], items[i].info);
+        }
+      });
   })
     .then(done);
 

package.json

@@ -12,7 +12,7 @@
     "eslint": "^5.9.0",
     "fs-extra": "^7.0.1",
     "jsonlint": "^1.6.3",
-    "less": "^3.8.1",
+    "less-bundle": "github:openstyles/less-bundle#v0.1.0",
     "lz-string-unsafe": "^1.4.4-fork-1",
     "rimraf": "^2.6.2",
     "semver-bundle": "^0.1.1",

tools/update-libraries.js

@@ -14,7 +14,7 @@ const files = {
   'jsonlint': [
     'lib/jsonlint.js → jsonlint.js'
   ],
-  'less': [
+  'less-bundle': [
     'dist/less.min.js → less.min.js'
   ],
   'lz-string-unsafe': [

vendor/less-bundle/LICENSE

@@ -1,7 +1,3 @@
-https://github.com/less/less.js
-
-https://github.com/less/less.js/blob/master/LICENSE
-
 
                               Apache License
                         Version 2.0, January 2004

vendor/less-bundle/README.md

@@ -0,0 +1,5 @@
+## less-bundle v0.1.0
+
+less-bundle installed via npm - source repo:
+
+https://github.com/openstyles/less-bundle/raw/v0.1.0/dist/less.min.js

vendor/less/README.md

@@ -1,10 +0,0 @@
-## LESS v3.8.1
-
-less.js installed via npm - source repo:
-
-https://github.com/less/less.js/blob/v3.8.1/dist/less.min.js
-
-If the link doesn't work, it is likely that the npm version and the release versions don't match:
-
-- https://www.npmjs.com/package/less
-- https://github.com/less/less.js/releases