DevTools: namespace globals

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

 /*
  * Copyright (C) 2007 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
@@ skipping 11 matching lines @@
  * (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.
  */
 
 /**
  * @unrestricted
  */
-var TreeOutline = class extends Common.Object {
+UI.TreeOutline = class extends Common.Object {
   /**
    * @param {boolean=} nonFocusable
    */
   constructor(nonFocusable) {
     super();
     this._createRootElement();
 
     this.selectedTreeElement = null;
     this.expandTreeElementsWhenArrowing = false;
-    /** @type {?function(!TreeElement, !TreeElement):number} */
+    /** @type {?function(!UI.TreeElement, !UI.TreeElement):number} */
     this._comparator = null;
 
     this.contentElement = this._rootElement._childrenListNode;
     this.contentElement.addEventListener('keydown', this._treeKeyDown.bind(this), true);
     this.contentElement.addEventListener('focus', setFocused.bind(this, true), false);
     this.contentElement.addEventListener('blur', setFocused.bind(this, false), false);
 
     this.setFocusable(!nonFocusable);
 
     this.element = this.contentElement;
 
     /**
      * @param {boolean} isFocused
-     * @this {TreeOutline}
+     * @this {UI.TreeOutline}
      */
     function setFocused(isFocused) {
       this._focused = isFocused;
       if (this.selectedTreeElement)
         this.selectedTreeElement._setFocused(this._focused);
     }
   }
 
   _createRootElement() {
-    this._rootElement = new TreeElement();
+    this._rootElement = new UI.TreeElement();
     this._rootElement.treeOutline = this;
     this._rootElement.root = true;
     this._rootElement.selectable = false;
     this._rootElement.expanded = true;
     this._rootElement._childrenListNode.classList.remove('children');
   }
 
   /**
-   * @return {!TreeElement}
+   * @return {!UI.TreeElement}
    */
   rootElement() {
     return this._rootElement;
   }
 
   /**
-   * @return {?TreeElement}
+   * @return {?UI.TreeElement}
    */
   firstChild() {
     return this._rootElement.firstChild();
   }
 
   /**
-   * @param {!TreeElement} child
+   * @param {!UI.TreeElement} child
    */
   appendChild(child) {
     this._rootElement.appendChild(child);
   }
 
   /**
-   * @param {!TreeElement} child
+   * @param {!UI.TreeElement} child
    * @param {number} index
    */
   insertChild(child, index) {
     this._rootElement.insertChild(child, index);
   }
 
   /**
-   * @param {!TreeElement} child
+   * @param {!UI.TreeElement} child
    */
   removeChild(child) {
     this._rootElement.removeChild(child);
   }
 
   removeChildren() {
     this._rootElement.removeChildren();
   }
 
   /**
    * @param {number} x
    * @param {number} y
-   * @return {?TreeElement}
+   * @return {?UI.TreeElement}
    */
   treeElementFromPoint(x, y) {
     var node = this.contentElement.ownerDocument.deepElementFromPoint(x, y);
     if (!node)
       return null;
 
     var listNode = node.enclosingNodeOrSelfWithNodeNameInArray(['ol', 'li']);
     if (listNode)
       return listNode.parentTreeElement || listNode.treeElement;
     return null;
   }
 
   /**
    * @param {?Event} event
-   * @return {?TreeElement}
+   * @return {?UI.TreeElement}
    */
   treeElementFromEvent(event) {
     return event ? this.treeElementFromPoint(event.pageX, event.pageY) : null;
   }
 
   /**
-   * @param {?function(!TreeElement, !TreeElement):number} comparator
+   * @param {?function(!UI.TreeElement, !UI.TreeElement):number} comparator
    */
   setComparator(comparator) {
     this._comparator = comparator;
   }
 
   /**
    * @param {boolean} focusable
    */
   setFocusable(focusable) {
     if (focusable)
       this.contentElement.setAttribute('tabIndex', 0);
     else
       this.contentElement.removeAttribute('tabIndex');
   }
 
   focus() {
     this.contentElement.focus();
   }
 
   /**
-   * @param {!TreeElement} element
+   * @param {!UI.TreeElement} element
    */
   _bindTreeElement(element) {
     if (element.treeOutline)
       console.error('Binding element for the second time: ' + new Error().stack);
     element.treeOutline = this;
     element.onbind();
   }
 
   /**
-   * @param {!TreeElement} element
+   * @param {!UI.TreeElement} element
    */
   _unbindTreeElement(element) {
     if (!element.treeOutline)
       console.error('Unbinding element that was not bound: ' + new Error().stack);
 
     element.deselect();
     element.onunbind();
     element.treeOutline = null;
   }
 
@@ skipping 57 matching lines @@
       handled = this.selectedTreeElement.onenter();
     } else if (event.keyCode === UI.KeyboardShortcut.Keys.Space.code) {
       handled = this.selectedTreeElement.onspace();
     }
 
     if (handled)
       event.consume(true);
   }
 
   /**
-   * @param {!TreeElement} treeElement
+   * @param {!UI.TreeElement} treeElement
    * @param {boolean} center
    */
   _deferredScrollIntoView(treeElement, center) {
     if (!this._treeElementToScrollIntoView)
       this.element.window().requestAnimationFrame(deferredScrollIntoView.bind(this));
     this._treeElementToScrollIntoView = treeElement;
     this._centerUponScrollIntoView = center;
     /**
-     * @this {TreeOutline}
+     * @this {UI.TreeOutline}
      */
     function deferredScrollIntoView() {
       this._treeElementToScrollIntoView.listItemElement.scrollIntoViewIfNeeded(this._centerUponScrollIntoView);
       delete this._treeElementToScrollIntoView;
       delete this._centerUponScrollIntoView;
     }
   }
 };
 
 /** @enum {symbol} */
