chrome-devtools-frontend 1.0.1007307 → 1.0.1008562

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/models/issues_manager/DeprecationIssue.ts

@@ -243,16 +243,6 @@ const UIStrings = {
    * `RTCP MUX` policy.
    */
   rtcpMuxPolicyNegotiate: 'The `rtcpMuxPolicy` option is deprecated and will be removed.',
-  /**
-   * @description A deprecation warning shown in the DevTools Issues tab.
-   * It's shown when a video conferencing website attempts to turn on or
-   * off a feature that has been removed, `RTP data channels`.
-   * `RTP data channels` are used to send and receive arbitrary data,
-   * but have been removed in favor of standardized versions of
-   * `data channels`: `SCTP data channels`.
-   */
-  rtpDataChannel:
-      '`RTP data channels` are no longer supported. The `RtpDataChannels` constraint is currently ignored, and may cause an error at a later date.',
   /**
    * @description TODO(crbug.com/1318878): Description needed for translation
    */
@@ -500,10 +490,6 @@ export class DeprecationIssue extends Issue {
         feature = 5654810086866944;
         milestone = 62;
         break;
-      case Protocol.Audits.DeprecationIssueType.RTPDataChannel:
-        messageFunction = i18nLazyString(UIStrings.rtpDataChannel);
-        milestone = 88;
-        break;
       case Protocol.Audits.DeprecationIssueType.SharedArrayBufferConstructedWithoutIsolation:
         messageFunction = i18nLazyString(UIStrings.sharedArrayBufferConstructedWithoutIsolation);
         milestone = 106;

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', 'simulate', 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/front_end/ui/components/tree_outline/TreeOutline.ts

@@ -31,6 +31,7 @@ export interface TreeOutlineData<TreeNodeDataType> {
    */
   tree: readonly TreeNode<TreeNodeDataType>[];
   filter?: (node: TreeNodeDataType) => FilterOption;
+  compact?: boolean;
 }
 
 export function defaultRenderer(node: TreeNode<string>): LitHtml.TemplateResult {
@@ -111,6 +112,7 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
     return LitHtml.html`${String(node.treeNodeData)}`;
   };
   #nodeFilter?: ((node: TreeNodeDataType) => FilterOption);
+  #compact = false;
 
   /**
    * scheduledRender = render() has been called and scheduled a render.
@@ -155,6 +157,7 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
     this.#defaultRenderer = data.defaultRenderer;
     this.#treeData = data.tree;
     this.#nodeFilter = data.filter;
+    this.#compact = data.compact || false;
 
     if (!this.#hasRenderedAtLeastOnce) {
       this.#selectedTreeNode = this.#treeData[0];
@@ -454,6 +457,7 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
       parent: isExpandableNode(node),
       selected: this.#isSelectedNode(node),
       'is-top-level': depth === 0,
+      compact: this.#compact,
     });
     const ariaExpandedAttribute =
         LitHtml.Directives.ifDefined(isExpandableNode(node) ? String(nodeIsExpanded) : undefined);