chrome-devtools-frontend 1.0.1376716 → 1.0.1386602

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/freestyler/basic.ts

@@ -4,9 +4,7 @@
 
 import * as Host from '../../../../core/host/host.js';
 import type * as SDK from '../../../../core/sdk/sdk.js';
-import type * as Workspace from '../../../../models/workspace/workspace.js';
 import * as Freestyler from '../../../../panels/freestyler/freestyler.js';
-import type * as TimelineUtils from '../../../../panels/timeline/utils/utils.js';
 import * as FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';
 import * as ComponentHelpers from '../../helpers/helpers.js';
 
@@ -45,20 +43,20 @@ const component = new Freestyler.FreestylerChatUi({
   onInspectElementClick: noop,
   onFeedbackSubmit: noop,
   onCancelClick: noop,
-  onSelectedNetworkRequestClick: noop,
-  onSelectedFileRequestClick: noop,
+  onContextClick: noop,
+  onNewConversation: noop,
   inspectElementToggled: false,
   state: Freestyler.State.CHAT_VIEW,
   aidaAvailability: Host.AidaClient.AidaAccessPreconditions.AVAILABLE,
   messages,
-  selectedElement: {} as unknown as SDK.DOMModel.DOMNode,
-  selectedFile: {} as unknown as Workspace.UISourceCode.UISourceCode,
-  selectedNetworkRequest: {} as unknown as SDK.NetworkRequest.NetworkRequest,
-  selectedAiCallTree: {} as unknown as TimelineUtils.AICallTree.AICallTree,
+  selectedContext: new Freestyler.NodeContext({} as unknown as SDK.DOMModel.DOMNode),
   agentType: Freestyler.AgentType.FREESTYLER,
   isLoading: false,
   canShowFeedbackForm: false,
   userInfo: {},
+  blockedByCrossOrigin: false,
+  isReadOnly: false,
+  stripLinks: false,
 });
 
 document.getElementById('container')?.appendChild(component);

package/front_end/ui/components/docs/freestyler/empty_state.ts

@@ -4,9 +4,7 @@
 
 import * as Host from '../../../../core/host/host.js';
 import type * as SDK from '../../../../core/sdk/sdk.js';
-import type * as Workspace from '../../../../models/workspace/workspace.js';
 import * as Freestyler from '../../../../panels/freestyler/freestyler.js';
-import type * as TimelineUtils from '../../../../panels/timeline/utils/utils.js';
 import * as FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';
 import * as ComponentHelpers from '../../helpers/helpers.js';
 
@@ -20,20 +18,20 @@ const component = new Freestyler.FreestylerChatUi({
   onInspectElementClick: noop,
   onFeedbackSubmit: noop,
   onCancelClick: noop,
-  onSelectedNetworkRequestClick: noop,
-  onSelectedFileRequestClick: noop,
+  onContextClick: noop,
+  onNewConversation: noop,
   inspectElementToggled: false,
   state: Freestyler.State.CHAT_VIEW,
   aidaAvailability: Host.AidaClient.AidaAccessPreconditions.AVAILABLE,
   messages: [],
-  selectedElement: {} as unknown as SDK.DOMModel.DOMNode,
-  selectedFile: {} as unknown as Workspace.UISourceCode.UISourceCode,
-  selectedNetworkRequest: {} as unknown as SDK.NetworkRequest.NetworkRequest,
-  selectedAiCallTree: {} as unknown as TimelineUtils.AICallTree.AICallTree,
+  selectedContext: new Freestyler.NodeContext({} as unknown as SDK.DOMModel.DOMNode),
   agentType: Freestyler.AgentType.FREESTYLER,
   isLoading: false,
   canShowFeedbackForm: false,
   userInfo: {},
+  blockedByCrossOrigin: false,
+  isReadOnly: false,
+  stripLinks: false,
 });
 
 document.getElementById('container')?.appendChild(component);

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/docs/performance_panel/track_example.html

@@ -12,7 +12,7 @@
       it to the timeline in
       TimelineFlameChartDataProvider.appendLegacyTrackData). In this
       case the value of this param must be an entry from the
-      TimelineModel.TimelineModel.TrackType enum.
+      Trace.TimelineModel.TrackType enum.
 
       Or it could be a track appended by the new system. In this case
       the value must be an entry from

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.test.ts

