Title: [217690] trunk/Source/WebInspectorUI
Revision
217690
Author
nvasil...@apple.com
Date
2017-06-01 17:50:17 -0700 (Thu, 01 Jun 2017)

Log Message

Web Inspector: Web Sockets: Unable to inspect a WebSocket that receives >50 messages per second
https://bugs.webkit.org/show_bug.cgi?id=171904
<rdar://problem/32095863>

Reviewed by Matt Baker.

Every size increase of a resource causes a sidebar item to be re-attached to the DOM. Sending or
receiving a WebSocket message causes a size increase. When size increase happens too frequently,
the go-to arrow starts to flicker and becomes unclickable. This patch makes sure a sidebar item gets
re-attached only when its position (index) changes.

* UserInterface/Views/NetworkSidebarPanel.js:
Add the go-to arrow and close buttons when treeElement.status is a spinner element.

(WebInspector.NetworkSidebarPanel.prototype.treeElementAddedOrChanged):
* UserInterface/Views/ResourceTreeElement.js:
(WebInspector.ResourceTreeElement.prototype._updateStatus):
Setting status to "" removes the go-to arrow and close buttons in the Network tab.
Only set status to "" to remove the spinner.

* UserInterface/Views/TimelineDataGrid.js:
(WebInspector.TimelineDataGrid.prototype._refreshDirtyDataGridNodes):
* UserInterface/Views/TreeOutline.js:
(WebInspector.TreeOutline.prototype.reattachIfIndexChanged): Added.

Modified Paths

Diff

Modified: trunk/Source/WebInspectorUI/ChangeLog (217689 => 217690)


--- trunk/Source/WebInspectorUI/ChangeLog	2017-06-01 23:50:54 UTC (rev 217689)
+++ trunk/Source/WebInspectorUI/ChangeLog	2017-06-02 00:50:17 UTC (rev 217690)
@@ -1,3 +1,30 @@
+2017-06-01  Nikita Vasilyev  <nvasil...@apple.com>
+
+        Web Inspector: Web Sockets: Unable to inspect a WebSocket that receives >50 messages per second
+        https://bugs.webkit.org/show_bug.cgi?id=171904
+        <rdar://problem/32095863>
+
+        Reviewed by Matt Baker.
+
+        Every size increase of a resource causes a sidebar item to be re-attached to the DOM. Sending or
+        receiving a WebSocket message causes a size increase. When size increase happens too frequently,
+        the go-to arrow starts to flicker and becomes unclickable. This patch makes sure a sidebar item gets
+        re-attached only when its position (index) changes.
+
+        * UserInterface/Views/NetworkSidebarPanel.js:
+        Add the go-to arrow and close buttons when treeElement.status is a spinner element.
+
+        (WebInspector.NetworkSidebarPanel.prototype.treeElementAddedOrChanged):
+        * UserInterface/Views/ResourceTreeElement.js:
+        (WebInspector.ResourceTreeElement.prototype._updateStatus):
+        Setting status to "" removes the go-to arrow and close buttons in the Network tab.
+        Only set status to "" to remove the spinner.
+
+        * UserInterface/Views/TimelineDataGrid.js:
+        (WebInspector.TimelineDataGrid.prototype._refreshDirtyDataGridNodes):
+        * UserInterface/Views/TreeOutline.js:
+        (WebInspector.TreeOutline.prototype.reattachIfIndexChanged): Added.
+
 2017-05-31  Devin Rousso  <drou...@apple.com>
 
         Web Inspector: Add Debug view to Settings tab for debug settings and experimental features

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/NetworkSidebarPanel.js (217689 => 217690)


