chrome-devtools-frontend 1.0.1036501 → 1.0.1036726

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/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/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/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/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.1036501"
+  "version": "1.0.1036726"
 }