chrome-devtools-frontend 1.0.1003647 → 1.0.1004895

package/front_end/generated/protocol.ts

@@ -3212,6 +3212,7 @@ export namespace DOM {
      */
     isSVG?: boolean;
     compatibilityMode?: CompatibilityMode;
+    assignedSlot?: BackendNode;
   }
 
   /**
@@ -10177,6 +10178,7 @@ export namespace Page {
     AmbientLightSensor = 'ambient-light-sensor',
     AttributionReporting = 'attribution-reporting',
     Autoplay = 'autoplay',
+    Bluetooth = 'bluetooth',
     BrowsingTopics = 'browsing-topics',
     Camera = 'camera',
     ChDpr = 'ch-dpr',
@@ -11296,7 +11298,8 @@ export namespace Page {
      */
     frameId: FrameId;
     /**
-     * Loader identifier.
+     * Loader identifier. This is omitted in case of same-document navigation,
+     * as the previously committed loaderId would not change.
      */
     loaderId?: Network.LoaderId;
     /**
@@ -14480,6 +14483,17 @@ export namespace WebAuthn {
     largeBlob?: binary;
   }
 
+  export interface EnableRequest {
+    /**
+     * Whether to enable the WebAuthn user interface. Enabling the UI is
+     * recommended for debugging and demo purposes, as it is closer to the real
+     * experience. Disabling the UI is recommended for automated testing.
+     * Supported at the embedder's discretion if UI is available.
+     * Defaults to false.
+     */
+    enableUI?: boolean;
+  }
+
   export interface AddVirtualAuthenticatorRequest {
     options: VirtualAuthenticatorOptions;
   }
@@ -15023,11 +15037,20 @@ export namespace Debugger {
     breakpointId: BreakpointId;
   }
 
+  export const enum RestartFrameRequestMode {
+    StepInto = 'StepInto',
+  }
+
   export interface RestartFrameRequest {
     /**
      * Call frame identifier to evaluate on.
      */
     callFrameId: CallFrameId;
+    /**
+     * The `mode` parameter must be present and set to 'StepInto', otherwise
+     * `restartFrame` will error out.
+     */
+    mode?: RestartFrameRequestMode;
   }
 
   export interface RestartFrameResponse extends ProtocolResponseWithError {

package/front_end/models/extensions/ExtensionPanel.ts

@@ -157,7 +157,7 @@ export class ExtensionSidebarPane extends UI.View.SimpleView {
         expression, true, false, evaluateOptions, securityOrigin, this.onEvaluate.bind(this, title, callback));
   }
 
