debug-server-next
Version:
Dev server for hippy-core.
1,156 lines • 81.6 kB
JavaScript
// Copyright 2021 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
/*
* 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.
*/
/* eslint-disable rulesdir/no_underscored_properties */
import * as Common from '../../core/common/common.js';
import * as Host from '../../core/host/host.js';
import * as i18n from '../../core/i18n/i18n.js';
import * as Platform from '../../core/platform/platform.js';
import * as SDK from '../../core/sdk/sdk.js';
import * as TextUtils from '../../models/text_utils/text_utils.js';
import * as Adorners from '../../ui/components/adorners/adorners.js';
import * as TextEditor from '../../ui/legacy/components/text_editor/text_editor.js';
import * as Components from '../../ui/legacy/components/utils/utils.js';
import * as UI from '../../ui/legacy/legacy.js';
import * as Emulation from '../emulation/emulation.js';
import * as ElementsComponents from './components/components.js';
import { canGetJSPath, cssPath, jsPath, xPath } from './DOMPath.js';
import { ElementsPanel } from './ElementsPanel.js';
import { MappedCharToEntity } from './ElementsTreeOutline.js';
import { ImagePreviewPopover } from './ImagePreviewPopover.js';
import { getRegisteredDecorators } from './MarkerDecorator.js';
const UIStrings = {
/**
*@description Title for Ad adorner. This iframe is marked as advertisement frame.
*/
thisFrameWasIdentifiedAsAnAd: 'This frame was identified as an ad frame',
/**
*@description A context menu item in the Elements panel. Force is used as a verb, indicating intention to make the state change.
*/
forceState: 'Force state',
/**
*@description Hint element title in Elements Tree Element of the Elements panel
*@example {0} PH1
*/
useSInTheConsoleToReferToThis: 'Use {PH1} in the console to refer to this element.',
/**
*@description A context menu item in the Elements Tree Element of the Elements panel
*/
addAttribute: 'Add attribute',
/**
*@description Text to modify the attribute of an item
*/
editAttribute: 'Edit attribute',
/**
*@description Text to focus on something
*/
focus: 'Focus',
/**
*@description Text to scroll the displayed content into view
*/
scrollIntoView: 'Scroll into view',
/**
*@description A context menu item in the Elements Tree Element of the Elements panel
*/
editText: 'Edit text',
/**
*@description A context menu item in the Elements Tree Element of the Elements panel
*/
editAsHtml: 'Edit as HTML',
/**
*@description Text for copying
*/
copy: 'Copy',
/**
*@description Text in Elements Tree Element of the Elements panel, copy should be used as a verb
*/
copyOuterhtml: 'Copy outerHTML',
/**
*@description Text in Elements Tree Element of the Elements panel, copy should be used as a verb
*/
copySelector: 'Copy `selector`',
/**
*@description Text in Elements Tree Element of the Elements panel
*/
copyJsPath: 'Copy JS path',
/**
*@description Text in Elements Tree Element of the Elements panel, copy should be used as a verb
*/
copyStyles: 'Copy styles',
/**
*@description Text in Elements Tree Element of the Elements panel, copy should be used as a verb
*/
copyXpath: 'Copy XPath',
/**
*@description Text in Elements Tree Element of the Elements panel, copy should be used as a verb
*/
copyFullXpath: 'Copy full XPath',
/**
*@description Text in Elements Tree Element of the Elements panel
*/
cutElement: 'Cut element',
/**
*@description Text in Elements Tree Element of the Elements panel, copy should be used as a verb
*/
copyElement: 'Copy element',
/**
*@description Text in Elements Tree Element of the Elements panel
*/
pasteElement: 'Paste element',
/**
*@description A context menu item in the Elements Tree Element of the Elements panel
*/
duplicateElement: 'Duplicate element',
/**
*@description Text to hide an element
*/
hideElement: 'Hide element',
/**
*@description A context menu item in the Elements Tree Element of the Elements panel
*/
deleteElement: 'Delete element',
/**
*@description Text to expand something recursively
*/
expandRecursively: 'Expand recursively',
/**
*@description Text to collapse children of a parent group
*/
collapseChildren: 'Collapse children',
/**
*@description Title of an action in the emulation tool to capture node screenshot
*/
captureNodeScreenshot: 'Capture node screenshot',
/**
*@description Title of a context menu item. When clicked DevTools goes to the Application panel and shows this specific iframe's details
*/
showFrameDetails: 'Show `iframe` details',
/**
*@description Text in Elements Tree Element of the Elements panel
*/
valueIsTooLargeToEdit: '<value is too large to edit>',
/**
*@description Element text content in Elements Tree Element of the Elements panel
*/
children: 'Children:',
/**
*@description ARIA label for Elements Tree adorners
*/
enableGridMode: 'Enable grid mode',
/**
*@description ARIA label for Elements Tree adorners
*/
disableGridMode: 'Disable grid mode',
/**
*@description Label of the adorner for flex elements in the Elements panel
*/
enableFlexMode: 'Enable flex mode',
/**
*@description Label of the adorner for flex elements in the Elements panel
*/
disableFlexMode: 'Disable flex mode',
/**
*@description Label of an adorner in the Elements panel. When clicked, it enables
* the overlay showing CSS scroll snapping for the current element.
*/
enableScrollSnap: 'Enable scroll-snap overlay',
/**
*@description Label of an adorner in the Elements panel. When clicked, it disables
* the overlay showing CSS scroll snapping for the current element.
*/
disableScrollSnap: 'Disable scroll-snap overlay',
};
const str_ = i18n.i18n.registerUIStrings('panels/elements/ElementsTreeElement.ts', UIStrings);
const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
_node;
treeOutline;
_gutterContainer;
_decorationsElement;
_isClosingTag;
_canAddAttributes;
_searchQuery;
_expandedChildrenLimit;
_decorationsThrottler;
_inClipboard;
_hovered;
_editing;
_highlightResult;
_adornerContainer;
// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
// @ts-expect-error
_adorners;
// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
// @ts-expect-error
_styleAdorners;
// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
// @ts-expect-error
_adornersThrottler;
_htmlEditElement;
expandAllButtonElement;
_searchHighlightsVisible;
selectionElement;
_hintElement;
constructor(node, isClosingTag) {
// The title will be updated in onattach.
super();
this._node = node;
this.treeOutline = null;
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._isClosingTag = isClosingTag;
if (this._node.nodeType() === Node.ELEMENT_NODE && !isClosingTag) {
this._canAddAttributes = true;
}
this._searchQuery = null;
this._expandedChildrenLimit = InitialChildrenLimit;
this._decorationsThrottler = new Common.Throttler.Throttler(100);
this._inClipboard = false;
this._hovered = false;
this._editing = null;
this._highlightResult = [];
if (!isClosingTag) {
this._adornerContainer = this.listItemElement.createChild('div', 'adorner-container hidden');
this._adorners = [];
this._styleAdorners = [];
this._adornersThrottler = new Common.Throttler.Throttler(100);
this.updateStyleAdorners();
if (node.isAdFrameNode()) {
const config = ElementsComponents.AdornerManager.getRegisteredAdorner(ElementsComponents.AdornerManager.RegisteredAdorners.AD);
const adorner = this.adorn(config);
UI.Tooltip.Tooltip.install(adorner, i18nString(UIStrings.thisFrameWasIdentifiedAsAnAd));
}
}
this.expandAllButtonElement = null;
}
static animateOnDOMUpdate(treeElement) {
const tagName = treeElement.listItemElement.querySelector('.webkit-html-tag-name');
UI.UIUtils.runCSSAnimationOnce(tagName || treeElement.listItemElement, 'dom-update-highlight');
}
static visibleShadowRoots(node) {
let roots = node.shadowRoots();
if (roots.length && !Common.Settings.Settings.instance().moduleSetting('showUAShadowDOM').get()) {
roots = roots.filter(filter);
}
function filter(root) {
return root.shadowRootType() !== SDK.DOMModel.DOMNode.ShadowRootTypes.UserAgent;
}
return roots;
}
static canShowInlineText(node) {
if (node.contentDocument() || 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;
}
static populateForcedPseudoStateItems(contextMenu, node) {
const pseudoClasses = ['active', 'hover', 'focus', 'visited', 'focus-within', 'focus-visible'];
const forcedPseudoState = node.domModel().cssModel().pseudoState(node);
const stateMenu = contextMenu.debugSection().appendSubMenuItem(i18nString(UIStrings.forceState));
for (const pseudoClass of pseudoClasses) {
const pseudoClassForced = forcedPseudoState ? forcedPseudoState.indexOf(pseudoClass) >= 0 : false;
stateMenu.defaultSection().appendCheckboxItem(':' + pseudoClass, setPseudoStateCallback.bind(null, pseudoClass, !pseudoClassForced), pseudoClassForced, false);
}
function setPseudoStateCallback(pseudoState, enabled) {
node.domModel().cssModel().forcePseudoState(node, pseudoState, enabled);
}
}
isClosingTag() {
return Boolean(this._isClosingTag);
}
node() {
return this._node;
}
isEditing() {
return Boolean(this._editing);
}
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.length === 0) {
return;
}
for (let i = (this._highlightResult.length - 1); i >= 0; --i) {
const entry = this._highlightResult[i];
switch (entry.type) {
case 'added':
entry.node.remove();
break;
case 'changed':
entry.node.textContent = entry.oldText || null;
break;
}
}
this._highlightResult = [];
}
setInClipboard(inClipboard) {
if (this._inClipboard === inClipboard) {
return;
}
this._inClipboard = inClipboard;
this.listItemElement.classList.toggle('in-clipboard', inClipboard);
}
get hovered() {
return this._hovered;
}
set hovered(isHovered) {
if (this._hovered === isHovered) {
return;
}
this._hovered = isHovered;
if (this.listItemElement) {
if (isHovered) {
this._createSelection();
this.listItemElement.classList.add('hovered');
}
else {
this.listItemElement.classList.remove('hovered');
}
}
}
expandedChildrenLimit() {
return this._expandedChildrenLimit;
}
setExpandedChildrenLimit(expandedChildrenLimit) {
this._expandedChildrenLimit = expandedChildrenLimit;
}
_createSelection() {
const listItemElement = this.listItemElement;
if (!listItemElement) {
return;
}
if (!this.selectionElement) {
this.selectionElement = document.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';
UI.Tooltip.Tooltip.install(this._hintElement, i18nString(UIStrings.useSInTheConsoleToReferToThis, { PH1: selectedElementCommand }));
UI.ARIAUtils.markAsHidden(this._hintElement);
}
}
onbind() {
if (this.treeOutline && !this._isClosingTag) {
this.treeOutline.treeElementByNode.set(this._node, this);
}
}
onunbind() {
if (this._editing) {
this._editing.cancel();
}
if (this.treeOutline && this.treeOutline.treeElementByNode.get(this._node) === this) {
this.treeOutline.treeElementByNode.delete(this._node);
}
}
onattach() {
if (this._hovered) {
this._createSelection();
this.listItemElement.classList.add('hovered');
}
this.updateTitle();
this.listItemElement.draggable = true;
}
async onpopulate() {
if (this.treeOutline) {
return this.treeOutline.populateTreeElement(this);
}
}
async expandRecursively() {
await this._node.getSubtree(-1, true);
await super.expandRecursively(Number.MAX_VALUE);
}
onexpand() {
if (this._isClosingTag) {
return;
}
this.updateTitle();
}
oncollapse() {
if (this._isClosingTag) {
return;
}
this.updateTitle();
}
select(omitFocus, selectedByUser) {
if (this._editing) {
return false;
}
return super.select(omitFocus, selectedByUser);
}
onselect(selectedByUser) {
if (!this.treeOutline) {
return false;
}
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;
}
ondelete() {
if (!this.treeOutline) {
return false;
}
const startTagTreeElement = this.treeOutline.findTreeElement(this._node);
startTagTreeElement ? startTagTreeElement.remove() : this.remove();
return true;
}
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;
}
selectOnMouseDown(event) {
super.selectOnMouseDown(event);
if (this._editing) {
return;
}
// Prevent selecting the nearest word on double click.
if (event.detail >= 2) {
event.preventDefault();
}
}
ondblclick(event) {
if (this._editing || this._isClosingTag) {
return false;
}
if (this._startEditingTarget(event.target)) {
return false;
}
if (this.isExpandable() && !this.expanded) {
this.expand();
}
return false;
}
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 if (tag.textContent !== null) {
const matchResult = tag.textContent.match(/^<(.*?)>$/);
if (!matchResult) {
return;
}
const nodeName = matchResult[1];
tag.textContent = '';
UI.UIUtils.createTextChild(tag, '<' + nodeName);
tag.appendChild(node);
UI.UIUtils.createTextChild(tag, '>');
}
}
_startEditingTarget(eventTarget) {
if (!this.treeOutline || 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;
}
_showContextMenu(event) {
this.treeOutline && this.treeOutline.showContextMenu(this, event);
}
populateTagContextMenu(contextMenu, event) {
// Add attribute-related actions.
const treeElement = this._isClosingTag && this.treeOutline ? this.treeOutline.findTreeElement(this._node) : this;
if (!treeElement) {
return;
}
contextMenu.editSection().appendItem(i18nString(UIStrings.addAttribute), treeElement._addNewAttribute.bind(treeElement));
const target = event.target;
const attribute = target.enclosingNodeOrSelfWithClass('webkit-html-attribute');
const newAttribute = target.enclosingNodeOrSelfWithClass('add-attribute');
if (attribute && !newAttribute) {
contextMenu.editSection().appendItem(i18nString(UIStrings.editAttribute), this._startEditingAttribute.bind(this, attribute, target));
}
this.populateNodeContextMenu(contextMenu);
ElementsTreeElement.populateForcedPseudoStateItems(contextMenu, treeElement.node());
this.populateScrollIntoView(contextMenu);
contextMenu.viewSection().appendItem(i18nString(UIStrings.focus), async () => {
await this._node.focus();
});
}
populateScrollIntoView(contextMenu) {
contextMenu.viewSection().appendItem(i18nString(UIStrings.scrollIntoView), () => this._node.scrollIntoView());
}
populateTextContextMenu(contextMenu, textNode) {
if (!this._editing) {
contextMenu.editSection().appendItem(i18nString(UIStrings.editText), 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(i18nString(UIStrings.editAsHtml), 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(i18nString(UIStrings.copy));
const createShortcut = UI.KeyboardShortcut.KeyboardShortcut.shortcutToString.bind(null);
const modifier = UI.KeyboardShortcut.Modifiers.CtrlOrMeta;
const treeOutline = this.treeOutline;
if (!treeOutline) {
return;
}
let menuItem;
const section = copyMenu.section();
if (!isShadowRoot) {
menuItem = section.appendItem(i18nString(UIStrings.copyOuterhtml), treeOutline.performCopyOrCut.bind(treeOutline, false, this._node));
menuItem.setShortcut(createShortcut('V', modifier));
}
if (this._node.nodeType() === Node.ELEMENT_NODE) {
section.appendItem(i18nString(UIStrings.copySelector), this._copyCSSPath.bind(this));
section.appendItem(i18nString(UIStrings.copyJsPath), this._copyJSPath.bind(this), !canGetJSPath(this._node));
section.appendItem(i18nString(UIStrings.copyStyles), this._copyStyles.bind(this));
}
if (!isShadowRoot) {
section.appendItem(i18nString(UIStrings.copyXpath), this._copyXPath.bind(this));
section.appendItem(i18nString(UIStrings.copyFullXpath), this._copyFullXPath.bind(this));
}
if (!isShadowRoot) {
menuItem = copyMenu.clipboardSection().appendItem(i18nString(UIStrings.cutElement), treeOutline.performCopyOrCut.bind(treeOutline, true, this._node), !this.hasEditableNode());
menuItem.setShortcut(createShortcut('X', modifier));
menuItem = copyMenu.clipboardSection().appendItem(i18nString(UIStrings.copyElement), treeOutline.performCopyOrCut.bind(treeOutline, false, this._node));
menuItem.setShortcut(createShortcut('C', modifier));
menuItem = copyMenu.clipboardSection().appendItem(i18nString(UIStrings.pasteElement), treeOutline.pasteNode.bind(treeOutline, this._node), !treeOutline.canPaste(this._node));
menuItem.setShortcut(createShortcut('V', modifier));
// Duplicate element, disabled on root element and ShadowDOM.
const isRootElement = !this._node.parentNode || this._node.parentNode.nodeName() === '#document';
menuItem = contextMenu.editSection().appendItem(i18nString(UIStrings.duplicateElement), treeOutline.duplicateNode.bind(treeOutline, this._node), (this._node.isInShadowTree() || isRootElement));
}
menuItem = contextMenu.debugSection().appendCheckboxItem(i18nString(UIStrings.hideElement), treeOutline.toggleHideElement.bind(treeOutline, this._node), treeOutline.isToggledToHidden(this._node));
menuItem.setShortcut(UI.ShortcutRegistry.ShortcutRegistry.instance().shortcutTitleForAction('elements.hide-element') || '');
if (isEditable) {
contextMenu.editSection().appendItem(i18nString(UIStrings.deleteElement), this.remove.bind(this));
}
contextMenu.viewSection().appendItem(i18nString(UIStrings.expandRecursively), this.expandRecursively.bind(this));
contextMenu.viewSection().appendItem(i18nString(UIStrings.collapseChildren), this.collapseChildren.bind(this));
const deviceModeWrapperAction = new Emulation.DeviceModeWrapper.ActionDelegate();
contextMenu.viewSection().appendItem(i18nString(UIStrings.captureNodeScreenshot), deviceModeWrapperAction.handleAction.bind(null, UI.Context.Context.instance(), 'emulation.capture-node-screenshot'));
if (this._node.frameOwnerFrameId()) {
contextMenu.viewSection().appendItem(i18nString(UIStrings.showFrameDetails), () => {
const frameOwnerFrameId = this._node.frameOwnerFrameId();
if (frameOwnerFrameId) {
const frame = SDK.FrameManager.FrameManager.instance().getFrame(frameOwnerFrameId);
Common.Revealer.reveal(frame);
}
});
}
}
_startEditing() {
if (!this.treeOutline || 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 = document.createElement('span');
const attr = this._buildAttributeDOM(container, ' ', '', null);
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.parentElement, elem);
}
}
}
}
return;
}
_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 ? 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, i18nString(UIStrings.valueIsTooLargeToEdit));
}
// 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 || undefined);
function postKeyDownFinishHandler(event) {
UI.UIUtils.handleElementValueModifications(event, attribute);
return '';
}
if (!Common.ParsedURL.ParsedURL.fromString(attributeValueElement.textContent || '')) {
config.setPostKeydownFinishHandler(postKeyDownFinishHandler);
}
this._updateEditorHandles(attribute, config);
const componentSelection = this.listItemElement.getComponentSelection();
componentSelection && componentSelection.selectAllChildren(elementForSelection);
return true;
}
_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._updateEditorHandles(textNodeElement, config);
const componentSelection = this.listItemElement.getComponentSelection();
componentSelection && componentSelection.selectAllChildren(textNodeElement);
return true;
}
_startEditingTagName(tagNameElement) {
if (!tagNameElement) {
tagNameElement = this.listItemElement.getElementsByClassName('webkit-html-tag-name')[0];
if (!tagNameElement) {
return false;
}
}
const tagName = tagNameElement.textContent;
if (tagName !== null && EditTagBlocklist.has(tagName.toLowerCase())) {
return false;
}
if (UI.UIUtils.isBeingEdited(tagNameElement)) {
return true;
}
const closingTagElement = this._distinctClosingTagElement();
function keyupListener() {
if (closingTagElement && tagNameElement) {
closingTagElement.textContent = '</' + tagNameElement.textContent + '>';
}
}
const keydownListener = (event) => {
if (event.key !== ' ') {
return;
}
this._editing && this._editing.commit();
event.consume(true);
};
function editingCommitted(element, newTagName, oldText, tagName, moveDirection) {
if (!tagNameElement) {
return;
}
tagNameElement.removeEventListener('keyup', keyupListener, false);
tagNameElement.removeEventListener('keydown', keydownListener, false);
this._tagNameEditingCommitted(element, newTagName, oldText, tagName, moveDirection);
}
// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function editingCancelled(element, context) {
if (!tagNameElement) {
return;
}
tagNameElement.removeEventListener('keyup', keyupListener, false);
tagNameElement.removeEventListener('keydown', keydownListener, false);
this._editingCancelled(element, context);
}
tagNameElement.addEventListener('keyup', keyupListener, false);
tagNameElement.addEventListener('keydown', keydownListener, false);
const config = new UI.InplaceEditor.Config(editingCommitted.bind(this), editingCancelled.bind(this), tagName);
this._updateEditorHandles(tagNameElement, config);
const componentSelection = this.listItemElement.getComponentSelection();
componentSelection && componentSelection.selectAllChildren(tagNameElement);
return true;
}
// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
// eslint-disable-next-line @typescript-eslint/no-explicit-any
_updateEditorHandles(element, config) {
const editorHandles = UI.InplaceEditor.InplaceEditor.startEditing(element, config);
if (!editorHandles) {
this._editing = null;
}
else {
this._editing = {
commit: editorHandles.commit,
cancel: editorHandles.cancel,
editor: undefined,
resize: () => { },
};
}
}
_startEditingAsHTML(commitCallback, disposeCallback, maybeInitialValue) {
if (maybeInitialValue === null) {
return;
}
if (this._editing) {
return;
}
const initialValue = this._convertWhitespaceToEntities(maybeInitialValue).text;
this._htmlEditElement = document.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);
const factory = TextEditor.CodeMirrorTextEditor.CodeMirrorTextEditorFactory.instance();
const editor = factory.createEditor({
lineNumbers: false,
lineWrapping: Common.Settings.Settings.instance().moduleSetting('domWordWrap').get(),
mimeType: 'text/html',
autoHeight: false,
padBottom: false,
bracketMatchingSetting: undefined,
devtoolsAccessibleName: undefined,
maxHighlightLength: undefined,
placeholder: undefined,
lineWiseCopyCut: undefined,
inputStyle: undefined,
});
this._editing = { commit: commit.bind(this), cancel: dispose.bind(this), editor, resize: resize.bind(this) };
resize.call(this);
editor.widget().show(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.
const relatedTarget = event.relatedTarget;
if (relatedTarget && !relatedTarget.isSelfOrDescendant(editor.widget().element)) {
this._editing && this._editing.commit();
}
}, false);
editor.widget().element.addEventListener('keydown', keydown.bind(this), true);
this.treeOutline && this.treeOutline.setMultilineEditing(this._editing);
function resize() {
if (this.treeOutline && this._htmlEditElement) {
this._htmlEditElement.style.width = this.treeOutline.visibleWidth() - this._computeLeftIndent() - 30 + 'px';
}
if (this._editing && this._editing.editor) {
this._editing.editor.onResize();
}
}
function commit() {
if (this._editing && this._editing.editor) {
commitCallback(initialValue, this._editing.editor.text());
}
dispose.call(this);
}
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();
this._editing = null;
// Remove editor.
if (this._htmlEditElement) {
this.listItemElement.removeChild(this._htmlEditElement);
}
this._htmlEditElement = undefined;
// 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();
}
function keydown(event) {
const keyboardEvent = event;
const isMetaOrCtrl = UI.KeyboardShortcut.KeyboardShortcut.eventHasCtrlEquivalentKey(keyboardEvent) &&
!keyboardEvent.altKey && !keyboardEvent.shiftKey;
if (keyboardEvent.key === 'Enter' && (isMetaOrCtrl || keyboardEvent.isMetaOrCtrlForTest)) {
keyboardEvent.consume(true);
this._editing && this._editing.commit();
}
else if (keyboardEvent.keyCode === UI.KeyboardShortcut.Keys.Esc.code ||
keyboardEvent.key === Platform.KeyboardUtilities.ESCAPE_KEY) {
keyboardEvent.consume(true);
this._editing && this._editing.cancel();
}
}
}
_attributeEditingCommitted(element, newText, oldText, attributeName, moveDirection) {
this._editing = null;
const treeOutline = this.treeOutline;
function moveToNextAttributeIfNeeded(error) {
if (error) {
this._editingCancelled(element, attributeName);
}
if (!moveDirection) {
return;
}
if (treeOutline) {
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) {
this._editing = null;
const self = this;
function cancel() {
const closingTagElement = self._distinctClosingTagElement();
if (closingTagElement) {
closingTagElement.textContent = '</' + tagName + '>';
}
self._editingCancelled(element, tagName);
moveToNextAttributeIfNeeded.call(self);
}
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;
}
if (!treeOutline) {
return;
}
const newTreeItem = treeOutline.selectNodeAfterEdit(wasExpanded, error, newNode);
// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
// @ts-expect-error
moveToNextAttributeIfNeeded.call(newTreeItem);
});
}
_textNodeEditingCommitted(textNode, element, newText) {
this._editing = null;
function callback() {
this.updateTitle();
}
textNode.setNodeValue(newText, callback.bind(this));
}
// TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
// eslint-disable-next-line @typescript-eslint/no-explicit-any
_editingCancelled(_element, _context) {
this._editing = null;
// Need to restore attributes structure.
this.updateTitle();
}
_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];
}
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 = document.createElement('span');
highlightElement.className = 'highlight';
highlightElement.appendChild(nodeInfo);
// fixme: make it clear that `this.title = x` is a setter with significant side effects
this.title = highlightElement;
this.updateDecorations();
this.listItemElement.insertBefore(this._gutterContainer, this.listItemElement.firstChild);
if (!this._isClosingTag && this._adornerContainer) {
this.listItemElement.appendChild(this._adornerContainer);
}
this._highlightResult = [];
delete this.selectionElement;
delete this._hintElement;
if (this.selected) {
this._createSelection();
this._createHint();
}
}
this._highlightSearchResults();
}
_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));
}
_updateDecorationsInternal() {
if (!this.treeOutline) {
return Promise.resolve();
}
const node = this._node;
if (!this.treeOutline.decoratorExtensions) {
this.treeOutline.decoratorExtensions = getRegisteredDecorators();
}
const markerToExtension = new Map();
for (const decoratorExtension of this.treeOutline.decoratorExtensions) {
markerToExtension.set(decoratorExtension.marker, decoratorExtension);
}
const promises = [];
const decorations = [];
const descendantDecorations = [];
node.traverseMarkers(visitor);
function visitor(n, marker) {
const extension = markerToExtension.get(marker);
if (!extension) {
return;
}
promises.push(Promise.resolve(extension.decorator()).then(collectDecoration.bind(null, n)));
}
function collectDecoration(n, decorator) {
const decoration = decorator.decorate(n);
if (!decoration) {
return;
}
(n === node