Skip to content
Permalink
Browse files
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
  • Loading branch information
dcrousso committed Feb 27, 2019
1 parent a824a98 commit 1a5e80b2bbcd5b872362e43ec671d4168341fb9b
Showing 18 changed files with 121 additions and 94 deletions.
@@ -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
@@ -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;
}
@@ -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)
@@ -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;

@@ -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";
@@ -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");
@@ -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;

@@ -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;
@@ -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")),
@@ -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));
@@ -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;

@@ -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"))

0 comments on commit 1a5e80b

Please sign in to comment.