Fix inspecting Glimmer components w/ obj inspector

Glimmer components instead dev mode assertion getters to warn about
mismatches between the Ember.js vs legacy Glimmer.js APIs. Skip
these properties when inspecting them to avoid tripping them.

ember_debug/object-inspector.js

@@ -11,21 +11,28 @@ const {
 } = Ember;
 const { oneWay } = computed;
 
-let glimmer;
-let metal;
+const GlimmerComponent = (() => {
+  try {
+    return window.require('@glimmer/component').default;
+  } catch(e) {
+    // ignore, return undefined
+  }
+})();
+
+let GlimmerReference = null;
+let metal = null;
 let HAS_GLIMMER_TRACKING = false;
 try {
-  glimmer = Ember.__loader.require('@glimmer/reference');
+  GlimmerReference = Ember.__loader.require('@glimmer/reference');
   metal = Ember.__loader.require('@ember/-internals/metal');
-  HAS_GLIMMER_TRACKING = glimmer &&
-                         glimmer.value &&
-                         glimmer.validate &&
+  HAS_GLIMMER_TRACKING = GlimmerReference &&
+                         GlimmerReference.value &&
+                         GlimmerReference.validate &&
                          metal &&
                          metal.track &&
                          metal.tagForProperty;
 } catch (e) {
-  glimmer = null;
-  metal = null;
+  // ignore
 }
 
 const keys = Object.keys || Ember.keys;
@@ -235,12 +242,12 @@ export default EmberObject.extend(PortMixin, {
               let tagInfo = tracked[item.name] || { tag: metal.tagForProperty(object, item.name), revision: 0 };
               if (!tagInfo.tag) return;
 
-              changed = !glimmer.validate(tagInfo.tag, tagInfo.revision);
+              changed = !GlimmerReference.validate(tagInfo.tag, tagInfo.revision);
               if (changed) {
                 tagInfo.tag = metal.track(() => {
                   value = get(object, item.name);
                 });
-                tagInfo.revision = glimmer.value(object, item.name);
+                tagInfo.revision = GlimmerReference.value(object, item.name);
               }
               tracked[item.name] = tagInfo;
             } else {
@@ -972,7 +979,7 @@ function calculateCPs(object, mixinDetails, errorsForObject, expensiveProperties
                 item.isTracked = true;
               }
             }
-            tagInfo.revision = glimmer.value(object, item.name);
+            tagInfo.revision = GlimmerReference.value(object, item.name);
             item.dependentKeys = getTrackedDependencies(object, item.name, tagInfo.tag);
           } else {
             value = calculateCP(object, item, errorsForObject);
@@ -1106,8 +1113,7 @@ function getDebugInfo(object) {
     if (object instanceof Ember.ObjectProxy && object.content) {
       object = object.content;
     }
-    // We have to bind to object here to make sure the `this` context is correct inside _debugInfo when we call it
-    debugInfo = objectDebugInfo.bind(object)();
+    debugInfo = objectDebugInfo.call(object);
   }
   debugInfo = debugInfo || {};
   let propertyInfo = debugInfo.propertyInfo || (debugInfo.propertyInfo = {});
@@ -1132,6 +1138,17 @@ function getDebugInfo(object) {
       'element',
       'targetObject'
     );
+  } else if (GlimmerComponent && object instanceof GlimmerComponent) {
+    // These properties don't really exist on Glimmer Components, but
+    // reading their values trigger a development mode assertion. The
+    // more correct long term fix is to make getters lazy (shows "..."
+    // in the UI and only computed them when requested (when the user
+    // clicked on the "..." in the UI).
+    skipProperties.push(
+      'bounds',
+      'debugName',
+      'element'
+    );
   }
   return debugInfo;
 }

tests/ember_debug/object-inspector-test.js

@@ -18,6 +18,14 @@ import require from 'require';
 import { destroyEIApp, setupEIApp } from '../helpers/setup-destroy-ei-app';
 import hasEmberVersion from '@ember/test-helpers/has-ember-version';
 
+const GlimmerComponent = (function() {
+  try {
+    return require('@glimmer/component').default;
+  } catch(e) {
+    // ignore, return undefined
+  }
+})();
+
 let EmberDebug;
 let port, name, message;
 let App;
@@ -288,7 +296,7 @@ module('Ember Debug - Object Inspector', function(hooks) {
     let computedProperty = message.details[1].properties[0];
     assert.equal(computedProperty.name, 'test');
     assert.equal(computedProperty.value.inspect, inspect('a'));
-    
+
     let getterProperty = message.details[1].properties[1];
     assert.equal(getterProperty.name, 'abc');
     assert.equal(getterProperty.value.inspect, inspect(1));
@@ -1005,4 +1013,59 @@ module('Ember Debug - Object Inspector', function(hooks) {
       ]);
     });
   }
+
+  // @glimmer/component 1.0 doesn't seem to support 3.4, even though it has the manager API
+  // Assertion Failed: Could not find custom component manager 'glimmer'
+  if (hasEmberVersion(3, 8) && GlimmerComponent) {
+    test('Inspecting GlimmerComponent does not cause errors', async function(assert) {
+      let instance;
+
+      class FooComponent extends GlimmerComponent {
+        constructor(...args) {
+          super(...args);
+          instance = this;
+        }
+
+        get foo() {
+          return 'foo';
+        }
+
+        bar = 'bar';
+
+        baz() {
+          return 'baz';
+        }
+      }
+
+      this.owner.register('component:foo', FooComponent);
+      this.owner.register('template:simple', hbs`<Foo />`);
+
+      await visit('/simple');
+
+      assert.ok(instance instanceof FooComponent, 'an instance of FooComponent has been created');
+
+      objectInspector.sendObject(instance);
+
+      assert.equal(name, 'objectInspector:updateObject');
+      assert.ok(message.details, 'has details');
+      assert.deepEqual(message.errors, [], 'has no errors');
+
+      let properties = [];
+
+      for (let mixin of message.details) {
+        for (let { name } of mixin.properties) {
+          properties.push(name);
+        }
+      }
+
+      assert.ok(properties.indexOf('args') > -1, 'contains args');
+      assert.ok(properties.indexOf('foo') > -1, 'contains foo');
+      assert.ok(properties.indexOf('bar') > -1, 'contains bar');
+      assert.ok(properties.indexOf('baz') > -1, 'contains baz');
+
+      assert.ok(properties.indexOf('bounds') === -1, 'does not contain bounds');
+      assert.ok(properties.indexOf('element') === -1, 'does not contain element');
+      assert.ok(properties.indexOf('debugName') === -1, 'does not contain debugName');
+    });
+  }
 });

tests/ember_debug/view-debug-test.js

@@ -251,15 +251,14 @@ module('Ember Debug - View', function(hooks) {
 
   test('Supports applications that don\'t have the ember-application CSS class', async function t(assert) {
     let name, message;
-    let rootElement = document.body;
 
     await visit('/simple');
 
-    assert.dom(rootElement).hasClass(
+    assert.dom(this.element).hasClass(
       'ember-application',
       'The rootElement has the .ember-application CSS class'
     );
-    rootElement.classList.remove('ember-application');
+    this.element.classList.remove('ember-application');
 
     // Restart the inspector
     EmberDebug.start();

tests/helpers/setup-destroy-ei-app.js

@@ -22,7 +22,10 @@ export async function setupEIApp(EmberDebug, routes) {
     Router.map(routes);
   }
 
-  let App = Application.create({ autoboot: false });
+  let App = Application.create({
+    autoboot: false,
+    rootElement: document.getElementById('ember-testing'),
+  });
   App.register('router:main', Router);
 
   await setApplication(App);