chrome-devtools-frontend 1.0.971140 → 1.0.973253

package/front_end/models/workspace_diff/WorkspaceDiff.ts

@@ -13,6 +13,11 @@ interface DiffRequestOptions {
   shouldFormatDiff: boolean;
 }
 
+interface DiffResponse {
+  diff: Diff.Diff.DiffArray;
+  formattedCurrentMapping?: FormatterModule.ScriptFormatter.FormatterSourceMapping;
+}
+
 export class WorkspaceDiffImpl extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   private readonly uiSourceCodeDiffs: WeakMap<Workspace.UISourceCode.UISourceCode, UISourceCodeDiff>;
   private readonly loadingUISourceCodes:
@@ -35,7 +40,7 @@ export class WorkspaceDiffImpl extends Common.ObjectWrapper.ObjectWrapper<EventT
   }
 
   requestDiff(uiSourceCode: Workspace.UISourceCode.UISourceCode, diffRequestOptions: DiffRequestOptions):
-      Promise<Diff.Diff.DiffArray|null> {
+      Promise<DiffResponse|null> {
     return this.uiSourceCodeDiff(uiSourceCode).requestDiff(diffRequestOptions);
   }
 
@@ -185,7 +190,7 @@ export type EventTypes = {
 
 export class UISourceCodeDiff extends Common.ObjectWrapper.ObjectWrapper<UISourceCodeDiffEventTypes> {
   private uiSourceCode: Workspace.UISourceCode.UISourceCode;
-  private requestDiffPromise: Promise<Diff.Diff.DiffArray|null>|null;
+  private requestDiffPromise: Promise<DiffResponse|null>|null;
   private pendingChanges: number|null;
   dispose: boolean;
   constructor(uiSourceCode: Workspace.UISourceCode.UISourceCode) {
@@ -218,7 +223,7 @@ export class UISourceCodeDiff extends Common.ObjectWrapper.ObjectWrapper<UISourc
     }
   }
 
-  requestDiff(diffRequestOptions: DiffRequestOptions): Promise<Diff.Diff.DiffArray|null> {
+  requestDiff(diffRequestOptions: DiffRequestOptions): Promise<DiffResponse|null> {
     if (!this.requestDiffPromise) {
       this.requestDiffPromise = this.innerRequestDiff(diffRequestOptions);
     }
@@ -237,7 +242,7 @@ export class UISourceCodeDiff extends Common.ObjectWrapper.ObjectWrapper<UISourc
     return content.content || ('error' in content && content.error) || '';
   }
 
-  private async innerRequestDiff({shouldFormatDiff}: DiffRequestOptions): Promise<Diff.Diff.DiffArray|null> {
+  private async innerRequestDiff({shouldFormatDiff}: DiffRequestOptions): Promise<DiffResponse|null> {
     if (this.dispose) {
       return null;
     }
@@ -270,15 +275,22 @@ export class UISourceCodeDiff extends Common.ObjectWrapper.ObjectWrapper<UISourc
     if (current === null || baseline === null) {
       return null;
     }
+    let formattedCurrentMapping;
     if (shouldFormatDiff) {
       baseline = (await FormatterModule.ScriptFormatter.format(
                       this.uiSourceCode.contentType(), this.uiSourceCode.mimeType(), baseline))
                      .formattedContent;
-      current = (await FormatterModule.ScriptFormatter.format(
-                     this.uiSourceCode.contentType(), this.uiSourceCode.mimeType(), current))
-                    .formattedContent;
+      const formatCurrentResult = await FormatterModule.ScriptFormatter.format(
+          this.uiSourceCode.contentType(), this.uiSourceCode.mimeType(), current);
+      current = formatCurrentResult.formattedContent;
+      formattedCurrentMapping = formatCurrentResult.formattedMapping;
     }
-    return Diff.Diff.DiffWrapper.lineDiff(baseline.split(/\r\n|\n|\r/), current.split(/\r\n|\n|\r/));
+    const reNewline = /\r\n?|\n/;
+    const diff = Diff.Diff.DiffWrapper.lineDiff(baseline.split(reNewline), current.split(reNewline));
+    return {
+      diff,
+      formattedCurrentMapping,
+    };
   }
 }
 

package/front_end/panels/application/ServiceWorkerCacheViews.ts

@@ -381,7 +381,8 @@ export class ServiceWorkerCacheView extends UI.View.SimpleView {
 
   private createRequest(entry: Protocol.CacheStorage.DataEntry): SDK.NetworkRequest.NetworkRequest {
     const request = SDK.NetworkRequest.NetworkRequest.createWithoutBackendRequest(
-        'cache-storage-' + entry.requestURL, entry.requestURL, '', null);
+        'cache-storage-' + entry.requestURL, entry.requestURL as Platform.DevToolsPath.UrlString,
+        '' as Platform.DevToolsPath.UrlString, null);
     request.requestMethod = entry.requestMethod;
     request.setRequestHeaders(entry.requestHeaders);
     request.statusCode = entry.responseStatus;
@@ -454,7 +455,7 @@ export class DataGridNode extends DataGrid.DataGrid.DataGridNode<DataGridNode> {
   createCell(columnId: string): HTMLElement {
     const cell = this.createTD(columnId);
     let value;
-    let tooltip = this.request.url();
+    let tooltip = this.request.url() as string;
     if (columnId === 'number') {
       value = String(this.number);
     } else if (columnId === 'name') {

package/front_end/panels/changes/ChangesView.ts

@@ -173,7 +173,7 @@ export class ChangesView extends UI.Widget.VBox {
     }
 
     if (!this.selectedUISourceCode) {
-      this.renderDiffRows(null);
+      this.renderDiffRows();
       return;
     }
     const uiSourceCode = this.selectedUISourceCode;
@@ -181,12 +181,12 @@ export class ChangesView extends UI.Widget.VBox {
       this.hideDiff(i18nString(UIStrings.binaryData));
       return;
     }
-    const diff = await this.workspaceDiff.requestDiff(
+    const diffResponse = await this.workspaceDiff.requestDiff(
         uiSourceCode, {shouldFormatDiff: Root.Runtime.experiments.isEnabled('preciseChanges')});
     if (this.selectedUISourceCode !== uiSourceCode) {
       return;
     }
-    this.renderDiffRows(diff);
+    this.renderDiffRows(diffResponse?.diff);
   }
 
   private hideDiff(message: string): void {
@@ -197,7 +197,7 @@ export class ChangesView extends UI.Widget.VBox {
     this.emptyWidget.showWidget();
   }
 
-  private renderDiffRows(diff: Diff.Diff.DiffArray|null): void {
+  private renderDiffRows(diff?: Diff.Diff.DiffArray): void {
     if (!diff || (diff.length === 1 && diff[0][0] === Diff.Diff.Operation.Equal)) {
       this.hideDiff(i18nString(UIStrings.noChanges));
     } else {

package/front_end/panels/console/ConsolePrompt.ts

@@ -5,7 +5,9 @@
 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 SourceMapScopes from '../../models/source_map_scopes/source_map_scopes.js';
 import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
 import * as TextEditor from '../../ui/components/text_editor/text_editor.js';
 import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
@@ -280,14 +282,35 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
       const executionContext = currentExecutionContext;
       const message = SDK.ConsoleModel.ConsoleModel.instance().addCommandMessage(executionContext, text);
       const expression = ObjectUI.JavaScriptREPL.JavaScriptREPL.preprocessExpression(text);
-      void SDK.ConsoleModel.ConsoleModel.instance().evaluateCommandInConsole(
-          executionContext, message, expression, useCommandLineAPI);
+      void this.evaluateCommandInConsole(executionContext, message, expression, useCommandLineAPI);
       if (ConsolePanel.instance().isShowing()) {
         Host.userMetrics.actionTaken(Host.UserMetrics.Action.CommandEvaluatedInConsolePanel);
       }
     }
   }
 
+  private async evaluateCommandInConsole(
+      executionContext: SDK.RuntimeModel.ExecutionContext, message: SDK.ConsoleModel.ConsoleMessage, expression: string,
+      useCommandLineAPI: boolean): Promise<void> {
+    if (Root.Runtime.experiments.isEnabled('evaluateExpressionsWithSourceMaps')) {
+      const callFrame = executionContext.debuggerModel.selectedCallFrame();
+      if (callFrame) {
+        const nameMap = await SourceMapScopes.NamesResolver.allVariablesInCallFrame(callFrame);
+        expression = this.substituteNames(expression, nameMap);
+      }
+    }
+
+    await SDK.ConsoleModel.ConsoleModel.instance().evaluateCommandInConsole(
+        executionContext, message, expression, useCommandLineAPI);
+  }
+
+  private substituteNames(expression: string, mapping: Map<string, string>): string {
+    // TODO(jarin) Build a more reliable replacer, based on the parsed AST.
+    // Here, we just replace exact occurrences.
+    const replacement = mapping.get(expression);
+    return replacement ?? expression;
+  }
+
   private editorUpdate(update: CodeMirror.ViewUpdate): void {
     if (update.docChanged ||
         CodeMirror.selectedCompletion(update.state) !== CodeMirror.selectedCompletion(update.startState)) {

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -548,8 +548,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
       return null;
     }
     return this.linkifier.linkifyScriptLocation(
-        runtimeModel.target(), /* scriptId */ null, url, lineNumber,
-        {columnNumber, className: undefined, tabStop: undefined, inlineFrameIndex: 0});
+        runtimeModel.target(), /* scriptId */ null, url, lineNumber, {columnNumber, inlineFrameIndex: 0});
   }
 
   private linkifyStackTraceTopFrame(stackTrace: Protocol.Runtime.StackTrace): HTMLElement|null {
@@ -567,8 +566,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
       return null;
     }
     return this.linkifier.linkifyScriptLocation(
-        runtimeModel.target(), scriptId, url, lineNumber,
-        {columnNumber, className: undefined, tabStop: undefined, inlineFrameIndex: 0});
+        runtimeModel.target(), scriptId, url, lineNumber, {columnNumber, inlineFrameIndex: 0});
   }
 
   private format(rawParameters: (string|SDK.RemoteObject.RemoteObject|Protocol.Runtime.RemoteObject|undefined)[]):
@@ -1435,8 +1433,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
       const formattedLine = document.createElement('span');
       formattedLine.appendChild(this.linkifyStringAsFragment(`${prefix} ${name} (`));
       const scriptLocationLink = this.linkifier.linkifyScriptLocation(
-          debuggerModel.target(), null, url, lineNumber,
-          {columnNumber, className: undefined, tabStop: undefined, inlineFrameIndex: f});
+          debuggerModel.target(), null, url, lineNumber, {columnNumber, inlineFrameIndex: f});
       scriptLocationLink.tabIndex = -1;
       this.selectableChildren.push({element: scriptLocationLink, forceSelect: (): void => scriptLocationLink.focus()});
       formattedLine.appendChild(scriptLocationLink);
@@ -1446,6 +1443,30 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     return true;
   }
 
+  private createScriptLocationLinkForSyntaxError(
+      debuggerModel: SDK.DebuggerModel.DebuggerModel, exceptionDetails: Protocol.Runtime.ExceptionDetails): HTMLElement
+      |undefined {
+    const {scriptId, lineNumber, columnNumber} = exceptionDetails;
+    if (!scriptId) {
+      return;
+    }
+
+    // SyntaxErrors might not populate the URL field. Try to resolve it via scriptId.
+    const url = exceptionDetails.url || debuggerModel.scriptForId(scriptId)?.sourceURL;
+    if (!url) {
+      return;
+    }
+
+    const scriptLocationLink = this.linkifier.linkifyScriptLocation(
+        debuggerModel.target(), exceptionDetails.scriptId || null, url, lineNumber, {
+          columnNumber,
+          inlineFrameIndex: 0,
+          showColumnNumber: true,
+        });
+    scriptLocationLink.tabIndex = -1;
+    return scriptLocationLink;
+  }
+
   private tryFormatAsError(string: string, exceptionDetails?: Protocol.Runtime.ExceptionDetails): HTMLElement|null {
     const runtimeModel = this.message.runtimeModel();
     if (!runtimeModel) {
@@ -1465,6 +1486,20 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     for (let i = 0; i < linkInfos.length; ++i) {
       const newline = i < linkInfos.length - 1 ? '\n' : '';
       const {line, link} = linkInfos[i];
+      // Syntax errors don't have a stack frame that points to the source position
+      // where the error occurred. We use the source location from the
+      // exceptionDetails and append it to the end of the message instead.
+      if (!link && exceptionDetails && line.startsWith('SyntaxError')) {
+        formattedResult.appendChild(this.linkifyStringAsFragment(line));
+        const maybeScriptLocation = this.createScriptLocationLinkForSyntaxError(debuggerModel, exceptionDetails);
+        if (maybeScriptLocation) {
+          formattedResult.append(' (at ');
+          formattedResult.appendChild(maybeScriptLocation);
+          formattedResult.append(')');
+        }
+        formattedResult.append(newline);
+        continue;
+      }
       if (!link) {
         formattedResult.appendChild(this.linkifyStringAsFragment(`${line}${newline}`));
         continue;
@@ -1475,8 +1510,6 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
       const scriptLocationLink = this.linkifier.linkifyScriptLocation(
           debuggerModel.target(), link.scriptId || null, link.url, link.lineNumber, {
             columnNumber: link.columnNumber,
-            className: undefined,
-            tabStop: undefined,
             inlineFrameIndex: 0,
             showColumnNumber: true,
           });

package/front_end/panels/coverage/CoverageModel.ts

@@ -746,7 +746,7 @@ export class CoverageInfo {
     return this.contentProvider;
   }
 
-  url(): string {
+  url(): Platform.DevToolsPath.UrlString {
     return this.contentProvider.contentURL();
   }
 

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -1514,14 +1514,8 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
           Components.Linkifier.Linkifier.linkifyURL(rewrittenHref, {
             text: value,
             preventClick: true,
-            className: undefined,
-            lineNumber: undefined,
-            columnNumber: undefined,
             showColumnNumber: false,
             inlineFrameIndex: 0,
-            maxLength: undefined,
-            tabStop: undefined,
-            bypassURLTrimming: undefined,
           });
       return ImagePreviewPopover.setImageUrl(link, rewrittenHref);
     }

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -1043,16 +1043,22 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     if (!url) {
       return false;
     }
-    const changedLines = this.#urlToChangeTracker.get(url)?.changedLines;
-    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> {
@@ -1060,28 +1066,33 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     if (!changeTracker) {
       return;
     }
-    const diff = await WorkspaceDiff.WorkspaceDiff.workspaceDiff().requestDiff(uiSourceCode, {shouldFormatDiff: true});
+    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);
       }
     }
-    changeTracker.changedLines = changedLines;
+    changeTracker.formattedCurrentMapping = formattedCurrentMapping;
   }
 
   private async getFormattedChanges(): Promise<string> {
     let allChanges = '';
     for (const [url, {uiSourceCode}] of this.#urlToChangeTracker) {
-      const diff =
+      const diffResponse =
           await WorkspaceDiff.WorkspaceDiff.workspaceDiff().requestDiff(uiSourceCode, {shouldFormatDiff: true});
-      if (!diff || diff.length < 2) {
+      // Diff array with real diff will contain at least 2 lines.
+      if (!diffResponse || diffResponse?.diff.length < 2) {
         continue;
       }
-      const changes = await formatCSSChangesFromDiff(diff);
+      const changes = await formatCSSChangesFromDiff(diffResponse.diff);
       if (changes.length > 0) {
         allChanges += `/* ${escapeUrlAsCssComment(url)} */\n\n${changes}\n\n`;
       }
@@ -1231,6 +1242,7 @@ 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> {
@@ -2465,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);
 
@@ -2475,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);
@@ -2483,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 {
@@ -3389,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/components/LayoutPane.ts

@@ -270,7 +270,7 @@ export class LayoutPane extends HTMLElement {
         </span>
       </label>
       <label @keyup=${onColorLabelKeyUp} @keydown=${onColorLabelKeyDown} tabindex="0" title=${i18nString(UIStrings.chooseElementOverlayColor)} class="color-picker-label" style="background: ${element.color};">
-        <input @change=${onColorChange} @input=${onColorChange} class="color-picker" type="color" value=${element.color} />
+        <input @change=${onColorChange} @input=${onColorChange} tabindex="-1" class="color-picker" type="color" value=${element.color} />
       </label>
       <button tabindex="0" @click=${onElementClick} title=${i18nString(UIStrings.showElementInTheElementsPanel)} class="show-element"></button>
     </div>`;

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

@@ -113,11 +113,15 @@ const UIStrings = {
    */
   runLighthouseInMode: 'Run Lighthouse in navigation, timespan, or snapshot mode',
   /**
-   * @description Text for Lighthouse navigation mode.
+   * @description Label of a radio option for a Lighthouse mode that audits a page navigation.
    */
   navigation: 'Navigation',
   /**
-   * @description Text for Lighthouse snapshot mode.
+   * @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',
   /**
@@ -305,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.
@@ -317,6 +322,7 @@ export class LighthouseController extends Common.ObjectWrapper.ObjectWrapper<Eve
       internalDisableDeviceScreenEmulation: boolean,
       emulatedFormFactor: (string | undefined),
       legacyNavigation: boolean,
+      mode: string,
     };
   }
 
@@ -447,6 +453,7 @@ export const RuntimeSettings: RuntimeSetting[] = [
     },
     options: [
       {label: i18nLazyString(UIStrings.navigation), value: 'navigation'},
+      {label: i18nLazyString(UIStrings.timespan), value: 'timespan'},
       {label: i18nLazyString(UIStrings.snapshot), value: 'snapshot'},
     ],
     learnMore: undefined,
@@ -495,6 +502,8 @@ export enum Events {
   PageAuditabilityChanged = 'PageAuditabilityChanged',
   PageWarningsChanged = 'PageWarningsChanged',
   AuditProgressChanged = 'AuditProgressChanged',
+  RequestLighthouseTimespanStart = 'RequestLighthouseTimespanStart',
+  RequestLighthouseTimespanEnd = 'RequestLighthouseTimespanEnd',
   RequestLighthouseStart = 'RequestLighthouseStart',
   RequestLighthouseCancel = 'RequestLighthouseCancel',
 }
@@ -515,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,
 };