Attachment 369050 Details for Bug 197470 – Patch

[patch] Patch

bug-197470-20190503221348.patch (text/plain), 12.65 KB, created by Devin Rousso on 2019-05-03 22:13:49 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Devin Rousso

Created: 2019-05-03 22:13:49 PDT

Size: 12.65 KB

patch

obsolete

>diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
>index 97206c896b10ddf3ad958b68b3f8bce3e8085713..abbc6e0dcb68d36a9b44e21a729afd829eb64236 100644
>--- a/Source/WebInspectorUI/ChangeLog
>+++ b/Source/WebInspectorUI/ChangeLog
>@@ -1,3 +1,41 @@
>+2019-05-03  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
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        * 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.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.
>+
>+        * UserInterface/Views/DOMTreeOutline.js:
>+        (WI.DOMTreeOutline):
>+        Allow `DOMTreeOutline` to be non-selectable.
>+
>+        * UserInterface/Views/TreeElement.js:
>+        (WI.TreeElement.treeElementToggled):
>+        Allow still expanding/collapsing if the owner `TreeOutline` is non-selectable.
>+
> 2019-05-03  Devin Rousso  <drousso@apple.com>
> 
>         Web Inspector: DOM: rename "low power" to "display composited"
>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 7a091390cc38eb1f7691f070c0269ad4ae6c38ce..73188d2b697759415f382c9bc31a41c9f46d6ce3 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);
>diff --git a/Source/WebInspectorUI/UserInterface/Views/TreeElement.js b/Source/WebInspectorUI/UserInterface/Views/TreeElement.js
>index adf5904b621e5912be95d3c5f7dd2a114f71ffc5..63c27b8f1608094a36477ee4fa042f75669e1661 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/TreeElement.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/TreeElement.js
>@@ -300,14 +300,12 @@ WI.TreeElement = class TreeElement extends WI.Object
>     static treeElementToggled(event)
>     {
>         let element = event.currentTarget;
>-        if (!element || !element.treeElement)
>+        if (!element)
>             return;
> 
>         let treeElement = element.treeElement;
>-        if (!treeElement.treeOutline.selectable) {
>-            treeElement.treeOutline.dispatchEventToListeners(WI.TreeOutline.Event.ElementClicked, {treeElement});
>+        if (!treeElement)
>             return;
>-        }
> 
>         let toggleOnClick = treeElement.toggleOnClick && !treeElement.selectable;
>         let isInTriangle = treeElement.isEventWithinDisclosureTriangle(event);
>@@ -326,6 +324,9 @@ WI.TreeElement = class TreeElement extends WI.Object
>                 treeElement.expand();
>         }
>         event.stopPropagation();
>+
>+        if (!treeElement.treeOutline.selectable)
>+            treeElement.treeOutline.dispatchEventToListeners(WI.TreeOutline.Event.ElementClicked, {treeElement});
>     }
> 
>     static treeElementDoubleClicked(event)

Actions: View | Formatted Diff | Diff

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