clients(extension): add psi web as optional backend

clients/extension/popup.html

@@ -25,12 +25,12 @@
     <div class="section section--options">
       <form class="options__form">
         <div class="options__group">
-          <h3 class="options__title">Categories</h3>
-          <ul class="options__list options__categories">
+          <h3 class="options__title">Backend</h3>
+          <ul class="options__list options__backend">
             <!-- filled dynamically -->
           </ul>
         </div>
-  
+
         <div class="options__group">
           <h3 class="options__title">Device</h2>
           <ul class="options__list options__device">
@@ -46,6 +46,13 @@ <h3 class="options__title">Device</h2>
             </li>
           </ul>
         </div>
+
+        <div class="options__group">
+          <h3 class="options__title">Categories</h3>
+          <ul class="options__list options__categories">
+            <!-- filled dynamically -->
+          </ul>
+        </div>
       </form>
     </div>
   </main>

clients/extension/scripts/popup.js

@@ -6,7 +6,6 @@
 
 import * as SettingsController from './settings-controller.js';
 
-const VIEWER_URL = 'https://googlechrome.github.io/lighthouse/viewer/';
 // Replaced with 'chrome' or 'firefox' in the build script.
 /** @type {string} */
 const BROWSER_BRAND = '___BROWSER_BRAND___';
@@ -60,17 +59,54 @@ function createOptionItem(text, id, isChecked) {
   return listItem;
 }
 
+/**
+ * @param {string} name
+ * @param {string} text
+ * @param {string} id
+ * @param {boolean} isChecked
+ * @return {HTMLLIElement}
+ */
+function createRadioItem(name, text, id, isChecked) {
+  const input = document.createElement('input');
+  input.setAttribute('type', 'radio');
+  input.setAttribute('value', id);
+  input.setAttribute('name', name);
+  if (isChecked) {
+    input.setAttribute('checked', 'checked');
+  }
+
+  const label = document.createElement('label');
+  const span = document.createElement('span');
+  span.textContent = text;
+  label.append(input, span);
+  const listItem = document.createElement('li');
+  listItem.append(label);
+
+  return listItem;
+}
+
 /**
  * Click event handler for Generate Report button.
+ * @param {string} backend
  * @param {string} url
  * @param {SettingsController.Settings} settings
  */
