ember-inspector 4.13.1-alpha.2025.7.29 → 4.13.1-alpha.2025.7.30

package/dist/websocket/web-extension-C3pMNVSY.js

@@ -0,0 +1,144 @@
+import { B as BasicAdapter } from './basic-DfbgtngO.js';
+import { typeOf } from './type-check.js';
+import { getEnv } from './ember.js';
+import { r as run } from './runloop-CF-Qpqgy.js';
+
+const {
+  isArray
+} = Array;
+const {
+  keys
+} = Object;
+class WebExtension extends BasicAdapter {
+  // eslint-disable-next-line ember/classic-decorator-hooks
+  init() {
+    this._channel = new MessageChannel();
+    this._chromePort = this._channel?.port1;
+    super.init();
+  }
+  connect() {
+    const channel = this._channel;
+    return super.connect().then(() => {
+      window.postMessage('debugger-client', '*', [channel.port2]);
+      this._listen();
+    }, null);
+  }
+  sendMessage(options = {}) {
+    // If prototype extensions are disabled, `Ember.A()` arrays
+    // would not be considered native arrays, so it's not possible to
+    // "clone" them through postMessage unless they are converted to a
+    // native array.
+    options = deepClone(options);
+    try {
+      this._chromePort.postMessage(options);
+    } catch (e) {
+      console.log('failed to send message', e);
+    }
+  }
+
+  /**
+   * Open the devtools "Elements" and select an DOM node.
+   *
+   * @param  {Node|Function} value The DOM node to select
+   */
+  inspectValue(value) {
+    // NOTE:
+    //
+    // Basically, we are just trying to call `inspect(node)` here.
+    // However, `inspect` is a special function that is in the global
+    // scope but not on the global object (i.e. `window.inspect`) does
+    // not work. This sometimes causes problems, because, e.g. if the
+    // page has a div with the ID `inspect`, `window.inspect` will point
+    // to that div and shadow the "global" inspect function with no way
+    // to get it back. That causes "`inspect` is not a function" errors.
+    //
+    // As it turns out, however, when the extension page evals, the
+    // `inspect` function does not get shadowed. So, we can ask the
+    // inspector extension page to call that function for us, using
+    // `inspected.Window.eval('inspect(node)')`.
+    //
+    // However, since we cannot just send the DOM node directly to the
+    // extension, we will have to store it in a temporary global variable
+    // so that the extension can find it.
+
+    let name = `__EMBER_INSPECTOR_${(Math.random() * 100000000).toFixed(0)}`;
+    window[name] = value;
+    this.namespace.port.send('view:inspectJSValue', {
+      name
+    });
+  }
+  _listen() {
+    let chromePort = this._chromePort;
+    chromePort.addEventListener('message', event => {
+      const message = event.data;
+
+      // We should generally not be run-wrapping here. Starting a runloop in
+      // ember-debug will cause the inspected app to revalidate/rerender. We
+      // are generally not intending to cause changes to the rendered output
+      // of the app, so this is generally unnecessary, and in big apps this
+      // could be quite slow. There is nothing special about the `view:*`
+      // messages – I (GC) just happened to have reviewed all of them recently
+      // and can be quite sure that they don't need the runloop. We should
+      // audit the rest of them and see if we can remove the else branch. I
+      // think we most likely can. In the limited cases (if any) where the
+      // runloop is needed, the callback code should just do the wrapping
+      // themselves.
+      if (message.type.startsWith('view:')) {
+        this._messageReceived(message);
+      } else {
+        run(() => {
+          this._messageReceived(message);
+        });
+      }
+    });
+    chromePort.start();
+  }
+}
+
+// On some older Ember version `Ember.ENV.EXTEND_PROTOTYPES` is not
+// guarenteed to be an object. While this code only support 3.4+ (all
+// of which normalizes `EXTEND_PROTOTYPES` for us), startup-wrapper.js
+// eagerly require/load ember-debug modules, which ultimately causes
+// this top-level code to run, even we are going to pick a different
+// adapter later. See GH #1114.
+const HAS_ARRAY_PROTOTYPE_EXTENSIONS = (() => {
+  try {
+    return getEnv().EXTEND_PROTOTYPES.Array === true;
+  } catch {
+    return false;
+  }
+})();
+let deepClone;
+if (HAS_ARRAY_PROTOTYPE_EXTENSIONS) {
+  deepClone = function deepClone(item) {
+    return item;
+  };
+} else {
+  /**
+   * Recursively clones all arrays. Needed because Chrome
+   * refuses to clone Ember Arrays when extend prototypes is disabled.
+   *
+   * If the item passed is an array, a clone of the array is returned.
+   * If the item is an object or an array, or array properties/items are cloned.
+   *
+   * @param {Mixed} item The item to clone
+   * @return {Mixed}
+   */
+  deepClone = function deepClone(item) {
+    let clone = item;
+    if (isArray(item)) {
+      clone = new Array(item.length);
+      item.forEach((child, key) => {
+        clone[key] = deepClone(child);
+      });
+    } else if (item && typeOf(item) === 'object') {
+      clone = {};
+      keys(item).forEach(key => {
+        clone[key] = deepClone(item[key]);
+      });
+    }
+    return clone;
+  };
+}
+
+export { WebExtension as W };

