chrome-devtools-frontend 1.0.1362775 → 1.0.1367881

package/front_end/panels/timeline/timelinePanel.css

@@ -175,6 +175,7 @@
   position: relative;
   background-color: var(--sys-color-cdt-base-container);
   user-select: text;
+  display: block;
 }
 
 .timeline-details-view-block {
@@ -360,7 +361,6 @@
 }
 
 .timeline-filmstrip-preview > img {
-  margin-top: 5px;
   max-width: 500px;
   max-height: 300px;
   cursor: pointer;
@@ -532,7 +532,7 @@
 
   .timeline-tree-view .data-grid tr.selected span.percent-column,
   .timeline-tree-view .data-grid tr.selected div.background-percent-bar span,
-  .timeline-tree-view .data-grid tr.selected .name-container .activity-link .devtools-link {
+  .timeline-tree-view .data-grid tr.selected .name-container .activity-link .devtools-link .timeline-link {
     color: HighlightText;
   }
 
@@ -589,14 +589,6 @@
   height: 100%;
 }
 
-.timeline-concurrency-input {
-  width: 50px;
-}
-
-.timeline-concurrency-hidden {
-  visibility: hidden;
-}
-
 devtools-feedback-button {
   float: right;
 }

package/front_end/panels/timeline/track_appenders/LayoutShiftsTrackAppender.test.ts

@@ -81,13 +81,13 @@ describeWithEnvironment('LayoutShiftsTrackAppender', function() {
     assert.strictEqual(title, 'Layout shift');
   });
 
-  it('shows "Layout shift" text on hover', async function() {
-    const {layoutShiftsTrackAppender, parsedTrace} = await renderTrackAppender(this, 'cls-single-frame.json.gz');
+  it('shows "Layout shift" tooltip on hover', async function() {
+    const {layoutShiftsTrackAppender, parsedTrace} = await renderTrackAppender(this, 'cls-no-nav.json.gz');
     const shifts = parsedTrace.LayoutShifts.clusters.flatMap(c => c.events);
-    const info = layoutShiftsTrackAppender.highlightedEntryInfo(shifts[0]);
-    assert.deepEqual(info, {
-      title: 'Layout shift',
-      formattedTime: '0.0422',
-    });
+    await layoutShiftsTrackAppender.preloadScreenshots(shifts);
+    const info = layoutShiftsTrackAppender.highlightedEntryInfo(shifts[3]);
+    assert.strictEqual(info.title, 'Layout shift');
+    assert.strictEqual(info.formattedTime, '0.0197');
+    assert.strictEqual(info.additionalElement?.nodeName, 'DIV');
   });
 });

package/front_end/panels/timeline/track_appenders/TimingsTrackAppender.test.ts

@@ -299,7 +299,7 @@ describeWithEnvironment('TimingTrackAppender', function() {
       styleElement.textContent = `
         :root {
           --ref-palette-primary70: rgb(4 4 4);
-          --ref-palette-error50: rgb(10 10 10);
+          --ref-palette-error60: rgb(10 10 10);
         }
       `;
       document.documentElement.appendChild(styleElement);

package/front_end/panels/timeline/utils/Helpers.test.ts

@@ -0,0 +1,38 @@
+// Copyright 2024 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.
+
+import {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
+
+import * as Helpers from './Helpers.js';
+
+describeWithEnvironment('Helpers', () => {
+  it('createUrlLabels', function() {
+    function fn(urls: string[], expected: string[]) {
+      assert.deepEqual(Helpers.createUrlLabels(urls.map(url => new URL(url))), expected);
+    }
+
+    fn([], []);
+
+    // Initial url is elided.
+    fn(['https://www.example.com'], ['/']);
+    fn(['https://www.example.com?k=1234567890&k2=1234567890&k3=0123'], ['/?k=1234567…&k2=1234567…&k3=0123']);
+    fn(['https://www.example.com/blah?test=me'], ['/blah?test=me']);
+
+    // Subsequent urls are elided if the same protocol+domain.
+    fn(['https://www.example.com', 'https://www.example.com/blah?test=me'], ['/', '/blah?test=me']);
+
+    // Subsequent urls are not elided if the protocol or the domain changes.
+    fn(['https://www.example.com', 'https://www.google.com'], ['/', 'www.google.com']);
+    fn(['https://www.example.com', 'https://www.google.com/search'], ['/', 'www.google.com/search']);
+    fn(['https://www.example.com', 'https://www.google.com/search', 'https://www.google.com/search2'],
+       ['/', 'www.google.com/search', '/search2']);
+
+    // If only https protocol is present, elide protocol. Otherwise always show the full URL (but still elide the search params).
+    fn(['https://www.example.com', 'http://www.example.com'], ['https://www.example.com', 'http://www.example.com']);
+    fn(['http://www.example.com', 'https://www.example.com'], ['http://www.example.com', 'https://www.example.com']);
+    fn(['http://www.example.com?k=1234567890', 'https://www.example.com?k=1234567890'],
+       ['http://www.example.com/?k=1234567…', 'https://www.example.com/?k=1234567…']);
+    fn(['https://www.example.com', 'https://www.example2.com'], ['/', 'www.example2.com']);
+  });
+});

package/front_end/panels/timeline/utils/Helpers.ts

@@ -0,0 +1,94 @@
+// Copyright 2024 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.
+
+import * as Platform from '../../../core/platform/platform.js';
+
+function createTrimmedUrlSearch(url: URL): string {
+  const maxSearchValueLength = 8;
+  let search = '';
+
+  for (const [key, value] of url.searchParams) {
+    if (search) {
+      search += '&';
+    }
+    if (value) {
+      search += `${key}=${Platform.StringUtilities.trimEndWithMaxLength(value, maxSearchValueLength)}`;
+    } else {
+      search += key;
+    }
+  }
+  if (search) {
+    search = '?' + search;
+  }
+
+  return search;
+}
+
+/**
+ * Shortens URLs as much as possible while keeping important context.
+ *
+ * - Elides the host if the previous url is the same host+protocol
+ * - Always elide search param values
+ * - Always includes protocol/domain if there is a mix of protocols
+ * - First URL is elided fully to show just the pathname, unless there is a mix of protocols (see above)
+ */
+export function createUrlLabels(urls: URL[]): string[] {
+  const labels: string[] = [];
+  const isAllHttps = urls.every(url => url.protocol === 'https:');
+
+  for (const [index, url] of urls.entries()) {
+    const previousUrl = urls[index - 1];
+    const sameHostAndProtocol = previousUrl && url.host === previousUrl.host && url.protocol === previousUrl.protocol;
+    let elideHost = sameHostAndProtocol;
+    let elideProtocol = isAllHttps;
+
+    // For the first URL, show just the pathname and search - this will be relative to the domain as seen in the
+    // trace dropdown selector. Exception is if there are non-https protocols, in which case we're only going to elide
+    // parts of the query string.
+    if (index === 0 && isAllHttps) {
+      elideHost = true;
+      elideProtocol = true;
+    }
+
+    const search = createTrimmedUrlSearch(url);
+    if (!elideProtocol) {
+      labels.push(`${url.protocol}//${url.host}${url.pathname}${search}`);
+    } else if (!elideHost) {
+      labels.push(`${url.host}${url.pathname}${search}`);
+    } else {
+      labels.push(`${url.pathname}${search}`);
+    }
+  }
+
+  // Lastly, remove any trailing `/`.
+  return labels.map(label => label.length > 1 && label.endsWith('/') ? label.substring(0, label.length - 1) : label);
+}
+
+/**
+ * Shortens the provided URL for use within a narrow display usecase.
+ *
+ * The resulting string will at least contain the last path component of the URL.
+ * More components are included until a limit of 20 characters is reached.
+ * No querystring is included.
+ *
+ * If the last path component is larger than 20 characters, the middle is elided.
+ */
+export function shortenUrl(url: URL): string {
+  const maxChars = 20;
+  const parts = url.pathname.split('/');
+  let shortenedUrl = parts.at(-1) ?? '';
+
+  if (shortenedUrl.length > maxChars) {
+    return Platform.StringUtilities.trimMiddle(shortenedUrl, maxChars);
+  }
+
+  let i = parts.length - 1;
+  while (--i >= 0) {
+    if (shortenedUrl.length + parts[i].length <= maxChars) {
+      shortenedUrl = `${parts[i]}/${shortenedUrl}`;
+    }
+  }
+
+  return shortenedUrl;
+}

package/front_end/panels/timeline/utils/ImageCache.test.ts

@@ -0,0 +1,106 @@
+// Copyright 2024 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.
+
+import * as Trace from '../../../models/trace/trace.js';
+import {defaultTraceEvent} from '../../../testing/TraceHelpers.js';
+
+import * as Utils from './utils.js';
+
+const {cacheForTesting, emitter, getOrQueue, loadImageForTesting: loadImage, preload} = Utils.ImageCache;
+
+describe('ImageCache', () => {
+  // Generate at https://yulvil.github.io/gopherjs/02/ with 1,1,1,jpeg in the form fields
+  const validJpegData =
+      'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAEElEQVR4nGISWfUPEAAA//8CmgG/YtkszwAAAABJRU5ErkJggg==';
+
+  const rawSourceEvent: Trace.Types.Events.Screenshot = {
+    ...defaultTraceEvent,
+    id: '0x1',
+    args: {snapshot: validJpegData},
+    name: Trace.Types.Events.Name.SCREENSHOT,
+    cat: 'disabled-by-default-devtools.screenshot',
+    ph: Trace.Types.Events.Phase.OBJECT_SNAPSHOT,
+  };
+
+  Trace.Handlers.ModelHandlers.Screenshots.reset();
+  Trace.Handlers.ModelHandlers.Screenshots.handleEvent(rawSourceEvent);
+  void Trace.Handlers.ModelHandlers.Screenshots.finalize();
+
+  const syntheticScreenshot1 = Trace.Handlers.ModelHandlers.Screenshots.data().all[0];
+  const syntheticScreenshot2 = structuredClone(syntheticScreenshot1);
+  syntheticScreenshot2.rawSourceEvent.id = '0x2';
+  const badDataUriScreenshot = structuredClone(syntheticScreenshot1);
+  badDataUriScreenshot.args.dataUri = 'INVALIDDATA';
+
+  beforeEach(() => {
+    const cache = cacheForTesting;
+    cache.delete(syntheticScreenshot1);
+    cache.delete(syntheticScreenshot2);
+    cache.delete(badDataUriScreenshot);
+  });
+
+  it('loadImage resolves valid images', async () => {
+    const datauri = `data:image/jpg;base64,${validJpegData}`;
+    const res = await loadImage(datauri);
+    assert.instanceOf(res, HTMLImageElement);
+  });
+  it('loadImage resolves invalid images to null', async () => {
+    const datauri = 'data:image/jpg;base64,INVALIDDATA';
+    const res = await loadImage(datauri);
+    assert.strictEqual(res, null);
+  });
+
+  it('getOrQueue should return null for a new screenshot', () => {
+    assert.strictEqual(getOrQueue(syntheticScreenshot1), null);
+  });
+
+  it('getOrQueue should return the same image for the same screenshot', async () => {
+    // Preload to ensure image is loaded for both reads.
+    await preload([syntheticScreenshot1]);
+
+    const image1 = getOrQueue(syntheticScreenshot1);
+    const image2 = getOrQueue(syntheticScreenshot1);
+    assert.strictEqual(image2, image1);
+    assert.instanceOf(image1, HTMLImageElement);
+  });
+
+  it('emitter should emit an event when a screenshot is updated', async () => {
+    const {promise, resolve} = Promise.withResolvers();
+    emitter.addEventListener('screenshot-loaded', ev => {
+      const event = ev as CustomEvent;
+      assert.strictEqual(event.detail.screenshot, syntheticScreenshot1);
+      assert.instanceOf(event.detail.image, HTMLImageElement);
+      // Cache is updated too.
+      assert.instanceOf(getOrQueue(syntheticScreenshot1), HTMLImageElement);
+      resolve(null);
+    }, {once: true});
+
+    assert.isNull(getOrQueue(syntheticScreenshot1));
+    return promise;
+  });
+
+  it('getOrQueue should return null (immediately and eventually) for an invalid image', async () => {
+    // First attempt is null because empty cache.
+    assert.isNull(getOrQueue(badDataUriScreenshot));
+
+    const {promise, resolve} = Promise.withResolvers();
+    emitter.addEventListener('screenshot-loaded', ev => {
+      const event = ev as CustomEvent;
+      assert.strictEqual(event.detail.screenshot, badDataUriScreenshot);
+      // Loaded but invalid, so null.
+      assert.isNull(event.detail.image);
+      // Null stored in the cache
+      assert.isNull(getOrQueue(badDataUriScreenshot));
+
+      resolve(null);
+    }, {once: true});
+    return promise;
+  });
+
+  it('preload should load all screenshots', async () => {
+    await preload([syntheticScreenshot1, syntheticScreenshot2]);
+    assert.instanceOf(getOrQueue(syntheticScreenshot1), HTMLImageElement);
+    assert.instanceOf(getOrQueue(syntheticScreenshot2), HTMLImageElement);
+  });
+});

package/front_end/panels/timeline/utils/ImageCache.ts

@@ -0,0 +1,55 @@
+// Copyright 2024 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.
+
+import type * as Trace from '../../../models/trace/trace.js';
+
+const imageCache: WeakMap<Trace.Types.Events.SyntheticScreenshot, HTMLImageElement|null> = new WeakMap();
+export const emitter = new EventTarget();
+
+/**
+ * Synchronously returns an image, or return `null` while queuing up an async load of that image.
+ * If the image load fails, we cache a null to avoid reattempts.
+ */
+export function getOrQueue(screenshot: Trace.Types.Events.SyntheticScreenshot): HTMLImageElement|null {
+  if (imageCache.has(screenshot)) {
+    return imageCache.get(screenshot) ?? null;
+  }
+
+  const data = screenshot.args.dataUri;
+
+  loadImage(data)
+      .then(imageOrNull => {
+        imageCache.set(screenshot, imageOrNull);
+        emitter.dispatchEvent(new CustomEvent('screenshot-loaded', {detail: {screenshot, image: imageOrNull}}));
+      })
+      .catch(() => {});
+  return null;
+}
+
+/** Load an image (probably data URI). If it fails, resolve with null. */
+function loadImage(url: string): Promise<HTMLImageElement|null> {
+  return new Promise(resolve => {
+    const image = new Image();
+    image.addEventListener('load', () => resolve(image));
+    image.addEventListener('error', () => resolve(null));
+    image.src = url;
+  });
+}
+
+/** Populate the cache ahead of use, to allow for getOrQueue to synchronously return images. */
+export function preload(screenshots: Trace.Types.Events.SyntheticScreenshot[]): Promise<void[]> {
+  const promises = screenshots.map(screenshot => {
+    if (imageCache.has(screenshot)) {
+      return;
+    }
+    return loadImage(screenshot.args.dataUri).then(image => {
+      imageCache.set(screenshot, image);
+      return;
+    });
+  });
+  return Promise.all(promises);
+}
+
+export const cacheForTesting = imageCache;
+export const loadImageForTesting = loadImage;

package/front_end/panels/timeline/utils/SourceMapsResolver.test.ts

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {type Chrome} from '../../../../extension-api/ExtensionAPI.js';
+import type {Chrome} from '../../../../extension-api/ExtensionAPI.js';
 import type * as Platform from '../../../core/platform/platform.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../generated/protocol.js';
@@ -21,6 +21,7 @@ import {
   makeMockSamplesHandlerData,
   makeProfileCall,
 } from '../../../testing/TraceHelpers.js';
+import {TraceLoader} from '../../../testing/TraceLoader.js';
 
 import * as Utils from './utils.js';
 
@@ -203,4 +204,15 @@ describeWithMockConnection('SourceMapsResolver', () => {
       assert.strictEqual(sourceMappedURL, genScriptURL);
     });
   });
+  describe('unnecessary work detection', () => {
+    it('does not dispatch a SourceMappingsUpdated event if relevant mappings were not updated', async function() {
+      const {parsedTrace} = await TraceLoader.traceEngine(this, 'user-timings.json.gz');
+      const listener = sinon.spy();
+
+      const sourceMapsResolver = new Utils.SourceMapsResolver.SourceMapsResolver(parsedTrace);
+      sourceMapsResolver.addEventListener(Utils.SourceMapsResolver.SourceMappingsUpdated.eventName, listener);
+      await sourceMapsResolver.install();
+      assert.isTrue(listener.notCalled);
+    });
+  });
 });

