Web Inspector: Use Element.closest for internal code

https://bugs.webkit.org/show_bug.cgi?id=173747

Reviewed by Joseph Pecoraro.

Replace usage of added utility functions on the `Node` prototype with the built-in
`Element.prototype.closest` as it's more flexible and is capable of doing the same thing.

* UserInterface/Base/Utilities.js:
(Node.prototype.enclosingNodeOrSelfWithClass): Deleted.
(Node.prototype.enclosingNodeOrSelfWithNodeNameInArray): Deleted.
(Node.prototype.enclosingNodeOrSelfWithNodeName): Deleted.
* UserInterface/Base/Main.js:
(WI.handlePossibleLinkClick):
(WI._focusedContentBrowser):
* UserInterface/Views/CPUTimelineView.js:
(WI.CPUTimelineView.prototype._graphPositionForMouseEvent):
* UserInterface/Views/CompletionSuggestionsView.js:
(WI.CompletionSuggestionsView.prototype.set selectedIndex):
(WI.CompletionSuggestionsView.prototype.update):
(WI.CompletionSuggestionsView.prototype._itemClicked):
* UserInterface/Views/ConsoleGroup.js:
(WI.ConsoleGroup.prototype._titleClicked):
* UserInterface/Views/DOMTreeContentView.js:
(WI.DOMTreeContentView.prototype._mouseWasClicked):
* UserInterface/Views/DOMTreeElement.js:
(WI.DOMTreeElement.prototype._startEditingTarget):
(WI.DOMTreeElement.prototype._populateTagContextMenu):
* UserInterface/Views/DOMTreeOutline.js:
(WI.DOMTreeOutline.prototype.populateContextMenu):
* UserInterface/Views/DataGrid.js:
(WI.DataGrid.prototype._startEditing):
(WI.DataGrid.prototype._editingCancelled):
(WI.DataGrid.prototype.dataGridNodeFromNode):
(WI.DataGrid.prototype.dataGridNodeFromPoint):
(WI.DataGrid.prototype._headerCellClicked):
(WI.DataGrid.prototype._mouseoverColumnCollapser):
(WI.DataGrid.prototype._mouseoutColumnCollapser):
(WI.DataGrid.prototype._clickInColumnCollapser):
(WI.DataGrid.prototype._contextMenuInHeader):
(WI.DataGrid.prototype._contextMenuInDataTable):
* UserInterface/Views/DataGridNode.js:
(WI.DataGridNode.prototype.isEventWithinDisclosureTriangle):
* UserInterface/Views/LegacyTabBar.js:
(WI.LegacyTabBar.prototype._handleMouseDown):
(WI.LegacyTabBar.prototype._handleClick):
* UserInterface/Views/LogContentView.js:
(WI.LogContentView.prototype._handleContextMenuEvent):
(WI.LogContentView.prototype._mousedown):
(WI.LogContentView.prototype._targetInMessageCanBeSelected):
(WI.LogContentView.prototype._mousemove):
(WI.LogContentView.prototype._mouseup):
(WI.LogContentView.prototype._ondragstart):
* UserInterface/Views/NavigationBar.js:
(WI.NavigationBar.prototype._mouseDown):
(WI.NavigationBar.prototype._mouseMoved):
* UserInterface/Views/Popover.js:
(WI.Popover.prototype.handleEvent):
* UserInterface/Views/TabBar.js:
(WI.TabBar.prototype._handleMouseDown):
(WI.TabBar.prototype._handleClick):
* UserInterface/Views/Table.js:
(WI.Table.prototype._handleMouseDown):
(WI.Table.prototype._handleContextMenu):
* UserInterface/Views/TreeOutline.js:
(WI.TreeOutline.prototype.treeElementFromNode):


Canonical link: https://commits.webkit.org/209470@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@242174 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebInspectorUI/ChangeLog

