chrome-devtools-frontend 1.0.1040857 → 1.0.1070764

package/front_end/panels/lighthouse/LighthousePanel.ts

@@ -5,7 +5,6 @@
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
-import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as EmulationModel from '../../models/emulation/emulation.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -27,7 +26,6 @@ import * as LighthouseReport from '../../third_party/lighthouse/report/report.js
 import {LighthouseReportRenderer, LighthouseReportUIFeatures} from './LighthouseReportRenderer.js';
 import {Item, ReportSelector} from './LighthouseReportSelector.js';
 import {StartView} from './LighthouseStartView.js';
-import {StartViewFR} from './LighthouseStartViewFR.js';
 import {StatusView} from './LighthouseStatusView.js';
 import {TimespanView} from './LighthouseTimespanView.js';
 
@@ -72,7 +70,7 @@ export class LighthousePanel extends UI.Panel.Panel {
   private readonly controller: LighthouseController;
   private readonly startView: StartView;
   private readonly statusView: StatusView;
-  private readonly timespanView: TimespanView|null;
+  private readonly timespanView: TimespanView;
   private warningText: Nullable<string>;
   private unauditableExplanation: Nullable<string>;
   private readonly cachedRenderedReports: Map<ReportJSON, HTMLElement>;
@@ -99,18 +97,16 @@ export class LighthousePanel extends UI.Panel.Panel {
   private isLHAttached?: boolean;
   private currentLighthouseRun?: LighthouseRun;
 
-  private constructor() {
+  private constructor(
+      protocolService: ProtocolService,
+      controller: LighthouseController,
+  ) {
     super('lighthouse');
 
-    this.protocolService = new ProtocolService();
-    this.controller = new LighthouseController(this.protocolService);
-    if (Root.Runtime.experiments.isEnabled('lighthousePanelFR')) {
-      this.startView = new StartViewFR(this.controller);
-      this.timespanView = new TimespanView(this.controller);
-    } else {
-      this.startView = new StartView(this.controller);
-      this.timespanView = null;
-    }
+    this.protocolService = protocolService;
+    this.controller = controller;
+    this.startView = new StartView(this.controller);
+    this.timespanView = new TimespanView(this.controller);
     this.statusView = new StatusView(this.controller);
 
     this.warningText = null;
@@ -136,10 +132,13 @@ export class LighthousePanel extends UI.Panel.Panel {
     this.controller.recomputePageAuditability();
   }
 
-  static instance(opts = {forceNew: null}): LighthousePanel {
-    const {forceNew} = opts;
-    if (!lighthousePanelInstace || forceNew) {
-      lighthousePanelInstace = new LighthousePanel();
+  static instance(opts?: {forceNew: boolean, protocolService: ProtocolService, controller: LighthouseController}):
+      LighthousePanel {
+    if (!lighthousePanelInstace || opts?.forceNew) {
+      const protocolService = opts?.protocolService ?? new ProtocolService();
+      const controller = opts?.controller ?? new LighthouseController(protocolService);
+
+      lighthousePanelInstace = new LighthousePanel(protocolService, controller);
     }
 
     return lighthousePanelInstace;
@@ -150,13 +149,13 @@ export class LighthousePanel extends UI.Panel.Panel {
   }
 
   private async onLighthouseTimespanStart(): Promise<void> {
-    this.timespanView?.show(this.contentElement);
+    this.timespanView.show(this.contentElement);
     await this.startLighthouse();
-    this.timespanView?.ready();
+    this.timespanView.ready();
   }
 
   private async onLighthouseTimespanEnd(): Promise<void> {
-    this.timespanView?.hide();
+    this.timespanView.hide();
     await this.collectLighthouseResults();
   }
 
@@ -166,7 +165,7 @@ export class LighthousePanel extends UI.Panel.Panel {
   }
 
   private async onLighthouseCancel(): Promise<void> {
-    this.timespanView?.hide();
+    this.timespanView.hide();
     void this.cancelLighthouse();
   }
 
@@ -324,8 +323,12 @@ export class LighthousePanel extends UI.Panel.Panel {
     });
     LighthouseReportRenderer.handleDarkMode(el);
 
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const features = new LighthouseReportUIFeatures(dom) as any;
+    const features = new LighthouseReportUIFeatures(dom, {
+                       getStandaloneReportHTML(): string {
+                         return features.getReportHtml();
+                       },
+                       // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                     }) as any;
     features.setBeforePrint(this.beforePrint.bind(this));
     features.setAfterPrint(this.afterPrint.bind(this));
     LighthouseReportRenderer.addViewTraceButton(el, features, artifacts);
@@ -335,7 +338,7 @@ export class LighthousePanel extends UI.Panel.Panel {
   }
 
   private async waitForMainTargetLoad(): Promise<void> {
-    const mainTarget = SDK.TargetManager.TargetManager.instance().mainTarget();
+    const mainTarget = SDK.TargetManager.TargetManager.instance().mainFrameTarget();
     if (!mainTarget) {
       return;
     }
@@ -454,8 +457,6 @@ export class LighthousePanel extends UI.Panel.Panel {
    * We set the device emulation on the DevTools-side for two reasons:
    * 1. To workaround some odd device metrics emulation bugs like occuluding viewports
    * 2. To get the attractive device outline
-   *
-   * We also set flags.internalDisableDeviceScreenEmulation = true to let LH only apply UA emulation
    */
   private async setupEmulationAndProtocolConnection(): Promise<void> {
     const flags = this.controller.getFlags();
@@ -475,10 +476,10 @@ export class LighthousePanel extends UI.Panel.Panel {
     };
 
     emulationModel.toolbarControlsEnabledSetting().set(false);
-    if ('emulatedFormFactor' in flags && flags.emulatedFormFactor === 'desktop') {
+    if ('formFactor' in flags && flags.formFactor === 'desktop') {
       emulationModel.enabledSetting().set(false);
       emulationModel.emulate(EmulationModel.DeviceModeModel.Type.None, null, null);
-    } else if (flags.emulatedFormFactor === 'mobile') {
+    } else if (flags.formFactor === 'mobile') {
       emulationModel.enabledSetting().set(true);
       emulationModel.deviceOutlineSetting().set(true);
 
@@ -528,7 +529,7 @@ export class LighthousePanel extends UI.Panel.Panel {
 
     Emulation.InspectedPagePlaceholder.InspectedPagePlaceholder.instance().update(true);
 
-    const mainTarget = SDK.TargetManager.TargetManager.instance().mainTarget();
+    const mainTarget = SDK.TargetManager.TargetManager.instance().mainFrameTarget();
     if (!mainTarget) {
       return;
     }
@@ -536,9 +537,14 @@ export class LighthousePanel extends UI.Panel.Panel {
     if (!resourceTreeModel) {
       return;
     }
-    // reload to reset the page state
-    const inspectedURL = await this.controller.getInspectedURL();
-    await resourceTreeModel.navigate(inspectedURL);
+
+    // Reload to reset page state after a navigation.
+    // We want to retain page state for timespan and snapshot modes.
+    const mode = this.currentLighthouseRun?.flags.mode;
+    if (mode === 'navigation') {
+      const inspectedURL = await this.controller.getInspectedURL();
+      await resourceTreeModel.navigate(inspectedURL);
+    }
   }
 
   wasShown(): void {

package/front_end/panels/lighthouse/LighthouseProtocolService.ts

@@ -8,6 +8,7 @@ import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 
 import type * as ReportRenderer from './LighthouseReporterTypes.js';
+import type * as Protocol from '../../generated/protocol.js';
 
 /**
  * @overview
@@ -55,11 +56,9 @@ export interface LighthouseRun {
  * ProtocolService manages a connection between the frontend (Lighthouse panel) and the Lighthouse worker.
  */
 export class ProtocolService {
-  private targetInfo?: {
-    mainSessionId: string,
-    mainTargetId: string,
-    mainFrameId: string,
-  };
+  private mainSessionId?: string;
+  private mainFrameId?: string;
+  private targetInfos?: Protocol.Target.TargetInfo[];
   private parallelConnection?: ProtocolClient.InspectorBackend.Connection;
   private lighthouseWorkerPromise?: Promise<Worker>;
   private lighthouseMessageUpdateCallback?: ((arg0: string) => void);
@@ -67,7 +66,7 @@ export class ProtocolService {
 
   async attach(): Promise<void> {
     await SDK.TargetManager.TargetManager.instance().suspendAllTargets();
-    const mainTarget = SDK.TargetManager.TargetManager.instance().mainTarget();
+    const mainTarget = SDK.TargetManager.TargetManager.instance().mainFrameTarget();
     if (!mainTarget) {
       throw new Error('Unable to find main target required for Lighthouse');
     }
@@ -92,11 +91,9 @@ export class ProtocolService {
     });
 
     this.parallelConnection = connection;
-    this.targetInfo = {
-      mainTargetId: await childTargetManager.getParentTargetId(),
-      mainFrameId: mainFrame.id,
-      mainSessionId: sessionId,
-    };
+    this.targetInfos = childTargetManager.targetInfos();
+    this.mainFrameId = mainFrame.id;
+    this.mainSessionId = sessionId;
   }
 
   getLocales(): readonly string[] {
@@ -106,7 +103,7 @@ export class ProtocolService {
   async startTimespan(currentLighthouseRun: LighthouseRun): Promise<void> {
     const {inspectedURL, categoryIDs, flags} = currentLighthouseRun;
 
-    if (!this.targetInfo) {
+    if (!this.mainFrameId || !this.mainSessionId || !this.targetInfos) {
       throw new Error('Unable to get target info required for Lighthouse');
     }
 
@@ -116,14 +113,16 @@ export class ProtocolService {
       flags,
       config: this.configForTesting,
       locales: this.getLocales(),
-      target: this.targetInfo,
+      mainSessionId: this.mainSessionId,
+      mainFrameId: this.mainFrameId,
+      targetInfos: this.targetInfos,
     });
   }
 
   async collectLighthouseResults(currentLighthouseRun: LighthouseRun): Promise<ReportRenderer.RunnerResult> {
     const {inspectedURL, categoryIDs, flags} = currentLighthouseRun;
 
-    if (!this.targetInfo) {
+    if (!this.mainFrameId || !this.mainSessionId || !this.targetInfos) {
       throw new Error('Unable to get target info required for Lighthouse');
     }
 
@@ -138,7 +137,9 @@ export class ProtocolService {
       flags,
       config: this.configForTesting,
       locales: this.getLocales(),
-      target: this.targetInfo,
+      mainSessionId: this.mainSessionId,
+      mainFrameId: this.mainFrameId,
+      targetInfos: this.targetInfos,
     });
   }
 

package/front_end/panels/lighthouse/LighthouseReportRenderer.ts

@@ -76,7 +76,7 @@ export class LighthouseReportRenderer extends LighthouseReport.ReportRenderer {
   }
 
   static async linkifyNodeDetails(el: Element): Promise<void> {
-    const mainTarget = SDK.TargetManager.TargetManager.instance().mainTarget();
+    const mainTarget = SDK.TargetManager.TargetManager.instance().mainFrameTarget();
     if (!mainTarget) {
       return;
     }
@@ -153,8 +153,8 @@ export class LighthouseReportUIFeatures extends LighthouseReport.ReportUIFeature
   private beforePrint: (() => void)|null;
   private afterPrint: (() => void)|null;
 
-  constructor(dom: LighthouseReport.DOM) {
-    super(dom);
+  constructor(dom: LighthouseReport.DOM, opts: {}) {
+    super(dom, opts);
     this.beforePrint = null;
     this.afterPrint = null;
     this._topbar._print = this._print.bind(this);

package/front_end/panels/lighthouse/LighthouseReportSelector.ts

@@ -113,7 +113,12 @@ export class Item {
     this.renderReport = renderReport;
     this.showLandingCallback = showLandingCallback;
 
-    const url = new Common.ParsedURL.ParsedURL(lighthouseResult.finalUrl);
+    // In Lighthouse 10.0, `finalUrl` is not provided on snapshot or timespan reports.
+    // `finalDisplayedUrl` is the new preferred URL to use for cosmetic identification.
+    // TODO: Remove the `finalUrl` backport once Lighthouse 10.0 is rolled into DevTools.
+    const finalDisplayedUrl = lighthouseResult.finalDisplayedUrl || lighthouseResult.finalUrl || '';
+
+    const url = new Common.ParsedURL.ParsedURL(finalDisplayedUrl);
     const timestamp = lighthouseResult.fetchTime;
     this.element = document.createElement('option');
     this.element.label = `${new Date(timestamp).toLocaleTimeString()} - ${url.domain()}`;

package/front_end/panels/lighthouse/LighthouseReporterTypes.ts

@@ -47,8 +47,9 @@ export interface ReportJSON {
   userAgent: string;
   fetchTime: string;
   timing: {total: number};
-  requestedUrl: string;
-  finalUrl: string;
+  requestedUrl?: string;
+  finalDisplayedUrl: string;
+  finalUrl?: string;
   runWarnings?: string[];
   artifacts: {traces: {defaultPass: {traceEvents: Array<unknown>}}};
   audits: {[x: string]: AuditResultJSON};

package/front_end/panels/lighthouse/LighthouseStartView.ts

@@ -1,52 +1,67 @@
-// Copyright 2018 The Chromium Authors. All rights reserved.
+// Copyright 2022 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import lighthouseStartViewStyles from './lighthouseStartView.css.js';
-import type * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import type * as Platform from '../../core/platform/platform.js';
+import type * as Common from '../../core/common/common.js';
 
 import {Events, Presets, RuntimeSettings, type LighthouseController, type Preset} from './LighthouseController.js';
 import {RadioSetting} from './RadioSetting.js';
+import lighthouseStartViewStyles from './lighthouseStartView.css.js';
 
 const UIStrings = {
   /**
-  *@description Text that is usually a hyperlink to more documentation
-  */
-  learnMore: 'Learn more',
+   * @description Text displayed as the title of a panel that can be used to audit a web page with Lighthouse.
+   */
+  generateLighthouseReport: 'Generate a Lighthouse report',
   /**
-  *@description Text that refers to device such as a phone
-  */
-  device: 'Device',
+   * @description Text that refers to the Lighthouse mode
+   */
+  mode: 'Mode',
   /**
-  *@description Title in the Lighthouse Start View for list of categories to run during audit
-  */
+   * @description Title in the Lighthouse Start View for list of categories to run during audit
+   */
   categories: 'Categories',
   /**
-  *@description Text in Lighthouse Status View
-  */
-  communityPluginsBeta: 'Community Plugins (beta)',
+   * @description Title in the Lighthouse Start View for list of available start plugins
+   */
+  plugins: 'Plugins',
+  /**
+   * @description Label for a button to start analyzing a page navigation with Lighthouse
+   */
+  analyzeNavigation: 'Analyze page load',
   /**
-  *@description Text of audits start button in Lighthouse Start View
-  */
-  generateReport: 'Generate report',
+   * @description Label for a button to start analyzing the current page state with Lighthouse
+   */
+  analyzeSnapshot: 'Analyze page state',
   /**
-  *@description Text in Lighthouse Start View
-  */
-  identifyAndFixCommonProblemsThat:
-      'Identify and fix common problems that affect your site\'s performance, accessibility, and user experience.',
+   * @description Label for a button that starts a Lighthouse mode that analyzes user interactions over a period of time.
+   */
+  startTimespan: 'Start timespan',
+  /**
+   * @description Text that is usually a hyperlink to more documentation
+   */
+  learnMore: 'Learn more',
+  /**
+   * @description Text that refers to device such as a phone
+   */
+  device: 'Device',
 };
+
 const str_ = i18n.i18n.registerUIStrings('panels/lighthouse/LighthouseStartView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
 export class StartView extends UI.Widget.Widget {
-  protected controller: LighthouseController;
-  protected readonly settingsToolbarInternal: UI.Toolbar.Toolbar;
-  protected startButton!: HTMLButtonElement;
-  protected helpText?: Element;
-  protected warningText?: Element;
-  protected checkboxes: Array<{preset: Preset, checkbox: UI.Toolbar.ToolbarCheckbox}> = [];
-  private shouldConfirm?: boolean;
+  private controller: LighthouseController;
+  private readonly settingsToolbarInternal: UI.Toolbar.Toolbar;
+  private startButton!: HTMLButtonElement;
+  private helpText?: Element;
+  private warningText?: Element;
+  private checkboxes: Array<{preset: Preset, checkbox: UI.Toolbar.ToolbarCheckbox}> = [];
+
+  changeFormMode?: (mode: string) => void;
 
   constructor(controller: LighthouseController) {
     super();
@@ -56,11 +71,7 @@ export class StartView extends UI.Widget.Widget {
     this.render();
   }
 
-  settingsToolbar(): UI.Toolbar.Toolbar {
-    return this.settingsToolbarInternal;
-  }
-
-  protected populateRuntimeSettingAsRadio(settingName: string, label: string, parentElement: Element): void {
+  private populateRuntimeSettingAsRadio(settingName: string, label: string, parentElement: Element): void {
     const runtimeSetting = RuntimeSettings.find(item => item.setting.name === settingName);
     if (!runtimeSetting || !runtimeSetting.options) {
       throw new Error(`${settingName} is not a setting with options`);
@@ -84,7 +95,7 @@ export class StartView extends UI.Widget.Widget {
     UI.ARIAUtils.setAccessibleName(control.element, label);
   }
 
-  protected populateRuntimeSettingAsToolbarCheckbox(settingName: string, toolbar: UI.Toolbar.Toolbar): void {
+  private populateRuntimeSettingAsToolbarCheckbox(settingName: string, toolbar: UI.Toolbar.Toolbar): void {
     const runtimeSetting = RuntimeSettings.find(item => item.setting.name === settingName);
     if (!runtimeSetting || !runtimeSetting.title) {
       throw new Error(`${settingName} is not a setting with a title`);
@@ -102,7 +113,7 @@ export class StartView extends UI.Widget.Widget {
     }
   }
 
-  protected populateRuntimeSettingAsToolbarDropdown(settingName: string, toolbar: UI.Toolbar.Toolbar): void {
+  private populateRuntimeSettingAsToolbarDropdown(settingName: string, toolbar: UI.Toolbar.Toolbar): void {
     const runtimeSetting = RuntimeSettings.find(item => item.setting.name === settingName);
     if (!runtimeSetting || !runtimeSetting.title) {
       throw new Error(`${settingName} is not a setting with a title`);
@@ -126,7 +137,7 @@ export class StartView extends UI.Widget.Widget {
     }
   }
 
-  protected populateFormControls(fragment: UI.Fragment.Fragment, mode?: string): void {
+  private populateFormControls(fragment: UI.Fragment.Fragment, mode?: string): void {
     // Populate the device type
     const deviceTypeFormElements = fragment.$('device-type-form-elements');
     this.populateRuntimeSettingAsRadio('lighthouse.device_type', i18nString(UIStrings.device), deviceTypeFormElements);
@@ -152,79 +163,137 @@ export class StartView extends UI.Widget.Widget {
     UI.ARIAUtils.markAsGroup(categoryFormElements);
     UI.ARIAUtils.setAccessibleName(categoryFormElements, i18nString(UIStrings.categories));
     UI.ARIAUtils.markAsGroup(pluginFormElements);
-    UI.ARIAUtils.setAccessibleName(pluginFormElements, i18nString(UIStrings.communityPluginsBeta));
+    UI.ARIAUtils.setAccessibleName(pluginFormElements, i18nString(UIStrings.plugins));
   }
 
-  protected render(): void {
+  private render(): void {
     this.populateRuntimeSettingAsToolbarCheckbox('lighthouse.legacy_navigation', this.settingsToolbarInternal);
     this.populateRuntimeSettingAsToolbarCheckbox('lighthouse.clear_storage', this.settingsToolbarInternal);
     this.populateRuntimeSettingAsToolbarDropdown('lighthouse.throttling', this.settingsToolbarInternal);
 
-    this.startButton = UI.UIUtils.createTextButton(
-        i18nString(UIStrings.generateReport),
-        () => this.controller.dispatchEventToListeners(
-            Events.RequestLighthouseStart,
-            /* keyboardInitiated */ this.startButton.matches(':focus-visible')),
-        /* className */ '', /* primary */ true);
-    this.setDefaultFocusedElement(this.startButton);
-
-    const auditsDescription = i18nString(UIStrings.identifyAndFixCommonProblemsThat);  // crbug.com/972969
+    const {mode} = this.controller.getFlags();
+    this.populateStartButton(mode);
 
     const fragment = UI.Fragment.Fragment.build`
-  <div class="vbox lighthouse-start-view">
-  <header>
-  <div class="lighthouse-logo"></div>
-  <div class="lighthouse-start-button-container hbox">
-  ${this.startButton}
-  </div>
+<form class="lighthouse-start-view">
+  <header class="hbox">
+    <div class="lighthouse-logo"></div>
+    <div class="lighthouse-title">${i18nString(UIStrings.generateLighthouseReport)}</div>
+    <div class="lighthouse-start-button-container" $="start-button-container">${this.startButton}</div>
+  </header>
   <div $="help-text" class="lighthouse-help-text hidden"></div>
-  <div class="lighthouse-start-view-text">
-  <span>${auditsDescription}</span>
-  ${UI.XLink.XLink.create('https://developers.google.com/web/tools/lighthouse/', i18nString(UIStrings.learnMore))}
+  <div class="lighthouse-options hbox">
+    <div class="lighthouse-form-section">
+      <div class="lighthouse-form-elements" $="mode-form-elements"></div>
+    </div>
+    <div class="lighthouse-form-section">
+      <div class="lighthouse-form-elements" $="device-type-form-elements"></div>
+    </div>
+    <div class="lighthouse-form-categories">
+      <div class="lighthouse-form-section">
+        <div class="lighthouse-form-section-label">${i18nString(UIStrings.categories)}</div>
+        <div class="lighthouse-form-elements" $="categories-form-elements"></div>
+      </div>
+      <div class="lighthouse-form-section">
+        <div class="lighthouse-form-section-label">
+          <div class="lighthouse-icon-label">${i18nString(UIStrings.plugins)}</div>
+        </div>
+        <div class="lighthouse-form-elements" $="plugins-form-elements"></div>
+      </div>
+    </div>
   </div>
   <div $="warning-text" class="lighthouse-warning-text hidden"></div>
-  </header>
-  <form>
-  <div class="lighthouse-form-categories">
-  <div class="lighthouse-form-section">
-  <div class="lighthouse-form-section-label">
-  ${i18nString(UIStrings.categories)}
-  </div>
-  <div class="lighthouse-form-elements" $="categories-form-elements"></div>
-  </div>
-  <div class="lighthouse-form-section">
-  <div class="lighthouse-form-section-label">
-  <div class="lighthouse-icon-label">${i18nString(UIStrings.communityPluginsBeta)}</div>
-  </div>
-  <div class="lighthouse-form-elements" $="plugins-form-elements"></div>
-  </div>
-  </div>
-  <div class="lighthouse-form-section">
-  <div class="lighthouse-form-elements" $="device-type-form-elements"></div>
-  </div>
-  </form>
-  </div>
-  `;
+</form>
+    `;
 
     this.helpText = fragment.$('help-text');
     this.warningText = fragment.$('warning-text');
-    this.populateFormControls(fragment);
-    this.contentElement.appendChild(fragment.element());
-    this.contentElement.style.overflow = 'auto';
+
+    const modeFormElements = fragment.$('mode-form-elements');
+    this.populateRuntimeSettingAsRadio('lighthouse.mode', i18nString(UIStrings.mode), modeFormElements);
+
+    this.populateFormControls(fragment, mode);
+
+    this.contentElement.textContent = '';
+    this.contentElement.append(fragment.element());
+
+    this.refresh();
+  }
+
+  private populateStartButton(mode: string): void {
+    let buttonLabel: Platform.UIString.LocalizedString;
+    let callback: () => void;
+
+    if (mode === 'timespan') {
+      buttonLabel = i18nString(UIStrings.startTimespan);
+      callback = (): void => {
+        this.controller.dispatchEventToListeners(
+            Events.RequestLighthouseTimespanStart,
+            /* keyboardInitiated */ this.startButton.matches(':focus-visible'),
+        );
+      };
+    } else if (mode === 'snapshot') {
+      buttonLabel = i18nString(UIStrings.analyzeSnapshot);
+      callback = (): void => {
+        this.controller.dispatchEventToListeners(
+            Events.RequestLighthouseStart,
+            /* keyboardInitiated */ this.startButton.matches(':focus-visible'),
+        );
+      };
+    } else {
+      buttonLabel = i18nString(UIStrings.analyzeNavigation);
+      callback = (): void => {
+        this.controller.dispatchEventToListeners(
+            Events.RequestLighthouseStart,
+            /* keyboardInitiated */ this.startButton.matches(':focus-visible'),
+        );
+      };
+    }
+
+    const startButtonContainer = this.contentElement.querySelector('.lighthouse-start-button-container');
+    if (startButtonContainer) {
+      startButtonContainer.textContent = '';
+      this.startButton = UI.UIUtils.createTextButton(
+          buttonLabel,
+          callback,
+          /* className */ '',
+          /* primary */ true,
+      );
+      startButtonContainer.append(this.startButton);
+    }
   }
 
   refresh(): void {
-    // Do nothing in default case.
+    const {mode} = this.controller.getFlags();
+    this.populateStartButton(mode);
+
+    for (const {checkbox, preset} of this.checkboxes) {
+      if (preset.supportedModes.includes(mode)) {
+        checkbox.setEnabled(true);
+        checkbox.setIndeterminate(false);
+      } else {
+        checkbox.setEnabled(false);
+        checkbox.setIndeterminate(true);
+      }
+    }
+
+    // Ensure the correct layout is used after refresh.
+    this.onResize();
   }
 
   onResize(): void {
-    const useNarrowLayout = this.contentElement.offsetWidth < 560;
-    const startViewEl = this.contentElement.querySelector('.lighthouse-start-view');
-    if (!startViewEl) {
-      return;
+    const useNarrowLayout = this.contentElement.offsetWidth < 500;
+    const useWideLayout = this.contentElement.offsetWidth > 800;
+    const headerEl = this.contentElement.querySelector('.lighthouse-start-view header');
+    const optionsEl = this.contentElement.querySelector('.lighthouse-options');
+    if (headerEl) {
+      headerEl.classList.toggle('hbox', !useNarrowLayout);
+      headerEl.classList.toggle('vbox', useNarrowLayout);
+    }
+    if (optionsEl) {
+      optionsEl.classList.toggle('wide', useWideLayout);
+      optionsEl.classList.toggle('narrow', useNarrowLayout);
     }
-    startViewEl.classList.toggle('hbox', !useNarrowLayout);
-    startViewEl.classList.toggle('vbox', useNarrowLayout);
   }
 
   focusStartButton(): void {
@@ -251,12 +320,16 @@ export class StartView extends UI.Widget.Widget {
     if (this.warningText) {
       this.warningText.textContent = text;
       this.warningText.classList.toggle('hidden', !text);
-      this.shouldConfirm = Boolean(text);
     }
   }
+
   wasShown(): void {
     super.wasShown();
     this.controller.recomputePageAuditability();
     this.registerCSSFiles([lighthouseStartViewStyles]);
   }
+
+  settingsToolbar(): UI.Toolbar.Toolbar {
+    return this.settingsToolbarInternal;
+  }
 }