ember-inspector 4.11.0-alpha.2024.3.9 → 4.11.0-alpha.2024.4.1

package/ember_debug/libs/render-tree.js

@@ -1,6 +1,9 @@
 import captureRenderTree from './capture-render-tree';
 import { guidFor } from 'ember-debug/utils/ember/object/internals';
-import { EmberLoader } from 'ember-debug/utils/ember/loader';
+import { EmberLoader, emberSafeRequire } from 'ember-debug/utils/ember/loader';
+import { inspect } from 'ember-debug/utils/type-check';
+import { isInVersionSpecifier } from 'ember-debug/utils/version';
+import { VERSION } from 'ember-debug/utils/ember';
 
 class InElementSupportProvider {
   constructor(owner) {
@@ -14,6 +17,12 @@ class InElementSupportProvider {
       // nope
     }
 
+    this.DESTROY = emberSafeRequire('@glimmer/util')?.DESTROY;
+    this.registerDestructor =
+      emberSafeRequire('@glimmer/destroyable')?.registerDestructor ||
+      emberSafeRequire('@ember/destroyable')?.registerDestructor ||
+      emberSafeRequire('@ember/runtime')?.registerDestructor;
+
     this.debugRenderTree =
       owner.lookup('renderer:-dom')?.debugRenderTree ||
       owner.lookup('service:-glimmer-environment')._debugRenderTree;
@@ -31,9 +40,10 @@ class InElementSupportProvider {
     const self = this;
 
     const NewElementBuilder = this.NewElementBuilder;
-    const remoteStack = [];
     const componentStack = [];
 
+    const enableModifierSupport = isInVersionSpecifier('>3.28.0', VERSION);
+
     function createRef(value) {
       if (self.reference.createUnboundRef) {
         return self.reference.createUnboundRef(value);
@@ -42,6 +52,16 @@ class InElementSupportProvider {
       }
     }
 
+    function createArgs(args) {
+      if (self.reference.createUnboundRef) {
+        return args;
+      } else {
+        return {
+          value: () => args,
+        };
+      }
+    }
+
     const appendChild = this.debugRenderTree.appendChild;
     this.debugRenderTree.appendChild = function (node, state) {
       if (node.type === 'component') {
@@ -56,7 +76,7 @@ class InElementSupportProvider {
       if (node?.type === 'component') {
         componentStack.pop();
       }
-      exit.call(this, state);
+      return exit.call(this, state);
     };
 
     const didAppendNode = NewElementBuilder.prototype.didAppendNode;
@@ -71,13 +91,91 @@ class InElementSupportProvider {
       args[0].__emberInspectorParentNode = componentStack.at(-1);
     };
 
+    const pushModifiers = NewElementBuilder.prototype.pushModifiers;
+    if (enableModifierSupport) {
+      NewElementBuilder.prototype.pushModifiers = function (modifiers) {
+        const debugRenderTree = self.debugRenderTree;
+        if (debugRenderTree) {
+          modifiers = modifiers || [];
+          const modifier = modifiers[0];
+          let element = null;
+          if (modifiers.length) {
+            element = modifier[1]?.element || modifier.state.element;
+          }
+          for (const modifier of modifiers) {
+            const state = {};
+            const modifierState =
+              modifier.state?.instance || modifier.state || modifier[1];
+            const instance = modifierState?.instance || modifierState?.delegate;
+            let name =
+              modifier.definition?.resolvedName ||
+              modifierState?.debugName ||
+              instance?.name;
+            if (!name) {
+              try {
+                name = modifier.manager?.getDebugName?.();
+              } catch (e) {
+                // failed
+              }
+              name = name || 'unknown-modifier';
+            }
+            const args = {
+              positional: [],
+              named: {},
+            };
+            const positional =
+              modifierState?.args?.positional?.references ||
+              modifierState?.args?.positional ||
+              [];
+            for (const value of positional) {
+              if (value && value[self.reference.REFERENCE]) {
+                args.positional.push(value);
+              } else {
+                args.positional.push(createRef(value));
+              }
+            }
+            let named = modifierState?.args?.named;
+            if (!self.reference.createUnboundRef) {
+              try {
+                named = modifierState?.args?.named?.constructor;
+              } catch (e) {
+                //
+              }
+              try {
+                named = named || modifierState?.args?.named?.map;
+              } catch (e) {
+                //
+              }
+            }
+            for (const [key, value] of Object.entries(named || {})) {
+              args.named[key] = createRef(value);
+            }
+            debugRenderTree?.create(state, {
+              type: 'modifier',
+              name,
+              args: createArgs(args),
+              instance: instance,
+            });
+            debugRenderTree?.didRender(state, {
+              parentElement: () => element.parentElement,
+              firstNode: () => element,
+              lastNode: () => element,
+            });
+            self.registerDestructor(modifier.state, () => {
+              debugRenderTree?.willDestroy(state);
+            });
+          }
+        }
+        return pushModifiers.call(this, modifiers);
+      };
+    }
+
     const pushRemoteElement = NewElementBuilder.prototype.pushRemoteElement;
     NewElementBuilder.prototype.pushRemoteElement = function (
       element,
       guid,
       insertBefore
     ) {
-      remoteStack.push({ element });
       const ref = createRef(element);
       const capturedArgs = {
         positional: [ref],
@@ -86,18 +184,27 @@ class InElementSupportProvider {
       if (insertBefore) {
         capturedArgs.named.insertBefore = insertBefore;
       }
-      const inElementArgs = self.reference.createUnboundRef
-        ? capturedArgs
-        : {
-            value() {
-              return capturedArgs;
-            },
-          };
       const debugRenderTree = self.debugRenderTree;
-      debugRenderTree?.create(remoteStack.at(-1), {
+
+      const r = pushRemoteElement.call(this, element, guid, insertBefore);
+      const block = this.blockStack.current;
+
+      if (this.DESTROY) {
+        const destructor = block[this.DESTROY];
+        block[this.DESTROY] = function () {
+          self.debugRenderTree?.willDestroy(block);
+          destructor.call(this);
+        };
+      } else {
+        self.registerDestructor?.(block, () => {
+          self.debugRenderTree?.willDestroy(block);
+        });
+      }
+
+      debugRenderTree?.create(block, {
         type: 'keyword',
         name: 'in-element',
-        args: inElementArgs,
+        args: createArgs(capturedArgs),
         instance: {
           args: {
             named: {
@@ -110,21 +217,20 @@ class InElementSupportProvider {
           },
         },
       });
-      return pushRemoteElement.call(this, element, guid, insertBefore);
+      return r;
     };
 
     const popRemoteElement = NewElementBuilder.prototype.popRemoteElement;
     NewElementBuilder.prototype.popRemoteElement = function (...args) {
-      const element = this.element;
+      const block = this.blockStack.current;
       popRemoteElement.call(this, ...args);
       const parentElement = this.element;
       const debugRenderTree = self.debugRenderTree;
-      debugRenderTree?.didRender(remoteStack.at(-1), {
+      debugRenderTree?.didRender(block, {
         parentElement: () => parentElement,
-        firstNode: () => element,
-        lastNode: () => element,
+        firstNode: () => block.firstNode(),
+        lastNode: () => block.lastNode(),
       });
-      remoteStack.pop();
     };
 
     this.debugRenderTreeFunctions = {
@@ -136,6 +242,7 @@ class InElementSupportProvider {
       pushRemoteElement,
       popRemoteElement,
       didAppendNode,
+      pushModifiers,
     };
   }
 
@@ -148,6 +255,7 @@ class InElementSupportProvider {
       this.NewElementBuilder.prototype,
       this.NewElementBuilderFunctions
     );
+    this.NewElementBuilderFunctions = null;
   }
 
   require(req) {
@@ -175,7 +283,8 @@ export default class RenderTree {
     try {
       this.inElementSupport = new InElementSupportProvider(owner);
     } catch (e) {
-      console.error('failed to setup in element support', e);
+      console.error('failed to setup in element support');
+      console.error(e);
       // not supported
     }
 
@@ -408,18 +517,47 @@ export default class RenderTree {
     this.retainedObjects = new Map();
   }
 
-  _createTemplateOnlyComponent(args) {
+  _createSimpleInstance(name, args) {
     const obj = Object.create(null);
     obj.args = args;
     obj.constructor = {
-      name: 'TemplateOnlyComponent',
+      name: name,
       comment: 'fake constructor',
     };
     return obj;
   }
 
+  _insertHtmlElementNode(node, parentNode) {
+    const element = node.bounds.firstNode;
+    const htmlNode = {
+      id: node.id + 'html-element',
+      type: 'html-element',
+      name: element.tagName.toLowerCase(),
+      instance: element,
+      template: null,
+      bounds: {
+        firstNode: element,
+        lastNode: element,
+        parentElement: element.parentElement,
+      },
+      args: {
+        named: {},
+        positional: [],
+      },
+      children: [],
+    };
+    const idx = parentNode.children.indexOf(node);
+    parentNode.children.splice(idx, 0, htmlNode);
+    return this._serializeRenderNode(htmlNode, parentNode);
+  }
+
   _serializeRenderNodes(nodes, parentNode = null) {
-    return nodes.map((node) => this._serializeRenderNode(node, parentNode));
+    const mapped = [];
+    // nodes can be mutated during serialize, which is why we use indexing instead of .map
+    for (let i = 0; i < nodes.length; i++) {
+      mapped.push(this._serializeRenderNode(nodes[i], parentNode));
+    }
+    return mapped;
   }
 
   _serializeRenderNode(node, parentNode = null) {
@@ -460,15 +598,49 @@ export default class RenderTree {
         this.parentNodes[node.id] = parentNode;
       }
 
+      if (node.type === 'html-element') {
+        // show set attributes in inspector
+        Array.from(node.instance.attributes).forEach((attr) => {
+          node.args.named[attr.nodeName] = attr.nodeValue;
+        });
+        // move modifiers and components into the element children
+        parentNode.children.forEach((child) => {
+          if (
+            child.bounds.parentElement === node.instance ||
+            (child.type === 'modifier' &&
+              child.bounds.firstNode === node.instance)
+          ) {
+            node.children.push(child);
+          }
+        });
+        node.children.forEach((child) => {
+          const idx = parentNode.children.indexOf(child);
+          if (idx >= 0) {
+            parentNode.children.splice(idx, 1);
+          }
+        });
+      }
+
+      if (node.type === 'component' && !node.instance) {
+        node.instance = this._createSimpleInstance(
+          'TemplateOnlyComponent',
+          node.args.named
+        );
+      }
+
+      if (node.type === 'modifier') {
+        node.instance =
+          node.instance || this._createSimpleInstance(node.name, node.args);
+        node.instance.toString = () => node.name;
+        if (parentNode.instance !== node.bounds.firstNode) {
+          return this._insertHtmlElementNode(node, parentNode);
+        }
+      }
+
       this.serialized[node.id] = serialized = {
         ...node,
         args: this._serializeArgs(node.args),
-        instance: this._serializeItem(
-          node.instance ||
-            (node.type === 'component'
-              ? this._createTemplateOnlyComponent(node.args.named)
-              : undefined)
-        ),
+        instance: this._serializeItem(node.instance),
         bounds: this._serializeBounds(node.bounds),
         children: this._serializeRenderNodes(node.children, node),
       };
@@ -535,7 +707,7 @@ export default class RenderTree {
 
     this.retainedObjects.set(object, id);
 
-    return { id };
+    return { id, type: typeof object, inspect: inspect(object) };
   }
 
   _releaseStaleObjects() {
@@ -578,8 +750,15 @@ export default class RenderTree {
     while (candidates.length > 0) {
       let candidate = candidates.shift();
       let range = this.getRange(candidate.id);
+      const isAllowed =
+        candidate.type !== 'modifier' && candidate.type !== 'html-element';
+
+      if (!isAllowed) {
+        candidates.push(...candidate.children);
+        continue;
+      }
 
-      if (range && range.isPointInRange(dom, 0)) {
+      if (isAllowed && range && range.isPointInRange(dom, 0)) {
         // We may be able to find a more exact match in one of the children.
         return (
           this._matchRenderNodes(candidate.children, dom, false) || candidate

package/ember_debug/libs/view-inspection.js

@@ -78,6 +78,22 @@ function makeStylesheet(id) {
       color: rgb(168, 148, 166);
     }
 
+    #${prefix}-tooltip-${id} .${prefix}-tooltip-detail-instance > .${prefix}-tooltip-token-tag {
+      cursor: pointer;
+    }
+
+    #${prefix}-tooltip-${id} .${prefix}-tooltip-detail-instance > .${prefix}-tooltip-token-tag:after {
+      content: "\\1F517"
+    }
+
+    #${prefix}-tooltip-${id} .${prefix}-tooltip-detail-controller > .${prefix}-tooltip-token-tag {
+      cursor: pointer;
+    }
+
+    #${prefix}-tooltip-${id} .${prefix}-tooltip-detail-controller > .${prefix}-tooltip-token-tag:after {
+      content: "\\1F517"
+    }
+
     #${prefix}-tooltip-${id} .${prefix}-tooltip-token-name {
       /* https://github.com/ChromeDevTools/devtools-frontend/blob/103326238685ac582d3bf2a02f1627a80e3fce5f/front_end/ui/inspectorSyntaxHighlight.css#L60 */
       color: rgb(136, 18, 128);
@@ -505,6 +521,18 @@ export default class ViewInspection {
           this._tokenizeItem(node.instance)
         );
       }
+      const detail =
+        tbody.querySelector(
+          '.ember-inspector-tooltip-detail-instance > .ember-inspector-tooltip-token-tag'
+        ) ||
+        tbody.querySelector(
+          '.ember-inspector-tooltip-detail-controller > .ember-inspector-tooltip-token-tag'
+        );
+      if (detail) {
+        detail.onclick = () => {
+          this.objectInspector.sendToConsole(node.instance.id);
+        };
+      }
     }
   }
 

package/ember_debug/object-inspector.js

@@ -3,21 +3,27 @@ import DebugPort from './debug-port';
 import bound from 'ember-debug/utils/bound-method';
 import {
   isComputed,
-  isDescriptor,
   getDescriptorFor,
   typeOf,
+  inspect,
 } from 'ember-debug/utils/type-check';
 import { compareVersion } from 'ember-debug/utils/version';
-import { inspect as emberInspect } from 'ember-debug/utils/ember/debug';
-import Ember, { EmberObject } from 'ember-debug/utils/ember';
+import {
+  EmberObject,
+  meta as emberMeta,
+  VERSION,
+  CoreObject,
+  ObjectProxy,
+  ArrayProxy,
+  Service,
+  Component,
+} from 'ember-debug/utils/ember';
 import { cacheFor, guidFor } from 'ember-debug/utils/ember/object/internals';
 import { _backburner, join } from 'ember-debug/utils/ember/runloop';
 import emberNames from './utils/ember-object-names';
 import getObjectName from './utils/get-object-name';
 import { EmberLoader } from 'ember-debug/utils/ember/loader';
 
-const { meta: emberMeta, VERSION, CoreObject, ObjectProxy } = Ember;
-
 const GlimmerComponent = (() => {
   try {
     return EmberLoader.require('@glimmer/component').default;
@@ -88,7 +94,7 @@ try {
 
 const HAS_GLIMMER_TRACKING = tagValue && tagValidate && track && tagForProperty;
 
-const keys = Object.keys || Ember.keys;
+const keys = Object.keys;
 
 /**
  * Determine the type and get the value of the passed property
@@ -107,6 +113,12 @@ function inspectValue(object, key, computedValue) {
 
   // TODO: this is not very clean. We should refactor calculateCP, etc, rather than passing computedValue
   if (computedValue !== undefined) {
+    if (value instanceof HTMLElement) {
+      return {
+        type: 'type-object',
+        inspect: `<${value.tagName.toLowerCase()}>`,
+      };
+    }
     return { type: `type-${typeOf(value)}`, inspect: inspect(value) };
   }
 
@@ -115,89 +127,16 @@ function inspectValue(object, key, computedValue) {
   } else if (isComputed(object, key)) {
     string = '<computed>';
     return { type: 'type-descriptor', inspect: string };
-  } else if (isDescriptor(value)) {
+  } else if (value?.isDescriptor) {
     return { type: 'type-descriptor', inspect: value.toString() };
+  } else if (value instanceof HTMLElement) {
+    return { type: 'type-object', inspect: value.tagName.toLowerCase() };
   } else {
     return { type: `type-${typeOf(value)}`, inspect: inspect(value) };
   }
 }
 
-function inspect(value) {
-  if (typeof value === 'function') {
-    return 'function() { ... }';
-  } else if (value instanceof EmberObject) {
-    return value.toString();
-  } else if (typeOf(value) === 'array') {
-    if (value.length === 0) {
-      return '[]';
-    } else if (value.length === 1) {
-      return `[ ${inspect(value[0])} ]`;
-    } else {
-      return `[ ${inspect(value[0])}, ... ]`;
-    }
-  } else if (value instanceof Error) {
-    return `Error: ${value.message}`;
-  } else if (value === null) {
-    return 'null';
-  } else if (typeOf(value) === 'date') {
-    return value.toString();
-  } else if (typeof value === 'object') {
-    // `Ember.inspect` is able to handle this use case,
-    // but it is very slow as it loops over all props,
-    // so summarize to just first 2 props
-    // if it defines a toString, we use that instead
-    if (
-      typeof value.toString === 'function' &&
-      value.toString !== Object.prototype.toString &&
-      value.toString !== Function.prototype.toString
-    ) {
-      try {
-        return `<Object:${value.toString()}>`;
-      } catch (e) {
-        //
-      }
-    }
-    let ret = [];
-    let v;
-    let count = 0;
-    let broken = false;
-
-    for (let key in value) {
-      if (!('hasOwnProperty' in value) || value.hasOwnProperty(key)) {
-        if (count++ > 1) {
-          broken = true;
-          break;
-        }
-        v = value[key];
-        if (v === 'toString') {
-          continue;
-        } // ignore useless items
-        if (typeOf(v).includes('function')) {
-          v = 'function() { ... }';
-        }
-        if (typeOf(v) === 'array') {
-          v = `[Array : ${v.length}]`;
-        }
-        if (typeOf(v) === 'object') {
-          v = '[Object]';
-        }
-        ret.push(`${key}: ${v}`);
-      }
-    }
-    let suffix = ' }';
-    if (broken) {
-      suffix = ' ...}';
-    }
-    return `{ ${ret.join(', ')}${suffix}`;
-  } else {
-    return emberInspect(value);
-  }
-}
-
 function isMandatorySetter(descriptor) {
-  if (descriptor.set && descriptor.set === Ember.MANDATORY_SETTER_FUNCTION) {
-    return true;
-  }
   if (
     descriptor.set &&
     Function.prototype.toString
@@ -431,6 +370,9 @@ export default class extends DebugPort {
       sendToConsole(message) {
         this.sendToConsole(message.objectId, message.property);
       },
+      gotoSource(message) {
+        this.gotoSource(message.objectId, message.property);
+      },
       sendControllerToConsole(message) {
         const container = this.namespace?.owner;
         this.sendValueToConsole(container.lookup(`controller:${message.name}`));
@@ -516,6 +458,26 @@ export default class extends DebugPort {
     });
   }
 
+  gotoSource(objectId, prop) {
+    let object = this.sentObjects[objectId];
+    let value;
+
+    if (prop === null || prop === undefined) {
+      value = this.sentObjects[objectId];
+    } else {
+      value = calculateCP(object, { name: prop }, {});
+    }
+    // for functions and classes we want to show the source
+    if (typeof value === 'function') {
+      this.adapter.inspectValue(value);
+    }
+    // use typeOf to distinguish basic objects/classes and Date, Error etc.
+    // objects like {...} have the constructor set to Object
+    if (typeOf(value) === 'object' && value.constructor !== Object) {
+      this.adapter.inspectValue(value.constructor);
+    }
+  }
+
   sendToConsole(objectId, prop) {
     let object = this.sentObjects[objectId];
     let value;
@@ -675,7 +637,6 @@ export default class extends DebugPort {
     // insert ember mixins
     for (let mixin of own) {
       let name = (
-        mixin[Ember.NAME_KEY] ||
         mixin.ownerConstructor ||
         emberNames.get(mixin) ||
         ''
@@ -722,7 +683,7 @@ export default class extends DebugPort {
     }
 
     if (
-      object instanceof Ember.ArrayProxy &&
+      object instanceof ArrayProxy &&
       object.content &&
       !object._showProxyDetails
     ) {
@@ -941,7 +902,7 @@ function addProperties(properties, hash) {
       }
 
       if (!options.isService) {
-        options.isService = desc.value instanceof Ember.Service;
+        options.isService = desc.value instanceof Service;
       }
     }
     if (options.isService) {
@@ -1272,7 +1233,7 @@ function getDebugInfo(object) {
   let debugInfo = null;
   let objectDebugInfo = object._debugInfo;
   if (objectDebugInfo && typeof objectDebugInfo === 'function') {
-    if (object instanceof Ember.ObjectProxy && object.content) {
+    if (object instanceof ObjectProxy && object.content) {
       object = object.content;
     }
     debugInfo = objectDebugInfo.call(object);
@@ -1285,7 +1246,7 @@ function getDebugInfo(object) {
   skipProperties.push('isDestroyed', 'isDestroying', 'container');
   // 'currentState' and 'state' are un-observable private properties.
   // The rest are skipped to reduce noise in the inspector.
-  if (Ember.Component && object instanceof Ember.Component) {
+  if (Component && object instanceof Component) {
     skipProperties.push(
       'currentState',
       'state',
@@ -1320,7 +1281,7 @@ function calculateCP(object, item, errorsForObject) {
   const property = item.name;
   delete errorsForObject[property];
   try {
-    if (object instanceof Ember.ArrayProxy && property == parseInt(property)) {
+    if (object instanceof ArrayProxy && property == parseInt(property)) {
       return object.objectAt(property);
     }
     return item.isGetter || property.includes?.('.')

package/ember_debug/route-debug.js

@@ -1,10 +1,9 @@
 /* eslint-disable ember/no-private-routing-service */
 import DebugPort from './debug-port';
 import { compareVersion } from 'ember-debug/utils/version';
+import { VERSION } from 'ember-debug/utils/ember';
 import classify from 'ember-debug/utils/classify';
 import dasherize from 'ember-debug/utils/dasherize';
-
-import Ember from 'ember-debug/utils/ember';
 import { _backburner, later } from 'ember-debug/utils/ember/runloop';
 import bound from 'ember-debug/utils/bound-method';
 
@@ -202,7 +201,7 @@ function buildSubTree(routeTree, route) {
       // 3.9.0 removed intimate APIs from router
       // https://github.com/emberjs/ember.js/pull/17843
       // https://deprecations.emberjs.com/v3.x/#toc_remove-handler-infos
-      if (compareVersion(Ember.VERSION, '3.9.0') !== -1) {
+      if (compareVersion(VERSION, '3.9.0') !== -1) {
         // Ember >= 3.9.0
         routeHandler = routerLib.getRoute(handler);
       } else {