dev tools dialog

src/dialogs/developert-tools/ha-developer-tools-dialog.ts

@@ -0,0 +1,138 @@
+import { mdiClose } from "@mdi/js";
+import "@polymer/paper-tabs";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  PropertyValues,
+  TemplateResult,
+} from "lit";
+import { customElement, property, state, query } from "lit/decorators";
+import { fireEvent } from "../../common/dom/fire_event";
+import { haStyleDialog } from "../../resources/styles";
+import type { HomeAssistant, Route } from "../../types";
+import "../../components/ha-dialog";
+import "../../components/ha-tabs";
+import "../../components/ha-icon-button";
+import "../../panels/developer-tools/developer-tools-router";
+import type { HaDialog } from "../../components/ha-dialog";
+import "@material/mwc-button/mwc-button";
+
+@customElement("ha-developer-tools-dialog")
+export class HaDeveloperToolsDialog extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @state() private _opened = false;
+
+  @state() private _route: Route = {
+    prefix: "/developer-tools",
+    path: "/state",
+  };
+
+  @query("ha-dialog", true) private _dialog!: HaDialog;
+
+  public async showDialog(): Promise<void> {
+    this._opened = true;
+  }
+
+  public async closeDialog(): Promise<void> {
+    this._opened = false;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+  }
+
+  protected render(): TemplateResult {
+    if (!this._opened) {
+      return html``;
+    }
+    return html`
+      <ha-dialog open @closed=${this.closeDialog}>
+        <div class="header">
+          <ha-tabs
+            scrollable
+            attr-for-selected="page-name"
+            .selected=${this._route.path.substr(1)}
+            @iron-activate=${this.handlePageSelected}
+          >
+            <paper-tab page-name="state">
+              ${this.hass.localize(
+                "ui.panel.developer-tools.tabs.states.title"
+              )}
+            </paper-tab>
+            <paper-tab page-name="service">
+              ${this.hass.localize(
+                "ui.panel.developer-tools.tabs.services.title"
+              )}
+            </paper-tab>
+            <paper-tab page-name="template">
+              ${this.hass.localize(
+                "ui.panel.developer-tools.tabs.templates.title"
+              )}
+            </paper-tab>
+            <paper-tab page-name="event">
+              ${this.hass.localize(
+                "ui.panel.developer-tools.tabs.events.title"
+              )}
+            </paper-tab>
+            <paper-tab page-name="statistics">
+              ${this.hass.localize(
+                "ui.panel.developer-tools.tabs.statistics.title"
+              )}
+            </paper-tab>
+          </ha-tabs>
+          <ha-icon-button
+            .path=${mdiClose}
+            @click=${this.closeDialog}
+          ></ha-icon-button>
+        </div>
+        <developer-tools-router
+          .route=${this._route}
+          .narrow=${document.body.clientWidth < 600}
+          .hass=${this.hass}
+        ></developer-tools-router>
+      </ha-dialog>
+    `;
+  }
+
+  protected firstUpdated(changedProps: PropertyValues) {
+    super.updated(changedProps);
+    this.hass.loadBackendTranslation("title");
+    this.hass.loadFragmentTranslation("developer-tools");
+  }
+
+  private handlePageSelected(ev) {
+    const newPage = ev.detail.item.getAttribute("page-name");
+    if (newPage !== this._route.path.substr(1)) {
+      this._route = {
+        prefix: "/developer-tools",
+        path: `/${newPage}`,
+      };
+    } else {
+      // scrollTo(0, 0);
+    }
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyleDialog,
+      css`
+        ha-dialog {
+          --mdc-dialog-min-width: 100vw;
+          --mdc-dialog-min-height: 100vh;
+        }
+        .header {
+          display: flex;
+        }
+        ha-tabs {
+          flex: 1;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-developer-tools-dialog": HaDeveloperToolsDialog;
+  }
+}

src/dialogs/developert-tools/show-dialog-developer-tools.ts

@@ -0,0 +1,12 @@
+import { fireEvent } from "../../common/dom/fire_event";
+
+export const loadDeveloperToolDialog = () =>
+  import("./ha-developer-tools-dialog");
+
+export const showDeveloperToolDialog = (element: HTMLElement): void => {
+  fireEvent(element, "show-dialog", {
+    dialogTag: "ha-developer-tools-dialog",
+    dialogImport: loadDeveloperToolDialog,
+    dialogParams: {},
+  });
+};

src/panels/config/dashboard/ha-config-dashboard.ts

@@ -1,4 +1,4 @@
-import { mdiCloudLock } from "@mdi/js";
+import { mdiCellphoneCog, mdiCloudLock } from "@mdi/js";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import {
@@ -110,10 +110,29 @@ class HaConfigDashboard extends LitElement {
                         ></ha-config-navigation>
                       `
                     : ""}