@@ -24,6 +24,12 @@ function getFakeToken(token: TestToken): Marked.Marked.Token {
   return token as unknown as Marked.Marked.Token;
 }
 
+function renderTemplateResult(templateResult: LitHtml.TemplateResult): HTMLElement {
+  const container = document.createElement('container');
+  LitHtml.render(templateResult, container);  // eslint-disable-line rulesdir/lit_html_host_this
+  return container;
+}
+
 describeWithEnvironment('MarkdownView', () => {
   describe('tokenizer', () => {
     it('tokenizers links in single quotes', () => {
@@ -65,45 +71,53 @@ describeWithEnvironment('MarkdownView', () => {
     const renderer = new MarkdownView.MarkdownView.MarkdownLitRenderer();
 
     it('wraps paragraph tokens in <p> tags', () => {
-      const renderResult = renderer.renderToken(getFakeToken({type: 'paragraph', tokens: []}));
-      assert.deepStrictEqual(renderResult.strings.raw, ['<p>', '</p>']);
+      const container = renderTemplateResult(renderer.renderToken(getFakeToken({type: 'paragraph', tokens: []})));
+
+      assert.exists(container.querySelector('p'));
     });
 
     it('wraps an unordered list token in <ul> tags', () => {
-      const renderResult = renderer.renderToken(getFakeToken({type: 'list', items: []}));
-      assert.deepStrictEqual(renderResult.strings.raw, ['<ul>', '</ul>']);
+      const container = renderTemplateResult(renderer.renderToken(getFakeToken({type: 'list', items: []})));
+
+      assert.exists(container.querySelector('ul'));
     });
 
     it('wraps list items in <li> tags', () => {
-      const renderResult = renderer.renderToken(getFakeToken({type: 'list_item', tokens: []}));
-      assert.deepStrictEqual(renderResult.strings.raw, ['<li>', '</li>']);
+      const container = renderTemplateResult(renderer.renderToken(getFakeToken({type: 'list_item', tokens: []})));
+      assert.exists(container.querySelector('li'));
     });
 
     it('wraps a codespan token in <code> tags', () => {
-      const renderResult = renderer.renderToken(getFakeToken({type: 'codespan', text: 'const foo = 42;'}));
-      assert.deepStrictEqual(renderResult.strings.raw, ['<code>', '</code>']);
-      assert.deepStrictEqual(renderResult.values, ['const foo = 42;']);
+      const container =
+          renderTemplateResult(renderer.renderToken(getFakeToken({type: 'codespan', text: 'const foo = 42;'})));
+
+      const code = container.querySelector('code');
+      assert.exists(code);
+      assert.deepStrictEqual(code.textContent, 'const foo = 42;');
     });
 
     it('renders childless text tokens as-is', () => {
-      const renderResult = renderer.renderToken(getFakeToken({type: 'text', text: 'Simple text token'}));
-      assert.deepStrictEqual(renderResult.values, ['Simple text token']);
+      const container =
+          renderTemplateResult(renderer.renderToken(getFakeToken({type: 'text', text: 'Simple text token'})));
+
+      assert.deepStrictEqual(container.childTextNodes().length, 1);
+      assert.deepStrictEqual(container.childTextNodes()[0].textContent, 'Simple text token');
     });
 
     it('renders nested text tokens correctly', () => {
-      const renderResult = renderer.renderToken(getFakeToken({
+      const container = renderTemplateResult(renderer.renderToken(getFakeToken({
         type: 'text',
         text: 'This text should not be rendered. Only the subtokens!',
         tokens: [
           getFakeToken({type: 'text', text: 'Nested raw text'}),
           getFakeToken({type: 'codespan', text: 'and a nested codespan to boot'}),
         ],
-      }));
+      })));
 
-      const renderedParts = renderResult.values[0] as LitHtml.TemplateResult[];
-      assert.strictEqual(renderedParts.length, 2);
-      assert.deepStrictEqual(renderedParts[0].values, ['Nested raw text']);
-      assert.deepStrictEqual(renderedParts[1].values, ['and a nested codespan to boot']);
+      assert.notInclude(container.textContent, 'This text should not be rendered. Only the subtokens!');
+      assert.include(container.textContent, 'Nested raw text');
+      assert.exists(container.querySelector('code'));
+      assert.deepStrictEqual(container.querySelector('code')?.textContent, 'and a nested codespan to boot');
     });
 
     it('throws an error for invalid or unsupported token types', () => {
@@ -161,6 +175,14 @@ describeWithEnvironment('MarkdownView', () => {
 
       assert.isTrue(renderResult.includes('<em'));
     });
+    it('sets custom classes on the token types', () => {
+      renderer.setCustomClasses({em: 'custom-class'});
+
+      const renderResult = renderer.renderToken(getFakeToken({type: 'em', text: 'em text'}));
+      const container = renderTemplateResult(renderResult);
+      assert.isTrue(
+          container.querySelector('em')?.classList.contains('custom-class'), 'Expected custom-class to be applied');
+    });
   });
 
   describe('MarkdownInsightRenderer renderToken', () => {

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

@@ -18,6 +18,7 @@ const render = LitHtml.render;
 export interface MarkdownViewData {
   tokens: Marked.Marked.Token[];
   renderer?: MarkdownLitRenderer;
+  animationEnabled?: boolean;
 }
 
 export class MarkdownView extends HTMLElement {
@@ -25,6 +26,8 @@ export class MarkdownView extends HTMLElement {
 
   #tokenData: readonly Marked.Marked.Token[] = [];
   #renderer = new MarkdownLitRenderer();
+  #animationEnabled = false;
+  #isAnimating = false;
 
   connectedCallback(): void {
     this.#shadow.adoptedStyleSheets = [markdownViewStyles];
@@ -35,11 +38,68 @@ export class MarkdownView extends HTMLElement {
     if (data.renderer) {
       this.#renderer = data.renderer;
     }
+
+    if (data.animationEnabled) {
+      this.#animationEnabled = true;
+      this.#renderer.setCustomClasses({
+        paragraph: 'pending',
+        heading: 'pending',
+        list_item: 'pending',
+      });
+    } else {
+      this.#animationEnabled = false;
+      this.#renderer.setCustomClasses({});
+    }
+
     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;
+    }
+
+    this.#isAnimating = true;
+    const reveal = (): void => {
+      const pendingElement = this.#shadow.querySelector('.pending');
+      if (!pendingElement) {
+        this.#isAnimating = false;
+        return;
+      }
+
+      pendingElement.addEventListener('animationend', () => {
+        pendingElement.classList.remove('animating');
+        reveal();
+      }, {once: true});
+
+      pendingElement.classList.remove('pending');
+      pendingElement.classList.add('animating');
+    };
+
+    reveal();
+  }
+
   #update(): void {
     this.#render();
+
+    if (this.#animationEnabled) {
+      this.#animate();
+    }
   }
 
   #render(): void {
@@ -66,6 +126,18 @@ declare global {
  * Default renderer is used for the IssuesPanel and allows only well-known images and links to be embedded.
  */
 export class MarkdownLitRenderer {
+  #customClasses: Record<string, string> = {};
+
+  setCustomClasses(customClasses: Record<Marked.Marked.Token['type'], string>): void {
+    this.#customClasses = customClasses;
+  }
+
+  #customClassMapForToken(type: Marked.Marked.Token['type']): LitHtml.Directive.DirectiveResult {
+    return LitHtml.Directives.classMap({
+      [this.#customClasses[type]]: this.#customClasses[type],
+    });
+  }
+
   renderChildTokens(token: Marked.Marked.Token): LitHtml.TemplateResult[] {
     if ('tokens' in token && token.tokens) {
       return token.tokens.map(token => this.renderToken(token));
@@ -102,25 +174,27 @@ export class MarkdownLitRenderer {
   }
 
   renderHeading(heading: Marked.Marked.Tokens.Heading): LitHtml.TemplateResult {
+    const customClass = this.#customClassMapForToken('heading');
     switch (heading.depth) {
       case 1:
-        return html`<h1>${this.renderText(heading)}</h1>`;
+        return html`<h1 class=${customClass}>${this.renderText(heading)}</h1>`;
       case 2:
-        return html`<h2>${this.renderText(heading)}</h2>`;
+        return html`<h2 class=${customClass}>${this.renderText(heading)}</h2>`;
       case 3:
-        return html`<h3>${this.renderText(heading)}</h3>`;
+        return html`<h3 class=${customClass}>${this.renderText(heading)}</h3>`;
       case 4:
-        return html`<h4>${this.renderText(heading)}</h4>`;
+        return html`<h4 class=${customClass}>${this.renderText(heading)}</h4>`;
       case 5:
-        return html`<h5>${this.renderText(heading)}</h5>`;
+        return html`<h5 class=${customClass}>${this.renderText(heading)}</h5>`;
       default:
-        return html`<h6>${this.renderText(heading)}</h6>`;
+        return html`<h6 class=${customClass}>${this.renderText(heading)}</h6>`;
     }
   }
 
   renderCodeBlock(token: Marked.Marked.Tokens.Code): LitHtml.TemplateResult {
     // clang-format off
     return html`<devtools-code-block
+      class=${this.#customClassMapForToken('code')}
       .code=${this.unescape(token.text)}
       .codeLang=${token.lang || ''}>
     </devtools-code-block>`;
@@ -130,29 +204,33 @@ export class MarkdownLitRenderer {
   templateForToken(token: Marked.Marked.MarkedToken): LitHtml.TemplateResult|null {
     switch (token.type) {
       case 'paragraph':
-        return html`<p>${this.renderChildTokens(token)}</p>`;
+        return html`<p class=${this.#customClassMapForToken('paragraph')}>${this.renderChildTokens(token)}</p>`;
       case 'list':
-        return html`<ul>${token.items.map(token => {
+        return html`<ul class=${this.#customClassMapForToken('list')}>${token.items.map(token => {
           return this.renderToken(token);
         })}</ul>`;
       case 'list_item':
-        return html`<li>${this.renderChildTokens(token)}</li>`;
+        return html`<li class=${this.#customClassMapForToken('list_item')}>${this.renderChildTokens(token)}</li>`;
       case 'text':
         return this.renderText(token);
       case 'codespan':
-        return html`<code>${this.unescape(token.text)}</code>`;
+        return html`<code class=${this.#customClassMapForToken('codespan')}>${this.unescape(token.text)}</code>`;
       case 'code':
         return this.renderCodeBlock(token);
       case 'space':
         return html``;
       case 'link':
-        return html`<devtools-markdown-link .data=${{
+        return html`<devtools-markdown-link
+        class=${this.#customClassMapForToken('link')}
+        .data=${{
         key:
           token.href, title: token.text,
         }
         }></devtools-markdown-link>`;
       case 'image':
-        return html`<devtools-markdown-image .data=${{
+        return html`<devtools-markdown-image
+        class=${this.#customClassMapForToken('image')}
+        .data=${{
         key:
           token.href, title: token.text,
         }
@@ -160,9 +238,9 @@ export class MarkdownLitRenderer {
       case 'heading':
         return this.renderHeading(token);
       case 'strong':
-        return html`<strong>${this.renderText(token)}</strong>`;
+        return html`<strong class=${this.#customClassMapForToken('strong')}>${this.renderText(token)}</strong>`;
       case 'em':
-        return html`<em>${this.renderText(token)}</em>`;
+        return html`<em class=${this.#customClassMapForToken('em')}>${this.renderText(token)}</em>`;
       default:
         return null;
     }

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

@@ -8,6 +8,21 @@
   --code-background-color: var(--sys-color-surface4);
 }
 
+@keyframes typing {
+  from { width: 0; }
+  to { width: 100%; }
+}
+
+.animating {
+  overflow: hidden;
+  white-space: nowrap;
+  animation: typing 0.4s steps(40, end);
+}
+
+.pending {
+  display: none !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .message {
   line-height: 18px;
   font-size: 12px;

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/settings/SettingCheckbox.ts

@@ -69,7 +69,8 @@ export class SettingCheckbox extends HTMLElement {
     }
 
     const learnMore = this.#setting.learnMore();
-    if (learnMore) {
+    if (learnMore && learnMore.url) {
+      const url = learnMore.url;
       const data: Buttons.Button.ButtonData = {
         iconName: 'help',
         variant: Buttons.Button.Variant.ICON,
@@ -78,7 +79,7 @@ export class SettingCheckbox extends HTMLElement {
         title: i18nString(UIStrings.learnMore),
       };
       const handleClick = (event: MouseEvent): void => {
-        Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(learnMore.url);
+        Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(url);
         event.consume();
       };
       return html`<devtools-button