chrome-devtools-frontend 1.0.950850 → 1.0.952284

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

@@ -104,7 +104,7 @@ export class RenderCoordinator extends EventTarget {
 
   done(): Promise<void> {
     if (this.#pendingWorkFrames.length === 0) {
-      this.logIfEnabled('[Queue empty]');
+      this.#logIfEnabled('[Queue empty]');
       return Promise.resolve();
     }
     return new Promise(resolve => this.addEventListener('renderqueueempty', () => resolve(), {once: true}));
@@ -118,10 +118,10 @@ export class RenderCoordinator extends EventTarget {
       if (!callback) {
         throw new Error('Read called with label but no callback');
       }
-      return this.enqueueHandler<T>(callback, ACTION.READ, labelOrCallback);
+      return this.#enqueueHandler<T>(callback, ACTION.READ, labelOrCallback);
     }
 
-    return this.enqueueHandler<T>(labelOrCallback, ACTION.READ, UNNAMED_READ);
+    return this.#enqueueHandler<T>(labelOrCallback, ACTION.READ, UNNAMED_READ);
   }
 
   async write<T extends unknown>(callback: CoordinatorCallback): Promise<T>;
@@ -132,10 +132,10 @@ export class RenderCoordinator extends EventTarget {
       if (!callback) {
         throw new Error('Write called with label but no callback');
       }
-      return this.enqueueHandler<T>(callback, ACTION.WRITE, labelOrCallback);
+      return this.#enqueueHandler<T>(callback, ACTION.WRITE, labelOrCallback);
     }
 
-    return this.enqueueHandler<T>(labelOrCallback, ACTION.WRITE, UNNAMED_WRITE);
+    return this.#enqueueHandler<T>(labelOrCallback, ACTION.WRITE, UNNAMED_WRITE);
   }
 
   takeRecords(): CoordinatorLogEntry[] {
@@ -158,13 +158,13 @@ export class RenderCoordinator extends EventTarget {
       if (!callback) {
         throw new Error('Scroll called with label but no callback');
       }
-      return this.enqueueHandler<T>(callback, ACTION.READ, labelOrCallback);
+      return this.#enqueueHandler<T>(callback, ACTION.READ, labelOrCallback);
     }
 
-    return this.enqueueHandler<T>(labelOrCallback, ACTION.READ, UNNAMED_SCROLL);
+    return this.#enqueueHandler<T>(labelOrCallback, ACTION.READ, UNNAMED_SCROLL);
   }
 
-  private enqueueHandler<T = unknown>(callback: CoordinatorCallback, action: ACTION, label = ''): Promise<T> {
+  #enqueueHandler<T = unknown>(callback: CoordinatorCallback, action: ACTION, label = ''): Promise<T> {
     this.#labels.set(callback, `${action === ACTION.READ ? '[Read]' : '[Write]'}: ${label}`);
 
     if (this.#pendingWorkFrames.length === 0) {
@@ -197,11 +197,11 @@ export class RenderCoordinator extends EventTarget {
       this.#rejectors.set(callback, reject);
     });
 
-    this.scheduleWork();
+    this.#scheduleWork();
     return resolverPromise as Promise<T>;
   }
 
