DevTools: rename WebInspector into modules.

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

 /*
  * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2008 Matt Lilek <webkit@mattlilek.com>
  * 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
@@ skipping 13 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
  */
-WebInspector.ElementsTreeElement = class extends TreeElement {
+Elements.ElementsTreeElement = class extends TreeElement {
   /**
-   * @param {!WebInspector.DOMNode} node
+   * @param {!SDK.DOMNode} node
    * @param {boolean=} elementCloseTag
    */
   constructor(node, elementCloseTag) {
     // The title will be updated in onattach.
     super();
     this._node = node;
 
     this._gutterContainer = this.listItemElement.createChild('div', 'gutter-container');
     this._gutterContainer.addEventListener('click', this._showContextMenu.bind(this));
     this._decorationsElement = this._gutterContainer.createChild('div', 'hidden');
 
     this._elementCloseTag = elementCloseTag;
 
     if (this._node.nodeType() === Node.ELEMENT_NODE && !elementCloseTag)
       this._canAddAttributes = true;
     this._searchQuery = null;
-    this._expandedChildrenLimit = WebInspector.ElementsTreeElement.InitialChildrenLimit;
+    this._expandedChildrenLimit = Elements.ElementsTreeElement.InitialChildrenLimit;
   }
 
   /**
-   * @param {!WebInspector.ElementsTreeElement} treeElement
+   * @param {!Elements.ElementsTreeElement} treeElement
    */
   static animateOnDOMUpdate(treeElement) {
     var tagName = treeElement.listItemElement.querySelector('.webkit-html-tag-name');
-    WebInspector.runCSSAnimationOnce(tagName || treeElement.listItemElement, 'dom-update-highlight');
+    UI.runCSSAnimationOnce(tagName || treeElement.listItemElement, 'dom-update-highlight');
   }
 
   /**
-   * @param {!WebInspector.DOMNode} node
-   * @return {!Array<!WebInspector.DOMNode>}
+   * @param {!SDK.DOMNode} node
+   * @return {!Array<!SDK.DOMNode>}
    */
   static visibleShadowRoots(node) {
     var roots = node.shadowRoots();
-    if (roots.length && !WebInspector.moduleSetting('showUAShadowDOM').get())
+    if (roots.length && !Common.moduleSetting('showUAShadowDOM').get())
       roots = roots.filter(filter);
 
     /**
-     * @param {!WebInspector.DOMNode} root
+     * @param {!SDK.DOMNode} root
      */
     function filter(root) {
-      return root.shadowRootType() !== WebInspector.DOMNode.ShadowRootTypes.UserAgent;
+      return root.shadowRootType() !== SDK.DOMNode.ShadowRootTypes.UserAgent;
     }
     return roots;
   }
 
   /**
-   * @param {!WebInspector.DOMNode} node
+   * @param {!SDK.DOMNode} node
    * @return {boolean}
    */
   static canShowInlineText(node) {
     if (node.importedDocument() || node.templateContent() ||
-        WebInspector.ElementsTreeElement.visibleShadowRoots(node).length || node.hasPseudoElements())
+        Elements.ElementsTreeElement.visibleShadowRoots(node).length || node.hasPseudoElements())
       return false;
     if (node.nodeType() !== Node.ELEMENT_NODE)
       return false;
     if (!node.firstChild || node.firstChild !== node.lastChild || node.firstChild.nodeType() !== Node.TEXT_NODE)
       return false;
     var textChild = node.firstChild;
     var maxInlineTextChildLength = 80;
     if (textChild.nodeValue().length < maxInlineTextChildLength)
       return true;
     return false;
   }
 
   /**
-   * @param {!WebInspector.ContextSubMenuItem} subMenu
-   * @param {!WebInspector.DOMNode} node
+   * @param {!UI.ContextSubMenuItem} subMenu
+   * @param {!SDK.DOMNode} node
    */
   static populateForcedPseudoStateItems(subMenu, node) {
     const pseudoClasses = ['active', 'hover', 'focus', 'visited'];
-    var forcedPseudoState = WebInspector.CSSModel.fromNode(node).pseudoState(node);
+    var forcedPseudoState = SDK.CSSModel.fromNode(node).pseudoState(node);
     for (var i = 0; i < pseudoClasses.length; ++i) {
       var pseudoClassForced = forcedPseudoState.indexOf(pseudoClasses[i]) >= 0;
       subMenu.appendCheckboxItem(
           ':' + pseudoClasses[i], setPseudoStateCallback.bind(null, pseudoClasses[i], !pseudoClassForced),
           pseudoClassForced, false);
     }
 
     /**
      * @param {string} pseudoState
      * @param {boolean} enabled
      */
     function setPseudoStateCallback(pseudoState, enabled) {
-      WebInspector.CSSModel.fromNode(node).forcePseudoState(node, pseudoState, enabled);
+      SDK.CSSModel.fromNode(node).forcePseudoState(node, pseudoState, enabled);
     }
   }
 
   /**
    * @return {boolean}
    */
   isClosingTag() {
     return !!this._elementCloseTag;
   }
 
   /**
-   * @return {!WebInspector.DOMNode}
+   * @return {!SDK.DOMNode}
    */
   node() {
     return this._node;
   }
 
   /**
    * @return {boolean}
    */
   isEditing() {
     return !!this._editing;
@@ skipping 302 matching lines @@
   }
 
   /**
    * @param {!Event} event
    */
   _showContextMenu(event) {
     this.treeOutline.showContextMenu(this, event);
   }
 
   /**
-   * @param {!WebInspector.ContextMenu} contextMenu
+   * @param {!UI.ContextMenu} contextMenu
    * @param {!Event} event
    */
   populateTagContextMenu(contextMenu, event) {
     // Add attribute-related actions.
     var treeElement = this._elementCloseTag ? this.treeOutline.findTreeElement(this._node) : this;
     contextMenu.appendItem(
-        WebInspector.UIString.capitalize('Add ^attribute'), treeElement._addNewAttribute.bind(treeElement));
+        Common.UIString.capitalize('Add ^attribute'), treeElement._addNewAttribute.bind(treeElement));
 
     var attribute = event.target.enclosingNodeOrSelfWithClass('webkit-html-attribute');
     var newAttribute = event.target.enclosingNodeOrSelfWithClass('add-attribute');
     if (attribute && !newAttribute)
       contextMenu.appendItem(
-          WebInspector.UIString.capitalize('Edit ^attribute'),
+          Common.UIString.capitalize('Edit ^attribute'),
           this._startEditingAttribute.bind(this, attribute, event.target));
     this.populateNodeContextMenu(contextMenu);
-    WebInspector.ElementsTreeElement.populateForcedPseudoStateItems(contextMenu, treeElement.node());
+    Elements.ElementsTreeElement.populateForcedPseudoStateItems(contextMenu, treeElement.node());
     contextMenu.appendSeparator();
     this.populateScrollIntoView(contextMenu);
   }
 
   /**
-   * @param {!WebInspector.ContextMenu} contextMenu
+   * @param {!UI.ContextMenu} contextMenu
    */
   populateScrollIntoView(contextMenu) {
-    contextMenu.appendItem(WebInspector.UIString.capitalize('Scroll into ^view'), this._scrollIntoView.bind(this));
+    contextMenu.appendItem(Common.UIString.capitalize('Scroll into ^view'), this._scrollIntoView.bind(this));
   }
 
   populateTextContextMenu(contextMenu, textNode) {
     if (!this._editing)
       contextMenu.appendItem(
-          WebInspector.UIString.capitalize('Edit ^text'), this._startEditingTextNode.bind(this, textNode));
+          Common.UIString.capitalize('Edit ^text'), this._startEditingTextNode.bind(this, textNode));
     this.populateNodeContextMenu(contextMenu);
   }
 
   populateNodeContextMenu(contextMenu) {
     // Add free-form node-related actions.
     var openTagElement = this._node[this.treeOutline.treeElementSymbol()] || this;
     var isEditable = this.hasEditableNode();
     if (isEditable && !this._editing)
-      contextMenu.appendItem(WebInspector.UIString('Edit as HTML'), this._editAsHTML.bind(this));
+      contextMenu.appendItem(Common.UIString('Edit as HTML'), this._editAsHTML.bind(this));
     var isShadowRoot = this._node.isShadowRoot();
 
     // Place it here so that all "Copy"-ing items stick together.
-    var copyMenu = contextMenu.appendSubMenuItem(WebInspector.UIString('Copy'));
-    var createShortcut = WebInspector.KeyboardShortcut.shortcutToString;
-    var modifier = WebInspector.KeyboardShortcut.Modifiers.CtrlOrMeta;
+    var copyMenu = contextMenu.appendSubMenuItem(Common.UIString('Copy'));
+    var createShortcut = UI.KeyboardShortcut.shortcutToString;
+    var modifier = UI.KeyboardShortcut.Modifiers.CtrlOrMeta;
     var treeOutline = this.treeOutline;
     var menuItem;
     if (!isShadowRoot) {
       menuItem = copyMenu.appendItem(
-          WebInspector.UIString('Copy outerHTML'), treeOutline.performCopyOrCut.bind(treeOutline, false, this._node));
+          Common.UIString('Copy outerHTML'), treeOutline.performCopyOrCut.bind(treeOutline, false, this._node));
       menuItem.setShortcut(createShortcut('V', modifier));
     }
     if (this._node.nodeType() === Node.ELEMENT_NODE)
