third_party/WebKit/Source/devtools/front_end/elements/ElementsTreeOutline.js

   1 /*
   2  * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
   3  * Copyright (C) 2008 Matt Lilek <webkit@mattlilek.com>
   4  * Copyright (C) 2009 Joseph Pecoraro
   5  *
   6  * Redistribution and use in source and binary forms, with or without
   7  * modification, are permitted provided that the following conditions
   8  * are met:
   9  *
  10  * 1.  Redistributions of source code must retain the above copyright
  11  *     notice, this list of conditions and the following disclaimer.
  12  * 2.  Redistributions in binary form must reproduce the above copyright
  13  *     notice, this list of conditions and the following disclaimer in the
  14  *     documentation and/or other materials provided with the distribution.
  15  * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
  16  *     its contributors may be used to endorse or promote products derived
  17  *     from this software without specific prior written permission.
  18  *
  19  * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
  20  * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
  21  * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
  22  * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
  23  * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
  24  * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
  25  * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
  26  * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  27  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
  28  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  29  */
  30
  31 /**
  32  * @constructor
  33  * @extends {TreeOutline}
  34  * @param {!WebInspector.DOMModel} domModel
  35  * @param {boolean=} omitRootDOMNode
  36  * @param {boolean=} selectEnabled
  37  */
  38 WebInspector.ElementsTreeOutline = function(domModel, omitRootDOMNode, selectEnabled)
  39 {
  40     this._domModel = domModel;
  41     this._treeElementSymbol = Symbol("treeElement");
  42
  43     var element = createElement("div");
  44
  45     this._shadowRoot = WebInspector.createShadowRootWithCoreStyles(element);
  46     this._shadowRoot.appendChild(WebInspector.Widget.createStyleElement("elements/elementsTreeOutline.css"));
  47     var outlineDisclosureElement = this._shadowRoot.createChild("div", "elements-disclosure");
  48
  49     TreeOutline.call(this);
  50     this._element = this.element;
  51     this._element.classList.add("elements-tree-outline", "source-code");
  52     this._element.addEventListener("mousedown", this._onmousedown.bind(this), false);
  53     this._element.addEventListener("mousemove", this._onmousemove.bind(this), false);
  54     this._element.addEventListener("mouseleave", this._onmouseleave.bind(this), false);
  55     this._element.addEventListener("dragstart", this._ondragstart.bind(this), false);
  56     this._element.addEventListener("dragover", this._ondragover.bind(this), false);
  57     this._element.addEventListener("dragleave", this._ondragleave.bind(this), false);
  58     this._element.addEventListener("drop", this._ondrop.bind(this), false);
  59     this._element.addEventListener("dragend", this._ondragend.bind(this), false);
  60     this._element.addEventListener("webkitAnimationEnd", this._onAnimationEnd.bind(this), false);
  61     this._element.addEventListener("contextmenu", this._contextMenuEventFired.bind(this), false);
  62
  63     outlineDisclosureElement.appendChild(this._element);
  64     this.element = element;
  65
  66     this._includeRootDOMNode = !omitRootDOMNode;
  67     this._selectEnabled = selectEnabled;
  68     /** @type {?WebInspector.DOMNode} */
  69     this._rootDOMNode = null;
  70     /** @type {?WebInspector.DOMNode} */
  71     this._selectedDOMNode = null;
  72
  73     this._visible = false;
  74     this._pickNodeMode = false;
  75
  76     this._createNodeDecorators();
  77
  78     this._popoverHelper = new WebInspector.PopoverHelper(this._element, this._getPopoverAnchor.bind(this), this._showPopover.bind(this));
  79     this._popoverHelper.setTimeout(0);
  80
  81     /** @type {!Map<!WebInspector.DOMNode, !WebInspector.ElementsTreeOutline.UpdateRecord>} */
  82     this._updateRecords = new Map();
  83     /** @type {!Set<!WebInspector.ElementsTreeElement>} */
  84     this._treeElementsBeingUpdated = new Set();
  85 }
  86
  87 /** @typedef {{node: !WebInspector.DOMNode, isCut: boolean}} */
  88 WebInspector.ElementsTreeOutline.ClipboardData;
  89
  90 /**
  91  * @enum {string}
  92  */
  93 WebInspector.ElementsTreeOutline.Events = {
  94     NodePicked: "NodePicked",
  95     SelectedNodeChanged: "SelectedNodeChanged",
  96     ElementsTreeUpdated: "ElementsTreeUpdated"
  97 }
  98
  99 /**
 100  * @const
 101  * @type {!Object.<string, string>}
 102  */
 103 WebInspector.ElementsTreeOutline.MappedCharToEntity = {
 104     "\u00a0": "nbsp",
 105     "\u0093": "#147", // <control>
 106     "\u00ad": "shy",
 107     "\u2002": "ensp",
 108     "\u2003": "emsp",
 109     "\u2009": "thinsp",
 110     "\u200a": "#8202", // Hairspace
 111     "\u200b": "#8203", // ZWSP
 112     "\u200c": "zwnj",
 113     "\u200d": "zwj",
 114     "\u200e": "lrm",
 115     "\u200f": "rlm",
 116     "\u202a": "#8234", // LRE
 117     "\u202b": "#8235", // RLE
 118     "\u202c": "#8236", // PDF
 119     "\u202d": "#8237", // LRO
 120     "\u202e": "#8238", // RLO
 121     "\ufeff": "#65279" // BOM
 122 }
 123
 124 WebInspector.ElementsTreeOutline.prototype = {
 125     /**
 126      * @return {symbol}
 127      */
 128     treeElementSymbol: function()
 129     {
 130         return this._treeElementSymbol;
 131     },
 132
 133     focus: function()
 134     {
 135         this._element.focus();
 136     },
 137
 138     /**
 139      * @return {boolean}
 140      */
 141     hasFocus: function()
 142     {
 143         return this._element === WebInspector.currentFocusElement();
 144     },
 145
 146     /**
 147      * @param {boolean} wrap
 148      */
 149     setWordWrap: function(wrap)
 150     {
 151         this._element.classList.toggle("elements-tree-nowrap", !wrap);
 152     },
 153
 154     /**
 155      * @param {!Event} event
 156      */
 157     _onAnimationEnd: function(event)
 158     {
 159         event.target.classList.remove("elements-tree-element-pick-node-1");
 160         event.target.classList.remove("elements-tree-element-pick-node-2");
 161     },
 162
 163     /**
 164      * @return {boolean}
 165      */
 166     pickNodeMode: function()
 167     {
 168         return this._pickNodeMode;
 169     },
 170
 171     /**
 172      * @param {boolean} value
 173      */
 174     setPickNodeMode: function(value)
 175     {
 176         this._pickNodeMode = value;
 177         this._element.classList.toggle("pick-node-mode", value);
 178     },
 179
 180     /**
 181      * @param {!Element} element
 182      * @param {?WebInspector.DOMNode} node
 183      * @return {boolean}
 184      */
 185     handlePickNode: function(element, node)
 186     {
 187         if (!this._pickNodeMode)
 188             return false;
 189
 190         this.dispatchEventToListeners(WebInspector.ElementsTreeOutline.Events.NodePicked, node);
 191         var hasRunningAnimation = element.classList.contains("elements-tree-element-pick-node-1") || element.classList.contains("elements-tree-element-pick-node-2");
 192         element.classList.toggle("elements-tree-element-pick-node-1");
 193         if (hasRunningAnimation)
 194             element.classList.toggle("elements-tree-element-pick-node-2");
 195         return true;
 196     },
 197
 198     /**
 199      * @return {!WebInspector.DOMModel}
 200      */
 201     domModel: function()
 202     {
 203         return this._domModel;
 204     },
 205
 206     /**
 207      * @param {?WebInspector.InplaceEditor.Controller} multilineEditing
 208      */
 209     setMultilineEditing: function(multilineEditing)
 210     {
 211         this._multilineEditing = multilineEditing;
 212     },
 213
 214     /**
 215      * @return {number}
 216      */
 217     visibleWidth: function()
 218     {
 219         return this._visibleWidth;
 220     },
 221
 222     /**
 223      * @param {number} width
 224      */
 225     setVisibleWidth: function(width)
 226     {
 227         this._visibleWidth = width;
 228         if (this._multilineEditing)
 229             this._multilineEditing.setWidth(this._visibleWidth);
 230     },
 231
 232     /**
 233      * @return {!Array<!WebInspector.ElementsTreeOutline.ElementDecorator>}
 234      */
 235     nodeDecorators: function()
 236     {
 237         return this._nodeDecorators;
 238     },
 239
 240     _createNodeDecorators: function()
 241     {
 242         this._nodeDecorators = [];
 243         this._nodeDecorators.push(new WebInspector.ElementsTreeOutline.PseudoStateDecorator());
 244     },
 245
 246     /**
 247      * @param {?WebInspector.ElementsTreeOutline.ClipboardData} data
 248      */
 249     _setClipboardData: function(data)
 250     {
 251         if (this._clipboardNodeData) {
 252             var treeElement = this.findTreeElement(this._clipboardNodeData.node);
 253             if (treeElement)
 254                 treeElement.setInClipboard(false);
 255             delete this._clipboardNodeData;
 256         }
 257
 258         if (data) {
 259             var treeElement = this.findTreeElement(data.node);
 260             if (treeElement)
 261                 treeElement.setInClipboard(true);
 262             this._clipboardNodeData = data;
 263         }
 264     },
 265
 266     /**
 267      * @param {!WebInspector.DOMNode} removedNode
 268      */
 269     resetClipboardIfNeeded: function(removedNode)
 270     {
 271         if (this._clipboardNodeData && this._clipboardNodeData.node === removedNode)
 272             this._setClipboardData(null);
 273     },
 274
 275     /**
 276      * @param {boolean} isCut
 277      * @param {!Event} event
 278      */
 279     handleCopyOrCutKeyboardEvent: function(isCut, event)
 280     {
 281         this._setClipboardData(null);
 282
 283         // Don't prevent the normal copy if the user has a selection.
 284         if (!event.target.isComponentSelectionCollapsed())
 285             return;
 286
 287         // Do not interfere with text editing.
 288         if (WebInspector.isEditing())
 289             return;
 290
 291         var targetNode = this.selectedDOMNode();
 292         if (!targetNode)
 293             return;
 294
 295         event.clipboardData.clearData();
 296         event.preventDefault();
 297
 298         this.performCopyOrCut(isCut, targetNode);
 299     },
 300
 301     /**
 302      * @param {boolean} isCut
 303      * @param {?WebInspector.DOMNode} node
 304      */
 305     performCopyOrCut: function(isCut, node)
 306     {
 307         if (isCut && (node.isShadowRoot() || node.ancestorUserAgentShadowRoot()))
 308             return;
 309
 310         node.copyNode();
 311         this._setClipboardData({ node: node, isCut: isCut });
 312     },
 313
 314     /**
 315      * @param {!WebInspector.DOMNode} targetNode
 316      * @return {boolean}
 317      */
 318     canPaste: function(targetNode)
 319     {
 320         if (targetNode.isShadowRoot() || targetNode.ancestorUserAgentShadowRoot())
 321             return false;
 322
 323         if (!this._clipboardNodeData)
 324             return false;
 325
 326         var node = this._clipboardNodeData.node;
 327         if (this._clipboardNodeData.isCut && (node === targetNode || node.isAncestor(targetNode)))
 328             return false;
 329
 330         if (targetNode.target() !== node.target())
 331             return false;
 332         return true;
 333     },
 334
 335     /**
 336      * @param {!WebInspector.DOMNode} targetNode
 337      */
 338     pasteNode: function(targetNode)
 339     {
 340         if (this.canPaste(targetNode))
 341             this._performPaste(targetNode);
 342     },
 343
 344     /**
 345      * @param {!Event} event
 346      */
 347     handlePasteKeyboardEvent: function(event)
 348     {
 349         // Do not interfere with text editing.
 350         if (WebInspector.isEditing())
 351             return;
 352
 353         var targetNode = this.selectedDOMNode();
 354         if (!targetNode || !this.canPaste(targetNode))
 355             return;
 356
 357         event.preventDefault();
 358         this._performPaste(targetNode);
 359     },
 360
 361     /**
 362      * @param {!WebInspector.DOMNode} targetNode
 363      */
 364     _performPaste: function(targetNode)
 365     {
 366         if (this._clipboardNodeData.isCut) {
 367             this._clipboardNodeData.node.moveTo(targetNode, null, expandCallback.bind(this));
 368             this._setClipboardData(null);
 369         } else {
 370             this._clipboardNodeData.node.copyTo(targetNode, null, expandCallback.bind(this));
 371         }
 372
 373         /**
 374          * @param {?Protocol.Error} error
 375          * @param {!DOMAgent.NodeId} nodeId
 376          * @this {WebInspector.ElementsTreeOutline}
 377          */
 378         function expandCallback(error, nodeId)
 379         {
 380             if (error)
 381                 return;
 382             var pastedNode = this._domModel.nodeForId(nodeId);
 383             if (!pastedNode)
 384                 return;
 385             this.selectDOMNode(pastedNode);
 386         }
 387     },
 388
 389     /**
 390      * @param {boolean} visible
 391      */
 392     setVisible: function(visible)
 393     {
 394         this._visible = visible;
 395         if (!this._visible) {
 396             this._popoverHelper.hidePopover();
 397             if (this._multilineEditing)
 398                 this._multilineEditing.cancel();
 399             return;
 400         }
 401
 402         this.runPendingUpdates();
 403         if (this._selectedDOMNode)
 404             this._revealAndSelectNode(this._selectedDOMNode, false);
 405     },
 406
 407     get rootDOMNode()
 408     {
 409         return this._rootDOMNode;
 410     },
 411
 412     set rootDOMNode(x)
 413     {
 414         if (this._rootDOMNode === x)
 415             return;
 416
 417         this._rootDOMNode = x;
 418
 419         this._isXMLMimeType = x && x.isXMLNode();
 420
 421         this.update();
 422     },
 423
 424     get isXMLMimeType()
 425     {
 426         return this._isXMLMimeType;
 427     },
 428
 429     /**
 430      * @return {?WebInspector.DOMNode}
 431      */
 432     selectedDOMNode: function()
 433     {
 434         return this._selectedDOMNode;
 435     },
 436
 437     /**
 438      * @param {?WebInspector.DOMNode} node
 439      * @param {boolean=} focus
 440      */
 441     selectDOMNode: function(node, focus)
 442     {
 443         if (this._selectedDOMNode === node) {
 444             this._revealAndSelectNode(node, !focus);
 445             return;
 446         }
 447
 448         this._selectedDOMNode = node;
 449         this._revealAndSelectNode(node, !focus);
 450
 451         // The _revealAndSelectNode() method might find a different element if there is inlined text,
 452         // and the select() call would change the selectedDOMNode and reenter this setter. So to
 453         // avoid calling _selectedNodeChanged() twice, first check if _selectedDOMNode is the same
 454         // node as the one passed in.
 455         if (this._selectedDOMNode === node)
 456             this._selectedNodeChanged();
 457     },
 458
 459     /**
 460      * @return {boolean}
 461      */
 462     editing: function()
 463     {
 464         var node = this.selectedDOMNode();
 465         if (!node)
 466             return false;
 467         var treeElement = this.findTreeElement(node);
 468         if (!treeElement)
 469             return false;
 470         return treeElement.isEditing() || false;
 471     },
 472
 473     update: function()
 474     {
 475         var selectedTreeElement = this.selectedTreeElement;
 476         if (!(selectedTreeElement instanceof WebInspector.ElementsTreeElement))
 477             selectedTreeElement = null;
 478
 479         var selectedNode = selectedTreeElement ? selectedTreeElement.node() : null;
 480
 481         this.removeChildren();
 482
 483         if (!this.rootDOMNode)
 484             return;
 485
 486         var treeElement;
 487         if (this._includeRootDOMNode) {
 488             treeElement = this._createElementTreeElement(this.rootDOMNode);
 489             this.appendChild(treeElement);
 490         } else {
 491             // FIXME: this could use findTreeElement to reuse a tree element if it already exists
 492             var node = this.rootDOMNode.firstChild;
 493             while (node) {
 494                 treeElement = this._createElementTreeElement(node);
 495                 this.appendChild(treeElement);
 496                 node = node.nextSibling;
 497             }
 498         }
 499
 500         if (selectedNode)
 501             this._revealAndSelectNode(selectedNode, true);
 502     },
 503
 504     updateSelection: function()
 505     {
 506         if (!this.selectedTreeElement)
 507             return;
 508         var element = this.selectedTreeElement;
 509         element.updateSelection();
 510     },
 511
 512     /**
 513      * @param {!WebInspector.DOMNode} node
 514      */
 515     updateOpenCloseTags: function(node)
 516     {
 517         var treeElement = this.findTreeElement(node);
 518         if (treeElement)
 519             treeElement.updateTitle(this._updateRecordForHighlight(node));
 520         var closingTagElement = treeElement.lastChild();
 521         if (closingTagElement && closingTagElement.isClosingTag())
 522             closingTagElement.updateTitle(this._updateRecordForHighlight(node));
 523     },
 524
 525     _selectedNodeChanged: function()
 526     {
 527         this.dispatchEventToListeners(WebInspector.ElementsTreeOutline.Events.SelectedNodeChanged, this._selectedDOMNode);
 528     },
 529
 530     /**
 531      * @param {!Array.<!WebInspector.DOMNode>} nodes
 532      */
 533     _fireElementsTreeUpdated: function(nodes)
 534     {
 535         this.dispatchEventToListeners(WebInspector.ElementsTreeOutline.Events.ElementsTreeUpdated, nodes);
 536     },
 537
 538     /**
 539      * @param {!WebInspector.DOMNode} node
 540      * @return {?WebInspector.ElementsTreeElement}
 541      */
 542     findTreeElement: function(node)
 543     {
 544         var treeElement = this._lookUpTreeElement(node);
 545         if (!treeElement && node.nodeType() === Node.TEXT_NODE) {
 546             // The text node might have been inlined if it was short, so try to find the parent element.
 547             treeElement = this._lookUpTreeElement(node.parentNode);
 548         }
 549
 550         return /** @type {?WebInspector.ElementsTreeElement} */ (treeElement);
 551     },
 552
 553     /**
 554      * @param {?WebInspector.DOMNode} node
 555      * @return {?TreeElement}
 556      */
 557     _lookUpTreeElement: function(node)
 558     {
 559         if (!node)
 560             return null;
 561
 562         var cachedElement = node[this._treeElementSymbol];
 563         if (cachedElement)
 564             return cachedElement;
 565
 566         // Walk up the parent pointers from the desired node
 567         var ancestors = [];
 568         for (var currentNode = node.parentNode; currentNode; currentNode = currentNode.parentNode) {
 569             ancestors.push(currentNode);
 570             if (currentNode[this._treeElementSymbol])  // stop climbing as soon as we hit
 571                 break;
 572         }
 573
 574         if (!currentNode)
 575             return null;
 576
 577         // Walk down to populate each ancestor's children, to fill in the tree and the cache.
 578         for (var i = ancestors.length - 1; i >= 0; --i) {
 579             var treeElement = ancestors[i][this._treeElementSymbol];
 580             if (treeElement)
 581                 treeElement.onpopulate();  // fill the cache with the children of treeElement
 582         }
 583
 584         return node[this._treeElementSymbol];
 585     },
 586
 587     /**
 588      * @param {!WebInspector.DOMNode} node
 589      * @return {?WebInspector.ElementsTreeElement}
 590      */
 591     createTreeElementFor: function(node)
 592     {
 593         var treeElement = this.findTreeElement(node);
 594         if (treeElement)
 595             return treeElement;
 596         if (!node.parentNode)
 597             return null;
 598
 599         treeElement = this.createTreeElementFor(node.parentNode);
 600         return treeElement ? this._showChild(treeElement, node) : null;
 601     },
 602
 603     set suppressRevealAndSelect(x)
 604     {
 605         if (this._suppressRevealAndSelect === x)
 606             return;
 607         this._suppressRevealAndSelect = x;
 608     },
 609
 610     /**
 611      * @param {?WebInspector.DOMNode} node
 612      * @param {boolean} omitFocus
 613      */
 614     _revealAndSelectNode: function(node, omitFocus)
 615     {
 616         if (this._suppressRevealAndSelect)
 617             return;
 618
 619         if (!this._includeRootDOMNode && node === this.rootDOMNode && this.rootDOMNode)
 620             node = this.rootDOMNode.firstChild;
 621         if (!node)
 622             return;
 623         var treeElement = this.createTreeElementFor(node);
 624         if (!treeElement)
 625             return;
 626
 627         treeElement.revealAndSelect(omitFocus);
 628     },
 629
 630     /**
 631      * @return {?TreeElement}
 632      */
 633     _treeElementFromEvent: function(event)
 634     {
 635         var scrollContainer = this.element.parentElement;
 636
 637         // We choose this X coordinate based on the knowledge that our list
 638         // items extend at least to the right edge of the outer <ol> container.
 639         // In the no-word-wrap mode the outer <ol> may be wider than the tree container
 640         // (and partially hidden), in which case we are left to use only its right boundary.
 641         var x = scrollContainer.totalOffsetLeft() + scrollContainer.offsetWidth - 36;
 642
 643         var y = event.pageY;
 644
 645         // Our list items have 1-pixel cracks between them vertically. We avoid
 646         // the cracks by checking slightly above and slightly below the mouse
 647         // and seeing if we hit the same element each time.
 648         var elementUnderMouse = this.treeElementFromPoint(x, y);
 649         var elementAboveMouse = this.treeElementFromPoint(x, y - 2);
 650         var element;
 651         if (elementUnderMouse === elementAboveMouse)
 652             element = elementUnderMouse;
 653         else
 654             element = this.treeElementFromPoint(x, y + 2);
 655
 656         return element;
 657     },
 658
 659     /**
 660      * @param {!Element} element
 661      * @param {!Event} event
 662      * @return {!Element|!AnchorBox|undefined}
 663      */
 664     _getPopoverAnchor: function(element, event)
 665     {
 666         var anchor = element.enclosingNodeOrSelfWithClass("webkit-html-resource-link");
 667         if (!anchor || !anchor.href)
 668             return;
 669
 670         return anchor;
 671     },
 672
 673     /**
 674      * @param {!WebInspector.DOMNode} node
 675      * @param {function()} callback
 676      */
 677     _loadDimensionsForNode: function(node, callback)
 678     {
 679         if (!node.nodeName() || node.nodeName().toLowerCase() !== "img") {
 680             callback();
 681             return;
 682         }
 683
 684         node.resolveToObject("", resolvedNode);
 685
 686         function resolvedNode(object)
 687         {
 688             if (!object) {
 689                 callback();
 690                 return;
 691             }
 692
 693             object.callFunctionJSON(features, undefined, callback);
 694             object.release();
 695
 696             /**
 697              * @return {!{offsetWidth: number, offsetHeight: number, naturalWidth: number, naturalHeight: number, currentSrc: (string|undefined)}}
 698              * @suppressReceiverCheck
 699              * @this {!Element}
 700              */
 701             function features()
 702             {
 703                 return { offsetWidth: this.offsetWidth, offsetHeight: this.offsetHeight, naturalWidth: this.naturalWidth, naturalHeight: this.naturalHeight, currentSrc: this.currentSrc };
 704             }
 705         }
 706     },
 707
 708     /**
 709      * @param {!Element} anchor
 710      * @param {!WebInspector.Popover} popover
 711      */
 712     _showPopover: function(anchor, popover)
 713     {
 714         var listItem = anchor.enclosingNodeOrSelfWithNodeName("li");
 715         var node = /** @type {!WebInspector.ElementsTreeElement} */ (listItem.treeElement).node();
 716         this._loadDimensionsForNode(node, WebInspector.DOMPresentationUtils.buildImagePreviewContents.bind(WebInspector.DOMPresentationUtils, node.target(), anchor.href, true, showPopover));
 717
 718         /**
 719          * @param {!Element=} contents
 720          */
 721         function showPopover(contents)
 722         {
 723             if (!contents)
 724                 return;
 725             popover.setCanShrink(false);
 726             popover.showForAnchor(contents, anchor);
 727         }
 728     },
 729
 730     _onmousedown: function(event)
 731     {
 732         var element = this._treeElementFromEvent(event);
 733
 734         if (!element || element.isEventWithinDisclosureTriangle(event))
 735             return;
 736
 737         element.select();
 738     },
 739
 740     _onmousemove: function(event)
 741     {
 742         var element = this._treeElementFromEvent(event);
 743         if (element && this._previousHoveredElement === element)
 744             return;
 745
 746         if (this._previousHoveredElement) {
 747             this._previousHoveredElement.hovered = false;
 748             delete this._previousHoveredElement;
 749         }
 750
 751         if (element) {
 752             element.hovered = true;
 753             this._previousHoveredElement = element;
 754         }
 755
 756         if (element instanceof WebInspector.ElementsTreeElement) {
 757             this._domModel.highlightDOMNodeWithConfig(element.node().id, { mode: "all", showInfo: !WebInspector.KeyboardShortcut.eventHasCtrlOrMeta(event) });
 758             return;
 759         }
 760
 761         if (element instanceof WebInspector.ElementsTreeOutline.ShortcutTreeElement)
 762             this._domModel.highlightDOMNodeWithConfig(undefined, { mode: "all", showInfo: !WebInspector.KeyboardShortcut.eventHasCtrlOrMeta(event) }, element.backendNodeId());
 763     },
 764
 765     _onmouseleave: function(event)
 766     {
 767         if (this._previousHoveredElement) {
 768             this._previousHoveredElement.hovered = false;
 769             delete this._previousHoveredElement;
 770         }
 771
 772         WebInspector.DOMModel.hideDOMNodeHighlight();
 773     },
 774
 775     _ondragstart: function(event)
 776     {
 777         if (!event.target.isComponentSelectionCollapsed())
 778             return false;
 779         if (event.target.nodeName === "A")
 780             return false;
 781
 782         var treeElement = this._treeElementFromEvent(event);
 783         if (!this._isValidDragSourceOrTarget(treeElement))
 784             return false;
 785
 786         if (treeElement.node().nodeName() === "BODY" || treeElement.node().nodeName() === "HEAD")
 787             return false;
 788
 789         event.dataTransfer.setData("text/plain", treeElement.listItemElement.textContent.replace(/\u200b/g, ""));
 790         event.dataTransfer.effectAllowed = "copyMove";
 791         this._treeElementBeingDragged = treeElement;
 792
 793         WebInspector.DOMModel.hideDOMNodeHighlight();
 794
 795         return true;
 796     },
 797
 798     _ondragover: function(event)
 799     {
 800         if (!this._treeElementBeingDragged)
 801             return false;
 802
 803         var treeElement = this._treeElementFromEvent(event);
 804         if (!this._isValidDragSourceOrTarget(treeElement))
 805             return false;
 806
 807         var node = treeElement.node();
 808         while (node) {
 809             if (node === this._treeElementBeingDragged._node)
 810                 return false;
 811             node = node.parentNode;
 812         }
 813
 814         treeElement.updateSelection();
 815         treeElement.listItemElement.classList.add("elements-drag-over");
 816         this._dragOverTreeElement = treeElement;
 817         event.preventDefault();
 818         event.dataTransfer.dropEffect = 'move';
 819         return false;
 820     },
 821
 822     _ondragleave: function(event)
 823     {
 824         this._clearDragOverTreeElementMarker();
 825         event.preventDefault();
 826         return false;
 827     },
 828
 829     /**
 830      * @param {?TreeElement} treeElement
 831      * @return {boolean}
 832      */
 833     _isValidDragSourceOrTarget: function(treeElement)
 834     {
 835         if (!treeElement)
 836             return false;
 837
 838         if (!(treeElement instanceof WebInspector.ElementsTreeElement))
 839             return false;
 840         var elementsTreeElement = /** @type {!WebInspector.ElementsTreeElement} */ (treeElement);
 841
 842         var node = elementsTreeElement.node();
 843         if (!node.parentNode || node.parentNode.nodeType() !== Node.ELEMENT_NODE)
 844             return false;
 845
 846         return true;
 847     },
 848
 849     _ondrop: function(event)
 850     {
 851         event.preventDefault();
 852         var treeElement = this._treeElementFromEvent(event);
 853         if (treeElement)
 854             this._doMove(treeElement);
 855     },
 856
 857     /**
 858      * @param {!TreeElement} treeElement
 859      */
 860     _doMove: function(treeElement)
 861     {
 862         if (!this._treeElementBeingDragged)
 863             return;
 864
 865         var parentNode;
 866         var anchorNode;
 867
 868         if (treeElement.isClosingTag()) {
 869             // Drop onto closing tag -> insert as last child.
 870             parentNode = treeElement.node();
 871         } else {
 872             var dragTargetNode = treeElement.node();
 873             parentNode = dragTargetNode.parentNode;
 874             anchorNode = dragTargetNode;
 875         }
 876
 877         var wasExpanded = this._treeElementBeingDragged.expanded;
 878         this._treeElementBeingDragged._node.moveTo(parentNode, anchorNode, this.selectNodeAfterEdit.bind(this, wasExpanded));
 879
 880         delete this._treeElementBeingDragged;
 881     },
 882
 883     _ondragend: function(event)
 884     {
 885         event.preventDefault();
 886         this._clearDragOverTreeElementMarker();
 887         delete this._treeElementBeingDragged;
 888     },
 889
 890     _clearDragOverTreeElementMarker: function()
 891     {
 892         if (this._dragOverTreeElement) {
 893             this._dragOverTreeElement.updateSelection();
 894             this._dragOverTreeElement.listItemElement.classList.remove("elements-drag-over");
 895             delete this._dragOverTreeElement;
 896         }
 897     },
 898
 899     _contextMenuEventFired: function(event)
 900     {
 901         var treeElement = this._treeElementFromEvent(event);
 902         if (!(treeElement instanceof WebInspector.ElementsTreeElement) || WebInspector.isEditing())
 903             return;
 904
 905         var contextMenu = new WebInspector.ContextMenu(event);
 906         var isPseudoElement = !!treeElement.node().pseudoType();
 907         var isTag = treeElement.node().nodeType() === Node.ELEMENT_NODE && !isPseudoElement;
 908         var textNode = event.target.enclosingNodeOrSelfWithClass("webkit-html-text-node");
 909         if (textNode && textNode.classList.contains("bogus"))
 910             textNode = null;
 911         var commentNode = event.target.enclosingNodeOrSelfWithClass("webkit-html-comment");
 912         contextMenu.appendApplicableItems(event.target);
 913         if (textNode) {
 914             contextMenu.appendSeparator();
 915             treeElement.populateTextContextMenu(contextMenu, textNode);
 916         } else if (isTag) {
 917             contextMenu.appendSeparator();
 918             treeElement.populateTagContextMenu(contextMenu, event);
 919         } else if (commentNode) {
 920             contextMenu.appendSeparator();
 921             treeElement.populateNodeContextMenu(contextMenu);
 922         } else if (isPseudoElement) {
 923             treeElement.populateScrollIntoView(contextMenu);
 924         }
 925
 926         contextMenu.appendApplicableItems(treeElement.node());
 927         contextMenu.show();
 928     },
 929
 930     runPendingUpdates: function()
 931     {
 932         this._updateModifiedNodes();
 933     },
 934
 935     handleShortcut: function(event)
 936     {
 937         var node = this.selectedDOMNode();
 938         if (!node)
 939             return;
 940         var treeElement = node[this._treeElementSymbol];
 941         if (!treeElement)
 942             return;
 943
 944         if (WebInspector.KeyboardShortcut.eventHasCtrlOrMeta(event) && node.parentNode) {
 945             if (event.keyIdentifier === "Up" && node.previousSibling) {
 946                 node.moveTo(node.parentNode, node.previousSibling, this.selectNodeAfterEdit.bind(this, treeElement.expanded));
 947                 event.handled = true;
 948                 return;
 949             }
 950             if (event.keyIdentifier === "Down" && node.nextSibling) {
 951                 node.moveTo(node.parentNode, node.nextSibling.nextSibling, this.selectNodeAfterEdit.bind(this, treeElement.expanded));
 952                 event.handled = true;
 953                 return;
 954             }
 955         }
 956     },
 957
 958     /**
 959      * @param {!WebInspector.DOMNode} node
 960      * @param {boolean=} startEditing
 961      * @param {function()=} callback
 962      */
 963     toggleEditAsHTML: function(node, startEditing, callback)
 964     {
 965         var treeElement = node[this._treeElementSymbol];
 966         if (!treeElement || !treeElement.hasEditableNode())
 967             return;
 968
 969         if (node.pseudoType())
 970             return;
 971
 972         var parentNode = node.parentNode;
 973         var index = node.index;
 974         var wasExpanded = treeElement.expanded;
 975
 976         treeElement.toggleEditAsHTML(editingFinished.bind(this), startEditing);
 977
 978         /**
 979          * @this {WebInspector.ElementsTreeOutline}
 980          * @param {boolean} success
 981          */
 982         function editingFinished(success)
 983         {
 984             if (callback)
 985                 callback();
 986             if (!success)
 987                 return;
 988
 989             // Select it and expand if necessary. We force tree update so that it processes dom events and is up to date.
 990             this.runPendingUpdates();
 991
 992             var newNode = parentNode ? parentNode.children()[index] || parentNode : null;
 993             if (!newNode)
 994                 return;
 995
 996             this.selectDOMNode(newNode, true);
 997
 998             if (wasExpanded) {
 999                 var newTreeItem = this.findTreeElement(newNode);
1000                 if (newTreeItem)
1001                     newTreeItem.expand();
1002             }
1003         }
1004     },
1005
1006     /**
1007      * @param {boolean} wasExpanded
1008      * @param {?Protocol.Error} error
1009      * @param {!DOMAgent.NodeId=} nodeId
1010      * @return {?WebInspector.ElementsTreeElement} nodeId
1011      */
1012     selectNodeAfterEdit: function(wasExpanded, error, nodeId)
1013     {
1014         if (error)
1015             return null;
1016
1017         // Select it and expand if necessary. We force tree update so that it processes dom events and is up to date.
1018         this.runPendingUpdates();
1019
1020         var newNode = nodeId ? this._domModel.nodeForId(nodeId) : null;
1021         if (!newNode)
1022             return null;
1023
1024         this.selectDOMNode(newNode, true);
1025
1026         var newTreeItem = this.findTreeElement(newNode);
1027         if (wasExpanded) {
1028             if (newTreeItem)
1029                 newTreeItem.expand();
1030         }
1031         return newTreeItem;
1032     },
1033
1034     /**
1035      * Runs a script on the node's remote object that toggles a class name on
1036      * the node and injects a stylesheet into the head of the node's document
1037      * containing a rule to set "visibility: hidden" on the class and all it's
1038      * ancestors.
1039      *
1040      * @param {!WebInspector.DOMNode} node
1041      * @param {function(?WebInspector.RemoteObject, boolean=)=} userCallback
1042      */
1043     toggleHideElement: function(node, userCallback)
1044     {
1045         var pseudoType = node.pseudoType();
1046         var effectiveNode = pseudoType ? node.parentNode : node;
1047         if (!effectiveNode)
1048             return;
1049
1050         function resolvedNode(object)
1051         {
1052             if (!object)
1053                 return;
1054
1055             /**
1056              * @param {?string} pseudoType
1057              * @suppressGlobalPropertiesCheck
1058              * @suppressReceiverCheck
1059              * @this {!Element}
1060              */
1061             function toggleClassAndInjectStyleRule(pseudoType)
1062             {
1063                 const classNamePrefix = "__web-inspector-hide";
1064                 const classNameSuffix = "-shortcut__";
1065                 const styleTagId = "__web-inspector-hide-shortcut-style__";
1066                 var selectors = [];
1067                 selectors.push(".__web-inspector-hide-shortcut__");
1068                 selectors.push(".__web-inspector-hide-shortcut__ *");
1069                 selectors.push(".__web-inspector-hidebefore-shortcut__::before");
1070                 selectors.push(".__web-inspector-hideafter-shortcut__::after");
1071                 var selector = selectors.join(", ");
1072                 var ruleBody = "    visibility: hidden !important;";
1073                 var rule = "\n" + selector + "\n{\n" + ruleBody + "\n}\n";
1074                 var className = classNamePrefix + (pseudoType || "") + classNameSuffix;
1075                 this.classList.toggle(className);
1076
1077                 var localRoot = this;
1078                 while (localRoot.parentNode)
1079                     localRoot = localRoot.parentNode;
1080                 if (localRoot.nodeType === Node.DOCUMENT_NODE)
1081                     localRoot = document.head;
1082
1083                 var style = localRoot.querySelector("style#" + styleTagId);
1084                 if (style)
1085                     return;
1086
1087                 style = document.createElement("style");
1088                 style.id = styleTagId;
1089                 style.type = "text/css";
1090                 style.textContent = rule;
1091
1092                 localRoot.appendChild(style);
1093             }
1094
1095             object.callFunction(toggleClassAndInjectStyleRule, [{ value: pseudoType }], userCallback);
1096             object.release();
1097         }
1098
1099         effectiveNode.resolveToObject("", resolvedNode);
1100     },
1101
1102     _reset: function()
1103     {
1104         this.rootDOMNode = null;
1105         this.selectDOMNode(null, false);
1106         this._popoverHelper.hidePopover();
1107         delete this._clipboardNodeData;
1108         WebInspector.DOMModel.hideDOMNodeHighlight();
1109         this._updateRecords.clear();
1110     },
1111
1112     wireToDOMModel: function()
1113     {
1114         this._domModel.addEventListener(WebInspector.DOMModel.Events.NodeInserted, this._nodeInserted, this);
1115         this._domModel.addEventListener(WebInspector.DOMModel.Events.NodeRemoved, this._nodeRemoved, this);
1116         this._domModel.addEventListener(WebInspector.DOMModel.Events.AttrModified, this._attributeModified, this);
1117         this._domModel.addEventListener(WebInspector.DOMModel.Events.AttrRemoved, this._attributeRemoved, this);
1118         this._domModel.addEventListener(WebInspector.DOMModel.Events.CharacterDataModified, this._characterDataModified, this);
1119         this._domModel.addEventListener(WebInspector.DOMModel.Events.DocumentUpdated, this._documentUpdated, this);
1120         this._domModel.addEventListener(WebInspector.DOMModel.Events.ChildNodeCountUpdated, this._childNodeCountUpdated, this);
1121         this._domModel.addEventListener(WebInspector.DOMModel.Events.DistributedNodesChanged, this._distributedNodesChanged, this);
1122     },
1123
1124     unwireFromDOMModel: function()
1125     {
1126         this._domModel.removeEventListener(WebInspector.DOMModel.Events.NodeInserted, this._nodeInserted, this);
1127         this._domModel.removeEventListener(WebInspector.DOMModel.Events.NodeRemoved, this._nodeRemoved, this);
1128         this._domModel.removeEventListener(WebInspector.DOMModel.Events.AttrModified, this._attributeModified, this);
1129         this._domModel.removeEventListener(WebInspector.DOMModel.Events.AttrRemoved, this._attributeRemoved, this);
1130         this._domModel.removeEventListener(WebInspector.DOMModel.Events.CharacterDataModified, this._characterDataModified, this);
1131         this._domModel.removeEventListener(WebInspector.DOMModel.Events.DocumentUpdated, this._documentUpdated, this);
1132         this._domModel.removeEventListener(WebInspector.DOMModel.Events.ChildNodeCountUpdated, this._childNodeCountUpdated, this);
1133         this._domModel.removeEventListener(WebInspector.DOMModel.Events.DistributedNodesChanged, this._distributedNodesChanged, this);
1134     },
1135
1136     /**
1137      * @param {!WebInspector.DOMNode} node
1138      * @return {!WebInspector.ElementsTreeOutline.UpdateRecord}
1139      */
1140     _addUpdateRecord: function(node)
1141     {
1142         var record = this._updateRecords.get(node);
1143         if (!record) {
1144             record = new WebInspector.ElementsTreeOutline.UpdateRecord();
1145             this._updateRecords.set(node, record);
1146         }
1147         return record;
1148     },
1149
1150     /**
1151      * @param {!WebInspector.DOMNode} node
1152      * @return {?WebInspector.ElementsTreeOutline.UpdateRecord}
1153      */
1154     _updateRecordForHighlight: function(node)
1155     {
1156         if (!WebInspector.moduleSetting("highlightDOMUpdates").get() || !this._visible)
1157             return null;
1158         return this._updateRecords.get(node) || null;
1159     },
1160
1161     /**
1162      * @param {!WebInspector.Event} event
1163      */
1164     _documentUpdated: function(event)
1165     {
1166         var inspectedRootDocument = event.data;
1167
1168         this._reset();
1169
1170         if (!inspectedRootDocument)
1171             return;
1172
1173         this.rootDOMNode = inspectedRootDocument;
1174     },
1175
1176     /**
1177      * @param {!WebInspector.Event} event
1178      */
1179     _attributeModified: function(event)
1180     {
1181         var node = /** @type {!WebInspector.DOMNode} */ (event.data.node);
1182         this._addUpdateRecord(node).attributeModified(event.data.name);
1183         this._updateModifiedNodesSoon();
1184     },
1185
1186     /**
1187      * @param {!WebInspector.Event} event
1188      */
1189     _attributeRemoved: function(event)
1190     {
1191         var node = /** @type {!WebInspector.DOMNode} */ (event.data.node);
1192         this._addUpdateRecord(node).attributeRemoved(event.data.name);
1193         this._updateModifiedNodesSoon();
1194     },
1195
1196     /**
1197      * @param {!WebInspector.Event} event
1198      */
1199     _characterDataModified: function(event)
1200     {
1201         var node = /** @type {!WebInspector.DOMNode} */ (event.data);
1202         this._addUpdateRecord(node).charDataModified();
1203         this._updateModifiedNodesSoon();
1204     },
1205
1206     /**
1207      * @param {!WebInspector.Event} event
1208      */
1209     _nodeInserted: function(event)
1210     {
1211         var node = /** @type {!WebInspector.DOMNode} */ (event.data);
1212         this._addUpdateRecord(/** @type {!WebInspector.DOMNode} */ (node.parentNode)).nodeInserted(node);
1213         this._updateModifiedNodesSoon();
1214     },
1215
1216     /**
1217      * @param {!WebInspector.Event} event
1218      */
1219     _nodeRemoved: function(event)
1220     {
1221         var node = /** @type {!WebInspector.DOMNode} */ (event.data.node);
1222         var parentNode = /** @type {!WebInspector.DOMNode} */ (event.data.parent);
1223         this.resetClipboardIfNeeded(node);
1224         this._addUpdateRecord(parentNode).nodeRemoved(node);
1225         this._updateModifiedNodesSoon();
1226     },
1227
1228     /**
1229      * @param {!WebInspector.Event} event
1230      */
1231     _childNodeCountUpdated: function(event)
1232     {
1233         var node = /** @type {!WebInspector.DOMNode} */ (event.data);
1234         this._addUpdateRecord(node).childrenModified();
1235         this._updateModifiedNodesSoon();
1236     },
1237
1238     /**
1239      * @param {!WebInspector.Event} event
1240      */
1241     _distributedNodesChanged: function(event)
1242     {
1243         var node = /** @type {!WebInspector.DOMNode} */ (event.data);
1244         this._addUpdateRecord(node).childrenModified();
1245         this._updateModifiedNodesSoon();
1246     },
1247
1248     _updateModifiedNodesSoon: function()
1249     {
1250         if (!this._updateRecords.size)
1251             return;
1252         if (this._updateModifiedNodesTimeout)
1253             return;
1254         this._updateModifiedNodesTimeout = setTimeout(this._updateModifiedNodes.bind(this), 50);
1255     },
1256
1257     _updateModifiedNodes: function()
1258     {
1259         if (this._updateModifiedNodesTimeout) {
1260             clearTimeout(this._updateModifiedNodesTimeout);
1261             delete this._updateModifiedNodesTimeout;
1262         }
1263
1264         var updatedNodes = this._updateRecords.keysArray();
1265         var hidePanelWhileUpdating = updatedNodes.length > 10;
1266         if (hidePanelWhileUpdating) {
1267             var treeOutlineContainerElement = this.element.parentNode;
1268             var originalScrollTop = treeOutlineContainerElement ? treeOutlineContainerElement.scrollTop : 0;
1269             this._element.classList.add("hidden");
1270         }
1271
1272         if (this._rootDOMNode && this._updateRecords.get(this._rootDOMNode) && this._updateRecords.get(this._rootDOMNode).hasChangedChildren()) {
1273             // Document's children have changed, perform total update.
1274             this.update();
1275         } else {
1276             for (var node of this._updateRecords.keys()) {
1277                 if (this._updateRecords.get(node).hasChangedChildren())
1278                     this._updateModifiedParentNode(node);
1279                 else
1280                     this._updateModifiedNode(node);
1281             }
1282         }
1283
1284         if (hidePanelWhileUpdating) {
1285             this._element.classList.remove("hidden");
1286             if (originalScrollTop)
1287                 treeOutlineContainerElement.scrollTop = originalScrollTop;
1288             this.updateSelection();
1289         }
1290
1291         this._updateRecords.clear();
1292         this._fireElementsTreeUpdated(updatedNodes);
1293     },
1294
1295     _updateModifiedNode: function(node)
1296     {
1297         var treeElement = this.findTreeElement(node);
1298         if (treeElement)
1299             treeElement.updateTitle(this._updateRecordForHighlight(node));
1300     },
1301
1302     _updateModifiedParentNode: function(node)
1303     {
1304         var parentTreeElement = this.findTreeElement(node);
1305         if (parentTreeElement) {
1306             parentTreeElement.setExpandable(this._hasVisibleChildren(node));
1307             parentTreeElement.updateTitle(this._updateRecordForHighlight(node));
1308             if (parentTreeElement.populated)
1309                 this._updateChildren(parentTreeElement);
1310         }
1311     },
1312
1313     /**
1314      * @param {!WebInspector.ElementsTreeElement} treeElement
1315      */
1316     populateTreeElement: function(treeElement)
1317     {
1318         if (treeElement.childCount() || !treeElement.isExpandable())
1319             return;
1320
1321         this._updateModifiedParentNode(treeElement.node());
1322     },
1323
1324     /**
1325      * @param {!WebInspector.DOMNode} node
1326      * @param {boolean=} closingTag
1327      * @return {!WebInspector.ElementsTreeElement}
1328      */
1329     _createElementTreeElement: function(node, closingTag)
1330     {
1331         var treeElement = new WebInspector.ElementsTreeElement(node, closingTag);
1332         treeElement.setExpandable(!closingTag && this._hasVisibleChildren(node));
1333         treeElement.selectable = this._selectEnabled;
1334         return treeElement;
1335     },
1336
1337     /**
1338      * @param {!WebInspector.ElementsTreeElement} treeElement
1339      * @param {!WebInspector.DOMNode} child
1340      * @return {?WebInspector.ElementsTreeElement}
1341      */
1342     _showChild: function(treeElement, child)
1343     {
1344         if (treeElement.isClosingTag())
1345             return null;
1346
1347         var index = this._visibleChildren(treeElement.node()).indexOf(child);
1348         if (index === -1)
1349             return null;
1350
1351         if (index >= treeElement.expandedChildrenLimit())
1352             this.setExpandedChildrenLimit(treeElement, index + 1);
1353         return /** @type {!WebInspector.ElementsTreeElement} */ (treeElement.childAt(index));
1354     },
1355
1356     /**
1357      * @param {!WebInspector.DOMNode} node
1358      * @return {!Array.<!WebInspector.DOMNode>} visibleChildren
1359      */
1360     _visibleChildren: function(node)
1361     {
1362         var visibleChildren = WebInspector.ElementsTreeElement.visibleShadowRoots(node);
1363
1364         if (node.importedDocument())
1365             visibleChildren.push(node.importedDocument());
1366
1367         if (node.templateContent())
1368             visibleChildren.push(node.templateContent());
1369
1370         var beforePseudoElement = node.beforePseudoElement();
1371         if (beforePseudoElement)
1372             visibleChildren.push(beforePseudoElement);
1373
1374         if (node.childNodeCount())
1375             visibleChildren = visibleChildren.concat(node.children());
1376
1377         var afterPseudoElement = node.afterPseudoElement();
1378         if (afterPseudoElement)
1379             visibleChildren.push(afterPseudoElement);
1380
1381         return visibleChildren;
1382     },
1383
1384     /**
1385      * @param {!WebInspector.DOMNode} node
1386      * @return {boolean}
1387      */
1388     _hasVisibleChildren: function(node)
1389     {
1390         if (WebInspector.ElementsTreeElement.canShowInlineText(node))
1391             return false;
1392
1393         if (node.importedDocument())
1394             return true;
1395         if (node.templateContent())
1396             return true;
1397         if (node.childNodeCount())
1398             return true;
1399         if (WebInspector.ElementsTreeElement.visibleShadowRoots(node).length)
1400             return true;
1401         if (node.hasPseudoElements())
1402             return true;
1403         if (node.isInsertionPoint())
1404             return true;
1405         return false;
1406     },
1407
1408     /**
1409      * @param {!WebInspector.ElementsTreeElement} treeElement
1410      */
1411     _createExpandAllButtonTreeElement: function(treeElement)
1412     {
1413         var button = createTextButton("", handleLoadAllChildren.bind(this));
1414         button.value = "";
1415         var expandAllButtonElement = new TreeElement(button);
1416         expandAllButtonElement.selectable = false;
1417         expandAllButtonElement.expandAllButton = true;
1418         expandAllButtonElement.button = button;
1419         return expandAllButtonElement;
1420
1421         /**
1422          * @this {WebInspector.ElementsTreeOutline}
1423          * @param {!Event} event
1424          */
1425         function handleLoadAllChildren(event)
1426         {
1427             var visibleChildCount = this._visibleChildren(treeElement.node()).length;
1428             this.setExpandedChildrenLimit(treeElement, Math.max(visibleChildCount, treeElement.expandedChildrenLimit() + WebInspector.ElementsTreeElement.InitialChildrenLimit));
1429             event.consume();
1430         }
1431     },
1432
1433     /**
1434      * @param {!WebInspector.ElementsTreeElement} treeElement
1435      * @param {number} expandedChildrenLimit
1436      */
1437     setExpandedChildrenLimit: function(treeElement, expandedChildrenLimit)
1438     {
1439         if (treeElement.expandedChildrenLimit() === expandedChildrenLimit)
1440             return;
1441
1442         treeElement.setExpandedChildrenLimit(expandedChildrenLimit);
1443         if (treeElement.treeOutline && !this._treeElementsBeingUpdated.has(treeElement))
1444             this._updateModifiedParentNode(treeElement.node());
1445     },
1446
1447     /**
1448      * @param {!WebInspector.ElementsTreeElement} treeElement
1449      */
1450     _updateChildren: function(treeElement)
1451     {
1452         if (!treeElement.isExpandable()) {
1453             var selectedTreeElement = treeElement.treeOutline.selectedTreeElement;
1454             if (selectedTreeElement && selectedTreeElement.hasAncestor(treeElement))
1455                 treeElement.select(true);
1456             treeElement.removeChildren();
1457             return;
1458         }
1459
1460         console.assert(!treeElement.isClosingTag());
1461
1462         treeElement.node().getChildNodes(childNodesLoaded.bind(this));
1463
1464        /**
1465          * @param {?Array.<!WebInspector.DOMNode>} children
1466          * @this {WebInspector.ElementsTreeOutline}
1467          */
1468         function childNodesLoaded(children)
1469         {
1470             // FIXME: sort this out, it should not happen.
1471             if (!children)
1472                 return;
1473             this._innerUpdateChildren(treeElement);
1474         }
1475     },
1476
1477     /**
1478      * @param {!WebInspector.ElementsTreeElement} treeElement
1479      * @param {!WebInspector.DOMNode} child
1480      * @param {number} index
1481      * @param {boolean=} closingTag
1482      * @return {!WebInspector.ElementsTreeElement}
1483      */
1484     insertChildElement: function(treeElement, child, index, closingTag)
1485     {
1486         var newElement = this._createElementTreeElement(child, closingTag);
1487         treeElement.insertChild(newElement, index);
1488         return newElement;
1489     },
1490
1491     /**
1492      * @param {!WebInspector.ElementsTreeElement} treeElement
1493      * @param {!WebInspector.ElementsTreeElement} child
1494      * @param {number} targetIndex
1495      */
1496     _moveChild: function(treeElement, child, targetIndex)
1497     {
1498         if (treeElement.indexOfChild(child) === targetIndex)
1499             return;
1500         var wasSelected = child.selected;
1501         if (child.parent)
1502             child.parent.removeChild(child);
1503         treeElement.insertChild(child, targetIndex);
1504         if (wasSelected)
1505             child.select();
1506     },
1507
1508     /**
1509      * @param {!WebInspector.ElementsTreeElement} treeElement
1510      */
1511     _innerUpdateChildren: function(treeElement)
1512     {
1513         if (this._treeElementsBeingUpdated.has(treeElement))
1514             return;
1515
1516         this._treeElementsBeingUpdated.add(treeElement);
1517
1518         var node = treeElement.node();
1519         var visibleChildren = this._visibleChildren(node);
1520         var visibleChildrenSet = new Set(visibleChildren);
1521
1522         // Remove any tree elements that no longer have this node as their parent and save
1523         // all existing elements that could be reused. This also removes closing tag element.
1524         var existingTreeElements = new Map();
1525         for (var i = treeElement.childCount() - 1; i >= 0; --i) {
1526             var existingTreeElement = treeElement.childAt(i);
1527             if (!(existingTreeElement instanceof WebInspector.ElementsTreeElement)) {
1528                 // Remove expand all button and shadow host toolbar.
1529                 treeElement.removeChildAtIndex(i);
1530                 continue;
1531             }
1532             var elementsTreeElement = /** @type {!WebInspector.ElementsTreeElement} */ (existingTreeElement);
1533             var existingNode = elementsTreeElement.node();
1534
1535             if (visibleChildrenSet.has(existingNode)) {
1536                 existingTreeElements.set(existingNode, existingTreeElement);
1537                 continue;
1538             }
1539
1540             treeElement.removeChildAtIndex(i);
1541         }
1542
1543         for (var i = 0; i < visibleChildren.length && i < treeElement.expandedChildrenLimit(); ++i) {
1544             var child = visibleChildren[i];
1545             var existingTreeElement = existingTreeElements.get(child) || this.findTreeElement(child);
1546             if (existingTreeElement && existingTreeElement !== treeElement) {
1547                 // If an existing element was found, just move it.
1548                 this._moveChild(treeElement, existingTreeElement, i);
1549             } else {
1550                 // No existing element found, insert a new element.
1551                 var newElement = this.insertChildElement(treeElement, child, i);
1552                 if (this._updateRecordForHighlight(node) && treeElement.expanded)
1553                     WebInspector.ElementsTreeElement.animateOnDOMUpdate(newElement);
1554                 // If a node was inserted in the middle of existing list dynamically we might need to increase the limit.
1555                 if (treeElement.childCount() > treeElement.expandedChildrenLimit())
1556                     this.setExpandedChildrenLimit(treeElement, treeElement.expandedChildrenLimit() + 1);
1557             }
1558         }
1559
1560         // Update expand all button.
1561         var expandedChildCount = treeElement.childCount();
1562         if (visibleChildren.length > expandedChildCount) {
1563             var targetButtonIndex = expandedChildCount;
1564             if (!treeElement.expandAllButtonElement)
1565                 treeElement.expandAllButtonElement = this._createExpandAllButtonTreeElement(treeElement);
1566             treeElement.insertChild(treeElement.expandAllButtonElement, targetButtonIndex);
1567             treeElement.expandAllButtonElement.button.textContent = WebInspector.UIString("Show All Nodes (%d More)", visibleChildren.length - expandedChildCount);
1568         } else if (treeElement.expandAllButtonElement) {
1569             delete treeElement.expandAllButtonElement;
1570         }
1571
1572         // Insert shortcuts to distrubuted children.
1573         if (node.isInsertionPoint()) {
1574             for (var distributedNode of node.distributedNodes())
1575                 treeElement.appendChild(new WebInspector.ElementsTreeOutline.ShortcutTreeElement(distributedNode));
1576         }
1577
1578         // Insert close tag.
1579         if (node.nodeType() === Node.ELEMENT_NODE && treeElement.isExpandable())
1580             this.insertChildElement(treeElement, node, treeElement.childCount(), true);
1581
1582         this._treeElementsBeingUpdated.delete(treeElement);
1583     },
1584
1585     __proto__: TreeOutline.prototype
1586 }
1587
1588 /**
1589  * @interface
1590  */
1591 WebInspector.ElementsTreeOutline.ElementDecorator = function()
1592 {
1593 }
1594
1595 WebInspector.ElementsTreeOutline.ElementDecorator.prototype = {
1596     /**
1597      * @param {!WebInspector.DOMNode} node
1598      * @return {?string}
1599      */
1600     decorate: function(node)
1601     {
1602     },
1603
1604     /**
1605      * @param {!WebInspector.DOMNode} node
1606      * @return {?string}
1607      */
1608     decorateAncestor: function(node)
1609     {
1610     }
1611 }
1612
1613 /**
1614  * @constructor
1615  * @implements {WebInspector.ElementsTreeOutline.ElementDecorator}
1616  */
1617 WebInspector.ElementsTreeOutline.PseudoStateDecorator = function()
1618 {
1619     WebInspector.ElementsTreeOutline.ElementDecorator.call(this);
1620 }
1621
1622 WebInspector.ElementsTreeOutline.PseudoStateDecorator.prototype = {
1623     /**
1624      * @override
1625      * @param {!WebInspector.DOMNode} node
1626      * @return {?string}
1627      */
1628     decorate: function(node)
1629     {
1630         if (node.nodeType() !== Node.ELEMENT_NODE)
1631             return null;
1632         var propertyValue = node.getUserProperty(WebInspector.CSSStyleModel.PseudoStatePropertyName);
1633         if (!propertyValue)
1634             return null;
1635         return WebInspector.UIString("Element state: %s", ":" + propertyValue.join(", :"));
1636     },
1637
1638     /**
1639      * @override
1640      * @param {!WebInspector.DOMNode} node
1641      * @return {?string}
1642      */
1643     decorateAncestor: function(node)
1644     {
1645         if (node.nodeType() !== Node.ELEMENT_NODE)
1646             return null;
1647
1648         var descendantCount = node.descendantUserPropertyCount(WebInspector.CSSStyleModel.PseudoStatePropertyName);
1649         if (!descendantCount)
1650             return null;
1651         if (descendantCount === 1)
1652             return WebInspector.UIString("%d descendant with forced state", descendantCount);
1653         return WebInspector.UIString("%d descendants with forced state", descendantCount);
1654     }
1655 }
1656
1657 /**
1658  * @constructor
1659  */
1660 WebInspector.ElementsTreeOutline.UpdateRecord = function()
1661 {
1662 }
1663
1664 WebInspector.ElementsTreeOutline.UpdateRecord.prototype = {
1665     /**
1666      * @param {string} attrName
1667      */
1668     attributeModified: function(attrName)
1669     {
1670         if (this._removedAttributes && this._removedAttributes.has(attrName))
1671             this._removedAttributes.delete(attrName);
1672         if (!this._modifiedAttributes)
1673             this._modifiedAttributes = /** @type {!Set.<string>} */ (new Set());
1674         this._modifiedAttributes.add(attrName);
1675     },
1676
1677     /**
1678      * @param {string} attrName
1679      */
1680     attributeRemoved: function(attrName)
1681     {
1682         if (this._modifiedAttributes && this._modifiedAttributes.has(attrName))
1683             this._modifiedAttributes.delete(attrName);
1684         if (!this._removedAttributes)
1685             this._removedAttributes = /** @type {!Set.<string>} */ (new Set());
1686         this._removedAttributes.add(attrName);
1687     },
1688
1689     /**
1690      * @param {!WebInspector.DOMNode} node
1691      */
1692     nodeInserted: function(node)
1693     {
1694         this._hasChangedChildren = true;
1695     },
1696
1697     nodeRemoved: function(node)
1698     {
1699         this._hasChangedChildren = true;
1700         this._hasRemovedChildren = true;
1701     },
1702
1703     charDataModified: function()
1704     {
1705         this._charDataModified = true;
1706     },
1707
1708     childrenModified: function()
1709     {
1710         this._hasChangedChildren = true;
1711     },
1712
1713     /**
1714      * @param {string} attributeName
1715      * @return {boolean}
1716      */
1717     isAttributeModified: function(attributeName)
1718     {
1719         return this._modifiedAttributes && this._modifiedAttributes.has(attributeName);
1720     },
1721
1722     /**
1723      * @return {boolean}
1724      */
1725     hasRemovedAttributes: function()
1726     {
1727         return !!this._removedAttributes && !!this._removedAttributes.size;
1728     },
1729
1730     /**
1731      * @return {boolean}
1732      */
1733     isCharDataModified: function()
1734     {
1735         return !!this._charDataModified;
1736     },
1737
1738     /**
1739      * @return {boolean}
1740      */
1741     hasChangedChildren: function()
1742     {
1743         return !!this._hasChangedChildren;
1744     },
1745
1746     /**
1747      * @return {boolean}
1748      */
1749     hasRemovedChildren: function()
1750     {
1751         return !!this._hasRemovedChildren;
1752     }
1753 }
1754
1755 /**
1756  * @constructor
1757  * @implements {WebInspector.Renderer}
1758  */
1759 WebInspector.ElementsTreeOutline.Renderer = function()
1760 {
1761 }
1762
1763 WebInspector.ElementsTreeOutline.Renderer.prototype = {
1764     /**
1765      * @override
1766      * @param {!Object} object
1767      * @return {!Promise.<!Element>}
1768      */
1769     render: function(object)
1770     {
1771         return new Promise(renderPromise);
1772
1773         /**
1774          * @param {function(!Element)} resolve
1775          * @param {function(!Error)} reject
1776          */
1777         function renderPromise(resolve, reject)
1778         {
1779             if (object instanceof WebInspector.DOMNode) {
1780                 onNodeResolved(/** @type {!WebInspector.DOMNode} */ (object));
1781             } else if (object instanceof WebInspector.DeferredDOMNode) {
1782                 (/** @type {!WebInspector.DeferredDOMNode} */ (object)).resolve(onNodeResolved);
1783             } else if (object instanceof WebInspector.RemoteObject) {
1784                 var domModel = WebInspector.DOMModel.fromTarget((/** @type {!WebInspector.RemoteObject} */ (object)).target());
1785                 if (domModel)
1786                     domModel.pushObjectAsNodeToFrontend(object, onNodeResolved);
1787                 else
1788                     reject(new Error("No dom model for given JS object target found."));
1789             } else {
1790                 reject(new Error("Can't reveal not a node."));
1791             }
1792
1793             /**
1794              * @param {?WebInspector.DOMNode} node
1795              */
1796             function onNodeResolved(node)
1797             {
1798                 if (!node) {
1799                     reject(new Error("Could not resolve node."));
1800                     return;
1801                 }
1802                 var treeOutline = new WebInspector.ElementsTreeOutline(node.domModel(), false, false);
1803                 treeOutline.rootDOMNode = node;
1804                 if (!treeOutline.firstChild().isExpandable())
1805                     treeOutline._element.classList.add("single-node");
1806                 treeOutline.setVisible(true);
1807                 treeOutline.element.treeElementForTest = treeOutline.firstChild();
1808                 resolve(treeOutline.element);
1809             }
1810         }
1811     }
1812 }
1813
1814 /**
1815  * @constructor
1816  * @extends {TreeElement}
1817  * @param {!WebInspector.DOMNodeShortcut} nodeShortcut
1818  */
1819 WebInspector.ElementsTreeOutline.ShortcutTreeElement = function(nodeShortcut)
1820 {
1821     TreeElement.call(this, "");
1822     this.listItemElement.createChild("div", "selection");
1823     var title = this.listItemElement.createChild("span", "elements-tree-shortcut-title");
1824     var text = nodeShortcut.nodeName.toLowerCase();
1825     if (nodeShortcut.nodeType === Node.ELEMENT_NODE)
1826         text = "<" + text + ">";
1827     title.textContent = "\u21AA " + text;
1828
1829     var link = WebInspector.DOMPresentationUtils.linkifyDeferredNodeReference(nodeShortcut.deferredNode);
1830     this.listItemElement.createTextChild(" ");
1831     link.classList.add("elements-tree-shortcut-link");
1832     link.textContent = WebInspector.UIString("reveal");
1833     this.listItemElement.appendChild(link);
1834     this._nodeShortcut = nodeShortcut;
1835 }
1836
1837 WebInspector.ElementsTreeOutline.ShortcutTreeElement.prototype = {
1838     /**
1839      * @return {boolean}
1840      */
1841     get hovered()
1842     {
1843         return this._hovered;
1844     },
1845
1846     set hovered(x)
1847     {
1848         if (this._hovered === x)
1849             return;
1850         this._hovered = x;
1851         this.listItemElement.classList.toggle("hovered", x);
1852     },
1853
1854     updateSelection: function()
1855     {
1856     },
1857
1858     /**
1859      * @return {number}
1860      */
1861     backendNodeId: function()
1862     {
1863         return this._nodeShortcut.deferredNode.backendNodeId();
1864     },
1865
1866     /**
1867      * @override
1868      * @param {boolean=} selectedByUser
1869      * @return {boolean}
1870      */
1871     onselect: function(selectedByUser)
1872     {
1873         if (!selectedByUser)
1874             return true;
1875         this._nodeShortcut.deferredNode.highlight();
1876         this._nodeShortcut.deferredNode.resolve(resolved.bind(this));
1877         /**
1878          * @param {?WebInspector.DOMNode} node
1879          * @this {WebInspector.ElementsTreeOutline.ShortcutTreeElement}
1880          */
1881         function resolved(node)
1882         {
1883             if (node) {
1884                 this.treeOutline._selectedDOMNode = node;
1885                 this.treeOutline._selectedNodeChanged();
1886             }
1887         }
1888         return true;
1889     },
1890
1891     __proto__: TreeElement.prototype
1892 }