Skip to content
Permalink
Browse files
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.


Canonical link: https://commits.webkit.org/211226@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@244327 268f45cc-cd09-0410-ab3c-d52691b4dbfc
  • Loading branch information
JosephPecoraro committed Apr 16, 2019
1 parent 143ca57 commit 6e2f52852b7bbea227eb5e29dcd937431df13329
Showing 5 changed files with 36 additions and 5 deletions.
@@ -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
@@ -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);
@@ -70,14 +70,14 @@
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);
}

@@ -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;
@@ -72,6 +72,10 @@
-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;

0 comments on commit 6e2f528

Please sign in to comment.