Web Inspector: Elements: $0 is shown for the wrong node when selecting elements in a user agent shadow tree
https://bugs.webkit.org/show_bug.cgi?id=203155
Reviewed by Matt Baker.
Rather than naively using the last selected node (from `WI.TreeOutline`), we should wait
to see if the inspected page's DOM agent allows the selected node to be used as the
inspected node, and if so then to show the `$0`.
* UserInterface/Controllers/DOMManager.js:
(WI.DOMManager.prototype.setInspectedNode):
* UserInterface/Views/DOMTreeContentView.js:
(WI.DOMTreeContentView):
* UserInterface/Views/DOMTreeOutline.js:
(WI.DOMTreeOutline.prototype._handleInspectedNodeChanged): Added.
* UserInterface/Views/DOMTreeOutline.css:
(.tree-outline.dom li.inspected-node > span::after): Added.
(.tree-outline.dom:focus li.inspected-node.selected > span::after): Added.
(.tree-outline.dom.show-last-selected li.last-selected > span::after): Deleted.
(.tree-outline.dom.show-last-selected:focus li.last-selected > span::after): Deleted.
* UserInterface/Views/TreeOutline.js:
(WI.TreeOutline.prototype.selectionControllerSelectionDidChange):
git-svn-id: http://svn.webkit.org/repository/webkit/trunk@251302 268f45cc-cd09-0410-ab3c-d52691b4dbfc
diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
index 6c7f578..e896a30 100644
--- a/Source/WebInspectorUI/ChangeLog
+++ b/Source/WebInspectorUI/ChangeLog
@@ -1,5 +1,32 @@
2019-10-18 Devin Rousso <drousso@apple.com>
+ Web Inspector: Elements: $0 is shown for the wrong node when selecting elements in a user agent shadow tree
+ https://bugs.webkit.org/show_bug.cgi?id=203155
+
+ Reviewed by Matt Baker.
+
+ Rather than naively using the last selected node (from `WI.TreeOutline`), we should wait
+ to see if the inspected page's DOM agent allows the selected node to be used as the
+ inspected node, and if so then to show the `$0`.
+
+ * UserInterface/Controllers/DOMManager.js:
+ (WI.DOMManager.prototype.setInspectedNode):
+
+ * UserInterface/Views/DOMTreeContentView.js:
+ (WI.DOMTreeContentView):
+ * UserInterface/Views/DOMTreeOutline.js:
+ (WI.DOMTreeOutline.prototype._handleInspectedNodeChanged): Added.
+ * UserInterface/Views/DOMTreeOutline.css:
+ (.tree-outline.dom li.inspected-node > span::after): Added.
+ (.tree-outline.dom:focus li.inspected-node.selected > span::after): Added.
+ (.tree-outline.dom.show-last-selected li.last-selected > span::after): Deleted.
+ (.tree-outline.dom.show-last-selected:focus li.last-selected > span::after): Deleted.
+
+ * UserInterface/Views/TreeOutline.js:
+ (WI.TreeOutline.prototype.selectionControllerSelectionDidChange):
+
+2019-10-18 Devin Rousso <drousso@apple.com>
+
Web Inspector: REGRESSION(r251254): Elements: forced pseudo-class indicator isn't visible for selected nodes
https://bugs.webkit.org/show_bug.cgi?id=203158
diff --git a/Source/WebInspectorUI/UserInterface/Controllers/DOMManager.js b/Source/WebInspectorUI/UserInterface/Controllers/DOMManager.js
index 856d482..7352e5b 100644
--- a/Source/WebInspectorUI/UserInterface/Controllers/DOMManager.js
+++ b/Source/WebInspectorUI/UserInterface/Controllers/DOMManager.js
@@ -585,9 +585,10 @@
if (error)
return;
+ let lastInspectedNode = this._inspectedNode;
this._inspectedNode = node;
- this.dispatchEventToListeners(WI.DOMManager.Event.InspectedNodeChanged);
+ this.dispatchEventToListeners(WI.DOMManager.Event.InspectedNodeChanged, {lastInspectedNode});
};
let target = WI.assumingMainTarget();
diff --git a/Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.js b/Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.js
index 2fd7fb2..8b69ed1 100644
--- a/Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.js
+++ b/Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.js
@@ -67,7 +67,7 @@
this.element.classList.add("dom-tree");
this.element.addEventListener("click", this._mouseWasClicked.bind(this), false);
- this._domTreeOutline = new WI.DOMTreeOutline({omitRootDOMNode: true, excludeRevealElementContextMenu: true, showLastSelected: true});
+ this._domTreeOutline = new WI.DOMTreeOutline({omitRootDOMNode: true, excludeRevealElementContextMenu: true, showInspectedNode: true});
this._domTreeOutline.allowsEmptySelection = false;
this._domTreeOutline.allowsMultipleSelection = true;
this._domTreeOutline.addEventListener(WI.TreeOutline.Event.ElementAdded, this._domTreeElementAdded, this);
diff --git a/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css b/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css
index 460d384..55f4f98 100644
--- a/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css
+++ b/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css
@@ -74,14 +74,14 @@
z-index: 1;
}
-.tree-outline.dom.show-last-selected li.last-selected > span::after {
+.tree-outline.dom li.inspected-node > span::after {
content: " = " var(--console-saved-result-prefix) "0";
color: var(--console-secondary-text-color);
position: absolute;
white-space: pre;
}
-.tree-outline.dom.show-last-selected:focus li.last-selected > span::after {
+.tree-outline.dom:focus li.inspected-node.selected > span::after {
color: var(--selected-secondary-text-color);
}
diff --git a/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js b/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js
index a932c6d..400564f 100644
--- a/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js
+++ b/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js
@@ -30,7 +30,7 @@
WI.DOMTreeOutline = class DOMTreeOutline extends WI.TreeOutline
{
- constructor({selectable, omitRootDOMNode, excludeRevealElementContextMenu, showLastSelected} = {})
+ constructor({selectable, omitRootDOMNode, excludeRevealElementContextMenu, showInspectedNode} = {})
{
super(selectable);
@@ -46,9 +46,6 @@
this.element.classList.add("dom", WI.SyntaxHighlightedStyleClassName);
this.element.dir = "ltr";
- if (showLastSelected)
- this.element.classList.add("show-last-selected");
-
this._includeRootDOMNode = !omitRootDOMNode;
this._excludeRevealElementContextMenu = excludeRevealElementContextMenu;
this._rootDOMNode = null;
@@ -64,6 +61,9 @@
this._hideElementsKeyboardShortcut.implicitlyPreventsDefault = false;
WI.settings.showShadowDOM.addEventListener(WI.Setting.Event.Changed, this._showShadowDOMSettingChanged, this);
+
+ if (showInspectedNode)
+ WI.domManager.addEventListener(WI.DOMManager.Event.InspectedNodeChanged, this._handleInspectedNodeChanged, this);
}
// Public
@@ -660,6 +660,21 @@
this.selectDOMNode(nodeToSelect);
}
+ _handleInspectedNodeChanged(event)
+ {
+ let {lastInspectedNode} = event.data;
+
+ if (lastInspectedNode) {
+ let lastInspectedNodeTreeElement = this.findTreeElement(lastInspectedNode);
+ if (lastInspectedNodeTreeElement)
+ lastInspectedNodeTreeElement.listItemElement.classList.remove("inspected-node");
+ }
+
+ let inspectedNodeTreeElement = this.findTreeElement(WI.domManager.inspectedNode);
+ if (inspectedNodeTreeElement)
+ inspectedNodeTreeElement.listItemElement.classList.add("inspected-node");
+ }
+
_hideElements(event, keyboardShortcut)
{
if (!this._editable)
diff --git a/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js b/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js
index 906cc32..086f795 100644
--- a/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js
+++ b/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js
@@ -55,7 +55,6 @@
this._selectable = selectable;
this._cachedNumberOfDescendents = 0;
- this._previousSelectedTreeElement = null;
let comparator = (a, b) => {
function getLevel(treeElement) {
@@ -799,17 +798,6 @@
treeElement.select(omitFocus);
}
- let selectedTreeElement = this.selectedTreeElement;
- if (selectedTreeElement !== this._previousSelectedTreeElement) {
- if (this._previousSelectedTreeElement && this._previousSelectedTreeElement.listItemElement)
- this._previousSelectedTreeElement.listItemElement.classList.remove("last-selected");
-
- this._previousSelectedTreeElement = selectedTreeElement;
-
- if (this._previousSelectedTreeElement && this._previousSelectedTreeElement.listItemElement)
- this._previousSelectedTreeElement.listItemElement.classList.add("last-selected");
- }
-
this._dispatchSelectionDidChangeEvent();
this._processingSelectionChange = false;
