chrome-devtools-frontend 1.0.1547147 → 1.0.1548870

package/front_end/third_party/puppeteer/package/src/api/Page.ts

@@ -32,7 +32,6 @@ import type {HTTPRequest} from '../api/HTTPRequest.js';
 import type {HTTPResponse} from '../api/HTTPResponse.js';
 import type {Accessibility} from '../cdp/Accessibility.js';
 import type {Coverage} from '../cdp/Coverage.js';
-import type {DeviceRequestPrompt} from '../cdp/DeviceRequestPrompt.js';
 import type {NetworkConditions} from '../cdp/NetworkManager.js';
 import type {Tracing} from '../cdp/Tracing.js';
 import type {ConsoleMessage} from '../common/ConsoleMessage.js';
@@ -85,6 +84,7 @@ import {stringToTypedArray} from '../util/encoding.js';
 import type {Browser} from './Browser.js';
 import type {BrowserContext} from './BrowserContext.js';
 import type {CDPSession} from './CDPSession.js';
+import type {DeviceRequestPrompt} from './DeviceRequestPrompt.js';
 import type {Dialog} from './Dialog.js';
 import type {
   BoundingBox,
@@ -306,7 +306,7 @@ export interface ScreenshotOptions {
    * relative to current working directory. If no path is provided, the image
    * won't be saved to the disk.
    */
-  path?: `${string}.${ImageFormat}`;
+  path?: string;
   /**
    * Specifies the region of the page/element to clip.
    */

package/front_end/third_party/puppeteer/package/src/api/api.ts

@@ -7,6 +7,7 @@
 export * from './Browser.js';
 export * from './BrowserContext.js';
 export * from './CDPSession.js';
+export * from './DeviceRequestPrompt.js';
 export * from './Dialog.js';
 export * from './ElementHandle.js';
 export type * from './Environment.js';

package/front_end/third_party/puppeteer/package/src/bidi/HTTPRequest.ts

@@ -166,20 +166,13 @@ export class BidiHTTPRequest extends HTTPRequest {
   }
 
   get #hasInternalHeaderOverwrite(): boolean {
-    return Boolean(
-      Object.keys(this.#extraHTTPHeaders).length ||
-        Object.keys(this.#userAgentHeaders).length,
-    );
+    return Boolean(Object.keys(this.#extraHTTPHeaders).length);
   }
 
   get #extraHTTPHeaders(): Record<string, string> {
     return this.#frame?.page()._extraHTTPHeaders ?? {};
   }
 
-  get #userAgentHeaders(): Record<string, string> {
-    return this.#frame?.page()._userAgentHeaders ?? {};
-  }
-
   override headers(): Record<string, string> {
     // Callers should not be allowed to mutate internal structure.
     const headers: Record<string, string> = {};
@@ -189,7 +182,6 @@ export class BidiHTTPRequest extends HTTPRequest {
     return {
       ...headers,
       ...this.#extraHTTPHeaders,
-      ...this.#userAgentHeaders,
     };
   }
 

package/front_end/third_party/puppeteer/package/src/bidi/Page.ts

@@ -138,9 +138,7 @@ export class BidiPage extends Page {
   /**
    * @internal
    */
-  _userAgentHeaders: Record<string, string> = {};
-  #userAgentInterception?: string;
-  #userAgentPreloadScript?: string;
+  #overrideNavigatorPropertiesPreloadScript?: string;
   override async setUserAgent(
     userAgentOrOptions:
       | string
@@ -186,26 +184,9 @@ export class BidiPage extends Page {
     const enable = userAgent !== '';
     userAgent = userAgent ?? (await this.#browserContext.browser().userAgent());
 
-    this._userAgentHeaders = enable
-      ? {
-          'User-Agent': userAgent,
-        }
-      : {};
-
-    this.#userAgentInterception = await this.#toggleInterception(
-      [Bidi.Network.InterceptPhase.BeforeRequestSent],
-      this.#userAgentInterception,
-      enable,
-    );
+    await this.#frame.browsingContext.setUserAgent(enable ? userAgent : null);
 
-    const overrideNavigatorProperties = (
-      userAgent: string,
-      platform: string | undefined,
-    ) => {
-      Object.defineProperty(navigator, 'userAgent', {
-        value: userAgent,
-        configurable: true,
-      });
+    const overrideNavigatorProperties = (platform: string | undefined) => {
       if (platform) {
         Object.defineProperty(navigator, 'platform', {
           value: platform,
@@ -219,16 +200,15 @@ export class BidiPage extends Page {
       frames.push(...frame.childFrames());
     }
 
-    if (this.#userAgentPreloadScript) {
+    if (this.#overrideNavigatorPropertiesPreloadScript) {
       await this.removeScriptToEvaluateOnNewDocument(
-        this.#userAgentPreloadScript,
+        this.#overrideNavigatorPropertiesPreloadScript,
       );
     }
     const [evaluateToken] = await Promise.all([
       enable
         ? this.evaluateOnNewDocument(
             overrideNavigatorProperties,
-            userAgent,
             platform || undefined,
           )
         : undefined,
@@ -237,12 +217,11 @@ export class BidiPage extends Page {
       ...frames.map(frame => {
         return frame.evaluate(
           overrideNavigatorProperties,
-          userAgent,
           platform || undefined,
         );
       }),
     ]);
-    this.#userAgentPreloadScript = evaluateToken?.identifier;
+    this.#overrideNavigatorPropertiesPreloadScript = evaluateToken?.identifier;
   }
 
   override async setBypassCSP(enabled: boolean): Promise<void> {
@@ -746,8 +725,7 @@ export class BidiPage extends Page {
     return (
       Boolean(this.#requestInterception) ||
       Boolean(this.#extraHeadersInterception) ||
-      Boolean(this.#authInterception) ||
-      Boolean(this.#userAgentInterception)
+      Boolean(this.#authInterception)
     );
   }
 
@@ -828,7 +806,7 @@ export class BidiPage extends Page {
 
   override async setOfflineMode(enabled: boolean): Promise<void> {
     if (!this.#browserContext.browser().cdpSupported) {
-      throw new UnsupportedOperation();
+      return await this.#frame.browsingContext.setOfflineMode(enabled);
     }
 
     if (!this.#emulatedNetworkConditions) {
@@ -847,8 +825,20 @@ export class BidiPage extends Page {
     networkConditions: NetworkConditions | null,
   ): Promise<void> {
     if (!this.#browserContext.browser().cdpSupported) {
-      throw new UnsupportedOperation();
+      if (
+        !networkConditions?.offline &&
+        ((networkConditions?.upload ?? -1) >= 0 ||
+          (networkConditions?.download ?? -1) >= 0 ||
+          (networkConditions?.latency ?? 0) > 0)
+      ) {
+        // WebDriver BiDi supports only offline mode.
+        throw new UnsupportedOperation();
+      }
+      return await this.#frame.browsingContext.setOfflineMode(
+        networkConditions?.offline ?? false,
+      );
     }
+
     if (!this.#emulatedNetworkConditions) {
       this.#emulatedNetworkConditions = {
         offline: networkConditions?.offline ?? false,

package/front_end/third_party/puppeteer/package/src/bidi/core/BrowsingContext.ts

@@ -739,4 +739,22 @@ export class BrowsingContext extends EventEmitter<{
   isJavaScriptEnabled(): boolean {
     return this.#emulationState.javaScriptEnabled;
   }
+
+  async setUserAgent(userAgent: string | null): Promise<void> {
+    await this.#session.send('emulation.setUserAgentOverride', {
+      userAgent,
+      contexts: [this.id],
+    });
+  }
+
+  async setOfflineMode(enabled: boolean): Promise<void> {
+    await this.#session.send('emulation.setNetworkConditions', {
+      networkConditions: enabled
+        ? {
+            type: 'offline',
+          }
+        : null,
+      contexts: [this.id],
+    });
+  }
 }

package/front_end/third_party/puppeteer/package/src/cdp/DeviceRequestPrompt.ts

@@ -7,59 +7,17 @@
 import type Protocol from 'devtools-protocol';
 
 import type {CDPSession} from '../api/CDPSession.js';
+import {DeviceRequestPrompt} from '../api/DeviceRequestPrompt.js';
+import {DeviceRequestPromptDevice} from '../api/DeviceRequestPrompt.js';
 import type {WaitTimeoutOptions} from '../api/Page.js';
 import type {TimeoutSettings} from '../common/TimeoutSettings.js';
 import {assert} from '../util/assert.js';
 import {Deferred} from '../util/Deferred.js';
 
 /**
- * Device in a request prompt.
- *
- * @public
- */
-export class DeviceRequestPromptDevice {
-  /**
-   * Device id during a prompt.
-   */
-  id: string;
-
-  /**
-   * Device name as it appears in a prompt.
-   */
-  name: string;
-
-  /**
-   * @internal
-   */
-  constructor(id: string, name: string) {
-    this.id = id;
-    this.name = name;
-  }
-}
-
-/**
- * Device request prompts let you respond to the page requesting for a device
- * through an API like WebBluetooth.
- *
- * @remarks
- * `DeviceRequestPrompt` instances are returned via the
- * {@link Page.waitForDevicePrompt} method.
- *
- * @example
- *
- * ```ts
- * const [devicePrompt] = Promise.all([
- *   page.waitForDevicePrompt(),
- *   page.click('#connect-bluetooth'),
- * ]);
- * await devicePrompt.select(
- *   await devicePrompt.waitForDevice(({name}) => name.includes('My Device')),
- * );
- * ```
- *
- * @public
+ * @internal
  */
-export class DeviceRequestPrompt {
+export class CdpDeviceRequestPrompt extends DeviceRequestPrompt {
   #client: CDPSession | null;
   #timeoutSettings: TimeoutSettings;
   #id: string;
@@ -70,19 +28,14 @@ export class DeviceRequestPrompt {
     promise: Deferred<DeviceRequestPromptDevice>;
   }>();
 
-  /**
-   * Current list of selectable devices.
-   */
   devices: DeviceRequestPromptDevice[] = [];
 
-  /**
-   * @internal
-   */
   constructor(
     client: CDPSession,
     timeoutSettings: TimeoutSettings,
     firstEvent: Protocol.DeviceAccess.DeviceRequestPromptedEvent,
   ) {
+    super();
     this.#client = client;
     this.#timeoutSettings = timeoutSettings;
     this.#id = firstEvent.id;
@@ -126,9 +79,6 @@ export class DeviceRequestPrompt {
     }
   }
 
-  /**
-   * Resolve to the first device in the prompt matching a filter.
-   */
   async waitForDevice(
     filter: (device: DeviceRequestPromptDevice) => boolean,
     options: WaitTimeoutOptions = {},
@@ -164,9 +114,6 @@ export class DeviceRequestPrompt {
     }
   }
 
-  /**
-   * Select a device in the prompt's list.
-   */
   async select(device: DeviceRequestPromptDevice): Promise<void> {
     assert(
       this.#client !== null,
@@ -188,9 +135,6 @@ export class DeviceRequestPrompt {
     });
   }
 
-  /**
-   * Cancel the prompt.
-   */
   async cancel(): Promise<void> {
     assert(
       this.#client !== null,
@@ -217,9 +161,6 @@ export class DeviceRequestPromptManager {
   #timeoutSettings: TimeoutSettings;
   #deviceRequestPromptDeferreds = new Set<Deferred<DeviceRequestPrompt>>();
 
-  /**
-   * @internal
-   */
   constructor(client: CDPSession, timeoutSettings: TimeoutSettings) {
     this.#client = client;
     this.#timeoutSettings = timeoutSettings;
@@ -232,10 +173,6 @@ export class DeviceRequestPromptManager {
     });
   }
 
-  /**
-   * Wait for device prompt created by an action like calling WebBluetooth's
-   * requestDevice.
-   */
   async waitForDevicePrompt(
     options: WaitTimeoutOptions = {},
   ): Promise<DeviceRequestPrompt> {
@@ -277,9 +214,6 @@ export class DeviceRequestPromptManager {
     }
   }
 
-  /**
-   * @internal
-   */
   #onDeviceRequestPrompted(
     event: Protocol.DeviceAccess.DeviceRequestPromptedEvent,
   ) {
@@ -288,7 +222,7 @@ export class DeviceRequestPromptManager {
     }
 
     assert(this.#client !== null);
-    const devicePrompt = new DeviceRequestPrompt(
+    const devicePrompt = new CdpDeviceRequestPrompt(
       this.#client,
       this.#timeoutSettings,
       event,

package/front_end/third_party/puppeteer/package/src/cdp/Frame.ts

@@ -7,6 +7,7 @@
 import type {Protocol} from 'devtools-protocol';
 
 import type {CDPSession} from '../api/CDPSession.js';
+import type {DeviceRequestPrompt} from '../api/DeviceRequestPrompt.js';
 import type {ElementHandle} from '../api/ElementHandle.js';
 import type {WaitForOptions} from '../api/Frame.js';
 import {Frame, FrameEvent, throwIfDetached} from '../api/Frame.js';
@@ -21,10 +22,7 @@ import {isErrorLike} from '../util/ErrorLike.js';
 import {Accessibility} from './Accessibility.js';
 import type {Binding} from './Binding.js';
 import type {CdpPreloadScript} from './CdpPreloadScript.js';
-import type {
-  DeviceRequestPrompt,
-  DeviceRequestPromptManager,
-} from './DeviceRequestPrompt.js';
+import type {DeviceRequestPromptManager} from './DeviceRequestPrompt.js';
 import type {FrameManager} from './FrameManager.js';
 import {FrameManagerEvent} from './FrameManagerEvents.js';
 import type {IsolatedWorldChart} from './IsolatedWorld.js';

package/front_end/third_party/puppeteer/package/src/cdp/Page.ts

@@ -10,6 +10,7 @@ import {firstValueFrom, from, raceWith} from '../../third_party/rxjs/rxjs.js';
 import type {Browser} from '../api/Browser.js';
 import type {BrowserContext} from '../api/BrowserContext.js';
 import {CDPSessionEvent, type CDPSession} from '../api/CDPSession.js';
+import type {DeviceRequestPrompt} from '../api/DeviceRequestPrompt.js';
 import type {ElementHandle} from '../api/ElementHandle.js';
 import type {Frame, WaitForOptions} from '../api/Frame.js';
 import type {HTTPResponse} from '../api/HTTPResponse.js';
@@ -62,7 +63,6 @@ import type {CdpBrowser} from './Browser.js';
 import {CdpCDPSession} from './CdpSession.js';
 import {isTargetClosedError} from './Connection.js';
 import {Coverage} from './Coverage.js';
-import type {DeviceRequestPrompt} from './DeviceRequestPrompt.js';
 import {CdpDialog} from './Dialog.js';
 import {EmulationManager} from './EmulationManager.js';
 import type {CdpFrame} from './Frame.js';
@@ -488,7 +488,8 @@ export class CdpPage extends Page {
   }
 
   #onLogEntryAdded(event: Protocol.Log.EntryAddedEvent): void {
-    const {level, text, args, source, url, lineNumber} = event.entry;
+    const {level, text, args, source, url, lineNumber, stackTrace} =
+      event.entry;
     if (args) {
       args.map(arg => {
         void releaseObject(this.#primaryTargetClient, arg);
@@ -502,6 +503,8 @@ export class CdpPage extends Page {
           text,
           [],
           [{url, lineNumber}],
+          undefined,
+          stackTrace,
         ),
       );
     }
@@ -891,6 +894,8 @@ export class CdpPage extends Page {
       textTokens.join(' '),
       args,
       stackTraceLocations,
+      undefined,
+      stackTrace,
     );
     this.emit(PageEvent.Console, message);
   }

package/front_end/third_party/puppeteer/package/src/common/ConsoleMessage.ts

@@ -4,6 +4,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import type {Protocol} from 'devtools-protocol';
+
 import type {Frame} from '../api/Frame.js';
 import type {JSHandle} from '../api/JSHandle.js';
 
@@ -62,6 +64,7 @@ export class ConsoleMessage {
   #args: JSHandle[];
   #stackTraceLocations: ConsoleMessageLocation[];
   #frame?: Frame;
+  #rawStackTrace?: Protocol.Runtime.StackTrace;
 
   /**
    * @internal
@@ -72,12 +75,14 @@ export class ConsoleMessage {
     args: JSHandle[],
     stackTraceLocations: ConsoleMessageLocation[],
     frame?: Frame,
+    rawStackTrace?: Protocol.Runtime.StackTrace,
   ) {
     this.#type = type;
     this.#text = text;
     this.#args = args;
     this.#stackTraceLocations = stackTraceLocations;
     this.#frame = frame;
+    this.#rawStackTrace = rawStackTrace;
   }
 
   /**
@@ -117,4 +122,13 @@ export class ConsoleMessage {
   stackTrace(): ConsoleMessageLocation[] {
     return this.#stackTraceLocations;
   }
+
+  /**
+   * The underlying protocol stack trace if available.
+   *
+   * @internal
+   */
+  _rawStackTrace(): Protocol.Runtime.StackTrace | undefined {
+    return this.#rawStackTrace;
+  }
 }

package/front_end/third_party/puppeteer/package/src/revisions.ts

@@ -8,7 +8,7 @@
  * @internal
  */
 export const PUPPETEER_REVISIONS = Object.freeze({
-  chrome: '142.0.7444.162',
-  'chrome-headless-shell': '142.0.7444.162',
-  firefox: 'stable_145.0',
+  chrome: '142.0.7444.175',
+  'chrome-headless-shell': '142.0.7444.175',
+  firefox: 'stable_145.0.1',
 });

package/front_end/third_party/puppeteer/package/src/util/version.ts

@@ -6,5 +6,5 @@
 
 // If moved update release-please config
 // x-release-please-start-version
-export const packageVersion = '24.30.0';
+export const packageVersion = '24.31.0';
 // x-release-please-end

package/front_end/third_party/puppeteer/puppeteer-tsconfig.json

@@ -6,6 +6,7 @@
     "package/lib/esm/puppeteer/api/Browser.js",
     "package/lib/esm/puppeteer/api/BrowserContext.js",
     "package/lib/esm/puppeteer/api/CDPSession.js",
+    "package/lib/esm/puppeteer/api/DeviceRequestPrompt.js",
     "package/lib/esm/puppeteer/api/Dialog.js",
     "package/lib/esm/puppeteer/api/ElementHandle.js",
     "package/lib/esm/puppeteer/api/ElementHandleSymbol.js",

package/front_end/ui/components/markdown_view/MarkdownLinksMap.ts

@@ -70,6 +70,10 @@ export const markdownLinks = new Map<string, string>([
   ['storagePartitioningExplainer', 'https://developers.google.com/privacy-sandbox/cookies/storage-partitioning'],
   ['storageAccessAPI', 'https://developer.mozilla.org/en-US/docs/Web/API/StorageAccessHandle/createObjectURL'],
   ['https://goo.gle/ps-status', 'https://goo.gle/ps-status'],
+  [
+    'https://privacysandbox.com/news/update-on-plans-for-privacy-sandbox-technologies/',
+    'https://privacysandbox.com/news/update-on-plans-for-privacy-sandbox-technologies/'
+  ],
 ]);
 
 export const getMarkdownLink = (key: string): string => {

package/front_end/ui/components/text_editor/javascript.ts

@@ -523,7 +523,7 @@ async function getArgumentsForExpression(
   }
   const expression = doc.sliceString(callee.from, callee.to);
   const result = await evaluateExpression(context, expression, 'argumentsHint');
-  if (!result || result.type !== 'function') {
+  if (result?.type !== 'function') {
     return null;
   }
   const objGetter = async(): Promise<SDK.RemoteObject.RemoteObject|null> => {

package/front_end/ui/legacy/ListWidget.ts

@@ -56,12 +56,12 @@ export class ListWidget<T> extends VBox {
   private readonly list: HTMLElement;
   private lastSeparator: boolean;
   private focusRestorer: ElementFocusRestorer|null;
-  private items: T[];
+  #items: T[];
   private editable: boolean[];
-  private elements: Element[];
+  private elements: HTMLElement[];
   private editor: Editor<T>|null;
   private editItem: T|null;
-  private editElement: Element|null;
+  private editElement: HTMLElement|null;
   private emptyPlaceholder: Element|null;
   private isTable: boolean;
   constructor(delegate: Delegate<T>, delegatesFocus = true, isTable = false) {
@@ -73,7 +73,7 @@ export class ListWidget<T> extends VBox {
 
     this.lastSeparator = false;
     this.focusRestorer = null;
-    this.items = [];
+    this.#items = [];
     this.editable = [];
     this.elements = [];
     this.editor = null;
@@ -90,8 +90,12 @@ export class ListWidget<T> extends VBox {
     this.updatePlaceholder();
   }
 
+  get items(): T[] {
+    return this.#items;
+  }
+
   clear(): void {
-    this.items = [];
+    this.#items = [];
     this.editable = [];
     this.elements = [];
     this.lastSeparator = false;
@@ -100,8 +104,34 @@ export class ListWidget<T> extends VBox {
     this.stopEditing();
   }
 
-  appendItem(item: T, editable: boolean): void {
-    if (this.lastSeparator && this.items.length) {
+  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) {
@@ -111,22 +141,24 @@ export class ListWidget<T> extends VBox {
     }
     this.lastSeparator = false;
 
-    this.items.push(item);
+    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);
+    const content = this.delegate.renderItem(item, editable, this.#items.length - 1);
     if (!content.hasAttribute('jslog')) {
       element.setAttribute('jslog', `${VisualLogging.item()}`);
     }
     element.appendChild(content);
     if (editable) {
       element.classList.add('editable');
-      element.tabIndex = 0;
-      element.appendChild(this.createControls(item, element));
+      if (focusable) {
+        element.tabIndex = 0;
+      }
+      element.appendChild(this.createControls(item, element, controlLabels));
     }
     this.elements.push(element);
     this.updatePlaceholder();
@@ -137,7 +169,7 @@ export class ListWidget<T> extends VBox {
   }
 
   removeItem(index: number): void {
-    if (this.editItem === this.items[index]) {
+    if (this.editItem === this.#items[index]) {
       this.stopEditing();
     }
 
@@ -158,7 +190,7 @@ export class ListWidget<T> extends VBox {
     element.remove();
 
     this.elements.splice(index, 1);
-    this.items.splice(index, 1);
+    this.#items.splice(index, 1);
     this.editable.splice(index, 1);
     this.updatePlaceholder();
   }
@@ -172,7 +204,7 @@ export class ListWidget<T> extends VBox {
     this.updatePlaceholder();
   }
 
-  private createControls(item: T, element: Element): Element {
+  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');
@@ -185,13 +217,13 @@ export class ListWidget<T> extends VBox {
           <devtools-button class=toolbar-button
                            .iconName=${'edit'}
                            .jslogContext=${'edit-item'}
-                           .title=${i18nString(UIStrings.editString)}
+                           .title=${controlLabels?.edit ?? i18nString(UIStrings.editString)}
                            .variant=${Buttons.Button.Variant.ICON}
                            @click=${onEditClicked}></devtools-button>
           <devtools-button class=toolbar-button
                            .iconName=${'bin'}
                            .jslogContext=${'remove-item'}
-                           .title=${i18nString(UIStrings.removeString)}
+                           .title=${controlLabels?.delete ?? i18nString(UIStrings.removeString)}
                            .variant=${Buttons.Button.Variant.ICON}
                            @click=${onRemoveClicked}></devtools-button>
         </devtools-toolbar>
@@ -209,7 +241,7 @@ export class ListWidget<T> extends VBox {
     function onRemoveClicked(this: ListWidget<T>): void {
       const index = this.elements.indexOf(element);
       this.element.focus();
-      this.delegate.removeItemRequested(this.items[index], index);
+      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
@@ -235,7 +267,7 @@ export class ListWidget<T> extends VBox {
     }
   }
 
-  private startEditing(item: T, element: Element|null, insertionPoint: Element|null): void {
+  private startEditing(item: T, element: HTMLElement|null, insertionPoint: Element|null): void {
     if (element && this.editElement === element) {
       return;
     }
@@ -297,6 +329,7 @@ export class ListWidget<T> extends VBox {
 }
 
 export interface Delegate<T> {
+  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<T>;