Added audit configurations to extension

Author: wardpeet

lighthouse-extension/app/popup.html

@@ -38,15 +38,36 @@ <h2 class="header-titles__url">...</h2>
 
   <main class="main" role="main">
     <div class="feedback"></div>
-    <button class="generate-report">Generate report</button>
+
+    <button class="button button--link button--configure" id="configure-options">Options</button>
+    <button class="button button--generate" id="generate-report">Generate report</button>
   </main>
 
-  <aside class="status">
+  <aside class="status subpage">
     <div class="status__spinner"></div>
     <div class="status__msg">Starting...</div>
     <div><small class="status__detailsmsg"></small></div>
   </aside>
 
+  <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>
+    </ul>
+
+    <button class="button button--link button--go-back" id="go-back">Back</button>
+  </aside>
+
   <script src="scripts/popup.js"></script>
 </body>
 </html>

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

@@ -37,16 +37,16 @@ window.createPageAndPopulate = function(results) {
   });
 };
 
-window.runAudits = function(options) {
+window.runAudits = function(options, audits) {
   // Default to 'info' logging level.
   log.setLevel('info');
 
   const driver = new ExtensionProtocol();
 
   return driver.getCurrentTabURL()
       .then(url => {
-        // Setup the run config, false == no whitelist, run all audits
-        const config = new Config(configJSON, false);
+        // 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}));

lighthouse-extension/app/src/popup.js

@@ -15,20 +15,34 @@
  * limitations under the License.
  */
 
+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]
+]);
+
 document.addEventListener('DOMContentLoaded', _ => {
   const background = chrome.extension.getBackgroundPage();
   const siteNameEl = window.document.querySelector('header h2');
-  const generateReportEl = document.body.querySelector('.generate-report');
+  const generateReportEl = document.getElementById('generate-report');
+  const subpageVisibleClass = 'subpage--visible';
 
   const statusEl = document.body.querySelector('.status');
   const statusMessageEl = document.body.querySelector('.status__msg');
   const statusDetailsMessageEl = document.body.querySelector('.status__detailsmsg');
   const spinnerEl = document.body.querySelector('.status__spinner');
   const feedbackEl = document.body.querySelector('.feedback');
+
+  const generateOptionsEl = document.getElementById('configure-options');
+  const optionsEl = document.body.querySelector('.options');
+  const goBack = document.getElementById('go-back');
+
   let spinnerAnimation;
 
   const startSpinner = _ => {
-    statusEl.classList.add('status--visible');
+    statusEl.classList.add(subpageVisibleClass);
     spinnerAnimation = spinnerEl.animate([
       {transform: 'rotate(0deg)'},
       {transform: 'rotate(359deg)'}
@@ -40,25 +54,46 @@ document.addEventListener('DOMContentLoaded', _ => {
 
   const stopSpinner = _ => {
     spinnerAnimation.cancel();
-    statusEl.classList.remove('status--visible');
+    statusEl.classList.remove(subpageVisibleClass);
   };
 
   const logstatus = ([, message, details]) => {
     statusMessageEl.textContent = message;
     statusDetailsMessageEl.textContent = details;
   };
 
+  const getAuditsOfName = name => {
+    let aggregation = aggregations.filter(aggregation => aggregation.name === name);
+
+    if (!aggregation.length) {
+      return [];
+    }
+
+    // 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;
+    }
+
+    return Object.keys(aggregation[0].criteria);
+  };
+
   background.listenForStatus(logstatus);
 
   generateReportEl.addEventListener('click', () => {
     startSpinner();
     feedbackEl.textContent = '';
+
+    const audits = _flatten(
+      Array.from(optionsEl.querySelectorAll(':checked'))
+        .map(input => getAuditsOfName(input.value))
+    );
+
     background.runAudits({
       flags: {
         mobile: true,
         loadPage: true
       }
-    })
+    }, audits)
     .then(results => {
       background.createPageAndPopulate(results);
     })
@@ -74,6 +109,14 @@ document.addEventListener('DOMContentLoaded', _ => {
     });
   });
 
+  generateOptionsEl.addEventListener('click', () => {
+    optionsEl.classList.add(subpageVisibleClass);
+  });
+
+  goBack.addEventListener('click', () => {
+    optionsEl.classList.remove(subpageVisibleClass);
+  });
+
   chrome.tabs.query({active: true, lastFocusedWindow: true}, function(tabs) {
     if (tabs.length === 0) {
       return;

lighthouse-extension/app/styles/lighthouse.css

@@ -108,11 +108,24 @@ body {
   border-top: 1px solid rgba(255,255,255,0.1);
   background: #49525F;
   justify-content: space-around;
-  flex-direction: column;
+  flex-direction: row;
   align-items: flex-end;
 }
 
-.generate-report {
+.button {
+  cursor: pointer;
+}
+
+.button--link {
+  background: none;
+  border: none;
+  box-shadow: none;
+  color: #FFF;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.button--generate {
   font-family: 'Roboto', Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   font-weight: 500;
@@ -124,9 +137,23 @@ body {
   box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.50);
   border-radius: 2px;
   padding: 8px 16px 10px 16px;
+  margin-left: auto;
+  align-self: stretched;
 }
 
-.status {
+.button--configure {
+  background: none;
+  border: none;
+  box-shadow: none;
+  color: #FFF;
+  text-decoration: underline;
+}
+
+.button--go-back {
+  align-self: center;
+}
+
+.subpage {
   position: fixed;
   top: 0;
   left: 0;
@@ -136,20 +163,23 @@ body {
   pointer-events: none;
   display: flex;
   flex-direction: column;
-  align-items: center;
-  justify-content: center;
   opacity: 0;
   will-change: opacity;
   transition: opacity 0.150s cubic-bezier(0,0,0.41,1);
   text-align: center;
   padding: 20px;
 }
 
-.status--visible {
+.subpage--visible {
   opacity: 1;
   pointer-events: auto;
 }
 
+.status {
+  align-items: center;
+  justify-content: center;
+}
+
 .status__msg {
   font-size: 16px;
   margin: 8px;
@@ -164,9 +194,25 @@ body {
 }
 
 .feedback {
+  background: #49525F;
   position: absolute;
-  bottom: 16px;
+  bottom: 10px;
   left: 16px;
   width: 180px;
   line-height: 1.45;
 }
+
+/* 1. scrollbar when extension is too small */
+.options {
+  overflow: auto; /* [1] */
+}
+
+.options__title {
+  margin: 0 auto;
+}
+
+.options__list {
+  padding: 0;
+  list-style: none;
+  text-align: left;
+}