1 files changed, 30 insertions, 31 deletions

diff --git a/chromium/v8/tools/system-analyzer/map-panel/map-details.mjs b/chromium/v8/tools/system-analyzer/map-panel/map-details.mjs
index d471609dba8..bcf8f9c9aa1 100644
--- a/chromium/v8/tools/system-analyzer/map-panel/map-details.mjs
+++ b/chromium/v8/tools/system-analyzer/map-panel/map-details.mjs
@@ -1,48 +1,47 @@
 // Copyright 2020 the V8 project authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-import { V8CustomElement, defineCustomElement } from "../helper.mjs";
-import { FocusEvent } from "../events.mjs";
+import {FocusEvent} from '../events.mjs';
+import {DOM, V8CustomElement} from '../helper.mjs';
+
+DOM.defineCustomElement(
+    './map-panel/map-details',
+    (templateText) => class MapDetails extends V8CustomElement {
+      _map;
 
-defineCustomElement(
-  "./map-panel/map-details",
-  (templateText) =>
-    class MapDetails extends V8CustomElement {
       constructor() {
         super(templateText);
-        this.#filePositionNode.addEventListener("click", e =>
-          this.handleFilePositionClick(e)
-        );
-        this.selectedMap = undefined;
+        this._filePositionNode.onclick = e => this._handleFilePositionClick(e);
       }
-      get mapDetails() {
-        return this.$("#mapDetails");
+
+      get _mapDetails() {
+        return this.$('#mapDetails');
       }
 
-      get #filePositionNode() {
-        return this.$("#filePositionNode");
+      get _filePositionNode() {
+        return this.$('#filePositionNode');
       }
 
-      setSelectedMap(value) {
-        this.selectedMap = value;
+      set map(map) {
+        if (this._map === map) return;
+        this._map = map;
+        this.update();
       }
 
-      set mapDetails(map) {
-        let details = "";
-        let clickableDetails = "";
-        if (map) {
-          clickableDetails += "ID: " + map.id;
-          clickableDetails += "\nSource location: " + map.filePosition;
-          details += "\n" + map.description;
-          this.setSelectedMap(map);
+      _update() {
+        let details = '';
+        let clickableDetails = '';
+        if (this._map) {
+          clickableDetails = `ID: ${this._map.id}`;
+          clickableDetails += `\nSource location: ${this._map.filePosition}`;
+          details = this._map.description;
         }
-        this.#filePositionNode.innerText = clickableDetails;
-        this.#filePositionNode.classList.add("clickable");
-        this.mapDetails.innerText = details;
+        this._filePositionNode.innerText = clickableDetails;
+        this._filePositionNode.classList.add('clickable');
+        this._mapDetails.innerText = details;
       }
 
-      handleFilePositionClick() {
-        this.dispatchEvent(new FocusEvent(this.selectedMap.sourcePosition));
+      _handleFilePositionClick(event) {
+        this.dispatchEvent(new FocusEvent(this._map.sourcePosition));
       }
-    }
-);
+    });