Favicon templates

js/config_panel/main.ts

@@ -1,13 +1,13 @@
 import { LitElement, html, css } from "lit";
 import { property } from "lit/decorators.js";
-import { loadDevTools } from "../helpers";
+import { loadConfigDashboard } from "../helpers";
 import { loadHaForm } from "../helpers";
 
 import "./settings-card";
 
 const bmWindow = window as any;
 
-loadDevTools().then(() => {
+loadConfigDashboard().then(() => {
   class BrowserModPanel extends LitElement {
     @property() hass;
     @property() narrow;

js/config_panel/settings-card.ts

@@ -1,5 +1,8 @@
 import { LitElement, html, css } from "lit";
 import { property, state } from "lit/decorators.js";
+import { loadDeveloperToolsTemplate } from "../helpers";
+
+loadDeveloperToolsTemplate();
 
 class BrowserModSettingsCard extends LitElement {
   @property() hass;
@@ -10,6 +13,9 @@ class BrowserModSettingsCard extends LitElement {
     window.browser_mod.addEventListener("browser-mod-config-update", () =>
       this.requestUpdate()
     );
+    window.browser_mod.addEventListener("browser-mod-favicon-update", () =>
+      this.requestUpdate()
+    );
   }
 
   _handleSwitchTab(ev: CustomEvent) {
@@ -21,12 +27,30 @@ class BrowserModSettingsCard extends LitElement {
     return html`
       <ha-card header="Frontend settings" outlined>
         <div class="card-content">
+          <p>
+            Please note: Those settings severely change the way the Home
+            Assistant frontend works and looks. It is very easy to forget that
+            you made a setting here when you switch devices or user.
+          </p>
+          <p>
+            Do not report any issues to Home Assistant before clearing
+            <b>EVERY</b> setting here and thouroghly clearing all your browser
+            caches. Failure to do so means you risk wasting a lot of peoples
+            time, and you will be severly and rightfully ridiculed.
+          </p>
+          <p>
+          Global settings are applied for all users and browsers.</br>
+          User settings are applied to the current user and overrides any Global settings.</br>
+          Browser settings are applied for the current browser and overrides any User or Global settings.
+          </p>
           <mwc-tab-bar
             .activeIndex=${this._selectedTab}
             @MDCTabBar:activated=${this._handleSwitchTab}
           >
             <mwc-tab .label=${"Browser"}></mwc-tab>
+            <ha-icon .icon=${"mdi:chevron-double-right"}></ha-icon>
             <mwc-tab .label=${"User (" + this.hass.user.name + ")"}></mwc-tab>
+            <ha-icon .icon=${"mdi:chevron-double-right"}></ha-icon>
             <mwc-tab .label=${"Global"}></mwc-tab>
           </mwc-tab-bar>
 
@@ -43,7 +67,7 @@ class BrowserModSettingsCard extends LitElement {
     const current = { global, user, browser }[level];
 
     const DESC_BOOLEAN = (val) =>
-      ({ true: "Enabled", false: "Disabled", undefined: "unset" }[String(val)]);
+      ({ true: "Enabled", false: "Disabled", undefined: "Unset" }[String(val)]);
     const DESC_SET_UNSET = (val) => (val === undefined ? "Unset" : "Set");
     const OVERRIDDEN = (key) => {
       if (level !== "browser" && browser[key] !== undefined)
@@ -53,136 +77,161 @@ class BrowserModSettingsCard extends LitElement {
     };
 
     return html`
-      <ha-settings-row>
-        <span slot="heading">Hide Sidebar</span>
-        <span slot="description">Hide the sidebar and hamburger menu</span>
-        Currenty: ${DESC_BOOLEAN(current.hideSidebar)}
-        ${OVERRIDDEN("hideSidebar")}
-      </ha-settings-row>
-      <ha-settings-row>
-        <mwc-button
-          @click=${() =>
-            window.browser_mod.set_setting("hideSidebar", true, level)}
-        >
-          Enable
-        </mwc-button>
-        <mwc-button
-          @click=${() =>
-            window.browser_mod.set_setting("hideSidebar", false, level)}
-        >
-          Disable
-        </mwc-button>
-        <mwc-button
-          @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>
-      </ha-settings-row>
-
-      <ha-settings-row>
-        <span slot="heading">Sidebar order</span>
-        <span slot="description">Order and visibility of sidebar buttons</span>
-        Currenty: ${DESC_SET_UNSET(current.sidebarPanelOrder)}
-        ${OVERRIDDEN("sidebarPanelOrder")}
-      </ha-settings-row>
-      <ha-settings-row>
-        <mwc-button
-          @click=${() => {
-            window.browser_mod.set_setting(
-              "sidebarPanelOrder",
-              localStorage.getItem("sidebarPanelOrder"),
-              level
-            );
-            window.browser_mod.set_setting(
-              "sidebarHiddenPanels",
-              localStorage.getItem("sidebarHiddenPanels"),
-              level
-            );
+      <div class="box">
+        <ha-settings-row>
+          <span slot="heading">Favicon template</span>
+          ${OVERRIDDEN("faviconTemplate")}
+          <img src="${window.browser_mod._currentFavicon}" class="favicon" />
+        </ha-settings-row>
+        <ha-code-editor
+          .hass=${this.hass}
+          .value=${current.faviconTemplate}
+          @value-changed=${(ev) => {
+            const tpl = ev.detail.value || undefined;
+            window.browser_mod.set_setting("faviconTemplate", tpl, level);
           }}
-        >
-          Set
-        </mwc-button>
-        <mwc-button
-          @click=${() => {
-            window.browser_mod.set_setting(
-              "sidebarPanelOrder",
-              undefined,
-              level
-            );
-            window.browser_mod.set_setting(
-              "sidebarHiddenPanels",
-              undefined,
-              level
-            );
-          }}
-        >
-          Clear
-        </mwc-button>
-      </ha-settings-row>
+        ></ha-code-editor>
+        <ha-settings-row>
+          <mwc-button
+            @click=${() =>
+              window.browser_mod.set_setting(
+                "faviconTemplate",
+                undefined,
+                level
+              )}
+          >
+            Clear
+          </mwc-button>
+        </ha-settings-row>
+
+        <div class="separator"></div>
+
+        <ha-settings-row>
+          <span slot="heading">Hide Sidebar</span>
+          <span slot="description">Hide the sidebar and hamburger menu</span>
+          Currenty: ${DESC_BOOLEAN(current.hideSidebar)}
+          ${OVERRIDDEN("hideSidebar")}
+        </ha-settings-row>
+        <ha-settings-row>
+          <mwc-button
+            @click=${() =>
+              window.browser_mod.set_setting("hideSidebar", true, level)}
+          >
+            Enable
+          </mwc-button>
+          <mwc-button
+            @click=${() =>
+              window.browser_mod.set_setting("hideSidebar", false, level)}
+          >
+            Disable
+          </mwc-button>
+          <mwc-button
+            @click=${() =>
+              window.browser_mod.set_setting("hideSidebar", undefined, level)}
+          >
+            Clear
+          </mwc-button>
+        </ha-settings-row>
+
+        <div class="separator"></div>
+
+        <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>
+        </ha-settings-row>
+
+        <div class="separator"></div>
+
+        <ha-settings-row>
+          <span slot="heading">Sidebar order</span>
+          <span slot="description"
+            >Order and visibility of sidebar buttons</span
+          >
+          Currenty: ${DESC_SET_UNSET(current.sidebarPanelOrder)}
+          ${OVERRIDDEN("sidebarPanelOrder")}
+        </ha-settings-row>
+        <ha-settings-row>
+          <span slot="description">
+            Clearing this does NOT restore the original button order.
+          </span>
+          <mwc-button
+            @click=${() => {
+              window.browser_mod.set_setting(
+                "sidebarPanelOrder",
+                localStorage.getItem("sidebarPanelOrder"),
+                level
+              );
+              window.browser_mod.set_setting(
+                "sidebarHiddenPanels",
+                localStorage.getItem("sidebarHiddenPanels"),
+                level
+              );
+            }}
+          >
+            Set
+          </mwc-button>
+          <mwc-button
+            @click=${() => {
+              window.browser_mod.set_setting(
+                "sidebarPanelOrder",
+                undefined,
+                level
+              );
+              window.browser_mod.set_setting(
+                "sidebarHiddenPanels",
+                undefined,
+                level
+              );
+            }}
+          >
+            Clear
+          </mwc-button>
+        </ha-settings-row>
+      </div>
     `;
   }
 
-  _render_user() {
-    return html`
-      User
-      <ha-settings-row>
-        <span slot="heading">Kiosk mode</span>
-        <span slot="description"> Hide sidebar and header </span>
-        Currenty: Overridden
-      </ha-settings-row>
-      <ha-settings-row>
-        <span slot="heading">Set screensaver</span>
-        <span slot="description"> Set screensaver card </span>
-        <mwc-button>Enable</mwc-button>
-        <mwc-button>Disable</mwc-button>
-        <mwc-button>Clear</mwc-button>
-      </ha-settings-row>
-    `;
-  }
-
-  _render_browser() {
-    return html`
-      Browser
-      <ha-settings-row>
-        <span slot="heading">Kiosk mode</span>
-        <span slot="description"> Hide sidebar and header </span>
-        Currenty: Overridden
-      </ha-settings-row>
-      <ha-settings-row>
-        <span slot="heading">Set screensaver</span>
-        <span slot="description"> Set screensaver card </span>
-        <mwc-button>Enable</mwc-button>
-        <mwc-button>Disable</mwc-button>
-        <mwc-button>Clear</mwc-button>
-      </ha-settings-row>
+  static get styles() {
+    return css`
+      .box {
+        border: 1px solid var(--divider-color);
+        padding: 8px;
+      }
+      .separator {
+        border-bottom: 1px solid var(--divider-color);
+        margin: 0 -8px;
+      }
+      img.favicon {
+        width: 64px;
+        height: 64px;
+        margin-left: 16px;
+      }
+      mwc-tab-bar ha-icon {
+        display: flex;
+        align-items: center;
+      }
     `;
   }
 }

js/helpers.ts

@@ -88,7 +88,7 @@ export const loadHaForm = async () => {
 
 // Loads in ha-config-dashboard which is used to copy styling
 // Also provides ha-settings-row
-export const loadDevTools = async () => {
+export const loadConfigDashboard = async () => {
   await customElements.whenDefined("partial-panel-resolver");
   const ppResolver = document.createElement("partial-panel-resolver");
   const routes = (ppResolver as any).getRoutes([
@@ -99,8 +99,24 @@ export const loadDevTools = async () => {
   ]);
   await routes?.routes?.a?.load?.();
   await customElements.whenDefined("ha-panel-config");
-  const configRouter = document.createElement("ha-panel-config");
-  await (configRouter as any)?.routerOptions?.routes?.dashboard?.load?.(); // Load ha-config-dashboard
-  await (configRouter as any)?.routerOptions?.routes?.cloud?.load?.(); // Load ha-settings-row
+  const configRouter: any = document.createElement("ha-panel-config");
+  await configRouter?.routerOptions?.routes?.dashboard?.load?.(); // Load ha-config-dashboard
+  await configRouter?.routerOptions?.routes?.cloud?.load?.(); // Load ha-settings-row
   await customElements.whenDefined("ha-config-dashboard");
 };
+
+export const loadDeveloperToolsTemplate = async () => {
+  await customElements.whenDefined("partial-panel-resolver");
+  await customElements.whenDefined("partial-panel-resolver");
+  const ppResolver = document.createElement("partial-panel-resolver");
+  const routes = (ppResolver as any).getRoutes([
+    {
+      component_name: "developer-tools",
+      url_path: "a",
+    },
+  ]);
+  await routes?.routes?.a?.load?.();
+  const dtRouter: any = document.createElement("developer-tools-router");
+  await dtRouter?.routerOptions?.routes?.template?.load?.();
+  await customElements.whenDefined("developer-tools-template");
+};

js/plugin/auto-settings.ts

@@ -2,10 +2,16 @@ import { selectTree } from "../helpers";
 
 export const AutoSettingsMixin = (SuperClass) => {
   return class AutoSettingsMixinClass extends SuperClass {
+    _faviconTemplateSubscription;
+    _titleTemplateSubscription;
+
     constructor() {
       super();
 
       this._auto_settings_setup();
+      this.addEventListener("browser-mod-config-update", () =>
+        this._auto_settings_setup()
+      );
     }
 
     async _auto_settings_setup() {
@@ -13,6 +19,7 @@ export const AutoSettingsMixin = (SuperClass) => {
 
       const settings = this.settings;
 
+      // Sidebar panel order and hiding
       if (settings.sidebarPanelOrder) {
         localStorage.setItem("sidebarPanelOrder", settings.sidebarPanelOrder);
       }
@@ -23,6 +30,7 @@ export const AutoSettingsMixin = (SuperClass) => {
         );
       }
 
+      // Hide sidebar
       if (settings.hideSidebar === true) {
         selectTree(
           document.body,
@@ -33,6 +41,8 @@ export const AutoSettingsMixin = (SuperClass) => {
           "home-assistant$home-assistant-main$app-drawer-layout app-drawer"
         ).then((el) => el.remove());
       }
+
+      // Hide header
       if (settings.hideHeader === true) {
         customElements.whenDefined("app-header-layout").then(() => {
           const appHeader = customElements.get("app-header").prototype;
@@ -43,6 +53,45 @@ export const AutoSettingsMixin = (SuperClass) => {
           };
         });
       }
+
+      // Favicon template
+      if (settings.faviconTemplate !== undefined) {
+        (async () => {
+          if (this._faviconTemplateSubscription) {
+            this._faviconTemplateSubscription();
+          }
+          this._faviconTemplateSubscription = undefined;
+          this._faviconTemplateSubscription =
+            await this.connection.subscribeMessage(this._updateFavicon, {
+              type: "render_template",
+              template: settings.faviconTemplate,
+              variables: {},
+            });
+        })();
+      }
+
+      // Title template
+      if (settings.titleTemplate !== undefined) {
+      }
+    }
+
+    get _currentFavicon() {
+      const link: any = document.head.querySelector("link[rel~='icon']");
+      return link?.href;
+    }
+
+    _updateFavicon({ result }) {
+      // TEMP: Template for testing
+      /*
+        {% if is_state("light.bed_light", "on") %}
+        /local/workspace/test/icons/green.png
+        {% else %}
+        /local/workspace/test/icons/red.png
+        {% endif %}
+      */
+      const link: any = document.head.querySelector("link[rel~='icon']");
+      link.href = result;
+      window.browser_mod.fireEvent("browser-mod-favicon-update");
     }
   };
 };

js/plugin/main.ts

@@ -55,9 +55,9 @@ import { AutoSettingsMixin } from "./auto-settings";
     x Kiosk mode
     - Default panel?
     - Screensaver?
-  - Tweaks
-    - Favicon templates
+    x Favicon templates
     - Title templates
+  - Tweaks
     - Quickbar tweaks (ctrl+enter)?
   - Video player?
   - Media_seek