package/dist/websocket/websocket-debug.js

@@ -0,0 +1,60 @@
+import { l as loadEmberDebugInWebpage, o as onEmberReady, s as startInspector } from './start-inspector-BPAW_WLv.js';
+import { B as BasicAdapter, o as onReady } from './basic-DfbgtngO.js';
+import { r as run } from './runloop-CF-Qpqgy.js';
+import './versions.js';
+import './base-object-HAEdWjmg.js';
+import './ember.js';
+
+class adapter extends BasicAdapter {
+  sendMessage(options = {}) {
+    this.socket.emit('emberInspectorMessage', options);
+  }
+  get socket() {
+    return window.EMBER_INSPECTOR_CONFIG.remoteDebugSocket;
+  }
+  _listen() {
+    this.socket.on('emberInspectorMessage', message => {
+      // We should generally not be run-wrapping here. Starting a runloop in
+      // ember-debug will cause the inspected app to revalidate/rerender. We
+      // are generally not intending to cause changes to the rendered output
+      // of the app, so this is generally unnecessary, and in big apps this
+      // could be quite slow. There is nothing special about the `view:*`
+      // messages – I (GC) just happened to have reviewed all of them recently
+      // and can be quite sure that they don't need the runloop. We should
+      // audit the rest of them and see if we can remove the else branch. I
+      // think we most likely can. In the limited cases (if any) where the
+      // runloop is needed, the callback code should just do the wrapping
+      // themselves.
+      if (message.type.startsWith('view:')) {
+        this._messageReceived(message);
+      } else {
+        run(() => {
+          this._messageReceived(message);
+        });
+      }
+    });
+  }
+  _disconnect() {
+    this.socket.removeAllListeners('emberInspectorMessage');
+  }
+  connect() {
+    return new Promise((resolve, reject) => {
+      onReady(() => {
+        if (this.isDestroyed) {
+          reject();
+        }
+        const EMBER_INSPECTOR_CONFIG = window.EMBER_INSPECTOR_CONFIG;
+        if (typeof EMBER_INSPECTOR_CONFIG === 'object' && EMBER_INSPECTOR_CONFIG.remoteDebugSocket) {
+          resolve();
+        }
+      });
+    }).then(() => {
+      this._listen();
+    });
+  }
+  willDestroy() {
+    this._disconnect();
+  }
+}
+
+loadEmberDebugInWebpage(() => onEmberReady(startInspector(adapter)));

package/ember-cli-build.js

@@ -9,7 +9,12 @@ const writeFile = require('broccoli-file-creator');
 const replace = require('broccoli-string-replace');
 const Funnel = require('broccoli-funnel');
 const packageJson = require('./package.json');
