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

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
@@ -209,7 +148,7 @@ function isMandatorySetter(descriptor) {
   return false;
 }
 
-function getTagTrackedProps(tag, ownTag, level = 0) {
+function getTagTrackedTags(tag, ownTag, level = 0) {
   const props = [];
   // do not include tracked properties from dependencies
   if (!tag || level > 1) {
@@ -219,13 +158,13 @@ function getTagTrackedProps(tag, ownTag, level = 0) {
   if (tag.subtag && !Array.isArray(tag.subtag)) {
     if (tag.subtag._propertyKey) props.push(tag.subtag);
 
-    props.push(...getTagTrackedProps(tag.subtag, ownTag, level + 1));
+    props.push(...getTagTrackedTags(tag.subtag, ownTag, level + 1));
   }
   if (subtags) {
     subtags.forEach((t) => {
       if (t === ownTag) return;
       if (t._propertyKey) props.push(t);
-      props.push(...getTagTrackedProps(t, ownTag, level + 1));
+      props.push(...getTagTrackedTags(t, ownTag, level + 1));
     });
   }
   return props;
@@ -238,46 +177,67 @@ function getTrackedDependencies(object, property, tagInfo) {
   const cpDesc = emberMeta(object).peekDescriptors(property);
   const dependentKeys = [];
   if (cpDesc) {
-    dependentKeys.push(...(cpDesc._dependentKeys || []));
+    dependentKeys.push(
+      ...(cpDesc._dependentKeys || []).map((k) => ({ name: k }))
+    );
   }
   if (HAS_GLIMMER_TRACKING) {
     const ownTag = tagForProperty(object, property);
-    const props = getTagTrackedProps(tag, ownTag);
+    const tags = getTagTrackedTags(tag, ownTag);
     const mapping = {};
-    let maxRevision = tagInfo.revision ?? 0;
-    let minRevision = Infinity;
-    props.forEach((t) => {
+    let maxRevision = tagValue(tag);
+    tags.forEach((t) => {
       const p =
         (t._object ? getObjectName(t._object) + '.' : '') + t._propertyKey;
-      const [objName, ...props] = p.split('.');
+      const [objName, prop] = p.split('.');
       mapping[objName] = mapping[objName] || new Set();
-      maxRevision = Math.max(maxRevision, t.revision);
-      minRevision = Math.min(minRevision, t.revision);
-      props.forEach((p) => mapping[objName].add([p, t.revision]));
+      const value = tagValue(t);
+      if (prop) {
+        mapping[objName].add([prop, value]);
+      }
     });
 
-    const hasChange = maxRevision !== minRevision;
+    const hasChange =
+      (tagInfo.revision && maxRevision !== tagInfo.revision) || false;
+
+    const names = new Set();
 
     Object.entries(mapping).forEach(([objName, props]) => {
+      if (names.has(objName)) {
+        return;
+      }
+      names.add(objName);
       if (props.size > 1) {
-        dependentKeys.push(objName);
+        dependentKeys.push({ name: objName });
         props.forEach((p) => {
-          const changed = hasChange && p[1] >= maxRevision ? ' 🔸' : '';
-          dependentKeys.push('  •  --  ' + p[0] + changed);
+          const changed = hasChange && p[1] > tagInfo.revision;
+          const obj = {
+            child: p[0],
+          };
+          if (changed) {
+            obj.changed = true;
+          }
+          dependentKeys.push(obj);
         });
       }
       if (props.size === 1) {
         const p = [...props][0];
-        const changed = hasChange && p[1] >= maxRevision ? ' 🔸' : '';
-        dependentKeys.push(objName + '.' + p[0] + changed);
+        const changed = hasChange && p[1] > tagInfo.revision;
+        const obj = {
+          name: objName + '.' + p[0],
+        };
+        if (changed) {
+          obj.changed = true;
+        }
+        dependentKeys.push(obj);
       }
       if (props.size === 0) {
-        dependentKeys.push(objName);
+        dependentKeys.push({ name: objName });
       }
     });
   }
 
-  return [...new Set([...dependentKeys])];
+  return [...dependentKeys];
 }
 
 export default class extends DebugPort {
@@ -431,6 +391,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 +479,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 +658,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 +704,7 @@ export default class extends DebugPort {
     }
 
     if (
-      object instanceof Ember.ArrayProxy &&
+      object instanceof ArrayProxy &&
       object.content &&
       !object._showProxyDetails
     ) {
@@ -941,7 +923,7 @@ function addProperties(properties, hash) {
       }
 
       if (!options.isService) {
-        options.isService = desc.value instanceof Ember.Service;
+        options.isService = desc.value instanceof Service;
       }
     }
     if (options.isService) {
@@ -1117,7 +1099,8 @@ function calculateCPs(
         if (cache !== undefined || !item.isExpensive) {
           let value;
           if (item.canTrack && HAS_GLIMMER_TRACKING) {
-            const tagInfo = (tracked[item.name] = {});
+            tracked[item.name] = tracked[item.name] || {};
+            const tagInfo = tracked[item.name];
             tagInfo.tag = track(() => {
               value = calculateCP(object, item, errorsForObject);
             });
@@ -1272,7 +1255,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 +1268,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 +1303,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 {

package/ember_debug/utils/ember.js

@@ -9,6 +9,7 @@ try {
 }
 
 let {
+  ArrayProxy,
   Namespace,
   ActionHandler,
   ControllerMixin,
@@ -21,16 +22,25 @@ let {
   Observable,
   Evented,
   PromiseProxyMixin,
+  Service,
   Object: EmberObject,
+  ObjectProxy,
   VERSION,
   ComputedProperty,
   meta,
   get,
   set,
   computed,
+  _captureRenderTree: captureRenderTree,
 } = Ember || {};
 
+let getEnv = () => Ember.ENV;
+
 if (!Ember) {
+  captureRenderTree = emberSafeRequire('@ember/debug')?.captureRenderTree;
+  getEnv = emberSafeRequire('@ember/-internals/environment')?.getENV;
+  ArrayProxy = emberSafeRequire('@ember/array/proxy')?.default;
+  ObjectProxy = emberSafeRequire('@ember/object/proxy')?.default;
   MutableArray = emberSafeRequire('@ember/array/mutable')?.default;
   Namespace = emberSafeRequire('@ember/application/namespace')?.default;
   MutableEnumerable = emberSafeRequire('@ember/enumerable/mutable')?.default;
@@ -44,6 +54,7 @@ if (!Ember) {
   PromiseProxyMixin = emberSafeRequire(
     '@ember/object/promise-proxy-mixin'
   )?.default;
+  Service = emberSafeRequire('@ember/service')?.default;
   EmberObject = emberSafeRequire('@ember/object')?.default;
   VERSION = emberSafeRequire('ember/version')?.default;
   ComputedProperty = emberSafeRequire(
@@ -55,6 +66,7 @@ if (!Ember) {
 }
 
 export {
+  ArrayProxy,
   Namespace,
   ActionHandler,
   Application,
@@ -63,9 +75,11 @@ export {
   MutableEnumerable,
   NativeArray,
   CoreObject,
+  ObjectProxy,
   Component,
   Observable,
   Evented,
+  Service,
   PromiseProxyMixin,
   EmberObject,
   VERSION,
@@ -74,6 +88,8 @@ export {
   computed,
   get,
   set,
+  captureRenderTree,
+  getEnv,
 };
 
 export default Ember;

package/ember_debug/utils/get-object-name.js

@@ -7,6 +7,10 @@ export default function getObjectName(object) {
       (emberNames.get(object.constructor) || object.constructor.name)) ||
     '';
 
+  if (object instanceof Function) {
+    return 'Function ' + object.name;
+  }
+
   // check if object is a primitive value
   if (object !== Object(object)) {
     return typeof object;

package/ember_debug/utils/name-functions.js

@@ -12,7 +12,7 @@ export function modelName(model) {
   }
 
   if (name.length > 50) {
-    name = `${name.substr(0, 50)}...`;
+    name = `${name.slice(0, 50)}...`;
   }
   return name;
 }

package/ember_debug/utils/type-check.js

@@ -1,5 +1,9 @@
-import Debug from 'ember-debug/utils/ember/debug';
-import { ComputedProperty, meta as emberMeta } from 'ember-debug/utils/ember';
+import Debug, { inspect as emberInspect } from 'ember-debug/utils/ember/debug';
+import {
+  ComputedProperty,
+  EmberObject,
+  meta as emberMeta,
+} from 'ember-debug/utils/ember';
 import { emberSafeRequire } from 'ember-debug/utils/ember/loader';
 
 /**
@@ -21,14 +25,6 @@ export function isComputed(object, key) {
   if (getDescriptorFor(object, key) instanceof ComputedProperty) {
     return true;
   }
-
-  // Ember < 3.10
-  return object[key] instanceof ComputedProperty;
-}
-
-export function isDescriptor(value) {
-  // Ember >= 1.11
-  return value && typeof value === 'object' && value.isDescriptor;
 }
 
 /**
@@ -38,11 +34,11 @@ export function isDescriptor(value) {
  * @param {String} key The key for the property on the object
  */
 export function getDescriptorFor(object, key) {
-  if (isDescriptor(object[key])) {
+  if (object[key]?.isDescriptor) {
     return object[key];
   }
 
-  // exists longeer than ember 3.10
+  // exists longer than ember 3.10
   if (Debug.isComputed) {
     const { descriptorForDecorator, descriptorForProperty } =
       emberSafeRequire('@ember/-internals/metal') || {};
@@ -61,3 +57,77 @@ export function typeOf(obj) {
     .match(/\s([a-zA-Z]+)/)[1]
     .toLowerCase();
 }
+
+export function inspect(value) {
+  if (typeof value === 'function') {
+    return `${value.name || 'function'}() { ... }`;
+  } else if (value instanceof EmberObject) {
+    return value.toString();
+  } else if (value instanceof HTMLElement) {
+    return `<${value.tagName.toLowerCase()}>`;
+  } 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 ${v.name}() { ... }`;
+        }
+        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);
+  }
+}

package/ember_debug/utils/version.js

@@ -23,6 +23,43 @@ export function compareVersion(version1, version2) {
   return 0;
 }
 
+/**
+ *
+ * @param specifier e.g. ^5.12.0
+ * @param version 5.13
+ * @return {boolean}
+ */
+export function isInVersionSpecifier(specifier, version) {
+  let compared, i, version2;
+  let operator = specifier[0];
+  if (Number.isNaN(+operator)) {
+    specifier = specifier.slice(1);
+  }
+  specifier = cleanupVersion(specifier).split('.');
+  version2 = cleanupVersion(version).split('.');
+  if (operator === '~' && specifier[1] !== version2[1]) {
+    return false;
+  }
+  if (operator === '^' && specifier[0] !== version2[0]) {
+    return false;
+  }
+
+  if (operator === '>' && specifier[0] > version2[0]) {
+    return false;
+  }
+
+  for (i = 0; i < 3; i++) {
+    compared = compare(+specifier[i], +version2[i]);
+    if (compared < 0) {
+      return true;
+    }
+    if (compared > 0) {
+      return false;
+    }
+  }
+  return true;
+}
+
 /**
  * Remove -alpha, -beta, etc from versions
  *

package/ember_debug/view-debug.js

@@ -132,7 +132,7 @@ export default class extends DebugPort {
    * @param  {Node} node The DOM node to inspect
    */
   inspectNode(node) {
-    this.adapter.inspectNode(node);
+    this.adapter.inspectValue(node);
   }
 
   sendTree(immediate = false) {

package/lib/ui/addon/styles/_goto-source.scss

@@ -0,0 +1,30 @@
+.goto-source {
+  background: none;
+  border: none;
+  border-bottom: 1px solid transparent;
+  color: var(--base15);
+  cursor: pointer;
+  margin: 0;
+  outline: none;
+  padding: 0;
+
+  svg {
+    vertical-align: middle;
+  }
+
+  .send-chevron {
+    fill: var(--focus);
+  }
+
+  .send-text {
+    fill: var(--base12);
+  }
+}
+
+.goto-source:hover {
+  border-bottom-color: var(--focus);
+}
+
+.goto-source:active {
+  transform: translateY(1px);
+}

package/lib/ui/addon/styles/addon.scss

@@ -6,6 +6,7 @@
 @import 'nav';
 @import 'pill';
 @import 'send-to-console';
+@import 'goto-source';
 @import 'object-inspector-toggle';
 @import 'split';
 @import 'toolbar/index';

package/lib/ui/addon/styles/toolbar/_index.scss

@@ -17,6 +17,10 @@
   margin-left: 5px;
   margin-right: 5px;
 }
+.toolbar .goto-source {
+  margin-left: 5px;
+  margin-right: 5px;
+}
 
 @import 'checkbox';
 @import 'divider';