chrome-devtools-frontend 1.0.1643099 → 1.0.1645245

package/front_end/ui/legacy/components/object_ui/ObjectPropertiesSection.ts

@@ -71,6 +71,10 @@ const UIStrings = {
    * @description Text to collapse children of a parent group
    */
   collapseChildren: 'Collapse children',
+  /**
+   * @description A context menu item in the Object Properties Section to choose property ordering.
+   */
+  sortPropertiesAlphabetically: 'Sort properties alphabetically',
   /**
    * @description Text in Object Properties Section
    */
@@ -155,6 +159,22 @@ export interface ObjectTreeOptions {
   readonly expansionTracker?: ObjectTreeExpansionTracker;
 }
 
+let cachedSortAlphabeticallySetting: Common.Settings.Setting<boolean>|undefined;
+export function sortPropertiesAlphabeticallySetting(): Common.Settings.Setting<boolean> {
+  if (!cachedSortAlphabeticallySetting) {
+    cachedSortAlphabeticallySetting =
+        Common.Settings.Settings.instance().createSetting('object-properties-sort-alphabetically', true);
+  }
+  return cachedSortAlphabeticallySetting;
+}
+
+// WASM properties are index-based (e.g. locals[0], globals[1]); alphabetical
+// reordering would break the correspondence between displayed index and actual
+// index, so WASM objects are always shown in insertion order.
+export function isWasmObject(object: SDK.RemoteObject.RemoteObject|undefined): boolean {
+  return object?.subtype === 'webassemblymemory' || object?.subtype === 'wasmvalue';
+}
+
 type KeyTypes = {
   [K in keyof Required<NodeChildren>]: Key<Required<NodeChildren>[K][0]>;
 };
@@ -362,13 +382,19 @@ export class ObjectTreeExpansionTracker {
 
 export abstract class ObjectTreeNodeBase extends Common.ObjectWrapper.ObjectWrapper<ObjectTreeNodeBase.EventTypes> {
   #children?: NodeChildren;
+  protected readonly options: ObjectTreeOptions;
   protected filter: {includeNullOrUndefinedValues: boolean, regex: RegExp|null}|null = null;
   protected extraProperties: ObjectTreeNode[] = [];
   #expanded = false;
 
-  constructor(readonly parent: ObjectTreeNodeBase|undefined, protected readonly options: ObjectTreeOptions) {
+  constructor(readonly parent: ObjectTreeNodeBase|undefined, options: ObjectTreeOptions) {
     super();
     this.filter = parent?.filter ?? null;
+    this.options = {...options};
+  }
+
+  get isWasm(): boolean {
+    return isWasmObject(this.object);
   }
   get expanded(): boolean {
     return this.#expanded;
@@ -399,6 +425,22 @@ export abstract class ObjectTreeNodeBase extends Common.ObjectWrapper.ObjectWrap
     this.setFilter({includeNullOrUndefinedValues: value, regex: this.filter?.regex ?? null});
   }
 
+  get sortPropertiesAlphabetically(): boolean {
+    if (this.isWasm) {
+      return false;
+    }
+    return sortPropertiesAlphabeticallySetting().get();
+  }
+
+  set sortPropertiesAlphabetically(value: boolean) {
+    const setting = sortPropertiesAlphabeticallySetting();
+    if (this.isWasm || setting.get() === value) {
+      return;
+    }
+    setting.set(value);
+    this.removeChildren();
+  }
+
   // Performs a pre-order tree traversal over the populated children. If any children need to be populated, callers must
   // do that while walking (pre-order visitation enables that).
   * #walk(maxDepth = -1): Generator<ObjectTreeNodeBase> {
@@ -499,13 +541,12 @@ export abstract class ObjectTreeNodeBase extends Common.ObjectWrapper.ObjectWrap
 
     if (this.arrayLength > ARRAY_LOAD_THRESHOLD) {
       const ranges = await arrayRangeGroups(object, 0, this.arrayLength - 1);
-      const arrayRanges = ranges?.ranges.map(
-          ([fromIndex, toIndex, count]) =>
-              new ArrayGroupTreeNode(object, {fromIndex, toIndex, count}, effectiveParent, {
-                readOnly: this.readOnly,
-                propertiesMode: this.propertiesMode,
-                expansionTracker: this.options.expansionTracker
-              }));
+      const arrayRanges = ranges?.ranges.map(([fromIndex, toIndex, count]) => new ArrayGroupTreeNode(
+                                                 object, {fromIndex, toIndex, count}, effectiveParent, {
+                                                   readOnly: this.readOnly,
+                                                   propertiesMode: this.propertiesMode,
+                                                   expansionTracker: this.options.expansionTracker,
+                                                 }));
       if (!arrayRanges) {
         return {};
       }
@@ -517,14 +558,14 @@ export abstract class ObjectTreeNodeBase extends Common.ObjectWrapper.ObjectWrap
       const properties = objectProperties?.map(p => new ObjectTreeNode(p, effectiveParent, {
                                                  readOnly: this.readOnly,
                                                  propertiesMode: ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED,
-                                                 expansionTracker: this.options.expansionTracker
+                                                 expansionTracker: this.options.expansionTracker,
                                                }));
 
       const internalProperties =
           objectInternalProperties?.map(p => new ObjectTreeNode(p, effectiveParent, {
                                           readOnly: this.readOnly,
                                           propertiesMode: ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED,
-                                          expansionTracker: this.options.expansionTracker
+                                          expansionTracker: this.options.expansionTracker,
                                         }));
       return {arrayRanges, properties, internalProperties};
     }
@@ -545,17 +586,17 @@ export abstract class ObjectTreeNodeBase extends Common.ObjectWrapper.ObjectWrap
     const properties = objectProperties?.map(p => new ObjectTreeNode(p, effectiveParent, {
                                                readOnly: this.readOnly,
                                                propertiesMode: ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED,
-                                               expansionTracker: this.options.expansionTracker
+                                               expansionTracker: this.options.expansionTracker,
                                              }));
     properties?.push(...this.extraProperties);
-    properties?.sort(ObjectPropertiesSection.compareProperties);
+    properties?.sort((a, b) => ObjectPropertiesSection.compareProperties(a, b, this.sortPropertiesAlphabetically));
     const accessors = properties && ObjectTreeNodeBase.getGettersAndSetters(properties, this.options);
 
     const internalProperties =
         objectInternalProperties?.map(p => new ObjectTreeNode(p, effectiveParent, {
                                         readOnly: this.readOnly,
                                         propertiesMode: ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED,
-                                        expansionTracker: this.options.expansionTracker
+                                        expansionTracker: this.options.expansionTracker,
                                       }));
     return {properties, internalProperties, accessors};
   }
@@ -577,7 +618,7 @@ export abstract class ObjectTreeNodeBase extends Common.ObjectWrapper.ObjectWrap
     this.extraProperties.push(...properties.map(p => new ObjectTreeNode(p, this, {
                                                   readOnly: this.readOnly,
                                                   propertiesMode: ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED,
-                                                  expansionTracker: this.options.expansionTracker
+                                                  expansionTracker: this.options.expansionTracker,
                                                 })));
   }
 
@@ -591,7 +632,7 @@ export abstract class ObjectTreeNodeBase extends Common.ObjectWrapper.ObjectWrap
           gettersAndSetters.push(new ObjectTreeNode(getterProperty, property.parent, {
             propertiesMode: property.propertiesMode,
             readOnly: property.readOnly,
-            expansionTracker: options.expansionTracker
+            expansionTracker: options.expansionTracker,
           }));
         }
         if (property.property.setter) {
@@ -600,7 +641,7 @@ export abstract class ObjectTreeNodeBase extends Common.ObjectWrapper.ObjectWrap
           gettersAndSetters.push(new ObjectTreeNode(setterProperty, property.parent, {
             propertiesMode: property.propertiesMode,
             readOnly: property.readOnly,
-            expansionTracker: options.expansionTracker
+            expansionTracker: options.expansionTracker,
           }));
         }
       }
