Web Inspector: Network: remove unnecessary media event tracking
authordrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 2 Nov 2018 00:27:19 +0000 (00:27 +0000)
committerdrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 2 Nov 2018 00:27:19 +0000 (00:27 +0000)
https://bugs.webkit.org/show_bug.cgi?id=191174

Reviewed by Joseph Pecoraro.

Source/WebCore:

No new tests, as this simply removes some event listeners for the WebInspector frontend.

* inspector/agents/InspectorDOMAgent.cpp:
(WebCore::InspectorDOMAgent::addEventListenersToNode):

Source/WebInspectorUI:

Renames "Group by Node" to "Group Media Requests" for clarity.

* UserInterface/Views/NetworkTableContentView.js:
(WI.NetworkTableContentView):
(WI.NetworkTableContentView.prototype.reset):
(WI.NetworkTableContentView.prototype.showRepresentedObject):
(WI.NetworkTableContentView.prototype.networkDetailViewClose):
(WI.NetworkTableContentView.prototype._populateNameCell):
(WI.NetworkTableContentView.prototype._populateWaterfallGraph.createDOMEventLine):
(WI.NetworkTableContentView.prototype._populateWaterfallGraph):
(WI.NetworkTableContentView.prototype.layout):
(WI.NetworkTableContentView.prototype._entryForDOMNode):
(WI.NetworkTableContentView.prototype._handleGroupByDOMNodeCheckedDidChange):
(WI.NetworkTableContentView.prototype._restoreSelectedRow):
(WI.NetworkTableContentView.prototype._handleResourceEntryMousedownWaterfall):
(WI.NetworkTableContentView.prototype._handleNodeEntryMousedownWaterfall):
(WI.NetworkTableContentView.prototype._handleMousedownWaterfall):
* UserInterface/Views/NetworkTableContentView.css:
(.network-table .data-container .cell.name .range): Added.
(.network-table .data-container .cell.name .range::before): Added.
(.network-table:focus .data-container li.selected .cell.name .range): Added.
(@media (prefers-dark-interface) .network-table .data-container .cell.name .range): Added.
Always display the "Byte Range" title as a "subtitle", regardless of the media requests
setting being toggled.
Drive-by: update the position of the waterfall popover whenever the time range changes.
Drive-by: close the details view if a node is selected and the media requests setting is
turned off.

* UserInterface/Views/Popover.js:
(WI.Popover.prototype.resize): Added.
(WI.Popover.prototype.handleEvent):

* Localizations/en.lproj/localizedStrings.js:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@237708 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebCore/ChangeLog
Source/WebCore/inspector/agents/InspectorDOMAgent.cpp
Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.css
Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.js
Source/WebInspectorUI/UserInterface/Views/Popover.js

index 57c1ddc..c389aaf 100644 (file)
@@ -1,3 +1,15 @@
+2018-11-01  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: Network: remove unnecessary media event tracking
+        https://bugs.webkit.org/show_bug.cgi?id=191174
+
+        Reviewed by Joseph Pecoraro.
+
+        No new tests, as this simply removes some event listeners for the WebInspector frontend.
+
+        * inspector/agents/InspectorDOMAgent.cpp:
+        (WebCore::InspectorDOMAgent::addEventListenersToNode):
+
 2018-11-01  Chris Dumez  <cdumez@apple.com>
 
         Location object sans browsing context
index c7cf6cc..2b34285 100644 (file)
@@ -2168,23 +2168,18 @@ void InspectorDOMAgent::addEventListenersToNode(Node& node)
         createEventListener(eventNames().abortEvent);
         createEventListener(eventNames().canplayEvent);
         createEventListener(eventNames().canplaythroughEvent);
-        createEventListener(eventNames().durationchangeEvent);
         createEventListener(eventNames().emptiedEvent);
         createEventListener(eventNames().endedEvent);
