chrome-devtools-frontend
Version:
Chrome DevTools UI
1,373 lines (1,205 loc) • 95.1 kB
text/typescript
// 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.
/* eslint-disable rulesdir/no-imperative-dom-api */
/*
* 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 '../../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 Protocol from '../../generated/protocol.js';
import type * as IssuesManager from '../../models/issues_manager/issues_manager.js';
import * as TextUtils from '../../models/text_utils/text_utils.js';
import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
import * as Adorners from '../../ui/components/adorners/adorners.js';
import * as Buttons from '../../ui/components/buttons/buttons.js';
import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
import * as Highlighting from '../../ui/components/highlighting/highlighting.js';
import * as IconButton from '../../ui/components/icon_button/icon_button.js';
import * as TextEditor from '../../ui/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 VisualLogging from '../../ui/visual_logging/visual_logging.js';
import * as Emulation from '../emulation/emulation.js';
import * as ElementsComponents from './components/components.js';
import {canGetJSPath, cssPath, jsPath, xPath} from './DOMPath.js';
import {getElementIssueDetails} from './ElementIssueUtils.js';
import {ElementsPanel} from './ElementsPanel.js';
import {type ElementsTreeOutline, MappedCharToEntity, type UpdateRecord} from './ElementsTreeOutline.js';
import {ImagePreviewPopover} from './ImagePreviewPopover.js';
import {getRegisteredDecorators, type MarkerDecorator, type MarkerDecoratorRegistration} 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 to cut an element, cut should be used as a verb
*/
cut: 'Cut',
/**
*@description Text for copying, copy should be used as a verb
*/
copy: 'Copy',
/**
*@description Text to paste an element, paste should be used as a verb
*/
paste: 'Paste',
/**
*@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, copy should be used as a verb
*/
copyElement: 'Copy 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',
/**
*@description Label of an adorner in the Elements panel. When clicked, it redirects
* to the Media Panel.
*/
openMediaPanel: 'Jump to Media panel',
/**
*@description Text of a tooltip to redirect to another element in the Elements panel
*/
showPopoverTarget: 'Show element associated with the `popovertarget` attribute',
/**
*@description Text of a tooltip to redirect to another element in the Elements panel
*/
showInterestTarget: 'Show element associated with the `interesttarget` attribute',
/**
*@description Text of a tooltip to redirect to another element in the Elements panel
*/
showCommandForTarget: 'Show element associated with the `commandfor` attribute',
/**
*@description Text of the tooltip for scroll adorner.
*/
elementHasScrollableOverflow: 'This element has a scrollable overflow',
} as const;
const str_ = i18n.i18n.registerUIStrings('panels/elements/ElementsTreeElement.ts', UIStrings);
const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
const enum TagType {
OPENING = 'OPENING_TAG',
CLOSING = 'CLOSING_TAG',
}
interface OpeningTagContext {
tagType: TagType.OPENING;
readonly adornerContainer: HTMLElement;
adorners: Set<Adorners.Adorner.Adorner>;
styleAdorners: Set<Adorners.Adorner.Adorner>;
readonly adornersThrottler: Common.Throttler.Throttler;
canAddAttributes: boolean;
slot?: Adorners.Adorner.Adorner;
}
interface ClosingTagContext {
tagType: TagType.CLOSING;
}
export type TagTypeContext = OpeningTagContext|ClosingTagContext;
export function isOpeningTag(context: TagTypeContext): context is OpeningTagContext {
return context.tagType === TagType.OPENING;
}
export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
nodeInternal: SDK.DOMModel.DOMNode;
override treeOutline: ElementsTreeOutline|null;
private gutterContainer: HTMLElement;
private readonly decorationsElement: HTMLElement;
private searchQuery: string|null;
private expandedChildrenLimitInternal: number;
private readonly decorationsThrottler: Common.Throttler.Throttler;
private inClipboard: boolean;
private hoveredInternal: boolean;
private editing: EditorHandles|null;
private htmlEditElement?: HTMLElement;
expandAllButtonElement: UI.TreeOutline.TreeElement|null;
selectionElement?: HTMLDivElement;
private hintElement?: HTMLElement;
private aiButtonContainer?: HTMLElement;
private contentElement: HTMLElement;
#elementIssues = new Map<string, IssuesManager.Issue.Issue>();
#nodeElementToIssue = new Map<Element, IssuesManager.Issue.Issue[]>();
#highlights: Range[] = [];
readonly tagTypeContext: TagTypeContext;
constructor(node: SDK.DOMModel.DOMNode, isClosingTag?: boolean) {
// The title will be updated in onattach.
super();
this.nodeInternal = node;
this.treeOutline = null;
this.listItemElement.setAttribute(
'jslog', `${VisualLogging.treeItem().parent('elementsTreeOutline').track({
keydown: 'ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Backspace|Delete|Enter|Space|Home|End',
drag: true,
click: true,
})}`);
this.contentElement = this.listItemElement.createChild('div');
this.gutterContainer = this.contentElement.createChild('div', 'gutter-container');
this.gutterContainer.addEventListener('click', this.showContextMenu.bind(this));
const gutterMenuIcon = new IconButton.Icon.Icon();
gutterMenuIcon.name = 'dots-horizontal';
this.gutterContainer.append(gutterMenuIcon);
this.decorationsElement = this.gutterContainer.createChild('div', 'hidden');
this.searchQuery = null;
this.expandedChildrenLimitInternal = InitialChildrenLimit;
this.decorationsThrottler = new Common.Throttler.Throttler(100);
this.inClipboard = false;
this.hoveredInternal = false;
this.editing = null;
if (isClosingTag) {
this.tagTypeContext = {tagType: TagType.CLOSING};
} else {
this.tagTypeContext = {
tagType: TagType.OPENING,
adornerContainer: this.contentElement.createChild('div', 'adorner-container hidden'),
adorners: new Set(),
styleAdorners: new Set(),
adornersThrottler: new Common.Throttler.Throttler(100),
canAddAttributes: this.nodeInternal.nodeType() === Node.ELEMENT_NODE,
};
void 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));
}
void this.updateScrollAdorner();
}
this.expandAllButtonElement = null;
}
static animateOnDOMUpdate(treeElement: ElementsTreeElement): void {
const tagName = treeElement.listItemElement.querySelector('.webkit-html-tag-name');
UI.UIUtils.runCSSAnimationOnce(tagName || treeElement.listItemElement, 'dom-update-highlight');
}
static visibleShadowRoots(node: SDK.DOMModel.DOMNode): SDK.DOMModel.DOMNode[] {
let roots = node.shadowRoots();
if (roots.length && !Common.Settings.Settings.instance().moduleSetting('show-ua-shadow-dom').get()) {
roots = roots.filter(filter);
}
function filter(root: SDK.DOMModel.DOMNode): boolean {
return root.shadowRootType() !== SDK.DOMModel.DOMNode.ShadowRootTypes.UserAgent;
}
return roots;
}
static canShowInlineText(node: SDK.DOMModel.DOMNode): boolean {
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: UI.ContextMenu.ContextMenu, node: SDK.DOMModel.DOMNode): void {
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), false, 'force-state');
for (const pseudoClass of pseudoClasses) {
const pseudoClassForced = forcedPseudoState ? forcedPseudoState.indexOf(pseudoClass) >= 0 : false;
stateMenu.defaultSection().appendCheckboxItem(
':' + pseudoClass, setPseudoStateCallback.bind(null, pseudoClass, !pseudoClassForced),
{checked: pseudoClassForced, jslogContext: pseudoClass});
}
function setPseudoStateCallback(pseudoState: string, enabled: boolean): void {
node.domModel().cssModel().forcePseudoState(node, pseudoState, enabled);
}
}
isClosingTag(): boolean {
return !isOpeningTag(this.tagTypeContext);
}
node(): SDK.DOMModel.DOMNode {
return this.nodeInternal;
}
isEditing(): boolean {
return Boolean(this.editing);
}
highlightSearchResults(searchQuery: string): void {
this.searchQuery = searchQuery;
if (!this.editing) {
this.highlightSearchResultsInternal();
}
}
hideSearchHighlights(): void {
Highlighting.HighlightManager.HighlightManager.instance().removeHighlights(this.#highlights);
this.#highlights = [];
}
setInClipboard(inClipboard: boolean): void {
if (this.inClipboard === inClipboard) {
return;
}
this.inClipboard = inClipboard;
this.listItemElement.classList.toggle('in-clipboard', inClipboard);
}
get hovered(): boolean {
return this.hoveredInternal;
}
set hovered(isHovered: boolean) {
if (this.hoveredInternal === isHovered) {
return;
}
if (isHovered && !this.aiButtonContainer) {
this.createAiButton();
} else if (!isHovered && this.aiButtonContainer) {
this.aiButtonContainer.remove();
delete this.aiButtonContainer;
}
this.hoveredInternal = isHovered;
if (this.listItemElement) {
if (isHovered) {
this.createSelection();
this.listItemElement.classList.add('hovered');
} else {
this.listItemElement.classList.remove('hovered');
}
}
}
addIssue(newIssue: IssuesManager.Issue.Issue): void {
if (this.#elementIssues.has(newIssue.primaryKey())) {
return;
}
this.#elementIssues.set(newIssue.primaryKey(), newIssue);
this.#applyIssueStyleAndTooltip(newIssue);
}
#applyIssueStyleAndTooltip(issue: IssuesManager.Issue.Issue): void {
const elementIssueDetails = getElementIssueDetails(issue);
if (!elementIssueDetails) {
return;
}
if (elementIssueDetails.attribute) {
this.#highlightViolatingAttr(elementIssueDetails.attribute, issue);
} else {
this.#highlightTagAsViolating(issue);
}
}
get issuesByNodeElement(): Map<Element, IssuesManager.Issue.Issue[]> {
return this.#nodeElementToIssue;
}
#highlightViolatingAttr(name: string, issue: IssuesManager.Issue.Issue): void {
const tag = this.listItemElement.getElementsByClassName('webkit-html-tag')[0];
const attributes = tag.getElementsByClassName('webkit-html-attribute');
for (const attribute of attributes) {
if (attribute.getElementsByClassName('webkit-html-attribute-name')[0].textContent === name) {
const attributeElement = attribute.getElementsByClassName('webkit-html-attribute-name')[0];
attributeElement.classList.add('violating-element');
this.#updateNodeElementToIssue(attributeElement, issue);
}
}
}
#highlightTagAsViolating(issue: IssuesManager.Issue.Issue): void {
const tagElement = this.listItemElement.getElementsByClassName('webkit-html-tag-name')[0];
tagElement.classList.add('violating-element');
this.#updateNodeElementToIssue(tagElement, issue);
}
#updateNodeElementToIssue(nodeElement: Element, issue: IssuesManager.Issue.Issue): void {
let issues = this.#nodeElementToIssue.get(nodeElement);
if (!issues) {
issues = [];
this.#nodeElementToIssue.set(nodeElement, issues);
}
issues.push(issue);
this.treeOutline?.updateNodeElementToIssue(nodeElement, issues);
}
expandedChildrenLimit(): number {
return this.expandedChildrenLimitInternal;
}
setExpandedChildrenLimit(expandedChildrenLimit: number): void {
this.expandedChildrenLimitInternal = expandedChildrenLimit;
}
createSlotLink(nodeShortcut: SDK.DOMModel.DOMNodeShortcut|null): void {
if (!isOpeningTag(this.tagTypeContext)) {
return;
}
if (nodeShortcut) {
const config = ElementsComponents.AdornerManager.getRegisteredAdorner(
ElementsComponents.AdornerManager.RegisteredAdorners.SLOT);
this.tagTypeContext.slot = this.adornSlot(config, this.tagTypeContext);
const deferredNode = nodeShortcut.deferredNode;
this.tagTypeContext.slot.addEventListener('click', () => {
deferredNode.resolve(node => {
void Common.Revealer.reveal(node);
});
});
this.tagTypeContext.slot.addEventListener('mousedown', e => e.consume(), false);
}
}
private createSelection(): void {
const contentElement = this.contentElement;
if (!contentElement) {
return;
}
if (!this.selectionElement) {
this.selectionElement = document.createElement('div');
this.selectionElement.className = 'selection fill';
this.selectionElement.style.setProperty('margin-left', (-this.computeLeftIndent()) + 'px');
contentElement.prepend(this.selectionElement);
}
}
private createHint(): void {
if (this.contentElement && !this.hintElement) {
this.hintElement = this.contentElement.createChild('span', 'selected-hint');
const selectedElementCommand = '$0';
UI.Tooltip.Tooltip.install(
this.hintElement, i18nString(UIStrings.useSInTheConsoleToReferToThis, {PH1: selectedElementCommand}));
UI.ARIAUtils.setHidden(this.hintElement, true);
}
}
private createAiButton(): void {
const isElementNode = this.node().nodeType() === Node.ELEMENT_NODE;
if (!isElementNode ||
!UI.ActionRegistry.ActionRegistry.instance().hasAction('freestyler.elements-floating-button')) {
return;
}
const action = UI.ActionRegistry.ActionRegistry.instance().getAction('freestyler.elements-floating-button');
if (this.contentElement && !this.aiButtonContainer) {
this.aiButtonContainer = this.contentElement.createChild('span', 'ai-button-container');
const floatingButton = Buttons.FloatingButton.create('smart-assistant', action.title());
floatingButton.addEventListener('click', ev => {
ev.stopPropagation();
this.select(true, false);
void action.execute();
}, {capture: true});
floatingButton.addEventListener('mousedown', ev => {
ev.stopPropagation();
}, {capture: true});
this.aiButtonContainer.appendChild(floatingButton);
}
}
override onbind(): void {
if (this.treeOutline && !this.isClosingTag()) {
this.treeOutline.treeElementByNode.set(this.nodeInternal, this);
}
}
override onunbind(): void {
if (this.editing) {
this.editing.cancel();
}
if (this.treeOutline && this.treeOutline.treeElementByNode.get(this.nodeInternal) === this) {
this.treeOutline.treeElementByNode.delete(this.nodeInternal);
}
}
override onattach(): void {
if (this.hoveredInternal) {
this.createSelection();
this.listItemElement.classList.add('hovered');
}
this.updateTitle();
this.listItemElement.draggable = true;
}
override async onpopulate(): Promise<void> {
if (this.treeOutline) {
return await this.treeOutline.populateTreeElement(this);
}
}
override async expandRecursively(): Promise<void> {
await this.nodeInternal.getSubtree(-1, true);
await super.expandRecursively(Number.MAX_VALUE);
}
override onexpand(): void {
if (this.isClosingTag()) {
return;
}
this.updateTitle();
}
override oncollapse(): void {
if (this.isClosingTag()) {
return;
}
this.updateTitle();
}
override select(omitFocus?: boolean, selectedByUser?: boolean): boolean {
if (this.editing) {
return false;
}
return super.select(omitFocus, selectedByUser);
}
override onselect(selectedByUser?: boolean): boolean {
if (!this.treeOutline) {
return false;
}
this.treeOutline.suppressRevealAndSelect = true;
this.treeOutline.selectDOMNode(this.nodeInternal, selectedByUser);
if (selectedByUser) {
this.nodeInternal.highlight();
Host.userMetrics.actionTaken(Host.UserMetrics.Action.ChangeInspectedNodeInElementsPanel);
}
this.createSelection();
this.createHint();
this.treeOutline.suppressRevealAndSelect = false;
return true;
}
override ondelete(): boolean {
if (!this.treeOutline) {
return false;
}
const startTagTreeElement = this.treeOutline.findTreeElement(this.nodeInternal);
startTagTreeElement ? (void startTagTreeElement.remove()) : (void this.remove());
return true;
}
override onenter(): boolean {
// 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: MouseEvent): void {
super.selectOnMouseDown(event);
if (this.editing) {
return;
}
// Prevent selecting the nearest word on double click.
if (event.detail >= 2) {
event.preventDefault();
}
}
override ondblclick(event: Event): boolean {
if (this.editing || this.isClosingTag()) {
return false;
}
if (this.startEditingTarget((event.target as Element))) {
return false;
}
if (this.isExpandable() && !this.expanded) {
this.expand();
}
return false;
}
hasEditableNode(): boolean {
return !this.nodeInternal.isShadowRoot() && !this.nodeInternal.ancestorUserAgentShadowRoot();
}
private insertInLastAttributePosition(tag: Element, node: Element): void {
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, '>');
}
}
private startEditingTarget(eventTarget: Element): boolean {
if (!this.treeOutline || this.treeOutline.selectedDOMNode() !== this.nodeInternal) {
return false;
}
if (this.nodeInternal.nodeType() !== Node.ELEMENT_NODE && this.nodeInternal.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;
}
private showContextMenu(event: Event): void {
this.treeOutline && this.treeOutline.showContextMenu(this, event);
}
populateTagContextMenu(contextMenu: UI.ContextMenu.ContextMenu, event: Event): void {
// Add attribute-related actions.
const treeElement =
this.isClosingTag() && this.treeOutline ? this.treeOutline.findTreeElement(this.nodeInternal) : this;
if (!treeElement) {
return;
}
contextMenu.editSection().appendItem(
i18nString(UIStrings.addAttribute), treeElement.addNewAttribute.bind(treeElement),
{jslogContext: 'add-attribute'});
const target = (event.target as Element);
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),
{jslogContext: 'edit-attribute'});
}
this.populateNodeContextMenu(contextMenu);
ElementsTreeElement.populateForcedPseudoStateItems(contextMenu, treeElement.node());
this.populateScrollIntoView(contextMenu);
contextMenu.viewSection().appendItem(i18nString(UIStrings.focus), async () => {
await this.nodeInternal.focus();
}, {jslogContext: 'focus'});
}
populatePseudoElementContextMenu(contextMenu: UI.ContextMenu.ContextMenu): void {
if (this.childCount() !== 0) {
this.populateExpandRecursively(contextMenu);
}
this.populateScrollIntoView(contextMenu);
}
private populateExpandRecursively(contextMenu: UI.ContextMenu.ContextMenu): void {
contextMenu.viewSection().appendItem(
i18nString(UIStrings.expandRecursively), this.expandRecursively.bind(this),
{jslogContext: 'expand-recursively'});
}
private populateScrollIntoView(contextMenu: UI.ContextMenu.ContextMenu): void {
contextMenu.viewSection().appendItem(
i18nString(UIStrings.scrollIntoView), () => this.nodeInternal.scrollIntoView(),
{jslogContext: 'scroll-into-view'});
}
populateTextContextMenu(contextMenu: UI.ContextMenu.ContextMenu, textNode: Element): void {
if (!this.editing) {
contextMenu.editSection().appendItem(
i18nString(UIStrings.editText), this.startEditingTextNode.bind(this, textNode), {jslogContext: 'edit-text'});
}
this.populateNodeContextMenu(contextMenu);
}
populateNodeContextMenu(contextMenu: UI.ContextMenu.ContextMenu): void {
// Add free-form node-related actions.
const isEditable = this.hasEditableNode();
// clang-format off
if (isEditable && !this.editing) {
contextMenu.editSection().appendItem(i18nString(UIStrings.editAsHtml), this.editAsHTML.bind(this), {jslogContext: 'elements.edit-as-html'});
}
// clang-format on
const isShadowRoot = this.nodeInternal.isShadowRoot();
const createShortcut = UI.KeyboardShortcut.KeyboardShortcut.shortcutToString.bind(null);
const modifier = UI.KeyboardShortcut.Modifiers.CtrlOrMeta.value;
const treeOutline = this.treeOutline;
if (!treeOutline) {
return;
}
let menuItem;
if (UI.ActionRegistry.ActionRegistry.instance().hasAction('freestyler.element-panel-context')) {
contextMenu.footerSection().appendAction(
'freestyler.element-panel-context',
);
}
menuItem = contextMenu.clipboardSection().appendItem(
i18nString(UIStrings.cut), treeOutline.performCopyOrCut.bind(treeOutline, true, this.nodeInternal),
{disabled: !this.hasEditableNode(), jslogContext: 'cut'});
menuItem.setShortcut(createShortcut('X', modifier));
// Place it here so that all "Copy"-ing items stick together.
const copyMenu = contextMenu.clipboardSection().appendSubMenuItem(i18nString(UIStrings.copy), false, 'copy');
const section = copyMenu.section();
if (!isShadowRoot) {
menuItem = section.appendItem(
i18nString(UIStrings.copyOuterhtml), treeOutline.performCopyOrCut.bind(treeOutline, false, this.nodeInternal),
{jslogContext: 'copy-outer-html'});
menuItem.setShortcut(createShortcut('V', modifier));
}
if (this.nodeInternal.nodeType() === Node.ELEMENT_NODE) {
section.appendItem(
i18nString(UIStrings.copySelector), this.copyCSSPath.bind(this), {jslogContext: 'copy-selector'});
section.appendItem(
i18nString(UIStrings.copyJsPath), this.copyJSPath.bind(this),
{disabled: !canGetJSPath(this.nodeInternal), jslogContext: 'copy-js-path'});
section.appendItem(
i18nString(UIStrings.copyStyles), this.copyStyles.bind(this), {jslogContext: 'elements.copy-styles'});
}
if (!isShadowRoot) {
section.appendItem(i18nString(UIStrings.copyXpath), this.copyXPath.bind(this), {jslogContext: 'copy-xpath'});
section.appendItem(
i18nString(UIStrings.copyFullXpath), this.copyFullXPath.bind(this), {jslogContext: 'copy-full-xpath'});
}
if (!isShadowRoot) {
menuItem = copyMenu.clipboardSection().appendItem(
i18nString(UIStrings.copyElement), treeOutline.performCopyOrCut.bind(treeOutline, false, this.nodeInternal),
{jslogContext: 'copy-element'});
menuItem.setShortcut(createShortcut('C', modifier));
// Duplicate element, disabled on root element and ShadowDOM.
const isRootElement = !this.nodeInternal.parentNode || this.nodeInternal.parentNode.nodeName() === '#document';
menuItem = contextMenu.editSection().appendItem(
i18nString(UIStrings.duplicateElement), treeOutline.duplicateNode.bind(treeOutline, this.nodeInternal), {
disabled: (this.nodeInternal.isInShadowTree() || isRootElement),
jslogContext: 'elements.duplicate-element',
});
}
menuItem = contextMenu.clipboardSection().appendItem(
i18nString(UIStrings.paste), treeOutline.pasteNode.bind(treeOutline, this.nodeInternal),
{disabled: !treeOutline.canPaste(this.nodeInternal), jslogContext: 'paste'});
menuItem.setShortcut(createShortcut('V', modifier));
menuItem = contextMenu.debugSection().appendCheckboxItem(
i18nString(UIStrings.hideElement), treeOutline.toggleHideElement.bind(treeOutline, this.nodeInternal),
{checked: treeOutline.isToggledToHidden(this.nodeInternal), jslogContext: 'elements.hide-element'});
menuItem.setShortcut(
UI.ShortcutRegistry.ShortcutRegistry.instance().shortcutTitleForAction('elements.hide-element') || '');
if (isEditable) {
contextMenu.editSection().appendItem(
i18nString(UIStrings.deleteElement), this.remove.bind(this), {jslogContext: 'delete-element'});
}
this.populateExpandRecursively(contextMenu);
contextMenu.viewSection().appendItem(
i18nString(UIStrings.collapseChildren), this.collapseChildren.bind(this), {jslogContext: 'collapse-children'});
const deviceModeWrapperAction = new Emulation.DeviceModeWrapper.ActionDelegate();
contextMenu.viewSection().appendItem(
i18nString(UIStrings.captureNodeScreenshot),
deviceModeWrapperAction.handleAction.bind(
null, UI.Context.Context.instance(), 'emulation.capture-node-screenshot'),
{jslogContext: 'emulation.capture-node-screenshot'});
if (this.nodeInternal.frameOwnerFrameId()) {
contextMenu.viewSection().appendItem(i18nString(UIStrings.showFrameDetails), () => {
const frameOwnerFrameId = this.nodeInternal.frameOwnerFrameId();
if (frameOwnerFrameId) {
const frame = SDK.FrameManager.FrameManager.instance().getFrame(frameOwnerFrameId);
void Common.Revealer.reveal(frame);
}
}, {jslogContext: 'show-frame-details'});
}
}
private startEditing(): boolean|undefined {
if (!this.treeOutline || this.treeOutline.selectedDOMNode() !== this.nodeInternal) {
return;
}
const listItem = this.listItemElement;
if (isOpeningTag(this.tagTypeContext) && this.tagTypeContext.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.nodeInternal.nodeType() === Node.TEXT_NODE) {
const textNode = listItem.getElementsByClassName('webkit-html-text-node')[0];
if (textNode) {
return this.startEditingTextNode(textNode);
}
}
return;
}
private addNewAttribute(): boolean {
// 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
attr.setAttribute('jslog', `${VisualLogging.value('new-attribute').track({change: true, resize: true})}`);
const tag = this.listItemElement.getElementsByClassName('webkit-html-tag')[0];
this.insertInLastAttributePosition(tag, attr);
attr.scrollIntoViewIfNeeded(true);
return this.startEditingAttribute(attr, attr);
}
private triggerEditAttribute(attributeName: string): boolean|undefined {
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: (ChildNode|null) = attributeElements[i].nextSibling; elem; elem = elem.nextSibling) {
if (elem.nodeType !== Node.ELEMENT_NODE) {
continue;
}
if ((elem as Element).classList.contains('webkit-html-attribute-value')) {
return this.startEditingAttribute((elem.parentElement as HTMLElement), (elem as Element));
}
}
}
}
return;
}
private startEditingAttribute(attribute: Element, elementForSelection: Element): boolean {
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: Node): void {
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: (ChildNode|null) = node.firstChild; child; child = child.nextSibling) {
removeZeroWidthSpaceRecursive(child);
}
}
const attributeValue = attributeName && attributeValueElement ?
this.nodeInternal.getAttribute(attributeName)?.replaceAll('"', '"') :
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);
function postKeyDownFinishHandler(event: Event): string {
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;
}
private startEditingTextNode(textNodeElement: Element): boolean {
if (UI.UIUtils.isBeingEdited(textNodeElement)) {
return true;
}
let textNode: SDK.DOMModel.DOMNode = this.nodeInternal;
// 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), null);
this.updateEditorHandles(textNodeElement, config);
const componentSelection = this.listItemElement.getComponentSelection();
componentSelection && componentSelection.selectAllChildren(textNodeElement);
return true;
}
private startEditingTagName(tagNameElement?: Element): boolean {
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(): void {
if (closingTagElement && tagNameElement) {
closingTagElement.textContent = '</' + tagNameElement.textContent + '>';
}
}
const keydownListener = (event: Event): void => {
if ((event as KeyboardEvent).key !== ' ') {
return;
}
this.editing && this.editing.commit();
event.consume(true);
};
function editingCommitted(
this: ElementsTreeElement,
element: Element,
newTagName: string,
oldText: string|null,
tagName: string|null,
moveDirection: string,
): void {
if (!tagNameElement) {
return;
}
tagNameElement.removeEventListener('keyup', keyupListener, false);
tagNameElement.removeEventListener('keydown', keydownListener, false);
this.tagNameEditingCommitted(element, newTagName, oldText, tagName, moveDirection);
}
function editingCancelled(this: ElementsTreeElement, element: Element, tagName: string|null): void {
if (!tagNameElement) {
return;
}
tagNameElement.removeEventListener('keyup', keyupListener, false);
tagNameElement.removeEventListener('keydown', keydownListener, false);
this.editingCancelled(element, tagName);
}
tagNameElement.addEventListener('keyup', keyupListener, false);
tagNameElement.addEventListener('keydown', keydownListener, false);
const config =
new UI.InplaceEditor.Config<string|null>(editingCommitted.bind(this), editingCancelled.bind(this), tagName);
this.updateEditorHandles(tagNameElement, config);
const componentSelection = this.listItemElement.getComponentSelection();
componentSelection && componentSelection.selectAllChildren(tagNameElement);
return true;
}
private updateEditorHandles<T>(element: Element, config: UI.InplaceEditor.Config<T>): void {
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: () => {},
};
}
}
private async startEditingAsHTML(
commitCallback: (arg0: string, arg1: string) => void, disposeCallback: () => void,
maybeInitialValue: string|null): Promise<void> {
if (maybeInitialValue === null) {
return;
}
if (this.editing) {
return;
}
const initialValue = convertUnicodeCharsToHTMLEntities(maybeInitialValue).text;
this.htmlEditElement = document.createElement('div');
this.htmlEditElement.className = 'source-code elements-tree-editor';
// Hide header items.
let child: (ChildNode|null) = this.listItemElement.firstChild;
while (child) {
(child as HTMLElement).style.display = 'none';
child = child.nextSibling;
}
// Hide children item.
if (this.childrenListElement) {
this.childrenListElement.style.display = 'none';
}
// Append editor.
this.listItemElement.append(this.htmlEditElement);
this.htmlEditElement.addEventListener('keydown', event => {
if (event.key === 'Escape') {
event.consume(true);
}
});
const editor = new TextEditor.TextEditor.TextEditor(CodeMirror.EditorState.create({
doc: initialValue,
extensions: [
CodeMirror.keymap.of([
{
key: 'Mod-Enter',
run: () => {
this.editing?.commit();
return true;
},
},
{
key: 'Escape',
run: () => {
this.editing?.cancel();
return true;
},
},
]),
TextEditor.Config.baseConfiguration(initialValue),
TextEditor.Config.closeBrackets.instance(),
TextEditor.Config.autocompletion.instance(),
CodeMirror.html.html({autoCloseTags: false, selfClosingTags: true}),
TextEditor.Config.domWordWrap.instance(),
CodeMirror.EditorView.theme({
'&.cm-editor': {maxHeight: '300px'},
'.cm-scroller': {overflowY: 'auto'},
}),
CodeMirror.EditorView.domEventHandlers({
focusout: event => {
// The relatedTarget is null when no element gains focus, e.g. switching windows.
const relatedTarget = (event.relatedTarget as Node | null);
if (relatedTarget && !relatedTarget.isSelfOrDescendant(editor)) {
this.editing && this.editing.commit();
}
},
}),
],
}));
this.editing = {commit: commit.bind(this), cancel: dispose.bind(this), editor, resize: resize.bind(this)};
resize.call(this);
this.htmlEditElement.appendChild(editor);
editor.editor.focus();
this.treeOutline && this.treeOutline.setMultilineEditing(this.editing);
function resize(this: ElementsTreeElement): void {
if (this.treeOutline && this.htmlEditElement) {
this.htmlEditElement.style.width = this.treeOutline.visibleWidth() - this.computeLeftIndent() - 30 + 'px';
}
}
function commit(this: ElementsTreeElement): void {
if (this.editing?.editor) {
commitCallback(initialValue, this.editing.editor.state.doc.toString());
}
dispose.call(this);
}
function dispose(this: ElementsTreeElement): void {
if (!this.editing?.editor) {
return;
}
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: (ChildNode|null) = this.listItemElement.firstChild;
while (child) {
(child as HTMLElement).style.removeProperty('display');
child = child.nextSibling;
}
if (this.treeOutline) {
this.treeOutline.setMultilineEditing(null);
this.treeOutline.focus();
}
disposeCallback();
}
}
private attributeEditingCommitted(
element: Element,
newText: string,
oldText: string|null,
attributeName: string|null,
moveDirection: string,
): void {
this.editing = null;
const treeOutline = this.treeOutline;
function moveToNextAttributeIfNeeded(this: ElementsTreeElement, error?: string|null): void {
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.nodeInternal.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);
}
// Moving from "New Attribute" that holds new value
} else 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 !== null && (attributeName.trim() || newText.trim()) && oldText !== newText) {
this.nodeInternal.setAttribute(attributeName, newText, moveToNextAttributeIfNeeded.bind(this));
return;
}
this.updateTitle();
moveToNextAttributeIfNeeded.call(this);
}
private tagNameEditingCommitted(
element: Element,
newText: string,
oldText: string|null,
tagName: string|null,
moveDirection: string,
): void {
this.editing = null;
const self = this;
function cancel(): void {
const closingTagElement = self.distinctClosingTagElement();
if (closingTagElement) {
closingTagElement.textContent = '</' + tagName + '>';
}
self.editingCancelled(element, tagName);
moveToNextAttributeIfNeeded.call(self);
}
function moveToNextAttributeIfNeeded(this: ElementsTreeElement): void {
if (moveDirection !== 'forward') {
this.addNewAttribute();
return;
}
const attributes = this.nodeInternal.attributes();
if (attributes.length > 0) {
this.triggerEditAttribute(attributes[0].name);
} else {
this.addNewAttribute();
}
}
newText = newText.tr