@@ -658,7 +699,7 @@ export class ArrayGroupTreeNode extends ObjectTreeNodeBase {
           ([fromIndex, toIndex, count]) => new ArrayGroupTreeNode(this.object, {fromIndex, toIndex, count}, this, {
             readOnly: this.readOnly,
             propertiesMode: this.propertiesMode,
-            expansionTracker: this.options.expansionTracker
+            expansionTracker: this.options.expansionTracker,
           }));
       return {arrayRanges};
     }
@@ -678,10 +719,10 @@ export class ArrayGroupTreeNode extends ObjectTreeNodeBase {
     const properties = allProperties.properties?.map(p => new ObjectTreeNode(p, this, {
                                                        propertiesMode: this.propertiesMode,
                                                        readOnly: this.readOnly,
-                                                       expansionTracker: this.options.expansionTracker
+                                                       expansionTracker: this.options.expansionTracker,
                                                      }));
     properties?.push(...this.extraProperties);
-    properties?.sort(ObjectPropertiesSection.compareProperties);
+    properties?.sort((a, b) => ObjectPropertiesSection.compareProperties(a, b, this.sortPropertiesAlphabetically));
     const accessors = properties && ObjectTreeNodeBase.getGettersAndSetters(properties, this.options);
     return {properties, accessors};
   }
