chrome-devtools-frontend 1.0.1015276 → 1.0.1015822

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/config/gni/devtools_grd_files.gni +1 -0
  2. package/front_end/core/common/JavaScriptMetaData.ts +20 -0
  3. package/front_end/core/i18n/locales/en-US.json +3 -3
  4. package/front_end/core/i18n/locales/en-XL.json +3 -3
  5. package/front_end/core/sdk/DOMModel.ts +9 -0
  6. package/front_end/core/sdk/DebuggerModel.ts +0 -28
  7. package/front_end/core/sdk/RemoteObject.ts +15 -0
  8. package/front_end/core/sdk/Script.ts +5 -14
  9. package/front_end/generated/InspectorBackendCommands.js +7 -3
  10. package/front_end/generated/protocol-mapping.d.ts +16 -0
  11. package/front_end/generated/protocol-proxy-api.d.ts +18 -0
  12. package/front_end/generated/protocol.ts +31 -5
  13. package/front_end/models/bindings/ResourceScriptMapping.ts +1 -2
  14. package/front_end/models/emulation/EmulatedDevices.ts +0 -13
  15. package/front_end/models/javascript_metadata/DOMPinnedProperties.ts +784 -3251
  16. package/front_end/models/javascript_metadata/JavaScriptMetadata.ts +3 -0
  17. package/front_end/models/javascript_metadata/NativeFunctions.js +4 -4
  18. package/front_end/models/javascript_metadata/javascript_metadata.ts +3 -0
  19. package/front_end/models/source_map_scopes/NamesResolver.ts +11 -4
  20. package/front_end/panels/elements/ElementsTreeElement.ts +7 -3
  21. package/front_end/panels/lighthouse/lighthouseStartView.css +3 -1
  22. package/front_end/panels/sources/ScopeChainSidebarPane.ts +4 -42
  23. package/front_end/ui/components/linear_memory_inspector/LinearMemoryInspectorController.ts +64 -8
  24. package/front_end/ui/legacy/components/object_ui/ObjectPropertiesSection.ts +93 -9
  25. package/front_end/ui/legacy/components/object_ui/objectPropertiesSection.css +13 -0
  26. package/front_end/ui/legacy/components/object_ui/objectValue.css +1 -4
  27. package/package.json +1 -1
@@ -5,10 +5,13 @@
5
5
  import type * as Common from '../../core/common/common.js';
6
6
 
7
7
  import {NativeFunctions} from './NativeFunctions.js';
8
+ import * as DOMPinnedProperties from './DOMPinnedProperties.js';
8
9
 
9
10
  let javaScriptMetadataInstance: JavaScriptMetadataImpl;
10
11
 
