Add kiosk settings

custom_components/browser_mod/browser_mod.js

@@ -242,6 +242,42 @@ __decorate([
         customElements.define("browser-player", BrowserPlayer);
 })();
 
+const TIMEOUT_ERROR = "SELECTTREE-TIMEOUT";
+async function _await_el(el) {
+    var _a;
+    if ((_a = el.localName) === null || _a === void 0 ? void 0 : _a.includes("-"))
+        await customElements.whenDefined(el.localName);
+    if (el.updateComplete)
+        await el.updateComplete;
+}
+async function _selectTree(root, path, all = false) {
+    let el = [root];
+    if (typeof path === "string") {
+        path = path.split(/(\$| )/);
+    }
+    while (path[path.length - 1] === "")
+        path.pop();
+    for (const [i, p] of path.entries()) {
+        const e = el[0];
+        if (!e)
+            return null;
+        if (!p.trim().length)
+            continue;
+        _await_el(e);
+        el = p === "$" ? [e.shadowRoot] : e.querySelectorAll(p);
+    }
+    return all ? el : el[0];
+}
+async function selectTree(root, path, all = false, timeout = 10000) {
+    return Promise.race([
+        _selectTree(root, path, all),
+        new Promise((_, reject) => setTimeout(() => reject(new Error(TIMEOUT_ERROR)), timeout)),
+    ]).catch((err) => {
+        if (!err.message || err.message !== TIMEOUT_ERROR)
+            throw err;
+        return null;
+    });
+}
 async function hass_base_el() {
     await Promise.race([
         customElements.whenDefined("home-assistant"),
@@ -1838,6 +1874,20 @@ const AutoSettingsMixin = (SuperClass) => {
             if (settings.sidebarHiddenPanels) {
                 localStorage.setItem("sidebarHiddenPanels", settings.sidebarHiddenPanels);
             }
+            if (settings.hideSidebar === true) {
+                selectTree(document.body, "home-assistant$home-assistant-main$app-drawer-layout").then((el) => el.style.setProperty("--app-drawer-width", "0px"));
+                selectTree(document.body, "home-assistant$home-assistant-main$app-drawer-layout app-drawer").then((el) => el.remove());
+            }
+            if (settings.hideHeader === true) {
+                customElements.whenDefined("app-header-layout").then(() => {
+                    const appHeader = customElements.get("app-header").prototype;
+                    const _attached = appHeader.attached;
+                    appHeader.attached = function () {
+                        _attached.bind(this)();
+                        this.style.setProperty("display", "none");
+                    };
+                });
+            }
         }
     };
 };
@@ -1878,7 +1928,7 @@ const AutoSettingsMixin = (SuperClass) => {
   - Saved frontend settings
     X Framework
     x Save sidebar
-    - Kiosk mode
+    x Kiosk mode
     - Default panel?
     - Screensaver?
   - Tweaks

custom_components/browser_mod/browser_mod_panel.js

@@ -69,8 +69,6 @@ const i=(i,e)=>"method"===e.kind&&e.descriptor&&!("value"in e.descriptor)?{...e,
 // Also provides ha-settings-row
 const loadDevTools = async () => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-    if (customElements.get("ha-config-dashboard"))
-        return;
     await customElements.whenDefined("partial-panel-resolver");
     const ppResolver = document.createElement("partial-panel-resolver");
     const routes = ppResolver.getRoutes([
@@ -101,7 +99,7 @@ class BrowserModSettingsCard extends s {
     render() {
         const level = ["browser", "user", "global"][this._selectedTab];
         return $ `
-      <ha-card header="Auto settings" outlined>
+      <ha-card header="Frontend settings" outlined>
         <div class="card-content">
           <mwc-tab-bar
             .activeIndex=${this._selectedTab}
@@ -132,23 +130,48 @@ class BrowserModSettingsCard extends s {
         };
         return $ `
       <ha-settings-row>
-        <span slot="heading">Kiosk mode</span>
+        <span slot="heading">Hide Sidebar</span>
-        <span slot="description"> Hide sidebar and header </span>
+        <span slot="description">Hide the sidebar and hamburger menu</span>
-        Currenty: ${DESC_BOOLEAN(current.kiosk)} ${OVERRIDDEN("kiosk")}
+        Currenty: ${DESC_BOOLEAN(current.hideSidebar)}
+        ${OVERRIDDEN("hideSidebar")}
       </ha-settings-row>
       <ha-settings-row>
         <mwc-button
-          @click=${() => window.browser_mod.set_setting("kiosk", true, level)}
+          @click=${() => window.browser_mod.set_setting("hideSidebar", true, level)}
         >
           Enable
         </mwc-button>
         <mwc-button
-          @click=${() => window.browser_mod.set_setting("kiosk", false, level)}
+          @click=${() => window.browser_mod.set_setting("hideSidebar", false, level)}
         >
           Disable
         </mwc-button>
         <mwc-button
-          @click=${() => window.browser_mod.set_setting("kiosk", undefined, level)}
+          @click=${() => window.browser_mod.set_setting("hideSidebar", undefined, level)}
+        >
+          Clear
+        </mwc-button>
+      </ha-settings-row>
+
+      <ha-settings-row>
+        <span slot="heading">Hide Header</span>
+        <span slot="description">Hide the header on all pages</span>
+        Currenty: ${DESC_BOOLEAN(current.hideHeader)}
+        ${OVERRIDDEN("hideHeader")}
+      </ha-settings-row>
+      <ha-settings-row>
+        <mwc-button
+          @click=${() => window.browser_mod.set_setting("hideHeader", true, level)}
+        >
+          Enable
+        </mwc-button>
+        <mwc-button
+          @click=${() => window.browser_mod.set_setting("hideHeader", false, level)}
+        >
+          Disable
+        </mwc-button>
+        <mwc-button
+          @click=${() => window.browser_mod.set_setting("hideHeader", undefined, level)}
         >
           Clear
         </mwc-button>
@@ -508,34 +531,18 @@ loadDevTools().then(() => {
             --app-header-border-bottom: 1px solid var(--divider-color);
             --ha-card-border-radius: var(--ha-config-card-border-radius, 8px);
           }
+          ha-config-section {
+            padding: 16px 0;
+          }
           .card-header {
             display: flex;
             justify-content: space-between;
           }
-          .card-actions {
-            display: flex;
-          }
-          .spacer {
-            flex-grow: 1;
-          }
           ha-textfield {
             width: 250px;
             display: block;
             margin-top: 8px;
           }
-          .option {
-            display: flex;
-            margin-top: 16px;
-          }
-          .option h3 {
-            flex-grow: 1;
-            margin: 0;
-          }
-          .option ha-switch {
-            margin-top: 0.25em;
-            margin-right: 7px;
-            margin-left: 0.5em;
-          }
           ha-icon-button > * {
             display: flex;
           }

custom_components/browser_mod/connection.py

@@ -1,5 +1,4 @@
 import logging
-from typing import Any
 import voluptuous as vol
 from datetime import datetime, timezone
 

custom_components/browser_mod/store.py

@@ -11,7 +11,8 @@ _LOGGER = logging.getLogger(__name__)
 
 @attr.s
 class Settings:
-    kiosk = attr.ib(type=bool, default=None)
+    hideSidebar = attr.ib(type=bool, default=None)
+    hideHeader = attr.ib(type=bool, default=None)
     defaultPanel = attr.ib(type=str, default=None)
     sidebarPanelOrder = attr.ib(type=list, default=None)
     sidebarHiddenPanels = attr.ib(type=list, default=None)

js/config_panel/main.ts

@@ -313,34 +313,18 @@ loadDevTools().then(() => {
             --app-header-border-bottom: 1px solid var(--divider-color);
             --ha-card-border-radius: var(--ha-config-card-border-radius, 8px);
           }
+          ha-config-section {
+            padding: 16px 0;
+          }
           .card-header {
             display: flex;
             justify-content: space-between;
           }
-          .card-actions {
-            display: flex;
-          }
-          .spacer {
-            flex-grow: 1;
-          }
           ha-textfield {
             width: 250px;
             display: block;
             margin-top: 8px;
           }
-          .option {
-            display: flex;
-            margin-top: 16px;
-          }
-          .option h3 {
-            flex-grow: 1;
-            margin: 0;
-          }
-          .option ha-switch {
-            margin-top: 0.25em;
-            margin-right: 7px;
-            margin-left: 0.5em;
-          }
           ha-icon-button > * {
             display: flex;
           }

js/config_panel/settings-card.ts

@@ -19,7 +19,7 @@ class BrowserModSettingsCard extends LitElement {
   render() {
     const level = ["browser", "user", "global"][this._selectedTab];
     return html`
-      <ha-card header="Auto settings" outlined>
+      <ha-card header="Frontend settings" outlined>
         <div class="card-content">
           <mwc-tab-bar
             .activeIndex=${this._selectedTab}
@@ -54,24 +54,54 @@ class BrowserModSettingsCard extends LitElement {
 
     return html`
       <ha-settings-row>
-        <span slot="heading">Kiosk mode</span>
+        <span slot="heading">Hide Sidebar</span>
-        <span slot="description"> Hide sidebar and header </span>
+        <span slot="description">Hide the sidebar and hamburger menu</span>
-        Currenty: ${DESC_BOOLEAN(current.kiosk)} ${OVERRIDDEN("kiosk")}
+        Currenty: ${DESC_BOOLEAN(current.hideSidebar)}
+        ${OVERRIDDEN("hideSidebar")}
       </ha-settings-row>
       <ha-settings-row>
         <mwc-button
-          @click=${() => window.browser_mod.set_setting("kiosk", true, level)}
+          @click=${() =>
+            window.browser_mod.set_setting("hideSidebar", true, level)}
         >
           Enable
         </mwc-button>
         <mwc-button
-          @click=${() => window.browser_mod.set_setting("kiosk", false, level)}
+          @click=${() =>
+            window.browser_mod.set_setting("hideSidebar", false, level)}
         >
           Disable
         </mwc-button>
         <mwc-button
           @click=${() =>
-            window.browser_mod.set_setting("kiosk", undefined, level)}
+            window.browser_mod.set_setting("hideSidebar", undefined, level)}
+        >
+          Clear
+        </mwc-button>
+      </ha-settings-row>
+
+      <ha-settings-row>
+        <span slot="heading">Hide Header</span>
+        <span slot="description">Hide the header on all pages</span>
+        Currenty: ${DESC_BOOLEAN(current.hideHeader)}
+        ${OVERRIDDEN("hideHeader")}
+      </ha-settings-row>
+      <ha-settings-row>
+        <mwc-button
+          @click=${() =>
+            window.browser_mod.set_setting("hideHeader", true, level)}
+        >
+          Enable
+        </mwc-button>
+        <mwc-button
+          @click=${() =>
+            window.browser_mod.set_setting("hideHeader", false, level)}
+        >
+          Disable
+        </mwc-button>
+        <mwc-button
+          @click=${() =>
+            window.browser_mod.set_setting("hideHeader", undefined, level)}
         >
           Clear
         </mwc-button>

js/helpers.ts

@@ -89,8 +89,6 @@ export const loadHaForm = async () => {
 // Loads in ha-config-dashboard which is used to copy styling
 // Also provides ha-settings-row
 export const loadDevTools = async () => {
-  if (customElements.get("ha-config-dashboard")) return;
-
   await customElements.whenDefined("partial-panel-resolver");
   const ppResolver = document.createElement("partial-panel-resolver");
   const routes = (ppResolver as any).getRoutes([

js/plugin/auto-settings.ts

@@ -1,3 +1,5 @@
+import { selectTree } from "../helpers";
+
 export const AutoSettingsMixin = (SuperClass) => {
   return class AutoSettingsMixinClass extends SuperClass {
     constructor() {
@@ -20,6 +22,27 @@ export const AutoSettingsMixin = (SuperClass) => {
           settings.sidebarHiddenPanels
         );
       }
+
+      if (settings.hideSidebar === true) {
+        selectTree(
+          document.body,
+          "home-assistant$home-assistant-main$app-drawer-layout"
+        ).then((el) => el.style.setProperty("--app-drawer-width", "0px"));
+        selectTree(
+          document.body,
+          "home-assistant$home-assistant-main$app-drawer-layout app-drawer"
+        ).then((el) => el.remove());
+      }
+      if (settings.hideHeader === true) {
+        customElements.whenDefined("app-header-layout").then(() => {
+          const appHeader = customElements.get("app-header").prototype;
+          const _attached = appHeader.attached;
+          appHeader.attached = function () {
+            _attached.bind(this)();
+            this.style.setProperty("display", "none");
+          };
+        });
+      }
     }
   };
 };

js/plugin/main.ts

@@ -52,7 +52,7 @@ import { AutoSettingsMixin } from "./auto-settings";
   - Saved frontend settings
     X Framework
     x Save sidebar
-    - Kiosk mode
+    x Kiosk mode
     - Default panel?
     - Screensaver?
   - Tweaks