chrome-devtools-frontend 1.0.945329 → 1.0.946351

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

@@ -40,21 +40,21 @@ export class LinearMemoryViewer extends HTMLElement {
 
   private static readonly BYTE_GROUP_MARGIN = 8;
   private static readonly BYTE_GROUP_SIZE = 4;
-  private readonly shadow = this.attachShadow({mode: 'open'});
+  readonly #shadow = this.attachShadow({mode: 'open'});
 
-  private readonly resizeObserver = new ResizeObserver(() => this.resize());
-  private isObservingResize = false;
+  readonly #resizeObserver = new ResizeObserver(() => this.resize());
+  #isObservingResize = false;
 
-  private memory = new Uint8Array();
-  private address = 0;
-  private memoryOffset = 0;
+  #memory = new Uint8Array();
+  #address = 0;
+  #memoryOffset = 0;
 
-  private numRows = 1;
-  private numBytesInRow = LinearMemoryViewer.BYTE_GROUP_SIZE;
+  #numRows = 1;
+  #numBytesInRow = LinearMemoryViewer.BYTE_GROUP_SIZE;
 
-  private focusOnByte = true;
+  #focusOnByte = true;
 
-  private lastKeyUpdateSent: number|undefined = undefined;
+  #lastKeyUpdateSent: number|undefined = undefined;
 
   set data(data: LinearMemoryViewerData) {
     if (data.address < data.memoryOffset || data.address > data.memoryOffset + data.memory.length || data.address < 0) {
@@ -65,21 +65,21 @@ export class LinearMemoryViewer extends HTMLElement {
       throw new Error('Memory offset has to be greater or equal to zero.');
     }
 
-    this.memory = data.memory;
-    this.address = data.address;
-    this.memoryOffset = data.memoryOffset;
-    this.focusOnByte = data.focus;
+    this.#memory = data.memory;
+    this.#address = data.address;
+    this.#memoryOffset = data.memoryOffset;
+    this.#focusOnByte = data.focus;
     this.update();
   }
 
   connectedCallback(): void {
     ComponentHelpers.SetCSSProperty.set(this, '--byte-group-margin', `${LinearMemoryViewer.BYTE_GROUP_MARGIN}px`);
-    this.shadow.adoptedStyleSheets = [linearMemoryViewerStyles];
+    this.#shadow.adoptedStyleSheets = [linearMemoryViewerStyles];
   }
 
   disconnectedCallback(): void {
-    this.isObservingResize = false;
-    this.resizeObserver.disconnect();
+    this.#isObservingResize = false;
+    this.#resizeObserver.disconnect();
   }
 
   private update(): void {
@@ -90,8 +90,8 @@ export class LinearMemoryViewer extends HTMLElement {
   }
 
   private focusOnView(): void {
-    if (this.focusOnByte) {
-      const view = this.shadow.querySelector<HTMLDivElement>('.view');
+    if (this.#focusOnByte) {
+      const view = this.#shadow.querySelector<HTMLDivElement>('.view');
       if (view) {
         view.focus();
       }
@@ -100,14 +100,14 @@ export class LinearMemoryViewer extends HTMLElement {
 
   private resize(): void {
     this.update();
-    this.dispatchEvent(new ResizeEvent(this.numBytesInRow * this.numRows));
+    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 {
     if (this.clientWidth === 0 || this.clientHeight === 0 || !this.shadowRoot) {
-      this.numBytesInRow = LinearMemoryViewer.BYTE_GROUP_SIZE;
-      this.numRows = 1;
+      this.#numBytesInRow = LinearMemoryViewer.BYTE_GROUP_SIZE;
+      this.#numRows = 1;
       return;
     }
 
@@ -126,8 +126,8 @@ export class LinearMemoryViewer extends HTMLElement {
     const rowElement = this.shadowRoot.querySelector('.row');
 
     if (!firstByteCell || !textCell || !divider || !rowElement) {
-      this.numBytesInRow = LinearMemoryViewer.BYTE_GROUP_SIZE;
-      this.numRows = 1;
+      this.#numBytesInRow = LinearMemoryViewer.BYTE_GROUP_SIZE;
+      this.#numRows = 1;
       return;
     }
 
@@ -144,22 +144,22 @@ 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.numRows = 1;
+      this.#numBytesInRow = LinearMemoryViewer.BYTE_GROUP_SIZE;
+      this.#numRows = 1;
       return;
     }
 
-    this.numBytesInRow = Math.floor(widthToFill / groupWidth) * LinearMemoryViewer.BYTE_GROUP_SIZE;
-    this.numRows = Math.floor(this.clientHeight / rowElement.clientHeight);
+    this.#numBytesInRow = Math.floor(widthToFill / groupWidth) * LinearMemoryViewer.BYTE_GROUP_SIZE;
+    this.#numRows = Math.floor(this.clientHeight / rowElement.clientHeight);
   }
 
   private engageResizeObserver(): void {
-    if (!this.resizeObserver || this.isObservingResize) {
+    if (!this.#resizeObserver || this.#isObservingResize) {
       return;
     }
 
-    this.resizeObserver.observe(this);
-    this.isObservingResize = true;
+    this.#resizeObserver.observe(this);
+    this.#isObservingResize = true;
   }
 
   private render(): void {
@@ -169,50 +169,50 @@ export class LinearMemoryViewer extends HTMLElement {
       <div class="view" tabindex="0" @keydown=${this.onKeyDown}>
           ${this.renderView()}
       </div>
-      `, this.shadow, {host: this});
+      `, this.#shadow, {host: this});
   }
 
   private onKeyDown(event: Event): void {
     const keyboardEvent = event as KeyboardEvent;
     let newAddress = undefined;
     if (keyboardEvent.code === 'ArrowUp') {
-      newAddress = this.address - this.numBytesInRow;
+      newAddress = this.#address - this.#numBytesInRow;
     } else if (keyboardEvent.code === 'ArrowDown') {
-      newAddress = this.address + this.numBytesInRow;
+      newAddress = this.#address + this.#numBytesInRow;
     } else if (keyboardEvent.code === 'ArrowLeft') {
-      newAddress = this.address - 1;
+      newAddress = this.#address - 1;
     } else if (keyboardEvent.code === 'ArrowRight') {
-      newAddress = this.address + 1;
+      newAddress = this.#address + 1;
     } else if (keyboardEvent.code === 'PageUp') {
-      newAddress = this.address - this.numBytesInRow * this.numRows;
+      newAddress = this.#address - this.#numBytesInRow * this.#numRows;
     } else if (keyboardEvent.code === 'PageDown') {
-      newAddress = this.address + this.numBytesInRow * this.numRows;
+      newAddress = this.#address + this.#numBytesInRow * this.#numRows;
     }
 
-    if (newAddress !== undefined && newAddress !== this.lastKeyUpdateSent) {
-      this.lastKeyUpdateSent = newAddress;
+    if (newAddress !== undefined && newAddress !== this.#lastKeyUpdateSent) {
+      this.#lastKeyUpdateSent = newAddress;
       this.dispatchEvent(new ByteSelectedEvent(newAddress));
     }
   }
 
   private renderView(): LitHtml.TemplateResult {
     const itemTemplates = [];
-    for (let i = 0; i < this.numRows; ++i) {
+    for (let i = 0; i < this.#numRows; ++i) {
       itemTemplates.push(this.renderRow(i));
     }
     return html`${itemTemplates}`;
   }
 
   private renderRow(row: number): LitHtml.TemplateResult {
-    const {startIndex, endIndex} = {startIndex: row * this.numBytesInRow, endIndex: (row + 1) * this.numBytesInRow};
+    const {startIndex, endIndex} = {startIndex: row * this.#numBytesInRow, endIndex: (row + 1) * this.#numBytesInRow};
 
     const classMap = {
       address: true,
-      selected: Math.floor((this.address - this.memoryOffset) / this.numBytesInRow) === row,
+      selected: Math.floor((this.#address - this.#memoryOffset) / this.#numBytesInRow) === row,
     };
     return html`
     <div class="row">
-      <span class="${LitHtml.Directives.classMap(classMap)}">${toHexString({number: startIndex + this.memoryOffset, pad: 8, prefix: false})}</span>
+      <span class="${LitHtml.Directives.classMap(classMap)}">${toHexString({number: startIndex + this.#memoryOffset, pad: 8, prefix: false})}</span>
       <span class="divider"></span>
       ${this.renderByteValues(startIndex, endIndex)}
       <span class="divider"></span>
@@ -226,16 +226,16 @@ export class LinearMemoryViewer extends HTMLElement {
     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 selected = i === this.address - this.memoryOffset;
+      const selected = i === this.#address - this.#memoryOffset;
       const classMap = {
         'cell': true,
         'byte-cell': true,
         'byte-group-margin': addMargin,
         selected,
       };
-      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 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) : '';
       cells.push(html`<span class="${LitHtml.Directives.classMap(classMap)}" @click=${onSelectedByte}>${byteValue}</span>`);
     }
@@ -248,11 +248,11 @@ export class LinearMemoryViewer extends HTMLElement {
       const classMap = {
         'cell': true,
         'text-cell': true,
-        selected: this.address - this.memoryOffset === i,
+        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 isSelectableCell = i < this.#memory.length;
+      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}`;

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
   }
 }