-const { map, mv } = stew;
+const { mv } = stew;
+
+const {
+  EMBER_VERSIONS_SUPPORTED,
+  PREVIOUS_EMBER_VERSIONS_SUPPORTED,
+} = require('ember-debug/versions');
 
 const options = {
   autoImport: {
@@ -84,95 +89,30 @@ module.exports = function (defaults) {
   app.import('node_modules/compare-versions/index.js');
   app.import('node_modules/normalize.css/normalize.css');
 
-  let emberDebug = 'ember_debug/dist';
-
-  emberDebug = new Funnel(emberDebug, {
-    destDir: 'ember-debug',
-    include: ['**/*.js'],
-  });
-
-  const previousEmberVersionsSupportedString = `[${packageJson.previousEmberVersionsSupported
-    .map(function (item) {
-      return `'${item}'`;
-    })
-    .join(',')}]`;
-  const emberVersionsSupportedString = `[${packageJson.emberVersionsSupported
-    .map(function (item) {
-      return `'${item}'`;
-    })
-    .join(',')}]`;
-
-  let startupWrapper = new Funnel('ember_debug', {
-    srcDir: 'vendor',
-    files: ['startup-wrapper.js'],
-  });
-
-  startupWrapper = replace(startupWrapper, {
-    files: ['startup-wrapper.js'],
-    patterns: [
-      {
-        match: /{{EMBER_VERSIONS_SUPPORTED}}/,
-        replacement: emberVersionsSupportedString,
-      },
-    ],
-  });
-
-  const loader = new Funnel('ember_debug', {
-    srcDir: 'vendor',
-    files: ['loader.js'],
-  });
-
-  emberDebug = mergeTrees([startupWrapper, emberDebug, loader]);
-
-  emberDebug = concatFiles(emberDebug, {
-    headerFiles: ['loader.js'],
-    inputFiles: ['**/*.js'],
-    outputFile: '/ember_debug.js',
-    sourceMapConfig: { enabled: false },
-  });
-
-  function wrapWithLoader(content) {
-    return `(function loadEmberDebugInWebpage() {
-    const waitForEmberLoad = new Promise((resolve) => {
-      if (window.requireModule) {
-        const has =
-          window.requireModule.has ||
-          function has(id) {
-            return !!(
-              window.requireModule.entries[id] ||
-              window.requireModule.entries[id + '/index']
-            );
-          };
-        if (has('ember')) {
-          return resolve();
-        }
-      }
-
-      /**
-       * NOTE: if the above (for some reason) fails and the consuming app has
-       *       deprecation-workflow's throwOnUnhandled: true
-       *         or set \`ember-global\`'s handler to 'throw'
-       *       and is using at least \`ember-source@3.27\`
-       *
-       *       this will throw an exception in the consuming project
-       */
-      if (window.Ember) return resolve();
-
-      window.addEventListener('Ember', resolve, { once: true });
-    });
-    waitForEmberLoad.then(() => ${content});
-  })()
-  `;
-  }
+  const previousEmberVersionsSupportedString = JSON.stringify(
+    PREVIOUS_EMBER_VERSIONS_SUPPORTED,
+  );
+  const emberVersionsSupportedString = JSON.stringify(EMBER_VERSIONS_SUPPORTED);
 
   const emberDebugs = [];
+
   ['basic', 'chrome', 'firefox', 'bookmarklet', 'websocket'].forEach(
     function (dist) {
-      emberDebugs[dist] = map(emberDebug, '**/*.js', function (content) {
-        return wrapWithLoader(
-          `(function(adapter) {\n${content}\n}('${dist}'))`,
-        );
-      });
+      let emberDebug = 'ember_debug/dist';
+
+      let entryPoint = concatFiles(
+        new Funnel(emberDebug, {
+          destDir: 'ember-debug',
+          include: [`${dist}-debug.js`],
+        }),
+        {
+          inputFiles: ['**/*.js'],
+          outputFile: '/ember_debug.js',
+          sourceMapConfig: { enabled: false },
+        },
+      );
+
+      emberDebugs[dist] = mergeTrees([emberDebug, entryPoint]);
     },
   );
 
@@ -190,10 +130,7 @@ module.exports = function (defaults) {
     patterns: emberInspectorVersionPattern,
   });
 
-  const minimumVersion = packageJson.emberVersionsSupported[0].replace(
-    /\./g,
-    '-',
-  );
+  const minimumVersion = EMBER_VERSIONS_SUPPORTED[0].replace(/\./g, '-');
   const webExtensionRoot = `panes-${minimumVersion}`;
 
   let tabLabel;
@@ -264,7 +201,7 @@ module.exports = function (defaults) {
     skeletonBookmarklet,
   ]);
 
-  packageJson.previousEmberVersionsSupported.forEach(function (version) {
+  PREVIOUS_EMBER_VERSIONS_SUPPORTED.forEach(function (version) {
     version = version.replace(/\./g, '-');
     if (env === 'production') {
       const prevDist = `dist_prev/${env}`;

package/ember_debug/entrypoints/basic-debug.js

@@ -0,0 +1,6 @@
+import loadEmberDebugInWebpage from '../lib/load-ember-debug-in-webpage';
+import { onEmberReady, startInspector } from '../lib/start-inspector';
+
+import adapter from '../adapters/basic';
+
+loadEmberDebugInWebpage(() => onEmberReady(startInspector(adapter)));

package/ember_debug/entrypoints/bookmarklet-debug.js

@@ -0,0 +1,6 @@
+import loadEmberDebugInWebpage from '../lib/load-ember-debug-in-webpage';
+import { onEmberReady, startInspector } from '../lib/start-inspector';
+
+import adapter from '../adapters/bookmarklet';
+
+loadEmberDebugInWebpage(() => onEmberReady(startInspector(adapter)));

package/ember_debug/entrypoints/chrome-debug.js

@@ -0,0 +1,6 @@
+import loadEmberDebugInWebpage from '../lib/load-ember-debug-in-webpage';
+import { onEmberReady, startInspector } from '../lib/start-inspector';
+
+import adapter from '../adapters/chrome';
+
+loadEmberDebugInWebpage(() => onEmberReady(startInspector(adapter)));

package/ember_debug/entrypoints/firefox-debug.js

@@ -0,0 +1,6 @@
+import loadEmberDebugInWebpage from '../lib/load-ember-debug-in-webpage';
+import { onEmberReady, startInspector } from '../lib/start-inspector';
+
+import adapter from '../adapters/firefox';
+
+loadEmberDebugInWebpage(() => onEmberReady(startInspector(adapter)));

package/ember_debug/entrypoints/websocket-debug.js

@@ -0,0 +1,6 @@
+import loadEmberDebugInWebpage from '../lib/load-ember-debug-in-webpage';
+import { onEmberReady, startInspector } from '../lib/start-inspector';
+
+import adapter from '../adapters/websocket';
+
+loadEmberDebugInWebpage(() => onEmberReady(startInspector(adapter)));

package/ember_debug/lib/boot-ember-inspector.js

@@ -0,0 +1,9 @@
+export default function bootEmberInspector(appInstance) {
+  appInstance.application.__inspector__booted = true;
+  appInstance.__inspector__booted = true;
+
+  // Boot the inspector (or re-boot if already booted, for example in tests)
+  window.EmberInspector._application = appInstance.application;
+  window.EmberInspector.owner = appInstance;
+  window.EmberInspector.start(true);
+}

package/ember_debug/lib/get-applications.js

@@ -0,0 +1,27 @@
+/* eslint-disable ember/new-module-imports */
+/**
+ * Get all the Ember.Application instances from Ember.Namespace.NAMESPACES
+ * and add our own applicationId and applicationName to them
+ * @return {*}
+ */
+export default function getApplications(Ember) {
+  var namespaces = Ember.A(Ember.Namespace.NAMESPACES);
+
+  var apps = namespaces.filter(function (namespace) {
+    return namespace instanceof Ember.Application;
+  });
+
+  return apps.map(function (app) {
+    // Add applicationId and applicationName to the app
+    var applicationId = Ember.guidFor(app);
+    var applicationName =
+      app.name || app.modulePrefix || `(unknown app - ${applicationId})`;
+
+    Object.assign(app, {
+      applicationId,
+      applicationName,
+    });
+
+    return app;
+  });
+}

package/ember_debug/lib/load-ember-debug-in-webpage.js

@@ -0,0 +1,30 @@
+export default function loadEmberDebugInWebpage(callback) {
+  const waitForEmberLoad = new Promise((resolve) => {
+    if (window.requireModule) {
+      const has =
+        window.requireModule.has ||
+        function has(id) {
+          return !!(
+            window.requireModule.entries[id] ||
+            window.requireModule.entries[id + '/index']
+          );
+        };
+      if (has('ember')) {
+        return resolve();
+      }
+    }
+
+    /**
+     * NOTE: if the above (for some reason) fails and the consuming app has
+     *       deprecation-workflow's throwOnUnhandled: true
+     *         or set \`ember-global\`'s handler to 'throw'
+     *       and is using at least \`ember-source@3.27\`
+     *
+     *       this will throw an exception in the consuming project
+     */
+    if (window.Ember) return resolve();
+
+    window.addEventListener('Ember', resolve, { once: true });
+  });
+  waitForEmberLoad.then(callback);
+}

package/ember_debug/lib/send-apps.js

@@ -0,0 +1,14 @@
+export default function sendApps(adapter, apps) {
+  const serializedApps = apps.map((app) => {
+    return {
+      applicationName: app.applicationName,
+      applicationId: app.applicationId,
+    };
+  });
+
+  adapter.sendMessage({
+    type: 'apps-loaded',
+    apps: serializedApps,
+    from: 'inspectedWindow',
+  });
+}

package/ember_debug/lib/send-version-miss.js

@@ -0,0 +1,39 @@
+/* eslint-disable ember/new-module-imports */
+let channel = new MessageChannel();
+let port = channel.port1;
+window.postMessage('debugger-client', '*', [channel.port2]);
+
+let registeredMiss = false;
+
+/**
+ * This function is called if the app's Ember version
+ * is not supported by this version of the inspector.
+ *
+ * It sends a message to the inspector app to redirect
+ * to an inspector version that supports this Ember version.
+ */
+export default function sendVersionMiss(Ember) {
+  if (registeredMiss) {
+    return;
+  }
+
+  registeredMiss = true;
+
+  port.addEventListener('message', (message) => {
+    if (message.type === 'check-version') {
+      sendVersionMismatch();
+    }
+  });
+
+  sendVersionMismatch();
+
+  port.start();
+
+  function sendVersionMismatch() {
+    port.postMessage({
+      name: 'version-mismatch',
+      version: Ember.VERSION,
+      from: 'inspectedWindow',
+    });
+  }
+}

package/ember_debug/lib/setup-instance-initializer.js

@@ -0,0 +1,16 @@
+/* eslint-disable ember/new-module-imports */
+export default function setupInstanceInitializer(Ember, app, callback) {
+  if (!app.__inspector__setup) {
+    app.__inspector__setup = true;
+
+    // We include the app's guid in the initializer name because in Ember versions < 3
+    // registering an instance initializer with the same name, even if on a different app,
+    // triggers an error because instance initializers seem to be global instead of per app.
+    app.instanceInitializer({
+      name: 'ember-inspector-app-instance-booted-' + Ember.guidFor(app),
+      initialize: function (instance) {
+        callback(instance);
+      },
+    });
+  }
+}