chrome-devtools-frontend 1.0.943986 → 1.0.945579

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

@@ -76,34 +76,34 @@ export class JumpToPointerAddressEvent extends Event {
 export class ValueInterpreterDisplay extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-linear-memory-inspector-interpreter-display`;
 
-  private readonly shadow = this.attachShadow({mode: 'open'});
-  private endianness = Endianness.Little;
-  private buffer = new ArrayBuffer(0);
-  private valueTypes: Set<ValueType> = new Set();
-  private valueTypeModeConfig: Map<ValueType, ValueTypeMode> = getDefaultValueTypeMapping();
-  private memoryLength = 0;
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #endianness = Endianness.Little;
+  #buffer = new ArrayBuffer(0);
+  #valueTypes: Set<ValueType> = new Set();
+  #valueTypeModeConfig: Map<ValueType, ValueTypeMode> = getDefaultValueTypeMapping();
+  #memoryLength = 0;
 
   constructor() {
     super();
-    this.shadow.adoptedStyleSheets = [
+    this.#shadow.adoptedStyleSheets = [
       inspectorCommonStyles,
     ];
   }
 
   connectedCallback(): void {
-    this.shadow.adoptedStyleSheets = [valueInterpreterDisplayStyles];
+    this.#shadow.adoptedStyleSheets = [valueInterpreterDisplayStyles];
   }
 
   set data(data: ValueDisplayData) {
-    this.buffer = data.buffer;
-    this.endianness = data.endianness;
-    this.valueTypes = data.valueTypes;
-    this.memoryLength = data.memoryLength;
+    this.#buffer = data.buffer;
+    this.#endianness = data.endianness;
+    this.#valueTypes = data.valueTypes;
+    this.#memoryLength = data.memoryLength;
 
     if (data.valueTypeModes) {
       data.valueTypeModes.forEach((mode, valueType) => {
         if (isValidMode(valueType, mode)) {
-          this.valueTypeModeConfig.set(valueType, mode);
+          this.#valueTypeModeConfig.set(valueType, mode);
         }
       });
     }
@@ -116,9 +116,9 @@ export class ValueInterpreterDisplay extends HTMLElement {
     // 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},
+    `, this.#shadow, {host: this},
     );
     // clang-format on
   }
@@ -135,8 +135,8 @@ export class ValueInterpreterDisplay extends HTMLElement {
 
   private 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 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);
     const iconColor = jumpDisabled ? 'var(--color-text-secondary)' : 'var(--color-primary)';
     // Disabled until https://crbug.com/1079231 is fixed.
@@ -177,7 +177,7 @@ export class ValueInterpreterDisplay extends HTMLElement {
           @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}>${
+                <option value=${mode} .selected=${this.#valueTypeModeConfig.get(type) === mode}>${
                   i18n.i18n.lockedString(mode)}
                 </option>`;
             })}
@@ -191,7 +191,7 @@ export class ValueInterpreterDisplay extends HTMLElement {
   private 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 mode = this.#valueTypeModeConfig.get(type);
     const showSignedAndUnsigned =
         signedValue !== unsignedValue && mode !== ValueTypeMode.Hexadecimal && mode !== ValueTypeMode.Octal;
 
@@ -232,9 +232,9 @@ export class ValueInterpreterDisplay extends HTMLElement {
   }
 
   private parse(data: {type: ValueType, signed?: boolean}): string {
-    const mode = this.valueTypeModeConfig.get(data.type);
+    const mode = this.#valueTypeModeConfig.get(data.type);
     return format(
-        {buffer: this.buffer, type: data.type, endianness: this.endianness, signed: data.signed || false, mode});
+        {buffer: this.#buffer, type: data.type, endianness: this.#endianness, signed: data.signed || false, mode});
   }
 }
 

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

@@ -61,15 +61,15 @@ export class TypeToggleEvent extends Event {
 export class ValueInterpreterSettings extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-linear-memory-inspector-interpreter-settings`;
 
-  private readonly shadow = this.attachShadow({mode: 'open'});
-  private valueTypes: Set<ValueType> = new Set();
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #valueTypes: Set<ValueType> = new Set();
 
   connectedCallback(): void {
-    this.shadow.adoptedStyleSheets = [valueInterpreterSettingsStyles];
+    this.#shadow.adoptedStyleSheets = [valueInterpreterSettingsStyles];
   }
 
   set data(data: ValueInterpreterSettingsData) {
-    this.valueTypes = data.valueTypes;
+    this.#valueTypes = data.valueTypes;
     this.render();
   }
 
@@ -86,7 +86,7 @@ export class ValueInterpreterSettings extends HTMLElement {
           </div>
         `;})}
       </div>
-      `, this.shadow, {host: this});
+      `, this.#shadow, {host: this});
   }
 
   private plotTypeSelections(group: ValueTypeGroup): LitHtml.TemplateResult {
@@ -98,7 +98,7 @@ 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>
      `;})}`;

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

@@ -23,31 +23,31 @@ export interface MarkdownImageData {
 export class MarkdownImage extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-markdown-image`;
 