@@ -1,3 +1,72 @@
+2019-02-27  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: Use Element.closest for internal code
+        https://bugs.webkit.org/show_bug.cgi?id=173747
+
+        Reviewed by Joseph Pecoraro.
+
+        Replace usage of added utility functions on the `Node` prototype with the built-in
+        `Element.prototype.closest` as it's more flexible and is capable of doing the same thing.
+
+        * UserInterface/Base/Utilities.js:
+        (Node.prototype.enclosingNodeOrSelfWithClass): Deleted.
+        (Node.prototype.enclosingNodeOrSelfWithNodeNameInArray): Deleted.
+        (Node.prototype.enclosingNodeOrSelfWithNodeName): Deleted.
+        * UserInterface/Base/Main.js:
+        (WI.handlePossibleLinkClick):
+        (WI._focusedContentBrowser):
+        * UserInterface/Views/CPUTimelineView.js:
+        (WI.CPUTimelineView.prototype._graphPositionForMouseEvent):
+        * UserInterface/Views/CompletionSuggestionsView.js:
+        (WI.CompletionSuggestionsView.prototype.set selectedIndex):
+        (WI.CompletionSuggestionsView.prototype.update):
+        (WI.CompletionSuggestionsView.prototype._itemClicked):
+        * UserInterface/Views/ConsoleGroup.js:
+        (WI.ConsoleGroup.prototype._titleClicked):
+        * UserInterface/Views/DOMTreeContentView.js:
+        (WI.DOMTreeContentView.prototype._mouseWasClicked):
+        * UserInterface/Views/DOMTreeElement.js:
+        (WI.DOMTreeElement.prototype._startEditingTarget):
+        (WI.DOMTreeElement.prototype._populateTagContextMenu):
+        * UserInterface/Views/DOMTreeOutline.js:
+        (WI.DOMTreeOutline.prototype.populateContextMenu):
+        * UserInterface/Views/DataGrid.js:
+        (WI.DataGrid.prototype._startEditing):
+        (WI.DataGrid.prototype._editingCancelled):
+        (WI.DataGrid.prototype.dataGridNodeFromNode):
+        (WI.DataGrid.prototype.dataGridNodeFromPoint):
+        (WI.DataGrid.prototype._headerCellClicked):
+        (WI.DataGrid.prototype._mouseoverColumnCollapser):
+        (WI.DataGrid.prototype._mouseoutColumnCollapser):
+        (WI.DataGrid.prototype._clickInColumnCollapser):
+        (WI.DataGrid.prototype._contextMenuInHeader):
+        (WI.DataGrid.prototype._contextMenuInDataTable):
+        * UserInterface/Views/DataGridNode.js:
+        (WI.DataGridNode.prototype.isEventWithinDisclosureTriangle):
+        * UserInterface/Views/LegacyTabBar.js:
+        (WI.LegacyTabBar.prototype._handleMouseDown):
+        (WI.LegacyTabBar.prototype._handleClick):
+        * UserInterface/Views/LogContentView.js:
+        (WI.LogContentView.prototype._handleContextMenuEvent):
+        (WI.LogContentView.prototype._mousedown):
+        (WI.LogContentView.prototype._targetInMessageCanBeSelected):
+        (WI.LogContentView.prototype._mousemove):
+        (WI.LogContentView.prototype._mouseup):
+        (WI.LogContentView.prototype._ondragstart):
+        * UserInterface/Views/NavigationBar.js:
+        (WI.NavigationBar.prototype._mouseDown):
+        (WI.NavigationBar.prototype._mouseMoved):
+        * UserInterface/Views/Popover.js:
+        (WI.Popover.prototype.handleEvent):
+        * UserInterface/Views/TabBar.js:
+        (WI.TabBar.prototype._handleMouseDown):
+        (WI.TabBar.prototype._handleClick):
+        * UserInterface/Views/Table.js:
+        (WI.Table.prototype._handleMouseDown):
+        (WI.Table.prototype._handleContextMenu):
+        * UserInterface/Views/TreeOutline.js:
+        (WI.TreeOutline.prototype.treeElementFromNode):
+
 2019-02-27  Devin Rousso  <drousso@apple.com>
 
         Web Inspector: REGRESSION(r242118): Debugger: event breakpoints have no icon

Source/WebInspectorUI/UserInterface/Base/Main.js

@@ -911,7 +911,7 @@ WI.updateVisibilityState = function(visible)
 
 WI.handlePossibleLinkClick = function(event, frame, options = {})
 {
-    let anchorElement = event.target.enclosingNodeOrSelfWithNodeName("a");
+    let anchorElement = event.target.closest("a");
     if (!anchorElement || !anchorElement.href)
         return false;
 
@@ -2337,7 +2337,7 @@ WI._focusConsolePrompt = function(event)
 WI._focusedContentBrowser = function()
 {
     if (this.currentFocusElement) {
-        let contentBrowserElement = this.currentFocusElement.enclosingNodeOrSelfWithClass("content-browser");
+        let contentBrowserElement = this.currentFocusElement.closest(".content-browser");
         if (contentBrowserElement && contentBrowserElement.__view && contentBrowserElement.__view instanceof WI.ContentBrowser)
             return contentBrowserElement.__view;
     }

Source/WebInspectorUI/UserInterface/Base/Utilities.js

@@ -180,44 +180,6 @@ Object.defineProperty(Set.prototype, "isSubsetOf",
     }
 });
 
