Merge branch 'master' into data-tab-cleanup

.ember-cli.js

@@ -0,0 +1,15 @@
+'use strict';
+
+const { setEdition } = require('@ember/edition-utils');
+
+setEdition('octane');
+
+module.exports = {
+  /**
+   Ember CLI sends analytics information by default. The data is completely
+   anonymous, but there are times when you might want to disable this behavior.
+
+   Setting `disableAnalytics` to true will prevent any data from being sent.
+   */
+  'disableAnalytics': false
+};

.eslintrc.js

@@ -1,5 +1,6 @@
 module.exports = {
   root: true,
+  parser: 'babel-eslint',
   parserOptions: {
     ecmaVersion: 2018,
     sourceType: 'module'
@@ -29,6 +30,7 @@ module.exports = {
     // node files
     {
       files: [
+        '.ember-cli.js',
         '.eslintrc.js',
         '.stylelintrc.js',
         '.template-lintrc.js',
@@ -39,8 +41,12 @@ module.exports = {
         'lib/*/index.js',
         'server/**/*.js'
       ],
+      excludedFiles: [
+        'app/**',
+      ],
       parserOptions: {
-        sourceType: 'script'
+        sourceType: 'script',
+        ecmaVersion: 2015
       },
       env: {
         browser: false,

app/app.js

@@ -5,15 +5,12 @@ import config from './config/environment';
 
 const version = '{{EMBER_INSPECTOR_VERSION}}';
 
-const App = Application.extend({
-  modulePrefix: config.modulePrefix,
-  podModulePrefix: config.podModulePrefix,
-  Resolver
-});
+export default class App extends Application {
+  modulePrefix = config.modulePrefix;
+  podModulePrefix = config.podModulePrefix;
+  Resolver = Resolver;
+}
 
 config.VERSION = version;
 
 loadInitializers(App, config.modulePrefix);
-
-
-export default App;

app/components/object-inspector.js

@@ -1,17 +1,9 @@
 import Component from '@ember/component';
 import { action, computed, get } from '@ember/object';
+
 export default Component.extend({
   tagName: '',
 
-  /**
-   * Application Controller passed
-   * through the template
-   *
-   * @property application
-   * @type {Controller}
-   */
-  application: null,
-
   propDisplayType: 'grouped',
 
   trail: computed('model.[]', function () {
@@ -37,7 +29,14 @@ export default Component.extend({
 
   popStack: action(function () {
     if (this.isNested) {
-      this.application.popMixinDetails();
+      this.popMixinDetails();
     }
   }),
+
+  traceErrors: action(function(objectId) {
+    this.port.send('objectInspector:traceErrors', {
+      objectId
+    });
+  })
 });
+

app/components/object-inspector/accordion.hbs

@@ -0,0 +1,4 @@
+{{yield (hash
+  isExpanded=this.isExpanded
+  toggle=this.toggle
+)}}

app/components/object-inspector/accordion.js

@@ -0,0 +1,15 @@
+import { action, computed } from '@ember/object';
+import Component from '@ember/component';
+
+export default Component.extend({
+  tagName: '',
+
+  isExpanded: computed('mixin.expand', 'mixin.properties.length', function () {
+    return this.get('mixin.expand') && this.get('mixin.properties.length') > 0;
+  }),
+
+  toggle: action(function () {
+    this.toggleProperty('mixin.expand');
+  }),
+});
+

app/components/object-inspector/dependent-keys.hbs

@@ -0,0 +1,22 @@
+<li class="mixin__property-dependency-list">
+  {{svg-jar "dependent-key-connection" width="20px" height="10px"}}
+  <ul>
+    {{#each @keys as |depKey|}}
+      <li class="mixin__property-dependency-item">
+        {{svg-jar
+          "dependent-key-bullet"
+          width="9px"
+          height="9px"
+        }}
+
+        <span
+          class="mixin__property-dependency-name"
+          data-label="object-property-name"
+        >
+          {{depKey}}
+        </span>
+      </li>
+    {{/each}}
+  </ul>
+</li>
+

app/components/object-inspector/errors.hbs

@@ -0,0 +1,20 @@
+<div class="mixin mixin_props_no js-object-inspector-errors">
+  <h2 class="mixin__name mixin__name--errors">
+    Errors
+    <button
+      class="send-to-console send-to-console--chevron-only js-send-errors-to-console"
+      {{on "click" @traceErrors}}
+    >
+      {{svg-jar "send-with-chevron" width="6px" height="9px"}}
+      Trace in the Console
+    </button>
+  </h2>
+  <div class="mixin__properties">
+    {{#each @errors as |error|}}
+      <div class="mixin__error js-object-inspector-error">
+        Error while computing: {{error.property}}
+      </div>
+    {{/each}}
+  </div>
+</div>
+

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

@@ -0,0 +1,16 @@
+<ul class="mixin__properties">
+  <ObjectInspector::SortProperties
+    @properties={{this.flatPropertyList}} as |sortedProperties|
+  >
+    {{#each sortedProperties as |prop|}}
+      <ObjectInspector::Property
+        @model={{prop}}
+        @calculate={{fn this.calculate prop}}
+        @digDeeper={{fn this.digDeeper prop}}
+        @saveProperty={{this.saveProperty}}
+        @sendToConsole={{fn this.sendToConsole prop}}
+      />
+    {{/each}}
+  </ObjectInspector::SortProperties>
+</ul>
+

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

@@ -0,0 +1,31 @@
+import { action, computed } from '@ember/object';
+import PropertiesBase from 'ember-inspector/components/object-inspector/properties-base';
+
+const findMixin = function(mixins, property) {
+  return mixins.find((m) => {
+    return m.properties.includes(property);
+  });
+};
+
+export default PropertiesBase.extend({
+  calculate: action(function(property) {
+    const mixin = findMixin(this.get('model.mixins'), property);
+
+    this.port.send('objectInspector:calculate', {
+      objectId: this.model.objectId,
+      mixinIndex: this.get('model.mixins').indexOf(mixin),
+      property: property.name
+    });
+  }),
+
+  flatPropertyList: computed('model', function () {
+    const props = this.get('model.mixins').map(function (mixin) {
+      return mixin.properties.filter(function (p) {
+        return !p.hasOwnProperty('overridden');
+      });
+    });
+
+    return props.flat();
+  }),
+});
+

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

@@ -0,0 +1,30 @@
+import Component from '@ember/component';
+import { action } from '@ember/object';
+
+export default Component.extend({
+  tagName: '',
+
+  sendToConsole: action(function ({ name }) {
+    this.port.send('objectInspector:sendToConsole', {
+      objectId: this.model.objectId,
+      property: name
+    });
+  }),
+
+  digDeeper: action(function({ name }) {
+    this.port.send('objectInspector:digDeeper', {
+      objectId: this.model.objectId,
+      property: name
+    });
+  }),
+
+  saveProperty: action(function(property, value, dataType) {
+    this.port.send('objectInspector:saveProperty', {
+      objectId: this.model.objectId,
+      property,
+      value,
+      dataType
+    });
+  }),
+});
+