-        createEventListener(eventNames().errorEvent);
         createEventListener(eventNames().loadeddataEvent);
         createEventListener(eventNames().loadedmetadataEvent);
         createEventListener(eventNames().loadstartEvent);
         createEventListener(eventNames().pauseEvent);
         createEventListener(eventNames().playEvent);
         createEventListener(eventNames().playingEvent);
-        createEventListener(eventNames().ratechangeEvent);
         createEventListener(eventNames().seekedEvent);
         createEventListener(eventNames().seekingEvent);
         createEventListener(eventNames().stalledEvent);
         createEventListener(eventNames().suspendEvent);
-        createEventListener(eventNames().timeupdateEvent);
-        createEventListener(eventNames().volumechangeEvent);
         createEventListener(eventNames().waitingEvent);
 
         if (!m_mediaMetricsTimer.isActive())
index 0652af2..9bc54b0 100644 (file)
@@ -1,5 +1,46 @@
 2018-11-01  Devin Rousso  <drousso@apple.com>
 
+        Web Inspector: Network: remove unnecessary media event tracking
+        https://bugs.webkit.org/show_bug.cgi?id=191174
+
+        Reviewed by Joseph Pecoraro.
+
+        Renames "Group by Node" to "Group Media Requests" for clarity.
+
+        * UserInterface/Views/NetworkTableContentView.js:
+        (WI.NetworkTableContentView):
+        (WI.NetworkTableContentView.prototype.reset):
+        (WI.NetworkTableContentView.prototype.showRepresentedObject):
+        (WI.NetworkTableContentView.prototype.networkDetailViewClose):
+        (WI.NetworkTableContentView.prototype._populateNameCell):
+        (WI.NetworkTableContentView.prototype._populateWaterfallGraph.createDOMEventLine):
+        (WI.NetworkTableContentView.prototype._populateWaterfallGraph):
+        (WI.NetworkTableContentView.prototype.layout):
+        (WI.NetworkTableContentView.prototype._entryForDOMNode):
+        (WI.NetworkTableContentView.prototype._handleGroupByDOMNodeCheckedDidChange):
+        (WI.NetworkTableContentView.prototype._restoreSelectedRow):
+        (WI.NetworkTableContentView.prototype._handleResourceEntryMousedownWaterfall):
+        (WI.NetworkTableContentView.prototype._handleNodeEntryMousedownWaterfall):
+        (WI.NetworkTableContentView.prototype._handleMousedownWaterfall):
+        * UserInterface/Views/NetworkTableContentView.css:
+        (.network-table .data-container .cell.name .range): Added.
+        (.network-table .data-container .cell.name .range::before): Added.
+        (.network-table:focus .data-container li.selected .cell.name .range): Added.
+        (@media (prefers-dark-interface) .network-table .data-container .cell.name .range): Added.
+        Always display the "Byte Range" title as a "subtitle", regardless of the media requests
+        setting being toggled.
+        Drive-by: update the position of the waterfall popover whenever the time range changes.
+        Drive-by: close the details view if a node is selected and the media requests setting is
+        turned off.
+
+        * UserInterface/Views/Popover.js:
+        (WI.Popover.prototype.resize): Added.
+        (WI.Popover.prototype.handleEvent):
+
+        * Localizations/en.lproj/localizedStrings.js:
+
+2018-11-01  Devin Rousso  <drousso@apple.com>
+
         Web Inspector: Uncaught Exception: TypeError: null is not an object (evaluating 'mouseBlock.addEventListener')
         https://bugs.webkit.org/show_bug.cgi?id=191020
 
index f708c7e..4db8c16 100644 (file)
@@ -434,6 +434,7 @@ localizedStrings["Global Lexical Environment"] = "Global Lexical Environment";
 localizedStrings["Global Variables"] = "Global Variables";
 localizedStrings["Grammar"] = "Grammar";
 localizedStrings["Group"] = "Group";
+localizedStrings["Group Media Requests"] = "Group Media Requests";
 localizedStrings["Group by Event"] = "Group by Event";
 localizedStrings["Group by Node"] = "Group by Node";
 localizedStrings["Grouping Method"] = "Grouping Method";
