Changeset 244327 in webkit

Timestamp:

Apr 15, 2019 11:57:16 PM (5 years ago)

Author:

Joseph Pecoraro

Message:

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.

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Views/DOMTreeContentView.js (modified) (1 diff)
• UserInterface/Views/DOMTreeOutline.css (modified) (2 diffs)
• UserInterface/Views/DOMTreeOutline.js (modified) (2 diffs)
• UserInterface/Views/FormattedValue.css (modified) (1 diff)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+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>
 

trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.js

@@ -64 +64 @@
         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;

trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css

@@ -71 +71 @@
 }
 
-.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);
@@ -78 +78 @@
 }
 
-.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);
 }

trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js

@@ -31 +31 @@
 WI.DOMTreeOutline = class DOMTreeOutline extends WI.TreeOutline
 {
-    constructor(omitRootDOMNode, selectable, excludeRevealElementContextMenu)
-    {
-        super(selectable);
+    constructor({omitRootDOMNode, excludeRevealElementContextMenu, showLastSelected} = {})
+    {
+        super();
 
         this.element.addEventListener("mousedown", this._onmousedown.bind(this), false);
@@ -45 +45 @@
 
         this.element.classList.add("dom", WI.SyntaxHighlightedStyleClassName);
+
+        if (showLastSelected)
+            this.element.classList.add("show-last-selected");
 
         this._includeRootDOMNode = !omitRootDOMNode;

trunk/Source/WebInspectorUI/UserInterface/Views/FormattedValue.css

@@ -73 +73 @@
 }
 
+.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;