add inspect by value for functions and objects that are not simple ob…

…jects

app/components/object-inspector.hbs

@@ -21,11 +21,25 @@
         type="button"
         {{on
           "click"
-          (fn this.sendObjectToConsole (get @model (sub @model.length 1)))
+          (fn this.sendObjectToConsole this.current)
         }}
       >
         {{svg-jar "send-with-text" width="20px" height="10px"}}
       </button>
+      {{#if this.isClass}}
+        <button
+          data-test-goto-source-btn
+          class="goto-source"
+          title="Goto Source"
+          type="button"
+          {{on
+            "click"
+            (fn this.gotoSource this.current)
+          }}
+        >
+          {{svg-jar "code-source" width="20px" height="10px"}}
+        </button>
+      {{/if}}
     </div>
 
     {{#if this.trail}}

app/components/object-inspector.js

@@ -14,6 +14,13 @@ export default class ObjectInspector extends Component {
     this.searchInputId = 'custom-filter-input';
   }
 
+  get isClass() {
+    return this.current.mixins.length > 1;
+  }
+
+  get current() {
+    return this.args.model[this.args.model.length - 1];
+  }
   get trail() {
     let nested = this.args.model.slice(1);
     if (nested.length === 0) {
@@ -55,6 +62,13 @@ export default class ObjectInspector extends Component {
     });
   }
 
+  @action gotoSource(obj) {
+    let objectId = obj.objectId;
+    this.port.send('objectInspector:gotoSource', {
+      objectId,
+    });
+  }
+
   @action popStack() {
     if (this.isNested) {
       this.args.popMixinDetails();

app/components/object-inspector/properties-all.hbs

@@ -11,6 +11,7 @@
           @model={{prop}}
           @saveProperty={{this.saveProperty}}
           @sendToConsole={{fn this.sendToConsole prop}}
+          @gotoSource={{fn this.gotoSource prop}}
         />
       {{/each}}
     </ObjectInspector::SortProperties>

app/components/object-inspector/properties-base.js

@@ -15,6 +15,16 @@ export default class PropertiesBase extends Component {
     this.port.send('objectInspector:sendToConsole', data);
   }
 
+  @action gotoSource({ name }) {
+    const data = {
+      objectId: this.args.model.objectId,
+    };
+    if (name !== '...') {
+      data.property = name;
+    }
+    this.port.send('objectInspector:gotoSource', data);
+  }
+
   @action digDeeper({ name }) {
     this.port.send('objectInspector:digDeeper', {
       objectId: this.args.model.objectId,

app/components/object-inspector/properties-grouped.hbs

@@ -33,6 +33,7 @@
                 @digDeeper={{fn this.digDeeper prop}}
                 @saveProperty={{this.saveProperty}}
                 @sendToConsole={{fn this.sendToConsole prop}}
+                @gotoSource={{fn this.gotoSource prop}}
               />
             {{else}}
               <li class="mixin__property flex relative flex-row items-center truncate">No Properties</li>

app/components/object-inspector/property.hbs

@@ -119,12 +119,23 @@
   <button
     data-test-send-to-console-btn
     class="mixin__send-btn flex-shrink-0 send-to-console"
-    title="Send to console"
+    title="Send To Console"
     type="button"
     {{on "click" @sendToConsole}}
   >
     {{svg-jar "send-with-text" width="20px" height="10px"}}
   </button>
+  {{#if this.isFunction}}
+    <button
+      data-test-goto-source-btn
+      class="mixin__send-btn flex-shrink-0 goto-source"
+      title="Goto Source"
+      type="button"
+      {{on "click" @gotoSource}}
+    >
+      {{svg-jar "code-source" width="20px" height="10px"}}
+    </button>
+  {{/if}}
 </li>
 
 {{#if this.showDependentKeys}}

app/components/object-inspector/property.ts

@@ -8,6 +8,8 @@ import parseText from 'ember-inspector/utils/parse-text';
 interface ObjectInspectorPropertyArgs {
   model: any;
   digDeeper: () => unknown;
+  gotoSource: () => void;
+  sendToConsole: () => void;
   saveProperty: (
     property: unknown,
     value: unknown,

app/controllers/component-tree.js

@@ -439,6 +439,12 @@ class RenderItem {
     this.send('view:inspectElement', { id: this.id });
   }
 
+  @action inspectValue(event) {
+    event.stopPropagation();
+
+    this.send('view:inspectValue', { id: this.id });
+  }
+
   show() {
     let item = this.parentItem;
 

app/routes/component-tree.js

@@ -31,7 +31,6 @@ export default class ComponentTreeRoute extends TabRoute {
     this.port.on('view:cancelSelection', this, this.cancelSelection);
     this.port.on('view:startInspecting', this, this.startInspecting);
     this.port.on('view:stopInspecting', this, this.stopInspecting);
-    this.port.on('view:inspectDOMNode', this, this.inspectDOMNode);
   }
 
   deactivate() {
@@ -41,7 +40,6 @@ export default class ComponentTreeRoute extends TabRoute {
     this.port.off('view:cancelSelection', this, this.cancelSelection);
     this.port.off('view:startInspecting', this, this.startInspecting);
     this.port.off('view:stopInspecting', this, this.stopInspecting);
-    this.port.off('view:inspectDOMNode', this, this.inspectDOMNode);
   }
 
   setRenderTree({ tree }) {
@@ -59,8 +57,4 @@ export default class ComponentTreeRoute extends TabRoute {
   stopInspecting() {
     this.controller.isInspecting = false;
   }
-
-  inspectDOMNode({ name }) {
-    this.port.adapter.inspectDOMNode(name);
-  }
 }

app/routes/whats-new.js

@@ -26,6 +26,15 @@ function getLatestEntry(doc) {
   return '';
 }
 
+function patchLernaIcons(text) {
+  return text
+    .replace(':breaking:', '💥')
+    .replace(':rocket:', '🚀')
+    .replace(':bug:', '🐛')
+    .replace(':documentation:', '📝')
+    .replace(':house:', '🏠');
+}
+
 export default class WhatsNewRoute extends TabRoute {
   @service config;
   @tracked error = false;
@@ -41,7 +50,8 @@ export default class WhatsNewRoute extends TabRoute {
     return fetch(url)
       .then(checkStatus)
       .then((response) => response.text())
-      .then((text) => getLatestEntry(text))
+      .then(getLatestEntry)
+      .then(patchLernaIcons)
       .catch((error) => {
         this.error = error;
       });

app/services/adapters/web-extension.js

@@ -101,12 +101,12 @@ export default class WebExtension extends BasicAdapter {
   }
 
   /**
-   * Open the devtools "Elements" tab and select a specific DOM node.
+   * Open the devtools "Elements" or "Sources" tab and select a specific DOM node or function.
    *
-   * @method inspectDOMNode
+   * @method inspectJSValue
    * @param {String} name
    */
-  inspectDOMNode(name) {
+  inspectJSValue(name) {
     chrome.devtools.inspectedWindow.eval(`
       inspect(window[${JSON.stringify(name)}]);
       delete window[${JSON.stringify(name)}];

app/services/port.js

@@ -49,6 +49,10 @@ export default class PortService extends Service.extend(Evented) {
         this.trigger(message.type, message, applicationId);
       }
     });
+
+    this.on('view:inspectJSValue', this, ({ name }) =>
+      this.adapter.inspectJSValue(name)
+    );
   }
 
   selectApplication(applicationId) {

app/utils/parse-text.ts

@@ -18,3 +18,4 @@ export default function parseText(value: string): string {
   }
   return parsedValue;
 }
+

ember_debug/adapters/basic.js

@@ -64,17 +64,17 @@ export default EmberObject.extend({
   },
 
   /**
-    Inspect a specific DOM node. This usually
+    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.
-
-    @param {Node} node
+    For functions, it will open the sources tab and goto the definition
+    @param {Node|Function} node
   */
-  inspectNode(/* node */) {},
+  inspectValue(/* value */) {},
 
   _messageReceived(message) {
     this._messageCallbacks.forEach((callback) => {

ember_debug/adapters/web-extension.js

@@ -39,9 +39,9 @@ export default BasicAdapter.extend({
   /**
    * Open the devtools "Elements" and select an DOM node.
    *
-   * @param  {Node} node The DOM node to select
+   * @param  {Node|Function} value The DOM node to select
    */
-  inspectNode(node) {
+  inspectValue(value) {
     // NOTE:
     //
     // Basically, we are just trying to call `inspect(node)` here.
@@ -63,9 +63,9 @@ export default BasicAdapter.extend({
 
     let name = `__EMBER_INSPECTOR_${(Math.random() * 100000000).toFixed(0)}`;
 
-    window[name] = node;
+    window[name] = value;
 
-    this.get('namespace.port').send('view:inspectDOMNode', { name });
+    this.get('namespace.port').send('view:inspectJSValue', { name });
   },
 
   _listen() {

ember_debug/libs/view-inspection.js

@@ -77,6 +77,22 @@ function makeStylesheet(id) {
       color: rgb(168, 148, 166);
     }
 
+    #${prefix}-tooltip-${id} .${prefix}-tooltip-detail-instance > .${prefix}-tooltip-token-tag {
+      cursor: pointer;
+    }
+
+    #${prefix}-tooltip-${id} .${prefix}-tooltip-detail-instance > .${prefix}-tooltip-token-tag:after {
+      content: "\\1F517"
+    }
+
+    #${prefix}-tooltip-${id} .${prefix}-tooltip-detail-controller > .${prefix}-tooltip-token-tag {
+      cursor: pointer;
+    }
+
+    #${prefix}-tooltip-${id} .${prefix}-tooltip-detail-controller > .${prefix}-tooltip-token-tag:after {
+      content: "\\1F517"
+    }
+
     #${prefix}-tooltip-${id} .${prefix}-tooltip-token-name {
       /* https://github.com/ChromeDevTools/devtools-frontend/blob/103326238685ac582d3bf2a02f1627a80e3fce5f/front_end/ui/inspectorSyntaxHighlight.css#L60 */
       color: rgb(136, 18, 128);
@@ -502,6 +518,18 @@ export default class ViewInspection {
           this._tokenizeItem(node.instance)
         );
       }
+      const detail =
+        tbody.querySelector(
+          '.ember-inspector-tooltip-detail-instance > .ember-inspector-tooltip-token-tag'
+        ) ||
+        tbody.querySelector(
+          '.ember-inspector-tooltip-detail-controller > .ember-inspector-tooltip-token-tag'
+        );
+      if (detail) {
+        detail.onclick = () => {
+          this.objectInspector.sendToConsole(node.instance.id);
+        };
+      }
     }
   }
 

ember_debug/object-inspector.js

@@ -475,6 +475,9 @@ export default DebugPort.extend({
     sendToConsole(message) {
       this.sendToConsole(message.objectId, message.property);
     },
+    gotoSource(message) {
+      this.gotoSource(message.objectId, message.property);
+    },
     sendControllerToConsole(message) {
       const container = this.get('namespace.owner');
       this.sendValueToConsole(container.lookup(`controller:${message.name}`));
@@ -550,6 +553,27 @@ export default DebugPort.extend({
     join(() => set(object, prop, val));
   },
 
+  gotoSource(objectId, prop) {
+    let object = this.sentObjects[objectId];
+    let value;
+
+    if (isNone(prop)) {
+      value = this.sentObjects[objectId];
+    } else {
+      value = calculateCP(object, { name: prop }, {});
+    }
+    // for functions and classes we want to show the source instead
+    // as showing it in the console has no use
+    if (typeof value === 'function') {
+      this.adapter.inspectValue(value);
+    }
+    // use typeOf to distinguish basic objects/classes and Date, Error etc.
+    // objects like {...} have the constructor set to Object
+    if (typeOf(value) === 'object' && value.constructor !== Object) {
+      this.adapter.inspectValue(value.constructor);
+    }
+  },
+
   sendToConsole(objectId, prop) {
     let object = this.sentObjects[objectId];
     let value;

ember_debug/view-debug.js

@@ -130,7 +130,7 @@ export default DebugPort.extend({
    * @param  {Node} node The DOM node to inspect
    */
   inspectNode(node) {
-    this.adapter.inspectNode(node);
+    this.adapter.inspectValue(node);
   },
 
   sendTree(immediate = false) {

lib/ui/addon/components/send-to-inspect.hbs

@@ -0,0 +1,10 @@
+<button
+  data-test-send-to-inspect-btn
+  class="send-to-inspect"
+  title="Inspect"
+  type="button"
+  {{on "click" (fn @action @param)}}
+>
+  {{svg-jar "inspect" width="20px" height="10px"}}
+</button>
+

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);
+}