UNPKG

chrome-devtools-frontend

Version:
441 lines (400 loc) • 18.3 kB
/* * Copyright (C) 2011 Google Inc. All rights reserved. * * Redistribution and use in source and binary forms, with or without * modification, are permitted provided that the following conditions are * met: * * * Redistributions of source code must retain the above copyright * notice, this list of conditions and the following disclaimer. * * 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. * * Neither the name of Google Inc. 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 THE COPYRIGHT HOLDERS AND 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 THE COPYRIGHT * OWNER OR 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 i18n from '../../core/i18n/i18n.js'; import * as SDK from '../../core/sdk/sdk.js'; import * as Protocol from '../../generated/protocol.js'; import * as UI from '../../ui/legacy/legacy.js'; import * as Sources from '../sources/sources.js'; import domBreakpointsSidebarPaneStyles from './domBreakpointsSidebarPane.css.js'; const UIStrings = { /** *@description Text to indicate there are no breakpoints */ noBreakpoints: 'No breakpoints', /** *@description Accessibility label for the DOM breakpoints list in the Sources panel */ domBreakpointsList: 'DOM Breakpoints list', /** *@description Text with two placeholders separated by a colon *@example {Node removed} PH1 *@example {div#id1} PH2 */ sS: '{PH1}: {PH2}', /** *@description Text with three placeholders separated by a colon and a comma *@example {Node removed} PH1 *@example {div#id1} PH2 *@example {checked} PH3 */ sSS: '{PH1}: {PH2}, {PH3}', /** *@description Text exposed to screen readers on checked items. */ checked: 'checked', /** *@description Accessible text exposed to screen readers when the screen reader encounters an unchecked checkbox. */ unchecked: 'unchecked', /** *@description Accessibility label for hit breakpoints in the Sources panel. *@example {checked} PH1 */ sBreakpointHit: '{PH1} breakpoint hit', /** *@description Screen reader description of a hit breakpoint in the Sources panel */ breakpointHit: 'breakpoint hit', /** *@description A context menu item in the DOM Breakpoints sidebar that reveals the node on which the current breakpoint is set. */ revealDomNodeInElementsPanel: 'Reveal DOM node in Elements panel', /** *@description Text to remove a breakpoint */ removeBreakpoint: 'Remove breakpoint', /** *@description A context menu item in the DOMBreakpoints Sidebar Pane of the JavaScript Debugging pane in the Sources panel or the DOM Breakpoints pane in the Elements panel */ removeAllDomBreakpoints: 'Remove all DOM breakpoints', /** *@description Text in DOMBreakpoints Sidebar Pane of the JavaScript Debugging pane in the Sources panel or the DOM Breakpoints pane in the Elements panel */ subtreeModified: 'Subtree modified', /** *@description Text in DOMBreakpoints Sidebar Pane of the JavaScript Debugging pane in the Sources panel or the DOM Breakpoints pane in the Elements panel */ attributeModified: 'Attribute modified', /** *@description Text in DOMBreakpoints Sidebar Pane of the JavaScript Debugging pane in the Sources panel or the DOM Breakpoints pane in the Elements panel */ nodeRemoved: 'Node removed', /** *@description Entry in context menu of the elements pane, allowing developers to select a DOM * breakpoint for the element that they have right-clicked on. Short for the action 'set a * breakpoint on this DOM Element'. A breakpoint pauses the website when the code reaches a * specified line, or when a specific action happen (in this case, when the DOM Element is * modified). */ breakOn: 'Break on', /** *@description Screen reader description for removing a DOM breakpoint. */ breakpointRemoved: 'Breakpoint removed', /** *@description Screen reader description for setting a DOM breakpoint. */ breakpointSet: 'Breakpoint set', }; const str_ = i18n.i18n.registerUIStrings('panels/browser_debugger/DOMBreakpointsSidebarPane.ts', UIStrings); const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_); const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_); let domBreakpointsSidebarPaneInstance: DOMBreakpointsSidebarPane; export class DOMBreakpointsSidebarPane extends UI.Widget.VBox implements UI.ContextFlavorListener.ContextFlavorListener, UI.ListControl.ListDelegate<SDK.DOMDebuggerModel.DOMBreakpoint> { elementToCheckboxes: WeakMap<Element, HTMLInputElement>; readonly #emptyElement: HTMLElement; readonly #breakpoints: UI.ListModel.ListModel<SDK.DOMDebuggerModel.DOMBreakpoint>; #list: UI.ListControl.ListControl<SDK.DOMDebuggerModel.DOMBreakpoint>; #highlightedBreakpoint: SDK.DOMDebuggerModel.DOMBreakpoint|null; private constructor() { super(true); this.elementToCheckboxes = new WeakMap(); this.#emptyElement = this.contentElement.createChild('div', 'gray-info-message'); this.#emptyElement.textContent = i18nString(UIStrings.noBreakpoints); this.#breakpoints = new UI.ListModel.ListModel(); this.#list = new UI.ListControl.ListControl(this.#breakpoints, this, UI.ListControl.ListMode.NonViewport); this.contentElement.appendChild(this.#list.element); this.#list.element.classList.add('breakpoint-list', 'hidden'); UI.ARIAUtils.markAsList(this.#list.element); UI.ARIAUtils.setAccessibleName(this.#list.element, i18nString(UIStrings.domBreakpointsList)); this.#emptyElement.tabIndex = -1; SDK.TargetManager.TargetManager.instance().addModelListener( SDK.DOMDebuggerModel.DOMDebuggerModel, SDK.DOMDebuggerModel.Events.DOMBreakpointAdded, this.breakpointAdded, this); SDK.TargetManager.TargetManager.instance().addModelListener( SDK.DOMDebuggerModel.DOMDebuggerModel, SDK.DOMDebuggerModel.Events.DOMBreakpointToggled, this.breakpointToggled, this); SDK.TargetManager.TargetManager.instance().addModelListener( SDK.DOMDebuggerModel.DOMDebuggerModel, SDK.DOMDebuggerModel.Events.DOMBreakpointsRemoved, this.breakpointsRemoved, this); for (const domDebuggerModel of SDK.TargetManager.TargetManager.instance().models( SDK.DOMDebuggerModel.DOMDebuggerModel)) { domDebuggerModel.retrieveDOMBreakpoints(); for (const breakpoint of domDebuggerModel.domBreakpoints()) { this.addBreakpoint(breakpoint); } } this.#highlightedBreakpoint = null; this.update(); } static instance(): DOMBreakpointsSidebarPane { if (!domBreakpointsSidebarPaneInstance) { domBreakpointsSidebarPaneInstance = new DOMBreakpointsSidebarPane(); } return domBreakpointsSidebarPaneInstance; } createElementForItem(item: SDK.DOMDebuggerModel.DOMBreakpoint): Element { const element = document.createElement('div'); element.classList.add('breakpoint-entry'); element.addEventListener('contextmenu', this.contextMenu.bind(this, item), true); UI.ARIAUtils.markAsListitem(element); element.tabIndex = -1; const checkboxLabel = UI.UIUtils.CheckboxLabel.create(/* title */ undefined, item.enabled); const checkboxElement = checkboxLabel.checkboxElement; checkboxElement.addEventListener('click', this.checkboxClicked.bind(this, item), false); checkboxElement.tabIndex = -1; this.elementToCheckboxes.set(element, checkboxElement); element.appendChild(checkboxLabel); element.addEventListener('keydown', event => { if (event.key === ' ') { checkboxLabel.checkboxElement.click(); event.consume(true); } }); const labelElement = document.createElement('div'); labelElement.classList.add('dom-breakpoint'); element.appendChild(labelElement); const description = document.createElement('div'); const breakpointTypeLabel = BreakpointTypeLabels.get(item.type); description.textContent = breakpointTypeLabel ? breakpointTypeLabel() : null; const breakpointTypeText = breakpointTypeLabel ? breakpointTypeLabel() : ''; UI.ARIAUtils.setAccessibleName(checkboxElement, breakpointTypeText); const checkedStateText = item.enabled ? i18nString(UIStrings.checked) : i18nString(UIStrings.unchecked); const linkifiedNode = document.createElement('monospace'); linkifiedNode.style.display = 'block'; labelElement.appendChild(linkifiedNode); void Common.Linkifier.Linkifier.linkify(item.node, {preventKeyboardFocus: true, tooltip: undefined}) .then(linkified => { linkifiedNode.appendChild(linkified); // Give the checkbox an aria-label as it is required for all form element UI.ARIAUtils.setAccessibleName( checkboxElement, i18nString(UIStrings.sS, {PH1: breakpointTypeText, PH2: linkified.deepTextContent()})); // The parent list element is the one that actually gets focused. // Assign it an aria-label with complete information for the screen reader to read out properly UI.ARIAUtils.setAccessibleName( element, i18nString( UIStrings.sSS, {PH1: breakpointTypeText, PH2: linkified.deepTextContent(), PH3: checkedStateText})); }); labelElement.appendChild(description); if (item === this.#highlightedBreakpoint) { element.classList.add('breakpoint-hit'); UI.ARIAUtils.setDescription(element, i18nString(UIStrings.sBreakpointHit, {PH1: checkedStateText})); UI.ARIAUtils.setDescription(checkboxElement, i18nString(UIStrings.breakpointHit)); } else { UI.ARIAUtils.setDescription(element, checkedStateText); } this.#emptyElement.classList.add('hidden'); this.#list.element.classList.remove('hidden'); return element; } heightForItem(_item: SDK.DOMDebuggerModel.DOMBreakpoint): number { return 0; } isItemSelectable(_item: SDK.DOMDebuggerModel.DOMBreakpoint): boolean { return true; } updateSelectedItemARIA(_fromElement: Element|null, _toElement: Element|null): boolean { return true; } selectedItemChanged( from: SDK.DOMDebuggerModel.DOMBreakpoint|null, to: SDK.DOMDebuggerModel.DOMBreakpoint|null, fromElement: HTMLElement|null, toElement: HTMLElement|null): void { if (fromElement) { fromElement.tabIndex = -1; } if (toElement) { this.setDefaultFocusedElement(toElement); toElement.tabIndex = 0; if (this.hasFocus()) { toElement.focus(); } } } private breakpointAdded(event: Common.EventTarget.EventTargetEvent<SDK.DOMDebuggerModel.DOMBreakpoint>): void { this.addBreakpoint(event.data); } private breakpointToggled(event: Common.EventTarget.EventTargetEvent<SDK.DOMDebuggerModel.DOMBreakpoint>): void { const hadFocus = this.hasFocus(); const breakpoint = event.data; this.#list.refreshItem(breakpoint); if (hadFocus) { this.focus(); } } private breakpointsRemoved(event: Common.EventTarget.EventTargetEvent<SDK.DOMDebuggerModel.DOMBreakpoint[]>): void { const hadFocus = this.hasFocus(); const breakpoints = event.data; let lastIndex = -1; for (const breakpoint of breakpoints) { const index = this.#breakpoints.indexOf(breakpoint); if (index >= 0) { this.#breakpoints.remove(index); lastIndex = index; } } if (this.#breakpoints.length === 0) { this.#emptyElement.classList.remove('hidden'); this.setDefaultFocusedElement(this.#emptyElement); this.#list.element.classList.add('hidden'); } else if (lastIndex >= 0) { const breakpointToSelect = this.#breakpoints.at(lastIndex); if (breakpointToSelect) { this.#list.selectItem(breakpointToSelect); } } if (hadFocus) { this.focus(); } } private addBreakpoint(breakpoint: SDK.DOMDebuggerModel.DOMBreakpoint): void { this.#breakpoints.insertWithComparator(breakpoint, (breakpointA, breakpointB) => { if (breakpointA.type > breakpointB.type) { return -1; } if (breakpointA.type < breakpointB.type) { return 1; } return 0; }); if (!this.#list.selectedItem() || !this.hasFocus()) { this.#list.selectItem(this.#breakpoints.at(0)); } } private contextMenu(breakpoint: SDK.DOMDebuggerModel.DOMBreakpoint, event: Event): void { const contextMenu = new UI.ContextMenu.ContextMenu(event); contextMenu.defaultSection().appendItem( i18nString(UIStrings.revealDomNodeInElementsPanel), () => Common.Revealer.reveal(breakpoint.node)); contextMenu.defaultSection().appendItem(i18nString(UIStrings.removeBreakpoint), () => { breakpoint.domDebuggerModel.removeDOMBreakpoint(breakpoint.node, breakpoint.type); }); contextMenu.defaultSection().appendItem(i18nString(UIStrings.removeAllDomBreakpoints), () => { breakpoint.domDebuggerModel.removeAllDOMBreakpoints(); }); void contextMenu.show(); } private checkboxClicked(breakpoint: SDK.DOMDebuggerModel.DOMBreakpoint, event: Event): void { breakpoint.domDebuggerModel.toggleDOMBreakpoint( breakpoint, event.target ? (event.target as HTMLInputElement).checked : false); } flavorChanged(_object: Object|null): void { this.update(); } private update(): void { const details = UI.Context.Context.instance().flavor(SDK.DebuggerModel.DebuggerPausedDetails); if (this.#highlightedBreakpoint) { const oldHighlightedBreakpoint = this.#highlightedBreakpoint; this.#highlightedBreakpoint = null; this.#list.refreshItem(oldHighlightedBreakpoint); } if (!details || !details.auxData || details.reason !== Protocol.Debugger.PausedEventReason.DOM) { return; } const domDebuggerModel = details.debuggerModel.target().model(SDK.DOMDebuggerModel.DOMDebuggerModel); if (!domDebuggerModel) { return; } // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration) // eslint-disable-next-line @typescript-eslint/no-explicit-any const data = domDebuggerModel.resolveDOMBreakpointData(details.auxData as any); if (!data) { return; } for (const breakpoint of this.#breakpoints) { if (breakpoint.node === data.node && breakpoint.type === data.type) { this.#highlightedBreakpoint = breakpoint; } } if (this.#highlightedBreakpoint) { this.#list.refreshItem(this.#highlightedBreakpoint); } void UI.ViewManager.ViewManager.instance().showView('sources.domBreakpoints'); } override wasShown(): void { super.wasShown(); this.registerCSSFiles([domBreakpointsSidebarPaneStyles]); } } const BreakpointTypeLabels = new Map([ [Protocol.DOMDebugger.DOMBreakpointType.SubtreeModified, i18nLazyString(UIStrings.subtreeModified)], [Protocol.DOMDebugger.DOMBreakpointType.AttributeModified, i18nLazyString(UIStrings.attributeModified)], [Protocol.DOMDebugger.DOMBreakpointType.NodeRemoved, i18nLazyString(UIStrings.nodeRemoved)], ]); let contextMenuProviderInstance: ContextMenuProvider; export class ContextMenuProvider implements UI.ContextMenu.Provider { static instance(opts: { forceNew: boolean|null, } = {forceNew: null}): ContextMenuProvider { const {forceNew} = opts; if (!contextMenuProviderInstance || forceNew) { contextMenuProviderInstance = new ContextMenuProvider(); } return contextMenuProviderInstance; } appendApplicableItems(event: Event, contextMenu: UI.ContextMenu.ContextMenu, object: Object): void { const node = object as SDK.DOMModel.DOMNode; if (node.pseudoType()) { return; } const domDebuggerModel = node.domModel().target().model(SDK.DOMDebuggerModel.DOMDebuggerModel); if (!domDebuggerModel) { return; } function toggleBreakpoint(type: Protocol.DOMDebugger.DOMBreakpointType): void { if (!domDebuggerModel) { return; } const label = Sources.DebuggerPausedMessage.BreakpointTypeNouns.get(type); const labelString = label ? label() : ''; if (domDebuggerModel.hasDOMBreakpoint(node, type)) { domDebuggerModel.removeDOMBreakpoint(node, type); UI.ARIAUtils.alert(`${i18nString(UIStrings.breakpointRemoved)}: ${labelString}`); } else { domDebuggerModel.setDOMBreakpoint(node, type); UI.ARIAUtils.alert(`${i18nString(UIStrings.breakpointSet)}: ${labelString}`); } } const breakpointsMenu = contextMenu.debugSection().appendSubMenuItem(i18nString(UIStrings.breakOn)); const allBreakpointTypes: Protocol.EnumerableEnum<typeof Protocol.DOMDebugger.DOMBreakpointType> = { SubtreeModified: Protocol.DOMDebugger.DOMBreakpointType.SubtreeModified, AttributeModified: Protocol.DOMDebugger.DOMBreakpointType.AttributeModified, NodeRemoved: Protocol.DOMDebugger.DOMBreakpointType.NodeRemoved, }; for (const type of Object.values(allBreakpointTypes)) { const label = Sources.DebuggerPausedMessage.BreakpointTypeNouns.get(type); if (label) { breakpointsMenu.defaultSection().appendCheckboxItem( label(), toggleBreakpoint.bind(null, type), domDebuggerModel.hasDOMBreakpoint(node, type)); } } } }