More progress removing prototype extensions (#2601)

Author: RobbieTheWagner

app/controllers/application.js

@@ -5,6 +5,8 @@ import { equal } from '@ember/object/computed';
 import { debounce, schedule } from '@ember/runloop';
 import { inject as service } from '@ember/service';
 
+import { TrackedArray } from 'tracked-built-ins';
+
 export default class ApplicationController extends Controller {
   /**
    * Service used to broadcast changes to the application's layout
@@ -49,7 +51,7 @@ export default class ApplicationController extends Controller {
   constructor() {
     super(...arguments);
 
-    this.mixinStack = [];
+    this.mixinStack = new TrackedArray([]);
     this.mixinDetails = [];
   }
 
@@ -67,15 +69,14 @@ export default class ApplicationController extends Controller {
       errors,
     };
 
-    this.mixinStack.pushObject(details);
+    this.mixinStack.push(details);
     this.set('mixinDetails', details);
   }
 
   @action
   popMixinDetails() {
-    let mixinStack = this.mixinStack;
-    let item = mixinStack.popObject();
-    this.set('mixinDetails', mixinStack.get('lastObject'));
+    const item = this.mixinStack.pop();
+    this.set('mixinDetails', this.mixinStack.at(-1));
     this.port.send('objectInspector:releaseObject', {
       objectId: item.objectId,
     });
@@ -166,26 +167,28 @@ export default class ApplicationController extends Controller {
       });
     });
 
-    this.set('mixinStack', []);
+    this.set('mixinStack', new TrackedArray([]));
     this.pushMixinDetails(name, undefined, objectId, details, errors);
   }
 
   @action
   droppedObject(objectId) {
-    let mixinStack = this.mixinStack;
-    let obj = mixinStack.find((x) => x.objectId === objectId);
+    let obj = this.mixinStack.find((mixin) => mixin.objectId === objectId);
     if (obj) {
-      let index = mixinStack.indexOf(obj);
-      let objectsToRemove = [];
+      let index = this.mixinStack.indexOf(obj);
+      let objectsToRemove = new TrackedArray([]);
       for (let i = index; i >= 0; i--) {
-        objectsToRemove.pushObject(mixinStack.objectAt(i));
+        objectsToRemove.push(this.mixinStack.at(i));
       }
       objectsToRemove.forEach((item) => {
-        mixinStack.removeObject(item);
+        const index = this.mixinStack.indexOf(item);
+        if (index !== -1) {
+          this.mixinStack.splice(index, 1);
+        }
       });
     }
-    if (mixinStack.get('length') > 0) {
-      this.set('mixinDetails', mixinStack.get('lastObject'));
+    if (this.mixinStack.get('length') > 0) {
+      this.set('mixinDetails', this.mixinStack.at(-1));
     } else {
       this.set('mixinDetails', null);
     }

app/controllers/deprecations.js

@@ -1,39 +1,44 @@
-import { action, computed, set } from '@ember/object';
+import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+
+import { TrackedArray } from 'tracked-built-ins';
+
 import debounceComputed from 'ember-inspector/computed/debounce';
 import searchMatch from 'ember-inspector/utils/search-match';
 
 export default class DeprecationsController extends Controller {
   @service adapter;
   @service port;
 
-  search = null;
-  toggleDeprecationWorkflow = false;
+  deprecations = new TrackedArray([]);
+  @tracked search = null;
+  @tracked toggleDeprecationWorkflow = false;
 
   @debounceComputed('search', 300) searchValue;
 
-  constructor() {
-    super(...arguments);
-    set(this, 'deprecations', []);
-  }
-
   @action
   changeDeprecationWorkflow(e) {
-    this.set('toggleDeprecationWorkflow', e.target.checked);
+    this.toggleDeprecationWorkflow = e.target.checked;
 
     this.port.send('deprecation:setOptions', {
       options: { toggleDeprecationWorkflow: this.toggleDeprecationWorkflow },
     });
   }
 
-  @computed('[email protected]', 'search')
   get filtered() {
     return this.deprecations.filter((item) =>
       searchMatch(item.message, this.search),
     );
   }
 
+  @action
+  clear() {
+    this.port.send('deprecation:clear');
+    this.deprecations.splice(0, this.deprecations.length);
+  }
+
   @action
   openResource(item) {
     this.adapter.openResource(item.fullSource, item.line);

app/controllers/promise-tree.js

@@ -1,33 +1,44 @@
-// eslint-disable-next-line ember/no-observers
-import { action, observer } from '@ember/object';
+import { action } from '@ember/object';
 import Controller from '@ember/controller';
 import { inject as service } from '@ember/service';
 import { isEmpty } from '@ember/utils';
-import { equal, bool, and, not, filter } from '@ember/object/computed';
 import { debounce, next, once } from '@ember/runloop';
+import { tracked } from '@glimmer/tracking';
+
+// eslint-disable-next-line ember/no-observers
+import { observes } from '@ember-decorators/object';
 
-export default Controller.extend({
-  queryParams: ['filter'],
+export default class PromiseTreeController extends Controller {
+  queryParams = ['filter'];
 
-  adapter: service(),
-  port: service(),
+  @service adapter;
+  @service port;
 
-  createdAfter: null,
+  @tracked createdAfter = null;
+  @tracked filter = 'all';
+  @tracked searchValue = null;
+  @tracked effectiveSearch = null;
 
   // below used to show the "refresh" message
-  isEmpty: equal('model.length', 0),
-  wasCleared: bool('createdAfter'),
-  neverCleared: not('wasCleared'),
-  shouldRefresh: and('isEmpty', 'neverCleared'),
+  get isEmpty() {
+    return this.model.length === 0;
+  }
+  get wasCleared() {
+    return Boolean(this.createdAfter);
+  }
+  get neverCleared() {
+    return !this.wasCleared;
+  }
+  get shouldRefresh() {
+    return this.isEmpty && this.neverCleared;
+  }
 
   // Keep track of promise stack traces.
   // It is opt-in due to performance reasons.
-  instrumentWithStack: false,
+  @tracked instrumentWithStack = false;
 
-  /* jscs:disable validateIndentation */
-  filtered: filter(
-    'model.@each.{createdAt,fulfilledBranch,rejectedBranch,pendingBranch,isVisible}',
-    function (item) {
+  get filtered() {
+    return this.model.filter((item) => {
       // exclude cleared promises
       if (this.createdAfter && item.get('createdAt') < this.createdAfter) {
         return false;
@@ -60,27 +71,25 @@ export default Controller.extend({
         return item.matches(search);
       }
       return true;
-    },
-  ),
-  /* jscs:enable validateIndentation */
-
-  filter: 'all',
-  searchValue: null,
-  effectiveSearch: null,
+    });
+  }
 
   // eslint-disable-next-line ember/no-observers
-  searchChanged: observer('searchValue', function () {
+  @observes('searchValue')
+  searchChanged() {
     debounce(this, this.notifyChange, 500);
-  }),
+  }
 
+  @action
   notifyChange() {
-    this.set('effectiveSearch', this.searchValue);
+    this.effectiveSearch = this.searchValue;
     next(() => {
       this.notifyPropertyChange('model');
     });
-  },
+  }
 
-  toggleExpand: action(function (promise) {
+  @action
+  toggleExpand(promise) {
     let isExpanded = !promise.get('isExpanded');
     promise.set('isManuallyExpanded', isExpanded);
     promise.recalculateExpanded();
@@ -94,37 +103,43 @@ export default Controller.extend({
         }
       });
     }
-  }),
+  }
 
-  tracePromise: action(function (promise) {
+  @action
+  tracePromise(promise) {
     this.port.send('promise:tracePromise', { promiseId: promise.get('guid') });
-  }),
+  }
 
-  inspectObject: action(function () {
+  @action
+  inspectObject() {
     this.target.send('inspectObject', ...arguments);
-  }),
+  }
 
-  sendValueToConsole: action(function (promise) {
+  @action
+  sendValueToConsole(promise) {
     this.port.send('promise:sendValueToConsole', {
       promiseId: promise.get('guid'),
     });
-  }),
+  }
 
-  setFilter: action(function (filter) {
-    this.set('filter', filter);
+  @action
+  setFilter(filter) {
+    this.filter = filter;
     next(() => {
       this.notifyPropertyChange('filtered');
     });
-  }),
+  }
 
-  updateInstrumentWithStack: action(function (bool) {
+  @action
+  updateInstrumentWithStack(bool) {
     this.port.send('promise:setInstrumentWithStack', {
       instrumentWithStack: bool,
     });
-  }),
+  }
 
-  clear: action(function () {
-    this.set('createdAfter', new Date());
+  @action
+  clear() {
+    this.createdAfter = new Date();
     once(this, this.notifyChange);
-  }),
-});
+  }
+}

