chrome-devtools-frontend 1.0.943986 → 1.0.945579

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

@@ -50,21 +50,21 @@ export class Wrapper extends UI.Widget.VBox {
 
 export class LinearMemoryInspectorPaneImpl extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(
     UI.Widget.VBox) {
-  private readonly tabbedPane: UI.TabbedPane.TabbedPane;
-  private readonly tabIdToInspectorView: Map<string, LinearMemoryInspectorView>;
+  readonly #tabbedPane: UI.TabbedPane.TabbedPane;
+  readonly #tabIdToInspectorView: Map<string, LinearMemoryInspectorView>;
   constructor() {
     super(false);
     const placeholder = document.createElement('div');
     placeholder.textContent = i18nString(UIStrings.noOpenInspections);
     placeholder.style.display = 'flex';
-    this.tabbedPane = new UI.TabbedPane.TabbedPane();
-    this.tabbedPane.setPlaceholderElement(placeholder);
-    this.tabbedPane.setCloseableTabs(true);
-    this.tabbedPane.setAllowTabReorder(true, true);
-    this.tabbedPane.addEventListener(UI.TabbedPane.Events.TabClosed, this.tabClosed, this);
-    this.tabbedPane.show(this.contentElement);
+    this.#tabbedPane = new UI.TabbedPane.TabbedPane();
+    this.#tabbedPane.setPlaceholderElement(placeholder);
+    this.#tabbedPane.setCloseableTabs(true);
+    this.#tabbedPane.setAllowTabReorder(true, true);
+    this.#tabbedPane.addEventListener(UI.TabbedPane.Events.TabClosed, this.tabClosed, this);
+    this.#tabbedPane.show(this.contentElement);
 
-    this.tabIdToInspectorView = new Map();
+    this.#tabIdToInspectorView = new Map();
   }
 
   static instance(): LinearMemoryInspectorPaneImpl {
@@ -76,17 +76,17 @@ export class LinearMemoryInspectorPaneImpl extends Common.ObjectWrapper.eventMix
 
   create(tabId: string, title: string, arrayWrapper: LazyUint8Array, address?: number): void {
     const inspectorView = new LinearMemoryInspectorView(arrayWrapper, address);
-    this.tabIdToInspectorView.set(tabId, inspectorView);
-    this.tabbedPane.appendTab(tabId, title, inspectorView, undefined, false, true);
-    this.tabbedPane.selectTab(tabId);
+    this.#tabIdToInspectorView.set(tabId, inspectorView);
+    this.#tabbedPane.appendTab(tabId, title, inspectorView, undefined, false, true);
+    this.#tabbedPane.selectTab(tabId);
   }
 
   close(tabId: string): void {
-    this.tabbedPane.closeTab(tabId, false);
+    this.#tabbedPane.closeTab(tabId, false);
   }
 
   reveal(tabId: string, address?: number): void {
-    const view = this.tabIdToInspectorView.get(tabId);
+    const view = this.#tabIdToInspectorView.get(tabId);
     if (!view) {
       throw new Error(`No linear memory inspector view for given tab id: ${tabId}`);
     }
@@ -95,11 +95,11 @@ export class LinearMemoryInspectorPaneImpl extends Common.ObjectWrapper.eventMix
       view.updateAddress(address);
     }
     this.refreshView(tabId);
-    this.tabbedPane.selectTab(tabId);
+    this.#tabbedPane.selectTab(tabId);
   }
 
   refreshView(tabId: string): void {
-    const view = this.tabIdToInspectorView.get(tabId);
+    const view = this.#tabIdToInspectorView.get(tabId);
     if (!view) {
       throw new Error(`View for specified tab id does not exist: ${tabId}`);
     }
@@ -108,7 +108,7 @@ export class LinearMemoryInspectorPaneImpl extends Common.ObjectWrapper.eventMix
 
   private tabClosed(event: Common.EventTarget.EventTargetEvent<UI.TabbedPane.EventData>): void {
     const {tabId} = event.data;
-    this.tabIdToInspectorView.delete(tabId);
+    this.#tabIdToInspectorView.delete(tabId);
     this.dispatchEventToListeners(Events.ViewClosed, tabId);
   }
 }
@@ -122,9 +122,9 @@ export type EventTypes = {
 };
 
 class LinearMemoryInspectorView extends UI.Widget.VBox {
-  private memoryWrapper: LazyUint8Array;
-  private address: number;
-  private inspector: LinearMemoryInspector;
+  #memoryWrapper: LazyUint8Array;
+  #address: number;
+  #inspector: LinearMemoryInspector;
   firstTimeOpen: boolean;
   constructor(memoryWrapper: LazyUint8Array, address: number|undefined = 0) {
     super(false);
@@ -133,21 +133,21 @@ class LinearMemoryInspectorView extends UI.Widget.VBox {
       throw new Error('Requested address is out of bounds.');
     }
 
-    this.memoryWrapper = memoryWrapper;
-    this.address = address;
-    this.inspector = new LinearMemoryInspector();
-    this.inspector.addEventListener('memoryrequest', (event: MemoryRequestEvent) => {
+    this.#memoryWrapper = memoryWrapper;
+    this.#address = address;
+    this.#inspector = new LinearMemoryInspector();
+    this.#inspector.addEventListener('memoryrequest', (event: MemoryRequestEvent) => {
       this.memoryRequested(event);
     });
-    this.inspector.addEventListener('addresschanged', (event: AddressChangedEvent) => {
+    this.#inspector.addEventListener('addresschanged', (event: AddressChangedEvent) => {
       this.updateAddress(event.data);
     });
-    this.inspector.addEventListener('settingschanged', (event: SettingsChangedEvent) => {
+    this.#inspector.addEventListener('settingschanged', (event: SettingsChangedEvent) => {
       // Stop event from bubbling up, since no element further up needs the event.
       event.stopPropagation();
       this.saveSettings(event.data);
     });
-    this.contentElement.appendChild(this.inspector);
+    this.contentElement.appendChild(this.#inspector);
     this.firstTimeOpen = true;
   }
 
@@ -160,14 +160,14 @@ class LinearMemoryInspectorView extends UI.Widget.VBox {
   }
 
   updateAddress(address: number): void {
-    if (address < 0 || address >= this.memoryWrapper.length()) {
+    if (address < 0 || address >= this.#memoryWrapper.length()) {
       throw new Error('Requested address is out of bounds.');
     }
-    this.address = address;
+    this.#address = address;
   }
 
   refreshData(): void {
-    LinearMemoryInspectorController.getMemoryForAddress(this.memoryWrapper, this.address).then(({memory, offset}) => {
+    LinearMemoryInspectorController.getMemoryForAddress(this.#memoryWrapper, this.#address).then(({memory, offset}) => {
       let valueTypes;
       let valueTypeModes;
       let endianness;
@@ -178,11 +178,11 @@ class LinearMemoryInspectorView extends UI.Widget.VBox {
         endianness = settings.endianness;
         this.firstTimeOpen = false;
       }
-      this.inspector.data = {
+      this.#inspector.data = {
         memory,
-        address: this.address,
+        address: this.#address,
         memoryOffset: offset,
-        outerMemoryLength: this.memoryWrapper.length(),
+        outerMemoryLength: this.#memoryWrapper.length(),
         valueTypes,
         valueTypeModes,
         endianness,
@@ -196,12 +196,12 @@ class LinearMemoryInspectorView extends UI.Widget.VBox {
       throw new Error('Requested address is out of bounds.');
     }
 
-    LinearMemoryInspectorController.getMemoryRange(this.memoryWrapper, start, end).then(memory => {
-      this.inspector.data = {
+    LinearMemoryInspectorController.getMemoryRange(this.#memoryWrapper, start, end).then(memory => {
+      this.#inspector.data = {
         memory: memory,
         address: address,
         memoryOffset: start,
-        outerMemoryLength: this.memoryWrapper.length(),
+        outerMemoryLength: this.#memoryWrapper.length(),
       };
     });
   }

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

@@ -98,26 +98,26 @@ export const enum Mode {
 export class LinearMemoryNavigator extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-linear-memory-inspector-navigator`;
 
-  private readonly shadow = this.attachShadow({mode: 'open'});
-  private address = '0';
-  private error: string|undefined = undefined;
-  private valid = true;
-  private canGoBackInHistory = false;
-  private canGoForwardInHistory = false;
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #address = '0';
+  #error: string|undefined = undefined;
+  #valid = true;
+  #canGoBackInHistory = false;
+  #canGoForwardInHistory = false;
 
   connectedCallback(): void {
-    this.shadow.adoptedStyleSheets = [linearMemoryNavigatorStyles];
+    this.#shadow.adoptedStyleSheets = [linearMemoryNavigatorStyles];
   }
 
   set data(data: LinearMemoryNavigatorData) {
-    this.address = data.address;
-    this.error = data.error;
-    this.valid = data.valid;
-    this.canGoBackInHistory = data.canGoBackInHistory;
-    this.canGoForwardInHistory = data.canGoForwardInHistory;
+    this.#address = data.address;
+    this.#error = data.error;
+    this.#valid = data.valid;
+    this.#canGoBackInHistory = data.canGoBackInHistory;
+    this.#canGoForwardInHistory = data.canGoForwardInHistory;
     this.render();
 
-    const addressInput = this.shadow.querySelector<HTMLInputElement>('.address-input');
+    const addressInput = this.#shadow.querySelector<HTMLInputElement>('.address-input');
     if (addressInput) {
       if (data.mode === Mode.Submitted) {
         addressInput.blur();
@@ -134,9 +134,9 @@ export class LinearMemoryNavigator extends HTMLElement {
       <div class="navigator">
         <div class="navigator-item">
           ${this.createButton({icon: 'ic_undo_16x16_icon', title: i18nString(UIStrings.goBackInAddressHistory),
-              event: new HistoryNavigationEvent(Navigation.Backward), enabled: this.canGoBackInHistory})}
+              event: new HistoryNavigationEvent(Navigation.Backward), enabled: this.#canGoBackInHistory})}
           ${this.createButton({icon: 'ic_redo_16x16_icon', title: i18nString(UIStrings.goForwardInAddressHistory),
-              event: new HistoryNavigationEvent(Navigation.Forward), enabled: this.canGoForwardInHistory})}
+              event: new HistoryNavigationEvent(Navigation.Forward), enabled: this.#canGoForwardInHistory})}
         </div>
         <div class="navigator-item">
           ${this.createButton({icon: 'ic_page_prev_16x16_icon', title: i18nString(UIStrings.previousPage),
@@ -149,18 +149,18 @@ export class LinearMemoryNavigator extends HTMLElement {
             event: new RefreshRequestedEvent(), enabled: true})}
       </div>
       `;
-      render(result, this.shadow, {host: this});
+      render(result, this.#shadow, {host: this});
     // clang-format on
   }
 
   private createAddressInput(): LitHtml.TemplateResult {
     const classMap = {
       'address-input': true,
-      invalid: !this.valid,
+      invalid: !this.#valid,
     };
     return html`
-      <input class=${LitHtml.Directives.classMap(classMap)} data-input="true" .value=${this.address}
-        title=${this.valid ? i18nString(UIStrings.enterAddress) : this.error} @change=${
+      <input class=${LitHtml.Directives.classMap(classMap)} data-input="true" .value=${this.#address}
+        title=${this.#valid ? i18nString(UIStrings.enterAddress) : this.#error} @change=${
         this.onAddressChange.bind(this, Mode.Submitted)} @input=${this.onAddressChange.bind(this, Mode.Edit)}/>`;
   }
 

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

@@ -66,31 +66,31 @@ export interface LinearMemoryValueInterpreterData {
 export class LinearMemoryValueInterpreter extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-linear-memory-inspector-interpreter`;
 
-  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> = new Map();
-  private memoryLength = 0;
-  private showSettings = false;
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #endianness = Endianness.Little;
+  #buffer = new ArrayBuffer(0);
+  #valueTypes: Set<ValueType> = new Set();
+  #valueTypeModeConfig: Map<ValueType, ValueTypeMode> = new Map();
+  #memoryLength = 0;
+  #showSettings = false;
 
   constructor() {
     super();
-    this.shadow.adoptedStyleSheets = [
+    this.#shadow.adoptedStyleSheets = [
       inspectorCommonStyles,
     ];
   }
 
   connectedCallback(): void {
-    this.shadow.adoptedStyleSheets = [linearMemoryValueInterpreterStyles];
+    this.#shadow.adoptedStyleSheets = [linearMemoryValueInterpreterStyles];
   }
 
   set data(data: LinearMemoryValueInterpreterData) {
-    this.endianness = data.endianness;
-    this.buffer = data.value;
-    this.valueTypes = data.valueTypes;
-    this.valueTypeModeConfig = data.valueTypeModes || new Map();
-    this.memoryLength = data.memoryLength;
+    this.#endianness = data.endianness;
+    this.#buffer = data.value;
+    this.#valueTypes = data.valueTypes;
+    this.#valueTypeModeConfig = data.valueTypeModes || new Map();
+    this.#memoryLength = data.memoryLength;
     this.render();
   }
 
@@ -101,7 +101,7 @@ export class LinearMemoryValueInterpreter extends HTMLElement {
       <div class="value-interpreter">
         <div class="settings-toolbar">
           ${this.renderEndiannessSetting()}
-          <button data-settings="true" class="settings-toolbar-button ${this.showSettings ? 'active' : ''}" title=${i18nString(UIStrings.toggleValueTypeSettings)} @click=${this.onSettingsToggle}>
+          <button data-settings="true" class="settings-toolbar-button ${this.#showSettings ? 'active' : ''}" title=${i18nString(UIStrings.toggleValueTypeSettings)} @click=${this.onSettingsToggle}>
             <${IconButton.Icon.Icon.litTagName}
               .data=${{ iconName: 'settings_14x14_icon', color: 'var(--color-text-secondary)', width: '14px' } as IconButton.Icon.IconWithName}>
             </${IconButton.Icon.Icon.litTagName}>
@@ -109,26 +109,26 @@ export class LinearMemoryValueInterpreter extends HTMLElement {
         </div>
         <span class="divider"></span>
         <div>
-          ${this.showSettings ?
+          ${this.#showSettings ?
             html`
               <${ValueInterpreterSettings.litTagName}
-                .data=${{ valueTypes: this.valueTypes } as ValueInterpreterSettingsData}
+                .data=${{ valueTypes: this.#valueTypes } as ValueInterpreterSettingsData}
                 @typetoggle=${this.onTypeToggle}>
               </${ValueInterpreterSettings.litTagName}>` :
             html`
               <${ValueInterpreterDisplay.litTagName}
                 .data=${{
-                  buffer: this.buffer,
-                  valueTypes: this.valueTypes,
-                  endianness: this.endianness,
-                  valueTypeModes: this.valueTypeModeConfig,
-                  memoryLength: this.memoryLength,
+                  buffer: this.#buffer,
+                  valueTypes: this.#valueTypes,
+                  endianness: this.#endianness,
+                  valueTypeModes: this.#valueTypeModeConfig,
+                  memoryLength: this.#memoryLength,
                 } as ValueDisplayData}>
               </${ValueInterpreterDisplay.litTagName}>`}
         </div>
       </div>
     `,
-      this.shadow, { host: this },
+      this.#shadow, { host: this },
     );
     // clang-format on
   }
@@ -150,7 +150,7 @@ export class LinearMemoryValueInterpreter extends HTMLElement {
         style="border: none; background-color: transparent; cursor: pointer;"
         data-endianness="true" @change=${onEnumSettingChange}>
         ${[Endianness.Little, Endianness.Big].map(endianness => {
-            return html`<option value=${endianness} .selected=${this.endianness === endianness}>${
+            return html`<option value=${endianness} .selected=${this.#endianness === endianness}>${
                 i18n.i18n.lockedString(endianness)}</option>`;
         })}
       </select>
@@ -160,7 +160,7 @@ export class LinearMemoryValueInterpreter extends HTMLElement {
   }
 
   private onSettingsToggle(): void {
-    this.showSettings = !this.showSettings;
+    this.#showSettings = !this.#showSettings;
     this.render();
   }
 

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