Tidy up Promise tab (#1038)

* Tidy up Promise tab

- @, this, </>, action, etc.

* Consistent action passing to PromiseItem

* Angle bracket for promise table cells

app/controllers/promise-tree.js

@@ -1,4 +1,4 @@
-import { observer } from '@ember/object';
+import { action, observer } from '@ember/object';
 import Controller, { inject as controller } from '@ember/controller';
 import { isEmpty } from '@ember/utils';
 import { equal, bool, and, not, filter } from '@ember/object/computed';
@@ -62,14 +62,7 @@ export default Controller.extend({
   ),
   /* jscs:enable validateIndentation */
 
-
   filter: 'all',
-
-  noFilter: equal('filter', 'all'),
-  isRejectedFilter: equal('filter', 'rejected'),
-  isPendingFilter: equal('filter', 'pending'),
-  isFulfilledFilter: equal('filter', 'fulfilled'),
-
   searchValue: null,
   effectiveSearch: null,
 
@@ -84,43 +77,51 @@ export default Controller.extend({
     });
   },
 
-  actions: {
-    setFilter(filter) {
-      this.set('filter', filter);
-      next(() => {
-        this.notifyPropertyChange('filtered');
+  toggleExpand: action(function(promise) {
+    let isExpanded = !promise.get('isExpanded');
+    promise.set('isManuallyExpanded', isExpanded);
+    promise.recalculateExpanded();
+    let children = promise._allChildren();
+    if (isExpanded) {
+      children.forEach(child => {
+        let isManuallyExpanded = child.get('isManuallyExpanded');
+        if (isManuallyExpanded === undefined) {
+          child.set('isManuallyExpanded', isExpanded);
+          child.recalculateExpanded();
+        }
       });
-    },
-    clear() {
-      this.set('createdAfter', new Date());
-      once(this, this.notifyChange);
-    },
-    tracePromise(promise) {
-      this.port.send('promise:tracePromise', { promiseId: promise.get('guid') });
-    },
-    updateInstrumentWithStack(bool) {
-      this.port.send('promise:setInstrumentWithStack', { instrumentWithStack: bool });
-    },
-    toggleExpand(promise) {
-      let isExpanded = !promise.get('isExpanded');
-      promise.set('isManuallyExpanded', isExpanded);
-      promise.recalculateExpanded();
-      let children = promise._allChildren();
-      if (isExpanded) {
-        children.forEach(child => {
-          let isManuallyExpanded = child.get('isManuallyExpanded');
-          if (isManuallyExpanded === undefined) {
-            child.set('isManuallyExpanded', isExpanded);
-            child.recalculateExpanded();
-          }
-        });
-      }
-    },
-    inspectObject() {
-      this.target.send('inspectObject', ...arguments);
-    },
-    sendValueToConsole(promise) {
-      this.port.send('promise:sendValueToConsole', { promiseId: promise.get('guid') });
     }
-  }
+  }),
+
+  tracePromise: action(function(promise) {
+    this.port.send('promise:tracePromise', { promiseId: promise.get('guid') });
+  }),
+
+  inspectObject: action(function() {
+    this.target.send('inspectObject', ...arguments);
+  }),
+
+  sendValueToConsole: action(function(promise) {
+    this.port.send('promise:sendValueToConsole', {
+      promiseId: promise.get('guid')
+    });
+  }),
+
+  setFilter: action(function(filter) {
+    this.set('filter', filter);
+    next(() => {
+      this.notifyPropertyChange('filtered');
+    });
+  }),
+
+  updateInstrumentWithStack: action(function(bool) {
+    this.port.send('promise:setInstrumentWithStack', {
+      instrumentWithStack: bool
+    });
+  }),
+
+  clear: action(function() {
+    this.set('createdAfter', new Date());
+    once(this, this.notifyChange);
+  }),
 });

app/templates/components/promise-item.hbs

@@ -1,76 +1,76 @@
-{{#list.cell
-  class=(concat "list__cell_main " expandedClass)
-  style=labelStyle
-  on-click=(action toggleExpand model)
-}}
+<@list.cell
+  class={{concat "list__cell_main " this.expandedClass}}
+  style={{this.labelStyle}}
+  @on-click={{action @toggleExpand @model}}
+>
   <div class="list__cell-partial list__cell-partial_size_medium">
     <span
-      title={{label}}
+      title={{this.label}}
       class="js-promise-label"
     >
-      <span class="list__cell-arrow"></span> {{label}}
+      <span class="list__cell-arrow"></span> {{this.label}}
     </span>
   </div>
   <div class="list__cell-helper">
-    {{#if model.hasStack}}
+    {{#if @model.hasStack}}
       <button
         class="send-to-console send-to-console--chevron-only js-trace-promise-btn"
         title="Trace promise in console"
-        {{action tracePromise model}}
+        {{action @tracePromise @model}}
       >
         {{svg-jar "send-with-chevron" width="6px" height="9px"}}
         Trace
       </button>
     {{/if}}
   </div>
-{{/list.cell}}
+</@list.cell>
 
-{{#list.cell}}
+<@list.cell>
   <div
     class="pill pill--bold pill--text js-promise-state"
-    style={{style}}
+    style={{this.style}}
   >
-    {{state}}
+    {{this.state}}
   </div>
-{{/list.cell}}
+</@list.cell>
 
-{{#list.cell class="js-promise-value"}}
-  {{#if hasValue}}
+<@list.cell class="js-promise-value">
+  {{#if this.hasValue}}
     <div
       class="list__cell-partial list__cell-partial_size_medium"
-      title={{settledValue.inspect}}
+      title={{this.settledValue.inspect}}
     >
-      {{#if isValueInspectable}}
+      {{#if this.isValueInspectable}}
         <span
           class="list__link js-promise-object-value"
-          {{action inspectObject settledValue.objectId}}
+          {{on "click" (fn @inspectObject settledValue.objectId)}}
         >
-          {{settledValue.inspect}}
+          {{this.settledValue.inspect}}
         </span>
       {{else}}
-        {{settledValue.inspect}}
+        {{this.settledValue.inspect}}
       {{/if}}
     </div>
 
     <div class="list__cell-helper">
-      {{#if isError}}
+      {{#if this.isError}}
         <button
           class="send-to-console send-to-console--chevron-only js-send-to-console-btn"
           title="Send stack trace to the console"
-          {{action sendValueToConsole model}}
+          {{action @sendValueToConsole @model}}
         >
           {{svg-jar "send-with-chevron" width="6px" height="9px"}}
           Stack Trace
         </button>
       {{else}}
-        <Ui::SendToConsole @action={{sendValueToConsole}} @param={{model}} />
+        <Ui::SendToConsole @action={{@sendValueToConsole}} @param={{@model}} />
       {{/if}}
     </div>
   {{else}}
     --
   {{/if}}
-{{/list.cell}}
+</@list.cell>
 
-{{#list.cell class="list__cell list__cell_value_numeric js-promise-time"}}
-  {{ms-to-time timeToSettle}}
-{{/list.cell}}
+<@list.cell class="list__cell list__cell_value_numeric js-promise-time">
+  {{ms-to-time this.timeToSettle}}
+</@list.cell>

app/templates/promise-tree-toolbar.hbs

@@ -1,6 +1,6 @@
 <div class="toolbar">
   <Ui::ToolbarClearButton
-    @action={{action send "clear"}}
+    @action={{this.clear}}
     class="js-clear-promises-btn"
   />
 
@@ -23,26 +23,26 @@
   <Ui::ToolbarDivider />
 
   <button
-    class="{{if noFilter "active"}} toolbar__radio toolbar__radio--first js-filter"
-    {{action "setFilter" "all"}}
+    class="{{if (eq this.filter "all") "active"}} toolbar__radio toolbar__radio--first js-filter"
+    {{on "click" (fn this.setFilter "all")}}
   >
     All
   </button>
 
   <button
-    class="{{if isRejectedFilter "active"}} toolbar__radio js-filter"
-    {{action "setFilter" "rejected"}}
+    class="{{if (eq this.filter "rejected") "active"}} toolbar__radio js-filter"
+    {{on "click" (fn this.setFilter "rejected")}}
   >
     Rejected
   </button>
   <button
-    class="{{if isPendingFilter "active"}} toolbar__radio js-filter"
-    {{action "setFilter" "pending"}}
+    class="{{if (eq this.filter "pending") "active"}} toolbar__radio js-filter"
+    {{on "click" (fn this.setFilter "pending")}}
   >
     Pending
   </button>
   <button
-    class="{{if isFulfilledFilter "active"}} toolbar__radio toolbar__radio--last js-filter"
+    class="{{if (eq this.filter "fulfilled") "active"}} toolbar__radio toolbar__radio--last js-filter"
     {{action "setFilter" "fulfilled"}}
   >
     Fulfilled
@@ -56,7 +56,7 @@
         @type="checkbox"
         @checked={{this.instrumentWithStack}}
         @id="instrument-with-stack"
-        @change={{action "updateInstrumentWithStack" (not this.instrumentWithStack)}}
+        @change={{fn this.updateInstrumentWithStack (not this.instrumentWithStack)}}
       />
       Trace promises
     </label>

app/templates/promise-tree.hbs

@@ -1,4 +1,4 @@
-{{#if shouldRefresh}}
+{{#if this.shouldRefresh}}
   <Ui::EmptyMessage class="js-page-refresh">
     <p>Reload the page to see promises created before you opened the inspector.</p>
     <button class="js-page-refresh-btn" {{action "refreshPage"}}>Reload</button>
@@ -9,18 +9,18 @@
     @schema={{schema-for "promise-tree"}}
     @setIsDragging={{action "setIsDragging" target=this.application}} as |list|
   >
-    {{#list.vertical-collection filtered as |content index|}}
+    {{#list.vertical-collection this.filtered as |content index|}}
       <tr class="list__row js-promise-tree-item {{if (mod index 2) "striped"}}">
-        {{promise-item
-          model=content
-          filter=filter
-          effectiveSearch=effectiveSearch
-          toggleExpand=(action "toggleExpand")
-          tracePromise=(action "tracePromise")
-          inspectObject=(action "inspectObject")
-          sendValueToConsole=(action "sendValueToConsole")
-          list=list
-        }}
+        <PromiseItem
+          @model={{content}}
+          @filter={{this.filter}}
+          @effectiveSearch={{this.effectiveSearch}}
+          @toggleExpand={{this.toggleExpand}}
+          @tracePromise={{this.tracePromise}}
+          @inspectObject={{this.inspectObject}}
+          @sendValueToConsole={{this.sendValueToConsole}}
+          @list={{list}}
+        />
       </tr>
     {{/list.vertical-collection}}
   </List>