-function onGenerateReportButtonClick(url, settings) {
-  const apiUrl = new URL(VIEWER_URL);
-  apiUrl.searchParams.append('psiurl', url);
-  apiUrl.searchParams.append('strategy', settings.device);
-  for (const category of settings.selectedCategories) {
-    apiUrl.searchParams.append('category', category);
+function onGenerateReportButtonClick(backend, url, settings) {
+  let apiUrl;
+  if (backend === 'psi') {
+    apiUrl = new URL('https://pagespeed.web.dev/analysis');
+    apiUrl.searchParams.append('url', url);
+    apiUrl.searchParams.append('form_factor', settings.device);
+    for (const category of settings.selectedCategories) {
+      apiUrl.searchParams.append('category', category);
+    }
+  } else {
+    apiUrl = new URL('https://googlechrome.github.io/lighthouse/viewer/');
+    apiUrl.searchParams.append('psiurl', url);
+    apiUrl.searchParams.append('strategy', settings.device);
+    for (const category of settings.selectedCategories) {
+      apiUrl.searchParams.append('category', category);
+    }
   }
   apiUrl.searchParams.append('utm_source', 'lh-chrome-ext');
   window.open(apiUrl.href);
@@ -81,7 +117,7 @@ function onGenerateReportButtonClick(url, settings) {
  * for the categories.
  * @param {SettingsController.Settings} settings
  */
-function generateOptionsList(settings) {
+function generateCategoryOptionsList(settings) {
   const frag = document.createDocumentFragment();
 
   SettingsController.DEFAULT_CATEGORIES.forEach(category => {
@@ -93,6 +129,31 @@ function generateOptionsList(settings) {
   optionsCategoriesList.append(frag);
 }
 
+
+/**
+ * Generates a document fragment containing a list of backends.
+ * @param {SettingsController.Settings} settings
+ */
+function generateBackendOptionsList(settings) {
+  const frag = document.createDocumentFragment();
+
+  SettingsController.BACKENDS.forEach(backend => {
+    const isChecked = settings.backend === backend.id;
+    frag.append(createRadioItem('backend', backend.title, backend.id, isChecked));
+  });
+
+  const optionsCategoriesList = find('.options__backend');
+  optionsCategoriesList.append(frag);
+}
+
+/**
+ * @param {SettingsController.Settings} settings
+ */
+function configureVisibleSettings(settings) {
+  const optionsCategoriesList = find('.options__categories');
+  optionsCategoriesList.parentElement?.classList.toggle('hidden', settings.backend === 'psi');
+}
+
 function fillDevToolsShortcut() {
   const el = find('.devtools-shortcut');
   const isMac = /mac/i.test(navigator.platform);
@@ -106,11 +167,13 @@ function fillDevToolsShortcut() {
 function readSettingsFromDomAndPersist() {
   const optionsEl = find('.section--options');
   // Save settings when options page is closed.
+  const backend = find('.options__backend input:checked').value;
   const checkboxes = optionsEl.querySelectorAll('.options__categories input:checked');
   const selectedCategories = Array.from(checkboxes).map(input => input.value);
   const device = find('input[name="device"]:checked').value;
 
   const settings = {
+    backend,
     selectedCategories,
     device,
   };
@@ -173,16 +236,19 @@ async function initPopup() {
   }
 
   // Generate checkboxes from saved settings.
-  generateOptionsList(settings);
+  generateBackendOptionsList(settings);
+  generateCategoryOptionsList(settings);
+  configureVisibleSettings(settings);
   const selectedDeviceEl = find(`.options__device input[value="${settings.device}"]`);
   selectedDeviceEl.checked = true;
 
   generateReportButton.addEventListener('click', () => {
-    onGenerateReportButtonClick(siteUrl.href, settings);
+    onGenerateReportButtonClick(settings.backend, siteUrl.href, settings);
   });
 
   optionsFormEl.addEventListener('change', () => {
     settings = readSettingsFromDomAndPersist();
+    configureVisibleSettings(settings);
   });
 }
 

clients/extension/scripts/settings-controller.js

@@ -4,6 +4,14 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+const BACKENDS = [{
+  id: 'psi',
+  title: 'pagespeed.web.dev',
+}, {
+  id: 'viewer',
+  title: 'googlechrome.github.io',
+}];
+
 // Manually define the default categories, instead of bundling a lot of i18n code.
 const DEFAULT_CATEGORIES = [{
   id: 'performance',
@@ -22,7 +30,7 @@ const DEFAULT_CATEGORIES = [{
   title: 'PWA',
 }];
 
-/** @typedef {{selectedCategories: string[], device: string}} Settings */
+/** @typedef {{backend: string, selectedCategories: string[], device: string}} Settings */
 
 const STORAGE_KEYS = {
   Categories: 'lighthouse_audits',
@@ -50,6 +58,9 @@ function saveSettings(settings) {
   // Stash device setting.
   storage[STORAGE_KEYS.Settings].device = settings.device;
 
+  // Stash backend setting.
+  storage[STORAGE_KEYS.Settings].backend = settings.backend;
+
   // Save object to chrome local storage.
   chrome.storage.local.set(storage);
 }
@@ -81,6 +92,7 @@ function loadSettings() {
       const savedSettings = {...defaultSettings, ...result[STORAGE_KEYS.Settings]};
 
       resolve({
+        backend: savedSettings.backend ?? 'psi',
         device: savedSettings.device,
         selectedCategories: Object.keys(savedCategories).filter(cat => savedCategories[cat]),
       });
@@ -89,6 +101,7 @@ function loadSettings() {
 }
 
 export {
+  BACKENDS,
   DEFAULT_CATEGORIES,
   STORAGE_KEYS,
   saveSettings,

clients/extension/styles/lighthouse.css

@@ -105,6 +105,10 @@ main {
   padding-bottom: 10px;
 }
 
+.options__group:first-child {
+  width: 100%;
+}
+
 .section-header {
   font-size: var(--font-size);
   font-weight: 500;
@@ -133,7 +137,8 @@ main {
 
 .options__form {
   display: flex;
-  justify-content: space-around;
+  flex-wrap: wrap;
+  justify-content: space-between;
 }
 
 .options__title {