Update ValueInterpreterDisplay to UI engineering vision

Fixed: 407941424
Change-Id: I237ecb324155dd3cc387f50f6b518aea1bebe2a1
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7213583
Reviewed-by: Simon Zünd <[email protected]>
Commit-Queue: Kim-Anh Tran <[email protected]>

Author: ktran

front_end/panels/linear_memory_inspector/components/LinearMemoryInspector.test.ts

@@ -199,8 +199,7 @@ describe('LinearMemoryInspector', () => {
     component.endianness = LinearMemoryInspectorComponents.ValueInterpreterDisplayUtils.Endianness.LITTLE;
     await view.nextInput;
 
-    const event = new LinearMemoryInspectorComponents.ValueInterpreterDisplay.JumpToPointerAddressEvent(2);
-    view.input.onJumpToAddress(event);
+    view.input.onJumpToAddress(2);
     const newViewInput = await view.nextInput;
 
     const expectedSelectedByte = new DataView(memory.buffer).getUint32(0, true);
@@ -285,9 +284,7 @@ describe('LinearMemoryInspector', () => {
         component.once(LinearMemoryInspectorComponents.LinearMemoryInspector.Events.SETTINGS_CHANGED);
     const valueType = LinearMemoryInspectorComponents.ValueInterpreterDisplayUtils.ValueType.INT16;
     const valueTypeMode = LinearMemoryInspectorComponents.ValueInterpreterDisplayUtils.ValueTypeMode.HEXADECIMAL;
-    view.input.onValueTypeModeChanged(
-        new LinearMemoryInspectorComponents.ValueInterpreterDisplay.ValueTypeModeChangedEvent(
-            valueType, valueTypeMode));
+    view.input.onValueTypeModeChanged(valueType, valueTypeMode);
     const {valueTypes, modes} = await settingsPromise;
     assert.isTrue(valueTypes.has(valueType));
     assert.strictEqual(modes.get(valueType), valueTypeMode);

front_end/panels/linear_memory_inspector/components/LinearMemoryInspector.ts

@@ -23,7 +23,6 @@ import {
 import type {EndiannessChangedEvent, ValueTypeToggledEvent} from './LinearMemoryValueInterpreter.js';
 import type {ByteSelectedEvent, ResizeEvent} from './LinearMemoryViewer.js';
 import type {HighlightInfo} from './LinearMemoryViewerUtils.js';
-import type {JumpToPointerAddressEvent, ValueTypeModeChangedEvent} from './ValueInterpreterDisplay.js';
 import {
   Endianness,
   getDefaultValueTypeMapping,
@@ -122,12 +121,12 @@ export interface ViewInput {
   onAddressChange: (e: AddressInputChangedEvent) => void;
   onNavigatePage: (e: PageNavigationEvent) => void;
   onNavigateHistory: (e: HistoryNavigationEvent) => boolean;
-  onJumpToAddress: (e: JumpToPointerAddressEvent|{data: number}) => void;
+  onJumpToAddress: (address: number) => void;
   onDeleteMemoryHighlight: (info: HighlightInfo) => void;
   onByteSelected: (e: ByteSelectedEvent) => void;
   onResize: (e: ResizeEvent) => void;
   onValueTypeToggled: (e: ValueTypeToggledEvent) => void;
-  onValueTypeModeChanged: (e: ValueTypeModeChangedEvent) => void;
+  onValueTypeModeChanged: (type: ValueType, mode: ValueTypeMode) => void;
   onEndiannessChanged: (e: EndiannessChangedEvent) => void;
   memorySlice: Uint8Array<ArrayBuffer>;
   viewerStart: number;
@@ -167,7 +166,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: Record<string, unknown>,
       <devtools-widget .widgetConfig=${widgetConfig(LinearMemoryHighlightChipList, {
         highlightInfos: highlightedMemoryAreas,
         focusedMemoryHighlight,
-        jumpToAddress: (address: number) => input.onJumpToAddress({data: address}),
+        jumpToAddress: (address: number) => input.onJumpToAddress(address),
         deleteHighlight: input.onDeleteMemoryHighlight,
       })}>
       </devtools-widget>
@@ -201,11 +200,11 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: Record<string, unknown>,
             valueTypeModes: input.valueTypeModes,
             endianness: input.endianness,
             memoryLength: input.outerMemoryLength,
+            onValueTypeModeChange: input.onValueTypeModeChanged,
+            onJumpToAddressClicked: input.onJumpToAddress
           }}
         @valuetypetoggled=${input.onValueTypeToggled}
-        @valuetypemodechanged=${input.onValueTypeModeChanged}
         @endiannesschanged=${input.onEndiannessChanged}
-        @jumptopointeraddress=${input.onJumpToAddress}
         >
       </devtools-linear-memory-inspector-interpreter>
     </div>`}
@@ -379,13 +378,9 @@ export class LinearMemoryInspector extends Common.ObjectWrapper.eventMixin<Event
     this.#view(viewInput, {}, this.contentElement);
   }
 
-  #onJumpToAddress(e: JumpToPointerAddressEvent|{data: number}): void {
-    // Stop event from bubbling up, since no element further up needs the event.
-    if (e instanceof Event) {
-      e.stopPropagation();
-    }
+  #onJumpToAddress(address: number): void {
     this.#currentNavigatorMode = Mode.SUBMITTED;
-    const addressInRange = Math.max(0, Math.min(e.data, this.#outerMemoryLength - 1));
+    const addressInRange = Math.max(0, Math.min(address, this.#outerMemoryLength - 1));
     this.#jumpToAddress(addressInRange);
   }
 
@@ -446,9 +441,7 @@ export class LinearMemoryInspector extends Common.ObjectWrapper.eventMixin<Event
     void this.requestUpdate();
   }
 
-  #onValueTypeModeChanged(e: ValueTypeModeChangedEvent): void {
-    e.stopImmediatePropagation();
-    const {type, mode} = e.data;
+  #onValueTypeModeChanged(type: ValueType, mode: ValueTypeMode): void {
     this.#valueTypeModes.set(type, mode);
     this.dispatchEventToListeners(Events.SETTINGS_CHANGED, this.#createSettings());
     void this.requestUpdate();

front_end/panels/linear_memory_inspector/components/LinearMemoryValueInterpreter.test.ts

@@ -13,7 +13,6 @@ import type * as UI from '../../../ui/legacy/legacy.js';
 
 import * as LinearMemoryInspectorComponents from './components.js';
 
-const DISPLAY_SELECTOR = 'devtools-linear-memory-inspector-interpreter-display';
 const TOOLBAR_SELECTOR = '.settings-toolbar';
 export const ENDIANNESS_SELECTOR = '[data-endianness]';
 
@@ -27,9 +26,11 @@ function assertSettingsRenders(
 }
 
 function assertDisplayRenders(component: HTMLElement) {
-  const display = getElementWithinComponent(
-      component, DISPLAY_SELECTOR, LinearMemoryInspectorComponents.ValueInterpreterDisplay.ValueInterpreterDisplay);
-  assert.isNotNull(display);
+  const widget = component.shadowRoot?.querySelector<
+      UI.Widget.WidgetElement<LinearMemoryInspectorComponents.ValueInterpreterDisplay.ValueInterpreterDisplay>>(
+      'devtools-widget');
+  assert.instanceOf(
+      widget?.getWidget(), LinearMemoryInspectorComponents.ValueInterpreterDisplay.ValueInterpreterDisplay);
 }
 
 function clickSettingsButton(
@@ -48,6 +49,8 @@ describe('LinearMemoryValueInterpreter', () => {
       endianness: LinearMemoryInspectorComponents.ValueInterpreterDisplayUtils.Endianness.LITTLE,
       valueTypes: new Set([LinearMemoryInspectorComponents.ValueInterpreterDisplayUtils.ValueType.INT8]),
       memoryLength: buffer.byteLength,
+      onValueTypeModeChange: () => {},
+      onJumpToAddressClicked: () => {},
     };
     renderElementIntoDOM(component);
     return component;

front_end/panels/linear_memory_inspector/components/LinearMemoryValueInterpreter.ts

@@ -4,7 +4,6 @@
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 import '../../../ui/kit/kit.js';
-import './ValueInterpreterDisplay.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
@@ -14,6 +13,7 @@ import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import linearMemoryValueInterpreterStyles from './linearMemoryValueInterpreter.css.js';
+import {ValueInterpreterDisplay} from './ValueInterpreterDisplay.js';
 import {Endianness, type ValueType, type ValueTypeMode} from './ValueInterpreterDisplayUtils.js';
 import {ValueInterpreterSettings} from './ValueInterpreterSettings.js';
 
@@ -61,9 +61,13 @@ export interface LinearMemoryValueInterpreterData {
   endianness: Endianness;
   valueTypeModes?: Map<ValueType, ValueTypeMode>;
   memoryLength: number;
+  onValueTypeModeChange: (type: ValueType, mode: ValueTypeMode) => void;
+  onJumpToAddressClicked: (address: number) => void;
 }
 
 export class LinearMemoryValueInterpreter extends HTMLElement {
+  #onValueTypeModeChange: (type: ValueType, mode: ValueTypeMode) => void = () => {};
+  #onJumpToAddressClicked: (address: number) => void = () => {};
   readonly #shadow = this.attachShadow({mode: 'open'});
   #endianness = Endianness.LITTLE;
   #buffer = new ArrayBuffer(0);
@@ -78,6 +82,8 @@ export class LinearMemoryValueInterpreter extends HTMLElement {
     this.#valueTypes = data.valueTypes;
     this.#valueTypeModeConfig = data.valueTypeModes || new Map();
     this.#memoryLength = data.memoryLength;
+    this.#onValueTypeModeChange = data.onValueTypeModeChange;
+    this.#onJumpToAddressClicked = data.onJumpToAddressClicked;
     this.#render();
   }
 
@@ -107,15 +113,16 @@ export class LinearMemoryValueInterpreter extends HTMLElement {
                 valueTypes: this.#valueTypes, onToggle: this.#onSettingTypeToggle })}>
               </devtools-widget>` :
             html`
-              <devtools-linear-memory-inspector-interpreter-display
-                .data=${{
+              <devtools-widget .widgetConfig=${widgetConfig(ValueInterpreterDisplay, {
                   buffer: this.#buffer,
                   valueTypes: this.#valueTypes,
                   endianness: this.#endianness,
                   valueTypeModes: this.#valueTypeModeConfig,
                   memoryLength: this.#memoryLength,
-                }}>
-              </devtools-linear-memory-inspector-interpreter-display>`}
+                  onValueTypeModeChange: this.#onValueTypeModeChange,
+                  onJumpToAddressClicked: this.#onJumpToAddressClicked,
+                })}>
+              </devtools-widget>`}
         </div>
       </div>
     `,