text: /*
   * 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
   *     notice, this list of conditions and the following disclaimer.
   * 2.  Redistributions in binary form must reproduce the above copyright
   *     notice, this list of conditions and the following disclaimer in the
   *     documentation and/or other materials provided with the distribution.
   * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
   *     its contributors may be used to endorse or promote products derived
   *     from this software without specific prior written permission.
   *
   * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
   * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
   * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
   * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
   * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
   * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
   * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
   * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
   * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
   * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
   */
  
  import * as Common from '../common/common.js';
  import * as Components from '../components/components.js';
  import * as Host from '../host/host.js';
  import * as Platform from '../platform/platform.js';
  import * as ProtocolClient from '../protocol_client/protocol_client.js';  // eslint-disable-line no-unused-vars
  import * as SDK from '../sdk/sdk.js';
  import * as TextUtils from '../text_utils/text_utils.js';
  import * as UI from '../ui/ui.js';
  
  import {canGetJSPath, cssPath, jsPath, xPath} from './DOMPath.js';
  import {MappedCharToEntity, UpdateRecord} from './ElementsTreeOutline.js';  // eslint-disable-line no-unused-vars
  import {MarkerDecorator} from './MarkerDecorator.js';
  
  /**
   * @unrestricted
   */
  export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
    /**
     * @param {!SDK.DOMModel.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));
      const gutterMenuIcon = UI.Icon.Icon.create('largeicon-menu', 'gutter-menu-icon');
      this._gutterContainer.appendChild(gutterMenuIcon);
      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 = InitialChildrenLimit;
      this._decorationsThrottler = new Common.Throttler.Throttler(100);
  
      /**
       * @type {!Element|undefined}
       */
      this._htmlEditElement;
    }
  
    /**
     * @param {!ElementsTreeElement} treeElement
     */
    static animateOnDOMUpdate(treeElement) {
      const tagName = treeElement.listItemElement.querySelector('.webkit-html-tag-name');
      UI.UIUtils.runCSSAnimationOnce(tagName || treeElement.listItemElement, 'dom-update-highlight');
    }
  
    /**
     * @param {!SDK.DOMModel.DOMNode} node
     * @return {!Array<!SDK.DOMModel.DOMNode>}
     */
    static visibleShadowRoots(node) {
      let roots = node.shadowRoots();
      if (roots.length && !Common.Settings.Settings.instance().moduleSetting('showUAShadowDOM').get()) {
        roots = roots.filter(filter);
      }
  
      /**
       * @param {!SDK.DOMModel.DOMNode} root
       */
      function filter(root) {
        return root.shadowRootType() !== SDK.DOMModel.DOMNode.ShadowRootTypes.UserAgent;
      }
      return roots;
    }
  
    /**
     * @param {!SDK.DOMModel.DOMNode} node
     * @return {boolean}
     */
    static canShowInlineText(node) {
      if (node.contentDocument() || node.importedDocument() || node.templateContent() ||
          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;
      }
      const textChild = node.firstChild;
      const maxInlineTextChildLength = 80;
      if (textChild.nodeValue().length < maxInlineTextChildLength) {
        return true;
      }
      return false;
    }
  
    /**
     * @param {!UI.ContextMenu.ContextMenu} contextMenu
     * @param {!SDK.DOMModel.DOMNode} node
     * @suppressGlobalPropertiesCheck
     */
    static populateForcedPseudoStateItems(contextMenu, node) {
      const pseudoClasses = ['active', 'hover', 'focus', 'visited', 'focus-within'];
      try {
        document.querySelector(':focus-visible');  // Will throw if not supported
        pseudoClasses.push('focus-visible');
      } catch (e) {
      }
      const forcedPseudoState = node.domModel().cssModel().pseudoState(node);
      const stateMenu = contextMenu.debugSection().appendSubMenuItem(Common.UIString.UIString('Force state'));
      for (let i = 0; i < pseudoClasses.length; ++i) {
        const pseudoClassForced = forcedPseudoState.indexOf(pseudoClasses[i]) >= 0;
        stateMenu.defaultSection().appendCheckboxItem(
            ':' + pseudoClasses[i], setPseudoStateCallback.bind(null, pseudoClasses[i], !pseudoClassForced),
            pseudoClassForced, false);
      }
  
      /**
       * @param {string} pseudoState
       * @param {boolean} enabled
       */
      function setPseudoStateCallback(pseudoState, enabled) {
        node.domModel().cssModel().forcePseudoState(node, pseudoState, enabled);
      }
    }
  
    /**
     * @return {boolean}
     */
    isClosingTag() {
      return !!this._elementCloseTag;
    }
  
    /**
     * @return {!SDK.DOMModel.DOMNode}
     */
    node() {
      return this._node;
    }
  
    /**
     * @return {boolean}
     */
    isEditing() {
      return !!this._editing;
    }
  
    /**
     * @param {string} searchQuery
     */
    highlightSearchResults(searchQuery) {
      if (this._searchQuery !== searchQuery) {
        this._hideSearchHighlight();
      }
  
      this._searchQuery = searchQuery;
      this._searchHighlightsVisible = true;
      this.updateTitle(null, true);
    }
  
    hideSearchHighlights() {
      delete this._searchHighlightsVisible;
      this._hideSearchHighlight();
    }
  
    _hideSearchHighlight() {
      if (!this._highlightResult) {
        return;
      }
  
      function updateEntryHide(entry) {
        switch (entry.type) {
          case 'added':
            entry.node.remove();
            break;
          case 'changed':
            entry.node.textContent = entry.oldText;
            break;
        }
      }
  
      for (let i = (this._highlightResult.length - 1); i >= 0; --i) {
        updateEntryHide(this._highlightResult[i]);
      }
  
      delete this._highlightResult;
    }
  
    /**
     * @param {boolean} inClipboard
     */
    setInClipboard(inClipboard) {
      if (this._inClipboard === inClipboard) {
        return;
      }
      this._inClipboard = inClipboard;
      this.listItemElement.classList.toggle('in-clipboard', inClipboard);
    }
  
    get hovered() {
      return this._hovered;
    }
  
    set hovered(x) {
      if (this._hovered === x) {
        return;
      }
  
      this._hovered = x;
  
      if (this.listItemElement) {
        if (x) {
          this._createSelection();
          this.listItemElement.classList.add('hovered');
        } else {
          this.listItemElement.classList.remove('hovered');
        }
      }
    }
  
    /**
     * @return {number}
     */
    expandedChildrenLimit() {
      return this._expandedChildrenLimit;
    }
  
    /**
     * @param {number} expandedChildrenLimit
     */
    setExpandedChildrenLimit(expandedChildrenLimit) {
      this._expandedChildrenLimit = expandedChildrenLimit;
    }
  
    _createSelection() {
      const listItemElement = this.listItemElement;
      if (!listItemElement) {
        return;
      }
  
      if (!this.selectionElement) {
        this.selectionElement = createElement('div');
        this.selectionElement.className = 'selection fill';
        this.selectionElement.style.setProperty('margin-left', (-this._computeLeftIndent()) + 'px');
        listItemElement.insertBefore(this.selectionElement, listItemElement.firstChild);
      }
    }
  
    _createHint() {
      if (this.listItemElement && !this._hintElement) {
        this._hintElement = this.listItemElement.createChild('span', 'selected-hint');
        const selectedElementCommand = '$0';
        this._hintElement.title = ls`Use ${selectedElementCommand} in the console to refer to this element.`;
        UI.ARIAUtils.markAsHidden(this._hintElement);
      }
    }
  
    /**
     * @override
     */
    onbind() {
      if (!this._elementCloseTag) {
        this._node[this.treeOutline.treeElementSymbol()] = this;
      }
    }
  
    /**
     * @override
     */
    onunbind() {
      if (this._node[this.treeOutline.treeElementSymbol()] === this) {
        this._node[this.treeOutline.treeElementSymbol()] = null;
      }
    }
  
    /**
     * @override
     */
    onattach() {
      if (this._hovered) {
        this._createSelection();
        this.listItemElement.classList.add('hovered');
      }
  
      this.updateTitle();
      this.listItemElement.draggable = true;
    }
  
    /**
     * @override
     * @returns {!Promise}
     */
    async onpopulate() {
      return this.treeOutline.populateTreeElement(this);
    }
  
    /**
     * @override
     */
    async expandRecursively() {
      await this._node.getSubtree(-1, true);
      await super.expandRecursively(Number.MAX_VALUE);
    }
  
    /**
     * @override
     */
    onexpand() {
      if (this._elementCloseTag) {
        return;
      }
  
      this.updateTitle();
    }
  
    /**
     * @override
     */
    oncollapse() {
      if (this._elementCloseTag) {
        return;
      }
  
      this.updateTitle();
    }
  
    /**
     * @override
     * @param {boolean=} omitFocus
     * @param {boolean=} selectedByUser
     * @return {boolean}
     */
    select(omitFocus, selectedByUser) {
      if (this._editing) {
        return false;
      }
      return super.select(omitFocus, selectedByUser);
    }
  
    /**
     * @override
     * @param {boolean=} selectedByUser
     * @return {boolean}
     */
    onselect(selectedByUser) {
      this.treeOutline.suppressRevealAndSelect = true;
      this.treeOutline.selectDOMNode(this._node, selectedByUser);
      if (selectedByUser) {
        this._node.highlight();
        Host.userMetrics.actionTaken(Host.UserMetrics.Action.ChangeInspectedNodeInElementsPanel);
      }
      this._createSelection();
      this._createHint();
      this.treeOutline.suppressRevealAndSelect = false;
      return true;
    }
  
    /**
     * @override
     * @return {boolean}
     */
    ondelete() {
      const startTagTreeElement = this.treeOutline.findTreeElement(this._node);
      startTagTreeElement ? startTagTreeElement.remove() : this.remove();
      return true;
    }
  
    /**
     * @override
     * @return {boolean}
     */
    onenter() {
      // On Enter or Return start editing the first attribute
      // or create a new attribute on the selected element.
      if (this._editing) {
        return false;
      }
  
      this._startEditing();
  
      // prevent a newline from being immediately inserted
      return true;
    }
  
    /**
     * @override
     */
    selectOnMouseDown(event) {
      super.selectOnMouseDown(event);
  
      if (this._editing) {
        return;
      }
  
      // Prevent selecting the nearest word on double click.
      if (event.detail >= 2) {
        event.preventDefault();
      }
    }
  
    /**
     * @override
     * @return {boolean}
     */
    ondblclick(event) {
      if (this._editing || this._elementCloseTag) {
        return false;
      }
  
      if (this._startEditingTarget(/** @type {!Element} */ (event.target))) {
        return false;
      }
  
      if (this.isExpandable() && !this.expanded) {
        this.expand();
      }
      return false;
    }
  
    /**
     * @return {boolean}
     */
    hasEditableNode() {
      return !this._node.isShadowRoot() && !this._node.ancestorUserAgentShadowRoot();
    }
  
    _insertInLastAttributePosition(tag, node) {
      if (tag.getElementsByClassName('webkit-html-attribute').length > 0) {
        tag.insertBefore(node, tag.lastChild);
      } else {
        const nodeName = tag.textContent.match(/^<(.*?)>$/)[1];
        tag.textContent = '';
        tag.createTextChild('<' + nodeName);
        tag.appendChild(node);
        tag.createTextChild('>');
      }
    }
  
    /**
     * @param {!Element} eventTarget
     * @return {boolean}
     */
    _startEditingTarget(eventTarget) {
      if (this.treeOutline.selectedDOMNode() !== this._node) {
        return false;
      }
  
      if (this._node.nodeType() !== Node.ELEMENT_NODE && this._node.nodeType() !== Node.TEXT_NODE) {
        return false;
      }
  
      const textNode = eventTarget.enclosingNodeOrSelfWithClass('webkit-html-text-node');
      if (textNode) {
        return this._startEditingTextNode(textNode);
      }
  
      const attribute = eventTarget.enclosingNodeOrSelfWithClass('webkit-html-attribute');
      if (attribute) {
        return this._startEditingAttribute(attribute, eventTarget);
      }
  
      const tagName = eventTarget.enclosingNodeOrSelfWithClass('webkit-html-tag-name');
      if (tagName) {
        return this._startEditingTagName(tagName);
      }
  
      const newAttribute = eventTarget.enclosingNodeOrSelfWithClass('add-attribute');
      if (newAttribute) {
        return this._addNewAttribute();
      }
  
      return false;
    }
  
    /**
     * @param {!Event} event
     */
    _showContextMenu(event) {
      this.treeOutline.showContextMenu(this, event);
    }
  
    /**
     * @param {!UI.ContextMenu.ContextMenu} contextMenu
     * @param {!Event} event
     */
    populateTagContextMenu(contextMenu, event) {
      // Add attribute-related actions.
      const treeElement = this._elementCloseTag ? this.treeOutline.findTreeElement(this._node) : this;
      contextMenu.editSection().appendItem(
          Common.UIString.UIString('Add attribute'), treeElement._addNewAttribute.bind(treeElement));
  
      const attribute = event.target.enclosingNodeOrSelfWithClass('webkit-html-attribute');
      const newAttribute = event.target.enclosingNodeOrSelfWithClass('add-attribute');
      if (attribute && !newAttribute) {
        contextMenu.editSection().appendItem(
            Common.UIString.UIString('Edit attribute'), this._startEditingAttribute.bind(this, attribute, event.target));
      }
      this.populateNodeContextMenu(contextMenu);
      ElementsTreeElement.populateForcedPseudoStateItems(contextMenu, treeElement.node());
      this.populateScrollIntoView(contextMenu);
      contextMenu.viewSection().appendItem(Common.UIString.UIString('Focus'), async () => {
        await this._node.focus();
      });
    }
  
    /**
     * @param {!UI.ContextMenu.ContextMenu} contextMenu
     */
    populateScrollIntoView(contextMenu) {
      contextMenu.viewSection().appendItem(
          Common.UIString.UIString('Scroll into view'), () => this._node.scrollIntoView());
    }
  
    populateTextContextMenu(contextMenu, textNode) {
      if (!this._editing) {
        contextMenu.editSection().appendItem(
            Common.UIString.UIString('Edit text'), this._startEditingTextNode.bind(this, textNode));
      }
      this.populateNodeContextMenu(contextMenu);
    }
  
    populateNodeContextMenu(contextMenu) {
      // Add free-form node-related actions.
      const isEditable = this.hasEditableNode();
      if (isEditable && !this._editing) {
        contextMenu.editSection().appendItem(Common.UIString.UIString('Edit as HTML'), this._editAsHTML.bind(this));
      }
      const isShadowRoot = this._node.isShadowRoot();
  
      // Place it here so that all "Copy"-ing items stick together.
      const copyMenu = contextMenu.clipboardSection().appendSubMenuItem(Common.UIString.UIString('Copy'));
      const createShortcut = UI.KeyboardShortcut.KeyboardShortcut.shortcutToString.bind(null);
      const modifier = UI.KeyboardShortcut.Modifiers.CtrlOrMeta;
      const treeOutline = this.treeOutline;
      let menuItem;
      let section;
      if (!isShadowRoot) {
        section = copyMenu.section();
        menuItem = section.appendItem(
            Common.UIString.UIString('Copy outerHTML'),
            treeOutline.performCopyOrCut.bind(treeOutline, false, this._node));
        menuItem.setShortcut(createShortcut('V', modifier));
      }
      if (this._node.nodeType() === Node.ELEMENT_NODE) {
        section.appendItem(Common.UIString.UIString('Copy selector'), this._copyCSSPath.bind(this));
        section.appendItem(
            Common.UIString.UIString('Copy JS path'), this._copyJSPath.bind(this), !canGetJSPath(this._node));
        section.appendItem(ls`Copy styles`, this._copyStyles.bind(this));
      }
      if (!isShadowRoot) {
        section.appendItem(Common.UIString.UIString('Copy XPath'), this._copyXPath.bind(this));
        section.appendItem(ls`Copy full XPath`, this._copyFullXPath.bind(this));
      }
  
      if (!isShadowRoot) {
        menuItem = copyMenu.clipboardSection().appendItem(
            Common.UIString.UIString('Cut element'), treeOutline.performCopyOrCut.bind(treeOutline, true, this._node),
            !this.hasEditableNode());
        menuItem.setShortcut(createShortcut('X', modifier));
        menuItem = copyMenu.clipboardSection().appendItem(
            Common.UIString.UIString('Copy element'), treeOutline.performCopyOrCut.bind(treeOutline, false, this._node));
        menuItem.setShortcut(createShortcut('C', modifier));
        menuItem = copyMenu.clipboardSection().appendItem(
            Common.UIString.UIString('Paste element'), treeOutline.pasteNode.bind(treeOutline, this._node),
            !treeOutline.canPaste(this._node));
        menuItem.setShortcut(createShortcut('V', modifier));
      }
  
      menuItem = contextMenu.debugSection().appendCheckboxItem(
          Common.UIString.UIString('Hide element'), treeOutline.toggleHideElement.bind(treeOutline, this._node),
          treeOutline.isToggledToHidden(this._node));
      menuItem.setShortcut(self.UI.shortcutRegistry.shortcutTitleForAction('elements.hide-element'));
  
      if (isEditable) {
        contextMenu.editSection().appendItem(Common.UIString.UIString('Delete element'), this.remove.bind(this));
      }
  
      contextMenu.viewSection().appendItem(ls`Expand recursively`, this.expandRecursively.bind(this));
      contextMenu.viewSection().appendItem(ls`Collapse children`, this.collapseChildren.bind(this));
    }
  
    _startEditing() {
      if (this.treeOutline.selectedDOMNode() !== this._node) {
        return;
      }
  
      const listItem = this.listItemElement;
  
      if (this._canAddAttributes) {
        const attribute = listItem.getElementsByClassName('webkit-html-attribute')[0];
        if (attribute) {
          return this._startEditingAttribute(
              attribute, attribute.getElementsByClassName('webkit-html-attribute-value')[0]);
        }
  
        return this._addNewAttribute();
      }
  
      if (this._node.nodeType() === Node.TEXT_NODE) {
        const textNode = listItem.getElementsByClassName('webkit-html-text-node')[0];
        if (textNode) {
          return this._startEditingTextNode(textNode);
        }
        return;
      }
    }
  
    _addNewAttribute() {
      // Cannot just convert the textual html into an element without
      // a parent node. Use a temporary span container for the HTML.
      const container = createElement('span');
      this._buildAttributeDOM(container, ' ', '', null);
      const attr = container.firstElementChild;
      attr.style.marginLeft = '2px';   // overrides the .editing margin rule
      attr.style.marginRight = '2px';  // overrides the .editing margin rule
  
      const tag = this.listItemElement.getElementsByClassName('webkit-html-tag')[0];
      this._insertInLastAttributePosition(tag, attr);
      attr.scrollIntoViewIfNeeded(true);
      return this._startEditingAttribute(attr, attr);
    }
  
    _triggerEditAttribute(attributeName) {
      const attributeElements = this.listItemElement.getElementsByClassName('webkit-html-attribute-name');
      for (let i = 0, len = attributeElements.length; i < len; ++i) {
        if (attributeElements[i].textContent === attributeName) {
          for (let elem = attributeElements[i].nextSibling; elem; elem = elem.nextSibling) {
            if (elem.nodeType !== Node.ELEMENT_NODE) {
              continue;
            }
  
            if (elem.classList.contains('webkit-html-attribute-value')) {
              return this._startEditingAttribute(elem.parentNode, elem);
            }
          }
        }
      }
    }
  
    _startEditingAttribute(attribute, elementForSelection) {
      console.assert(this.listItemElement.isAncestor(attribute));
  
      if (UI.UIUtils.isBeingEdited(attribute)) {
        return true;
      }
  
      const attributeNameElement = attribute.getElementsByClassName('webkit-html-attribute-name')[0];
      if (!attributeNameElement) {
        return false;
      }
  
      const attributeName = attributeNameElement.textContent;
      const 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 (let child = node.firstChild; child; child = child.nextSibling) {
          removeZeroWidthSpaceRecursive(child);
        }
      }
  
      const attributeValue = attributeName && attributeValueElement ? this._node.getAttribute(attributeName) : undefined;
      if (attributeValue !== undefined) {
        attributeValueElement.setTextContentTruncatedIfNeeded(
            attributeValue, Common.UIString.UIString('<value is too large to edit>'));
      }
  
      // Remove zero-width spaces that were added by nodeTitleInfo.
      removeZeroWidthSpaceRecursive(attribute);
  
      const config = new UI.InplaceEditor.Config(
          this._attributeEditingCommitted.bind(this), this._editingCancelled.bind(this), attributeName);
  
      /**
       * @param {!Event} event
       * @return {string}
       */
      function postKeyDownFinishHandler(event) {
        UI.UIUtils.handleElementValueModifications(event, attribute);
        return '';
      }
  
      if (!Common.ParsedURL.ParsedURL.fromString(attributeValueElement.textContent)) {
        config.setPostKeydownFinishHandler(postKeyDownFinishHandler);
      }
  
      this._editing = UI.InplaceEditor.InplaceEditor.startEditing(attribute, config);
  
      this.listItemElement.getComponentSelection().selectAllChildren(elementForSelection);
  
      return true;
    }
  
    /**
     * @param {!Element} textNodeElement
     */
    _startEditingTextNode(textNodeElement) {
      if (UI.UIUtils.isBeingEdited(textNodeElement)) {
        return true;
      }
  
      let 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;
      }
  
      const container = textNodeElement.enclosingNodeOrSelfWithClass('webkit-html-text-node');
      if (container) {
        container.textContent = textNode.nodeValue();
      }  // Strip the CSS or JS highlighting if present.
      const config = new UI.InplaceEditor.Config(
          this._textNodeEditingCommitted.bind(this, textNode), this._editingCancelled.bind(this));
      this._editing = UI.InplaceEditor.InplaceEditor.startEditing(textNodeElement, config);
      this.listItemElement.getComponentSelection().selectAllChildren(textNodeElement);
  
      return true;
    }
  
    /**
     * @param {!Element=} tagNameElement
     */
    _startEditingTagName(tagNameElement) {
      if (!tagNameElement) {
        tagNameElement = this.listItemElement.getElementsByClassName('webkit-html-tag-name')[0];
        if (!tagNameElement) {
          return false;
        }
      }
  
      const tagName = tagNameElement.textContent;
      if (EditTagBlacklist.has(tagName.toLowerCase())) {
        return false;
      }
  
      if (UI.UIUtils.isBeingEdited(tagNameElement)) {
        return true;
      }
  
      const closingTagElement = this._distinctClosingTagElement();
  
      /**
       * @param {!Event} event
       */
      function keyupListener(event) {
        if (closingTagElement) {
          closingTagElement.textContent = '</' + tagNameElement.textContent + '>';
        }
      }
  
      /**
       * @param {!Event} event
       */
      const keydownListener = event => {
        if (event.key !== ' ') {
          return;
        }
        this._editing.commit();
        event.consume(true);
      };
  
      /**
       * @param {!Element} element
       * @param {string} newTagName
       * @this {ElementsTreeElement}
       */
      function editingComitted(element, newTagName) {
        tagNameElement.removeEventListener('keyup', keyupListener, false);
        tagNameElement.removeEventListener('keydown', keydownListener, false);
        this._tagNameEditingCommitted.apply(this, arguments);
      }
  
      /**
       * @this {ElementsTreeElement}
       */
      function editingCancelled() {
        tagNameElement.removeEventListener('keyup', keyupListener, false);
        tagNameElement.removeEventListener('keydown', keydownListener, false);
        this._editingCancelled.apply(this, arguments);
      }
  
      tagNameElement.addEventListener('keyup', keyupListener, false);
      tagNameElement.addEventListener('keydown', keydownListener, false);
  
      const config = new UI.InplaceEditor.Config(editingComitted.bind(this), editingCancelled.bind(this), tagName);
      this._editing = UI.InplaceEditor.InplaceEditor.startEditing(tagNameElement, config);
      this.listItemElement.getComponentSelection().selectAllChildren(tagNameElement);
      return true;
    }
  
    /**
     * @param {function(string, string)} commitCallback
     * @param {function()} disposeCallback
     * @param {?string} maybeInitialValue
     */
    _startEditingAsHTML(commitCallback, disposeCallback, maybeInitialValue) {
      if (maybeInitialValue === null) {
        return;
      }
      let initialValue = maybeInitialValue;  // To suppress a compiler warning.
      if (this._editing) {
        return;
      }
  
      initialValue = this._convertWhitespaceToEntities(initialValue).text;
  
      this._htmlEditElement = createElement('div');
      this._htmlEditElement.className = 'source-code elements-tree-editor';
  
      // Hide header items.
      let child = this.listItemElement.firstChild;
      while (child) {
        child.style.display = 'none';
        child = child.nextSibling;
      }
      // Hide children item.
      if (this.childrenListElement) {
        this.childrenListElement.style.display = 'none';
      }
      // Append editor.
      this.listItemElement.appendChild(this._htmlEditElement);
  
      self.runtime.extension(UI.TextEditor.TextEditorFactory).instance().then(gotFactory.bind(this));
  
      /**
       * @param {!UI.TextEditor.TextEditorFactory} factory
       * @this {ElementsTreeElement}
       */
      function gotFactory(factory) {
        const editor = factory.createEditor({
          lineNumbers: false,
          lineWrapping: Common.Settings.Settings.instance().moduleSetting('domWordWrap').get(),
          mimeType: 'text/html',
          autoHeight: false,
          padBottom: false
        });
        this._editing =
            {commit: commit.bind(this), cancel: dispose.bind(this), editor: editor, resize: resize.bind(this)};
        resize.call(this);
  
        editor.widget().show(
            /** @type {!Element} */ (this._htmlEditElement));
        editor.setText(initialValue);
        editor.widget().focus();
        editor.widget().element.addEventListener('focusout', event => {
          // The relatedTarget is null when no element gains focus, e.g. switching windows.
          if (event.relatedTarget && !event.relatedTarget.isSelfOrDescendant(editor.widget().element)) {
            this._editing.commit();
          }
        }, false);
        editor.widget().element.addEventListener('keydown', keydown.bind(this), true);
  
        this.treeOutline.setMultilineEditing(this._editing);
      }
  
      /**
       * @this {ElementsTreeElement}
       */
      function resize() {
        if (this._htmlEditElement) {
          this._htmlEditElement.style.width = this.treeOutline.visibleWidth() - this._computeLeftIndent() - 30 + 'px';
        }
        this._editing.editor.onResize();
      }
  
      /**
       * @this {ElementsTreeElement}
       */
      function commit() {
        commitCallback(initialValue, this._editing.editor.text());
        dispose.call(this);
      }
  
      /**
       * @this {ElementsTreeElement}
       */
      function dispose() {
        if (!this._editing || !this._editing.editor) {
          return;
        }
        this._editing.editor.widget().element.removeEventListener('blur', this._editing.commit, true);
        this._editing.editor.widget().detach();
        delete this._editing;
  
        // Remove editor.
        this.listItemElement.removeChild(this._htmlEditElement);
        delete this._htmlEditElement;
        // Unhide children item.
        if (this.childrenListElement) {
          this.childrenListElement.style.removeProperty('display');
        }
        // Unhide header items.
        let child = this.listItemElement.firstChild;
        while (child) {
          child.style.removeProperty('display');
          child = child.nextSibling;
        }
  
        if (this.treeOutline) {
          this.treeOutline.setMultilineEditing(null);
          this.treeOutline.focus();
        }
  
        disposeCallback();
      }
  
      /**
       * @param {!Event} event
       * @this {!ElementsTreeElement}
       */
      function keydown(event) {
        const isMetaOrCtrl =
            UI.KeyboardShortcut.KeyboardShortcut.eventHasCtrlOrMeta(/** @type {!KeyboardEvent} */ (event)) &&
            !event.altKey && !event.shiftKey;
        if (isEnterKey(event) && (isMetaOrCtrl || event.isMetaOrCtrlForTest)) {
          event.consume(true);
          this._editing.commit();
        } else if (event.keyCode === UI.KeyboardShortcut.Keys.Esc.code || event.key === 'Escape') {
          event.consume(true);
          this._editing.cancel();
        }
      }
    }
  
    _attributeEditingCommitted(element, newText, oldText, attributeName, moveDirection) {
      delete this._editing;
  
      const treeOutline = this.treeOutline;
  
      /**
       * @param {?ProtocolClient.InspectorBackend.ProtocolError=} error
       * @this {ElementsTreeElement}
       */
      function moveToNextAttributeIfNeeded(error) {
        if (error) {
          this._editingCancelled(element, attributeName);
        }
  
        if (!moveDirection) {
          return;
        }
  
        treeOutline.runPendingUpdates();
        treeOutline.focus();
  
        // Search for the attribute's position, and then decide where to move to.
        const attributes = this._node.attributes();
        for (let i = 0; i < attributes.length; ++i) {
          if (attributes[i].name !== attributeName) {
            continue;
          }
  
          if (moveDirection === 'backward') {
            if (i === 0) {
              this._startEditingTagName();
            } else {
              this._triggerEditAttribute(attributes[i - 1].name);
            }
          } else {
            if (i === attributes.length - 1) {
              this._addNewAttribute();
            } else {
              this._triggerEditAttribute(attributes[i + 1].name);
            }
          }
          return;
        }
  
        // Moving From the "New Attribute" position.
        if (moveDirection === 'backward') {
          if (newText === ' ') {
            // Moving from "New Attribute" that was not edited
            if (attributes.length > 0) {
              this._triggerEditAttribute(attributes[attributes.length - 1].name);
            }
          } else {
            // Moving from "New Attribute" that holds new value
            if (attributes.length > 1) {
              this._triggerEditAttribute(attributes[attributes.length - 2].name);
            }
          }
        } else if (moveDirection === 'forward') {
          if (!Platform.StringUtilities.isWhitespace(newText)) {
            this._addNewAttribute();
          } else {
            this._startEditingTagName();
          }
        }
      }
  
      if ((attributeName.trim() || newText.trim()) && oldText !== newText) {
        this._node.setAttribute(attributeName, newText, moveToNextAttributeIfNeeded.bind(this));
        return;
      }
  
      this.updateTitle();
      moveToNextAttributeIfNeeded.call(this);
    }
  
    _tagNameEditingCommitted(element, newText, oldText, tagName, moveDirection) {
      delete this._editing;
      const self = this;
  
      function cancel() {
        const closingTagElement = self._distinctClosingTagElement();
        if (closingTagElement) {
          closingTagElement.textContent = '</' + tagName + '>';
        }
  
        self._editingCancelled(element, tagName);
        moveToNextAttributeIfNeeded.call(self);
      }
  
      /**
       * @this {ElementsTreeElement}
       */
      function moveToNextAttributeIfNeeded() {
        if (moveDirection !== 'forward') {
          this._addNewAttribute();
          return;
        }
  
        const attributes = this._node.attributes();
        if (attributes.length > 0) {
          this._triggerEditAttribute(attributes[0].name);
        } else {
          this._addNewAttribute();
        }
      }
  
      newText = newText.trim();
      if (newText === oldText) {
        cancel();
        return;
      }
  
      const treeOutline = this.treeOutline;
      const wasExpanded = this.expanded;
  
      this._node.setNodeName(newText, (error, newNode) => {
        if (error || !newNode) {
          cancel();
          return;
        }
        const newTreeItem = treeOutline.selectNodeAfterEdit(wasExpanded, error, newNode);
        moveToNextAttributeIfNeeded.call(newTreeItem);
      });
    }
  
    /**
     * @param {!SDK.DOMModel.DOMNode} textNode
     * @param {!Element} element
     * @param {string} newText
     */
    _textNodeEditingCommitted(textNode, element, newText) {
      delete this._editing;
  
      /**
       * @this {ElementsTreeElement}
       */
      function callback() {
        this.updateTitle();
      }
      textNode.setNodeValue(newText, callback.bind(this));
    }
  
    /**
     * @param {!Element} element
     * @param {*} context
     */
    _editingCancelled(element, context) {
      delete this._editing;
  
      // Need to restore attributes structure.
      this.updateTitle();
    }
  
    /**
     * @return {!Element}
     */
    _distinctClosingTagElement() {
      // FIXME: Improve the Tree Element / Outline Abstraction to prevent crawling the DOM
  
      // For an expanded element, it will be the last element with class "close"
      // in the child element list.
      if (this.expanded) {
        const closers = this.childrenListElement.querySelectorAll('.close');
        return closers[closers.length - 1];
      }
  
      // 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.
      const tags = this.listItemElement.getElementsByClassName('webkit-html-tag');
      return (tags.length === 1 ? null : tags[tags.length - 1]);
    }
  
    /**
     * @param {?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();
      } else {
        const nodeInfo = this._nodeTitleInfo(updateRecord || null);
        if (this._node.nodeType() === Node.DOCUMENT_FRAGMENT_NODE && this._node.isInShadowTree() &&
            this._node.shadowRootType()) {
          this.childrenListElement.classList.add('shadow-root');
          let depth = 4;
          for (let node = this._node; depth && node; node = node.parentNode) {
            if (node.nodeType() === Node.DOCUMENT_FRAGMENT_NODE) {
              depth--;
            }
          }
          if (!depth) {
            this.childrenListElement.classList.add('shadow-root-deep');
          } else {
            this.childrenListElement.classList.add('shadow-root-depth-' + depth);
          }
        }
        const highlightElement = createElement('span');
        highlightElement.className = 'highlight';
        highlightElement.appendChild(nodeInfo);
        this.title = highlightElement;
        this.updateDecorations();
        this.listItemElement.insertBefore(this._gutterContainer, this.listItemElement.firstChild);
        delete this._highlightResult;
        delete this.selectionElement;
        delete this._hintElement;
        if (this.selected) {
          this._createSelection();
          this._createHint();
        }
      }
  
      this._highlightSearchResults();
    }
  
    /**
     * @return {number}
     */
    _computeLeftIndent() {
      let treeElement = this.parent;
      let depth = 0;
      while (treeElement !== null) {
        depth++;
        treeElement = treeElement.parent;
      }
  
      /** Keep it in sync with elementsTreeOutline.css **/
      return 12 * (depth - 2) + (this.isExpandable() ? 1 : 12);
    }
  
    updateDecorations() {
      this._gutterContainer.style.left = (-this._computeLeftIndent()) + 'px';
  
      if (this.isClosingTag()) {
        return;
      }
  
      if (this._node.nodeType() !== Node.ELEMENT_NODE) {
        return;
      }
  
      this._decorationsThrottler.schedule(this._updateDecorationsInternal.bind(this));
    }
  
    /**
     * @return {!Promise}
     */
    _updateDecorationsInternal() {
      if (!this.treeOutline) {
        return Promise.resolve();
      }
  
      const node = this._node;
  
      if (!this.treeOutline._decoratorExtensions) {
        this.treeOutline._decoratorExtensions = self.runtime.extensions(MarkerDecorator);
      }
  
      const markerToExtension = new Map();
      for (let i = 0; i < this.treeOutline._decoratorExtensions.length; ++i) {
        markerToExtension.set(
            this.treeOutline._decoratorExtensions[i].descriptor()['marker'], this.treeOutline._decoratorExtensions[i]);
      }
  
      const promises = [];
      const decorations = [];
      const descendantDecorations = [];
      node.traverseMarkers(visitor);
  
      /**
       * @param {!SDK.DOMModel.DOMNode} n
       * @param {string} marker
       */
      function visitor(n, marker) {
        const extension = markerToExtension.get(marker);
        if (!extension) {
          return;
        }
        promises.push(extension.instance().then(collectDecoration.bind(null, n)));
      }
  
      /**
       * @param {!SDK.DOMModel.DOMNode} n
       * @param {!MarkerDecorator} decorator
       */
      function collectDecoration(n, decorator) {
        const decoration = decorator.decorate(n);
        if (!decoration) {
          return;
        }
        (n === node ? decorations : descendantDecorations).push(decoration);
      }
  
      return Promise.all(promises).then(updateDecorationsUI.bind(this));
  
      /**
       * @this {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;
        }
  
        const colors = new Set();
        const titles = createElement('div');
  
        for (const decoration of decorations) {
          const titleElement = titles.createChild('div');
          titleElement.textContent = decoration.title;
          colors.add(decoration.color);
        }
        if (this.expanded && !decorations.length) {
          return;
        }
  
        const descendantColors = new Set();
        if (descendantDecorations.length) {
          let element = titles.createChild('div');
          element.textContent = Common.UIString.UIString('Children:');
          for (const decoration of descendantDecorations) {
            element = titles.createChild('div');
            element.style.marginLeft = '15px';
            element.textContent = decoration.title;
            descendantColors.add(decoration.color);
          }
        }
  
        let offset = 0;
        processColors.call(this, colors, 'elements-gutter-decoration');
        if (!this.expanded) {
          processColors.call(this, descendantColors, 'elements-gutter-decoration elements-has-decorated-children');
        }
        UI.Tooltip.Tooltip.install(this._decorationsElement, titles);
  
        /**
         * @param {!Set<string>} colors
         * @param {string} className
         * @this {ElementsTreeElement}
         */
        function processColors(colors, className) {
          for (const color of colors) {
            const 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 {?UpdateRecord} updateRecord
     * @param {boolean=} forceValue
     * @param {!SDK.DOMModel.DOMNode=} node
     */
    _buildAttributeDOM(parentElement, name, value, updateRecord, forceValue, node) {
      const closingPunctuationRegex = /[\/;:\)\]\}]/g;
      let highlightIndex = 0;
      let highlightCount;
      let additionalHighlightOffset = 0;
      let 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 {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);
        UI.UIUtils.highlightRangesWithStyleClass(element, result.entityRanges, 'webkit-html-entity-value');
      }
  
      const hasText = (forceValue || value.length > 0);
      const attrSpanElement = parentElement.createChild('span', 'webkit-html-attribute');
      const attrNameElement = attrSpanElement.createChild('span', 'webkit-html-attribute-name');
      attrNameElement.textContent = name;
  
      if (hasText) {
        attrSpanElement.createTextChild('=\u200B"');
      }
  
      const attrValueElement = attrSpanElement.createChild('span', 'webkit-html-attribute-value');
  
      if (updateRecord && updateRecord.isAttributeModified(name)) {
        UI.UIUtils.runCSSAnimationOnce(hasText ? attrValueElement : attrNameElement, 'dom-update-highlight');
      }
  
      /**
       * @this {ElementsTreeElement}
       * @param {string} value
       * @return {!Element}
       */
      function linkifyValue(value) {
        const rewrittenHref = node.resolveURL(value);
        if (rewrittenHref === null) {
          const span = createElement('span');
          setValueWithEntities.call(this, span, value);
          return span;
        }
        value = value.replace(closingPunctuationRegex, '$&\u200B');
        if (value.startsWith('data:')) {
          value = value.trimMiddle(60);
        }
        const link = node.nodeName().toLowerCase() === 'a' ?
            UI.XLink.XLink.create(rewrittenHref, value, '', true /* preventClick */) :
            Components.Linkifier.Linkifier.linkifyURL(rewrittenHref, {text: value, preventClick: true});
        link[HrefSymbol] = rewrittenHref;
        return link;
      }
  
      const nodeName = node ? node.nodeName().toLowerCase() : '';
      if (nodeName && (name === 'src' || name === 'href')) {
        attrValueElement.appendChild(linkifyValue.call(this, value));
      } else if ((nodeName === 'img' || nodeName === 'source') && name === 'srcset') {
        attrValueElement.appendChild(linkifySrcset.call(this, value));
      } else if (nodeName === 'image' && (name === 'xlink:href' || name === 'href')) {
        attrValueElement.appendChild(linkifySrcset.call(this, value));
      } else {
        setValueWithEntities.call(this, attrValueElement, value);
      }
  
      if (hasText) {
        attrSpanElement.createTextChild('"');
      }
  
      /**
       * @param {string} value
       * @return {!DocumentFragment}
       * @this {!ElementsTreeElement}
       */
      function linkifySrcset(value) {
        // Splitting normally on commas or spaces will break on valid srcsets "foo 1x,bar 2x" and "data:,foo 1x".
        // 1) Let the index of the next space be `indexOfSpace`.
        // 2a) If the character at `indexOfSpace - 1` is a comma, collect the preceding characters up to
        //     `indexOfSpace - 1` as a URL and repeat step 1).
        // 2b) Else, collect the preceding characters as a URL.
        // 3) Collect the characters from `indexOfSpace` up to the next comma as the size descriptor and repeat step 1).
        // https://html.spec.whatwg.org/C/#parse-a-srcset-attribute
        const fragment = createDocumentFragment();
        let i = 0;
        while (value.length) {
          if (i++ > 0) {
            fragment.createTextChild(' ');
          }
          value = value.trim();
          // The url and descriptor may end with a separating comma.
          let url = '';
          let descriptor = '';
          const indexOfSpace = value.search(/\s/);
          if (indexOfSpace === -1) {
            url = value;
          } else if (indexOfSpace > 0 && value[indexOfSpace - 1] === ',') {
            url = value.substring(0, indexOfSpace);
          } else {
            url = value.substring(0, indexOfSpace);
            const indexOfComma = value.indexOf(',', indexOfSpace);
            if (indexOfComma !== -1) {
              descriptor = value.substring(indexOfSpace, indexOfComma + 1);
            } else {
              descriptor = value.substring(indexOfSpace);
            }
          }
  
          if (url) {
            // Up to one trailing comma should be removed from `url`.
            if (url.endsWith(',')) {
              fragment.appendChild(linkifyValue.call(this, url.substring(0, url.length - 1)));
              fragment.createTextChild(',');
            } else {
              fragment.appendChild(linkifyValue.call(this, url));
            }
          }
          if (descriptor) {
            fragment.createTextChild(descriptor);
          }
          value = value.substring(url.length + descriptor.length);
        }
        return fragment;
      }
    }
  
    /**
     * @param {!Node} parentElement
     * @param {string} pseudoElementName
     */
    _buildPseudoElementDOM(parentElement, pseudoElementName) {
      const 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 {?UpdateRecord} updateRecord
     */
    _buildTagDOM(parentElement, tagName, isClosingTag, isDistinctTreeElement, updateRecord) {
      const node = this._node;
      const classes = ['webkit-html-tag'];
      if (isClosingTag && isDistinctTreeElement) {
        classes.push('close');
      }
      const tagElement = parentElement.createChild('span', classes.join(' '));
      tagElement.createTextChild('<');
      const tagNameElement =
          tagElement.createChild('span', isClosingTag ? 'webkit-html-close-tag-name' : 'webkit-html-tag-name');
      tagNameElement.textContent = (isClosingTag ? '/' : '') + tagName;
      if (!isClosingTag) {
        if (node.hasAttributes()) {
          const attributes = node.attributes();
          for (let i = 0; i < attributes.length; ++i) {
            const attr = attributes[i];
            tagElement.createTextChild(' ');
            this._buildAttributeDOM(tagElement, attr.name, attr.value, updateRecord, false, node);
          }
        }
        if (updateRecord) {
          let hasUpdates = updateRecord.hasRemovedAttributes() || updateRecord.hasRemovedChildren();
          hasUpdates |= !this.expanded && updateRecord.hasChangedChildren();
          if (hasUpdates) {
            UI.UIUtils.runCSSAnimationOnce(tagNameElement, 'dom-update-highlight');
          }
        }
      }
  
      tagElement.createTextChild('>');
      parentElement.createTextChild('\u200B');
    }
  
    /**
     * @param {string} text
     * @return {!{text: string, entityRanges: !Array.<!TextUtils.TextRange.SourceRange>}}
     */
    _convertWhitespaceToEntities(text) {
      let result = '';
      let lastIndexAfterEntity = 0;
      const entityRanges = [];
      const charToEntity = MappedCharToEntity;
      for (let i = 0, size = text.length; i < size; ++i) {
        const char = text.charAt(i);
        if (charToEntity[char]) {
          result += text.substring(lastIndexAfterEntity, i);
          const 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 {?UpdateRecord} updateRecord
     * @return {!DocumentFragment} result
     */
    _nodeTitleInfo(updateRecord) {
      const node = this._node;
      const titleDOM = createDocumentFragment();
  
      switch (node.nodeType()) {
        case Node.ATTRIBUTE_NODE:
          this._buildAttributeDOM(
              titleDOM, /** @type {string} */ (node.name), /** @type {string} */ (node.value), updateRecord, true);
          break;
  
        case Node.ELEMENT_NODE:
          const pseudoType = node.pseudoType();
          if (pseudoType) {
            this._buildPseudoElementDOM(titleDOM, pseudoType);
            break;
          }
  
          const tagName = node.nodeNameInCorrectCase();
          if (this._elementCloseTag) {
            this._buildTagDOM(titleDOM, tagName, true, true, updateRecord);
            break;
          }
  
          this._buildTagDOM(titleDOM, tagName, false, false, updateRecord);
  
          if (this.isExpandable()) {
            if (!this.expanded) {
              const textNodeElement = titleDOM.createChild('span', 'webkit-html-text-node bogus');
              textNodeElement.textContent = '…';
              titleDOM.createTextChild('\u200B');
              this._buildTagDOM(titleDOM, tagName, true, false, updateRecord);
            }
            break;
          }
  
          if (ElementsTreeElement.canShowInlineText(node)) {
            const textNodeElement = titleDOM.createChild('span', 'webkit-html-text-node');
            const result = this._convertWhitespaceToEntities(node.firstChild.nodeValue());
            textNodeElement.textContent = result.text;
            UI.UIUtils.highlightRangesWithStyleClass(textNodeElement, result.entityRanges, 'webkit-html-entity-value');
            titleDOM.createTextChild('\u200B');
            this._buildTagDOM(titleDOM, tagName, true, false, updateRecord);
            if (updateRecord && updateRecord.hasChangedChildren()) {
              UI.UIUtils.runCSSAnimationOnce(textNodeElement, 'dom-update-highlight');
            }
            if (updateRecord && updateRecord.isCharDataModified()) {
              UI.UIUtils.runCSSAnimationOnce(textNodeElement, 'dom-update-highlight');
            }
            break;
          }
  
          if (this.treeOutline.isXMLMimeType || !ForbiddenClosingTagElements.has(tagName)) {
            this._buildTagDOM(titleDOM, tagName, true, false, updateRecord);
          }
          break;
  
        case Node.TEXT_NODE:
          if (node.parentNode && node.parentNode.nodeName().toLowerCase() === 'script') {
            const newNode = titleDOM.createChild('span', 'webkit-html-text-node webkit-html-js-node');
            const text = node.nodeValue();
            newNode.textContent = text.startsWith('\n') ? text.substring(1) : text;
  
            const javascriptSyntaxHighlighter = new UI.SyntaxHighlighter.SyntaxHighlighter('text/javascript', true);
            javascriptSyntaxHighlighter.syntaxHighlightNode(newNode).then(updateSearchHighlight.bind(this));
          } else if (node.parentNode && node.parentNode.nodeName().toLowerCase() === 'style') {
            const newNode = titleDOM.createChild('span', 'webkit-html-text-node webkit-html-css-node');
            const text = node.nodeValue();
            newNode.textContent = text.startsWith('\n') ? text.substring(1) : text;
  
            const cssSyntaxHighlighter = new UI.SyntaxHighlighter.SyntaxHighlighter('text/css', true);
            cssSyntaxHighlighter.syntaxHighlightNode(newNode).then(updateSearchHighlight.bind(this));
          } else {
            titleDOM.createTextChild('"');
            const textNodeElement = titleDOM.createChild('span', 'webkit-html-text-node');
            const result = this._convertWhitespaceToEntities(node.nodeValue());
            textNodeElement.textContent = result.text;
            UI.UIUtils.highlightRangesWithStyleClass(textNodeElement, result.entityRanges, 'webkit-html-entity-value');
            titleDOM.createTextChild('"');
            if (updateRecord && updateRecord.isCharDataModified()) {
              UI.UIUtils.runCSSAnimationOnce(textNodeElement, 'dom-update-highlight');
            }
          }
          break;
  
        case Node.COMMENT_NODE:
          const commentElement = titleDOM.createChild('span', 'webkit-html-comment');
          commentElement.createTextChild('<!--' + node.nodeValue() + '-->');
          break;
  
        case Node.DOCUMENT_TYPE_NODE:
          const docTypeElement = titleDOM.createChild('span', 'webkit-html-doctype');
          docTypeElement.createTextChild('<!DOCTYPE ' + node.nodeName());
          if (node.publicId) {
            docTypeElement.createTextChild(' PUBLIC "' + node.publicId + '"');
            if (node.systemId) {
              docTypeElement.createTextChild(' "' + node.systemId + '"');
            }
          } else if (node.systemId) {
            docTypeElement.createTextChild(' SYSTEM "' + node.systemId + '"');
          }
  
          if (node.internalSubset) {
            docTypeElement.createTextChild(' [' + node.internalSubset + ']');
          }
  
          docTypeElement.createTextChild('>');
          break;
  
        case Node.CDATA_SECTION_NODE:
          const cdataElement = titleDOM.createChild('span', 'webkit-html-text-node');
          cdataElement.createTextChild('<![CDATA[' + node.nodeValue() + ']]>');
          break;
  
        case Node.DOCUMENT_FRAGMENT_NODE:
          const fragmentElement = titleDOM.createChild('span', 'webkit-html-fragment');
          fragmentElement.textContent = Platform.StringUtilities.collapseWhitespace(node.nodeNameInCorrectCase());
          break;
        default:
          const nameWithSpaceCollapsed = Platform.StringUtilities.collapseWhitespace(node.nodeNameInCorrectCase());
          titleDOM.createTextChild(nameWithSpaceCollapsed);
      }
  
      /**
       * @this {ElementsTreeElement}
       */
      function updateSearchHighlight() {
        delete this._highlightResult;
        this._highlightSearchResults();
      }
  
      return titleDOM;
    }
  
    remove() {
      if (this._node.pseudoType()) {
        return;
      }
      const 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) {
        this._editing.commit();
        return;
      }
  
      if (startEditing === false) {
        return;
      }
  
      /**
       * @param {?ProtocolClient.InspectorBackend.ProtocolError} error
       */
      function selectNode(error) {
        if (callback) {
          callback(!error);
        }
      }
  
      /**
       * @param {string} initialValue
       * @param {string} value
       */
      function commitChange(initialValue, value) {
        if (initialValue !== value) {
          node.setOuterHTML(value, selectNode);
        }
      }
  
      function disposeCallback() {
        if (callback) {
          callback(false);
        }
      }
  
      const node = this._node;
      node.getOuterHTML().then(this._startEditingAsHTML.bind(this, commitChange, disposeCallback));
    }
  
    _copyCSSPath() {
      Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(cssPath(this._node, true));
    }
  
    _copyJSPath() {
      Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(jsPath(this._node, true));
    }
  
    _copyXPath() {
      Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(xPath(this._node, true));
    }
  
    _copyFullXPath() {
      Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(xPath(this._node, false));
    }
  
    async _copyStyles() {
      const node = this._node;
      const cssModel = node.domModel().cssModel();
      const cascade = await cssModel.cachedMatchedCascadeForNode(node);
      if (!cascade) {
        return;
      }
      /** @type {!Array<string>} */
      const lines = [];
      for (const style of cascade.nodeStyles().reverse()) {
        for (const property of style.leadingProperties()) {
          if (!property.parsedOk || property.disabled || !property.activeInStyle() || property.implicit) {
            continue;
          }
          if (cascade.isInherited(style) && !SDK.CSSMetadata.cssMetadata().isPropertyInherited(property.name)) {
            continue;
          }
          if (style.parentRule && style.parentRule.isUserAgent()) {
            continue;
          }
          if (cascade.propertyState(property) !== SDK.CSSMatchedStyles.PropertyState.Active) {
            continue;
          }
          lines.push(`${property.name}: ${property.value};`);
        }
      }
      Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(lines.join('\n'));
    }
  
    _highlightSearchResults() {
      if (!this._searchQuery || !this._searchHighlightsVisible) {
        return;
      }
      this._hideSearchHighlight();
  
      const text = this.listItemElement.textContent;
      const regexObject = createPlainTextSearchRegex(this._searchQuery, 'gi');
  
      let match = regexObject.exec(text);
      const matchRanges = [];
      while (match) {
        matchRanges.push(new TextUtils.TextRange.SourceRange(match.index, match[0].length));
        match = regexObject.exec(text);
      }
  
      // Fall back for XPath, etc. matches.
      if (!matchRanges.length) {
        matchRanges.push(new TextUtils.TextRange.SourceRange(0, text.length));
      }
  
      this._highlightResult = [];
      UI.UIUtils.highlightSearchResults(this.listItemElement, matchRanges, this._highlightResult);
    }
  
    _editAsHTML() {
      const promise = Common.Revealer.reveal(this.node());
      promise.then(() => self.UI.actionRegistry.action('elements.edit-as-html').execute());
    }
  }
  
  export const HrefSymbol = Symbol('ElementsTreeElement.Href');
  export const InitialChildrenLimit = 500;
  
  // A union of HTML4 and HTML5-Draft elements that explicitly
  // or implicitly (for HTML5) forbid the closing tag.
  export const 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.
  export const EditTagBlacklist = new Set(['html', 'head', 'body']);
  