ember-inspector 4.11.0-alpha.2024.3.3 → 4.11.0-alpha.2024.3.30

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';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-inspector",
-  "version": "4.11.0-alpha.2024.3.3+56575c0",
+  "version": "4.11.0-alpha.2024.3.30+cfff718",
   "description": "Extends developer tools to allow you to better inspect your Ember.js apps.",
   "repository": "https://github.com/emberjs/ember-inspector",
   "license": "MIT",

package/public/assets/svg/code-source.svg

@@ -0,0 +1,9 @@
+<svg fill="#000000" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64px" height="64px" viewBox="0 0 446.381 446.381" xml:space="preserve">
+
+<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
+<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
+<g id="SVGRepo_iconCarrier"> <g> <g> <circle cx="223.19" cy="223.19" r="50.998"/> <path d="M441.381,193.19h-39.666c-12.701-75.828-72.697-135.823-148.525-148.524V5c0-2.761-2.238-5-5-5h-50c-2.761,0-5,2.239-5,5 v39.666C117.362,57.367,57.367,117.362,44.666,193.19H5c-2.761,0-5,2.239-5,5v50c0,2.762,2.239,5,5,5h39.666 c12.701,75.828,72.696,135.824,148.524,148.525v39.666c0,2.76,2.239,5,5,5h50c2.762,0,5-2.24,5-5v-39.666 c75.828-12.701,135.824-72.697,148.525-148.525h39.666c2.76,0,5-2.238,5-5v-50C446.381,195.429,444.143,193.19,441.381,193.19z M223.19,354.214c-72.247,0-131.024-58.776-131.024-131.024c0-72.247,58.777-131.024,131.024-131.024 c72.248,0,131.025,58.777,131.025,131.024C354.215,295.438,295.438,354.214,223.19,354.214z"/> </g> </g> </g>
+
+</svg>

package/skeletons/web-extension/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "Ember Inspector (Nightly)",
   "description": "Tool for debugging Ember applications.",
-  "version": "2024.3.3",
+  "version": "2024.3.30",
   "icons": {
     "16": "{{PANE_ROOT}}/assets/images/icon16.png",
     "38": "{{PANE_ROOT}}/assets/images/icon38.png",
@@ -74,5 +74,5 @@
       ]
     }
   ],
-  "version_name": "4.11.0 (nightly build 2024.3.3 / 56575c0)"
+  "version_name": "4.11.0 (nightly build 2024.3.30 / cfff718)"
 }

package/tests/acceptance/object-inspector-test.js

@@ -785,6 +785,74 @@ module('Object Inspector', function (hooks) {
     await click('[data-test-send-object-to-console-btn]');
   });
 
+  test('Goto Source', async function (assert) {
+    assert.expect(6);
+
+    await visit('/');
+
+    await sendMessage({
+      type: 'objectInspector:updateObject',
+      name: 'My Object',
+      objectId: 'object-id',
+      details: [
+        {
+          name: 'Own Properties',
+          expand: true,
+          properties: [
+            {
+              name: 'myProp',
+              value: {
+                inspect: 'func',
+                type: 'type-function',
+              },
+            },
+          ],
+        },
+        {
+          name: 'prototype',
+          expand: true,
+          properties: [
+            {
+              name: 'abc',
+              value: {
+                inspect: 'Teddy',
+                type: 'type-string',
+              },
+            },
+          ],
+        },
+      ],
+    });
+
+    respondWith('objectInspector:gotoSource', ({ objectId, property }) => {
+      assert.strictEqual(objectId, 'object-id');
+      assert.strictEqual(property, undefined);
+      return false;
+    });
+
+    // Grouped View
+    await click('[data-test-goto-class-source-btn]');
+
+    respondWith('objectInspector:gotoSource', ({ objectId, property }) => {
+      assert.strictEqual(objectId, 'object-id');
+      assert.strictEqual(property, 'myProp');
+      return false;
+    });
+
+    await click('[data-test-goto-source-btn]');
+
+    // All View
+    await click('[data-test-object-display-type-all]');
+
+    respondWith('objectInspector:gotoSource', ({ objectId, property }) => {
+      assert.strictEqual(objectId, 'object-id');
+      assert.strictEqual(property, 'myProp');
+      return false;
+    });
+
+    await click('[data-test-goto-source-btn]');
+  });
+
   test('Read only CPs cannot be edited', async function (assert) {
     await visit('/');