--- trunk/Source/WebInspectorUI/UserInterface/Views/NetworkSidebarPanel.js	2017-06-01 23:50:54 UTC (rev 217689)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/NetworkSidebarPanel.js	2017-06-02 00:50:17 UTC (rev 217690)
@@ -157,7 +157,7 @@
 
     treeElementAddedOrChanged(treeElement)
     {
-        if (treeElement.status || !treeElement.treeOutline)
+        if (treeElement.status && treeElement.status[WebInspector.NetworkSidebarPanel.TreeElementStatusButtonSymbol] || !treeElement.treeOutline)
             return;
 
         var fragment = document.createDocumentFragment();
@@ -173,6 +173,7 @@
         fragment.appendChild(goToButton.element);
 
         treeElement.status = fragment;
+        treeElement.status[WebInspector.NetworkSidebarPanel.TreeElementStatusButtonSymbol] = true;
     }
 
     // Private
@@ -230,5 +231,6 @@
 
 WebInspector.NetworkSidebarPanel.ResourceTypeSymbol = Symbol("resource-type");
 WebInspector.NetworkSidebarPanel.TreeElementSymbol = Symbol("tree-element");
+WebInspector.NetworkSidebarPanel.TreeElementStatusButtonSymbol = Symbol("tree-element-status-button");
 
 WebInspector.NetworkSidebarPanel.ShowingNetworkGridContentViewCookieKey = "network-sidebar-panel-showing-network-grid-content-view";

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ResourceTreeElement.js (217689 => 217690)


--- trunk/Source/WebInspectorUI/UserInterface/Views/ResourceTreeElement.js	2017-06-01 23:50:54 UTC (rev 217689)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ResourceTreeElement.js	2017-06-02 00:50:17 UTC (rev 217690)
@@ -177,10 +177,12 @@
 
         if (this._resource.finished || this._resource.failed) {
             // Remove the spinner.
-            this.status = "";
+            if (this.status && this.status[WebInspector.ResourceTreeElement.SpinnerSymbol])
+                this.status = "";
         } else {
             let spinner = new WebInspector.IndeterminateProgressSpinner;
             this.status = spinner.element;
+            this.status[WebInspector.ResourceTreeElement.SpinnerSymbol] = true;
         }
     }
 
@@ -206,3 +208,5 @@
 
 WebInspector.ResourceTreeElement.ResourceIconStyleClassName = "resource-icon";
 WebInspector.ResourceTreeElement.FailedStyleClassName = "failed";
+
+WebInspector.ResourceTreeElement.SpinnerSymbol = Symbol("spinner");

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.js (217689 => 217690)


--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.js	2017-06-01 23:50:54 UTC (rev 217689)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.js	2017-06-02 00:50:17 UTC (rev 217690)
@@ -267,17 +267,8 @@
             let treeElement = this._treeOutlineDataGridSynchronizer.treeElementForDataGridNode(dataGridNode);
             console.assert(treeElement);
 
-            let wasSelected = treeElement.selected;
+            treeOutline.reattachIfIndexChanged(treeElement, insertionIndex);
 
-            console.assert(!treeElement.parent || treeElement.parent === treeOutline);
-            if (treeElement.parent === treeOutline)
-                treeOutline.removeChild(treeElement);
-
-            treeOutline.insertChild(treeElement, insertionIndex);
-
-            if (wasSelected)
-                treeElement.select();
-
             // Adding the tree element back to the tree outline subjects it to filters.
             // Make sure we keep the hidden state in-sync while the synchronizer is disabled.
             dataGridNode.element.classList.toggle("hidden", treeElement.hidden);

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js (217689 => 217690)


--- trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js	2017-06-01 23:50:54 UTC (rev 217689)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js	2017-06-02 00:50:17 UTC (rev 217690)
@@ -346,6 +346,23 @@
         this.children = [];
     }
 
+    reattachIfIndexChanged(treeElement, insertionIndex)
+    {
+        if (this.children[insertionIndex] === treeElement)
+            return;
+
+        let wasSelected = treeElement.selected;
+
+        console.assert(!treeElement.parent || treeElement.parent === this);
+        if (treeElement.parent === this)
+            this.removeChild(treeElement);
+
+        this.insertChild(treeElement, insertionIndex);
+
+        if (wasSelected)
+            treeElement.select();
+    }
+
     _rememberTreeElement(element)
     {
         if (!this._knownTreeElements[element.identifier])
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to