chrome-devtools-frontend 1.0.1035963 → 1.0.1037221

package/AUTHORS

@@ -17,6 +17,7 @@ Alexey Rodionov <fluorescent.hallucinogen@gmail.com>
 Ankit Mishra <ankit.mishra131990@gmail.com>
 Anna Agoha <annaagoha@gmail.com>
 Anthony Xie <anthonyxie64@gmail.com>
+Boris Verkhovskiy <boris.verk@gmail.com>
 Carl Espe <carl@cpespe.com>
 Conner Turner <cturner@zyme.xyz>
 Daniel bellfield <dnlbellfield@gmail.com>

package/front_end/core/sdk/CSSStyleDeclaration.ts

@@ -184,7 +184,7 @@ export class CSSStyleDeclaration {
       for (const shorthand of shorthands) {
         if (propertiesSet.has(shorthand)) {
           continue;
-        }  // There already is a shorthand this #longhands falls under.
+        }  // There already is a shorthand this #longhand falls under.
         const shorthandValue = this.#shorthandValues.get(shorthand);
         if (!shorthandValue) {
           continue;

package/front_end/core/sdk/NetworkManager.ts

@@ -141,7 +141,7 @@ export class NetworkManager extends SDKModel<EventTypes> {
   constructor(target: Target) {
     super(target);
     this.dispatcher = new NetworkDispatcher(this);
-    this.fetchDispatcher = new FetchDispatcher(target.fetchAgent());
+    this.fetchDispatcher = new FetchDispatcher(target.fetchAgent(), this);
     this.#networkAgent = target.networkAgent();
     target.registerNetworkDispatcher(this.dispatcher);
     target.registerFetchDispatcher(this.fetchDispatcher);
@@ -264,7 +264,7 @@ export class NetworkManager extends SDKModel<EventTypes> {
     return this.dispatcher.requestForURL(url);
   }
 
-  requestforId(id: string): NetworkRequest|null {
+  requestForId(id: string): NetworkRequest|null {
     return this.dispatcher.requestForId(id);
   }
 
@@ -392,15 +392,18 @@ const MAX_EAGER_POST_REQUEST_BODY_LENGTH = 64 * 1024;  // bytes
 
 export class FetchDispatcher implements ProtocolProxyApi.FetchDispatcher {
   readonly #fetchAgent: ProtocolProxyApi.FetchApi;
+  readonly #manager: NetworkManager;
 
-  constructor(agent: ProtocolProxyApi.FetchApi) {
+  constructor(agent: ProtocolProxyApi.FetchApi, manager: NetworkManager) {
     this.#fetchAgent = agent;
+    this.#manager = manager;
   }
 
-  requestPaused({requestId, request, resourceType, responseStatusCode, responseHeaders}:
+  requestPaused({requestId, request, resourceType, responseStatusCode, responseHeaders, networkId}:
                     Protocol.Fetch.RequestPausedEvent): void {
+    const networkRequest = networkId ? this.#manager.requestForId(networkId) : null;
     void MultitargetNetworkManager.instance().requestIntercepted(new InterceptedRequest(
-        this.#fetchAgent, request, resourceType, requestId, responseStatusCode, responseHeaders));
+        this.#fetchAgent, request, resourceType, requestId, networkRequest, responseStatusCode, responseHeaders));
   }
 
   authRequired({}: Protocol.Fetch.AuthRequiredEvent): void {
@@ -1549,12 +1552,14 @@ export class InterceptedRequest {
   responseStatusCode: number|undefined;
   responseHeaders: Protocol.Fetch.HeaderEntry[]|undefined;
   requestId: Protocol.Fetch.RequestId;
+  networkRequest: NetworkRequest|null;
 
   constructor(
       fetchAgent: ProtocolProxyApi.FetchApi,
       request: Protocol.Network.Request,
       resourceType: Protocol.Network.ResourceType,
       requestId: Protocol.Fetch.RequestId,
+      networkRequest: NetworkRequest|null,
       responseStatusCode?: number,
       responseHeaders?: Protocol.Fetch.HeaderEntry[],
   ) {
@@ -1565,6 +1570,17 @@ export class InterceptedRequest {
     this.responseStatusCode = responseStatusCode;
     this.responseHeaders = responseHeaders;
     this.requestId = requestId;
+    this.networkRequest = networkRequest;
+    if (this.networkRequest && this.responseHeaders) {
+      // This populates 'NetworkRequest.originalResponseHeaders' with the
+      // response headers from CDP's 'Fetch.requestPaused'. Populating this
+      // field together with 'NetworkRequest.responseHeaders' with the info
+      // from 'Network.responseReceivedExtraInfo' would have been easier, but we
+      // are not sure whether the response headers from the 2 CDP events are
+      // always exactly the same.
+      // Creates a deep copy.
+      this.networkRequest.originalResponseHeaders = this.responseHeaders.map(headerEntry => ({...headerEntry}));
+    }
   }
 
   hasResponded(): boolean {

package/front_end/core/sdk/NetworkRequest.ts

@@ -236,6 +236,7 @@ export class NetworkRequest extends Common.ObjectWrapper.ObjectWrapper<EventType
     [x: string]: string|undefined,
   };
   #responseHeadersTextInternal: string;
+  #originalResponseHeaders: Protocol.Fetch.HeaderEntry[];
   #requestHeadersInternal: NameValue[];
   #requestHeaderValues: {
     [x: string]: string|undefined,
@@ -336,6 +337,7 @@ export class NetworkRequest extends Common.ObjectWrapper.ObjectWrapper<EventType
 
     this.#responseHeaderValues = {};
     this.#responseHeadersTextInternal = '';
+    this.#originalResponseHeaders = [];
 
     this.#requestHeadersInternal = [];
     this.#requestHeaderValues = {};
@@ -939,6 +941,14 @@ export class NetworkRequest extends Common.ObjectWrapper.ObjectWrapper<EventType
     this.dispatchEventToListeners(Events.ResponseHeadersChanged);
   }
 
+  get originalResponseHeaders(): Protocol.Fetch.HeaderEntry[] {
+    return this.#originalResponseHeaders;
+  }
+
+  set originalResponseHeaders(headers: Protocol.Fetch.HeaderEntry[]) {
+    this.#originalResponseHeaders = headers;
+  }
+
   get responseHeadersText(): string {
     return this.#responseHeadersTextInternal;
   }

package/front_end/entrypoints/main/MainImpl.ts

@@ -298,7 +298,7 @@ export class MainImpl {
         'https://developer.chrome.com/blog/new-in-devtools-92/#source-order');
     Root.Runtime.experiments.register('webauthnPane', 'WebAuthn Pane');
     Root.Runtime.experiments.register(
-        'keyboardShortcutEditor', 'Enable keyboard shortcut editor', true,
+        'keyboardShortcutEditor', 'Enable keyboard shortcut editor', false,
         'https://developer.chrome.com/blog/new-in-devtools-88/#keyboard-shortcuts');
 
     // Back/forward cache
@@ -429,6 +429,7 @@ export class MainImpl {
       Root.Runtime.ExperimentName.CSS_LAYERS,
       ...('EyeDropper' in window ? [Root.Runtime.ExperimentName.EYEDROPPER_COLOR_PICKER] : []),
       'lighthousePanelFR',
+      'keyboardShortcutEditor',
     ]);
 
     Root.Runtime.experiments.setNonConfigurableExperiments([

package/front_end/models/persistence/NetworkPersistenceManager.ts

@@ -622,19 +622,27 @@ export class NetworkPersistenceManager extends Common.ObjectWrapper.ObjectWrappe
     }
   }
 
-  mergeHeaders(baseHeaders: Protocol.Fetch.HeaderEntry[], overrideHeaders: Protocol.Network.Headers):
+  mergeHeaders(baseHeaders: Protocol.Fetch.HeaderEntry[], overrideHeaders: Protocol.Fetch.HeaderEntry[]):
       Protocol.Fetch.HeaderEntry[] {
-    const result: Protocol.Fetch.HeaderEntry[] = [];
-    const headerMap = new Map<string, string>();
-    for (const header of baseHeaders) {
-      headerMap.set(header.name, header.value);
+    const headerMap = new Platform.MapUtilities.Multimap<string, string>();
+    for (const {name, value} of overrideHeaders) {
+      headerMap.set(name.toLowerCase(), value);
     }
-    for (const [headerName, headerValue] of Object.entries(overrideHeaders)) {
-      headerMap.set(headerName, headerValue);
+
+    const overriddenHeaderNames = new Set(headerMap.keysArray());
+    for (const {name, value} of baseHeaders) {
+      const lowerCaseName = name.toLowerCase();
+      if (!overriddenHeaderNames.has(lowerCaseName)) {
+        headerMap.set(lowerCaseName, value);
+      }
+    }
+
+    const result: Protocol.Fetch.HeaderEntry[] = [];
+    for (const headerName of headerMap.keysArray()) {
+      for (const headerValue of headerMap.get(headerName)) {
+        result.push({name: headerName, value: headerValue});
+      }
     }
-    headerMap.forEach((headerValue, headerName) => {
-      result.push({name: headerName, value: headerValue});
-    });
     return result;
   }
 
@@ -766,20 +774,23 @@ export type EventTypes = {
 
 export interface HeaderOverride {
   applyTo: string;
-  headers: Protocol.Network.Headers;
+  headers: Protocol.Fetch.HeaderEntry[];
 }
 
 interface HeaderOverrideWithRegex {
   applyToRegex: RegExp;
-  headers: Protocol.Network.Headers;
+  headers: Protocol.Fetch.HeaderEntry[];
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function isHeaderOverride(arg: any): arg is HeaderOverride {
-  if (!(arg && arg.applyTo && typeof (arg.applyTo === 'string') && arg.headers && Object.keys(arg.headers).length)) {
+  if (!(arg && arg.applyTo && typeof arg.applyTo === 'string' && arg.headers && arg.headers.length &&
+        Array.isArray(arg.headers))) {
     return false;
   }
-  return Object.values(arg.headers).every(value => typeof value === 'string');
+  return arg.headers.every(
+      (header: Protocol.Fetch.HeaderEntry) =>
+          header.name && typeof header.name === 'string' && header.value && typeof header.value === 'string');
 }
 
 export function escapeRegex(pattern: string): string {

package/front_end/panels/elements/CSSRuleValidator.ts

@@ -142,7 +142,7 @@ export class AlignContentValidator extends CSSRuleValidator {
     if (this.#isRuleValid(computedStyles)) {
       return;
     }
-    const reasonPropertyDeclaration = buildPropertyText('flex-wrap');
+    const reasonPropertyDeclaration = buildPropertyDefinitionText('flex-wrap', 'nowrap');
     const affectedPropertyDeclarationCode = buildPropertyText('align-content');
 
     return new Hint(

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -1189,7 +1189,7 @@ export class ElementsTreeOutline extends
     }
     const container = new TopLayerContainer(parent.treeOutline, domModel);
     await container.throttledUpdateTopLayerElements();
-    if (container.currentTopLayerElements.size > 0) {
+    if (container.currentTopLayerDOMNodes.size > 0) {
       parent.appendChild(container);
     }
     this.#topLayerContainerByParent.set(parent, container);
@@ -1460,10 +1460,10 @@ export class ElementsTreeOutline extends
   private async topLayerElementsChanged(): Promise<void> {
     for (const [parent, container] of this.#topLayerContainerByParent) {
       await container.throttledUpdateTopLayerElements();
-      if (container.currentTopLayerElements.size > 0 && container.parent !== parent) {
+      if (container.currentTopLayerDOMNodes.size > 0 && container.parent !== parent) {
         parent.appendChild(container);
       }
-      container.hidden = container.currentTopLayerElements.size === 0;
+      container.hidden = container.currentTopLayerDOMNodes.size === 0;
     }
   }
 

package/front_end/panels/elements/StylePropertiesSection.ts

@@ -298,6 +298,18 @@ export class StylePropertiesSection {
     this.parentsComputedStyles = parentsComputedStyles;
   }
 
+  updateAuthoringHint(): void {
+    let child = this.propertiesTreeOutline.firstChild();
+    while (child) {
+      if (child instanceof StylePropertyTreeElement) {
+        child.setComputedStyles(this.computedStyles);
+        child.setParentsComputedStyles(this.parentsComputedStyles);
+        child.updateAuthoringHint();
+      }
+      child = child.nextSibling;
+    }
+  }
+
   setSectionIdx(sectionIdx: number): void {
     this.sectionIdx = sectionIdx;
     this.onpopulate();

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -761,7 +761,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     }
   }
 
-  private updateAuthoringHint(): void {
+  updateAuthoringHint(): void {
     if (!Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.CSS_AUTHORING_HINTS)) {
       return;
     }

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -785,6 +785,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     for (const section of this.allSections()) {
       section.setComputedStyles(computedStyles);
       section.setParentsComputedStyles(parentsComputedStyles);
+      section.updateAuthoringHint();
     }
   }
 

package/front_end/panels/elements/TopLayerContainer.ts

@@ -25,14 +25,13 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export class TopLayerContainer extends UI.TreeOutline.TreeElement {
   tree: ElementsTreeOutline.ElementsTreeOutline;
   domModel: SDK.DOMModel.DOMModel;
-  currentTopLayerElements: Set<ElementsTreeElement>;
+  currentTopLayerDOMNodes: Set<SDK.DOMModel.DOMNode> = new Set();
   topLayerUpdateThrottler: Common.Throttler.Throttler;
 
   constructor(tree: ElementsTreeOutline.ElementsTreeOutline, domModel: SDK.DOMModel.DOMModel) {
     super('#top-layer');
     this.tree = tree;
     this.domModel = domModel;
-    this.currentTopLayerElements = new Set();
     this.topLayerUpdateThrottler = new Common.Throttler.Throttler(1);
   }
 
@@ -43,7 +42,7 @@ export class TopLayerContainer extends UI.TreeOutline.TreeElement {
   async updateTopLayerElements(): Promise<void> {
     this.removeChildren();
     this.removeCurrentTopLayerElementsAdorners();
-    this.currentTopLayerElements = new Set();
+    this.currentTopLayerDOMNodes = new Set();
 
     const newTopLayerElementsIDs = await this.domModel.getTopLayerElements();
     if (!newTopLayerElementsIDs || newTopLayerElementsIDs.length === 0) {
@@ -57,15 +56,9 @@ export class TopLayerContainer extends UI.TreeOutline.TreeElement {
         const topLayerElementShortcut = new SDK.DOMModel.DOMNodeShortcut(
             this.domModel.target(), topLayerDOMNode.backendNodeId(), 0, topLayerDOMNode.nodeName());
         const topLayerElementRepresentation = new ElementsTreeOutline.ShortcutTreeElement(topLayerElementShortcut);
-        const topLayerTreeElement = this.tree.treeElementByNode.get(topLayerDOMNode);
-        if (!topLayerTreeElement) {
-          continue;
-        }
-
-        topLayerElementIndex++;
-        this.addTopLayerAdorner(topLayerTreeElement, topLayerElementRepresentation, topLayerElementIndex);
-        this.currentTopLayerElements.add(topLayerTreeElement);
         this.appendChild(topLayerElementRepresentation);
+        this.currentTopLayerDOMNodes.add(topLayerDOMNode);
+
         // Add the element's backdrop if previous top layer element is a backdrop.
         const previousTopLayerDOMNode =
             (i > 0) ? this.domModel.idToDOMNode.get(newTopLayerElementsIDs[i - 1]) : undefined;
@@ -75,13 +68,21 @@ export class TopLayerContainer extends UI.TreeOutline.TreeElement {
           const backdropElementRepresentation = new ElementsTreeOutline.ShortcutTreeElement(backdropElementShortcut);
           topLayerElementRepresentation.appendChild(backdropElementRepresentation);
         }
+
+        // TODO(changhaohan): store not-yet-inserted DOMNodes and adorn them when inserted.
+        const topLayerTreeElement = this.tree.treeElementByNode.get(topLayerDOMNode);
+        if (topLayerTreeElement) {
+          this.addTopLayerAdorner(topLayerTreeElement, topLayerElementRepresentation, ++topLayerElementIndex);
+        }
       }
     }
   }
 
   private removeCurrentTopLayerElementsAdorners(): void {
-    for (const topLayerElement of this.currentTopLayerElements) {
-      topLayerElement.removeAllAdorners();
+    for (const node of this.currentTopLayerDOMNodes) {
+      const topLayerTreeElement = this.tree.treeElementByNode.get(node);
+      // TODO(changhaohan): remove only top layer adorner.
+      topLayerTreeElement?.removeAllAdorners();
     }
   }
 

package/front_end/panels/media/PlayerPropertiesView.ts

@@ -4,6 +4,7 @@
 
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
+import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import playerPropertiesViewStyles from './playerPropertiesView.css.js';
@@ -136,7 +137,7 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
 
 type TabData = {
-  [x: string]: string,
+  [x: string]: string|object,
 };
 
 // Keep this enum in sync with panels/media/base/media_log_properties.h
@@ -179,7 +180,7 @@ export class PropertyRenderer extends UI.Widget.VBox {
     super();
     this.contentElement.classList.add('media-property-renderer');
     const titleElement = this.contentElement.createChild('span', 'media-property-renderer-title');
-    this.contents = this.contentElement.createChild('span', 'media-property-renderer-contents');
+    this.contents = this.contentElement.createChild('div', 'media-property-renderer-contents');
     UI.UIUtils.createTextChild(titleElement, title);
     this.title = title;
     this.value = null;
@@ -213,16 +214,36 @@ export class PropertyRenderer extends UI.Widget.VBox {
     }
   }
 
+  protected unsetNestedContents(): void {
+    this.contentElement.classList.add('media-property-renderer-hidden');
+    if (this.pseudoColorProtectionElement === null) {
+      this.pseudoColorProtectionElement = document.createElement('div');
+      this.pseudoColorProtectionElement.classList.add('media-property-renderer');
+      this.pseudoColorProtectionElement.classList.add('media-property-renderer-hidden');
+      (this.contentElement.parentNode as HTMLElement)
+          .insertBefore(this.pseudoColorProtectionElement, this.contentElement);
+    }
+  }
+
+  changeNestedContents(value: object): void {
+    if (value === null || Object.keys(value).length === 0) {
+      this.unsetNestedContents();
+    } else {
+      if (this.pseudoColorProtectionElement !== null) {
+        this.pseudoColorProtectionElement.remove();
+        this.pseudoColorProtectionElement = null;
+      }
+      this.contentElement.classList.remove('media-property-renderer-hidden');
+      this.contents.removeChildren();
+      const jsonWrapperElement =
+          new SourceFrame.JSONView.JSONView(new SourceFrame.JSONView.ParsedJSON(value, '', ''), true);
+      jsonWrapperElement.show(this.contents);
+    }
+  }
+
   changeContents(value: string|null): void {
     if (value === null) {
-      this.contentElement.classList.add('media-property-renderer-hidden');
-      if (this.pseudoColorProtectionElement === null) {
-        this.pseudoColorProtectionElement = document.createElement('div');
-        this.pseudoColorProtectionElement.classList.add('media-property-renderer');
-        this.pseudoColorProtectionElement.classList.add('media-property-renderer-hidden');
-        (this.contentElement.parentNode as HTMLElement)
-            .insertBefore(this.pseudoColorProtectionElement, this.contentElement);
-      }
+      this.unsetNestedContents();
     } else {
       if (this.pseudoColorProtectionElement !== null) {
         this.pseudoColorProtectionElement.remove();
@@ -260,6 +281,13 @@ export class DefaultPropertyRenderer extends PropertyRenderer {
   }
 }
 
+export class NestedPropertyRenderer extends PropertyRenderer {
+  constructor(title: Platform.UIString.LocalizedString, content: object) {
+    super(title);
+    this.changeNestedContents(content);
+  }
+}
+
 export class DimensionPropertyRenderer extends PropertyRenderer {
   private width: number;
   private height: number;
@@ -337,7 +365,11 @@ export class TrackManager {
   addNewTab(tabs: GenericTrackMenu|NoTracksPlaceholderMenu, tabData: TabData, tabNumber: number): void {
     const tabElements = [];
     for (const [name, data] of Object.entries(tabData)) {
-      tabElements.push(new DefaultPropertyRenderer(i18n.i18n.lockedString(name), data));
+      if (typeof data === 'object') {
+        tabElements.push(new NestedPropertyRenderer(i18n.i18n.lockedString(name), data));
+      } else {
+        tabElements.push(new DefaultPropertyRenderer(i18n.i18n.lockedString(name), data));
+      }
     }
     const newTab = new AttributesView(tabElements);
 

package/front_end/panels/media/playerPropertiesView.css

@@ -12,6 +12,8 @@
   line-height: 20px;
   min-height: 28px;
   padding: 4px 10px;
+  display: block;
+  overflow: hidden;
 }
 
 .media-property-renderer-hidden {
@@ -19,14 +21,23 @@
 }
 
 .media-property-renderer-title {
-  font-size: 14px;
+  font-size: 12px;
+  float: left;
+  width: 150px;
+}
+
+.media-property-renderer-title::first-letter {
+  text-transform: uppercase;
 }
 
 .media-property-renderer-contents {
-  position: absolute;
+  position: relative;
   left: 200px;
+}
+
+.media-property-renderer-contents > .json-view {
   overflow: hidden;
-  height: 20px;
+  padding: 0;
 }
 
 .media-property-renderer:nth-child(even) {
@@ -37,10 +48,18 @@
   background: var(--color-background-hover-overlay);
 }
 
+.media-property-renderer:has(.json-view) {
+  padding-bottom: 0;
+}
+
 .-theme-with-dark-background .media-property-renderer:nth-child(even) {
   background: rgb(41 41 41);
 }
 
+.media-property-renderer:has(.json-view > .expanded) {
+  padding-bottom: 4px;
+}
+
 .media-properties-frame {
   display: block;
   overflow-x: hidden;

package/front_end/panels/network/NetworkLogView.ts

@@ -1662,7 +1662,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
   }
 
   private async copyCurlCommand(request: SDK.NetworkRequest.NetworkRequest, platform: string): Promise<void> {
-    const command = await this.generateCurlCommand(request, platform);
+    const command = await NetworkLogView.generateCurlCommand(request, platform);
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(command);
   }
 
@@ -2092,7 +2092,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
     return commands.join(' ;\n');
   }
 
-  private async generateCurlCommand(request: SDK.NetworkRequest.NetworkRequest, platform: string): Promise<string> {
+  static async generateCurlCommand(request: SDK.NetworkRequest.NetworkRequest, platform: string): Promise<string> {
     let command: string[] = [];
     // Most of these headers are derived from the URL and are automatically added by cURL.
     // The |Accept-Encoding| header is ignored to prevent decompression errors. crbug.com/1015321
@@ -2115,7 +2115,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
          gets to MS Crt parser safely.
 
          The % character is special because MS Crt parser will try and look for
-         ENV variables and fill them in it's place. We cannot escape them with %
+         ENV variables and fill them in its place. We cannot escape them with %
          and cannot escape them with ^ (because it's cmd.exe's escape not MS Crt
          parser); So we can get cmd.exe parser to escape the character after it,
          if it is followed by a valid beginning character of an ENV variable.
@@ -2191,7 +2191,14 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
       if (ignoredHeaders.has(name.toLowerCase())) {
         continue;
       }
-      command.push('-H ' + escapeString(name + ': ' + header.value));
+      if (header.value.trim()) {
+        command.push('-H ' + escapeString(name + ': ' + header.value));
+      } else {
+        // A header passed with -H with no value or only whitespace as its
+        // value tells curl to not set the header at all. To post an empty
+        // header, you have to terminate it with a semicolon.
+        command.push('-H ' + escapeString(name + ';'));
+      }
     }
     command = command.concat(data);
     command.push('--compressed');
@@ -2205,7 +2212,8 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
   private async generateAllCurlCommand(requests: SDK.NetworkRequest.NetworkRequest[], platform: string):
       Promise<string> {
     const nonBlobRequests = this.filterOutBlobRequests(requests);
-    const commands = await Promise.all(nonBlobRequests.map(request => this.generateCurlCommand(request, platform)));
+    const commands =
+        await Promise.all(nonBlobRequests.map(request => NetworkLogView.generateCurlCommand(request, platform)));
     if (platform === 'win') {
       return commands.join(' &\r\n');
     }

package/front_end/panels/sources/NavigatorView.ts

@@ -594,12 +594,17 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
       project: Workspace.Workspace.Project, target: SDK.Target.Target|null,
       frame: SDK.ResourceTreeModel.ResourceTreeFrame|null, projectOrigin: string, isFromSourceMap: boolean,
       path: Platform.DevToolsPath.EncodedPathString): string {
-    let targetId = target && !(this.groupByAuthored && isFromSourceMap) ? target.id() : '';
     const projectId = project.type() === Workspace.Workspace.projectTypes.FileSystem ? project.id() : '';
+    let targetId = target && !(this.groupByAuthored && isFromSourceMap) ? target.id() : '';
+    let frameId = this.groupByFrame && frame ? frame.id : '';
     if (this.groupByAuthored) {
-      targetId = isFromSourceMap ? 'Authored' : 'Deployed:' + targetId;
+      if (isFromSourceMap) {
+        targetId = 'Authored';
+        frameId = '';
+      } else {
+        targetId = 'Deployed:' + targetId;
+      }
     }
-    const frameId = this.groupByFrame && frame ? frame.id : '';
     return targetId + ':' + projectId + ':' + frameId + ':' + projectOrigin + ':' + path;
   }
 

package/front_end/panels/sources/components/BreakpointsView.ts

@@ -119,19 +119,14 @@ export class BreakpointsView extends HTMLElement {
   }
 
   #renderBreakpointGroup(group: BreakpointGroup): LitHtml.TemplateResult {
-    const groupClassMap = {
-      'expanded': group.expanded,
-    };
     // clang-format off
     return LitHtml.html`
-      <div data-group='true' class=${LitHtml.Directives.classMap(groupClassMap)}>
-        <div class='group-header' @click=${(): void => this.#onGroupExpandToggled(group)}>
-            <span class='triangle'></span>
-            ${this.#renderFileIcon()}
-            <span class='group-header-title'>${group.name}</span>
-        </div>
-        ${group.expanded? LitHtml.html`
-          ${group.breakpointItems.map(entry => this.#renderBreakpointEntry(entry))}` : LitHtml.nothing}
+      <details data-group='true' ?open=${group.expanded} @click=${(e: Event): void => this.#onGroupExpandToggled(e, group)}>
+        <summary>
+          <span class='group-header'>${this.#renderFileIcon()}<span class='group-header-title'>${group.name}</span></span>
+        </summary>
+        ${LitHtml.html`
+          ${group.breakpointItems.map(entry => this.#renderBreakpointEntry(entry))}`}
       </div>
       `;
     // clang-format on
@@ -155,7 +150,7 @@ export class BreakpointsView extends HTMLElement {
 
     // clang-format off
     return LitHtml.html`
-    <div class=${LitHtml.Directives.classMap(classMap)} aria-label=${breakpointItemDescription}  tabIndex=${breakpointItem.isHit ? 0 : 1}>
+    <div class=${LitHtml.Directives.classMap(classMap)} aria-label=${breakpointItemDescription}  tabIndex=${breakpointItem.isHit ? 0 : -1}>
       <label class='checkbox-label'>
         <input type='checkbox' aria-label=${breakpointItem.location} ?indeterminate=${breakpointItem.status === BreakpointStatus.INDETERMINATE} ?checked=${breakpointItem.status === BreakpointStatus.ENABLED} @change=${(e: Event): void => this.#onCheckboxToggled(e, breakpointItem)}>
       </label>
@@ -185,10 +180,10 @@ export class BreakpointsView extends HTMLElement {
     return i18nString(UIStrings.breakpointHit, {PH1: checkboxDescription});
   }
 
-  #onGroupExpandToggled(group: BreakpointGroup): void {
-    group.expanded = !group.expanded;
-    this.dispatchEvent(new ExpandedStateChangedEvent(group.url, group.expanded));
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+  #onGroupExpandToggled(e: Event, group: BreakpointGroup): void {
+    const detailsElement = e.target as HTMLDetailsElement;
+    group.expanded = detailsElement.open;
+    this.dispatchEvent(new ExpandedStateChangedEvent(group.url, detailsElement.open));
   }
 
   #onCheckboxToggled(e: Event, item: BreakpointItem): void {

package/front_end/panels/sources/components/HeadersView.ts

@@ -9,6 +9,7 @@ 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 type * as Protocol from '../../../generated/protocol.js';
 
 import HeadersViewStyles from './HeadersView.css.js';
 
@@ -81,23 +82,8 @@ export class HeadersView extends UI.View.SimpleView {
       parsingError = true;
     }
 
-    // Header overrides are stored as the key-value pairs of a JSON object on
-    // disk. For the editor we want them as an array instead, so that we can
-    // access/add/remove entries by their index.
-    const arrayOfHeaderOverrideArrays: HeaderOverride[] = headerOverrides.map(headerOverride => {
-      return {
-        applyTo: headerOverride.applyTo,
-        headers: Object.entries(headerOverride.headers).map(([headerName, headerValue]) => {
-          return {
-            name: headerName,
-            value: headerValue,
-          };
-        }),
-      };
-    });
-
     this.#headersViewComponent.data = {
-      headerOverrides: arrayOfHeaderOverrideArrays,
+      headerOverrides,
       uiSourceCode: this.#uiSourceCode,
       parsingError,
     };
@@ -128,18 +114,8 @@ export class HeadersView extends UI.View.SimpleView {
   }
 }
 
-type Header = {
-  name: string,
-  value: string,
-};
-
-type HeaderOverride = {
-  applyTo: string,
-  headers: Header[],
-};
-
 export interface HeadersViewComponentData {
-  headerOverrides: HeaderOverride[];
+  headerOverrides: Persistence.NetworkPersistenceManager.HeaderOverride[];
   uiSourceCode: Workspace.UISourceCode.UISourceCode;
   parsingError: boolean;
 }
@@ -148,7 +124,7 @@ export class HeadersViewComponent extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-sources-headers-view`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #boundRender = this.#render.bind(this);
-  #headerOverrides: HeaderOverride[] = [];
+  #headerOverrides: Persistence.NetworkPersistenceManager.HeaderOverride[] = [];
   #uiSourceCode: Workspace.UISourceCode.UISourceCode|null = null;
   #parsingError = false;
   #focusElement: {blockIndex: number, headerIndex?: number}|null = null;
@@ -213,7 +189,7 @@ export class HeadersViewComponent extends HTMLElement {
     selection?.removeAllRanges();
   }
 
-  #generateNextHeaderName(headers: Header[]): string {
+  #generateNextHeaderName(headers: Protocol.Fetch.HeaderEntry[]): string {
     const takenNames = new Set<string>(headers.map(header => header.name));
     let idx = 1;
     while (takenNames.has('headerName' + idx)) {
@@ -270,17 +246,7 @@ export class HeadersViewComponent extends HTMLElement {
   }
 
   #onHeadersChanged(): void {
-    // In the editor header overrides are represented by items in an array, so
-    // that we can access/add/remove entries by their index. On disk, they are
-    // stored as key-value pairs of a JSON object instead.
-    const arrayOfHeaderOverrideObjects: Persistence.NetworkPersistenceManager.HeaderOverride[] =
-        this.#headerOverrides.map(headerOverride => {
-          return {
-            applyTo: headerOverride.applyTo,
-            headers: headerOverride.headers.reduce((a, v) => ({...a, [v.name]: v.value}), {}),
-          };
-        });
-    this.#uiSourceCode?.setWorkingCopy(JSON.stringify(arrayOfHeaderOverrideObjects, null, 2));
+    this.#uiSourceCode?.setWorkingCopy(JSON.stringify(this.#headerOverrides, null, 2));
   }
 
   #render(): void {
@@ -355,7 +321,8 @@ export class HeadersViewComponent extends HTMLElement {
     // clang-format on
   }
 
-  #renderHeaderRow(header: Header, blockIndex: number, headerIndex: number): LitHtml.TemplateResult {
+  #renderHeaderRow(header: Protocol.Fetch.HeaderEntry, blockIndex: number, headerIndex: number):
+      LitHtml.TemplateResult {
     // clang-format off
     return LitHtml.html`
       <div class="row padded" data-block-index=${blockIndex} data-header-index=${headerIndex}>

package/front_end/panels/sources/components/breakpointsView.css

@@ -35,26 +35,34 @@ input {
   margin: 3px 0;
 }
 
-.triangle {
-  margin-left: 6px;
-  margin-right: 4px;
-  display: inline-block;
+details > summary {
+  height: 18px;
+  list-style: none;
+  display: flex;
+  padding: 4px 4px 4px 6px;
+  align-items: center;
+}
+
+details > summary::before {
+  display: block;
+  user-select: none;
   -webkit-mask-image: var(--image-file-treeoutlineTriangles);
   -webkit-mask-size: 32px 24px;
   -webkit-mask-position: 0 0;
-  background-color: var(--color-text-primary);
+  background-color: var(--color-text-secondary);
+  content: "";
   height: 12px;
-  width: 8px;
+  width: 9px;
+  overflow: hidden;
 }
 
-.group-header {
-  display: flex;
-  align-items: center;
-  height: 18px;
+details[open] > summary::before {
+  -webkit-mask-position: -16px 0;
 }
 
-.expanded > .group-header > .triangle {
-  -webkit-mask-position: -16px 0;
+.group-header {
+  display: inline-flex;
+  align-items: center;
 }
 
 .group-header-title {
@@ -84,7 +92,7 @@ input {
 }
 
 .checkbox-label {
-  padding-left: 24px;
+  padding-left: 20px;
   display: flex;
   align-items: center;
 }

package/front_end/panels/timeline/TimelineLoader.ts

@@ -136,7 +136,7 @@ export class TimelineLoader implements Common.StringOutputStream.OutputStream {
     this.firstRawChunk = false;
 
     if (this.state === State.Initial) {
-      if (chunk.startsWith('{"nodes":[')) {
+      if (chunk.match(/^{(\s)*"nodes":(\s)*\[/)) {
         this.state = State.LoadingCPUProfileFormat;
       } else if (chunk[0] === '{') {
         this.state = State.LookingForEvents;

package/front_end/ui/components/linear_memory_inspector/LinearMemoryHighlightChipList.ts

@@ -95,15 +95,17 @@ export class LinearMemoryHighlightChipList extends HTMLElement {
             <span class="value">${expressionName}</span><span class="separator">: </span><span>${expressionType}</span>
           </span>
         </button>
-        <button class="delete-highlight-button" title=${
-            i18nString(UIStrings.deleteHighlight)} @click=${():void => this.#onDeleteHighlightClick(highlightInfo)}>
-          <${IconButton.Icon.Icon.litTagName} .data=${{
-            iconName: 'close-icon',
-            color: 'black',
-            width: '7px',
-            } as IconButton.Icon.IconData}>
-          </${IconButton.Icon.Icon.litTagName}>
-        </button>
+        <div class="delete-highlight-container">
+          <button class="delete-highlight-button" title=${
+              i18nString(UIStrings.deleteHighlight)} @click=${():void => this.#onDeleteHighlightClick(highlightInfo)}>
+            <${IconButton.Icon.Icon.litTagName} .data=${{
+              iconName: 'close-icon',
+              color: 'var(--color-text-primary)',
+              width: '7px',
+              } as IconButton.Icon.IconData}>
+            </${IconButton.Icon.Icon.litTagName}>
+          </button>
+        </div>
       </div>
     `;
     // clang-format off

package/front_end/ui/components/linear_memory_inspector/linearMemoryHighlightChipList.css

@@ -5,81 +5,99 @@
  */
 
 .highlight-chip-list {
-  min-height: 24px;
+  min-height: 20px;
   display: flex;
   flex-wrap: wrap;
   justify-content: left;
   align-items: center;
   background-color: var(--color-background);
-  color: var(--color-text-primary);
+  margin: 8px 0;
+  gap: 8px;
+  row-gap: 6px;
 }
 
 .highlight-chip {
-  background: transparent;
-  color: var(--color-text-primary);
-  border: 1px solid var(--color-background-elevation-2);
-  height: 15px;
-  margin-right: 5px;
-  padding: 1px;
+  background: var(--color-background);
+  border: 1px solid var(--color-button-secondary-border);
+  height: 18px;
   border-radius: 4px;
-  margin-bottom: 1px;
-  display: flex;
+  flex: 0 0 auto;
+  max-width: 250px;
+  position: relative;
+  padding: 0 6px;
 }
 
 .highlight-chip:hover {
   background-color: var(--color-background-elevation-1);
 }
 
+.delete-highlight-container {
+  display: none;
+  height: 100%;
+  position: absolute;
+  right: 0;
+  top: 0;
+  border-radius: 4px;
+  width: 24px;
+  align-items: center;
+  justify-content: center;
+}
+
 .delete-highlight-button {
-  width: 15px;
-  height: 15px;
-  border: none;
-  padding: 0;
   cursor: pointer;
-  background: none;
-  border-radius: 50%;
+  width: 13px;
+  height: 13px;
+  border: none;
+  background-color: transparent;
   display: flex;
-  justify-content: center;
   align-items: center;
-  margin: 0 2px;
+  justify-content: center;
 }
 
 .delete-highlight-button:hover {
   background-color: var(--color-details-hairline);
+  border-radius: 50%;
 }
 
-.highlight-chip > .delete-highlight-button {
-  visibility: hidden;
+.highlight-chip:hover > .delete-highlight-container {
+  display: flex;
+  /* To avoid issues with stacking semi-transparent colors, we use a hardcoded solid color here. */
+  background: linear-gradient(90deg, transparent 0%, rgb(241 243 244) 25%); /* stylelint-disable-line plugin/use_theme_colors */
 }
 
-.highlight-chip:hover > .delete-highlight-button {
-  visibility: visible;
+:host-context(.-theme-with-dark-background) .highlight-chip:hover > .delete-highlight-container {
+  display: flex;
+  /* To avoid issues with stacking semi-transparent colors, we use a hardcoded solid color here. */
+  background: linear-gradient(90deg, transparent 0%, rgb(41 42 45) 25%); /* stylelint-disable-line plugin/use_theme_colors */
 }
 
 .jump-to-highlight-button {
   cursor: pointer;
-  padding: 0 0 0 4px;
+  padding: 0;
   border: none;
   background: none;
-  display: flex;
+  height: 100%;
   align-items: center;
-}
-
-.jump-to-highlight-button:hover {
-  color: var(--color-text-primary);
+  max-width: 100%;
+  overflow: hidden;
 }
 
 .delete-highlight-button devtools-icon {
-  --icon-color: var(--color-text-primary);
+  width: 13px;
+  height: 13px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
 }
 
 .source-code {
   font-family: var(--source-code-font-family);
   font-size: var(--source-code-font-size);
-  max-width: 250px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  color: var(--color-text-primary);
 }
 
 .value {

package/front_end/ui/components/text_prompt/TextPrompt.ts

@@ -68,7 +68,7 @@ export class TextPrompt extends HTMLElement {
 
   onInput(): void {
     this.#suggestion().value = this.#text();
-    this.dispatchEvent(new PromptInputEvent(this.#text().trim()));
+    this.dispatchEvent(new PromptInputEvent(this.#text()));
   }
 
   onKeyDown(event: KeyboardEvent): void {

package/front_end/ui/legacy/components/quick_open/FilteredListWidget.ts

@@ -209,7 +209,7 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
   }
 
   private cleanValue(): string {
-    return this.query.substring(this.prefix.length);
+    return this.query.substring(this.prefix.length).trim();
   }
 
   wasShown(): void {

package/package.json

@@ -56,5 +56,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.1035963"
+  "version": "1.0.1037221"
 }