-  private async handleWork(handler: CoordinatorCallback): Promise<void> {
+  async #handleWork(handler: CoordinatorCallback): Promise<void> {
     const data = await handler.call(undefined);
     const resolver = this.#resolvers.get(handler);
     if (!resolver) {
@@ -213,7 +213,7 @@ export class RenderCoordinator extends EventTarget {
     this.#rejectors.delete(handler);
   }
 
-  private scheduleWork(): void {
+  #scheduleWork(): void {
     const hasScheduledWork = this.#scheduledWorkId !== 0;
     if (hasScheduledWork) {
       return;
@@ -230,13 +230,13 @@ export class RenderCoordinator extends EventTarget {
         this.dispatchEvent(new RenderCoordinatorQueueEmptyEvent());
         window.dispatchEvent(new RenderCoordinatorQueueEmptyEvent());
 
-        this.logIfEnabled('[Queue empty]');
+        this.#logIfEnabled('[Queue empty]');
         this.#scheduledWorkId = 0;
         return;
       }
 
       this.dispatchEvent(new RenderCoordinatorNewFrameEvent());
-      this.logIfEnabled('[New frame]');
+      this.#logIfEnabled('[New frame]');
 
       const frame = this.#pendingWorkFrames.shift();
       if (!frame) {
@@ -247,8 +247,8 @@ export class RenderCoordinator extends EventTarget {
       // to proceed together.
       const readers: Promise<unknown>[] = [];
       for (const reader of frame.readers) {
-        this.logIfEnabled(this.#labels.get(reader));
-        readers.push(this.handleWork(reader));
+        this.#logIfEnabled(this.#labels.get(reader));
+        readers.push(this.#handleWork(reader));
       }
 
       // Wait for them all to be done.
@@ -262,14 +262,14 @@ export class RenderCoordinator extends EventTarget {
           }),
         ]);
       } catch (err) {
-        this.rejectAll(frame.readers, err);
+        this.#rejectAll(frame.readers, err);
       }
 
       // Next do all the writers as a block.
       const writers: Promise<unknown>[] = [];
       for (const writer of frame.writers) {
-        this.logIfEnabled(this.#labels.get(writer));
-        writers.push(this.handleWork(writer));
+        this.#logIfEnabled(this.#labels.get(writer));
+        writers.push(this.#handleWork(writer));
       }
 
       // And wait for them to be done, too.
@@ -283,18 +283,18 @@ export class RenderCoordinator extends EventTarget {
           }),
         ]);
       } catch (err) {
-        this.rejectAll(frame.writers, err);
+        this.#rejectAll(frame.writers, err);
       }
 
       // Since there may have been more work requested in
       // the callback of a reader / writer, we attempt to schedule
       // it at this point.
       this.#scheduledWorkId = 0;
-      this.scheduleWork();
+      this.#scheduleWork();
     });
   }
 
