Add app alias

.eslintrc.json

@@ -66,11 +66,7 @@
     "import/prefer-default-export": 0,
     "import/no-unresolved": 0,
     "import/no-cycle": 0,
-    "import/extensions": [
-      2,
-      "ignorePackages",
-      { "ts": "never", "js": "never" }
-    ],
+    "import/extensions": 0,
     "no-restricted-syntax": ["error", "LabeledStatement", "WithStatement"],
     "object-curly-newline": 0,
     "default-case": 0,

.github/workflows/ci.yaml

@@ -34,8 +34,10 @@ jobs:
         run: yarn install
         env:
           CI: true
-      - name: Build resources
-        run: ./node_modules/.bin/gulp gen-icons-json build-translations gather-gallery-demos
+      - name: Build icons
+        run: ./node_modules/.bin/gulp gen-icons-json
+      - name: Build translations
+        run: ./node_modules/.bin/gulp build-translations
       - name: Run eslint
         run: ./node_modules/.bin/eslint '{**/src,src}/**/*.{js,ts,html}' --ignore-path .gitignore
       - name: Run tsc

.gitignore

@@ -24,7 +24,7 @@ dist
 .vscode/*
 !.vscode/extensions.json
 
-# Cast dev settings
+# Cast dev settings 
 src/cast/dev_const.ts
 
 # Secrets

build-scripts/bundle.js

@@ -57,7 +57,7 @@ module.exports.babelOptions = ({ latestBuild }) => ({
   ].filter(Boolean),
   plugins: [
     // Part of ES2018. Converts {...a, b: 2} to Object.assign({}, a, {b: 2})
-    !latestBuild && [
+    [
       "@babel/plugin-proposal-object-rest-spread",
       { loose: true, useBuiltIns: true },
     ],
@@ -73,7 +73,7 @@ module.exports.babelOptions = ({ latestBuild }) => ({
       require("@babel/plugin-proposal-class-properties").default,
       { loose: true },
     ],
-  ].filter(Boolean),
+  ],
 });
 
 // Are already ES5, cause warnings when babelified.
@@ -178,6 +178,7 @@ module.exports.config = {
       publicPath: publicPath(latestBuild, paths.hassio_publicPath),
       isProdBuild,
       latestBuild,
+      dontHash: new Set(["entrypoint"]),
     };
   },
 

build-scripts/gulp/entry-html.js

@@ -90,6 +90,8 @@ gulp.task("gen-pages-prod", (done) => {
 });
 
 gulp.task("gen-index-app-dev", (done) => {
+  // In dev mode we don't mangle names, so we hardcode urls. That way we can
+  // run webpack as last in watch mode, which blocks output.
   const content = renderTemplate("index", {
     latestAppJS: "/frontend_latest/app.js",
     latestCoreJS: "/frontend_latest/core.js",
@@ -199,6 +201,8 @@ gulp.task("gen-index-cast-prod", (done) => {
 });
 
 gulp.task("gen-index-demo-dev", (done) => {
+  // In dev mode we don't mangle names, so we hardcode urls. That way we can
+  // run webpack as last in watch mode, which blocks output.
   const content = renderDemoTemplate("index", {
     latestDemoJS: "/frontend_latest/main.js",
 
@@ -236,6 +240,8 @@ gulp.task("gen-index-demo-prod", (done) => {
 });
 
 gulp.task("gen-index-gallery-dev", (done) => {
+  // In dev mode we don't mangle names, so we hardcode urls. That way we can
+  // run webpack as last in watch mode, which blocks output.
   const content = renderGalleryTemplate("index", {
     latestGalleryJS: "./frontend_latest/entrypoint.js",
   });
@@ -263,39 +269,3 @@ gulp.task("gen-index-gallery-prod", (done) => {
   );
   done();
 });
-
-gulp.task("gen-index-hassio-dev", async () => {
-  writeHassioEntrypoint("entrypoint.js", "entrypoints.js");
-});
-
-gulp.task("gen-index-hassio-prod", async () => {
-  const latestManifest = require(path.resolve(
-    paths.hassio_output_latest,
-    "manifest.json"
-  ));
-  const es5Manifest = require(path.resolve(
-    paths.hassio_output_es5,
-    "manifest.json"
-  ));
-  writeHassioEntrypoint(
-    latestManifest["entrypoint.js"],
-    es5Manifest["entrypoint.js"]
-  );
-});
-
-function writeHassioEntrypoint(latestEntrypoint, es5Entrypoint) {
-  fs.mkdirSync(paths.hassio_output_root, { recursive: true });
-  fs.writeFileSync(
-    path.resolve(paths.hassio_output_root, "entrypoint.js"),
-    `
-try {
-  new Function("import('${paths.hassio_publicPath}/frontend_latest/${latestEntrypoint}')")();
-} catch (err) {
-  var el = document.createElement('script');
-  el.src = '${paths.hassio_publicPath}/frontend_es5/${es5Entrypoint}';
-  document.body.appendChild(el);
-}
-  `,
-    { encoding: "utf-8" }
-  );
-}

build-scripts/gulp/gallery.js

@@ -1,10 +1,7 @@
 // Run demo develop mode
 const gulp = require("gulp");
-const fs = require("fs");
-const path = require("path");
 
 const env = require("../env");
-const paths = require("../paths");
 
 require("./clean.js");
 require("./translations.js");
@@ -15,31 +12,6 @@ require("./service-worker.js");
 require("./entry-html.js");
 require("./rollup.js");
 
-gulp.task("gather-gallery-demos", async function gatherDemos() {
-  const files = await fs.promises.readdir(
-    path.resolve(paths.gallery_dir, "src/demos")
-  );
-
-  let content = "export const DEMOS = {\n";
-
-  for (const file of files) {
-    const demoId = path.basename(file, ".ts");
-    const demoPath = "../src/demos/" + demoId;
-    content += `  "${demoId}": () => import("${demoPath}"),\n`;
-  }
-
-  content += "};";
-
-  const galleryBuild = path.resolve(paths.gallery_dir, "build");
-
-  fs.mkdirSync(galleryBuild, { recursive: true });
-  fs.writeFileSync(
-    path.resolve(galleryBuild, "import-demos.ts"),
-    content,
-    "utf-8"
-  );
-});
-
 gulp.task(
   "develop-gallery",
   gulp.series(
@@ -48,11 +20,7 @@ gulp.task(
     },
     "clean-gallery",
     "translations-enable-merge-backend",
-    gulp.parallel(
-      "gen-icons-json",
-      "build-translations",
-      "gather-gallery-demos"
-    ),
+    gulp.parallel("gen-icons-json", "build-translations"),
     "copy-static-gallery",
     "gen-index-gallery-dev",
     env.useRollup() ? "rollup-dev-server-gallery" : "webpack-dev-server-gallery"
@@ -67,11 +35,7 @@ gulp.task(
     },
     "clean-gallery",
     "translations-enable-merge-backend",
-    gulp.parallel(
-      "gen-icons-json",
-      "build-translations",
-      "gather-gallery-demos"
-    ),
+    gulp.parallel("gen-icons-json", "build-translations"),
     "copy-static-gallery",
     env.useRollup() ? "rollup-prod-gallery" : "webpack-prod-gallery",
     "gen-index-gallery-prod"

build-scripts/gulp/hassio.js

@@ -11,6 +11,24 @@ require("./webpack.js");
 require("./compress.js");
 require("./rollup.js");
 
+async function writeEntrypointJS() {
+  // We ship two builds and we need to do feature detection on what version to load.
+  fs.mkdirSync(paths.hassio_output_root, { recursive: true });
+  fs.writeFileSync(
+    path.resolve(paths.hassio_output_root, "entrypoint.js"),
+    `
+try {
+  new Function("import('${paths.hassio_publicPath}/frontend_latest/entrypoint.js')")();
+} catch (err) {
+  var el = document.createElement('script');
+  el.src = '${paths.hassio_publicPath}/frontend_es5/entrypoint.js';
+  document.body.appendChild(el);
+}
+  `,
+    { encoding: "utf-8" }
+  );
+}
+
 gulp.task(
   "develop-hassio",
   gulp.series(
@@ -19,7 +37,7 @@ gulp.task(
     },
     "clean-hassio",
     "gen-icons-json",
-    "gen-index-hassio-dev",
+    writeEntrypointJS,
     env.useRollup() ? "rollup-watch-hassio" : "webpack-watch-hassio"
   )
 );
@@ -33,7 +51,7 @@ gulp.task(
     "clean-hassio",
     "gen-icons-json",
     env.useRollup() ? "rollup-prod-hassio" : "webpack-prod-hassio",
-    "gen-index-hassio-prod",
+    writeEntrypointJS,
     ...// Don't compress running tests
     (env.isTest() ? [] : ["compress-hassio"])
   )

build-scripts/paths.js

@@ -34,11 +34,6 @@ module.exports = {
 
   hassio_dir: path.resolve(__dirname, "../hassio"),
   hassio_output_root: path.resolve(__dirname, "../hassio/build"),
-  hassio_output_latest: path.resolve(
-    __dirname,
-    "../hassio/build/frontend_latest"
-  ),
-  hassio_output_es5: path.resolve(__dirname, "../hassio/build/frontend_es5"),
   hassio_publicPath: "/api/hassio/app",
 
   translations_src: path.resolve(__dirname, "../src/translations"),

cast/src/html/launcher-faq.html.template

@@ -37,21 +37,23 @@
   <body>
     <%= renderTemplate('_js_base') %>
 
-    <script>
-      import("<%= latestLauncherJS %>");
-      window.latestJS = true;
+    <script type="module" crossorigin="use-credentials">
+      import "<%= latestLauncherJS %>";
     </script>
 
-    <script>
-      if (!window.latestJS) {
-        <% if (useRollup) { %>
-          _ls("/static/js/s.min.js").onload = function() {
-            System.import("<%= es5LauncherJS %>");
-          };
-        <% } else { %>
-          _ls("<%= es5LauncherJS %>");
-        <% } %>
-      }
+    <script nomodule>
+      (function() {
+        // // Safari 10.1 supports type=module but ignores nomodule, so we add this check.
+        if (!isS101) {
+          <% if (useRollup) { %>
+            _ls("/static/js/s.min.js").onload = function() {
+              System.import("<%= es5LauncherJS %>");
+            };
+          <% } else { %>
+            _ls("<%= es5LauncherJS %>");
+          <% } %>
+        }
+      })();
     </script>
 
     <hc-layout subtitle="FAQ">
@@ -251,7 +253,7 @@ http:
 
     <script>
       var _gaq = [["_setAccount", "UA-57927901-9"], ["_trackPageview"]];
-      (function (d, t) {
+      (function(d, t) {
         var g = d.createElement(t),
           s = d.getElementsByTagName(t)[0];
         g.src =

cast/src/html/launcher.html.template

@@ -28,21 +28,23 @@
 
     <hc-connect></hc-connect>
 
-    <script>
-      import("<%= latestLauncherJS %>");
-      window.latestJS = true;
+    <script type="module" crossorigin="use-credentials">
+      import "<%= latestLauncherJS %>";
     </script>
 
-    <script>
-      if (!window.latestJS) {
-        <% if (useRollup) { %>
-          _ls("/static/js/s.min.js").onload = function() {
-            System.import("<%= es5LauncherJS %>");
-          };
-        <% } else { %>
-          _ls("<%= es5LauncherJS %>");
-        <% } %>
-      }
+    <script nomodule>
+      (function() {
+        // // Safari 10.1 supports type=module but ignores nomodule, so we add this check.
+        if (!isS101) {
+          <% if (useRollup) { %>
+            _ls("/static/js/s.min.js").onload = function() {
+              System.import("<%= es5LauncherJS %>");
+            };
+          <% } else { %>
+            _ls("<%= es5LauncherJS %>");
+          <% } %>
+        }
+      })();
     </script>
     <script>
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

cast/src/launcher/entrypoint.ts

@@ -1,3 +1,3 @@
-import "../../../src/resources/ha-style";
-import "../../../src/resources/roboto";
+import "~app/resources/ha-style";
+import "~app/resources/roboto";
 import "./layout/hc-connect";

cast/src/receiver/entrypoint.ts

@@ -1,7 +1,7 @@
 /* eslint-disable no-undef */