-      copyMenu.appendItem(WebInspector.UIString.capitalize('Copy selector'), this._copyCSSPath.bind(this));
+      copyMenu.appendItem(Common.UIString.capitalize('Copy selector'), this._copyCSSPath.bind(this));
     if (!isShadowRoot)
-      copyMenu.appendItem(WebInspector.UIString('Copy XPath'), this._copyXPath.bind(this));
+      copyMenu.appendItem(Common.UIString('Copy XPath'), this._copyXPath.bind(this));
     if (!isShadowRoot) {
       menuItem = copyMenu.appendItem(
-          WebInspector.UIString('Cut element'), treeOutline.performCopyOrCut.bind(treeOutline, true, this._node),
+          Common.UIString('Cut element'), treeOutline.performCopyOrCut.bind(treeOutline, true, this._node),
           !this.hasEditableNode());
       menuItem.setShortcut(createShortcut('X', modifier));
       menuItem = copyMenu.appendItem(
-          WebInspector.UIString('Copy element'), treeOutline.performCopyOrCut.bind(treeOutline, false, this._node));
+          Common.UIString('Copy element'), treeOutline.performCopyOrCut.bind(treeOutline, false, this._node));
       menuItem.setShortcut(createShortcut('C', modifier));
       menuItem = copyMenu.appendItem(
-          WebInspector.UIString('Paste element'), treeOutline.pasteNode.bind(treeOutline, this._node),
+          Common.UIString('Paste element'), treeOutline.pasteNode.bind(treeOutline, this._node),
           !treeOutline.canPaste(this._node));
       menuItem.setShortcut(createShortcut('V', modifier));
     }
 
     contextMenu.appendSeparator();
     menuItem = contextMenu.appendCheckboxItem(
-        WebInspector.UIString('Hide element'), treeOutline.toggleHideElement.bind(treeOutline, this._node),
+        Common.UIString('Hide element'), treeOutline.toggleHideElement.bind(treeOutline, this._node),
         treeOutline.isToggledToHidden(this._node));
