<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[245497] trunk/Source/WebInspectorUI</title>
</head>
<body>

<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt;  }
#msg dl a { font-weight: bold}
#msg dl a:link    { color:#fc3; }
#msg dl a:active  { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff  {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/245497">245497</a></dd>
<dt>Author</dt> <dd>drousso@apple.com</dd>
<dt>Date</dt> <dd>2019-05-17 22:10:30 -0700 (Fri, 17 May 2019)</dd>
</dl>

<h3>Log Message</h3>
<pre>Web Inspector: Audit: make it easier to jump to any returned DOM node in the Elements tab
https://bugs.webkit.org/show_bug.cgi?id=197470
<rdar://problem/50466774>

Reviewed by Joseph Pecoraro.

Right now, the only way to jump to the Elements tab for any DOM nodes returned by an audit
is to context menu and "Reveal in DOM Tree". Providing a more visible/discoverable way to
jump to the Elements tab will help developers diagnose issues easier.

* UserInterface/Views/AuditTestCaseContentView.js:
(WI.AuditTestCaseContentView.prototype.layout):
* UserInterface/Views/AuditTestCaseContentView.css:
(.content-view.audit-test-case > section table):

* UserInterface/Views/DOMTreeElement.js:
(WI.DOMTreeElement):
(WI.DOMTreeElement.prototype.set showGoToArrow): Added.
(WI.DOMTreeElement.prototype._buildTagDOM):
(WI.DOMTreeElement.prototype._nodeTitleInfo):
Provide a way to insert a go-to arrow right after the:
 - open tag, if the close tag is rendered on a separate line
 - close tag, if the close tag is rendered on the same line

* UserInterface/Views/DOMTreeOutline.js:
(WI.DOMTreeOutline):
Allow `DOMTreeOutline` to be non-selectable.

