chrome-devtools-frontend 1.0.1007307 → 1.0.1007778

package/config/gni/devtools_grd_files.gni

@@ -714,11 +714,14 @@ grd_files_debug_sources = [
   "front_end/models/emulation/DeviceModeModel.js",
   "front_end/models/emulation/EmulatedDevices.js",
   "front_end/models/extensions/ExtensionAPI.js",
+  "front_end/models/extensions/ExtensionEndpoint.js",
   "front_end/models/extensions/ExtensionPanel.js",
   "front_end/models/extensions/ExtensionServer.js",
   "front_end/models/extensions/ExtensionTraceProvider.js",
   "front_end/models/extensions/ExtensionView.js",
   "front_end/models/extensions/LanguageExtensionEndpoint.js",
+  "front_end/models/extensions/RecorderExtensionEndpoint.js",
+  "front_end/models/extensions/RecorderPluginManager.js",
   "front_end/models/formatter/FormatterWorkerPool.js",
   "front_end/models/formatter/ScriptFormatter.js",
   "front_end/models/formatter/SourceFormatter.js",

package/extension-api/ExtensionAPI.d.ts

@@ -94,6 +94,7 @@ export namespace Chrome {
       panels: Panels;
       inspectedWindow: InspectedWindow;
       languageServices: LanguageExtensions;
+      recorder: RecorderExtensions;
     }
 
     export interface ExperimentalDevToolsAPI {
@@ -170,6 +171,10 @@ export namespace Chrome {
       payload: unknown;
     }
 
+    export interface RecorderExtensionPlugin {
+      stringify(obj: Record<string, any>): Promise<string>;
+    }
+
     export interface LanguageExtensionPlugin {
       /**
        * A new raw module has been loaded. If the raw wasm module references an external debug info module, its URL will be
@@ -272,6 +277,11 @@ export namespace Chrome {
       unregisterLanguageExtensionPlugin(plugin: LanguageExtensionPlugin): Promise<void>;
     }
 
+    export interface RecorderExtensions {
+      registerRecorderExtensionPlugin(plugin: RecorderExtensionPlugin, pluginName: string): Promise<void>;
+      unregisterRecorderExtensionPlugin(plugin: RecorderExtensionPlugin): Promise<void>;
+    }
+
     export interface Chrome {
       devtools: DevToolsAPI;
       experimental: {devtools: ExperimentalDevToolsAPI};

package/front_end/core/i18n/locales/en-US.json

@@ -3803,6 +3803,9 @@
   "panels/browser_debugger/DOMBreakpointsSidebarPane.ts | sS": {
     "message": "{PH1}: {PH2}"
   },
+  "panels/browser_debugger/DOMBreakpointsSidebarPane.ts | sSS": {
+    "message": "{PH1}: {PH2}, {PH3}"
+  },
   "panels/browser_debugger/DOMBreakpointsSidebarPane.ts | subtreeModified": {
     "message": "Subtree modified"
   },
@@ -5951,6 +5954,9 @@
   "panels/lighthouse/LighthouseController.ts | desktop": {
     "message": "Desktop"
   },
+  "panels/lighthouse/LighthouseController.ts | devtoolsThrottling": {
+    "message": "DevTools throttling (advanced)"
+  },
   "panels/lighthouse/LighthouseController.ts | doesThisPageFollowBestPractices": {
     "message": "Does this page follow best practices for modern web development"
   },
@@ -6015,10 +6021,10 @@
     "message": "SEO"
   },
   "panels/lighthouse/LighthouseController.ts | simulateASlowerPageLoadBasedOn": {
-    "message": "Simulate a slower page load, based on data from an initial unthrottled load. If disabled, the page is actually slowed with applied throttling."
+    "message": "Simulated throttling simulates a slower page load based on data from an initial unthrottled load. DevTools throttling actually slows down the page."
   },
   "panels/lighthouse/LighthouseController.ts | simulatedThrottling": {
-    "message": "Simulated throttling"
+    "message": "Simulated throttling (default)"
   },
   "panels/lighthouse/LighthouseController.ts | snapshot": {
     "message": "Snapshot"
@@ -6032,6 +6038,9 @@
   "panels/lighthouse/LighthouseController.ts | thereMayBeStoredDataAffectingSingular": {
     "message": "There may be stored data affecting loading performance in this location: {PH1}. Audit this page in an incognito window to prevent those resources from affecting your scores."
   },
+  "panels/lighthouse/LighthouseController.ts | throttlingMethod": {
+    "message": "Throttling method"
+  },
   "panels/lighthouse/LighthouseController.ts | timespan": {
     "message": "Timespan"
   },
@@ -6653,6 +6662,9 @@
   "panels/network/components/RequestHeadersView.ts | responseHeaders": {
     "message": "Response Headers"
   },
+  "panels/network/components/RequestHeadersView.ts | showMore": {
+    "message": "Show more"
+  },
   "panels/network/components/RequestHeadersView.ts | statusCode": {
     "message": "Status Code"
   },

package/front_end/core/i18n/locales/en-XL.json

@@ -3803,6 +3803,9 @@
   "panels/browser_debugger/DOMBreakpointsSidebarPane.ts | sS": {
     "message": "{PH1}: {PH2}"
   },
+  "panels/browser_debugger/DOMBreakpointsSidebarPane.ts | sSS": {
+    "message": "{PH1}: {PH2}, {PH3}"
+  },
   "panels/browser_debugger/DOMBreakpointsSidebarPane.ts | subtreeModified": {
     "message": "Ŝúb̂t́r̂éê ḿôd́îf́îéd̂"
   },
@@ -5951,6 +5954,9 @@
   "panels/lighthouse/LighthouseController.ts | desktop": {
     "message": "D̂éŝḱt̂óp̂"
   },
+  "panels/lighthouse/LighthouseController.ts | devtoolsThrottling": {
+    "message": "D̂év̂T́ôól̂ś t̂h́r̂ót̂t́l̂ín̂ǵ (âd́v̂án̂ćêd́)"
+  },
   "panels/lighthouse/LighthouseController.ts | doesThisPageFollowBestPractices": {
     "message": "D̂óêś t̂h́îś p̂áĝé f̂ól̂ĺôẃ b̂éŝt́ p̂ŕâćt̂íĉéŝ f́ôŕ m̂ód̂ér̂ń ŵéb̂ d́êv́êĺôṕm̂én̂t́"
   },
@@ -6015,10 +6021,10 @@
     "message": "ŜÉÔ"
   },
   "panels/lighthouse/LighthouseController.ts | simulateASlowerPageLoadBasedOn": {
-    "message": "Ŝím̂úl̂át̂é â śl̂óŵér̂ ṕâǵê ĺôád̂, b́âśêd́ ôń d̂át̂á f̂ŕôḿ âń îńît́îál̂ ún̂t́ĥŕôt́t̂ĺêd́ l̂óâd́. Îf́ d̂íŝáb̂ĺêd́, t̂h́ê ṕâǵê íŝ áĉt́ûál̂ĺŷ śl̂óŵéd̂ ẃît́ĥ áp̂ṕl̂íêd́ t̂h́r̂ót̂t́l̂ín̂ǵ."
+    "message": "Ŝím̂úl̂át̂éd̂ t́ĥŕôt́t̂ĺîńĝ śîḿûĺât́êś â śl̂óŵér̂ ṕâǵê ĺôád̂ b́âśêd́ ôń d̂át̂á f̂ŕôḿ âń îńît́îál̂ ún̂t́ĥŕôt́t̂ĺêd́ l̂óâd́. D̂év̂T́ôól̂ś t̂h́r̂ót̂t́l̂ín̂ǵ âćt̂úâĺl̂ý ŝĺôẃŝ d́ôẃn̂ t́ĥé p̂áĝé."
   },
   "panels/lighthouse/LighthouseController.ts | simulatedThrottling": {
-    "message": "Ŝím̂úl̂át̂éd̂ t́ĥŕôt́t̂ĺîńĝ"
+    "message": "Ŝím̂úl̂át̂éd̂ t́ĥŕôt́t̂ĺîńĝ (d́êf́âúl̂t́)"
   },
   "panels/lighthouse/LighthouseController.ts | snapshot": {
     "message": "Ŝńâṕŝh́ôt́"
@@ -6032,6 +6038,9 @@
   "panels/lighthouse/LighthouseController.ts | thereMayBeStoredDataAffectingSingular": {
     "message": "T̂h́êŕê ḿâý b̂é ŝt́ôŕêd́ d̂át̂á âf́f̂éĉt́îńĝ ĺôád̂ín̂ǵ p̂ér̂f́ôŕm̂án̂ćê ín̂ t́ĥíŝ ĺôćât́îón̂: {PH1}. Áûd́ît́ t̂h́îś p̂áĝé îń âń îńĉóĝńît́ô ẃîńd̂óŵ t́ô ṕr̂év̂én̂t́ t̂h́ôśê ŕêśôúr̂ćêś f̂ŕôḿ âf́f̂éĉt́îńĝ ýôúr̂ śĉór̂éŝ."
   },
+  "panels/lighthouse/LighthouseController.ts | throttlingMethod": {
+    "message": "T̂h́r̂ót̂t́l̂ín̂ǵ m̂ét̂h́ôd́"
+  },
   "panels/lighthouse/LighthouseController.ts | timespan": {
     "message": "T̂ím̂éŝṕâń"
   },
@@ -6653,6 +6662,9 @@
   "panels/network/components/RequestHeadersView.ts | responseHeaders": {
     "message": "R̂éŝṕôńŝé Ĥéâd́êŕŝ"
   },
+  "panels/network/components/RequestHeadersView.ts | showMore": {
+    "message": "Ŝh́ôẃ m̂ór̂é"
+  },
   "panels/network/components/RequestHeadersView.ts | statusCode": {
     "message": "Ŝt́ât́ûś Ĉód̂é"
   },

package/front_end/entrypoints/lighthouse_worker/LighthouseWorkerService.ts

@@ -143,10 +143,7 @@ async function invokeLH(action: string, args: any): Promise<unknown> {
     const {page} = puppeteerConnection;
     const configContext = {
       logLevel: flags.logLevel,
-      settingsOverrides: {
-        channel: flags.channel,
-        locale: flags.locale,
-      },
+      settingsOverrides: flags,
     };
 
     if (action === 'snapshot') {

package/front_end/legacy_test_runner/lighthouse_test_runner/lighthouse_test_runner.js

@@ -100,6 +100,18 @@ LighthouseTestRunner._checkboxStateLabel = function(checkboxContainer) {
   return `[${checkedLabel}] ${label}`;
 };
 
+/**
+ * @param {?Element} combobox
+ * @return {string}
+ */
+LighthouseTestRunner._comboboxStateLabel = function(combobox) {
+  if (!combobox) {
+    return 'missing';
+  }
+
+  return `${combobox.ariaLabel}: ${combobox.value}`;
+};
+
 /**
  * @param {?Element} button
  * @return {string}
@@ -130,6 +142,10 @@ LighthouseTestRunner.dumpStartAuditState = function() {
     TestRunner.addResult(LighthouseTestRunner._checkboxStateLabel(element));
   });
 
+  for (const combobox of toolbarShadowRoot.querySelectorAll('select')) {
+    TestRunner.addResult(LighthouseTestRunner._comboboxStateLabel(combobox));
+  }
+
   const helpText = containerElement.querySelector('.lighthouse-help-text');
   if (!helpText.classList.contains('hidden')) {
     TestRunner.addResult(`Help text: ${helpText.textContent}`);

package/front_end/models/extensions/ExtensionAPI.ts

@@ -86,6 +86,7 @@ export namespace PrivateAPI {
     Unsubscribe = 'unsubscribe',
     UpdateButton = 'updateButton',
     RegisterLanguageExtensionPlugin = 'registerLanguageExtensionPlugin',
+    RegisterRecorderExtensionPlugin = 'registerRecorderExtensionPlugin',
   }
 
   export const enum LanguageExtensionPluginCommands {
@@ -108,6 +109,14 @@ export namespace PrivateAPI {
     UnregisteredLanguageExtensionPlugin = 'unregisteredLanguageExtensionPlugin',
   }
 
+  export const enum RecorderExtensionPluginCommands {
+    Stringify = 'stringify',
+  }
+
+  export const enum RecorderExtensionPluginEvents {
+    UnregisteredRecorderExtensionPlugin = 'unregisteredRecorderExtensionPlugin',
+  }
+
   export interface EvaluateOptions {
     frameURL?: string;
     useContentScriptContext?: boolean;
@@ -120,6 +129,11 @@ export namespace PrivateAPI {
     port: MessagePort,
     supportedScriptTypes: PublicAPI.Chrome.DevTools.SupportedScriptTypes,
   };
+  type RegisterRecorderExtensionPluginRequest = {
+    command: Commands.RegisterRecorderExtensionPlugin,
+    pluginName: string,
+    port: MessagePort,
+  };
   type SubscribeRequest = {command: Commands.Subscribe, type: string};
   type UnsubscribeRequest = {command: Commands.Unsubscribe, type: string};
   type AddRequestHeadersRequest = {
@@ -182,13 +196,13 @@ export namespace PrivateAPI {
   type GetHARRequest = {command: Commands.GetHAR};
   type GetPageResourcesRequest = {command: Commands.GetPageResources};
 
-  export type ServerRequests = RegisterLanguageExtensionPluginRequest|SubscribeRequest|UnsubscribeRequest|
-      AddRequestHeadersRequest|ApplyStyleSheetRequest|CreatePanelRequest|ShowPanelRequest|CreateToolbarButtonRequest|
-      UpdateButtonRequest|CompleteTraceSessionRequest|CreateSidebarPaneRequest|SetSidebarHeightRequest|
-      SetSidebarContentRequest|SetSidebarPageRequest|OpenResourceRequest|SetOpenResourceHandlerRequest|
-      SetThemeChangeHandlerRequest|ReloadRequest|EvaluateOnInspectedPageRequest|GetRequestContentRequest|
-      GetResourceContentRequest|SetResourceContentRequest|AddTraceProviderRequest|ForwardKeyboardEventRequest|
-      GetHARRequest|GetPageResourcesRequest;
+  export type ServerRequests = RegisterRecorderExtensionPluginRequest|RegisterLanguageExtensionPluginRequest|
+      SubscribeRequest|UnsubscribeRequest|AddRequestHeadersRequest|ApplyStyleSheetRequest|CreatePanelRequest|
+      ShowPanelRequest|CreateToolbarButtonRequest|UpdateButtonRequest|CompleteTraceSessionRequest|
+      CreateSidebarPaneRequest|SetSidebarHeightRequest|SetSidebarContentRequest|SetSidebarPageRequest|
+      OpenResourceRequest|SetOpenResourceHandlerRequest|SetThemeChangeHandlerRequest|ReloadRequest|
+      EvaluateOnInspectedPageRequest|GetRequestContentRequest|GetResourceContentRequest|SetResourceContentRequest|
+      AddTraceProviderRequest|ForwardKeyboardEventRequest|GetHARRequest|GetPageResourcesRequest;
   export type ExtensionServerRequestMessage = PrivateAPI.ServerRequests&{requestId?: number};
 
   type AddRawModuleRequest = {
@@ -256,6 +270,13 @@ export namespace PrivateAPI {
       RawLocationToSourceLocationRequest|GetScopeInfoRequest|ListVariablesInScopeRequest|RemoveRawModuleRequest|
       GetTypeInfoRequest|GetFormatterRequest|GetInspectableAddressRequest|GetFunctionInfoRequest|
       GetInlinedFunctionRangesRequest|GetInlinedCalleesRangesRequest|GetMappedLinesRequest;
+
+  type StringifyRequest = {
+    method: RecorderExtensionPluginCommands.Stringify,
+    parameters: {recording: Record<string, unknown>},
+  };
+
+  export type RecorderExtensionRequests = StringifyRequest;
 }
 
 declare global {
@@ -264,7 +285,7 @@ declare global {
         (extensionInfo: ExtensionDescriptor, inspectedTabId: string, themeName: string, keysToForward: number[],
          testHook:
              (extensionServer: APIImpl.ExtensionServerClient, extensionAPI: APIImpl.InspectorExtensionAPI) => unknown,
-         injectedScriptId: number) => void;
+         injectedScriptId: number, targetWindow?: Window) => void;
     buildExtensionAPIInjectedScript(
         extensionInfo: ExtensionDescriptor, inspectedTabId: string, themeName: string, keysToForward: number[],
         testHook: undefined|((extensionServer: unknown, extensionAPI: unknown) => unknown)): string;
@@ -283,6 +304,7 @@ export type ExtensionDescriptor = {
 namespace APIImpl {
   export interface InspectorExtensionAPI {
     languageServices: PublicAPI.Chrome.DevTools.LanguageExtensions;
+    recorder: PublicAPI.Chrome.DevTools.RecorderExtensions;
     timeline: Timeline;
     network: PublicAPI.Chrome.DevTools.Network;
     panels: PublicAPI.Chrome.DevTools.Panels;
@@ -357,6 +379,10 @@ namespace APIImpl {
     _plugins: Map<PublicAPI.Chrome.DevTools.LanguageExtensionPlugin, MessagePort>;
   }
 
+  export interface RecorderExtensions extends PublicAPI.Chrome.DevTools.RecorderExtensions {
+    _plugins: Map<PublicAPI.Chrome.DevTools.RecorderExtensionPlugin, MessagePort>;
+  }
+
   export interface ExtensionPanel extends ExtensionView, PublicAPI.Chrome.DevTools.ExtensionPanel {
     show(): void;
   }
@@ -392,7 +418,7 @@ namespace APIImpl {
 self.injectedExtensionAPI = function(
     extensionInfo: ExtensionDescriptor, inspectedTabId: string, themeName: string, keysToForward: number[],
     testHook: (extensionServer: APIImpl.ExtensionServerClient, extensionAPI: APIImpl.InspectorExtensionAPI) => unknown,
-    injectedScriptId: number): void {
+    injectedScriptId: number, targetWindowForTest?: Window): void {
   const keysToForwardSet = new Set<number>(keysToForward);
   const chrome = window.chrome || {};
 
@@ -473,6 +499,7 @@ self.injectedExtensionAPI = function(
     this.network = new (Constructor(Network))();
     this.timeline = new (Constructor(Timeline))();
     this.languageServices = new (Constructor(LanguageServicesAPI))();
+    this.recorder = new (Constructor(RecorderServicesAPI))();
     defineDeprecatedProperty(this, 'webInspector', 'resources', 'network');
   }
 
@@ -671,6 +698,60 @@ self.injectedExtensionAPI = function(
     __proto__: ExtensionViewImpl.prototype,
   };
 
+  function RecorderServicesAPIImpl(this: APIImpl.RecorderExtensions): void {
+    this._plugins = new Map();
+  }
+
+  (RecorderServicesAPIImpl.prototype as
+   Pick<APIImpl.RecorderExtensions, 'registerRecorderExtensionPlugin'|'unregisterRecorderExtensionPlugin'>) = {
+    registerRecorderExtensionPlugin: async function(
+        this: APIImpl.RecorderExtensions, plugin: PublicAPI.Chrome.DevTools.RecorderExtensionPlugin,
+        pluginName: string): Promise<void> {
+      if (this._plugins.has(plugin)) {
+        throw new Error(`Tried to register plugin '${pluginName}' twice`);
+      }
+      const channel = new MessageChannel();
+      const port = channel.port1;
+      this._plugins.set(plugin, port);
+      port.onmessage = ({data}: MessageEvent<{requestId: number}&PrivateAPI.RecorderExtensionRequests>): void => {
+        const {requestId} = data;
+        dispatchMethodCall(data)
+            .then(result => port.postMessage({requestId, result}))
+            .catch(error => port.postMessage({requestId, error: {message: error.message}}));
+      };
+
+      function dispatchMethodCall(request: PrivateAPI.RecorderExtensionRequests): Promise<unknown> {
+        switch (request.method) {
+          case PrivateAPI.RecorderExtensionPluginCommands.Stringify:
+            return plugin.stringify(request.parameters.recording);
+          default:
+            throw new Error(`'${request.method}' is not recognized`);
+        }
+      }
+
+      await new Promise<void>(resolve => {
+        extensionServer.sendRequest(
+            {
+              command: PrivateAPI.Commands.RegisterRecorderExtensionPlugin,
+              pluginName,
+              port: channel.port2,
+            },
+            () => resolve(), [channel.port2]);
+      });
+    },
+
+    unregisterRecorderExtensionPlugin: async function(
+        this: APIImpl.RecorderExtensions, plugin: PublicAPI.Chrome.DevTools.RecorderExtensionPlugin): Promise<void> {
+      const port = this._plugins.get(plugin);
+      if (!port) {
+        throw new Error('Tried to unregister a plugin that was not previously registered');
+      }
+      this._plugins.delete(plugin);
+      port.postMessage({event: PrivateAPI.RecorderExtensionPluginEvents.UnregisteredRecorderExtensionPlugin});
+      port.close();
+    },
+  };
+
   function LanguageServicesAPIImpl(this: APIImpl.LanguageExtensions): void {
     this._plugins = new Map();
   }
@@ -787,6 +868,7 @@ self.injectedExtensionAPI = function(
   }
 
   const LanguageServicesAPI = declareInterfaceClass(LanguageServicesAPIImpl);
+  const RecorderServicesAPI = declareInterfaceClass(RecorderServicesAPIImpl);
   const Button = declareInterfaceClass(ButtonImpl);
   const EventSink = declareInterfaceClass(EventSinkImpl);
   const ExtensionPanel = declareInterfaceClass(ExtensionPanelImpl);
@@ -1128,7 +1210,7 @@ self.injectedExtensionAPI = function(
 
   document.addEventListener('keydown', forwardKeyboardEvent, false);
 
-  function ExtensionServerClient(this: APIImpl.ExtensionServerClient): void {
+  function ExtensionServerClient(this: APIImpl.ExtensionServerClient, targetWindow: Window): void {
     this._callbacks = {};
     this._handlers = {};
     this._lastRequestId = 0;
@@ -1141,7 +1223,7 @@ self.injectedExtensionAPI = function(
     this._port.addEventListener('message', this._onMessage.bind(this), false);
     this._port.start();
 
-    window.parent.postMessage('registerExtension', '*', [channel.port2]);
+    targetWindow.postMessage('registerExtension', '*', [channel.port2]);
   }
 
   (ExtensionServerClient.prototype as Pick<
@@ -1225,7 +1307,7 @@ self.injectedExtensionAPI = function(
     }
   }
 
-  const extensionServer = new (Constructor(ExtensionServerClient))();
+  const extensionServer = new (Constructor(ExtensionServerClient))(targetWindowForTest || window.parent);
 
   const coreAPI = new (Constructor(InspectorExtensionAPI))();
 
@@ -1241,6 +1323,7 @@ self.injectedExtensionAPI = function(
   chrome.devtools!.panels = coreAPI.panels;
   chrome.devtools!.panels.themeName = themeName;
   chrome.devtools!.languageServices = coreAPI.languageServices;
+  chrome.devtools!.recorder = coreAPI.recorder;
 
   // default to expose experimental APIs for now.
   if (extensionInfo.exposeExperimentalAPIs !== false) {

package/front_end/models/extensions/ExtensionEndpoint.ts

@@ -0,0 +1,69 @@
+// 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.
+
+type Response = {
+  requestId: number,
+  result: unknown,
+  error: Error|null,
+};
+
+type Event = {
+  event: string,
+};
+
+type Message = MessageEvent<Response|Event>;
+
+export class ExtensionEndpoint {
+  private readonly port: MessagePort;
+  private nextRequestId: number = 0;
+  private pendingRequests: Map<number, {
+    resolve: (arg: unknown) => void,
+    reject: (error: Error) => void,
+  }>;
+
+  constructor(port: MessagePort) {
+    this.port = port;
+    this.port.onmessage = this.onResponse.bind(this);
+    this.pendingRequests = new Map();
+  }
+
+  sendRequest<ReturnType>(method: string, parameters: unknown): Promise<ReturnType> {
+    return new Promise((resolve, reject) => {
+      const requestId = this.nextRequestId++;
+      this.pendingRequests.set(requestId, {resolve: resolve as (arg: unknown) => void, reject});
+      this.port.postMessage({requestId, method, parameters});
+    });
+  }
+
+  protected disconnect(): void {
+    for (const {reject} of this.pendingRequests.values()) {
+      reject(new Error('Extension endpoint disconnected'));
+    }
+    this.pendingRequests.clear();
+    this.port.close();
+  }
+
+  private onResponse({data}: Message): void {
+    if ('event' in data) {
+      this.handleEvent(data);
+      return;
+    }
+    const {requestId, result, error} = data;
+    const pendingRequest = this.pendingRequests.get(requestId);
+    if (!pendingRequest) {
+      console.error(`No pending request ${requestId}`);
+      return;
+    }
+    this.pendingRequests.delete(requestId);
+    if (error) {
+      pendingRequest.reject(new Error(error.message));
+    } else {
+      pendingRequest.resolve(result);
+    }
+  }
+
+  protected handleEvent(_event: Event): void {
+    throw new Error('handleEvent is not implemented');
+  }
+}

package/front_end/models/extensions/ExtensionServer.ts

@@ -52,7 +52,9 @@ import {ExtensionButton, ExtensionPanel, ExtensionSidebarPane} from './Extension
 import type {TracingSession} from './ExtensionTraceProvider.js';
 import {ExtensionTraceProvider} from './ExtensionTraceProvider.js';
 import {LanguageExtensionEndpoint} from './LanguageExtensionEndpoint.js';
+import {RecorderExtensionEndpoint} from './RecorderExtensionEndpoint.js';
 import {PrivateAPI} from './ExtensionAPI.js';
+import {RecorderPluginManager} from './RecorderPluginManager.js';
 
 const extensionOrigins: WeakMap<MessagePort, Platform.DevToolsPath.UrlString> = new WeakMap();
 
@@ -138,6 +140,8 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     this.registerHandler(PrivateAPI.Commands.UpdateButton, this.onUpdateButton.bind(this));
     this.registerHandler(
         PrivateAPI.Commands.RegisterLanguageExtensionPlugin, this.registerLanguageExtensionEndpoint.bind(this));
+    this.registerHandler(
+        PrivateAPI.Commands.RegisterRecorderExtensionPlugin, this.registerRecorderExtensionEndpoint.bind(this));
     window.addEventListener('message', this.onWindowMessage.bind(this), false);  // Only for main window.
 
     const existingTabId =
@@ -215,6 +219,16 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     return this.status.OK();
   }
 
+  private registerRecorderExtensionEndpoint(
+      message: PrivateAPI.ExtensionServerRequestMessage, _shared_port: MessagePort): Record {
+    if (message.command !== PrivateAPI.Commands.RegisterRecorderExtensionPlugin) {
+      return this.status.E_BADARG('command', `expected ${PrivateAPI.Commands.Subscribe}`);
+    }
+    const {pluginName, port} = message;
+    RecorderPluginManager.instance().addPlugin(new RecorderExtensionEndpoint(pluginName, port));
+    return this.status.OK();
+  }
+
   private inspectedURLChanged(event: Common.EventTarget.EventTargetEvent<SDK.Target.Target>): void {
     if (!this.canInspectURL(event.data.inspectedURL())) {
       this.disableExtensions();
@@ -856,6 +870,13 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     }
   }
 
+  addExtensionForTest(extensionInfo: Host.InspectorFrontendHostAPI.ExtensionDescriptor, origin: string): boolean
+      |undefined {
+    const name = extensionInfo.name || `Extension ${origin}`;
+    this.registeredExtensions.set(origin, {name});
+    return true;
+  }
+
   private addExtension(extensionInfo: Host.InspectorFrontendHostAPI.ExtensionDescriptor): boolean|undefined {
     const startPage = extensionInfo.startPage;
 

package/front_end/models/extensions/LanguageExtensionEndpoint.ts

@@ -5,9 +5,30 @@
 import type * as SDK from '../../core/sdk/sdk.js';
 import * as Bindings from '../bindings/bindings.js';
 import type {Chrome} from '../../../extension-api/ExtensionAPI.js'; // eslint-disable-line rulesdir/es_modules_import
+import {ExtensionEndpoint} from './ExtensionEndpoint.js';
 
 import {PrivateAPI} from './ExtensionAPI.js';
 
+class LanguageExtensionEndpointImpl extends ExtensionEndpoint {
+  private plugin: LanguageExtensionEndpoint;
+  constructor(plugin: LanguageExtensionEndpoint, port: MessagePort) {
+    super(port);
+    this.plugin = plugin;
+  }
+  protected handleEvent({event}: {event: string}): void {
+    switch (event) {
+      case PrivateAPI.LanguageExtensionPluginEvents.UnregisteredLanguageExtensionPlugin: {
+        this.disconnect();
+        const {pluginManager} = Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance();
+        if (pluginManager) {
+          pluginManager.removePlugin(this.plugin);
+        }
+        break;
+      }
+    }
+  }
+}
+
 export class LanguageExtensionEndpoint extends Bindings.DebuggerLanguagePlugins.DebuggerLanguagePlugin {
   private readonly supportedScriptTypes: {
     language: string,
@@ -15,13 +36,7 @@ export class LanguageExtensionEndpoint extends Bindings.DebuggerLanguagePlugins.
     // eslint-disable-next-line @typescript-eslint/naming-convention
     symbol_types: Array<string>,
   };
-  private readonly port: MessagePort;
-  private nextRequestId: number;
-  // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  private pendingRequests: Map<any, any>;
+  private endpoint: LanguageExtensionEndpointImpl;
   constructor(
       name: string, supportedScriptTypes: {
         language: string,
@@ -32,63 +47,7 @@ export class LanguageExtensionEndpoint extends Bindings.DebuggerLanguagePlugins.
       port: MessagePort) {
     super(name);
     this.supportedScriptTypes = supportedScriptTypes;
-    this.port = port;
-    this.port.onmessage = this.onResponse.bind(this);
-    this.nextRequestId = 0;
-    this.pendingRequests = new Map();
-  }
-
-  // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  private sendRequest(method: string, parameters: any): Promise<any> {
-    return new Promise((resolve, reject) => {
-      const requestId = this.nextRequestId++;
-      this.pendingRequests.set(requestId, {resolve, reject});
-      this.port.postMessage({requestId, method, parameters});
-    });
-  }
-
-  private onResponse({data}: MessageEvent<{
-    requestId: number,
-    // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    result: any,
-    error: Error|null,
-  }|{
-    event: string,
-  }>): void {
-    if ('event' in data) {
-      const {event} = data;
-      switch (event) {
-        case PrivateAPI.LanguageExtensionPluginEvents.UnregisteredLanguageExtensionPlugin: {
-          for (const {reject} of this.pendingRequests.values()) {
-            reject(new Error('Language extension endpoint disconnected'));
-          }
-          this.pendingRequests.clear();
-          this.port.close();
-          const {pluginManager} = Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance();
-          if (pluginManager) {
-            pluginManager.removePlugin(this);
-          }
-          break;
-        }
-      }
-      return;
-    }
-    const {requestId, result, error} = data;
-    if (!this.pendingRequests.has(requestId)) {
-      console.error(`No pending request ${requestId}`);
-      return;
-    }
-    const {resolve, reject} = this.pendingRequests.get(requestId);
-    this.pendingRequests.delete(requestId);
-    if (error) {
-      reject(new Error(error.message));
-    } else {
-      resolve(result);
-    }
+    this.endpoint = new LanguageExtensionEndpointImpl(this, port);
   }
 
   handleScript(script: SDK.Script.Script): boolean {
@@ -100,7 +59,7 @@ export class LanguageExtensionEndpoint extends Bindings.DebuggerLanguagePlugins.
   /** Notify the plugin about a new script
      */
   addRawModule(rawModuleId: string, symbolsURL: string, rawModule: Chrome.DevTools.RawModule): Promise<string[]> {
-    return this.sendRequest(
+    return this.endpoint.sendRequest(
                PrivateAPI.LanguageExtensionPluginCommands.AddRawModule, {rawModuleId, symbolsURL, rawModule}) as
         Promise<string[]>;
   }
@@ -109,33 +68,36 @@ export class LanguageExtensionEndpoint extends Bindings.DebuggerLanguagePlugins.
    * Notifies the plugin that a script is removed.
    */
   removeRawModule(rawModuleId: string): Promise<void> {
-    return this.sendRequest(PrivateAPI.LanguageExtensionPluginCommands.RemoveRawModule, {rawModuleId}) as Promise<void>;
+    return this.endpoint.sendRequest(PrivateAPI.LanguageExtensionPluginCommands.RemoveRawModule, {rawModuleId}) as
+        Promise<void>;
   }
 
   /** Find locations in raw modules from a location in a source file
      */
   sourceLocationToRawLocation(sourceLocation: Chrome.DevTools.SourceLocation):
       Promise<Chrome.DevTools.RawLocationRange[]> {
-    return this.sendRequest(PrivateAPI.LanguageExtensionPluginCommands.SourceLocationToRawLocation, {sourceLocation}) as
+    return this.endpoint.sendRequest(
+               PrivateAPI.LanguageExtensionPluginCommands.SourceLocationToRawLocation, {sourceLocation}) as
         Promise<Chrome.DevTools.RawLocationRange[]>;
   }
 
   /** Find locations in source files from a location in a raw module
      */
   rawLocationToSourceLocation(rawLocation: Chrome.DevTools.RawLocation): Promise<Chrome.DevTools.SourceLocation[]> {
-    return this.sendRequest(PrivateAPI.LanguageExtensionPluginCommands.RawLocationToSourceLocation, {rawLocation}) as
+    return this.endpoint.sendRequest(
+               PrivateAPI.LanguageExtensionPluginCommands.RawLocationToSourceLocation, {rawLocation}) as
         Promise<Chrome.DevTools.SourceLocation[]>;
   }
 
   getScopeInfo(type: string): Promise<Chrome.DevTools.ScopeInfo> {
-    return this.sendRequest(PrivateAPI.LanguageExtensionPluginCommands.GetScopeInfo, {type}) as
+    return this.endpoint.sendRequest(PrivateAPI.LanguageExtensionPluginCommands.GetScopeInfo, {type}) as
         Promise<Chrome.DevTools.ScopeInfo>;
   }
 
   /** List all variables in lexical scope at a given location in a raw module
      */
   listVariablesInScope(rawLocation: Chrome.DevTools.RawLocation): Promise<Chrome.DevTools.Variable[]> {
-    return this.sendRequest(PrivateAPI.LanguageExtensionPluginCommands.ListVariablesInScope, {rawLocation}) as
+    return this.endpoint.sendRequest(PrivateAPI.LanguageExtensionPluginCommands.ListVariablesInScope, {rawLocation}) as
         Promise<Chrome.DevTools.Variable[]>;
   }
 
@@ -144,7 +106,8 @@ export class LanguageExtensionEndpoint extends Bindings.DebuggerLanguagePlugins.
   getFunctionInfo(rawLocation: Chrome.DevTools.RawLocation): Promise<{
     frames: Array<Chrome.DevTools.FunctionInfo>,
   }> {
-    return this.sendRequest(PrivateAPI.LanguageExtensionPluginCommands.GetFunctionInfo, {rawLocation}) as Promise<{
+    return this.endpoint.sendRequest(PrivateAPI.LanguageExtensionPluginCommands.GetFunctionInfo, {rawLocation}) as
+        Promise<{
              frames: Array<Chrome.DevTools.FunctionInfo>,
            }>;
   }
@@ -153,7 +116,8 @@ export class LanguageExtensionEndpoint extends Bindings.DebuggerLanguagePlugins.
      *  that rawLocation is in.
      */
   getInlinedFunctionRanges(rawLocation: Chrome.DevTools.RawLocation): Promise<Chrome.DevTools.RawLocationRange[]> {
-    return this.sendRequest(PrivateAPI.LanguageExtensionPluginCommands.GetInlinedFunctionRanges, {rawLocation}) as
+    return this.endpoint.sendRequest(
+               PrivateAPI.LanguageExtensionPluginCommands.GetInlinedFunctionRanges, {rawLocation}) as
         Promise<Chrome.DevTools.RawLocationRange[]>;
   }
 
@@ -161,7 +125,8 @@ export class LanguageExtensionEndpoint extends Bindings.DebuggerLanguagePlugins.
      *  called by the function or inline frame that rawLocation is in.
      */
   getInlinedCalleesRanges(rawLocation: Chrome.DevTools.RawLocation): Promise<Chrome.DevTools.RawLocationRange[]> {
-    return this.sendRequest(PrivateAPI.LanguageExtensionPluginCommands.GetInlinedCalleesRanges, {rawLocation}) as
+    return this.endpoint.sendRequest(
+               PrivateAPI.LanguageExtensionPluginCommands.GetInlinedCalleesRanges, {rawLocation}) as
         Promise<Chrome.DevTools.RawLocationRange[]>;
   }
 
@@ -169,7 +134,8 @@ export class LanguageExtensionEndpoint extends Bindings.DebuggerLanguagePlugins.
     typeInfos: Array<Chrome.DevTools.TypeInfo>,
     base: Chrome.DevTools.EvalBase,
   }|null> {
-    return this.sendRequest(PrivateAPI.LanguageExtensionPluginCommands.GetTypeInfo, {expression, context}) as Promise<{
+    return this.endpoint.sendRequest(PrivateAPI.LanguageExtensionPluginCommands.GetTypeInfo, {expression, context}) as
+        Promise<{
              typeInfos: Array<Chrome.DevTools.TypeInfo>,
              base: Chrome.DevTools.EvalBase,
            }|null>;
@@ -183,8 +149,8 @@ export class LanguageExtensionEndpoint extends Bindings.DebuggerLanguagePlugins.
       context: Chrome.DevTools.RawLocation): Promise<{
     js: string,
   }> {
-    return this.sendRequest(PrivateAPI.LanguageExtensionPluginCommands.GetFormatter, {expressionOrField, context}) as
-        Promise<{
+    return this.endpoint.sendRequest(
+               PrivateAPI.LanguageExtensionPluginCommands.GetFormatter, {expressionOrField, context}) as Promise<{
              js: string,
            }>;
   }
@@ -195,13 +161,15 @@ export class LanguageExtensionEndpoint extends Bindings.DebuggerLanguagePlugins.
   }): Promise<{
     js: string,
   }> {
-    return this.sendRequest(PrivateAPI.LanguageExtensionPluginCommands.GetInspectableAddress, {field}) as Promise<{
+    return this.endpoint.sendRequest(PrivateAPI.LanguageExtensionPluginCommands.GetInspectableAddress, {field}) as
+        Promise<{
              js: string,
            }>;
   }
 
   async getMappedLines(rawModuleId: string, sourceFileURL: string): Promise<number[]|undefined> {
-    return this.sendRequest(PrivateAPI.LanguageExtensionPluginCommands.GetMappedLines, {rawModuleId, sourceFileURL});
+    return this.endpoint.sendRequest(
+        PrivateAPI.LanguageExtensionPluginCommands.GetMappedLines, {rawModuleId, sourceFileURL});
   }
 
   dispose(): void {

package/front_end/models/extensions/RecorderExtensionEndpoint.ts

@@ -0,0 +1,43 @@
+// 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 {PrivateAPI} from './ExtensionAPI.js';
+import {ExtensionEndpoint} from './ExtensionEndpoint.js';
+import {RecorderPluginManager} from './RecorderPluginManager.js';
+
+export class RecorderExtensionEndpoint extends ExtensionEndpoint {
+  private readonly name: string;
+
+  constructor(name: string, port: MessagePort) {
+    super(port);
+    this.name = name;
+  }
+
+  getName(): string {
+    return this.name;
+  }
+
+  protected handleEvent({event}: {event: string}): void {
+    switch (event) {
+      case PrivateAPI.RecorderExtensionPluginEvents.UnregisteredRecorderExtensionPlugin: {
+        this.disconnect();
+        RecorderPluginManager.instance().removePlugin(this);
+        break;
+      }
+      default:
+        throw new Error(`Unrecognized Recorder extension endpoint event: ${event}`);
+    }
+  }
+
+  /**
+   * In practice, `recording` is a UserFlow[1], but we avoid defining this type on the
+   * API in order to prevent dependencies between Chrome and puppeteer. Extensions
+   * are responsible for working out potential compatibility issues.
+   *
+   * [1]: https://github.com/puppeteer/replay/blob/main/src/Schema.ts#L245
+   */
+  stringify(recording: Object): Promise<string> {
+    return this.sendRequest(PrivateAPI.RecorderExtensionPluginCommands.Stringify, {recording});
+  }
+}

package/front_end/models/extensions/RecorderPluginManager.ts

@@ -0,0 +1,30 @@
+// 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 type {RecorderExtensionEndpoint} from './RecorderExtensionEndpoint.js';
+
+let instance: RecorderPluginManager|null = null;
+
+export class RecorderPluginManager {
+  #plugins: Set<RecorderExtensionEndpoint> = new Set();
+
+  static instance(): RecorderPluginManager {
+    if (!instance) {
+      instance = new RecorderPluginManager();
+    }
+    return instance;
+  }
+
+  addPlugin(plugin: RecorderExtensionEndpoint): void {
+    this.#plugins.add(plugin);
+  }
+
+  removePlugin(plugin: RecorderExtensionEndpoint): void {
+    this.#plugins.delete(plugin);
+  }
+
+  plugins(): RecorderExtensionEndpoint[] {
+    return Array.from(this.#plugins.values());
+  }
+}

package/front_end/models/extensions/extensions.ts

@@ -7,6 +7,7 @@ import * as ExtensionPanel from './ExtensionPanel.js';
 import * as ExtensionServer from './ExtensionServer.js';
 import * as ExtensionTraceProvider from './ExtensionTraceProvider.js';
 import * as ExtensionView from './ExtensionView.js';
+import * as RecorderPluginManager from './RecorderPluginManager.js';
 
 export {
   ExtensionAPI,
@@ -14,4 +15,5 @@ export {
   ExtensionServer,
   ExtensionTraceProvider,
   ExtensionView,
+  RecorderPluginManager,
 };

package/front_end/panels/application/AppManifestView.ts

@@ -663,7 +663,8 @@ export class AppManifestView extends UI.Widget.VBox implements SDK.TargetManager
     }
 
     const userPreferences = parsedManifest['user_preferences'] || {};
-    const colorSchemeDark = userPreferences['color_scheme_dark'] || {};
+    const colorScheme = userPreferences['color_scheme'] || {};
+    const colorSchemeDark = colorScheme['dark'] || {};
     const darkThemeColorString = colorSchemeDark['theme_color'];
     const hasDarkThemeColor = typeof darkThemeColorString === 'string';
     this.darkThemeColorField.parentElement?.classList.toggle('hidden', !hasDarkThemeColor);

package/front_end/panels/browser_debugger/DOMBreakpointsSidebarPane.ts

@@ -53,6 +53,13 @@ const UIStrings = {
   */
   sS: '{PH1}: {PH2}',
   /**
+  *@description Text with three placeholders separated by a colon and a comma
+  *@example {Node removed} PH1
+  *@example {div#id1} PH2
+  *@example {checked} PH3
+  */
+  sSS: '{PH1}: {PH2}, {PH3}',
+  /**
   *@description Text exposed to screen readers on checked items.
   */
   checked: 'checked',
@@ -196,19 +203,26 @@ export class DOMBreakpointsSidebarPane extends UI.Widget.VBox implements
     description.textContent = breakpointTypeLabel ? breakpointTypeLabel() : null;
     const breakpointTypeText = breakpointTypeLabel ? breakpointTypeLabel() : '';
     UI.ARIAUtils.setAccessibleName(checkboxElement, breakpointTypeText);
+    const checkedStateText = item.enabled ? i18nString(UIStrings.checked) : i18nString(UIStrings.unchecked);
     const linkifiedNode = document.createElement('monospace');
     linkifiedNode.style.display = 'block';
     labelElement.appendChild(linkifiedNode);
     void Common.Linkifier.Linkifier.linkify(item.node, {preventKeyboardFocus: true, tooltip: undefined})
         .then(linkified => {
           linkifiedNode.appendChild(linkified);
+          // Give the checkbox an aria-label as it is required for all form element
           UI.ARIAUtils.setAccessibleName(
               checkboxElement, i18nString(UIStrings.sS, {PH1: breakpointTypeText, PH2: linkified.deepTextContent()}));
+          // The parent list element is the one that actually gets focused.
+          // Assign it an aria-label with complete information for the screen reader to read out properly
+          UI.ARIAUtils.setAccessibleName(
+              element,
+              i18nString(
+                  UIStrings.sSS, {PH1: breakpointTypeText, PH2: linkified.deepTextContent(), PH3: checkedStateText}));
         });
 
     labelElement.appendChild(description);
 
-    const checkedStateText = item.enabled ? i18nString(UIStrings.checked) : i18nString(UIStrings.unchecked);
     if (item === this.#highlightedBreakpoint) {
       element.classList.add('breakpoint-hit');
       UI.ARIAUtils.setDescription(element, i18nString(UIStrings.sBreakpointHit, {PH1: checkedStateText}));

package/front_end/panels/lighthouse/LighthouseController.ts

@@ -146,14 +146,22 @@ const UIStrings = {
   */
   desktop: 'Desktop',
   /**
-  *@description Text for option to enable simulated throttling in Lighthouse Panel
-  */
-  simulatedThrottling: 'Simulated throttling',
+   * @description Text for an option to select a throttling method.
+   */
+  throttlingMethod: 'Throttling method',
   /**
-  *@description Tooltip text that appears when hovering over the 'Simulated Throttling' checkbox in the settings pane opened by clicking the setting cog in the start view of the audits panel
-  */
+   * @description Text for an option in a dropdown to use simulated throttling. This is the default setting.
+   */
+  simulatedThrottling: 'Simulated throttling (default)',
+  /**
+   * @description Text for an option in a dropdown to use DevTools throttling. This option should only be used by advanced users.
+   */
+  devtoolsThrottling: 'DevTools throttling (advanced)',
+  /**
+   * @description Tooltip text that appears when hovering over the 'Simulated Throttling' checkbox in the settings pane opened by clicking the setting cog in the start view of the audits panel
+   */
   simulateASlowerPageLoadBasedOn:
-      'Simulate a slower page load, based on data from an initial unthrottled load. If disabled, the page is actually slowed with applied throttling.',
+      'Simulated throttling simulates a slower page load based on data from an initial unthrottled load. DevTools throttling actually slows down the page.',
   /**
   *@description Text of checkbox to reset storage features prior to running audits in Lighthouse
   */
@@ -515,17 +523,24 @@ export const RuntimeSettings: RuntimeSetting[] = [
   {
     // This setting is disabled, but we keep it around to show in the UI.
     setting: Common.Settings.Settings.instance().createSetting(
-        'lighthouse.throttling', true, Common.Settings.SettingStorageType.Synced),
-    title: i18nLazyString(UIStrings.simulatedThrottling),
+        'lighthouse.throttling', 'simulated', Common.Settings.SettingStorageType.Synced),
+    title: i18nLazyString(UIStrings.throttlingMethod),
     // We will disable this when we have a Lantern trace viewer within DevTools.
     learnMore:
         'https://github.com/GoogleChrome/lighthouse/blob/master/docs/throttling.md#devtools-lighthouse-panel-throttling' as
         Platform.DevToolsPath.UrlString,
     description: i18nLazyString(UIStrings.simulateASlowerPageLoadBasedOn),
     setFlags: (flags: Flags, value: string|boolean): void => {
-      flags.throttlingMethod = value ? 'simulate' : 'devtools';
+      if (typeof value === 'string') {
+        flags.throttlingMethod = value;
+      } else {
+        flags.throttlingMethod = value ? 'simulate' : 'devtools';
+      }
     },
-    options: undefined,
+    options: [
+      {label: i18nLazyString(UIStrings.simulatedThrottling), value: 'simulate'},
+      {label: i18nLazyString(UIStrings.devtoolsThrottling), value: 'devtools'},
+    ],
   },
   {
     setting: Common.Settings.Settings.instance().createSetting(

package/front_end/panels/lighthouse/LighthouseStartView.ts

@@ -103,6 +103,30 @@ export class StartView extends UI.Widget.Widget {
     }
   }
 
+  protected 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`);
+    }
+
+    const options = runtimeSetting.options?.map(option => ({label: option.label(), value: option.value})) || [];
+
+    runtimeSetting.setting.setTitle(runtimeSetting.title());
+    const control = new UI.Toolbar.ToolbarSettingComboBox(
+        options,
+        runtimeSetting.setting as Common.Settings.Setting<string>,
+        runtimeSetting.title(),
+    );
+    control.setTitle(runtimeSetting.description());
+    toolbar.appendToolbarItem(control);
+    if (runtimeSetting.learnMore) {
+      const link =
+          UI.XLink.XLink.create(runtimeSetting.learnMore, i18nString(UIStrings.learnMore), 'lighthouse-learn-more');
+      link.style.padding = '5px';
+      control.element.appendChild(link);
+    }
+  }
+
   protected populateFormControls(fragment: UI.Fragment.Fragment, mode?: string): void {
     // Populate the device type
     const deviceTypeFormElements = fragment.$('device-type-form-elements');
@@ -134,7 +158,7 @@ export class StartView extends UI.Widget.Widget {
   protected render(): void {
     this.populateRuntimeSettingAsToolbarCheckbox('lighthouse.legacy_navigation', this.settingsToolbarInternal);
     this.populateRuntimeSettingAsToolbarCheckbox('lighthouse.clear_storage', this.settingsToolbarInternal);
-    this.populateRuntimeSettingAsToolbarCheckbox('lighthouse.throttling', this.settingsToolbarInternal);
+    this.populateRuntimeSettingAsToolbarDropdown('lighthouse.throttling', this.settingsToolbarInternal);
 
     this.startButton = UI.UIUtils.createTextButton(
         i18nString(UIStrings.generateReport),

package/front_end/panels/lighthouse/LighthouseStartViewFR.ts

@@ -49,7 +49,7 @@ export class StartViewFR extends StartView {
   protected render(): void {
     this.populateRuntimeSettingAsToolbarCheckbox('lighthouse.legacy_navigation', this.settingsToolbarInternal);
     this.populateRuntimeSettingAsToolbarCheckbox('lighthouse.clear_storage', this.settingsToolbarInternal);
-    this.populateRuntimeSettingAsToolbarCheckbox('lighthouse.throttling', this.settingsToolbarInternal);
+    this.populateRuntimeSettingAsToolbarDropdown('lighthouse.throttling', this.settingsToolbarInternal);
 
     const {mode} = this.controller.getFlags();
     this.populateStartButton(mode);

package/front_end/panels/network/components/RequestHeadersView.css

@@ -52,6 +52,10 @@ details summary input {
   user-select: text;
 }
 
+div.raw-headers-row {
+  display: block;
+}
+
 .row:first-of-type {
   margin-top: 2px;
 }
@@ -103,4 +107,5 @@ details summary input {
   font-family: var(--source-code-font-family);
   font-size: var(--source-code-font-size);
   white-space: pre-wrap;
+  word-break: break-all;
 }

package/front_end/panels/network/components/RequestHeadersView.ts

@@ -6,12 +6,14 @@ import * as Common from '../../../core/common/common.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import {assertNotNullOrUndefined} from '../../../core/platform/platform.js';
 import * as SDK from '../../../core/sdk/sdk.js';
+import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 
 import requestHeadersViewStyles from './RequestHeadersView.css.js';
 
+const RAW_HEADER_CUTOFF = 3000;
 const {render, html} = LitHtml;
 
 const UIStrings = {
@@ -64,6 +66,10 @@ const UIStrings = {
   */
   responseHeaders: 'Response Headers',
   /**
+  *@description Text to show more content
+  */
+  showMore: 'Show more',
+  /**
   *@description HTTP response code
   */
   statusCode: 'Status Code',
@@ -117,6 +123,8 @@ export class RequestHeadersComponent extends HTMLElement {
   #request?: Readonly<SDK.NetworkRequest.NetworkRequest>;
   #showResponseHeadersText = false;
   #showRequestHeadersText = false;
+  #showResponseHeadersTextFull = false;
+  #showRequestHeadersTextFull = false;
 
   set data(data: RequestHeadersComponentData) {
     this.#request = data.request;
@@ -161,9 +169,8 @@ export class RequestHeadersComponent extends HTMLElement {
         } as CategoryData}
         aria-label=${i18nString(UIStrings.responseHeaders)}
       >
-        ${this.#showResponseHeadersText ? html`
-          <div class="row raw-headers">${this.#request.responseHeadersText.trim()}</div>
-        ` : html`
+        ${this.#showResponseHeadersText ?
+            this.#renderRawHeaders(this.#request.responseHeadersText, true) : html`
           ${this.#request.sortedResponseHeaders.map(header => html`
             <div class="row">
               <div class="header-name">${header.name}:</div>
@@ -198,9 +205,8 @@ export class RequestHeadersComponent extends HTMLElement {
         } as CategoryData}
         aria-label=${i18nString(UIStrings.requestHeaders)}
       >
-        ${(this.#showRequestHeadersText && requestHeadersText) ? html`
-          <div class="row raw-headers">${requestHeadersText.trim()}</div>
-        ` : html`
+        ${(this.#showRequestHeadersText && requestHeadersText) ?
+            this.#renderRawHeaders(requestHeadersText, false) : html`
           ${this.#request.requestHeaders().map(header => html`
             <div class="row">
               <div class="header-name">${header.name}:</div>
@@ -212,6 +218,50 @@ export class RequestHeadersComponent extends HTMLElement {
     `;
   }
 
+  #renderRawHeaders(rawHeadersText: string, forResponseHeaders: boolean): LitHtml.TemplateResult {
+    const trimmed = rawHeadersText.trim();
+    const showFull = forResponseHeaders ? this.#showResponseHeadersTextFull : this.#showRequestHeadersTextFull;
+    const isShortened = !showFull && trimmed.length > RAW_HEADER_CUTOFF;
+
+    const showMore = ():void => {
+      if (forResponseHeaders) {
+        this.#showResponseHeadersTextFull = true;
+      } else {
+        this.#showRequestHeadersTextFull = true;
+      }
+      this.#render();
+    };
+
+    const onContextMenuOpen = (event: Event): void => {
+      const showFull = forResponseHeaders ? this.#showResponseHeadersTextFull : this.#showRequestHeadersTextFull;
+      if (!showFull) {
+        const contextMenu = new UI.ContextMenu.ContextMenu(event);
+        const section = contextMenu.newSection();
+        section.appendItem(i18nString(UIStrings.showMore), showMore);
+        void contextMenu.show();
+      }
+    };
+
+    const addContextMenuListener = (el: Element):void => {
+      if (isShortened) {
+        el.addEventListener('contextmenu', onContextMenuOpen);
+      }
+    };
+
+    return html`
+      <div class="row raw-headers-row" on-render=${ComponentHelpers.Directives.nodeRenderedCallback(addContextMenuListener)}>
+        <div class="raw-headers">${isShortened ? trimmed.substring(0, RAW_HEADER_CUTOFF) : trimmed}</div>
+        ${isShortened ? html`
+          <${Buttons.Button.Button.litTagName}
+            .size=${Buttons.Button.Size.SMALL}
+            .variant=${Buttons.Button.Variant.SECONDARY}
+            @click=${showMore}
+          >${i18nString(UIStrings.showMore)}</${Buttons.Button.Button.litTagName}>
+        ` : LitHtml.nothing}
+      </div>
+    `;
+  }
+
   #renderGeneralSection(): LitHtml.TemplateResult {
     assertNotNullOrUndefined(this.#request);
 

package/package.json

@@ -55,5 +55,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "vpython third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.1007307"
+  "version": "1.0.1007778"
 }