ember-inspector 4.4.1 → 4.5.0

package/dist/websocket/index.html

@@ -10,7 +10,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     
-<meta name="ember-inspector/config/environment" content="%7B%22modulePrefix%22%3A%22ember-inspector%22%2C%22environment%22%3A%22production%22%2C%22rootURL%22%3A%22%22%2C%22locationType%22%3A%22hash%22%2C%22version%22%3A%224.4.1%22%2C%22emberVersionsSupported%22%3A%5B%223.4.0%22%2C%22%22%5D%2C%22previousEmberVersionsSupported%22%3A%5B%220.0.0%22%2C%222.7.0%22%5D%2C%22EmberENV%22%3A%7B%22FEATURES%22%3A%7B%22EMBER_METAL_TRACKED_PROPERTIES%22%3Atrue%7D%2C%22EXTEND_PROTOTYPES%22%3A%7B%22Date%22%3Afalse%7D%2C%22_APPLICATION_TEMPLATE_WRAPPER%22%3Afalse%2C%22_DEFAULT_ASYNC_OBSERVERS%22%3Atrue%2C%22_JQUERY_INTEGRATION%22%3Afalse%2C%22_TEMPLATE_ONLY_GLIMMER_COMPONENTS%22%3Atrue%7D%2C%22APP%22%3A%7B%22name%22%3A%22ember-inspector%22%2C%22version%22%3A%224.4.1%2Baba7da68%22%7D%2C%22exportApplicationGlobal%22%3Afalse%7D" />
+<meta name="ember-inspector/config/environment" content="%7B%22modulePrefix%22%3A%22ember-inspector%22%2C%22environment%22%3A%22production%22%2C%22rootURL%22%3A%22%22%2C%22locationType%22%3A%22hash%22%2C%22version%22%3A%224.5.0%22%2C%22emberVersionsSupported%22%3A%5B%223.4.0%22%2C%22%22%5D%2C%22previousEmberVersionsSupported%22%3A%5B%220.0.0%22%2C%222.7.0%22%5D%2C%22EmberENV%22%3A%7B%22FEATURES%22%3A%7B%22EMBER_METAL_TRACKED_PROPERTIES%22%3Atrue%7D%2C%22EXTEND_PROTOTYPES%22%3A%7B%22Date%22%3Afalse%7D%2C%22_APPLICATION_TEMPLATE_WRAPPER%22%3Afalse%2C%22_DEFAULT_ASYNC_OBSERVERS%22%3Atrue%2C%22_JQUERY_INTEGRATION%22%3Afalse%2C%22_TEMPLATE_ONLY_GLIMMER_COMPONENTS%22%3Atrue%7D%2C%22APP%22%3A%7B%22name%22%3A%22ember-inspector%22%2C%22version%22%3A%224.5.0%2B16161d49%22%7D%2C%22exportApplicationGlobal%22%3Afalse%7D" />
 
     <style type="text/css">
       @font-face {
@@ -39,6 +39,7 @@
     
 
     <script src="assets/vendor.js"></script>
+<script src="/assets/chunk.143.701794df61367d9c0beb.js"></script>
     <script src="assets/ember-inspector.js"></script>
 
     

package/ember_debug/adapters/basic.js

@@ -1,9 +1,10 @@
 /* eslint no-console: 0 */
-import Ember from '../utils/ember';
-const { A, computed, RSVP, Object: EmberObject } = Ember;
-const { Promise, resolve } = RSVP;
 import { onReady } from '../utils/on-ready';
 
+import { A } from '../utils/ember/array';
+import EmberObject, { computed } from '../utils/ember/object';
+import { Promise, resolve } from '../utils/rsvp';
+
 export default EmberObject.extend({
   init() {
     resolve(this.connect(), 'ember-inspector').then(

package/ember_debug/adapters/web-extension.js

@@ -1,8 +1,9 @@
 import BasicAdapter from './basic';
 import { typeOf } from '../utils/type-check';
+
 import Ember from '../utils/ember';
+import { run } from '../utils/ember/runloop';
 
-const { run } = Ember;
 const { isArray } = Array;
 const { keys } = Object;
 

package/ember_debug/adapters/websocket.js

@@ -1,13 +1,10 @@
 import BasicAdapter from './basic';
-import Ember from '../utils/ember';
-
-const {
-  computed,
-  run,
-  RSVP: { Promise },
-} = Ember;
 import { onReady } from '../utils/on-ready';
 
+import { computed } from '../utils/ember/object';
+import { run } from '../utils/ember/runloop';
+import { Promise } from '../utils/rsvp';
+
 export default BasicAdapter.extend({
   sendMessage(options = {}) {
     this.socket.emit('emberInspectorMessage', options);

package/ember_debug/container-debug.js

@@ -1,9 +1,8 @@
 // eslint-disable-next-line ember/no-mixins
 import PortMixin from 'ember-debug/mixins/port-mixin';
-import Ember from './utils/ember';
 
-const { Object: EmberObject, computed } = Ember;
-const { reads, readOnly } = computed;
+import EmberObject, { computed } from './utils/ember/object';
+import { reads, readOnly } from './utils/ember/object/computed';
 
 export default EmberObject.extend(PortMixin, {
   namespace: null,

package/ember_debug/data-debug.js

@@ -1,9 +1,10 @@
 // eslint-disable-next-line ember/no-mixins
 import PortMixin from 'ember-debug/mixins/port-mixin';
-import Ember from './utils/ember';
 
-const { Object: EmberObject, computed, guidFor, A, set } = Ember;
-const { alias } = computed;
+import { A } from './utils/ember/array';
+import EmberObject, { computed, set } from './utils/ember/object';
+import { alias } from './utils/ember/object/computed';
+import { guidFor } from './utils/ember/object/internals';
 
 export default EmberObject.extend(PortMixin, {
   init() {

package/ember_debug/deprecation-debug.js

@@ -2,21 +2,13 @@
 import PortMixin from 'ember-debug/mixins/port-mixin';
 import SourceMap from 'ember-debug/libs/source-map';
 
-import Ember from './utils/ember';
-
-const { Debug, Object: EmberObject, computed, guidFor, RSVP, A } = Ember;
-const { resolve, all } = RSVP;
-const { readOnly } = computed;
-const { registerDeprecationHandler } = Debug;
-
-let run;
-try {
-  run = requireModule('@ember/runloop')['default'];
-} catch {
-  run = Ember.run;
-}
-
-const { cancel, debounce } = run;
+import { A } from './utils/ember/array';
+import { registerDeprecationHandler } from './utils/ember/debug';
+import EmberObject, { computed } from './utils/ember/object';
+import { readOnly } from './utils/ember/object/computed';
+import { guidFor } from './utils/ember/object/internals';
+import { cancel, debounce } from './utils/ember/runloop';
+import { all, resolve } from './utils/rsvp';
 
 export default EmberObject.extend(PortMixin, {
   portNamespace: 'deprecation',
@@ -207,6 +199,11 @@ export default EmberObject.extend(PortMixin, {
 
   handleDeprecations() {
     registerDeprecationHandler((message, options, next) => {
+      if (!this.adapter) {
+        next(message, options);
+        return;
+      }
+
       /* global __fail__*/
 
       let error;

package/ember_debug/general-debug.js

@@ -1,10 +1,9 @@
 /* eslint no-empty:0 */
 // eslint-disable-next-line ember/no-mixins
 import PortMixin from 'ember-debug/mixins/port-mixin';
-import Ember from './utils/ember';
 
-const { Object: EmberObject } = Ember;
-let { libraries } = Ember;
+import Ember from './utils/ember';
+import EmberObject from './utils/ember/object';
 
 /**
  * Class that handles gathering general information of the inspected app.
@@ -93,7 +92,7 @@ export default EmberObject.extend(PortMixin, {
      * the info tab.
      */
     getLibraries() {
-      this.sendMessage('libraries', { libraries: libraries._registry });
+      this.sendMessage('libraries', { libraries: Ember.libraries._registry });
     },
 
     getEmberCliConfig() {

package/ember_debug/libs/promise-assembler.js

@@ -6,9 +6,12 @@
  */
 
 import Promise from 'ember-debug/models/promise';
-import Ember from '../utils/ember';
 
-const { Object: EmberObject, Evented, A, computed, RSVP, isNone } = Ember;
+import { A } from '../utils/ember/array';
+import EmberObject from '../utils/ember/object';
+import Evented from '../utils/ember/object/evented';
+import { isNone } from '../utils/ember/utils';
+import RSVP from '../utils/rsvp';
 
 let PromiseAssembler = EmberObject.extend(Evented, {
   // RSVP lib to debug
@@ -16,16 +19,11 @@ let PromiseAssembler = EmberObject.extend(Evented, {
 
   isStarted: false,
 
-  all: computed(function () {
-    return A();
-  }),
-
-  promiseIndex: computed(function () {
-    return {};
-  }),
-
-  // injected on creation
-  promiseDebug: null,
+  init() {
+    this._super(...arguments);
+    this.all = A();
+    this.promiseIndex = {};
+  },
 
   start() {
     this.RSVP.configure('instrument', true);
@@ -62,9 +60,9 @@ let PromiseAssembler = EmberObject.extend(Evented, {
       this.all.forEach((item) => {
         item.destroy();
       });
-      this.set('all', A());
-      this.set('promiseIndex', {});
 
+      this.all = A();
+      this.promiseIndex = {};
       this.promiseChained = null;
       this.promiseRejected = null;
       this.promiseFulfilled = null;

package/ember_debug/libs/source-map.js

@@ -3,14 +3,9 @@
  * A lot of the code is inspired by/taken from
  * https://github.com/evanw/node-source-map-support
  */
-import Ember from '../utils/ember';
-
-const {
-  Object: EmberObject,
-  A,
-  computed,
-  RSVP: { resolve, Promise },
-} = Ember;
+import { A } from '../utils/ember/array';
+import EmberObject, { computed } from '../utils/ember/object';
+import { Promise, resolve } from '../utils/rsvp';
 
 const notFoundError = new Error('Source map url not found');
 

package/ember_debug/main.js

@@ -10,16 +10,15 @@ import PromiseDebug from 'ember-debug/promise-debug';
 import ContainerDebug from 'ember-debug/container-debug';
 import DeprecationDebug from 'ember-debug/deprecation-debug';
 import Session from 'ember-debug/services/session';
+
 import Ember from './utils/ember';
+import Application from './utils/ember/application';
+import EmberObject, { computed } from './utils/ember/object';
+import { or } from './utils/ember/object/computed';
+import { guidFor } from './utils/ember/object/internals';
+import { run } from './utils/ember/runloop';
 
-const {
-  Object: EmberObject,
-  run,
-  Application,
-  Namespace,
-  guidFor,
-  computed,
-} = Ember;
+const { Namespace } = Ember;
 
 const EmberDebug = EmberObject.extend({
   /**
@@ -40,9 +39,10 @@ const EmberDebug = EmberObject.extend({
   owner: null,
   started: false,
 
-  applicationName: computed
-    .or('_application.name', '_application.modulePrefix')
-    .readOnly(),
+  applicationName: or(
+    '_application.name',
+    '_application.modulePrefix'
+  ).readOnly(),
 
   /**
    * We use the application's id instead of the owner's id so that we use the same inspector

package/ember_debug/mixins/port-mixin.js

@@ -1,6 +1,4 @@
-import Ember from '../utils/ember';
-
-const { Mixin } = Ember;
+import Mixin from '../utils/ember/object/mixin';
 
 // eslint-disable-next-line ember/no-new-mixins
 export default Mixin.create({

package/ember_debug/models/profile-manager.js

@@ -1,9 +1,65 @@
 import ProfileNode from './profile-node';
 import Ember from '../utils/ember';
+import { compareVersion } from 'ember-debug/utils/version';
 
-const {
-  run: { later, scheduleOnce },
-} = Ember;
+import { later, scheduleOnce, cancel } from '../utils/ember/runloop';
+
+function getEdges(first, last, closest) {
+  let start = null;
+  let end = null;
+  for (let i = 0; i < closest.length; i++) {
+    if (closest.item(i) === first.node) start = i;
+    else if (closest.item(i) === last.node) end = i;
+  }
+  return [start, end];
+}
+
+function getUnfilteredRoots(first, last, closest) {
+  if (first.node === last.node) return [first.node];
+
+  const roots = [];
+
+  const [start, end] = getEdges(first, last, closest);
+
+  if (start === null || end === null) return [];
+
+  for (let i = start; i <= end; i++) roots.push(closest.item(i));
+
+  return roots;
+}
+
+function findRoots({ first, last, parent }) {
+  const closest = parent.childNodes;
+
+  const roots = getUnfilteredRoots(first, last, closest);
+
+  return roots.filter((el) => el?.nodeType === 1);
+}
+
+function makeHighlight() {
+  const node = document.createElement('div');
+  node.setAttribute('role', 'presentation');
+  node.setAttribute('class', 'ember-inspector-render-highlight');
+  return node;
+}
+function insertHTML(node) {
+  document.body.appendChild(node);
+}
+
+function insertStylesheet() {
+  const content = `
+    .ember-inspector-render-highlight {
+      border: 2px solid rgba(255,0,0,0.2);
+      box-shadow: 0px 0px 1px rgba(255,0,0,0.2);
+      z-index: 1000000;
+      pointer-events: none;
+    }
+  `;
+  const style = document.createElement('style');
+  style.appendChild(document.createTextNode(content));
+  document.head.appendChild(style);
+  return style;
+}
 
 /**
  * A class for keeping track of active rendering profiles as a list.
@@ -15,11 +71,20 @@ export default class ProfileManager {
     this.currentSet = [];
     this._profilesAddedCallbacks = [];
     this.queue = [];
+    this.shouldHighlightRender = false;
+    this.stylesheet = insertStylesheet();
+    // keep track of all the active highlights
+    this.highlights = [];
+    this.isHighlightEnabled = compareVersion(Ember?.VERSION, '3.20.0') !== -1;
   }
 
   began(timestamp, payload, now) {
     return this.wrapForErrors(this, function () {
       this.current = new ProfileNode(timestamp, payload, this.current, now);
+      if (this.shouldHighlightRender && payload.view) {
+        this._highLightView(payload.view);
+      }
+      this.current.isHighlightEnabled = this.isHighlightEnabled;
       return this.current;
     });
   }
@@ -45,6 +110,18 @@ export default class ProfileManager {
     return callback.call(context);
   }
 
+  _highLightView(view) {
+    const symbols = Object.getOwnPropertySymbols(view);
+    const bounds = view[symbols.find((sym) => sym.description === 'BOUNDS')];
+    if (!bounds) return;
+
+    const elements = findRoots(bounds);
+
+    elements.forEach((node) => {
+      this._renderHighlight(node);
+    });
+  }
+
   /**
    * Push a new profile into the queue
    * @param info
@@ -80,6 +157,61 @@ export default class ProfileManager {
     }
   }
 
+  teardown() {
+    this.stylesheet?.remove();
+    // remove all the active highlighted components
+    this._removeAllHighlights();
+  }
+
+  _removeAllHighlights() {
+    const els = this.highlights.slice(0);
+    els.forEach((el) => {
+      this._removeHighlight(el);
+    });
+  }
+
+  _removeHighlight(highlight) {
+    this.highlights = this.highlights.filter((item) => item !== highlight);
+    cancel(highlight.timeout);
+    highlight.el.remove();
+  }
+
+  _addHighlight(highlight) {
+    insertHTML(highlight.el);
+    this.highlights.push(highlight);
+
+    highlight.timeout = later(() => {
+      this._removeHighlight(highlight);
+    }, 500);
+  }
+
+  _constructHighlight(renderedNode) {
+    const rect = renderedNode.getBoundingClientRect();
+    const highlight = makeHighlight();
+
+    const { top, left, width, height } = rect;
+    const { scrollX, scrollY } = window;
+    const { style } = highlight;
+    if (style) {
+      style.position = 'absolute';
+      style.top = `${top + scrollY}px`;
+      style.left = `${left + scrollX}px`;
+      style.width = `${width}px`;
+      style.height = `${height}px`;
+    }
+    return highlight;
+  }
+
+  _renderHighlight(renderedNode) {
+    if (!renderedNode?.getBoundingClientRect) {
+      return;
+    }
+
+    const highlight = this._constructHighlight(renderedNode);
+
+    this._addHighlight({ el: highlight });
+  }
+
   _flush() {
     let entry, i;
     for (i = 0; i < this.queue.length; i++) {

package/ember_debug/models/profile-node.js

@@ -3,10 +3,8 @@
 
   @class ProfileNode
 **/
-import Ember from '../utils/ember';
-
-const { get, guidFor } = Ember;
-
+import { get } from '../utils/ember/object';
+import { guidFor } from '../utils/ember/object/internals';
 const ProfileNode = function (start, payload, parent, now) {
   let name;
   this.start = start;

package/ember_debug/models/promise.js

@@ -1,9 +1,8 @@
 import { typeOf } from '../utils/type-check';
 
-import Ember from '../utils/ember';
-
-const { Object: EmberObject, computed, A } = Ember;
-const { equal, or } = computed;
+import { A } from '../utils/ember/array';
+import EmberObject, { computed } from '../utils/ember/object';
+import { equal, or } from '../utils/ember/object/computed';
 
 const dateComputed = function () {
   return computed({

package/ember_debug/object-inspector.js

@@ -9,36 +9,32 @@ import {
 } from 'ember-debug/utils/type-check';
 import { compareVersion } from 'ember-debug/utils/version';
 import { typeOf } from './utils/type-check';
+
 import Ember from './utils/ember';
+import MutableArray from './utils/ember/array/mutable';
+import ArrayProxy from './utils/ember/array/proxy';
+import Component from './utils/ember/component';
+import { inspect as emberInspect } from './utils/ember/debug';
+import EmberObject, { computed, get, set } from './utils/ember/object';
+import { oneWay } from './utils/ember/object/computed';
+import Observable from './utils/ember/object/observable';
+import Evented from './utils/ember/object/evented';
+import { cacheFor, guidFor } from './utils/ember/object/internals';
+import PromiseProxyMixin from './utils/ember/object/promise-proxy-mixin';
+import { _backburner, join } from './utils/ember/runloop';
+import { isNone } from './utils/ember/utils';
 
 const {
-  Object: EmberObject,
-  inspect: emberInspect,
   meta: emberMeta,
-  computed,
-  get,
-  set,
-  guidFor,
-  isNone,
-  cacheFor,
   VERSION,
-  run,
   ActionHandler,
-  ArrayProxy,
-  Component,
   ControllerMixin,
   CoreObject,
-  Evented,
-  MutableArray,
   MutableEnumerable,
   NativeArray,
   ObjectProxy,
-  Observable,
-  PromiseProxyMixin,
   TargetActionSupport,
 } = Ember;
-const { oneWay } = computed;
-const { backburner, join } = run;
 
 const GlimmerComponent = (() => {
   try {
@@ -343,7 +339,7 @@ export default EmberObject.extend(PortMixin, {
   init() {
     this._super();
     this.set('sentObjects', {});
-    backburner.on('end', bound(this, this.updateCurrentObject));
+    _backburner.on('end', bound(this, this.updateCurrentObject));
   },
 
   willDestroy() {
@@ -351,7 +347,7 @@ export default EmberObject.extend(PortMixin, {
     for (let objectId in this.sentObjects) {
       this.releaseObject(objectId);
     }
-    backburner.off('end', bound(this, this.updateCurrentObject));
+    _backburner.off('end', bound(this, this.updateCurrentObject));
   },
 
   sentObjects: {},

package/ember_debug/port.js

@@ -1,8 +1,10 @@
-import Ember from './utils/ember';
-const { Object: EmberObject, computed, run } = Ember;
-const { or, readOnly } = computed;
+import EmberObject, { computed } from './utils/ember/object';
+import { or, readOnly } from './utils/ember/object/computed';
+import Evented from './utils/ember/object/evented';
+import { guidFor } from './utils/ember/object/internals';
+import { run } from './utils/ember/runloop';
 
-export default EmberObject.extend(Ember.Evented, {
+export default EmberObject.extend(Evented, {
   adapter: readOnly('namespace.adapter'),
   applicationId: readOnly('namespace.applicationId'),
   applicationName: or(
@@ -19,7 +21,7 @@ export default EmberObject.extend(Ember.Evented, {
    * @type {String}
    */
   uniqueId: computed('namespace._application', function () {
-    return Ember.guidFor(this.get('namespace._application'));
+    return guidFor(this.get('namespace._application'));
   }),
 
   init() {

package/ember_debug/promise-debug.js

@@ -1,10 +1,12 @@
 // eslint-disable-next-line ember/no-mixins
 import PortMixin from 'ember-debug/mixins/port-mixin';
 import PromiseAssembler from 'ember-debug/libs/promise-assembler';
-import Ember from './utils/ember';
 
-const { computed, Object: EmberObject, RSVP, A, run } = Ember;
-const { readOnly } = computed;
+import { A } from './utils/ember/array';
+import EmberObject, { computed } from './utils/ember/object';
+import { readOnly } from './utils/ember/object/computed';
+import { debounce } from './utils/ember/runloop';
+import RSVP from './utils/rsvp';
 
 export default EmberObject.extend(PortMixin, {
   namespace: null,
@@ -15,15 +17,14 @@ export default EmberObject.extend(PortMixin, {
 
   // created on init
   promiseAssembler: null,
-
-  releaseMethods: computed(function () {
-    return A();
-  }),
+  updatedPromises: null,
+  releaseMethods: null,
 
   init() {
     this._super();
-    this.set('promiseAssembler', PromiseAssembler.create());
-    this.promiseAssembler.set('promiseDebug', this);
+    this.promiseAssembler = PromiseAssembler.create();
+    this.updatedPromises = A();
+    this.releaseMethods = A();
     this.setInstrumentWithStack();
     this.sendInstrumentWithStack();
     this.promiseAssembler.start();
@@ -36,7 +37,7 @@ export default EmberObject.extend(PortMixin, {
     if (this.promiseAssembler) {
       this.promiseAssembler.destroy();
     }
-    this.set('promiseAssembler', null);
+    this.promiseAssembler = null;
     this._super();
   },
 
@@ -109,7 +110,7 @@ export default EmberObject.extend(PortMixin, {
     this.releaseMethods.forEach((fn) => {
       fn();
     });
-    this.set('releaseMethods', A());
+    this.releaseMethods.clear();
   },
 
   getAndObservePromises() {
@@ -128,10 +129,6 @@ export default EmberObject.extend(PortMixin, {
     this.promisesUpdated(this.promiseAssembler.find());
   },
 
-  updatedPromises: computed(function () {
-    return A();
-  }),
-
   promisesUpdated(uniquePromises) {
     if (!uniquePromises) {
       uniquePromises = A();
@@ -152,13 +149,13 @@ export default EmberObject.extend(PortMixin, {
 
   promiseUpdated(event) {
     this.updatedPromises.pushObject(event.promise);
-    Ember.run.debounce(this, 'promisesUpdated', this.delay);
+    debounce(this, 'promisesUpdated', this.delay);
   },
 
   promiseChained(event) {
     this.updatedPromises.pushObject(event.promise);
     this.updatedPromises.pushObject(event.child);
-    run.debounce(this, 'promisesUpdated', this.delay);
+    debounce(this, 'promisesUpdated', this.delay);
   },
 
   serializeArray(promises) {
@@ -204,6 +201,8 @@ export default EmberObject.extend(PortMixin, {
       inspected.type === 'type-ember-object' ||
       inspected.type === 'type-array'
     ) {
+      console.count('inspectValue');
+
       inspected.objectId = objectInspector.retainObject(promise.get(key));
       this.releaseMethods.pushObject(function () {
         objectInspector.releaseObject(inspected.objectId);