Misc Component Cleanup (#1044)

* <DraggableColumn> `</>, this, @, etc.` * <DragHandle> `</>, this, @, etc.` * Install element-modifiers * <ResizableColumn> `</>, this, @, etc.` * Move DraggableColumn components under Ui * Remove #setWidth from Ui::ResizableColumn This seems to be covering an edge case that no longer exists * <MainContent> `</>, this, @, etc.` * Remove {{x-app}} * Remove isDragging from application controller isDragging was used to keep the col-resize cursor active * Rename component MainContent to MonitorContentHeight
emberjs · Oct 1, 2019 · 1044293 · 1044293
1 parent 7458d7b
commit 1044293
Show file tree

Hide file tree

Showing 34 changed files with 241 additions and 248 deletions.
diff --git a/app/components/main-content.js → app/components/monitor-content-height.js b/app/components/main-content.js → app/components/monitor-content-height.js
@@ -1,10 +1,12 @@
 import Component from '@ember/component';
-import { schedule } from '@ember/runloop';
+import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 import { task, timeout } from 'ember-concurrency';
 
 // Currently used to determine the height of list-views
 export default Component.extend({
+  tagName: '',
+
   /**
    * Layout service. We inject it to keep its `contentHeight` property
    * up-to-date.
@@ -14,15 +16,29 @@ export default Component.extend({
    */
   layoutService: service('layout'),
 
-  didInsertElement() {
+  /**
+   * Reference to drag-handle on mousedown
+   *
+   * @property el
+   * @type {DOMNode|null}
+   * @default null
+   */
+  el: null,
+
+  setupListeners: action(function(element) {
+    this.el = element;
+
     this._performUpdateHeight = () => {
       this.updateHeightDebounce.perform();
     };
 
     window.addEventListener('resize', this._performUpdateHeight);
-    schedule('afterRender', this, this.updateHeight);
-    return this._super(...arguments);
-  },
+    this.updateHeight();
+  }),
+
+  destroyListeners: action(function() {
+    window.removeEventListener('resize', this._performUpdateHeight);
+  }),
 
   /**
    * Restartable Ember Concurrency task that triggers
@@ -48,11 +64,6 @@ export default Component.extend({
    * @method updateHeight
    */
   updateHeight() {
-    this.layoutService.updateContentHeight(this.element.clientHeight);
+    this.layoutService.updateContentHeight(this.el.clientHeight);
   },
-
-  willDestroyElement() {
-    window.removeEventListener('resize', this._performUpdateHeight);
-    return this._super(...arguments);
-  }
 });
diff --git a/app/components/x-app.js b/app/components/x-app.js
diff --git a/app/controllers/application.js b/app/controllers/application.js
@@ -74,6 +74,10 @@ export default Controller.extend({
     });
   }),
 
+  setActive: action(function(bool) {
+    this.set('active', bool);
+  }),
+
   /*
    * Called when inspecting an object from outside of the ObjectInspector
   */
@@ -106,10 +110,4 @@ export default Controller.extend({
     }
 
   },
-
-  actions: {
-    setIsDragging(isDragging) {
-      this.set('isDragging', isDragging);
-    },
-  }
 });