-import { CAST_NS } from "../../../src/cast/const";
-import { HassMessage } from "../../../src/cast/receiver_messages";
-import "../../../src/resources/custom-card-support";
+import { CAST_NS } from "~app/cast/const";
+import { HassMessage } from "~app/cast/receiver_messages";
+import "~app/resources/custom-card-support";
 import { castContext } from "./cast_context";
 import { HcMain } from "./layout/hc-main";
 import { ReceivedMessage } from "./types";

demo/src/configs/jimpower/theme.ts

@@ -26,9 +26,9 @@ export const demoThemeJimpower = () => ({
   "switch-checked-color": "var(--accent-color)",
   "paper-dialog-background-color": "#434954",
   "secondary-text-color": "#5294E2",
-  "error-color": "#E45E65",
+  "google-red-500": "#E45E65",
   "divider-color": "rgba(0, 0, 0, .12)",
-  "success-color": "#39E949",
+  "google-green-500": "#39E949",
   "switch-unchecked-button-color": "var(--disabled-text-color)",
   "label-badge-border-color": "green",
   "paper-listbox-color": "var(--primary-color)",

demo/src/configs/kernehed/theme.ts

@@ -27,9 +27,9 @@ export const demoThemeKernehed = () => ({
   "switch-checked-color": "var(--accent-color)",
   "paper-dialog-background-color": "#292929",
   "secondary-text-color": "#b58e31",
-  "error-color": "#b58e31",
+  "google-red-500": "#b58e31",
   "divider-color": "rgba(0, 0, 0, .12)",
-  "success-color": "#2980b9",
+  "google-green-500": "#2980b9",
   "switch-unchecked-button-color": "var(--disabled-text-color)",
   "label-badge-border-color": "green",
   "paper-listbox-color": "#777777",

demo/src/custom-cards/ha-demo-card.ts

@@ -1,4 +1,5 @@
 import "@material/mwc-button";
+import "@polymer/paper-spinner/paper-spinner-lite";
 import {
   css,
   CSSResult,
@@ -9,7 +10,6 @@ import {
 } from "lit-element";
 import { until } from "lit-html/directives/until";
 import "../../../src/components/ha-card";
-import "../../../src/components/ha-circular-progress";
 import { LovelaceCardConfig } from "../../../src/data/lovelace";
 import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 import { Lovelace, LovelaceCard } from "../../../src/panels/lovelace/types";
@@ -49,7 +49,7 @@ export class HADemoCard extends LitElement implements LovelaceCard {
         <div class="picker">
           <div class="label">
             ${this._switching
-              ? html`<ha-circular-progress active></ha-circular-progress>`
+              ? html` <paper-spinner-lite active></paper-spinner-lite> `
               : until(
                   selectedDemoConfig.then(
                     (conf) => html`

demo/src/html/index.html.template

@@ -86,26 +86,26 @@
     <%= renderTemplate('_js_base') %>
     <%= renderTemplate('_preload_roboto') %>
 
-    <script>
-      import("<%= latestDemoJS %>");
-      window.latestJS = true;
-    </script>
+    <script type="module" src="<%= latestDemoJS %>"></script>
 
-    <script>
-      if (!window.latestJS) {
-        <% if (useRollup) { %>
-          _ls("/static/js/s.min.js").onload = function() {
-            System.import("<%= es5DemoJS %>");
-          };
-        <% } else { %>
-          _ls("<%= es5DemoJS %>");
-        <% } %>
-      }
+    <script nomodule>
+      (function() {
+        // // Safari 10.1 supports type=module but ignores nomodule, so we add this check.
+        if (!isS101) {
+          <% if (useRollup) { %>
+            _ls("/static/js/s.min.js").onload = function() {
+              System.import("<%= es5DemoJS %>");
+            };
+          <% } else { %>
+            _ls("<%= es5DemoJS %>");
+          <% } %>
+        }
+      })();
     </script>
 
     <script>
       var _gaq = [["_setAccount", "UA-57927901-5"], ["_trackPageview"]];
-      (function (d, t) {
+      (function(d, t) {
         var g = d.createElement(t),
           s = d.getElementsByTagName(t)[0];
         g.src =

gallery/src/components/demo-cards.js

@@ -2,8 +2,8 @@ import "@polymer/app-layout/app-toolbar/app-toolbar";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-import "../../../src/components/ha-switch";
-import "../../../src/components/ha-formfield";
+import "~app/components/ha-switch";
+import "~app/components/ha-formfield";
 import "./demo-card";
 
 class DemoCards extends PolymerElement {

gallery/src/ha-gallery.js

@@ -11,7 +11,9 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "../../src/components/ha-card";
 import "../../src/managers/notification-manager";
 import "../../src/styles/polymer-ha-style";
-import { DEMOS } from "../build/import-demos";
+
+// eslint-disable-next-line no-undef
+const DEMOS = require.context("./demos", true, /^(.*\.(ts$))[^.]*$/im);
 
 const fixPath = (path) => path.substr(2, path.length - 5);
 
@@ -161,7 +163,7 @@ class HaGallery extends PolymerElement {
       },
       _demos: {
         type: Array,
-        value: Object.keys(DEMOS),
+        value: DEMOS.keys().map(fixPath),
       },
       _lovelaceDemos: {
         type: Array,
@@ -208,7 +210,7 @@ class HaGallery extends PolymerElement {
     while (root.lastChild) root.removeChild(root.lastChild);
 
     if (demo) {
-      DEMOS[demo]();
+      DEMOS(`./${demo}.ts`);
       const el = document.createElement(demo);
       root.appendChild(el);
     }

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

@@ -22,7 +22,7 @@ import "../../../src/layouts/hass-tabs-subpage";
 import "../../../src/layouts/loading-screen";
 import { HomeAssistant, Route } from "../../../src/types";
 import { showRepositoriesDialog } from "../dialogs/repositories/show-dialog-repositories";
-import { supervisorTabs } from "../hassio-tabs";
+import { supervisorTabs } from "../hassio-panel";
 import "./hassio-addon-repository";
 
 const sortRepos = (a: HassioAddonRepository, b: HassioAddonRepository) => {

hassio/src/addon-view/config/hassio-addon-audio.ts

@@ -107,7 +107,7 @@ class HassioAddonAudio extends LitElement {
           display: block;
         }
         .errors {
-          color: var(--error-color);
+          color: var(--google-red-500);
           margin-bottom: 16px;
         }
         paper-item {

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

@@ -1,3 +1,4 @@
+import "@polymer/paper-spinner/paper-spinner-lite";
 import {
   css,
   CSSResult,
@@ -11,7 +12,6 @@ import { HassioAddonDetails } from "../../../../src/data/hassio/addon";
 import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
 import { hassioStyle } from "../../resources/hassio-style";
-import "../../../../src/components/ha-circular-progress";
 import "./hassio-addon-audio";
 import "./hassio-addon-config";
 import "./hassio-addon-network";
@@ -24,7 +24,7 @@ class HassioAddonConfigDashboard extends LitElement {
 
   protected render(): TemplateResult {
     if (!this.addon) {
-      return html`<ha-circular-progress active></ha-circular-progress>`;
+      return html` <paper-spinner-lite active></paper-spinner-lite> `;
     }
     return html`
       <div class="content">

hassio/src/addon-view/config/hassio-addon-config.ts

@@ -84,7 +84,7 @@ class HassioAddonConfig extends LitElement {
           justify-content: space-between;
         }
         .errors {
-          color: var(--error-color);
+          color: var(--google-red-500);
           margin-top: 16px;
         }
         iron-autogrow-textarea {
@@ -92,7 +92,7 @@ class HassioAddonConfig extends LitElement {
           font-family: monospace;
         }
         .syntaxerror {
-          color: var(--error-color);
+          color: var(--google-red-500);
         }
       `,
     ];

hassio/src/addon-view/config/hassio-addon-network.ts

@@ -105,7 +105,7 @@ class HassioAddonNetwork extends LitElement {
           display: block;
         }
         .errors {
-          color: var(--error-color);
+          color: var(--google-red-500);
           margin-bottom: 16px;
         }
         .card-actions {

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

@@ -1,3 +1,4 @@
+import "@polymer/paper-spinner/paper-spinner-lite";
 import {
   css,
   CSSResult,
@@ -13,7 +14,6 @@ import {
   HassioAddonDetails,
 } from "../../../../src/data/hassio/addon";
 import "../../../../src/layouts/loading-screen";
-import "../../../../src/components/ha-circular-progress";
 import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
 import { hassioStyle } from "../../resources/hassio-style";
@@ -35,7 +35,7 @@ class HassioAddonDocumentationDashboard extends LitElement {
 
   protected render(): TemplateResult {
     if (!this.addon) {
-      return html`<ha-circular-progress active></ha-circular-progress>`;
+      return html` <paper-spinner-lite active></paper-spinner-lite> `;
     }
     return html`
       <div class="content">

hassio/src/addon-view/hassio-addon-dashboard.ts

@@ -4,6 +4,7 @@ import {
   mdiInformationVariant,
   mdiMathLog,
 } from "@mdi/js";
+import "@polymer/paper-spinner/paper-spinner-lite";
 import {
   css,
   CSSResult,
@@ -19,7 +20,6 @@ import {
   HassioAddonDetails,
 } from "../../../src/data/hassio/addon";
 import "../../../src/layouts/hass-tabs-subpage";
-import "../../../src/components/ha-circular-progress";
 import type { PageNavigation } from "../../../src/layouts/hass-tabs-subpage";
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant, Route } from "../../../src/types";
@@ -56,7 +56,7 @@ class HassioAddonDashboard extends LitElement {
 
   protected render(): TemplateResult {
     if (!this.addon) {
-      return html`<ha-circular-progress active></ha-circular-progress>`;
+      return html` <paper-spinner-lite active></paper-spinner-lite> `;
     }
 
     const addonTabs: PageNavigation[] = [

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

@@ -1,3 +1,4 @@
+import "@polymer/paper-spinner/paper-spinner-lite";
 import {
   css,
   CSSResult,
@@ -8,7 +9,6 @@ import {
   TemplateResult,
 } from "lit-element";
 import { HassioAddonDetails } from "../../../../src/data/hassio/addon";
-import "../../../../src/components/ha-circular-progress";
 import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
 import { hassioStyle } from "../../resources/hassio-style";
@@ -24,7 +24,7 @@ class HassioAddonInfoDashboard extends LitElement {
 
   protected render(): TemplateResult {
     if (!this.addon) {
-      return html`<ha-circular-progress active></ha-circular-progress>`;
+      return html` <paper-spinner-lite active></paper-spinner-lite> `;
     }
 
     return html`

hassio/src/addon-view/info/hassio-addon-info.ts

@@ -560,7 +560,7 @@ class HassioAddonInfo extends LitElement {
           margin-bottom: 16px;
         }
         ha-card.warning {
-          background-color: var(--error-color);
+          background-color: var(--google-red-500);
           color: white;
         }
         ha-card.warning .card-header {
@@ -573,8 +573,8 @@ class HassioAddonInfo extends LitElement {
           --mdc-theme-primary: white !important;
         }
         .warning {
-          color: var(--error-color);
-          --mdc-theme-primary: var(--error-color);
+          color: var(--google-red-500);
+          --mdc-theme-primary: var(--google-red-500);
         }
         .light-color {
           color: var(--secondary-text-color);
@@ -590,7 +590,7 @@ class HassioAddonInfo extends LitElement {
           vertical-align: middle;
         }
         .errors {
-          color: var(--error-color);
+          color: var(--google-red-500);
           margin-bottom: 16px;
         }
         .description {

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

@@ -1,3 +1,4 @@
+import "@polymer/paper-spinner/paper-spinner-lite";
 import {
   css,
   CSSResult,
@@ -8,7 +9,6 @@ import {
   TemplateResult,
 } from "lit-element";
 import { HassioAddonDetails } from "../../../../src/data/hassio/addon";
-import "../../../../src/components/ha-circular-progress";
 import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
 import { hassioStyle } from "../../resources/hassio-style";
@@ -22,7 +22,7 @@ class HassioAddonLogDashboard extends LitElement {
 
   protected render(): TemplateResult {
     if (!this.addon) {
-      return html` <ha-circular-progress active></ha-circular-progress> `;
+      return html` <paper-spinner-lite active></paper-spinner-lite> `;
     }
     return html`
       <div class="content">

hassio/src/addon-view/log/hassio-addon-logs.ts

@@ -62,7 +62,7 @@ class HassioAddonLogs extends LitElement {
           display: block;
         }
         .errors {
-          color: var(--error-color);
+          color: var(--google-red-500);
           margin-bottom: 16px;
         }
       `,

hassio/src/components/hassio-card-content.ts

@@ -98,7 +98,7 @@ class HassioCardContent extends LitElement {
         color: var(--paper-item-icon-color);
       }
       ha-svg-icon.not_available {
-        color: var(--error-color);
+        color: var(--google-red-500);
       }
       .title {
         color: var(--primary-text-color);

hassio/src/dashboard/hassio-dashboard.ts

@@ -15,7 +15,7 @@ import {
 import "../../../src/layouts/hass-tabs-subpage";
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant, Route } from "../../../src/types";
-import { supervisorTabs } from "../hassio-tabs";
+import { supervisorTabs } from "../hassio-panel";
 import "./hassio-addons";
 import "./hassio-update";
 

hassio/src/dashboard/hassio-update.ts

@@ -180,7 +180,7 @@ export class HassioUpdate extends LitElement {
           text-align: right;
         }
         .errors {
-          color: var(--error-color);
+          color: var(--google-red-500);
           padding: 16px;
         }
         a {

hassio/src/dialogs/repositories/dialog-hassio-repositories.ts

@@ -5,7 +5,7 @@ import "@polymer/paper-input/paper-input";
 import type { PaperInputElement } from "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
-import "../../../../src/components/ha-circular-progress";
+import "@polymer/paper-spinner/paper-spinner";
 import {
   css,
   CSSResult,
@@ -108,7 +108,7 @@ class HassioRepositoriesDialog extends LitElement {
             ></paper-input>
             <mwc-button @click=${this._addRepository}>
               ${this._prosessing
-                ? html`<ha-circular-progress active></ha-circular-progress>`
+                ? html`<paper-spinner active></paper-spinner>`
                 : "Add"}
             </mwc-button>
           </div>

hassio/src/dialogs/snapshot/dialog-hassio-snapshot.ts

@@ -224,7 +224,7 @@ class HassioSnapshotDialog extends LitElement {
         }
         .warning,
         .error {
-          color: var(--error-color);
+          color: var(--google-red-500);
         }
         .buttons {
           display: flex;

hassio/src/entrypoint.ts

@@ -1,5 +1,5 @@
-import "../../src/resources/compatibility";
-import "../../src/resources/roboto";
+import "~app/resources/compatibility";
+import "~app/resources/roboto";
 import "./hassio-main";
 
 const styleEl = document.createElement("style");

hassio/src/hassio-panel.ts

@@ -1,3 +1,4 @@
+import { mdiBackupRestore, mdiCogs, mdiStore, mdiViewDashboard } from "@mdi/js";
 import {
   customElement,
   html,
@@ -11,9 +12,33 @@ import {
   HassioSupervisorInfo,
   HassioInfo,
 } from "../../src/data/hassio/supervisor";
+import type { PageNavigation } from "../../src/layouts/hass-tabs-subpage";
 import { HomeAssistant, Route } from "../../src/types";
 import "./hassio-panel-router";
 
+export const supervisorTabs: PageNavigation[] = [
+  {
+    name: "Dashboard",
+    path: `/hassio/dashboard`,
+    iconPath: mdiViewDashboard,
+  },
+  {
+    name: "Add-on store",
+    path: `/hassio/store`,
+    iconPath: mdiStore,
+  },
+  {
+    name: "Snapshots",
+    path: `/hassio/snapshots`,
+    iconPath: mdiBackupRestore,
+  },
+  {
+    name: "System",
+    path: `/hassio/system`,
+    iconPath: mdiCogs,
+  },
+];
+
 @customElement("hassio-panel")
 class HassioPanel extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;

hassio/src/hassio-tabs.ts

@@ -1,25 +0,0 @@
-import { mdiBackupRestore, mdiCogs, mdiStore, mdiViewDashboard } from "@mdi/js";
-import type { PageNavigation } from "../../src/layouts/hass-tabs-subpage";
-
-export const supervisorTabs: PageNavigation[] = [
-  {
-    name: "Dashboard",
-    path: `/hassio/dashboard`,
-    iconPath: mdiViewDashboard,
-  },
-  {
-    name: "Add-on store",
-    path: `/hassio/store`,
-    iconPath: mdiStore,
-  },
-  {
-    name: "Snapshots",
-    path: `/hassio/snapshots`,
-    iconPath: mdiBackupRestore,
-  },
-  {
-    name: "System",
-    path: `/hassio/system`,
-    iconPath: mdiCogs,
-  },
-];

hassio/src/snapshots/hassio-snapshots.ts

@@ -37,7 +37,7 @@ import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant, Route } from "../../../src/types";
 import "../components/hassio-card-content";
 import { showHassioSnapshotDialog } from "../dialogs/snapshot/show-dialog-hassio-snapshot";
-import { supervisorTabs } from "../hassio-tabs";
+import { supervisorTabs } from "../hassio-panel";
 import { hassioStyle } from "../resources/hassio-style";
 
 interface CheckboxItem {

hassio/src/system/hassio-host-info.ts

@@ -146,7 +146,7 @@ class HassioHostInfo extends LitElement {
           text-align: right;
         }
         .errors {
-          color: var(--error-color);
+          color: var(--google-red-500);
           margin-top: 16px;
         }
         mwc-button.info {
@@ -156,7 +156,7 @@ class HassioHostInfo extends LitElement {
           margin-bottom: 10px;
         }
         .warning {
-          --mdc-theme-primary: var(--error-color);
+          --mdc-theme-primary: var(--google-red-500);
         }
       `,
     ];

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

@@ -117,7 +117,7 @@ class HassioSupervisorInfo extends LitElement {
           text-align: right;
         }
         .errors {
-          color: var(--error-color);
+          color: var(--google-red-500);
           margin-top: 16px;
         }
       `,

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

@@ -123,7 +123,7 @@ class HassioSupervisorLog extends LitElement {
           width: 96%;
         }
         .errors {
-          color: var(--error-color);
+          color: var(--google-red-500);
           margin-bottom: 16px;
         }
         .card-content {

hassio/src/system/hassio-system.ts

@@ -18,7 +18,7 @@ import {
 import "../../../src/layouts/hass-tabs-subpage";
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant, Route } from "../../../src/types";
-import { supervisorTabs } from "../hassio-tabs";
+import { supervisorTabs } from "../hassio-panel";
 import { hassioStyle } from "../resources/hassio-style";
 import "./hassio-host-info";
 import "./hassio-supervisor-info";

package.json

@@ -22,11 +22,11 @@
   "author": "Paulus Schoutsen <Paulus@PaulusSchoutsen.nl> (http://paulusschoutsen.nl)",
   "license": "Apache-2.0",
   "dependencies": {
+    "~app": "file:./src",
     "@formatjs/intl-pluralrules": "^1.5.8",
     "@fullcalendar/core": "^5.0.0-beta.2",
     "@fullcalendar/daygrid": "^5.0.0-beta.2",
     "@material/chips": "7.0.0-canary.d92d8c93e.0",
-    "@material/circular-progress": "7.0.0-canary.d92d8c93e.0",
     "@material/mwc-button": "^0.15.0",
     "@material/mwc-checkbox": "^0.15.0",
     "@material/mwc-dialog": "^0.15.0",
@@ -48,6 +48,7 @@
     "@polymer/iron-image": "^3.0.1",
     "@polymer/iron-input": "^3.0.1",
     "@polymer/iron-label": "^3.0.1",
+    "@polymer/iron-media-query": "^3.0.1",
     "@polymer/iron-overlay-behavior": "^3.0.2",
     "@polymer/iron-resizable-behavior": "^3.0.1",
     "@polymer/paper-card": "^3.0.1",
@@ -65,6 +66,7 @@
     "@polymer/paper-radio-group": "^3.0.1",
     "@polymer/paper-ripple": "^3.0.1",
     "@polymer/paper-slider": "^3.0.1",
+    "@polymer/paper-spinner": "^3.0.2",
     "@polymer/paper-styles": "^3.0.1",
     "@polymer/paper-tabs": "^3.0.1",
     "@polymer/paper-toast": "^3.0.1",
@@ -86,8 +88,8 @@
     "fecha": "^4.2.0",
     "fuse.js": "^6.0.0",
     "google-timezones-json": "^1.0.2",
-    "hls.js": "^0.13.2",
-    "home-assistant-js-websocket": "^5.4.1",
+    "hls.js": "^0.12.4",
+    "home-assistant-js-websocket": "^5.3.0",
     "idb-keyval": "^3.2.0",
     "intl-messageformat": "^8.3.9",
     "js-yaml": "^3.13.1",

script/version_bump.js

@@ -16,31 +16,14 @@ function today() {
   )}${String(now.getDate()).padStart(2, "0")}.0`;
 }
 
-function auto(version) {
-  const todayVersion = today();
-  if (todayVersion !== version) {
-    return todayVersion;
-  }
-  return patch(version);
-}
-
 const methods = {
   patch,
   today,
-  auto,
 };
 
 async function main(args) {
-  let method;
-  let commit;
-
-  if (args.length === 0) {
-    method = methods.auto;
-    commit = true;
-  } else {
-    method = args.length > 0 && methods[args[0]];
-    commit = args.length > 1 && args[1] == "--commit";
-  }
+  const method = args.length > 0 && methods[args[0]];
+  const commit = args.length > 1 && args[1] == "--commit";
 
   if (!method) {
     console.error(

setup.py

@@ -2,7 +2,7 @@ from setuptools import setup, find_packages
 
 setup(
     name="home-assistant-frontend",
-    version="20200629.0",
+    version="20200620.0",
     description="The Home Assistant frontend",
     url="https://github.com/home-assistant/home-assistant-polymer",
     author="The Home Assistant Authors",

src/common/const.ts

@@ -37,7 +37,6 @@ export const DOMAINS_WITH_MORE_INFO = [
   "fan",
   "group",
   "history_graph",
-  "humidifier",
   "input_datetime",
   "light",
   "lock",
@@ -80,7 +79,6 @@ export const DOMAINS_TOGGLE = new Set([
   "switch",
   "group",
   "automation",
-  "humidifier",
 ]);
 
 /** Temperature units. */

src/common/dom/deep-active-element.ts

@@ -1,8 +0,0 @@
-export const deepActiveElement = (
-  root: DocumentOrShadowRoot = document
-): Element | null => {
-  if (root.activeElement?.shadowRoot?.activeElement) {
-    return deepActiveElement(root.activeElement.shadowRoot);
-  }
-  return root.activeElement;
-};

src/common/entity/compute_state_display.ts

@@ -55,12 +55,6 @@ export const computeStateDisplay = (
     return formatDateTime(date, language);
   }
 
-  if (domain === "humidifier") {
-    if (stateObj.state === "on" && stateObj.attributes.humidity) {
-      return `${stateObj.attributes.humidity}%`;
-    }
-  }
-
   return (
     // Return device class translation
     (stateObj.attributes.device_class &&

src/common/entity/domain_icon.ts

@@ -8,7 +8,6 @@ import { DEFAULT_DOMAIN_ICON } from "../const";
 const fixedIcons = {
   alert: "hass:alert",
   alexa: "hass:amazon-alexa",
-  air_quality: "hass:air-filter",
   automation: "hass:robot",
   calendar: "hass:calendar",
   camera: "hass:video",
@@ -23,7 +22,6 @@ const fixedIcons = {
   history_graph: "hass:chart-line",
   homeassistant: "hass:home-assistant",
   homekit: "hass:home-automation",
-  humidifier: "hass:air-humidifier",
   image_processing: "hass:image-filter-frames",
   input_boolean: "hass:toggle-switch-outline",
   input_datetime: "hass:calendar-clock",

src/common/entity/get_view_entities.ts

@@ -14,20 +14,20 @@ export const getViewEntities = (
   view.attributes.entity_id.forEach((entityId) => {
     const entity = entities[entityId];
 
-    if (!entity) {
-      return;
-    }
+    if (entity && !entity.attributes.hidden) {
+      viewEntities[entity.entity_id] = entity;
 
-    viewEntities[entity.entity_id] = entity;
+      if (computeDomain(entity.entity_id) === "group") {
+        const groupEntities = getGroupEntities(entities, entity as GroupEntity);
 
-    if (computeDomain(entity.entity_id) === "group") {
-      const groupEntities = getGroupEntities(entities, entity as GroupEntity);
+        Object.keys(groupEntities).forEach((grEntityId) => {
+          const grEntity = groupEntities[grEntityId];
 
-      Object.keys(groupEntities).forEach((grEntityId) => {
-        const grEntity = groupEntities[grEntityId];
-
-        viewEntities[grEntityId] = grEntity;
-      });
+          if (!grEntity.attributes.hidden) {
+            viewEntities[grEntityId] = grEntity;
+          }
+        });
+      }
     }
   });
 

src/common/style/icon_color_css.ts

@@ -8,7 +8,6 @@ export const iconColorCSS = css`
   ha-icon[data-domain="camera"][data-state="streaming"],
   ha-icon[data-domain="cover"][data-state="open"],
   ha-icon[data-domain="fan"][data-state="on"],
-  ha-icon[data-domain="humidifier"][data-state="on"],
   ha-icon[data-domain="light"][data-state="on"],
   ha-icon[data-domain="input_boolean"][data-state="on"],
   ha-icon[data-domain="lock"][data-state="unlocked"],

src/components/buttons/ha-progress-button.js

@@ -1,5 +1,5 @@
 import "@material/mwc-button";
-import "../ha-circular-progress";
+import "@polymer/paper-spinner/paper-spinner";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -22,13 +22,13 @@ class HaProgressButton extends PolymerElement {
 
         .success mwc-button {
           --mdc-theme-primary: white;
-          background-color: var(--success-color);
+          background-color: var(--google-green-500);
           transition: none;
         }
 
         .error mwc-button {
           --mdc-theme-primary: white;
-          background-color: var(--error-color);
+          background-color: var(--google-red-500);
           transition: none;
         }
 
@@ -51,9 +51,7 @@ class HaProgressButton extends PolymerElement {
           <slot></slot>
         </mwc-button>
         <template is="dom-if" if="[[progress]]">
-          <div class="progress">
-            <ha-circular-progress active size="small"></ha-circular-progress>
-          </div>
+          <div class="progress"><paper-spinner active=""></paper-spinner></div>
         </template>
       </div>
     `;

src/components/entity/ha-entity-toggle.ts

@@ -22,7 +22,7 @@ const isOn = (stateObj?: HassEntity) =>
   !STATES_OFF.includes(stateObj.state) &&
   !UNAVAILABLE_STATES.includes(stateObj.state);
 
-export class HaEntityToggle extends LitElement {
+class HaEntityToggle extends LitElement {
   // hass is not a property so that we only re-render on stateObj changes
   public hass?: HomeAssistant;
 

src/components/ha-camera-stream.ts

@@ -178,9 +178,6 @@ class HaCameraStream extends LitElement {
   ) {
     const hls = new Hls({
       liveBackBufferLength: 60,
-      fragLoadingTimeOut: 30000,
-      manifestLoadingTimeOut: 30000,
-      levelLoadingTimeOut: 30000,
     });
     this._hlsPolyfillInstance = hls;
     hls.attachMedia(videoEl);

src/components/ha-circular-progress.ts

@@ -1,93 +0,0 @@
-import {
-  LitElement,
-  TemplateResult,
-  property,
-  svg,
-  html,
-  customElement,
-  unsafeCSS,
-  SVGTemplateResult,
-  css,
-} from "lit-element";
-// @ts-ignore
-import progressStyles from "@material/circular-progress/dist/mdc.circular-progress.min.css";
-import { classMap } from "lit-html/directives/class-map";
-
-@customElement("ha-circular-progress")
-export class HaCircularProgress extends LitElement {
-  @property({ type: Boolean })
-  public active = false;
-
-  @property()
-  public alt = "Loading";
-
-  @property()
-  public size: "small" | "medium" | "large" = "medium";
-
-  protected render(): TemplateResult | void {
-    let indeterminatePart: SVGTemplateResult;
-
-    if (this.size === "small") {
-      indeterminatePart = svg`
-        <svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-          <circle cx="12" cy="12" r="8.75" stroke-dasharray="54.978" stroke-dashoffset="27.489"/>
-        </svg>`;
-    } else if (this.size === "large") {
-      indeterminatePart = svg`
-        <svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
-          <circle cx="24" cy="24" r="18" stroke-dasharray="113.097" stroke-dashoffset="56.549"/>
-        </svg>`;
-    } else {
-      // medium
-      indeterminatePart = svg`
-        <svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
-          <circle cx="16" cy="16" r="12.5" stroke-dasharray="78.54" stroke-dashoffset="39.27"/>
-        </svg>`;
-    }
-
-    // ignoring prettier as it will introduce unwanted whitespace
-    // We have not implemented the determinate support of mdc circular progress.
-    // prettier-ignore
-    return html`
-      <div
-        class="mdc-circular-progress ${classMap({
-          "mdc-circular-progress--indeterminate": this.active,
-          [`mdc-circular-progress--${this.size}`]: true,
-        })}"
-        role="progressbar"
-        aria-label=${this.alt}
-        aria-valuemin="0"
-        aria-valuemax="1"
-      >
-        <div class="mdc-circular-progress__indeterminate-container">
-          <div class="mdc-circular-progress__spinner-layer">
-            <div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-left">
-              ${indeterminatePart}
-            </div><div class="mdc-circular-progress__gap-patch">
-              ${indeterminatePart}
-            </div><div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right">
-              ${indeterminatePart}
-            </div>
-          </div>
-        </div>
-      </div>
-    `;
-  }
-
-  static get styles() {
-    return [
-      unsafeCSS(progressStyles),
-      css`
-        :host {
-          text-align: initial;
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-circular-progress": HaCircularProgress;
-  }
-}

src/components/ha-climate-control.js

@@ -20,7 +20,7 @@ class HaClimateControl extends EventsMixin(PolymerElement) {
           @apply --layout-justified;
         }
         .in-flux#target_temperature {
-          color: var(--error-color);
+          color: var(--google-red-500);
         }
         #target_temperature {
           @apply --layout-self-center;

src/components/ha-demo-badge.js

@@ -0,0 +1,24 @@
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+import "./ha-label-badge";
+
+class HaDemoBadge extends PolymerElement {
+  static get template() {
+    return html`
+      <style>
+        :host {
+          --ha-label-badge-color: #dac90d;
+        }
+      </style>
+
+      <ha-label-badge
+        icon="hass:emoticon"
+        label="Demo"
+        description=""
+      ></ha-label-badge>
+    `;
+  }
+}
+
+customElements.define("ha-demo-badge", HaDemoBadge);

src/components/ha-sidebar.ts

@@ -6,6 +6,7 @@ import {
   mdiMenu,
   mdiViewDashboard,
 } from "@mdi/js";
+import "@polymer/app-layout/app-toolbar/app-toolbar";
 import "@polymer/paper-item/paper-icon-item";
 import type { PaperIconItemElement } from "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-item/paper-item";
@@ -15,7 +16,6 @@ import {
   CSSResult,
   eventOptions,
   html,
-  customElement,
   LitElement,
   property,
   PropertyValues,
@@ -109,7 +109,9 @@ const computePanels = (hass: HomeAssistant): [PanelInfo[], PanelInfo[]] => {
   return [beforeSpacer, afterSpacer];
 };
 
-@customElement("ha-sidebar")
+/*
+ * @appliesMixin LocalizeMixin
+ */
 class HaSidebar extends LitElement {
   @property() public hass!: HomeAssistant;
 
@@ -747,3 +749,5 @@ declare global {
     "ha-sidebar": HaSidebar;
   }
 }
+
+customElements.define("ha-sidebar", HaSidebar);

src/components/ha-water_heater-control.js

@@ -20,7 +20,7 @@ class HaWaterHeaterControl extends EventsMixin(PolymerElement) {
           @apply --layout-justified;
         }
         .in-flux#target_temperature {
-          color: var(--error-color);
+          color: var(--google-red-500);
         }
         #target_temperature {
           @apply --layout-self-center;

src/components/state-history-chart-line.js

@@ -262,28 +262,6 @@ class StateHistoryChartLine extends LocalizeMixin(PolymerElement) {
             pushData(new Date(state.last_changed), series);
           }
         });
-      } else if (domain === "humidifier") {
-        addColumn(
-          `${this.hass.localize(
-            "ui.card.humidifier.target_humidity_entity",
-            "name",
-            name
-          )}`,
-          true
-        );
-        addColumn(
-          `${this.hass.localize("ui.card.humidifier.on_entity", "name", name)}`,
-          true,
-          true
-        );
-
-        states.states.forEach((state) => {
-          if (!state.attributes) return;
-          const target = safeParseFloat(state.attributes.humidity);
-          const series = [target];
-          series.push(state.state === "on" ? target : null);
-          pushData(new Date(state.last_changed), series);
-        });
       } else {
         // Only disable interpolation for sensors
         const isStep = domain === "sensor";

src/components/state-history-charts.js

@@ -1,4 +1,4 @@
-import "./ha-circular-progress";
+import "@polymer/paper-spinner/paper-spinner";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";

src/data/history.ts

@@ -5,15 +5,13 @@ import { computeStateName } from "../common/entity/compute_state_name";
 import { LocalizeFunc } from "../common/translations/localize";
 import { HomeAssistant } from "../types";
 
-const DOMAINS_USE_LAST_UPDATED = ["climate", "humidifier", "water_heater"];
+const DOMAINS_USE_LAST_UPDATED = ["climate", "water_heater"];
 const LINE_ATTRIBUTES_TO_KEEP = [
   "temperature",
   "current_temperature",
   "target_temp_low",
   "target_temp_high",
   "hvac_action",
-  "humidity",
-  "mode",
 ];
 
 export interface LineChartState {
@@ -226,8 +224,6 @@ export const computeHistory = (
       unit = hass.config.unit_system.temperature;
     } else if (computeStateDomain(stateInfo[0]) === "water_heater") {
       unit = hass.config.unit_system.temperature;
-    } else if (computeStateDomain(stateInfo[0]) === "humidifier") {
-      unit = "%";
     }
 
     if (!unit) {

src/data/humidifier.ts

@@ -1,19 +0,0 @@
-import {
-  HassEntityAttributeBase,
-  HassEntityBase,
-} from "home-assistant-js-websocket";
-
-export type HumidifierEntity = HassEntityBase & {
-  attributes: HassEntityAttributeBase & {
-    humidity?: number;
-    min_humidity?: number;
-    max_humidity?: number;
-    mode?: string;
-    available_modes?: string[];
-  };
-};
-
-export const HUMIDIFIER_SUPPORT_MODES = 1;
-
-export const HUMIDIFIER_DEVICE_CLASS_HUMIDIFIER = "humidifier";
-export const HUMIDIFIER_DEVICE_CLASS_DEHUMIDIFIER = "dehumidifier";

src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts

@@ -10,7 +10,6 @@ import {
   TemplateResult,
 } from "lit-element";
 import "../../components/dialog/ha-paper-dialog";
-import "../../components/ha-circular-progress";
 import "../../components/ha-switch";
 import "../../components/ha-formfield";
 import type { HaSwitch } from "../../components/ha-switch";
@@ -76,7 +75,7 @@ class DialogConfigEntrySystemOptions extends LitElement {
           ${this._loading
             ? html`
                 <div class="init-spinner">
-                  <ha-circular-progress active></ha-circular-progress>
+                  <paper-spinner-lite active></paper-spinner-lite>
                 </div>
               `
             : html`
@@ -180,7 +179,7 @@ class DialogConfigEntrySystemOptions extends LitElement {
         }
 
         .error {
-          color: var(--error-color);
+          color: var(--google-red-500);
         }
       `,
     ];

src/dialogs/config-flow/dialog-data-entry-flow.ts

@@ -1,7 +1,7 @@
 import "@material/mwc-button";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import "../../components/ha-icon-button";
-import "../../components/ha-circular-progress";
+import "@polymer/paper-spinner/paper-spinner";
 import "@polymer/paper-tooltip/paper-tooltip";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import {

src/dialogs/config-flow/step-flow-form.ts

@@ -1,5 +1,5 @@
 import "@material/mwc-button";
-import "../../components/ha-circular-progress";
+import "@polymer/paper-spinner/paper-spinner";
 import "@polymer/paper-tooltip/paper-tooltip";
 import {
   css,
@@ -76,7 +76,7 @@ class StepFlowForm extends LitElement {
         ${this._loading
           ? html`
               <div class="submit-spinner">
-                <ha-circular-progress active></ha-circular-progress>
+                <paper-spinner active></paper-spinner>
               </div>
             `
           : html`

src/dialogs/config-flow/step-flow-loading.ts

@@ -1,3 +1,4 @@
+import "@polymer/paper-spinner/paper-spinner-lite";
 import {
   css,
   CSSResult,
@@ -7,7 +8,6 @@ import {
   property,
   TemplateResult,
 } from "lit-element";
-import "../../components/ha-circular-progress";
 
 @customElement("step-flow-loading")
 class StepFlowLoading extends LitElement {
@@ -17,7 +17,7 @@ class StepFlowLoading extends LitElement {
     return html`
       <div class="init-spinner">
         ${this.label ? html` <div>${this.label}</div> ` : ""}
-        <ha-circular-progress active></ha-circular-progress>
+        <paper-spinner-lite active></paper-spinner-lite>
       </div>
     `;
   }
@@ -28,7 +28,7 @@ class StepFlowLoading extends LitElement {
         padding: 50px 100px;
         text-align: center;
       }
-      ha-circular-progress {
+      paper-spinner-lite {
         margin-top: 16px;
       }
     `;

src/dialogs/config-flow/step-flow-pick-handler.ts

@@ -1,5 +1,6 @@
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-item/paper-item-body";
+import "@polymer/paper-spinner/paper-spinner-lite";
 import Fuse from "fuse.js";
 import {
   css,

src/dialogs/device-registry-detail/dialog-device-registry-detail.ts

@@ -132,7 +132,7 @@ class DialogDeviceRegistryDetail extends LitElement {
           margin-right: auto;
         }
         .error {
-          color: var(--error-color);
+          color: var(--google-red-500);
         }
       `,
     ];

src/dialogs/more-info/controls/more-info-alarm_control_panel.js

@@ -34,7 +34,7 @@ class MoreInfoAlarmControlPanel extends LocalizeMixin(PolymerElement) {
           max-width: 200px;
         }
         mwc-button.disarm {
-          color: var(--error-color);
+          color: var(--google-red-500);
         }
       </style>
 

src/dialogs/more-info/controls/more-info-configurator.js

@@ -2,7 +2,7 @@ import "@material/mwc-button";
 import "@polymer/iron-flex-layout/iron-flex-layout-classes";
 import "@polymer/iron-input/iron-input";
 import "@polymer/paper-input/paper-input";
-import "../../../components/ha-circular-progress";
+import "@polymer/paper-spinner/paper-spinner";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -38,7 +38,7 @@ class MoreInfoConfigurator extends PolymerElement {
           height: 41px;
         }
 
-        ha-circular-progress {
+        paper-spinner {
           width: 14px;
           height: 14px;
           margin-right: 20px;
@@ -75,11 +75,11 @@ class MoreInfoConfigurator extends PolymerElement {
               disabled="[[isConfiguring]]"
               on-click="submitClicked"
             >
-              <ha-circular-progress
+              <paper-spinner
                 active="[[isConfiguring]]"
                 hidden="[[!isConfiguring]]"
                 alt="Configuring"
-              ></ha-circular-progress>
+              ></paper-spinner>
               [[stateObj.attributes.submit_caption]]
             </mwc-button>
           </p>

src/dialogs/more-info/controls/more-info-content.ts

@@ -14,7 +14,6 @@ import "./more-info-default";
 import "./more-info-fan";
 import "./more-info-group";
 import "./more-info-history_graph";
-import "./more-info-humidifier";
 import "./more-info-input_datetime";
 import "./more-info-light";
 import "./more-info-lock";

src/dialogs/more-info/controls/more-info-humidifier.ts

@@ -1,218 +0,0 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-listbox/paper-listbox";
-import {
-  css,
-  CSSResult,
-  html,
-  LitElement,
-  property,
-  PropertyValues,
-  TemplateResult,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
-import { fireEvent } from "../../../common/dom/fire_event";
-import { supportsFeature } from "../../../common/entity/supports-feature";
-import { computeRTLDirection } from "../../../common/util/compute_rtl";
-import "../../../components/ha-paper-dropdown-menu";
-import "../../../components/ha-paper-slider";
-import "../../../components/ha-switch";
-import {
-  HumidifierEntity,
-  HUMIDIFIER_SUPPORT_MODES,
-} from "../../../data/humidifier";
-import { HomeAssistant } from "../../../types";
-
-class MoreInfoHumidifier extends LitElement {
-  @property() public hass!: HomeAssistant;
-
-  @property() public stateObj?: HumidifierEntity;
-
-  private _resizeDebounce?: number;
-
-  protected render(): TemplateResult {
-    if (!this.stateObj) {
-      return html``;
-    }
-
-    const hass = this.hass;
-    const stateObj = this.stateObj;
-
-    const supportModes = supportsFeature(stateObj, HUMIDIFIER_SUPPORT_MODES);
-
-    const rtlDirection = computeRTLDirection(hass);
-
-    return html`
-      <div
-        class=${classMap({
-          "has-modes": supportModes,
-        })}
-      >
-        <div class="container-humidity">
-          <div>${hass.localize("ui.card.humidifier.humidity")}</div>
-          <div class="single-row">
-            <div class="target-humidity">
-              ${stateObj.attributes.humidity} %
-            </div>
-            <ha-paper-slider
-              class="humidity"
-              step="1"
-              pin
-              ignore-bar-touch
-              dir=${rtlDirection}
-              .min=${stateObj.attributes.min_humidity}
-              .max=${stateObj.attributes.max_humidity}
-              .secondaryProgress=${stateObj.attributes.max_humidity}
-              .value=${stateObj.attributes.humidity}
-              @change=${this._targetHumiditySliderChanged}
-            >
-            </ha-paper-slider>
-          </div>
-        </div>
-
-        ${supportModes
-          ? html`
-              <div class="container-modes">
-                <ha-paper-dropdown-menu
-                  label-float
-                  dynamic-align
-                  .label=${hass.localize("ui.card.humidifier.mode")}
-                >
-                  <paper-listbox
-                    slot="dropdown-content"
-                    attr-for-selected="item-name"
-                    .selected=${stateObj.attributes.mode}
-                    @selected-changed=${this._handleModeChanged}
-                  >
-                    ${stateObj.attributes.available_modes!.map(
-                      (mode) => html`
-                        <paper-item item-name=${mode}>
-                          ${hass.localize(
-                            `state_attributes.humidifier.mode.${mode}`
-                          ) || mode}
-                        </paper-item>
-                      `
-                    )}
-                  </paper-listbox>
-                </ha-paper-dropdown-menu>
-              </div>
-            `
-          : ""}
-      </div>
-    `;
-  }
-
-  protected updated(changedProps: PropertyValues) {
-    super.updated(changedProps);
-    if (!changedProps.has("stateObj") || !this.stateObj) {
-      return;
-    }
-
-    if (this._resizeDebounce) {
-      clearTimeout(this._resizeDebounce);
-    }
-    this._resizeDebounce = window.setTimeout(() => {
-      fireEvent(this, "iron-resize");
-      this._resizeDebounce = undefined;
-    }, 500);
-  }
-
-  private _targetHumiditySliderChanged(ev) {
-    const newVal = ev.target.value;
-    this._callServiceHelper(
-      this.stateObj!.attributes.humidity,
-      newVal,
-      "set_humidity",
-      { humidity: newVal }
-    );
-  }
-
-  private _handleModeChanged(ev) {
-    const newVal = ev.detail.value || null;
-    this._callServiceHelper(
-      this.stateObj!.attributes.mode,
-      newVal,
-      "set_mode",
-      { mode: newVal }
-    );
-  }
-
-  private async _callServiceHelper(
-    oldVal: unknown,
-    newVal: unknown,
-    service: string,
-    data: {
-      entity_id?: string;
-      [key: string]: unknown;
-    }
-  ) {
-    if (oldVal === newVal) {
-      return;
-    }
-
-    data.entity_id = this.stateObj!.entity_id;
-    const curState = this.stateObj;
-
-    await this.hass.callService("humidifier", service, data);
-
-    // We reset stateObj to re-sync the inputs with the state. It will be out
-    // of sync if our service call did not result in the entity to be turned
-    // on. Since the state is not changing, the resync is not called automatic.
-    await new Promise((resolve) => setTimeout(resolve, 2000));
-
-    // No need to resync if we received a new state.
-    if (this.stateObj !== curState) {
-      return;
-    }
-
-    this.stateObj = undefined;
-    await this.updateComplete;
-    // Only restore if not set yet by a state change
-    if (this.stateObj === undefined) {
-      this.stateObj = curState;
-    }
-  }
-
-  static get styles(): CSSResult {
-    return css`
-      :host {
-        color: var(--primary-text-color);
-      }
-
-      ha-paper-dropdown-menu {
-        width: 100%;
-      }
-
-      paper-item {
-        cursor: pointer;
-      }
-
-      ha-paper-slider {
-        width: 100%;
-      }
-
-      .container-humidity .single-row {
-        display: flex;
-        height: 50px;
-      }
-
-      .target-humidity {
-        width: 90px;
-        font-size: 200%;
-        margin: auto;
-        direction: ltr;
-      }
-
-      .humidity {
-        --paper-slider-active-color: var(--paper-blue-400);
-        --paper-slider-secondary-color: var(--paper-blue-400);
-      }
-
-      .single-row {
-        padding: 8px 0;
-      }
-    `;
-  }
-}
-
-customElements.define("more-info-humidifier", MoreInfoHumidifier);

src/dialogs/more-info/more-info-controls.js

@@ -64,7 +64,7 @@ class MoreInfoControls extends LocalizeMixin(EventsMixin(PolymerElement)) {
         }
 
         mwc-button.warning {
-          --mdc-theme-primary: var(--error-color);
+          --mdc-theme-primary: var(--google-red-500);
         }
 
         :host([domain="camera"]) paper-dialog-scrollable {

src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts

@@ -446,7 +446,7 @@ export class HaVoiceCommandDialog extends LitElement {
         }
 
         .message.error {
-          background-color: var(--error-color);
+          background-color: var(--google-red-500);
           color: var(--text-primary-color);
         }
 

src/fake_data/provide_hass.ts

@@ -114,7 +114,6 @@ export const provideHass = (
   );
 
   const localLanguage = getLocalLanguage();
-  const noop = () => undefined;
 
   const hassObj: MockHomeAssistant = {
     // Home Assistant properties
@@ -124,8 +123,8 @@ export const provideHass = (
       },
     } as any,
     connection: {
-      addEventListener: noop,
-      removeEventListener: noop,
+      addEventListener: () => undefined,
+      removeEventListener: () => undefined,
       sendMessage: (msg) => {
         const callback = wsCommands[msg.type];
 
@@ -169,8 +168,6 @@ export const provideHass = (
           );
         };
       },
-      suspendReconnectUntil: noop,
-      suspend: noop,
       socket: {
         readyState: WebSocket.OPEN,
       },

src/html/index.html.template

@@ -52,7 +52,7 @@
     <%= renderTemplate('_js_base') %>
     <%= renderTemplate('_preload_roboto') %>
 
-    <script crossorigin="use-credentials">
+    <script>
       import("<%= latestCoreJS %>");
       import("<%= latestAppJS %>");
       window.customPanelJS = "<%= latestCustomPanelJS %>";

src/layouts/ha-init-page.ts

@@ -1,7 +1,7 @@
 import "@material/mwc-button";
+import "@polymer/paper-spinner/paper-spinner-lite";
 import { css, CSSResult, html, LitElement, property } from "lit-element";
 import { removeInitSkeleton } from "../util/init-skeleton";
-import "../components/ha-circular-progress";
 
 class HaInitPage extends LitElement {
   @property({ type: Boolean }) public error = false;
@@ -28,7 +28,7 @@ class HaInitPage extends LitElement {
                 : ""}
             `
           : html`
-              <ha-circular-progress active></ha-circular-progress>
+              <paper-spinner-lite active></paper-spinner-lite>
               <p>Loading data</p>
             `}
       </div>
@@ -52,7 +52,7 @@ class HaInitPage extends LitElement {
         justify-content: center;
         align-items: center;
       }
-      ha-circular-progress {
+      paper-spinner-lite {
         margin-top: 9px;
       }
       a {

src/layouts/hass-loading-screen.ts

@@ -1,4 +1,5 @@
 import "@polymer/app-layout/app-toolbar/app-toolbar";
+import "@polymer/paper-spinner/paper-spinner-lite";
 import {
   css,
   CSSResultArray,
@@ -8,7 +9,6 @@ import {
   property,
   TemplateResult,
 } from "lit-element";
-import "../components/ha-circular-progress";
 import "../components/ha-menu-button";
 import "../components/ha-icon-button-arrow-prev";
 import { haStyle } from "../resources/styles";
@@ -39,7 +39,7 @@ class HassLoadingScreen extends LitElement {
             `}
       </app-toolbar>
       <div class="content">
-        <ha-circular-progress active></ha-circular-progress>
+        <paper-spinner-lite active></paper-spinner-lite>
       </div>
     `;
   }

src/layouts/hass-router-page.ts

@@ -147,8 +147,6 @@ export class HassRouterPage extends UpdatingElement {
       ? routeOptions.load()
       : Promise.resolve();
 
-    let showLoadingScreenTimeout: undefined | number;
-
     // Check when loading the page source failed.
     loadProm.catch((err) => {
       // eslint-disable-next-line
@@ -160,13 +158,7 @@ export class HassRouterPage extends UpdatingElement {
       }
 
       // Removes either loading screen or the panel
-      if (this.lastChild) {
-        this.removeChild(this.lastChild!);
-      }
-
-      if (showLoadingScreenTimeout) {
-        clearTimeout(showLoadingScreenTimeout);
-      }
+      this.removeChild(this.lastChild!);
 
       // Show error screen
       const errorEl = document.createElement("hass-error-screen");
@@ -185,7 +177,7 @@ export class HassRouterPage extends UpdatingElement {
     // That way we won't have a double fast flash on fast connections.
     let created = false;
 
-    showLoadingScreenTimeout = window.setTimeout(() => {
+    setTimeout(() => {
       if (created || this._currentPage !== newPage) {
         return;
       }

src/layouts/home-assistant-main.ts

@@ -2,20 +2,20 @@ import "@polymer/app-layout/app-drawer-layout/app-drawer-layout";
 import type { AppDrawerLayoutElement } from "@polymer/app-layout/app-drawer-layout/app-drawer-layout";
 import "@polymer/app-layout/app-drawer/app-drawer";
 import type { AppDrawerElement } from "@polymer/app-layout/app-drawer/app-drawer";
+import "@polymer/iron-media-query/iron-media-query";
 import {
   css,
   CSSResult,
   html,
   LitElement,
   property,
-  customElement,
   PropertyValues,
   TemplateResult,
 } from "lit-element";
-import { listenMediaQuery } from "../common/dom/media_query";
 import { fireEvent } from "../common/dom/fire_event";
 import { toggleAttribute } from "../common/dom/toggle_attribute";
 import { showNotificationDrawer } from "../dialogs/notifications/show-notification-drawer";
+import type { PolymerChangedEvent } from "../polymer-types";
 import type { HomeAssistant, Route } from "../types";
 import "./partial-panel-resolver";
 
@@ -29,7 +29,6 @@ declare global {
   }
 }
 
-@customElement("home-assistant-main")
 class HomeAssistantMain extends LitElement {
   @property() public hass!: HomeAssistant;
 
@@ -50,6 +49,11 @@ class HomeAssistantMain extends LitElement {
       !sidebarNarrow || NON_SWIPABLE_PANELS.indexOf(hass.panelUrl) !== -1;
 
     return html`
+      <iron-media-query
+        query="(max-width: 870px)"
+        @query-matches-changed=${this._narrowChanged}
+      ></iron-media-query>
+
       <app-drawer-layout
         fullbleed
         .forceNarrow=${sidebarNarrow}
@@ -104,10 +108,6 @@ class HomeAssistantMain extends LitElement {
         narrow: this.narrow!,
       });
     });
-
-    listenMediaQuery("(max-width: 870px)", (matches) => {
-      this.narrow = matches;
-    });
   }
 
   protected updated(changedProps: PropertyValues) {
@@ -131,6 +131,10 @@ class HomeAssistantMain extends LitElement {
     }
   }
 
+  private _narrowChanged(ev: PolymerChangedEvent<boolean>) {
+    this.narrow = ev.detail.value;
+  }
+
   private get _sidebarNarrow() {
     return this.narrow || this.hass.dockedSidebar === "always_hidden";
   }
@@ -166,8 +170,4 @@ class HomeAssistantMain extends LitElement {
   }
 }
 
-declare global {
-  interface HTMLElementTagNameMap {
-    "home-assistant-main": HomeAssistantMain;
-  }
-}
+customElements.define("home-assistant-main", HomeAssistantMain);

src/layouts/home-assistant.ts

@@ -1,5 +1,5 @@
 import "@polymer/app-route/app-location";
-import { html, property, PropertyValues, customElement } from "lit-element";
+import { html, property, PropertyValues } from "lit-element";
 import { navigate } from "../common/navigate";
 import { getStorageDefaultPanelUrlPath } from "../data/panel";
 import "../resources/custom-card-support";
@@ -12,7 +12,6 @@ import {
 import "./ha-init-page";
 import "./home-assistant-main";
 
-@customElement("home-assistant")
 export class HomeAssistantAppEl extends HassElement {
   @property() private _route?: Route;
 
@@ -22,10 +21,6 @@ export class HomeAssistantAppEl extends HassElement {
 
   private _haVersion?: string;
 
-  private _hiddenTimeout?: number;
-
-  private _visiblePromiseResolve?: () => void;
-
   protected render() {
     const hass = this.hass;
 
@@ -75,16 +70,6 @@ export class HomeAssistantAppEl extends HassElement {
     super.hassConnected();
     // @ts-ignore
     this._loadHassTranslations(this.hass!.language, "state");
-
-    this.addEventListener("unsuspend-app", () => this._onVisible(), false);
-
-    document.addEventListener(
-      "visibilitychange",
-      () => this._checkVisibility(),
-      false
-    );
-    document.addEventListener("freeze", () => this._suspendApp());
-    document.addEventListener("resume", () => this._checkVisibility());
   }
 
   protected hassReconnected() {
@@ -151,60 +136,6 @@ export class HomeAssistantAppEl extends HassElement {
         ? route.path.substr(1)
         : route.path.substr(1, dividerPos - 1);
   }
-
-  protected _checkVisibility() {
-    if (document.hidden) {
-      // If the document is hidden, we will prevent reconnects until we are visible again
-      this._onHidden();
-    } else {
-      this._onVisible();
-    }
-  }
-
-  private _onHidden() {
-    if (this._visiblePromiseResolve) {
-      return;
-    }
-    this.hass!.connection.suspendReconnectUntil(
-      new Promise((resolve) => {
-        this._visiblePromiseResolve = resolve;
-      })
-    );
-    // We close the connection to Home Assistant after being hidden for 5 minutes
-    this._hiddenTimeout = window.setTimeout(() => {
-      this._hiddenTimeout = undefined;
-      // setTimeout can be delayed in the background and only fire
-      // when we switch to the tab or app again (Hey Android!)
-      if (!document.hidden) {
-        this._suspendApp();
-      }
-    }, 300000);
-    window.addEventListener("focus", () => this._onVisible(), { once: true });
-  }
-
-  private _suspendApp() {
-    if (!this.hass!.connection.connected) {
-      return;
-    }
-    this.hass!.connection.suspend();
-  }
-
-  private _onVisible() {
-    // Clear timer to close the connection
-    if (this._hiddenTimeout) {
-      clearTimeout(this._hiddenTimeout);
-      this._hiddenTimeout = undefined;
-    }
-    // Unsuspend the reconnect
-    if (this._visiblePromiseResolve) {
-      this._visiblePromiseResolve();
-      this._visiblePromiseResolve = undefined;
-    }
-  }
 }
 
-declare global {
-  interface HTMLElementTagNameMap {
-    "home-assistant": HomeAssistantAppEl;
-  }
-}
+customElements.define("home-assistant", HomeAssistantAppEl);

src/layouts/loading-screen.ts

@@ -1,3 +1,4 @@
+import "@polymer/paper-spinner/paper-spinner-lite";
 import {
   css,
   CSSResult,
@@ -6,12 +7,11 @@ import {
   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> `;
+    return html` <paper-spinner-lite active></paper-spinner-lite> `;
   }
 
   static get styles(): CSSResult {

src/layouts/partial-panel-resolver.ts

@@ -13,8 +13,6 @@ import {
   STATE_NOT_RUNNING,
   STATE_RUNNING,
 } from "home-assistant-js-websocket";
-import { CustomPanelInfo } from "../data/panel_custom";
-import { deepActiveElement } from "../common/dom/deep-active-element";
 
 const CACHE_URL_PATHS = ["lovelace", "developer-tools"];
 const COMPONENTS = {
@@ -93,22 +91,18 @@ class PartialPanelResolver extends HassRouterPage {
 
   private _waitForStart = false;
 
-  private _disconnectedPanel?: HTMLElement;
-
-  private _disconnectedActiveElement?: HTMLElement;
+  private _disconnectedPanel?: ChildNode;
 
   private _hiddenTimeout?: number;
 
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
 
-    // Attach listeners for visibility
     document.addEventListener(
       "visibilitychange",
-      () => this._checkVisibility(),
+      () => this._handleVisibilityChange(),
       false
     );
-    document.addEventListener("resume", () => this._checkVisibility());
   }
 
   protected updated(changedProps: PropertyValues) {
@@ -161,58 +155,24 @@ class PartialPanelResolver extends HassRouterPage {
     }
   }
 
-  private _checkVisibility() {
+  private _handleVisibilityChange() {
     if (document.hidden) {
-      this._onHidden();
-    } else {
-      this._onVisible();
-    }
-  }
-
-  private _onHidden() {
-    this._hiddenTimeout = window.setTimeout(() => {
-      this._hiddenTimeout = undefined;
-      // setTimeout can be delayed in the background and only fire
-      // when we switch to the tab or app again (Hey Android!)
-      if (!document.hidden) {
-        return;
-      }
-      const curPanel = this.hass.panels[this._currentPage];
-      if (
-        this.lastChild &&
-        // iFrames will lose their state when disconnected
-        // Do not disconnect any iframe panel
-        curPanel.component_name !== "iframe" &&
-        // Do not disconnect any custom panel that embeds into iframe (ie hassio)
-        (curPanel.component_name !== "custom" ||
-          !(curPanel.config as CustomPanelInfo).config._panel_custom
-            .embed_iframe)
-      ) {
-        this._disconnectedPanel = this.lastChild as HTMLElement;
-        const activeEl = deepActiveElement(
-          this._disconnectedPanel.shadowRoot || undefined
-        );
-        if (activeEl instanceof HTMLElement) {
-          this._disconnectedActiveElement = activeEl;
+      this._hiddenTimeout = window.setTimeout(() => {
+        this._hiddenTimeout = undefined;
+        if (this.lastChild) {
+          this._disconnectedPanel = this.lastChild;
+          this.removeChild(this.lastChild);
         }
-        this.removeChild(this.lastChild);
+      }, 300000);
+    } else {
+      if (this._hiddenTimeout) {
+        clearTimeout(this._hiddenTimeout);
+        this._hiddenTimeout = undefined;
+      }
+      if (this._disconnectedPanel) {
+        this.appendChild(this._disconnectedPanel);
+        this._disconnectedPanel = undefined;
       }
-    }, 300000);
-    window.addEventListener("focus", () => this._onVisible(), { once: true });
-  }
-
-  private _onVisible() {
-    if (this._hiddenTimeout) {
-      clearTimeout(this._hiddenTimeout);
-      this._hiddenTimeout = undefined;
-    }
-    if (this._disconnectedPanel) {
-      this.appendChild(this._disconnectedPanel);
-      this._disconnectedPanel = undefined;
-    }
-    if (this._disconnectedActiveElement) {
-      this._disconnectedActiveElement.focus();
-      this._disconnectedActiveElement = undefined;
     }
   }
 

src/panels/config/areas/dialog-area-registry-detail.ts

@@ -157,7 +157,7 @@ class DialogAreaDetail extends LitElement {
           margin-right: auto;
         }
         .error {
-          color: var(--error-color);
+          color: var(--google-red-500);
         }
       `,
     ];

src/panels/config/automation/ha-automation-editor.ts

@@ -445,7 +445,7 @@ export class HaAutomationEditor extends LitElement {
         .errors {
           padding: 20px;
           font-weight: bold;
-          color: var(--error-color);
+          color: var(--google-red-500);
         }
         .content {
           padding-bottom: 20px;

src/panels/config/automation/thingtalk/dialog-thingtalk.ts

@@ -2,7 +2,7 @@ import "@material/mwc-button";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import "@polymer/paper-input/paper-input";
 import type { PaperInputElement } from "@polymer/paper-input/paper-input";
-import "../../../../components/ha-circular-progress";
+import "@polymer/paper-spinner/paper-spinner";
 import {
   css,
   CSSResult,
@@ -132,10 +132,10 @@ class DialogThingtalk extends LitElement {
             Skip
           </mwc-button>
           <mwc-button @click="${this._generate}" .disabled=${this._submitting}>
-            <ha-circular-progress
+            <paper-spinner
               ?active="${this._submitting}"
               alt="Creating your automation..."
-            ></ha-circular-progress>
+            ></paper-spinner>
             Create automation
           </mwc-button>
         </div>
@@ -245,19 +245,19 @@ class DialogThingtalk extends LitElement {
         mwc-button.left {
           margin-right: auto;
         }
-        mwc-button ha-circular-progress {
+        mwc-button paper-spinner {
           width: 14px;
           height: 14px;
           margin-right: 20px;
         }
-        ha-circular-progress {
+        paper-spinner {
           display: none;
         }
-        ha-circular-progress[active] {
+        paper-spinner[active] {
           display: block;
         }
         .error {
-          color: var(--error-color);
+          color: var(--google-red-500);
         }
         .attribution {
           color: var(--secondary-text-color);

src/panels/config/automation/thingtalk/ha-thingtalk-placeholders.ts

@@ -480,7 +480,7 @@ export class ThingTalkPlaceholders extends SubscribeMixin(LitElement) {
           font-weight: 500;
         }
         .error {
-          color: var(--error-color);
+          color: var(--google-red-500);
         }
       `,
     ];

src/panels/config/cloud/account/cloud-webhooks.ts

@@ -1,6 +1,6 @@
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
-import "../../../../components/ha-circular-progress";
+import "@polymer/paper-spinner/paper-spinner";
 import { html, LitElement, property, PropertyValues } from "lit-element";
 import "../../../../components/ha-card";
 import "../../../../components/ha-switch";
@@ -119,7 +119,7 @@ export class CloudWebhooks extends LitElement {
           ${this._progress.includes(entry.webhook_id)
             ? html`
                 <div class="progress">
-                  <ha-circular-progress active></ha-circular-progress>
+                  <paper-spinner active></paper-spinner>
                 </div>
               `
             : this._cloudHooks![entry.webhook_id]

src/panels/config/cloud/forgot-password/cloud-forgot-password.js

@@ -32,7 +32,7 @@ class CloudForgotPassword extends LocalizeMixin(EventsMixin(PolymerElement)) {
           margin: 0;
         }
         .error {
-          color: var(--error-color);
+          color: var(--google-red-500);
         }
         .card-actions {
           display: flex;

src/panels/config/cloud/google-assistant/cloud-google-assistant.ts

@@ -143,17 +143,15 @@ class CloudGoogleAssistant extends LitElement {
             </ha-formfield>
             ${entity.might_2fa
               ? html`
-                  <ha-formfield
-                    .label=${this.hass!.localize(
+                  <ha-switch
+                    .entityId=${entity.entity_id}
+                    .checked=${Boolean(config.disable_2fa)}
+                    @change=${this._disable2FAChanged}
+                  >
+                    ${this.hass!.localize(
                       "ui.panel.config.cloud.google.disable_2FA"
                     )}
-                  >
-                    <ha-switch
-                      .entityId=${entity.entity_id}
-                      .checked=${Boolean(config.disable_2fa)}
-                      @change=${this._disable2FAChanged}
-                    ></ha-switch>
-                  </ha-formfield>
+                  </ha-switch>
                 `
               : ""}
           </div>
@@ -377,9 +375,6 @@ class CloudGoogleAssistant extends LitElement {
       state-info {
         cursor: pointer;
       }
-      ha-formfield {
-        display: block;
-      }
       ha-switch {
         padding: 8px 0;
       }

src/panels/config/cloud/login/cloud-login.js

@@ -52,7 +52,7 @@ class CloudLogin extends LocalizeMixin(
           margin: 0;
         }
         .error {
-          color: var(--error-color);
+          color: var(--google-red-500);
         }
         .card-actions {
           display: flex;

src/panels/config/cloud/register/cloud-register.js

@@ -39,7 +39,7 @@ class CloudRegister extends LocalizeMixin(EventsMixin(PolymerElement)) {
         margin: 0;
       }
       .error {
-        color: var(--error-color);
+        color: var(--google-red-500);
       }
       .card-actions {
         display: flex;

src/panels/config/core/ha-config-section-core.js

@@ -27,7 +27,7 @@ class HaConfigSectionCore extends LocalizeMixin(PolymerElement) {
         }
 
         .validate-result {
-          color: var(--success-color);
+          color: var(--google-green-500);
           font-weight: 500;
           margin-bottom: 1em;
         }
@@ -37,7 +37,7 @@ class HaConfigSectionCore extends LocalizeMixin(PolymerElement) {
         }
 
         .config-invalid .text {
-          color: var(--error-color);
+          color: var(--google-red-500);
           font-weight: 500;
         }
 

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

@@ -26,8 +26,7 @@ import { mdiCloudLock } from "@mdi/js";
 class HaConfigDashboard extends LitElement {
   @property() public hass!: HomeAssistant;
 
-  @property({ type: Boolean, reflect: true })
-  public narrow!: boolean;
+  @property() public narrow!: boolean;
 
   @property() public isWide!: boolean;
 
@@ -36,96 +35,6 @@ class HaConfigDashboard extends LitElement {
   @property() public showAdvanced!: boolean;
 
   protected render(): TemplateResult {
-    const content = html` <ha-config-section
-      .narrow=${this.narrow}
-      .isWide=${this.isWide}
-    >
-      <div slot="header">
-        ${this.hass.localize("ui.panel.config.header")}
-      </div>
-
-      <div slot="introduction">
-        ${this.hass.localize("ui.panel.config.introduction")}
-      </div>
-
-      ${this.cloudStatus && isComponentLoaded(this.hass, "cloud")
-        ? html`
-            <ha-card>
-              <ha-config-navigation
-                .hass=${this.hass}
-                .showAdvanced=${this.showAdvanced}
-                .pages=${[
-                  {
-                    component: "cloud",
-                    path: "/config/cloud",
-                    translationKey: "ui.panel.config.cloud.caption",
-                    info: this.cloudStatus,
-                    iconPath: mdiCloudLock,
-                  },
-                ]}
-              ></ha-config-navigation>
-            </ha-card>
-          `
-        : ""}
-      ${Object.values(configSections).map(
-        (section) => html`
-          <ha-card>
-            <ha-config-navigation
-              .hass=${this.hass}
-              .showAdvanced=${this.showAdvanced}
-              .pages=${section}
-            ></ha-config-navigation>
-          </ha-card>
-        `
-      )}
-      ${isComponentLoaded(this.hass, "zha")
-        ? html`
-            <div class="promo-advanced">
-              ${this.hass.localize(
-                "ui.panel.config.integration_panel_move.missing_zha",
-                "integrations_page",
-                html`<a href="/config/integrations">
-                  ${this.hass.localize(
-                    "ui.panel.config.integration_panel_move.link_integration_page"
-                  )}
-                </a>`
-              )}
-            </div>
-          `
-        : ""}
-      ${isComponentLoaded(this.hass, "zwave")
-        ? html`
-            <div class="promo-advanced">
-              ${this.hass.localize(
-                "ui.panel.config.integration_panel_move.missing_zwave",
-                "integrations_page",
-                html`<a href="/config/integrations">
-                  ${this.hass.localize(
-                    "ui.panel.config.integration_panel_move.link_integration_page"
-                  )}
-                </a>`
-              )}
-            </div>
-          `
-        : ""}
-      ${!this.showAdvanced
-        ? html`
-            <div class="promo-advanced">
-              ${this.hass.localize("ui.panel.config.advanced_mode.hint_enable")}
-              <a href="/profile"
-                >${this.hass.localize(
-                  "ui.panel.config.advanced_mode.link_profile_page"
-                )}</a
-              >.
-            </div>
-          `
-        : ""}
-    </ha-config-section>`;
-
-    if (!this.narrow) {
-      return content;
-    }
-
     return html`
       <app-header-layout has-scrolling-region>
         <app-header fixed slot="header">
@@ -137,7 +46,90 @@ class HaConfigDashboard extends LitElement {
           </app-toolbar>
         </app-header>
 
-        ${content}
+        <ha-config-section .narrow=${this.narrow} .isWide=${this.isWide}>
+          <div slot="header">
+            ${this.hass.localize("ui.panel.config.header")}
+          </div>
+
+          <div slot="introduction">
+            ${this.hass.localize("ui.panel.config.introduction")}
+          </div>
+
+          ${this.cloudStatus && isComponentLoaded(this.hass, "cloud")
+            ? html`
+                <ha-card>
+                  <ha-config-navigation
+                    .hass=${this.hass}
+                    .showAdvanced=${this.showAdvanced}
+                    .pages=${[
+                      {
+                        component: "cloud",
+                        path: "/config/cloud",
+                        translationKey: "ui.panel.config.cloud.caption",
+                        info: this.cloudStatus,
+                        iconPath: mdiCloudLock,
+                      },
+                    ]}
+                  ></ha-config-navigation>
+                </ha-card>
+              `
+            : ""}
+          ${Object.values(configSections).map(
+            (section) => html`
+              <ha-card>
+                <ha-config-navigation
+                  .hass=${this.hass}
+                  .showAdvanced=${this.showAdvanced}
+                  .pages=${section}
+                ></ha-config-navigation>
+              </ha-card>
+            `
+          )}
+          ${isComponentLoaded(this.hass, "zha")
+            ? html`
+                <div class="promo-advanced">
+                  ${this.hass.localize(
+                    "ui.panel.config.integration_panel_move.missing_zha",
+                    "integrations_page",
+                    html`<a href="/config/integrations">
+                      ${this.hass.localize(
+                        "ui.panel.config.integration_panel_move.link_integration_page"
+                      )}
+                    </a>`
+                  )}
+                </div>
+              `
+            : ""}
+          ${isComponentLoaded(this.hass, "zwave")
+            ? html`
+                <div class="promo-advanced">
+                  ${this.hass.localize(
+                    "ui.panel.config.integration_panel_move.missing_zwave",
+                    "integrations_page",
+                    html`<a href="/config/integrations">
+                      ${this.hass.localize(
+                        "ui.panel.config.integration_panel_move.link_integration_page"
+                      )}
+                    </a>`
+                  )}
+                </div>
+              `
+            : ""}
+          ${!this.showAdvanced
+            ? html`
+                <div class="promo-advanced">
+                  ${this.hass.localize(
+                    "ui.panel.config.advanced_mode.hint_enable"
+                  )}
+                  <a href="/profile"
+                    >${this.hass.localize(
+                      "ui.panel.config.advanced_mode.link_profile_page"
+                    )}</a
+                  >.
+                </div>
+              `
+            : ""}
+        </ha-config-section>
       </app-header-layout>
     `;
   }
@@ -153,9 +145,6 @@ class HaConfigDashboard extends LitElement {
           margin-bottom: 24px;
         }
         ha-config-section {
-          margin-top: -12px;
-        }
-        :host([narrow]) ha-config-section {
           margin-top: -20px;
         }
         ha-card {

src/panels/config/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts

@@ -232,9 +232,6 @@ class DialogMQTTDeviceDebugInfo extends LitElement {
         .triggerlistitem {
           margin-bottom: 12px;
         }
-        ha-formfield {
-          display: block;
-        }
       `,
     ];
   }

src/panels/config/entities/dialog-entity-editor.ts

@@ -292,7 +292,7 @@ export class DialogEntityEditor extends LitElement {
         }
 
         mwc-button.warning {
-          --mdc-theme-primary: var(--error-color);
+          --mdc-theme-primary: var(--google-red-500);
         }
 
         :host([rtl]) app-toolbar {

src/panels/config/entities/editor-tabs/settings/entity-settings-helper-tab.ts

@@ -241,10 +241,10 @@ export class EntityRegistrySettingsHelper extends LitElement {
         margin-bottom: -20px;
       }
       mwc-button.warning {
-        --mdc-theme-primary: var(--error-color);
+        --mdc-theme-primary: var(--google-red-500);
       }
       .error {
-        color: var(--error-color);
+        color: var(--google-red-500);
       }
       .row {
         margin-top: 8px;

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

@@ -180,7 +180,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
                 >
                   <ha-icon
                     style=${styleMap({
-                      color: entity.unavailable ? "var(--error-color)" : "",
+                      color: entity.unavailable ? "var(--google-red-500)" : "",
                     })}
                     .icon=${entity.restored
                       ? "hass:restore-alert"

src/panels/config/entities/show-dialog-entity-editor.ts

@@ -1,6 +1,6 @@
 import { fireEvent } from "../../../common/dom/fire_event";
 import { EntityRegistryEntry } from "../../../data/entity_registry";
-import type { DialogEntityEditor } from "./dialog-entity-editor";
+import { DialogEntityEditor } from "./dialog-entity-editor";
 
 export interface EntityRegistryDetailDialogParams {
   entry?: EntityRegistryEntry;