@@ -872,15 +913,16 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
   }
 
   // The RemoteObjectProperty overload is kept for web test compatibility for now.
-  static compareProperties(
-      propertyA: ObjectTreeNode|SDK.RemoteObject.RemoteObjectProperty,
-      propertyB: ObjectTreeNode|SDK.RemoteObject.RemoteObjectProperty): number {
+  static compareProperties(propertyA: ObjectTreeNode|SDK.RemoteObject.RemoteObjectProperty,
+                           propertyB: ObjectTreeNode|SDK.RemoteObject.RemoteObjectProperty,
+                           sortPropertiesAlphabetically = true): number {
     if (propertyA instanceof ObjectTreeNode) {
       propertyA = propertyA.property;
     }
     if (propertyB instanceof ObjectTreeNode) {
       propertyB = propertyB.property;
     }
+
     if (!propertyA.synthetic && propertyB.synthetic) {
       return 1;
     }
@@ -911,15 +953,20 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
     if (propertyB.private && !propertyA.private) {
       return -1;
     }
-    const a = propertyA.name;
-    const b = propertyB.name;
-    if (a.startsWith('_') && !b.startsWith('_')) {
-      return 1;
-    }
-    if (b.startsWith('_') && !a.startsWith('_')) {
-      return -1;
+
+    if (sortPropertiesAlphabetically) {
+      const nameA = propertyA.name;
+      const nameB = propertyB.name;
+      if (nameA.startsWith('_') && !nameB.startsWith('_')) {
+        return 1;
+      }
+      if (nameB.startsWith('_') && !nameA.startsWith('_')) {
+        return -1;
+      }
+      return Platform.StringUtilities.naturalOrderComparator(nameA, nameB);
     }
-    return Platform.StringUtilities.naturalOrderComparator(a, b);
+
+    return 0;
   }
 
   static createNameElement(name: string|null, isPrivate?: boolean): Element {
@@ -1297,6 +1344,14 @@ export class RootElement extends UI.TreeOutline.TreeElement {
         {jslogContext: 'expand-recursively'});
     contextMenu.viewSection().appendItem(
         i18nString(UIStrings.collapseChildren), this.collapseChildren.bind(this), {jslogContext: 'collapse-children'});
+    if (!this.object.isWasm) {
+      contextMenu.viewSection().appendCheckboxItem(i18nString(UIStrings.sortPropertiesAlphabetically), () => {
+        this.object.sortPropertiesAlphabetically = !this.object.sortPropertiesAlphabetically;
+      }, {
+        checked: this.object.sortPropertiesAlphabetically,
+        jslogContext: 'sort-properties-alphabetically',
+      });
+    }
     contextMenu.viewSection().appendCheckboxItem(i18n.i18n.lockedString('Show all'), () => {
       this.object.includeNullOrUndefinedValues = !this.object.includeNullOrUndefinedValues;
     }, {checked: this.object.includeNullOrUndefinedValues, jslogContext: 'show-all'});
@@ -1650,7 +1705,8 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
     if (arrayRanges && arrayRanges.length > 0) {
       empty = false;
     }
-    properties?.sort(ObjectPropertiesSection.compareProperties);
+    const sortPropertiesAlphabetically = properties?.[0]?.parent?.sortPropertiesAlphabetically ?? true;
+    properties?.sort((a, b) => ObjectPropertiesSection.compareProperties(a, b, sortPropertiesAlphabetically));
 
     const entriesProperty = internalProperties?.find(({property}) => property.name === '[[Entries]]');
     if (entriesProperty) {
@@ -1850,6 +1906,14 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
     while (root.parent) {
       root = root.parent;
     }
+    if (!root.isWasm) {
+      contextMenu.viewSection().appendCheckboxItem(i18nString(UIStrings.sortPropertiesAlphabetically), () => {
+        root.sortPropertiesAlphabetically = !root.sortPropertiesAlphabetically;
+      }, {
+        checked: root.sortPropertiesAlphabetically,
+        jslogContext: 'sort-properties-alphabetically',
+      });
+    }
     contextMenu.viewSection().appendCheckboxItem(i18n.i18n.lockedString('Show all'), () => {
       root.includeNullOrUndefinedValues = !root.includeNullOrUndefinedValues;
     }, {checked: root.includeNullOrUndefinedValues, jslogContext: 'show-all'});

package/front_end/ui/legacy/components/utils/JSPresentationUtils.ts

@@ -156,7 +156,6 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
               const link = Linkifier.linkifyStackTraceFrame(frame, {
                 showColumnNumber: Boolean(input.showColumnNumber),
                 tabStop: Boolean(input.tabStops),
-                inlineFrameIndex: 0,
                 revealBreakpoint: previousStackFrameWasBreakpointCondition,
                 maxLength: UI.UIUtils.MaxLengthForDisplayedURLsInConsole,
                 ignoreListManager: input.ignoreListManager,

package/front_end/ui/legacy/components/utils/Linkifier.ts

@@ -237,7 +237,6 @@ export class Linkifier extends Common.ObjectWrapper.ObjectWrapper<EventTypes> im
       showColumnNumber: Boolean(options?.showColumnNumber),
       className: options?.className,
       tabStop: options?.tabStop,
-      inlineFrameIndex: options?.inlineFrameIndex ?? 0,
       userMetric: options?.userMetric,
       jslogContext: options?.jslogContext || 'script-location',
       omitOrigin: options?.omitOrigin,
@@ -257,10 +256,8 @@ export class Linkifier extends Common.ObjectWrapper.ObjectWrapper<EventTypes> im
     // Prefer createRawLocationByScriptId() here, since it will always produce a correct
     // link, since the script ID is unique. Only fall back to createRawLocationByURL()
     // when all we have is an URL, which is not guaranteed to be unique.
-    const rawLocation = scriptId ? debuggerModel.createRawLocationByScriptId(
-                                       scriptId, lineNumber || 0, columnNumber, linkifyURLOptions.inlineFrameIndex) :
-                                   debuggerModel.createRawLocationByURL(
-                                       sourceURL, lineNumber || 0, columnNumber, linkifyURLOptions.inlineFrameIndex);
+    const rawLocation = scriptId ? debuggerModel.createRawLocationByScriptId(scriptId, lineNumber || 0, columnNumber) :
+                                   debuggerModel.createRawLocationByURL(sourceURL, lineNumber || 0, columnNumber);
     if (!rawLocation) {
       return fallbackAnchor;
     }
@@ -313,7 +310,6 @@ export class Linkifier extends Common.ObjectWrapper.ObjectWrapper<EventTypes> im
       className: options?.className,
       columnNumber: options?.columnNumber,
       showColumnNumber: Boolean(options?.showColumnNumber),
-      inlineFrameIndex: options?.inlineFrameIndex ?? 0,
       tabStop: options?.tabStop,
       userMetric: options?.userMetric,
       jslogContext: options?.jslogContext || 'script-source-url',
@@ -329,7 +325,6 @@ export class Linkifier extends Common.ObjectWrapper.ObjectWrapper<EventTypes> im
         rawLocation.debuggerModel.target(), rawLocation.scriptId, fallbackUrl, rawLocation.lineNumber, {
           columnNumber: rawLocation.columnNumber,
           className,
-          inlineFrameIndex: rawLocation.inlineFrameIndex,
           tabStop: options?.tabStop,
         });
   }
@@ -340,7 +335,6 @@ export class Linkifier extends Common.ObjectWrapper.ObjectWrapper<EventTypes> im
     const linkifyOptions: LinkifyOptions = {
       ...options,
       columnNumber: callFrame.columnNumber,
-      inlineFrameIndex: options?.inlineFrameIndex ?? 0,
     };
     return this.maybeLinkifyScriptLocation(
         target, String(callFrame.scriptId) as Protocol.Runtime.ScriptId,
@@ -355,7 +349,6 @@ export class Linkifier extends Common.ObjectWrapper.ObjectWrapper<EventTypes> im
       showColumnNumber: Boolean(options?.showColumnNumber),
       className: options?.className,
       tabStop: options?.tabStop,
-      inlineFrameIndex: options?.inlineFrameIndex ?? 0,
       userMetric: options?.userMetric,
       jslogContext: options?.jslogContext || 'script-location',
       omitOrigin: options?.omitOrigin,
@@ -394,7 +387,6 @@ export class Linkifier extends Common.ObjectWrapper.ObjectWrapper<EventTypes> im
       showColumnNumber: Boolean(options?.showColumnNumber),
       className: options?.className,
       tabStop: options?.tabStop,
-      inlineFrameIndex: options?.inlineFrameIndex ?? 0,
       userMetric: options?.userMetric,
       jslogContext: options?.jslogContext || 'script-location',
       omitOrigin: options?.omitOrigin,
@@ -424,7 +416,6 @@ export class Linkifier extends Common.ObjectWrapper.ObjectWrapper<EventTypes> im
       lineNumber,
       columnNumber,
       showColumnNumber: false,
-      inlineFrameIndex: 0,
       maxLength: this.maxLength,
       preventClick: true,
       jslogContext: 'script-source-url',
@@ -595,7 +586,6 @@ export class Linkifier extends Common.ObjectWrapper.ObjectWrapper<EventTypes> im
   static renderLinkifiedUrl(url: Platform.DevToolsPath.UrlString, options?: LinkifyURLOptions): TemplateResult {
     options = options || {
       showColumnNumber: false,
-      inlineFrameIndex: 0,
     };
 
     const text = options.text;
@@ -724,7 +714,6 @@ export class Linkifier extends Common.ObjectWrapper.ObjectWrapper<EventTypes> im
           url: options.href || null,
           lineNumber: options.lineNumber ?? null,
           columnNumber: options.columnNumber ?? null,
-          inlineFrameIndex: 0,
           revealable: null,
           fallback: null,
           userMetric: options.userMetric,
@@ -1174,7 +1163,6 @@ interface LinkInfo {
   url: Platform.DevToolsPath.UrlString|null;
   lineNumber: number|null;
   columnNumber: number|null;
-  inlineFrameIndex: number;
   revealable: Object|null;
   fallback: Element|null;
   userMetric?: Host.UserMetrics.Action;
@@ -1187,7 +1175,6 @@ export interface LinkifyURLOptions {
   lineNumber?: number;
   columnNumber?: number;
   showColumnNumber?: boolean;
-  inlineFrameIndex?: number;
   preventClick?: boolean;
   maxLength?: number;
   tabStop?: boolean;
@@ -1203,7 +1190,6 @@ export interface LinkifyOptions {
   className?: string;
   columnNumber?: number;
   showColumnNumber?: boolean;
-  inlineFrameIndex?: number;
   tabStop?: boolean;
   userMetric?: Host.UserMetrics.Action;
   jslogContext?: string;

package/front_end/ui/legacy/legacy.ts

@@ -41,6 +41,7 @@ import * as ShortcutRegistry from './ShortcutRegistry.js';
 import * as SoftContextMenu from './SoftContextMenu.js';
 import * as SoftDropDown from './SoftDropDown.js';
 import * as SplitWidget from './SplitWidget.js';
+import * as StackedPane from './StackedPane.js';
 import * as SuggestBox from './SuggestBox.js';
 import * as TabbedPane from './TabbedPane.js';
 import * as TargetCrashedScreen from './TargetCrashedScreen.js';
@@ -95,6 +96,7 @@ export {
   SoftContextMenu,
   SoftDropDown,
   SplitWidget,
+  StackedPane,
   SuggestBox,
   TabbedPane,
   TargetCrashedScreen,
@@ -107,5 +109,5 @@ export {
   View,
   ViewManager,
   Widget,
-  ZoomManager
+  ZoomManager,
 };

package/front_end/ui/visual_logging/KnownContextValues.ts

@@ -362,6 +362,7 @@ export const knownContextValues = new Set([
   'ai-assistance-v2-opt-in-change-dialog-seen',
   'ai-assistance-v2-opt-in.got-it',
   'ai-assistance-v2-opt-in.manage-settings',
+  'ai-assistance.application-panel-context',
   'ai-assistance.storage-floating-button',
   'ai-code-completion-citations',
   'ai-code-completion-citations.citation-link',
@@ -2896,6 +2897,7 @@ export const knownContextValues = new Set([
   'object-column',
   'object-fit',
   'object-position',
+  'object-properties-sort-alphabetically',
   'object-view-box',
   'oct',
   'off',
@@ -3079,6 +3081,8 @@ export const knownContextValues = new Set([
   'player',
   'playing',
   'plus-button',
+  'plus-button-drawer',
+  'plus-button-panel',
   'pointer',
   'pointer-32-bit',
   'pointer-64-bit',
@@ -3775,6 +3779,7 @@ export const knownContextValues = new Set([
   'socket',
   'some_id',
   'sort-by',
+  'sort-properties-alphabetically',
   'source-code',
   'source-code-widget',
   'source-file',

package/package.json

@@ -92,5 +92,5 @@
     "webidl2": "24.5.0",
     "yargs": "17.7.2"
   },
-  "version": "1.0.1643099"
+  "version": "1.0.1645245"
 }