Changeset 245497 in webkit


Ignore:
Timestamp:
May 17, 2019 10:10:30 PM (5 years ago)
Author:
Devin Rousso
Message:

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.

Location:
trunk/Source/WebInspectorUI
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r245495 r245497  
     12019-05-17  Devin Rousso  <drousso@apple.com>
     2
     3        Web Inspector: Audit: make it easier to jump to any returned DOM node in the Elements tab
     4        https://bugs.webkit.org/show_bug.cgi?id=197470
     5        <rdar://problem/50466774>
     6
     7        Reviewed by Joseph Pecoraro.
     8
     9        Right now, the only way to jump to the Elements tab for any DOM nodes returned by an audit
     10        is to context menu and "Reveal in DOM Tree". Providing a more visible/discoverable way to
     11        jump to the Elements tab will help developers diagnose issues easier.
     12
     13        * UserInterface/Views/AuditTestCaseContentView.js:
     14        (WI.AuditTestCaseContentView.prototype.layout):
     15        * UserInterface/Views/AuditTestCaseContentView.css:
     16        (.content-view.audit-test-case > section table):
     17
     18        * UserInterface/Views/DOMTreeElement.js:
     19        (WI.DOMTreeElement):
     20        (WI.DOMTreeElement.prototype.set showGoToArrow): Added.
     21        (WI.DOMTreeElement.prototype._buildTagDOM):
     22        (WI.DOMTreeElement.prototype._nodeTitleInfo):
     23        Provide a way to insert a go-to arrow right after the:
     24         - open tag, if the close tag is rendered on a separate line
     25         - close tag, if the close tag is rendered on the same line
     26
     27        * UserInterface/Views/DOMTreeOutline.js:
     28        (WI.DOMTreeOutline):
     29        Allow `DOMTreeOutline` to be non-selectable.
     30
     31        * UserInterface/Views/DOMTreeOutline.css:
     32        (.tree-outline.dom:not(.non-selectable):focus li:matches(.selected, .hovered) .selection-area): Added.
     33        (.tree-outline.dom:not(.non-selectable) li.hovered:not(.selected) .selection-area): Added.
     34        (.tree-outline.dom li .html-tag ~ .go-to-arrow): Added.
     35        (.tree-outline.dom li:not(.hovered) .html-tag ~ .go-to-arrow): Added.
     36        (.tree-outline.dom:focus li:matches(.selected, .hovered) .selection-area): Deleted.
     37        (.tree-outline.dom li.hovered:not(.selected) .selection-area): Deleted.
     38        Ensure that hovering a non-selectable node doesn't change the background color.
     39
    1402019-05-17  Devin Rousso  <drousso@apple.com>
    241

  • trunk/Source/WebInspectorUI/UserInterface/Views/AuditTestCaseContentView.css

    r244353 r245497  
    102102
    103103.content-view.audit-test-case > section table {
     104    width: 100%;
    104105    border-collapse: collapse;
    105106}

  • trunk/Source/WebInspectorUI/UserInterface/Views/AuditTestCaseContentView.js

    r238850 r245497  
    154154
    155155                if (domNode instanceof WI.DOMNode) {
    156                     let treeOutline = new WI.DOMTreeOutline;
     156                    let treeOutline = new WI.DOMTreeOutline({selectable: false});
    157157                    treeOutline.setVisible(true);
    158158                    treeOutline.rootDOMNode = domNode;
    159159
    160160                    let rootTreeElement = treeOutline.children[0];
     161                    rootTreeElement.showGoToArrow = true;
    161162                    if (!rootTreeElement.hasChildren)
    162163                        treeOutline.element.classList.add("single-node");

  • trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js

    r245495 r245497  
    4848        this._subtreeBreakpointCount = 0;
    4949
     50        this._showGoToArrow = false;
    5051        this._highlightedAttributes = new Set;
    5152        this._recentlyModifiedAttributes = new Map;
    … …  
    270271            count--;
    271272        return count;
     273    }
     274
     275    set showGoToArrow(x)
     276    {
     277        if (this._showGoToArrow === x)
     278            return;
     279
     280        this._showGoToArrow = x;
     281
     282        this.updateTitle();
    272283    }
    273284
    … …  
    13541365    }
    13551366
    1356     _buildTagDOM(parentElement, tagName, isClosingTag, isDistinctTreeElement)
     1367    _buildTagDOM({parentElement, tagName, isClosingTag, isDistinctTreeElement, willRenderCloseTagInline})
    13571368    {
    13581369        var node = this.representedObject;
    … …  
    13741385        tagElement.append(">");
    13751386        parentElement.append("\u200B");
     1387
     1388        if (this._showGoToArrow && node.nodeType() === Node.ELEMENT_NODE && willRenderCloseTagInline === isClosingTag) {
     1389            let goToArrowElement = parentElement.appendChild(WI.createGoToArrowButton());
     1390            goToArrowElement.title = WI.UIString("Reveal in Elements Tab");
     1391            goToArrowElement.addEventListener("click", (event) => {
     1392                WI.domManager.inspectElement(this.representedObject.id);
     1393            });
     1394        }
    13761395    }
    13771396
    … …  
    14191438                var tagName = node.nodeNameInCorrectCase();
    14201439                if (this._elementCloseTag) {
    1421                     this._buildTagDOM(info.titleDOM, tagName, true, true);
     1440                    this._buildTagDOM({
     1441                        parentElement: info.titleDOM,
     1442                        tagName,
     1443                        isClosingTag: true,
     1444                        isDistinctTreeElement: true,
     1445                        willRenderCloseTagInline: false,
     1446                    });
    14221447                    info.hasChildren = false;
    14231448                    break;
    14241449                }
    14251450
    1426                 this._buildTagDOM(info.titleDOM, tagName, false, false);
    1427 
    14281451                var textChild = this._singleTextChild(node);
    14291452                var showInlineText = textChild && textChild.nodeValue().length < WI.DOMTreeElement.MaximumInlineTextChildLength;
    1430 
    1431                 if (!this.expanded && (!showInlineText && (this.treeOutline.isXMLMimeType || !WI.DOMTreeElement.ForbiddenClosingTagElements.has(tagName)))) {
     1453                var showInlineEllipsis = !this.expanded && !showInlineText && (this.treeOutline.isXMLMimeType || !WI.DOMTreeElement.ForbiddenClosingTagElements.has(tagName));
     1454
     1455                this._buildTagDOM({
     1456                    parentElement: info.titleDOM,
     1457                    tagName,
     1458                    isClosingTag: false,
     1459                    isDistinctTreeElement: false,
     1460                    willRenderCloseTagInline: showInlineText || showInlineEllipsis,
     1461                });
     1462
     1463                if (showInlineEllipsis) {
    14321464                    if (this.hasChildren) {
    14331465                        var textNodeElement = info.titleDOM.createChild("span", "html-text-node");
    … …  
    14351467                        info.titleDOM.append("\u200B");
    14361468                    }
    1437                     this._buildTagDOM(info.titleDOM, tagName, true, false);
     1469                    this._buildTagDOM({
     1470                        parentElement: info.titleDOM,
     1471                        tagName,
     1472                        isClosingTag: true,
     1473                        isDistinctTreeElement: false,
     1474                        willRenderCloseTagInline: true,
     1475                    });
    14381476                }
    14391477
    … …  
    14541492                    info.titleDOM.append("\u200B");
    14551493
    1456                     this._buildTagDOM(info.titleDOM, tagName, true, false);
     1494                    this._buildTagDOM({
     1495                        parentElement: info.titleDOM,
     1496                        tagName,
     1497                        isClosingTag: true,
     1498                        isDistinctTreeElement: false,
     1499                        willRenderCloseTagInline: true,
     1500                    });
    14571501                    info.hasChildren = false;
    14581502                }

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

    r244327 r245497  
    6363}
    6464
    65 .tree-outline.dom:focus li:matches(.selected, .hovered) .selection-area {
     65.tree-outline.dom:not(.non-selectable):focus li:matches(.selected, .hovered) .selection-area {
    6666    background-color: var(--selected-background-color);
    6767}
    6868
    69 .tree-outline.dom li.hovered:not(.selected) .selection-area {
     69.tree-outline.dom:not(.non-selectable) li.hovered:not(.selected) .selection-area {
    7070    opacity: 0.3;
    7171}
    … …  
    174174.tree-outline.dom li .html-tag.close {
    175175    -webkit-margin-start: calc(-1 * var(--sublist-margin-start) - var(--sublist-border-width-start));
     176}
     177
     178.tree-outline.dom li .html-tag ~ .go-to-arrow {
     179    height: 13px;
     180    vertical-align: -3px;
     181}
     182
     183.tree-outline.dom li:not(.hovered) .html-tag ~ .go-to-arrow {
     184    visibility: hidden;
    176185}
    177186

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

    r245495 r245497  
    3131WI.DOMTreeOutline = class DOMTreeOutline extends WI.TreeOutline
    3232{
    33     constructor({omitRootDOMNode, excludeRevealElementContextMenu, showLastSelected} = {})
    34     {
    35         super();
     33    constructor({selectable, omitRootDOMNode, excludeRevealElementContextMenu, showLastSelected} = {})
     34    {
     35        super(selectable);
    3636
    3737        this.element.addEventListener("mousedown", this._onmousedown.bind(this), false);
Note: See TracChangeset for help on using the changeset viewer.