index 84e9761..784070d 100644 (file)
@@ -86,6 +86,18 @@ body[dir=rtl] .network-table .cell.dom-node.name .disclosure {
     -webkit-padding-start: calc(var(--item-padding-start) + var(--item-disclosure-width));
 }
 
+.network-table .data-container .cell.name .range {
+    color: hsla(0, 0%, 0%, 0.7);
+}
+
+.network-table .data-container .cell.name .range::before {
+    content: " — ";
+}
+
+.network-table:focus .data-container li.selected .cell.name .range {
+    color: hsla(0, 0%, 100%, 0.9);
+}
+
 .network-table li:not(.selected) .cell:matches(.cache-type, .multiple) {
     color: var(--text-color-gray-medium);
 }
@@ -296,4 +308,8 @@ body[dir=rtl] .waterfall .block {
     .network-table .cell.domain > .lock {
         filter: var(--filter-invert);
     }
+
+    .network-table .data-container .cell.name .range {
+        color: var(--text-color-secondary);
+    }
 }
index 58bc0e7..603a649 100644 (file)
@@ -84,7 +84,7 @@ WI.NetworkTableContentView = class NetworkTableContentView extends WI.ContentVie
         this._typeFilterScopeBar = new WI.ScopeBar("network-type-filter-scope-bar", typeFilterScopeBarItems, typeFilterScopeBarItems[0]);
         this._typeFilterScopeBar.addEventListener(WI.ScopeBar.Event.SelectionChanged, this._typeFilterScopeBarSelectionChanged, this);
 
-        this._groupByDOMNodeNavigationItem = new WI.CheckboxNavigationItem("group-by-node", WI.UIString("Group by Node"), WI.settings.groupByDOMNode.value);
+        this._groupByDOMNodeNavigationItem = new WI.CheckboxNavigationItem("group-by-node", WI.UIString("Group Media Requests"), WI.settings.groupByDOMNode.value);
         this._groupByDOMNodeNavigationItem.addEventListener(WI.CheckboxNavigationItem.Event.CheckedDidChange, this._handleGroupByDOMNodeCheckedDidChange, this);
 
         this._urlFilterSearchText = null;