diff --git a/app/controllers/container-types.js b/app/controllers/container-types.js
@@ -1,9 +1,7 @@
-import Controller, { inject as controller } from '@ember/controller';
+import Controller from '@ember/controller';
 import { sort } from '@ember/object/computed';
 
 export default Controller.extend({
-  application: controller(),
-
   sorted: sort('model', 'sortProperties'),
 
   init() {

diff --git a/app/controllers/info.js b/app/controllers/info.js
@@ -1,5 +1,5 @@
-import Controller, { inject as controller } from '@ember/controller';
+import Controller from '@ember/controller';
 
 export default Controller.extend({
-  application: controller()
+  navWidth: 180,
 });
diff --git a/app/controllers/model-types.js b/app/controllers/model-types.js
@@ -1,4 +1,4 @@
-import Controller, { inject as controller } from '@ember/controller';
+import Controller from '@ember/controller';
 import { get, computed } from '@ember/object';
 import LocalStorageService from 'ember-inspector/services/storage/local';
 import { sort } from '@ember/object/computed';
@@ -9,7 +9,6 @@ import {
 } from 'ember-inspector/utils/local-storage-keys';
 
 export default Controller.extend({
-  application: controller(),
   navWidth: 180,
   storage: service(`storage/${LocalStorageService.STORAGE_TYPE_TO_USE}`),
 

diff --git a/app/controllers/promise-tree.js b/app/controllers/promise-tree.js
@@ -1,12 +1,10 @@
 import { action, observer } from '@ember/object';
-import Controller, { inject as controller } from '@ember/controller';
+import Controller from '@ember/controller';
 import { isEmpty } from '@ember/utils';
 import { equal, bool, and, not, filter } from '@ember/object/computed';
 import { debounce, next, once } from '@ember/runloop';
 
 export default Controller.extend({
-  application: controller(),
-
   queryParams: ['filter'],
 
   createdAfter: null,

diff --git a/app/controllers/render-tree.js b/app/controllers/render-tree.js
@@ -1,14 +1,13 @@
 import { action, computed, get } from '@ember/object';
 import { isEmpty } from '@ember/utils';
-import Controller, { inject as controller } from '@ember/controller';
+import Controller from '@ember/controller';
 import { inject as service } from '@ember/service';
 import escapeRegExp from "ember-inspector/utils/escape-reg-exp";
 import debounceComputed from "ember-inspector/computed/debounce";
 import LocalStorageService from "ember-inspector/services/storage/local";
 import { and, equal } from '@ember/object/computed';
 
 export default Controller.extend({
-  application: controller(),
   initialEmpty: false,
   modelEmpty: equal('model.length', 0),
   showEmpty: and('initialEmpty', 'modelEmpty'),

diff --git a/app/services/layout.js b/app/services/layout.js
@@ -16,15 +16,15 @@ import Evented from '@ember/object/evented';
 export default Service.extend(Evented, {
   /**
    * Stores the app's content height. This property is kept up-to-date
-   * by the `main-content` component.
+   * by the `monitor-content-height` component.
    *
    * @property contentHeight
    * @type {Number}
    */
   contentHeight: null,
 
   /**
-   * This is called by `main-content` whenever a window resize is detected
+   * This is called by `monitor-content-height` whenever a window resize is detected
    * and the app's content height has changed. We therefore update the
    * `contentHeight` property and notify all listeners (mostly lists).
    *

diff --git a/app/styles/app.scss b/app/styles/app.scss
@@ -18,10 +18,6 @@
   z-index: 0;
 }
 
-.app.is-dragging {
-  cursor: col-resize;
-}
-
 @import "base";
 @import "colors";
 @import "utils";

diff --git a/app/templates/application.hbs b/app/templates/application.hbs
@@ -1,84 +1,80 @@
-<div class="ember-view">
-  {{#x-app
-    active=this.active
-    isDragging=this.isDragging
-  }}
-    {{#if isEmberApplication}}
-      <div class="split">
-        <div class="split__panel">
-          {{!-- Begin main --}}
-          <div class="split split--main">
-            {{#draggable-column
-              width=this.navWidth
-              classes="split__panel split__panel--sidebar-1"
-              setIsDragging=(action "setIsDragging")
-            }}
-              <div class="split__panel__hd">
-                {{app-picker}}
-              </div>
-              <div class="split__panel__bd">
-                <SideNav @deprecationCount={{this.deprecationCount}} />
-              </div>
-              <div class="split__panel__ft">
-                <a target="_blank" href="https://github.com/emberjs/ember-inspector/issues">
-                  Submit an Issue
-                </a>
-              </div>
-            {{/draggable-column}}
-
-            <div class="split__panel">
-              <div class="split__panel__hd">
-                {{outlet "toolbar"}}
-                <button
-                  class="sidebar-toggle toolbar__icon-button {{if this.inspectorExpanded "flip"}}"
-                  {{on "click" this.toggleInspector}}
-                >
-                  {{svg-jar "sidebar-toggle" width="16" height="16"}}
-                </button>
-              </div>
+<div
+  class="ember-view app {{if this.active "" "inactive"}}"
+  tabindex="1"
+  {{on "focusin" (fn this.setActive true)}}
+  {{on "focusout" (fn this.setActive false)}}
+>
+  {{#if this.isEmberApplication}}
+    <div class="split">
+      <div class="split__panel">
+        <div class="split split--main">
+          <Ui::DraggableColumn
+            @classes="split__panel split__panel--sidebar-1"
+            @side="left"
+            @width={{this.navWidth}}
+          >
+            <div class="split__panel__hd">
+              {{app-picker}}
+            </div>
+            <div class="split__panel__bd">
+              <SideNav @deprecationCount={{this.deprecationCount}} />
+            </div>
+            <div class="split__panel__ft">
+              <a target="_blank" href="https://github.com/emberjs/ember-inspector/issues">
+                Submit an Issue
+              </a>
+            </div>
+          </Ui::DraggableColumn>
 
-              {{#main-content class="split__panel__bd"}}
-                {{outlet}}
-              {{/main-content}}
+          <div class="split__panel">
+            <div class="split__panel__hd">
+              {{outlet "toolbar"}}
+              <button
+                class="sidebar-toggle toolbar__icon-button {{if this.inspectorExpanded "flip"}}"
+                {{on "click" this.toggleInspector}}
+              >
+                {{svg-jar "sidebar-toggle" width="16" height="16"}}
+              </button>
             </div>
-          </div>
 
-          {{!-- End main --}}
+            <MonitorContentHeight class="split__panel__bd">
+              {{outlet}}
+            </MonitorContentHeight>
+          </div>
         </div>
-
-        {{#if this.inspectorExpanded}}
-          {{#draggable-column
-            side="right"
-            width=this.inspectorWidth
-            classes="split__panel"
-            setIsDragging=(action "setIsDragging")
-          }}
-            <ObjectInspector
-              @popMixinDetails={{this.popMixinDetails}}
-              @model={{this.mixinStack}}
-              @mixinDetails={{this.mixinDetails}}
-            />
-          {{/draggable-column}}
-        {{/if}}
       </div>
-    {{else}}
-      <Ui::ErrorPage @description="Ember application not detected!">
-        <ul>
-          <li>This is not an Ember application.</li>
-          <li>You are using an old version of Ember (&lt; rc5).</li>
-          {{#if this.isChrome}}
-            <li>
-              You are using the file:// protocol (instead of http://), in which case:
 
-              <ul>
-                <li>Visit the URL: chrome://extensions.</li>
-                <li>Find the Ember Inspector.</li>
-                <li>Make sure "Allow access to file URLs" is checked.</li>
-              </ul>
-            </li>
-          {{/if}}
-        </ul>
-      </Ui::ErrorPage>
-    {{/if}}
-  {{/x-app}}
+      {{#if this.inspectorExpanded}}
+        <Ui::DraggableColumn
+          @classes="split__panel"
+          @side="right"
+          @width={{this.inspectorWidth}}
+        >
+          <ObjectInspector
+            @popMixinDetails={{this.popMixinDetails}}
+            @model={{this.mixinStack}}
+            @mixinDetails={{this.mixinDetails}}
+          />
+        </Ui::DraggableColumn>
+      {{/if}}
+    </div>
+  {{else}}
+    <Ui::ErrorPage @description="Ember application not detected!">
+      <ul>
+        <li>This is not an Ember application.</li>
+        <li>You are using an old version of Ember (&lt; rc5).</li>
+        {{#if this.isChrome}}
+          <li>
+            You are using the file:// protocol (instead of http://), in which case:
+
+            <ul>
+              <li>Visit the URL: chrome://extensions.</li>
+              <li>Find the Ember Inspector.</li>
+              <li>Make sure "Allow access to file URLs" is checked.</li>
+            </ul>
+          </li>
+        {{/if}}
+      </ul>
+    </Ui::ErrorPage>
+  {{/if}}
 </div>
diff --git a/app/templates/components/drag-handle.hbs b/app/templates/components/drag-handle.hbs
diff --git a/app/templates/components/draggable-column.hbs b/app/templates/components/draggable-column.hbs