chrome-devtools-frontend 1.0.1004171 → 1.0.1004641

package/config/gni/devtools_grd_files.gni

@@ -1112,6 +1112,8 @@ grd_files_debug_sources = [
   "front_end/panels/network/SignedExchangeInfoView.js",
   "front_end/panels/network/binaryResourceView.css.js",
   "front_end/panels/network/blockedURLsPane.css.js",
+  "front_end/panels/network/components/RequestHeadersView.css.js",
+  "front_end/panels/network/components/RequestHeadersView.js",
   "front_end/panels/network/components/RequestTrustTokensView.css.js",
   "front_end/panels/network/components/RequestTrustTokensView.js",
   "front_end/panels/network/components/WebBundleInfoView.css.js",

package/front_end/core/common/ParsedURL.ts

@@ -264,9 +264,9 @@ export class ParsedURL {
     return devToolsPaths.join(separator) as DevToolsPathType;
   }
 
-  static split<DevToolsPathType extends BrandedPathString>(devToolsPath: DevToolsPathType, separator: string|RegExp):
-      DevToolsPathType[] {
-    return devToolsPath.split(separator) as DevToolsPathType[];
+  static split<DevToolsPathType extends BrandedPathString>(
+      devToolsPath: DevToolsPathType, separator: string|RegExp, limit?: number): DevToolsPathType[] {
+    return devToolsPath.split(separator, limit) as DevToolsPathType[];
   }
 
   static toLowerCase<DevToolsPathType extends BrandedPathString>(devToolsPath: DevToolsPathType): DevToolsPathType {

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

@@ -6599,6 +6599,42 @@
   "panels/network/BlockedURLsPane.ts | textPatternToBlockMatching": {
     "message": "Text pattern to block matching requests; use * for wildcard"
   },
+  "panels/network/components/RequestHeadersView.ts | fromDiskCache": {
+    "message": "(from disk cache)"
+  },
+  "panels/network/components/RequestHeadersView.ts | fromMemoryCache": {
+    "message": "(from memory cache)"
+  },
+  "panels/network/components/RequestHeadersView.ts | fromPrefetchCache": {
+    "message": "(from prefetch cache)"
+  },
+  "panels/network/components/RequestHeadersView.ts | fromServiceWorker": {
+    "message": "(from service worker)"
+  },
+  "panels/network/components/RequestHeadersView.ts | fromSignedexchange": {
+    "message": "(from signed-exchange)"
+  },
+  "panels/network/components/RequestHeadersView.ts | fromWebBundle": {
+    "message": "(from Web Bundle)"
+  },
+  "panels/network/components/RequestHeadersView.ts | general": {
+    "message": "General"
+  },
+  "panels/network/components/RequestHeadersView.ts | referrerPolicy": {
+    "message": "Referrer Policy"
+  },
+  "panels/network/components/RequestHeadersView.ts | remoteAddress": {
+    "message": "Remote Address"
+  },
+  "panels/network/components/RequestHeadersView.ts | requestMethod": {
+    "message": "Request Method"
+  },
+  "panels/network/components/RequestHeadersView.ts | requestUrl": {
+    "message": "Request URL"
+  },
+  "panels/network/components/RequestHeadersView.ts | statusCode": {
+    "message": "Status Code"
+  },
   "panels/network/components/RequestTrustTokensView.ts | aClientprovidedArgumentWas": {
     "message": "A client-provided argument was malformed or otherwise invalid."
   },
@@ -9461,6 +9497,9 @@
   "panels/sources/CallStackSidebarPane.ts | removeFromIgnoreList": {
     "message": "Remove from ignore list"
   },
+  "panels/sources/CallStackSidebarPane.ts | restartFrame": {
+    "message": "Restart frame"
+  },
   "panels/sources/CallStackSidebarPane.ts | showIgnorelistedFrames": {
     "message": "Show ignore-listed frames"
   },

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

@@ -6599,6 +6599,42 @@
   "panels/network/BlockedURLsPane.ts | textPatternToBlockMatching": {
     "message": "T̂éx̂t́ p̂át̂t́êŕn̂ t́ô b́l̂óĉḱ m̂át̂ćĥín̂ǵ r̂éq̂úêśt̂ś; ûśê * f́ôŕ ŵíl̂d́ĉár̂d́"
   },
+  "panels/network/components/RequestHeadersView.ts | fromDiskCache": {
+    "message": "(f̂ŕôḿ d̂íŝḱ ĉáĉh́ê)"
+  },
+  "panels/network/components/RequestHeadersView.ts | fromMemoryCache": {
+    "message": "(f̂ŕôḿ m̂ém̂ór̂ý ĉáĉh́ê)"
+  },
+  "panels/network/components/RequestHeadersView.ts | fromPrefetchCache": {
+    "message": "(f̂ŕôḿ p̂ŕêf́êt́ĉh́ ĉáĉh́ê)"
+  },
+  "panels/network/components/RequestHeadersView.ts | fromServiceWorker": {
+    "message": "(f̂ŕôḿ service worker)"
+  },
+  "panels/network/components/RequestHeadersView.ts | fromSignedexchange": {
+    "message": "(f̂ŕôḿ ŝíĝńêd́-êx́ĉh́âńĝé)"
+  },
+  "panels/network/components/RequestHeadersView.ts | fromWebBundle": {
+    "message": "(f̂ŕôḿ Ŵéb̂ B́ûńd̂ĺê)"
+  },
+  "panels/network/components/RequestHeadersView.ts | general": {
+    "message": "Ĝén̂ér̂ál̂"
+  },
+  "panels/network/components/RequestHeadersView.ts | referrerPolicy": {
+    "message": "R̂éf̂ér̂ŕêŕ P̂ól̂íĉý"
+  },
+  "panels/network/components/RequestHeadersView.ts | remoteAddress": {
+    "message": "R̂ém̂ót̂é Âd́d̂ŕêśŝ"
+  },
+  "panels/network/components/RequestHeadersView.ts | requestMethod": {
+    "message": "R̂éq̂úêśt̂ Ḿêt́ĥód̂"
+  },
+  "panels/network/components/RequestHeadersView.ts | requestUrl": {
+    "message": "R̂éq̂úêśt̂ ÚR̂Ĺ"
+  },
+  "panels/network/components/RequestHeadersView.ts | statusCode": {
+    "message": "Ŝt́ât́ûś Ĉód̂é"
+  },
   "panels/network/components/RequestTrustTokensView.ts | aClientprovidedArgumentWas": {
     "message": "Â ćl̂íêńt̂-ṕr̂óv̂íd̂éd̂ ár̂ǵûḿêńt̂ ẃâś m̂ál̂f́ôŕm̂éd̂ ór̂ ót̂h́êŕŵíŝé îńv̂ál̂íd̂."
   },
@@ -9461,6 +9497,9 @@
   "panels/sources/CallStackSidebarPane.ts | removeFromIgnoreList": {
     "message": "R̂ém̂óv̂é f̂ŕôḿ îǵn̂ór̂é l̂íŝt́"
   },
+  "panels/sources/CallStackSidebarPane.ts | restartFrame": {
+    "message": "R̂éŝt́âŕt̂ f́r̂ám̂é"
+  },
   "panels/sources/CallStackSidebarPane.ts | showIgnorelistedFrames": {
     "message": "Ŝh́ôẃ îǵn̂ór̂é-l̂íŝt́êd́ f̂ŕâḿêś"
   },

package/front_end/core/sdk/DebuggerModel.ts

@@ -1248,6 +1248,8 @@ export class CallFrame {
   #returnValueInternal: RemoteObject|null;
   readonly warnings: string[] = [];
 
+  readonly canBeRestarted: boolean;
+
   constructor(
       debuggerModel: DebuggerModel, script: Script, payload: Protocol.Debugger.CallFrame, inlineFrameIndex?: number,
       functionName?: string) {
@@ -1259,6 +1261,7 @@ export class CallFrame {
     this.#localScopeInternal = null;
     this.#inlineFrameIndexInternal = inlineFrameIndex || 0;
     this.#functionNameInternal = functionName || payload.functionName;
+    this.canBeRestarted = Boolean(payload.canBeRestarted);
     for (let i = 0; i < payload.scopeChain.length; ++i) {
       const scope = new Scope(this, i);
       this.#scopeChainInternal.push(scope);
@@ -1390,6 +1393,15 @@ export class CallFrame {
     return {object: runtimeModel.createRemoteObject(response.result), exceptionDetails: response.exceptionDetails};
   }
 
+  async restart(): Promise<void> {
+    console.assert(this.canBeRestarted, 'This frame can not be restarted.');
+    // Note that even if `canBeRestarted` is true, the restart frame call can still fail.
+    // The user can evaluate arbitrary code between pausing and restarting the frame that
+    // could mess with the call stack.
+    await this.debuggerModel.agent.invoke_restartFrame(
+        {callFrameId: this.id, mode: Protocol.Debugger.RestartFrameRequestMode.StepInto});
+  }
+
   getPayload(): Protocol.Debugger.CallFrame {
     return this.payload;
   }

package/front_end/core/sdk/RuntimeModel.ts

@@ -36,6 +36,7 @@ import * as Common from '../common/common.js';
 import * as Host from '../host/host.js';
 import type * as ProtocolProxyApi from '../../generated/protocol-proxy-api.js';
 import type * as Protocol from '../../generated/protocol.js';
+import type * as Platform from '../platform/platform.js';
 
 import type {FunctionDetails} from './DebuggerModel.js';
 import {DebuggerModel} from './DebuggerModel.js';
@@ -121,7 +122,8 @@ export class RuntimeModel extends SDKModel<EventTypes> {
   executionContextCreated(context: Protocol.Runtime.ExecutionContextDescription): void {
     const data = context.auxData || {isDefault: true};
     const executionContext = new ExecutionContext(
-        this, context.id, context.uniqueId, context.name, context.origin, data['isDefault'], data['frameId']);
+        this, context.id, context.uniqueId, context.name, context.origin as Platform.DevToolsPath.UrlString,
+        data['isDefault'], data['frameId']);
     this.#executionContextById.set(executionContext.id, executionContext);
     this.dispatchEventToListeners(Events.ExecutionContextCreated, executionContext);
   }
@@ -561,14 +563,14 @@ export class ExecutionContext {
   uniqueId: string;
   name: string;
   #labelInternal: string|null;
-  origin: string;
+  origin: Platform.DevToolsPath.UrlString;
   isDefault: boolean;
   runtimeModel: RuntimeModel;
   debuggerModel: DebuggerModel;
   frameId: Protocol.Page.FrameId|undefined;
   constructor(
       runtimeModel: RuntimeModel, id: Protocol.Runtime.ExecutionContextId, uniqueId: string, name: string,
-      origin: string, isDefault: boolean, frameId?: Protocol.Page.FrameId) {
+      origin: Platform.DevToolsPath.UrlString, isDefault: boolean, frameId?: Protocol.Page.FrameId) {
     this.id = id;
     this.uniqueId = uniqueId;
     this.name = name;

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

@@ -54,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 {
@@ -342,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');
@@ -837,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,
@@ -893,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);
@@ -907,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]);
     }
   }
 
@@ -981,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(
@@ -992,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 {
@@ -1006,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);
@@ -1085,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/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/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/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);
+}

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

@@ -0,0 +1,262 @@
+// 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 * 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 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 {render, html} = LitHtml;
+
+const UIStrings = {
+  /**
+  *@description Text in Request Headers View of the Network panel
+  */
+  fromMemoryCache: '(from memory cache)',
+  /**
+  *@description Text in Request Headers View of the Network panel
+  */
+  fromServiceWorker: '(from `service worker`)',
+  /**
+  *@description Text in Request Headers View of the Network panel
+  */
+  fromSignedexchange: '(from signed-exchange)',
+  /**
+  *@description Text in Request Headers View of the Network panel
+  */
+  fromPrefetchCache: '(from prefetch cache)',
+  /**
+  *@description Text in Request Headers View of the Network panel
+  */
+  fromDiskCache: '(from disk cache)',
+  /**
+  *@description Text in Request Headers View of the Network panel
+  */
+  fromWebBundle: '(from Web Bundle)',
+  /**
+  *@description Section header for a list of the main aspects of a http request
+  */
+  general: 'General',
+  /**
+  *@description The URL of a request
+  */
+  requestUrl: 'Request URL',
+  /**
+  *@description The HTTP method of a request
+  */
+  requestMethod: 'Request Method',
+  /**
+  *@description HTTP response code
+  */
+  statusCode: 'Status Code',
+  /**
+  *@description Text in Network Log View Columns of the Network panel
+  */
+  remoteAddress: 'Remote Address',
+  /**
+  *@description Text in Request Headers View of the Network panel
+  */
+  referrerPolicy: 'Referrer Policy',
+};
+const str_ = i18n.i18n.registerUIStrings('panels/network/components/RequestHeadersView.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export class RequestHeadersView extends UI.Widget.VBox {
+  readonly #headersView = new RequestHeadersComponent();
+  readonly #request: SDK.NetworkRequest.NetworkRequest;
+
+  constructor(request: SDK.NetworkRequest.NetworkRequest) {
+    super();
+    this.#request = request;
+    this.contentElement.appendChild(this.#headersView);
+  }
+
+  wasShown(): void {
+    this.#request.addEventListener(SDK.NetworkRequest.Events.RemoteAddressChanged, this.#refreshHeadersView, this);
+    this.#request.addEventListener(SDK.NetworkRequest.Events.FinishedLoading, this.#refreshHeadersView, this);
+    this.#refreshHeadersView();
+  }
+
+  willHide(): void {
+    this.#request.removeEventListener(SDK.NetworkRequest.Events.RemoteAddressChanged, this.#refreshHeadersView, this);
+    this.#request.removeEventListener(SDK.NetworkRequest.Events.FinishedLoading, this.#refreshHeadersView, this);
+  }
+
+  #refreshHeadersView(): void {
+    this.#headersView.data = {
+      request: this.#request,
+    };
+  }
+}
+
+export interface RequestHeadersComponentData {
+  request: SDK.NetworkRequest.NetworkRequest;
+}
+
+export class RequestHeadersComponent extends HTMLElement {
+  static readonly litTagName = LitHtml.literal`devtools-request-headers`;
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #request?: Readonly<SDK.NetworkRequest.NetworkRequest>;
+
+  set data(data: RequestHeadersComponentData) {
+    this.#request = data.request;
+    this.#render();
+  }
+
+  connectedCallback(): void {
+    this.#shadow.adoptedStyleSheets = [requestHeadersViewStyles];
+  }
+
+  #render(): void {
+    assertNotNullOrUndefined(this.#request);
+
+    // Disabled until https://crbug.com/1079231 is fixed.
+    // clang-format off
+    render(html`
+      ${this.#renderGeneralSection()}
+    `, this.#shadow, {host: this});
+    // clang-format on
+  }
+
+  #renderGeneralSection(): LitHtml.TemplateResult {
+    assertNotNullOrUndefined(this.#request);
+
+    let coloredCircleClassName = 'red-circle';
+    if (this.#request.statusCode < 300 || this.#request.statusCode === 304) {
+      coloredCircleClassName = 'green-circle';
+    } else if (this.#request.statusCode < 400) {
+      coloredCircleClassName = 'yellow-circle';
+    }
+
+    let statusText = this.#request.statusCode + ' ' + this.#request.statusText;
+    let statusTextHasComment = false;
+    if (this.#request.cachedInMemory()) {
+      statusText += ' ' + i18nString(UIStrings.fromMemoryCache);
+      statusTextHasComment = true;
+    } else if (this.#request.fetchedViaServiceWorker) {
+      statusText += ' ' + i18nString(UIStrings.fromServiceWorker);
+      statusTextHasComment = true;
+    } else if (this.#request.redirectSourceSignedExchangeInfoHasNoErrors()) {
+      statusText += ' ' + i18nString(UIStrings.fromSignedexchange);
+      statusTextHasComment = true;
+    } else if (this.#request.webBundleInnerRequestInfo()) {
+      statusText += ' ' + i18nString(UIStrings.fromWebBundle);
+      statusTextHasComment = true;
+    } else if (this.#request.fromPrefetchCache()) {
+      statusText += ' ' + i18nString(UIStrings.fromPrefetchCache);
+      statusTextHasComment = true;
+    } else if (this.#request.cached()) {
+      statusText += ' ' + i18nString(UIStrings.fromDiskCache);
+      statusTextHasComment = true;
+    }
+
+    // Disabled until https://crbug.com/1079231 is fixed.
+    // clang-format off
+    return html`
+      <${Category.litTagName} .data=${{name: 'general', title: i18nString(UIStrings.general)} as CategoryData}>
+        <div class="row">
+          <div class="header-name">${i18nString(UIStrings.requestUrl)}:</div>
+          <div class="header-value">${this.#request.url()}</div>
+        </div>
+        ${this.#request.statusCode? html`
+          <div class="row">
+            <div class="header-name">${i18nString(UIStrings.requestMethod)}:</div>
+            <div class="header-value">${this.#request.requestMethod}</div>
+          </div>
+          <div class="row">
+            <div class="header-name">${i18nString(UIStrings.statusCode)}:</div>
+            <div class="header-value ${coloredCircleClassName} ${statusTextHasComment ? 'status-with-comment' : ''}">${statusText}</div>
+          </div>
+        ` : ''}
+        ${this.#request.remoteAddress()? html`
+          <div class="row">
+            <div class="header-name">${i18nString(UIStrings.remoteAddress)}:</div>
+            <div class="header-value">${this.#request.remoteAddress()}</div>
+          </div>
+        ` : ''}
+        ${this.#request.referrerPolicy()? html`
+          <div class="row">
+            <div class="header-name">${i18nString(UIStrings.referrerPolicy)}:</div>
+            <div class="header-value">${this.#request.referrerPolicy()}</div>
+          </div>
+        ` : ''}
+      </${Category.litTagName}>
+    `;
+    // clang-format on
+  }
+}
+
+export interface CategoryData {
+  name: string;
+  title: Common.UIString.LocalizedString;
+}
+
+export class Category extends HTMLElement {
+  static readonly litTagName = LitHtml.literal`devtools-request-headers-category`;
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #expandedSetting?: Common.Settings.Setting<boolean>;
+  #title: Common.UIString.LocalizedString = Common.UIString.LocalizedEmptyString;
+
+  connectedCallback(): void {
+    this.#shadow.adoptedStyleSheets = [requestHeadersViewStyles];
+  }
+
+  set data(data: CategoryData) {
+    this.#title = data.title;
+    this.#expandedSetting =
+        Common.Settings.Settings.instance().createSetting('request-info-' + data.name + '-category-expanded', true);
+    this.#render();
+  }
+
+  #render(): void {
+    // Disabled until https://crbug.com/1079231 is fixed.
+    // clang-format off
+    render(html`
+      <details ?open=${this.#expandedSetting ? this.#expandedSetting.get() : true} @toggle=${this.#onToggle}>
+        <summary class="header" @keydown=${this.#onSummaryKeyDown}>${this.#title}</summary>
+        <slot></slot>
+      </details>
+    `, this.#shadow, {host: this});
+    // clang-format on
+  }
+
+  #onSummaryKeyDown(event: KeyboardEvent): void {
+    if (!event.target) {
+      return;
+    }
+    const summaryElement = event.target as HTMLElement;
+    const detailsElement = summaryElement.parentElement as HTMLDetailsElement;
+    if (!detailsElement) {
+      throw new Error('<details> element is not found for a <summary> element');
+    }
+    switch (event.key) {
+      case 'ArrowLeft':
+        detailsElement.open = false;
+        break;
+      case 'ArrowRight':
+        detailsElement.open = true;
+        break;
+    }
+  }
+
+  #onToggle(event: Event): void {
+    this.#expandedSetting?.set((event.target as HTMLDetailsElement).open);
+  }
+}
+
+ComponentHelpers.CustomElements.defineComponent('devtools-request-headers', RequestHeadersComponent);
+ComponentHelpers.CustomElements.defineComponent('devtools-request-headers-category', Category);
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface HTMLElementTagNameMap {
+    'devtools-request-headers': RequestHeadersComponent;
+    'devtools-request-headers-category': Category;
+  }
+}

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

@@ -2,8 +2,10 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as RequestHeadersView from './RequestHeadersView.js';
 import * as RequestTrustTokensView from './RequestTrustTokensView.js';
 
 export {
+  RequestHeadersView,
   RequestTrustTokensView,
 };

package/front_end/panels/network/forward/UIRequestLocation.ts

@@ -24,6 +24,7 @@ export enum UIRequestTabs {
   Cookies = 'cookies',
   EventSource = 'eventSource',
   Headers = 'headers',
+  HeadersComponent = 'headersComponent',
   Payload = 'payload',
   Initiator = 'initiator',
   Preview = 'preview',

package/front_end/panels/network/networkLogView.css

@@ -70,7 +70,7 @@
   flex: none;
 }
 
-.network-log-grid.data-grid table.data {
+.network-log-grid.data-grid tbody {
   background: transparent;
 }
 
@@ -397,8 +397,8 @@
   /* This is part of the large color block declared above, but should not be
    extracted out. */
   /* stylelint-disable no-descending-specificity */
-  .network-log-grid.data-grid table.data tr.revealed.selected,
-  .network-log-grid.data-grid:focus table.data tr.revealed.selected,
+  .network-log-grid.data-grid tbody tr.revealed.selected,
+  .network-log-grid.data-grid:focus tbody tr.revealed.selected,
   .network-log-grid.data-grid:focus tr.selected .network-dim-cell,
   .network-log-grid.data-grid tr.selected .network-dim-cell,
   .network-log-grid.data-grid:focus tr.selected .initiator-column .devtools-link,

package/front_end/panels/network/requestHeadersTree.css

@@ -59,6 +59,12 @@
   display: none;
 }
 
+.tree-outline li .headers-title-left {
+  min-width: 50%;
+  display: flex;
+  justify-content: space-between;
+}
+
 .tree-outline li .header-toggle {
   display: none;
 }

package/front_end/panels/sources/CallStackSidebarPane.ts

@@ -86,6 +86,12 @@ const UIStrings = {
   *@description Text in Call Stack Sidebar Pane of the Sources panel when some call frames have warnings
   */
   callFrameWarnings: 'Some call frames have warnings',
+  /**
+   * @description A contex menu item in the Call Stack Sidebar Pane. "Restart" is a verb and
+   * "frame" is a noun. "Frame" refers to an individual item in the call stack, i.e. a call frame.
+   * The user opens this context menu by selecting a specific call frame in the call stack sidebar pane.
+   */
+  restartFrame: 'Restart frame',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/sources/CallStackSidebarPane.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -384,6 +390,13 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
       return;
     }
     const contextMenu = new UI.ContextMenu.ContextMenu(event);
+    const debuggerCallFrame = itemToCallFrame.get(item);
+    if (debuggerCallFrame) {
+      contextMenu.defaultSection().appendItem(i18nString(UIStrings.restartFrame), () => {
+        Host.userMetrics.actionTaken(Host.UserMetrics.Action.StackFrameRestarted);
+        void debuggerCallFrame.restart();
+      }, !debuggerCallFrame.canBeRestarted);
+    }
     contextMenu.defaultSection().appendItem(i18nString(UIStrings.copyStackTrace), this.copyStackTrace.bind(this));
     if (item.uiLocation) {
       this.appendIgnoreListURLContextMenuItems(contextMenu, item.uiLocation.uiSourceCode);

package/front_end/panels/sources/ScopeChainSidebarPane.ts

@@ -311,13 +311,14 @@ export class OpenLinearMemoryInspector extends UI.Widget.VBox implements UI.Cont
   }
 
   private isMemoryObjectProperty(obj: SDK.RemoteObject.RemoteObject): boolean {
-    const isWasmMemory = obj.type === 'object' && obj.subtype &&
+    const isWasmOrBuffer = obj.type === 'object' && obj.subtype &&
         LinearMemoryInspector.LinearMemoryInspectorController.ACCEPTED_MEMORY_TYPES.includes(obj.subtype);
-    if (isWasmMemory) {
+    if (isWasmOrBuffer) {
       return true;
     }
 
-    if (obj instanceof Bindings.DebuggerLanguagePlugins.ValueNode) {
+    const isWasmDWARF = obj instanceof Bindings.DebuggerLanguagePlugins.ValueNode;
+    if (isWasmDWARF) {
       return obj.inspectableAddress !== undefined;
     }
 

package/front_end/panels/sources/sourcesView.css

@@ -45,6 +45,10 @@
   z-index: 0;
 }
 
+.sources-toolbar .toolbar {
+  cursor: default;
+}
+
 .source-frame-debugger-script {
   --override-debugger-background-tint: rgb(255 255 194 / 50%);
 

package/front_end/ui/legacy/components/data_grid/DataGrid.ts

@@ -130,6 +130,7 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     [x: string]: Element,
   };
   scrollContainerInternal: Element;
+  private dataContainerInternal: Element;
   private readonly dataTable: Element;
   protected inline: boolean;
   private columnsArray: ColumnDescriptor[];
@@ -190,8 +191,9 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
 
     this.dataTableHeaders = {};
 
-    this.scrollContainerInternal = this.element.createChild('div', 'data-container');
-    this.dataTable = this.scrollContainerInternal.createChild('table', 'data');
+    this.dataContainerInternal = this.element.createChild('div', 'data-container');
+    this.dataTable = this.dataContainerInternal.createChild('table', 'data');
+    this.scrollContainerInternal = this.dataContainerInternal;
 
     // FIXME: Add a createCallback which is different from editCallback and has different
     // behavior when creating a new node.
@@ -1539,6 +1541,18 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     return this.topFillerRow;
   }
 
+  // Note on the following methods:
+  // The header row is a child of the scrollable container, and uses position: sticky
+  // so it can visually obscure other elements below it in the grid. We need to manually
+  // subtract the header's height when calculating the actual client area in which
+  // data rows are visible. However, if a caller has set a different scroll container
+  // then we report 0 height and the caller is expected to ensure their chosen scroll
+  // container's height matches the visible scrollable data area as seen by the user.
+
+  protected headerHeightInScroller(): number {
+    return this.scrollContainer === this.dataContainerInternal ? this.headerHeight() : 0;
+  }
+
   protected headerHeight(): number {
     return this.dataTableHeadInternal.offsetHeight;
   }

package/front_end/ui/legacy/components/data_grid/ViewportDataGrid.ts

@@ -172,7 +172,7 @@ export class ViewportDataGrid<T> extends Common.ObjectWrapper.eventMixin<EventTy
       delete this.updateAnimationFrameId;
     }
 
-    const clientHeight = this.scrollContainer.clientHeight - this.headerHeight();
+    const clientHeight = this.scrollContainer.clientHeight - this.headerHeightInScroller();
     let scrollTop: number = this.scrollContainer.scrollTop;
     const currentScrollTop = scrollTop;
     const maxScrollTop = Math.max(0, this.contentHeight() - clientHeight);
@@ -249,7 +249,7 @@ export class ViewportDataGrid<T> extends Common.ObjectWrapper.eventMixin<EventTy
     }
     const toY = fromY + node.nodeSelfHeight();
     let scrollTop: number = this.scrollContainer.scrollTop;
-    const visibleHeight = this.scrollContainer.offsetHeight - this.headerHeight();
+    const visibleHeight = this.scrollContainer.offsetHeight - this.headerHeightInScroller();
     if (scrollTop > fromY) {
       scrollTop = fromY;
       this.stickToBottom = false;

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.1004171"
+  "version": "1.0.1004641"
 }