chrome-devtools-frontend 1.0.970539 → 1.0.972865

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -39,9 +39,11 @@ import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as Bindings from '../../models/bindings/bindings.js';
+import * as Formatter from '../../models/formatter/formatter.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as WorkspaceDiff from '../../models/workspace_diff/workspace_diff.js';
+import type * as Diff from '../../third_party/diff/diff.js';
 import * as DiffView from '../../ui/components/diff_view/diff_view.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as InlineEditor from '../../ui/legacy/components/inline_editor/inline_editor.js';
@@ -177,6 +179,14 @@ const UIStrings = {
   *@description Text that is announced by the screen reader when the user focuses on an input field for editing the name of a CSS selector in the Styles panel
   */
   cssSelector: '`CSS` selector',
+  /**
+  *@description Tooltip text that appears when hovering over the css changes button in the Styles Sidebar Pane of the Elements panel
+  */
+  copyAllCSSChanges: 'Copy all the CSS changes',
+  /**
+  *@description Tooltip text that appears after clicking on the copy CSS changes button
+  */
+  copiedToClipboard: 'Copied to clipboard',
 };
 
 const str_ = i18n.i18n.registerUIStrings('panels/elements/StylesSidebarPane.ts', UIStrings);
@@ -236,8 +246,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   private readonly resizeThrottler: Common.Throttler.Throttler;
   private readonly imagePreviewPopover: ImagePreviewPopover;
   activeCSSAngle: InlineEditor.CSSAngle.CSSAngle|null;
-  #changedLinesByURLs: Map<string, Set<number>> = new Map();
-  #uiSourceCodeToDiffCallbacks: Map<Workspace.UISourceCode.UISourceCode, () => void> = new Map();
+  #urlToChangeTracker: Map<string, ChangeTracker> = new Map();
 
   static instance(): StylesSidebarPane {
     if (!_stylesSidebarPaneInstance) {
@@ -609,6 +618,9 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     await this.innerRebuildUpdate(matchedStyles);
     if (!this.initialUpdateCompleted) {
       this.initialUpdateCompleted = true;
+      if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.STYLES_PANE_CSS_CHANGES)) {
+        this.appendToolbarItem(this.createCopyAllChangesButton());
+      }
       this.dispatchEventToListeners(Events.InitialUpdateCompleted);
     }
 
@@ -841,12 +853,14 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     const blocks = [new SectionBlock(null)];
     let sectionIdx = 0;
     let lastParentNode: SDK.DOMModel.DOMNode|null = null;
-    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.STYLES_PANE_CSS_CHANGES)) {
-      this.resetChangedLinesTracking();
-    }
+    const refreshedURLs = new Set<string>();
     for (const style of matchedStyles.nodeStyles()) {
       if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.STYLES_PANE_CSS_CHANGES) && style.parentRule) {
-        await this.trackChangedLines(style.parentRule.resourceURL());
+        const url = style.parentRule.resourceURL();
+        if (url && !refreshedURLs.has(url)) {
+          await this.trackURLForChanges(url);
+          refreshedURLs.add(url);
+        }
       }
 
       const parentNode = matchedStyles.isInherited(style) ? matchedStyles.nodeForStyle(style) : null;
@@ -1001,25 +1015,27 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     return sections;
   }
 