-  private readonly shadow = this.attachShadow({mode: 'open'});
-  private imageData?: ImageData;
-  private imageTitle?: string;
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #imageData?: ImageData;
+  #imageTitle?: string;
 
   constructor() {
     super();
   }
 
   connectedCallback(): void {
-    this.shadow.adoptedStyleSheets = [markdownImageStyles];
+    this.#shadow.adoptedStyleSheets = [markdownImageStyles];
   }
 
   set data(data: MarkdownImageData) {
     const {key, title} = data;
     const markdownImage = getMarkdownImage(key);
-    this.imageData = markdownImage;
-    this.imageTitle = title;
+    this.#imageData = markdownImage;
+    this.#imageTitle = title;
     this.render();
   }
 
   private getIconComponent(): LitHtml.TemplateResult {
-    if (!this.imageData) {
+    if (!this.#imageData) {
       return LitHtml.html``;
     }
-    const {src, color, width = '100%', height = '100%'} = this.imageData;
+    const {src, color, width = '100%', height = '100%'} = this.#imageData;
     return LitHtml.html`
       <${IconButton.Icon.Icon.litTagName} .data=${
         {iconPath: src, color, width, height} as IconButton.Icon.IconData}></${IconButton.Icon.Icon.litTagName}>
@@ -55,22 +55,22 @@ export class MarkdownImage extends HTMLElement {
   }
 
   private getImageComponent(): LitHtml.TemplateResult {
-    if (!this.imageData) {
+    if (!this.#imageData) {
       return LitHtml.html``;
     }
-    const {src, width = '100%', height = '100%'} = this.imageData;
+    const {src, width = '100%', height = '100%'} = this.#imageData;
     return LitHtml.html`
-      <img class="markdown-image" src=${src} alt=${this.imageTitle} width=${width} height=${height}/>
+      <img class="markdown-image" src=${src} alt=${this.#imageTitle} width=${width} height=${height}/>
     `;
   }
 
   private render(): void {
-    if (!this.imageData) {
+    if (!this.#imageData) {
       return;
     }
-    const {isIcon} = this.imageData;
+    const {isIcon} = this.#imageData;
     const imageComponent = isIcon ? this.getIconComponent() : this.getImageComponent();
-    LitHtml.render(imageComponent, this.shadow, {host: this});
+    LitHtml.render(imageComponent, this.#shadow, {host: this});
   }
 }
 

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

@@ -23,28 +23,28 @@ export interface MarkdownLinkData {
 export class MarkdownLink extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-markdown-link`;
 
-  private readonly shadow = this.attachShadow({mode: 'open'});
-  private linkText: string = '';
-  private linkUrl: string = '';
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #linkText: string = '';
+  #linkUrl: string = '';
 
   connectedCallback(): void {
-    this.shadow.adoptedStyleSheets = [markdownLinkStyles];
+    this.#shadow.adoptedStyleSheets = [markdownLinkStyles];
   }
 
   set data(data: MarkdownLinkData) {
     const {key, title} = data;
     const markdownLink = getMarkdownLink(key);
-    this.linkText = title;
-    this.linkUrl = markdownLink;
+    this.#linkText = title;
+    this.#linkUrl = markdownLink;
     this.render();
   }
 
   private render(): void {
     // clang-format off
     const output = LitHtml.html`
-      <x-link class="devtools-link" href=${this.linkUrl}>${this.linkText}</x-link>
+      <x-link class="devtools-link" href=${this.#linkUrl}>${this.#linkText}</x-link>
     `;
-    LitHtml.render(output, this.shadow, {host: this});
+    LitHtml.render(output, this.#shadow, {host: this});
     // clang-format on
   }
 }

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

@@ -21,17 +21,17 @@ export interface MarkdownViewData {
 
 export class MarkdownView extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-markdown-view`;
-  private readonly shadow = this.attachShadow({mode: 'open'});
+  readonly #shadow = this.attachShadow({mode: 'open'});
 
   // TODO(crbug.com/1108699): Replace with `Marked.Marked.Token[]` once AST types are fixed upstream.
-  private tokenData: readonly Object[] = [];
+  #tokenData: readonly Object[] = [];
 
   connectedCallback(): void {
-    this.shadow.adoptedStyleSheets = [markdownViewStyles];
+    this.#shadow.adoptedStyleSheets = [markdownViewStyles];
   }
 
   set data(data: MarkdownViewData) {
-    this.tokenData = data.tokens;
+    this.#tokenData = data.tokens;
     this.update();
   }
 
@@ -44,9 +44,9 @@ export class MarkdownView extends HTMLElement {
     // clang-format off
     render(html`
       <div class='message'>
-        ${this.tokenData.map(renderToken)}
+        ${this.#tokenData.map(renderToken)}
       </div>
-    `, this.shadow);
+    `, this.#shadow);
     // clang-format on
   }
 }

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

@@ -90,20 +90,20 @@ export class RenderCoordinator extends EventTarget {
   // This does not affect logging frames or queue empty events.
   observeOnlyNamed = true;
 
-  private readonly logInternal: CoordinatorLogEntry[] = [];
+  readonly #logInternal: CoordinatorLogEntry[] = [];
 
-  private readonly pendingWorkFrames: CoordinatorFrame[] = [];
-  private readonly resolvers = new WeakMap<CoordinatorCallback, RenderCoordinatorResolverCallback>();
-  private readonly rejectors = new WeakMap<CoordinatorCallback, RenderCoordinatorRejectorCallback>();
-  private readonly labels = new WeakMap<CoordinatorCallback, string>();
-  private scheduledWorkId = 0;
+  readonly #pendingWorkFrames: CoordinatorFrame[] = [];
+  readonly #resolvers = new WeakMap<CoordinatorCallback, RenderCoordinatorResolverCallback>();
+  readonly #rejectors = new WeakMap<CoordinatorCallback, RenderCoordinatorRejectorCallback>();
+  readonly #labels = new WeakMap<CoordinatorCallback, string>();
+  #scheduledWorkId = 0;
 
   pendingFramesCount(): number {
-    return this.pendingWorkFrames.length;
+    return this.#pendingWorkFrames.length;
   }
 
   done(): Promise<void> {
-    if (this.pendingWorkFrames.length === 0) {
+    if (this.#pendingWorkFrames.length === 0) {
       this.logIfEnabled('[Queue empty]');
       return Promise.resolve();
     }
@@ -139,8 +139,8 @@ export class RenderCoordinator extends EventTarget {
   }
 
   takeRecords(): CoordinatorLogEntry[] {
-    const logs = [...this.logInternal];
-    this.logInternal.length = 0;
+    const logs = [...this.#logInternal];
+    this.#logInternal.length = 0;
     return logs;
   }
 
@@ -165,16 +165,16 @@ export class RenderCoordinator extends EventTarget {
   }
 
   private enqueueHandler<T = unknown>(callback: CoordinatorCallback, action: ACTION, label = ''): Promise<T> {
-    this.labels.set(callback, `${action === ACTION.READ ? '[Read]' : '[Write]'}: ${label}`);
+    this.#labels.set(callback, `${action === ACTION.READ ? '[Read]' : '[Write]'}: ${label}`);
 
-    if (this.pendingWorkFrames.length === 0) {
-      this.pendingWorkFrames.push({
+    if (this.#pendingWorkFrames.length === 0) {
+      this.#pendingWorkFrames.push({
         readers: [],
         writers: [],
       });
     }
 
-    const frame = this.pendingWorkFrames[0];
+    const frame = this.#pendingWorkFrames[0];
     if (!frame) {
       throw new Error('No frame available');
     }
@@ -193,8 +193,8 @@ export class RenderCoordinator extends EventTarget {
     }
 
     const resolverPromise = new Promise((resolve, reject) => {
-      this.resolvers.set(callback, resolve);
-      this.rejectors.set(callback, reject);
+      this.#resolvers.set(callback, resolve);
+      this.#rejectors.set(callback, reject);
     });
 
     this.scheduleWork();
@@ -203,24 +203,24 @@ export class RenderCoordinator extends EventTarget {
 
   private async handleWork(handler: CoordinatorCallback): Promise<void> {
     const data = await handler.call(undefined);
-    const resolver = this.resolvers.get(handler);
+    const resolver = this.#resolvers.get(handler);
     if (!resolver) {
       throw new Error('Unable to locate resolver');
     }
 
     resolver.call(undefined, data);
-    this.resolvers.delete(handler);
-    this.rejectors.delete(handler);
+    this.#resolvers.delete(handler);
+    this.#rejectors.delete(handler);
   }
 
   private scheduleWork(): void {
-    const hasScheduledWork = this.scheduledWorkId !== 0;
+    const hasScheduledWork = this.#scheduledWorkId !== 0;
     if (hasScheduledWork) {
       return;
     }
 
-    this.scheduledWorkId = requestAnimationFrame(async () => {
-      const hasPendingFrames = this.pendingWorkFrames.length > 0;
+    this.#scheduledWorkId = requestAnimationFrame(async () => {
+      const hasPendingFrames = this.#pendingWorkFrames.length > 0;
       if (!hasPendingFrames) {
         // No pending frames means all pending work has completed.
         // The events dispatched below are mostly for testing contexts.
@@ -231,14 +231,14 @@ export class RenderCoordinator extends EventTarget {
         window.dispatchEvent(new RenderCoordinatorQueueEmptyEvent());
 
         this.logIfEnabled('[Queue empty]');
-        this.scheduledWorkId = 0;
+        this.#scheduledWorkId = 0;
         return;
       }
 
       this.dispatchEvent(new RenderCoordinatorNewFrameEvent());
       this.logIfEnabled('[New frame]');
 
-      const frame = this.pendingWorkFrames.shift();
+      const frame = this.#pendingWorkFrames.shift();
       if (!frame) {
         return;
       }
@@ -247,7 +247,7 @@ export class RenderCoordinator extends EventTarget {
       // to proceed together.
       const readers: Promise<unknown>[] = [];
       for (const reader of frame.readers) {
-        this.logIfEnabled(this.labels.get(reader));
+        this.logIfEnabled(this.#labels.get(reader));
         readers.push(this.handleWork(reader));
       }
 
@@ -268,7 +268,7 @@ export class RenderCoordinator extends EventTarget {
       // Next do all the writers as a block.
       const writers: Promise<unknown>[] = [];
       for (const writer of frame.writers) {
-        this.logIfEnabled(this.labels.get(writer));
+        this.logIfEnabled(this.#labels.get(writer));
         writers.push(this.handleWork(writer));
       }
 
@@ -289,22 +289,22 @@ export class RenderCoordinator extends EventTarget {
       // 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.#scheduledWorkId = 0;
       this.scheduleWork();
     });
   }
 
   private rejectAll(handlers: CoordinatorCallback[], error: Error): void {
     for (const handler of handlers) {
-      const rejector = this.rejectors.get(handler);
+      const rejector = this.#rejectors.get(handler);
       if (!rejector) {
         console.warn('Unable to locate rejector');
         continue;
       }
 
       rejector.call(undefined, error);
-      this.resolvers.delete(handler);
-      this.rejectors.delete(handler);
+      this.#resolvers.delete(handler);
+      this.#rejectors.delete(handler);
     }
   }
 
@@ -317,11 +317,11 @@ export class RenderCoordinator extends EventTarget {
       return;
     }
 
-    this.logInternal.push({time: performance.now(), value});
+    this.#logInternal.push({time: performance.now(), value});
 
     // Keep the log at the log size.
-    while (this.logInternal.length > this.recordStorageLimit) {
-      this.logInternal.shift();
+    while (this.#logInternal.length > this.recordStorageLimit) {
+      this.#logInternal.shift();
     }
   }
 }

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

@@ -36,16 +36,16 @@ export interface ReportData {
 export class Report extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-report`;
 
-  private readonly shadow = this.attachShadow({mode: 'open'});
-  private reportTitle: string = '';
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #reportTitle: string = '';
 
   set data({reportTitle}: ReportData) {
-    this.reportTitle = reportTitle;
+    this.#reportTitle = reportTitle;
     this.render();
   }
 
   connectedCallback(): void {
-    this.shadow.adoptedStyleSheets = [reportStyles];
+    this.#shadow.adoptedStyleSheets = [reportStyles];
     this.render();
   }
 
@@ -54,10 +54,10 @@ export class Report extends HTMLElement {
     // clang-format off
     LitHtml.render(LitHtml.html`
       <div class="content">
-        ${this.reportTitle ? LitHtml.html`<div class="report-title">${this.reportTitle}</div>` : LitHtml.nothing}
+        ${this.#reportTitle ? LitHtml.html`<div class="report-title">${this.#reportTitle}</div>` : LitHtml.nothing}
         <slot></slot>
       </div>
-    `, this.shadow, {host: this});
+    `, this.#shadow, {host: this});
     // clang-format on
   }
 }
@@ -69,9 +69,9 @@ export interface ReportSectionData {
 export class ReportSectionHeader extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-report-section-header`;
 
-  private readonly shadow = this.attachShadow({mode: 'open'});
+  readonly #shadow = this.attachShadow({mode: 'open'});
   connectedCallback(): void {
-    this.shadow.adoptedStyleSheets = [reportSectionHeaderStyles];
+    this.#shadow.adoptedStyleSheets = [reportSectionHeaderStyles];
     this.render();
   }
 
@@ -82,7 +82,7 @@ export class ReportSectionHeader extends HTMLElement {
       <div class="section-header">
         <slot></slot>
       </div>
-    `, this.shadow, {host: this});
+    `, this.#shadow, {host: this});
     // clang-format on
   }
 }
@@ -90,9 +90,9 @@ export class ReportSectionHeader extends HTMLElement {
 export class ReportSectionDivider extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-report-divider`;
 
-  private readonly shadow = this.attachShadow({mode: 'open'});
+  readonly #shadow = this.attachShadow({mode: 'open'});
   connectedCallback(): void {
-    this.shadow.adoptedStyleSheets = [reportSectionDividerStyles];
+    this.#shadow.adoptedStyleSheets = [reportSectionDividerStyles];
     this.render();
   }
 
@@ -102,7 +102,7 @@ export class ReportSectionDivider extends HTMLElement {
     LitHtml.render(LitHtml.html`
       <div class="section-divider">
       </div>
-    `, this.shadow, {host: this});
+    `, this.#shadow, {host: this});
     // clang-format on
   }
 }
@@ -110,9 +110,9 @@ export class ReportSectionDivider extends HTMLElement {
 export class ReportKey extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-report-key`;
 
-  private readonly shadow = this.attachShadow({mode: 'open'});
+  readonly #shadow = this.attachShadow({mode: 'open'});
   connectedCallback(): void {
-    this.shadow.adoptedStyleSheets = [reportKeyStyles];
+    this.#shadow.adoptedStyleSheets = [reportKeyStyles];
     this.render();
   }
 
@@ -121,7 +121,7 @@ export class ReportKey extends HTMLElement {
     // clang-format off
     LitHtml.render(LitHtml.html`
       <div class="key"><slot></slot></div>
-    `, this.shadow, {host: this});
+    `, this.#shadow, {host: this});
     // clang-format on
   }
 }
@@ -129,9 +129,9 @@ export class ReportKey extends HTMLElement {
 export class ReportValue extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-report-value`;
 
-  private readonly shadow = this.attachShadow({mode: 'open'});
+  readonly #shadow = this.attachShadow({mode: 'open'});
   connectedCallback(): void {
-    this.shadow.adoptedStyleSheets = [reportValueStyles];
+    this.#shadow.adoptedStyleSheets = [reportValueStyles];
     this.render();
   }
 
@@ -140,7 +140,7 @@ export class ReportValue extends HTMLElement {
     // clang-format off
     LitHtml.render(LitHtml.html`
       <div class="value"><slot></slot></div>
-    `, this.shadow, {host: this});
+    `, this.#shadow, {host: this});
     // clang-format on
   }
 }