extension: add checkbox for using Lantern/DevTools throttling (#5156)

lighthouse-extension/app/popup.html

@@ -22,6 +22,16 @@
     <div class="header-titles">
       <h1 class="header-titles__main">Lighthouse</h1>
       <h2 class="header-titles__url">...</h2>
+      <div class="header-titles__throttling">
+        <label for="lantern-checkbox">
+          <input
+            id="lantern-checkbox"
+            type="checkbox"
+            checked />
+          Simulate throttling for performance audits (faster)
+          <span class="header-titles__new-adornment">NEW!</span>
+        </label>
+      </div>
     </div>
   </header>
 

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

@@ -144,7 +144,7 @@ window.createReportPageAsBlob = function(runnerResult) {
 
 /**
  * Save currently selected set of category categories to local storage.
- * @param {{selectedCategories: !Array<string>, disableExtensions: boolean}} settings
+ * @param {{selectedCategories: !Array<string>, disableExtensions: boolean, useDevTools: boolean}} settings
  */
 window.saveSettings = function(settings) {
   const storage = {
@@ -161,13 +161,16 @@ window.saveSettings = function(settings) {
   disableExtensionsDuringRun = settings.disableExtensions;
   storage[SETTINGS_KEY].disableExtensions = disableExtensionsDuringRun;
 
+  // Stash throttling setting.
+  storage[SETTINGS_KEY].useDevTools = settings.useDevTools;
+
   // Save object to chrome local storage.
   chrome.storage.local.set(storage);
 };
 
 /**
  * Load selected category categories from local storage.
- * @return {!Promise<{selectedCategories: !Object<boolean>, disableExtensions: boolean}>}
+ * @return {!Promise<{selectedCategories: !Array<string>, disableExtensions: boolean, useDevTools: boolean}>}
  */
 window.loadSettings = function() {
   return new Promise(resolve => {
@@ -186,12 +189,14 @@ window.loadSettings = function() {
       const savedCategories = Object.assign(defaultCategories, result[STORAGE_KEY]);
 
       const defaultSettings = {
+        useDevTools: false,
         disableExtensions: disableExtensionsDuringRun,
       };
       const savedSettings = Object.assign(defaultSettings, result[SETTINGS_KEY]);
 
       resolve({
-        selectedCategories: savedCategories,
+        useDevTools: savedSettings.useDevTools,
+        selectedCategories: Object.keys(savedCategories).filter(cat => savedCategories[cat]),
         disableExtensions: savedSettings.disableExtensions,
       });
     });

lighthouse-extension/app/src/popup.js

@@ -115,20 +115,20 @@ function createOptionItem(text, id, isChecked) {
 /**
  * Click event handler for Generate Report button.
  * @param {!Window} background Reference to the extension's background page.
- * @param {!Object<boolean>} selectedCategories
+ * @param {{selectedCategories: !Object<boolean>, useDevTools: boolean}} settings
  */
-function onGenerateReportButtonClick(background, selectedCategories) {
+function onGenerateReportButtonClick(background, settings) {
   showRunningSubpage();
 
   const feedbackEl = document.querySelector('.feedback');
   feedbackEl.textContent = '';
 
-  const categoryIDs = Object.keys(selectedCategories)
-      .filter(key => !!selectedCategories[key]);
+  const {selectedCategories, useDevTools} = settings;
 
   background.runLighthouseInExtension({
     restoreCleanState: true,
-  }, categoryIDs).catch(err => {
+    flags: {throttlingMethod: useDevTools ? 'devtools' : 'simulate'},
+  }, selectedCategories).catch(err => {
     let message = err.message;
     let includeReportLink = true;
 
@@ -158,13 +158,13 @@ function onGenerateReportButtonClick(background, selectedCategories) {
  * Generates a document fragment containing a list of checkboxes and labels
  * for the categories.
  * @param {!Window} background Reference to the extension's background page.
- * @param {!Object<boolean>} selectedCategories
+ * @param {!Array<string>} selectedCategories
  */
 function generateOptionsList(background, selectedCategories) {
   const frag = document.createDocumentFragment();
 
   background.getDefaultCategories().forEach(category => {
-    const isChecked = selectedCategories[category.id];
+    const isChecked = selectedCategories.includes(category.id);
     frag.appendChild(createOptionItem(category.name, category.id, isChecked));
   });
 
@@ -194,13 +194,22 @@ function initPopup() {
     background.loadSettings().then(settings => {
       generateOptionsList(background, settings.selectedCategories);
       document.querySelector('.setting-disable-extensions').checked = settings.disableExtensions;
+      document.querySelector('#lantern-checkbox').checked = !settings.useDevTools;
+    });
+
+    // bind throttling control button
+    const lanternCheckbox = document.getElementById('lantern-checkbox');
+    lanternCheckbox.addEventListener('change', async () => {
+      const settings = await background.loadSettings();
+      settings.useDevTools = !lanternCheckbox.checked;
+      background.saveSettings(settings);
     });
 
     // bind Generate Report button
     const generateReportButton = document.getElementById('generate-report');
     generateReportButton.addEventListener('click', () => {
       background.loadSettings().then(settings => {
-        onGenerateReportButtonClick(background, settings.selectedCategories);
+        onGenerateReportButtonClick(background, settings);
       });
     });
 
@@ -219,7 +228,11 @@ function initPopup() {
           .map(input => input.value);
       const disableExtensions = document.querySelector('.setting-disable-extensions').checked;
 
-      background.saveSettings({selectedCategories, disableExtensions});
+      background.saveSettings({
+        useDevTools: !lanternCheckbox.checked,
+        selectedCategories,
+        disableExtensions,
+      });
 
       optionsEl.classList.remove(subpageVisibleClass);
     });

lighthouse-extension/app/styles/lighthouse.css

@@ -76,6 +76,22 @@ html, body {
   text-overflow: ellipsis;
 }
 
+.header-titles__throttling {
+  position: relative;
+  margin-top: 5px;
+  padding-left: 20px;
+}
+
+.header-titles__throttling input {
+  position: absolute;
+  left: 0;
+}
+
+.header-titles__new-adornment {
+  color: coral;
+  font-weight: bold;
+}
+
 .main {
   height: 70px;
   display: flex;