-    menuItem.setShortcut(WebInspector.shortcutRegistry.shortcutTitleForAction('elements.hide-element'));
+    menuItem.setShortcut(UI.shortcutRegistry.shortcutTitleForAction('elements.hide-element'));
 
     if (isEditable)
-      contextMenu.appendItem(WebInspector.UIString('Delete element'), this.remove.bind(this));
+      contextMenu.appendItem(Common.UIString('Delete element'), this.remove.bind(this));
     contextMenu.appendSeparator();
 
-    contextMenu.appendItem(WebInspector.UIString('Expand all'), this.expandRecursively.bind(this));
-    contextMenu.appendItem(WebInspector.UIString('Collapse all'), this.collapseRecursively.bind(this));
+    contextMenu.appendItem(Common.UIString('Expand all'), this.expandRecursively.bind(this));
+    contextMenu.appendItem(Common.UIString('Collapse all'), this.collapseRecursively.bind(this));
     contextMenu.appendSeparator();
   }
 
   _startEditing() {
     if (this.treeOutline.selectedDOMNode() !== this._node)
       return;
 
     var listItem = this._listItemNode;
 
     if (this._canAddAttributes) {
@@ skipping 39 matching lines @@
           if (elem.classList.contains('webkit-html-attribute-value'))
             return this._startEditingAttribute(elem.parentNode, elem);
         }
       }
     }
   }
 
   _startEditingAttribute(attribute, elementForSelection) {
     console.assert(this.listItemElement.isAncestor(attribute));
 
-    if (WebInspector.isBeingEdited(attribute))
+    if (UI.isBeingEdited(attribute))
       return true;
 
     var attributeNameElement = attribute.getElementsByClassName('webkit-html-attribute-name')[0];
     if (!attributeNameElement)
       return false;
 
     var attributeName = attributeNameElement.textContent;
     var attributeValueElement = attribute.getElementsByClassName('webkit-html-attribute-value')[0];
 
     // Make sure elementForSelection is not a child of attributeValueElement.
     elementForSelection =
         attributeValueElement.isAncestor(elementForSelection) ? attributeValueElement : elementForSelection;
 
     function removeZeroWidthSpaceRecursive(node) {
       if (node.nodeType === Node.TEXT_NODE) {
         node.nodeValue = node.nodeValue.replace(/\u200B/g, '');
         return;
       }
 
       if (node.nodeType !== Node.ELEMENT_NODE)
         return;
 
       for (var child = node.firstChild; child; child = child.nextSibling)
         removeZeroWidthSpaceRecursive(child);
     }
 
     var attributeValue = attributeName && attributeValueElement ? this._node.getAttribute(attributeName) : undefined;
     if (attributeValue !== undefined)
       attributeValueElement.setTextContentTruncatedIfNeeded(
-          attributeValue, WebInspector.UIString('<value is too large to edit>'));
+          attributeValue, Common.UIString('<value is too large to edit>'));
 
     // Remove zero-width spaces that were added by nodeTitleInfo.
     removeZeroWidthSpaceRecursive(attribute);
 
