Add loaded components popup to dev-info (#1666)

* Add loaded components popup to dev-info

* Change dialog handling

src/panels/dev-info/ha-loaded-components.js

@@ -0,0 +1,59 @@
+import '@polymer/paper-dialog-scrollable/paper-dialog-scrollable.js';
+import '@polymer/paper-dialog/paper-dialog.js';
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
+import { PolymerElement } from '@polymer/polymer/polymer-element.js';
+
+import '../../resources/ha-style.js';
+
+import EventsMixin from '../../mixins/events-mixin.js';
+
+/*
+ * @appliesMixin EventsMixin
+ */
+class HaLoadedComponents extends EventsMixin(PolymerElement) {
+  static get template() {
+    return html`
+    <style include="ha-style-dialog">
+      paper-dialog {
+        max-width: 500px;
+      }
+    </style>
+    <paper-dialog id="dialog" with-backdrop="" opened="{{_opened}}">
+      <h2>Loaded Components</h2>
+      <paper-dialog-scrollable id="scrollable">
+       <p>The following components are currently loaded:</p>
+       <ul>
+        <template is='dom-repeat' items='[[_components]]'>
+          <li>[[item]]</li>
+        </template>
+       </ul>
+      </paper-dialog-scrollable>
+    </paper-dialog>
+    `;
+  }
+
+  static get properties() {
+    return {
+      _hass: Object,
+      _components: Array,
+
+      _opened: {
+        type: Boolean,
+        value: false,
+      },
+    };
+  }
+
+  ready() {
+    super.ready();
+  }
+
+  showDialog({ hass }) {
+    this.hass = hass;
+    this._opened = true;
+    this._components = this.hass.config.components.sort();
+    setTimeout(() => this.$.dialog.center(), 0);
+  }
+}
+
+customElements.define('ha-loaded-components', HaLoadedComponents);

src/panels/dev-info/ha-panel-dev-info.js

@@ -17,7 +17,11 @@ import '../../resources/ha-style.js';
 import formatDateTime from '../../common/datetime/format_date_time.js';
 import formatTime from '../../common/datetime/format_time.js';
 
-class HaPanelDevInfo extends PolymerElement {
+import EventsMixin from '../../mixins/events-mixin.js';
+
+let registeredDialog = false;
+
+class HaPanelDevInfo extends EventsMixin(PolymerElement) {
   static get template() {
     return html`
     <style include="iron-positioning ha-style">
@@ -126,6 +130,7 @@ class HaPanelDevInfo extends PolymerElement {
           </p>
           <p>
             Path to configuration.yaml: [[hass.config.config_dir]]
+            <br><a href="#" on-click="_showComponents">[[loadedComponents.length]] Loaded Components</a>
           </p>
           <p class='develop'>
             <a href='https://www.home-assistant.io/developers/credits/' target='_blank'>
@@ -263,6 +268,11 @@ class HaPanelDevInfo extends PolymerElement {
         type: Array,
         value: window.CUSTOM_UI_LIST || [],
       },
+
+      loadedComponents: {
+        type: Array,
+        value: [],
+      }
     };
   }
 
@@ -291,6 +301,17 @@ class HaPanelDevInfo extends PolymerElement {
     super.connectedCallback();
     this.$.scrollable.dialogElement = this.$.showlog;
     this._fetchData();
+    this.loadedComponents = this.hass.config.components;
+
+    if (!registeredDialog) {
+      registeredDialog = true;
+      this.fire('register-dialog', {
+        dialogShowEvent: 'show-loaded-components',
+        dialogTag: 'ha-loaded-components',
+        dialogImport: () => import('./ha-loaded-components.js'),
+      });
+    }
+
     if (!window.CUSTOM_UI_LIST) {
       // Give custom UI an opportunity to load.
       setTimeout(() => {
@@ -351,6 +372,12 @@ class HaPanelDevInfo extends PolymerElement {
     }
     this.$.love.innerText = this._defaultPageText();
   }
+
+  _showComponents() {
+    this.fire('show-loaded-components', {
+      hass: this.hass
+    });
+  }
 }
 
 customElements.define('ha-panel-dev-info', HaPanelDevInfo);