11
12
  export class JavaScriptMetadataImpl implements Common.JavaScriptMetaData.JavaScriptMetaData {
13
+ static readonly domPinnedProperties = DOMPinnedProperties;
14
+
12
15
  private readonly uniqueFunctions: Map<string, string[][]>;
13
16
  private readonly receiverMethods: Map<string, Map<string, string[][]>>;
14
17
  static instance(opts: {
@@ -5475,6 +5475,10 @@ export const NativeFunctions = [
5475
5475
  name: 'ScrollTimeline',
5476
5476
  signatures: [['?options']]
5477
5477
  },
5478
+ {
5479
+ name: 'ViewTimeline',
5480
+ signatures: [['?options']]
5481
+ },
5478
5482
  {
5479
5483
  name: 'AccessibleNodeList',
5480
5484
  signatures: [['?nodes']]
@@ -7532,10 +7536,6 @@ export const NativeFunctions = [
7532
7536
  name: 'FetchEvent',
7533
7537
  signatures: [['type','eventInitDict']]
7534
7538
  },
7535
- {
7536
- name: 'addPerformanceEntry',
7537
- signatures: [['entry']]
7538
- },
7539
7539
  {
7540
7540
  name: 'InstallEvent',
7541
7541
  signatures: [['type','?eventInitDict']]
@@ -3,12 +3,15 @@
3
3
  // found in the LICENSE file.
4
4
 
5
5
  import './NativeFunctions.js';
6
+ import './DOMPinnedProperties.js';
6
7
  import './JavaScriptMetadata.js';
7
8
 
9
+ import * as DOMPinnedProperties from './DOMPinnedProperties.js';
8
10
  import * as JavaScriptMetadata from './JavaScriptMetadata.js';
9
11
  import * as NativeFunctions from './NativeFunctions.js';
10
12
 
11
13
  export {
14
+ DOMPinnedProperties,
12
15
  JavaScriptMetadata,
13
16
  NativeFunctions,
14
17
  };
@@ -54,12 +54,19 @@ const computeScopeTree = async function(functionScope: SDK.DebuggerModel.ScopeCh
54
54
  functionEndLocation.columnNumber);
55
55
  const scopeText = text.extract(scopeRange);
56
56
  const scopeStart = text.toSourceRange(scopeRange).offset;
57
- let prefix = 'function fui';
58
- let scopeTree = await Formatter.FormatterWorkerPool.formatterWorkerPool().javaScriptScopeTree(prefix + scopeText);
57
+ // We wrap the scope in a class constructor. This handles the case where the
58
+ // scope is a (non-arrow) function and the case where it is a constructor
59
+ // (so that parsing 'super' calls succeeds).
60
+ let prefix = 'class DummyClass extends DummyBase { constructor';
61
+ let suffix = '}';
62
+ let scopeTree =
63
+ await Formatter.FormatterWorkerPool.formatterWorkerPool().javaScriptScopeTree(prefix + scopeText + suffix);
59
64
  if (!scopeTree) {
60
65
  // Try to parse the function as an arrow function.
61
- prefix = 'let fui = ';
62
- scopeTree = await Formatter.FormatterWorkerPool.formatterWorkerPool().javaScriptScopeTree(prefix + scopeText);
66
+ prefix = '';
67
+ suffix = '';
68
+ scopeTree =
69
+ await Formatter.FormatterWorkerPool.formatterWorkerPool().javaScriptScopeTree(prefix + scopeText + suffix);
63
70
  }
64
71
  if (!scopeTree) {
65
72
  return null;
@@ -1706,9 +1706,13 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
1706
1706
  break;
1707
1707
 
1708
1708
  case Node.ELEMENT_NODE: {
1709
- const pseudoType = node.pseudoType();
1710
- if (pseudoType) {
1711
- this.buildPseudoElementDOM(titleDOM, pseudoType);
1709
+ let pseudoElementName = node.pseudoType();
1710
+ if (pseudoElementName) {
1711
+ const pseudoIdentifier = node.pseudoIdentifier();
1712
+ if (pseudoIdentifier) {
1713
+ pseudoElementName += `(${pseudoIdentifier})`;
1714
+ }
1715
+ this.buildPseudoElementDOM(titleDOM, pseudoElementName);
1712
1716
  break;
1713
1717
  }
1714
1718
 
@@ -18,7 +18,9 @@
18
18
  }
19
19
 
20
20
  .lighthouse-start-view-fr {
21
- margin: 24px;
21
+ padding: 24px;
22
+ overflow: auto;
23
+ height: 100%;
22
24
  }
23
25
 
24
26
  .lighthouse-start-view header {
@@ -28,12 +28,11 @@
28
28
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
29
29
  */
30
30
 
31
- import * as Common from '../../core/common/common.js';
31
+ import type * as Common from '../../core/common/common.js';
32
32
  import * as Host from '../../core/host/host.js';
33
33
  import * as i18n from '../../core/i18n/i18n.js';
34
34
  import * as SDK from '../../core/sdk/sdk.js';
35
35
  import * as Protocol from '../../generated/protocol.js';
36
- import * as Bindings from '../../models/bindings/bindings.js';
37
36
  import * as SourceMapScopes from '../../models/source_map_scopes/source_map_scopes.js';
38
37
  import * as LinearMemoryInspector from '../../ui/components/linear_memory_inspector/linear_memory_inspector.js';
39
38
  import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
@@ -76,10 +75,6 @@ const UIStrings = {
76
75
  *@description A context menu item in the Scope View of the Sources Panel
77
76
  */
78
77
  revealInMemoryInspectorPanel: 'Reveal in Memory Inspector panel',
79
- /**
80
- *@description Error message that shows up in the console if a buffer to be opened in the lienar memory inspector cannot be found.
81
- */
82
- couldNotOpenLinearMemory: 'Could not open linear memory inspector: failed locating buffer.',
83
78
  };
84
79
  const str_ = i18n.i18n.registerUIStrings('panels/sources/ScopeChainSidebarPane.ts', UIStrings);
85
80
  const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -310,24 +305,10 @@ export class OpenLinearMemoryInspector extends UI.Widget.VBox implements UI.Cont
310
305
  return openLinearMemoryInspectorInstance;
311
306
  }
312
307
 
313
- private isMemoryObjectProperty(obj: SDK.RemoteObject.RemoteObject): boolean {
314
- const isWasmOrBuffer = obj.type === 'object' && obj.subtype &&
315
- LinearMemoryInspector.LinearMemoryInspectorController.ACCEPTED_MEMORY_TYPES.includes(obj.subtype);
316
- if (isWasmOrBuffer) {
317
- return true;
318
- }
319
-
320
- const isWasmDWARF = obj instanceof Bindings.DebuggerLanguagePlugins.ValueNode;
321
- if (isWasmDWARF) {
322
- return obj.inspectableAddress !== undefined;
323
- }
324
-
325
- return false;
326
- }
327
-
328
308
  appendApplicableItems(event: Event, contextMenu: UI.ContextMenu.ContextMenu, target: Object): void {
329
309
  if (target instanceof ObjectUI.ObjectPropertiesSection.ObjectPropertyTreeElement) {
330
- if (target.property && target.property.value && this.isMemoryObjectProperty(target.property.value)) {
310
+ if (target.property && target.property.value &&
311
+ LinearMemoryInspector.LinearMemoryInspectorController.isMemoryObjectProperty(target.property.value)) {
331
312
  contextMenu.debugSection().appendItem(
332
313
  i18nString(UIStrings.revealInMemoryInspectorPanel),
333
314
  this.openMemoryInspector.bind(this, target.property.value));
@@ -337,26 +318,7 @@ export class OpenLinearMemoryInspector extends UI.Widget.VBox implements UI.Cont
337
318
 
338
319
  private async openMemoryInspector(obj: SDK.RemoteObject.RemoteObject): Promise<void> {
339
320
  const controller = LinearMemoryInspector.LinearMemoryInspectorController.LinearMemoryInspectorController.instance();
340
- let address = 0;
341
- let memoryObj: SDK.RemoteObject.RemoteObject = obj;
342
-
343
- if (obj instanceof Bindings.DebuggerLanguagePlugins.ValueNode) {
344
- const valueNode = obj;
345
- address = valueNode.inspectableAddress || 0;
346
- const callFrame = valueNode.callFrame;
347
- const response = await obj.debuggerModel().agent.invoke_evaluateOnCallFrame({
348
- callFrameId: callFrame.id,
349
- expression: 'memories[0]',
350
- });
351
- const error = response.getError();
352
- if (error) {
353
- console.error(error);
354
- Common.Console.Console.instance().error(i18nString(UIStrings.couldNotOpenLinearMemory));
355
- }
356
- const runtimeModel = obj.debuggerModel().runtimeModel();
357
- memoryObj = runtimeModel.createRemoteObject(response.result);
358
- }
359
321
  Host.userMetrics.linearMemoryInspectorRevealedFrom(Host.UserMetrics.LinearMemoryInspectorRevealedFrom.ContextMenu);
360
- void controller.openInspectorView(memoryObj, address);
322
+ void controller.openInspectorView(obj, 0);
361
323
  }
362
324
  }
@@ -4,6 +4,7 @@
4
4
 
5
5
  import * as Common from '../../../core/common/common.js';
6
6
  import * as Host from '../../../core/host/host.js';
7
+ import * as i18n from '../../../core/i18n/i18n.js';
7
8
  import * as SDK from '../../../core/sdk/sdk.js';
8
9
  import * as Protocol from '../../../generated/protocol.js';
9
10
  import * as UI from '../../legacy/legacy.js';
@@ -12,7 +13,17 @@ import type {Settings} from './LinearMemoryInspector.js';
12
13
  import {Events as LmiEvents, LinearMemoryInspectorPaneImpl} from './LinearMemoryInspectorPane.js';
13
14
  import type {ValueType, ValueTypeMode} from './ValueInterpreterDisplayUtils.js';
14
15
  import {Endianness, getDefaultValueTypeMapping} from './ValueInterpreterDisplayUtils.js';
16
+ import * as Bindings from '../../../models/bindings/bindings.js';
15
17
 
18
+ const UIStrings = {
19
+ /**
20
+ *@description Error message that shows up in the console if a buffer to be opened in the linear memory inspector cannot be found.
21
+ */
22
+ couldNotOpenLinearMemory: 'Could not open linear memory inspector: failed locating buffer.',
23
+ };
24
+ const str_ =
25
+ i18n.i18n.registerUIStrings('ui/components/linear_memory_inspector/LinearMemoryInspectorController.ts', UIStrings);
26
+ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
16
27
  const LINEAR_MEMORY_INSPECTOR_OBJECT_GROUP = 'linear-memory-inspector';
17
28
  const MEMORY_TRANSFER_MIN_CHUNK_SIZE = 1000;
18
29
  export const ACCEPTED_MEMORY_TYPES = ['webassemblymemory', 'typedarray', 'dataview', 'arraybuffer'];
@@ -66,6 +77,20 @@ async function getBufferFromObject(obj: SDK.RemoteObject.RemoteObject): Promise<
66
77
  return new SDK.RemoteObject.RemoteArrayBuffer(obj);
67
78
  }
68
79
 
80
+ export function isMemoryObjectProperty(obj: SDK.RemoteObject.RemoteObject): boolean {
81
+ const isWasmOrBuffer = obj.type === 'object' && obj.subtype && ACCEPTED_MEMORY_TYPES.includes(obj.subtype);
82
+ if (isWasmOrBuffer) {
83
+ return true;
84
+ }
85
+
86
+ const isWasmDWARF = obj instanceof Bindings.DebuggerLanguagePlugins.ValueNode;
87
+ if (isWasmDWARF) {
88
+ return obj.inspectableAddress !== undefined;
89
+ }
90
+
91
+ return false;
92
+ }
93
+
69
94
  type SerializableSettings = {
70
95
  valueTypes: ValueType[],
71
96
  valueTypeModes: [ValueType, ValueTypeMode][],
@@ -142,21 +167,52 @@ export class LinearMemoryInspectorController extends SDK.TargetManager.SDKModelO
142
167
  };
143
168
  }
144
169
 
170
+ static async retrieveDWARFMemoryObjectAndAddress(obj: SDK.RemoteObject.RemoteObject):
171
+ Promise<{obj: SDK.RemoteObject.RemoteObject, address: number}|undefined> {
172
+ if (!(obj instanceof Bindings.DebuggerLanguagePlugins.ValueNode)) {
173
+ return;
174
+ }
175
+
176
+ const valueNode = obj;
177
+ const address = valueNode.inspectableAddress || 0;
178
+ const callFrame = valueNode.callFrame;
179
+ const response = await obj.debuggerModel().agent.invoke_evaluateOnCallFrame({
180
+ callFrameId: callFrame.id,
181
+ expression: 'memories[0]',
182
+ });
183
+ const error = response.getError();
184
+ if (error) {
185
+ console.error(error);
186
+ Common.Console.Console.instance().error(i18nString(UIStrings.couldNotOpenLinearMemory));
187
+ }
188
+ const runtimeModel = obj.debuggerModel().runtimeModel();
189
+ obj = runtimeModel.createRemoteObject(response.result);
190
+ return {obj, address};
191
+ }
192
+
145
193
  async openInspectorView(obj: SDK.RemoteObject.RemoteObject, address?: number): Promise<void> {
146
- if (address !== undefined) {
194
+ const response = await LinearMemoryInspectorController.retrieveDWARFMemoryObjectAndAddress(obj);
195
+ let memoryObj = obj;
196
+ let memoryAddress = address;
197
+ if (response !== undefined) {
198
+ memoryAddress = response.address;
199
+ memoryObj = response.obj;
200
+ }
201
+
202
+ if (memoryAddress !== undefined) {
147
203
  Host.userMetrics.linearMemoryInspectorTarget(
148
204
  Host.UserMetrics.LinearMemoryInspectorTarget.DWARFInspectableAddress);
149
- } else if (obj.subtype === Protocol.Runtime.RemoteObjectSubtype.Arraybuffer) {
205
+ } else if (memoryObj.subtype === Protocol.Runtime.RemoteObjectSubtype.Arraybuffer) {
150
206
  Host.userMetrics.linearMemoryInspectorTarget(Host.UserMetrics.LinearMemoryInspectorTarget.ArrayBuffer);
151
- } else if (obj.subtype === Protocol.Runtime.RemoteObjectSubtype.Dataview) {
207
+ } else if (memoryObj.subtype === Protocol.Runtime.RemoteObjectSubtype.Dataview) {
152
208
  Host.userMetrics.linearMemoryInspectorTarget(Host.UserMetrics.LinearMemoryInspectorTarget.DataView);
153
- } else if (obj.subtype === Protocol.Runtime.RemoteObjectSubtype.Typedarray) {
209
+ } else if (memoryObj.subtype === Protocol.Runtime.RemoteObjectSubtype.Typedarray) {
154
210
  Host.userMetrics.linearMemoryInspectorTarget(Host.UserMetrics.LinearMemoryInspectorTarget.TypedArray);
155
211
  } else {
156
- console.assert(obj.subtype === Protocol.Runtime.RemoteObjectSubtype.Webassemblymemory);
212
+ console.assert(memoryObj.subtype === Protocol.Runtime.RemoteObjectSubtype.Webassemblymemory);
157
213
  Host.userMetrics.linearMemoryInspectorTarget(Host.UserMetrics.LinearMemoryInspectorTarget.WebAssemblyMemory);
158
214
  }
159
- const buffer = await getBufferFromObject(obj);
215
+ const buffer = await getBufferFromObject(memoryObj);
160
216
  const {internalProperties} = await buffer.object().getOwnProperties(false);
161
217
  const idProperty = internalProperties?.find(({name}) => name === '[[ArrayBufferData]]');
162
218
  const id = idProperty?.value?.value;
@@ -167,7 +223,7 @@ export class LinearMemoryInspectorController extends SDK.TargetManager.SDKModelO
167
223
  const memory = memoryProperty?.value;
168
224
 
169
225
  if (this.#bufferIdToRemoteObject.has(id)) {
170
- this.#paneInstance.reveal(id, address);
226
+ this.#paneInstance.reveal(id, memoryAddress);
171
227
  void UI.ViewManager.ViewManager.instance().showView('linear-memory-inspector');
172
228
  return;
173
229
  }
@@ -176,7 +232,7 @@ export class LinearMemoryInspectorController extends SDK.TargetManager.SDKModelO
176
232
  this.#bufferIdToRemoteObject.set(id, buffer.object());
177
233
  const arrayBufferWrapper = new RemoteArrayBufferWrapper(buffer);
178
234
 
179
- this.#paneInstance.create(id, title, arrayBufferWrapper, address);
235
+ this.#paneInstance.create(id, title, arrayBufferWrapper, memoryAddress);
180
236
  void UI.ViewManager.ViewManager.instance().showView('linear-memory-inspector');
181
237
  }
182
238
 
@@ -36,6 +36,7 @@ import * as LinearMemoryInspector from '../../../components/linear_memory_inspec
36
36
  import * as Platform from '../../../../core/platform/platform.js';
37
37
  import * as SDK from '../../../../core/sdk/sdk.js';
38
38
  import * as TextUtils from '../../../../models/text_utils/text_utils.js';
39
+ import * as JavaScriptMetaData from '../../../../models/javascript_metadata/javascript_metadata.js';
39
40
  import * as IconButton from '../../../components/icon_button/icon_button.js';
40
41
  import * as TextEditor from '../../../components/text_editor/text_editor.js';
41
42
  import * as UI from '../../legacy.js';
@@ -126,8 +127,9 @@ const EXPANDABLE_MAX_LENGTH = 50;
126
127
  const EXPANDABLE_MAX_DEPTH = 100;
127
128
 
128
129
  const parentMap = new WeakMap<SDK.RemoteObject.RemoteObjectProperty, SDK.RemoteObject.RemoteObject|null>();
129
-
130
130
  const objectPropertiesSectionMap = new WeakMap<Element, ObjectPropertiesSection>();
131
+ const domPinnedProperties =
132
+ JavaScriptMetaData.JavaScriptMetadata.JavaScriptMetadataImpl.domPinnedProperties.DOMPinnedProperties;
131
133
 
132
134
  export const getObjectPropertiesSectionFrom = (element: Element): ObjectPropertiesSection|undefined => {
133
135
  return objectPropertiesSectionMap.get(element);
@@ -203,6 +205,37 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
203
205
  return objectPropertiesSection;
204
206
  }
205
207
 
208
+ static assignWebIDLMetadata(
209
+ value: SDK.RemoteObject.RemoteObject|null, properties: SDK.RemoteObject.RemoteObjectProperty[]): void {
210
+ if (!value) {
211
+ return;
212
+ }
213
+
214
+ const isInstance = value.type === 'object' && value.className !== null;
215
+ const webIdlType = isInstance ? domPinnedProperties[value.className] : undefined;
216
+ if (webIdlType) {
217
+ value.webIdl = {info: webIdlType, state: new Map()};
218
+ } else {
219
+ return;
220
+ }
221
+
222
+ for (const property of properties) {
223
+ const webIdlProperty = webIdlType?.props?.[property.name];
224
+ if (webIdlProperty) {
225
+ property.webIdl = {info: webIdlProperty};
226
+ }
227
+ }
228
+ }
229
+
230
+ static getPropertyValuesByNames(properties: SDK.RemoteObject.RemoteObjectProperty[]):
231
+ Map<string, SDK.RemoteObject.RemoteObject|undefined> {
232
+ const map = new Map();
233
+ for (const property of properties) {
234
+ map.set(property.name, property.value);
235
+ }
236
+ return map;
237
+ }
238
+
206
239
  static compareProperties(
207
240
  propertyA: SDK.RemoteObject.RemoteObjectProperty, propertyB: SDK.RemoteObject.RemoteObjectProperty): number {
208
241
  if (!propertyA.synthetic && propertyB.synthetic) {
@@ -359,7 +392,7 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
359
392
  // TypedArrays DataViews are also supported, but showing the icon next to their
360
393
  // previews is quite a significant visual overhead, and users can easily get to
361
394
  // their buffers and open the memory inspector from there.
362
- if (obj.type !== 'object' || (obj.subtype !== 'arraybuffer' && obj.subtype !== 'webassemblymemory')) {
395
+ if (!LinearMemoryInspector.LinearMemoryInspectorController.isMemoryObjectProperty(obj)) {
363
396
  return;
364
397
  }
365
398
  const memoryIcon = new IconButton.Icon.Icon();
@@ -369,12 +402,15 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
369
402
  width: '13px',
370
403
  height: '13px',
371
404
  };
372
- memoryIcon.onclick = (event: MouseEvent): void => {
373
- Host.userMetrics.linearMemoryInspectorRevealedFrom(Host.UserMetrics.LinearMemoryInspectorRevealedFrom.MemoryIcon);
374
- void LinearMemoryInspector.LinearMemoryInspectorController.LinearMemoryInspectorController.instance()
375
- .openInspectorView(obj);
405
+
406
+ memoryIcon.onclick = async(event: MouseEvent): Promise<void> => {
376
407
  event.stopPropagation();
408
+ const controller =
409
+ LinearMemoryInspector.LinearMemoryInspectorController.LinearMemoryInspectorController.instance();
410
+ Host.userMetrics.linearMemoryInspectorRevealedFrom(Host.UserMetrics.LinearMemoryInspectorRevealedFrom.MemoryIcon);
411
+ void controller.openInspectorView(obj, 0);
377
412
  };
413
+
378
414
  UI.Tooltip.Tooltip.install(memoryIcon, 'Reveal in Memory Inspector panel');
379
415
  element.classList.add('object-value-with-memory-icon');
380
416
  element.appendChild(memoryIcon);
@@ -741,6 +777,33 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
741
777
  internalProperties: SDK.RemoteObject.RemoteObjectProperty[]|null, skipProto: boolean,
742
778
  skipGettersAndSetters: boolean, value: SDK.RemoteObject.RemoteObject|null,
743
779
  linkifier?: Components.Linkifier.Linkifier, emptyPlaceholder?: string|null): void {
780
+ ObjectPropertiesSection.assignWebIDLMetadata(value, properties);
781
+ const names = ObjectPropertiesSection.getPropertyValuesByNames(properties);
782
+
783
+ if (value?.webIdl) {
784
+ const parentRules = value.webIdl.info.rules;
785
+ if (parentRules) {
786
+ for (const {when: name, is: expected} of parentRules) {
787
+ if (names.get(name)?.value === expected) {
788
+ value.webIdl.state.set(name, expected);
789
+ }
790
+ }
791
+ }
792
+
793
+ for (const property of properties) {
794
+ if (property.webIdl) {
795
+ const parentState = value.webIdl.state;
796
+ const propertyRules = property.webIdl.info.rules;
797
+ if (!parentRules && !propertyRules) {
798
+ property.webIdl.applicable = true;
799
+ } else {
800
+ property.webIdl.applicable =
801
+ !propertyRules || propertyRules?.some(rule => parentState.get(rule.when) === rule.is);
802
+ }
803
+ }
804
+ }
805
+ }
806
+
744
807
  properties.sort(ObjectPropertiesSection.compareProperties);
745
808
  internalProperties = internalProperties || [];
746
809
 
@@ -1050,15 +1113,36 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
1050
1113
  this.expandedValueElement = this.createExpandedValueElement(this.property.value);
1051
1114
  }
1052
1115
 
1053
- this.listItemElement.removeChildren();
1116
+ let adorner: Element|string = '';
1054
1117
  let container: Element;
1118
+
1119
+ if (this.property.webIdl?.applicable) {
1120
+ const icon = new IconButton.Icon.Icon();
1121
+ icon.data = {
1122
+ iconName: 'elements_panel_icon',
1123
+ color: 'var(--color-text-secondary)',
1124
+ width: '16px',
1125
+ height: '16px',
1126
+ };
1127
+ adorner = UI.Fragment.html`
1128
+ <span class='adorner'>${icon}</span>
1129
+ `;
1130
+ }
1131
+
1055
1132
  if (isInternalEntries) {
1056
- container = UI.Fragment.html`<span class='name-and-value'>${this.nameElement}</span>`;
1133
+ container = UI.Fragment.html`
1134
+ <span class='name-and-value'>${adorner}${this.nameElement}</span>
1135
+ `;
1057
1136
  } else {
1058
- container = UI.Fragment.html`<span class='name-and-value'>${this.nameElement}: ${this.valueElement}</span>`;
1137
+ container = UI.Fragment.html`
1138
+ <span class='name-and-value'>${adorner}${this.nameElement}: ${this.valueElement}</span>
1139
+ `;
1059
1140
  }
1141
+
1142
+ this.listItemElement.removeChildren();
1060
1143
  this.rowContainer = (container as HTMLElement);
1061
1144
  this.listItemElement.appendChild(this.rowContainer);
1145
+ this.listItemElement.dataset.webidl = this.property.webIdl?.applicable ? 'true' : 'false';
1062
1146
  }
1063
1147
 
1064
1148
  private updatePropertyPath(): void {
@@ -59,9 +59,22 @@
59
59
  overflow: hidden;
60
60
  }
61
61
 
62
+ .object-properties-section [data-webidl="true"] > .name-and-value > .adorner {
63
+ flex-shrink: 0;
64
+ width: 16px;
65
+ height: 16px;
66
+ margin-right: 2px;
67
+ }
68
+
69
+ .object-properties-section [data-webidl="true"] > .name-and-value > .name {
70
+ font-weight: bold;
71
+ }
72
+
62
73
  .name-and-value {
63
74
  overflow: hidden;
64
75
  line-height: 16px;
76
+ display: flex;
77
+ white-space: break-spaces;
65
78
  }
66
79
 
67
80
  .editing-sub-part .name-and-value {
@@ -56,10 +56,7 @@
56
56
  display: inline-flex;
57
57
  }
58
58
 
59
- .object-value-arraybuffer devtools-icon,
60
- .object-value-dataview devtools-icon,
61
- .object-value-typedarray devtools-icon,
62
- .object-value-webassemblymemory devtools-icon {
59
+ .object-value-with-memory-icon > devtools-icon {
63
60
  cursor: pointer;
64
61
  }
65
62
 
package/package.json CHANGED
@@ -55,5 +55,5 @@
55
55
  "unittest": "scripts/test/run_unittests.py --no-text-coverage",
56
56
  "watch": "vpython third_party/node/node.py --output scripts/watch_build.js"
57
57
  },
58
- "version": "1.0.1015276"
58
+ "version": "1.0.1015822"
59
59
  }