-Object.defineProperty(Node.prototype, "enclosingNodeOrSelfWithClass",
-{
-    value(className)
-    {
-        for (let node = this; node; node = node.parentElement) {
-            if (node.nodeType === Node.ELEMENT_NODE && node.classList.contains(className))
-                return node;
-        }
-
-        return null;
-    }
-});
-
-Object.defineProperty(Node.prototype, "enclosingNodeOrSelfWithNodeNameInArray",
-{
-    value(nodeNames)
-    {
-        let lowerCaseNodeNames = nodeNames.map((name) => name.toLowerCase());
-
-        for (let node = this; node; node = node.parentElement) {
-            for (let nodeName of lowerCaseNodeNames) {
-                if (node.nodeName.toLowerCase() === nodeName)
-                    return node;
-            }
-        }
-
-        return null;
-    }
-});
-
-Object.defineProperty(Node.prototype, "enclosingNodeOrSelfWithNodeName",
-{
-    value(nodeName)
-    {
-        return this.enclosingNodeOrSelfWithNodeNameInArray([nodeName]);
-    }
-});
-
 Object.defineProperty(Node.prototype, "traverseNextNode",
 {
     value(stayWithin)

Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.js

@@ -720,7 +720,7 @@ WI.CPUTimelineView = class CPUTimelineView extends WI.TimelineView
 
     _graphPositionForMouseEvent(event)
     {
-        let svgElement = event.target.enclosingNodeOrSelfWithNodeName("svg");
+        let svgElement = event.target.closest("svg");
         if (!svgElement)
             return NaN;
 

Source/WebInspectorUI/UserInterface/Views/CompletionSuggestionsView.js

@@ -68,15 +68,15 @@ WI.CompletionSuggestionsView = class CompletionSuggestionsView extends WI.Object
     {
         var selectedItemElement = this._selectedItemElement;
         if (selectedItemElement)
-            selectedItemElement.classList.remove(WI.CompletionSuggestionsView.SelectedItemStyleClassName);
+            selectedItemElement.classList.remove("selected");
 
         this._selectedIndex = index;
 
         selectedItemElement = this._selectedItemElement;
         if (!selectedItemElement)
             return;
 
-        selectedItemElement.classList.add(WI.CompletionSuggestionsView.SelectedItemStyleClassName);
+        selectedItemElement.classList.add("selected");
         selectedItemElement.scrollIntoViewIfNeeded(false);
     }
 
@@ -192,10 +192,9 @@ WI.CompletionSuggestionsView = class CompletionSuggestionsView extends WI.Object
 
         for (var i = 0; i < completions.length; ++i) {
             var itemElement = document.createElement("div");
-            itemElement.className = WI.CompletionSuggestionsView.ItemElementStyleClassName;
+            itemElement.classList.add("item");
+            itemElement.classList.toggle("selected", i === this._selectedIndex);
             itemElement.textContent = completions[i];
-            if (i === this._selectedIndex)
-                itemElement.classList.add(WI.CompletionSuggestionsView.SelectedItemStyleClassName);
             this._containerElement.appendChild(itemElement);
 
             if (this._delegate && typeof this._delegate.completionSuggestionsViewCustomizeCompletionElement === "function")
@@ -238,7 +237,7 @@ WI.CompletionSuggestionsView = class CompletionSuggestionsView extends WI.Object
         if (event.button !== 0)
             return;
 
-        var itemElement = event.target.enclosingNodeOrSelfWithClass(WI.CompletionSuggestionsView.ItemElementStyleClassName);
+        let itemElement = event.target.closest(".item");
         console.assert(itemElement);
         if (!itemElement)
             return;
@@ -256,6 +255,3 @@ WI.CompletionSuggestionsView = class CompletionSuggestionsView extends WI.Object
         this._moveIntervalIdentifier = null;
     }
 };
-
-WI.CompletionSuggestionsView.ItemElementStyleClassName = "item";
-WI.CompletionSuggestionsView.SelectedItemStyleClassName = "selected";

Source/WebInspectorUI/UserInterface/Views/ConsoleGroup.js

@@ -89,9 +89,9 @@ WI.ConsoleGroup = class ConsoleGroup extends WI.Object
 
     _titleClicked(event)
     {
-        var groupTitleElement = event.target.enclosingNodeOrSelfWithClass("console-group-title");
+        var groupTitleElement = event.target.closest(".console-group-title");
         if (groupTitleElement) {
-            var groupElement = groupTitleElement.enclosingNodeOrSelfWithClass("console-group");
+            var groupElement = groupTitleElement.closest(".console-group");
             if (groupElement)
                 if (groupElement.classList.contains("collapsed"))
                     groupElement.classList.remove("collapsed");

Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.js

@@ -502,7 +502,7 @@ WI.DOMTreeContentView = class DOMTreeContentView extends WI.ContentView
 
     _mouseWasClicked(event)
     {
-        var anchorElement = event.target.enclosingNodeOrSelfWithNodeName("a");
+        var anchorElement = event.target.closest("a");
         if (!anchorElement || !anchorElement.href)
             return;
 

Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js

@@ -696,15 +696,15 @@ WI.DOMTreeElement = class DOMTreeElement extends WI.TreeElement
         if (this.representedObject.nodeType() !== Node.ELEMENT_NODE && this.representedObject.nodeType() !== Node.TEXT_NODE)
             return false;
 
-        var textNode = eventTarget.enclosingNodeOrSelfWithClass("html-text-node");
+        var textNode = eventTarget.closest(".html-text-node");
         if (textNode)
             return this._startEditingTextNode(textNode);
 
-        var attribute = eventTarget.enclosingNodeOrSelfWithClass("html-attribute");
+        var attribute = eventTarget.closest(".html-attribute");
         if (attribute)
             return this._startEditingAttribute(attribute, eventTarget);
 
-        var tagName = eventTarget.enclosingNodeOrSelfWithClass("html-tag-name");
+        var tagName = eventTarget.closest(".html-tag-name");
         if (tagName)
             return this._startEditingTagName(tagName);
 
@@ -738,7 +738,7 @@ WI.DOMTreeElement = class DOMTreeElement extends WI.TreeElement
 
         subMenus.add.appendItem(WI.UIString("Attribute"), this._addNewAttribute.bind(this), !isNonShadowEditable);
 
-        let attribute = event.target.enclosingNodeOrSelfWithClass("html-attribute");
+        let attribute = event.target.closest(".html-attribute");
         subMenus.edit.appendItem(WI.UIString("Attribute"), this._startEditingAttribute.bind(this, attribute, event.target), !attribute || ! isNonShadowEditable);
 
         let attributeName = null;

Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js

@@ -244,10 +244,10 @@ WI.DOMTreeOutline = class DOMTreeOutline extends WI.TreeOutline
 
     populateContextMenu(contextMenu, event, treeElement)
     {
-        let tag = event.target.enclosingNodeOrSelfWithClass("html-tag");
-        let textNode = event.target.enclosingNodeOrSelfWithClass("html-text-node");
-        let commentNode = event.target.enclosingNodeOrSelfWithClass("html-comment");
-        let pseudoElement = event.target.enclosingNodeOrSelfWithClass("html-pseudo-element");
+        let tag = event.target.closest(".html-tag");
+        let textNode = event.target.closest(".html-text-node");
+        let commentNode = event.target.closest(".html-comment");
+        let pseudoElement = event.target.closest(".html-pseudo-element");
 
         let subMenus = {
             add: new WI.ContextSubMenuItem(contextMenu, WI.UIString("Add")),

Source/WebInspectorUI/UserInterface/Views/DataGrid.js

@@ -524,7 +524,7 @@ WI.DataGrid = class DataGrid extends WI.View
 
     _startEditing(target)
     {
-        var element = target.enclosingNodeOrSelfWithNodeName("td");
+        var element = target.closest("td");
         if (!element)
             return;
 
@@ -605,7 +605,7 @@ WI.DataGrid = class DataGrid extends WI.View
 
     _editingCancelled(element)
     {
-        console.assert(this._editingNode.element === element.enclosingNodeOrSelfWithNodeName("tr"));
+        console.assert(this._editingNode.element === element.closest("tr"));
 
         this._editingNode.refresh();
 
@@ -1438,20 +1438,20 @@ WI.DataGrid = class DataGrid extends WI.View
 
     dataGridNodeFromNode(target)
     {
-        var rowElement = target.enclosingNodeOrSelfWithNodeName("tr");
+        var rowElement = target.closest("tr");
         return rowElement && rowElement._dataGridNode;
     }
 
     dataGridNodeFromPoint(x, y)
     {
         var node = this._dataTableElement.ownerDocument.elementFromPoint(x, y);
-        var rowElement = node.enclosingNodeOrSelfWithNodeName("tr");
+        var rowElement = node.closest("tr");
         return rowElement && rowElement._dataGridNode;
     }
 
     _headerCellClicked(event)
     {
-        let cell = event.target.enclosingNodeOrSelfWithNodeName("th");
+        let cell = event.target.closest("th");
         if (!cell || !cell.columnIdentifier || !cell.classList.contains(WI.DataGrid.SortableColumnStyleClassName))
             return;
 
@@ -1461,7 +1461,7 @@ WI.DataGrid = class DataGrid extends WI.View
 
     _mouseoverColumnCollapser(event)
     {
-        var cell = event.target.enclosingNodeOrSelfWithNodeName("th");
+        var cell = event.target.closest("th");
         if (!cell || !cell.collapsesGroup)
             return;
 
@@ -1470,7 +1470,7 @@ WI.DataGrid = class DataGrid extends WI.View
 
     _mouseoutColumnCollapser(event)
     {
-        var cell = event.target.enclosingNodeOrSelfWithNodeName("th");
+        var cell = event.target.closest("th");
         if (!cell || !cell.collapsesGroup)
             return;
 
@@ -1479,7 +1479,7 @@ WI.DataGrid = class DataGrid extends WI.View
 
     _clickInColumnCollapser(event)
     {
-        var cell = event.target.enclosingNodeOrSelfWithNodeName("th");
+        var cell = event.target.closest("th");
         if (!cell || !cell.collapsesGroup)
             return;
 
@@ -1578,7 +1578,7 @@ WI.DataGrid = class DataGrid extends WI.View
         if (this._hasCopyableData())
             contextMenu.appendItem(WI.UIString("Copy Table"), this._copyTable.bind(this));
 
-        let headerCellElement = event.target.enclosingNodeOrSelfWithNodeName("th");
+        let headerCellElement = event.target.closest("th");
         if (!headerCellElement)
             return;
 
@@ -1647,7 +1647,7 @@ WI.DataGrid = class DataGrid extends WI.View
                     if (gridNode === this.placeholderNode)
                         contextMenu.appendItem(WI.UIString("Add New"), this._startEditing.bind(this, event.target));
                     else {
-                        let element = event.target.enclosingNodeOrSelfWithNodeName("td");
+                        let element = event.target.closest("td");
                         let columnIdentifier = element.__columnIdentifier;
                         let columnTitle = this.dataGrid.columns.get(columnIdentifier)["title"];
                         contextMenu.appendItem(WI.UIString("Edit \u201C%s\u201D").format(columnTitle), this._startEditing.bind(this, event.target));

Source/WebInspectorUI/UserInterface/Views/DataGridNode.js

@@ -650,7 +650,7 @@ WI.DataGridNode = class DataGridNode extends WI.Object
         if (!this.hasChildren)
             return false;
 
-        let cell = event.target.enclosingNodeOrSelfWithNodeName("td");
+        let cell = event.target.closest("td");
         if (!cell || !cell.classList.contains("disclosure"))
             return false;
 

Source/WebInspectorUI/UserInterface/Views/LegacyTabBar.js

@@ -590,7 +590,7 @@ WI.LegacyTabBar = class LegacyTabBar extends WI.View
         if (event.button !== 0 || event.ctrlKey)
             return;
 
-        let itemElement = event.target.enclosingNodeOrSelfWithClass(WI.TabBarItem.StyleClassName);
+        let itemElement = event.target.closest("." + WI.TabBarItem.StyleClassName);
         if (!itemElement)
             return;
 
@@ -616,7 +616,7 @@ WI.LegacyTabBar = class LegacyTabBar extends WI.View
             return;
         }
 
-        let closeButtonElement = event.target.enclosingNodeOrSelfWithClass(WI.TabBarItem.CloseButtonStyleClassName);
+        let closeButtonElement = event.target.closest("." + WI.TabBarItem.CloseButtonStyleClassName);
         if (closeButtonElement)
             return;
 
@@ -649,7 +649,7 @@ WI.LegacyTabBar = class LegacyTabBar extends WI.View
 
     _handleClick(event)
     {
-        var itemElement = event.target.enclosingNodeOrSelfWithClass(WI.TabBarItem.StyleClassName);
+        var itemElement = event.target.closest("." + WI.TabBarItem.StyleClassName);
         if (!itemElement)
             return;
 
@@ -662,7 +662,7 @@ WI.LegacyTabBar = class LegacyTabBar extends WI.View
 
         const clickedMiddleButton = event.button === 1;
 
-        var closeButtonElement = event.target.enclosingNodeOrSelfWithClass(WI.TabBarItem.CloseButtonStyleClassName);
+        var closeButtonElement = event.target.closest("." + WI.TabBarItem.CloseButtonStyleClassName);
         if (closeButtonElement || clickedMiddleButton) {
             // Disallow closing the default tab if it is the only tab.
             if (tabBarItem.isDefaultTab && this.element.classList.contains("single-tab"))