-  setPage(url: string): void {
+  setPage(url: Platform.DevToolsPath.UrlString): void {
     if (this.objectPropertiesView) {
       this.objectPropertiesView.detach();
       delete this.objectPropertiesView;

package/front_end/models/extensions/ExtensionServer.ts

@@ -31,8 +31,6 @@
 // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
 /* eslint-disable @typescript-eslint/naming-convention */
 
-// TODO(crbug.com/1253323): Casts to UrlString will be removed from this file when migration to branded types is complete.
-
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
@@ -56,7 +54,7 @@ import {ExtensionTraceProvider} from './ExtensionTraceProvider.js';
 import {LanguageExtensionEndpoint} from './LanguageExtensionEndpoint.js';
 import {PrivateAPI} from './ExtensionAPI.js';
 
-const extensionOrigins: WeakMap<MessagePort, string> = new WeakMap();
+const extensionOrigins: WeakMap<MessagePort, Platform.DevToolsPath.UrlString> = new WeakMap();
 
 declare global {
   interface Window {
@@ -344,7 +342,7 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     return undefined;
   }
 
-  private getExtensionOrigin(port: MessagePort): string {
+  private getExtensionOrigin(port: MessagePort): Platform.DevToolsPath.UrlString {
     const origin = extensionOrigins.get(port);
     if (!origin) {
       throw new Error('Received a message from an unregistered extension');
@@ -503,8 +501,7 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     if (message.command !== PrivateAPI.Commands.OpenResource) {
       return this.status.E_BADARG('command', `expected ${PrivateAPI.Commands.OpenResource}`);
     }
-    const uiSourceCode =
-        Workspace.Workspace.WorkspaceImpl.instance().uiSourceCodeForURL(message.url as Platform.DevToolsPath.UrlString);
+    const uiSourceCode = Workspace.Workspace.WorkspaceImpl.instance().uiSourceCodeForURL(message.url);
     if (uiSourceCode) {
       void Common.Revealer.reveal(uiSourceCode.uiLocation(message.lineNumber, message.columnNumber));
       return this.status.OK();
@@ -840,7 +837,7 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     this.postNotification(PrivateAPI.Events.PanelObjectSelected + 'elements');
   }
 
-  sourceSelectionChanged(url: string, range: TextUtils.TextRange.TextRange): void {
+  sourceSelectionChanged(url: Platform.DevToolsPath.UrlString, range: TextUtils.TextRange.TextRange): void {
     this.postNotification(PrivateAPI.Events.PanelObjectSelected + 'sources', {
       startLine: range.startLine,
       startColumn: range.startColumn,
@@ -896,7 +893,7 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     return true;
   }
 
-  private registerExtension(origin: string, port: MessagePort): void {
+  private registerExtension(origin: Platform.DevToolsPath.UrlString, port: MessagePort): void {
     if (!this.registeredExtensions.has(origin)) {
       if (origin !== window.location.origin) {  // Just ignore inspector frames.
         console.error('Ignoring unauthorized client request from ' + origin);
@@ -910,7 +907,7 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
 
   private onWindowMessage(event: MessageEvent): void {
     if (event.data === 'registerExtension') {
-      this.registerExtension(event.origin, event.ports[0]);
+      this.registerExtension(event.origin as Platform.DevToolsPath.UrlString, event.ports[0]);
     }
   }
 
@@ -984,8 +981,9 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
         removeLastEventListener.bind(this));
   }
 
-  private expandResourcePath(extensionPath: string, resourcePath: string): string {
-    return extensionPath + '/' + Common.ParsedURL.normalizePath(resourcePath);
+  private expandResourcePath(extensionPath: Platform.DevToolsPath.UrlString, resourcePath: string):
+      Platform.DevToolsPath.UrlString {
+    return extensionPath + '/' + Common.ParsedURL.normalizePath(resourcePath) as Platform.DevToolsPath.UrlString;
   }
 
   evaluate(
@@ -995,7 +993,7 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
       |undefined {
     let context;
 
-    function resolveURLToFrame(url: string): SDK.ResourceTreeModel.ResourceTreeFrame|null {
+    function resolveURLToFrame(url: Platform.DevToolsPath.UrlString): SDK.ResourceTreeModel.ResourceTreeFrame|null {
       let found = null;
       function hasMatchingURL(frame: SDK.ResourceTreeModel.ResourceTreeFrame): SDK.ResourceTreeModel.ResourceTreeFrame|
           null {
@@ -1009,7 +1007,7 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     options = options || {};
     let frame;
     if (options.frameURL) {
-      frame = resolveURLToFrame(options.frameURL);
+      frame = resolveURLToFrame(options.frameURL as Platform.DevToolsPath.UrlString);
     } else {
       const target = SDK.TargetManager.TargetManager.instance().mainTarget();
       const resourceTreeModel = target && target.model(SDK.ResourceTreeModel.ResourceTreeModel);
@@ -1088,7 +1086,7 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     return undefined;
   }
 
-  private canInspectURL(url: string): boolean {
+  private canInspectURL(url: Platform.DevToolsPath.UrlString): boolean {
     let parsedURL;
     // This is only to work around invalid URLs we're occasionally getting from some tests.
     // TODO(caseq): make sure tests supply valid URLs or we specifically handle invalid ones.

package/front_end/models/har/Log.ts

@@ -35,6 +35,7 @@
 // See https://bugs.webkit.org/show_bug.cgi?id=58127 for details.
 
 import * as Common from '../../core/common/common.js';
+import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 
@@ -346,8 +347,8 @@ export class Entry {
     return parameters.slice();
   }
 
-  private buildRequestURL(url: string): string {
-    return url.split('#', 2)[0];
+  private buildRequestURL(url: Platform.DevToolsPath.UrlString): Platform.DevToolsPath.UrlString {
+    return Common.ParsedURL.ParsedURL.split(url, '#', 2)[0];
   }
 
   private buildCookies(cookies: SDK.Cookie.Cookie[]): CookieDTO[] {
@@ -438,7 +439,7 @@ export interface Content {
 
 export interface Request {
   method: string;
-  url: string;
+  url: Platform.DevToolsPath.UrlString;
   httpVersion: string;
   headers: Object;
   queryString: Parameter[];

package/front_end/models/issues_manager/DeprecationIssue.ts

@@ -34,7 +34,9 @@ const UIStrings = {
   authorizationCoveredByWildcard:
       'Authorization will not be covered by the wildcard symbol (*) in CORS `Access-Control-Allow-Headers` handling.',
   /**
-   * @description TODO(crbug.com/1320334): Description needed for translation
+   * @description This warning occurs when a page attempts to request a resource
+   *    whose URL contained both a newline character (`\n` or `\r`), and a
+   *    less-than character (`<`). These resources are blocked.
    */
   canRequestURLHTTPContainingNewline:
       'Resource requests whose URLs contained both removed whitespace `\\(n|r|t)` characters and less-than characters (`<`) are blocked. Please remove newlines and encode less-than characters from places like element attribute values in order to load these resources.',
@@ -137,11 +139,6 @@ const UIStrings = {
    */
   localCSSFileExtensionRejected:
       'CSS cannot be loaded from `file:` URLs unless they end in a `.css` file extension.',
-  /**
-   * @description TODO(crbug.com/1320344): Description needed for translation
-   */
-  mediaElementAudioSourceNode:
-      'Creating a `MediaElementAudioSourceNode` on an `OfflineAudioContext` is deprecated and will be removed.',
   /**
    * @description TODO(crbug.com/1320345): Description needed for translation
    */
@@ -415,11 +412,6 @@ export class DeprecationIssue extends Issue {
         messageFunction = i18nLazyString(UIStrings.localCSSFileExtensionRejected);
         milestone = 64;
         break;
-      case Protocol.Audits.DeprecationIssueType.MediaElementAudioSourceNode:
-        messageFunction = i18nLazyString(UIStrings.mediaElementAudioSourceNode);
-        feature = 5258622686724096;
-        milestone = 71;
-        break;
       case Protocol.Audits.DeprecationIssueType.MediaSourceAbortRemove:
         messageFunction = i18nLazyString(UIStrings.mediaSourceAbortRemove);
         feature = 6107495151960064;

package/front_end/panels/application/components/FrameDetailsView.ts

@@ -240,6 +240,14 @@ const UIStrings = {
   *@description Label for a button which when clicked causes some information to be refreshed/updated.
   */
   refresh: 'Refresh',
+  /**
+  *@description Label for section of frame details view
+  */
+  prerendering: 'Prerendering',
+  /**
+  *@description Label for subtitle of frame details view
+  */
+  prerenderingStatus: 'Prerendering Status',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/application/components/FrameDetailsView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -253,6 +261,8 @@ export class FrameDetailsView extends UI.ThrottledWidget.ThrottledWidget {
     this.contentElement.classList.add('overflow-auto');
     this.contentElement.appendChild(this.#reportView);
     this.update();
+    frame.resourceTreeModel().addEventListener(
+        SDK.ResourceTreeModel.Events.PrerenderingStatusUpdated, this.update, this);
   }
 
   async doUpdate(): Promise<void> {
@@ -311,6 +321,7 @@ export class FrameDetailsReportView extends HTMLElement {
               </${PermissionsPolicySection.litTagName}>
             `;
           }), LitHtml.nothing)}
+          ${this.#renderPrerenderingSection()}
           ${this.#protocolMonitorExperimentEnabled ? this.#renderAdditionalInfoSection() : LitHtml.nothing}
         </${ReportView.ReportView.Report.litTagName}>
       `, this.#shadow, {host: this});
@@ -750,6 +761,23 @@ export class FrameDetailsReportView extends HTMLElement {
     return LitHtml.nothing;
   }
 
+  #renderPrerenderingSection(): LitHtml.LitTemplate {
+    if (!this.#frame || !this.#frame.prerenderFinalStatus) {
+      return LitHtml.nothing;
+    }
+
+    return LitHtml.html`
+      <${ReportView.ReportView.ReportSectionHeader.litTagName}>
+      ${i18nString(UIStrings.prerendering)}</${ReportView.ReportView.ReportSectionHeader.litTagName}>
+      <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.prerenderingStatus)}</${
+        ReportView.ReportView.ReportKey.litTagName}>
+      <${ReportView.ReportView.ReportValue.litTagName}>
+        <div class="text-ellipsis" title=${this.#frame.prerenderFinalStatus}>${this.#frame.prerenderFinalStatus}</div>
+      </${ReportView.ReportView.ReportValue.litTagName}>
+      <${ReportView.ReportView.ReportSectionDivider.litTagName}></${
+        ReportView.ReportView.ReportSectionDivider.litTagName}>`;
+  }
+
   #renderAdditionalInfoSection(): LitHtml.LitTemplate {
     if (!this.#frame) {
       return LitHtml.nothing;

package/front_end/panels/console/ErrorStackParser.ts

@@ -7,8 +7,6 @@ import type * as Platform from '../../core/platform/platform.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 
-// TODO(crbug.com/1253323): Casts to UrlString will be removed from this file when migration to branded types is complete.
-
 export interface ParsedErrorFrame {
   line: string;
   link?: {
@@ -109,9 +107,8 @@ function parseOrScriptMatch(debuggerModel: SDK.DebuggerModel.DebuggerModel, url:
   if (!url) {
     return null;
   }
-  const parsedURL = Common.ParsedURL.ParsedURL.fromString(url);
-  if (parsedURL) {
-    return parsedURL.url as Platform.DevToolsPath.UrlString;
+  if (Common.ParsedURL.ParsedURL.isValidUrlString(url)) {
+    return url;
   }
   if (debuggerModel.scriptsForSourceURL(url).length) {
     return url;

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -41,6 +41,7 @@ import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
 import * as Adorners from '../../ui/components/adorners/adorners.js';
 import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
+import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as TextEditor from '../../ui/components/text_editor/text_editor.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -237,6 +238,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   private searchHighlightsVisible?: boolean;
   selectionElement?: HTMLDivElement;
   private hintElement?: HTMLElement;
+  #slot?: Adorners.Adorner.Adorner;
   private contentElement: HTMLElement;
 
   constructor(node: SDK.DOMModel.DOMNode, isClosingTag?: boolean) {
@@ -422,6 +424,21 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     this.expandedChildrenLimitInternal = expandedChildrenLimit;
   }
 
+  createSlotLink(nodeShortcut: SDK.DOMModel.DOMNodeShortcut|null): void {
+    if (nodeShortcut) {
+      const config = ElementsComponents.AdornerManager.getRegisteredAdorner(
+          ElementsComponents.AdornerManager.RegisteredAdorners.SLOT);
+      this.#slot = this.adornSlot(config);
+      const deferredNode = nodeShortcut.deferredNode;
+      this.#slot.addEventListener('click', () => {
+        deferredNode.resolve(node => {
+          void Common.Revealer.reveal(node);
+        });
+      });
+      this.#slot.addEventListener('mousedown', e => e.consume(), false);
+    }
+  }
+
   private createSelection(): void {
     const contentElement = this.contentElement;
     if (!contentElement) {
@@ -1314,6 +1331,9 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       if (!this.isClosingTagInternal && this.adornerContainer) {
         this.contentElement.append(this.adornerContainer);
       }
+      if (this.#slot) {
+        this.contentElement.append(this.#slot);
+      }
       this.highlightResult = [];
       delete this.selectionElement;
       delete this.hintElement;
@@ -1936,6 +1956,27 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     return adorner;
   }
 
+  adornSlot({name}: {name: string}): Adorners.Adorner.Adorner {
+    const linkIcon = new IconButton.Icon.Icon();
+    linkIcon
+        .data = {iconName: 'ic_show_node_16x16', color: 'var(--color-text-disabled)', width: '12px', height: '12px'};
+    const slotText = document.createElement('span');
+    slotText.textContent = name;
+    const adornerContent = document.createElement('span');
+    adornerContent.append(linkIcon);
+    adornerContent.append(slotText);
+    adornerContent.classList.add('adorner-with-icon');
+    const adorner = new Adorners.Adorner.Adorner();
+    adorner.data = {
+      name,
+      content: adornerContent,
+    };
+    this.adorners.push(adorner);
+    ElementsPanel.instance().registerAdorner(adorner);
+    this.updateAdorners();
+    return adorner;
+  }
+
   removeAdorner(adornerToRemove: Adorners.Adorner.Adorner): void {
     const adorners = this.adorners;
     ElementsPanel.instance().deregisterAdorner(adornerToRemove);

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -1180,6 +1180,11 @@ export class ElementsTreeOutline extends
         !node.parentNode.parentNode) {
       treeElement.setCollapsible(false);
     }
+
+    if (node.hasAssignedSlot()) {
+      treeElement.createSlotLink(node.assignedSlot);
+    }
+
     treeElement.selectable = Boolean(this.selectEnabled);
     return treeElement;
   }

package/front_end/panels/elements/components/AdornerManager.ts

@@ -29,6 +29,7 @@ export enum RegisteredAdorners {
   AD = 'ad',
   SCROLL_SNAP = 'scroll-snap',
   CONTAINER = 'container',
+  SLOT = 'slot',
 }
 
 // This enum-like const object serves as the authoritative registry for all the
@@ -65,6 +66,12 @@ export function getRegisteredAdorner(which: RegisteredAdorners): RegisteredAdorn
         category: AdornerCategories.LAYOUT,
         enabledByDefault: true,
       };
+    case RegisteredAdorners.SLOT:
+      return {
+        name: 'slot',
+        category: AdornerCategories.LAYOUT,
+        enabledByDefault: true,
+      };
   }
 }
 

package/front_end/panels/elements/elementsTreeOutline.css

@@ -27,6 +27,15 @@
   display: none;
 }
 
+.adorner-with-icon {
+  display: flex;
+  justify-content: center;
+}
+
+.adorner-with-icon *:not(:last-child) {
+  margin-right: 2px;
+}
+
 .elements-disclosure {
   width: 100%;
   display: inline-block;

package/front_end/panels/issues/AffectedDirectivesView.ts

@@ -5,7 +5,7 @@
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
-import type * as Platform from '../../core/platform/platform.js';
+import * as Platform from '../../core/platform/platform.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
@@ -79,7 +79,7 @@ export class AffectedDirectivesView extends AffectedResourcesView {
     element.appendChild(violatedDirective);
   }
 
-  #appendBlockedURL(element: Element, url: string): void {
+  #appendBlockedURL(element: Element, url: Platform.DevToolsPath.UrlString): void {
     const info = document.createElement('td');
     info.classList.add('affected-resource-directive-info');
     info.textContent = url;
@@ -178,7 +178,8 @@ export class AffectedDirectivesView extends AffectedResourcesView {
       this.appendSourceLocation(element, location, maybeTarget);
       this.#appendStatus(element, cspIssueDetails.isReportOnly);
     } else if (this.issue.code() === IssuesManager.ContentSecurityPolicyIssue.urlViolationCode) {
-      const url = cspIssueDetails.blockedURL ? cspIssueDetails.blockedURL : '';
+      const url = cspIssueDetails.blockedURL ? cspIssueDetails.blockedURL as Platform.DevToolsPath.UrlString :
+                                               Platform.DevToolsPath.EmptyUrlString;
       this.#appendBlockedURL(element, url);
       this.#appendStatus(element, cspIssueDetails.isReportOnly);
       this.#appendViolatedDirective(element, cspIssueDetails.violatedDirective);

package/front_end/panels/lighthouse/LighthouseController.ts

@@ -4,7 +4,7 @@
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
-import type * as Platform from '../../core/platform/platform.js';
+import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 
@@ -186,7 +186,7 @@ export class LighthouseController extends Common.ObjectWrapper.ObjectWrapper<Eve
     SDK.TargetManager.SDKModelObserver<SDK.ServiceWorkerManager.ServiceWorkerManager> {
   private manager?: SDK.ServiceWorkerManager.ServiceWorkerManager|null;
   private serviceWorkerListeners?: Common.EventTarget.EventDescriptor[];
-  private inspectedURL?: string;
+  private inspectedURL?: Platform.DevToolsPath.UrlString;
 
   constructor(protocolService: ProtocolService) {
     super();
@@ -314,9 +314,9 @@ export class LighthouseController extends Common.ObjectWrapper.ObjectWrapper<Eve
     return '';
   }
 
-  private async evaluateInspectedURL(): Promise<string> {
+  private async evaluateInspectedURL(): Promise<Platform.DevToolsPath.UrlString> {
     if (!this.manager) {
-      return '';
+      return Platform.DevToolsPath.EmptyUrlString;
     }
     const mainTarget = this.manager.target();
     // target.inspectedURL is reliably populated, however it lacks any url #hash
@@ -331,7 +331,7 @@ export class LighthouseController extends Common.ObjectWrapper.ObjectWrapper<Eve
 
     const {currentIndex, entries} = navHistory;
     const navigationEntry = entries[currentIndex];
-    return navigationEntry.url;
+    return navigationEntry.url as Platform.DevToolsPath.UrlString;
   }
 
   getFlags(): {
@@ -365,7 +365,7 @@ export class LighthouseController extends Common.ObjectWrapper.ObjectWrapper<Eve
     return categoryIDs;
   }
 
-  async getInspectedURL(options?: {force: boolean}): Promise<string> {
+  async getInspectedURL(options?: {force: boolean}): Promise<Platform.DevToolsPath.UrlString> {
     if (options && options.force || !this.inspectedURL) {
       this.inspectedURL = await this.evaluateInspectedURL();
     }

package/front_end/panels/lighthouse/LighthousePanel.ts

@@ -5,7 +5,6 @@
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
-import type * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as EmulationModel from '../../models/emulation/emulation.js';
@@ -503,8 +502,7 @@ export class LighthousePanel extends UI.Panel.Panel {
     }
     // reload to reset the page state
     const inspectedURL = await this.controller.getInspectedURL();
-    // TODO(crbug.com/1253323): Cast to UrlString will be removed when migration to branded types is complete.
-    await resourceTreeModel.navigate(inspectedURL as Platform.DevToolsPath.UrlString);
+    await resourceTreeModel.navigate(inspectedURL);
   }
 
   wasShown(): void {

package/front_end/panels/lighthouse/LighthouseProtocolService.ts

@@ -4,6 +4,7 @@
 
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as ProtocolClient from '../../core/protocol_client/protocol_client.js';
+import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 
 import type * as ReportRenderer from './LighthouseReporterTypes.js';
@@ -45,7 +46,7 @@ LighthouseWorkerService   ││          Either ConnectionProxy or LegacyPort
 let lastId = 1;
 
 export interface LighthouseRun {
-  inspectedURL: string;
+  inspectedURL: Platform.DevToolsPath.UrlString;
   categoryIDs: string[];
   flags: Record<string, Object|undefined>;
 }

package/front_end/panels/network/NetworkItemView.ts

@@ -30,12 +30,14 @@
 
 import * as Common from '../../core/common/common.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 NetworkForward from '../../panels/network/forward/forward.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import * as NetworkComponents from './components/components.js';
 
+import * as NetworkComponents from './components/components.js';
 import {EventSourceMessagesView} from './EventSourceMessagesView.js';
+
 import type {NetworkTimeCalculator} from './NetworkTimeCalculator.js';
 import {RequestCookiesView} from './RequestCookiesView.js';
 import {RequestHeadersView} from './RequestHeadersView.js';
@@ -130,6 +132,7 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
   private requestInternal: SDK.NetworkRequest.NetworkRequest;
   private readonly resourceViewTabSetting: Common.Settings.Setting<NetworkForward.UIRequestLocation.UIRequestTabs>;
   private readonly headersView: RequestHeadersView;
+  private readonly headersViewComponent: NetworkComponents.RequestHeadersView.RequestHeadersView;
   private payloadView: RequestPayloadView|null;
   private readonly responseView: RequestResponseView|undefined;
   private cookiesView: RequestCookiesView|null;
@@ -149,6 +152,12 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
     this.appendTab(
         NetworkForward.UIRequestLocation.UIRequestTabs.Headers, i18nString(UIStrings.headers), this.headersView,
         i18nString(UIStrings.headers));
+    this.headersViewComponent = new NetworkComponents.RequestHeadersView.RequestHeadersView(request);
+    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.HEADER_OVERRIDES)) {
+      this.appendTab(
+          NetworkForward.UIRequestLocation.UIRequestTabs.HeadersComponent, i18nString(UIStrings.headers),
+          this.headersViewComponent, i18nString(UIStrings.headers));
+    }
 
     this.payloadView = null;
     void this.maybeAppendPayloadPanel();

package/front_end/panels/network/NetworkLogView.ts

@@ -36,6 +36,7 @@ import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
+import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as Bindings from '../../models/bindings/bindings.js';
@@ -1583,10 +1584,12 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
 
     contextMenu.saveSection().appendItem(i18nString(UIStrings.saveAllAsHarWithContent), this.exportAll.bind(this));
 
-    contextMenu.editSection().appendItem(
-        i18nString(UIStrings.createResponseHeaderOverride),
-        this.#handleCreateResponseHeaderOverrideClick.bind(this, request));
-    contextMenu.editSection().appendSeparator();
+    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.HEADER_OVERRIDES)) {
+      contextMenu.editSection().appendItem(
+          i18nString(UIStrings.createResponseHeaderOverride),
+          this.#handleCreateResponseHeaderOverrideClick.bind(this, request));
+      contextMenu.editSection().appendSeparator();
+    }
     contextMenu.editSection().appendItem(i18nString(UIStrings.clearBrowserCache), this.clearBrowserCache.bind(this));
     contextMenu.editSection().appendItem(
         i18nString(UIStrings.clearBrowserCookies), this.clearBrowserCookies.bind(this));

package/front_end/panels/network/RequestHeadersView.ts

@@ -451,7 +451,7 @@ export class RequestHeadersView extends UI.Widget.VBox {
     if (headersText) {
       const toggleButton = this.createHeadersToggleButton(this.showRequestHeadersText);
       toggleButton.addEventListener('click', this.toggleRequestHeadersText.bind(this), false);
-      treeElement.listItemElement.appendChild(toggleButton);
+      treeElement.listItemElement.querySelector('.headers-title-left')?.appendChild(toggleButton);
     }
   }
 

package/front_end/panels/network/ResourceWebSocketFrameView.ts

@@ -388,13 +388,13 @@ export const _filterTypes: UI.FilterBar.Item[] = [
 ];
 
 export class ResourceWebSocketFrameNode extends DataGrid.SortableDataGrid.SortableDataGridNode<unknown> {
-  private readonly url: string;
+  private readonly url: Platform.DevToolsPath.UrlString;
   readonly frame: SDK.NetworkRequest.WebSocketFrame;
   private readonly isTextFrame: boolean;
   private dataTextInternal: string;
   private binaryViewInternal: BinaryResourceView|null;
 
-  constructor(url: string, frame: SDK.NetworkRequest.WebSocketFrame) {
+  constructor(url: Platform.DevToolsPath.UrlString, frame: SDK.NetworkRequest.WebSocketFrame) {
     let length = String(frame.text.length);
     const time = new Date(frame.time * 1000);
     const timeText = ('0' + time.getHours()).substr(-2) + ':' + ('0' + time.getMinutes()).substr(-2) + ':' +