Source/WebInspectorUI/UserInterface/Views/TreeOutline.js - WebKit - Git at Google

 /*
  * Copyright (C) 2007, 2013, 2015 Apple Inc.  All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
  *     notice, this list of conditions and the following disclaimer.
  * 2.  Redistributions in binary form must reproduce the above copyright
  *     notice, this list of conditions and the following disclaimer in the
  *     documentation and/or other materials provided with the distribution.
  * 3.  Neither the name of Apple Inc. ("Apple") nor the names of
  *     its contributors may be used to endorse or promote products derived
  *     from this software without specific prior written permission.
  *
  * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
  * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
  * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
  * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
  * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
  * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
  * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
  * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */

 WebInspector.TreeOutline = class TreeOutline extends WebInspector.Object
 {
     constructor(element)
     {
         super();

         this.element = element || document.createElement("ol");
         this.element.classList.add(WebInspector.TreeOutline.ElementStyleClassName);
         this.element.addEventListener("contextmenu", this._handleContextmenu.bind(this));

         this.children = [];
         this.selectedTreeElement = null;
         this._childrenListNode = this.element;
         this._childrenListNode.removeChildren();
         this._knownTreeElements = [];
         this._treeElementsExpandedState = [];
         this.allowsRepeatSelection = false;
         this.root = true;
         this.hasChildren = false;
         this.expanded = true;
         this.selected = false;
         this.treeOutline = this;
         this._hidden = false;
         this._compact = false;
         this._large = false;
         this._disclosureButtons = true;
         this._customIndent = false;

         this._childrenListNode.tabIndex = 0;
         this._childrenListNode.addEventListener("keydown", this._treeKeyDown.bind(this), true);

         WebInspector.TreeOutline._generateStyleRulesIfNeeded();
     }

     // Public

     get hidden()
     {
         return this._hidden;
     }

     set hidden(x)
     {
         if (this._hidden === x)
             return;

         this._hidden = x;
         this.element.hidden = this._hidden;
     }

     get compact()
     {
         return this._compact;
     }

     set compact(x)
     {
         if (this._compact === x)
             return;

         this._compact = x;
         if (this._compact)
             this.large = false;

         this.element.classList.toggle("compact", this._compact);
     }

     get large()
     {
         return this._large;
     }

     set large(x)
     {
         if (this._large === x)
             return;

         this._large = x;
         if (this._large)
             this.compact = false;

         this.element.classList.toggle("large", this._large);
     }

     get disclosureButtons()
     {
         return this._disclosureButtons;
     }

     set disclosureButtons(x)
     {
         if (this._disclosureButtons === x)
             return;

         this._disclosureButtons = x;
         this.element.classList.toggle("hide-disclosure-buttons", !this._disclosureButtons);
     }

     get customIndent()
     {
         return this._customIndent;
     }

     set customIndent(x)
     {
         if (this._customIndent === x)
             return;

         this._customIndent = x;
         this.element.classList.toggle(WebInspector.TreeOutline.CustomIndentStyleClassName, this._customIndent);
     }

     appendChild(child)
     {
         console.assert(child);
         if (!child)
             return;

         var lastChild = this.children[this.children.length - 1];
         if (lastChild) {
             lastChild.nextSibling = child;
             child.previousSibling = lastChild;
         } else {
             child.previousSibling = null;
             child.nextSibling = null;
         }

         var isFirstChild = !this.children.length;

         this.children.push(child);
         this.hasChildren = true;
         child.parent = this;
         child.treeOutline = this.treeOutline;
         child.treeOutline._rememberTreeElement(child);

         var current = child.children[0];
         while (current) {
             current.treeOutline = this.treeOutline;
             current.treeOutline._rememberTreeElement(current);
             current = current.traverseNextTreeElement(false, child, true);
         }

         if (child.hasChildren && child.treeOutline._treeElementsExpandedState[child.identifier] !== undefined)
             child.expanded = child.treeOutline._treeElementsExpandedState[child.identifier];

         if (this._childrenListNode)
             child._attach();

         if (this.treeOutline)
             this.treeOutline.dispatchEventToListeners(WebInspector.TreeOutline.Event.ElementAdded, {element: child});

         if (isFirstChild && this.expanded)
             this.expand();
     }

     insertChild(child, index)
     {
         console.assert(child);
         if (!child)
             return;

         var previousChild = (index > 0 ? this.children[index - 1] : null);
         if (previousChild) {
             previousChild.nextSibling = child;
             child.previousSibling = previousChild;
         } else {
             child.previousSibling = null;
         }

         var nextChild = this.children[index];
         if (nextChild) {
             nextChild.previousSibling = child;
             child.nextSibling = nextChild;
         } else {
             child.nextSibling = null;
         }

         var isFirstChild = !this.children.length;

         this.children.splice(index, 0, child);
         this.hasChildren = true;
         child.parent = this;
         child.treeOutline = this.treeOutline;
         child.treeOutline._rememberTreeElement(child);

         var current = child.children[0];
         while (current) {
             current.treeOutline = this.treeOutline;
             current.treeOutline._rememberTreeElement(current);
             current = current.traverseNextTreeElement(false, child, true);
         }

         if (child.hasChildren && child.treeOutline._treeElementsExpandedState[child.identifier] !== undefined)
             child.expanded = child.treeOutline._treeElementsExpandedState[child.identifier];

         if (this._childrenListNode)
             child._attach();

         if (this.treeOutline)
             this.treeOutline.dispatchEventToListeners(WebInspector.TreeOutline.Event.ElementAdded, {element: child});

         if (isFirstChild && this.expanded)
             this.expand();
     }

     removeChildAtIndex(childIndex, suppressOnDeselect, suppressSelectSibling)
     {
         console.assert(childIndex >= 0 && childIndex < this.children.length);
         if (childIndex < 0 || childIndex >= this.children.length)
             return;

         let child = this.children[childIndex];
         this.children.splice(childIndex, 1);

         let parent = child.parent;
         if (child.deselect(suppressOnDeselect)) {
             if (child.previousSibling && !suppressSelectSibling)
                 child.previousSibling.select(true, false);
             else if (child.nextSibling && !suppressSelectSibling)
                 child.nextSibling.select(true, false);
             else if (!suppressSelectSibling)
                 parent.select(true, false);
         }

         if (child.previousSibling)
             child.previousSibling.nextSibling = child.nextSibling;
         if (child.nextSibling)
             child.nextSibling.previousSibling = child.previousSibling;

         let treeOutline = child.treeOutline;
         if (treeOutline) {
             treeOutline._forgetTreeElement(child);
             treeOutline._forgetChildrenRecursive(child);
         }

         child._detach();
         child.treeOutline = null;
         child.parent = null;
         child.nextSibling = null;
         child.previousSibling = null;

         if (treeOutline)
             treeOutline.dispatchEventToListeners(WebInspector.TreeOutline.Event.ElementRemoved, {element: child});
     }

     removeChild(child, suppressOnDeselect, suppressSelectSibling)
     {
         console.assert(child);
         if (!child)
             return;

         var childIndex = this.children.indexOf(child);
         console.assert(childIndex !== -1);
         if (childIndex === -1)
             return;

         this.removeChildAtIndex(childIndex, suppressOnDeselect, suppressSelectSibling);

         if (!this.children.length) {
             if (this._listItemNode)
                 this._listItemNode.classList.remove("parent");
             this.hasChildren = false;
         }
     }

     removeChildren(suppressOnDeselect)
     {
         for (let child of this.children) {
             child.deselect(suppressOnDeselect);

             let treeOutline = child.treeOutline;
             if (treeOutline) {
                 treeOutline._forgetTreeElement(child);
                 treeOutline._forgetChildrenRecursive(child);
             }

             child._detach();
             child.treeOutline = null;
             child.parent = null;
             child.nextSibling = null;
             child.previousSibling = null;

             if (treeOutline)
                 treeOutline.dispatchEventToListeners(WebInspector.TreeOutline.Event.ElementRemoved, {element: child});
         }

         this.children = [];
     }

     removeChildrenRecursive(suppressOnDeselect)
     {
         let childrenToRemove = this.children;
         let child = this.children[0];
         while (child) {
             if (child.children.length)
                 childrenToRemove = childrenToRemove.concat(child.children);
             child = child.traverseNextTreeElement(false, this, true);
         }

         for (let child of childrenToRemove) {
             child.deselect(suppressOnDeselect);

             let treeOutline = child.treeOutline;
             if (treeOutline)
                 treeOutline._forgetTreeElement(child);

             child._detach();
             child.children = [];
             child.treeOutline = null;
             child.parent = null;
             child.nextSibling = null;
             child.previousSibling = null;

             if (treeOutline)
                 treeOutline.dispatchEventToListeners(WebInspector.TreeOutline.Event.ElementRemoved, {element: child});
         }

         this.children = [];
     }

     _rememberTreeElement(element)
     {
         if (!this._knownTreeElements[element.identifier])
             this._knownTreeElements[element.identifier] = [];

         // check if the element is already known
         var elements = this._knownTreeElements[element.identifier];
         if (elements.indexOf(element) !== -1)
             return;

         // add the element
         elements.push(element);
     }

     _forgetTreeElement(element)
     {
         if (this.selectedTreeElement === element) {
             element.deselect(true);
             this.selectedTreeElement = null;
         }
         if (this._knownTreeElements[element.identifier])
             this._knownTreeElements[element.identifier].remove(element, true);
     }

     _forgetChildrenRecursive(parentElement)
     {
         var child = parentElement.children[0];
         while (child) {
             this._forgetTreeElement(child);
             child = child.traverseNextTreeElement(false, parentElement, true);
         }
     }

     getCachedTreeElement(representedObject)
     {
         if (!representedObject)
             return null;

         if (representedObject.__treeElementIdentifier) {
             // If this representedObject has a tree element identifier, and it is a known TreeElement
             // in our tree we can just return that tree element.
             var elements = this._knownTreeElements[representedObject.__treeElementIdentifier];
             if (elements) {
                 for (var i = 0; i < elements.length; ++i)
                     if (elements[i].representedObject === representedObject)
                         return elements[i];
             }
         }
         return null;
     }

     findTreeElement(representedObject, isAncestor, getParent)
     {
         if (!representedObject)
             return null;

         var cachedElement = this.getCachedTreeElement(representedObject);
         if (cachedElement)
             return cachedElement;

         // The representedObject isn't known, so we start at the top of the tree and work down to find the first
         // tree element that represents representedObject or one of its ancestors.
         var item;
         var found = false;
         for (var i = 0; i < this.children.length; ++i) {
             item = this.children[i];
             if (item.representedObject === representedObject || (isAncestor && isAncestor(item.representedObject, representedObject))) {
                 found = true;
                 break;
             }
         }

         if (!found)
             return null;

         // Make sure the item that we found is connected to the root of the tree.
         // Build up a list of representedObject's ancestors that aren't already in our tree.
         var ancestors = [];
         var currentObject = representedObject;
         while (currentObject) {
             ancestors.unshift(currentObject);
             if (currentObject === item.representedObject)
                 break;
             currentObject = getParent(currentObject);
         }

         // For each of those ancestors we populate them to fill in the tree.
         for (var i = 0; i < ancestors.length; ++i) {
             // Make sure we don't call findTreeElement with the same representedObject
             // again, to prevent infinite recursion.
             if (ancestors[i] === representedObject)
                 continue;

             // FIXME: we could do something faster than findTreeElement since we will know the next
             // ancestor exists in the tree.
             item = this.findTreeElement(ancestors[i], isAncestor, getParent);
             if (item)
                 item.onpopulate();
         }

         return this.getCachedTreeElement(representedObject);
     }

     _treeElementDidChange(treeElement)
     {
         if (treeElement.treeOutline !== this)
             return;

         this.dispatchEventToListeners(WebInspector.TreeOutline.Event.ElementDidChange, {element: treeElement});
     }

     treeElementFromNode(node)
     {
         var listNode = node.enclosingNodeOrSelfWithNodeNameInArray(["ol", "li"]);
         if (listNode)
             return listNode.parentTreeElement || listNode.treeElement;
         return null;
     }

     treeElementFromPoint(x, y)
     {
         var node = this._childrenListNode.ownerDocument.elementFromPoint(x, y);
         if (!node)
             return null;

         return this.treeElementFromNode(node);
     }

     _treeKeyDown(event)
     {
         if (event.target !== this._childrenListNode)
             return;

         if (!this.selectedTreeElement || event.shiftKey || event.metaKey || event.ctrlKey)
             return;

         var handled = false;
         var nextSelectedElement;
         if (event.keyIdentifier === "Up" && !event.altKey) {
             nextSelectedElement = this.selectedTreeElement.traversePreviousTreeElement(true);
             while (nextSelectedElement && !nextSelectedElement.selectable)
                 nextSelectedElement = nextSelectedElement.traversePreviousTreeElement(true);
             handled = nextSelectedElement ? true : false;
         } else if (event.keyIdentifier === "Down" && !event.altKey) {
             nextSelectedElement = this.selectedTreeElement.traverseNextTreeElement(true);
             while (nextSelectedElement && !nextSelectedElement.selectable)
                 nextSelectedElement = nextSelectedElement.traverseNextTreeElement(true);
             handled = nextSelectedElement ? true : false;
         } else if (event.keyIdentifier === "Left") {
             if (this.selectedTreeElement.expanded) {
                 if (event.altKey)
                     this.selectedTreeElement.collapseRecursively();
                 else
                     this.selectedTreeElement.collapse();
                 handled = true;
             } else if (this.selectedTreeElement.parent && !this.selectedTreeElement.parent.root) {
                 handled = true;
                 if (this.selectedTreeElement.parent.selectable) {
                     nextSelectedElement = this.selectedTreeElement.parent;
                     while (nextSelectedElement && !nextSelectedElement.selectable)
                         nextSelectedElement = nextSelectedElement.parent;
                     handled = nextSelectedElement ? true : false;
                 } else if (this.selectedTreeElement.parent)
                     this.selectedTreeElement.parent.collapse();
             }
         } else if (event.keyIdentifier === "Right") {
             if (!this.selectedTreeElement.revealed()) {
                 this.selectedTreeElement.reveal();
                 handled = true;
             } else if (this.selectedTreeElement.hasChildren) {
                 handled = true;
                 if (this.selectedTreeElement.expanded) {
                     nextSelectedElement = this.selectedTreeElement.children[0];
                     while (nextSelectedElement && !nextSelectedElement.selectable)
                         nextSelectedElement = nextSelectedElement.nextSibling;
                     handled = nextSelectedElement ? true : false;
                 } else {
                     if (event.altKey)
                         this.selectedTreeElement.expandRecursively();
                     else
                         this.selectedTreeElement.expand();
                 }
             }
         } else if (event.keyCode === 8 /* Backspace */ || event.keyCode === 46 /* Delete */) {
             if (this.selectedTreeElement.ondelete)
                 handled = this.selectedTreeElement.ondelete();
             if (!handled && this.treeOutline.ondelete)
                 handled = this.treeOutline.ondelete(this.selectedTreeElement);
         } else if (isEnterKey(event)) {
             if (this.selectedTreeElement.onenter)
                 handled = this.selectedTreeElement.onenter();
             if (!handled && this.treeOutline.onenter)
                 handled = this.treeOutline.onenter(this.selectedTreeElement);
         } else if (event.keyIdentifier === "U+0020" /* Space */) {
             if (this.selectedTreeElement.onspace)
                 handled = this.selectedTreeElement.onspace();
             if (!handled && this.treeOutline.onspace)
                 handled = this.treeOutline.onspace(this.selectedTreeElement);
         }

         if (nextSelectedElement) {
             nextSelectedElement.reveal();
             nextSelectedElement.select(false, true);
         }

         if (handled) {
             event.preventDefault();
             event.stopPropagation();
         }
     }

     expand()
     {
         // this is the root, do nothing
     }

     collapse()
     {
         // this is the root, do nothing
     }

     revealed()
     {
         return true;
     }

     reveal()
     {
         // this is the root, do nothing
     }

     select()
     {
         // this is the root, do nothing
     }

     revealAndSelect(omitFocus)
     {
         // this is the root, do nothing
     }

     get selectedTreeElementIndex()
     {
         if (!this.hasChildren || !this.selectedTreeElement)
             return;

         for (var i = 0; i < this.children.length; ++i) {
             if (this.children[i] === this.selectedTreeElement)
                 return i;
         }

         return false;
     }

     // Protected

     treeElementFromEvent(event)
     {
         let scrollContainer = this.element.parentElement;

         // We choose this X coordinate based on the knowledge that our list
         // items extend at least to the right edge of the outer <ol> container.
         // In the no-word-wrap mode the outer <ol> may be wider than the tree container
         // (and partially hidden), in which case we are left to use only its right boundary.
         let x = scrollContainer.totalOffsetLeft + scrollContainer.offsetWidth - 36;
         let y = event.pageY;

         // Our list items have 1-pixel cracks between them vertically. We avoid
         // the cracks by checking slightly above and slightly below the mouse
         // and seeing if we hit the same element each time.
         let elementUnderMouse = this.treeElementFromPoint(x, y);
         let elementAboveMouse = this.treeElementFromPoint(x, y - 2);
         let element = null;
         if (elementUnderMouse === elementAboveMouse)
             element = elementUnderMouse;
         else
             element = this.treeElementFromPoint(x, y + 2);

         return element;
     }

     populateContextMenu(contextMenu, event, treeElement)
     {
         treeElement.populateContextMenu(contextMenu, event);
     }

     // Private

     static _generateStyleRulesIfNeeded()
     {
         if (WebInspector.TreeOutline._styleElement)
            return;

         WebInspector.TreeOutline._styleElement = document.createElement("style");

         let maximumTreeDepth = 32;
         let baseLeftPadding = 5; // Matches the padding in TreeOutline.css for the item class. Keep in sync.
         let depthPadding = 10;

         let styleText = "";
         let childrenSubstring = "";
         for (let i = 1; i <= maximumTreeDepth; ++i) {
             // Keep all the elements at the same depth once the maximum is reached.
             childrenSubstring += i === maximumTreeDepth ? " .children" : " > .children";
             styleText += `.${WebInspector.TreeOutline.ElementStyleClassName}:not(.${WebInspector.TreeOutline.CustomIndentStyleClassName})${childrenSubstring} > .item { `;

             if (WebInspector.resolvedLayoutDirection() === WebInspector.LayoutDirection.RTL)
                 styleText += "padding-right: ";
             else
                 styleText += "padding-left: ";

             styleText += (baseLeftPadding + (depthPadding * i)) + "px; }\n";
         }

         WebInspector.TreeOutline._styleElement.textContent = styleText;

         document.head.appendChild(WebInspector.TreeOutline._styleElement);
     }

     _handleContextmenu(event)
     {
         let treeElement = this.treeElementFromEvent(event);
         if (!treeElement)
             return;

         let contextMenu = WebInspector.ContextMenu.createFromEvent(event);
         this.populateContextMenu(contextMenu, event, treeElement);
     }
 };

 WebInspector.TreeOutline._styleElement = null;

 WebInspector.TreeOutline.ElementStyleClassName = "tree-outline";
 WebInspector.TreeOutline.CustomIndentStyleClassName = "custom-indent";

 WebInspector.TreeOutline.Event = {
     ElementAdded: Symbol("element-added"),
     ElementDidChange: Symbol("element-did-change"),
     ElementRemoved: Symbol("element-removed"),
     ElementDisclosureDidChanged: Symbol("element-disclosure-did-change"),
     ElementVisibilityDidChange: Symbol("element-visbility-did-change"),
     SelectionDidChange: Symbol("selection-did-change")
 };

 WebInspector.TreeOutline._knownTreeElementNextIdentifier = 1;
	/*
	* Copyright (C) 2007, 2013, 2015 Apple Inc. All rights reserved.
	*
	* Redistribution and use in source and binary forms, with or without
	* modification, are permitted provided that the following conditions
	* are met:
	*
	* 1. Redistributions of source code must retain the above copyright
	* notice, this list of conditions and the following disclaimer.
	* 2. Redistributions in binary form must reproduce the above copyright
	* notice, this list of conditions and the following disclaimer in the
	* documentation and/or other materials provided with the distribution.
	* 3. Neither the name of Apple Inc. ("Apple") nor the names of
	* its contributors may be used to endorse or promote products derived
	* from this software without specific prior written permission.
	*
	* THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
	* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
	* WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
	* DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
	* DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
	* (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
	* LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
	* ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
	* (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
	* THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
	*/

	WebInspector.TreeOutline = class TreeOutline extends WebInspector.Object
	{
	constructor(element)
	{
	super();

	this.element = element \|\| document.createElement("ol");
	this.element.classList.add(WebInspector.TreeOutline.ElementStyleClassName);
	this.element.addEventListener("contextmenu", this._handleContextmenu.bind(this));

	this.children = [];
	this.selectedTreeElement = null;
	this._childrenListNode = this.element;
	this._childrenListNode.removeChildren();
	this._knownTreeElements = [];
	this._treeElementsExpandedState = [];
	this.allowsRepeatSelection = false;
	this.root = true;
	this.hasChildren = false;
	this.expanded = true;
	this.selected = false;
	this.treeOutline = this;
	this._hidden = false;
	this._compact = false;
	this._large = false;
	this._disclosureButtons = true;
	this._customIndent = false;

	this._childrenListNode.tabIndex = 0;
	this._childrenListNode.addEventListener("keydown", this._treeKeyDown.bind(this), true);

	WebInspector.TreeOutline._generateStyleRulesIfNeeded();
	}

	// Public

	get hidden()
	{
	return this._hidden;
	}

	set hidden(x)
	{
	if (this._hidden === x)
	return;

	this._hidden = x;
	this.element.hidden = this._hidden;
	}

	get compact()
	{
	return this._compact;
	}

	set compact(x)
	{
	if (this._compact === x)
	return;

	this._compact = x;
	if (this._compact)
	this.large = false;

	this.element.classList.toggle("compact", this._compact);
	}

	get large()
	{
	return this._large;
	}

	set large(x)
	{
	if (this._large === x)
	return;

	this._large = x;
	if (this._large)
	this.compact = false;

	this.element.classList.toggle("large", this._large);
	}

	get disclosureButtons()
	{
	return this._disclosureButtons;
	}

	set disclosureButtons(x)
	{
	if (this._disclosureButtons === x)
	return;

	this._disclosureButtons = x;
	this.element.classList.toggle("hide-disclosure-buttons", !this._disclosureButtons);
	}

	get customIndent()
	{
	return this._customIndent;
	}

	set customIndent(x)
	{
	if (this._customIndent === x)
	return;

	this._customIndent = x;
	this.element.classList.toggle(WebInspector.TreeOutline.CustomIndentStyleClassName, this._customIndent);
	}

	appendChild(child)
	{
	console.assert(child);
	if (!child)
	return;

	var lastChild = this.children[this.children.length - 1];
	if (lastChild) {
	lastChild.nextSibling = child;
	child.previousSibling = lastChild;
	} else {
	child.previousSibling = null;
	child.nextSibling = null;
	}

	var isFirstChild = !this.children.length;

	this.children.push(child);
	this.hasChildren = true;
	child.parent = this;
	child.treeOutline = this.treeOutline;
	child.treeOutline._rememberTreeElement(child);

	var current = child.children[0];
	while (current) {
	current.treeOutline = this.treeOutline;
	current.treeOutline._rememberTreeElement(current);
	current = current.traverseNextTreeElement(false, child, true);
	}

	if (child.hasChildren && child.treeOutline._treeElementsExpandedState[child.identifier] !== undefined)
	child.expanded = child.treeOutline._treeElementsExpandedState[child.identifier];

	if (this._childrenListNode)
	child._attach();

	if (this.treeOutline)
	this.treeOutline.dispatchEventToListeners(WebInspector.TreeOutline.Event.ElementAdded, {element: child});

	if (isFirstChild && this.expanded)
	this.expand();
	}

	insertChild(child, index)
	{
	console.assert(child);
	if (!child)
	return;

	var previousChild = (index > 0 ? this.children[index - 1] : null);
	if (previousChild) {
	previousChild.nextSibling = child;
	child.previousSibling = previousChild;
	} else {
	child.previousSibling = null;
	}

	var nextChild = this.children[index];
	if (nextChild) {
	nextChild.previousSibling = child;
	child.nextSibling = nextChild;
	} else {
	child.nextSibling = null;
	}

	var isFirstChild = !this.children.length;

	this.children.splice(index, 0, child);
	this.hasChildren = true;
	child.parent = this;
	child.treeOutline = this.treeOutline;
	child.treeOutline._rememberTreeElement(child);

	var current = child.children[0];
	while (current) {
	current.treeOutline = this.treeOutline;
	current.treeOutline._rememberTreeElement(current);
	current = current.traverseNextTreeElement(false, child, true);
	}

	if (child.hasChildren && child.treeOutline._treeElementsExpandedState[child.identifier] !== undefined)
	child.expanded = child.treeOutline._treeElementsExpandedState[child.identifier];

	if (this._childrenListNode)
	child._attach();

	if (this.treeOutline)
	this.treeOutline.dispatchEventToListeners(WebInspector.TreeOutline.Event.ElementAdded, {element: child});

	if (isFirstChild && this.expanded)
	this.expand();
	}

	removeChildAtIndex(childIndex, suppressOnDeselect, suppressSelectSibling)
	{
	console.assert(childIndex >= 0 && childIndex < this.children.length);
	if (childIndex < 0 \|\| childIndex >= this.children.length)
	return;

	let child = this.children[childIndex];
	this.children.splice(childIndex, 1);

	let parent = child.parent;
	if (child.deselect(suppressOnDeselect)) {
	if (child.previousSibling && !suppressSelectSibling)
	child.previousSibling.select(true, false);
	else if (child.nextSibling && !suppressSelectSibling)
	child.nextSibling.select(true, false);
	else if (!suppressSelectSibling)
	parent.select(true, false);
	}

	if (child.previousSibling)
	child.previousSibling.nextSibling = child.nextSibling;
	if (child.nextSibling)
	child.nextSibling.previousSibling = child.previousSibling;

	let treeOutline = child.treeOutline;
	if (treeOutline) {
	treeOutline._forgetTreeElement(child);
	treeOutline._forgetChildrenRecursive(child);
	}

	child._detach();
	child.treeOutline = null;
	child.parent = null;
	child.nextSibling = null;
	child.previousSibling = null;

	if (treeOutline)
	treeOutline.dispatchEventToListeners(WebInspector.TreeOutline.Event.ElementRemoved, {element: child});
	}

	removeChild(child, suppressOnDeselect, suppressSelectSibling)
	{
	console.assert(child);
	if (!child)
	return;

	var childIndex = this.children.indexOf(child);
	console.assert(childIndex !== -1);
	if (childIndex === -1)
	return;

	this.removeChildAtIndex(childIndex, suppressOnDeselect, suppressSelectSibling);

	if (!this.children.length) {
	if (this._listItemNode)
	this._listItemNode.classList.remove("parent");
	this.hasChildren = false;
	}
	}

	removeChildren(suppressOnDeselect)
	{
	for (let child of this.children) {
	child.deselect(suppressOnDeselect);

	let treeOutline = child.treeOutline;
	if (treeOutline) {
	treeOutline._forgetTreeElement(child);
	treeOutline._forgetChildrenRecursive(child);
	}

	child._detach();
	child.treeOutline = null;
	child.parent = null;
	child.nextSibling = null;
	child.previousSibling = null;

	if (treeOutline)
	treeOutline.dispatchEventToListeners(WebInspector.TreeOutline.Event.ElementRemoved, {element: child});
	}

	this.children = [];
	}

	removeChildrenRecursive(suppressOnDeselect)
	{
	let childrenToRemove = this.children;
	let child = this.children[0];
	while (child) {
	if (child.children.length)
	childrenToRemove = childrenToRemove.concat(child.children);
	child = child.traverseNextTreeElement(false, this, true);
	}

	for (let child of childrenToRemove) {
	child.deselect(suppressOnDeselect);

	let treeOutline = child.treeOutline;
	if (treeOutline)
	treeOutline._forgetTreeElement(child);

	child._detach();
	child.children = [];
	child.treeOutline = null;
	child.parent = null;
	child.nextSibling = null;
	child.previousSibling = null;

	if (treeOutline)
	treeOutline.dispatchEventToListeners(WebInspector.TreeOutline.Event.ElementRemoved, {element: child});
	}

	this.children = [];
	}

	_rememberTreeElement(element)
	{
	if (!this._knownTreeElements[element.identifier])
	this._knownTreeElements[element.identifier] = [];

	// check if the element is already known
	var elements = this._knownTreeElements[element.identifier];
	if (elements.indexOf(element) !== -1)
	return;

	// add the element
	elements.push(element);
	}

	_forgetTreeElement(element)
	{
	if (this.selectedTreeElement === element) {
	element.deselect(true);
	this.selectedTreeElement = null;
	}
	if (this._knownTreeElements[element.identifier])
	this._knownTreeElements[element.identifier].remove(element, true);
	}

	_forgetChildrenRecursive(parentElement)
	{
	var child = parentElement.children[0];
	while (child) {
	this._forgetTreeElement(child);
	child = child.traverseNextTreeElement(false, parentElement, true);
	}
	}

	getCachedTreeElement(representedObject)
	{
	if (!representedObject)
	return null;

	if (representedObject.__treeElementIdentifier) {
	// If this representedObject has a tree element identifier, and it is a known TreeElement
	// in our tree we can just return that tree element.
	var elements = this._knownTreeElements[representedObject.__treeElementIdentifier];
	if (elements) {
	for (var i = 0; i < elements.length; ++i)
	if (elements[i].representedObject === representedObject)
	return elements[i];
	}
	}
	return null;
	}

	findTreeElement(representedObject, isAncestor, getParent)
	{
	if (!representedObject)
	return null;

	var cachedElement = this.getCachedTreeElement(representedObject);
	if (cachedElement)
	return cachedElement;

	// The representedObject isn't known, so we start at the top of the tree and work down to find the first
	// tree element that represents representedObject or one of its ancestors.
	var item;
	var found = false;
	for (var i = 0; i < this.children.length; ++i) {
	item = this.children[i];
	if (item.representedObject === representedObject \|\| (isAncestor && isAncestor(item.representedObject, representedObject))) {
	found = true;
	break;
	}
	}

	if (!found)
	return null;

	// Make sure the item that we found is connected to the root of the tree.
	// Build up a list of representedObject's ancestors that aren't already in our tree.
	var ancestors = [];
	var currentObject = representedObject;
	while (currentObject) {
	ancestors.unshift(currentObject);
	if (currentObject === item.representedObject)
	break;
	currentObject = getParent(currentObject);
	}

	// For each of those ancestors we populate them to fill in the tree.
	for (var i = 0; i < ancestors.length; ++i) {
	// Make sure we don't call findTreeElement with the same representedObject
	// again, to prevent infinite recursion.
	if (ancestors[i] === representedObject)
	continue;

	// FIXME: we could do something faster than findTreeElement since we will know the next
	// ancestor exists in the tree.
	item = this.findTreeElement(ancestors[i], isAncestor, getParent);
	if (item)
	item.onpopulate();
	}

	return this.getCachedTreeElement(representedObject);
	}

	_treeElementDidChange(treeElement)
	{
	if (treeElement.treeOutline !== this)
	return;

	this.dispatchEventToListeners(WebInspector.TreeOutline.Event.ElementDidChange, {element: treeElement});
	}

	treeElementFromNode(node)
	{
	var listNode = node.enclosingNodeOrSelfWithNodeNameInArray(["ol", "li"]);
	if (listNode)
	return listNode.parentTreeElement \|\| listNode.treeElement;
	return null;
	}

	treeElementFromPoint(x, y)
	{
	var node = this._childrenListNode.ownerDocument.elementFromPoint(x, y);
	if (!node)
	return null;

	return this.treeElementFromNode(node);
	}

	_treeKeyDown(event)
	{
	if (event.target !== this._childrenListNode)
	return;

	if (!this.selectedTreeElement \|\| event.shiftKey \|\| event.metaKey \|\| event.ctrlKey)
	return;

	var handled = false;
	var nextSelectedElement;
	if (event.keyIdentifier === "Up" && !event.altKey) {
	nextSelectedElement = this.selectedTreeElement.traversePreviousTreeElement(true);
	while (nextSelectedElement && !nextSelectedElement.selectable)
	nextSelectedElement = nextSelectedElement.traversePreviousTreeElement(true);
	handled = nextSelectedElement ? true : false;
	} else if (event.keyIdentifier === "Down" && !event.altKey) {
	nextSelectedElement = this.selectedTreeElement.traverseNextTreeElement(true);
	while (nextSelectedElement && !nextSelectedElement.selectable)
	nextSelectedElement = nextSelectedElement.traverseNextTreeElement(true);
	handled = nextSelectedElement ? true : false;
	} else if (event.keyIdentifier === "Left") {
	if (this.selectedTreeElement.expanded) {
	if (event.altKey)
	this.selectedTreeElement.collapseRecursively();
	else
	this.selectedTreeElement.collapse();
	handled = true;
	} else if (this.selectedTreeElement.parent && !this.selectedTreeElement.parent.root) {
	handled = true;
	if (this.selectedTreeElement.parent.selectable) {
	nextSelectedElement = this.selectedTreeElement.parent;
	while (nextSelectedElement && !nextSelectedElement.selectable)
	nextSelectedElement = nextSelectedElement.parent;
	handled = nextSelectedElement ? true : false;
	} else if (this.selectedTreeElement.parent)
	this.selectedTreeElement.parent.collapse();
	}
	} else if (event.keyIdentifier === "Right") {
	if (!this.selectedTreeElement.revealed()) {
	this.selectedTreeElement.reveal();
	handled = true;
	} else if (this.selectedTreeElement.hasChildren) {
	handled = true;
	if (this.selectedTreeElement.expanded) {
	nextSelectedElement = this.selectedTreeElement.children[0];
	while (nextSelectedElement && !nextSelectedElement.selectable)
	nextSelectedElement = nextSelectedElement.nextSibling;
	handled = nextSelectedElement ? true : false;
	} else {
	if (event.altKey)
	this.selectedTreeElement.expandRecursively();
	else
	this.selectedTreeElement.expand();
	}
	}
	} else if (event.keyCode === 8 /* Backspace / \|\| event.keyCode === 46 / Delete */) {
	if (this.selectedTreeElement.ondelete)
	handled = this.selectedTreeElement.ondelete();
	if (!handled && this.treeOutline.ondelete)
	handled = this.treeOutline.ondelete(this.selectedTreeElement);
	} else if (isEnterKey(event)) {
	if (this.selectedTreeElement.onenter)
	handled = this.selectedTreeElement.onenter();
	if (!handled && this.treeOutline.onenter)
	handled = this.treeOutline.onenter(this.selectedTreeElement);
	} else if (event.keyIdentifier === "U+0020" /* Space */) {
	if (this.selectedTreeElement.onspace)
	handled = this.selectedTreeElement.onspace();
	if (!handled && this.treeOutline.onspace)
	handled = this.treeOutline.onspace(this.selectedTreeElement);
	}

	if (nextSelectedElement) {
	nextSelectedElement.reveal();
	nextSelectedElement.select(false, true);
	}

	if (handled) {
	event.preventDefault();
	event.stopPropagation();
	}
	}

	expand()
	{
	// this is the root, do nothing
	}

	collapse()
	{
	// this is the root, do nothing
	}

	revealed()
	{
	return true;
	}

	reveal()
	{
	// this is the root, do nothing
	}

	select()
	{
	// this is the root, do nothing
	}

	revealAndSelect(omitFocus)
	{
	// this is the root, do nothing
	}

	get selectedTreeElementIndex()
	{
	if (!this.hasChildren \|\| !this.selectedTreeElement)
	return;

	for (var i = 0; i < this.children.length; ++i) {
	if (this.children[i] === this.selectedTreeElement)
	return i;
	}

	return false;
	}

	// Protected

	treeElementFromEvent(event)
	{
	let scrollContainer = this.element.parentElement;

	// We choose this X coordinate based on the knowledge that our list
	// items extend at least to the right edge of the outer <ol> container.
	// In the no-word-wrap mode the outer <ol> may be wider than the tree container
	// (and partially hidden), in which case we are left to use only its right boundary.
	let x = scrollContainer.totalOffsetLeft + scrollContainer.offsetWidth - 36;
	let y = event.pageY;

	// Our list items have 1-pixel cracks between them vertically. We avoid
	// the cracks by checking slightly above and slightly below the mouse
	// and seeing if we hit the same element each time.
	let elementUnderMouse = this.treeElementFromPoint(x, y);
	let elementAboveMouse = this.treeElementFromPoint(x, y - 2);
	let element = null;
	if (elementUnderMouse === elementAboveMouse)
	element = elementUnderMouse;
	else
	element = this.treeElementFromPoint(x, y + 2);

	return element;
	}

	populateContextMenu(contextMenu, event, treeElement)
	{
	treeElement.populateContextMenu(contextMenu, event);
	}

	// Private

	static _generateStyleRulesIfNeeded()
	{
	if (WebInspector.TreeOutline._styleElement)
	return;

	WebInspector.TreeOutline._styleElement = document.createElement("style");

	let maximumTreeDepth = 32;
	let baseLeftPadding = 5; // Matches the padding in TreeOutline.css for the item class. Keep in sync.
	let depthPadding = 10;

	let styleText = "";
	let childrenSubstring = "";
	for (let i = 1; i <= maximumTreeDepth; ++i) {
	// Keep all the elements at the same depth once the maximum is reached.
	childrenSubstring += i === maximumTreeDepth ? " .children" : " > .children";
	styleText += `.${WebInspector.TreeOutline.ElementStyleClassName}:not(.${WebInspector.TreeOutline.CustomIndentStyleClassName})${childrenSubstring} > .item { `;

	if (WebInspector.resolvedLayoutDirection() === WebInspector.LayoutDirection.RTL)
	styleText += "padding-right: ";
	else
	styleText += "padding-left: ";

	styleText += (baseLeftPadding + (depthPadding * i)) + "px; }\n";
	}

	WebInspector.TreeOutline._styleElement.textContent = styleText;

	document.head.appendChild(WebInspector.TreeOutline._styleElement);
	}

	_handleContextmenu(event)
	{
	let treeElement = this.treeElementFromEvent(event);
	if (!treeElement)
	return;

	let contextMenu = WebInspector.ContextMenu.createFromEvent(event);
	this.populateContextMenu(contextMenu, event, treeElement);
	}
	};

	WebInspector.TreeOutline._styleElement = null;

	WebInspector.TreeOutline.ElementStyleClassName = "tree-outline";
	WebInspector.TreeOutline.CustomIndentStyleClassName = "custom-indent";

	WebInspector.TreeOutline.Event = {
	ElementAdded: Symbol("element-added"),
	ElementDidChange: Symbol("element-did-change"),
	ElementRemoved: Symbol("element-removed"),
	ElementDisclosureDidChanged: Symbol("element-disclosure-did-change"),
	ElementVisibilityDidChange: Symbol("element-visbility-did-change"),
	SelectionDidChange: Symbol("selection-did-change")
	};

	WebInspector.TreeOutline._knownTreeElementNextIdentifier = 1;