-    var config = new WebInspector.InplaceEditor.Config(
+    var config = new UI.InplaceEditor.Config(
         this._attributeEditingCommitted.bind(this), this._editingCancelled.bind(this), attributeName);
 
     /**
      * @param {!Event} event
      * @return {string}
      */
     function postKeyDownFinishHandler(event) {
-      WebInspector.handleElementValueModifications(event, attribute);
+      UI.handleElementValueModifications(event, attribute);
       return '';
     }
 
     if (!attributeValueElement.textContent.asParsedURL())
       config.setPostKeydownFinishHandler(postKeyDownFinishHandler);
 
-    this._editing = WebInspector.InplaceEditor.startEditing(attribute, config);
+    this._editing = UI.InplaceEditor.startEditing(attribute, config);
 
     this.listItemElement.getComponentSelection().setBaseAndExtent(elementForSelection, 0, elementForSelection, 1);
 
     return true;
   }
 
   /**
    * @param {!Element} textNodeElement
    */
   _startEditingTextNode(textNodeElement) {
-    if (WebInspector.isBeingEdited(textNodeElement))
+    if (UI.isBeingEdited(textNodeElement))
       return true;
 
     var textNode = this._node;
     // We only show text nodes inline in elements if the element only
     // has a single child, and that child is a text node.
     if (textNode.nodeType() === Node.ELEMENT_NODE && textNode.firstChild)
       textNode = textNode.firstChild;
 
     var container = textNodeElement.enclosingNodeOrSelfWithClass('webkit-html-text-node');
     if (container)
       container.textContent = textNode.nodeValue();  // Strip the CSS or JS highlighting if present.
-    var config = new WebInspector.InplaceEditor.Config(
+    var config = new UI.InplaceEditor.Config(
         this._textNodeEditingCommitted.bind(this, textNode), this._editingCancelled.bind(this));
-    this._editing = WebInspector.InplaceEditor.startEditing(textNodeElement, config);
+    this._editing = UI.InplaceEditor.startEditing(textNodeElement, config);
     this.listItemElement.getComponentSelection().setBaseAndExtent(textNodeElement, 0, textNodeElement, 1);
 
     return true;
   }
 
   /**
    * @param {!Element=} tagNameElement
    */
   _startEditingTagName(tagNameElement) {
     if (!tagNameElement) {
       tagNameElement = this.listItemElement.getElementsByClassName('webkit-html-tag-name')[0];
       if (!tagNameElement)
         return false;
     }
 
     var tagName = tagNameElement.textContent;
-    if (WebInspector.ElementsTreeElement.EditTagBlacklist.has(tagName.toLowerCase()))
+    if (Elements.ElementsTreeElement.EditTagBlacklist.has(tagName.toLowerCase()))
       return false;
 
-    if (WebInspector.isBeingEdited(tagNameElement))
+    if (UI.isBeingEdited(tagNameElement))
       return true;
 
     var closingTagElement = this._distinctClosingTagElement();
 
     /**
      * @param {!Event} event
      */
     function keyupListener(event) {
       if (closingTagElement)
         closingTagElement.textContent = '</' + tagNameElement.textContent + '>';
     }
 
     /**
      * @param {!Element} element
      * @param {string} newTagName
-     * @this {WebInspector.ElementsTreeElement}
+     * @this {Elements.ElementsTreeElement}
      */
     function editingComitted(element, newTagName) {
       tagNameElement.removeEventListener('keyup', keyupListener, false);
       this._tagNameEditingCommitted.apply(this, arguments);
     }
 
     /**
-     * @this {WebInspector.ElementsTreeElement}
+     * @this {Elements.ElementsTreeElement}
      */
     function editingCancelled() {
       tagNameElement.removeEventListener('keyup', keyupListener, false);
       this._editingCancelled.apply(this, arguments);
     }
 
     tagNameElement.addEventListener('keyup', keyupListener, false);
 
     var config =
-        new WebInspector.InplaceEditor.Config(editingComitted.bind(this), editingCancelled.bind(this), tagName);
-    this._editing = WebInspector.InplaceEditor.startEditing(tagNameElement, config);
+        new UI.InplaceEditor.Config(editingComitted.bind(this), editingCancelled.bind(this), tagName);
+    this._editing = UI.InplaceEditor.startEditing(tagNameElement, config);
     this.listItemElement.getComponentSelection().setBaseAndExtent(tagNameElement, 0, tagNameElement, 1);
     return true;
   }
 
   /**
    * @param {function(string, string)} commitCallback
    * @param {function()} disposeCallback
    * @param {?Protocol.Error} error
    * @param {string} initialValue
    */
@@ skipping 23 matching lines @@
     if (this._childrenListNode)
       this._childrenListNode.style.display = 'none';
     // Append editor.
     this.listItemElement.appendChild(this._htmlEditElement);
     this.listItemElement.classList.add('editing-as-html');
     this.treeOutline.element.addEventListener('mousedown', consume, false);
 
     /**
      * @param {!Element} element
      * @param {string} newValue
-     * @this {WebInspector.ElementsTreeElement}
+     * @this {Elements.ElementsTreeElement}
      */
     function commit(element, newValue) {
       commitCallback(initialValue, newValue);
       dispose.call(this);
     }
 
     /**
-     * @this {WebInspector.ElementsTreeElement}
+     * @this {Elements.ElementsTreeElement}
      */
     function dispose() {
       disposeCallback();
       delete this._editing;
       this.treeOutline.setMultilineEditing(null);
 
       this.listItemElement.classList.remove('editing-as-html');
       // Remove editor.
       this.listItemElement.removeChild(this._htmlEditElement);
       delete this._htmlEditElement;
       // Unhide children item.
       if (this._childrenListNode)
         this._childrenListNode.style.removeProperty('display');
       // Unhide header items.
       var child = this.listItemElement.firstChild;
       while (child) {
         child.style.removeProperty('display');
         child = child.nextSibling;
       }
 
       this.treeOutline.element.removeEventListener('mousedown', consume, false);
       this.treeOutline.focus();
     }
 
-    var config = new WebInspector.InplaceEditor.Config(commit.bind(this), dispose.bind(this));
+    var config = new UI.InplaceEditor.Config(commit.bind(this), dispose.bind(this));
     config.setMultilineOptions(
         initialValue, {name: 'xml', htmlMode: true}, 'web-inspector-html',
-        WebInspector.moduleSetting('domWordWrap').get(), true);
-    WebInspector.InplaceEditor.startMultilineEditing(this._htmlEditElement, config).then(markAsBeingEdited.bind(this));
+        Common.moduleSetting('domWordWrap').get(), true);
+    UI.InplaceEditor.startMultilineEditing(this._htmlEditElement, config).then(markAsBeingEdited.bind(this));
 
     /**
      * @param {!Object} controller
-     * @this {WebInspector.ElementsTreeElement}
+     * @this {Elements.ElementsTreeElement}
      */
     function markAsBeingEdited(controller) {
-      this._editing = /** @type {!WebInspector.InplaceEditor.Controller} */ (controller);
+      this._editing = /** @type {!UI.InplaceEditor.Controller} */ (controller);
       this._editing.setWidth(this.treeOutline.visibleWidth() - this._computeLeftIndent());
       this.treeOutline.setMultilineEditing(this._editing);
     }
   }
 
   _attributeEditingCommitted(element, newText, oldText, attributeName, moveDirection) {
     delete this._editing;
 
     var treeOutline = this.treeOutline;
 
     /**
      * @param {?Protocol.Error=} error
-     * @this {WebInspector.ElementsTreeElement}
+     * @this {Elements.ElementsTreeElement}
      */
     function moveToNextAttributeIfNeeded(error) {
       if (error)
         this._editingCancelled(element, attributeName);
 
       if (!moveDirection)
         return;
 
       treeOutline.runPendingUpdates();
 
@@ skipping 52 matching lines @@
     function cancel() {
       var closingTagElement = self._distinctClosingTagElement();
       if (closingTagElement)
         closingTagElement.textContent = '</' + tagName + '>';
 
       self._editingCancelled(element, tagName);
       moveToNextAttributeIfNeeded.call(self);
     }
 
     /**
-     * @this {WebInspector.ElementsTreeElement}
+     * @this {Elements.ElementsTreeElement}
      */
     function moveToNextAttributeIfNeeded() {
       if (moveDirection !== 'forward') {
         this._addNewAttribute();
         return;
       }
 
       var attributes = this._node.attributes();
       if (attributes.length > 0)
         this._triggerEditAttribute(attributes[0].name);
@@ skipping 15 matching lines @@
         cancel();
         return;
       }
       var newTreeItem = treeOutline.selectNodeAfterEdit(wasExpanded, error, nodeId);
       moveToNextAttributeIfNeeded.call(newTreeItem);
     }
     this._node.setNodeName(newText, changeTagNameCallback);
   }
 
   /**
-   * @param {!WebInspector.DOMNode} textNode
+   * @param {!SDK.DOMNode} textNode
    * @param {!Element} element
    * @param {string} newText
    */
   _textNodeEditingCommitted(textNode, element, newText) {
     delete this._editing;
 
     /**
-     * @this {WebInspector.ElementsTreeElement}
+     * @this {Elements.ElementsTreeElement}
      */
     function callback() {
       this.updateTitle();
     }
     textNode.setNodeValue(newText, callback.bind(this));
   }
 
   /**
    * @param {!Element} element
    * @param {*} context
@@ skipping 19 matching lines @@
     }
 
     // Remaining cases are single line non-expanded elements with a closing
     // tag, or HTML elements without a closing tag (such as <br>). Return
     // null in the case where there isn't a closing tag.
     var tags = this.listItemElement.getElementsByClassName('webkit-html-tag');
     return (tags.length === 1 ? null : tags[tags.length - 1]);
   }
 
   /**
-   * @param {?WebInspector.ElementsTreeOutline.UpdateRecord=} updateRecord
+   * @param {?Elements.ElementsTreeOutline.UpdateRecord=} updateRecord
    * @param {boolean=} onlySearchQueryChanged
    */
   updateTitle(updateRecord, onlySearchQueryChanged) {
     // If we are editing, return early to prevent canceling the edit.
     // After editing is committed updateTitle will be called.
     if (this._editing)
       return;
 
     if (onlySearchQueryChanged) {
       this._hideSearchHighlight();
@@ skipping 48 matching lines @@
 
     if (this.isClosingTag())
       return;
 
     var node = this._node;
     if (node.nodeType() !== Node.ELEMENT_NODE)
       return;
 
     if (!this.treeOutline._decoratorExtensions)
       /** @type {!Array.<!Runtime.Extension>} */
-      this.treeOutline._decoratorExtensions = runtime.extensions(WebInspector.DOMPresentationUtils.MarkerDecorator);
+      this.treeOutline._decoratorExtensions = runtime.extensions(Components.DOMPresentationUtils.MarkerDecorator);
 
     var markerToExtension = new Map();
     for (var i = 0; i < this.treeOutline._decoratorExtensions.length; ++i)
       markerToExtension.set(
           this.treeOutline._decoratorExtensions[i].descriptor()['marker'], this.treeOutline._decoratorExtensions[i]);
 
     var promises = [];
     var decorations = [];
     var descendantDecorations = [];
     node.traverseMarkers(visitor);
 
     /**
-     * @param {!WebInspector.DOMNode} n
+     * @param {!SDK.DOMNode} n
      * @param {string} marker
      */
     function visitor(n, marker) {
       var extension = markerToExtension.get(marker);
       if (!extension)
         return;
       promises.push(extension.instance().then(collectDecoration.bind(null, n)));
     }
 
     /**
-     * @param {!WebInspector.DOMNode} n
-     * @param {!WebInspector.DOMPresentationUtils.MarkerDecorator} decorator
+     * @param {!SDK.DOMNode} n
+     * @param {!Components.DOMPresentationUtils.MarkerDecorator} decorator
      */
     function collectDecoration(n, decorator) {
       var decoration = decorator.decorate(n);
       if (!decoration)
         return;
       (n === node ? decorations : descendantDecorations).push(decoration);
     }
 
     Promise.all(promises).then(updateDecorationsUI.bind(this));
 
     /**
-     * @this {WebInspector.ElementsTreeElement}
+     * @this {Elements.ElementsTreeElement}
      */
     function updateDecorationsUI() {
       this._decorationsElement.removeChildren();
       this._decorationsElement.classList.add('hidden');
       this._gutterContainer.classList.toggle('has-decorations', decorations.length || descendantDecorations.length);
 
       if (!decorations.length && !descendantDecorations.length)
         return;
 
       var colors = new Set();
       var titles = createElement('div');
 
       for (var decoration of decorations) {
         var titleElement = titles.createChild('div');
         titleElement.textContent = decoration.title;
         colors.add(decoration.color);
       }
       if (this.expanded && !decorations.length)
         return;
 
       var descendantColors = new Set();
       if (descendantDecorations.length) {
         var element = titles.createChild('div');
-        element.textContent = WebInspector.UIString('Children:');
+        element.textContent = Common.UIString('Children:');
         for (var decoration of descendantDecorations) {
           element = titles.createChild('div');
           element.style.marginLeft = '15px';
           element.textContent = decoration.title;
           descendantColors.add(decoration.color);
         }
       }
 
       var offset = 0;
       processColors.call(this, colors, 'elements-gutter-decoration');
       if (!this.expanded)
         processColors.call(this, descendantColors, 'elements-gutter-decoration elements-has-decorated-children');
-      WebInspector.Tooltip.install(this._decorationsElement, titles);
+      UI.Tooltip.install(this._decorationsElement, titles);
 
       /**
        * @param {!Set<string>} colors
        * @param {string} className
-       * @this {WebInspector.ElementsTreeElement}
+       * @this {Elements.ElementsTreeElement}
        */
       function processColors(colors, className) {
         for (var color of colors) {
           var child = this._decorationsElement.createChild('div', className);
           this._decorationsElement.classList.remove('hidden');
           child.style.backgroundColor = color;
           child.style.borderColor = color;
           if (offset)
             child.style.marginLeft = offset + 'px';
           offset += 3;
         }
       }
     }
   }
 
   /**
    * @param {!Node} parentElement
    * @param {string} name
    * @param {string} value
-   * @param {?WebInspector.ElementsTreeOutline.UpdateRecord} updateRecord
+   * @param {?Elements.ElementsTreeOutline.UpdateRecord} updateRecord
    * @param {boolean=} forceValue
-   * @param {!WebInspector.DOMNode=} node
+   * @param {!SDK.DOMNode=} node
    */
   _buildAttributeDOM(parentElement, name, value, updateRecord, forceValue, node) {
     var closingPunctuationRegex = /[\/;:\)\]\}]/g;
     var highlightIndex = 0;
     var highlightCount;
     var additionalHighlightOffset = 0;
     var result;
 
     /**
      * @param {string} match
      * @param {number} replaceOffset
      * @return {string}
      */
     function replacer(match, replaceOffset) {
       while (highlightIndex < highlightCount && result.entityRanges[highlightIndex].offset < replaceOffset) {
         result.entityRanges[highlightIndex].offset += additionalHighlightOffset;
         ++highlightIndex;
       }
       additionalHighlightOffset += 1;
       return match + '\u200B';
     }
 
     /**
      * @param {!Element} element
      * @param {string} value
-     * @this {WebInspector.ElementsTreeElement}
+     * @this {Elements.ElementsTreeElement}
      */
     function setValueWithEntities(element, value) {
       result = this._convertWhitespaceToEntities(value);
       highlightCount = result.entityRanges.length;
       value = result.text.replace(closingPunctuationRegex, replacer);
       while (highlightIndex < highlightCount) {
         result.entityRanges[highlightIndex].offset += additionalHighlightOffset;
         ++highlightIndex;
       }
       element.setTextContentTruncatedIfNeeded(value);
-      WebInspector.highlightRangesWithStyleClass(element, result.entityRanges, 'webkit-html-entity-value');
+      UI.highlightRangesWithStyleClass(element, result.entityRanges, 'webkit-html-entity-value');
     }
 
     var hasText = (forceValue || value.length > 0);
     var attrSpanElement = parentElement.createChild('span', 'webkit-html-attribute');
     var attrNameElement = attrSpanElement.createChild('span', 'webkit-html-attribute-name');
     attrNameElement.textContent = name;
 
     if (hasText)
       attrSpanElement.createTextChild('=\u200B"');
 
     var attrValueElement = attrSpanElement.createChild('span', 'webkit-html-attribute-value');
 
     if (updateRecord && updateRecord.isAttributeModified(name))
