chrome-devtools-frontend 1.0.1380117 → 1.0.1386602

package/front_end/ui/components/dialogs/Dialog.ts

@@ -2,17 +2,30 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
 import * as WindowBoundsService from '../../../services/window_bounds/window_bounds.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import * as Coordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
+import * as Buttons from '../buttons/buttons.js';
 
 import dialogStyles from './dialog.css.js';
 
 const {html} = LitHtml;
 
+const UIStrings = {
+
+  /**
+   * @description Title of close button for the shortcuts dialog.
+   */
+  close: 'Close',
+};
+
+const str_ = i18n.i18n.registerUIStrings('ui/components/dialogs/Dialog.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
 const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
 
 const IS_DIALOG_SUPPORTED = 'HTMLDialogElement' in globalThis;
@@ -45,7 +58,7 @@ interface DialogData {
   origin: DialogOrigin;
   position: DialogVerticalPosition;
   /**
-   * Horizontal alignment of the dialg with respect to its origin.
+   * Horizontal alignment of the dialog with respect to its origin.
    * Center by default.
    */
   horizontalAlignment: DialogHorizontalAlignment;
@@ -80,6 +93,14 @@ interface DialogData {
    * content. Defaults to true.
    */
   closeOnScroll: boolean;
+  /**
+   * Whether render a closed button, when it is clicked, close the dialog. Defaults to false.
+   */
+  closeButton: boolean;
+  /**
+   * The string used in the header row of the dialog.
+   */
+  dialogTitle: string;
   /**
    * Specifies a context for the visual element.
    */
@@ -106,6 +127,8 @@ export class Dialog extends HTMLElement {
     windowBoundsService: WindowBoundsService.WindowBoundsService.WindowBoundsServiceImpl.instance(),
     closeOnESC: true,
     closeOnScroll: true,
+    closeButton: false,
+    dialogTitle: '',
     jslogContext: '',
   };
 
@@ -211,6 +234,16 @@ export class Dialog extends HTMLElement {
     this.#onStateChange();
   }
 
+  set closeButton(closeButton: boolean) {
+    this.#props.closeButton = closeButton;
+    this.#onStateChange();
+  }
+
+  set dialogTitle(dialogTitle: string) {
+    this.#props.dialogTitle = dialogTitle;
+    this.#onStateChange();
+  }
+
   set jslogContext(jslogContext: string) {
     this.#props.jslogContext = jslogContext;
     this.#onStateChange();
@@ -664,6 +697,32 @@ export class Dialog extends HTMLElement {
     return this.#dialogClientRect;
   }
 
+  #renderHeaderRow(): LitHtml.TemplateResult|null {
+    // If the title is empty and close button is false, let's skip the header row.
+    if (!this.#props.dialogTitle && !this.#props.closeButton) {
+      return null;
+    }
+    // Disabled until https://crbug.com/1079231 is fixed.
+    // clang-format off
+    return html`
+      <div class="dialog-header">
+        <span class="dialog-header-text">${this.#props.dialogTitle}</span>
+        ${this.#props.closeButton ? html`
+          <devtools-button
+            @click=${this.#closeDialog}
+            .data=${{
+              variant: Buttons.Button.Variant.TOOLBAR,
+              iconName: 'cross',
+              title: i18nString(UIStrings.close),
+            } as Buttons.Button.ButtonData}
+            jslog=${VisualLogging.close().track({click: true})}
+          ></devtools-button>
+        ` : LitHtml.nothing}
+      </div>
+    `;
+    // clang-format on
+  }
+
   #render(): void {
     if (!ComponentHelpers.ScheduledRender.isScheduledRender(this)) {
       throw new Error('Dialog render was not scheduled');
@@ -686,7 +745,10 @@ export class Dialog extends HTMLElement {
       <dialog @click=${this.#handlePointerEvent} @pointermove=${this.#handlePointerEvent} @cancel=${this.#onCancel}
               jslog=${VisualLogging.dialog(this.#props.jslogContext).track({resize: true, keydown: 'Escape'}).parent('mapped')}>
         <div id="content">
-          <slot></slot>
+          ${this.#renderHeaderRow()}
+          <div class='dialog-content'>
+            <slot></slot>
+          </div>
         </div>
       </dialog>
     `, this.#shadow, { host: this });

package/front_end/ui/components/dialogs/ShortcutDialog.test.ts

@@ -13,8 +13,11 @@ import * as Dialogs from './dialogs.js';
 const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
 
 describeWithLocale('ShortcutDialog', () => {
-  async function getShortcutDialog(open?: boolean) {
+  async function getShortcutDialog(open?: boolean, prependedElement?: HTMLElement) {
     const shortcutDialog = new Dialogs.ShortcutDialog.ShortcutDialog();
+    if (prependedElement) {
+      shortcutDialog.prependElement(prependedElement);
+    }
     shortcutDialog.data = {shortcuts: [{title: 'Shortcut Title', bindings: ['Ctrl+E']}], open};
     Helpers.renderElementIntoDOM(shortcutDialog);
     await coordinator.done();
@@ -45,4 +48,15 @@ describeWithLocale('ShortcutDialog', () => {
 
     assert.isFalse(dialog.hasAttribute('open'));
   });
+
+  it('prepends provived element to the dialog content', async () => {
+    const prependedElement = document.createElement('div');
+    prependedElement.classList.add('prepended-element');
+
+    const shortcutDialog = await getShortcutDialog(true, prependedElement);
+    const dialog = getDialogFromShortcutDialog(shortcutDialog);
+    const prependedElementInShortcutDialog = dialog.querySelector('div.prepended-element');
+
+    assert.instanceOf(prependedElementInShortcutDialog, HTMLDivElement);
+  });
 });

package/front_end/ui/components/dialogs/ShortcutDialog.ts

@@ -69,6 +69,7 @@ export class ShortcutDialog extends HTMLElement {
   #showButton: Buttons.Button.Button|null = null;
   #shortcuts: Shortcut[] = [];
   #openOnRender = false;
+  #prependedElement: HTMLElement|null = null;
 
   connectedCallback(): void {
     this.#shadow.adoptedStyleSheets = [shortcutDialogStyles];
@@ -107,6 +108,10 @@ export class ShortcutDialog extends HTMLElement {
     return binding.split(/[\s+]+/).map(word => word.trim());  // Split on one or more spaces or + symbols
   }
 
+  prependElement(element: HTMLElement): void {
+    this.#prependedElement = element;
+  }
+
   #render(): void {
     if (!ComponentHelpers.ScheduledRender.isScheduledRender(this)) {
       throw new Error('Shortcut dialog render was not scheduled');
@@ -142,32 +147,35 @@ export class ShortcutDialog extends HTMLElement {
           this.#dialog = node as DialogElement;
         })}
       >
-        <div class="keybinds-category-header">
-          <span class="keybinds-category-header-text">${i18nString(UIStrings.dialogTitle)}</span>
-          <devtools-button
-            @click=${this.#closeDialog}
-            .data=${{
-              variant: Buttons.Button.Variant.TOOLBAR,
-              iconName: 'cross',
-              title: i18nString(UIStrings.close),
-            } as Buttons.Button.ButtonData}
+      <div class="keybinds-category-header">
+        <span class="keybinds-category-header-text">${i18nString(UIStrings.dialogTitle)}</span>
+        <devtools-button
+        @click=${this.#closeDialog}
+        .data=${{
+          variant: Buttons.Button.Variant.TOOLBAR,
+          iconName: 'cross',
+          title: i18nString(UIStrings.close),
+        } as Buttons.Button.ButtonData}
             jslog=${VisualLogging.close().track({click: true})}
-          ></devtools-button>
-        </div>
+            ></devtools-button>
+          </div>
+        ${(this.#prependedElement) ? html`${this.#prependedElement}` : LitHtml.nothing}
         <ul class="keybinds-list">
           ${this.#shortcuts.map(shortcut =>
             html`
               <li class="keybinds-list-item">
-                <div>${shortcut.title}</div>
-                ${shortcut.bindings.map(binding => {
-                  return html`
-                  <div class="keys-container">
-                    ${this.#getKeysFromBinding(binding).map(key => html`
-                        <span class="keybinds-key">${key}</span>
-                    `)}
+                <div class="keybinds-list-title">${shortcut.title}</div>
+                <div class="shortcuts-for-actions">
+                  ${shortcut.bindings.map(binding => {
+                    return html`
+                    <div class="keys-container">
+                      ${this.#getKeysFromBinding(binding).map(key => html`
+                          <span class="keybinds-key">${key}</span>
+                      `)}
+                    </div>
+                  `;
+                    })}
                   </div>
-                `;
-                  })}
               </li>`,
           )}
         </ul>

package/front_end/ui/components/dialogs/buttonDialog.css

@@ -0,0 +1,9 @@
+/*
+ * 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.
+ */
+
+:host {
+  white-space: nowrap;
+}

package/front_end/ui/components/dialogs/dialog.css

@@ -50,6 +50,21 @@ dialog:focus-visible {
   clip-path: polygon(var(--content-clip-path));
 }
 
+.dialog-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--sys-size-5) var(--sys-size-5) var(--sys-size-5) var(--sys-size-8);
+}
+
+.dialog-header-text {
+  font: var(--sys-typescale-body2-medium);
+}
+
+.dialog-content {
+  padding: 0 var(--sys-size-8);
+}
+
 @keyframes slideIn {
   from {
     transform: translateY(var(--dialog-offset-y));

package/front_end/ui/components/dialogs/dialogs.ts

@@ -2,11 +2,13 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as ButtonDialog from './ButtonDialog.js';
 import * as Dialog from './Dialog.js';
 import * as IconDialog from './IconDialog.js';
 import * as ShortcutDialog from './ShortcutDialog.js';
 
 export {
+  ButtonDialog,
   Dialog,
   IconDialog,
   ShortcutDialog,

package/front_end/ui/components/dialogs/shortcutDialog.css

@@ -13,7 +13,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: var(--sys-size-4) var(--sys-size-6) var(--sys-size-6) var(--sys-size-8);
+  padding: 0 var(--sys-size-6) var(--sys-size-5) var(--sys-size-8);
 }
 
 .keybinds-category-header-text {
@@ -24,16 +24,30 @@
 .keybinds-list {
   display: flex;
   flex-direction: column;
-  gap: var(--sys-size-4);
   margin: 0;
-  padding: 0 var(--sys-size-8);
+  padding: 0 var(--sys-size-8) var(--sys-size-3) var(--sys-size-8);
 }
 
 .keybinds-list-item {
-  display: flex;
-  align-items: center;
+  display: grid;
+  align-items: baseline;
   justify-content: space-between;
-  gap: 30px;
+  grid-template-rows: 1fr;
+  grid-template-columns: 1fr var(--sys-size-11) 1fr;
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
+  padding: var(--sys-size-4) 0;
+
+  &:last-of-type {
+    border-bottom: unset;
+  }
+
+  .keybinds-list-title {
+    grid-row: 1/1;
+  }
+
+  .shortcuts-for-actions {
+    grid-area: auto / 3 / auto / span 1;
+  }
 }
 
 .keybinds-list-text {
@@ -50,6 +64,20 @@
   gap: var(--sys-size-3);
 }
 
+.shortcuts-for-actions {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: var(--sys-size-3);
+}
+
+.nav-radio-buttons {
+  display: flex;
+  flex-direction: column;
+  padding: 0 var(--sys-size-8);
+  gap: var(--sys-size-3);
+}
+
 .keybinds-key {
   display: flex;
   align-items: center;

package/front_end/ui/components/docs/dialog/button_dialog.html

@@ -0,0 +1,28 @@
+<!--
+  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.
+-->
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>Button dialog - basic example</title>
+    <style>
+      #container {
+        width: 800px;
+        height: 400px;
+        margin: 0 auto;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div id="container"></div>
+    <script src="./button_dialog.js" type="module"></script>
+  </body>
+</html>

package/front_end/ui/components/docs/dialog/button_dialog.ts

@@ -0,0 +1,29 @@
+// 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 FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';  // eslint-disable-line rulesdir/es_modules_import
+import * as Buttons from '../../buttons/buttons.js';
+import * as Dialogs from '../../dialogs/dialogs.js';
+import * as ComponentHelpers from '../../helpers/helpers.js';
+
+await ComponentHelpers.ComponentServerSetup.setup();
+await FrontendHelpers.initializeGlobalVars();
+
+const buttonDialog = new Dialogs.ButtonDialog.ButtonDialog();
+buttonDialog.data = {
+  openOnRender: false,
+  variant: Buttons.Button.Variant.TOOLBAR,
+  iconName: 'help',
+  position: Dialogs.Dialog.DialogVerticalPosition.AUTO,
+  horizontalAlignment: Dialogs.Dialog.DialogHorizontalAlignment.AUTO,
+  closeOnESC: true,
+  closeOnScroll: false,
+  closeButton: true,
+  dialogTitle: 'Button dialog example',
+};
+const div = document.createElement('div');
+div.createChild('div').innerHTML = 'Hello, World';
+div.createChild('div').innerHTML = 'This is a super long content. This is a super long content';
+buttonDialog.appendChild(div);
+document.getElementById('container')?.appendChild(buttonDialog);

package/front_end/ui/components/docs/performance_panel/basic.ts

@@ -94,7 +94,7 @@ UI.ActionRegistration.registerActionExtension({
 
 const actionRegistry = UI.ActionRegistry.ActionRegistry.instance();
 UI.ShortcutRegistry.ShortcutRegistry.instance({forceNew: true, actionRegistry});
-Common.Settings.settingForTest('flamechart-mouse-wheel-action').set('zoom');
+Common.Settings.settingForTest('flamechart-selected-navigation').set('classic');
 const params = new URLSearchParams(window.location.search);
 const traceFileName = params.get('trace');
 const cpuprofileName = params.get('cpuprofile');

package/front_end/ui/components/docs/performance_panel/timeline_history_manager.ts

@@ -26,7 +26,8 @@ UI.ActionRegistration.registerActionExtension({
   },
 });
 
-const {parsedTrace: parsedTrace1} = await TraceLoader.TraceLoader.traceEngine(null, 'multiple-navigations.json.gz');
+const {parsedTrace: parsedTrace1, metadata: metadata1} =
+    await TraceLoader.TraceLoader.traceEngine(null, 'multiple-navigations.json.gz');
 TraceLoader.TraceLoader.initTraceBoundsManager(parsedTrace1);
 
 new Timeline.TimelineHistoryManager.TimelineHistoryManager().addRecording({
@@ -36,10 +37,11 @@ new Timeline.TimelineHistoryManager.TimelineHistoryManager().addRecording({
   },
   filmStripForPreview: Trace.Extras.FilmStrip.fromParsedTrace(parsedTrace1),
   parsedTrace: parsedTrace1,
-  startTime: null,
+  metadata: metadata1,
 });
 
-const {parsedTrace: parsedTrace2} = await TraceLoader.TraceLoader.traceEngine(null, 'web-dev.json.gz');
+const {parsedTrace: parsedTrace2, metadata: metadata2} =
+    await TraceLoader.TraceLoader.traceEngine(null, 'web-dev.json.gz');
 TraceLoader.TraceLoader.initTraceBoundsManager(parsedTrace2);
 const container = document.querySelector('.container');
 if (!container) {
@@ -53,6 +55,6 @@ new Timeline.TimelineHistoryManager.TimelineHistoryManager().addRecording({
   },
   filmStripForPreview: Trace.Extras.FilmStrip.fromParsedTrace(parsedTrace2),
   parsedTrace: parsedTrace2,
-  startTime: null,
+  metadata: metadata2,
 });
 await Timeline.TimelineHistoryManager.DropDown.show([0, 1], 1, container);

package/front_end/ui/components/floating_button/FloatingButton.ts

@@ -8,10 +8,11 @@ import * as LitHtml from '../../lit-html/lit-html.js';
 
 import floatingButtonStyles from './floatingButton.css.js';
 
-const {html} = LitHtml;
+const {html, Directives: {ifDefined}} = LitHtml;
 
 interface FloatingButtonData {
   iconName: string;
+  title?: string;
   disabled?: boolean;
 }
 
@@ -36,7 +37,7 @@ export class FloatingButton extends HTMLElement {
   #render(): void {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    LitHtml.render(html`<button class="floating-button" .disabled=${Boolean(this.#data.disabled)}><devtools-icon class="icon" name=${this.#data.iconName}></devtools-icon></button>`, this.#shadow, {host: this});
+    LitHtml.render(html`<button class="floating-button" title=${ifDefined(this.#data.title)} .disabled=${Boolean(this.#data.disabled)}><devtools-icon class="icon" name=${this.#data.iconName}></devtools-icon></button>`, this.#shadow, {host: this});
     // clang-format on
   }
 }

package/front_end/ui/components/icon_button/fileSourceIcon.css

@@ -5,20 +5,24 @@
  */
 
 :host {
+  devtools-icon.document {
+    color: var(--override-file-source-icon-color, var(--icon-default));
+  }
+
   devtools-icon.script,
   devtools-icon.sm-script,
   devtools-icon.snippet {
-    color: var(--icon-file-script);
+    color: var(--override-file-source-icon-color, var(--icon-file-script));
   }
 
   devtools-icon.stylesheet,
   devtools-icon.sm-stylesheet {
-    color: var(--icon-file-styles);
+    color: var(--override-file-source-icon-color, var(--icon-file-styles));
   }
 
   devtools-icon.image,
   devtools-icon.font {
-    color: var(--icon-file-image);
+    color: var(--override-file-source-icon-color, var(--icon-file-image));
   }
 
   devtools-icon.dot::before {

package/front_end/ui/components/issue_counter/IssueCounter.ts

@@ -67,7 +67,20 @@ export interface IssueCounterData {
   compact?: boolean;
 }
 
-const listFormat = new Intl.ListFormat(navigator.language, {type: 'unit', style: 'short'});
+// Lazily instantiate the formatter as the constructor takes 50ms+
+// TODO: move me and others like me to i18n module
+const listFormatter = (function defineFormatter() {
+  let intlListFormat: Intl.ListFormat;
+  return {
+    format(...args: Parameters<Intl.ListFormat['format']>): ReturnType<Intl.ListFormat['format']> {
+      if (!intlListFormat) {
+        const opts: Intl.ListFormatOptions = {type: 'unit', style: 'short'};
+        intlListFormat = new Intl.ListFormat(i18n.DevToolsLocale.DevToolsLocale.instance().locale, opts);
+      }
+      return intlListFormat.format(...args);
+    },
+  };
+})();
 
 export function getIssueCountsEnumeration(
     issuesManager: IssuesManager.IssuesManager.IssuesManager, omitEmpty: boolean = true): string {
@@ -81,7 +94,7 @@ export function getIssueCountsEnumeration(
     i18nString(UIStrings.breakingChanges, {issueCount: counts[1]}),
     i18nString(UIStrings.possibleImprovements, {issueCount: counts[2]}),
   ];
-  return listFormat.format(phrases.filter((_, i) => omitEmpty ? counts[i] > 0 : true));
+  return listFormatter.format(phrases.filter((_, i) => omitEmpty ? counts[i] > 0 : true));
 }
 
 export class IssueCounter extends HTMLElement {

package/front_end/ui/components/legacy_wrapper/LegacyWrapper.ts

@@ -47,7 +47,7 @@ legacyWrapper<T extends Constructor<UI.Widget.Widget>, Component extends Wrappab
       this.#component.willHide();
     }
 
-    async doUpdate(): Promise<void> {
+    override async doUpdate(): Promise<void> {
       await this.#component.render();
     }
 

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

@@ -54,6 +54,21 @@ export class MarkdownView extends HTMLElement {
     this.#update();
   }
 
+  finishAnimations(): void {
+    const animatingElements = this.#shadow.querySelectorAll('.animating');
+    for (const element of animatingElements) {
+      element.classList.remove('animating');
+    }
+
+    const pendingElements = this.#shadow.querySelectorAll('.pending');
+    for (const element of pendingElements) {
+      element.classList.remove('pending');
+    }
+    this.#isAnimating = false;
+    this.#animationEnabled = false;
+    this.#renderer.setCustomClasses({});
+  }
+
   #animate(): void {
     if (this.#isAnimating) {
       return;

package/front_end/ui/components/markdown_view/markdownView.css

@@ -16,7 +16,7 @@
 .animating {
   overflow: hidden;
   white-space: nowrap;
-  animation: typing 0.3s steps(40, end);
+  animation: typing 0.4s steps(40, end);
 }
 
 .pending {

package/front_end/ui/components/render_coordinator/RenderCoordinator.ts

@@ -133,10 +133,10 @@ export class RenderCoordinator extends EventTarget {
       if (!callback) {
         throw new Error('Read called with label but no callback');
       }
-      return this.#enqueueHandler(callback, ACTION.READ, labelOrCallback);
+      return this.#enqueueHandler(ACTION.READ, labelOrCallback, callback) as Promise<T>;
     }
 
-    return this.#enqueueHandler(labelOrCallback, ACTION.READ, UNNAMED_READ);
+    return this.#enqueueHandler(ACTION.READ, UNNAMED_READ, labelOrCallback) as Promise<T>;
   }
 
   // Schedules a 'write' job which is being executed within an animation frame
@@ -150,10 +150,14 @@ export class RenderCoordinator extends EventTarget {
       if (!callback) {
         throw new Error('Write called with label but no callback');
       }
-      return this.#enqueueHandler(callback, ACTION.WRITE, labelOrCallback);
+      return this.#enqueueHandler(ACTION.WRITE, labelOrCallback, callback) as Promise<T>;
     }
 
-    return this.#enqueueHandler(labelOrCallback, ACTION.WRITE, UNNAMED_WRITE);
+    return this.#enqueueHandler(ACTION.WRITE, UNNAMED_WRITE, labelOrCallback) as Promise<T>;
+  }
+
+  findPendingWrite(label: string): Promise<void>|undefined {
+    return this.#enqueueHandler(ACTION.WRITE, label);
   }
 
   takeRecords(): CoordinatorLogEntry[] {
@@ -177,13 +181,13 @@ export class RenderCoordinator extends EventTarget {
       if (!callback) {
         throw new Error('Scroll called with label but no callback');
       }
-      return this.#enqueueHandler(callback, ACTION.READ, labelOrCallback);
+      return this.#enqueueHandler(ACTION.READ, labelOrCallback, callback) as Promise<T>;
     }
 
-    return this.#enqueueHandler(labelOrCallback, ACTION.READ, UNNAMED_SCROLL);
+    return this.#enqueueHandler(ACTION.READ, UNNAMED_SCROLL, labelOrCallback) as Promise<T>;
   }
 
-  #enqueueHandler<T>(callback: CoordinatorCallback<T>, action: ACTION, label: string): Promise<T> {
+  #enqueueHandler<T>(action: ACTION, label: string, callback?: CoordinatorCallback<T>): Promise<T>|undefined {
     const hasName = ![UNNAMED_READ, UNNAMED_WRITE, UNNAMED_SCROLL].includes(label);
     label = `${action === ACTION.READ ? '[Read]' : '[Write]'}: ${label}`;
 
@@ -202,18 +206,20 @@ export class RenderCoordinator extends EventTarget {
     }
 
     let workItem = hasName ? workItems.find(w => w.label === label) as WorkItem<T>| undefined : undefined;
-    if (!workItem) {
-      workItem = new WorkItem<T>(label, callback);
-      workItems.push(workItem);
-    } else {
-      // We are always using the latest handler, so that we don't end up with a
-      // stale results. We are reusing the promise to avoid blocking the first invocation, when
-      // it is being "overridden" by another one.
-      workItem.handler = callback;
-    }
+    if (callback) {
+      if (!workItem) {
+        workItem = new WorkItem<T>(label, callback);
+        workItems.push(workItem);
+      } else {
+        // We are always using the latest handler, so that we don't end up with a
+        // stale results. We are reusing the promise to avoid blocking the first invocation, when
+        // it is being "overridden" by another one.
+        workItem.handler = callback;
+      }
 
-    this.#scheduleWork();
-    return workItem.promise;
+      this.#scheduleWork();
+    }
+    return workItem?.promise;
   }
 
   #scheduleWork(): void {

package/front_end/ui/components/switch/SwitchImpl.ts

@@ -65,12 +65,12 @@ export class Switch extends HTMLElement {
     /* eslint-disable rulesdir/inject_checkbox_styles */
     // clang-format off
     LitHtml.render(html`
-    <label role="button">
+    <label role="button" jslog=${jslog || LitHtml.nothing}>
       <input type="checkbox"
         @change=${this.#handleChange}
         ?disabled=${this.#disabled}
         .checked=${this.#checked}
-        jslog=${jslog || LitHtml.nothing}>
+      >
       <span class="slider" @click=${(ev: Event) => ev.stopPropagation()}></span>
     </label>
     `, this.#shadow, {host: this});