chrome-devtools-frontend 1.0.1549484 → 1.0.1553956

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

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import './LinearMemoryValueInterpreter.js';
-import './LinearMemoryHighlightChipList.js';
 import './LinearMemoryViewer.js';
 
 import * as Common from '../../../core/common/common.js';
@@ -11,6 +10,7 @@ import * as i18n from '../../../core/i18n/i18n.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import {html, nothing, render} from '../../../ui/lit/lit.js';
 
+import {LinearMemoryHighlightChipList} from './LinearMemoryHighlightChipList.js';
 import linearMemoryInspectorStyles from './linearMemoryInspector.css.js';
 import {formatAddress, parseAddress} from './LinearMemoryInspectorUtils.js';
 import {
@@ -20,10 +20,8 @@ import {
   Navigation,
   type PageNavigationEvent,
 } from './LinearMemoryNavigator.js';
-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,
@@ -43,6 +41,8 @@ const UIStrings = {
 const str_ =
     i18n.i18n.registerUIStrings('panels/linear_memory_inspector/components/LinearMemoryInspector.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+const {widgetConfig} = UI.Widget;
+
 /**
  * If the LinearMemoryInspector only receives a portion
  * of the original Uint8Array to show, it requires information
@@ -120,13 +120,13 @@ 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;
-  onEndiannessChanged: (e: EndiannessChangedEvent) => void;
+  onValueTypeToggled: (type: ValueType, checked: boolean) => void;
+  onValueTypeModeChanged: (type: ValueType, mode: ValueTypeMode) => void;
+  onEndiannessChanged: (endianness: Endianness) => void;
   memorySlice: Uint8Array<ArrayBuffer>;
   viewerStart: number;
 }
@@ -162,15 +162,13 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: Record<string, unknown>,
         @addressinputchanged=${input.onAddressChange}
         @pagenavigation=${input.onNavigatePage}
         @historynavigation=${input.onNavigateHistory}></devtools-linear-memory-inspector-navigator>
-        <devtools-linear-memory-highlight-chip-list
-        .data=${{
-          highlightInfos: highlightedMemoryAreas,
-          focusedMemoryHighlight,
-          jumpToAddress: (address: number) => input.onJumpToAddress({data: address}),
-          deleteHighlight: input.onDeleteMemoryHighlight,
-        }}
-        >
-        </devtools-linear-memory-highlight-chip-list>
+      <devtools-widget .widgetConfig=${widgetConfig(LinearMemoryHighlightChipList, {
+        highlightInfos: highlightedMemoryAreas,
+        focusedMemoryHighlight,
+        jumpToAddress: (address: number) => input.onJumpToAddress(address),
+        deleteHighlight: input.onDeleteMemoryHighlight,
+      })}>
+      </devtools-widget>
       <devtools-linear-memory-inspector-viewer
         .data=${
       {
@@ -201,11 +199,11 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: Record<string, unknown>,
             valueTypeModes: input.valueTypeModes,
             endianness: input.endianness,
             memoryLength: input.outerMemoryLength,
-          }}
-        @valuetypetoggled=${input.onValueTypeToggled}
-        @valuetypemodechanged=${input.onValueTypeModeChanged}
-        @endiannesschanged=${input.onEndiannessChanged}
-        @jumptopointeraddress=${input.onJumpToAddress}
+            onValueTypeModeChange: input.onValueTypeModeChanged,
+            onJumpToAddressClicked: input.onJumpToAddress,
+            onValueTypeToggled: input.onValueTypeToggled,
+            onEndiannessChanged: input.onEndiannessChanged,
+  }}
         >
       </devtools-linear-memory-inspector-interpreter>
     </div>`}
@@ -379,13 +377,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);
   }
 
@@ -408,8 +402,8 @@ export class LinearMemoryInspector extends Common.ObjectWrapper.eventMixin<Event
     return {valueTypes: this.#valueTypes, modes: this.#valueTypeModes, endianness: this.#endianness};
   }
 
-  #onEndiannessChanged(e: EndiannessChangedEvent): void {
-    this.#endianness = e.data;
+  #onEndiannessChanged(endianness: Endianness): void {
+    this.#endianness = endianness;
     this.dispatchEventToListeners(Events.SETTINGS_CHANGED, this.#createSettings());
     void this.requestUpdate();
   }
@@ -435,8 +429,7 @@ export class LinearMemoryInspector extends Common.ObjectWrapper.eventMixin<Event
     void this.requestUpdate();
   }
 
-  #onValueTypeToggled(e: ValueTypeToggledEvent): void {
-    const {type, checked} = e.data;
+  #onValueTypeToggled(type: ValueType, checked: boolean): void {
     if (checked) {
       this.#valueTypes.add(type);
     } else {
@@ -446,9 +439,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();

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

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
-import '../../../ui/components/icon_button/icon_button.js';
+import '../../../ui/kit/kit.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';

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

@@ -3,9 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
-import '../../../ui/components/icon_button/icon_button.js';
-import './ValueInterpreterDisplay.js';
-import './ValueInterpreterSettings.js';
+import '../../../ui/kit/kit.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
@@ -15,8 +13,9 @@ 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 type {TypeToggleEvent} from './ValueInterpreterSettings.js';
+import {ValueInterpreterSettings} from './ValueInterpreterSettings.js';
 
 const UIStrings = {
   /**
@@ -34,26 +33,7 @@ const str_ =
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 const {render, html} = Lit;
-
-export class EndiannessChangedEvent extends Event {
-  static readonly eventName = 'endiannesschanged';
-  data: Endianness;
-
-  constructor(endianness: Endianness) {
-    super(EndiannessChangedEvent.eventName);
-    this.data = endianness;
-  }
-}
-
-export class ValueTypeToggledEvent extends Event {
-  static readonly eventName = 'valuetypetoggled';
-  data: {type: ValueType, checked: boolean};
-
-  constructor(type: ValueType, checked: boolean) {
-    super(ValueTypeToggledEvent.eventName);
-    this.data = {type, checked};
-  }
-}
+const {widgetConfig} = UI.Widget;
 
 export interface LinearMemoryValueInterpreterData {
   value: ArrayBuffer;
@@ -61,10 +41,18 @@ export interface LinearMemoryValueInterpreterData {
   endianness: Endianness;
   valueTypeModes?: Map<ValueType, ValueTypeMode>;
   memoryLength: number;
+  onValueTypeModeChange: (type: ValueType, mode: ValueTypeMode) => void;
+  onJumpToAddressClicked: (address: number) => void;
+  onEndiannessChanged: (endianness: Endianness) => void;
+  onValueTypeToggled: (type: ValueType, checked: boolean) => void;
 }
 
 export class LinearMemoryValueInterpreter extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
+  #onValueTypeModeChange: (type: ValueType, mode: ValueTypeMode) => void = () => {};
+  #onJumpToAddressClicked: (address: number) => void = () => {};
+  #onEndiannessChanged: (endianness: Endianness) => void = () => {};
+  #onValueTypeToggled: (type: ValueType, checked: boolean) => void = () => {};
   #endianness = Endianness.LITTLE;
   #buffer = new ArrayBuffer(0);
   #valueTypes = new Set<ValueType>();
@@ -78,6 +66,46 @@ 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.#onEndiannessChanged = data.onEndiannessChanged;
+    this.#onValueTypeToggled = data.onValueTypeToggled;
+    this.#render();
+  }
+
+  get onValueTypeModeChange(): (type: ValueType, mode: ValueTypeMode) => void {
+    return this.#onValueTypeModeChange;
+  }
+
+  set onValueTypeModeChange(value: (type: ValueType, mode: ValueTypeMode) => void) {
+    this.#onValueTypeModeChange = value;
+    this.#render();
+  }
+
+  get onJumpToAddressClicked(): (address: number) => void {
+    return this.#onJumpToAddressClicked;
+  }
+
+  set onJumpToAddressClicked(value: (address: number) => void) {
+    this.#onJumpToAddressClicked = value;
+    this.#render();
+  }
+
+  get onEndiannessChanged(): (endianness: Endianness) => void {
+    return this.#onEndiannessChanged;
+  }
+
+  set onEndiannessChanged(value: (endianness: Endianness) => void) {
+    this.#onEndiannessChanged = value;
+    this.#render();
+  }
+
+  get onValueTypeToggled(): (type: ValueType, checked: boolean) => void {
+    return this.#onValueTypeToggled;
+  }
+
+  set onValueTypeToggled(value: (type: ValueType, checked: boolean) => void) {
+    this.#onValueTypeToggled = value;
     this.#render();
   }
 
@@ -103,20 +131,20 @@ export class LinearMemoryValueInterpreter extends HTMLElement {
         <div>
           ${this.#showSettings ?
             html`
-              <devtools-linear-memory-inspector-interpreter-settings
-                .data=${{ valueTypes: this.#valueTypes }}
-                @typetoggle=${this.#onTypeToggle}>
-              </devtools-linear-memory-inspector-interpreter-settings>` :
+              <devtools-widget .widgetConfig=${widgetConfig(ValueInterpreterSettings, {
+                valueTypes: this.#valueTypes, onToggle: this.#onValueTypeToggled })}>
+              </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>
     `,
@@ -125,15 +153,7 @@ export class LinearMemoryValueInterpreter extends HTMLElement {
     // clang-format on
   }
 
-  #onEndiannessChange(event: Event): void {
-    event.preventDefault();
-    const select = event.target as HTMLInputElement;
-    const endianness = select.value as Endianness;
-    this.dispatchEvent(new EndiannessChangedEvent(endianness));
-  }
-
   #renderEndiannessSetting(): Lit.TemplateResult {
-    const onEnumSettingChange = this.#onEndiannessChange.bind(this);
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     return html`
@@ -141,7 +161,7 @@ export class LinearMemoryValueInterpreter extends HTMLElement {
       <select
         jslog=${VisualLogging.dropDown('linear-memory-inspector.endianess').track({change: true})}
         style="border: none;"
-        data-endianness="true" @change=${onEnumSettingChange}>
+        data-endianness="true" @change=${(e: Event) => this.#onEndiannessChanged((e.target as HTMLSelectElement).value as Endianness)}>
         ${[Endianness.LITTLE, Endianness.BIG].map(endianness => {
             return html`<option value=${endianness} .selected=${this.#endianness === endianness}
             jslog=${VisualLogging.item(Platform.StringUtilities.toKebabCase(endianness)).track({click: true})}>${
@@ -157,10 +177,6 @@ export class LinearMemoryValueInterpreter extends HTMLElement {
     this.#showSettings = !this.#showSettings;
     this.#render();
   }
-
-  #onTypeToggle(e: TypeToggleEvent): void {
-    this.dispatchEvent(new ValueTypeToggledEvent(e.data.type, e.data.checked));
-  }
 }
 
 customElements.define('devtools-linear-memory-inspector-interpreter', LinearMemoryValueInterpreter);