Fix double toolbars on error/loading in dev tools (#6380)

cast/src/launcher/layout/hc-cast.ts

@@ -28,7 +28,7 @@ import {
   getLovelaceCollection,
   LovelaceConfig,
 } from "../../../../src/data/lovelace";
-import "../../../../src/layouts/loading-screen";
+import "../../../../src/layouts/hass-loading-screen";
 import { generateDefaultViewConfig } from "../../../../src/panels/lovelace/common/generate-lovelace-config";
 import "./hc-layout";
 import "@material/mwc-button/mwc-button";
@@ -47,7 +47,7 @@ class HcCast extends LitElement {
 
   protected render(): TemplateResult {
     if (this.lovelaceConfig === undefined) {
-      return html` <loading-screen></loading-screen>> `;
+      return html` <hass-loading-screen no-toolbar></hass-loading-screen>> `;
     }
 
     const error =

cast/src/launcher/layout/hc-connect.ts

@@ -27,7 +27,7 @@ import {
   saveTokens,
 } from "../../../../src/common/auth/token_storage";
 import "../../../../src/components/ha-icon";
-import "../../../../src/layouts/loading-screen";
+import "../../../../src/layouts/hass-loading-screen";
 import { registerServiceWorker } from "../../../../src/util/register-service-worker";
 import "./hc-layout";
 
@@ -98,7 +98,7 @@ export class HcConnect extends LitElement {
     }
 
     if (this.castManager === undefined || this.loading) {
-      return html` <loading-screen></loading-screen> `;
+      return html` <hass-loading-screen no-toolbar></hass-loading-screen> `;
     }
 
     if (this.castManager === null) {

hassio/src/addon-store/hassio-addon-store.ts

@@ -19,7 +19,7 @@ import {
   reloadHassioAddons,
 } from "../../../src/data/hassio/addon";
 import "../../../src/layouts/hass-tabs-subpage";
-import "../../../src/layouts/loading-screen";
+import "../../../src/layouts/hass-loading-screen";
 import { HomeAssistant, Route } from "../../../src/types";
 import { showRepositoriesDialog } from "../dialogs/repositories/show-dialog-repositories";
 import { supervisorTabs } from "../hassio-tabs";
@@ -108,7 +108,7 @@ class HassioAddonStore extends LitElement {
           </mwc-list-item>
         </ha-button-menu>
         ${repos.length === 0
-          ? html`<loading-screen></loading-screen>`
+          ? html`<hass-loading-screen no-toolbar></hass-loading-screen>`
           : html`
               <div class="search">
                 <search-input

hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts

@@ -12,7 +12,7 @@ import {
   fetchHassioAddonDocumentation,
   HassioAddonDetails,
 } from "../../../../src/data/hassio/addon";
-import "../../../../src/layouts/loading-screen";
+import "../../../../src/layouts/hass-loading-screen";
 import "../../../../src/components/ha-circular-progress";
 import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
@@ -44,7 +44,7 @@ class HassioAddonDocumentationDashboard extends LitElement {
           <div class="card-content">
             ${this._content
               ? html`<ha-markdown .content=${this._content}></ha-markdown>`
-              : html`<loading-screen></loading-screen>`}
+              : html`<hass-loading-screen no-toolbar></hass-loading-screen>`}
           </div>
         </ha-card>
       </div>

hassio/src/system/hassio-supervisor-log.ts

@@ -13,7 +13,7 @@ import {
 } from "lit-element";
 import "../../../src/components/ha-card";
 import { fetchHassioLogs } from "../../../src/data/hassio/supervisor";
-import "../../../src/layouts/loading-screen";
+import "../../../src/layouts/hass-loading-screen";
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant } from "../../../src/types";
 import "../components/hassio-ansi-to-html";
@@ -98,7 +98,7 @@ class HassioSupervisorLog extends LitElement {
             ? html`<hassio-ansi-to-html
                 .content=${this._content}
               ></hassio-ansi-to-html>`
-            : html`<loading-screen></loading-screen>`}
+            : html`<hass-loading-screen no-toolbar></hass-loading-screen>`}
         </div>
         <div class="card-actions">
           <mwc-button @click=${this._refresh}>Refresh</mwc-button>

src/layouts/hass-error-screen.ts

@@ -12,29 +12,56 @@ import "./hass-subpage";
 
 @customElement("hass-error-screen")
 class HassErrorScreen extends LitElement {
-  @property()
+  @property({ type: Boolean }) public toolbar = true;
-  public error?: string;
+
+  @property() public error?: string;
 
   protected render(): TemplateResult {
     return html`
-      <hass-subpage>
+      ${this.toolbar
-        <div class="content">
+        ? html`<div class="toolbar">
-          <h3>${this.error}</h3>
+            <ha-icon-button-arrow-prev
-          <slot>
+              @click=${this._handleBack}
-            <mwc-button @click=${this._backTapped}>go back</mwc-button>
+            ></ha-icon-button-arrow-prev>
-          </slot>
+          </div>`
-        </div>
+        : ""}
-      </hass-subpage>
+      <div class="content">
+        <h3>${this.error}</h3>
+        <slot>
+          <mwc-button @click=${this._handleBack}>go back</mwc-button>
+        </slot>
+      </div>
     `;
   }
 
-  private _backTapped(): void {
+  private _handleBack(): void {
     history.back();
   }
 
   static get styles(): CSSResultArray {
     return [
       css`
+        :host {
+          display: block;
+          height: 100%;
+          background-color: var(--primary-background-color);
+        }
+        .toolbar {
+          display: flex;
+          align-items: center;
+          font-size: 20px;
+          height: 65px;
+          padding: 0 16px;
+          pointer-events: none;
+          background-color: var(--app-header-background-color);
+          font-weight: 400;
+          color: var(--app-header-text-color, white);
+          border-bottom: var(--app-header-border-bottom, none);
+          box-sizing: border-box;
+        }
+        ha-icon-button-arrow-prev {
+          pointer-events: auto;
+        }
         .content {
           height: calc(100% - 64px);
           display: flex;

src/layouts/hass-loading-screen.ts

@@ -16,7 +16,10 @@ import { HomeAssistant } from "../types";
 
 @customElement("hass-loading-screen")
 class HassLoadingScreen extends LitElement {
-  @property({ type: Boolean }) public rootnav? = false;
+  @property({ type: Boolean, attribute: "no-toolbar" })
+  public noToolbar = false;
+
+  @property({ type: Boolean }) public rootnav = false;
 
   @property() public hass?: HomeAssistant;
 
@@ -24,20 +27,22 @@ class HassLoadingScreen extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <app-toolbar>
+      ${this.noToolbar
-        ${this.rootnav
+        ? ""
-          ? html`
+        : html`<div class="toolbar">
-              <ha-menu-button
+            ${this.rootnav
-                .hass=${this.hass}
+              ? html`
-                .narrow=${this.narrow}
+                  <ha-menu-button
-              ></ha-menu-button>
+                    .hass=${this.hass}
-            `
+                    .narrow=${this.narrow}
-          : html`
+                  ></ha-menu-button>
-              <ha-icon-button-arrow-prev
+                `
-                @click=${this._handleBack}
+              : html`
-              ></ha-icon-button-arrow-prev>
+                  <ha-icon-button-arrow-prev
-            `}
+                    @click=${this._handleBack}
-      </app-toolbar>
+                  ></ha-icon-button-arrow-prev>
+                `}
+          </div>`}
       <div class="content">
         <ha-circular-progress active></ha-circular-progress>
       </div>
@@ -57,6 +62,23 @@ class HassLoadingScreen extends LitElement {
           height: 100%;
           background-color: var(--primary-background-color);
         }
+        .toolbar {
+          display: flex;
+          align-items: center;
+          font-size: 20px;
+          height: 65px;
+          padding: 0 16px;
+          pointer-events: none;
+          background-color: var(--app-header-background-color);
+          font-weight: 400;
+          color: var(--app-header-text-color, white);
+          border-bottom: var(--app-header-border-bottom, none);
+          box-sizing: border-box;
+        }
+        ha-menu-button,
+        ha-icon-button-arrow-prev {
+          pointer-events: auto;
+        }
         .content {
           height: calc(100% - 64px);
           display: flex;

src/layouts/hass-router-page.ts

@@ -169,9 +169,9 @@ export class HassRouterPage extends UpdatingElement {
       }
 
       // Show error screen
-      const errorEl = document.createElement("hass-error-screen");
+      this.appendChild(
-      errorEl.error = `Error while loading page ${newPage}.`;
+        this.createErrorScreen(`Error while loading page ${newPage}.`)
-      this.appendChild(errorEl);
+      );
     });
 
     // If we don't show loading screen, just show the panel.
@@ -252,6 +252,12 @@ export class HassRouterPage extends UpdatingElement {
     return document.createElement("hass-loading-screen");
   }
 
+  protected createErrorScreen(error: string) {
+    const errorEl = document.createElement("hass-error-screen");
+    errorEl.error = error;
+    return errorEl;
+  }
+
   /**
    * Rebuild the current panel.
    *

src/layouts/hass-subpage.ts

@@ -36,7 +36,7 @@ class HassSubpage extends LitElement {
           class=${classMap({ hidden: !this.showBackButton })}
         ></ha-icon-button-arrow-prev>
 
-        <div main-title>${this.header}</div>
+        <div class="main-title">${this.header}</div>
         <slot name="toolbar-icon"></slot>
       </div>
       <div class="content" @scroll=${this._saveScrollPos}><slot></slot></div>
@@ -74,7 +74,6 @@ class HassSubpage extends LitElement {
         box-sizing: border-box;
       }
 
-      ha-menu-button,
       ha-icon-button-arrow-prev,
       ::slotted([slot="toolbar-icon"]) {
         pointer-events: auto;
@@ -84,7 +83,7 @@ class HassSubpage extends LitElement {
         visibility: hidden;
       }
 
-      [main-title] {
+      .main-title {
         margin: 0 0 0 24px;
         line-height: 20px;
         flex-grow: 1;

src/layouts/loading-screen.ts

@@ -1,33 +0,0 @@
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  TemplateResult,
-} from "lit-element";
-import "../components/ha-circular-progress";
-
-@customElement("loading-screen")
-class LoadingScreen extends LitElement {
-  protected render(): TemplateResult {
-    return html` <ha-circular-progress active></ha-circular-progress> `;
-  }
-
-  static get styles(): CSSResult {
-    return css`
-      :host {
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "loading-screen": LoadingScreen;
-  }
-}

src/panels/developer-tools/developer-tools-router.ts

@@ -40,6 +40,18 @@ class DeveloperToolsRouter extends HassRouterPage {
     },
   };
 
+  protected createLoadingScreen() {
+    const loadingScreen = super.createLoadingScreen();
+    loadingScreen.noToolbar = true;
+    return loadingScreen;
+  }
+
+  protected createErrorScreen(error: string) {
+    const errorEl = super.createErrorScreen(error);
+    errorEl.toolbar = false;
+    return errorEl;
+  }
+
   protected updatePageEl(el) {
     if ("setProperties" in el) {
       // As long as we have Polymer pages

src/panels/developer-tools/ha-panel-developer-tools.ts

@@ -1,6 +1,6 @@
-import "@polymer/app-layout/app-header-layout/app-header-layout";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
+import "../../layouts/ha-app-layout";
 import "../../components/ha-icon-button";
 import "@polymer/paper-tabs/paper-tab";
 import "@polymer/paper-tabs/paper-tabs";
@@ -36,7 +36,7 @@ class PanelDeveloperTools extends LitElement {
   protected render(): TemplateResult {
     const page = this._page;
     return html`
-      <app-header-layout>
+      <ha-app-layout>
         <app-header fixed slot="header">
           <app-toolbar>
             <ha-menu-button
@@ -78,7 +78,7 @@ class PanelDeveloperTools extends LitElement {
           .narrow=${this.narrow}
           .hass=${this.hass}
         ></developer-tools-router>
-      </app-header-layout>
+      </ha-app-layout>
     `;
   }
 
@@ -107,6 +107,10 @@ class PanelDeveloperTools extends LitElement {
           color: var(--primary-text-color);
           --paper-card-header-color: var(--primary-text-color);
         }
+        developer-tools-router {
+          display: block;
+          height: calc(100vh - 112px);
+        }
         paper-tabs {
           margin-left: 12px;
           --paper-tabs-selection-bar-color: #fff;