-      WebInspector.runCSSAnimationOnce(hasText ? attrValueElement : attrNameElement, 'dom-update-highlight');
+      UI.runCSSAnimationOnce(hasText ? attrValueElement : attrNameElement, 'dom-update-highlight');
 
     /**
-     * @this {WebInspector.ElementsTreeElement}
+     * @this {Elements.ElementsTreeElement}
      * @param {string} value
      * @return {!Element}
      */
     function linkifyValue(value) {
       var rewrittenHref = node.resolveURL(value);
       if (rewrittenHref === null) {
         var span = createElement('span');
         setValueWithEntities.call(this, span, value);
         return span;
       }
       value = value.replace(closingPunctuationRegex, '$&\u200B');
       if (value.startsWith('data:'))
         value = value.trimMiddle(60);
-      var anchor = WebInspector.linkifyURLAsNode(rewrittenHref, value, '', node.nodeName().toLowerCase() === 'a');
+      var anchor = UI.linkifyURLAsNode(rewrittenHref, value, '', node.nodeName().toLowerCase() === 'a');
       anchor.preventFollow = true;
       return anchor;
     }
 
     if (node && (name === 'src' || name === 'href')) {
       attrValueElement.appendChild(linkifyValue.call(this, value));
     } else if (
         node && (node.nodeName().toLowerCase() === 'img' || node.nodeName().toLowerCase() === 'source') &&
         name === 'srcset') {
       var sources = value.split(',');
@@ skipping 32 matching lines @@
     var pseudoElement = parentElement.createChild('span', 'webkit-html-pseudo-element');
     pseudoElement.textContent = '::' + pseudoElementName;
     parentElement.createTextChild('\u200B');
   }
 
   /**
    * @param {!Node} parentElement
    * @param {string} tagName
    * @param {boolean} isClosingTag
    * @param {boolean} isDistinctTreeElement
-   * @param {?WebInspector.ElementsTreeOutline.UpdateRecord} updateRecord
+   * @param {?Elements.ElementsTreeOutline.UpdateRecord} updateRecord
    */
   _buildTagDOM(parentElement, tagName, isClosingTag, isDistinctTreeElement, updateRecord) {
     var node = this._node;
     var classes = ['webkit-html-tag'];
     if (isClosingTag && isDistinctTreeElement)
       classes.push('close');
     var tagElement = parentElement.createChild('span', classes.join(' '));
     tagElement.createTextChild('<');
     var tagNameElement =
         tagElement.createChild('span', isClosingTag ? 'webkit-html-close-tag-name' : 'webkit-html-tag-name');
     tagNameElement.textContent = (isClosingTag ? '/' : '') + tagName;
     if (!isClosingTag) {
       if (node.hasAttributes()) {
         var attributes = node.attributes();
         for (var i = 0; i < attributes.length; ++i) {
           var attr = attributes[i];
           tagElement.createTextChild(' ');
           this._buildAttributeDOM(tagElement, attr.name, attr.value, updateRecord, false, node);
         }
       }
       if (updateRecord) {
         var hasUpdates = updateRecord.hasRemovedAttributes() || updateRecord.hasRemovedChildren();
         hasUpdates |= !this.expanded && updateRecord.hasChangedChildren();
         if (hasUpdates)
-          WebInspector.runCSSAnimationOnce(tagNameElement, 'dom-update-highlight');
+          UI.runCSSAnimationOnce(tagNameElement, 'dom-update-highlight');
       }
     }
 
     tagElement.createTextChild('>');
     parentElement.createTextChild('\u200B');
   }
 
   /**
    * @param {string} text
-   * @return {!{text: string, entityRanges: !Array.<!WebInspector.SourceRange>}}
+   * @return {!{text: string, entityRanges: !Array.<!Common.SourceRange>}}
    */
   _convertWhitespaceToEntities(text) {
     var result = '';
     var lastIndexAfterEntity = 0;
     var entityRanges = [];
-    var charToEntity = WebInspector.ElementsTreeOutline.MappedCharToEntity;
+    var charToEntity = Elements.ElementsTreeOutline.MappedCharToEntity;
     for (var i = 0, size = text.length; i < size; ++i) {
       var char = text.charAt(i);
       if (charToEntity[char]) {
         result += text.substring(lastIndexAfterEntity, i);
         var entityValue = '&' + charToEntity[char] + ';';
         entityRanges.push({offset: result.length, length: entityValue.length});
         result += entityValue;
         lastIndexAfterEntity = i + 1;
       }
     }
     if (result)
       result += text.substring(lastIndexAfterEntity);
     return {text: result || text, entityRanges: entityRanges};
   }
 
   /**
-   * @param {?WebInspector.ElementsTreeOutline.UpdateRecord} updateRecord
+   * @param {?Elements.ElementsTreeOutline.UpdateRecord} updateRecord
    * @return {!DocumentFragment} result
    */
   _nodeTitleInfo(updateRecord) {
     var node = this._node;
     var titleDOM = createDocumentFragment();
 
     switch (node.nodeType()) {
       case Node.ATTRIBUTE_NODE:
         this._buildAttributeDOM(
             titleDOM, /** @type {string} */ (node.name), /** @type {string} */ (node.value), updateRecord, true);
@@ skipping 17 matching lines @@
         if (this.isExpandable()) {
           if (!this.expanded) {
             var textNodeElement = titleDOM.createChild('span', 'webkit-html-text-node bogus');
             textNodeElement.textContent = '\u2026';
             titleDOM.createTextChild('\u200B');
             this._buildTagDOM(titleDOM, tagName, true, false, updateRecord);
           }
           break;
         }
 
-        if (WebInspector.ElementsTreeElement.canShowInlineText(node)) {
+        if (Elements.ElementsTreeElement.canShowInlineText(node)) {
           var textNodeElement = titleDOM.createChild('span', 'webkit-html-text-node');
           var result = this._convertWhitespaceToEntities(node.firstChild.nodeValue());
           textNodeElement.textContent = result.text;
-          WebInspector.highlightRangesWithStyleClass(textNodeElement, result.entityRanges, 'webkit-html-entity-value');
+          UI.highlightRangesWithStyleClass(textNodeElement, result.entityRanges, 'webkit-html-entity-value');
           titleDOM.createTextChild('\u200B');
           this._buildTagDOM(titleDOM, tagName, true, false, updateRecord);
           if (updateRecord && updateRecord.hasChangedChildren())
-            WebInspector.runCSSAnimationOnce(textNodeElement, 'dom-update-highlight');
+            UI.runCSSAnimationOnce(textNodeElement, 'dom-update-highlight');
           if (updateRecord && updateRecord.isCharDataModified())
-            WebInspector.runCSSAnimationOnce(textNodeElement, 'dom-update-highlight');
+            UI.runCSSAnimationOnce(textNodeElement, 'dom-update-highlight');
           break;
         }
 
         if (this.treeOutline.isXMLMimeType ||
-            !WebInspector.ElementsTreeElement.ForbiddenClosingTagElements.has(tagName))
+            !Elements.ElementsTreeElement.ForbiddenClosingTagElements.has(tagName))
           this._buildTagDOM(titleDOM, tagName, true, false, updateRecord);
         break;
 
       case Node.TEXT_NODE:
         if (node.parentNode && node.parentNode.nodeName().toLowerCase() === 'script') {
           var newNode = titleDOM.createChild('span', 'webkit-html-text-node webkit-html-js-node');
           var text = node.nodeValue();
           newNode.textContent = text.startsWith('\n') ? text.substring(1) : text;
 
-          var javascriptSyntaxHighlighter = new WebInspector.DOMSyntaxHighlighter('text/javascript', true);
+          var javascriptSyntaxHighlighter = new UI.DOMSyntaxHighlighter('text/javascript', true);
           javascriptSyntaxHighlighter.syntaxHighlightNode(newNode).then(updateSearchHighlight.bind(this));
         } else if (node.parentNode && node.parentNode.nodeName().toLowerCase() === 'style') {
           var newNode = titleDOM.createChild('span', 'webkit-html-text-node webkit-html-css-node');
           var text = node.nodeValue();
           newNode.textContent = text.startsWith('\n') ? text.substring(1) : text;
 
-          var cssSyntaxHighlighter = new WebInspector.DOMSyntaxHighlighter('text/css', true);
+          var cssSyntaxHighlighter = new UI.DOMSyntaxHighlighter('text/css', true);
           cssSyntaxHighlighter.syntaxHighlightNode(newNode).then(updateSearchHighlight.bind(this));
         } else {
           titleDOM.createTextChild('"');
           var textNodeElement = titleDOM.createChild('span', 'webkit-html-text-node');
           var result = this._convertWhitespaceToEntities(node.nodeValue());
           textNodeElement.textContent = result.text;
-          WebInspector.highlightRangesWithStyleClass(textNodeElement, result.entityRanges, 'webkit-html-entity-value');
+          UI.highlightRangesWithStyleClass(textNodeElement, result.entityRanges, 'webkit-html-entity-value');
           titleDOM.createTextChild('"');
           if (updateRecord && updateRecord.isCharDataModified())
-            WebInspector.runCSSAnimationOnce(textNodeElement, 'dom-update-highlight');
+            UI.runCSSAnimationOnce(textNodeElement, 'dom-update-highlight');
         }
         break;
 
       case Node.COMMENT_NODE:
         var commentElement = titleDOM.createChild('span', 'webkit-html-comment');
         commentElement.createTextChild('<!--' + node.nodeValue() + '-->');
         break;
 
       case Node.DOCUMENT_TYPE_NODE:
         var docTypeElement = titleDOM.createChild('span', 'webkit-html-doctype');
@@ skipping 18 matching lines @@
 
       case Node.DOCUMENT_FRAGMENT_NODE:
         var fragmentElement = titleDOM.createChild('span', 'webkit-html-fragment');
         fragmentElement.textContent = node.nodeNameInCorrectCase().collapseWhitespace();
         break;
       default:
         titleDOM.createTextChild(node.nodeNameInCorrectCase().collapseWhitespace());
     }
 
     /**
-     * @this {WebInspector.ElementsTreeElement}
+     * @this {Elements.ElementsTreeElement}
      */
     function updateSearchHighlight() {
       delete this._highlightResult;
       this._highlightSearchResults();
     }
 
     return titleDOM;
   }
 
   remove() {
     if (this._node.pseudoType())
       return;
     var parentElement = this.parent;
     if (!parentElement)
       return;
 
     if (!this._node.parentNode || this._node.parentNode.nodeType() === Node.DOCUMENT_NODE)
       return;
     this._node.removeNode();
   }
 
   /**
    * @param {function(boolean)=} callback
    * @param {boolean=} startEditing
    */
   toggleEditAsHTML(callback, startEditing) {
-    if (this._editing && this._htmlEditElement && WebInspector.isBeingEdited(this._htmlEditElement)) {
+    if (this._editing && this._htmlEditElement && UI.isBeingEdited(this._htmlEditElement)) {
       this._editing.commit();
       return;
     }
 
     if (startEditing === false)
       return;
 
     /**
      * @param {?Protocol.Error} error
      */
@@ skipping 14 matching lines @@
     function disposeCallback() {
       if (callback)
         callback(false);
     }
 
     var node = this._node;
     node.getOuterHTML(this._startEditingAsHTML.bind(this, commitChange, disposeCallback));
   }
 
   _copyCSSPath() {
-    InspectorFrontendHost.copyText(WebInspector.DOMPresentationUtils.cssPath(this._node, true));
+    InspectorFrontendHost.copyText(Components.DOMPresentationUtils.cssPath(this._node, true));
   }
 
   _copyXPath() {
-    InspectorFrontendHost.copyText(WebInspector.DOMPresentationUtils.xPath(this._node, true));
+    InspectorFrontendHost.copyText(Components.DOMPresentationUtils.xPath(this._node, true));
   }
 
   _highlightSearchResults() {
     if (!this._searchQuery || !this._searchHighlightsVisible)
       return;
     this._hideSearchHighlight();
 
     var text = this.listItemElement.textContent;
     var regexObject = createPlainTextSearchRegex(this._searchQuery, 'gi');
 
     var match = regexObject.exec(text);
     var matchRanges = [];
     while (match) {
-      matchRanges.push(new WebInspector.SourceRange(match.index, match[0].length));
+      matchRanges.push(new Common.SourceRange(match.index, match[0].length));
       match = regexObject.exec(text);
     }
 
     // Fall back for XPath, etc. matches.
     if (!matchRanges.length)
-      matchRanges.push(new WebInspector.SourceRange(0, text.length));
+      matchRanges.push(new Common.SourceRange(0, text.length));
 
     this._highlightResult = [];
-    WebInspector.highlightSearchResults(this.listItemElement, matchRanges, this._highlightResult);
+    UI.highlightSearchResults(this.listItemElement, matchRanges, this._highlightResult);
   }
 
   _scrollIntoView() {
     function scrollIntoViewCallback(object) {
       /**
        * @suppressReceiverCheck
        * @this {!Element}
        */
       function scrollIntoView() {
         this.scrollIntoViewIfNeeded(true);
       }
 
       if (object)
         object.callFunction(scrollIntoView);
     }
 
     this._node.resolveToObject('', scrollIntoViewCallback);
   }
 
   _editAsHTML() {
-    var promise = WebInspector.Revealer.revealPromise(this.node());
-    promise.then(() => WebInspector.actionRegistry.action('elements.edit-as-html').execute());
+    var promise = Common.Revealer.revealPromise(this.node());
+    promise.then(() => UI.actionRegistry.action('elements.edit-as-html').execute());
   }
 };
 
-WebInspector.ElementsTreeElement.InitialChildrenLimit = 500;
+Elements.ElementsTreeElement.InitialChildrenLimit = 500;
 
 // A union of HTML4 and HTML5-Draft elements that explicitly
 // or implicitly (for HTML5) forbid the closing tag.
-WebInspector.ElementsTreeElement.ForbiddenClosingTagElements = new Set([
+Elements.ElementsTreeElement.ForbiddenClosingTagElements = new Set([
   'area', 'base',  'basefont', 'br',   'canvas',   'col',  'command', 'embed',  'frame', 'hr',
   'img',  'input', 'keygen',   'link', 'menuitem', 'meta', 'param',   'source', 'track', 'wbr'
 ]);
 
 // These tags we do not allow editing their tag name.
-WebInspector.ElementsTreeElement.EditTagBlacklist = new Set(['html', 'head', 'body']);
+Elements.ElementsTreeElement.EditTagBlacklist = new Set(['html', 'head', 'body']);