+                  ${this._externalConfig?.hasSettingsScreen
+                    ? html`
+                        <ha-config-navigation
+                          .hass=${this.hass}
+                          .narrow=${this.narrow}
+                          .showAdvanced=${this.showAdvanced}
+                          .pages=${[
+                            {
+                              path: "#external-app-configuration",
+                              name: "Companion App",
+                              description: "Location and notifications",
+                              iconPath: mdiCellphoneCog,
+                              iconColor: "#37474F",
+                              core: true,
+                            },
+                          ]}
+                          @click=${this._handleExternalAppConfiguration}
+                        ></ha-config-navigation>
+                      `
+                    : ""}
                   <ha-config-navigation
                     .hass=${this.hass}
                     .narrow=${this.narrow}
-                    .externalConfig=${this._externalConfig}
                     .showAdvanced=${this.showAdvanced}
                     .pages=${configSections.dashboard}
                   ></ha-config-navigation>
@@ -123,6 +142,13 @@ class HaConfigDashboard extends LitElement {
     `;
   }
 
+  private _handleExternalAppConfiguration(ev: Event) {
+    ev.preventDefault();
+    this.hass.auth.external!.fireMessage({
+      type: "config_screen/show",
+    });
+  }
+
   static get styles(): CSSResultGroup {
     return [
       haStyle,

src/panels/config/dashboard/ha-config-navigation.ts

@@ -6,7 +6,6 @@ import { canShowPage } from "../../../common/config/can_show_page";
 import "../../../components/ha-card";
 import "../../../components/ha-icon-next";
 import { CloudStatus, CloudStatusLoggedIn } from "../../../data/cloud";
-import { ExternalConfig } from "../../../external_app/external_config";
 import { PageNavigation } from "../../../layouts/hass-tabs-subpage";
 import { HomeAssistant } from "../../../types";
 
@@ -20,16 +19,10 @@ class HaConfigNavigation extends LitElement {
 
   @property() public pages!: PageNavigation[];
 
-  @property() public externalConfig?: ExternalConfig;
-
   protected render(): TemplateResult {
     return html`
       ${this.pages.map((page) =>
-        (
-          page.path === "#external-app-configuration"
-            ? this.externalConfig?.hasSettingsScreen
-            : canShowPage(this.hass, page)
-        )
+        canShowPage(this.hass, page)
           ? html`
               <a href=${page.path} aria-role="option" tabindex="-1">
                 <paper-icon-item @click=${this._entryClicked}>
@@ -84,16 +77,6 @@ class HaConfigNavigation extends LitElement {
 
   private _entryClicked(ev) {
     ev.currentTarget.blur();
-    if (
-      ev.currentTarget.parentElement.href.endsWith(
-        "#external-app-configuration"
-      )
-    ) {
-      ev.preventDefault();
-      this.hass.auth.external!.fireMessage({
-        type: "config_screen/show",
-      });
-    }
   }
 
   static get styles(): CSSResultGroup {

src/panels/config/ha-panel-config.ts

@@ -1,7 +1,6 @@
 import {
   mdiAccount,
   mdiBadgeAccountHorizontal,
-  mdiCellphoneCog,
   mdiCog,
   mdiDevices,
   mdiHomeAssistant,
@@ -112,13 +111,6 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       iconColor: "#E48629",
       components: ["person", "zone", "users"],
     },
-    {
-      path: "#external-app-configuration",
-      name: "Companion App",
-      description: "Location and notifications",
-      iconPath: mdiCellphoneCog,
-      iconColor: "#6A1B9A",
-    },
     {
       path: "/config/core",
       name: "Settings",

src/state/quick-bar-mixin.ts

@@ -1,5 +1,6 @@
 import type { PropertyValues } from "lit";
 import tinykeys from "tinykeys";
+import { showDeveloperToolDialog } from "../dialogs/developert-tools/show-dialog-developer-tools";
 import {
   QuickBarParams,
   showQuickBar,
@@ -32,6 +33,7 @@ export default <T extends Constructor<HassElement>>(superClass: T) =>
       tinykeys(window, {
         e: (ev) => this._showQuickBar(ev),
         c: (ev) => this._showQuickBar(ev, true),
+        d: () => showDeveloperToolDialog(this),
       });
     }