app/libs/promise-assembler.js

@@ -4,17 +4,21 @@ import EmberObject from '@ember/object';
 import EventedMixin from '@ember/object/evented';
 import Promise from 'ember-inspector/models/promise';
 
+import { TrackedArray } from 'tracked-built-ins';
+import { tracked } from '@glimmer/tracking';
+
 export default class PromiseAssembler extends EmberObject.extend(EventedMixin) {
   // Used to track whether current message received
   // is the first in the request
   // Mainly helps in triggering 'firstMessageReceived' event
-  firstMessageReceived = false;
+  @tracked firstMessageReceived = false;
+
+  all = new TrackedArray([]);
+  topSort = new TrackedArray([]);
 
   init() {
     super.init(...arguments);
 
-    this.all = [];
-    this.topSort = [];
     this.topSortMeta = {};
     this.promiseIndex = {};
   }
@@ -33,9 +37,9 @@ export default class PromiseAssembler extends EmberObject.extend(EventedMixin) {
   reset() {
     this.set('topSortMeta', {});
     this.set('promiseIndex', {});
-    this.topSort.clear();
+    this.topSort.splice(0, this.topSort.length);
 
-    this.set('firstMessageReceived', false);
+    this.firstMessageReceived = false;
     let all = this.all;
     // Lazily destroy promises
     // Allows for a smooth transition on deactivate,
@@ -47,7 +51,7 @@ export default class PromiseAssembler extends EmberObject.extend(EventedMixin) {
       },
       500,
     );
-    this.set('all', []);
+    this.set('all', new TrackedArray([]));
   }
 
   destroyPromises(promises) {
@@ -60,7 +64,7 @@ export default class PromiseAssembler extends EmberObject.extend(EventedMixin) {
     this.rebuildPromises(message.promises);
 
     if (!this.firstMessageReceived) {
-      this.set('firstMessageReceived', true);
+      this.firstMessageReceived = true;
       this.trigger('firstMessageReceived');
     }
   }
@@ -106,7 +110,10 @@ export default class PromiseAssembler extends EmberObject.extend(EventedMixin) {
     }
     if (!isNew && hasParent !== hadParent) {
       // todo: implement recursion to reposition children
-      topSort.removeObject(promise);
+      const index = topSort.indexOf(promise);
+      if (index !== -1) {
+        topSort.splice(index, 1);
+      }
       parentChanged = true;
     }
     meta.hasParent = hasParent;
@@ -119,12 +126,15 @@ export default class PromiseAssembler extends EmberObject.extend(EventedMixin) {
     let topSort = this.topSort;
     if (promise.get('parent')) {
       let parentIndex = topSort.indexOf(promise.get('parent'));
-      topSort.insertAt(parentIndex + 1, promise);
+      topSort.splice(parentIndex + 1, 0, promise);
     } else {
-      topSort.pushObject(promise);
+      this.topSort.push(promise);
     }
     promise.get('children').forEach((child) => {
-      topSort.removeObject(child);
+      const index = topSort.indexOf(child);
+      if (index !== -1) {
+        topSort.splice(index, 1);
+      }
       this.insertInTopSort(child);
     });
   }
@@ -144,7 +154,7 @@ export default class PromiseAssembler extends EmberObject.extend(EventedMixin) {
     let promise = Promise.create(props);
     let index = this.get('all.length');
 
-    this.all.pushObject(promise);
+    this.all.push(promise);
     this.promiseIndex[promise.get('guid')] = index;
     return promise;
   }
@@ -153,7 +163,7 @@ export default class PromiseAssembler extends EmberObject.extend(EventedMixin) {
     if (guid) {
       let index = this.promiseIndex[guid];
       if (index !== undefined) {
-        return this.all.objectAt(index);
+        return this.all.at(index);
       }
     } else {
       return this.all;