@@ -278,7 +278,7 @@ WI.NetworkTableContentView = class NetworkTableContentView extends WI.ContentVie
         this._updateExportButton();
 
         if (this._table) {
-            this._selectedResource = null;
+            this._selectedObject = null;
             this._table.reloadData();
             this._hidePopover();
             this._hideDetailView();
@@ -291,7 +291,7 @@ WI.NetworkTableContentView = class NetworkTableContentView extends WI.ContentVie
 
         let rowIndex = this._rowIndexForRepresentedObject(representedObject);
         if (rowIndex === -1) {
-            this._selectedResource = null;
+            this._selectedObject = null;
             this._table.deselectAll();
             this._hideDetailView();
             return;
@@ -306,7 +306,7 @@ WI.NetworkTableContentView = class NetworkTableContentView extends WI.ContentVie
 
     networkDetailViewClose(networkDetailView)
     {
-        this._selectedResource = null;
+        this._selectedObject = null;
         this._table.deselectAll();
         this._hideDetailView();
     }
@@ -511,21 +511,21 @@ WI.NetworkTableContentView = class NetworkTableContentView extends WI.ContentVie
 
         cell.classList.add(WI.ResourceTreeElement.ResourceIconStyleClassName);
 
-        let nameElement = cell.appendChild(document.createElement("span"));
-
         if (WI.settings.groupByDOMNode.value && resource.initiatorNode) {
             let nodeEntry = this._domNodeEntries.get(resource.initiatorNode);
-            if (nodeEntry.initiatedResourceEntries.length > 1 || nodeEntry.domNode.domEvents.length) {
+            if (nodeEntry.initiatedResourceEntries.length > 1 || nodeEntry.domNode.domEvents.length)
                 cell.classList.add("child");
-
-                let range = resource.requestedByteRange;
-                if (range)
-                    nameElement.textContent = WI.UIString("Byte Range %s\u2013%s").format(range.start, range.end);
-            }
         }
 
-        if (!nameElement.textContent)
-            nameElement.textContent = entry.name;
+        let nameElement = cell.appendChild(document.createElement("span"));
+        nameElement.textContent = entry.name;
+
+        let range = resource.requestedByteRange;
+        if (range) {
+            let rangeElement = nameElement.appendChild(document.createElement("span"));
+            rangeElement.classList.add("range");
+            rangeElement.textContent = WI.UIString("Byte Range %s\u2013%s").format(range.start, range.end);
+        }
 
         cell.title = resource.url;
         cell.classList.add(WI.Resource.classNameForResource(resource));
@@ -712,7 +712,7 @@ WI.NetworkTableContentView = class NetworkTableContentView extends WI.ContentVie
 
                 for (let i = domEvents.length - 1; i >= 0; --i) {
                     let domEvent = domEvents[i];
-                    if (domEvent.eventName === "play" || domEvent.eventName === "playing" || domEvent.eventName === "timeupdate") {
+                    if (domEvent.eventName === "play" || domEvent.eventName === "playing") {
                         playing = true;
                         break;
                     }
@@ -746,8 +746,11 @@ WI.NetworkTableContentView = class NetworkTableContentView extends WI.ContentVie
                 eventElement.addEventListener("mousedown", (event) => {
                     if (event.button !== 0 || event.ctrlKey)
                         return;
-                    this._handleNodeEntryMousedownWaterfall(eventElement, entry, domEvents);
+                    this._handleNodeEntryMousedownWaterfall(entry, domEvents);
                 });
+
+                for (let domEvent of domEvents)
+                    entry.domEventElements.set(domEvent, eventElement);
             }
 
             return;
@@ -798,7 +801,7 @@ WI.NetworkTableContentView = class NetworkTableContentView extends WI.ContentVie
         mouseBlock.addEventListener("mousedown", (event) => {
             if (event.button !== 0 || event.ctrlKey)
                 return;
-            this._handleResourceEntryMousedownWaterfall(mouseBlock, entry);
+            this._handleResourceEntryMousedownWaterfall(entry);
         });
 
         // Super small visualization.
@@ -1091,6 +1094,12 @@ WI.NetworkTableContentView = class NetworkTableContentView extends WI.ContentVie
         this._positionDetailView();
         this._positionEmptyFilterMessage();
         this._updateExportButton();
+
+        // FIXME: https://webkit.org/b/191176
+        setTimeout(() => {
+            if (this._waterfallPopover)
+                this._waterfallPopover.resize();
+        });
     }
 
     handleClearShortcut(event)
@@ -1550,6 +1559,7 @@ WI.NetworkTableContentView = class NetworkTableContentView extends WI.ContentVie
         return {
             domNode,
             initiatedResourceEntries: [],
+            domEventElements: new Map,
             expanded: true,
         };
     }
@@ -1775,9 +1785,15 @@ WI.NetworkTableContentView = class NetworkTableContentView extends WI.ContentVie
     {
         WI.settings.groupByDOMNode.value = this._groupByDOMNodeNavigationItem.checked;
 
-        if (!WI.settings.groupByDOMNode.value)
+        if (!WI.settings.groupByDOMNode.value) {
             this._table.element.classList.remove("grouped");
 
+            if (this._selectedObject && this._selectedObject instanceof WI.DOMNode) {
+                this._selectedObject = null;
+                this._hideDetailView();
+            }
+        }
+
         this._updateSort();
         this._updateFilteredEntries();
         this._reloadTable();
@@ -1824,7 +1840,7 @@ WI.NetworkTableContentView = class NetworkTableContentView extends WI.ContentVie
 
         let rowIndex = this._rowIndexForRepresentedObject(this._selectedObject);
         if (rowIndex === -1) {
-            this._selectedResource = null;
+            this._selectedObject = null;
             this._table.deselectAll();
             return;
         }
@@ -1897,19 +1913,34 @@ WI.NetworkTableContentView = class NetworkTableContentView extends WI.ContentVie
         return contentElement;
     }
 
-    _handleResourceEntryMousedownWaterfall(targetElement, resourceEntry)
+    _handleResourceEntryMousedownWaterfall(resourceEntry)
     {
         let popoverContentElement = this._waterfallPopoverContentForResourceEntry(resourceEntry);
-        this._handleMousedownWaterfall(resourceEntry, targetElement, popoverContentElement);
+        this._handleMousedownWaterfall(resourceEntry, popoverContentElement, (cell) => {
+            return cell.querySelector(".block.mouse-tracking");
+        });
     }
 
-    _handleNodeEntryMousedownWaterfall(targetElement, nodeEntry, domEvents)
+    _handleNodeEntryMousedownWaterfall(nodeEntry, domEvents)
     {
         let popoverContentElement = this._waterfallPopoverContentForNodeEntry(nodeEntry, domEvents);
-        this._handleMousedownWaterfall(nodeEntry, targetElement, popoverContentElement);
+        this._handleMousedownWaterfall(nodeEntry, popoverContentElement, (cell) => {
+            let domEventElement = nodeEntry.domEventElements.get(domEvents[0]);
+
+            // Show any additional DOM events that have been merged into the range.
+            if (domEventElement && this._waterfallPopover.visible) {
+                let newDOMEvents = Array.from(nodeEntry.domEventElements)
+                .filter(([domEvent, element]) => element === domEventElement)
+                .map(([domEvent, element]) => domEvent);
+
+                this._waterfallPopover.content = this._waterfallPopoverContentForNodeEntry(nodeEntry, newDOMEvents);
+            }
+
+            return domEventElement;
+        });
     }
 
-    _handleMousedownWaterfall(entry, targetElement, popoverContentElement)
+    _handleMousedownWaterfall(entry, popoverContentElement, updateTargetAndContentFunction)
     {
         if (!this._waterfallPopover) {
             this._waterfallPopover = new WI.Popover;
@@ -1920,23 +1951,16 @@ WI.NetworkTableContentView = class NetworkTableContentView extends WI.ContentVie
             return;
 
         let calculateTargetFrame = () => {
-            if (!entry.resource)
-                return WI.Rect.rectFromClientRect(targetElement.getBoundingClientRect());
-
-            let rowIndex = this._rowIndexForRepresentedObject(entry.resource);
+            let rowIndex = this._rowIndexForRepresentedObject(entry.resource || entry.domNode);
             let cell = this._table.cellForRowAndColumn(rowIndex, this._waterfallColumn);
-            if (!cell) {
-                this._waterfallPopover.dismiss();
-                return null;
+            if (cell) {
+                let targetElement = updateTargetAndContentFunction(cell);
+                if (targetElement)
+                    return WI.Rect.rectFromClientRect(targetElement.getBoundingClientRect());
             }
 
-            let mouseBlock = cell.querySelector(".block.mouse-tracking");
-            if (!mouseBlock) {
-                this._waterfallPopover.dismiss();
-                return null;
-            }
-
-            return WI.Rect.rectFromClientRect(mouseBlock.getBoundingClientRect());
+            this._waterfallPopover.dismiss();
+            return null;
         };
 
         let targetFrame = calculateTargetFrame();
index ebeed0b..0aa033f 100644 (file)
@@ -94,6 +94,12 @@ WI.Popover = class Popover extends WI.Object
         this._resizeHandler = resizeHandler;
     }
 
+    resize()
+    {
+        if (this.visible && this._resizeHandler)
+            this._resizeHandler();
+    }
+
     update(shouldAnimate = true)
     {
         if (!this.visible)
@@ -169,8 +175,7 @@ WI.Popover = class Popover extends WI.Object
             }
             break;
         case "resize":
-            if (this._resizeHandler)
-                this._resizeHandler();
+            this.resize();
             break;
         case "keypress":
             if (event.keyCode === WI.KeyboardShortcut.Key.Escape.keyCode)