-  resetChangedLinesTracking(): void {
-    this.#changedLinesByURLs.clear();
-    for (const [uiSourceCode, callback] of this.#uiSourceCodeToDiffCallbacks) {
-      WorkspaceDiff.WorkspaceDiff.workspaceDiff().unsubscribeFromDiffChange(uiSourceCode, callback);
+  async trackURLForChanges(url: string): Promise<void> {
+    const currentTracker = this.#urlToChangeTracker.get(url);
+    if (currentTracker) {
+      WorkspaceDiff.WorkspaceDiff.workspaceDiff().unsubscribeFromDiffChange(
+          currentTracker.uiSourceCode, currentTracker.diffChangeCallback);
     }
-    this.#uiSourceCodeToDiffCallbacks.clear();
-  }
 
-  async trackChangedLines(url: string): Promise<void> {
-    if (!url || this.#changedLinesByURLs.has(url)) {
-      return;
-    }
+    // We get a refreshed uiSourceCode each time because the underlying instance may be recreated.
     const uiSourceCode = Workspace.Workspace.WorkspaceImpl.instance().uiSourceCodeForURL(url);
-    if (uiSourceCode) {
-      await this.refreshChangedLines(uiSourceCode);
-      const callback = this.refreshChangedLines.bind(this, uiSourceCode);
-      WorkspaceDiff.WorkspaceDiff.workspaceDiff().subscribeToDiffChange(uiSourceCode, callback);
-      this.#uiSourceCodeToDiffCallbacks.set(uiSourceCode, callback);
+    if (!uiSourceCode) {
+      return;
     }
+    const diffChangeCallback = this.refreshChangedLines.bind(this, uiSourceCode);
+    WorkspaceDiff.WorkspaceDiff.workspaceDiff().subscribeToDiffChange(uiSourceCode, diffChangeCallback);
+    const newTracker = {
+      uiSourceCode,
+      changedLines: new Set<number>(),
+      diffChangeCallback,
+    };
+    this.#urlToChangeTracker.set(url, newTracker);
+    await this.refreshChangedLines(newTracker.uiSourceCode);
   }
 
   isPropertyChanged(property: SDK.CSSProperty.CSSProperty): boolean {
@@ -1027,30 +1043,62 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     if (!url) {
       return false;
     }
-    const changedLines = this.#changedLinesByURLs.get(url);
-    if (!changedLines) {
+    const changeTracker = this.#urlToChangeTracker.get(url);
+    if (!changeTracker) {
       return false;
     }
+    const {changedLines, formattedCurrentMapping} = changeTracker;
     const uiLocation = Bindings.CSSWorkspaceBinding.CSSWorkspaceBinding.instance().propertyUILocation(property, true);
     if (!uiLocation) {
       return false;
     }
-    // UILocation's lineNumber starts at 0, but changedLines start at 1.
-    return changedLines.has(uiLocation.lineNumber + 1);
+    if (!formattedCurrentMapping) {
+      // UILocation's lineNumber starts at 0, but changedLines start at 1.
+      return changedLines.has(uiLocation.lineNumber + 1);
+    }
+    const formattedLineNumber =
+        formattedCurrentMapping.originalToFormatted(uiLocation.lineNumber, uiLocation.columnNumber)[0];
+    return changedLines.has(formattedLineNumber + 1);
   }
 
   private async refreshChangedLines(uiSourceCode: Workspace.UISourceCode.UISourceCode): Promise<void> {
-    const diff = await WorkspaceDiff.WorkspaceDiff.workspaceDiff().requestDiff(uiSourceCode, {shouldFormatDiff: true});
+    const changeTracker = this.#urlToChangeTracker.get(uiSourceCode.url());
+    if (!changeTracker) {
+      return;
+    }
+    const diffResponse =
+        await WorkspaceDiff.WorkspaceDiff.workspaceDiff().requestDiff(uiSourceCode, {shouldFormatDiff: true});
     const changedLines = new Set<number>();
-    if (diff && diff.length > 0) {
-      const {rows} = DiffView.DiffView.buildDiffRows(diff);
-      for (const row of rows) {
-        if (row.type === DiffView.DiffView.RowType.Addition) {
-          changedLines.add(row.currentLineNumber);
-        }
+    changeTracker.changedLines = changedLines;
+    if (!diffResponse) {
+      return;
+    }
+    const {diff, formattedCurrentMapping} = diffResponse;
+    const {rows} = DiffView.DiffView.buildDiffRows(diff);
+    for (const row of rows) {
+      if (row.type === DiffView.DiffView.RowType.Addition) {
+        changedLines.add(row.currentLineNumber);
       }
     }
-    this.#changedLinesByURLs.set(uiSourceCode.url(), changedLines);
+    changeTracker.formattedCurrentMapping = formattedCurrentMapping;
+  }
+
+  private async getFormattedChanges(): Promise<string> {
+    let allChanges = '';
+    for (const [url, {uiSourceCode}] of this.#urlToChangeTracker) {
+      const diffResponse =
+          await WorkspaceDiff.WorkspaceDiff.workspaceDiff().requestDiff(uiSourceCode, {shouldFormatDiff: true});
+      // Diff array with real diff will contain at least 2 lines.
+      if (!diffResponse || diffResponse?.diff.length < 2) {
+        continue;
+      }
+      const changes = await formatCSSChangesFromDiff(diffResponse.diff);
+      if (changes.length > 0) {
+        allChanges += `/* ${escapeUrlAsCssComment(url)} */\n\n${changes}\n\n`;
+      }
+    }
+
+    return allChanges;
   }
 
   private clipboardCopy(_event: Event): void {
@@ -1146,6 +1194,34 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       }
     }
   }
+
+  private createCopyAllChangesButton(): UI.Toolbar.ToolbarButton {
+    const copyAllIcon = new IconButton.Icon.Icon();
+    copyAllIcon.data = {
+      iconName: 'ic_changes',
+      color: 'var(--color-text-secondary)',
+      width: '18px',
+      height: '18px',
+    };
+    const copyAllChangesButton = new UI.Toolbar.ToolbarButton(i18nString(UIStrings.copyAllCSSChanges), copyAllIcon);
+    // TODO(1296947): implement a dedicated component to share between all copy buttons
+    copyAllChangesButton.element.setAttribute('data-content', i18nString(UIStrings.copiedToClipboard));
+    let timeout: number|undefined;
+    copyAllChangesButton.addEventListener(UI.Toolbar.ToolbarButton.Events.Click, async () => {
+      const allChanges = await this.getFormattedChanges();
+      Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(allChanges);
+      if (timeout) {
+        clearTimeout(timeout);
+        timeout = undefined;
+      }
+      copyAllChangesButton.element.classList.add('copied-to-clipboard');
+      timeout = window.setTimeout(() => {
+        copyAllChangesButton.element.classList.remove('copied-to-clipboard');
+        timeout = undefined;
+      }, 2000);
+    });
+    return copyAllChangesButton;
+  }
 }
 
 export const enum Events {
@@ -1162,6 +1238,109 @@ export type EventTypes = {
   [Events.StylesUpdateCompleted]: StylesUpdateCompletedEvent,
 };
 
+type ChangeTracker = {
+  uiSourceCode: Workspace.UISourceCode.UISourceCode,
+  changedLines: Set<number>,
+  diffChangeCallback: () => Promise<void>,
+  formattedCurrentMapping?: Formatter.ScriptFormatter.FormatterSourceMapping,
+};
+
+export async function formatCSSChangesFromDiff(diff: Diff.Diff.DiffArray): Promise<string> {
+  const {originalLines, currentLines, rows} = DiffView.DiffView.buildDiffRows(diff);
+
+  const {propertyToSelector: originalPropertyToSelector, ruleToSelector: originalRuleToSelector} =
+      await buildPropertyRuleMaps(originalLines.join('\n'));
+  const {propertyToSelector: currentPropertyToSelector, ruleToSelector: currentRuleToSelector} =
+      await buildPropertyRuleMaps(currentLines.join('\n'));
+  let changes = '';
+  let recordedOriginalSelector, recordedCurrentSelector;
+  for (const {currentLineNumber, originalLineNumber, type} of rows) {
+    // diff line arrays starts at 0, but line numbers start at 1.
+    const currentLineIndex = currentLineNumber - 1;
+    const originalLineIndex = originalLineNumber - 1;
+    switch (type) {
+      case DiffView.DiffView.RowType.Deletion: {
+        const originalLine = originalLines[originalLineIndex].trim();
+        if (originalRuleToSelector.has(originalLineIndex)) {
+          changes += `/* ${originalLine} { */\n`;
+          recordedOriginalSelector = originalLine;
+          continue;
+        }
+
+        const originalSelector = originalPropertyToSelector.get(originalLineIndex);
+        if (!originalSelector) {
+          continue;
+        }
+        if (originalSelector !== recordedOriginalSelector && originalSelector !== recordedCurrentSelector) {
+          if (recordedOriginalSelector || recordedCurrentSelector) {
+            changes += '}\n\n';
+          }
+          changes += `${originalSelector} {\n`;
+        }
+        recordedOriginalSelector = originalSelector;
+        changes += `  /* ${originalLine} */\n`;
+        break;
+      }
+      case DiffView.DiffView.RowType.Addition: {
+        const currentLine = currentLines[currentLineIndex].trim();
+        if (currentRuleToSelector.has(currentLineIndex)) {
+          changes += `${currentLine} {\n`;
+          recordedCurrentSelector = currentLine;
+          continue;
+        }
+
+        const currentSelector = currentPropertyToSelector.get(currentLineIndex);
+        if (!currentSelector) {
+          continue;
+        }
+        if (currentSelector !== recordedOriginalSelector && currentSelector !== recordedCurrentSelector) {
+          if (recordedOriginalSelector || recordedCurrentSelector) {
+            changes += '}\n\n';
+          }
+          changes += `${currentSelector} {\n`;
+        }
+        recordedCurrentSelector = currentSelector;
+        changes += `  ${currentLine}\n`;
+        break;
+      }
+      default:
+        break;
+    }
+  }
+  if (changes.length > 0) {
+    changes += '}';
+  }
+  return changes;
+}
+
+async function buildPropertyRuleMaps(content: string):
+    Promise<{propertyToSelector: Map<number, string>, ruleToSelector: Map<number, string>}> {
+  const rules = await new Promise<Formatter.FormatterWorkerPool.CSSRule[]>(res => {
+    const rules: Formatter.FormatterWorkerPool.CSSRule[] = [];
+    Formatter.FormatterWorkerPool.formatterWorkerPool().parseCSS(content, (isLastChunk, currentRules) => {
+      rules.push(...currentRules);
+      if (isLastChunk) {
+        res(rules);
+      }
+    });
+  });
+  const propertyToSelector = new Map<number, string>();
+  const ruleToSelector = new Map<number, string>();
+  for (const rule of rules) {
+    if ('styleRange' in rule) {
+      const selector = rule.selectorText.split('\n').pop()?.trim();
+      if (!selector) {
+        continue;
+      }
+      ruleToSelector.set(rule.styleRange.startLine, selector);
+      for (const property of rule.properties) {
+        propertyToSelector.set(property.range.startLine, selector);
+      }
+    }
+  }
+  return {propertyToSelector, ruleToSelector};
+}
+
 // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export const _maxLinkLength = 23;
@@ -2298,9 +2477,9 @@ export class StylePropertiesSection {
     return true;
   }
 
-  private editingMediaCommitted(
+  private async editingMediaCommitted(
       query: SDK.CSSQuery.CSSQuery, element: Element, newContent: string, _oldContent: string,
-      _context: Context|undefined, _moveDirection: string): void {
+      _context: Context|undefined, _moveDirection: string): Promise<void> {
     this.parentPane.setEditingStyle(false);
     this.editingMediaFinished(element);
 
@@ -2308,7 +2487,20 @@ export class StylePropertiesSection {
       newContent = newContent.trim();
     }
 
-    function userCallback(this: StylePropertiesSection, success: boolean): void {
+    // This gets deleted in finishOperation(), which is called both on success and failure.
+    this.parentPane.setUserOperation(true);
+    const cssModel = this.parentPane.cssModel();
+    if (cssModel && query.styleSheetId) {
+      const range = query.range as TextUtils.TextRange.TextRange;
+      let success = false;
+      if (query instanceof SDK.CSSContainerQuery.CSSContainerQuery) {
+        success = await cssModel.setContainerQueryText(query.styleSheetId, range, newContent);
+      } else if (query instanceof SDK.CSSSupports.CSSSupports) {
+        success = await cssModel.setSupportsText(query.styleSheetId, range, newContent);
+      } else {
+        success = await cssModel.setMediaText(query.styleSheetId, range, newContent);
+      }
+
       if (success) {
         this.matchedStyles.resetActiveProperties();
         this.parentPane.refreshUpdate(this);
@@ -2316,16 +2508,6 @@ export class StylePropertiesSection {
       this.parentPane.setUserOperation(false);
       this.editingMediaTextCommittedForTest();
     }
-
-    // This gets deleted in finishOperation(), which is called both on success and failure.
-    this.parentPane.setUserOperation(true);
-    const cssModel = this.parentPane.cssModel();
-    if (cssModel && query.styleSheetId) {
-      const setQueryText =
-          query instanceof SDK.CSSMedia.CSSMedia ? cssModel.setMediaText : cssModel.setContainerQueryText;
-      void setQueryText.call(cssModel, query.styleSheetId, (query.range as TextUtils.TextRange.TextRange), newContent)
-          .then(userCallback.bind(this));
-    }
   }
 
   private editingMediaTextCommittedForTest(): void {
@@ -3052,6 +3234,14 @@ export function unescapeCssString(input: string): string {
   });
 }
 
+export function escapeUrlAsCssComment(urlText: string): string {
+  const url = new URL(urlText);
+  if (url.search) {
+    return `${url.origin}${url.pathname}${url.search.replaceAll('*/', '*%2F')}${url.hash}`;
+  }
+  return url.toString();
+}
+
 export class StylesSidebarPropertyRenderer {
   private rule: SDK.CSSRule.CSSRule|null;
   private node: SDK.DOMModel.DOMNode|null;
@@ -3214,13 +3404,8 @@ export class StylesSidebarPropertyRenderer {
           // so that we don't have to keep two versions (original vs. trimmed) of URL
           // at the same time, which complicates both StylesSidebarPane and StylePropertyTreeElement.
           bypassURLTrimming: true,
-          className: undefined,
-          lineNumber: undefined,
-          columnNumber: undefined,
           showColumnNumber: false,
           inlineFrameIndex: 0,
-          maxLength: undefined,
-          tabStop: undefined,
         }),
         hrefUrl || url);
     container.appendChild(link);

package/front_end/panels/elements/elementsTreeOutline.css

@@ -144,7 +144,6 @@
 .elements-disclosure > ol {
   position: relative;
   margin: 0;
-  cursor: default;
   min-width: 100%;
   min-height: 100%;
   padding-left: 2px;

package/front_end/panels/issues/AffectedResourcesView.ts

@@ -256,7 +256,7 @@ export abstract class AffectedResourcesView extends UI.TreeOutline.TreeElement {
       const linkifier = new Components.Linkifier.Linkifier(maxLengthForDisplayedURLs);
       const sourceAnchor = linkifier.linkifyScriptLocation(
           target || null, sourceLocation.scriptId || null, sourceLocation.url, sourceLocation.lineNumber,
-          {columnNumber: sourceLocation.columnNumber, inlineFrameIndex: 0, className: undefined, tabStop: undefined});
+          {columnNumber: sourceLocation.columnNumber, inlineFrameIndex: 0});
       sourceCodeLocation.appendChild(sourceAnchor);
     }
     element.appendChild(sourceCodeLocation);

package/front_end/panels/issues/AffectedSourcesView.ts

@@ -36,7 +36,7 @@ export class AffectedSourcesView extends AffectedResourcesView {
     const cellElement = document.createElement('td');
     // TODO(chromium:1072331): Check feasibility of plumping through scriptId for `linkifyScriptLocation`
     //                         to support source maps and formatted scripts.
-    const linkifierURLOptions = ({columnNumber, lineNumber, tabStop: true} as Components.Linkifier.LinkifyURLOptions);
+    const linkifierURLOptions = {columnNumber, lineNumber, tabStop: true, showColumnNumber: false, inlineFrameIndex: 0};
     // An element created with linkifyURL can subscribe to the events
     // 'click' neither 'keydown' if that key is the 'Enter' key.
     // Also, this element has a context menu, so we should be able to

package/front_end/panels/lighthouse/LighthouseController.ts

@@ -104,6 +104,26 @@ const UIStrings = {
   *@description Tooltip text of checkbox to emulate mobile device behavior when running audits in Lighthouse
   */
   applyMobileEmulationDuring: 'Apply mobile emulation during auditing',
+  /**
+   * @description ARIA label for a radio button input to select the Lighthouse mode.
+   */
+  lighthouseMode: 'Lighthouse mode',
+  /**
+   * @description Tooltip text of a radio button to select the Lighthouse mode.
+   */
+  runLighthouseInMode: 'Run Lighthouse in navigation, timespan, or snapshot mode',
+  /**
+   * @description Label of a radio option for a Lighthouse mode that audits a page navigation.
+   */
+  navigation: 'Navigation',
+  /**
+   * @description Label of a radio option for a Lighthouse mode that audits user interactions over a period of time.
+   */
+  timespan: 'Timespan',
+  /**
+   * @description Label of a radio option for a Lighthouse mode that audits the current page state.
+   */
+  snapshot: 'Snapshot',
   /**
   *@description Text for the mobile platform, as opposed to desktop
   */
@@ -289,6 +309,7 @@ export class LighthouseController extends Common.ObjectWrapper.ObjectWrapper<Eve
     internalDisableDeviceScreenEmulation: boolean,
     emulatedFormFactor: (string|undefined),
     legacyNavigation: boolean,
+    mode: string,
   } {
     const flags = {
       // DevTools handles all the emulation. This tells Lighthouse to not bother with emulation.
@@ -301,6 +322,7 @@ export class LighthouseController extends Common.ObjectWrapper.ObjectWrapper<Eve
       internalDisableDeviceScreenEmulation: boolean,
       emulatedFormFactor: (string | undefined),
       legacyNavigation: boolean,
+      mode: string,
     };
   }
 
@@ -421,6 +443,21 @@ export const RuntimeSettings: RuntimeSetting[] = [
     ],
     learnMore: undefined,
   },
+  {
+    setting: Common.Settings.Settings.instance().createSetting(
+        'lighthouse.mode', 'navigation', Common.Settings.SettingStorageType.Synced),
+    title: i18nLazyString(UIStrings.lighthouseMode),
+    description: i18nLazyString(UIStrings.runLighthouseInMode),
+    setFlags: (flags: Flags, value: string|boolean): void => {
+      flags.mode = value;
+    },
+    options: [
+      {label: i18nLazyString(UIStrings.navigation), value: 'navigation'},
+      {label: i18nLazyString(UIStrings.timespan), value: 'timespan'},
+      {label: i18nLazyString(UIStrings.snapshot), value: 'snapshot'},
+    ],
+    learnMore: undefined,
+  },
   {
     // This setting is disabled, but we keep it around to show in the UI.
     setting: Common.Settings.Settings.instance().createSetting(
@@ -465,6 +502,8 @@ export enum Events {
   PageAuditabilityChanged = 'PageAuditabilityChanged',
   PageWarningsChanged = 'PageWarningsChanged',
   AuditProgressChanged = 'AuditProgressChanged',
+  RequestLighthouseTimespanStart = 'RequestLighthouseTimespanStart',
+  RequestLighthouseTimespanEnd = 'RequestLighthouseTimespanEnd',
   RequestLighthouseStart = 'RequestLighthouseStart',
   RequestLighthouseCancel = 'RequestLighthouseCancel',
 }
@@ -485,6 +524,8 @@ export type EventTypes = {
   [Events.PageAuditabilityChanged]: PageAuditabilityChangedEvent,
   [Events.PageWarningsChanged]: PageWarningsChangedEvent,
   [Events.AuditProgressChanged]: AuditProgressChangedEvent,
+  [Events.RequestLighthouseTimespanStart]: boolean,
+  [Events.RequestLighthouseTimespanEnd]: boolean,
   [Events.RequestLighthouseStart]: boolean,
   [Events.RequestLighthouseCancel]: void,
 };

package/front_end/panels/lighthouse/LighthousePanel.ts

@@ -5,6 +5,7 @@
 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';
@@ -13,6 +14,7 @@ import * as Emulation from '../emulation/emulation.js';
 import type {AuditProgressChangedEvent, PageAuditabilityChangedEvent, PageWarningsChangedEvent} from './LighthouseController.js';
 import {Events, LighthouseController} from './LighthouseController.js';
 import lighthousePanelStyles from './lighthousePanel.css.js';
+import type {LighthouseRun} from './LighthouseProtocolService.js';
 import {ProtocolService} from './LighthouseProtocolService.js';
 
 import type {ReportJSON, RunnerResultArtifacts} from './LighthouseReporterTypes.js';
@@ -20,7 +22,9 @@ 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';
 
 const UIStrings = {
   /**
@@ -63,6 +67,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 warningText: Nullable<string>;
   private unauditableExplanation: Nullable<string>;
   private readonly cachedRenderedReports: Map<ReportJSON, HTMLElement>;
@@ -79,13 +84,20 @@ export class LighthousePanel extends UI.Panel.Panel {
     network: {conditions: SDK.NetworkManager.Conditions},
   };
   private isLHAttached?: boolean;
+  private currentLighthouseRun?: LighthouseRun;
 
   private constructor() {
     super('lighthouse');
 
     this.protocolService = new ProtocolService();
     this.controller = new LighthouseController(this.protocolService);
-    this.startView = new StartView(this.controller);
+    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.statusView = new StatusView(this.controller);
 
     this.warningText = null;
@@ -99,12 +111,10 @@ export class LighthousePanel extends UI.Panel.Panel {
     this.controller.addEventListener(Events.PageAuditabilityChanged, this.refreshStartAuditUI.bind(this));
     this.controller.addEventListener(Events.PageWarningsChanged, this.refreshWarningsUI.bind(this));
     this.controller.addEventListener(Events.AuditProgressChanged, this.refreshStatusUI.bind(this));
-    this.controller.addEventListener(Events.RequestLighthouseStart, _event => {
-      void this.startLighthouse();
-    });
-    this.controller.addEventListener(Events.RequestLighthouseCancel, _event => {
-      void this.cancelLighthouse();
-    });
+    this.controller.addEventListener(Events.RequestLighthouseTimespanStart, this.onLighthouseTimespanStart.bind(this));
+    this.controller.addEventListener(Events.RequestLighthouseTimespanEnd, this.onLighthouseTimespanEnd.bind(this));
+    this.controller.addEventListener(Events.RequestLighthouseStart, this.onLighthouseStart.bind(this));
+    this.controller.addEventListener(Events.RequestLighthouseCancel, this.onLighthouseCancel.bind(this));
 
     this.renderToolbar();
     this.auditResultsElement = this.contentElement.createChild('div', 'lighthouse-results-container');
@@ -126,6 +136,27 @@ export class LighthousePanel extends UI.Panel.Panel {
     return Events;
   }
 
+  private async onLighthouseTimespanStart(): Promise<void> {
+    this.timespanView?.show(this.contentElement);
+    await this.startLighthouse();
+    this.timespanView?.ready();
+  }
+
+  private async onLighthouseTimespanEnd(): Promise<void> {
+    this.timespanView?.hide();
+    await this.collectLighthouseResults();
+  }
+
+  private async onLighthouseStart(): Promise<void> {
+    await this.startLighthouse();
+    await this.collectLighthouseResults();
+  }
+
+  private async onLighthouseCancel(): Promise<void> {
+    this.timespanView?.hide();
+    void this.cancelLighthouse();
+  }
+
   private refreshWarningsUI(evt: Common.EventTarget.EventTargetEvent<PageWarningsChangedEvent>): void {
     // PageWarningsChanged fires multiple times during an audit, which we want to ignore.
     if (this.isLHAttached) {
@@ -142,6 +173,8 @@ export class LighthousePanel extends UI.Panel.Panel {
       return;
     }
 
+    this.startView.updateStartButton();
+
     this.unauditableExplanation = evt.data.helpText;
     this.startView.setUnauditableExplanation(evt.data.helpText);
     this.startView.setStartButtonEnabled(!evt.data.helpText);
@@ -342,11 +375,30 @@ export class LighthousePanel extends UI.Panel.Panel {
       const categoryIDs = this.controller.getCategoryIDs();
       const flags = this.controller.getFlags();
 
+      this.currentLighthouseRun = {inspectedURL, categoryIDs, flags};
+
       await this.setupEmulationAndProtocolConnection();
 
-      this.renderStatusView(inspectedURL);
+      if (flags.mode === 'timespan') {
+        await this.protocolService.startTimespan(this.currentLighthouseRun);
+      }
+
+    } catch (err) {
+      await this.resetEmulationAndProtocolConnection();
+      if (err instanceof Error) {
+        this.statusView.renderBugReport(err);
+      }
+    }
+  }
+
+  private async collectLighthouseResults(): Promise<void> {
+    try {
+      if (!this.currentLighthouseRun) {
+        throw new Error('Lighthouse is not started');
+      }
+      this.renderStatusView(this.currentLighthouseRun.inspectedURL);
 
-      const lighthouseResponse = await this.protocolService.startLighthouse(inspectedURL, categoryIDs, flags);
+      const lighthouseResponse = await this.protocolService.collectLighthouseResults(this.currentLighthouseRun);
 
       if (lighthouseResponse && lighthouseResponse.fatal) {
         const error = new Error(lighthouseResponse.message);
@@ -369,10 +421,13 @@ export class LighthousePanel extends UI.Panel.Panel {
       if (err instanceof Error) {
         this.statusView.renderBugReport(err);
       }
+    } finally {
+      this.currentLighthouseRun = undefined;
     }
   }
 
   private async cancelLighthouse(): Promise<void> {
+    this.currentLighthouseRun = undefined;
     this.statusView.updateStatus(i18nString(UIStrings.cancelling));
     await this.resetEmulationAndProtocolConnection();
     this.renderStartView();