Open and Close

src/layouts/home-assistant-main.ts

@@ -18,6 +18,7 @@ import { toggleAttribute } from "../common/dom/toggle_attribute";
 import { showNotificationDrawer } from "../dialogs/notifications/show-notification-drawer";
 import type { HomeAssistant, Route } from "../types";
 import "./partial-panel-resolver";
+import "../panels/developer-tools/ha-panel-developer-tools";
 
 const NON_SWIPABLE_PANELS = ["map"];
 
@@ -45,6 +46,8 @@ export class HomeAssistantMain extends LitElement {
 
   @property({ type: Boolean }) public narrow!: boolean;
 
+  @property({ type: Boolean }) public showDevToolsDrawer?: boolean;
+
   @state() private _sidebarEditMode = false;
 
   @state() private _externalSidebar = false;
@@ -80,7 +83,7 @@ export class HomeAssistantMain extends LitElement {
         responsive-width="0"
       >
         <app-drawer
-          id="drawer"
+          id="sidebarDrawer"
           align="start"
           slot="drawer"
           .disableSwipe=${disableSwipe}
@@ -98,6 +101,18 @@ export class HomeAssistantMain extends LitElement {
           ></ha-sidebar>
         </app-drawer>
 
+        <app-drawer
+          id="devToolsDrawer"
+          align="end"
+          slot="drawer"
+          .disableSwipe=${true}
+          .swipeOpen=${false}
+          .persistent=${true}
+          .opened=${this.showDevToolsDrawer}
+        >
+          <div>test</div>
+        </app-drawer>
+
         <partial-panel-resolver
           .narrow=${this.narrow}
           .hass=${hass}
@@ -125,7 +140,7 @@ export class HomeAssistantMain extends LitElement {
 
         if (this._sidebarEditMode) {
           if (this._sidebarNarrow) {
-            this.drawer.open();
+            this.sidebarDrawer.open();
           } else {
             fireEvent(this, "hass-dock-sidebar", {
               dock: "docked",
@@ -147,10 +162,10 @@ export class HomeAssistantMain extends LitElement {
         return;
       }
       if (this._sidebarNarrow) {
-        if (this.drawer.opened) {
-          this.drawer.close();
+        if (this.sidebarDrawer.opened) {
+          this.sidebarDrawer.close();
         } else {
-          this.drawer.open();
+          this.sidebarDrawer.open();
         }
       } else {
         fireEvent(this, "hass-dock-sidebar", {
@@ -177,14 +192,14 @@ export class HomeAssistantMain extends LitElement {
     );
 
     if (changedProps.has("route") && this._sidebarNarrow) {
-      this.drawer.close();
+      this.sidebarDrawer.close();
     }
 
     const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
 
     // Make app-drawer adjust to a potential LTR/RTL change
     if (oldHass && oldHass.language !== this.hass!.language) {
-      this.drawer._resetPosition();
+      this.sidebarDrawer._resetPosition();
     }
   }
 
@@ -192,8 +207,8 @@ export class HomeAssistantMain extends LitElement {
     return this.narrow || this.hass.dockedSidebar === "always_hidden";
   }
 
-  private get drawer(): AppDrawerElement {
-    return this.shadowRoot!.querySelector("app-drawer")!;
+  private get sidebarDrawer(): AppDrawerElement {
+    return this.shadowRoot!.querySelector("#sidebarDrawer")!;
   }
 
   private get appLayout(): AppDrawerLayoutElement {

src/layouts/home-assistant.ts

@@ -5,7 +5,7 @@ import { navigate } from "../common/navigate";
 import { getStorageDefaultPanelUrlPath } from "../data/panel";
 import "../resources/custom-card-support";
 import { HassElement } from "../state/hass-element";
-import QuickBarMixin from "../state/quick-bar-mixin";
+import ShortcutsMixin from "../state/shortcuts-mixin";
 import { HomeAssistant, Route } from "../types";
 import { storeState } from "../util/ha-pref-storage";
 import {
@@ -29,7 +29,7 @@ const panelUrl = (path: string) => {
 };
 
 @customElement("home-assistant")
-export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
+export class HomeAssistantAppEl extends ShortcutsMixin(HassElement) {
   @state() private _route: Route;
 
   private _panelUrl: string;
@@ -85,6 +85,16 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
       storeState(this.hass!);
     });
 
+    this.addEventListener("dev-tools-toggle", () => {
+      const main = this.shadowRoot?.querySelector("home-assistant-main");
+
+      if (!main) {
+        return;
+      }
+
+      main.showDevToolsDrawer = !main.showDevToolsDrawer;
+    });
+
     // Navigation
     const updateRoute = (path = curPath()) => {
       if (this._route && path === this._route.path) {

src/state/shortcuts-mixin.ts

@@ -1,5 +1,6 @@
 import type { PropertyValues } from "lit";
 import tinykeys from "tinykeys";
+import { fireEvent } from "../common/dom/fire_event";
 import {
   QuickBarParams,
   showQuickBar,
@@ -12,6 +13,7 @@ declare global {
   interface HASSDomEvents {
     "hass-quick-bar": QuickBarParams;
     "hass-enable-shortcuts": HomeAssistant["enableShortcuts"];
+    "dev-tools-toggle": never;
   }
 }
 
@@ -32,6 +34,7 @@ export default <T extends Constructor<HassElement>>(superClass: T) =>
       tinykeys(window, {
         e: (ev) => this._showQuickBar(ev),
         c: (ev) => this._showQuickBar(ev, true),
+        d: () => this._toggleDeveloperToolsSidebar(),
       });
     }
 
@@ -51,6 +54,13 @@ export default <T extends Constructor<HassElement>>(superClass: T) =>
       );
     }
 
+    private _toggleDeveloperToolsSidebar(): void {
+      localStorage.showDeveloperTools =
+        localStorage.showDeveloperTools !== "true";
+      fireEvent(this, "dev-tools-toggle");
+      this.requestUpdate();
+    }
+
     private _canOverrideAlphanumericInput(e: KeyboardEvent) {
       const el = e.composedPath()[0] as any;