DevTools: extract ObjectUI module from Components

third_party/WebKit/Source/devtools/front_end/object_ui/ObjectPropertiesSection.js

 /*
  * Copyright (C) 2008 Apple Inc. All Rights Reserved.
  * Copyright (C) 2009 Joseph Pecoraro
  *
  * 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.
  *
  * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``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 INC. OR
  * 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.
  */
 
 /**
  * @unrestricted
  */
-Components.ObjectPropertiesSection = class extends UI.TreeOutlineInShadow {
+ObjectUI.ObjectPropertiesSection = class extends UI.TreeOutlineInShadow {
   /**
    * @param {!SDK.RemoteObject} object
    * @param {?string|!Element=} title
    * @param {!Components.Linkifier=} linkifier
    * @param {?string=} emptyPlaceholder
    * @param {boolean=} ignoreHasOwnProperty
    * @param {!Array.<!SDK.RemoteObjectProperty>=} extraProperties
    */
   constructor(object, title, linkifier, emptyPlaceholder, ignoreHasOwnProperty, extraProperties) {
     super();
     this._object = object;
     this._editable = true;
     this.hideOverflow();
     this.setFocusable(false);
-    this._objectTreeElement = new Components.ObjectPropertiesSection.RootElement(
+    this._objectTreeElement = new ObjectUI.ObjectPropertiesSection.RootElement(
         object, linkifier, emptyPlaceholder, ignoreHasOwnProperty, extraProperties);
     this.appendChild(this._objectTreeElement);
     if (typeof title === 'string' || !title) {
       this.titleElement = this.element.createChild('span');
       this.titleElement.textContent = title || '';
     } else {
       this.titleElement = title;
       this.element.appendChild(title);
     }
 
     this.element._section = this;
-    this.registerRequiredCSS('components/objectValue.css');
-    this.registerRequiredCSS('components/objectPropertiesSection.css');
+    this.registerRequiredCSS('object_ui/objectValue.css');
+    this.registerRequiredCSS('object_ui/objectPropertiesSection.css');
     this.rootElement().childrenListElement.classList.add('source-code', 'object-properties-section');
   }
 
   /**
    * @param {!SDK.RemoteObject} object
    * @param {!Components.Linkifier=} linkifier
    * @param {boolean=} skipProto
    * @return {!Element}
    */
   static defaultObjectPresentation(object, linkifier, skipProto) {
     var componentRoot = createElementWithClass('span', 'source-code');
-    var shadowRoot = UI.createShadowRootWithCoreStyles(componentRoot, 'components/objectValue.css');
+    var shadowRoot = UI.createShadowRootWithCoreStyles(componentRoot, 'object_ui/objectValue.css');
     shadowRoot.appendChild(
-        Components.ObjectPropertiesSection.createValueElement(object, false /* wasThrown */, true /* showPreview */));
+        ObjectUI.ObjectPropertiesSection.createValueElement(object, false /* wasThrown */, true /* showPreview */));
     if (!object.hasChildren)
       return componentRoot;
 
-    var objectPropertiesSection = new Components.ObjectPropertiesSection(object, componentRoot, linkifier);
+    var objectPropertiesSection = new ObjectUI.ObjectPropertiesSection(object, componentRoot, linkifier);
     objectPropertiesSection.editable = false;
     if (skipProto)
       objectPropertiesSection.skipProto();
 
     return objectPropertiesSection.element;
   }
 
   /**
    * @param {!SDK.RemoteObjectProperty} propertyA
    * @param {!SDK.RemoteObjectProperty} propertyB
@@ skipping 123 matching lines @@
   /**
    * @param {!SDK.RemoteObject} value
    * @param {boolean} wasThrown
    * @param {boolean} showPreview
    * @param {!Element=} parentElement
    * @param {!Components.Linkifier=} linkifier
    * @return {!Element}
    */
   static createValueElementWithCustomSupport(value, wasThrown, showPreview, parentElement, linkifier) {
     if (value.customPreview()) {
-      var result = (new Components.CustomPreviewComponent(value)).element;
+      var result = (new ObjectUI.CustomPreviewComponent(value)).element;
       result.classList.add('object-properties-section-custom-section');
       return result;
     }
-    return Components.ObjectPropertiesSection.createValueElement(
-        value, wasThrown, showPreview, parentElement, linkifier);
+    return ObjectUI.ObjectPropertiesSection.createValueElement(value, wasThrown, showPreview, parentElement, linkifier);
   }
 
   /**
    * @param {!SDK.RemoteObject} value
    * @param {boolean} wasThrown
    * @param {boolean} showPreview
    * @param {!Element=} parentElement
    * @param {!Components.Linkifier=} linkifier
    * @return {!Element}
    */
   static createValueElement(value, wasThrown, showPreview, parentElement, linkifier) {
     var valueElement;
     var type = value.type;
     var subtype = value.subtype;
     var description = value.description;
     if (type === 'object' && subtype === 'internal#location') {
       var rawLocation = value.debuggerModel().createRawLocationByScriptId(
           value.value.scriptId, value.value.lineNumber, value.value.columnNumber);
       if (rawLocation && linkifier)
         return linkifier.linkifyRawLocation(rawLocation, '');
       valueElement = createUnknownInternalLocationElement();
     } else if (type === 'string' && typeof description === 'string') {
       valueElement = createStringElement();
     } else if (type === 'function') {
-      valueElement = Components.ObjectPropertiesSection.valueElementForFunctionDescription(description);
+      valueElement = ObjectUI.ObjectPropertiesSection.valueElementForFunctionDescription(description);
     } else if (type === 'object' && subtype === 'node' && description) {
       valueElement = createNodeElement();
     } else if (type === 'number' && description && description.indexOf('e') !== -1) {
       valueElement = createNumberWithExponentElement();
       if (parentElement)  // FIXME: do it in the caller.
         parentElement.classList.add('hbox');
     } else {
       valueElement = createElementWithClass('span', 'object-value-' + (subtype || type));
       valueElement.title = description || '';
       if (Runtime.experiments.isEnabled('objectPreviews') && value.preview && showPreview) {
-        var previewFormatter = new Components.RemoteObjectPreviewFormatter();
+        var previewFormatter = new ObjectUI.RemoteObjectPreviewFormatter();
         previewFormatter.appendObjectPreview(valueElement, value.preview, false /* isEntry */);
       } else {
         valueElement.setTextContentTruncatedIfNeeded(description);
       }
     }
 
     if (wasThrown) {
       var wrapperElement = createElementWithClass('span', 'error value');
       wrapperElement.createTextChild('[' + Common.UIString('Exception') + ': ');
       wrapperElement.appendChild(valueElement);
@@ skipping 69 matching lines @@
     function didGetDetails(response) {
       if (linkify && response && response.location) {
         element.classList.add('linkified');
         element.addEventListener('click', () => Common.Revealer.reveal(response.location));
       }
 
       // The includePreview flag is false for formats such as console.dir().
       var defaultName = includePreview ? '' : 'anonymous';
       if (response && response.functionName)
         defaultName = response.functionName;
-      var valueElement = Components.ObjectPropertiesSection.valueElementForFunctionDescription(
+      var valueElement = ObjectUI.ObjectPropertiesSection.valueElementForFunctionDescription(
           func.description, includePreview, defaultName);
       element.appendChild(valueElement);
     }
   }
 
   skipProto() {
     this._skipProto = true;
   }
 
   expand() {
@@ skipping 25 matching lines @@
   }
 
   titleLessMode() {
     this._objectTreeElement.listItemElement.classList.add('hidden');
     this._objectTreeElement.childrenListElement.classList.add('title-less-mode');
     this._objectTreeElement.expand();
   }
 };
 
 /** @const */
-Components.ObjectPropertiesSection._arrayLoadThreshold = 100;
+ObjectUI.ObjectPropertiesSection._arrayLoadThreshold = 100;
 
 
 /**
  * @unrestricted
  */
-Components.ObjectPropertiesSection.RootElement = class extends UI.TreeElement {
+ObjectUI.ObjectPropertiesSection.RootElement = class extends UI.TreeElement {
   /**
    * @param {!SDK.RemoteObject} object
    * @param {!Components.Linkifier=} linkifier
    * @param {?string=} emptyPlaceholder
    * @param {boolean=} ignoreHasOwnProperty
    * @param {!Array.<!SDK.RemoteObjectProperty>=} extraProperties
    */
   constructor(object, linkifier, emptyPlaceholder, ignoreHasOwnProperty, extraProperties) {
     var contentElement = createElement('content');
     super(contentElement);
@@ skipping 32 matching lines @@
    * @return {boolean}
    */
   ondblclick(e) {
     return true;
   }
 
   /**
    * @override
    */
   onpopulate() {
-    Components.ObjectPropertyTreeElement._populate(
+    ObjectUI.ObjectPropertyTreeElement._populate(
         this, this._object, !!this.treeOutline._skipProto, this._linkifier, this._emptyPlaceholder,
         this._ignoreHasOwnProperty, this._extraProperties);
   }
 };
 
 /**
  * @unrestricted
  */
-Components.ObjectPropertyTreeElement = class extends UI.TreeElement {
+ObjectUI.ObjectPropertyTreeElement = class extends UI.TreeElement {
   /**
    * @param {!SDK.RemoteObjectProperty} property
    * @param {!Components.Linkifier=} linkifier
    */
   constructor(property, linkifier) {
     // Pass an empty title, the title gets made later in onattach.
     super();
 
     this.property = property;
     this.toggleOnClick = true;
@@ skipping 15 matching lines @@
    */
   static _populate(
       treeElement,
       value,
       skipProto,
       linkifier,
       emptyPlaceholder,
       flattenProtoChain,
       extraProperties,
       targetValue) {
-    if (value.arrayLength() > Components.ObjectPropertiesSection._arrayLoadThreshold) {
+    if (value.arrayLength() > ObjectUI.ObjectPropertiesSection._arrayLoadThreshold) {
       treeElement.removeChildren();
-      Components.ArrayGroupingTreeElement._populateArray(treeElement, value, 0, value.arrayLength() - 1, linkifier);
+      ObjectUI.ArrayGroupingTreeElement._populateArray(treeElement, value, 0, value.arrayLength() - 1, linkifier);
       return;
     }
 
     /**
      * @param {?Array.<!SDK.RemoteObjectProperty>} properties
      * @param {?Array.<!SDK.RemoteObjectProperty>} internalProperties
      */
     function callback(properties, internalProperties) {
       treeElement.removeChildren();
       if (!properties)
         return;
 
       extraProperties = extraProperties || [];
       for (var i = 0; i < extraProperties.length; ++i)
         properties.push(extraProperties[i]);
 
-      Components.ObjectPropertyTreeElement.populateWithProperties(
+      ObjectUI.ObjectPropertyTreeElement.populateWithProperties(
           treeElement, properties, internalProperties, skipProto, targetValue || value, linkifier, emptyPlaceholder);
     }
 
     var generatePreview = Runtime.experiments.isEnabled('objectPreviews');
     if (flattenProtoChain)
       value.getAllProperties(false, generatePreview, callback);
     else
       SDK.RemoteObject.loadFromObjectPerProto(value, generatePreview, callback);
   }
 
   /**
    * @param {!UI.TreeElement} treeNode
    * @param {!Array.<!SDK.RemoteObjectProperty>} properties
    * @param {?Array.<!SDK.RemoteObjectProperty>} internalProperties
    * @param {boolean} skipProto
    * @param {?SDK.RemoteObject} value
    * @param {!Components.Linkifier=} linkifier
    * @param {?string=} emptyPlaceholder
    */
   static populateWithProperties(
       treeNode,
       properties,
       internalProperties,
       skipProto,
       value,
       linkifier,
       emptyPlaceholder) {
-    properties.sort(Components.ObjectPropertiesSection.CompareProperties);
+    properties.sort(ObjectUI.ObjectPropertiesSection.CompareProperties);
 
     var tailProperties = [];
     var protoProperty = null;
     for (var i = 0; i < properties.length; ++i) {
       var property = properties[i];
       property.parentObject = value;
       if (property.name === '__proto__' && !property.isAccessorProperty()) {
         protoProperty = property;
         continue;
       }
 
       if (property.isOwn && property.getter) {
         var getterProperty = new SDK.RemoteObjectProperty('get ' + property.name, property.getter, false);
         getterProperty.parentObject = value;
         tailProperties.push(getterProperty);
       }
       if (property.isOwn && property.setter) {
         var setterProperty = new SDK.RemoteObjectProperty('set ' + property.name, property.setter, false);
         setterProperty.parentObject = value;
         tailProperties.push(setterProperty);
       }
       var canShowProperty = property.getter || !property.isAccessorProperty();
       if (canShowProperty && property.name !== '__proto__')
-        treeNode.appendChild(new Components.ObjectPropertyTreeElement(property, linkifier));
+        treeNode.appendChild(new ObjectUI.ObjectPropertyTreeElement(property, linkifier));
     }
     for (var i = 0; i < tailProperties.length; ++i)
-      treeNode.appendChild(new Components.ObjectPropertyTreeElement(tailProperties[i], linkifier));
+      treeNode.appendChild(new ObjectUI.ObjectPropertyTreeElement(tailProperties[i], linkifier));
     if (!skipProto && protoProperty)
-      treeNode.appendChild(new Components.ObjectPropertyTreeElement(protoProperty, linkifier));
+      treeNode.appendChild(new ObjectUI.ObjectPropertyTreeElement(protoProperty, linkifier));
 
     if (internalProperties) {
       for (var i = 0; i < internalProperties.length; i++) {
         internalProperties[i].parentObject = value;
-        var treeElement = new Components.ObjectPropertyTreeElement(internalProperties[i], linkifier);
+        var treeElement = new ObjectUI.ObjectPropertyTreeElement(internalProperties[i], linkifier);
         if (internalProperties[i].name === '[[Entries]]') {
           treeElement.setExpandable(true);
           treeElement.expand();
         }
         treeNode.appendChild(treeElement);
       }
     }
 
-    Components.ObjectPropertyTreeElement._appendEmptyPlaceholderIfNeeded(treeNode, emptyPlaceholder);
+    ObjectUI.ObjectPropertyTreeElement._appendEmptyPlaceholderIfNeeded(treeNode, emptyPlaceholder);
   }
 
   /**
    * @param {!UI.TreeElement} treeNode
    * @param {?string=} emptyPlaceholder
    */
   static _appendEmptyPlaceholderIfNeeded(treeNode, emptyPlaceholder) {
     if (treeNode.childCount())
       return;
     var title = createElementWithClass('div', 'gray-info-message');
@@ skipping 69 matching lines @@
   }
 
   /**
    * @override
    */
   onpopulate() {
     var propertyValue = /** @type {!SDK.RemoteObject} */ (this.property.value);
     console.assert(propertyValue);
     var skipProto = this.treeOutline ? this.treeOutline._skipProto : true;
     var targetValue = this.property.name !== '__proto__' ? propertyValue : this.property.parentObject;
-    Components.ObjectPropertyTreeElement._populate(
+    ObjectUI.ObjectPropertyTreeElement._populate(
         this, propertyValue, skipProto, this._linkifier, undefined, undefined, undefined, targetValue);
   }
 
   /**
    * @override
    * @return {boolean}
    */
   ondblclick(event) {
     var inEditableElement = event.target.isSelfOrDescendant(this.valueElement) ||
         (this.expandedValueElement && event.target.isSelfOrDescendant(this.expandedValueElement));
@@ skipping 47 matching lines @@
       return null;
 
     var valueElement = createElementWithClass('span', 'value');
     valueElement.setTextContentTruncatedIfNeeded(value.description || '');
     valueElement.classList.add('object-value-' + (value.subtype || value.type));
     valueElement.title = value.description || '';
     return valueElement;
   }
 
   update() {
-    this.nameElement = Components.ObjectPropertiesSection.createNameElement(this.property.name);
+    this.nameElement = ObjectUI.ObjectPropertiesSection.createNameElement(this.property.name);
     if (!this.property.enumerable)
       this.nameElement.classList.add('object-properties-section-dimmed');
     if (this.property.synthetic)
       this.nameElement.classList.add('synthetic-property');
 
     this._updatePropertyPath();
     this.nameElement.addEventListener('contextmenu', this._contextMenuFired.bind(this, this.property), false);
 
     var separatorElement = createElementWithClass('span', 'object-properties-section-separator');
     separatorElement.textContent = ': ';
 
     if (this.property.value) {
       var showPreview = this.property.name !== '__proto__';
-      this.valueElement = Components.ObjectPropertiesSection.createValueElementWithCustomSupport(
+      this.valueElement = ObjectUI.ObjectPropertiesSection.createValueElementWithCustomSupport(
           this.property.value, this.property.wasThrown, showPreview, this.listItemElement, this._linkifier);
       this.valueElement.addEventListener('contextmenu', this._contextMenuFired.bind(this, this.property), false);
     } else if (this.property.getter) {
-      this.valueElement = Components.ObjectPropertyTreeElement.createRemoteObjectAccessorPropertySpan(
+      this.valueElement = ObjectUI.ObjectPropertyTreeElement.createRemoteObjectAccessorPropertySpan(
           this.property.parentObject, [this.property.name], this._onInvokeGetterClick.bind(this));
     } else {
       this.valueElement = createElementWithClass('span', 'object-value-undefined');
       this.valueElement.textContent = Common.UIString('<unreadable>');
       this.valueElement.title = Common.UIString('No property getter');
     }
 
     var valueText = this.valueElement.textContent;
     if (this.property.value && valueText && !this.property.wasThrown)
       this.expandedValueElement = this._createExpandedValueElement(this.property.value);
@@ skipping 46 matching lines @@
       text = '"' + text + '"';
 
     this._editableDiv.setTextContentTruncatedIfNeeded(text, Common.UIString('<string is too large to edit>'));
     var originalContent = this._editableDiv.textContent;
 
     // Lie about our children to prevent expanding on double click and to collapse subproperties.
     this.setExpandable(false);
     this.listItemElement.classList.add('editing-sub-part');
     this.valueElement.classList.add('hidden');
 
-    this._prompt = new Components.ObjectPropertyPrompt();
+    this._prompt = new ObjectUI.ObjectPropertyPrompt();
 
     var proxyElement =
         this._prompt.attachAndStartEditing(this._editableDiv, this._editingCommitted.bind(this, originalContent));
     this.listItemElement.getComponentSelection().selectAllChildren(this._editableDiv);
     proxyElement.addEventListener('keydown', this._promptKeyDown.bind(this, originalContent), false);
   }
 
   _editingEnded() {
     this._prompt.detach();
     delete this._prompt;
@@ skipping 45 matching lines @@
   _applyExpression(expression) {
     var property = SDK.RemoteObject.toCallArgument(this.property.symbol || this.property.name);
     expression = expression.trim();
     if (expression)
       this.property.parentObject.setPropertyValue(property, expression, callback.bind(this));
     else
       this.property.parentObject.deleteProperty(property, callback.bind(this));
 
     /**
      * @param {?Protocol.Error} error
-     * @this {Components.ObjectPropertyTreeElement}
+     * @this {ObjectUI.ObjectPropertyTreeElement}
      */
     function callback(error) {
       if (error) {
         this.update();
         return;
       }
 
       if (!expression) {
         // The property was deleted, so remove this tree element.
         this.parent.removeChild(this);
@@ skipping 28 matching lines @@
     } else {
       this.setExpandable(false);
     }
   }
 };
 
 
 /**
  * @unrestricted
  */
-Components.ArrayGroupingTreeElement = class extends UI.TreeElement {
+ObjectUI.ArrayGroupingTreeElement = class extends UI.TreeElement {
   /**
    * @param {!SDK.RemoteObject} object
    * @param {number} fromIndex
    * @param {number} toIndex
    * @param {number} propertyCount
    * @param {!Components.Linkifier=} linkifier
    */
   constructor(object, fromIndex, toIndex, propertyCount, linkifier) {
     super(String.sprintf('[%d \u2026 %d]', fromIndex, toIndex), true);
     this.toggleOnClick = true;
     this.selectable = false;
     this._fromIndex = fromIndex;
     this._toIndex = toIndex;
     this._object = object;
     this._readOnly = true;
     this._propertyCount = propertyCount;
     this._linkifier = linkifier;
   }
 
   /**
    * @param {!UI.TreeElement} treeNode
    * @param {!SDK.RemoteObject} object
    * @param {number} fromIndex
    * @param {number} toIndex
    * @param {!Components.Linkifier=} linkifier
    */
   static _populateArray(treeNode, object, fromIndex, toIndex, linkifier) {
-    Components.ArrayGroupingTreeElement._populateRanges(treeNode, object, fromIndex, toIndex, true, linkifier);
+    ObjectUI.ArrayGroupingTreeElement._populateRanges(treeNode, object, fromIndex, toIndex, true, linkifier);
   }
 
   /**
    * @param {!UI.TreeElement} treeNode
    * @param {!SDK.RemoteObject} object
    * @param {number} fromIndex
    * @param {number} toIndex
    * @param {boolean} topLevel
    * @param {!Components.Linkifier=} linkifier
-   * @this {Components.ArrayGroupingTreeElement}
+   * @this {ObjectUI.ArrayGroupingTreeElement}
    */
   static _populateRanges(treeNode, object, fromIndex, toIndex, topLevel, linkifier) {
     object.callFunctionJSON(
         packRanges,
         [
-          {value: fromIndex}, {value: toIndex}, {value: Components.ArrayGroupingTreeElement._bucketThreshold},
-          {value: Components.ArrayGroupingTreeElement._sparseIterationThreshold},
-          {value: Components.ArrayGroupingTreeElement._getOwnPropertyNamesThreshold}
+          {value: fromIndex}, {value: toIndex}, {value: ObjectUI.ArrayGroupingTreeElement._bucketThreshold},
+          {value: ObjectUI.ArrayGroupingTreeElement._sparseIterationThreshold},
+          {value: ObjectUI.ArrayGroupingTreeElement._getOwnPropertyNamesThreshold}
         ],
         callback);
 
     /**
      * Note: must declare params as optional.
      * @param {number=} fromIndex
      * @param {number=} toIndex
      * @param {number=} bucketThreshold
      * @param {number=} sparseIterationThreshold
      * @param {number=} getOwnPropertyNamesThreshold
@@ skipping 64 matching lines @@
       }
 
       return {ranges: ranges, skipGetOwnPropertyNames: skipGetOwnPropertyNames};
     }
 
     function callback(result) {
       if (!result)
         return;
       var ranges = /** @type {!Array.<!Array.<number>>} */ (result.ranges);
       if (ranges.length === 1) {
-        Components.ArrayGroupingTreeElement._populateAsFragment(
-            treeNode, object, ranges[0][0], ranges[0][1], linkifier);
+        ObjectUI.ArrayGroupingTreeElement._populateAsFragment(treeNode, object, ranges[0][0], ranges[0][1], linkifier);
       } else {
         for (var i = 0; i < ranges.length; ++i) {
           var fromIndex = ranges[i][0];
           var toIndex = ranges[i][1];
           var count = ranges[i][2];
           if (fromIndex === toIndex)
-            Components.ArrayGroupingTreeElement._populateAsFragment(treeNode, object, fromIndex, toIndex, linkifier);
+            ObjectUI.ArrayGroupingTreeElement._populateAsFragment(treeNode, object, fromIndex, toIndex, linkifier);
           else
-            treeNode.appendChild(new Components.ArrayGroupingTreeElement(object, fromIndex, toIndex, count, linkifier));
+            treeNode.appendChild(new ObjectUI.ArrayGroupingTreeElement(object, fromIndex, toIndex, count, linkifier));
         }
       }
       if (topLevel) {
-        Components.ArrayGroupingTreeElement._populateNonIndexProperties(
+        ObjectUI.ArrayGroupingTreeElement._populateNonIndexProperties(
             treeNode, object, result.skipGetOwnPropertyNames, linkifier);
       }
     }
   }
 
   /**
    * @param {!UI.TreeElement} treeNode
    * @param {!SDK.RemoteObject} object
    * @param {number} fromIndex
    * @param {number} toIndex
    * @param {!Components.Linkifier=} linkifier
-   * @this {Components.ArrayGroupingTreeElement}
+   * @this {ObjectUI.ArrayGroupingTreeElement}
    */
   static _populateAsFragment(treeNode, object, fromIndex, toIndex, linkifier) {
     object.callFunction(
         buildArrayFragment,
-        [{value: fromIndex}, {value: toIndex}, {value: Components.ArrayGroupingTreeElement._sparseIterationThreshold}],
+        [{value: fromIndex}, {value: toIndex}, {value: ObjectUI.ArrayGroupingTreeElement._sparseIterationThreshold}],
         processArrayFragment.bind(this));
 
     /**
      * @suppressReceiverCheck
      * @this {Object}
      * @param {number=} fromIndex // must declare optional
      * @param {number=} toIndex // must declare optional
      * @param {number=} sparseIterationThreshold // must declare optional
      */
     function buildArrayFragment(fromIndex, toIndex, sparseIterationThreshold) {
@@ skipping 11 matching lines @@
           if (String(index) === name && fromIndex <= index && index <= toIndex)
             result[index] = this[index];
         }
       }
       return result;
     }
 
     /**
      * @param {?SDK.RemoteObject} arrayFragment
      * @param {boolean=} wasThrown
-     * @this {Components.ArrayGroupingTreeElement}
+     * @this {ObjectUI.ArrayGroupingTreeElement}
      */
     function processArrayFragment(arrayFragment, wasThrown) {
       if (!arrayFragment || wasThrown)
         return;
       arrayFragment.getAllProperties(
           false, Runtime.experiments.isEnabled('objectPreviews'), processProperties.bind(this));
     }
 
-    /** @this {Components.ArrayGroupingTreeElement} */
+    /** @this {ObjectUI.ArrayGroupingTreeElement} */
     function processProperties(properties, internalProperties) {
       if (!properties)
         return;
 
-      properties.sort(Components.ObjectPropertiesSection.CompareProperties);
+      properties.sort(ObjectUI.ObjectPropertiesSection.CompareProperties);
       for (var i = 0; i < properties.length; ++i) {
         properties[i].parentObject = this._object;
-        var childTreeElement = new Components.ObjectPropertyTreeElement(properties[i], linkifier);
+        var childTreeElement = new ObjectUI.ObjectPropertyTreeElement(properties[i], linkifier);
         childTreeElement._readOnly = true;
         treeNode.appendChild(childTreeElement);
       }
     }
   }
 
   /**
    * @param {!UI.TreeElement} treeNode
    * @param {!SDK.RemoteObject} object
    * @param {boolean} skipGetOwnPropertyNames
    * @param {!Components.Linkifier=} linkifier
-   * @this {Components.ArrayGroupingTreeElement}
+   * @this {ObjectUI.ArrayGroupingTreeElement}
    */
   static _populateNonIndexProperties(treeNode, object, skipGetOwnPropertyNames, linkifier) {
     object.callFunction(buildObjectFragment, [{value: skipGetOwnPropertyNames}], processObjectFragment.bind(this));
 
     /**
      * @param {boolean=} skipGetOwnPropertyNames
      * @suppressReceiverCheck
      * @this {Object}
      */
     function buildObjectFragment(skipGetOwnPropertyNames) {
       var result = {__proto__: this.__proto__};
       if (skipGetOwnPropertyNames)
         return result;
       var names = Object.getOwnPropertyNames(this);
       for (var i = 0; i < names.length; ++i) {
         var name = names[i];
         // Array index check according to the ES5-15.4.
         if (String(name >>> 0) === name && name >>> 0 !== 0xffffffff)
           continue;
         var descriptor = Object.getOwnPropertyDescriptor(this, name);
         if (descriptor)
           Object.defineProperty(result, name, descriptor);
       }
       return result;
     }
 
     /**
      * @param {?SDK.RemoteObject} arrayFragment
      * @param {boolean=} wasThrown
-     * @this {Components.ArrayGroupingTreeElement}
+     * @this {ObjectUI.ArrayGroupingTreeElement}
      */
     function processObjectFragment(arrayFragment, wasThrown) {
       if (!arrayFragment || wasThrown)
         return;
       arrayFragment.getOwnProperties(Runtime.experiments.isEnabled('objectPreviews'), processProperties.bind(this));
     }
 
     /**
      * @param {?Array.<!SDK.RemoteObjectProperty>} properties
      * @param {?Array.<!SDK.RemoteObjectProperty>=} internalProperties
-     * @this {Components.ArrayGroupingTreeElement}
+     * @this {ObjectUI.ArrayGroupingTreeElement}
      */
     function processProperties(properties, internalProperties) {
       if (!properties)
         return;
-      properties.sort(Components.ObjectPropertiesSection.CompareProperties);
+      properties.sort(ObjectUI.ObjectPropertiesSection.CompareProperties);
       for (var i = 0; i < properties.length; ++i) {
         properties[i].parentObject = this._object;
-        var childTreeElement = new Components.ObjectPropertyTreeElement(properties[i], linkifier);
+        var childTreeElement = new ObjectUI.ObjectPropertyTreeElement(properties[i], linkifier);
         childTreeElement._readOnly = true;
         treeNode.appendChild(childTreeElement);
       }
     }
   }
 
   /**
    * @override
    */
   onpopulate() {
-    if (this._propertyCount >= Components.ArrayGroupingTreeElement._bucketThreshold) {
-      Components.ArrayGroupingTreeElement._populateRanges(
+    if (this._propertyCount >= ObjectUI.ArrayGroupingTreeElement._bucketThreshold) {
+      ObjectUI.ArrayGroupingTreeElement._populateRanges(
           this, this._object, this._fromIndex, this._toIndex, false, this._linkifier);
       return;
     }
-    Components.ArrayGroupingTreeElement._populateAsFragment(
+    ObjectUI.ArrayGroupingTreeElement._populateAsFragment(
         this, this._object, this._fromIndex, this._toIndex, this._linkifier);
   }
 
   /**
    * @override
    */
   onattach() {
     this.listItemElement.classList.add('object-properties-section-name');
   }
 };
 
-Components.ArrayGroupingTreeElement._bucketThreshold = 100;
-Components.ArrayGroupingTreeElement._sparseIterationThreshold = 250000;
-Components.ArrayGroupingTreeElement._getOwnPropertyNamesThreshold = 500000;
+ObjectUI.ArrayGroupingTreeElement._bucketThreshold = 100;
+ObjectUI.ArrayGroupingTreeElement._sparseIterationThreshold = 250000;
+ObjectUI.ArrayGroupingTreeElement._getOwnPropertyNamesThreshold = 500000;
 
 
 /**
  * @unrestricted
  */
-Components.ObjectPropertyPrompt = class extends UI.TextPrompt {
+ObjectUI.ObjectPropertyPrompt = class extends UI.TextPrompt {
   constructor() {
     super();
-    this.initialize(Components.JavaScriptAutocomplete.completionsForTextInCurrentContext);
+    this.initialize(ObjectUI.JavaScriptAutocomplete.completionsForTextInCurrentContext);
   }
 };
 
 /**
  * @unrestricted
  */
-Components.ObjectPropertiesSectionExpandController = class {
+ObjectUI.ObjectPropertiesSectionExpandController = class {
   constructor() {
     /** @type {!Set.<string>} */
     this._expandedProperties = new Set();
   }
 
   /**
    * @param {string} id
-   * @param {!Components.ObjectPropertiesSection} section
+   * @param {!ObjectUI.ObjectPropertiesSection} section
    */
   watchSection(id, section) {
     section.addEventListener(UI.TreeOutline.Events.ElementAttached, this._elementAttached, this);
     section.addEventListener(UI.TreeOutline.Events.ElementExpanded, this._elementExpanded, this);
     section.addEventListener(UI.TreeOutline.Events.ElementCollapsed, this._elementCollapsed, this);
-    section[Components.ObjectPropertiesSectionExpandController._treeOutlineId] = id;
+    section[ObjectUI.ObjectPropertiesSectionExpandController._treeOutlineId] = id;
 
     if (this._expandedProperties.has(id))
       section.expand();
   }
 
   /**
    * @param {string} id
    */
   stopWatchSectionsWithId(id) {
     for (var property of this._expandedProperties) {
@@ skipping 25 matching lines @@
   _elementCollapsed(event) {
     var element = /** @type {!UI.TreeElement} */ (event.data);
     this._expandedProperties.delete(this._propertyPath(element));
   }
 
   /**
    * @param {!UI.TreeElement} treeElement
    * @return {string}
    */
   _propertyPath(treeElement) {
-    var cachedPropertyPath = treeElement[Components.ObjectPropertiesSectionExpandController._cachedPathSymbol];
+    var cachedPropertyPath = treeElement[ObjectUI.ObjectPropertiesSectionExpandController._cachedPathSymbol];
     if (cachedPropertyPath)
       return cachedPropertyPath;
 
     var current = treeElement;
     var rootElement = treeElement.treeOutline.objectTreeElement();
 
     var result;
 
     while (current !== rootElement) {
       var currentName = '';
       if (current.property)
         currentName = current.property.name;
       else
         currentName = typeof current.title === 'string' ? current.title : current.title.textContent;
 
       result = currentName + (result ? '.' + result : '');
       current = current.parent;
     }
-    var treeOutlineId = treeElement.treeOutline[Components.ObjectPropertiesSectionExpandController._treeOutlineId];
+    var treeOutlineId = treeElement.treeOutline[ObjectUI.ObjectPropertiesSectionExpandController._treeOutlineId];
     result = treeOutlineId + (result ? ':' + result : '');
-    treeElement[Components.ObjectPropertiesSectionExpandController._cachedPathSymbol] = result;
+    treeElement[ObjectUI.ObjectPropertiesSectionExpandController._cachedPathSymbol] = result;
     return result;
   }
 };
 
-Components.ObjectPropertiesSectionExpandController._cachedPathSymbol = Symbol('cachedPath');
-Components.ObjectPropertiesSectionExpandController._treeOutlineId = Symbol('treeOutlineId');
+ObjectUI.ObjectPropertiesSectionExpandController._cachedPathSymbol = Symbol('cachedPath');
+ObjectUI.ObjectPropertiesSectionExpandController._treeOutlineId = Symbol('treeOutlineId');