diff --git a/clients/extension/popup.html b/clients/extension/popup.html
index 1686e2a42f82..f1ae3c007917 100644
--- a/clients/extension/popup.html
+++ b/clients/extension/popup.html
@@ -25,12 +25,12 @@
diff --git a/clients/extension/scripts/popup.js b/clients/extension/scripts/popup.js
index 765956ec5ee1..9bdc0c662851 100644
--- a/clients/extension/scripts/popup.js
+++ b/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);
});
}
diff --git a/clients/extension/scripts/settings-controller.js b/clients/extension/scripts/settings-controller.js
index dbcc9cb42826..141069e033c6 100644
--- a/clients/extension/scripts/settings-controller.js
+++ b/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,
diff --git a/clients/extension/styles/lighthouse.css b/clients/extension/styles/lighthouse.css
index 490e12b9de24..85e6e15bab64 100644
--- a/clients/extension/styles/lighthouse.css
+++ b/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 {