chrome-devtools-frontend 1.0.950971 → 1.0.952403

package/front_end/ui/components/linear_memory_inspector/LinearMemoryViewer.ts

@@ -35,14 +35,16 @@ export class ResizeEvent extends Event {
     this.data = numBytesPerPage;
   }
 }
+
+const BYTE_GROUP_MARGIN = 8;
+const BYTE_GROUP_SIZE = 4;
+
 export class LinearMemoryViewer extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-linear-memory-inspector-viewer`;
 
-  private static readonly BYTE_GROUP_MARGIN = 8;
-  private static readonly BYTE_GROUP_SIZE = 4;
   readonly #shadow = this.attachShadow({mode: 'open'});
 
-  readonly #resizeObserver = new ResizeObserver(() => this.resize());
+  readonly #resizeObserver = new ResizeObserver(() => this.#resize());
   #isObservingResize = false;
 
   #memory = new Uint8Array();
@@ -50,7 +52,7 @@ export class LinearMemoryViewer extends HTMLElement {
   #memoryOffset = 0;
 
   #numRows = 1;
-  #numBytesInRow = LinearMemoryViewer.BYTE_GROUP_SIZE;
+  #numBytesInRow = BYTE_GROUP_SIZE;
 
   #focusOnByte = true;
 
@@ -69,11 +71,11 @@ export class LinearMemoryViewer extends HTMLElement {
     this.#address = data.address;
     this.#memoryOffset = data.memoryOffset;
     this.#focusOnByte = data.focus;
-    this.update();
+    this.#update();
   }
 
   connectedCallback(): void {
-    ComponentHelpers.SetCSSProperty.set(this, '--byte-group-margin', `${LinearMemoryViewer.BYTE_GROUP_MARGIN}px`);
+    ComponentHelpers.SetCSSProperty.set(this, '--byte-group-margin', `${BYTE_GROUP_MARGIN}px`);
     this.#shadow.adoptedStyleSheets = [linearMemoryViewerStyles];
   }
 
@@ -82,14 +84,14 @@ export class LinearMemoryViewer extends HTMLElement {
     this.#resizeObserver.disconnect();
   }
 
-  private update(): void {
-    this.updateDimensions();
-    this.render();
-    this.focusOnView();
-    this.engageResizeObserver();
+  #update(): void {
+    this.#updateDimensions();
+    this.#render();
+    this.#focusOnView();
+    this.#engageResizeObserver();
   }
 
-  private focusOnView(): void {
+  #focusOnView(): void {
     if (this.#focusOnByte) {
       const view = this.#shadow.querySelector<HTMLDivElement>('.view');
       if (view) {
@@ -98,15 +100,15 @@ export class LinearMemoryViewer extends HTMLElement {
     }
   }
 
-  private resize(): void {
-    this.update();
+  #resize(): void {
+    this.#update();
     this.dispatchEvent(new ResizeEvent(this.#numBytesInRow * this.#numRows));
   }
 
   /** Recomputes the number of rows and (byte) columns that fit into the current view. */
-  private updateDimensions(): void {
+  #updateDimensions(): void {
     if (this.clientWidth === 0 || this.clientHeight === 0 || !this.shadowRoot) {
-      this.#numBytesInRow = LinearMemoryViewer.BYTE_GROUP_SIZE;
+      this.#numBytesInRow = BYTE_GROUP_SIZE;
       this.#numRows = 1;
       return;
     }
@@ -126,7 +128,7 @@ export class LinearMemoryViewer extends HTMLElement {
     const rowElement = this.shadowRoot.querySelector('.row');
 
     if (!firstByteCell || !textCell || !divider || !rowElement) {
-      this.#numBytesInRow = LinearMemoryViewer.BYTE_GROUP_SIZE;
+      this.#numBytesInRow = BYTE_GROUP_SIZE;
       this.#numRows = 1;
       return;
     }
@@ -134,8 +136,7 @@ export class LinearMemoryViewer extends HTMLElement {
     // Calculate the width required for each (unsplittable) group of bytes.
     const byteCellWidth = firstByteCell.getBoundingClientRect().width;
     const textCellWidth = textCell.getBoundingClientRect().width;
-    const groupWidth =
-        LinearMemoryViewer.BYTE_GROUP_SIZE * (byteCellWidth + textCellWidth) + LinearMemoryViewer.BYTE_GROUP_MARGIN;
+    const groupWidth = BYTE_GROUP_SIZE * (byteCellWidth + textCellWidth) + BYTE_GROUP_MARGIN;
 
     // Calculate the width to fill.
     const dividerWidth = divider.getBoundingClientRect().width;
@@ -144,16 +145,16 @@ export class LinearMemoryViewer extends HTMLElement {
     const widthToFill = this.clientWidth - 1 -
         (firstByteCell.getBoundingClientRect().left - this.getBoundingClientRect().left) - dividerWidth;
     if (widthToFill < groupWidth) {
-      this.#numBytesInRow = LinearMemoryViewer.BYTE_GROUP_SIZE;
+      this.#numBytesInRow = BYTE_GROUP_SIZE;
       this.#numRows = 1;
       return;
     }
 
-    this.#numBytesInRow = Math.floor(widthToFill / groupWidth) * LinearMemoryViewer.BYTE_GROUP_SIZE;
+    this.#numBytesInRow = Math.floor(widthToFill / groupWidth) * BYTE_GROUP_SIZE;
     this.#numRows = Math.floor(this.clientHeight / rowElement.clientHeight);
   }
 
-  private engageResizeObserver(): void {
+  #engageResizeObserver(): void {
     if (!this.#resizeObserver || this.#isObservingResize) {
       return;
     }
@@ -162,17 +163,17 @@ export class LinearMemoryViewer extends HTMLElement {
     this.#isObservingResize = true;
   }
 
-  private render(): void {
+  #render(): void {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     render(html`
-      <div class="view" tabindex="0" @keydown=${this.onKeyDown}>
-          ${this.renderView()}
+      <div class="view" tabindex="0" @keydown=${this.#onKeyDown}>
+          ${this.#renderView()}
       </div>
       `, this.#shadow, {host: this});
   }
 
-  private onKeyDown(event: Event): void {
+  #onKeyDown(event: Event): void {
     const keyboardEvent = event as KeyboardEvent;
     let newAddress = undefined;
     if (keyboardEvent.code === 'ArrowUp') {
@@ -195,15 +196,15 @@ export class LinearMemoryViewer extends HTMLElement {
     }
   }
 
-  private renderView(): LitHtml.TemplateResult {
+  #renderView(): LitHtml.TemplateResult {
     const itemTemplates = [];
     for (let i = 0; i < this.#numRows; ++i) {
-      itemTemplates.push(this.renderRow(i));
+      itemTemplates.push(this.#renderRow(i));
     }
     return html`${itemTemplates}`;
   }
 
-  private renderRow(row: number): LitHtml.TemplateResult {
+  #renderRow(row: number): LitHtml.TemplateResult {
     const {startIndex, endIndex} = {startIndex: row * this.#numBytesInRow, endIndex: (row + 1) * this.#numBytesInRow};
 
     const classMap = {
@@ -214,18 +215,18 @@ export class LinearMemoryViewer extends HTMLElement {
     <div class="row">
       <span class=${LitHtml.Directives.classMap(classMap)}>${toHexString({number: startIndex + this.#memoryOffset, pad: 8, prefix: false})}</span>
       <span class="divider"></span>
-      ${this.renderByteValues(startIndex, endIndex)}
+      ${this.#renderByteValues(startIndex, endIndex)}
       <span class="divider"></span>
-      ${this.renderCharacterValues(startIndex, endIndex)}
+      ${this.#renderCharacterValues(startIndex, endIndex)}
     </div>
     `;
   }
 
-  private renderByteValues(startIndex: number, endIndex: number): LitHtml.TemplateResult {
+  #renderByteValues(startIndex: number, endIndex: number): LitHtml.TemplateResult {
     const cells = [];
     for (let i = startIndex; i < endIndex; ++i) {
       // Add margin after each group of bytes of size byteGroupSize.
-      const addMargin = i !== startIndex && (i - startIndex) % LinearMemoryViewer.BYTE_GROUP_SIZE === 0;
+      const addMargin = i !== startIndex && (i - startIndex) % BYTE_GROUP_SIZE === 0;
       const selected = i === this.#address - this.#memoryOffset;
       const classMap = {
         'cell': true,
@@ -236,13 +237,13 @@ export class LinearMemoryViewer extends HTMLElement {
       const isSelectableCell = i < this.#memory.length;
       const byteValue = isSelectableCell ? html`${toHexString({number: this.#memory[i], pad: 2, prefix: false})}` : '';
       const actualIndex = i + this.#memoryOffset;
-      const onSelectedByte = isSelectableCell ? this.onSelectedByte.bind(this, actualIndex) : '';
+      const onSelectedByte = isSelectableCell ? this.#onSelectedByte.bind(this, actualIndex) : '';
       cells.push(html`<span class=${LitHtml.Directives.classMap(classMap)} @click=${onSelectedByte}>${byteValue}</span>`);
     }
     return html`${cells}`;
   }
 
-  private renderCharacterValues(startIndex: number, endIndex: number): LitHtml.TemplateResult {
+  #renderCharacterValues(startIndex: number, endIndex: number): LitHtml.TemplateResult {
     const cells = [];
     for (let i = startIndex; i < endIndex; ++i) {
       const classMap = {
@@ -251,21 +252,21 @@ export class LinearMemoryViewer extends HTMLElement {
         selected: this.#address - this.#memoryOffset === i,
       };
       const isSelectableCell = i < this.#memory.length;
-      const value = isSelectableCell ? html`${this.toAscii(this.#memory[i])}` : '';
-      const onSelectedByte = isSelectableCell ? this.onSelectedByte.bind(this, i + this.#memoryOffset) : '';
+      const value = isSelectableCell ? html`${this.#toAscii(this.#memory[i])}` : '';
+      const onSelectedByte = isSelectableCell ? this.#onSelectedByte.bind(this, i + this.#memoryOffset) : '';
       cells.push(html`<span class=${LitHtml.Directives.classMap(classMap)} @click=${onSelectedByte}>${value}</span>`);
     }
     return html`${cells}`;
   }
 
-  private toAscii(byte: number): string {
+  #toAscii(byte: number): string {
     if (byte >= 20 && byte <= 0x7F) {
       return String.fromCharCode(byte);
     }
     return '.';
   }
 
-  private onSelectedByte(index: number): void {
+  #onSelectedByte(index: number): void {
     this.dispatchEvent(new ByteSelectedEvent(index));
   }
 }

package/front_end/ui/components/linear_memory_inspector/ValueInterpreterDisplay.ts

@@ -108,33 +108,33 @@ export class ValueInterpreterDisplay extends HTMLElement {
       });
     }
 
-    this.render();
+    this.#render();
   }
 
-  private render(): void {
+  #render(): void {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     render(html`
       <div class="value-types">
-        ${SORTED_VALUE_TYPES.map(type => this.#valueTypes.has(type) ? this.showValue(type) : '')}
+        ${SORTED_VALUE_TYPES.map(type => this.#valueTypes.has(type) ? this.#showValue(type) : '')}
       </div>
     `, this.#shadow, {host: this},
     );
     // clang-format on
   }
 
-  private showValue(type: ValueType): LitHtml.TemplateResult {
+  #showValue(type: ValueType): LitHtml.TemplateResult {
     if (isNumber(type)) {
-      return this.renderNumberValues(type);
+      return this.#renderNumberValues(type);
     }
     if (isPointer(type)) {
-      return this.renderPointerValue(type);
+      return this.#renderPointerValue(type);
     }
     throw new Error(`No known way to format ${type}`);
   }
 
-  private renderPointerValue(type: ValueType): LitHtml.TemplateResult {
-    const unsignedValue = this.parse({type, signed: false});
+  #renderPointerValue(type: ValueType): LitHtml.TemplateResult {
+    const unsignedValue = this.#parse({type, signed: false});
     const address = getPointerAddress(type, this.#buffer, this.#endianness);
     const jumpDisabled = Number.isNaN(address) || BigInt(address) >= BigInt(this.#memoryLength);
     const buttonTitle = jumpDisabled ? i18nString(UIStrings.addressOutOfRange) : i18nString(UIStrings.jumpToPointer);
@@ -149,7 +149,7 @@ export class ValueInterpreterDisplay extends HTMLElement {
           ${
             html`
               <button class="jump-to-button" data-jump="true" title=${buttonTitle} ?disabled=${jumpDisabled}
-                @click=${this.onJumpToAddressClicked.bind(this, Number(address))}>
+                @click=${this.#onJumpToAddressClicked.bind(this, Number(address))}>
                 <${IconButton.Icon.Icon.litTagName} .data=${
                   {iconName: 'link_icon', color: iconColor, width: '14px'} as IconButton.Icon.IconWithName}>
                 </${IconButton.Icon.Icon.litTagName}>
@@ -160,11 +160,11 @@ export class ValueInterpreterDisplay extends HTMLElement {
     // clang-format on
   }
 
-  private onJumpToAddressClicked(address: number): void {
+  #onJumpToAddressClicked(address: number): void {
     this.dispatchEvent(new JumpToPointerAddressEvent(address));
   }
 
-  private renderNumberValues(type: ValueType): LitHtml.TemplateResult {
+  #renderNumberValues(type: ValueType): LitHtml.TemplateResult {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     return html`
@@ -174,7 +174,7 @@ export class ValueInterpreterDisplay extends HTMLElement {
           data-mode-settings="true"
           class="chrome-select"
           style="border: none; background-color: transparent; cursor: pointer; color: var(--color-text-secondary);"
-          @change=${this.onValueTypeModeChange.bind(this, type)}>
+          @change=${this.#onValueTypeModeChange.bind(this, type)}>
             ${VALUE_TYPE_MODE_LIST.filter(x => isValidMode(type, x)).map(mode => {
               return html`
                 <option value=${mode} .selected=${this.#valueTypeModeConfig.get(type) === mode}>${
@@ -183,14 +183,14 @@ export class ValueInterpreterDisplay extends HTMLElement {
             })}
         </select>
       </div>
-      ${this.renderSignedAndUnsigned(type)}
+      ${this.#renderSignedAndUnsigned(type)}
     `;
     // clang-format on
   }
 
-  private renderSignedAndUnsigned(type: ValueType): LitHtml.TemplateResult {
-    const unsignedValue = this.parse({type, signed: false});
-    const signedValue = this.parse({type, signed: true});
+  #renderSignedAndUnsigned(type: ValueType): LitHtml.TemplateResult {
+    const unsignedValue = this.#parse({type, signed: false});
+    const signedValue = this.#parse({type, signed: true});
     const mode = this.#valueTypeModeConfig.get(type);
     const showSignedAndUnsigned =
         signedValue !== unsignedValue && mode !== ValueTypeMode.Hexadecimal && mode !== ValueTypeMode.Octal;
@@ -224,14 +224,14 @@ export class ValueInterpreterDisplay extends HTMLElement {
     `;
   }
 
-  private onValueTypeModeChange(type: ValueType, event: Event): void {
+  #onValueTypeModeChange(type: ValueType, event: Event): void {
     event.preventDefault();
     const select = event.target as HTMLInputElement;
     const mode = select.value as ValueTypeMode;
     this.dispatchEvent(new ValueTypeModeChangedEvent(type, mode));
   }
 
-  private parse(data: {type: ValueType, signed?: boolean}): string {
+  #parse(data: {type: ValueType, signed?: boolean}): string {
     const mode = this.#valueTypeModeConfig.get(data.type);
     return format(
         {buffer: this.#buffer, type: data.type, endianness: this.#endianness, signed: data.signed || false, mode});

package/front_end/ui/components/linear_memory_inspector/ValueInterpreterSettings.ts

@@ -70,10 +70,10 @@ export class ValueInterpreterSettings extends HTMLElement {
 
   set data(data: ValueInterpreterSettingsData) {
     this.#valueTypes = data.valueTypes;
-    this.render();
+    this.#render();
   }
 
-  private render(): void {
+  #render(): void {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     render(html`
@@ -82,14 +82,14 @@ export class ValueInterpreterSettings extends HTMLElement {
         return html`
           <div class="value-types-selection">
             <span class="group">${valueTypeGroupToLocalizedString(group)}</span>
-            ${this.plotTypeSelections(group)}
+            ${this.#plotTypeSelections(group)}
           </div>
         `;})}
       </div>
       `, this.#shadow, {host: this});
   }
 
-  private plotTypeSelections(group: ValueTypeGroup): LitHtml.TemplateResult {
+  #plotTypeSelections(group: ValueTypeGroup): LitHtml.TemplateResult {
     const types = GROUP_TO_TYPES.get(group);
     if (!types) {
       throw new Error(`Unknown group ${group}`);
@@ -98,13 +98,13 @@ export class ValueInterpreterSettings extends HTMLElement {
       ${types.map(type => {
         return html`
           <label class="type-label" title=${valueTypeToLocalizedString(type)}>
-            <input data-input="true" type="checkbox" .checked=${this.#valueTypes.has(type)} @change=${(e: Event): void => this.onTypeToggle(type, e)}>
+            <input data-input="true" type="checkbox" .checked=${this.#valueTypes.has(type)} @change=${(e: Event): void => this.#onTypeToggle(type, e)}>
             <span data-title="true">${valueTypeToLocalizedString(type)}</span>
           </label>
      `;})}`;
   }
 
-  private onTypeToggle(type: ValueType, event: Event): void {
+  #onTypeToggle(type: ValueType, event: Event): void {
     const checkbox = event.target as HTMLInputElement;
     this.dispatchEvent(new TypeToggleEvent(type, checkbox.checked));
   }

package/front_end/ui/components/linkifier/LinkifierImpl.ts

@@ -45,14 +45,14 @@ export class Linkifier extends HTMLElement {
       throw new Error('Cannot construct a Linkifier without providing a valid string URL.');
     }
 
-    this.render();
+    this.#render();
   }
 
   connectedCallback(): void {
     this.#shadow.adoptedStyleSheets = [linkifierImplStyles];
   }
 
-  private onLinkActivation(event: Event): void {
+  #onLinkActivation(event: Event): void {
     event.preventDefault();
     const linkifierClickEvent = new LinkifierClick({
       url: this.#url,
@@ -62,12 +62,12 @@ export class Linkifier extends HTMLElement {
     this.dispatchEvent(linkifierClickEvent);
   }
 
-  private async render(): Promise<void> {
+  async #render(): Promise<void> {
     // Disabled until https://crbug.com/1079231 is fixed.
     await coordinator.write(() => {
       // clang-format off
       // eslint-disable-next-line rulesdir/ban_a_tags_in_lit_html
-      LitHtml.render(LitHtml.html`<a class="link" href=${this.#url} @click=${this.onLinkActivation}><slot>${LinkifierUtils.linkText(this.#url, this.#lineNumber)}</slot></a>`, this.#shadow, { host: this});
+      LitHtml.render(LitHtml.html`<a class="link" href=${this.#url} @click=${this.#onLinkActivation}><slot>${LinkifierUtils.linkText(this.#url, this.#lineNumber)}</slot></a>`, this.#shadow, { host: this});
       // clang-format on
     });
   }

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

@@ -40,10 +40,10 @@ export class MarkdownImage extends HTMLElement {
     const markdownImage = getMarkdownImage(key);
     this.#imageData = markdownImage;
     this.#imageTitle = title;
-    this.render();
+    this.#render();
   }
 
-  private getIconComponent(): LitHtml.TemplateResult {
+  #getIconComponent(): LitHtml.TemplateResult {
     if (!this.#imageData) {
       return LitHtml.html``;
     }
@@ -54,7 +54,7 @@ export class MarkdownImage extends HTMLElement {
     `;
   }
 
-  private getImageComponent(): LitHtml.TemplateResult {
+  #getImageComponent(): LitHtml.TemplateResult {
     if (!this.#imageData) {
       return LitHtml.html``;
     }
@@ -64,12 +64,12 @@ export class MarkdownImage extends HTMLElement {
     `;
   }
 
-  private render(): void {
+  #render(): void {
     if (!this.#imageData) {
       return;
     }
     const {isIcon} = this.#imageData;
-    const imageComponent = isIcon ? this.getIconComponent() : this.getImageComponent();
+    const imageComponent = isIcon ? this.#getIconComponent() : this.#getImageComponent();
     LitHtml.render(imageComponent, this.#shadow, {host: this});
   }
 }

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

@@ -36,10 +36,10 @@ export class MarkdownLink extends HTMLElement {
     const markdownLink = getMarkdownLink(key);
     this.#linkText = title;
     this.#linkUrl = markdownLink;
-    this.render();
+    this.#render();
   }
 
-  private render(): void {
+  #render(): void {
     // clang-format off
     const output = LitHtml.html`
       <x-link class="devtools-link" href=${this.#linkUrl}>${this.#linkText}</x-link>

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

@@ -32,14 +32,14 @@ export class MarkdownView extends HTMLElement {
 
   set data(data: MarkdownViewData) {
     this.#tokenData = data.tokens;
-    this.update();
+    this.#update();
   }
 
-  private update(): void {
-    this.render();
+  #update(): void {
+    this.#render();
   }
 
-  private render(): void {
+  #render(): void {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     render(html`
@@ -69,7 +69,6 @@ const renderChildTokens = (token: any): string => {
 const unescape = (text: string): string => {
   // Unescape will get rid of the escaping done by Marked to avoid double escaping due to escaping it also with Lit-html
   // Table taken from: front_end/third_party/marked/package/src/helpers.js
-  /** @type {Map<string,string>} */
   const escapeReplacements = new Map<string, string>([
     ['&amp;', '&'],
     ['&lt;', '<'],

package/front_end/ui/components/panel_feedback/FeedbackButton.ts

@@ -26,7 +26,7 @@ export interface FeedbackButtonData {
 export class FeedbackButton extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-feedback-button`;
   readonly #shadow = this.attachShadow({mode: 'open'});
-  readonly #boundRender = this.render.bind(this);
+  readonly #boundRender = this.#render.bind(this);
 
   #props: FeedbackButtonData = {
     feedbackUrl: '',
@@ -41,7 +41,7 @@ export class FeedbackButton extends HTMLElement {
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(this.#props.feedbackUrl);
   }
 
-  private render(): void {
+  #render(): void {
     if (!ComponentHelpers.ScheduledRender.isScheduledRender(this)) {
       throw new Error('FeedbackButton render was not scheduled');
     }

package/front_end/ui/components/panel_feedback/PanelFeedback.ts

@@ -42,7 +42,7 @@ export interface PanelFeedbackData {
 export class PanelFeedback extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-panel-feedback`;
   readonly #shadow = this.attachShadow({mode: 'open'});
-  readonly #boundRender = this.render.bind(this);
+  readonly #boundRender = this.#render.bind(this);
 
   #props: PanelFeedbackData = {
     feedbackUrl: '',
@@ -59,7 +59,7 @@ export class PanelFeedback extends HTMLElement {
     ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
   }
 
-  private render(): void {
+  #render(): void {
     if (!ComponentHelpers.ScheduledRender.isScheduledRender(this)) {
       throw new Error('PanelFeedback render was not scheduled');
     }

package/front_end/ui/components/panel_feedback/PreviewToggle.ts

@@ -50,17 +50,17 @@ export class PreviewToggle extends HTMLElement {
     this.#feedbackURL = data.feedbackURL;
     this.#experiment = data.experiment;
     this.#onChangeCallback = data.onChangeCallback;
-    this.render();
+    this.#render();
   }
 
-  private render(): void {
+  #render(): void {
     const checked = Root.Runtime.experiments.isEnabled(this.#experiment);
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     render(
       html`
       <div class="experiment-preview">
-        <input type="checkbox" ?checked=${checked} @change=${this.checkboxChanged} aria-label=${this.#name}/>
+        <input type="checkbox" ?checked=${checked} @change=${this.#checkboxChanged} aria-label=${this.#name}/>
         <${IconButton.Icon.Icon.litTagName} .data=${{
           iconName: 'ic_preview_feature',
           width: '16px',
@@ -81,7 +81,7 @@ export class PreviewToggle extends HTMLElement {
     // clang-format on
   }
 
-  private checkboxChanged(event: Event): void {
+  #checkboxChanged(event: Event): void {
     const checked = (event.target as HTMLInputElement).checked;
     Root.Runtime.experiments.setEnabled(this.#experiment, checked);
     this.#onChangeCallback?.(checked);