Start converting to module imports

app/adapters/basic.js

@@ -11,11 +11,11 @@
  * });
  * ```
  */
-import Ember from "ember";
+import EmberObject, { computed } from '@ember/object';
+
 import config from 'ember-inspector/config/environment';
-const { computed } = Ember;
 
-export default Ember.Object.extend({
+export default EmberObject.extend({
   /**
    * Called when the adapter is created (when
    * the inspector app boots).

app/adapters/bookmarklet.js

@@ -1,7 +1,7 @@
 /* eslint no-useless-escape: 0 */
+import { computed } from '@ember/object';
+
 import BasicAdapter from "./basic";
-import Ember from 'ember';
-const { computed } = Ember;
 
 export default BasicAdapter.extend({
   name: 'bookmarklet',

app/adapters/web-extension.js

@@ -1,8 +1,8 @@
 /* globals chrome */
+import { computed } from '@ember/object';
+
 import BasicAdapter from "./basic";
-import Ember from 'ember';
 import config from 'ember-inspector/config/environment';
-const { computed } = Ember;
 
 let emberDebug = null;
 

app/adapters/websocket.js

@@ -1,6 +1,6 @@
-import Ember from "ember";
+import { run } from '@ember/runloop';
+import { computed } from '@ember/object';
 import BasicAdapter from "./basic";
-const { computed } = Ember;
 
 export default BasicAdapter.extend({
   init() {
@@ -17,7 +17,7 @@ export default BasicAdapter.extend({
 
   _connect() {
     this.get('socket').on('emberInspectorMessage', message => {
-      Ember.run(() => {
+      run(() => {
         this._messageReceived(message);
       });
     });

app/app.js

@@ -1,4 +1,5 @@
-import Ember from 'ember';
+import { typeOf } from '@ember/utils';
+import Application from '@ember/application';
 import Resolver from './resolver';
 import loadInitializers from 'ember-load-initializers';
 import config from './config/environment';
@@ -7,7 +8,7 @@ import PromiseAssembler from "ember-inspector/libs/promise-assembler";
 
 const version = '{{EMBER_INSPECTOR_VERSION}}';
 
-const App = Ember.Application.extend({
+const App = Application.extend({
   modulePrefix: config.modulePrefix,
   podModulePrefix: config.podModulePrefix,
   Resolver
@@ -39,7 +40,7 @@ App.initializer({
 
     // register and inject adapter
     let Adapter;
-    if (Ember.typeOf(instance.adapter) === 'string') {
+    if (typeOf(instance.adapter) === 'string') {
       Adapter = instance.resolveRegistration(`adapter:${instance.adapter}`);
     } else {
       Adapter = instance.adapter;

app/components/action-checkbox.js

@@ -1,5 +1,4 @@
-import Ember from 'ember';
-const { Component } = Ember;
+import Component from '@ember/component';
 
 export default Component.extend({
   tagName: 'input',

app/components/container-instance.js

@@ -7,9 +7,9 @@
  *
  * Since it has no tag it has no effect on the DOM hierarchy.
  */
-import Ember from 'ember';
+import Component from '@ember/component';
+
 import RowEventsMixin from 'ember-inspector/mixins/row-events';
-const { Component } = Ember;
 export default Component.extend(RowEventsMixin, {
   /**
    * No tag

app/components/date-property-field.js

@@ -1,6 +1,6 @@
-import Ember from "ember";
+import { on } from '@ember/object/evented';
+import { once } from '@ember/runloop';
 import DatePicker from "ember-inspector/components/pikaday-input";
-const { on, run: { once } } = Ember;
 const KEY_EVENTS = {
   escape: 27
 };

app/components/deprecation-item-source.js

@@ -1,6 +1,6 @@
-import Ember from 'ember';
-const { Component, computed } = Ember;
-const { bool, readOnly, and } = computed;
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+import { bool, readOnly, and } from '@ember/object/computed';
 
 export default Component.extend({
   /**

app/components/deprecation-item.js

@@ -1,6 +1,5 @@
-import Ember from "ember";
-const { Component, computed } = Ember;
-const { notEmpty } = computed;
+import Component from '@ember/component';
+import { notEmpty } from '@ember/object/computed';
 
 export default Component.extend({
   isExpanded: true,

app/components/drag-handle.js

@@ -1,15 +1,17 @@
-import Ember from "ember";
+import $ from 'jquery';
+import { equal } from '@ember/object/computed';
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+import { htmlSafe } from '@ember/string';
 
-const { computed, String: { htmlSafe } } = Ember;
-
-export default Ember.Component.extend({
+export default Component.extend({
   classNames: ['drag-handle'],
   classNameBindings: ['isLeft:drag-handle--left', 'isRight:drag-handle--right', 'faded:drag-handle--faded'],
   attributeBindings: ['style'],
   position: 0,
   side: '',
-  isRight: Ember.computed.equal('side', 'right'),
-  isLeft: Ember.computed.equal('side', 'left'),
+  isRight: equal('side', 'right'),
+  isLeft: equal('side', 'left'),
   minWidth: 60,
 
   /**
@@ -56,7 +58,7 @@ export default Ember.Component.extend({
 
     this.sendAction('action', true);
 
-    Ember.$('body').on(`mousemove.${namespace}`, e => {
+    $('body').on(`mousemove.${namespace}`, e => {
       let position = this.get('isLeft') ?
                        e.pageX - $containerOffsetLeft :
                        $containerOffsetRight - e.pageX;
@@ -74,7 +76,7 @@ export default Ember.Component.extend({
 
   stopDragging() {
     this.sendAction('action', false);
-    Ember.$('body').off(`.drag-${this.get('elementId')}`);
+    $('body').off(`.drag-${this.get('elementId')}`);
   },
 
   willDestroyElement() {

app/components/draggable-column.js

@@ -2,9 +2,8 @@
 // ===============
 // A wrapper for a resizable-column and a drag-handle component
 
-import Ember from "ember";
-const { Component, inject } = Ember;
-const { service } = inject;
+import Component from '@ember/component';
+import { inject as service } from '@ember/service';
 
 export default Component.extend({
   tagName: '', // Prevent wrapping in a div

app/components/icon-button.js

@@ -1,5 +1,4 @@
-import Ember from "ember";
-const { Component } = Ember;
+import Component from '@ember/component';
 export default Component.extend({
   attributeBindings: ['title'],
 

app/components/iframe-picker.js

@@ -1,6 +1,8 @@
-import Ember from "ember";
-const { Component, computed, run, observer, getOwner } = Ember;
-const { alias } = computed;
+import Component from '@ember/component';
+import { run } from '@ember/runloop';
+import { observer, computed } from '@ember/object';
+import { getOwner } from '@ember/application';
+import { alias } from '@ember/object/computed';
 
 export default Component.extend({
   model: computed('port.detectedApplications.[]', function() {

app/components/main-content.js

@@ -1,5 +1,7 @@
-import Ember from "ember";
-const { Component, run: { schedule }, $, inject: { service } } = Ember;
+import Component from '@ember/component';
+import { schedule } from '@ember/runloop';
+import $ from 'jquery';
+import { inject as service } from '@ember/service';
 import { task, timeout } from 'ember-concurrency';
 
 // Currently used to determine the height of list-views

app/components/mixin-detail.js

@@ -1,6 +1,6 @@
-import Ember from "ember";
-const { computed, Component } = Ember;
-const { readOnly, sort } = computed;
+import { computed } from '@ember/object';
+import Component from '@ember/component';
+import { readOnly, sort } from '@ember/object/computed';
 
 export default Component.extend({
   /**

app/components/mixin-details.js

@@ -1,5 +1,4 @@
-import Ember from "ember";
-const { Component } = Ember;
+import Component from '@ember/component';
 export default Component.extend({
   actions: {
     traceErrors() {

app/components/mixin-property.js

@@ -1,6 +1,6 @@
-import Ember from "ember";
-const { computed, Component } = Ember;
-const { equal, alias } = computed;
+import { computed } from '@ember/object';
+import Component from '@ember/component';
+import { equal, alias } from '@ember/object/computed';
 
 export default Component.extend({
   isEdit: false,

app/components/object-inspector.js

@@ -1,6 +1,5 @@
-import Ember from "ember";
-const { Component, computed } = Ember;
-const get = Ember.get;
+import Component from '@ember/component';
+import { computed, get } from '@ember/object';
 export default Component.extend({
   tagName: '',
 

app/components/promise-item.js

@@ -1,7 +1,8 @@
-import Ember from "ember";
-
-const { Component, computed, String: { htmlSafe }, isEmpty } = Ember;
-const { notEmpty, gt, equal } = computed;
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+import { htmlSafe } from '@ember/string';
+import { isEmpty } from '@ember/utils';
+import { notEmpty, gt, equal } from '@ember/object/computed';
 
 const COLOR_MAP = {
   red: '#ff2717',

app/components/property-field.js

@@ -1,5 +1,5 @@
-import Ember from "ember";
-export default Ember.TextField.extend({
+import TextField from '@ember/component/text-field';
+export default TextField.extend({
   attributeBindings: ['label:data-label'],
 
   /**

app/components/record-filter.js

@@ -1,5 +1,5 @@
-import Ember from "ember";
-const { computed, Component } = Ember;
+import { computed } from '@ember/object';
+import Component from '@ember/component';
 export default Component.extend({
   filterValue: null,
   checked: computed('filterValue', 'model.name', function() {

app/components/record-item.js

@@ -1,6 +1,8 @@
-import Ember from 'ember';
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+import { htmlSafe } from '@ember/string';
+import { isEmpty } from '@ember/utils';
 import RowEventsMixin from 'ember-inspector/mixins/row-events';
-const { Component, computed, String: { htmlSafe }, isEmpty } = Ember;
 const COLOR_MAP = {
   red: '#ff2717',
   blue: '#174fff',

app/components/render-item.js

@@ -1,8 +1,12 @@
-import Ember from 'ember';
+import Component from '@ember/component';
+import { isNone, isEmpty } from '@ember/utils';
+import { run } from '@ember/runloop';
+import { on } from '@ember/object/evented';
+import { observer, computed } from '@ember/object';
+import { htmlSafe } from '@ember/string';
 import escapeRegExp from "ember-inspector/utils/escape-reg-exp";
 
-const { Component, computed, isEmpty, isNone, run, on, observer, String: { htmlSafe } } = Ember;
-const { gt } = computed;
+import { gt } from '@ember/object/computed';
 const { once } = run;
 
 export default Component.extend({

app/components/resizable-column.js

@@ -1,5 +1,6 @@
-import Ember from "ember";
-const { Component, computed, String: { htmlSafe } } = Ember;
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+import { htmlSafe } from '@ember/string';
 export default Component.extend({
   width: null,
 

app/components/route-item.js

@@ -1,6 +1,7 @@
-import Ember from 'ember';
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+import { htmlSafe } from '@ember/string';
 import checkCurrentRoute from "ember-inspector/utils/check-current-route";
-const { Component, computed, String: { htmlSafe } } = Ember;
 
 export default Component.extend({
   // passed as an attribute to the component

app/components/send-to-console.js

@@ -1,5 +1,5 @@
-import Ember from "ember";
-export default Ember.Component.extend({
+import Component from '@ember/component';
+export default Component.extend({
   tagName: 'button',
   classNames: ['send-to-console', 'js-send-to-console-btn'],
   action: 'sendValueToConsole',

app/components/sidebar-toggle.js

@@ -1,13 +1,14 @@
-import Ember from "ember";
-export default Ember.Component.extend({
+import { equal } from '@ember/object/computed';
+import Component from '@ember/component';
+export default Component.extend({
 
   tagName: 'button',
 
   side: 'right',
 
   isExpanded: false,
 
-  isRight: Ember.computed.equal('side', 'right'),
+  isRight: equal('side', 'right'),
 
   classNames: 'sidebar-toggle',
 

app/components/view-item.js

@@ -1,7 +1,8 @@
-import Ember from "ember";
+import { computed } from '@ember/object';
+import Component from '@ember/component';
+import { htmlSafe } from '@ember/string';
 import RowEventsMixin from 'ember-inspector/mixins/row-events';
-const { computed, Component, String: { htmlSafe } } = Ember;
-const { not, bool, equal } = computed;
+import { not, bool, equal } from '@ember/object/computed';
 
 export default Component.extend(RowEventsMixin, {
   /**

app/components/x-app.js

@@ -1,5 +1,5 @@
-import Ember from 'ember';
-const { Component, computed: { not } } = Ember;
+import Component from '@ember/component';
+import { not } from '@ember/object/computed';
 export default Component.extend({
   classNames: ['app'],
 

app/components/x-list-cell.js

@@ -14,8 +14,10 @@
  * {{/xlist}}
  * ```
  */
-import Ember from 'ember';
-const { Component, computed, String: { htmlSafe } } = Ember;
+import Component from '@ember/component';
+
+import { computed } from '@ember/object';
+import { htmlSafe } from '@ember/string';
 export default Component.extend({
   /**
    * Defaults to a table cell. For headers

app/components/x-list-content.js

@@ -1,8 +1,9 @@
-import Ember from 'ember';
-
-const { Component, computed, String: { htmlSafe }, Evented, run, Object: EmberObject, inject } = Ember;
-const { schedule } = run;
-const { service } = inject;
+import Component from '@ember/component';
+import { htmlSafe } from '@ember/string';
+import Evented from '@ember/object/evented';
+import EmberObject, { computed } from '@ember/object';
+import { run, schedule } from '@ember/runloop';
+import { inject as service } from '@ember/service';
 
 /**
  * Base list view config