add inspector debug

Author: patricklx

packages/@ember/debug/ember-inspector-support/.eslintrc.js

@@ -0,0 +1,13 @@
+module.exports = {
+  root: true,
+  extends: '../.eslintrc.js',
+  rules: {
+    'no-useless-escape': 'off',
+
+    'ember/avoid-leaking-state-in-ember-objects': 'off',
+    'ember/no-get': 'off',
+
+    // TODO: turn this back on when we figure out switching from window.Ember to imports
+    'ember/new-module-imports': 'off',
+  },
+};

packages/@ember/debug/ember-inspector-support/adapters/basic.js

@@ -0,0 +1,161 @@
+/* eslint no-console: 0 */
+import { onReady } from '@ember/debug/ember-inspector-support/utils/on-ready';
+import BaseObject from '../utils/base-object';
+
+export default class BasicAdapter extends BaseObject {
+  init() {
+    Promise.resolve(this.connect()).then(() => {
+      this.onConnectionReady();
+    }, null);
+
+    this._messageCallbacks = [];
+  }
+
+  /**
+   * Uses the current build's config module to determine
+   * the environment.
+   *
+   * @property environment
+   * @type {String}
+   */
+  get environment() {
+    if (!this.__environment) {
+      this.__environment =
+        requireModule('@ember/debug/ember-inspector-support/config')['default'].environment;
+    }
+    return this.__environment;
+  }
+
+  debug() {
+    return console.debug(...arguments);
+  }
+
+  log() {
+    return console.log(...arguments);
+  }
+
+  /**
+   * A wrapper for `console.warn`.
+   *
+   * @method warn
+   */
+  warn() {
+    return console.warn(...arguments);
+  }
+
+  /**
+    Used to send messages to EmberExtension
+
+    @param {Object} type the message to the send
+  */
+  sendMessage(/* options */) {}
+
+  /**
+    Register functions to be called
+    when a message from EmberExtension is received
+
+    @param {Function} callback
+  */
+  onMessageReceived(callback) {
+    this._messageCallbacks.push(callback);
+  }
+
+  /**
+    Inspect a js value or specific DOM node. This usually
+    means using the current environment's tools
+    to inspect the node in the DOM.
+
+    For example, in chrome, `inspect(node)`
+    will open the Elements tab in dev tools
+    and highlight the DOM node.
+    For functions, it will open the sources tab and goto the definition
+    @param {Node|Function} node
+  */
+  inspectValue(/* value */) {}
+
+  _messageReceived(message) {
+    this._messageCallbacks.forEach((callback) => {
+      callback(message);
+    });
+  }
+
+  /**
+   * Handle an error caused by EmberDebug.
+   *
+   * This function rethrows in development and test envs,
+   * but warns instead in production.
+   *
+   * The idea is to control errors triggered by the inspector
+   * and make sure that users don't get mislead by inspector-caused
+   * bugs.
+   *
+   * @method handleError
+   * @param {Error} error
+   */
+  handleError(error) {
+    if (this.environment === 'production') {
+      if (error && error instanceof Error) {
+        error = `Error message: ${error.message}\nStack trace: ${error.stack}`;
+      }
+      this.warn(
+        `Ember Inspector has errored.\n` +
+          `This is likely a bug in the inspector itself.\n` +
+          `You can report bugs at https://github.com/emberjs/ember-inspector.\n${error}`
+      );
+    } else {
+      this.warn('EmberDebug has errored:');
+      throw error;
+    }
+  }
+
+  /**
+
+    A promise that resolves when the connection
+    with the inspector is set up and ready.
+
+    @return {Promise}
+  */
+  connect() {
+    return new Promise((resolve, reject) => {
+      onReady(() => {
+        if (this.isDestroyed) {
+          reject();
+        }
+        this.interval = setInterval(() => {
+          if (document.documentElement.dataset.emberExtension) {
+            clearInterval(this.interval);
+            resolve();
+          }
+        }, 10);
+      });
+    });
+  }
+
+  willDestroy() {
+    super.willDestroy();
+    clearInterval(this.interval);
+  }
+
+  _isReady = false;
+  _pendingMessages = [];
+
+  send(options) {
+    if (this._isReady) {
+      this.sendMessage(...arguments);
+    } else {
+      this._pendingMessages.push(options);
+    }
+  }
+
+  /**
+    Called when the connection is set up.
+    Flushes the pending messages.
+  */
+  onConnectionReady() {
+    // Flush pending messages
+    const messages = this._pendingMessages;
+    messages.forEach((options) => this.sendMessage(options));
+    messages.length = 0;
+    this._isReady = true;
+  }
+}

packages/@ember/debug/ember-inspector-support/adapters/bookmarklet.js

@@ -0,0 +1,31 @@
+import BasicAdapter from './basic';
+
+export default class extends BasicAdapter {
+  init() {
+    super.init();
+    this._listen();
+  }
+
+  sendMessage(options) {
+    options = options || {};
+    window.emberInspector.w.postMessage(options, window.emberInspector.url);
+  }
+
+  _listen() {
+    window.addEventListener('message', (e) => {
+      if (e.origin !== window.emberInspector.url) {
+        return;
+      }
+      const message = e.data;
+      if (message.from === 'devtools') {
+        this._messageReceived(message);
+      }
+    });
+
+    window.onunload = () => {
+      this.sendMessage({
+        unloading: true,
+      });
+    };
+  }
+}

packages/@ember/debug/ember-inspector-support/adapters/chrome.js

@@ -0,0 +1,2 @@
+import WebExtension from './web-extension';
+export default class extends WebExtension {}

packages/@ember/debug/ember-inspector-support/adapters/firefox.js

@@ -0,0 +1,24 @@
+/* eslint no-empty:0 */
+import WebExtension from './web-extension';
+
+export default class extends WebExtension {
+  debug() {
+    // WORKAROUND: temporarily workaround issues with firebug console object:
+    // - https://github.com/tildeio/ember-extension/issues/94
+    // - https://github.com/firebug/firebug/pull/109
+    // - https://code.google.com/p/fbug/issues/detail?id=7045
+    try {
+      super.debug(...arguments);
+    } catch (e) {}
+  }
+
+  log() {
+    // WORKAROUND: temporarily workaround issues with firebug console object:
+    // - https://github.com/tildeio/ember-extension/issues/94
+    // - https://github.com/firebug/firebug/pull/109
+    // - https://code.google.com/p/fbug/issues/detail?id=7045
+    try {
+      super.log(...arguments);
+    } catch (e) {}
+  }
+}

packages/@ember/debug/ember-inspector-support/adapters/web-extension.js

@@ -0,0 +1,146 @@
+import BasicAdapter from './basic';
+import { typeOf } from '@ember/debug/ember-inspector-support/utils/type-check';
+
+import Ember from '@ember/debug/ember-inspector-support/utils/ember';
+import { run } from '@ember/debug/ember-inspector-support/utils/ember/runloop';
+
+const { isArray } = Array;
+const { keys } = Object;
+
+export default class extends BasicAdapter {
+  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 Ember.ENV.EXTEND_PROTOTYPES.Array === true;
+  } catch (e) {
+    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;
+  };
+}