third_party/WebKit/Source/devtools/front_end/ui/treeoutline.js

   1 /*
   2  * Copyright (C) 2007 Apple Inc.  All rights reserved.
   3  *
   4  * Redistribution and use in source and binary forms, with or without
   5  * modification, are permitted provided that the following conditions
   6  * are met:
   7  *
   8  * 1.  Redistributions of source code must retain the above copyright
   9  *     notice, this list of conditions and the following disclaimer.
  10  * 2.  Redistributions in binary form must reproduce the above copyright
  11  *     notice, this list of conditions and the following disclaimer in the
  12  *     documentation and/or other materials provided with the distribution.
  13  * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
  14  *     its contributors may be used to endorse or promote products derived
  15  *     from this software without specific prior written permission.
  16  *
  17  * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
  18  * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
  19  * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
  20  * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
  21  * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
  22  * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
  23  * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
  24  * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  25  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
  26  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  27  */
  28
  29 /**
  30  * @constructor
  31  * @extends {WebInspector.Object}
  32  * @param {boolean=} nonFocusable
  33  */
  34 function TreeOutline(nonFocusable)
  35 {
  36     this._createRootElement();
  37
  38     this.selectedTreeElement = null;
  39     this.expandTreeElementsWhenArrowing = false;
  40     /** @type {?function(!TreeElement, !TreeElement):number} */
  41     this._comparator = null;
  42
  43     this._contentElement = this._rootElement._childrenListNode;
  44     this._contentElement.addEventListener("keydown", this._treeKeyDown.bind(this), true);
  45
  46     this.setFocusable(!nonFocusable);
  47
  48     this.element = this._contentElement;
  49 }
  50
  51 TreeOutline.Events = {
  52     ElementAttached: "ElementAttached",
  53     ElementExpanded: "ElementExpanded",
  54     ElementCollapsed: "ElementCollapsed"
  55 }
  56
  57 TreeOutline.prototype = {
  58     _createRootElement: function()
  59     {
  60         this._rootElement = new TreeElement();
  61         this._rootElement.treeOutline = this;
  62         this._rootElement.root = true;
  63         this._rootElement.selectable = false;
  64         this._rootElement.expanded = true;
  65         this._rootElement._childrenListNode.classList.remove("children");
  66     },
  67
  68     /**
  69      * @return {!TreeElement}
  70      */
  71     rootElement: function()
  72     {
  73         return this._rootElement;
  74     },
  75
  76     /**
  77      * @return {?TreeElement}
  78      */
  79     firstChild: function()
  80     {
  81         return this._rootElement.firstChild();
  82     },
  83
  84     /**
  85      * @param {!TreeElement} child
  86      */
  87     appendChild: function(child)
  88     {
  89         this._rootElement.appendChild(child);
  90     },
  91
  92     /**
  93      * @param {!TreeElement} child
  94      * @param {number} index
  95      */
  96     insertChild: function(child, index)
  97     {
  98         this._rootElement.insertChild(child, index);
  99     },
 100
 101     /**
 102      * @param {!TreeElement} child
 103      */
 104     removeChild: function(child)
 105     {
 106         this._rootElement.removeChild(child);
 107     },
 108
 109     removeChildren: function()
 110     {
 111         this._rootElement.removeChildren();
 112     },
 113
 114     /**
 115      * @param {number} x
 116      * @param {number} y
 117      * @return {?TreeElement}
 118      */
 119     treeElementFromPoint: function(x, y)
 120     {
 121         var node = this._contentElement.ownerDocument.deepElementFromPoint(x, y);
 122         if (!node)
 123             return null;
 124
 125         var listNode = node.enclosingNodeOrSelfWithNodeNameInArray(["ol", "li"]);
 126         if (listNode)
 127             return listNode.parentTreeElement || listNode.treeElement;
 128         return null;
 129     },
 130
 131     /**
 132      * @param {?Event} event
 133      * @return {?TreeElement}
 134      */
 135     treeElementFromEvent: function(event)
 136     {
 137         return event ? this.treeElementFromPoint(event.pageX, event.pageY) : null;
 138     },
 139
 140     /**
 141      * @param {?function(!TreeElement, !TreeElement):number} comparator
 142      */
 143     setComparator: function(comparator)
 144     {
 145         this._comparator = comparator;
 146     },
 147
 148     /**
 149      * @param {boolean} focusable
 150      */
 151     setFocusable: function(focusable)
 152     {
 153         if (focusable)
 154             this._contentElement.setAttribute("tabIndex", 0);
 155         else
 156             this._contentElement.removeAttribute("tabIndex");
 157     },
 158
 159     focus: function()
 160     {
 161         this._contentElement.focus();
 162     },
 163
 164     /**
 165      * @param {!TreeElement} element
 166      */
 167     _bindTreeElement: function(element)
 168     {
 169         if (element.treeOutline)
 170             console.error("Binding element for the second time: " + new Error().stack);
 171         element.treeOutline = this;
 172         element.onbind();
 173     },
 174
 175     /**
 176      * @param {!TreeElement} element
 177      */
 178     _unbindTreeElement: function(element)
 179     {
 180         if (!element.treeOutline)
 181             console.error("Unbinding element that was not bound: " + new Error().stack);
 182
 183         element.deselect();
 184         element.onunbind();
 185         element.treeOutline = null;
 186     },
 187
 188     /**
 189      * @return {boolean}
 190      */
 191     selectPrevious: function()
 192     {
 193         var nextSelectedElement = this.selectedTreeElement.traversePreviousTreeElement(true);
 194         while (nextSelectedElement && !nextSelectedElement.selectable)
 195             nextSelectedElement = nextSelectedElement.traversePreviousTreeElement(!this.expandTreeElementsWhenArrowing);
 196         if (nextSelectedElement) {
 197             nextSelectedElement.reveal();
 198             nextSelectedElement.select(false, true);
 199             return true;
 200         }
 201         return false;
 202     },
 203
 204     /**
 205      * @return {boolean}
 206      */
 207     selectNext: function()
 208     {
 209         var nextSelectedElement = this.selectedTreeElement.traverseNextTreeElement(true);
 210         while (nextSelectedElement && !nextSelectedElement.selectable)
 211             nextSelectedElement = nextSelectedElement.traverseNextTreeElement(!this.expandTreeElementsWhenArrowing);
 212         if (nextSelectedElement) {
 213             nextSelectedElement.reveal();
 214             nextSelectedElement.select(false, true);
 215             return true;
 216         }
 217         return false;
 218     },
 219
 220     /**
 221      * @param {!Event} event
 222      */
 223     _treeKeyDown: function(event)
 224     {
 225         if (event.target !== this._contentElement)
 226             return;
 227
 228         if (!this.selectedTreeElement || event.shiftKey || event.metaKey || event.ctrlKey)
 229             return;
 230
 231         var handled = false;
 232         var nextSelectedElement;
 233         if (event.keyIdentifier === "Up" && !event.altKey) {
 234             handled = this.selectPrevious();
 235         } else if (event.keyIdentifier === "Down" && !event.altKey) {
 236             handled = this.selectNext();
 237         } else if (event.keyIdentifier === "Left") {
 238             if (this.selectedTreeElement.expanded) {
 239                 if (event.altKey)
 240                     this.selectedTreeElement.collapseRecursively();
 241                 else
 242                     this.selectedTreeElement.collapse();
 243                 handled = true;
 244             } else if (this.selectedTreeElement.parent && !this.selectedTreeElement.parent.root) {
 245                 handled = true;
 246                 if (this.selectedTreeElement.parent.selectable) {
 247                     nextSelectedElement = this.selectedTreeElement.parent;
 248                     while (nextSelectedElement && !nextSelectedElement.selectable)
 249                         nextSelectedElement = nextSelectedElement.parent;
 250                     handled = nextSelectedElement ? true : false;
 251                 } else if (this.selectedTreeElement.parent)
 252                     this.selectedTreeElement.parent.collapse();
 253             }
 254         } else if (event.keyIdentifier === "Right") {
 255             if (!this.selectedTreeElement.revealed()) {
 256                 this.selectedTreeElement.reveal();
 257                 handled = true;
 258             } else if (this.selectedTreeElement._expandable) {
 259                 handled = true;
 260                 if (this.selectedTreeElement.expanded) {
 261                     nextSelectedElement = this.selectedTreeElement.firstChild();
 262                     while (nextSelectedElement && !nextSelectedElement.selectable)
 263                         nextSelectedElement = nextSelectedElement.nextSibling;
 264                     handled = nextSelectedElement ? true : false;
 265                 } else {
 266                     if (event.altKey)
 267                         this.selectedTreeElement.expandRecursively();
 268                     else
 269                         this.selectedTreeElement.expand();
 270                 }
 271             }
 272         } else if (event.keyCode === 8 /* Backspace */ || event.keyCode === 46 /* Delete */)
 273             handled = this.selectedTreeElement.ondelete();
 274         else if (isEnterKey(event))
 275             handled = this.selectedTreeElement.onenter();
 276         else if (event.keyCode === WebInspector.KeyboardShortcut.Keys.Space.code)
 277             handled = this.selectedTreeElement.onspace();
 278
 279         if (nextSelectedElement) {
 280             nextSelectedElement.reveal();
 281             nextSelectedElement.select(false, true);
 282         }
 283
 284         if (handled)
 285             event.consume(true);
 286     },
 287
 288     __proto__: WebInspector.Object.prototype
 289 }
 290
 291 /**
 292  * @constructor
 293  * @extends {TreeOutline}
 294  * @param {string=} className
 295  */
 296 function TreeOutlineInShadow(className)
 297 {
 298     TreeOutline.call(this);
 299     var innerElement = this.element;
 300     innerElement.classList.add("tree-outline");
 301     if (className)
 302         innerElement.classList.add(className);
 303
 304     // Redefine element to the external one.
 305     this.element = createElement("div");
 306     this._shadowRoot = WebInspector.createShadowRootWithCoreStyles(this.element);
 307     this._shadowRoot.appendChild(WebInspector.Widget.createStyleElement("ui/treeoutline.css"));
 308     this._shadowRoot.appendChild(innerElement);
 309     this._renderSelection = true;
 310 }
 311
 312 TreeOutlineInShadow.prototype = {
 313     /**
 314      * @param {string} cssFile
 315      */
 316     registerRequiredCSS: function(cssFile)
 317     {
 318         this._shadowRoot.appendChild(WebInspector.Widget.createStyleElement(cssFile));
 319     },
 320
 321     __proto__: TreeOutline.prototype
 322 }
 323
 324 /**
 325  * @constructor
 326  * @param {(string|!Node)=} title
 327  * @param {boolean=} expandable
 328  */
 329 function TreeElement(title, expandable)
 330 {
 331     /** @type {?TreeOutline} */
 332     this.treeOutline = null;
 333     this.parent = null;
 334     this.previousSibling = null;
 335     this.nextSibling = null;
 336
 337     this._listItemNode = createElement("li");
 338     this._listItemNode.treeElement = this;
 339     if (title)
 340         this.title = title;
 341     this._listItemNode.addEventListener("mousedown", this._handleMouseDown.bind(this), false);
 342     this._listItemNode.addEventListener("selectstart", this._treeElementSelectStart.bind(this), false);
 343     this._listItemNode.addEventListener("click", this._treeElementToggled.bind(this), false);
 344     this._listItemNode.addEventListener("dblclick", this._handleDoubleClick.bind(this), false);
 345
 346     this._childrenListNode = createElement("ol");
 347     this._childrenListNode.parentTreeElement = this;
 348     this._childrenListNode.classList.add("children");
 349
 350     this._hidden = false;
 351     this._selectable = true;
 352     this.expanded = false;
 353     this.selected = false;
 354     this.setExpandable(expandable || false);
 355     this._collapsible = true;
 356 }
 357
 358 /** @const */
 359 TreeElement._ArrowToggleWidth = 10;
 360
 361 TreeElement.prototype = {
 362     /**
 363      * @param {?TreeElement} ancestor
 364      * @return {boolean}
 365      */
 366     hasAncestor: function(ancestor)
 367     {
 368         if (!ancestor)
 369             return false;
 370
 371         var currentNode = this.parent;
 372         while (currentNode) {
 373             if (ancestor === currentNode)
 374                 return true;
 375             currentNode = currentNode.parent;
 376         }
 377
 378         return false;
 379     },
 380
 381     /**
 382      * @param {?TreeElement} ancestor
 383      * @return {boolean}
 384      */
 385     hasAncestorOrSelf: function(ancestor)
 386     {
 387         return this === ancestor || this.hasAncestor(ancestor);
 388     },
 389
 390     /**
 391      * @return {!Array.<!TreeElement>}
 392      */
 393     children: function()
 394     {
 395         return this._children || [];
 396     },
 397
 398     /**
 399      * @return {number}
 400      */
 401     childCount: function()
 402     {
 403         return this._children ? this._children.length : 0;
 404     },
 405
 406     /**
 407      * @return {?TreeElement}
 408      */
 409     firstChild: function()
 410     {
 411         return this._children ? this._children[0] : null;
 412     },
 413
 414     /**
 415      * @return {?TreeElement}
 416      */
 417     lastChild: function()
 418     {
 419         return this._children ? this._children[this._children.length - 1] : null;
 420     },
 421
 422     /**
 423      * @param {number} index
 424      * @return {?TreeElement}
 425      */
 426     childAt: function(index)
 427     {
 428         return this._children ? this._children[index] : null;
 429     },
 430
 431     /**
 432      * @param {!TreeElement} child
 433      * @return {number}
 434      */
 435     indexOfChild: function(child)
 436     {
 437         return this._children ? this._children.indexOf(child) : -1;
 438     },
 439
 440     /**
 441      * @param {!TreeElement} child
 442      */
 443     appendChild: function(child)
 444     {
 445         if (!this._children)
 446             this._children = [];
 447
 448         var insertionIndex;
 449         if (this.treeOutline && this.treeOutline._comparator)
 450             insertionIndex = insertionIndexForObjectInListSortedByFunction(child, this._children, this.treeOutline._comparator);
 451         else
 452             insertionIndex = this._children.length;
 453         this.insertChild(child, insertionIndex);
 454     },
 455
 456     /**
 457      * @param {!TreeElement} child
 458      * @param {number} index
 459      */
 460     insertChild: function(child, index)
 461     {
 462         if (!this._children)
 463             this._children = [];
 464
 465         if (!child)
 466             throw("child can't be undefined or null");
 467
 468         console.assert(!child.parent, "Attempting to insert a child that is already in the tree, reparenting is not supported.");
 469
 470         var previousChild = (index > 0 ? this._children[index - 1] : null);
 471         if (previousChild) {
 472             previousChild.nextSibling = child;
 473             child.previousSibling = previousChild;
 474         } else {
 475             child.previousSibling = null;
 476         }
 477
 478         var nextChild = this._children[index];
 479         if (nextChild) {
 480             nextChild.previousSibling = child;
 481             child.nextSibling = nextChild;
 482         } else {
 483             child.nextSibling = null;
 484         }
 485
 486         this._children.splice(index, 0, child);
 487
 488         this.setExpandable(true);
 489         child.parent = this;
 490
 491         if (this.treeOutline)
 492             this.treeOutline._bindTreeElement(child);
 493         for (var current = child.firstChild(); this.treeOutline && current; current = current.traverseNextTreeElement(false, child, true))
 494             this.treeOutline._bindTreeElement(current);
 495         child.onattach();
 496         child._ensureSelection();
 497         if (this.treeOutline)
 498             this.treeOutline.dispatchEventToListeners(TreeOutline.Events.ElementAttached, child);
 499         var nextSibling = child.nextSibling ? child.nextSibling._listItemNode : null;
 500         this._childrenListNode.insertBefore(child._listItemNode, nextSibling);
 501         this._childrenListNode.insertBefore(child._childrenListNode, nextSibling);
 502         if (child.selected)
 503             child.select();
 504         if (child.expanded)
 505             child.expand();
 506     },
 507
 508     /**
 509      * @param {number} childIndex
 510      */
 511     removeChildAtIndex: function(childIndex)
 512     {
 513         if (childIndex < 0 || childIndex >= this._children.length)
 514             throw("childIndex out of range");
 515
 516         var child = this._children[childIndex];
 517         this._children.splice(childIndex, 1);
 518
 519         var parent = child.parent;
 520         if (this.treeOutline && this.treeOutline.selectedTreeElement && this.treeOutline.selectedTreeElement.hasAncestorOrSelf(child)) {
 521             if (child.nextSibling)
 522                 child.nextSibling.select(true);
 523             else if (child.previousSibling)
 524                 child.previousSibling.select(true);
 525             else if (parent)
 526                 parent.select(true);
 527         }
 528
 529         if (child.previousSibling)
 530             child.previousSibling.nextSibling = child.nextSibling;
 531         if (child.nextSibling)
 532             child.nextSibling.previousSibling = child.previousSibling;
 533         child.parent = null;
 534
 535         if (this.treeOutline)
 536             this.treeOutline._unbindTreeElement(child);
 537         for (var current = child.firstChild(); this.treeOutline && current; current = current.traverseNextTreeElement(false, child, true))
 538             this.treeOutline._unbindTreeElement(current);
 539
 540         child._detach();
 541     },
 542
 543     /**
 544      * @param {!TreeElement} child
 545      */
 546     removeChild: function(child)
 547     {
 548         if (!child)
 549             throw("child can't be undefined or null");
 550         if (child.parent !== this)
 551             return;
 552
 553         var childIndex = this._children.indexOf(child);
 554         if (childIndex === -1)
 555             throw("child not found in this node's children");
 556
 557         this.removeChildAtIndex(childIndex);
 558     },
 559
 560     removeChildren: function()
 561     {
 562         if (!this.root && this.treeOutline && this.treeOutline.selectedTreeElement && this.treeOutline.selectedTreeElement.hasAncestorOrSelf(this))
 563             this.select(true);
 564
 565         for (var i = 0; this._children && i < this._children.length; ++i) {
 566             var child = this._children[i];
 567             child.previousSibling = null
 568             child.nextSibling = null;
 569             child.parent = null;
 570
 571             if (this.treeOutline)
 572                 this.treeOutline._unbindTreeElement(child);
 573             for (var current = child.firstChild(); this.treeOutline && current; current = current.traverseNextTreeElement(false, child, true))
 574                 this.treeOutline._unbindTreeElement(current);
 575             child._detach();
 576         }
 577         this._children = [];
 578     },
 579
 580     get selectable()
 581     {
 582         if (this._hidden)
 583             return false;
 584         return this._selectable;
 585     },
 586
 587     set selectable(x)
 588     {
 589         this._selectable = x;
 590     },
 591
 592     get listItemElement()
 593     {
 594         return this._listItemNode;
 595     },
 596
 597     get childrenListElement()
 598     {
 599         return this._childrenListNode;
 600     },
 601
 602     get title()
 603     {
 604         return this._title;
 605     },
 606
 607     set title(x)
 608     {
 609         this._title = x;
 610         if (typeof this._title === "string")
 611             this._listItemNode.textContent = this._title;
 612         else {
 613             this._listItemNode.removeChildren();
 614             if (this._title)
 615                 this._listItemNode.appendChild(this._title);
 616             this._ensureSelection();
 617         }
 618     },
 619
 620     /**
 621      * @param {string} x
 622      */
 623     set tooltip(x)
 624     {
 625         this._listItemNode.title = x;
 626     },
 627
 628     /**
 629      * @return {boolean}
 630      */
 631     isExpandable: function()
 632     {
 633         return this._expandable;
 634     },
 635
 636     /**
 637      * @param {boolean} expandable
 638      */
 639     setExpandable: function(expandable)
 640     {
 641         if (this._expandable === expandable)
 642             return;
 643
 644         this._expandable = expandable;
 645
 646         this._listItemNode.classList.toggle("parent", expandable);
 647         if (!expandable)
 648             this.collapse();
 649     },
 650
 651     /**
 652      * @param {boolean} collapsible
 653      */
 654     setCollapsible: function(collapsible)
 655     {
 656         if (this._collapsible === collapsible)
 657             return;
 658
 659         this._collapsible = collapsible;
 660
 661         this._listItemNode.classList.toggle("always-parent", !collapsible);
 662         if (!collapsible)
 663             this.expand();
 664     },
 665
 666     get hidden()
 667     {
 668         return this._hidden;
 669     },
 670
 671     set hidden(x)
 672     {
 673         if (this._hidden === x)
 674             return;
 675
 676         this._hidden = x;
 677
 678         this._listItemNode.classList.toggle("hidden", x);
 679         this._childrenListNode.classList.toggle("hidden", x);
 680     },
 681
 682     invalidateChildren: function()
 683     {
 684         if (this._children) {
 685             this.removeChildren();
 686             this._children = null;
 687         }
 688     },
 689
 690     _ensureSelection: function()
 691     {
 692         if (!this.treeOutline || !this.treeOutline._renderSelection)
 693             return;
 694         if (!this._selectionElement)
 695             this._selectionElement = createElementWithClass("div", "selection");
 696         this._listItemNode.insertBefore(this._selectionElement, this.listItemElement.firstChild);
 697     },
 698
 699     /**
 700      * @param {!Event} event
 701      */
 702     _treeElementSelectStart: function(event)
 703     {
 704         event.currentTarget._selectionStarted = true;
 705     },
 706
 707     /**
 708      * @param {!Event} event
 709      */
 710     _treeElementToggled: function(event)
 711     {
 712         var element = event.currentTarget;
 713         if (element._selectionStarted) {
 714             delete element._selectionStarted;
 715             var selection = element.getComponentSelection();
 716             if (selection && !selection.isCollapsed && element.isSelfOrAncestor(selection.anchorNode) && element.isSelfOrAncestor(selection.focusNode))
 717                 return;
 718         }
 719
 720         if (element.treeElement !== this)
 721             return;
 722
 723         var toggleOnClick = this.toggleOnClick && !this.selectable;
 724         var isInTriangle = this.isEventWithinDisclosureTriangle(event);
 725         if (!toggleOnClick && !isInTriangle)
 726             return;
 727
 728         if (event.target && event.target.enclosingNodeOrSelfWithNodeName("a"))
 729             return;
 730
 731         if (this.expanded) {
 732             if (event.altKey)
 733                 this.collapseRecursively();
 734             else
 735                 this.collapse();
 736         } else {
 737             if (event.altKey)
 738                 this.expandRecursively();
 739             else
 740                 this.expand();
 741         }
 742         event.consume();
 743     },
 744
 745     /**
 746      * @param {!Event} event
 747      */
 748     _handleMouseDown: function(event)
 749     {
 750         var element = event.currentTarget;
 751         if (!element)
 752             return;
 753         delete element._selectionStarted;
 754
 755         if (!this.selectable)
 756             return;
 757         if (element.treeElement !== this)
 758             return;
 759
 760         if (this.isEventWithinDisclosureTriangle(event))
 761             return;
 762
 763         this.selectOnMouseDown(event);
 764     },
 765
 766     /**
 767      * @param {!Event} event
 768      */
 769     _handleDoubleClick: function(event)
 770     {
 771         var element = event.currentTarget;
 772         if (!element || element.treeElement !== this)
 773             return;
 774
 775         var handled = this.ondblclick(event);
 776         if (handled)
 777             return;
 778         if (this._expandable && !this.expanded)
 779             this.expand();
 780     },
 781
 782     _detach: function()
 783     {
 784         this._listItemNode.remove();
 785         this._childrenListNode.remove();
 786     },
 787
 788     collapse: function()
 789     {
 790         if (!this.expanded || !this._collapsible)
 791             return;
 792         this._listItemNode.classList.remove("expanded");
 793         this._childrenListNode.classList.remove("expanded");
 794         this.expanded = false;
 795         this.oncollapse();
 796         if (this.treeOutline)
 797             this.treeOutline.dispatchEventToListeners(TreeOutline.Events.ElementCollapsed, this);
 798     },
 799
 800     collapseRecursively: function()
 801     {
 802         var item = this;
 803         while (item) {
 804             if (item.expanded)
 805                 item.collapse();
 806             item = item.traverseNextTreeElement(false, this, true);
 807         }
 808     },
 809
 810     expand: function()
 811     {
 812         if (!this._expandable || (this.expanded && this._children))
 813             return;
 814
 815         // Set this before onpopulate. Since onpopulate can add elements, this makes
 816         // sure the expanded flag is true before calling those functions. This prevents the possibility
 817         // of an infinite loop if onpopulate were to call expand.
 818
 819         this.expanded = true;
 820
 821         this._populateIfNeeded();
 822         this._listItemNode.classList.add("expanded");
 823         this._childrenListNode.classList.add("expanded");
 824
 825         this.onexpand();
 826         if (this.treeOutline)
 827             this.treeOutline.dispatchEventToListeners(TreeOutline.Events.ElementExpanded, this);
 828     },
 829
 830     /**
 831      * @param {number=} maxDepth
 832      */
 833     expandRecursively: function(maxDepth)
 834     {
 835         var item = this;
 836         var info = {};
 837         var depth = 0;
 838
 839         // The Inspector uses TreeOutlines to represents object properties, so recursive expansion
 840         // in some case can be infinite, since JavaScript objects can hold circular references.
 841         // So default to a recursion cap of 3 levels, since that gives fairly good results.
 842         if (isNaN(maxDepth))
 843             maxDepth = 3;
 844
 845         while (item) {
 846             if (depth < maxDepth)
 847                 item.expand();
 848             item = item.traverseNextTreeElement(false, this, (depth >= maxDepth), info);
 849             depth += info.depthChange;
 850         }
 851     },
 852
 853     reveal: function()
 854     {
 855         var currentAncestor = this.parent;
 856         while (currentAncestor && !currentAncestor.root) {
 857             if (!currentAncestor.expanded)
 858                 currentAncestor.expand();
 859             currentAncestor = currentAncestor.parent;
 860         }
 861
 862         this.listItemElement.scrollIntoViewIfNeeded();
 863
 864         this.onreveal();
 865     },
 866
 867     /**
 868      * @return {boolean}
 869      */
 870     revealed: function()
 871     {
 872         var currentAncestor = this.parent;
 873         while (currentAncestor && !currentAncestor.root) {
 874             if (!currentAncestor.expanded)
 875                 return false;
 876             currentAncestor = currentAncestor.parent;
 877         }
 878
 879         return true;
 880     },
 881
 882     selectOnMouseDown: function(event)
 883     {
 884         if (this.select(false, true))
 885             event.consume(true);
 886     },
 887
 888     /**
 889      * @param {boolean=} omitFocus
 890      * @param {boolean=} selectedByUser
 891      * @return {boolean}
 892      */
 893     select: function(omitFocus, selectedByUser)
 894     {
 895         if (!this.treeOutline || !this.selectable || this.selected)
 896             return false;
 897
 898         if (this.treeOutline.selectedTreeElement)
 899             this.treeOutline.selectedTreeElement.deselect();
 900         this.treeOutline.selectedTreeElement = null;
 901
 902         if (this.treeOutline._rootElement === this)
 903             return false;
 904
 905         this.selected = true;
 906
 907         if (!omitFocus)
 908             this.treeOutline.focus();
 909
 910         // Focusing on another node may detach "this" from tree.
 911         if (!this.treeOutline)
 912             return false;
 913         this.treeOutline.selectedTreeElement = this;
 914         this._listItemNode.classList.add("selected");
 915         if (this._selectionElement)
 916             this._selectionElement.style.height = this._listItemNode.offsetHeight + "px";
 917         return this.onselect(selectedByUser);
 918     },
 919
 920     /**
 921      * @param {boolean=} omitFocus
 922      */
 923     revealAndSelect: function(omitFocus)
 924     {
 925         this.reveal();
 926         this.select(omitFocus);
 927     },
 928
 929     /**
 930      * @param {boolean=} supressOnDeselect
 931      */
 932     deselect: function(supressOnDeselect)
 933     {
 934         if (!this.treeOutline || this.treeOutline.selectedTreeElement !== this || !this.selected)
 935             return;
 936
 937         this.selected = false;
 938         this.treeOutline.selectedTreeElement = null;
 939         this._listItemNode.classList.remove("selected");
 940     },
 941
 942     _populateIfNeeded: function()
 943     {
 944         if (this._expandable && !this._children) {
 945             this._children = [];
 946             this.onpopulate();
 947         }
 948     },
 949
 950     onpopulate: function()
 951     {
 952         // Overridden by subclasses.
 953     },
 954
 955     /**
 956      * @return {boolean}
 957      */
 958     onenter: function()
 959     {
 960         return false;
 961     },
 962
 963     /**
 964      * @return {boolean}
 965      */
 966     ondelete: function()
 967     {
 968         return false;
 969     },
 970
 971     /**
 972      * @return {boolean}
 973      */
 974     onspace: function()
 975     {
 976         return false;
 977     },
 978
 979     onbind: function()
 980     {
 981     },
 982
 983     onunbind: function()
 984     {
 985     },
 986
 987     onattach: function()
 988     {
 989     },
 990
 991     onexpand: function()
 992     {
 993     },
 994
 995     oncollapse: function()
 996     {
 997     },
 998
 999     /**
1000      * @param {!Event} e
1001      * @return {boolean}
1002      */
1003     ondblclick: function(e)
1004     {
1005         return false;
1006     },
1007
1008     onreveal: function()
1009     {
1010     },
1011
1012     /**
1013      * @param {boolean=} selectedByUser
1014      * @return {boolean}
1015      */
1016     onselect: function(selectedByUser)
1017     {
1018         return false;
1019     },
1020
1021     /**
1022      * @param {boolean} skipUnrevealed
1023      * @param {?TreeElement=} stayWithin
1024      * @param {boolean=} dontPopulate
1025      * @param {!Object=} info
1026      * @return {?TreeElement}
1027      */
1028     traverseNextTreeElement: function(skipUnrevealed, stayWithin, dontPopulate, info)
1029     {
1030         if (!dontPopulate)
1031             this._populateIfNeeded();
1032
1033         if (info)
1034             info.depthChange = 0;
1035
1036         var element = skipUnrevealed ? (this.revealed() ? this.firstChild() : null) : this.firstChild();
1037         if (element && (!skipUnrevealed || (skipUnrevealed && this.expanded))) {
1038             if (info)
1039                 info.depthChange = 1;
1040             return element;
1041         }
1042
1043         if (this === stayWithin)
1044             return null;
1045
1046         element = skipUnrevealed ? (this.revealed() ? this.nextSibling : null) : this.nextSibling;
1047         if (element)
1048             return element;
1049
1050         element = this;
1051         while (element && !element.root && !(skipUnrevealed ? (element.revealed() ? element.nextSibling : null) : element.nextSibling) && element.parent !== stayWithin) {
1052             if (info)
1053                 info.depthChange -= 1;
1054             element = element.parent;
1055         }
1056
1057         if (!element || element.root)
1058             return null;
1059
1060         return (skipUnrevealed ? (element.revealed() ? element.nextSibling : null) : element.nextSibling);
1061     },
1062
1063     /**
1064      * @param {boolean} skipUnrevealed
1065      * @param {boolean=} dontPopulate
1066      * @return {?TreeElement}
1067      */
1068     traversePreviousTreeElement: function(skipUnrevealed, dontPopulate)
1069     {
1070         var element = skipUnrevealed ? (this.revealed() ? this.previousSibling : null) : this.previousSibling;
1071         if (!dontPopulate && element)
1072             element._populateIfNeeded();
1073
1074         while (element && (skipUnrevealed ? (element.revealed() && element.expanded ? element.lastChild() : null) : element.lastChild())) {
1075             if (!dontPopulate)
1076                 element._populateIfNeeded();
1077             element = (skipUnrevealed ? (element.revealed() && element.expanded ? element.lastChild() : null) : element.lastChild());
1078         }
1079
1080         if (element)
1081             return element;
1082
1083         if (!this.parent || this.parent.root)
1084             return null;
1085
1086         return this.parent;
1087     },
1088
1089     /**
1090      * @return {boolean}
1091      */
1092     isEventWithinDisclosureTriangle: function(event)
1093     {
1094         // FIXME: We should not use getComputedStyle(). For that we need to get rid of using ::before for disclosure triangle. (http://webk.it/74446)
1095         var paddingLeftValue = window.getComputedStyle(this._listItemNode).paddingLeft;
1096         console.assert(paddingLeftValue.endsWith("px"));
1097         var computedLeftPadding = parseFloat(paddingLeftValue);
1098         var left = this._listItemNode.totalOffsetLeft() + computedLeftPadding;
1099         return event.pageX >= left && event.pageX <= left + TreeElement._ArrowToggleWidth && this._expandable;
1100     }
1101 }