// Copyright 2015 The Chromium Authors // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. /* eslint-disable @devtools/no-imperative-dom-api */ /* eslint-disable @devtools/no-lit-render-outside-of-view */ import './Toolbar.js'; import * as i18n from '../../core/i18n/i18n.js'; import * as Platform from '../../core/platform/platform.js'; import * as Buttons from '../../ui/components/buttons/buttons.js'; import {html, render} from '../lit/lit.js'; import * as VisualLogging from '../visual_logging/visual_logging.js'; import * as ARIAUtils from './ARIAUtils.js'; import listWidgetStyles from './listWidget.css.js'; import {Tooltip} from './Tooltip.js'; import {createInput, createTextButton, ElementFocusRestorer} from './UIUtils.js'; import {VBox} from './Widget.js'; const UIStrings = { /** * @description Text on a button to start editing text */ editString: 'Edit', /** * @description Label for an item to remove something */ removeString: 'Remove', /** * @description Text to save something */ saveString: 'Save', /** * @description Text to add something */ addString: 'Add', /** * @description Text to cancel something */ cancelString: 'Cancel', /** * @description Text for screen reader to announce that an item has been saved. */ changesSaved: 'Changes to item have been saved', /** * @description Text for screen reader to announce that an item has been removed. */ removedItem: 'Item has been removed', } as const; const str_ = i18n.i18n.registerUIStrings('ui/legacy/ListWidget.ts', UIStrings); const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_); export class ListWidget extends VBox { private delegate: Delegate; private readonly list: HTMLElement; private lastSeparator: boolean; private focusRestorer: ElementFocusRestorer|null; #items: T[]; private editable: boolean[]; private elements: HTMLElement[]; private editor: Editor|null; private editItem: T|null; private editElement: HTMLElement|null; private emptyPlaceholder: Element|null; private isTable: boolean; constructor(delegate: Delegate, delegatesFocus = true, isTable = false) { super({useShadowDom: true, delegatesFocus}); this.registerRequiredCSS(listWidgetStyles); this.delegate = delegate; this.list = this.contentElement.createChild('div', 'list'); this.lastSeparator = false; this.focusRestorer = null; this.#items = []; this.editable = []; this.elements = []; this.editor = null; this.editItem = null; this.editElement = null; this.emptyPlaceholder = null; this.isTable = isTable; if (isTable) { this.list.role = 'table'; } this.updatePlaceholder(); } get items(): T[] { return this.#items; } clear(): void { this.#items = []; this.editable = []; this.elements = []; this.lastSeparator = false; this.list.removeChildren(); this.updatePlaceholder(); this.stopEditing(); } updateItem(index: number, newItem: T, editable: boolean, focusable = true, controlLabels: { edit?: string, delete?: string, } = {}): void { if (index < 0 || index >= this.#items.length) { this.appendItem(newItem, editable, focusable, controlLabels); return; } this.#items[index] = newItem; this.editable[index] = editable; const element = this.elements[index]; const [content, controls] = element.children; if (controls) { element.removeChild(controls); } this.delegate.updateItem?.(content, newItem, editable, index); element.classList.toggle('editable', editable); if (editable) { if (focusable) { element.tabIndex = 0; } element.appendChild(this.createControls(newItem, element, controlLabels)); } } appendItem(item: T, editable: boolean, focusable = true, controlLabels: {edit?: string, delete?: string} = {}): void { if (this.lastSeparator && this.#items.length) { const element = document.createElement('div'); element.classList.add('list-separator'); if (this.isTable) { element.role = 'rowgroup'; } this.list.appendChild(element); } this.lastSeparator = false; this.#items.push(item); this.editable.push(editable); const element = this.list.createChild('div', 'list-item'); if (this.isTable) { element.role = 'rowgroup'; } const content = this.delegate.renderItem(item, editable, this.#items.length - 1); if (!content.hasAttribute('jslog')) { element.setAttribute('jslog', `${VisualLogging.item().track({resize: true})}`); } element.appendChild(content); if (editable) { element.classList.add('editable'); if (focusable) { element.tabIndex = 0; } element.appendChild(this.createControls(item, element, controlLabels)); } this.elements.push(element); this.updatePlaceholder(); } appendSeparator(): void { this.lastSeparator = true; } removeItem(index: number): void { if (this.editItem === this.#items[index]) { this.stopEditing(); } const element = this.elements[index]; const previous = element.previousElementSibling; const previousIsSeparator = previous?.classList.contains('list-separator'); const next = element.nextElementSibling; const nextIsSeparator = next?.classList.contains('list-separator'); if (previousIsSeparator && (nextIsSeparator || !next)) { previous?.remove(); } if (nextIsSeparator && !previous) { next?.remove(); } element.remove(); this.elements.splice(index, 1); this.#items.splice(index, 1); this.editable.splice(index, 1); this.updatePlaceholder(); } addNewItem(index: number, item: T): void { this.startEditing(item, null, this.elements[index] || null); } setEmptyPlaceholder(element: Element|null): void { this.emptyPlaceholder = element; this.updatePlaceholder(); } private createControls(item: T, element: HTMLElement, controlLabels: {edit?: string, delete?: string}): Element { const controls = document.createElement('div'); controls.classList.add('controls-container'); controls.classList.add('fill'); // clang-format off render(html`

