chrome-devtools-frontend 1.0.1003496 → 1.0.1004641

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/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/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) + ':' +

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

@@ -0,0 +1,78 @@
+/*
+ * 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.
+ */
+
+.header {
+  background-color: var(--color-background-elevation-1);
+  border-bottom: var(--legacy-divider-border);
+  border-top: var(--legacy-divider-border);
+  line-height: 25px;
+  padding: 0 5px;
+}
+
+.header::marker {
+  color: rgb(110 110 110); /* stylelint-disable-line plugin/use_theme_colors */
+  /* See: crbug.com/1152736 for color variable migration. */
+  font-size: 11px;
+  line-height: 1;
+}
+
+.header:focus {
+  background-color: var(--legacy-focus-bg-color);
+}
+
+.row {
+  display: flex;
+  line-height: 20px;
+  padding-left: 25px;
+}
+
+.row:first-of-type {
+  margin-top: 2px;
+}
+
+.row:last-child {
+  margin-bottom: 10px;
+}
+
+.header-name {
+  color: var(--color-primary);
+  font-weight: bold;
+  width: 160px;
+  flex-shrink: 0;
+}
+
+.header-value {
+  word-break: break-all;
+  user-select: text;
+}
+
+.green-circle::before,
+.red-circle::before,
+.yellow-circle::before {
+  content: "";
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border-radius: 6px;
+  vertical-align: text-top;
+  margin-right: 2px;
+}
+
+.green-circle::before {
+  background-color: var(--color-accent-green);
+}
+
+.red-circle::before {
+  background-color: var(--color-accent-red);
+}
+
+.yellow-circle::before {
+  background-color: var(--issue-color-yellow);
+}
+
+.status-with-comment {
+  color: var(--color-text-secondary);
+}