diff --git a/app/components/mixin-detail.js b/app/components/mixin-detail.js index d0eb50c77f..bc6eb394c1 100644 --- a/app/components/mixin-detail.js +++ b/app/components/mixin-detail.js @@ -68,13 +68,10 @@ export default Component.extend({ }, saveProperty(property, value, dataType) { - let mixinIndex = this.get('mixinDetails.model.mixins').indexOf(this.get('model')); - this.get('port').send('objectInspector:saveProperty', { objectId: this.get('objectId'), property, value, - mixinIndex, dataType }); } diff --git a/app/components/mixin-details.js b/app/components/mixin-details.js index 4fdc753e98..2b20f07117 100644 --- a/app/components/mixin-details.js +++ b/app/components/mixin-details.js @@ -1,5 +1,34 @@ import Component from '@ember/component'; +import { computed } from '@ember/object'; +import { sort } from '@ember/object/computed'; + export default Component.extend({ + /** + * Used by the `sort` computed macro. + * + * @property sortProperties + * @type {Array} + */ + sortProperties: ['name'], + + /** + * Sort the properties by name to make them easier to find in the object inspector. + * + * @property sortedAllProperties + * @type {Array} + */ + sortedAllProperties: sort('allProperties', 'sortProperties'), + + allProperties: 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(); + }), + actions: { traceErrors() { this.get('port').send('objectInspector:traceErrors', { diff --git a/app/components/mixin-property.js b/app/components/mixin-property.js index a2fec4a967..204882cfa8 100644 --- a/app/components/mixin-property.js +++ b/app/components/mixin-property.js @@ -4,6 +4,7 @@ import { equal, alias, and } from '@ember/object/computed'; import { next } from '@ember/runloop'; export default Component.extend({ + tagName: '', isEdit: false, /** diff --git a/app/components/object-inspector.js b/app/components/object-inspector.js index 9ae2d9dc12..a45ab2695a 100644 --- a/app/components/object-inspector.js +++ b/app/components/object-inspector.js @@ -12,6 +12,8 @@ export default Component.extend({ */ application: null, + propDisplayType: 'grouped', + trail: computed('model.[]', function() { let nested = this.get('model').slice(1); if (nested.length === 0) { return ""; } @@ -38,6 +40,10 @@ export default Component.extend({ toggleInspector() { this.sendAction('toggleInspector', ...arguments); + }, + + setPropDisplay(type) { + this.set('propDisplayType', type); } } }); diff --git a/app/styles/object_inspector.scss b/app/styles/object_inspector.scss index a268ec88c9..8729ea03b4 100644 --- a/app/styles/object_inspector.scss +++ b/app/styles/object_inspector.scss @@ -11,6 +11,17 @@ word-break: break-all; } +.object-inspector-toolbar.toolbar { + // override default .toolbar height + // based on table view header height + min-height: 30px; + border-bottom: 1px solid var(--base03); + + .toolbar__radio--first { + margin-left: 7px; + } +} + .mixin__property-dependency-list { position: relative; margin-bottom: 5px; diff --git a/app/templates/components/mixin-details.hbs b/app/templates/components/mixin-details.hbs index 6130a37ca0..8323ef7e8a 100644 --- a/app/templates/components/mixin-details.hbs +++ b/app/templates/components/mixin-details.hbs @@ -17,139 +17,33 @@ {{/if}} -{{#each model.mixins as |item|}} - {{#mixin-detail model=item mixinDetails=this as |mixin|}} -
- {{#if mixin.model.properties.length}} -

{{mixin.model.name}}

- {{else}} -

{{mixin.model.name}}

- {{/if}} - {{#if mixin.isExpanded}} -
    - {{#each mixin.sortedProperties as |prop|}} - {{#mixin-property model=prop mixin=mixin as |property|}} -
  • - - {{#if property.hasDependentKeys}} - - {{else}} - - {{/if}} - - - {{#if property.isService}} - - - - {{else if property.isComputedProperty}} - - - - {{else}} - - - - {{/if}} - - - - {{#if property.isService}} - - {{property.model.name}} - - {{else}} - {{#if property.hasDependentKeys}} - - {{property.model.name}} - - {{else}} - {{property.model.name}} - {{/if}} - {{/if}} - - - : - - - {{#unless property.isEdit}} - {{#if (and property.isComputedProperty (not property.isCalculated))}} - - {{else}} - - {{property.model.value.inspect}} - - {{/if}} - {{else}} - {{#unless property.isDate}} - {{property-field - value=property.txtValue - finished-editing="finishedEditing" - save-property="saveProperty" - propertyComponent=property - class="mixin__property-value-txt js-object-property-value-txt"}} - {{else}} - {{date-property-field - allowInput=true - date=(readonly property.dateValue) - dateFormat="Y-m-d" - class="mixin__property-value-txt js-object-property-value-date" - onChange=(action "dateSelected" target=property) - onClose=(action "finishedEditing" target=property)}} - {{/unless}} - {{/unless}} - - (Overridden by {{property.model.overridden}}) - - -
    • - - {{#if property.showDependentKeys}} -
  • - {{svg-jar "dependent-key-connection" width="20px" height="10px"}} -
      - {{#each property.model.dependentKeys as |depKey index|}} -
    • - {{svg-jar "dependent-key-bullet" width="9px" height="9px"}} - - {{depKey}} - -
      • - {{/each}} -
    -
    • - {{/if}} - {{/mixin-property}} - {{else}} -
  • No Properties
    • - {{/each}} -
- {{/if}} -
- {{/mixin-detail}} -{{/each}} +{{#if (eq displayType "grouped")}} + {{#each model.mixins as |item|}} + {{#mixin-detail model=item mixinDetails=this as |mixin|}} +
+ {{#if mixin.model.properties.length}} +

{{mixin.model.name}}

+ {{else}} +

{{mixin.model.name}}

+ {{/if}} + {{#if mixin.isExpanded}} +
    + {{#each mixin.sortedProperties as |prop|}} + {{mixin-property model=prop mixin=mixin}} + {{else}} +
  • No Properties
    • + {{/each}} +
+ {{/if}} +
+ {{/mixin-detail}} + {{/each}} +{{else}} +
+ {{#mixin-detail model=this mixinDetails=this as |mixin|}} + {{#each sortedAllProperties as |prop|}} + {{mixin-property model=prop mixin=mixin}} + {{/each}} + {{/mixin-detail}} +
+{{/if}} \ No newline at end of file diff --git a/app/templates/components/mixin-property.hbs b/app/templates/components/mixin-property.hbs index f4a0b59217..9f9ae0719f 100644 --- a/app/templates/components/mixin-property.hbs +++ b/app/templates/components/mixin-property.hbs @@ -1 +1,115 @@ -{{yield this}} +
  • + + {{#if hasDependentKeys}} + + {{else}} + + {{/if}} + + + {{#if isService}} + + + + {{else if isComputedProperty}} + + + + {{else}} + + + + {{/if}} + + + + {{#if isService}} + + {{model.name}} + + {{else}} + {{#if hasDependentKeys}} + + {{model.name}} + + {{else}} + {{model.name}} + {{/if}} + {{/if}} + + + : + + + {{#unless isEdit}} + {{#if (and isComputedProperty (not isCalculated))}} + + {{else}} + + {{model.value.inspect}} + + {{/if}} + {{else}} + {{#unless isDate}} + {{property-field + value=txtValue + finished-editing="finishedEditing" + save-property="saveProperty" + propertyComponent=this + class="mixin__property-value-txt js-object-property-value-txt"}} + {{else}} + {{date-property-field + allowInput=true + date=(readonly dateValue) + dateFormat="Y-m-d" + class="mixin__property-value-txt js-object-property-value-date" + onChange=(action "dateSelected") + onClose=(action "finishedEditing")}} + {{/unless}} + {{/unless}} + + (Overridden by {{model.overridden}}) + + +
    • + +{{#if showDependentKeys}} +
  • + {{svg-jar "dependent-key-connection" width="20px" height="10px"}} +
      + {{#each model.dependentKeys as |depKey index|}} +
    • + {{svg-jar "dependent-key-bullet" width="9px" height="9px"}} + + {{depKey}} + +
      • + {{/each}} +
    +
    • +{{/if}} \ No newline at end of file diff --git a/app/templates/components/object-inspector.hbs b/app/templates/components/object-inspector.hbs index d839e5ab06..9ecd2b46f4 100644 --- a/app/templates/components/object-inspector.hbs +++ b/app/templates/components/object-inspector.hbs @@ -26,5 +26,18 @@ isExpanded=true class="toolbar__icon-button sidebar-toggle--far-left"}} {{/if}}
    - {{mixin-details model=mixinDetails}} +
    + + +
    + + {{mixin-details model=mixinDetails displayType=propDisplayType}}
    diff --git a/ember_debug/object-inspector.js b/ember_debug/object-inspector.js index 4fc8f305f4..b397462910 100644 --- a/ember_debug/object-inspector.js +++ b/ember_debug/object-inspector.js @@ -147,7 +147,7 @@ export default EmberObject.extend(PortMixin, { if (message.dataType && message.dataType === 'date') { value = new Date(value); } - this.saveProperty(message.objectId, message.mixinIndex, message.property, value); + this.saveProperty(message.objectId, message.property, value); }, sendToConsole(message) { this.sendToConsole(message.objectId, message.property); @@ -198,7 +198,7 @@ export default EmberObject.extend(PortMixin, { return (val instanceof EmberObject) || typeOf(val) === 'array'; }, - saveProperty(objectId, mixinIndex, prop, val) { + saveProperty(objectId, prop, val) { let object = this.sentObjects[objectId]; set(object, prop, val); }, diff --git a/tests/acceptance/object-inspector-test.js b/tests/acceptance/object-inspector-test.js index a004c6593f..4b3cd3ab82 100644 --- a/tests/acceptance/object-inspector-test.js +++ b/tests/acceptance/object-inspector-test.js @@ -341,6 +341,15 @@ module('Object Inspector', function(hooks) { assert.equal(findAll('.mixin__property-dependency-list').length, 0); assert.equal(findAll('.mixin__property-dependency-item').length, 0); assert.equal(findAll('.mixin__property-dependency-item > .mixin__property-dependency-name').length, 0); + + // All View + + await click('.js-object-display-type-all'); + await click('.mixin__property-icon--computed'); + + assert.equal(findAll('.mixin__property-dependency-list').length, 1); + assert.equal(findAll('.mixin__property-dependency-item').length, 1); + assert.equal(findAll('.mixin__property-dependency-item > .mixin__property-dependency-name').length, 1); }); test("Properties are bound to the application properties", async function (assert) { @@ -387,7 +396,6 @@ module('Object Inspector', function(hooks) { assert.equal(name, 'objectInspector:saveProperty'); assert.equal(message.property, 'boundProp'); assert.equal(message.value, 'Joey'); - assert.equal(message.mixinIndex, 0); await triggerPort(this, 'objectInspector:updateProperty', { objectId: 'object-id', @@ -435,7 +443,6 @@ module('Object Inspector', function(hooks) { assert.equal(name, 'objectInspector:saveProperty'); assert.equal(message.property, 'boundProp'); assert.equal(message.value, '{"name":"joey"}'); - assert.equal(message.mixinIndex, 0); }); test("Send to console", async function (assert) { @@ -460,6 +467,7 @@ module('Object Inspector', function(hooks) { }; await triggerPort(this, 'objectInspector:updateObject', obj); + // Grouped View await click('.js-send-to-console-btn'); assert.equal(name, 'objectInspector:sendToConsole'); @@ -471,6 +479,14 @@ module('Object Inspector', function(hooks) { assert.equal(name, 'objectInspector:sendToConsole'); assert.equal(message.objectId, 'object-id'); assert.equal(message.property, undefined); + + // All View + + await click('.js-object-display-type-all'); + await click('.js-send-object-to-console-btn'); + assert.equal(name, 'objectInspector:sendToConsole'); + assert.equal(message.objectId, 'object-id'); + assert.equal(message.property, undefined); }); test("Read only CPs cannot be edited", async function (assert) {