Web Inspector: tree elements with depth > 1 should have context menu "expand all"/"collapse all" commands
https://bugs.webkit.org/show_bug.cgi?id=135590
Patch by Devin Rousso <dcrousso+webkit@gmail.com> on 2017-01-23
Reviewed by Timothy Hatcher.
Rework the context menu event handlers for all TreeOutline and TreeElement instances such
that the TreeOutline handles the event listener and creates the context menu object and the
TreeElement populates the list with items. This is necessary due to the way in which
children are laid out, as there is padding on either side of the element that would not
trigger a context menu event.
* Localizations/en.lproj/localizedStrings.js:
* UserInterface/Views/BreakpointTreeElement.js:
(WebInspector.BreakpointTreeElement.prototype.ondetach):
(WebInspector.BreakpointTreeElement.prototype.populateContextMenu):
(WebInspector.BreakpointTreeElement.prototype.oncontextmenu): Deleted.
* UserInterface/Views/ContextMenuUtilities.js:
(WebInspector.appendContextMenuItemsForSourceCode):
* UserInterface/Views/DOMTreeElement.js:
(WebInspector.DOMTreeElement.prototype._populateNodeContextMenu):
* UserInterface/Views/DOMTreeOutline.js:
(WebInspector.DOMTreeOutline):
(WebInspector.DOMTreeOutline.prototype.populateContextMenu):
(WebInspector.DOMTreeOutline.prototype._onmousedown):
(WebInspector.DOMTreeOutline.prototype._onmousemove):
(WebInspector.DOMTreeOutline.prototype._ondragstart):
(WebInspector.DOMTreeOutline.prototype._ondragover):
(WebInspector.DOMTreeOutline.prototype._ondrop):
(WebInspector.DOMTreeOutline.prototype._treeElementFromEvent): Deleted.
(WebInspector.DOMTreeOutline.prototype._contextMenuEventFired): Deleted.
* UserInterface/Views/DebuggerSidebarPanel.js:
(WebInspector.DebuggerSidebarPanel):
(WebInspector.DebuggerSidebarPanel.prototype._breakpointTreeOutlineContextMenuTreeElement):
* UserInterface/Views/FrameTreeElement.js:
(WebInspector.FrameTreeElement.prototype.onattach):
* UserInterface/Views/GeneralTreeElement.js:
(WebInspector.GeneralTreeElement.prototype.onattach):
(WebInspector.GeneralTreeElement.prototype.ondetach): Deleted.
* UserInterface/Views/ObjectTreeBaseTreeElement.js:
(WebInspector.ObjectTreeBaseTreeElement.prototype.populateContextMenu):
(WebInspector.ObjectTreeBaseTreeElement.prototype._logSymbolProperty):
(WebInspector.ObjectTreeBaseTreeElement.prototype._logValue):
(WebInspector.ObjectTreeBaseTreeElement.prototype.oncontextmenu): Deleted.
(WebInspector.ObjectTreeBaseTreeElement.prototype._contextMenuHandler): Deleted.
* UserInterface/Views/ResourceTreeElement.js:
(WebInspector.ResourceTreeElement.prototype.populateContextMenu):
(WebInspector.ResourceTreeElement.prototype.onattach): Deleted.
(WebInspector.ResourceTreeElement.prototype._handleContextMenuEvent): Deleted.
* UserInterface/Views/ThreadTreeElement.js:
(WebInspector.ThreadTreeElement.prototype.populateContextMenu):
(WebInspector.ThreadTreeElement.prototype.oncontextmenu): Deleted.
* UserInterface/Views/TreeElement.js:
(WebInspector.TreeElement.prototype.populateContextMenu):
(WebInspector.TreeElement):
* UserInterface/Views/TreeOutline.js:
(WebInspector.TreeOutline):
(WebInspector.TreeOutline.prototype.treeElementFromEvent):
(WebInspector.TreeOutline.prototype.populateContextMenu):
(WebInspector.TreeOutline._generateStyleRulesIfNeeded):
* UserInterface/Views/VisualStyleSelectorTreeItem.js:
(WebInspector.VisualStyleSelectorTreeItem.prototype.onattach):
(WebInspector.VisualStyleSelectorTreeItem.prototype.populateContextMenu):
(WebInspector.VisualStyleSelectorTreeItem.prototype._highlightNodesWithSelector):
(WebInspector.VisualStyleSelectorTreeItem.prototype._hideDOMNodeHighlight):
(WebInspector.VisualStyleSelectorTreeItem.prototype._handleContextMenuEvent): Deleted.
* UserInterface/Views/WorkerTreeElement.js:
(WebInspector.WorkerTreeElement.prototype.populateContextMenu):
(WebInspector.WorkerTreeElement.prototype.onattach):
(WebInspector.WorkerTreeElement.prototype._handleContextMenuEvent): Deleted.
* UserInterface/Views/DataGrid.js:
(WebInspector.DataGrid.prototype._contextMenuInDataTable):
Add "Expand All"/"Collapse All" context menu items.
git-svn-id: http://svn.webkit.org/repository/webkit/trunk@211061 268f45cc-cd09-0410-ab3c-d52691b4dbfc
diff --git a/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js b/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js
index d6a52fd..34a45e0 100644
--- a/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js
+++ b/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js
@@ -34,6 +34,7 @@
this.element = element || document.createElement("ol");
this.element.classList.add(WebInspector.TreeOutline.ElementStyleClassName);
+ this.element.addEventListener("contextmenu", this._handleContextmenu.bind(this));
this.children = [];
this.selectedTreeElement = null;
@@ -599,6 +600,38 @@
return false;
}
+ // Protected
+
+ treeElementFromEvent(event)
+ {
+ let scrollContainer = this.element.parentElement;
+
+ // We choose this X coordinate based on the knowledge that our list
+ // items extend at least to the right edge of the outer <ol> container.
+ // In the no-word-wrap mode the outer <ol> may be wider than the tree container
+ // (and partially hidden), in which case we are left to use only its right boundary.
+ let x = scrollContainer.totalOffsetLeft + scrollContainer.offsetWidth - 36;
+ let y = event.pageY;
+
+ // Our list items have 1-pixel cracks between them vertically. We avoid
+ // the cracks by checking slightly above and slightly below the mouse
+ // and seeing if we hit the same element each time.
+ let elementUnderMouse = this.treeElementFromPoint(x, y);
+ let elementAboveMouse = this.treeElementFromPoint(x, y - 2);
+ let element = null;
+ if (elementUnderMouse === elementAboveMouse)
+ element = elementUnderMouse;
+ else
+ element = this.treeElementFromPoint(x, y + 2);
+
+ return element;
+ }
+
+ populateContextMenu(contextMenu, event, treeElement)
+ {
+ treeElement.populateContextMenu(contextMenu, event);
+ }
+
// Private
static _generateStyleRulesIfNeeded()
@@ -625,6 +658,16 @@
document.head.appendChild(WebInspector.TreeOutline._styleElement);
}
+
+ _handleContextmenu(event)
+ {
+ let treeElement = this.treeElementFromEvent(event);
+ if (!treeElement)
+ return;
+
+ let contextMenu = WebInspector.ContextMenu.createFromEvent(event);
+ this.populateContextMenu(contextMenu, event, treeElement);
+ }
};
WebInspector.TreeOutline._styleElement = null;
