Generate audit list from configJson

Author: wardpeet

lighthouse-extension/app/popup.html

@@ -52,17 +52,17 @@ <h2 class="header-titles__url">...</h2>
   <aside class="options subpage">
     <h2 class="options__title">Options</h2>
     <ul class="options__list">
-        <li><input type="checkbox" id="offline" checked="checked" value="App can load on offline/flaky connections" /><label for="offline">App can load on offline/flaky connections</label></li>
-        <li><input type="checkbox" id="pageload" checked="checked" value="Page load performance is fast" /><label for="pageload">Page load performance</label></li>
-        <li><input type="checkbox" id="progressive" checked="checked"  value="Site is progressively enhanced" /><label for="progressive">Site is progressively enhanced</label></li>
-        <li><input type="checkbox" id="secure" checked="checked"  value="Network connection is secure" /><label for="secure">Network connection is secure</label></li>
-        <li><input type="checkbox" id="homescreen" checked="checked" value="User can be prompted to Add to Homescreen" /><label for="homescreen">User can be prompted to Add to Homescreen</label></li>
-        <li><input type="checkbox" id="splashscreen" checked="checked" value="Installed web app will launch with custom splash screen" /><label for="splashscreen">Installed web app will launch with custom splash screen</label></li>
-        <li><input type="checkbox" id="brandcolor" checked="checked" value="Address bar matches brand colors" /><label for="brandcolor">Address bar matches brand colors</label></li>
-        <li><input type="checkbox" id="mobile-friendly" checked="checked" value="Design is mobile-friendly" /><label for="mobile-friendly">Design is mobile-friendly</label></li>
-        <li>&nbsp;</li>
-        <li><input type="checkbox" id="bestpractices" checked="checked" value="Best Practices" /><label for="bestpractices">Best Practices</label></li>
-        <li><input type="checkbox" id="performance" checked="checked" value="Performance Metrics" /><label for="performance">Performance Metrics</label></li>
+        <li><label><input type="checkbox" checked="checked" value="App can load on offline/flaky connections" />App can load on offline/flaky connections</label></li>
+        <li><label><input type="checkbox" checked="checked" value="Page load performance is fast" />Page load performance</label></li>
+        <li><label><input type="checkbox" checked="checked" value="Site is progressively enhanced" />Site is progressively enhanced</label></li>
+        <li><label><input type="checkbox" checked="checked" value="Network connection is secure" />Network connection is secure</label></li>
+        <li><label><input type="checkbox" checked="checked" value="User can be prompted to Add to Homescreen" />User can be prompted to Add to Homescreen</label></li>
+        <li><label><input type="checkbox" checked="checked" value="Installed web app will launch with custom splash screen" />Installed web app will launch with custom splash screen</label></li>
+        <li><label><input type="checkbox" checked="checked" value="Address bar matches brand colors" />Address bar matches brand colors</label></li>
+        <li><label><input type="checkbox" checked="checked" value="Design is mobile-friendly" />Design is mobile-friendly</label></li>
+        <li><label>&nbsp;</li>
+        <li><label><input type="checkbox" checked="checked" value="Best Practices" /><label for="bestpractices">Best Practices</label></li>
+        <li><label><input type="checkbox" checked="checked" value="Performance Metrics" /><label for="performance">Performance Metrics</label></li>
     </ul>
 
     <button class="button button--link button--go-back" id="go-back">Back</button>

lighthouse-extension/app/src/popup.js

@@ -17,11 +17,19 @@
 
 const configJSON = require('../../../lighthouse-core/config/default.json');
 const _flatten = arr => [].concat.apply([], arr);
-const aggregations = _flatten([
-  configJSON.aggregations[0].items,
-  configJSON.aggregations[1],
-  configJSON.aggregations[2]
-]);
+
+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();
@@ -37,6 +45,7 @@ document.addEventListener('DOMContentLoaded', _ => {
 
   const generateOptionsEl = document.getElementById('configure-options');
   const optionsEl = document.body.querySelector('.options');
+  const optionsList = document.body.querySelector('.options__list');
   const goBack = document.getElementById('go-back');
 
   let spinnerAnimation;
@@ -65,19 +74,35 @@ document.addEventListener('DOMContentLoaded', _ => {
   const getAuditsOfName = name => {
     let aggregation = aggregations.filter(aggregation => aggregation.name === name);
 
-    if (!aggregation.length) {
-      return [];
-    }
+    return Object.keys(aggregation[0].criteria);
+  };
 
-    // This checks if we have a a criteria property, it's necessary to check categories like Best Practices
-    if (!aggregation[0].hasOwnProperty('criteria')) {
-      aggregation = aggregation[0].items;
-    }
+  const createOptionItem = text => {
+    const input = document.createElement('input');
+    const attributes = [['type', 'checkbox'], ['checked', 'checked'], ['value', text]];
+    attributes.forEach(attr => input.setAttribute.apply(input, attr));
 
-    return Object.keys(aggregation[0].criteria);
+    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 => {
+    const frag = document.createDocumentFragment();
+
+    aggregations.forEach(aggregation => {
+      frag.appendChild(createOptionItem(aggregation.name));
+    });
+
+    list.appendChild(frag);
   };
 
   background.listenForStatus(logstatus);
+  generateOptionsList(optionsList);
 
   generateReportEl.addEventListener('click', () => {
     startSpinner();