-TreeOutline.Events = {
+UI.TreeOutline.Events = {
   ElementAttached: Symbol('ElementAttached'),
   ElementExpanded: Symbol('ElementExpanded'),
   ElementCollapsed: Symbol('ElementCollapsed'),
   ElementSelected: Symbol('ElementSelected')
 };
 
 /**
  * @unrestricted
  */
-var TreeOutlineInShadow = class extends TreeOutline {
+UI.TreeOutlineInShadow = class extends UI.TreeOutline {
   constructor() {
     super();
     this.contentElement.classList.add('tree-outline');
 
     // Redefine element to the external one.
     this.element = createElement('div');
     this._shadowRoot = UI.createShadowRootWithCoreStyles(this.element, 'ui/treeoutline.css');
     this._disclosureElement = this._shadowRoot.createChild('div', 'tree-outline-disclosure');
     this._disclosureElement.appendChild(this.contentElement);
     this._renderSelection = true;
@@ skipping 11 matching lines @@
   }
 
   makeDense() {
     this.contentElement.classList.add('tree-outline-dense');
   }
 };
 
 /**
  * @unrestricted
  */
-var TreeElement = class {
+UI.TreeElement = class {
   /**
    * @param {(string|!Node)=} title
    * @param {boolean=} expandable
    */
   constructor(title, expandable) {
-    /** @type {?TreeOutline} */
+    /** @type {?UI.TreeOutline} */
     this.treeOutline = null;
     this.parent = null;
     this.previousSibling = null;
     this.nextSibling = null;
 
     this._listItemNode = createElement('li');
     this._titleElement = this._listItemNode.createChild('span', 'tree-element-title');
     this._listItemNode.treeElement = this;
     if (title)
       this.title = title;
     this._listItemNode.addEventListener('mousedown', this._handleMouseDown.bind(this), false);
     this._listItemNode.addEventListener('click', this._treeElementToggled.bind(this), false);
     this._listItemNode.addEventListener('dblclick', this._handleDoubleClick.bind(this), false);
 
     this._childrenListNode = createElement('ol');
     this._childrenListNode.parentTreeElement = this;
     this._childrenListNode.classList.add('children');
 
     this._hidden = false;
     this._selectable = true;
     this.expanded = false;
     this.selected = false;
     this.setExpandable(expandable || false);
     this._collapsible = true;
   }
 
   /**
-   * @param {?TreeElement} ancestor
+   * @param {?UI.TreeElement} ancestor
    * @return {boolean}
    */
   hasAncestor(ancestor) {
     if (!ancestor)
       return false;
 
     var currentNode = this.parent;
     while (currentNode) {
       if (ancestor === currentNode)
         return true;
       currentNode = currentNode.parent;
     }
 
     return false;
   }
 
   /**
-   * @param {?TreeElement} ancestor
+   * @param {?UI.TreeElement} ancestor
    * @return {boolean}
    */
   hasAncestorOrSelf(ancestor) {
     return this === ancestor || this.hasAncestor(ancestor);
   }
 
   /**
-   * @return {!Array.<!TreeElement>}
+   * @return {!Array.<!UI.TreeElement>}
    */
   children() {
     return this._children || [];
   }
 
   /**
    * @return {number}
    */
   childCount() {
     return this._children ? this._children.length : 0;
   }
 
   /**
-   * @return {?TreeElement}
+   * @return {?UI.TreeElement}
    */
   firstChild() {
     return this._children ? this._children[0] : null;
   }
 
   /**
-   * @return {?TreeElement}
+   * @return {?UI.TreeElement}
    */
   lastChild() {
     return this._children ? this._children[this._children.length - 1] : null;
   }
 
   /**
    * @param {number} index
-   * @return {?TreeElement}
+   * @return {?UI.TreeElement}
    */
   childAt(index) {
     return this._children ? this._children[index] : null;
   }
 
   /**
-   * @param {!TreeElement} child
+   * @param {!UI.TreeElement} child
    * @return {number}
    */
   indexOfChild(child) {
     return this._children ? this._children.indexOf(child) : -1;
   }
 
   /**
-   * @param {!TreeElement} child
+   * @param {!UI.TreeElement} child
    */
   appendChild(child) {
     if (!this._children)
       this._children = [];
 
     var insertionIndex;
     if (this.treeOutline && this.treeOutline._comparator)
       insertionIndex = this._children.lowerBound(child, this.treeOutline._comparator);
     else
       insertionIndex = this._children.length;
     this.insertChild(child, insertionIndex);
   }
 
   /**
-   * @param {!TreeElement} child
+   * @param {!UI.TreeElement} child
    * @param {number} index
    */
   insertChild(child, index) {
     if (!this._children)
       this._children = [];
 
     if (!child)
       throw 'child can\'t be undefined or null';
 
     console.assert(
@@ skipping 21 matching lines @@
     child.parent = this;
 
     if (this.treeOutline)
       this.treeOutline._bindTreeElement(child);
     for (var current = child.firstChild(); this.treeOutline && current;
          current = current.traverseNextTreeElement(false, child, true))
       this.treeOutline._bindTreeElement(current);
     child.onattach();
     child._ensureSelection();
     if (this.treeOutline)
-      this.treeOutline.dispatchEventToListeners(TreeOutline.Events.ElementAttached, child);
+      this.treeOutline.dispatchEventToListeners(UI.TreeOutline.Events.ElementAttached, child);
     var nextSibling = child.nextSibling ? child.nextSibling._listItemNode : null;
     this._childrenListNode.insertBefore(child._listItemNode, nextSibling);
     this._childrenListNode.insertBefore(child._childrenListNode, nextSibling);
     if (child.selected)
       child.select();
     if (child.expanded)
       child.expand();
   }
 
   /**
@@ skipping 26 matching lines @@
     if (this.treeOutline)
       this.treeOutline._unbindTreeElement(child);
     for (var current = child.firstChild(); this.treeOutline && current;
          current = current.traverseNextTreeElement(false, child, true))
       this.treeOutline._unbindTreeElement(current);
 
     child._detach();
   }
 
   /**
-   * @param {!TreeElement} child
+   * @param {!UI.TreeElement} child
    */
   removeChild(child) {
     if (!child)
       throw 'child can\'t be undefined or null';
     if (child.parent !== this)
       return;
 
     var childIndex = this._children.indexOf(child);
     if (childIndex === -1)
       throw 'child not found in this node\'s children';
@@ skipping 297 matching lines @@
   }
 
   collapse() {
     if (!this.expanded || !this._collapsible)
       return;
     this._listItemNode.classList.remove('expanded');
     this._childrenListNode.classList.remove('expanded');
     this.expanded = false;
     this.oncollapse();
     if (this.treeOutline)
-      this.treeOutline.dispatchEventToListeners(TreeOutline.Events.ElementCollapsed, this);
+      this.treeOutline.dispatchEventToListeners(UI.TreeOutline.Events.ElementCollapsed, this);
   }
 
   collapseRecursively() {
     var item = this;
     while (item) {
       if (item.expanded)
         item.collapse();
       item = item.traverseNextTreeElement(false, this, true);
     }
   }
 
   expand() {
     if (!this._expandable || (this.expanded && this._children))
       return;
 
     // Set this before onpopulate. Since onpopulate can add elements, this makes
     // sure the expanded flag is true before calling those functions. This prevents the possibility
     // of an infinite loop if onpopulate were to call expand.
 
     this.expanded = true;
 
     this._populateIfNeeded();
     this._listItemNode.classList.add('expanded');
     this._childrenListNode.classList.add('expanded');
 
     if (this.treeOutline) {
       this.onexpand();
-      this.treeOutline.dispatchEventToListeners(TreeOutline.Events.ElementExpanded, this);
+      this.treeOutline.dispatchEventToListeners(UI.TreeOutline.Events.ElementExpanded, this);
     }
   }
 
   /**
    * @param {number=} maxDepth
    */
   expandRecursively(maxDepth) {
     var item = this;
     var info = {};
     var depth = 0;
@@ skipping 128 matching lines @@
 
     if (!omitFocus)
       this.treeOutline.focus();
 
     // Focusing on another node may detach "this" from tree.
     if (!this.treeOutline)
       return false;
     this.treeOutline.selectedTreeElement = this;
     this._listItemNode.classList.add('selected');
     this._setFocused(this.treeOutline._focused);
-    this.treeOutline.dispatchEventToListeners(TreeOutline.Events.ElementSelected, this);
+    this.treeOutline.dispatchEventToListeners(UI.TreeOutline.Events.ElementSelected, this);
     return this.onselect(selectedByUser);
   }
 
   /**
    * @param {boolean=} omitFocus
    */
   revealAndSelect(omitFocus) {
     this.reveal(true);
     this.select(omitFocus);
   }
@@ skipping 69 matching lines @@
   /**
    * @param {boolean=} selectedByUser
    * @return {boolean}
    */
   onselect(selectedByUser) {
     return false;
   }
 
   /**
    * @param {boolean} skipUnrevealed
-   * @param {?TreeElement=} stayWithin
+   * @param {?UI.TreeElement=} stayWithin
    * @param {boolean=} dontPopulate
    * @param {!Object=} info
-   * @return {?TreeElement}
+   * @return {?UI.TreeElement}
    */
   traverseNextTreeElement(skipUnrevealed, stayWithin, dontPopulate, info) {
     if (!dontPopulate)
       this._populateIfNeeded();
 
     if (info)
       info.depthChange = 0;
 
     var element = skipUnrevealed ? (this.revealed() ? this.firstChild() : null) : this.firstChild();
     if (element && (!skipUnrevealed || (skipUnrevealed && this.expanded))) {
@@ skipping 20 matching lines @@
 
     if (!element || element.root)
       return null;
 
     return (skipUnrevealed ? (element.revealed() ? element.nextSibling : null) : element.nextSibling);
   }
 
   /**
    * @param {boolean} skipUnrevealed
    * @param {boolean=} dontPopulate
-   * @return {?TreeElement}
+   * @return {?UI.TreeElement}
    */
   traversePreviousTreeElement(skipUnrevealed, dontPopulate) {
     var element = skipUnrevealed ? (this.revealed() ? this.previousSibling : null) : this.previousSibling;
     if (!dontPopulate && element)
       element._populateIfNeeded();
 
     while (element && (skipUnrevealed ? (element.revealed() && element.expanded ? element.lastChild() : null) :
                                         element.lastChild())) {
       if (!dontPopulate)
         element._populateIfNeeded();
@@ skipping 13 matching lines @@
 
   /**
    * @return {boolean}
    */
   isEventWithinDisclosureTriangle(event) {
     // FIXME: We should not use getComputedStyle(). For that we need to get rid of using ::before for disclosure triangle. (http://webk.it/74446)
     var paddingLeftValue = window.getComputedStyle(this._listItemNode).paddingLeft;
     console.assert(paddingLeftValue.endsWith('px'));
     var computedLeftPadding = parseFloat(paddingLeftValue);
     var left = this._listItemNode.totalOffsetLeft() + computedLeftPadding;
-    return event.pageX >= left && event.pageX <= left + TreeElement._ArrowToggleWidth && this._expandable;
+    return event.pageX >= left && event.pageX <= left + UI.TreeElement._ArrowToggleWidth && this._expandable;
   }
 };
 
 /** @const */
-TreeElement._ArrowToggleWidth = 10;
+UI.TreeElement._ArrowToggleWidth = 10;