chrome-devtools-frontend
Version:
Chrome DevTools UI
1,451 lines (1,284 loc) • 69 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) 2011 Google Inc. All rights reserved.
* Copyright (C) 2006, 2007, 2008 Apple Inc. All rights reserved.
* Copyright (C) 2007 Matt Lilek (pewtermoose@gmail.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 './Toolbar.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 Root from '../../core/root/root.js';
import * as TextUtils from '../../models/text_utils/text_utils.js';
import * as Buttons from '../components/buttons/buttons.js';
import * as IconButton from '../components/icon_button/icon_button.js';
import * as VisualLogging from '../visual_logging/visual_logging.js';
import * as ARIAUtils from './ARIAUtils.js';
import checkboxTextLabelStyles from './checkboxTextLabel.css.js';
import confirmDialogStyles from './confirmDialog.css.js';
import {Dialog} from './Dialog.js';
import {Size} from './Geometry.js';
import {GlassPane, PointerEventsBehavior, SizeBehavior} from './GlassPane.js';
import inlineButtonStyles from './inlineButton.css.js';
import inspectorCommonStyles from './inspectorCommon.css.js';
import {KeyboardShortcut, Keys} from './KeyboardShortcut.js';
import smallBubbleStyles from './smallBubble.css.js';
import type {ToolbarButton} from './Toolbar.js';
import {Tooltip} from './Tooltip.js';
import type {TreeOutline} from './Treeoutline.js';
import {Widget} from './Widget.js';
import type {XWidget} from './XWidget.js';
declare global {
interface HTMLElementTagNameMap {
'devtools-checkbox': CheckboxLabel;
'dt-close-button': DevToolsCloseButton;
'dt-icon-label': DevToolsIconLabel;
'dt-small-bubble': DevToolsSmallBubble;
}
}
const UIStrings = {
/**
*@description label to open link externally
*/
openInNewTab: 'Open in new tab',
/**
*@description label to copy link address
*/
copyLinkAddress: 'Copy link address',
/**
*@description label to copy file name
*/
copyFileName: 'Copy file name',
/**
*@description label for the profiler control button
*/
anotherProfilerIsAlreadyActive: 'Another profiler is already active',
/**
*@description Text in UIUtils
*/
promiseResolvedAsync: 'Promise resolved (async)',
/**
*@description Text in UIUtils
*/
promiseRejectedAsync: 'Promise rejected (async)',
/**
*@description Text for the title of asynchronous function calls group in Call Stack
*/
asyncCall: 'Async Call',
/**
*@description Text for the name of anonymous functions
*/
anonymous: '(anonymous)',
/**
*@description Text to close something
*/
close: 'Close',
/**
*@description Text on a button for message dialog
*/
ok: 'OK',
/**
*@description Text to cancel something
*/
cancel: 'Cancel',
} as const;
const str_ = i18n.i18n.registerUIStrings('ui/legacy/UIUtils.ts', UIStrings);
const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
export const highlightedSearchResultClassName = 'highlighted-search-result';
export const highlightedCurrentSearchResultClassName = 'current-search-result';
export function installDragHandle(
element: Element, elementDragStart: ((arg0: MouseEvent) => boolean)|null, elementDrag: (arg0: MouseEvent) => void,
elementDragEnd: ((arg0: MouseEvent) => void)|null, cursor: string|null, hoverCursor?: string|null,
startDelay?: number): void {
function onMouseDown(event: Event): void {
const dragHandler = new DragHandler();
const dragStart = (): void =>
dragHandler.elementDragStart(element, elementDragStart, elementDrag, elementDragEnd, cursor, event);
if (startDelay) {
startTimer = window.setTimeout(dragStart, startDelay);
} else {
dragStart();
}
}
function onMouseUp(): void {
if (startTimer) {
window.clearTimeout(startTimer);
}
startTimer = null;
}
let startTimer: number|null;
element.addEventListener('pointerdown', onMouseDown, false);
if (startDelay) {
element.addEventListener('pointerup', onMouseUp, false);
}
if (hoverCursor !== null) {
(element as HTMLElement).style.cursor = hoverCursor || cursor || '';
}
}
export function elementDragStart(
targetElement: Element, elementDragStart: ((arg0: MouseEvent) => boolean)|null,
elementDrag: (arg0: MouseEvent) => void, elementDragEnd: ((arg0: MouseEvent) => void)|null, cursor: string|null,
event: Event): void {
const dragHandler = new DragHandler();
dragHandler.elementDragStart(targetElement, elementDragStart, elementDrag, elementDragEnd, cursor, event);
}
class DragHandler {
private glassPaneInUse?: boolean;
private elementDraggingEventListener?: ((arg0: MouseEvent) => void|boolean);
private elementEndDraggingEventListener?: ((arg0: MouseEvent) => void)|null;
private dragEventsTargetDocument?: Document;
private dragEventsTargetDocumentTop?: Document;
private restoreCursorAfterDrag?: (() => void);
constructor() {
this.elementDragMove = this.elementDragMove.bind(this);
this.elementDragEnd = this.elementDragEnd.bind(this);
this.mouseOutWhileDragging = this.mouseOutWhileDragging.bind(this);
}
private createGlassPane(): void {
this.glassPaneInUse = true;
if (!DragHandler.glassPaneUsageCount++) {
DragHandler.glassPane = new GlassPane();
DragHandler.glassPane.setPointerEventsBehavior(PointerEventsBehavior.BLOCKED_BY_GLASS_PANE);
if (DragHandler.documentForMouseOut) {
DragHandler.glassPane.show(DragHandler.documentForMouseOut);
}
}
}
private disposeGlassPane(): void {
if (!this.glassPaneInUse) {
return;
}
this.glassPaneInUse = false;
if (--DragHandler.glassPaneUsageCount) {
return;
}
if (DragHandler.glassPane) {
DragHandler.glassPane.hide();
DragHandler.glassPane = null;
}
DragHandler.documentForMouseOut = null;
DragHandler.rootForMouseOut = null;
}
elementDragStart(
targetElement: Element, elementDragStart: ((arg0: MouseEvent) => boolean)|null,
elementDrag: (arg0: MouseEvent) => void|boolean, elementDragEnd: ((arg0: MouseEvent) => void)|null,
cursor: string|null, ev: Event): void {
const event = (ev as MouseEvent);
// Only drag upon left button. Right will likely cause a context menu. So will ctrl-click on mac.
if (event.button || (Host.Platform.isMac() && event.ctrlKey)) {
return;
}
if (this.elementDraggingEventListener) {
return;
}
if (elementDragStart && !elementDragStart((event))) {
return;
}
const targetDocument = (event.target instanceof Node && event.target.ownerDocument) as Document;
this.elementDraggingEventListener = elementDrag;
this.elementEndDraggingEventListener = elementDragEnd;
console.assert(
(DragHandler.documentForMouseOut || targetDocument) === targetDocument, 'Dragging on multiple documents.');
DragHandler.documentForMouseOut = targetDocument;
DragHandler.rootForMouseOut = event.target instanceof Node && event.target.getRootNode() || null;
this.dragEventsTargetDocument = targetDocument;
try {
if (targetDocument.defaultView && targetDocument.defaultView.top) {
this.dragEventsTargetDocumentTop = targetDocument.defaultView.top.document;
}
} catch {
this.dragEventsTargetDocumentTop = this.dragEventsTargetDocument;
}
targetDocument.addEventListener('pointermove', this.elementDragMove, true);
targetDocument.addEventListener('pointerup', this.elementDragEnd, true);
DragHandler.rootForMouseOut &&
DragHandler.rootForMouseOut.addEventListener('pointerout', this.mouseOutWhileDragging, {capture: true});
if (this.dragEventsTargetDocumentTop && targetDocument !== this.dragEventsTargetDocumentTop) {
this.dragEventsTargetDocumentTop.addEventListener('pointerup', this.elementDragEnd, true);
}
const targetHtmlElement = (targetElement as HTMLElement);
if (typeof cursor === 'string') {
this.restoreCursorAfterDrag = restoreCursor.bind(this, targetHtmlElement.style.cursor);
targetHtmlElement.style.cursor = cursor;
targetDocument.body.style.cursor = cursor;
}
function restoreCursor(this: DragHandler, oldCursor: string): void {
targetDocument.body.style.removeProperty('cursor');
targetHtmlElement.style.cursor = oldCursor;
this.restoreCursorAfterDrag = undefined;
}
event.preventDefault();
}
private mouseOutWhileDragging(): void {
this.unregisterMouseOutWhileDragging();
this.createGlassPane();
}
private unregisterMouseOutWhileDragging(): void {
if (!DragHandler.rootForMouseOut) {
return;
}
DragHandler.rootForMouseOut.removeEventListener('pointerout', this.mouseOutWhileDragging, {capture: true});
}
private unregisterDragEvents(): void {
if (!this.dragEventsTargetDocument) {
return;
}
this.dragEventsTargetDocument.removeEventListener('pointermove', this.elementDragMove, true);
this.dragEventsTargetDocument.removeEventListener('pointerup', this.elementDragEnd, true);
if (this.dragEventsTargetDocumentTop && this.dragEventsTargetDocument !== this.dragEventsTargetDocumentTop) {
this.dragEventsTargetDocumentTop.removeEventListener('pointerup', this.elementDragEnd, true);
}
delete this.dragEventsTargetDocument;
delete this.dragEventsTargetDocumentTop;
}
private elementDragMove(event: MouseEvent): void {
if (event.buttons !== 1) {
this.elementDragEnd(event);
return;
}
if (this.elementDraggingEventListener && this.elementDraggingEventListener(event)) {
this.cancelDragEvents(event);
}
}
private cancelDragEvents(_event: Event): void {
this.unregisterDragEvents();
this.unregisterMouseOutWhileDragging();
if (this.restoreCursorAfterDrag) {
this.restoreCursorAfterDrag();
}
this.disposeGlassPane();
delete this.elementDraggingEventListener;
delete this.elementEndDraggingEventListener;
}
private elementDragEnd(event: Event): void {
const elementDragEnd = this.elementEndDraggingEventListener;
this.cancelDragEvents((event as MouseEvent));
event.preventDefault();
if (elementDragEnd) {
elementDragEnd((event as MouseEvent));
}
}
private static glassPaneUsageCount = 0;
private static glassPane: GlassPane|null = null;
private static documentForMouseOut: Document|null = null;
private static rootForMouseOut: Node|null = null;
}
export function isBeingEdited(node?: Node|null): boolean {
if (!node || node.nodeType !== Node.ELEMENT_NODE) {
return false;
}
const element = (node as Element);
if (element.classList.contains('text-prompt') || element.nodeName === 'INPUT' || element.nodeName === 'TEXTAREA') {
return true;
}
if (!elementsBeingEdited.size) {
return false;
}
let currentElement: (Element|null)|Element = element;
while (currentElement) {
if (elementsBeingEdited.has(element)) {
return true;
}
currentElement = currentElement.parentElementOrShadowHost();
}
return false;
}
export function isEditing(): boolean {
if (elementsBeingEdited.size) {
return true;
}
const focused = Platform.DOMUtilities.deepActiveElement(document);
if (!focused) {
return false;
}
return focused.classList.contains('text-prompt') || focused.nodeName === 'INPUT' || focused.nodeName === 'TEXTAREA' ||
((focused as HTMLElement).contentEditable === 'true' ||
(focused as HTMLElement).contentEditable === 'plaintext-only');
}
export function markBeingEdited(element: Element, value: boolean): boolean {
if (value) {
if (elementsBeingEdited.has(element)) {
return false;
}
element.classList.add('being-edited');
elementsBeingEdited.add(element);
} else {
if (!elementsBeingEdited.has(element)) {
return false;
}
element.classList.remove('being-edited');
elementsBeingEdited.delete(element);
}
return true;
}
const elementsBeingEdited = new Set<Element>();
// Avoids Infinity, NaN, and scientific notation (e.g. 1e20), see crbug.com/81165.
const numberRegex = /^(-?(?:\d+(?:\.\d+)?|\.\d+))$/;
export const StyleValueDelimiters = ' \xA0\t\n"\':;,/()';
export function getValueModificationDirection(event: Event): string|null {
let direction: 'Up'|'Down'|null = null;
if (event instanceof WheelEvent) {
// When shift is pressed while spinning mousewheel, delta comes as wheelDeltaX.
if (event.deltaY < 0 || event.deltaX < 0) {
direction = 'Up';
} else if (event.deltaY > 0 || event.deltaX > 0) {
direction = 'Down';
}
} else if (event instanceof MouseEvent) {
if (event.movementX < 0) {
direction = 'Down';
} else if (event.movementX > 0) {
direction = 'Up';
}
} else if (event instanceof KeyboardEvent) {
if (event.key === 'ArrowUp' || event.key === 'PageUp') {
direction = 'Up';
} else if (event.key === 'ArrowDown' || event.key === 'PageDown') {
direction = 'Down';
}
}
return direction;
}
function modifiedHexValue(hexString: string, event: Event): string|null {
const direction = getValueModificationDirection(event);
if (!direction) {
return null;
}
const mouseEvent = (event as MouseEvent);
const number = parseInt(hexString, 16);
if (isNaN(number) || !isFinite(number)) {
return null;
}
const hexStrLen = hexString.length;
const channelLen = hexStrLen / 3;
// Colors are either rgb or rrggbb.
if (channelLen !== 1 && channelLen !== 2) {
return null;
}
// Precision modifier keys work with both mousewheel and up/down keys.
// When ctrl is pressed, increase R by 1.
// When shift is pressed, increase G by 1.
// When alt is pressed, increase B by 1.
// If no shortcut keys are pressed then increase hex value by 1.
// Keys can be pressed together to increase RGB channels. e.g trying different shades.
let delta = 0;
if (KeyboardShortcut.eventHasCtrlEquivalentKey(mouseEvent)) {
delta += Math.pow(16, channelLen * 2);
}
if (mouseEvent.shiftKey) {
delta += Math.pow(16, channelLen);
}
if (mouseEvent.altKey) {
delta += 1;
}
if (delta === 0) {
delta = 1;
}
if (direction === 'Down') {
delta *= -1;
}
// Increase hex value by 1 and clamp from 0 ... maxValue.
const maxValue = Math.pow(16, hexStrLen) - 1;
const result = Platform.NumberUtilities.clamp(number + delta, 0, maxValue);
// Ensure the result length is the same as the original hex value.
let resultString = result.toString(16).toUpperCase();
for (let i = 0, lengthDelta = hexStrLen - resultString.length; i < lengthDelta; ++i) {
resultString = '0' + resultString;
}
return resultString;
}
export function modifiedFloatNumber(number: number, event: Event, modifierMultiplier?: number): number|null {
const direction = getValueModificationDirection(event);
if (!direction) {
return null;
}
const mouseEvent = (event as MouseEvent);
// Precision modifier keys work with both mousewheel and up/down keys.
// When ctrl is pressed, increase by 100.
// When shift is pressed, increase by 10.
// When alt is pressed, increase by 0.1.
// Otherwise increase by 1.
let delta = mouseEvent.type === 'mousemove' ? Math.abs(mouseEvent.movementX) : 1;
if (KeyboardShortcut.eventHasCtrlEquivalentKey(mouseEvent)) {
delta *= 100;
} else if (mouseEvent.shiftKey) {
delta *= 10;
} else if (mouseEvent.altKey) {
delta *= 0.1;
}
if (direction === 'Down') {
delta *= -1;
}
if (modifierMultiplier) {
delta *= modifierMultiplier;
}
// Make the new number and constrain it to a precision of 6, this matches numbers the engine returns.
// Use the Number constructor to forget the fixed precision, so 1.100000 will print as 1.1.
const result = Number((number + delta).toFixed(6));
if (!String(result).match(numberRegex)) {
return null;
}
return result;
}
export function createReplacementString(
wordString: string, event: Event,
customNumberHandler?: ((arg0: string, arg1: number, arg2: string) => string)): string|null {
let prefix;
let suffix;
let number;
let replacementString: string|null = null;
let matches = /(.*#)([\da-fA-F]+)(.*)/.exec(wordString);
if (matches?.length) {
prefix = matches[1];
suffix = matches[3];
number = modifiedHexValue(matches[2], event);
if (number !== null) {
replacementString = prefix + number + suffix;
}
} else {
matches = /(.*?)(-?(?:\d+(?:\.\d+)?|\.\d+))(.*)/.exec(wordString);
if (matches?.length) {
prefix = matches[1];
suffix = matches[3];
number = modifiedFloatNumber(parseFloat(matches[2]), event);
if (number !== null) {
replacementString =
customNumberHandler ? customNumberHandler(prefix, number, suffix) : prefix + number + suffix;
}
}
}
return replacementString;
}
export function isElementValueModification(event: Event): boolean {
if (event instanceof MouseEvent) {
const {type} = event;
return type === 'mousemove' || type === 'wheel';
}
if (event instanceof KeyboardEvent) {
const {key} = event;
return key === 'ArrowUp' || key === 'ArrowDown' || key === 'PageUp' || key === 'PageDown';
}
return false;
}
export function handleElementValueModifications(
event: Event, element: Element, finishHandler?: ((arg0: string, arg1: string) => void),
suggestionHandler?: ((arg0: string) => boolean),
customNumberHandler?: ((arg0: string, arg1: number, arg2: string) => string)): boolean {
if (!isElementValueModification(event)) {
return false;
}
void VisualLogging.logKeyDown(event.currentTarget, event, 'element-value-modification');
const selection = element.getComponentSelection();
if (!selection?.rangeCount) {
return false;
}
const selectionRange = selection.getRangeAt(0);
if (!selectionRange.commonAncestorContainer.isSelfOrDescendant(element)) {
return false;
}
const originalValue = element.textContent;
const wordRange = Platform.DOMUtilities.rangeOfWord(
selectionRange.startContainer, selectionRange.startOffset, StyleValueDelimiters, element);
const wordString = wordRange.toString();
if (suggestionHandler?.(wordString)) {
return false;
}
const replacementString = createReplacementString(wordString, event, customNumberHandler);
if (replacementString) {
const replacementTextNode = document.createTextNode(replacementString);
wordRange.deleteContents();
wordRange.insertNode(replacementTextNode);
const finalSelectionRange = document.createRange();
finalSelectionRange.setStart(replacementTextNode, 0);
finalSelectionRange.setEnd(replacementTextNode, replacementString.length);
selection.removeAllRanges();
selection.addRange(finalSelectionRange);
event.handled = true;
event.preventDefault();
if (finishHandler) {
finishHandler(originalValue || '', replacementString);
}
return true;
}
return false;
}
export function openLinkExternallyLabel(): string {
return i18nString(UIStrings.openInNewTab);
}
export function copyLinkAddressLabel(): string {
return i18nString(UIStrings.copyLinkAddress);
}
export function copyFileNameLabel(): string {
return i18nString(UIStrings.copyFileName);
}
export function anotherProfilerActiveLabel(): string {
return i18nString(UIStrings.anotherProfilerIsAlreadyActive);
}
export function asyncStackTraceLabel(
description: string|undefined, previousCallFrames: Array<{functionName: string}>): string {
if (description) {
if (description === 'Promise.resolve') {
return i18nString(UIStrings.promiseResolvedAsync);
}
if (description === 'Promise.reject') {
return i18nString(UIStrings.promiseRejectedAsync);
}
if (description === 'await' && previousCallFrames.length !== 0) {
const lastPreviousFrame = previousCallFrames[previousCallFrames.length - 1];
const lastPreviousFrameName = beautifyFunctionName(lastPreviousFrame.functionName);
description = `await in ${lastPreviousFrameName}`;
}
return description;
}
return i18nString(UIStrings.asyncCall);
}
export function addPlatformClass(element: HTMLElement): void {
element.classList.add('platform-' + Host.Platform.platform());
}
export function installComponentRootStyles(element: HTMLElement): void {
Platform.DOMUtilities.appendStyle(element, inspectorCommonStyles);
Platform.DOMUtilities.appendStyle(element, Buttons.textButtonStyles);
// Detect overlay scrollbar enable by checking for nonzero scrollbar width.
if (!Host.Platform.isMac() && measuredScrollbarWidth(element.ownerDocument) === 0) {
element.classList.add('overlay-scrollbar-enabled');
}
}
function windowFocused(document: Document, event: Event): void {
if (event.target instanceof Window && event.target.document.nodeType === Node.DOCUMENT_NODE) {
document.body.classList.remove('inactive');
}
}
function windowBlurred(document: Document, event: Event): void {
if (event.target instanceof Window && event.target.document.nodeType === Node.DOCUMENT_NODE) {
document.body.classList.add('inactive');
}
}
export class ElementFocusRestorer {
private element: HTMLElement|null;
private previous: HTMLElement|null;
constructor(element: Element) {
this.element = (element as HTMLElement | null);
this.previous = (Platform.DOMUtilities.deepActiveElement(element.ownerDocument) as HTMLElement | null);
(element as HTMLElement).focus();
}
restore(): void {
if (!this.element) {
return;
}
if (this.element.hasFocus() && this.previous) {
this.previous.focus();
}
this.previous = null;
this.element = null;
}
}
export function highlightSearchResult(
element: Element, offset: number, length: number, domChanges?: HighlightChange[]): Element|null {
const result = highlightSearchResults(element, [new TextUtils.TextRange.SourceRange(offset, length)], domChanges);
return result.length ? result[0] : null;
}
export function highlightSearchResults(
element: Element, resultRanges: TextUtils.TextRange.SourceRange[], changes?: HighlightChange[]): Element[] {
return highlightRangesWithStyleClass(element, resultRanges, highlightedSearchResultClassName, changes);
}
export function runCSSAnimationOnce(element: Element, className: string): void {
function animationEndCallback(): void {
element.classList.remove(className);
element.removeEventListener('webkitAnimationEnd', animationEndCallback, false);
element.removeEventListener('animationcancel', animationEndCallback, false);
}
if (element.classList.contains(className)) {
element.classList.remove(className);
}
element.addEventListener('webkitAnimationEnd', animationEndCallback, false);
element.addEventListener('animationcancel', animationEndCallback, false);
element.classList.add(className);
}
export function highlightRangesWithStyleClass(
element: Element, resultRanges: TextUtils.TextRange.SourceRange[], styleClass: string,
changes?: HighlightChange[]): Element[] {
changes = changes || [];
const highlightNodes: Element[] = [];
const textNodes = element.childTextNodes();
const lineText = textNodes
.map(function(node) {
return node.textContent;
})
.join('');
const ownerDocument = element.ownerDocument;
if (textNodes.length === 0) {
return highlightNodes;
}
const nodeRanges: TextUtils.TextRange.SourceRange[] = [];
let rangeEndOffset = 0;
for (const textNode of textNodes) {
const range =
new TextUtils.TextRange.SourceRange(rangeEndOffset, textNode.textContent ? textNode.textContent.length : 0);
rangeEndOffset = range.offset + range.length;
nodeRanges.push(range);
}
let startIndex = 0;
for (let i = 0; i < resultRanges.length; ++i) {
const startOffset = resultRanges[i].offset;
const endOffset = startOffset + resultRanges[i].length;
while (startIndex < textNodes.length &&
nodeRanges[startIndex].offset + nodeRanges[startIndex].length <= startOffset) {
startIndex++;
}
let endIndex = startIndex;
while (endIndex < textNodes.length && nodeRanges[endIndex].offset + nodeRanges[endIndex].length < endOffset) {
endIndex++;
}
if (endIndex === textNodes.length) {
break;
}
const highlightNode = ownerDocument.createElement('span');
highlightNode.className = styleClass;
highlightNode.textContent = lineText.substring(startOffset, endOffset);
const lastTextNode = textNodes[endIndex];
const lastText = lastTextNode.textContent || '';
lastTextNode.textContent = lastText.substring(endOffset - nodeRanges[endIndex].offset);
changes.push({
node: (lastTextNode as Element),
type: 'changed',
oldText: lastText,
newText: lastTextNode.textContent,
nextSibling: undefined,
parent: undefined,
});
if (startIndex === endIndex && lastTextNode.parentElement) {
lastTextNode.parentElement.insertBefore(highlightNode, lastTextNode);
changes.push({
node: highlightNode,
type: 'added',
nextSibling: lastTextNode,
parent: lastTextNode.parentElement,
oldText: undefined,
newText: undefined,
});
highlightNodes.push(highlightNode);
const prefixNode =
ownerDocument.createTextNode(lastText.substring(0, startOffset - nodeRanges[startIndex].offset));
lastTextNode.parentElement.insertBefore(prefixNode, highlightNode);
changes.push({
node: prefixNode,
type: 'added',
nextSibling: highlightNode,
parent: lastTextNode.parentElement,
oldText: undefined,
newText: undefined,
});
} else {
const firstTextNode = textNodes[startIndex];
const firstText = firstTextNode.textContent || '';
const anchorElement = firstTextNode.nextSibling;
if (firstTextNode.parentElement) {
firstTextNode.parentElement.insertBefore(highlightNode, anchorElement);
changes.push({
node: highlightNode,
type: 'added',
nextSibling: anchorElement || undefined,
parent: firstTextNode.parentElement,
oldText: undefined,
newText: undefined,
});
highlightNodes.push(highlightNode);
}
firstTextNode.textContent = firstText.substring(0, startOffset - nodeRanges[startIndex].offset);
changes.push({
node: (firstTextNode as Element),
type: 'changed',
oldText: firstText,
newText: firstTextNode.textContent,
nextSibling: undefined,
parent: undefined,
});
for (let j = startIndex + 1; j < endIndex; j++) {
const textNode = textNodes[j];
const text = textNode.textContent;
textNode.textContent = '';
changes.push({
node: (textNode as Element),
type: 'changed',
oldText: text || undefined,
newText: textNode.textContent,
nextSibling: undefined,
parent: undefined,
});
}
}
startIndex = endIndex;
nodeRanges[startIndex].offset = endOffset;
nodeRanges[startIndex].length = lastTextNode.textContent.length;
}
return highlightNodes;
}
// Used in chromium/src/third_party/blink/web_tests/http/tests/devtools/components/utilities-highlight-results.js
export function applyDomChanges(domChanges: HighlightChange[]): void {
for (let i = 0, size = domChanges.length; i < size; ++i) {
const entry = domChanges[i];
switch (entry.type) {
case 'added':
entry.parent?.insertBefore(entry.node, entry.nextSibling ?? null);
break;
case 'changed':
entry.node.textContent = entry.newText ?? null;
break;
}
}
}
export function revertDomChanges(domChanges: HighlightChange[]): void {
for (let i = domChanges.length - 1; i >= 0; --i) {
const entry = domChanges[i];
switch (entry.type) {
case 'added':
entry.node.remove();
break;
case 'changed':
entry.node.textContent = entry.oldText ?? null;
break;
}
}
}
export function measurePreferredSize(element: Element, containerElement?: Element|null): Size {
const oldParent = element.parentElement;
const oldNextSibling = element.nextSibling;
containerElement = containerElement || element.ownerDocument.body;
containerElement.appendChild(element);
element.positionAt(0, 0);
const result = element.getBoundingClientRect();
element.positionAt(undefined, undefined);
if (oldParent) {
oldParent.insertBefore(element, oldNextSibling);
} else {
element.remove();
}
return new Size(result.width, result.height);
}
class InvokeOnceHandlers {
private handlers: Map<object, Set<(...args: any[]) => void>>|null;
private readonly autoInvoke: boolean;
constructor(autoInvoke: boolean) {
this.handlers = null;
this.autoInvoke = autoInvoke;
}
add(object: Object, method: () => void): void {
if (!this.handlers) {
this.handlers = new Map();
if (this.autoInvoke) {
this.scheduleInvoke();
}
}
let methods = this.handlers.get(object);
if (!methods) {
methods = new Set();
this.handlers.set(object, methods);
}
methods.add(method);
}
scheduleInvoke(): void {
if (this.handlers) {
requestAnimationFrame(this.invoke.bind(this));
}
}
private invoke(): void {
const handlers = this.handlers;
this.handlers = null;
if (handlers) {
for (const [object, methods] of handlers) {
for (const method of methods) {
method.call(object);
}
}
}
}
}
let coalescingLevel = 0;
let postUpdateHandlers: InvokeOnceHandlers|null = null;
export function startBatchUpdate(): void {
if (!coalescingLevel++) {
postUpdateHandlers = new InvokeOnceHandlers(false);
}
}
export function endBatchUpdate(): void {
if (--coalescingLevel) {
return;
}
if (postUpdateHandlers) {
postUpdateHandlers.scheduleInvoke();
postUpdateHandlers = null;
}
}
export function invokeOnceAfterBatchUpdate(object: Object, method: () => void): void {
if (!postUpdateHandlers) {
postUpdateHandlers = new InvokeOnceHandlers(true);
}
postUpdateHandlers.add(object, method);
}
export function animateFunction(
window: Window, func: (...args: any[]) => void, params: Array<{
from: number,
to: number,
}>,
duration: number, animationComplete?: (() => void)): () => void {
const start = window.performance.now();
let raf = window.requestAnimationFrame(animationStep);
function animationStep(timestamp: number): void {
const progress = Platform.NumberUtilities.clamp((timestamp - start) / duration, 0, 1);
func(...params.map(p => p.from + (p.to - p.from) * progress));
if (progress < 1) {
raf = window.requestAnimationFrame(animationStep);
} else if (animationComplete) {
animationComplete();
}
}
return () => window.cancelAnimationFrame(raf);
}
export class LongClickController {
private readonly element: Element;
private readonly callback: (arg0: Event) => void;
private readonly editKey: (arg0: KeyboardEvent) => boolean;
private longClickData!: {
mouseUp: (arg0: Event) => void,
mouseDown: (arg0: Event) => void,
reset: () => void,
}|undefined;
private longClickInterval!: number|undefined;
constructor(
element: Element, callback: (arg0: Event) => void,
isEditKeyFunc: (arg0: KeyboardEvent) => boolean = (event):
boolean => Platform.KeyboardUtilities.isEnterOrSpaceKey(event)) {
this.element = element;
this.callback = callback;
this.editKey = isEditKeyFunc;
this.enable();
}
reset(): void {
if (this.longClickInterval) {
clearInterval(this.longClickInterval);
delete this.longClickInterval;
}
}
private enable(): void {
if (this.longClickData) {
return;
}
const boundKeyDown = keyDown.bind(this);
const boundKeyUp = keyUp.bind(this);
const boundMouseDown = mouseDown.bind(this);
const boundMouseUp = mouseUp.bind(this);
const boundReset = this.reset.bind(this);
this.element.addEventListener('keydown', boundKeyDown, false);
this.element.addEventListener('keyup', boundKeyUp, false);
this.element.addEventListener('pointerdown', boundMouseDown, false);
this.element.addEventListener('pointerout', boundReset, false);
this.element.addEventListener('pointerup', boundMouseUp, false);
this.element.addEventListener('click', boundReset, true);
this.longClickData = {mouseUp: boundMouseUp, mouseDown: boundMouseDown, reset: boundReset};
function keyDown(this: LongClickController, e: Event): void {
if (this.editKey(e as KeyboardEvent)) {
const callback = this.callback;
this.longClickInterval = window.setTimeout(callback.bind(null, e), LongClickController.TIME_MS);
}
}
function keyUp(this: LongClickController, e: Event): void {
if (this.editKey(e as KeyboardEvent)) {
this.reset();
}
}
function mouseDown(this: LongClickController, e: Event): void {
if ((e as MouseEvent).which !== 1) {
return;
}
const callback = this.callback;
this.longClickInterval = window.setTimeout(callback.bind(null, e), LongClickController.TIME_MS);
}
function mouseUp(this: LongClickController, e: Event): void {
if ((e as MouseEvent).which !== 1) {
return;
}
this.reset();
}
}
dispose(): void {
if (!this.longClickData) {
return;
}
this.element.removeEventListener('pointerdown', this.longClickData.mouseDown, false);
this.element.removeEventListener('pointerout', this.longClickData.reset, false);
this.element.removeEventListener('pointerup', this.longClickData.mouseUp, false);
this.element.addEventListener('click', this.longClickData.reset, true);
delete this.longClickData;
}
static readonly TIME_MS = 200;
}
export function initializeUIUtils(document: Document): void {
document.body.classList.toggle('inactive', !document.hasFocus());
if (document.defaultView) {
document.defaultView.addEventListener('focus', windowFocused.bind(undefined, document), false);
document.defaultView.addEventListener('blur', windowBlurred.bind(undefined, document), false);
}
document.addEventListener('focus', focusChanged.bind(undefined), true);
const body = (document.body as Element);
GlassPane.setContainer(body);
}
export function beautifyFunctionName(name: string): string {
return name || i18nString(UIStrings.anonymous);
}
export const createTextChild = (element: Element|DocumentFragment, text: string): Text => {
const textNode = element.ownerDocument.createTextNode(text);
element.appendChild(textNode);
return textNode;
};
export const createTextChildren = (element: Element|DocumentFragment, ...childrenText: string[]): void => {
for (const child of childrenText) {
createTextChild(element, child);
}
};
export function createTextButton(text: string, clickHandler?: ((arg0: Event) => void), opts?: {
className?: string,
jslogContext?: string,
variant?: Buttons.Button.Variant,
title?: string,
icon?: string,
}): Buttons.Button.Button {
const button = new Buttons.Button.Button();
if (opts?.className) {
button.className = opts.className;
}
button.textContent = text;
button.iconName = opts?.icon;
button.variant = opts?.variant ? opts.variant : Buttons.Button.Variant.OUTLINED;
if (clickHandler) {
button.addEventListener('click', clickHandler);
button.addEventListener('keydown', (event: KeyboardEvent): void => {
if (event.key === 'Enter' || event.key === 'Space') {
// Make sure we don't propagate 'Enter' or 'Space' key events to parents,
// so that these get turned into 'click' events properly.
event.stopImmediatePropagation();
}
});
}
if (opts?.jslogContext) {
button.setAttribute('jslog', `${VisualLogging.action().track({click: true}).context(opts.jslogContext)}`);
}
if (opts?.title) {
button.setAttribute('title', opts.title);
}
button.type = 'button';
return button;
}
export function createInput(className?: string, type?: string, jslogContext?: string): HTMLInputElement {
const element = document.createElement('input');
if (className) {
element.className = className;
}
element.spellcheck = false;
element.classList.add('harmony-input');
if (type) {
element.type = type;
}
if (jslogContext) {
element.setAttribute(
'jslog', `${VisualLogging.textField().track({keydown: 'Enter', change: true}).context(jslogContext)}`);
}
return element;
}
export function createHistoryInput(type = 'search', className?: string): HTMLInputElement {
const history = [''];
let historyPosition = 0;
const historyInput = document.createElement('input');
historyInput.type = type;
if (className) {
historyInput.className = className;
}
historyInput.addEventListener('input', onInput, false);
historyInput.addEventListener('keydown', onKeydown, false);
return historyInput;
function onInput(_event: Event): void {
if (history.length === historyPosition + 1) {
history[historyPosition] = historyInput.value;
}
}
function onKeydown(event: KeyboardEvent): void {
if (event.keyCode === Keys.Up.code) {
historyPosition = Math.max(historyPosition - 1, 0);
historyInput.value = history[historyPosition];
historyInput.dispatchEvent(new Event('input', {bubbles: true, cancelable: true}));
event.consume(true);
} else if (event.keyCode === Keys.Down.code) {
historyPosition = Math.min(historyPosition + 1, history.length - 1);
historyInput.value = history[historyPosition];
historyInput.dispatchEvent(new Event('input', {bubbles: true, cancelable: true}));
event.consume(true);
} else if (event.keyCode === Keys.Enter.code) {
if (history.length > 1 && history[history.length - 2] === historyInput.value) {
return;
}
history[history.length - 1] = historyInput.value;
historyPosition = history.length - 1;
history.push('');
}
}
}
export function createSelect(
name: string, options: string[]|Array<Map<string, string[]>>|Set<string>): HTMLSelectElement {
const select = document.createElement('select');
ARIAUtils.setLabel(select, name);
for (const option of options) {
if (option instanceof Map) {
for (const [key, value] of option) {
const optGroup = select.createChild('optgroup');
optGroup.label = key;
for (const child of value) {
if (typeof child === 'string') {
optGroup.appendChild(createOption(child, child, Platform.StringUtilities.toKebabCase(child)));
}
}
}
} else if (typeof option === 'string') {
select.add(createOption(option, option, Platform.StringUtilities.toKebabCase(option)));
}
}
return select;
}
export function createOption(title: string, value?: string, jslogContext?: string): HTMLOptionElement {
const result = new Option(title, value || title);
if (jslogContext) {
result.setAttribute('jslog', `${VisualLogging.item(jslogContext).track({click: true})}`);
}
return result;
}
export function createLabel(title: string, className?: string, associatedControl?: Element): Element {
const element = document.createElement('label');
if (className) {
element.className = className;
}
element.textContent = title;
if (associatedControl) {
ARIAUtils.bindLabelToControl(element, associatedControl);
}
return element;
}
export function createIconLabel(
options: {iconName: string, title?: string, color?: string, width?: '14px'|'20px', height?: '14px'|'20px'}):
DevToolsIconLabel {
const element = document.createElement('dt-icon-label');
if (options.title) {
element.createChild('span').textContent = options.title;
}
element.data = {
iconName: options.iconName,
color: options.color ?? 'var(--icon-default)',
width: options.width ?? '14px',
height: options.height ?? '14px',
};
return element;
}
/**
* Creates a radio button, which is comprised of a `<label>` and an `<input type="radio">` element.
*
* The returned pair contains the `label` element and and the `radio` input element. The latter is
* a child of the `label`, and therefore no association via `for` attribute is necessary to make
* the radio button accessible.
*
* The element is automatically styled correctly, as long as the core styles (in particular
* `inspectorCommon.css` is injected into the current document / shadow root). The lit
* equivalent of calling this method is:
*
* ```js
* const jslog = VisualLogging.toggle().track({change: true}).context(jslogContext);
* html`<label><input type="radio" name=${name} jslog=${jslog}>${title}</label>`
* ```
*
* @param name the name of the radio group.
* @param title the label text for the radio button.
* @param jslogContext the context string for the `jslog` attribute.
* @returns the pair of `HTMLLabelElement` and `HTMLInputElement`.
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio
*/
export function createRadioButton(
name: string, title: string, jslogContext: string): {label: HTMLLabelElement, radio: HTMLInputElement} {
const label = document.createElement('label');
const radio = label.createChild('input');
radio.type = 'radio';
radio.name = name;
radio.setAttribute('jslog', `${VisualLogging.toggle().track({change: true}).context(jslogContext)}`);
createTextChild(label, title);
return {label, radio};
}
/**
* Creates an `<input type="range">` element with the specified parameters (a slider)
* and a `step` of 1 (the default for the element).
*
* The element is automatically styled correctly, as long as the core styles (in particular
* `inspectorCommon.css` is injected into the current document / shadow root). The lit
* equivalent of calling this method is:
*
* ```js
* html`<input type="range" min=${min} max=${max} tabindex=${tabIndex}>`
* ```
*
* @param min the minimum allowed value.
* @param max the maximum allowed value.
* @param tabIndex the value for the `tabindex` attribute.
* @returns the newly created `HTMLInputElement` for the slider.
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range
*/
export function createSlider(min: number, max: number, tabIndex: number): HTMLInputElement {
const element = document.createElement('input');
element.type = 'range';
element.min = String(min);
element.max = String(max);
element.tabIndex = tabIndex;
return element;
}
export function setTitle(element: HTMLElement, title: string): void {
ARIAUtils.setLabel(element, title);
Tooltip.install(element, title);
}
export class CheckboxLabel extends HTMLElement {
static readonly observedAttributes = ['checked', 'disabled', 'indeterminate', 'name', 'title', 'aria-label'];
readonly #shadowRoot!: DocumentFragment;
#checkboxElement!: HTMLInputElement;
#textElement!: HTMLElement;
constructor() {
super();
CheckboxLabel.lastId = CheckboxLabel.lastId + 1;
const id = 'ui-checkbox-label' + CheckboxLabel.lastId;
this.#shadowRoot = createShadowRootWithCoreStyles(this, {cssFile: checkboxTextLabelStyles, delegatesFocus: true});
this.#checkboxElement = this.#shadowRoot.createChild('input');
this.#checkboxElement.type = 'checkbox';
this.#checkboxElement.setAttribute('id', id);
// Change event is not composable, so it doesn't bubble up through the shadow root.
this.#checkboxElement.addEventListener('change', () => this.dispatchEvent(new Event('change')));
this.#textElement = this.#shadowRoot.createChild('label', 'devtools-checkbox-text');
this.#textElement.setAttribute('for', id);
// Click events are composable, so both label and checkbox bubble up through the shadow root.
// However, clicking the label, also triggers the checkbox click, so we stop the label event
// propagation here to avoid duplicate events.
this.#textElement.addEventListener('click', e => e.stopPropagation());
this.#textElement.createChild('slot');
}
static create(
title?: Platform.UIString.LocalizedString, checked?: boolean, subtitle?: Platform.UIString.LocalizedString,
jslogContext?: string, small?: boolean): CheckboxLabel {
const element = document.createElement('devtools-checkbox');
element.#checkboxElement.checked = Boolean(checked);
if (jslogContext) {
element.#checkboxElement.setAttribute(
'jslog', `${VisualLogging.toggle().track({change: true}).context(jslogContext)}`);
}
if (title !== undefined) {
element.#textElement.textContent = title;
element.#checkboxElement.title = title;
if (subtitle !== undefined) {
element.#textElement.createChild('div', 'devtools-checkbox-subtitle').textContent = subtitle;
}
}
element.#checkboxElement.classList.toggle('small', small);
return element;
}
attributeChangedCallback(name: string, _oldValue: string|null, newValue: string|null): void {
if (name === 'checked') {
this.#checkboxElement.checked = newValue !== null;
} else if (name === 'disabled') {
this.#checkboxElement.disabled = newValue !== null;
} else if (name === 'indeterminate') {
this.#checkboxElement.indeterminate = newValue !== null;
} else if (name === 'name') {
this.#checkboxElement.name = newValue ?? '';
} else if (name === 'title') {
this.#checkboxElement.title = newValue ?? '';
this.#textElement.title = newValue ?? '';
} else if (name === 'aria-label') {
this.#checkboxElement.ariaLabel = newValue;
}
}
override get ariaLabel(): string|null {
return this.#checkboxElement.ariaLabel;
}
override set ariaLabel(ariaLabel: string) {
this.setAttribute('aria-label', ariaLabel);
}
get checked(): boolean {
return this.#checkboxElement.checked;
}
set checked(checked: boolean) {
this.toggleAttribute('checked', checked);
}
set disabled(disabled: boolean) {
this.toggleAttribute('disabled', disabled);
}
get disabled(): boolean {
return this.#checkboxElement.disabled;
}
set indeterminate(indeterminate: boolean) {
this.toggleAttribute('indeterminate', indeterminate);
}
get indeterminate(): boolean {
return this.#checkboxElement.indeterminate;
}
set name(name: string) {
this.setAttribute('name', name);
}
get name(): string {
return this.#checkboxElement.name;
}
override click(): void {
this.#checkboxElement.click();
}
/** Only to be used when the checkbox label is 'generated' (a regex, a className, etc). Most checkboxes should be create()'d with UIStrings */
static createWithStringLiteral(title?: string, checked?: boolean, jslogContext?: string, small?: boolean):
CheckboxLabel {
const stringLiteral = title as Platform.UIString.LocalizedString;
return CheckboxLabel.create(stringLiteral, checked, undefined, jslogContext, small);
}
private static lastId = 0;
}
customElements.define('devtools-checkbox', CheckboxLabel);
export class DevToolsIconLabel extends HTMLElement {
readonly #icon: IconButton.Icon.Icon;
constructor() {
super();
const root = createShadowRootWithCoreStyles(this);
this.#icon = new IconButton.Icon.Icon();
this.#icon.style.setProperty('margin-right', '4px');
this.#icon.style.setProperty('vertical-align', 'baseline');
root.appendChild(this.#icon);
root.createChild('slot');
}
set data(data: IconButton.Icon.IconData) {
this.#icon.data = data;
// TODO(crbug.com/1427397): Clean this up. This was necessary so `DevToolsIconLabel` can use Lit icon
// while being backwards-compatible with the legacy Icon while working for both small and large icons.
if (data.height === '14px') {
th