Changeset 243614 in webkit

Timestamp:

Mar 28, 2019 11:47:05 AM (5 years ago)

Author:

Joseph Pecoraro

Message:

Web Inspector: Show Resource Initiator in Network Tab detail views
​https://bugs.webkit.org/show_bug.cgi?id=196316
<rdar://problem/49352679>

Reviewed by Devin Rousso.

• UserInterface/Controllers/NetworkManager.js:

(WI.NetworkManager.prototype.resourceRequestWillBeSent):
(WI.NetworkManager.prototype.resourceRequestWasServedFromMemoryCache):
(WI.NetworkManager.prototype._initiatorCallFramesFromPayload):
Initialize call frames from the initiator payload.

• UserInterface/Models/Resource.js:

(WI.Resource.prototype.get initiatorCallFrames):
Initialization and accessor.

• UserInterface/Views/CallFrameTreeElement.js:

(WI.CallFrameTreeElement):
Selecting a native element won't do anything so just don't allow selection.

• UserInterface/Views/ResourceHeadersContentView.css:

(.resource-headers .go-to-link):
(.resource-headers .call-stack):
(.resource-headers .call-stack:hover):
(@media (prefers-color-scheme: dark)):

• UserInterface/Views/ResourceHeadersContentView.js:

(WI.ResourceHeadersContentView):
(WI.ResourceHeadersContentView.prototype.hidden):
(WI.ResourceHeadersContentView.prototype._refreshSummarySection):
Add an "Initiator" line in the summary with a way to view the whole
initiator backtrace if one exists.

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Controllers/NetworkManager.js (modified) (3 diffs)
• UserInterface/Images/CallStack.svg (added)
• UserInterface/Models/Resource.js (modified) (3 diffs)
• UserInterface/Views/CallFrameTreeElement.js (modified) (1 diff)
• UserInterface/Views/ResourceHeadersContentView.css (modified) (1 diff)
• UserInterface/Views/ResourceHeadersContentView.js (modified) (4 diffs)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2019-03-28  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Web Inspector: Show Resource Initiator in Network Tab detail views
+        https://bugs.webkit.org/show_bug.cgi?id=196316
+        <rdar://problem/49352679>
+
+        Reviewed by Devin Rousso.
+
+        * UserInterface/Controllers/NetworkManager.js:
+        (WI.NetworkManager.prototype.resourceRequestWillBeSent):
+        (WI.NetworkManager.prototype.resourceRequestWasServedFromMemoryCache):
+        (WI.NetworkManager.prototype._initiatorCallFramesFromPayload):
+        Initialize call frames from the initiator payload.
+
+        * UserInterface/Models/Resource.js:
+        (WI.Resource.prototype.get initiatorCallFrames):
+        Initialization and accessor.
+
+        * UserInterface/Views/CallFrameTreeElement.js:
+        (WI.CallFrameTreeElement):
+        Selecting a native element won't do anything so just don't allow selection.
+
+        * UserInterface/Views/ResourceHeadersContentView.css:
+        (.resource-headers .go-to-link):
+        (.resource-headers .call-stack):
+        (.resource-headers .call-stack:hover):
+        (@media (prefers-color-scheme: dark)):
+        * UserInterface/Views/ResourceHeadersContentView.js:
+        (WI.ResourceHeadersContentView):
+        (WI.ResourceHeadersContentView.prototype.hidden):
+        (WI.ResourceHeadersContentView.prototype._refreshSummarySection):
+        Add an "Initiator" line in the summary with a way to view the whole
+        initiator backtrace if one exists.
+
 2019-03-26  Devin Rousso  <drousso@apple.com>
 

trunk/Source/WebInspectorUI/UserInterface/Controllers/NetworkManager.js

@@ -307 +307 @@
             requestSentTimestamp: elapsedTime,
             requestSentWalltime: walltime,
+            initiatorCallFrames: this._initiatorCallFramesFromPayload(initiator),
             initiatorSourceCodeLocation: this._initiatorSourceCodeLocationFromPayload(initiator),
             initiatorNode: this._initiatorNodeFromPayload(initiator),
@@ -451 +452 @@
             requestMethod: "GET",
             requestSentTimestamp: elapsedTime,
+            initiatorCallFrames: this._initiatorCallFramesFromPayload(initiator),
             initiatorSourceCodeLocation: this._initiatorSourceCodeLocationFromPayload(initiator),
             initiatorNode: this._initiatorNodeFromPayload(initiator),
@@ -763 +765 @@
     }
 
