Attachment 370182 Details for Bug 197470 – Patch

[patch] Patch

bug-197470-20190517212159.patch (text/plain), 11.40 KB, created by Devin Rousso on 2019-05-17 21:22:00 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Devin Rousso

Created: 2019-05-17 21:22:00 PDT

Size: 11.40 KB

patch

obsolete

>diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
>index e90c2e65d95065cda47c0e5c2d06adc32379fc88..38b36d121d4d2696cd46d9cf90ed6145f7cb5c5c 100644
>--- a/Source/WebInspectorUI/ChangeLog
>+++ b/Source/WebInspectorUI/ChangeLog
>@@ -1,3 +1,42 @@
>+2019-05-17  Devin Rousso  <drousso@apple.com>
>+
>+        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  Ross Kirsling  <ross.kirsling@sony.com>
> 
>         REGRESSION(r244350): Web Inspector: Storage tab data grids aren't editable.
>diff --git a/Source/WebInspectorUI/UserInterface/Views/AuditTestCaseContentView.css b/Source/WebInspectorUI/UserInterface/Views/AuditTestCaseContentView.css
>index ea6ccdb55872aca9c484f32fcf7e9a0627940d2f..a2101aff881f4ea5d7d62cda63b4b9ffa9af0716 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/AuditTestCaseContentView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/AuditTestCaseContentView.css
>@@ -101,6 +101,7 @@
> }
> 
> .content-view.audit-test-case > section table {
>+    width: 100%;
>     border-collapse: collapse;
> }
> 
>diff --git a/Source/WebInspectorUI/UserInterface/Views/AuditTestCaseContentView.js b/Source/WebInspectorUI/UserInterface/Views/AuditTestCaseContentView.js
>index 1a8d7fd97eb7f6088351472461e7dfb82b623232..d0d5df0706360ab0ef558d564a4498e6fe1f69c6 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/AuditTestCaseContentView.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/AuditTestCaseContentView.js
>@@ -153,11 +153,12 @@ WI.AuditTestCaseContentView = class AuditTestCaseContentView extends WI.AuditTes
>                 let dataElement = rowElement.appendChild(document.createElement("td"));
> 
>                 if (domNode instanceof WI.DOMNode) {
>-                    let treeOutline = new WI.DOMTreeOutline;
>+                    let treeOutline = new WI.DOMTreeOutline({selectable: false});
>                     treeOutline.setVisible(true);
>                     treeOutline.rootDOMNode = domNode;
> 
>                     let rootTreeElement = treeOutline.children[0];
>+                    rootTreeElement.showGoToArrow = true;
>                     if (!rootTreeElement.hasChildren)
>                         treeOutline.element.classList.add("single-node");
> 
>diff --git a/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js
>index 0be9b0806e4cbd9515843135e0506a4830d3541f..504d8d1ba24f22b123311e43746d506f8bad66a5 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js
>@@ -47,6 +47,7 @@ WI.DOMTreeElement = class DOMTreeElement extends WI.TreeElement
>         this._boundHighlightAnimationEnd = this._highlightAnimationEnd.bind(this);
>         this._subtreeBreakpointCount = 0;
> 
>+        this._showGoToArrow = false;
>         this._highlightedAttributes = new Set;
>         this._recentlyModifiedAttributes = new Map;
>         this._closeTagTreeElement = null;
>@@ -271,6 +272,16 @@ WI.DOMTreeElement = class DOMTreeElement extends WI.TreeElement
>         return count;
>     }
> 
>+    set showGoToArrow(x)
>+    {
>+        if (this._showGoToArrow === x)
>+            return;
>+
>+        this._showGoToArrow = x;
>+
>+        this.updateTitle();
>+    }
>+
>     attributeDidChange(name)
>     {
>         if (this._recentlyModifiedAttributes.has(name))
>@@ -1335,7 +1346,7 @@ WI.DOMTreeElement = class DOMTreeElement extends WI.TreeElement
>             attrSpanElement.classList.add("highlight");
>     }
> 
>-    _buildTagDOM(parentElement, tagName, isClosingTag, isDistinctTreeElement)
>+    _buildTagDOM({parentElement, tagName, isClosingTag, isDistinctTreeElement, willRenderCloseTagInline})
>     {
>         var node = this.representedObject;
>         var classes = ["html-tag"];
>@@ -1355,6 +1366,14 @@ WI.DOMTreeElement = class DOMTreeElement extends WI.TreeElement
>         }
>         tagElement.append(">");
>         parentElement.append("\u200B");
>+
>+        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);
>+            });
>+        }
>     }
> 
>     _nodeTitleInfo()
>@@ -1400,23 +1419,42 @@ WI.DOMTreeElement = class DOMTreeElement extends WI.TreeElement
> 
>                 var tagName = node.nodeNameInCorrectCase();
>                 if (this._elementCloseTag) {
>-                    this._buildTagDOM(info.titleDOM, tagName, true, true);
>+                    this._buildTagDOM({
>+                        parentElement: info.titleDOM,
>+                        tagName,
>+                        isClosingTag: true,
>+                        isDistinctTreeElement: true,
>+                        willRenderCloseTagInline: false,
>+                    });
>                     info.hasChildren = false;
>                     break;
>                 }
> 
>-                this._buildTagDOM(info.titleDOM, tagName, false, false);
>-
>                 var textChild = this._singleTextChild(node);
>                 var showInlineText = textChild && textChild.nodeValue().length < WI.DOMTreeElement.MaximumInlineTextChildLength;
>+                var showInlineEllipsis = !this.expanded && !showInlineText && (this.treeOutline.isXMLMimeType || !WI.DOMTreeElement.ForbiddenClosingTagElements.has(tagName));
> 
>-                if (!this.expanded && (!showInlineText && (this.treeOutline.isXMLMimeType || !WI.DOMTreeElement.ForbiddenClosingTagElements.has(tagName)))) {
>+                this._buildTagDOM({
>+                    parentElement: info.titleDOM,
>+                    tagName,
>+                    isClosingTag: false,
>+                    isDistinctTreeElement: false,
>+                    willRenderCloseTagInline: showInlineText || showInlineEllipsis,
>+                });
>+
>+                if (showInlineEllipsis) {
>                     if (this.hasChildren) {
>                         var textNodeElement = info.titleDOM.createChild("span", "html-text-node");
>                         textNodeElement.textContent = ellipsis;
>                         info.titleDOM.append("\u200B");
>                     }
>-                    this._buildTagDOM(info.titleDOM, tagName, true, false);
>+                    this._buildTagDOM({
>+                        parentElement: info.titleDOM,
>+                        tagName,
>+                        isClosingTag: true,
>+                        isDistinctTreeElement: false,
>+                        willRenderCloseTagInline: true,
>+                    });
>                 }
> 
>                 // If this element only has a single child that is a text node,
>@@ -1435,7 +1473,13 @@ WI.DOMTreeElement = class DOMTreeElement extends WI.TreeElement
> 
>                     info.titleDOM.append("\u200B");
> 
>-                    this._buildTagDOM(info.titleDOM, tagName, true, false);
>+                    this._buildTagDOM({
>+                        parentElement: info.titleDOM,
>+                        tagName,
>+                        isClosingTag: true,
>+                        isDistinctTreeElement: false,
>+                        willRenderCloseTagInline: true,
>+                    });
>                     info.hasChildren = false;
>                 }
>                 break;
>diff --git a/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css b/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css
>index f96b187f0bf49071c411c650a4dc2df5a5d3e2ea..a340188c95e4b26f97b83e343ec5be94237fa6de 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css
>@@ -62,11 +62,11 @@
>     border-top: 2px solid var(--selected-background-color);
> }
> 
>-.tree-outline.dom:focus li:matches(.selected, .hovered) .selection-area {
>+.tree-outline.dom:not(.non-selectable):focus li:matches(.selected, .hovered) .selection-area {
>     background-color: var(--selected-background-color);
> }
> 
>-.tree-outline.dom li.hovered:not(.selected) .selection-area {
>+.tree-outline.dom:not(.non-selectable) li.hovered:not(.selected) .selection-area {
>     opacity: 0.3;
> }
> 
>@@ -175,6 +175,15 @@ body[dir=rtl] .tree-outline.dom li.pseudo-class-enabled > .selection-area::befor
>     -webkit-margin-start: calc(-1 * var(--sublist-margin-start) - var(--sublist-border-width-start));
> }
> 
>+.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;
>+}
>+
> .tree-outline.dom li.parent::before {
>     position: relative;
>     z-index: 20;
>diff --git a/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js b/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js
>index 668f8eaaa59cecfca0b0124784755a0ddaa337dd..a507716fac9a4da66d82c137b312fd5216bdead2 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js
>@@ -30,9 +30,9 @@
> 
> WI.DOMTreeOutline = class DOMTreeOutline extends WI.TreeOutline
> {
>-    constructor({omitRootDOMNode, excludeRevealElementContextMenu, showLastSelected} = {})
>+    constructor({selectable, omitRootDOMNode, excludeRevealElementContextMenu, showLastSelected} = {})
>     {
>-        super();
>+        super(selectable);
> 
>         this.element.addEventListener("mousedown", this._onmousedown.bind(this), false);
>         this.element.addEventListener("mousemove", this._onmousemove.bind(this), false);

Actions: View | Formatted Diff | Diff

Attachments on bug 197470: 369050 | 369052 | 370180 | 370181 | 370182