* UserInterface/Views/DOMTreeOutline.css:
(.tree-outline.dom:not(.non-selectable):focus li:matches(.selected, .hovered) .selection-area): Added.
(.tree-outline.dom:not(.non-selectable) li.hovered:not(.selected) .selection-area): Added.
(.tree-outline.dom li .html-tag ~ .go-to-arrow): Added.
(.tree-outline.dom li:not(.hovered) .html-tag ~ .go-to-arrow): Added.
(.tree-outline.dom:focus li:matches(.selected, .hovered) .selection-area): Deleted.
(.tree-outline.dom li.hovered:not(.selected) .selection-area): Deleted.
Ensure that hovering a non-selectable node doesn't change the background color.</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsAuditTestCaseContentViewcss">trunk/Source/WebInspectorUI/UserInterface/Views/AuditTestCaseContentView.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsAuditTestCaseContentViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/AuditTestCaseContentView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDOMTreeElementjs">trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDOMTreeOutlinecss">trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDOMTreeOutlinejs">trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (245496 => 245497)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog    2019-05-18 04:58:36 UTC (rev 245496)
+++ trunk/Source/WebInspectorUI/ChangeLog       2019-05-18 05:10:30 UTC (rev 245497)
</span><span class="lines">@@ -1,5 +1,44 @@
</span><span class="cx"> 2019-05-17  Devin Rousso  <drousso@apple.com>
</span><span class="cx"> 
</span><ins>+        Web Inspector: Audit: make it easier to jump to any returned DOM node in the Elements tab
+        https://bugs.webkit.org/show_bug.cgi?id=197470
+        <rdar://problem/50466774>
+
+        Reviewed by Joseph Pecoraro.
+
+        Right now, the only way to jump to the Elements tab for any DOM nodes returned by an audit
+        is to context menu and "Reveal in DOM Tree". Providing a more visible/discoverable way to
+        jump to the Elements tab will help developers diagnose issues easier.
+
+        * UserInterface/Views/AuditTestCaseContentView.js:
+        (WI.AuditTestCaseContentView.prototype.layout):
+        * UserInterface/Views/AuditTestCaseContentView.css:
+        (.content-view.audit-test-case > section table):
+
+        * UserInterface/Views/DOMTreeElement.js:
+        (WI.DOMTreeElement):
+        (WI.DOMTreeElement.prototype.set showGoToArrow): Added.
+        (WI.DOMTreeElement.prototype._buildTagDOM):
+        (WI.DOMTreeElement.prototype._nodeTitleInfo):
+        Provide a way to insert a go-to arrow right after the:
+         - open tag, if the close tag is rendered on a separate line
+         - close tag, if the close tag is rendered on the same line
+
+        * UserInterface/Views/DOMTreeOutline.js:
+        (WI.DOMTreeOutline):
+        Allow `DOMTreeOutline` to be non-selectable.
+
+        * UserInterface/Views/DOMTreeOutline.css:
+        (.tree-outline.dom:not(.non-selectable):focus li:matches(.selected, .hovered) .selection-area): Added.
+        (.tree-outline.dom:not(.non-selectable) li.hovered:not(.selected) .selection-area): Added.
+        (.tree-outline.dom li .html-tag ~ .go-to-arrow): Added.
+        (.tree-outline.dom li:not(.hovered) .html-tag ~ .go-to-arrow): Added.
+        (.tree-outline.dom:focus li:matches(.selected, .hovered) .selection-area): Deleted.
+        (.tree-outline.dom li.hovered:not(.selected) .selection-area): Deleted.
+        Ensure that hovering a non-selectable node doesn't change the background color.
+
+2019-05-17  Devin Rousso  <drousso@apple.com>
+
</ins><span class="cx">         Web Inspector: Elements: context menu items in DOM tree should work when not clicking directly on the node representation
</span><span class="cx">         https://bugs.webkit.org/show_bug.cgi?id=197541
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsAuditTestCaseContentViewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/AuditTestCaseContentView.css (245496 => 245497)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/AuditTestCaseContentView.css     2019-05-18 04:58:36 UTC (rev 245496)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/AuditTestCaseContentView.css        2019-05-18 05:10:30 UTC (rev 245497)
</span><span class="lines">@@ -101,6 +101,7 @@
</span><span class="cx"> }
</span><span class="cx"> 
</span><span class="cx"> .content-view.audit-test-case > section table {
</span><ins>+    width: 100%;
</ins><span class="cx">     border-collapse: collapse;
</span><span class="cx"> }
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsAuditTestCaseContentViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/AuditTestCaseContentView.js (245496 => 245497)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/AuditTestCaseContentView.js      2019-05-18 04:58:36 UTC (rev 245496)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/AuditTestCaseContentView.js 2019-05-18 05:10:30 UTC (rev 245497)
</span><span class="lines">@@ -153,11 +153,12 @@
</span><span class="cx">                 let dataElement = rowElement.appendChild(document.createElement("td"));
</span><span class="cx"> 
</span><span class="cx">                 if (domNode instanceof WI.DOMNode) {
</span><del>-                    let treeOutline = new WI.DOMTreeOutline;
</del><ins>+                    let treeOutline = new WI.DOMTreeOutline({selectable: false});
</ins><span class="cx">                     treeOutline.setVisible(true);
</span><span class="cx">                     treeOutline.rootDOMNode = domNode;
</span><span class="cx"> 
</span><span class="cx">                     let rootTreeElement = treeOutline.children[0];
</span><ins>+                    rootTreeElement.showGoToArrow = true;
</ins><span class="cx">                     if (!rootTreeElement.hasChildren)
</span><span class="cx">                         treeOutline.element.classList.add("single-node");
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDOMTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js (245496 => 245497)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js        2019-05-18 04:58:36 UTC (rev 245496)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js   2019-05-18 05:10:30 UTC (rev 245497)
</span><span class="lines">@@ -47,6 +47,7 @@
</span><span class="cx">         this._boundHighlightAnimationEnd = this._highlightAnimationEnd.bind(this);
</span><span class="cx">         this._subtreeBreakpointCount = 0;
</span><span class="cx"> 
</span><ins>+        this._showGoToArrow = false;
</ins><span class="cx">         this._highlightedAttributes = new Set;
</span><span class="cx">         this._recentlyModifiedAttributes = new Map;
</span><span class="cx">         this._closeTagTreeElement = null;
</span><span class="lines">@@ -271,6 +272,16 @@
</span><span class="cx">         return count;
</span><span class="cx">     }
</span><span class="cx"> 
</span><ins>+    set showGoToArrow(x)
+    {
+        if (this._showGoToArrow === x)
+            return;
+
+        this._showGoToArrow = x;
+
+        this.updateTitle();
+    }
+
</ins><span class="cx">     attributeDidChange(name)
</span><span class="cx">     {
</span><span class="cx">         if (this._recentlyModifiedAttributes.has(name))
</span><span class="lines">@@ -1353,7 +1364,7 @@
</span><span class="cx">             attrSpanElement.classList.add("highlight");
</span><span class="cx">     }
</span><span class="cx"> 
</span><del>-    _buildTagDOM(parentElement, tagName, isClosingTag, isDistinctTreeElement)
</del><ins>+    _buildTagDOM({parentElement, tagName, isClosingTag, isDistinctTreeElement, willRenderCloseTagInline})
</ins><span class="cx">     {
</span><span class="cx">         var node = this.representedObject;
</span><span class="cx">         var classes = ["html-tag"];
</span><span class="lines">@@ -1373,6 +1384,14 @@
</span><span class="cx">         }
</span><span class="cx">         tagElement.append(">");
</span><span class="cx">         parentElement.append("\u200B");
</span><ins>+
+        if (this._showGoToArrow && node.nodeType() === Node.ELEMENT_NODE && willRenderCloseTagInline === isClosingTag) {
+            let goToArrowElement = parentElement.appendChild(WI.createGoToArrowButton());
+            goToArrowElement.title = WI.UIString("Reveal in Elements Tab");
+            goToArrowElement.addEventListener("click", (event) => {
+                WI.domManager.inspectElement(this.representedObject.id);
+            });
+        }
</ins><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     _nodeTitleInfo()
</span><span class="lines">@@ -1418,23 +1437,42 @@
</span><span class="cx"> 
</span><span class="cx">                 var tagName = node.nodeNameInCorrectCase();
</span><span class="cx">                 if (this._elementCloseTag) {
</span><del>-                    this._buildTagDOM(info.titleDOM, tagName, true, true);
</del><ins>+                    this._buildTagDOM({
+                        parentElement: info.titleDOM,
+                        tagName,
+                        isClosingTag: true,
+                        isDistinctTreeElement: true,
+                        willRenderCloseTagInline: false,
+                    });
</ins><span class="cx">                     info.hasChildren = false;
</span><span class="cx">                     break;
</span><span class="cx">                 }
</span><span class="cx"> 
</span><del>-                this._buildTagDOM(info.titleDOM, tagName, false, false);
-
</del><span class="cx">                 var textChild = this._singleTextChild(node);
</span><span class="cx">                 var showInlineText = textChild && textChild.nodeValue().length < WI.DOMTreeElement.MaximumInlineTextChildLength;
</span><ins>+                var showInlineEllipsis = !this.expanded && !showInlineText && (this.treeOutline.isXMLMimeType || !WI.DOMTreeElement.ForbiddenClosingTagElements.has(tagName));
</ins><span class="cx"> 
</span><del>-                if (!this.expanded && (!showInlineText && (this.treeOutline.isXMLMimeType || !WI.DOMTreeElement.ForbiddenClosingTagElements.has(tagName)))) {
</del><ins>+                this._buildTagDOM({
+                    parentElement: info.titleDOM,
+                    tagName,
+                    isClosingTag: false,
+                    isDistinctTreeElement: false,
+                    willRenderCloseTagInline: showInlineText || showInlineEllipsis,
+                });
+
+                if (showInlineEllipsis) {
</ins><span class="cx">                     if (this.hasChildren) {
</span><span class="cx">                         var textNodeElement = info.titleDOM.createChild("span", "html-text-node");
</span><span class="cx">                         textNodeElement.textContent = ellipsis;
</span><span class="cx">                         info.titleDOM.append("\u200B");
</span><span class="cx">                     }
</span><del>-                    this._buildTagDOM(info.titleDOM, tagName, true, false);
</del><ins>+                    this._buildTagDOM({
+                        parentElement: info.titleDOM,
+                        tagName,
+                        isClosingTag: true,
+                        isDistinctTreeElement: false,
+                        willRenderCloseTagInline: true,
+                    });
</ins><span class="cx">                 }
</span><span class="cx"> 
</span><span class="cx">                 // If this element only has a single child that is a text node,
</span><span class="lines">@@ -1453,7 +1491,13 @@
</span><span class="cx"> 
</span><span class="cx">                     info.titleDOM.append("\u200B");
</span><span class="cx"> 
</span><del>-                    this._buildTagDOM(info.titleDOM, tagName, true, false);
</del><ins>+                    this._buildTagDOM({
+                        parentElement: info.titleDOM,
+                        tagName,
+                        isClosingTag: true,
+                        isDistinctTreeElement: false,
+                        willRenderCloseTagInline: true,
+                    });
</ins><span class="cx">                     info.hasChildren = false;
</span><span class="cx">                 }
</span><span class="cx">                 break;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDOMTreeOutlinecss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css (245496 => 245497)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css       2019-05-18 04:58:36 UTC (rev 245496)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css  2019-05-18 05:10:30 UTC (rev 245497)
</span><span class="lines">@@ -62,11 +62,11 @@
</span><span class="cx">     border-top: 2px solid var(--selected-background-color);
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.tree-outline.dom:focus li:matches(.selected, .hovered) .selection-area {
</del><ins>+.tree-outline.dom:not(.non-selectable):focus li:matches(.selected, .hovered) .selection-area {
</ins><span class="cx">     background-color: var(--selected-background-color);
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.tree-outline.dom li.hovered:not(.selected) .selection-area {
</del><ins>+.tree-outline.dom:not(.non-selectable) li.hovered:not(.selected) .selection-area {
</ins><span class="cx">     opacity: 0.3;
</span><span class="cx"> }
</span><span class="cx"> 
</span><span class="lines">@@ -175,6 +175,15 @@
</span><span class="cx">     -webkit-margin-start: calc(-1 * var(--sublist-margin-start) - var(--sublist-border-width-start));
</span><span class="cx"> }
</span><span class="cx"> 
</span><ins>+.tree-outline.dom li .html-tag ~ .go-to-arrow {
+    height: 13px;
+    vertical-align: -3px;
+}
+
+.tree-outline.dom li:not(.hovered) .html-tag ~ .go-to-arrow {
+    visibility: hidden;
+}
+
</ins><span class="cx"> .tree-outline.dom li.parent::before {
</span><span class="cx">     position: relative;
</span><span class="cx">     z-index: 20;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDOMTreeOutlinejs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js (245496 => 245497)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js        2019-05-18 04:58:36 UTC (rev 245496)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js   2019-05-18 05:10:30 UTC (rev 245497)
</span><span class="lines">@@ -30,9 +30,9 @@
</span><span class="cx"> 
</span><span class="cx"> WI.DOMTreeOutline = class DOMTreeOutline extends WI.TreeOutline
</span><span class="cx"> {
</span><del>-    constructor({omitRootDOMNode, excludeRevealElementContextMenu, showLastSelected} = {})
</del><ins>+    constructor({selectable, omitRootDOMNode, excludeRevealElementContextMenu, showLastSelected} = {})
</ins><span class="cx">     {
</span><del>-        super();
</del><ins>+        super(selectable);
</ins><span class="cx"> 
</span><span class="cx">         this.element.addEventListener("mousedown", this._onmousedown.bind(this), false);
</span><span class="cx">         this.element.addEventListener("mousemove", this._onmousemove.bind(this), false);
</span></span></pre>
</div>
</div>

</body>
</html>