Save audit list into storage so it's kept for the next run (#595)

Author: wardpeet

lighthouse-extension/app/manifest.json

@@ -18,6 +18,7 @@
   "permissions": [
     "activeTab",
     "debugger",
+    "storage",
     "tabs"
   ],
   "browser_action": {

lighthouse-extension/app/src/lighthouse-background.js

@@ -22,6 +22,8 @@ const Runner = require('../../../lighthouse-core/runner');
 const Config = require('../../../lighthouse-core/config/config');
 const configJSON = require('../../../lighthouse-core/config/default.json');
 const log = require('../../../lighthouse-core/lib/log');
+const STORAGE_KEY = 'lighthouse_audits';
+const _flatten = arr => [].concat.apply([], arr);
 
 window.createPageAndPopulate = function(results) {
   const tabURL = chrome.extension.getURL('/pages/report.html');
@@ -40,7 +42,6 @@ window.createPageAndPopulate = function(results) {
 window.runAudits = function(options, audits) {
   // Default to 'info' logging level.
   log.setLevel('info');
-
   const driver = new ExtensionProtocol();
 
   return driver.getCurrentTabURL()
@@ -56,6 +57,52 @@ window.runAudits = function(options, audits) {
       });
 };
 
+window.getListOfAudits = function() {
+  return _flatten(
+    configJSON.aggregations.map(aggregation => {
+      if (aggregation.items.length === 1) {
+        return {
+          name: aggregation.name,
+          criteria: aggregation.items[0].criteria,
+        };
+      }
+
+      return aggregation.items;
+    })
+  );
+};
+
+window.saveAudits = function(audits) {
+  const listOfAudits = window.getListOfAudits().map(aggregation => aggregation.name);
+  let storage = {};
+  storage[STORAGE_KEY] = {};
+
+  window.getListOfAudits().forEach(audit => {
+    storage[STORAGE_KEY][audit.name] = audits.indexOf(audit.name) > -1;
+  });
+
+  chrome.storage.local.set(storage);
+};
+
+window.fetchAudits = function() {
+  return new Promise(resolve => {
+    chrome.storage.local.get(STORAGE_KEY, result => {
+      const audits = result[STORAGE_KEY];
+
+      // create list of default audits
+      let defaultAudits = {};
+      window.getListOfAudits().forEach((audit) => {
+        defaultAudits[audit.name] = true;
+      });
+
+      // merge default and saved audits together so we always have the latest list of audits
+      resolve(
+        Object.assign({}, defaultAudits, audits)
+      );
+    });
+  });
+};
+
 window.listenForStatus = function(callback) {
   log.events.addListener('status', callback);
 };

lighthouse-extension/app/src/popup.js

@@ -15,24 +15,12 @@
  * limitations under the License.
  */
 
-const configJSON = require('../../../lighthouse-core/config/default.json');
 const _flatten = arr => [].concat.apply([], arr);
 
-const aggregations = _flatten(
-  configJSON.aggregations.map(aggregation => {
-    if (aggregation.items.length > 1) {
-      return aggregation.items;
-    }
-
-    return {
-      name: aggregation.name,
-      criteria: aggregation.items[0].criteria,
-    };
-  })
-);
-
 document.addEventListener('DOMContentLoaded', _ => {
   const background = chrome.extension.getBackgroundPage();
+  const aggregations = background.getListOfAudits();
+
   const siteNameEl = window.document.querySelector('header h2');
   const generateReportEl = document.getElementById('generate-report');
   const subpageVisibleClass = 'subpage--visible';
@@ -71,15 +59,13 @@ document.addEventListener('DOMContentLoaded', _ => {
     statusDetailsMessageEl.textContent = details;
   };
 
-  const getAuditsOfName = name => {
-    let aggregation = aggregations.filter(aggregation => aggregation.name === name);
-
-    return Object.keys(aggregation[0].criteria);
-  };
-
-  const createOptionItem = text => {
+  const createOptionItem = (text, isChecked) => {
     const input = document.createElement('input');
-    const attributes = [['type', 'checkbox'], ['checked', 'checked'], ['value', text]];
+    const attributes = [['type', 'checkbox'], ['value', text]];
+    if (isChecked) {
+      attributes.push(['checked', 'checked']);
+    }
+
     attributes.forEach(attr => input.setAttribute.apply(input, attr));
 
     const label = document.createElement('label');
@@ -91,34 +77,41 @@ document.addEventListener('DOMContentLoaded', _ => {
     return listItem;
   };
 
-  const generateOptionsList = list => {
+  const generateOptionsList = (list, selectedAudits) => {
     const frag = document.createDocumentFragment();
 
     aggregations.forEach(aggregation => {
-      frag.appendChild(createOptionItem(aggregation.name));
+      frag.appendChild(createOptionItem(aggregation.name, selectedAudits[aggregation.name]));
     });
 
     list.appendChild(frag);
   };
 
+  const getAuditsFromCategory = audits => _flatten(
+    Object.keys(audits).filter(audit => audits[audit]).map(audit => {
+      const auditsInCategory = aggregations.find(aggregation => aggregation.name === audit).criteria;
+
+      return Object.keys(auditsInCategory);
+    })
+  );
+
   background.listenForStatus(logstatus);
-  generateOptionsList(optionsList);
+  background.fetchAudits().then(audits => {
+    generateOptionsList(optionsList, audits);
+  });
 
   generateReportEl.addEventListener('click', () => {
     startSpinner();
     feedbackEl.textContent = '';
 
-    const audits = _flatten(
-      Array.from(optionsEl.querySelectorAll(':checked'))
-        .map(input => getAuditsOfName(input.value))
-    );
-
-    background.runAudits({
+    background.fetchAudits()
+    .then(getAuditsFromCategory)
+    .then(audits => background.runAudits({
       flags: {
         mobile: true,
         loadPage: true
       }
-    }, audits)
+    }, audits))
     .then(results => {
       background.createPageAndPopulate(results);
     })
@@ -139,6 +132,10 @@ document.addEventListener('DOMContentLoaded', _ => {
   });
 
   okButton.addEventListener('click', () => {
+    const checkedAudits = Array.from(optionsEl.querySelectorAll(':checked'))
+        .map(input => input.value);
+    background.saveAudits(checkedAudits);
+
     optionsEl.classList.remove(subpageVisibleClass);
   });