-  private rejectAll(handlers: CoordinatorCallback[], error: Error): void {
+  #rejectAll(handlers: CoordinatorCallback[], error: Error): void {
     for (const handler of handlers) {
       const rejector = this.#rejectors.get(handler);
       if (!rejector) {
@@ -308,7 +308,7 @@ export class RenderCoordinator extends EventTarget {
     }
   }
 
-  private logIfEnabled(value: string|undefined): void {
+  #logIfEnabled(value: string|undefined): void {
     if (!this.observe || !value) {
       return;
     }

package/front_end/ui/components/report_view/ReportView.ts

@@ -42,15 +42,15 @@ export class Report extends HTMLElement {
 
   set data({reportTitle}: ReportData) {
     this.#reportTitle = reportTitle;
-    this.render();
+    this.#render();
   }
 
   connectedCallback(): void {
     this.#shadow.adoptedStyleSheets = [reportStyles];
-    this.render();
+    this.#render();
   }
 
-  private render(): void {
+  #render(): void {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     LitHtml.render(LitHtml.html`
@@ -69,19 +69,19 @@ export interface ReportSectionData {
 
 export class ReportSection extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-report-section`;
-  private readonly shadow = this.attachShadow({mode: 'open'});
+  readonly #shadow = this.attachShadow({mode: 'open'});
   connectedCallback(): void {
-    this.shadow.adoptedStyleSheets = [reportSectionStyles];
-    this.render();
+    this.#shadow.adoptedStyleSheets = [reportSectionStyles];
+    this.#render();
   }
-  private render(): void {
+  #render(): void {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     LitHtml.render(LitHtml.html`
       <div class="section">
         <slot></slot>
       </div>
-    `, this.shadow, {host: this});
+    `, this.#shadow, {host: this});
     // clang-format on
   }
 }
@@ -92,10 +92,10 @@ export class ReportSectionHeader extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
   connectedCallback(): void {
     this.#shadow.adoptedStyleSheets = [reportSectionHeaderStyles];
-    this.render();
+    this.#render();
   }
 
-  private render(): void {
+  #render(): void {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     LitHtml.render(LitHtml.html`
@@ -113,10 +113,10 @@ export class ReportSectionDivider extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
   connectedCallback(): void {
     this.#shadow.adoptedStyleSheets = [reportSectionDividerStyles];
-    this.render();
+    this.#render();
   }
 
-  private render(): void {
+  #render(): void {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     LitHtml.render(LitHtml.html`
@@ -133,10 +133,10 @@ export class ReportKey extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
   connectedCallback(): void {
     this.#shadow.adoptedStyleSheets = [reportKeyStyles];
-    this.render();
+    this.#render();
   }
 
-  private render(): void {
+  #render(): void {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     LitHtml.render(LitHtml.html`
@@ -152,10 +152,10 @@ export class ReportValue extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
   connectedCallback(): void {
     this.#shadow.adoptedStyleSheets = [reportValueStyles];
-    this.render();
+    this.#render();
   }
 
-  private render(): void {
+  #render(): void {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     LitHtml.render(LitHtml.html`

package/front_end/ui/components/request_link_icon/RequestLinkIcon.ts

@@ -84,16 +84,16 @@ export class RequestLinkIcon extends HTMLElement {
       this.#reveal = data.revealOverride;
     }
     if (!this.#request && data.affectedRequest) {
-      this.#requestResolvedPromise = this.resolveRequest(data.affectedRequest.requestId);
+      this.#requestResolvedPromise = this.#resolveRequest(data.affectedRequest.requestId);
     }
-    this.render();
+    this.#render();
   }
 
   connectedCallback(): void {
     this.#shadow.adoptedStyleSheets = [requestLinkIconStyles];
   }
 
-  private resolveRequest(requestId: Protocol.Network.RequestId): Promise<void> {
+  #resolveRequest(requestId: Protocol.Network.RequestId): Promise<void> {
     if (!this.#requestResolver) {
       throw new Error('A `RequestResolver` must be provided if an `affectedRequest` is provided.');
     }
@@ -120,7 +120,7 @@ export class RequestLinkIcon extends HTMLElement {
     };
   }
 
-  private iconColor(): string {
+  #iconColor(): string {
     if (!this.#request) {
       return '--issue-color-yellow';
     }
@@ -130,7 +130,7 @@ export class RequestLinkIcon extends HTMLElement {
   iconData(): IconButton.Icon.IconData {
     return {
       iconName: 'network_panel_icon',
-      color: `var(${this.iconColor()})`,
+      color: `var(${this.#iconColor()})`,
       width: '16px',
       height: '16px',
     };
@@ -156,25 +156,25 @@ export class RequestLinkIcon extends HTMLElement {
     this.#additionalOnClickAction?.();
   }
 
-  private getTooltip(): Platform.UIString.LocalizedString {
+  #getTooltip(): Platform.UIString.LocalizedString {
     if (this.#request) {
       return i18nString(UIStrings.clickToShowRequestInTheNetwork, {url: this.#request.url()});
     }
     return i18nString(UIStrings.requestUnavailableInTheNetwork);
   }
 
-  private getUrlForDisplaying(): string|undefined {
+  #getUrlForDisplaying(): string|undefined {
     if (!this.#request) {
       return this.#affectedRequest?.url;
     }
     return this.#request.url();
   }
 
-  private maybeRenderURL(): LitHtml.TemplateResult|{} {
+  #maybeRenderURL(): LitHtml.TemplateResult|{} {
     if (!this.#displayURL) {
       return LitHtml.nothing;
     }
-    const url = this.getUrlForDisplaying();
+    const url = this.#getUrlForDisplaying();
     if (!url) {
       return LitHtml.nothing;
     }
@@ -182,26 +182,26 @@ export class RequestLinkIcon extends HTMLElement {
     return LitHtml.html`<span aria-label=${i18nString(UIStrings.shortenedURL)} title=${url}>${filename}</span>`;
   }
 
-  private render(): Promise<void> {
+  #render(): Promise<void> {
     return coordinator.write(() => {
       // clang-format off
       LitHtml.render(LitHtml.html`
-        ${LitHtml.Directives.until(this.#requestResolvedPromise.then(() => this.renderComponent()), this.renderComponent())}
+        ${LitHtml.Directives.until(this.#requestResolvedPromise.then(() => this.#renderComponent()), this.#renderComponent())}
       `,
       this.#shadow, {host: this});
       // clang-format on
     });
   }
 
-  private renderComponent(): LitHtml.TemplateResult {
+  #renderComponent(): LitHtml.TemplateResult {
     // clang-format off
     return LitHtml.html`
       <span class=${LitHtml.Directives.classMap({'link': Boolean(this.#request)})}
             tabindex="0"
             @click=${this.handleClick}>
         <${IconButton.Icon.Icon.litTagName} .data=${this.iconData() as IconButton.Icon.IconData}
-          title=${this.getTooltip()}></${IconButton.Icon.Icon.litTagName}>
-        ${this.maybeRenderURL()}
+          title=${this.#getTooltip()}></${IconButton.Icon.Icon.litTagName}>
+        ${this.#maybeRenderURL()}
       </span>`;
     // clang-format on
   }

package/front_end/ui/components/settings/SettingCheckbox.ts

@@ -41,12 +41,12 @@ export class SettingCheckbox extends HTMLElement {
     this.#disabled = Boolean(data.disabled);
 
     this.#changeListenerDescriptor = this.#setting.addChangeListener(() => {
-      this.render();
+      this.#render();
     });
-    this.render();
+    this.#render();
   }
 
-  private render(): void {
+  #render(): void {
     if (!this.#setting) {
       throw new Error('No "Setting" object provided for rendering');
     }
@@ -56,13 +56,13 @@ export class SettingCheckbox extends HTMLElement {
       <p>
         <label>
           <input type="checkbox" ?checked=${this.#setting.get()} ?disabled=${this.#disabled} @change=${
-            this.checkboxChanged} aria-label=${this.#setting.title()} /> ${this.#setting.title()}
+            this.#checkboxChanged} aria-label=${this.#setting.title()} /> ${this.#setting.title()}
         </label>
       </p>`,
         this.#shadow, {host: this});
   }
 
-  private checkboxChanged(e: Event): void {
+  #checkboxChanged(e: Event): void {
     this.#setting?.set((e.target as HTMLInputElement).checked);
   }
 }

package/front_end/ui/components/survey_link/SurveyLink.ts

@@ -69,10 +69,10 @@ export class SurveyLink extends HTMLElement {
     this.#canShowSurvey = data.canShowSurvey;
     this.#showSurvey = data.showSurvey;
 
-    this.checkSurvey();
+    this.#checkSurvey();
   }
 
-  private checkSurvey(): void {
+  #checkSurvey(): void {
     this.#state = State.Checking;
     this.#canShowSurvey(this.#trigger, ({canShowSurvey}) => {
       if (!canShowSurvey) {
@@ -80,24 +80,24 @@ export class SurveyLink extends HTMLElement {
       } else {
         this.#state = State.ShowLink;
       }
-      this.render();
+      this.#render();
     });
   }
 
-  private sendSurvey(): void {
+  #sendSurvey(): void {
     this.#state = State.Sending;
-    this.render();
+    this.#render();
     this.#showSurvey(this.#trigger, ({surveyShown}) => {
       if (!surveyShown) {
         this.#state = State.Failed;
       } else {
         this.#state = State.SurveyShown;
       }
-      this.render();
+      this.#render();
     });
   }
 
-  private render(): void {
+  #render(): void {
     if (this.#state === State.Checking || this.#state === State.DontShowLink) {
       return;
     }
@@ -123,7 +123,7 @@ export class SurveyLink extends HTMLElement {
     // clang-format off
     // eslint-disable-next-line rulesdir/ban_style_tags_in_lit_html
     const output = LitHtml.html`
-      <button class="link ${linkState}" tabindex=${ariaDisabled ? '-1' : '0'} .disabled=${ariaDisabled} aria-disabled=${ariaDisabled} @click=${this.sendSurvey}>
+      <button class="link ${linkState}" tabindex=${ariaDisabled ? '-1' : '0'} .disabled=${ariaDisabled} aria-disabled=${ariaDisabled} @click=${this.#sendSurvey}>
         <${IconButton.Icon.Icon.litTagName} class="link-icon" .data=${{iconName: 'feedback_button_icon', color: 'var(--color-link)', width: 'var(--issue-link-icon-size, 16px)', height: 'var(--issue-link-icon-size, 16px)'} as IconButton.Icon.IconData}></${IconButton.Icon.Icon.litTagName}><!--
       -->${linkText}
       </button>

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

@@ -46,7 +46,7 @@ export class TextEditor extends HTMLElement {
     this.#shadow.adoptedStyleSheets = [CodeHighlighter.Style.default];
   }
 
-  private createEditor(): CodeMirror.EditorView {
+  #createEditor(): CodeMirror.EditorView {
     this.#activeEditor = new CodeMirror.EditorView({
       state: this.state,
       parent: this.#shadow,
@@ -54,7 +54,7 @@ export class TextEditor extends HTMLElement {
       dispatch: (tr: CodeMirror.Transaction): void => {
         this.editor.update([tr]);
         if (tr.reconfigured) {
-          this.ensureSettingListeners();
+          this.#ensureSettingListeners();
         }
       },
     });
@@ -64,13 +64,13 @@ export class TextEditor extends HTMLElement {
       this.#lastScrollPos.left = (event.target as HTMLElement).scrollLeft;
       this.#lastScrollPos.top = (event.target as HTMLElement).scrollTop;
     });
-    this.ensureSettingListeners();
-    this.startObservingResize();
+    this.#ensureSettingListeners();
+    this.#startObservingResize();
     return this.#activeEditor;
   }
 
   get editor(): CodeMirror.EditorView {
-    return this.#activeEditor || this.createEditor();
+    return this.#activeEditor || this.#createEditor();
   }
 
   dispatch(spec: CodeMirror.TransactionSpec): void {
@@ -97,7 +97,7 @@ export class TextEditor extends HTMLElement {
 
   connectedCallback(): void {
     if (!this.#activeEditor) {
-      this.createEditor();
+      this.#createEditor();
     }
   }
 
@@ -108,7 +108,7 @@ export class TextEditor extends HTMLElement {
       window.removeEventListener('resize', this.#resizeListener);
       this.#activeEditor.destroy();
       this.#activeEditor = undefined;
-      this.ensureSettingListeners();
+      this.#ensureSettingListeners();
     }
   }
 
@@ -118,7 +118,7 @@ export class TextEditor extends HTMLElement {
     }
   }
 
-  private ensureSettingListeners(): void {
+  #ensureSettingListeners(): void {
     const dynamicSettings = this.#activeEditor ? this.#activeEditor.state.facet(dynamicSetting) : DynamicSetting.none;
     if (dynamicSettings === this.#dynamicSettings) {
       return;
@@ -144,7 +144,7 @@ export class TextEditor extends HTMLElement {
     }
   }
 
-  private startObservingResize(): void {
+  #startObservingResize(): void {
     const devtoolsElement =
         WindowBoundsService.WindowBoundsService.WindowBoundsServiceImpl.instance().getDevToolsBoundingElement();
     if (devtoolsElement) {

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

@@ -8,6 +8,7 @@ export function cursorTooltip(
     source: (state: CodeMirror.EditorState, pos: number) => Promise<(() => CodeMirror.TooltipView)|null>,
     ): CodeMirror.Extension {
   const openTooltip = CodeMirror.StateEffect.define<() => CodeMirror.TooltipView>();
+  const closeTooltip = CodeMirror.StateEffect.define<null>();
 
   const state = CodeMirror.StateField.define<null|CodeMirror.Tooltip>({
     create() {
@@ -18,11 +19,14 @@ export function cursorTooltip(
         val = null;
       }
       if (val && !tr.changes.empty) {
-        val = {pos: tr.changes.mapPos(val.pos), create: val.create, above: true};
+        const newPos = tr.changes.mapPos(val.pos, -1, CodeMirror.MapMode.TrackDel);
+        val = newPos === null ? null : {pos: newPos, create: val.create, above: true};
       }
       for (const effect of tr.effects) {
         if (effect.is(openTooltip)) {
           val = {pos: tr.state.selection.main.from, create: effect.value, above: true};
+        } else if (effect.is(closeTooltip)) {
+          val = null;
         }
       }
       return val;
@@ -60,6 +64,8 @@ export function cursorTooltip(
             }
           } else if (tooltip) {
             view.dispatch({effects: openTooltip.of(tooltip)});
+          } else {
+            view.dispatch({effects: closeTooltip.of(null)});
           }
         });
       }

package/front_end/ui/components/text_prompt/TextPrompt.ts

@@ -39,7 +39,7 @@ export class TextPrompt extends HTMLElement {
     this.#ariaLabelText = data.ariaLabel;
     this.#prefixText = data.prefix;
     this.#suggestionText = data.suggestion;
-    this.render();
+    this.#render();
   }
 
   get data(): TextPromptData {
@@ -51,10 +51,10 @@ export class TextPrompt extends HTMLElement {
   }
 
   focus(): void {
-    this.input().focus();
+    this.#input().focus();
   }
 
-  private input(): HTMLInputElement {
+  #input(): HTMLInputElement {
     const inputElement = this.#shadow.querySelector<HTMLInputElement>('input');
     if (!inputElement) {
       throw new Error('Expected an input element!');
@@ -63,12 +63,12 @@ export class TextPrompt extends HTMLElement {
   }
 
   moveCaretToEndOfInput(): void {
-    this.setSelectedRange(this.text().length, this.text().length);
+    this.setSelectedRange(this.#text().length, this.#text().length);
   }
 
   onInput(): void {
-    this.suggestion().textContent = this.text();
-    this.dispatchEvent(new PromptInputEvent(this.text().trim()));
+    this.#suggestion().textContent = this.#text();
+    this.dispatchEvent(new PromptInputEvent(this.#text().trim()));
   }
 
   onKeyDown(event: KeyboardEvent): void {
@@ -81,37 +81,37 @@ export class TextPrompt extends HTMLElement {
     if (startIndex < 0) {
       throw new RangeError('Selected range start must be a nonnegative integer');
     }
-    const textContentLength = this.text().length;
+    const textContentLength = this.#text().length;
     if (endIndex > textContentLength) {
       endIndex = textContentLength;
     }
     if (endIndex < startIndex) {
       endIndex = startIndex;
     }
-    this.input().setSelectionRange(startIndex, endIndex);
+    this.#input().setSelectionRange(startIndex, endIndex);
   }
 
   setPrefix(prefix: string): void {
     this.#prefixText = prefix;
-    this.render();
+    this.#render();
   }
 
   setSuggestion(suggestion: string): void {
     this.#suggestionText = suggestion;
-    this.render();
+    this.#render();
   }
 
   setText(text: string): void {
-    this.input().value = text;
-    this.suggestion().textContent = this.text();
+    this.#input().value = text;
+    this.#suggestion().textContent = this.#text();
 
-    if (this.input().hasFocus()) {
+    if (this.#input().hasFocus()) {
       this.moveCaretToEndOfInput();
-      this.input().scrollIntoView();
+      this.#input().scrollIntoView();
     }
   }
 
-  private suggestion(): HTMLSpanElement {
+  #suggestion(): HTMLSpanElement {
     const suggestionElement = this.#shadow.querySelector<HTMLSpanElement>('.suggestion');
     if (!suggestionElement) {
       throw new Error('Expected an suggestion element!');
@@ -119,11 +119,11 @@ export class TextPrompt extends HTMLElement {
     return suggestionElement;
   }
 
-  private text(): string {
-    return this.input().value || '';
+  #text(): string {
+    return this.#input().value || '';
   }
 
-  private render(): void {
+  #render(): void {
     const output = LitHtml.html`
       <span class="prefix">${this.#prefixText} </span>
       <span class="text-prompt-input"><input aria-label=${this.#ariaLabelText} spellcheck="false" @input=${