`, controls, {host: this}); // clang-format on return controls; function onEditClicked(this: ListWidget): void { const index = this.elements.indexOf(element); const insertionPoint = this.elements[index + 1] || null; this.startEditing(item, element, insertionPoint); } function onRemoveClicked(this: ListWidget): void { const index = this.elements.indexOf(element); this.element.focus(); this.delegate.removeItemRequested(this.#items[index], index); ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.removedItem)); if (this.elements.length >= 1) { // focus on the next item in the list, or the last item if we're removing the last item (this.elements[Math.min(index, this.elements.length - 1)] as HTMLElement).focus(); } } } override wasShown(): void { super.wasShown(); this.stopEditing(); } private updatePlaceholder(): void { if (!this.emptyPlaceholder) { return; } if (!this.elements.length && !this.editor) { this.list.appendChild(this.emptyPlaceholder); } else { this.emptyPlaceholder.remove(); } } private startEditing(item: T, element: HTMLElement|null, insertionPoint: Element|null): void { if (element && this.editElement === element) { return; } this.stopEditing(); this.focusRestorer = new ElementFocusRestorer(this.element); this.list.classList.add('list-editing'); this.element.classList.add('list-editing'); this.editItem = item; this.editElement = element; if (element) { element.classList.add('hidden'); } const index = element ? this.elements.indexOf(element) : -1; this.editor = this.delegate.beginEdit(item); this.updatePlaceholder(); this.list.insertBefore(this.editor.element, insertionPoint); this.editor.beginEdit( item, index, element ? i18nString(UIStrings.saveString) : i18nString(UIStrings.addString), this.commitEditing.bind(this), this.stopEditing.bind(this)); } private commitEditing(): void { const editItem = this.editItem; const isNew = !this.editElement; const editor = (this.editor as Editor); // Focus on the current item or the new item after committing const focusElementIndex = this.editElement ? this.elements.indexOf(this.editElement) : this.elements.length - 1; this.stopEditing(); if (editItem !== null) { this.delegate.commitEdit(editItem, editor, isNew); ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.changesSaved)); if (this.elements[focusElementIndex]) { (this.elements[focusElementIndex] as HTMLElement).focus(); } } } private stopEditing(): void { this.list.classList.remove('list-editing'); this.element.classList.remove('list-editing'); if (this.focusRestorer) { this.focusRestorer.restore(); } if (this.editElement) { this.editElement.classList.remove('hidden'); } if (this.editor?.element.parentElement) { this.editor.element.remove(); } this.editor = null; this.editItem = null; this.editElement = null; this.updatePlaceholder(); } } export interface Delegate { updateItem?(content: Element, newItem: T, editable: boolean, index: number): void; renderItem(item: T, editable: boolean, index: number): Element; removeItemRequested(item: T, index: number): void; beginEdit(item: T): Editor; commitEdit(item: T, editor: Editor, isNew: boolean): void; } export interface CustomEditorControl extends HTMLElement { value: T; validate: () => ValidatorResult; } export type EditorControl = (HTMLInputElement|HTMLSelectElement|CustomEditorControl); export class Editor { element: HTMLDivElement; readonly #contentElement: HTMLElement; private commitButton: Buttons.Button.Button; private readonly cancelButton: Buttons.Button.Button; private errorMessageContainer: HTMLElement; private readonly controls: EditorControl[] = []; private readonly controlByName = new Map(); private readonly validators: Array<(arg0: T, arg1: number, arg2: EditorControl) => ValidatorResult> = []; private commit: (() => void)|null = null; private cancel: (() => void)|null = null; private item: T|null = null; private index = -1; constructor() { this.element = document.createElement('div'); this.element.classList.add('editor-container'); this.element.setAttribute('jslog', `${VisualLogging.pane('editor').track({resize: true})}`); this.element.addEventListener( 'keydown', onKeyDown.bind(null, Platform.KeyboardUtilities.isEscKey, this.cancelClicked.bind(this)), false); this.#contentElement = this.element.createChild('div', 'editor-content'); this.#contentElement.addEventListener('keydown', onKeyDown.bind(null, event => { if (event.key !== 'Enter') { return false; } if (event.target instanceof HTMLSelectElement) { // 'Enter' on