+    _initiatorCallFramesFromPayload(initiatorPayload)
+    {
+        if (!initiatorPayload)
+            return null;
+
+        let callFrames = initiatorPayload.stackTrace;
+        if (!callFrames)
+            return null;
+        
+        return callFrames.map((payload) => WI.CallFrame.fromPayload(WI.assumingMainTarget(), payload));
+    }
+
     _initiatorSourceCodeLocationFromPayload(initiatorPayload)
     {

trunk/Source/WebInspectorUI/UserInterface/Models/Resource.js

@@ -27 +27 @@
 WI.Resource = class Resource extends WI.SourceCode
 {
-    constructor(url, {mimeType, type, loaderIdentifier, targetId, requestIdentifier, requestMethod, requestHeaders, requestData, requestSentTimestamp, requestSentWalltime, initiatorSourceCodeLocation, initiatorNode, originalRequestWillBeSentTimestamp} = {})
+    constructor(url, {mimeType, type, loaderIdentifier, targetId, requestIdentifier, requestMethod, requestHeaders, requestData, requestSentTimestamp, requestSentWalltime, initiatorCallFrames, initiatorSourceCodeLocation, initiatorNode, originalRequestWillBeSentTimestamp} = {})
     {
         super();
@@ -53 +53 @@
         this._serverTimingEntries = null;
         this._parentFrame = null;
+        this._initiatorCallFrames = initiatorCallFrames || null;
         this._initiatorSourceCodeLocation = initiatorSourceCodeLocation || null;
         this._initiatorNode = initiatorNode || null;
@@ -302 +303 @@
     get requestMethod() { return this._requestMethod; }
     get requestData() { return this._requestData; }
+    get initiatorCallFrames() { return this._initiatorCallFrames; }
     get initiatorSourceCodeLocation() { return this._initiatorSourceCodeLocation; }
     get initiatorNode() { return this._initiatorNode; }

trunk/Source/WebInspectorUI/UserInterface/Views/CallFrameTreeElement.js

@@ -45 +45 @@
         if (this._callFrame.nativeCode || !this._callFrame.sourceCodeLocation) {
             this.subtitle = "";
+            this.selectable = false;
             return;
         }

trunk/Source/WebInspectorUI/UserInterface/Views/ResourceHeadersContentView.css

@@ -48 +48 @@
     color: var(--network-pseudo-header-color);
 }
+
+.resource-headers .go-to-link {
+    -webkit-user-select: text;
+}
+
+.resource-headers .pair.initiator > .value {
+    display: inline-flex;
+    align-items: center;
+}
+
+.resource-headers .call-stack {
+    position: relative;
+    width: 16px;
+    height: 13px;
+    margin-left: 3px;
+    content: url(../Images/CallStack.svg);
+    opacity: 0.5;
+    -webkit-user-select: none;
+}
+
+.resource-headers .call-stack:hover {
+    opacity: 0.8;
+}
+
+@media (prefers-color-scheme: dark) {
+    .resource-headers .call-stack {
+        filter: invert();
+    }
+}

trunk/Source/WebInspectorUI/UserInterface/Views/ResourceHeadersContentView.js

@@ -46 +46 @@
         this._automaticallyRevealFirstSearchResult = false;
         this._bouncyHighlightElement = null;
+        this._popover = null;
+        this._popoverCallStackIconElement = null;
 
         this._redirectDetailsSections = [];
@@ -119 +121 @@
             this._needsResponseHeadersRefresh = false;
         }
+    }
+
+    hidden()
+    {
+        super.hidden();
+
+        if (this._popover)
+            this._popover.dismiss();
     }
 
@@ -252 +262 @@
         if (this._resource.remoteAddress)
             this._summarySection.appendKeyValuePair(WI.UIString("Address"), this._resource.remoteAddress);
+
+        let initiatorLocation = this._resource.initiatorSourceCodeLocation;
+        if (initiatorLocation) {
+
+            let fragment = document.createDocumentFragment();
+
+            const options = {
+                dontFloat: true,
+                ignoreSearchTab: true,
+            };
+            let link = WI.createSourceCodeLocationLink(initiatorLocation, options);
+            fragment.appendChild(link);
+
+            let callFrames = this._resource.initiatorCallFrames;
+            if (callFrames) {
+                this._popoverCallStackIconElement = document.createElement("img");
+                this._popoverCallStackIconElement.className = "call-stack";
+                fragment.appendChild(this._popoverCallStackIconElement);
+
+                this._popoverCallStackIconElement.addEventListener("click", (event) => {
+                    if (!this._popover) {
+                        this._popover = new WI.Popover(this);
+                        this._popover.windowResizeHandler = () => { this._presentPopoverBelowCallStackElement() };
+                    }
+
+                    const selectable = false;
+                    let callFramesTreeOutline = new WI.TreeOutline(selectable);
+                    callFramesTreeOutline.disclosureButtons = false;
+                    let callFrameTreeController = new WI.CallFrameTreeController(callFramesTreeOutline);
+                    callFrameTreeController.callFrames = callFrames;
+
+                    let popoverContent = document.createElement("div");
+                    popoverContent.appendChild(callFrameTreeController.treeOutline.element);
+                    this._popover.content = popoverContent;
+
+                    this._presentPopoverBelowCallStackElement();
+                });
+            }
+
+            let pair = this._summarySection.appendKeyValuePair(WI.UIString("Initiator"), fragment);
+            pair.classList.add("initiator");
+
+            if (this._popover && this._popover.visible)
+                this._presentPopoverBelowCallStackElement();
+        }
     }
 
@@ -469 +524 @@
     }
 
+    _presentPopoverBelowCallStackElement()
+    {
+        let bounds = WI.Rect.rectFromClientRect(this._popoverCallStackIconElement.getBoundingClientRect());
+        this._popover.present(bounds.pad(2), [WI.RectEdge.MAX_Y, WI.RectEdge.MIN_Y, WI.RectEdge.MAX_X]);
+    }
+
     _resourceMetricsDidChange(event)
     {