package/front_end/panels/timeline/utils/SourceMapsResolver.ts

@@ -137,7 +137,7 @@ export class SourceMapsResolver extends EventTarget {
 
     for (const debuggerModel of this.#debuggerModelsToListen) {
       debuggerModel.sourceMapManager().addEventListener(
-          SDK.SourceMapManager.Events.SourceMapAttached, () => this.#onAttachedSourceMap(), this);
+          SDK.SourceMapManager.Events.SourceMapAttached, this.#onAttachedSourceMap, this);
     }
 
     // Although we have added listeners for SourceMapAttached events, we also
@@ -154,12 +154,16 @@ export class SourceMapsResolver extends EventTarget {
   uninstall(): void {
     for (const debuggerModel of this.#debuggerModelsToListen) {
       debuggerModel.sourceMapManager().removeEventListener(
-          SDK.SourceMapManager.Events.SourceMapAttached, () => this.#onAttachedSourceMap(), this);
+          SDK.SourceMapManager.Events.SourceMapAttached, this.#onAttachedSourceMap, this);
     }
     this.#debuggerModelsToListen.clear();
   }
 
   async #resolveMappingsForProfileNodes(): Promise<void> {
+    // Used to track if source mappings were updated when a source map
+    // is attach. If not, we do not notify the flamechart that mappings
+    // were updated, since that would trigger a rerender.
+    let updatedMappings = false;
     for (const [pid, threadsInProcess] of this.#parsedTrace.Samples.profilesInProcess) {
       for (const [tid, threadProfile] of threadsInProcess) {
         const nodes = threadProfile.parsedProfile.nodes() ?? [];
@@ -170,6 +174,7 @@ export class SourceMapsResolver extends EventTarget {
         for (const node of nodes) {
           const resolvedFunctionName =
               await SourceMapScopes.NamesResolver.resolveProfileFrameFunctionName(node.callFrame, target);
+          updatedMappings ||= Boolean(resolvedFunctionName);
           node.setFunctionName(resolvedFunctionName);
 
           const debuggerModel = target.model(SDK.DebuggerModel.DebuggerModel);
@@ -179,12 +184,16 @@ export class SourceMapsResolver extends EventTarget {
           const uiLocation = location &&
               await Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().rawLocationToUILocation(
                   location);
+          updatedMappings ||= Boolean(uiLocation);
 
           SourceMapsResolver.storeResolvedNodeDataForEntry(
               pid, tid, node.callFrame, {name: resolvedFunctionName, devtoolsLocation: uiLocation});
         }
       }
     }
+    if (!updatedMappings) {
+      return;
+    }
     this.dispatchEvent(new SourceMappingsUpdated());
   }
 

package/front_end/panels/timeline/utils/utils.ts

@@ -1,12 +1,16 @@
 // Copyright 2024 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.
+import * as Helpers from './Helpers.js';
 import * as IgnoreList from './IgnoreList.js';
+import * as ImageCache from './ImageCache.js';
 import * as NetworkRequest from './NetworkRequest.js';
 import * as SourceMapsResolver from './SourceMapsResolver.js';
 
 export {
+  Helpers,
   IgnoreList,
+  ImageCache,
   NetworkRequest,
   SourceMapsResolver,
 };

package/front_end/panels/utils/utils.ts

@@ -57,7 +57,7 @@ export class PanelUtils {
     return false;
   }
 
-  private static createIconElement(iconData: {iconName: string, color: string}, title: string): HTMLElement {
+  static createIconElement(iconData: {iconName: string, color: string}, title: string): HTMLElement {
     const iconElement = document.createElement('div');
     iconElement.title = title;
     const url = new URL(`../../Images/${iconData.iconName}.svg`, import.meta.url).toString();

package/front_end/panels/web_audio/graph_visualizer/EdgeView.ts

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {type NodeParamConnectionData, type NodesConnectionData} from './GraphStyle.js';
+import type {NodeParamConnectionData, NodesConnectionData} from './GraphStyle.js';
 import {generateInputPortId, generateOutputPortId, generateParamPortId} from './NodeView.js';
 
 // A class that represents an edge of a graph, including node-to-node connection,

package/front_end/panels/web_audio/graph_visualizer/GraphView.ts

@@ -6,15 +6,9 @@ import * as Common from '../../../core/common/common.js';
 import * as Platform from '../../../core/platform/platform.js';
 
 import {EdgeTypes, EdgeView, generateEdgePortIdsByData} from './EdgeView.js';
-import {
-  type NodeCreationData,
-  type NodeParamConnectionData,
-  type NodeParamDisconnectionData,
-  type NodesConnectionData,
-  type NodesDisconnectionData,
-  type NodesDisconnectionDataWithDestination,
-  type ParamCreationData,
-} from './GraphStyle.js';
+import type {
+  NodeCreationData, NodeParamConnectionData, NodeParamDisconnectionData, NodesConnectionData, NodesDisconnectionData,
+  NodesDisconnectionDataWithDestination, ParamCreationData} from './GraphStyle.js';
 import {NodeLabelGenerator, NodeView} from './NodeView.js';
 
 // A class that tracks all the nodes and edges of an audio graph.

package/front_end/panels/webauthn/WebauthnPane.test.ts

@@ -208,7 +208,7 @@ describeWithMockConnection('WebAuthn pane', () => {
       assert.strictEqual(credentialNode.data, credential);
 
       // Update the credential.
-      const updatedCredential = {
+      const updatedCredential1 = {
         credentialId: 'credential',
         isResidentCredential: false,
         rpId: 'talos1.org',
@@ -218,12 +218,31 @@ describeWithMockConnection('WebAuthn pane', () => {
       };
       model.dispatchEventToListeners(SDK.WebAuthnModel.Events.CREDENTIAL_ASSERTED, {
         authenticatorId,
-        credential: updatedCredential,
+        credential: updatedCredential1,
       });
 
       // Verify the credential was updated.
       assert.strictEqual(dataGrid.rootNode().children.length, 1);
-      assert.strictEqual(credentialNode.data, updatedCredential);
+      assert.strictEqual(credentialNode.data, updatedCredential1);
+
+      // The credential can also be updated through the CREDENTIAL_UPDATED
+      // event.
+      const updatedCredential2 = {
+        credentialId: 'credential',
+        isResidentCredential: false,
+        rpId: 'talos1.org',
+        userHandle: 'danielle',
+        signCount: 2,
+        privateKey: '',
+      };
+      model.dispatchEventToListeners(SDK.WebAuthnModel.Events.CREDENTIAL_UPDATED, {
+        authenticatorId,
+        credential: updatedCredential2,
+      });
+
+      // Verify the credential was updated.
+      assert.strictEqual(dataGrid.rootNode().children.length, 1);
+      assert.strictEqual(credentialNode.data, updatedCredential2);
 
       // Updating a different credential should not affect the existing one.
       const anotherCredential = {
@@ -241,7 +260,59 @@ describeWithMockConnection('WebAuthn pane', () => {
 
       // Verify the credential was unchanged.
       assert.strictEqual(dataGrid.rootNode().children.length, 1);
-      assert.strictEqual(credentialNode.data, updatedCredential);
+      assert.strictEqual(credentialNode.data, updatedCredential2);
+    });
+
+    it('removes credentials that were deleted', async () => {
+      const authenticatorId = 'authenticator-1' as Protocol.WebAuthn.AuthenticatorId;
+
+      // Add an authenticator.
+      const addAuthenticator = sinon.stub(model, 'addAuthenticator').resolves(authenticatorId);
+      panel.addAuthenticatorButton?.click();
+      await new Promise(resolve => setTimeout(resolve, 0));
+      assert.strictEqual(addAuthenticator.called, inScope);
+      if (!inScope) {
+        return;
+      }
+
+      // Add a credential.
+      const credential = {
+        credentialId: 'credential',
+        isResidentCredential: false,
+        rpId: 'talos1.org',
+        userHandle: 'morgan',
+        signCount: 1,
+        privateKey: '',
+      };
+      model.dispatchEventToListeners(SDK.WebAuthnModel.Events.CREDENTIAL_ADDED, {
+        authenticatorId,
+        credential,
+      });
+
+      // Verify the credential appeared.
+      const dataGrid = panel.dataGrids.get(authenticatorId);
+      if (!dataGrid) {
+        assert.fail('Expected dataGrid to be truthy');
+        return;
+      }
+      assert.strictEqual(dataGrid.rootNode().children.length, 1);
+      const credentialNode = dataGrid.rootNode().children[0];
+      assert.isOk(credentialNode);
+      assert.strictEqual(credentialNode.data, credential);
+
+      // Delete a credential with a different ID. This should be ignored.
+      model.dispatchEventToListeners(SDK.WebAuthnModel.Events.CREDENTIAL_DELETED, {
+        authenticatorId,
+        credentialId: 'another credential',
+      });
+      assert.strictEqual(dataGrid.rootNode().children.length, 1);
+
+      // Delete the credential. It should be removed from the list.
+      model.dispatchEventToListeners(SDK.WebAuthnModel.Events.CREDENTIAL_DELETED, {
+        authenticatorId,
+        credentialId: credential.credentialId,
+      });
+      assert.strictEqual(dataGrid.rootNode().children.length, 0);
     });
   };
 

package/front_end/panels/webauthn/WebauthnPane.ts

@@ -409,9 +409,12 @@ export class WebauthnPaneImpl extends UI.Widget.VBox implements
     dataGrid.rootNode().appendChild(node);
   }
 
-  #updateCredential(authenticatorId: Protocol.WebAuthn.AuthenticatorId, {
-    data: event,
-  }: Common.EventTarget.EventTargetEvent<Protocol.WebAuthn.CredentialAssertedEvent>): void {
+  #updateCredential(
+      authenticatorId: Protocol.WebAuthn.AuthenticatorId,
+      {
+        data: event,
+      }: Common.EventTarget
+          .EventTargetEvent<Protocol.WebAuthn.CredentialAssertedEvent&Protocol.WebAuthn.CredentialUpdatedEvent>): void {
     const dataGrid = this.dataGrids.get(authenticatorId);
     if (!dataGrid) {
       return;
@@ -423,6 +426,20 @@ export class WebauthnPaneImpl extends UI.Widget.VBox implements
     node.data = event.credential;
   }
 
+  #deleteCredential(authenticatorId: Protocol.WebAuthn.AuthenticatorId, {
+    data: event,
+  }: Common.EventTarget.EventTargetEvent<Protocol.WebAuthn.CredentialDeletedEvent>): void {
+    const dataGrid = this.dataGrids.get(authenticatorId);
+    if (!dataGrid) {
+      return;
+    }
+    const node = dataGrid.rootNode().children.find(node => node.data?.credentialId === event.credentialId);
+    if (!node) {
+      return;
+    }
+    node.remove();
+  }
+
   async #setVirtualAuthEnvEnabled(enable: boolean): Promise<void> {
     await this.#isEnabling;
     this.#isEnabling = new Promise<void>(async (resolve: (value: void) => void) => {
@@ -700,6 +717,10 @@ export class WebauthnPaneImpl extends UI.Widget.VBox implements
           SDK.WebAuthnModel.Events.CREDENTIAL_ADDED, this.#addCredential.bind(this, authenticatorId));
       this.#model.addEventListener(
           SDK.WebAuthnModel.Events.CREDENTIAL_ASSERTED, this.#updateCredential.bind(this, authenticatorId));
+      this.#model.addEventListener(
+          SDK.WebAuthnModel.Events.CREDENTIAL_UPDATED, this.#updateCredential.bind(this, authenticatorId));
+      this.#model.addEventListener(
+          SDK.WebAuthnModel.Events.CREDENTIAL_DELETED, this.#deleteCredential.bind(this, authenticatorId));
     }
 
     return section;