Merge pull request #560 from wardpeet/extension-configuration

Added audit configurations to extension

Author: paulirish

lighthouse-extension/app/popup.html

@@ -38,15 +38,25 @@ <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--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">
+    </ul>
+
+    <button class="button button--ok" id="ok">OK</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,43 @@
  * 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 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 optionsList = document.body.querySelector('.options__list');
+  const okButton = document.getElementById('ok');
+
   let spinnerAnimation;
 
   const startSpinner = _ => {
-    statusEl.classList.add('status--visible');
+    statusEl.classList.add(subpageVisibleClass);
     spinnerAnimation = spinnerEl.animate([
       {transform: 'rotate(0deg)'},
       {transform: 'rotate(359deg)'}
@@ -40,25 +63,62 @@ 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);
+
+    return Object.keys(aggregation[0].criteria);
+  };
+
+  const createOptionItem = text => {
+    const input = document.createElement('input');
+    const attributes = [['type', 'checkbox'], ['checked', 'checked'], ['value', text]];
+    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 => {
+    const frag = document.createDocumentFragment();
+
+    aggregations.forEach(aggregation => {
+      frag.appendChild(createOptionItem(aggregation.name));
+    });
+
+    list.appendChild(frag);
+  };
+
   background.listenForStatus(logstatus);
+  generateOptionsList(optionsList);
 
   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 +134,14 @@ document.addEventListener('DOMContentLoaded', _ => {
     });
   });
 
+  generateOptionsEl.addEventListener('click', () => {
+    optionsEl.classList.add(subpageVisibleClass);
+  });
+
+  okButton.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,25 +108,42 @@ 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;
   font-family: 'Roboto', Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   font-weight: 500;
-  font-size: 16px;
+  font-size: 12px;
   color: #FFFFFF;
   border: none;
   color: #FFF;
   background: #719EA8;
   box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.50);
   border-radius: 2px;
+  padding: 7px 12px 5px 12px
+}
+
+.button--generate {
+  font-weight: 500;
+  font-size: 16px;
   padding: 8px 16px 10px 16px;
+  align-self: stretched;
+  margin-left: auto;
 }
 
-.status {
+.button--configure {
+  margin-right: auto;
+}
+
+.button--ok {
+  margin: 0 auto;
+}
+
+.subpage {
   position: fixed;
   top: 0;
   left: 0;
@@ -136,20 +153,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 +184,26 @@ 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] */
+  display: block;
+}
+
+.options__title {
+  margin: 0 auto;
+}
+
+.options__list {
+  padding: 0;
+  list-style: none;
+  text-align: left;
+}