terminology fixes and docs added to extension

brendankenny · brendankenny · commit 8dbd6faaf1f2 · 2016-08-26T18:17:04.000-07:00
diff --git a/lighthouse-extension/app/src/lighthouse-background.js b/lighthouse-extension/app/src/lighthouse-background.js
@@ -14,14 +14,14 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
 'use strict';
 
 const ExtensionProtocol = require('../../../lighthouse-core/gather/drivers/extension');
 const Runner = require('../../../lighthouse-core/runner');
 const Config = require('../../../lighthouse-core/config/config');
-const configJSON = require('../../../lighthouse-core/config/default.json');
+const defaultConfig = require('../../../lighthouse-core/config/default.json');
 const log = require('../../../lighthouse-core/lib/log');
+
 const STORAGE_KEY = 'lighthouse_audits';
 const _flatten = arr => [].concat.apply([], arr);
 
@@ -39,27 +39,45 @@ window.createPageAndPopulate = function(results) {
   });
 };
 
-window.runAudits = function(options, audits) {
+/**
+ * @param {!Object} options Lighthouse options.
+ * @param {!Array<string>} requestedAudits Names of audits to run.
+ * @return {!Promise}
+ */
+window.runLighthouse = function(options, requestedAudits) {
   // Default to 'info' logging level.
   log.setLevel('info');
   const driver = new ExtensionProtocol();
 
   return driver.getCurrentTabURL()
-      .then(url => {
-        // Setup the run config, audits are calculated by selected options
-        const config = new Config(configJSON, new Set(audits));
-
-        // Add in the URL to the options.
-        return Runner.run(driver, Object.assign({}, options, {url, config}));
-      }).catch(e => {
-        console.error(e);
-        throw e;
-      });
+    .then(url => {
+      // Always start with a freshly parsed default config.
+      const runConfig = JSON.parse(JSON.stringify(defaultConfig));
+
+      // Filter out audits not requested.
+      requestedAudits = new Set(requestedAudits);
+      runConfig.audits = runConfig.audits.filter(audit => requestedAudits.has(audit));
+      const config = new Config(runConfig);
+
+      // Add url and config to fresh options object.
+      const runOptions = Object.assign({}, options, {url, config});
+
+      // Run Lighthouse.
+      return Runner.run(driver, runOptions);
+    }).catch(e => {
+      console.error(e);
+      throw e;
+    });
 };
 
-window.getListOfAudits = function() {
+/**
+ * Returns list of aggregation categories (each with a list of its constituent
+ * audits) from the default config.
+ * @return {!Array<{name: string, audits: !Array<string>}>}
+ */
+window.getDefaultAggregations = function() {
   return _flatten(
-    configJSON.aggregations.map(aggregation => {
+    defaultConfig.aggregations.map(aggregation => {
       if (aggregation.items.length === 1) {
         return {
           name: aggregation.name,
@@ -69,34 +87,51 @@ window.getListOfAudits = function() {
 
       return aggregation.items;
     })
-  );
+  ).map(aggregation => {
+    return {
+      name: aggregation.name,
+      audits: Object.keys(aggregation.criteria)
+    };
+  });
 };
 
-window.saveAudits = function(audits) {
-  let storage = {};
-  storage[STORAGE_KEY] = {};
-
-  window.getListOfAudits().forEach(audit => {
-    storage[STORAGE_KEY][audit.name] = audits.indexOf(audit.name) > -1;
+/**
+ * Save currently selected set of aggregation categories to local storage.
+ * @param {!Array<{name: string, audits: !Array<string>}>} selectedAggregations
+ */
+window.saveSelectedAggregations = function(selectedAggregations) {
+  const storage = {
+    [STORAGE_KEY]: {}
+  };
+
+  window.getDefaultAggregations().forEach(audit => {
+    const selected = selectedAggregations.indexOf(audit.name) > -1;
+    storage[STORAGE_KEY][audit.name] = selected;
   });
 
   chrome.storage.local.set(storage);
 };
 
-window.fetchAudits = function() {
+/**
+ * Load selected aggregation categories from local storage.
+ * @return {!Promise<!Object<boolean>>}
+ */
+window.loadSelectedAggregations = 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;
+      // Start with list of all default aggregations set to true so list is
+      // always up to date.
+      const defaultAggregations = {};
+      window.getDefaultAggregations().forEach(aggregation => {
+        defaultAggregations[aggregation.name] = true;
       });
 
-      // merge default and saved audits together so we always have the latest list of audits
+      // Load saved aggregation selections.
+      const savedSelections = result[STORAGE_KEY];
+
+      // Overwrite defaults with any saved aggregation selections.
       resolve(
-        Object.assign({}, defaultAudits, audits)
+        Object.assign(defaultAggregations, savedSelections)
       );
     });
   });
diff --git a/lighthouse-extension/app/src/popup.js b/lighthouse-extension/app/src/popup.js
@@ -14,12 +14,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+'use strict';
 
 const _flatten = arr => [].concat.apply([], arr);
 
 document.addEventListener('DOMContentLoaded', _ => {
   const background = chrome.extension.getBackgroundPage();
-  const aggregations = background.getListOfAudits();
+  const defaultAggregations = background.getDefaultAggregations();
 
   const siteNameEl = window.document.querySelector('header h2');
   const generateReportEl = document.getElementById('generate-report');
@@ -38,7 +39,7 @@ document.addEventListener('DOMContentLoaded', _ => {
 
   let spinnerAnimation;
 
-  const startSpinner = _ => {
+  function startSpinner() {
     statusEl.classList.add(subpageVisibleClass);
     spinnerAnimation = spinnerEl.animate([
       {transform: 'rotate(0deg)'},
@@ -47,72 +48,88 @@ document.addEventListener('DOMContentLoaded', _ => {
       duration: 1000,
       iterations: Infinity
     });
-  };
+  }
 
-  const stopSpinner = _ => {
+  function stopSpinner() {
     spinnerAnimation.cancel();
     statusEl.classList.remove(subpageVisibleClass);
-  };
+  }
 
-  const logstatus = ([, message, details]) => {
+  function logstatus([, message, details]) {
     statusMessageEl.textContent = message;
     statusDetailsMessageEl.textContent = details;
-  };
+  }
 
-  const createOptionItem = (text, isChecked) => {
+  function createOptionItem(text, isChecked) {
     const input = document.createElement('input');
-    const attributes = [['type', 'checkbox'], ['value', text]];
+    input.setAttribute('type', 'checkbox');
+    input.setAttribute('value', text);
     if (isChecked) {
-      attributes.push(['checked', 'checked']);
+      input.setAttribute('checked', 'checked');
     }
 
-    attributes.forEach(attr => input.setAttribute.apply(input, attr));
-
     const label = document.createElement('label');
     label.appendChild(input);
     label.appendChild(document.createTextNode(text));
     const listItem = document.createElement('li');
     listItem.appendChild(label);
 
     return listItem;
-  };
-
-  const generateOptionsList = (list, selectedAudits) => {
+  }
+
+  /**
+   * Generates a document fragment containing a list of checkboxes and labels
+   * for the aggregation categories.
+   * @param {!Object<boolean>} selectedAggregations
+   * @return {!DocumentFragment}
+   */
+  function generateOptionsList(list, selectedAggregations) {
     const frag = document.createDocumentFragment();
 
-    aggregations.forEach(aggregation => {
-      frag.appendChild(createOptionItem(aggregation.name, selectedAudits[aggregation.name]));
+    defaultAggregations.forEach(aggregation => {
+      const isChecked = selectedAggregations[aggregation.name];
+      frag.appendChild(createOptionItem(aggregation.name, isChecked));
     });
 
-    list.appendChild(frag);
-  };
+    return frag;
+  }
+
+  /**
+   * Returns an array of names of audits from the selected aggregation
+   * categories.
+   * @param {!Object<boolean>} selectedAggregations
+   * @return {!Array<string>}
+   */
+  function getAuditsFromSelected(selectedAggregations) {
+    const auditLists = defaultAggregations.filter(aggregation => {
+      return selectedAggregations[aggregation.name];
+    }).map(selectedAggregation => {
+      return selectedAggregation.audits;
+    });
 
-  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);
-    })
-  );
+    return _flatten(auditLists);
+  }
 
   background.listenForStatus(logstatus);
-  background.fetchAudits().then(audits => {
-    generateOptionsList(optionsList, audits);
+  background.loadSelectedAggregations().then(aggregations => {
+    const frag = generateOptionsList(optionsList, aggregations);
+    optionsList.appendChild(frag);
   });
 
   generateReportEl.addEventListener('click', () => {
     startSpinner();
     feedbackEl.textContent = '';
 
-    background.fetchAudits()
-    .then(getAuditsFromCategory)
-    .then(audits => background.runAudits({
-      flags: {
-        mobile: true,
-        loadPage: true
-      }
-    }, audits))
+    background.loadSelectedAggregations()
+    .then(getAuditsFromSelected)
+    .then(selectedAudits => {
+      return background.runLighthouse({
+        flags: {
+          mobile: true,
+          loadPage: true
+        }
+      }, selectedAudits);
+    })
     .then(results => {
       background.createPageAndPopulate(results);
     })
@@ -133,9 +150,10 @@ document.addEventListener('DOMContentLoaded', _ => {
   });
 
   okButton.addEventListener('click', () => {
-    const checkedAudits = Array.from(optionsEl.querySelectorAll(':checked'))
+    // Save selected aggregation categories on options page close.
+    const checkedAggregations = Array.from(optionsEl.querySelectorAll(':checked'))
         .map(input => input.value);
-    background.saveAudits(checkedAudits);
+    background.saveSelectedAggregations(checkedAggregations);
 
     optionsEl.classList.remove(subpageVisibleClass);
   });
