Skip to content

Commit cda880c

Browse files
ktranDevtools-frontend LUCI CQ
ktran
authored and
Devtools-frontend LUCI CQ
committed
Migrate LinearMemoryValueInterpreter to ui eng vision
Fixed: 407941424 Change-Id: Ia3868f3ffc9e040476dac05051d88f7f2a6a9af6 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7233155 Commit-Queue: Kim-Anh Tran <kimanh@chromium.org> Reviewed-by: Simon Zünd <szuend@chromium.org>
1 parent 7116806 commit cda880c

File tree

5 files changed

+133
-125
lines changed

5 files changed

+133
-125
lines changed

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

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
// Use of this source code is governed by a BSD-style license that can be
33
// found in the LICENSE file.
44

5-
import './LinearMemoryValueInterpreter.js';
65
import './LinearMemoryViewer.js';
76

87
import * as Common from '../../../core/common/common.js';
@@ -20,6 +19,7 @@ import {
2019
Navigation,
2120
type PageNavigationEvent,
2221
} from './LinearMemoryNavigator.js';
22+
import {LinearMemoryValueInterpreter} from './LinearMemoryValueInterpreter.js';
2323
import type {ByteSelectedEvent, ResizeEvent} from './LinearMemoryViewer.js';
2424
import type {HighlightInfo} from './LinearMemoryViewerUtils.js';
2525
import {
@@ -186,10 +186,8 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: Record<string, unknown>,
186186
${
187187
input.hideValueInspector ? nothing : html`
188188
<div class="value-interpreter">
189-
<devtools-linear-memory-inspector-interpreter
190-
.data=${
191-
{
192-
value: input.memory
189+
<devtools-widget .widgetConfig=${widgetConfig(LinearMemoryValueInterpreter, {
190+
buffer: input.memory
193191
.slice(
194192
input.address - input.memoryOffset,
195193
input.address + VALUE_INTEPRETER_MAX_NUM_BYTES,
@@ -203,9 +201,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: Record<string, unknown>,
203201
onJumpToAddressClicked: input.onJumpToAddress,
204202
onValueTypeToggled: input.onValueTypeToggled,
205203
onEndiannessChanged: input.onEndiannessChanged,
206-
}}
207-
>
208-
</devtools-linear-memory-inspector-interpreter>
204+
})}></devtools-widget>
209205
</div>`}
210206
`,
211207
target);

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

Lines changed: 91 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
// Copyright 2020 The Chromium Authors
22
// Use of this source code is governed by a BSD-style license that can be
33
// found in the LICENSE file.
4-
/* eslint-disable @devtools/no-lit-render-outside-of-view */
54

65
import '../../../ui/kit/kit.js';
76

@@ -35,16 +34,18 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
3534
const {render, html} = Lit;
3635
const {widgetConfig} = UI.Widget;
3736

38-
export interface LinearMemoryValueInterpreterData {
39-
value: ArrayBuffer;
40-
valueTypes: Set<ValueType>;
37+
export interface ViewInput {
4138
endianness: Endianness;
42-
valueTypeModes?: Map<ValueType, ValueTypeMode>;
39+
buffer: ArrayBuffer;
40+
valueTypes: Set<ValueType>;
41+
valueTypeModes: Map<ValueType, ValueTypeMode>;
4342
memoryLength: number;
43+
showSettings: boolean;
4444
onValueTypeModeChange: (type: ValueType, mode: ValueTypeMode) => void;
4545
onJumpToAddressClicked: (address: number) => void;
4646
onEndiannessChanged: (endianness: Endianness) => void;
4747
onValueTypeToggled: (type: ValueType, checked: boolean) => void;
48+
onSettingsToggle: () => void;
4849
}
4950

5051
function renderEndiannessSetting(
@@ -68,42 +69,83 @@ function renderEndiannessSetting(
6869
// clang-format on
6970
}
7071

71-
export class LinearMemoryValueInterpreter extends HTMLElement {
72-
readonly #shadow = this.attachShadow({mode: 'open'});
73-
#onValueTypeModeChange: (type: ValueType, mode: ValueTypeMode) => void = () => {};
74-
#onJumpToAddressClicked: (address: number) => void = () => {};
75-
#onEndiannessChanged: (endianness: Endianness) => void = () => {};
76-
#onValueTypeToggled: (type: ValueType, checked: boolean) => void = () => {};
72+
export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLElement): void => {
73+
// Disabled until https://crbug.com/1079231 is fixed.
74+
// clang-format off
75+
render(html`
76+
<style>${UI.inspectorCommonStyles}</style>
77+
<style>${linearMemoryValueInterpreterStyles}</style>
78+
<div class="value-interpreter">
79+
<div class="settings-toolbar">
80+
${renderEndiannessSetting(input.onEndiannessChanged, input.endianness)}
81+
<devtools-button data-settings="true" class="toolbar-button ${input.showSettings ? '' : 'disabled'}"
82+
title=${i18nString(UIStrings.toggleValueTypeSettings)} @click=${input.onSettingsToggle}
83+
jslog=${VisualLogging.toggleSubpane('linear-memory-inspector.toggle-value-settings').track({ click: true })}
84+
.iconName=${'gear'}
85+
.toggledIconName=${'gear-filled'}
86+
.toggleType=${Buttons.Button.ToggleType.PRIMARY}
87+
.variant=${Buttons.Button.Variant.ICON_TOGGLE}
88+
></devtools-button>
89+
</div>
90+
<span class="divider"></span>
91+
<div>
92+
${input.showSettings ?
93+
html`
94+
<devtools-widget .widgetConfig=${widgetConfig(ValueInterpreterSettings, {
95+
valueTypes: input.valueTypes, onToggle: input.onValueTypeToggled
96+
})}>
97+
</devtools-widget>` :
98+
html`
99+
<devtools-widget .widgetConfig=${widgetConfig(ValueInterpreterDisplay, {
100+
buffer: input.buffer,
101+
valueTypes: input.valueTypes,
102+
endianness: input.endianness,
103+
valueTypeModes: input.valueTypeModes,
104+
memoryLength: input.memoryLength,
105+
onValueTypeModeChange: input.onValueTypeModeChange,
106+
onJumpToAddressClicked: input.onJumpToAddressClicked,
107+
})}>
108+
</devtools-widget>`}
109+
</div>
110+
</div>
111+
`,
112+
target,
113+
);
114+
// clang-format on
115+
};
116+
117+
export type View = typeof DEFAULT_VIEW;
118+
119+
export class LinearMemoryValueInterpreter extends UI.Widget.Widget {
120+
readonly #view: View;
77121
#endianness = Endianness.LITTLE;
78122
#buffer = new ArrayBuffer(0);
79123
#valueTypes = new Set<ValueType>();
80124
#valueTypeModeConfig = new Map<ValueType, ValueTypeMode>();
81125
#memoryLength = 0;
82126
#showSettings = false;
127+
#onValueTypeModeChange: (type: ValueType, mode: ValueTypeMode) => void = () => {};
128+
#onJumpToAddressClicked: (address: number) => void = () => {};
129+
#onEndiannessChanged: (endianness: Endianness) => void = () => {};
130+
#onValueTypeToggled: (type: ValueType, checked: boolean) => void = () => {};
83131

84-
set data(data: LinearMemoryValueInterpreterData) {
85-
this.#endianness = data.endianness;
86-
this.#buffer = data.value;
87-
this.#valueTypes = data.valueTypes;
88-
this.#valueTypeModeConfig = data.valueTypeModes || new Map();
89-
this.#memoryLength = data.memoryLength;
90-
this.#onValueTypeModeChange = data.onValueTypeModeChange;
91-
this.#onJumpToAddressClicked = data.onJumpToAddressClicked;
92-
this.#onEndiannessChanged = data.onEndiannessChanged;
93-
this.#onValueTypeToggled = data.onValueTypeToggled;
94-
this.#render();
132+
constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
133+
super(element);
134+
this.#view = view;
95135
}
96136

97-
set value(value: ArrayBuffer) {
137+
set buffer(value: ArrayBuffer) {
98138
this.#buffer = value;
139+
this.requestUpdate();
99140
}
100141

101-
get value(): ArrayBuffer {
142+
get buffer(): ArrayBuffer {
102143
return this.#buffer;
103144
}
104145

105146
set valueTypes(value: Set<ValueType>) {
106147
this.#valueTypes = value;
148+
this.requestUpdate();
107149
}
108150

109151
get valueTypes(): Set<ValueType> {
@@ -112,6 +154,7 @@ export class LinearMemoryValueInterpreter extends HTMLElement {
112154

113155
set valueTypeModes(value: Map<ValueType, ValueTypeMode>) {
114156
this.#valueTypeModeConfig = value;
157+
this.requestUpdate();
115158
}
116159

117160
get valueTypeModes(): Map<ValueType, ValueTypeMode> {
@@ -120,6 +163,7 @@ export class LinearMemoryValueInterpreter extends HTMLElement {
120163

121164
set endianness(value: Endianness) {
122165
this.#endianness = value;
166+
this.requestUpdate();
123167
}
124168

125169
get endianness(): Endianness {
@@ -128,6 +172,7 @@ export class LinearMemoryValueInterpreter extends HTMLElement {
128172

129173
set memoryLength(value: number) {
130174
this.#memoryLength = value;
175+
this.requestUpdate();
131176
}
132177

133178
get memoryLength(): number {
@@ -140,7 +185,7 @@ export class LinearMemoryValueInterpreter extends HTMLElement {
140185

141186
set onValueTypeModeChange(value: (type: ValueType, mode: ValueTypeMode) => void) {
142187
this.#onValueTypeModeChange = value;
143-
this.#render();
188+
this.requestUpdate();
144189
}
145190

146191
get onJumpToAddressClicked(): (address: number) => void {
@@ -149,7 +194,7 @@ export class LinearMemoryValueInterpreter extends HTMLElement {
149194

150195
set onJumpToAddressClicked(value: (address: number) => void) {
151196
this.#onJumpToAddressClicked = value;
152-
this.#render();
197+
this.requestUpdate();
153198
}
154199

155200
get onEndiannessChanged(): (endianness: Endianness) => void {
@@ -158,7 +203,7 @@ export class LinearMemoryValueInterpreter extends HTMLElement {
158203

159204
set onEndiannessChanged(value: (endianness: Endianness) => void) {
160205
this.#onEndiannessChanged = value;
161-
this.#render();
206+
this.performUpdate();
162207
}
163208

164209
get onValueTypeToggled(): (type: ValueType, checked: boolean) => void {
@@ -167,63 +212,28 @@ export class LinearMemoryValueInterpreter extends HTMLElement {
167212

168213
set onValueTypeToggled(value: (type: ValueType, checked: boolean) => void) {
169214
this.#onValueTypeToggled = value;
170-
this.#render();
171-
}
172-
173-
#render(): void {
174-
// Disabled until https://crbug.com/1079231 is fixed.
175-
// clang-format off
176-
render(html`
177-
<style>${UI.inspectorCommonStyles}</style>
178-
<style>${linearMemoryValueInterpreterStyles}</style>
179-
<div class="value-interpreter">
180-
<div class="settings-toolbar">
181-
${renderEndiannessSetting(this.#onEndiannessChanged, this.#endianness)}
182-
<devtools-button data-settings="true" class="toolbar-button ${this.#showSettings ? '' : 'disabled'}"
183-
title=${i18nString(UIStrings.toggleValueTypeSettings)} @click=${this.#onSettingsToggle}
184-
jslog=${VisualLogging.toggleSubpane('linear-memory-inspector.toggle-value-settings').track({click: true})}
185-
.iconName=${'gear'}
186-
.toggledIconName=${'gear-filled'}
187-
.toggleType=${Buttons.Button.ToggleType.PRIMARY}
188-
.variant=${Buttons.Button.Variant.ICON_TOGGLE}
189-
></devtools-button>
190-
</div>
191-
<span class="divider"></span>
192-
<div>
193-
${this.#showSettings ?
194-
html`
195-
<devtools-widget .widgetConfig=${widgetConfig(ValueInterpreterSettings, {
196-
valueTypes: this.#valueTypes, onToggle: this.#onValueTypeToggled })}>
197-
</devtools-widget>` :
198-
html`
199-
<devtools-widget .widgetConfig=${widgetConfig(ValueInterpreterDisplay, {
200-
buffer: this.#buffer,
201-
valueTypes: this.#valueTypes,
202-
endianness: this.#endianness,
203-
valueTypeModes: this.#valueTypeModeConfig,
204-
memoryLength: this.#memoryLength,
205-
onValueTypeModeChange: this.#onValueTypeModeChange,
206-
onJumpToAddressClicked: this.#onJumpToAddressClicked,
207-
})}>
208-
</devtools-widget>`}
209-
</div>
210-
</div>
211-
`,
212-
this.#shadow, { host: this },
213-
);
214-
// clang-format on
215+
this.performUpdate();
216+
}
217+
218+
override performUpdate(): void {
219+
const viewInput: ViewInput = {
220+
endianness: this.#endianness,
221+
buffer: this.#buffer,
222+
valueTypes: this.#valueTypes,
223+
valueTypeModes: this.#valueTypeModeConfig,
224+
memoryLength: this.#memoryLength,
225+
showSettings: this.#showSettings,
226+
onValueTypeModeChange: this.#onValueTypeModeChange,
227+
onJumpToAddressClicked: this.#onJumpToAddressClicked,
228+
onEndiannessChanged: this.#onEndiannessChanged,
229+
onValueTypeToggled: this.#onValueTypeToggled,
230+
onSettingsToggle: this.#onSettingsToggle.bind(this),
231+
};
232+
this.#view(viewInput, undefined, this.contentElement);
215233
}
216234

217235
#onSettingsToggle(): void {
218236
this.#showSettings = !this.#showSettings;
219-
this.#render();
220-
}
221-
}
222-
223-
customElements.define('devtools-linear-memory-inspector-interpreter', LinearMemoryValueInterpreter);
224-
225-
declare global {
226-
interface HTMLElementTagNameMap {
227-
'devtools-linear-memory-inspector-interpreter': LinearMemoryValueInterpreter;
237+
this.requestUpdate();
228238
}
229239
}

‎front_end/panels/linear_memory_inspector/components/linearMemoryValueInterpreter.css‎

Lines changed: 37 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -4,44 +4,46 @@
44
* found in the LICENSE file.
55
*/
66

7-
:host {
8-
flex: auto;
9-
display: flex;
10-
}
7+
@scope to (devtools-widget > *) {
8+
:scope {
9+
flex: auto;
10+
display: flex;
11+
}
1112

12-
.value-interpreter {
13-
border: 1px solid var(--sys-color-divider);
14-
background-color: var(--sys-color-cdt-base-container);
15-
overflow: hidden;
16-
width: 400px;
17-
}
13+
.value-interpreter {
14+
border: 1px solid var(--sys-color-divider);
15+
background-color: var(--sys-color-cdt-base-container);
16+
overflow: hidden;
17+
width: 400px;
18+
}
1819

19-
.settings-toolbar {
20-
min-height: 26px;
21-
display: flex;
22-
flex-wrap: nowrap;
23-
justify-content: space-between;
24-
padding-left: var(--sys-size-3);
25-
padding-right: var(--sys-size-3);
26-
align-items: center;
27-
}
20+
.settings-toolbar {
21+
min-height: 26px;
22+
display: flex;
23+
flex-wrap: nowrap;
24+
justify-content: space-between;
25+
padding-left: var(--sys-size-3);
26+
padding-right: var(--sys-size-3);
27+
align-items: center;
28+
}
2829

29-
.settings-toolbar-button {
30-
padding: 0;
31-
width: 20px;
32-
height: 20px;
33-
border: none;
34-
outline: none;
35-
background-color: transparent;
36-
}
30+
.settings-toolbar-button {
31+
padding: 0;
32+
width: 20px;
33+
height: 20px;
34+
border: none;
35+
outline: none;
36+
background-color: transparent;
37+
}
3738

38-
.settings-toolbar-button.active devtools-icon {
39-
color: var(--icon-toggled);
40-
}
39+
.settings-toolbar-button.active devtools-icon {
40+
color: var(--icon-toggled);
41+
}
4142

42-
.divider {
43-
display: block;
44-
height: 1px;
45-
margin-bottom: 12px;
46-
background-color: var(--sys-color-divider);
43+
.divider {
44+
display: block;
45+
height: 1px;
46+
margin-bottom: 12px;
47+
background-color: var(--sys-color-divider);
48+
}
4749
}

‎test/e2e/sources/can-open-linear-memory-inspector.test.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ const LINEAR_MEMORY_INSPECTOR_TAB_SELECTOR = '#tab-linear-memory-inspector';
2222
const LINEAR_MEMORY_INSPECTOR_TABBED_PANE_SELECTOR = DRAWER_PANEL_SELECTOR + ' .tabbed-pane';
2323
const LINEAR_MEMORY_INSPECTOR_TABBED_PANE_TAB_SELECTOR = '.tabbed-pane-header-tab';
2424
const LINEAR_MEMORY_INSPECTOR_TAB_TITLE_SELECTOR = '.tabbed-pane-header-tab-title';
25-
const VALUE_INTERPRETER_SELECTOR = 'devtools-linear-memory-inspector-interpreter';
25+
const VALUE_INTERPRETER_SELECTOR = '.value-interpreter';
2626

2727
describe('Linear Memory Inspector', () => {
2828
it('renders selectable values', async ({devToolsPage, inspectedPage}) => {

‎test/goldens/linux/linear_memory_inspector/lmi.png‎

-6.6 KB
Loading

0 commit comments

Comments
 (0)