Web Inspector: DOM Nodes should not show $0 when selected in Console area
authorpecoraro@apple.com <pecoraro@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 16 Apr 2019 06:57:16 +0000 (06:57 +0000)
committerpecoraro@apple.com <pecoraro@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 16 Apr 2019 06:57:16 +0000 (06:57 +0000)
https://bugs.webkit.org/show_bug.cgi?id=196953

Reviewed by Devin Rousso.

* UserInterface/Views/DOMTreeContentView.js:
(WI.DOMTreeContentView):
Enable showing the last selected element.

* UserInterface/Views/DOMTreeOutline.js:
Make parameters explicit. Drop "selectable" which was always true.
And add a new option for adding a class name.

* UserInterface/Views/DOMTreeOutline.css:
(.tree-outline.dom.show-last-selected li.last-selected > span::after):
(.tree-outline.dom.show-last-selected:focus li.last-selected > span::after):
Only show the "= $0" for a DOM tree that has enabled showing the last selected element.

* UserInterface/Views/FormattedValue.css:
(.formatted-node > .tree-outline.dom li.selected .selection-area):
Don't show the selection-area for a console formatted node.

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

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.js
Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css
Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js
Source/WebInspectorUI/UserInterface/Views/FormattedValue.css

index e060048..cc53ab1 100644 (file)
@@ -1,3 +1,27 @@
+2019-04-15  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Web Inspector: DOM Nodes should not show $0 when selected in Console area
+        https://bugs.webkit.org/show_bug.cgi?id=196953
+
+        Reviewed by Devin Rousso.
+
+        * UserInterface/Views/DOMTreeContentView.js:
+        (WI.DOMTreeContentView):
+        Enable showing the last selected element.
+
+        * UserInterface/Views/DOMTreeOutline.js:
+        Make parameters explicit. Drop "selectable" which was always true.
+        And add a new option for adding a class name.
+
+        * UserInterface/Views/DOMTreeOutline.css:
+        (.tree-outline.dom.show-last-selected li.last-selected > span::after):
+        (.tree-outline.dom.show-last-selected:focus li.last-selected > span::after):
+        Only show the "= $0" for a DOM tree that has enabled showing the last selected element.
+
+        * UserInterface/Views/FormattedValue.css:
+        (.formatted-node > .tree-outline.dom li.selected .selection-area):
+        Don't show the selection-area for a console formatted node.
+
 2019-04-15  Devin Rousso  <drousso@apple.com>
 
         Web Inspector: update sheet rect whenever inspector window size changes
index d7ea205..c9822ec 100644 (file)
@@ -63,7 +63,7 @@ WI.DOMTreeContentView = class DOMTreeContentView extends WI.ContentView
         this.element.classList.add("dom-tree");
         this.element.addEventListener("click", this._mouseWasClicked.bind(this), false);
 
-        this._domTreeOutline = new WI.DOMTreeOutline(true, true, true);
+        this._domTreeOutline = new WI.DOMTreeOutline({omitRootDOMNode: true, excludeRevealElementContextMenu: true, showLastSelected: true});
         this._domTreeOutline.allowsEmptySelection = false;
         this._domTreeOutline.allowsMultipleSelection = true;
         this._domTreeOutline.addEventListener(WI.TreeOutline.Event.ElementAdded, this._domTreeElementAdded, this);
index 06f9385..f96b187 100644 (file)
     opacity: 0.3;
 }
 
-.tree-outline.dom li.last-selected > span::after {
+.tree-outline.dom.show-last-selected li.last-selected > span::after {
     content: " = $0";
     color: var(--console-secondary-text-color);
     position: absolute;
     white-space: pre;
 }
 
-.tree-outline.dom:focus li.last-selected > span::after {
+.tree-outline.dom.show-last-selected:focus li.last-selected > span::after {
     color: var(--selected-secondary-text-color);
 }
 
index 4908ff2..67d5441 100644 (file)
@@ -30,9 +30,9 @@
 
 WI.DOMTreeOutline = class DOMTreeOutline extends WI.TreeOutline
 {
-    constructor(omitRootDOMNode, selectable, excludeRevealElementContextMenu)
+    constructor({omitRootDOMNode, excludeRevealElementContextMenu, showLastSelected} = {})
     {
-        super(selectable);
+        super();
 
         this.element.addEventListener("mousedown", this._onmousedown.bind(this), false);
         this.element.addEventListener("mousemove", this._onmousemove.bind(this), false);
@@ -45,6 +45,9 @@ WI.DOMTreeOutline = class DOMTreeOutline extends WI.TreeOutline
 
         this.element.classList.add("dom", WI.SyntaxHighlightedStyleClassName);
 
+        if (showLastSelected)
+            this.element.classList.add("show-last-selected");
+
         this._includeRootDOMNode = !omitRootDOMNode;
         this._excludeRevealElementContextMenu = excludeRevealElementContextMenu;
         this._rootDOMNode = null;
index 0509dd3..dd0272d 100644 (file)
     -webkit-user-select: none !important;
 }
 
+.formatted-node > .tree-outline.dom li.selected .selection-area {
+    background-color: transparent;
+}
+
 .formatted-node > .tree-outline.dom li.hovered:not(.selected) .selection-area {
     display: block;
     left: -1px;