Updates

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

.dockerignore

@@ -1,4 +0,0 @@
-node_modules
-hass_frontend
-hass_frontend_es5
-.git

.eslintrc.json

@@ -1,7 +1,7 @@
 {
   "extends": [
-    "plugin:@typescript-eslint/recommended",
     "airbnb-typescript/base",
+    "plugin:@typescript-eslint/recommended",
     "plugin:wc/recommended",
     "plugin:lit/recommended",
     "prettier",
@@ -45,16 +45,16 @@
     "func-names": 0,
     "prefer-arrow-callback": 0,
     "no-underscore-dangle": 0,
-    "no-var": 0,
     "strict": 0,
     "prefer-spread": 0,
     "no-plusplus": 0,
-    "no-bitwise": 0,
+    "no-bitwise": 2,
     "comma-dangle": 0,
     "vars-on-top": 0,
     "no-continue": 0,
     "no-param-reassign": 0,
     "no-multi-assign": 0,
+    "no-console": 2,
     "radix": 0,
     "no-alert": 0,
     "no-return-await": 0,

.github/ISSUE_TEMPLATE/BUG_REPORT.md

@@ -51,7 +51,7 @@ DO NOT DELETE ANY TEXT from this template! Otherwise, your issue may be closed w
 <!--
   Provide details about the versions you are using, which helps us reproducing
   and finding the issue quicker. Version information is found in the
-  Home Assistant frontend: Developer tools -> Info.
+  Home Assistant frontend: Configuration -> Info.
 
   Browser version and operating system is important! Please try to replicate
   your issue in a different browser and be sure to include your findings.

.github/workflows/ci.yaml

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

.github/workflows/codeql-analysis.yml

@@ -0,0 +1,60 @@
+name: "CodeQL"
+
+on:
+  push:
+    branches: [dev, master]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [dev]
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+
+    strategy:
+      fail-fast: false
+      matrix:
+        # Override automatic language detection by changing the below list
+        # Supported options are ['csharp', 'cpp', 'go', 'java', 'javascript', 'python']
+        language: ['javascript']
+        # Learn more...
+        # https://docs.github.com/en/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#overriding-automatic-language-detection
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v2
+      with:
+        # We must fetch at least the immediate parents so that if this is
+        # a pull request then we can checkout the head.
+        fetch-depth: 2
+
+    # If this run was triggered by a pull request event, then checkout
+    # the head of the pull request instead of the merge commit.
+    - run: git checkout HEAD^2
+      if: ${{ github.event_name == 'pull_request' }}
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v1
+      with:
+        languages: ${{ matrix.language }}
+
+    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+    # If this step fails, then you should remove it and run the build manually (see below)
+    - name: Autobuild
+      uses: github/codeql-action/autobuild@v1
+
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 https://git.io/JvXDl
+
+    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+    #    and modify them (or add more) to build your code if your project
+    #    uses a compiled language
+
+    #- run: |
+    #   make bootstrap
+    #   make release
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v1

.github/workflows/release-drafter.yaml

@@ -0,0 +1,14 @@
+name: Release Drafter
+
+on:
+  push:
+    branches:
+      - dev
+
+jobs:
+  update_release_draft:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: release-drafter/release-drafter@v5
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

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

CODE_OF_CONDUCT.md

@@ -2,79 +2,139 @@
 
 ## Our Pledge
 
-In the interest of fostering an open and welcoming environment, we as
-contributors and maintainers pledge to making participation in our project and
-our community a harassment-free experience for everyone, regardless of age, body
-size, disability, ethnicity, gender identity and expression, level of experience,
-nationality, personal appearance, race, religion, or sexual identity and
-orientation.
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, religion, or sexual identity
+and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
 
 ## Our Standards
 
-Examples of behavior that contributes to creating a positive environment
-include:
+Examples of behavior that contributes to a positive environment for our
+community include:
 
-* Using welcoming and inclusive language
-* Being respectful of differing viewpoints and experiences
-* Gracefully accepting constructive criticism
-* Focusing on what is best for the community
-* Showing empathy towards other community members
+* Demonstrating empathy and kindness toward other people
+* Being respectful of differing opinions, viewpoints, and experiences
+* Giving and gracefully accepting constructive feedback
+* Accepting responsibility and apologizing to those affected by our mistakes,
+  and learning from the experience
+* Focusing on what is best not just for us as individuals, but for the
+  overall community
 
-Examples of unacceptable behavior by participants include:
+Examples of unacceptable behavior include:
 
-* The use of sexualized language or imagery and unwelcome sexual attention or
-advances
-* Trolling, insulting/derogatory comments, and personal or political attacks
+* The use of sexualized language or imagery, and sexual attention or
+  advances of any kind
+* Trolling, insulting or derogatory comments, and personal or political attacks
 * Public or private harassment
-* Publishing others' private information, such as a physical or electronic
-  address, without explicit permission
+* Publishing others' private information, such as a physical or email
+  address, without their explicit permission
 * Other conduct which could reasonably be considered inappropriate in a
   professional setting
 
-## Our Responsibilities
+## Enforcement Responsibilities
 
-Project maintainers are responsible for clarifying the standards of acceptable
-behavior and are expected to take appropriate and fair corrective action in
-response to any instances of unacceptable behavior.
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
 
-Project maintainers have the right and responsibility to remove, edit, or
-reject comments, commits, code, wiki edits, issues, and other contributions
-that are not aligned to this Code of Conduct, or to ban temporarily or
-permanently any contributor for other behaviors that they deem inappropriate,
-threatening, offensive, or harmful.
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
 
 ## Scope
 
-This Code of Conduct applies both within project spaces and in public spaces
-when an individual is representing the project or its community. Examples of
-representing a project or community include using an official project e-mail
-address, posting via an official social media account, or acting as an appointed
-representative at an online or offline event. Representation of a project may be
-further defined and clarified by project maintainers.
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official e-mail address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
 
 ## Enforcement
 
 Instances of abusive, harassing, or otherwise unacceptable behavior may be
-reported by contacting the project team at [safety@home-assistant.io][email]. All
-complaints will be reviewed and investigated and will result in a response that
-is deemed necessary and appropriate to the circumstances. The project team is
-obligated to maintain confidentiality with regard to the reporter of an incident.
-Further details of specific enforcement policies may be posted separately.
+reported to the community leaders responsible for enforcement at
+[safety@home-assistant.io][email] or by using the report/flag feature of
+the medium used. All complaints will be reviewed and investigated promptly and
+fairly.
 
-Project maintainers who do not follow or enforce the Code of Conduct in good
-faith may face temporary or permanent repercussions as determined by other
-members of the project's leadership.
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining
+the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series
+of actions.
+
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified period of time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or
+permanent ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified period of time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior,  harassment of an
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within
+the community.
 
 ## Attribution
 
-This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
-available [here][version].
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 2.0, available [here][version].
+
+Community Impact Guidelines were inspired by [Mozilla's code of conduct
+enforcement ladder][mozilla].
 
 ## Adoption
 
-This Code of Conduct was first adopted January 21st, 2017 and announced in [this][coc-blog] blog post.
+This Code of Conduct was first adopted January 21st, 2017 and announced in
+[this][coc-blog] blog post and has been updated on May 25th, 2020 to version
+2.0 of the [Contributor Covenant][homepage] as announced in [this][coc2-blog]
+blog post.
 
-[homepage]: http://contributor-covenant.org
-[version]: http://contributor-covenant.org/version/1/4/
+For answers to common questions about this code of conduct, see the FAQ at
+<https://www.contributor-covenant.org/faq>. Translations are available at
+<https://www.contributor-covenant.org/translations>.
+
+[coc-blog]: /blog/2017/01/21/home-assistant-governance/
+[coc2-blog]: /blog/2020/05/25/code-of-conduct-updated/
 [email]: mailto:safety@home-assistant.io
-[coc-blog]: https://home-assistant.io/blog/2017/01/21/home-assistant-governance/
+[homepage]: http://contributor-covenant.org
+[mozilla]: https://github.com/mozilla/diversity
+[version]: https://www.contributor-covenant.org/version/2/0/code_of_conduct.html

Dockerfile

@@ -1,31 +0,0 @@
-FROM node:8.11.1-alpine
-
-# install yarn
-ENV PATH /root/.yarn/bin:$PATH
-
-## Install/force base tools
-RUN apk update \
-  && apk add make g++ curl bash binutils tar git python2 python3 \
-  && rm -rf /var/cache/apk/* \
-  && /bin/bash \
-  && touch ~/.bashrc
-
-## Install yarn
-RUN curl -o- -L https://yarnpkg.com/install.sh | bash
-
-## Setup the project
-RUN mkdir -p /frontend
-
-WORKDIR /frontend
-
-COPY package.json yarn.lock ./
-
-RUN yarn install --frozen-lockfile
-
-COPY . .
-
-COPY script/docker_entrypoint.sh /usr/bin/docker_entrypoint.sh
-
-RUN chmod +x /usr/bin/docker_entrypoint.sh
-
-CMD [ "docker_entrypoint.sh" ]

README.md

@@ -6,12 +6,12 @@ This is the repository for the official [Home Assistant](https://home-assistant.
 
 - [View demo of Home Assistant](https://demo.home-assistant.io/)
 - [More information about Home Assistant](https://home-assistant.io)
-- [Frontend development instructions](https://developers.home-assistant.io/docs/en/frontend_index.html)
+- [Frontend development instructions](https://developers.home-assistant.io/docs/frontend/development/)
 
 ## Development
 
 - Initial setup: `script/setup`
-- Development: [Instructions](https://developers.home-assistant.io/docs/en/frontend_development.html)
+- Development: [Instructions](https://developers.home-assistant.io/docs/frontend/development/)
 - Production build: `script/build_frontend`
 - Gallery: `cd gallery && script/develop_gallery`
 - Hass.io: [Instructions](https://developers.home-assistant.io/docs/en/hassio_hass.html)
@@ -22,15 +22,6 @@ This is the repository for the official [Home Assistant](https://home-assistant.
 
 A complete guide can be found at the following [link](https://www.home-assistant.io/developers/frontend/). It describes a short guide for the build of project.
 
-### Docker environment
-
-It is possible to compile the project and/or run commands in the development environment having only the [Docker](https://www.docker.com) pre-installed in the system. On the root of project you can do:
-
-- `sh ./script/docker_run.sh build` Build all the project with one command
-- `sh ./script/docker_run.sh bash` Open an interactive shell (the same environment generated by the _classic environment_) where you can run commands. This bash work on your project directory and any change on your file is automatically present within your build bash.
-
-**Note**: if you have installed `npm` in addition to the `docker`, you can use the commands `npm run docker_build` and `npm run bash` to get a full build or bash as explained above
-
 ## License
 
 Home Assistant is open-source and Apache 2 licensed. Feel free to browse the repository, learn and reuse parts in your own projects.

build-scripts/babel.js

@@ -1,39 +0,0 @@
-const options = ({ latestBuild }) => ({
-  presets: [
-    !latestBuild && [require("@babel/preset-env").default, { modules: false }],
-    require("@babel/preset-typescript").default,
-  ].filter(Boolean),
-  plugins: [
-    // Part of ES2018. Converts {...a, b: 2} to Object.assign({}, a, {b: 2})
-    [
-      "@babel/plugin-proposal-object-rest-spread",
-      { loose: true, useBuiltIns: true },
-    ],
-    // Only support the syntax, Webpack will handle it.
-    "@babel/syntax-dynamic-import",
-    "@babel/plugin-proposal-optional-chaining",
-    "@babel/plugin-proposal-nullish-coalescing-operator",
-    [
-      require("@babel/plugin-proposal-decorators").default,
-      { decoratorsBeforeExport: true },
-    ],
-    [
-      require("@babel/plugin-proposal-class-properties").default,
-      { loose: true },
-    ],
-  ],
-});
-
-module.exports.babelLoaderConfig = ({ latestBuild }) => {
-  if (latestBuild === undefined) {
-    throw Error("latestBuild not defined for babel loader config");
-  }
-  return {
-    test: /\.m?js$|\.tsx?$/,
-    exclude: [require.resolve("@mdi/js/mdi.js"), require.resolve("hls.js")],
-    use: {
-      loader: "babel-loader",
-      options: options({ latestBuild }),
-    },
-  };
-};

build-scripts/bundle.js

@@ -0,0 +1,195 @@
+const path = require("path");
+const env = require("./env.js");
+const paths = require("./paths.js");
+
+// Files from NPM Packages that should not be imported
+module.exports.ignorePackages = ({ latestBuild }) => [
+  // Bloats bundle and it's not used.
+  path.resolve(require.resolve("moment"), "../locale"),
+  // Part of yaml.js and only used for !!js functions that we don't use
+  require.resolve("esprima"),
+];
+
+// Files from NPM packages that we should replace with empty file
+module.exports.emptyPackages = ({ latestBuild }) =>
+  [
+    // Contains all color definitions for all material color sets.
+    // We don't use it
+    require.resolve("@polymer/paper-styles/color.js"),
+    require.resolve("@polymer/paper-styles/default-theme.js"),
+    // Loads stuff from a CDN
+    require.resolve("@polymer/font-roboto/roboto.js"),
+    require.resolve("@vaadin/vaadin-material-styles/font-roboto.js"),
+    // Compatibility not needed for latest builds
+    latestBuild &&
+      // wrapped in require.resolve so it blows up if file no longer exists
+      require.resolve(
+        path.resolve(paths.polymer_dir, "src/resources/compatibility.ts")
+      ),
+    // This polyfill is loaded in workers to support ES5, filter it out.
+    latestBuild && require.resolve("proxy-polyfill/src/index.js"),
+  ].filter(Boolean);
+
+module.exports.definedVars = ({ isProdBuild, latestBuild, defineOverlay }) => ({
+  __DEV__: !isProdBuild,
+  __BUILD__: JSON.stringify(latestBuild ? "latest" : "es5"),
+  __VERSION__: JSON.stringify(env.version()),
+  __DEMO__: false,
+  __BACKWARDS_COMPAT__: false,
+  __STATIC_PATH__: "/static/",
+  "process.env.NODE_ENV": JSON.stringify(
+    isProdBuild ? "production" : "development"
+  ),
+  ...defineOverlay,
+});
+
+module.exports.terserOptions = (latestBuild) => ({
+  safari10: true,
+  ecma: latestBuild ? undefined : 5,
+  output: { comments: false },
+});
+
+module.exports.babelOptions = ({ latestBuild }) => ({
+  babelrc: false,
+  presets: [
+    !latestBuild && [require("@babel/preset-env").default, { modules: false }],
+    require("@babel/preset-typescript").default,
+  ].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 },
+    ],
+    // Only support the syntax, Webpack will handle it.
+    "@babel/syntax-dynamic-import",
+    "@babel/plugin-proposal-optional-chaining",
+    "@babel/plugin-proposal-nullish-coalescing-operator",
+    [
+      require("@babel/plugin-proposal-decorators").default,
+      { decoratorsBeforeExport: true },
+    ],
+    [
+      require("@babel/plugin-proposal-class-properties").default,
+      { loose: true },
+    ],
+  ].filter(Boolean),
+});
+
+// Are already ES5, cause warnings when babelified.
+module.exports.babelExclude = () => [
+  require.resolve("@mdi/js/mdi.js"),
+  require.resolve("hls.js"),
+];
+
+const outputPath = (outputRoot, latestBuild) =>
+  path.resolve(outputRoot, latestBuild ? "frontend_latest" : "frontend_es5");
+
+const publicPath = (latestBuild, root = "") =>
+  latestBuild ? `${root}/frontend_latest/` : `${root}/frontend_es5/`;
+
+/*
+BundleConfig {
+  // Object with entrypoints that need to be bundled
+  entry: { [name: string]: pathToFile },
+  // Folder where bundled files need to be written
+  outputPath: string,
+  // absolute url-path where bundled files can be found
+  publicPath: string,
+  // extra definitions that we need to replace in source
+  defineOverlay: {[name: string]: value },
+  // if this is a production build
+  isProdBuild: boolean,
+  // If we're targeting latest browsers
+  latestBuild: boolean,
+  // If we're doing a stats build (create nice chunk names)
+  isStatsBuild: boolean,
+  // Names of entrypoints that should not be hashed
+  dontHash: Set<string>
+}
+*/
+
+module.exports.config = {
+  app({ isProdBuild, latestBuild, isStatsBuild }) {
+    return {
+      entry: {
+        service_worker: "./src/entrypoints/service_worker.ts",
+        app: "./src/entrypoints/app.ts",
+        authorize: "./src/entrypoints/authorize.ts",
+        onboarding: "./src/entrypoints/onboarding.ts",
+        core: "./src/entrypoints/core.ts",
+        "custom-panel": "./src/entrypoints/custom-panel.ts",
+      },
+      outputPath: outputPath(paths.app_output_root, latestBuild),
+      publicPath: publicPath(latestBuild),
+      isProdBuild,
+      latestBuild,
+      isStatsBuild,
+    };
+  },
+
+  demo({ isProdBuild, latestBuild, isStatsBuild }) {
+    return {
+      entry: {
+        main: path.resolve(paths.demo_dir, "src/entrypoint.ts"),
+      },
+      outputPath: outputPath(paths.demo_output_root, latestBuild),
+      publicPath: publicPath(latestBuild),
+      defineOverlay: {
+        __VERSION__: JSON.stringify(`DEMO-${env.version()}`),
+        __DEMO__: true,
+      },
+      isProdBuild,
+      latestBuild,
+      isStatsBuild,
+    };
+  },
+
+  cast({ isProdBuild, latestBuild }) {
+    const entry = {
+      launcher: path.resolve(paths.cast_dir, "src/launcher/entrypoint.ts"),
+    };
+
+    if (latestBuild) {
+      entry.receiver = path.resolve(
+        paths.cast_dir,
+        "src/receiver/entrypoint.ts"
+      );
+    }
+
+    return {
+      entry,
+      outputPath: outputPath(paths.cast_output_root, latestBuild),
+      publicPath: publicPath(latestBuild),
+      isProdBuild,
+      latestBuild,
+      defineOverlay: {
+        __BACKWARDS_COMPAT__: true,
+      },
+    };
+  },
+
+  hassio({ isProdBuild, latestBuild }) {
+    return {
+      entry: {
+        entrypoint: path.resolve(paths.hassio_dir, "src/entrypoint.ts"),
+      },
+      outputPath: outputPath(paths.hassio_output_root, latestBuild),
+      publicPath: publicPath(latestBuild, paths.hassio_publicPath),
+      isProdBuild,
+      latestBuild,
+    };
+  },
+
+  gallery({ isProdBuild, latestBuild }) {
+    return {
+      entry: {
+        entrypoint: path.resolve(paths.gallery_dir, "src/entrypoint.js"),
+      },
+      outputPath: outputPath(paths.gallery_output_root, latestBuild),
+      publicPath: publicPath(latestBuild),
+      isProdBuild,
+      latestBuild,
+    };
+  },
+};

build-scripts/env.js

@@ -3,8 +3,13 @@ const path = require("path");
 const paths = require("./paths.js");
 
 module.exports = {
+  useRollup() {
+    return process.env.ROLLUP === "1";
+  },
   isProdBuild() {
-    return process.env.NODE_ENV === "production";
+    return (
+      process.env.NODE_ENV === "production" || module.exports.isStatsBuild()
+    );
   },
   isStatsBuild() {
     return process.env.STATS === "1";

build-scripts/gulp/app.js

@@ -1,7 +1,7 @@
 // Run HA develop mode
 const gulp = require("gulp");
 
-const envVars = require("../env");
+const env = require("../env");
 
 require("./clean.js");
 require("./translations.js");
@@ -11,6 +11,7 @@ require("./compress.js");
 require("./webpack.js");
 require("./service-worker.js");
 require("./entry-html.js");
+require("./rollup.js");
 
 gulp.task(
   "develop-app",
@@ -20,14 +21,14 @@ gulp.task(
     },
     "clean",
     gulp.parallel(
-      "gen-service-worker-dev",
+      "gen-service-worker-app-dev",
       "gen-icons-json",
       "gen-pages-dev",
       "gen-index-app-dev",
       "build-translations"
     ),
-    "copy-static",
-    "webpack-watch-app"
+    "copy-static-app",
+    env.useRollup() ? "rollup-watch-app" : "webpack-watch-app"
   )
 );
 
@@ -39,14 +40,14 @@ gulp.task(
     },
     "clean",
     gulp.parallel("gen-icons-json", "build-translations"),
-    "copy-static",
-    "webpack-prod-app",
+    "copy-static-app",
+    env.useRollup() ? "rollup-prod-app" : "webpack-prod-app",
     ...// Don't compress running tests
-    (envVars.isTest() ? [] : ["compress-app"]),
+    (env.isTest() ? [] : ["compress-app"]),
     gulp.parallel(
       "gen-pages-prod",
       "gen-index-app-prod",
-      "gen-service-worker-prod"
+      "gen-service-worker-app-prod"
     )
   )
 );

build-scripts/gulp/cast.js

@@ -1,11 +1,14 @@
 const gulp = require("gulp");
 
+const env = require("../env");
+
 require("./clean.js");
 require("./translations.js");
 require("./gather-static.js");
 require("./webpack.js");
 require("./service-worker.js");
 require("./entry-html.js");
+require("./rollup.js");
 
 gulp.task(
   "develop-cast",
@@ -17,7 +20,8 @@ gulp.task(
     "translations-enable-merge-backend",
     gulp.parallel("gen-icons-json", "build-translations"),
     "copy-static-cast",
-    "webpack-dev-server-cast"
+    "gen-index-cast-dev",
+    env.useRollup() ? "rollup-dev-server-cast" : "webpack-dev-server-cast"
   )
 );
 
@@ -31,7 +35,7 @@ gulp.task(
     "translations-enable-merge-backend",
     gulp.parallel("gen-icons-json", "build-translations"),
     "copy-static-cast",
-    "webpack-prod-cast",
+    env.useRollup() ? "rollup-prod-cast" : "webpack-prod-cast",
     "gen-index-cast-prod"
   )
 );

build-scripts/gulp/clean.js

@@ -1,39 +1,36 @@
 const del = require("del");
 const gulp = require("gulp");
-const config = require("../paths");
+const paths = require("../paths");
 require("./translations");
 
 gulp.task(
   "clean",
   gulp.parallel("clean-translations", function cleanOutputAndBuildDir() {
-    return del([config.root, config.build_dir]);
+    return del([paths.app_output_root, paths.build_dir]);
   })
 );
 
 gulp.task(
   "clean-demo",
   gulp.parallel("clean-translations", function cleanOutputAndBuildDir() {
-    return del([config.demo_root, config.build_dir]);
+    return del([paths.demo_output_root, paths.build_dir]);
   })
 );
 
 gulp.task(
   "clean-cast",
   gulp.parallel("clean-translations", function cleanOutputAndBuildDir() {
-    return del([config.cast_root, config.build_dir]);
+    return del([paths.cast_output_root, paths.build_dir]);
   })
 );
 
-gulp.task(
-  "clean-hassio",
-  gulp.parallel("clean-translations", function cleanOutputAndBuildDir() {
-    return del([config.hassio_root, config.build_dir]);
-  })
-);
+gulp.task("clean-hassio", function cleanOutputAndBuildDir() {
+  return del([paths.hassio_output_root, paths.build_dir]);
+});
 
 gulp.task(
   "clean-gallery",
   gulp.parallel("clean-translations", function cleanOutputAndBuildDir() {
-    return del([config.gallery_root, config.build_dir]);
+    return del([paths.gallery_output_root, paths.build_dir]);
   })
 );

build-scripts/gulp/compress.js

@@ -6,38 +6,40 @@ const merge = require("merge-stream");
 const path = require("path");
 const paths = require("../paths");
 
+const zopfliOptions = { threshold: 150 };
+
 gulp.task("compress-app", function compressApp() {
   const jsLatest = gulp
-    .src(path.resolve(paths.output, "**/*.js"))
-    .pipe(zopfli({ threshold: 150 }))
-    .pipe(gulp.dest(paths.output));
+    .src(path.resolve(paths.app_output_latest, "**/*.js"))
+    .pipe(zopfli(zopfliOptions))
+    .pipe(gulp.dest(paths.app_output_latest));
 
   const jsEs5 = gulp
-    .src(path.resolve(paths.output_es5, "**/*.js"))
-    .pipe(zopfli({ threshold: 150 }))
-    .pipe(gulp.dest(paths.output_es5));
+    .src(path.resolve(paths.app_output_es5, "**/*.js"))
+    .pipe(zopfli(zopfliOptions))
+    .pipe(gulp.dest(paths.app_output_es5));
 
   const polyfills = gulp
-    .src(path.resolve(paths.static, "polyfills/*.js"))
-    .pipe(zopfli({ threshold: 150 }))
-    .pipe(gulp.dest(path.resolve(paths.static, "polyfills")));
+    .src(path.resolve(paths.app_output_static, "polyfills/*.js"))
+    .pipe(zopfli(zopfliOptions))
+    .pipe(gulp.dest(path.resolve(paths.app_output_static, "polyfills")));
 
   const translations = gulp
-    .src(path.resolve(paths.static, "translations/**/*.json"))
-    .pipe(zopfli({ threshold: 150 }))
-    .pipe(gulp.dest(path.resolve(paths.static, "translations")));
+    .src(path.resolve(paths.app_output_static, "translations/**/*.json"))
+    .pipe(zopfli(zopfliOptions))
+    .pipe(gulp.dest(path.resolve(paths.app_output_static, "translations")));
 
   const icons = gulp
-    .src(path.resolve(paths.static, "mdi/*.json"))
-    .pipe(zopfli({ threshold: 150 }))
-    .pipe(gulp.dest(path.resolve(paths.static, "mdi")));
+    .src(path.resolve(paths.app_output_static, "mdi/*.json"))
+    .pipe(zopfli(zopfliOptions))
+    .pipe(gulp.dest(path.resolve(paths.app_output_static, "mdi")));
 
   return merge(jsLatest, jsEs5, polyfills, translations, icons);
 });
 
 gulp.task("compress-hassio", function compressApp() {
   return gulp
-    .src(path.resolve(paths.hassio_root, "**/*.js"))
-    .pipe(zopfli())
-    .pipe(gulp.dest(paths.hassio_root));
+    .src(path.resolve(paths.hassio_output_root, "**/*.js"))
+    .pipe(zopfli(zopfliOptions))
+    .pipe(gulp.dest(paths.hassio_output_root));
 });

build-scripts/gulp/demo.js

@@ -1,6 +1,8 @@
 // Run demo develop mode
 const gulp = require("gulp");
 
+const env = require("../env");
+
 require("./clean.js");
 require("./translations.js");
 require("./gen-icons-json.js");
@@ -8,6 +10,7 @@ require("./gather-static.js");
 require("./webpack.js");
 require("./service-worker.js");
 require("./entry-html.js");
+require("./rollup.js");
 
 gulp.task(
   "develop-demo",
@@ -19,7 +22,7 @@ gulp.task(
     "translations-enable-merge-backend",
     gulp.parallel("gen-icons-json", "gen-index-demo-dev", "build-translations"),
     "copy-static-demo",
-    "webpack-dev-server-demo"
+    env.useRollup() ? "rollup-dev-server-demo" : "webpack-dev-server-demo"
   )
 );
 
@@ -34,7 +37,7 @@ gulp.task(
     "translations-enable-merge-backend",
     gulp.parallel("gen-icons-json", "build-translations"),
     "copy-static-demo",
-    "webpack-prod-demo",
+    env.useRollup() ? "rollup-prod-demo" : "webpack-prod-demo",
     "gen-index-demo-prod"
   )
 );

build-scripts/gulp/entry-html.js

@@ -6,31 +6,36 @@ const fs = require("fs-extra");
 const path = require("path");
 const template = require("lodash.template");
 const minify = require("html-minifier").minify;
-const config = require("../paths.js");
+const paths = require("../paths.js");
+const env = require("../env.js");
 
 const templatePath = (tpl) =>
-  path.resolve(config.polymer_dir, "src/html/", `${tpl}.html.template`);
+  path.resolve(paths.polymer_dir, "src/html/", `${tpl}.html.template`);
 
 const readFile = (pth) => fs.readFileSync(pth).toString();
 
 const renderTemplate = (pth, data = {}, pathFunc = templatePath) => {
   const compiled = template(readFile(pathFunc(pth)));
-  return compiled({ ...data, renderTemplate });
+  return compiled({
+    ...data,
+    useRollup: env.useRollup(),
+    renderTemplate,
+  });
 };
 
 const renderDemoTemplate = (pth, data = {}) =>
   renderTemplate(pth, data, (tpl) =>
-    path.resolve(config.demo_dir, "src/html/", `${tpl}.html.template`)
+    path.resolve(paths.demo_dir, "src/html/", `${tpl}.html.template`)
   );
 
 const renderCastTemplate = (pth, data = {}) =>
   renderTemplate(pth, data, (tpl) =>
-    path.resolve(config.cast_dir, "src/html/", `${tpl}.html.template`)
+    path.resolve(paths.cast_dir, "src/html/", `${tpl}.html.template`)
   );
 
 const renderGalleryTemplate = (pth, data = {}) =>
   renderTemplate(pth, data, (tpl) =>
-    path.resolve(config.gallery_dir, "src/html/", `${tpl}.html.template`)
+    path.resolve(paths.gallery_dir, "src/html/", `${tpl}.html.template`)
   );
 
 const minifyHtml = (content) =>
@@ -48,29 +53,36 @@ gulp.task("gen-pages-dev", (done) => {
     const content = renderTemplate(page, {
       latestPageJS: `/frontend_latest/${page}.js`,
 
-      es5Compatibility: "/frontend_es5/compatibility.js",
       es5PageJS: `/frontend_es5/${page}.js`,
     });
 
-    fs.outputFileSync(path.resolve(config.root, `${page}.html`), content);
+    fs.outputFileSync(
+      path.resolve(paths.app_output_root, `${page}.html`),
+      content
+    );
   }
   done();
 });
 
 gulp.task("gen-pages-prod", (done) => {
-  const latestManifest = require(path.resolve(config.output, "manifest.json"));
-  const es5Manifest = require(path.resolve(config.output_es5, "manifest.json"));
+  const latestManifest = require(path.resolve(
+    paths.app_output_latest,
+    "manifest.json"
+  ));
+  const es5Manifest = require(path.resolve(
+    paths.app_output_es5,
+    "manifest.json"
+  ));
 
   for (const page of PAGES) {
     const content = renderTemplate(page, {
       latestPageJS: latestManifest[`${page}.js`],
 
-      es5Compatibility: es5Manifest["compatibility.js"],
       es5PageJS: es5Manifest[`${page}.js`],
     });
 
     fs.outputFileSync(
-      path.resolve(config.root, `${page}.html`),
+      path.resolve(paths.app_output_root, `${page}.html`),
       minifyHtml(content)
     );
   }
@@ -78,39 +90,44 @@ 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",
     latestCustomPanelJS: "/frontend_latest/custom-panel.js",
 
-    es5Compatibility: "/frontend_es5/compatibility.js",
     es5AppJS: "/frontend_es5/app.js",
     es5CoreJS: "/frontend_es5/core.js",
     es5CustomPanelJS: "/frontend_es5/custom-panel.js",
   }).replace(/#THEMEC/g, "{{ theme_color }}");
 
-  fs.outputFileSync(path.resolve(config.root, "index.html"), content);
+  fs.outputFileSync(path.resolve(paths.app_output_root, "index.html"), content);
   done();
 });
 
 gulp.task("gen-index-app-prod", (done) => {
-  const latestManifest = require(path.resolve(config.output, "manifest.json"));
-  const es5Manifest = require(path.resolve(config.output_es5, "manifest.json"));
+  const latestManifest = require(path.resolve(
+    paths.app_output_latest,
+    "manifest.json"
+  ));
+  const es5Manifest = require(path.resolve(
+    paths.app_output_es5,
+    "manifest.json"
+  ));
   const content = renderTemplate("index", {
     latestAppJS: latestManifest["app.js"],
     latestCoreJS: latestManifest["core.js"],
     latestCustomPanelJS: latestManifest["custom-panel.js"],
 
-    es5Compatibility: es5Manifest["compatibility.js"],
     es5AppJS: es5Manifest["app.js"],
     es5CoreJS: es5Manifest["core.js"],
     es5CustomPanelJS: es5Manifest["custom-panel.js"],
   });
   const minified = minifyHtml(content).replace(/#THEMEC/g, "{{ theme_color }}");
 
-  fs.outputFileSync(path.resolve(config.root, "index.html"), minified);
+  fs.outputFileSync(
+    path.resolve(paths.app_output_root, "index.html"),
+    minified
+  );
   done();
 });
 
@@ -119,7 +136,7 @@ gulp.task("gen-index-cast-dev", (done) => {
     latestReceiverJS: "/frontend_latest/receiver.js",
   });
   fs.outputFileSync(
-    path.resolve(config.cast_root, "receiver.html"),
+    path.resolve(paths.cast_output_root, "receiver.html"),
     contentReceiver
   );
 
@@ -127,14 +144,17 @@ gulp.task("gen-index-cast-dev", (done) => {
     latestLauncherJS: "/frontend_latest/launcher.js",
     es5LauncherJS: "/frontend_es5/launcher.js",
   });
-  fs.outputFileSync(path.resolve(config.cast_root, "faq.html"), contentFAQ);
+  fs.outputFileSync(
+    path.resolve(paths.cast_output_root, "faq.html"),
+    contentFAQ
+  );
 
   const contentLauncher = renderCastTemplate("launcher", {
     latestLauncherJS: "/frontend_latest/launcher.js",
     es5LauncherJS: "/frontend_es5/launcher.js",
   });
   fs.outputFileSync(
-    path.resolve(config.cast_root, "index.html"),
+    path.resolve(paths.cast_output_root, "index.html"),
     contentLauncher
   );
   done();
@@ -142,11 +162,11 @@ gulp.task("gen-index-cast-dev", (done) => {
 
 gulp.task("gen-index-cast-prod", (done) => {
   const latestManifest = require(path.resolve(
-    config.cast_output,
+    paths.cast_output_latest,
     "manifest.json"
   ));
   const es5Manifest = require(path.resolve(
-    config.cast_output_es5,
+    paths.cast_output_es5,
     "manifest.json"
   ));
 
@@ -154,7 +174,7 @@ gulp.task("gen-index-cast-prod", (done) => {
     latestReceiverJS: latestManifest["receiver.js"],
   });
   fs.outputFileSync(
-    path.resolve(config.cast_root, "receiver.html"),
+    path.resolve(paths.cast_output_root, "receiver.html"),
     contentReceiver
   );
 
@@ -162,68 +182,74 @@ gulp.task("gen-index-cast-prod", (done) => {
     latestLauncherJS: latestManifest["launcher.js"],
     es5LauncherJS: es5Manifest["launcher.js"],
   });
-  fs.outputFileSync(path.resolve(config.cast_root, "faq.html"), contentFAQ);
+  fs.outputFileSync(
+    path.resolve(paths.cast_output_root, "faq.html"),
+    contentFAQ
+  );
 
   const contentLauncher = renderCastTemplate("launcher", {
     latestLauncherJS: latestManifest["launcher.js"],
     es5LauncherJS: es5Manifest["launcher.js"],
   });
   fs.outputFileSync(
-    path.resolve(config.cast_root, "index.html"),
+    path.resolve(paths.cast_output_root, "index.html"),
     contentLauncher
   );
   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",
 
-    es5Compatibility: "/frontend_es5/compatibility.js",
     es5DemoJS: "/frontend_es5/main.js",
   });
 
-  fs.outputFileSync(path.resolve(config.demo_root, "index.html"), content);
+  fs.outputFileSync(
+    path.resolve(paths.demo_output_root, "index.html"),
+    content
+  );
   done();
 });
 
 gulp.task("gen-index-demo-prod", (done) => {
   const latestManifest = require(path.resolve(
-    config.demo_output,
+    paths.demo_output_latest,
     "manifest.json"
   ));
   const es5Manifest = require(path.resolve(
-    config.demo_output_es5,
+    paths.demo_output_es5,
     "manifest.json"
   ));
   const content = renderDemoTemplate("index", {
     latestDemoJS: latestManifest["main.js"],
 
-    es5Compatibility: es5Manifest["compatibility.js"],
     es5DemoJS: es5Manifest["main.js"],
   });
   const minified = minifyHtml(content);
 
-  fs.outputFileSync(path.resolve(config.demo_root, "index.html"), minified);
+  fs.outputFileSync(
+    path.resolve(paths.demo_output_root, "index.html"),
+    minified
+  );
   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",
   });
 
-  fs.outputFileSync(path.resolve(config.gallery_root, "index.html"), content);
+  fs.outputFileSync(
+    path.resolve(paths.gallery_output_root, "index.html"),
+    content
+  );
   done();
 });
 
 gulp.task("gen-index-gallery-prod", (done) => {
   const latestManifest = require(path.resolve(
-    config.gallery_output,
+    paths.gallery_output_latest,
     "manifest.json"
   ));
   const content = renderGalleryTemplate("index", {
@@ -231,6 +257,48 @@ gulp.task("gen-index-gallery-prod", (done) => {
   });
   const minified = minifyHtml(content);
 
-  fs.outputFileSync(path.resolve(config.gallery_root, "index.html"), minified);
+  fs.outputFileSync(
+    path.resolve(paths.gallery_output_root, "index.html"),
+    minified
+  );
   done();
 });
+
+gulp.task("gen-index-hassio-dev", async () => {
+  writeHassioEntrypoint(
+    `${paths.hassio_publicPath}/frontend_latest/entrypoint.js`,
+    `${paths.hassio_publicPath}/frontend_es5/entrypoint.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('${latestEntrypoint}')")();
+} catch (err) {
+  var el = document.createElement('script');
+  el.src = '${es5Entrypoint}';
+  document.body.appendChild(el);
+}
+  `,
+    { encoding: "utf-8" }
+  );
+}

build-scripts/gulp/gallery.js

@@ -1,5 +1,10 @@
 // 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");
@@ -8,6 +13,32 @@ require("./gather-static.js");
 require("./webpack.js");
 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",
@@ -17,10 +48,14 @@ gulp.task(
     },
     "clean-gallery",
     "translations-enable-merge-backend",
-    gulp.parallel("gen-icons-json", "build-translations"),
+    gulp.parallel(
+      "gen-icons-json",
+      "build-translations",
+      "gather-gallery-demos"
+    ),
     "copy-static-gallery",
     "gen-index-gallery-dev",
-    "webpack-dev-server-gallery"
+    env.useRollup() ? "rollup-dev-server-gallery" : "webpack-dev-server-gallery"
   )
 );
 
@@ -32,9 +67,13 @@ gulp.task(
     },
     "clean-gallery",
     "translations-enable-merge-backend",
-    gulp.parallel("gen-icons-json", "build-translations"),
+    gulp.parallel(
+      "gen-icons-json",
+      "build-translations",
+      "gather-gallery-demos"
+    ),
     "copy-static-gallery",
-    "webpack-prod-gallery",
+    env.useRollup() ? "rollup-prod-gallery" : "webpack-prod-gallery",
     "gen-index-gallery-prod"
   )
 );

build-scripts/gulp/gather-static.js

@@ -36,11 +36,13 @@ function copyMdiIcons(staticDir) {
 function copyPolyfills(staticDir) {
   const staticPath = genStaticPath(staticDir);
 
-  // Web Component polyfills and adapters
+  // For custom panels using ES5 builds that don't use Babel 7+
   copyFileDir(
     npmPath("@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"),
     staticPath("polyfills/")
   );
+
+  // Web Component polyfills and adapters
   copyFileDir(
     npmPath("@webcomponents/webcomponentsjs/webcomponents-bundle.js"),
     staticPath("polyfills/")
@@ -51,6 +53,12 @@ function copyPolyfills(staticDir) {
   );
 }
 
+function copyLoaderJS(staticDir) {
+  const staticPath = genStaticPath(staticDir);
+  copyFileDir(npmPath("systemjs/dist/s.min.js"), staticPath("js"));
+  copyFileDir(npmPath("systemjs/dist/s.min.js.map"), staticPath("js"));
+}
+
 function copyFonts(staticDir) {
   const staticPath = genStaticPath(staticDir);
   // Local fonts
@@ -72,17 +80,17 @@ function copyMapPanel(staticDir) {
   );
 }
 
-gulp.task("copy-translations", (done) => {
-  const staticDir = paths.static;
+gulp.task("copy-translations-app", async () => {
+  const staticDir = paths.app_output_static;
   copyTranslations(staticDir);
-  done();
 });
 
-gulp.task("copy-static", (done) => {
-  const staticDir = paths.static;
+gulp.task("copy-static-app", async () => {
+  const staticDir = paths.app_output_static;
   // Basic static files
-  fs.copySync(polyPath("public"), paths.root);
+  fs.copySync(polyPath("public"), paths.app_output_root);
 
+  copyLoaderJS(staticDir);
   copyPolyfills(staticDir);
   copyFonts(staticDir);
   copyTranslations(staticDir);
@@ -90,48 +98,50 @@ gulp.task("copy-static", (done) => {
 
   // Panel assets
   copyMapPanel(staticDir);
-  done();
 });
 
-gulp.task("copy-static-demo", (done) => {
+gulp.task("copy-static-demo", async () => {
   // Copy app static files
   fs.copySync(
     polyPath("public/static"),
-    path.resolve(paths.demo_root, "static")
+    path.resolve(paths.demo_output_root, "static")
   );
   // Copy demo static files
-  fs.copySync(path.resolve(paths.demo_dir, "public"), paths.demo_root);
+  fs.copySync(path.resolve(paths.demo_dir, "public"), paths.demo_output_root);
 
-  copyPolyfills(paths.demo_static);
-  copyMapPanel(paths.demo_static);
-  copyFonts(paths.demo_static);
-  copyTranslations(paths.demo_static);
-  copyMdiIcons(paths.demo_static);
-  done();
+  copyLoaderJS(paths.demo_output_static);
+  copyPolyfills(paths.demo_output_static);
+  copyMapPanel(paths.demo_output_static);
+  copyFonts(paths.demo_output_static);
+  copyTranslations(paths.demo_output_static);
+  copyMdiIcons(paths.demo_output_static);
 });
 
-gulp.task("copy-static-cast", (done) => {
+gulp.task("copy-static-cast", async () => {
   // Copy app static files
-  fs.copySync(polyPath("public/static"), paths.cast_static);
+  fs.copySync(polyPath("public/static"), paths.cast_output_static);
   // Copy cast static files
-  fs.copySync(path.resolve(paths.cast_dir, "public"), paths.cast_root);
+  fs.copySync(path.resolve(paths.cast_dir, "public"), paths.cast_output_root);
 
-  copyMapPanel(paths.cast_static);
-  copyFonts(paths.cast_static);
-  copyTranslations(paths.cast_static);
-  copyMdiIcons(paths.cast_static);
-  done();
+  copyLoaderJS(paths.cast_output_static);
+  copyPolyfills(paths.cast_output_static);
+  copyMapPanel(paths.cast_output_static);
+  copyFonts(paths.cast_output_static);
+  copyTranslations(paths.cast_output_static);
+  copyMdiIcons(paths.cast_output_static);
 });
 
-gulp.task("copy-static-gallery", (done) => {
+gulp.task("copy-static-gallery", async () => {
   // Copy app static files
-  fs.copySync(polyPath("public/static"), paths.gallery_static);
+  fs.copySync(polyPath("public/static"), paths.gallery_output_static);
   // Copy gallery static files
-  fs.copySync(path.resolve(paths.gallery_dir, "public"), paths.gallery_root);
+  fs.copySync(
+    path.resolve(paths.gallery_dir, "public"),
+    paths.gallery_output_root
+  );
 
-  copyMapPanel(paths.gallery_static);
-  copyFonts(paths.gallery_static);
-  copyTranslations(paths.gallery_static);
-  copyMdiIcons(paths.gallery_static);
-  done();
+  copyMapPanel(paths.gallery_output_static);
+  copyFonts(paths.gallery_output_static);
+  copyTranslations(paths.gallery_output_static);
+  copyMdiIcons(paths.gallery_output_static);
 });

build-scripts/gulp/gen-icons-json.js

@@ -11,6 +11,7 @@ const META_PATH = path.resolve(ICON_PACKAGE_PATH, "meta.json");
 const PACKAGE_PATH = path.resolve(ICON_PACKAGE_PATH, "package.json");
 const ICON_PATH = path.resolve(ICON_PACKAGE_PATH, "svg");
 const OUTPUT_DIR = path.resolve(__dirname, "../../build/mdi");
+const REMOVED_ICONS_PATH = path.resolve(__dirname, "../removedIcons.json");
 
 const encoding = "utf8";
 
@@ -25,6 +26,13 @@ const getMeta = () => {
   });
 };
 
+const addRemovedMeta = (meta) => {
+  const file = fs.readFileSync(REMOVED_ICONS_PATH, { encoding });
+  const removed = JSON.parse(file);
+  const combinedMeta = [...meta, ...removed];
+  return combinedMeta.sort((a, b) => a.name.localeCompare(b.name));
+};
+
 const splitBySize = (meta) => {
   const chunks = [];
   const CHUNK_SIZE = 50000;
@@ -69,7 +77,7 @@ const findDifferentiator = (curString, prevString) => {
 };
 
 gulp.task("gen-icons-json", (done) => {
-  const meta = getMeta();
+  const meta = addRemovedMeta(getMeta());
   const split = splitBySize(meta);
 
   if (!fs.existsSync(OUTPUT_DIR)) {

build-scripts/gulp/hassio.js

@@ -1,11 +1,15 @@
 const gulp = require("gulp");
+const fs = require("fs");
+const path = require("path");
 
-const envVars = require("../env");
+const env = require("../env");
+const paths = require("../paths");
 
 require("./clean.js");
 require("./gen-icons-json.js");
 require("./webpack.js");
 require("./compress.js");
+require("./rollup.js");
 
 gulp.task(
   "develop-hassio",
@@ -15,7 +19,8 @@ gulp.task(
     },
     "clean-hassio",
     "gen-icons-json",
-    "webpack-watch-hassio"
+    "gen-index-hassio-dev",
+    env.useRollup() ? "rollup-watch-hassio" : "webpack-watch-hassio"
   )
 );
 
@@ -27,8 +32,9 @@ gulp.task(
     },
     "clean-hassio",
     "gen-icons-json",
-    "webpack-prod-hassio",
+    env.useRollup() ? "rollup-prod-hassio" : "webpack-prod-hassio",
+    "gen-index-hassio-prod",
     ...// Don't compress running tests
-    (envVars.isTest() ? [] : ["compress-hassio"])
+    (env.isTest() ? [] : ["compress-hassio"])
   )
 );

build-scripts/gulp/rollup.js

@@ -0,0 +1,146 @@
+// Tasks to run Rollup
+const path = require("path");
+const gulp = require("gulp");
+const rollup = require("rollup");
+const handler = require("serve-handler");
+const http = require("http");
+const log = require("fancy-log");
+const rollupConfig = require("../rollup");
+const paths = require("../paths");
+const open = require("open");
+
+const bothBuilds = (createConfigFunc, params) =>
+  gulp.series(
+    async function buildLatest() {
+      await buildRollup(
+        createConfigFunc({
+          ...params,
+          latestBuild: true,
+        })
+      );
+    },
+    async function buildES5() {
+      await buildRollup(
+        createConfigFunc({
+          ...params,
+          latestBuild: false,
+        })
+      );
+    }
+  );
+
+function createServer(serveOptions) {
+  const server = http.createServer((request, response) => {
+    return handler(request, response, {
+      public: serveOptions.root,
+    });
+  });
+
+  server.listen(
+    serveOptions.port,
+    serveOptions.networkAccess ? "0.0.0.0" : undefined,
+    () => {
+      log.info(`Available at http://localhost:${serveOptions.port}`);
+      open(`http://localhost:${serveOptions.port}`);
+    }
+  );
+}
+
+function watchRollup(createConfig, extraWatchSrc = [], serveOptions) {
+  const { inputOptions, outputOptions } = createConfig({
+    isProdBuild: false,
+    latestBuild: true,
+  });
+
+  const watcher = rollup.watch({
+    ...inputOptions,
+    output: [outputOptions],
+    watch: {
+      include: ["src/**"] + extraWatchSrc,
+    },
+  });
+
+  let startedHttp = false;
+
+  watcher.on("event", (event) => {
+    if (event.code === "BUNDLE_END") {
+      log(`Build done @ ${new Date().toLocaleTimeString()}`);
+    } else if (event.code === "ERROR") {
+      log.error(event.error);
+    } else if (event.code === "END") {
+      if (startedHttp || !serveOptions) {
+        return;
+      }
+      startedHttp = true;
+      createServer(serveOptions);
+    }
+  });
+
+  gulp.watch(
+    path.join(paths.translations_src, "en.json"),
+    gulp.series("build-translations", "copy-translations-app")
+  );
+}
+
+async function buildRollup(config) {
+  const bundle = await rollup.rollup(config.inputOptions);
+  await bundle.write(config.outputOptions);
+}
+
+gulp.task("rollup-watch-app", () => {
+  watchRollup(rollupConfig.createAppConfig);
+});
+
+gulp.task("rollup-watch-hassio", () => {
+  watchRollup(rollupConfig.createHassioConfig, ["hassio/src/**"]);
+});
+
+gulp.task("rollup-dev-server-demo", () => {
+  watchRollup(rollupConfig.createDemoConfig, ["demo/src/**"], {
+    root: paths.demo_output_root,
+    port: 8090,
+  });
+});
+
+gulp.task("rollup-dev-server-cast", () => {
+  watchRollup(rollupConfig.createCastConfig, ["cast/src/**"], {
+    root: paths.cast_output_root,
+    port: 8080,
+    networkAccess: true,
+  });
+});
+
+gulp.task("rollup-dev-server-gallery", () => {
+  watchRollup(rollupConfig.createGalleryConfig, ["gallery/src/**"], {
+    root: paths.gallery_output_root,
+    port: 8100,
+  });
+});
+
+gulp.task(
+  "rollup-prod-app",
+  bothBuilds(rollupConfig.createAppConfig, { isProdBuild: true })
+);
+
+gulp.task(
+  "rollup-prod-demo",
+  bothBuilds(rollupConfig.createDemoConfig, { isProdBuild: true })
+);
+
+gulp.task(
+  "rollup-prod-cast",
+  bothBuilds(rollupConfig.createCastConfig, { isProdBuild: true })
+);
+
+gulp.task("rollup-prod-hassio", () =>
+  bothBuilds(rollupConfig.createHassioConfig, { isProdBuild: true })
+);
+
+gulp.task("rollup-prod-gallery", () =>
+  buildRollup(
+    rollupConfig.createGalleryConfig({
+      isProdBuild: true,
+      latestBuild: true,
+    })
+  )
+);

build-scripts/gulp/service-worker.js

@@ -5,18 +5,22 @@
 const gulp = require("gulp");
 const path = require("path");
 const fs = require("fs-extra");
-const config = require("../paths.js");
+const workboxBuild = require("workbox-build");
+const sourceMapUrl = require("source-map-url");
+const paths = require("../paths.js");
 
-const swPath = path.resolve(config.root, "service_worker.js");
+const swDest = path.resolve(paths.app_output_root, "service_worker.js");
 
-const writeSW = (content) => fs.outputFileSync(swPath, content.trim() + "\n");
+const writeSW = (content) => fs.outputFileSync(swDest, content.trim() + "\n");
 
-gulp.task("gen-service-worker-dev", (done) => {
+gulp.task("gen-service-worker-app-dev", (done) => {
   writeSW(
     `
 console.debug('Service worker disabled in development');
 
 self.addEventListener('install', (event) => {
+  // This will activate the dev service worker,
+  // removing any prod service worker the dev might have running
   self.skipWaiting();
 });
   `
@@ -24,10 +28,69 @@ self.addEventListener('install', (event) => {
   done();
 });
 
-gulp.task("gen-service-worker-prod", (done) => {
-  fs.copySync(
-    path.resolve(config.output, "service_worker.js"),
-    path.resolve(config.root, "service_worker.js")
+gulp.task("gen-service-worker-app-prod", async () => {
+  // Read bundled source file
+  const bundleManifestLatest = require(path.resolve(
+    paths.app_output_latest,
+    "manifest.json"
+  ));
+  let serviceWorkerContent = fs.readFileSync(
+    paths.app_output_root + bundleManifestLatest["service_worker.js"],
+    "utf-8"
   );
-  done();
+
+  // Delete old file from frontend_latest so manifest won't pick it up
+  fs.removeSync(
+    paths.app_output_root + bundleManifestLatest["service_worker.js"]
+  );
+  fs.removeSync(
+    paths.app_output_root + bundleManifestLatest["service_worker.js.map"]
+  );
+
+  // Remove ES5
+  const bundleManifestES5 = require(path.resolve(
+    paths.app_output_es5,
+    "manifest.json"
+  ));
+  fs.removeSync(paths.app_output_root + bundleManifestES5["service_worker.js"]);
+  fs.removeSync(
+    paths.app_output_root + bundleManifestES5["service_worker.js.map"]
+  );
+
+  const workboxManifest = await workboxBuild.getManifest({
+    // Files that mach this pattern will be considered unique and skip revision check
+    // ignore JS files + translation files
+    dontCacheBustURLsMatching: /(frontend_latest\/.+|static\/translations\/.+)/,
+
+    globDirectory: paths.app_output_root,
+    globPatterns: [
+      "frontend_latest/*.js",
+      // Cache all English translations because we catch them as fallback
+      // Using pattern to match hash instead of * to avoid caching en-GB
+      // 'v' added as valid hash letter because in dev we hash with 'dev'
+      "static/translations/**/en-+([a-fv0-9]).json",
+      // Icon shown on splash screen
+      "static/icons/favicon-192x192.png",
+      "static/icons/favicon.ico",
+      // Common fonts
+      "static/fonts/roboto/Roboto-Light.woff2",
+      "static/fonts/roboto/Roboto-Medium.woff2",
+      "static/fonts/roboto/Roboto-Regular.woff2",
+      "static/fonts/roboto/Roboto-Bold.woff2",
+    ],
+  });
+
+  for (const warning of workboxManifest.warnings) {
+    console.warn(warning);
+  }
+
+  // remove source map and add WB manifest
+  serviceWorkerContent = sourceMapUrl.removeFrom(serviceWorkerContent);
+  serviceWorkerContent = serviceWorkerContent.replace(
+    "WB_MANIFEST",
+    JSON.stringify(workboxManifest.manifestEntries)
+  );
+
+  // Write new file to root
+  fs.writeFileSync(swDest, serviceWorkerContent);
 });

build-scripts/gulp/webpack.js

@@ -38,9 +38,9 @@ const runDevServer = ({
 
 const handler = (done) => (err, stats) => {
   if (err) {
-    console.log(err.stack || err);
+    log.error(err.stack || err);
     if (err.details) {
-      console.log(err.details);
+      log.error(err.details);
     }
     return;
   }
@@ -48,7 +48,7 @@ const handler = (done) => (err, stats) => {
   log(`Build done @ ${new Date().toLocaleTimeString()}`);
 
   if (stats.hasErrors() || stats.hasWarnings()) {
-    console.log(stats.toString("minimal"));
+    log.warn(stats.toString("minimal"));
   }
 
   if (done) {
@@ -64,7 +64,7 @@ gulp.task("webpack-watch-app", () => {
   );
   gulp.watch(
     path.join(paths.translations_src, "en.json"),
-    gulp.series("build-translations", "copy-translations")
+    gulp.series("build-translations", "copy-translations-app")
   );
 });
 
@@ -82,7 +82,7 @@ gulp.task(
 gulp.task("webpack-dev-server-demo", () => {
   runDevServer({
     compiler: webpack(bothBuilds(createDemoConfig, { isProdBuild: false })),
-    contentBase: paths.demo_root,
+    contentBase: paths.demo_output_root,
     port: 8090,
   });
 });
@@ -103,7 +103,7 @@ gulp.task(
 gulp.task("webpack-dev-server-cast", () => {
   runDevServer({
     compiler: webpack(bothBuilds(createCastConfig, { isProdBuild: false })),
-    contentBase: paths.cast_root,
+    contentBase: paths.cast_output_root,
     port: 8080,
     // Accessible from the network, because that's how Cast hits it.
     listenHost: "0.0.0.0",
@@ -129,7 +129,7 @@ gulp.task("webpack-watch-hassio", () => {
   webpack(
     createHassioConfig({
       isProdBuild: false,
-      latestBuild: false,
+      latestBuild: true,
     })
   ).watch({}, handler());
 });
@@ -139,9 +139,8 @@ gulp.task(
   () =>
     new Promise((resolve) =>
       webpack(
-        createHassioConfig({
+        bothBuilds(createHassioConfig, {
           isProdBuild: true,
-          latestBuild: false,
         }),
         handler(resolve)
       )
@@ -152,7 +151,7 @@ gulp.task("webpack-dev-server-gallery", () => {
   runDevServer({
     // We don't use the es5 build, but the dev server will fuck up the publicPath if we don't
     compiler: webpack(bothBuilds(createGalleryConfig, { isProdBuild: false })),
-    contentBase: paths.gallery_root,
+    contentBase: paths.gallery_output_root,
     port: 8100,
   });
 });

build-scripts/paths.js

@@ -4,31 +4,42 @@ module.exports = {
   polymer_dir: path.resolve(__dirname, ".."),
 
   build_dir: path.resolve(__dirname, "../build"),
-  root: path.resolve(__dirname, "../hass_frontend"),
-  static: path.resolve(__dirname, "../hass_frontend/static"),
-  output: path.resolve(__dirname, "../hass_frontend/frontend_latest"),
-  output_es5: path.resolve(__dirname, "../hass_frontend/frontend_es5"),
+  app_output_root: path.resolve(__dirname, "../hass_frontend"),
+  app_output_static: path.resolve(__dirname, "../hass_frontend/static"),
+  app_output_latest: path.resolve(
+    __dirname,
+    "../hass_frontend/frontend_latest"
+  ),
+  app_output_es5: path.resolve(__dirname, "../hass_frontend/frontend_es5"),
 
   demo_dir: path.resolve(__dirname, "../demo"),
-  demo_root: path.resolve(__dirname, "../demo/dist"),
-  demo_static: path.resolve(__dirname, "../demo/dist/static"),
-  demo_output: path.resolve(__dirname, "../demo/dist/frontend_latest"),
+  demo_output_root: path.resolve(__dirname, "../demo/dist"),
+  demo_output_static: path.resolve(__dirname, "../demo/dist/static"),
+  demo_output_latest: path.resolve(__dirname, "../demo/dist/frontend_latest"),
   demo_output_es5: path.resolve(__dirname, "../demo/dist/frontend_es5"),
 
   cast_dir: path.resolve(__dirname, "../cast"),
-  cast_root: path.resolve(__dirname, "../cast/dist"),
-  cast_static: path.resolve(__dirname, "../cast/dist/static"),
-  cast_output: path.resolve(__dirname, "../cast/dist/frontend_latest"),
+  cast_output_root: path.resolve(__dirname, "../cast/dist"),
+  cast_output_static: path.resolve(__dirname, "../cast/dist/static"),
+  cast_output_latest: path.resolve(__dirname, "../cast/dist/frontend_latest"),
   cast_output_es5: path.resolve(__dirname, "../cast/dist/frontend_es5"),
 
   gallery_dir: path.resolve(__dirname, "../gallery"),
-  gallery_root: path.resolve(__dirname, "../gallery/dist"),
-  gallery_output: path.resolve(__dirname, "../gallery/dist/frontend_latest"),
-  gallery_static: path.resolve(__dirname, "../gallery/dist/static"),
+  gallery_output_root: path.resolve(__dirname, "../gallery/dist"),
+  gallery_output_latest: path.resolve(
+    __dirname,
+    "../gallery/dist/frontend_latest"
+  ),
+  gallery_output_static: path.resolve(__dirname, "../gallery/dist/static"),
 
   hassio_dir: path.resolve(__dirname, "../hassio"),
-  hassio_root: path.resolve(__dirname, "../hassio/build"),
-  hassio_publicPath: "/api/hassio/app/",
+  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"),
 };

build-scripts/removedIcons.json

@@ -0,0 +1 @@
+[]

build-scripts/rollup-plugins/dont-hash-plugin.js

@@ -0,0 +1,14 @@
+module.exports = function (opts = {}) {
+  const dontHash = opts.dontHash || new Set();
+
+  return {
+    name: "dont-hash",
+    renderChunk(_code, chunk, _options) {
+      if (!chunk.isEntry || !dontHash.has(chunk.name)) {
+        return null;
+      }
+      chunk.fileName = `${chunk.name}.js`;
+      return null;
+    },
+  };
+};

build-scripts/rollup-plugins/ignore-plugin.js

@@ -0,0 +1,26 @@
+const path = require("path");
+
+module.exports = function (userOptions = {}) {
+  // Files need to be absolute paths.
+  // This only works if the file has no exports
+  // and only is imported for its side effects
+  const files = userOptions.files || [];
+
+  if (files.length === 0) {
+    return {
+      name: "ignore",
+    };
+  }
+
+  return {
+    name: "ignore",
+
+    load(id) {
+      return files.some((toIgnorePath) => id.startsWith(toIgnorePath))
+        ? {
+            code: "",
+          }
+        : null;
+    },
+  };
+};

build-scripts/rollup-plugins/manifest-plugin.js

@@ -0,0 +1,34 @@
+const url = require("url");
+
+const defaultOptions = {
+  publicPath: "",
+};
+
+module.exports = function (userOptions = {}) {
+  const options = { ...defaultOptions, ...userOptions };
+
+  return {
+    name: "manifest",
+    generateBundle(outputOptions, bundle) {
+      const manifest = {};
+
+      for (const chunk of Object.values(bundle)) {
+        if (!chunk.isEntry) {
+          continue;
+        }
+        // Add js extension to mimic Webpack manifest.
+        manifest[`${chunk.name}.js`] = url.resolve(
+          options.publicPath,
+          chunk.fileName
+        );
+      }
+
+      this.emitFile({
+        type: "asset",
+        source: JSON.stringify(manifest, undefined, 2),
+        name: "manifest.json",
+        fileName: "manifest.json",
+      });
+    },
+  };
+};

build-scripts/rollup-plugins/worker-plugin.js

@@ -0,0 +1,149 @@
+// Worker plugin
+// Each worker will include all of its dependencies
+// instead of relying on an importer.
+
+// Forked from v.1.4.1
+// https://github.com/surma/rollup-plugin-off-main-thread
+/**
+ * Copyright 2018 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const rollup = require("rollup");
+const path = require("path");
+const MagicString = require("magic-string");
+
+const defaultOpts = {
+  // A RegExp to find `new Workers()` calls. The second capture group _must_
+  // capture the provided file name without the quotes.
+  workerRegexp: /new Worker\((["'])(.+?)\1(,[^)]+)?\)/g,
+  plugins: ["node-resolve", "commonjs", "babel", "terser", "ignore"],
+};
+
+async function getBundledWorker(workerPath, rollupOptions) {
+  const bundle = await rollup.rollup({
+    ...rollupOptions,
+    input: {
+      worker: workerPath,
+    },
+  });
+  const { output } = await bundle.generate({
+    // Generates cleanest output, we shouldn't have any imports/exports
+    // that would be incompatible with ES5.
+    format: "es",
+    // We should not export anything. This will fail build if we are.
+    exports: "none",
+  });
+
+  let code;
+
+  for (const chunkOrAsset of output) {
+    if (chunkOrAsset.name === "worker") {
+      code = chunkOrAsset.code;
+    } else if (chunkOrAsset.type !== "asset") {
+      throw new Error("Unexpected extra output");
+    }
+  }
+
+  return code;
+}
+
+module.exports = function (opts = {}) {
+  opts = { ...defaultOpts, ...opts };
+
+  let rollupOptions;
+  let refIds;
+
+  return {
+    name: "hass-worker",
+
+    async buildStart(options) {
+      refIds = {};
+      rollupOptions = {
+        plugins: options.plugins.filter((plugin) =>
+          opts.plugins.includes(plugin.name)
+        ),
+      };
+    },
+
+    async transform(code, id) {
+      // Copy the regexp as they are stateful and this hook is async.
+      const workerRegexp = new RegExp(
+        opts.workerRegexp.source,
+        opts.workerRegexp.flags
+      );
+      if (!workerRegexp.test(code)) {
+        return;
+      }
+
+      const ms = new MagicString(code);
+      // Reset the regexp
+      workerRegexp.lastIndex = 0;
+      while (true) {
+        const match = workerRegexp.exec(code);
+        if (!match) {
+          break;
+        }
+
+        const workerFile = match[2];
+        let optionsObject = {};
+        // Parse the optional options object
+        if (match[3] && match[3].length > 0) {
+          // FIXME: ooooof!
+          optionsObject = new Function(`return ${match[3].slice(1)};`)();
+        }
+        delete optionsObject.type;
+
+        if (!new RegExp("^.*/").test(workerFile)) {
+          this.warn(
+            `Paths passed to the Worker constructor must be relative or absolute, i.e. start with /, ./ or ../ (just like dynamic import!). Ignoring "${workerFile}".`
+          );
+          continue;
+        }
+
+        // Find worker file and store it as a chunk with ID prefixed for our loader
+        const resolvedWorkerFile = (await this.resolve(workerFile, id)).id;
+        let chunkRefId;
+        if (resolvedWorkerFile in refIds) {
+          chunkRefId = refIds[resolvedWorkerFile];
+        } else {
+          this.addWatchFile(resolvedWorkerFile);
+          const source = await getBundledWorker(
+            resolvedWorkerFile,
+            rollupOptions
+          );
+          chunkRefId = refIds[resolvedWorkerFile] = this.emitFile({
+            name: path.basename(resolvedWorkerFile),
+            source,
+            type: "asset",
+          });
+        }
+
+        const workerParametersStartIndex = match.index + "new Worker(".length;
+        const workerParametersEndIndex =
+          match.index + match[0].length - ")".length;
+
+        ms.overwrite(
+          workerParametersStartIndex,
+          workerParametersEndIndex,
+          `import.meta.ROLLUP_FILE_URL_${chunkRefId}, ${JSON.stringify(
+            optionsObject
+          )}`
+        );
+      }
+
+      return {
+        code: ms.toString(),
+        map: ms.generateMap({ hires: true }),
+      };
+    },
+  };
+};

build-scripts/rollup.js

@@ -0,0 +1,151 @@
+const path = require("path");
+
+const commonjs = require("@rollup/plugin-commonjs");
+const resolve = require("@rollup/plugin-node-resolve");
+const json = require("@rollup/plugin-json");
+const babel = require("rollup-plugin-babel");
+const replace = require("@rollup/plugin-replace");
+const visualizer = require("rollup-plugin-visualizer");
+const { string } = require("rollup-plugin-string");
+const { terser } = require("rollup-plugin-terser");
+const manifest = require("./rollup-plugins/manifest-plugin");
+const worker = require("./rollup-plugins/worker-plugin");
+const dontHashPlugin = require("./rollup-plugins/dont-hash-plugin");
+const ignore = require("./rollup-plugins/ignore-plugin");
+
+const bundle = require("./bundle");
+const paths = require("./paths");
+
+const extensions = [".js", ".ts"];
+
+/**
+ * @param {Object} arg
+ * @param { import("rollup").InputOption } arg.input
+ */
+const createRollupConfig = ({
+  entry,
+  outputPath,
+  defineOverlay,
+  isProdBuild,
+  latestBuild,
+  isStatsBuild,
+  publicPath,
+  dontHash,
+}) => {
+  return {
+    /**
+     * @type { import("rollup").InputOptions }
+     */
+    inputOptions: {
+      input: entry,
+      // Some entry points contain no JavaScript. This setting silences a warning about that.
+      // https://rollupjs.org/guide/en/#preserveentrysignatures
+      preserveEntrySignatures: false,
+      plugins: [
+        ignore({
+          files: bundle.emptyPackages({ latestBuild }),
+        }),
+        resolve({
+          extensions,
+          preferBuiltins: false,
+          browser: true,
+          rootDir: paths.polymer_dir,
+        }),
+        commonjs({
+          namedExports: {
+            "js-yaml": ["safeDump", "safeLoad"],
+          },
+        }),
+        json(),
+        babel({
+          ...bundle.babelOptions({ latestBuild }),
+          extensions,
+          exclude: bundle.babelExclude(),
+        }),
+        string({
+          // Import certain extensions as strings
+          include: [path.join(paths.polymer_dir, "node_modules/**/*.css")],
+        }),
+        replace(
+          bundle.definedVars({ isProdBuild, latestBuild, defineOverlay })
+        ),
+        manifest({
+          publicPath,
+        }),
+        worker(),
+        dontHashPlugin({ dontHash }),
+        isProdBuild && terser(bundle.terserOptions(latestBuild)),
+        isStatsBuild &&
+          visualizer({
+            // https://github.com/btd/rollup-plugin-visualizer#options
+            open: true,
+            sourcemap: true,
+          }),
+      ],
+    },
+    /**
+     * @type { import("rollup").OutputOptions }
+     */
+    outputOptions: {
+      // https://rollupjs.org/guide/en/#outputdir
+      dir: outputPath,
+      // https://rollupjs.org/guide/en/#outputformat
+      format: latestBuild ? "es" : "systemjs",
+      // https://rollupjs.org/guide/en/#outputexternallivebindings
+      externalLiveBindings: false,
+      // https://rollupjs.org/guide/en/#outputentryfilenames
+      // https://rollupjs.org/guide/en/#outputchunkfilenames
+      // https://rollupjs.org/guide/en/#outputassetfilenames
+      entryFileNames:
+        isProdBuild && !isStatsBuild ? "[name]-[hash].js" : "[name].js",
+      chunkFileNames:
+        isProdBuild && !isStatsBuild ? "c.[hash].js" : "[name].js",
+      assetFileNames:
+        isProdBuild && !isStatsBuild ? "a.[hash].js" : "[name].js",
+      // https://rollupjs.org/guide/en/#outputsourcemap
+      sourcemap: isProdBuild ? true : "inline",
+    },
+  };
+};
+
+const createAppConfig = ({ isProdBuild, latestBuild, isStatsBuild }) => {
+  return createRollupConfig(
+    bundle.config.app({
+      isProdBuild,
+      latestBuild,
+      isStatsBuild,
+    })
+  );
+};
+
+const createDemoConfig = ({ isProdBuild, latestBuild, isStatsBuild }) => {
+  return createRollupConfig(
+    bundle.config.demo({
+      isProdBuild,
+      latestBuild,
+      isStatsBuild,
+    })
+  );
+};
+
+const createCastConfig = ({ isProdBuild, latestBuild }) => {
+  return createRollupConfig(bundle.config.cast({ isProdBuild, latestBuild }));
+};
+
+const createHassioConfig = ({ isProdBuild, latestBuild }) => {
+  return createRollupConfig(bundle.config.hassio({ isProdBuild, latestBuild }));
+};
+
+const createGalleryConfig = ({ isProdBuild, latestBuild }) => {
+  return createRollupConfig(
+    bundle.config.gallery({ isProdBuild, latestBuild })
+  );
+};
+
+module.exports = {
+  createAppConfig,
+  createDemoConfig,
+  createCastConfig,
+  createHassioConfig,
+  createGalleryConfig,
+};

build-scripts/webpack.js

@@ -1,15 +1,15 @@
 const webpack = require("webpack");
 const path = require("path");
 const TerserPlugin = require("terser-webpack-plugin");
-const WorkboxPlugin = require("workbox-webpack-plugin");
 const ManifestPlugin = require("webpack-manifest-plugin");
+const WorkerPlugin = require("worker-plugin");
 const paths = require("./paths.js");
-const env = require("./env.js");
-const { babelLoaderConfig } = require("./babel.js");
+const bundle = require("./bundle");
 
 const createWebpackConfig = ({
   entry,
-  outputRoot,
+  outputPath,
+  publicPath,
   defineOverlay,
   isProdBuild,
   latestBuild,
@@ -19,22 +19,30 @@ const createWebpackConfig = ({
   if (!dontHash) {
     dontHash = new Set();
   }
+  const ignorePackages = bundle.ignorePackages({ latestBuild });
   return {
     mode: isProdBuild ? "production" : "development",
-    devtool: isProdBuild ? "source-map" : "inline-cheap-module-source-map",
+    devtool: isProdBuild
+      ? "cheap-module-source-map"
+      : "eval-cheap-module-source-map",
     entry,
+    node: false,
     module: {
       rules: [
-        babelLoaderConfig({ latestBuild }),
+        {
+          test: /\.js$|\.ts$/,
+          exclude: bundle.babelExclude(),
+          use: {
+            loader: "babel-loader",
+            options: bundle.babelOptions({ latestBuild }),
+          },
+        },
         {
           test: /\.css$/,
           use: "raw-loader",
         },
       ],
     },
-    externals: {
-      esprima: "esprima",
-    },
     optimization: {
       minimizer: [
         new TerserPlugin({
@@ -42,45 +50,56 @@ const createWebpackConfig = ({
           parallel: true,
           extractComments: true,
           sourceMap: true,
-          terserOptions: {
-            safari10: true,
-            ecma: latestBuild ? undefined : 5,
-          },
+          terserOptions: bundle.terserOptions(latestBuild),
         }),
       ],
     },
     plugins: [
-      new ManifestPlugin(),
-      new webpack.DefinePlugin({
-        __DEV__: !isProdBuild,
-        __BUILD__: JSON.stringify(latestBuild ? "latest" : "es5"),
-        __VERSION__: JSON.stringify(env.version()),
-        __DEMO__: false,
-        __BACKWARDS_COMPAT__: false,
-        __STATIC_PATH__: "/static/",
-        "process.env.NODE_ENV": JSON.stringify(
-          isProdBuild ? "production" : "development"
-        ),
-        ...defineOverlay,
+      new WorkerPlugin(),
+      new ManifestPlugin({
+        // Only include the JS of entrypoints
+        filter: (file) => file.isInitial && !file.name.endsWith(".map"),
+      }),
+      new webpack.DefinePlugin(
+        bundle.definedVars({ isProdBuild, latestBuild, defineOverlay })
+      ),
+      new webpack.IgnorePlugin({
+        checkResource(resource, context) {
+          // Only use ignore to intercept imports that we don't control
+          // inside node_module dependencies.
+          if (
+            !context.includes("/node_modules/") ||
+            // calling define.amd will call require("!!webpack amd options")
+            resource.startsWith("!!webpack") ||
+            // loaded by webpack dev server but doesn't exist.
+            resource === "webpack/hot"
+          ) {
+            return false;
+          }
+          let fullPath;
+          try {
+            fullPath = resource.startsWith(".")
+              ? path.resolve(context, resource)
+              : require.resolve(resource);
+          } catch (err) {
+            console.error(
+              "Error in Home Assistant ignore plugin",
+              resource,
+              context
+            );
+            throw err;
+          }
+
+          return ignorePackages.some((toIgnorePath) =>
+            fullPath.startsWith(toIgnorePath)
+          );
+        },
       }),
-      // Ignore moment.js locales
-      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
-      // Color.js is bloated, it contains all color definitions for all material color sets.
       new webpack.NormalModuleReplacementPlugin(
-        /@polymer\/paper-styles\/color\.js$/,
+        new RegExp(bundle.emptyPackages({ latestBuild }).join("|")),
         path.resolve(paths.polymer_dir, "src/util/empty.js")
       ),
-      // Ignore roboto pointing at CDN. We use local font-roboto-local.
-      new webpack.NormalModuleReplacementPlugin(
-        /@polymer\/font-roboto\/roboto\.js$/,
-        path.resolve(paths.polymer_dir, "src/util/empty.js")
-      ),
-      // Ignore mwc icons pointing at CDN.
-      new webpack.NormalModuleReplacementPlugin(
-        /@material\/mwc-icon\/mwc-icon-font\.js$/,
-        path.resolve(paths.polymer_dir, "src/util/empty.js")
-      ),
-    ].filter(Boolean),
+    ],
     resolve: {
       extensions: [".ts", ".js", ".json"],
     },
@@ -95,147 +114,40 @@ const createWebpackConfig = ({
         isProdBuild && !isStatsBuild
           ? "chunk.[chunkhash].js"
           : "[name].chunk.js",
-      path: path.resolve(
-        outputRoot,
-        latestBuild ? "frontend_latest" : "frontend_es5"
-      ),
-      publicPath: latestBuild ? "/frontend_latest/" : "/frontend_es5/",
-      // For workerize loader
+      path: outputPath,
+      publicPath,
+      // To silence warning in worker plugin
       globalObject: "self",
     },
   };
 };
 
 const createAppConfig = ({ isProdBuild, latestBuild, isStatsBuild }) => {
-  const config = createWebpackConfig({
-    entry: {
-      app: "./src/entrypoints/app.ts",
-      authorize: "./src/entrypoints/authorize.ts",
-      onboarding: "./src/entrypoints/onboarding.ts",
-      core: "./src/entrypoints/core.ts",
-      compatibility: "./src/entrypoints/compatibility.ts",
-      "custom-panel": "./src/entrypoints/custom-panel.ts",
-    },
-    outputRoot: paths.root,
-    isProdBuild,
-    latestBuild,
-    isStatsBuild,
-  });
-
-  if (latestBuild) {
-    // Create an object mapping browser urls to their paths during build
-    const translationMetadata = require("../build-translations/translationMetadata.json");
-    const workBoxTranslationsTemplatedURLs = {};
-    const englishFilename = `en-${translationMetadata.translations.en.hash}.json`;
-
-    // core
-    workBoxTranslationsTemplatedURLs[
-      `/static/translations/${englishFilename}`
-    ] = `build-translations/output/${englishFilename}`;
-
-    translationMetadata.fragments.forEach((fragment) => {
-      workBoxTranslationsTemplatedURLs[
-        `/static/translations/${fragment}/${englishFilename}`
-      ] = `build-translations/output/${fragment}/${englishFilename}`;
-    });
-
-    config.plugins.push(
-      new WorkboxPlugin.InjectManifest({
-        swSrc: "./src/entrypoints/service-worker-hass.js",
-        swDest: "service_worker.js",
-        importWorkboxFrom: "local",
-        include: [/\.js$/],
-        templatedURLs: {
-          ...workBoxTranslationsTemplatedURLs,
-          "/static/icons/favicon-192x192.png":
-            "public/icons/favicon-192x192.png",
-          "/static/fonts/roboto/Roboto-Light.woff2":
-            "node_modules/roboto-fontface/fonts/roboto/Roboto-Light.woff2",
-          "/static/fonts/roboto/Roboto-Medium.woff2":
-            "node_modules/roboto-fontface/fonts/roboto/Roboto-Medium.woff2",
-          "/static/fonts/roboto/Roboto-Regular.woff2":
-            "node_modules/roboto-fontface/fonts/roboto/Roboto-Regular.woff2",
-          "/static/fonts/roboto/Roboto-Bold.woff2":
-            "node_modules/roboto-fontface/fonts/roboto/Roboto-Bold.woff2",
-        },
-      })
-    );
-  }
-
-  return config;
+  return createWebpackConfig(
+    bundle.config.app({ isProdBuild, latestBuild, isStatsBuild })
+  );
 };
 
 const createDemoConfig = ({ isProdBuild, latestBuild, isStatsBuild }) => {
-  return createWebpackConfig({
-    entry: {
-      main: path.resolve(paths.demo_dir, "src/entrypoint.ts"),
-      compatibility: path.resolve(
-        paths.polymer_dir,
-        "src/entrypoints/compatibility.ts"
-      ),
-    },
-    outputRoot: paths.demo_root,
-    defineOverlay: {
-      __VERSION__: JSON.stringify(`DEMO-${env.version()}`),
-      __DEMO__: true,
-    },
-    isProdBuild,
-    latestBuild,
-    isStatsBuild,
-  });
+  return createWebpackConfig(
+    bundle.config.demo({ isProdBuild, latestBuild, isStatsBuild })
+  );
 };
 
 const createCastConfig = ({ isProdBuild, latestBuild }) => {
-  const entry = {
-    launcher: path.resolve(paths.cast_dir, "src/launcher/entrypoint.ts"),
-  };
-
-  if (latestBuild) {
-    entry.receiver = path.resolve(paths.cast_dir, "src/receiver/entrypoint.ts");
-  }
-
-  return createWebpackConfig({
-    entry,
-    outputRoot: paths.cast_root,
-    isProdBuild,
-    latestBuild,
-    defineOverlay: {
-      __BACKWARDS_COMPAT__: true,
-    },
-  });
+  return createWebpackConfig(bundle.config.cast({ isProdBuild, latestBuild }));
 };
 
 const createHassioConfig = ({ isProdBuild, latestBuild }) => {
-  if (latestBuild) {
-    throw new Error("Hass.io does not support latest build!");
-  }
-  const config = createWebpackConfig({
-    entry: {
-      entrypoint: path.resolve(paths.hassio_dir, "src/entrypoint.ts"),
-    },
-    outputRoot: "",
-    isProdBuild,
-    latestBuild,
-    dontHash: new Set(["entrypoint"]),
-  });
-
-  config.output.path = paths.hassio_root;
-  config.output.publicPath = paths.hassio_publicPath;
-
-  return config;
+  return createWebpackConfig(
+    bundle.config.hassio({ isProdBuild, latestBuild })
+  );
 };
 
 const createGalleryConfig = ({ isProdBuild, latestBuild }) => {
-  const config = createWebpackConfig({
-    entry: {
-      entrypoint: path.resolve(paths.gallery_dir, "src/entrypoint.js"),
-    },
-    outputRoot: paths.gallery_root,
-    isProdBuild,
-    latestBuild,
-  });
-
-  return config;
+  return createWebpackConfig(
+    bundle.config.gallery({ isProdBuild, latestBuild })
+  );
 };
 
 module.exports = {

cast/rollup.config.js

@@ -0,0 +1,10 @@
+const rollup = require("../build-scripts/rollup.js");
+const env = require("../build-scripts/env.js");
+
+const config = rollup.createCastConfig({
+  isProdBuild: env.isProdBuild(),
+  latestBuild: true,
+  isStatsBuild: env.isStatsBuild(),
+});
+
+module.exports = { ...config.inputOptions, output: config.outputOptions };

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

@@ -37,18 +37,21 @@
   <body>
     <%= renderTemplate('_js_base') %>
 
-    <script type="module" crossorigin="use-credentials">
-      import "<%= latestLauncherJS %>";
+    <script>
+      import("<%= latestLauncherJS %>");
+      window.latestJS = true;
     </script>
 
-    <script nomodule>
-      (function() {
-        // // Safari 10.1 supports type=module but ignores nomodule, so we add this check.
-        if (!isS101) {
-          _ls("/static/polyfills/custom-elements-es5-adapter.js");
+    <script>
+      if (!window.latestJS) {
+        <% if (useRollup) { %>
+          _ls("/static/js/s.min.js").onload = function() {
+            System.import("<%= es5LauncherJS %>");
+          };
+        <% } else { %>
           _ls("<%= es5LauncherJS %>");
-        }
-      })();
+        <% } %>
+      }
     </script>
 
     <hc-layout subtitle="FAQ">
@@ -248,7 +251,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,18 +28,21 @@
 
     <hc-connect></hc-connect>
 
-    <script type="module" crossorigin="use-credentials">
-      import "<%= latestLauncherJS %>";
+    <script>
+      import("<%= latestLauncherJS %>");
+      window.latestJS = true;
     </script>
 
-    <script nomodule>
-      (function() {
-        // // Safari 10.1 supports type=module but ignores nomodule, so we add this check.
-        if (!isS101) {
-          _ls("/static/polyfills/custom-elements-es5-adapter.js");
+    <script>
+      if (!window.latestJS) {
+        <% 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,4 @@
+import "../../../src/resources/safari-14-attachshadow-patch";
 import "../../../src/resources/ha-style";
 import "../../../src/resources/roboto";
 import "./layout/hc-connect";

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

@@ -8,6 +8,7 @@ import {
   html,
   LitElement,
   property,
+  internalProperty,
   TemplateResult,
 } from "lit-element";
 import { CastManager } from "../../../../src/cast/cast_manager";
@@ -28,7 +29,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";
@@ -41,13 +42,13 @@ class HcCast extends LitElement {
 
   @property() public castManager!: CastManager;
 
-  @property() private askWrite = false;
+  @internalProperty() private askWrite = false;
 
-  @property() private lovelaceConfig?: LovelaceConfig | null;
+  @internalProperty() private lovelaceConfig?: LovelaceConfig | null;
 
   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

@@ -17,8 +17,8 @@ import {
   customElement,
   html,
   LitElement,
-  property,
   TemplateResult,
+  internalProperty,
 } from "lit-element";
 import { CastManager, getCastManager } from "../../../../src/cast/cast_manager";
 import { castSendShowDemo } from "../../../../src/cast/receiver_messages";
@@ -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";
 
@@ -60,19 +60,19 @@ const INTRO = html`
 
 @customElement("hc-connect")
 export class HcConnect extends LitElement {
-  @property() private loading = false;
+  @internalProperty() private loading = false;
 
   // If we had stored credentials but we cannot connect,
   // show a screen asking retry or logout.
-  @property() private cannotConnect = false;
+  @internalProperty() private cannotConnect = false;
 
-  @property() private error?: string | TemplateResult;
+  @internalProperty() private error?: string | TemplateResult;
 
-  @property() private auth?: Auth;
+  @internalProperty() private auth?: Auth;
 
-  @property() private connection?: Connection;
+  @internalProperty() private connection?: Connection;
 
-  @property() private castManager?: CastManager | null;
+  @internalProperty() private castManager?: CastManager | null;
 
   private openDemo = false;
 
@@ -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) {
@@ -184,7 +184,7 @@ export class HcConnect extends LitElement {
         this.castManager = null;
       }
     );
-    registerServiceWorker(false);
+    registerServiceWorker(this, false);
   }
 
   private async _handleDemo() {

cast/src/receiver/layout/hc-demo.ts

@@ -1,4 +1,10 @@
-import { customElement, html, property, TemplateResult } from "lit-element";
+import {
+  customElement,
+  html,
+  property,
+  internalProperty,
+  TemplateResult,
+} from "lit-element";
 import { mockHistory } from "../../../../demo/src/stubs/history";
 import { LovelaceConfig } from "../../../../src/data/lovelace";
 import {
@@ -13,9 +19,9 @@ import "./hc-lovelace";
 
 @customElement("hc-demo")
 class HcDemo extends HassElement {
-  @property() public lovelacePath!: string;
+  @property({ attribute: false }) public lovelacePath!: string;
 
-  @property() private _lovelaceConfig?: LovelaceConfig;
+  @internalProperty() private _lovelaceConfig?: LovelaceConfig;
 
   protected render(): TemplateResult {
     if (!this._lovelaceConfig) {

cast/src/receiver/layout/hc-launch-screen.ts

@@ -11,7 +11,7 @@ import { HomeAssistant } from "../../../../src/types";
 
 @customElement("hc-launch-screen")
 class HcLaunchScreen extends LitElement {
-  @property() public hass?: HomeAssistant;
+  @property({ attribute: false }) public hass?: HomeAssistant;
 
   @property() public error?: string;
 

cast/src/receiver/layout/hc-lovelace.ts

@@ -16,12 +16,14 @@ import "./hc-launch-screen";
 
 @customElement("hc-lovelace")
 class HcLovelace extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public lovelaceConfig!: LovelaceConfig;
+  @property({ attribute: false }) public lovelaceConfig!: LovelaceConfig;
 
   @property() public viewPath?: string | number;
 
+  public urlPath?: string | null;
+
   protected render(): TemplateResult {
     const index = this._viewIndex;
     if (index === undefined) {
@@ -35,6 +37,7 @@ class HcLovelace extends LitElement {
     const lovelace: Lovelace = {
       config: this.lovelaceConfig,
       editMode: false,
+      urlPath: this.urlPath!,
       enableFullEditMode: () => undefined,
       mode: "storage",
       language: "en",

cast/src/receiver/layout/hc-main.ts

@@ -3,7 +3,12 @@ import {
   getAuth,
   UnsubscribeFunc,
 } from "home-assistant-js-websocket";
-import { customElement, html, property, TemplateResult } from "lit-element";
+import {
+  customElement,
+  html,
+  internalProperty,
+  TemplateResult,
+} from "lit-element";
 import { CAST_NS } from "../../../../src/cast/const";
 import {
   ConnectMessage,
@@ -31,13 +36,13 @@ let resourcesLoaded = false;
 
 @customElement("hc-main")
 export class HcMain extends HassElement {
-  @property() private _showDemo = false;
+  @internalProperty() private _showDemo = false;
 
-  @property() private _lovelaceConfig?: LovelaceConfig;
+  @internalProperty() private _lovelaceConfig?: LovelaceConfig;
 
-  @property() private _lovelacePath: string | number | null = null;
+  @internalProperty() private _lovelacePath: string | number | null = null;
 
-  @property() private _error?: string;
+  @internalProperty() private _error?: string;
 
   private _unsubLovelace?: UnsubscribeFunc;
 
@@ -82,6 +87,8 @@ export class HcMain extends HassElement {
         .hass=${this.hass}
         .lovelaceConfig=${this._lovelaceConfig}
         .viewPath=${this._lovelacePath}
+        .urlPath=${this._urlPath}
+        @config-refresh=${this._generateLovelaceConfig}
       ></hc-lovelace>
     `;
   }
@@ -191,14 +198,11 @@ export class HcMain extends HassElement {
           this._handleNewLovelaceConfig(lovelaceConfig)
         );
       } catch (err) {
+        // eslint-disable-next-line
+        console.log("Error fetching Lovelace configuration", err, msg);
         // Generate a Lovelace config.
         this._unsubLovelace = () => undefined;
-        const { generateLovelaceConfigFromHass } = await import(
-          "../../../../src/panels/lovelace/common/generate-lovelace-config"
-        );
-        this._handleNewLovelaceConfig(
-          await generateLovelaceConfigFromHass(this.hass!)
-        );
+        await this._generateLovelaceConfig();
       }
     }
     if (!resourcesLoaded) {
@@ -218,6 +222,15 @@ export class HcMain extends HassElement {
     this._sendStatus();
   }
 
+  private async _generateLovelaceConfig() {
+    const { generateLovelaceConfigFromHass } = await import(
+      "../../../../src/panels/lovelace/common/generate-lovelace-config"
+    );
+    this._handleNewLovelaceConfig(
+      await generateLovelaceConfigFromHass(this.hass!)
+    );
+  }
+
   private _handleNewLovelaceConfig(lovelaceConfig: LovelaceConfig) {
     castContext.setApplicationState(lovelaceConfig.title!);
     this._lovelaceConfig = lovelaceConfig;

cast/src/receiver/second-load.ts

@@ -1,3 +1,4 @@
 import "web-animations-js/web-animations-next-lite.min";
 import "../../../src/resources/roboto";
+import "../../../src/resources/ha-style";
 import "./layout/hc-lovelace";

cast/webpack.config.js

@@ -1,11 +1,8 @@
 const { createCastConfig } = require("../build-scripts/webpack.js");
-const { isProdBuild } = require("../build-scripts/env.js");
-
-// File just used for stats builds
-
-const latestBuild = true;
+const { isProdBuild, isStatsBuild } = require("../build-scripts/env.js");
 
 module.exports = createCastConfig({
   isProdBuild: isProdBuild(),
-  latestBuild,
+  isStatsBuild: isStatsBuild(),
+  latestBuild: true,
 });

demo/public/manifest.json

@@ -1,6 +1,6 @@
 {
   "background_color": "#FFFFFF",
-  "description": "Open-source home automation platform running on Python 3.",
+  "description": "Home automation platform that puts local control and privacy first.",
   "dir": "ltr",
   "display": "standalone",
   "icons": [
@@ -31,7 +31,7 @@
   ],
   "lang": "en-US",
   "name": "Home Assistant Demo",
-  "short_name": "Demo",
+  "short_name": "HA Demo",
   "start_url": "/?homescreen=1",
   "theme_color": "#03A9F4"
 }

demo/rollup.config.js

@@ -0,0 +1,10 @@
+const rollup = require("../build-scripts/rollup.js");
+const env = require("../build-scripts/env.js");
+
+const config = rollup.createDemoConfig({
+  isProdBuild: env.isProdBuild(),
+  latestBuild: true,
+  isStatsBuild: env.isStatsBuild(),
+});
+
+module.exports = { ...config.inputOptions, output: config.outputOptions };

demo/script/size_stats

@@ -7,5 +7,5 @@ set -e
 cd "$(dirname "$0")/.."
 
 STATS=1 NODE_ENV=production ../node_modules/.bin/webpack --profile --json > compilation-stats.json
-npx webpack-bundle-analyzer compilation-stats.json dist
+npx webpack-bundle-analyzer compilation-stats.json dist/frontend_latest
 rm compilation-stats.json

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",
-  "google-red-500": "#E45E65",
+  "error-color": "#E45E65",
   "divider-color": "rgba(0, 0, 0, .12)",
-  "google-green-500": "#39E949",
+  "success-color": "#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",
-  "google-red-500": "#b58e31",
+  "error-color": "#b58e31",
   "divider-color": "rgba(0, 0, 0, .12)",
-  "google-green-500": "#2980b9",
+  "success-color": "#2980b9",
   "switch-unchecked-button-color": "var(--disabled-text-color)",
   "label-badge-border-color": "green",
   "paper-listbox-color": "#777777",

demo/src/configs/teachingbirds/lovelace.ts

@@ -63,7 +63,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
                   elements: [
                     {
                       style: {
-                        "--mdc-icon-size": "100px",
+                        "--mdc-icon-size": "100%",
                         top: "50%",
                         left: "50%",
                       },

demo/src/custom-cards/cast-demo-row.ts

@@ -4,7 +4,7 @@ import {
   customElement,
   html,
   LitElement,
-  property,
+  internalProperty,
   TemplateResult,
 } from "lit-element";
 import { CastManager } from "../../../src/cast/cast_manager";
@@ -20,7 +20,7 @@ import { HomeAssistant } from "../../../src/types";
 class CastDemoRow extends LitElement implements LovelaceRow {
   public hass!: HomeAssistant;
 
-  @property() private _castManager?: CastManager | null;
+  @internalProperty() private _castManager?: CastManager | null;
 
   public setConfig(_config: CastConfig): void {
     // No config possible.
@@ -52,7 +52,6 @@ class CastDemoRow extends LitElement implements LovelaceRow {
         });
         mgr.castContext.addEventListener(
           // eslint-disable-next-line no-undef
-          // @ts-ignore
           cast.framework.CastContextEventType.SESSION_STATE_CHANGED,
           (ev) => {
             // On Android, opening a new session always results in SESSION_RESUMED.

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

@@ -1,15 +1,16 @@
 import "@material/mwc-button";
-import "@polymer/paper-spinner/paper-spinner-lite";
 import {
   css,
   CSSResult,
   html,
   LitElement,
   property,
+  internalProperty,
   TemplateResult,
 } 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";
@@ -21,11 +22,11 @@ import {
 } from "../configs/demo-configs";
 
 export class HADemoCard extends LitElement implements LovelaceCard {
-  @property() public lovelace?: Lovelace;
+  @property({ attribute: false }) public lovelace?: Lovelace;
 
-  @property() public hass!: MockHomeAssistant;
+  @property({ attribute: false }) public hass!: MockHomeAssistant;
 
-  @property() private _switching?: boolean;
+  @internalProperty() private _switching?: boolean;
 
   private _hidden = localStorage.hide_demo_card;
 
@@ -49,7 +50,7 @@ export class HADemoCard extends LitElement implements LovelaceCard {
         <div class="picker">
           <div class="label">
             ${this._switching
-              ? html` <paper-spinner-lite active></paper-spinner-lite> `
+              ? html`<ha-circular-progress active></ha-circular-progress>`
               : until(
                   selectedDemoConfig.then(
                     (conf) => html`

demo/src/entrypoint.ts

@@ -1,4 +1,4 @@
-import "@polymer/paper-styles/typography";
+import "../../src/resources/safari-14-attachshadow-patch";
 import "@polymer/polymer/lib/elements/dom-if";
 import "@polymer/polymer/lib/elements/dom-repeat";
 import "../../src/resources/ha-style";

demo/src/ha-demo.ts

@@ -1,3 +1,4 @@
+import "../../src/resources/compatibility";
 import { isNavigationClick } from "../../src/common/dom/is-navigation-click";
 import { navigate } from "../../src/common/navigate";
 import {

demo/src/html/index.html.template

@@ -5,18 +5,6 @@
     <link rel="manifest" href="/manifest.json" crossorigin="use-credentials" />
     <link rel="icon" href="/static/icons/favicon.ico" />
     <link rel="mask-icon" href="/static/icons/mask-icon.svg" color="#03a9f4" />
-    <link
-      rel="preload"
-      href="/static/fonts/roboto/Roboto-Regular.woff2"
-      as="font"
-      crossorigin
-    />
-    <link
-      rel="preload"
-      href="/static/fonts/roboto/Roboto-Medium.woff2"
-      as="font"
-      crossorigin
-    />
     <link
       rel="apple-touch-icon"
       sizes="180x180"
@@ -96,23 +84,28 @@
     <div id="ha-init-skeleton"></div>
     <ha-demo></ha-demo>
     <%= renderTemplate('_js_base') %>
+    <%= renderTemplate('_preload_roboto') %>
 
-    <script type="module" src="<%= latestDemoJS %>"></script>
+    <script>
+      import("<%= latestDemoJS %>");
+      window.latestJS = true;
+    </script>
 
-    <script nomodule>
-      (function() {
-        // // Safari 10.1 supports type=module but ignores nomodule, so we add this check.
-        if (!isS101) {
-          _ls("/static/polyfills/custom-elements-es5-adapter.js");
-          _ls("<%= es5Compatibility %>");
+    <script>
+      if (!window.latestJS) {
+        <% 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/rollup.config.js

@@ -0,0 +1,10 @@
+const rollup = require("../build-scripts/rollup.js");
+const env = require("../build-scripts/env.js");
+
+const config = rollup.createGalleryConfig({
+  isProdBuild: env.isProdBuild(),
+  latestBuild: true,
+  isStatsBuild: env.isStatsBuild(),
+});
+
+module.exports = { ...config.inputOptions, output: config.outputOptions };

gallery/src/components/demo-cards.js

@@ -3,6 +3,7 @@ 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 "./demo-card";
 
 class DemoCards extends PolymerElement {
@@ -26,9 +27,10 @@ class DemoCards extends PolymerElement {
       </style>
       <app-toolbar>
         <div class="filters">
-          <ha-switch checked="[[_showConfig]]" on-change="_showConfigToggled">
-            Show config
-          </ha-switch>
+          <ha-formfield label="Show config">
+            <ha-switch checked="[[_showConfig]]" on-change="_showConfigToggled">
+            </ha-switch>
+          </ha-formfield>
         </div>
       </app-toolbar>
       <div class="cards">

gallery/src/components/demo-more-info.js

@@ -2,8 +2,8 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "../../../src/components/ha-card";
-import "../../../src/dialogs/more-info/controls/more-info-content";
 import "../../../src/state-summary/state-card-content";
+import "./more-info-content";
 
 class DemoMoreInfo extends PolymerElement {
   static get template() {

gallery/src/components/more-info-content.ts

@@ -0,0 +1,73 @@
+import { HassEntity } from "home-assistant-js-websocket";
+import { property, PropertyValues, UpdatingElement } from "lit-element";
+import dynamicContentUpdater from "../../../src/common/dom/dynamic_content_updater";
+import { stateMoreInfoType } from "../../../src/common/entity/state_more_info_type";
+import "../../../src/dialogs/more-info/controls/more-info-alarm_control_panel";
+import "../../../src/dialogs/more-info/controls/more-info-automation";
+import "../../../src/dialogs/more-info/controls/more-info-camera";
+import "../../../src/dialogs/more-info/controls/more-info-climate";
+import "../../../src/dialogs/more-info/controls/more-info-configurator";
+import "../../../src/dialogs/more-info/controls/more-info-counter";
+import "../../../src/dialogs/more-info/controls/more-info-cover";
+import "../../../src/dialogs/more-info/controls/more-info-default";
+import "../../../src/dialogs/more-info/controls/more-info-fan";
+import "../../../src/dialogs/more-info/controls/more-info-group";
+import "../../../src/dialogs/more-info/controls/more-info-humidifier";
+import "../../../src/dialogs/more-info/controls/more-info-input_datetime";
+import "../../../src/dialogs/more-info/controls/more-info-light";
+import "../../../src/dialogs/more-info/controls/more-info-lock";
+import "../../../src/dialogs/more-info/controls/more-info-media_player";
+import "../../../src/dialogs/more-info/controls/more-info-person";
+import "../../../src/dialogs/more-info/controls/more-info-script";
+import "../../../src/dialogs/more-info/controls/more-info-sun";
+import "../../../src/dialogs/more-info/controls/more-info-timer";
+import "../../../src/dialogs/more-info/controls/more-info-vacuum";
+import "../../../src/dialogs/more-info/controls/more-info-water_heater";
+import "../../../src/dialogs/more-info/controls/more-info-weather";
+import { HomeAssistant } from "../../../src/types";
+
+class MoreInfoContent extends UpdatingElement {
+  @property({ attribute: false }) public hass?: HomeAssistant;
+
+  @property() public stateObj?: HassEntity;
+
+  private _detachedChild?: ChildNode;
+
+  protected firstUpdated(): void {
+    this.style.position = "relative";
+    this.style.display = "block";
+  }
+
+  // This is not a lit element, but an updating element, so we implement update
+  protected update(changedProps: PropertyValues): void {
+    super.update(changedProps);
+    const stateObj = this.stateObj;
+    const hass = this.hass;
+
+    if (!stateObj || !hass) {
+      if (this.lastChild) {
+        this._detachedChild = this.lastChild;
+        // Detach child to prevent it from doing work.
+        this.removeChild(this.lastChild);
+      }
+      return;
+    }
+
+    if (this._detachedChild) {
+      this.appendChild(this._detachedChild);
+      this._detachedChild = undefined;
+    }
+
+    const moreInfoType =
+      stateObj.attributes && "custom_ui_more_info" in stateObj.attributes
+        ? stateObj.attributes.custom_ui_more_info
+        : "more-info-" + stateMoreInfoType(stateObj);
+
+    dynamicContentUpdater(this, moreInfoType.toUpperCase(), {
+      hass,
+      stateObj,
+    });
+  }
+}
+
+customElements.define("more-info-content", MoreInfoContent);

gallery/src/data/demo_states.js

@@ -420,15 +420,6 @@ export default {
     last_changed: "2018-07-19T10:44:46.105940+00:00",
     last_updated: "2018-07-19T10:44:46.105940+00:00",
   },
-  "weblink.router": {
-    entity_id: "weblink.router",
-    state: "http://192.168.1.1",
-    attributes: {
-      friendly_name: "Router",
-    },
-    last_changed: "2018-07-19T10:44:46.107286+00:00",
-    last_updated: "2018-07-19T10:44:46.107286+00:00",
-  },
   "group.all_plants": {
     entity_id: "group.all_plants",
     state: "ok",
@@ -1090,18 +1081,6 @@ export default {
     last_changed: "2018-07-19T10:44:46.510448+00:00",
     last_updated: "2018-07-19T10:44:46.510448+00:00",
   },
-  "history_graph.recent_switches": {
-    entity_id: "history_graph.recent_switches",
-    state: "unknown",
-    attributes: {
-      hours_to_show: 1,
-      refresh: 60,
-      entity_id: ["switch.ac", "switch.decorative_lights"],
-      friendly_name: "Recent Switches",
-    },
-    last_changed: "2018-07-19T10:44:46.512351+00:00",
-    last_updated: "2018-07-19T10:44:46.512351+00:00",
-  },
   "scene.switch_on_and_off": {
     entity_id: "scene.switch_on_and_off",
     state: "scening",

gallery/src/demos/demo-more-info-light.ts

@@ -3,10 +3,10 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "../../../src/components/ha-card";
 import { SUPPORT_BRIGHTNESS } from "../../../src/data/light";
-import "../../../src/dialogs/more-info/controls/more-info-content";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-more-infos";
+import "../components/more-info-content";
 
 const ENTITIES = [
   getEntity("light", "bed_light", "on", {

gallery/src/entrypoint.js

@@ -1,4 +1,3 @@
-import "@polymer/paper-styles/typography";
 import "@polymer/polymer/lib/elements/dom-if";
 import "@polymer/polymer/lib/elements/dom-repeat";
 import "../../src/resources/ha-style";

gallery/src/ha-gallery.js

@@ -1,18 +1,18 @@
 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 "../../src/components/ha-icon-button";
-import "../../src/components/ha-icon";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "../../src/components/ha-card";
+import "../../src/components/ha-icon";
+import "../../src/components/ha-icon-button";
 import "../../src/managers/notification-manager";
-
-// eslint-disable-next-line no-undef
-const DEMOS = require.context("./demos", true, /^(.*\.(ts$))[^.]*$/im);
+import "../../src/styles/polymer-ha-style";
+// eslint-disable-next-line import/extensions
+import { DEMOS } from "../build/import-demos";
 
 const fixPath = (path) => path.substr(2, path.length - 5);
 
@@ -162,7 +162,7 @@ class HaGallery extends PolymerElement {
       },
       _demos: {
         type: Array,
-        value: DEMOS.keys().map(fixPath),
+        value: Object.keys(DEMOS),
       },
       _lovelaceDemos: {
         type: Array,
@@ -209,7 +209,7 @@ class HaGallery extends PolymerElement {
     while (root.lastChild) root.removeChild(root.lastChild);
 
     if (demo) {
-      DEMOS(`./${demo}.ts`);
+      DEMOS[demo]();
       const el = document.createElement(demo);
       root.appendChild(el);
     }

gallery/webpack.config.js

@@ -1,5 +1,8 @@
 const { createGalleryConfig } = require("../build-scripts/webpack.js");
+const { isProdBuild, isStatsBuild } = require("../build-scripts/env.js");
 
 module.exports = createGalleryConfig({
+  isProdBuild: isProdBuild(),
+  isStatsBuild: isStatsBuild(),
   latestBuild: true,
 });

hassio/rollup.config.js

@@ -0,0 +1,10 @@
+const rollup = require("../build-scripts/rollup.js");
+const env = require("../build-scripts/env.js");
+
+const config = rollup.createHassioConfig({
+  isProdBuild: env.isProdBuild(),
+  latestBuild: false,
+  isStatsBuild: env.isStatsBuild(),
+});
+
+module.exports = { ...config.inputOptions, output: config.outputOptions };

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

@@ -21,7 +21,7 @@ import { filterAndSort } from "../components/hassio-filter-addons";
 import { hassioStyle } from "../resources/hassio-style";
 
 class HassioAddonRepositoryEl extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public repo!: HassioAddonRepository;
 

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

@@ -1,9 +1,11 @@
 import "@material/mwc-icon-button/mwc-icon-button";
+import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
 import "@material/mwc-list/mwc-list-item";
 import { mdiDotsVertical } from "@mdi/js";
 import {
   css,
   CSSResult,
+  internalProperty,
   LitElement,
   property,
   PropertyValues,
@@ -18,11 +20,12 @@ import {
   HassioAddonRepository,
   reloadHassioAddons,
 } from "../../../src/data/hassio/addon";
+import { extractApiErrorMessage } from "../../../src/data/hassio/common";
+import "../../../src/layouts/hass-loading-screen";
 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-panel";
+import { supervisorTabs } from "../hassio-tabs";
 import "./hassio-addon-repository";
 
 const sortRepos = (a: HassioAddonRepository, b: HassioAddonRepository) => {
@@ -52,7 +55,7 @@ class HassioAddonStore extends LitElement {
 
   @property({ attribute: false }) private _repos?: HassioAddonRepository[];
 
-  @property() private _filter?: string;
+  @internalProperty() private _filter?: string;
 
   public async refreshData() {
     this._repos = undefined;
@@ -96,19 +99,23 @@ class HassioAddonStore extends LitElement {
         .tabs=${supervisorTabs}
       >
         <span slot="header">Add-on store</span>
-        <ha-button-menu corner="BOTTOM_START" slot="toolbar-icon">
+        <ha-button-menu
+          corner="BOTTOM_START"
+          slot="toolbar-icon"
+          @action=${this._handleAction}
+        >
           <mwc-icon-button slot="trigger" alt="menu">
             <ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon>
           </mwc-icon-button>
-          <mwc-list-item @tap=${this._manageRepositories}>
+          <mwc-list-item>
             Repositories
           </mwc-list-item>
-          <mwc-list-item @tap=${this.refreshData}>
+          <mwc-list-item>
             Reload
           </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
@@ -142,6 +149,17 @@ class HassioAddonStore extends LitElement {
     this._loadData();
   }
 
+  private _handleAction(ev: CustomEvent<ActionDetail>) {
+    switch (ev.detail.index) {
+      case 0:
+        this._manageRepositories();
+        break;
+      case 1:
+        this.refreshData();
+        break;
+    }
+  }
+
   private apiCalled(ev) {
     if (ev.detail.success) {
       this._loadData();
@@ -162,7 +180,7 @@ class HassioAddonStore extends LitElement {
       this._repos.sort(sortRepos);
       this._addons = addonsInfo.addons;
     } catch (err) {
-      alert("Failed to fetch add-on info");
+      alert(extractApiErrorMessage(err));
     }
   }
 

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

@@ -9,6 +9,7 @@ import {
   html,
   LitElement,
   property,
+  internalProperty,
   PropertyValues,
   TemplateResult,
 } from "lit-element";
@@ -27,6 +28,7 @@ import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
 import { suggestAddonRestart } from "../../dialogs/suggestAddonRestart";
 import { hassioStyle } from "../../resources/hassio-style";
+import "../../../../src/components/buttons/ha-progress-button";
 
 @customElement("hassio-addon-audio")
 class HassioAddonAudio extends LitElement {
@@ -34,15 +36,15 @@ class HassioAddonAudio extends LitElement {
 
   @property({ attribute: false }) public addon!: HassioAddonDetails;
 
-  @property() private _error?: string;
+  @internalProperty() private _error?: string;
 
-  @property() private _inputDevices?: HassioHardwareAudioDevice[];
+  @internalProperty() private _inputDevices?: HassioHardwareAudioDevice[];
 
-  @property() private _outputDevices?: HassioHardwareAudioDevice[];
+  @internalProperty() private _outputDevices?: HassioHardwareAudioDevice[];
 
-  @property() private _selectedInput!: null | string;
+  @internalProperty() private _selectedInput!: null | string;
 
-  @property() private _selectedOutput!: null | string;
+  @internalProperty() private _selectedOutput!: null | string;
 
   protected render(): TemplateResult {
     return html`
@@ -90,7 +92,9 @@ class HassioAddonAudio extends LitElement {
           </paper-dropdown-menu>
         </div>
         <div class="card-actions">
-          <mwc-button @click=${this._saveSettings}>Save</mwc-button>
+          <ha-progress-button @click=${this._saveSettings}>
+            Save
+          </ha-progress-button>
         </div>
       </ha-card>
     `;
@@ -107,7 +111,7 @@ class HassioAddonAudio extends LitElement {
           display: block;
         }
         .errors {
-          color: var(--google-red-500);
+          color: var(--error-color);
           margin-bottom: 16px;
         }
         paper-item {
@@ -171,7 +175,10 @@ class HassioAddonAudio extends LitElement {
     }
   }
 
-  private async _saveSettings(): Promise<void> {
+  private async _saveSettings(ev: CustomEvent): Promise<void> {
+    const button = ev.currentTarget as any;
+    button.progress = true;
+
     this._error = undefined;
     const data: HassioAddonSetOptionParams = {
       audio_input:
@@ -181,12 +188,14 @@ class HassioAddonAudio extends LitElement {
     };
     try {
       await setHassioAddonOption(this.hass, this.addon.slug, data);
+      if (this.addon?.state === "started") {
+        await suggestAddonRestart(this, this.hass, this.addon);
+      }
     } catch {
       this._error = "Failed to set addon audio device";
     }
-    if (!this._error && this.addon?.state === "started") {
-      await suggestAddonRestart(this, this.hass, this.addon);
-    }
+
+    button.progress = false;
   }
 }
 

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

@@ -1,4 +1,3 @@
-import "@polymer/paper-spinner/paper-spinner-lite";
 import {
   css,
   CSSResult,
@@ -12,6 +11,7 @@ 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` <paper-spinner-lite active></paper-spinner-lite> `;
+      return html`<ha-circular-progress active></ha-circular-progress>`;
     }
     return html`
       <div class="content">

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

@@ -5,6 +5,7 @@ import {
   CSSResult,
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
   PropertyValues,
@@ -12,6 +13,7 @@ import {
   TemplateResult,
 } from "lit-element";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
+import "../../../../src/components/buttons/ha-progress-button";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-yaml-editor";
 import type { HaYamlEditor } from "../../../../src/components/ha-yaml-editor";
@@ -20,6 +22,7 @@ import {
   HassioAddonSetOptionParams,
   setHassioAddonOption,
 } from "../../../../src/data/hassio/addon";
+import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
 import { showConfirmationDialog } from "../../../../src/dialogs/generic/show-dialog-box";
 import { haStyle } from "../../../../src/resources/styles";
 import type { HomeAssistant } from "../../../../src/types";
@@ -32,7 +35,7 @@ class HassioAddonConfig extends LitElement {
 
   @property({ attribute: false }) public addon!: HassioAddonDetails;
 
-  @property() private _error?: string;
+  @internalProperty() private _error?: string;
 
   @property({ type: Boolean }) private _configHasChanged = false;
 
@@ -54,50 +57,20 @@ class HassioAddonConfig extends LitElement {
           ${valid ? "" : html` <div class="errors">Invalid YAML</div> `}
         </div>
         <div class="card-actions">
-          <mwc-button class="warning" @click=${this._resetTapped}>
+          <ha-progress-button class="warning" @click=${this._resetTapped}>
             Reset to defaults
-          </mwc-button>
-          <mwc-button
+          </ha-progress-button>
+          <ha-progress-button
             @click=${this._saveTapped}
             .disabled=${!this._configHasChanged || !valid}
           >
             Save
-          </mwc-button>
+          </ha-progress-button>
         </div>
       </ha-card>
     `;
   }
 
-  static get styles(): CSSResult[] {
-    return [
-      haStyle,
-      hassioStyle,
-      css`
-        :host {
-          display: block;
-        }
-        ha-card {
-          display: block;
-        }
-        .card-actions {
-          display: flex;
-          justify-content: space-between;
-        }
-        .errors {
-          color: var(--google-red-500);
-          margin-top: 16px;
-        }
-        iron-autogrow-textarea {
-          width: 100%;
-          font-family: monospace;
-        }
-        .syntaxerror {
-          color: var(--google-red-500);
-        }
-      `,
-    ];
-  }
-
   protected updated(changedProperties: PropertyValues): void {
     super.updated(changedProperties);
     if (changedProperties.has("addon")) {
@@ -110,7 +83,10 @@ class HassioAddonConfig extends LitElement {
     this.requestUpdate();
   }
 
-  private async _resetTapped(): Promise<void> {
+  private async _resetTapped(ev: CustomEvent): Promise<void> {
+    const button = ev.currentTarget as any;
+    button.progress = true;
+
     const confirmed = await showConfirmationDialog(this, {
       title: this.addon.name,
       text: "Are you sure you want to reset all your options?",
@@ -119,6 +95,7 @@ class HassioAddonConfig extends LitElement {
     });
 
     if (!confirmed) {
+      button.progress = false;
       return;
     }
 
@@ -136,13 +113,17 @@ class HassioAddonConfig extends LitElement {
       };
       fireEvent(this, "hass-api-called", eventdata);
     } catch (err) {
-      this._error = `Failed to reset addon configuration, ${
-        err.body?.message || err
-      }`;
+      this._error = `Failed to reset addon configuration, ${extractApiErrorMessage(
+        err
+      )}`;
     }
+    button.progress = false;
   }
 
-  private async _saveTapped(): Promise<void> {
+  private async _saveTapped(ev: CustomEvent): Promise<void> {
+    const button = ev.currentTarget as any;
+    button.progress = true;
+
     let data: HassioAddonSetOptionParams;
     this._error = undefined;
     try {
@@ -162,14 +143,45 @@ class HassioAddonConfig extends LitElement {
         path: "options",
       };
       fireEvent(this, "hass-api-called", eventdata);
+      if (this.addon?.state === "started") {
+        await suggestAddonRestart(this, this.hass, this.addon);
+      }
     } catch (err) {
-      this._error = `Failed to save addon configuration, ${
-        err.body?.message || err
-      }`;
-    }
-    if (!this._error && this.addon?.state === "started") {
-      await suggestAddonRestart(this, this.hass, this.addon);
+      this._error = `Failed to save addon configuration, ${extractApiErrorMessage(
+        err
+      )}`;
     }
+    button.progress = false;
+  }
+
+  static get styles(): CSSResult[] {
+    return [
+      haStyle,
+      hassioStyle,
+      css`
+        :host {
+          display: block;
+        }
+        ha-card {
+          display: block;
+        }
+        .card-actions {
+          display: flex;
+          justify-content: space-between;
+        }
+        .errors {
+          color: var(--error-color);
+          margin-top: 16px;
+        }
+        iron-autogrow-textarea {
+          width: 100%;
+          font-family: monospace;
+        }
+        .syntaxerror {
+          color: var(--error-color);
+        }
+      `,
+    ];
   }
 }
 

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

@@ -4,18 +4,21 @@ import {
   CSSResult,
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
   PropertyValues,
   TemplateResult,
 } from "lit-element";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
+import "../../../../src/components/buttons/ha-progress-button";
 import "../../../../src/components/ha-card";
 import {
   HassioAddonDetails,
   HassioAddonSetOptionParams,
   setHassioAddonOption,
 } from "../../../../src/data/hassio/addon";
+import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
 import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
 import { suggestAddonRestart } from "../../dialogs/suggestAddonRestart";
@@ -37,9 +40,9 @@ class HassioAddonNetwork extends LitElement {
 
   @property({ attribute: false }) public addon!: HassioAddonDetails;
 
-  @property() private _error?: string;
+  @internalProperty() private _error?: string;
 
-  @property() private _config?: NetworkItem[];
+  @internalProperty() private _config?: NetworkItem[];
 
   public connectedCallback(): void {
     super.connectedCallback();
@@ -71,7 +74,7 @@ class HassioAddonNetwork extends LitElement {
                       <paper-input
                         @value-changed=${this._configChanged}
                         placeholder="disabled"
-                        .value=${String(item.host)}
+                        .value=${item.host ? String(item.host) : ""}
                         .container=${item.container}
                         no-label-float
                       ></paper-input>
@@ -84,38 +87,17 @@ class HassioAddonNetwork extends LitElement {
           </table>
         </div>
         <div class="card-actions">
-          <mwc-button class="warning" @click=${this._resetTapped}>
+          <ha-progress-button class="warning" @click=${this._resetTapped}>
             Reset to defaults
-          </mwc-button>
-          <mwc-button @click=${this._saveTapped}>Save</mwc-button>
+          </ha-progress-button>
+          <ha-progress-button @click=${this._saveTapped}>
+            Save
+          </ha-progress-button>
         </div>
       </ha-card>
     `;
   }
 
-  static get styles(): CSSResult[] {
-    return [
-      haStyle,
-      hassioStyle,
-      css`
-        :host {
-          display: block;
-        }
-        ha-card {
-          display: block;
-        }
-        .errors {
-          color: var(--google-red-500);
-          margin-bottom: 16px;
-        }
-        .card-actions {
-          display: flex;
-          justify-content: space-between;
-        }
-      `,
-    ];
-  }
-
   protected update(changedProperties: PropertyValues): void {
     super.update(changedProperties);
     if (changedProperties.has("addon")) {
@@ -148,7 +130,10 @@ class HassioAddonNetwork extends LitElement {
     });
   }
 
-  private async _resetTapped(): Promise<void> {
+  private async _resetTapped(ev: CustomEvent): Promise<void> {
+    const button = ev.currentTarget as any;
+    button.progress = true;
+
     const data: HassioAddonSetOptionParams = {
       network: null,
     };
@@ -161,17 +146,22 @@ class HassioAddonNetwork extends LitElement {
         path: "option",
       };
       fireEvent(this, "hass-api-called", eventdata);
+      if (this.addon?.state === "started") {
+        await suggestAddonRestart(this, this.hass, this.addon);
+      }
     } catch (err) {
-      this._error = `Failed to set addon network configuration, ${
-        err.body?.message || err
-      }`;
-    }
-    if (!this._error && this.addon?.state === "started") {
-      await suggestAddonRestart(this, this.hass, this.addon);
+      this._error = `Failed to set addon network configuration, ${extractApiErrorMessage(
+        err
+      )}`;
     }
+
+    button.progress = false;
   }
 
-  private async _saveTapped(): Promise<void> {
+  private async _saveTapped(ev: CustomEvent): Promise<void> {
+    const button = ev.currentTarget as any;
+    button.progress = true;
+
     this._error = undefined;
     const networkconfiguration = {};
     this._config!.forEach((item) => {
@@ -190,14 +180,38 @@ class HassioAddonNetwork extends LitElement {
         path: "option",
       };
       fireEvent(this, "hass-api-called", eventdata);
+      if (this.addon?.state === "started") {
+        await suggestAddonRestart(this, this.hass, this.addon);
+      }
     } catch (err) {
-      this._error = `Failed to set addon network configuration, ${
-        err.body?.message || err
-      }`;
-    }
-    if (!this._error && this.addon?.state === "started") {
-      await suggestAddonRestart(this, this.hass, this.addon);
+      this._error = `Failed to set addon network configuration, ${extractApiErrorMessage(
+        err
+      )}`;
     }
+    button.progress = false;
+  }
+
+  static get styles(): CSSResult[] {
+    return [
+      haStyle,
+      hassioStyle,
+      css`
+        :host {
+          display: block;
+        }
+        ha-card {
+          display: block;
+        }
+        .errors {
+          color: var(--error-color);
+          margin-bottom: 16px;
+        }
+        .card-actions {
+          display: flex;
+          justify-content: space-between;
+        }
+      `,
+    ];
   }
 }
 

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

@@ -1,19 +1,21 @@
-import "@polymer/paper-spinner/paper-spinner-lite";
 import {
   css,
   CSSResult,
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
   TemplateResult,
 } from "lit-element";
+import "../../../../src/components/ha-circular-progress";
 import "../../../../src/components/ha-markdown";
 import {
   fetchHassioAddonDocumentation,
   HassioAddonDetails,
 } from "../../../../src/data/hassio/addon";
-import "../../../../src/layouts/loading-screen";
+import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
+import "../../../../src/layouts/hass-loading-screen";
 import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
 import { hassioStyle } from "../../resources/hassio-style";
@@ -24,9 +26,9 @@ class HassioAddonDocumentationDashboard extends LitElement {
 
   @property({ attribute: false }) public addon?: HassioAddonDetails;
 
-  @property() private _error?: string;
+  @internalProperty() private _error?: string;
 
-  @property() private _content?: string;
+  @internalProperty() private _content?: string;
 
   public async connectedCallback(): Promise<void> {
     super.connectedCallback();
@@ -35,7 +37,7 @@ class HassioAddonDocumentationDashboard extends LitElement {
 
   protected render(): TemplateResult {
     if (!this.addon) {
-      return html` <paper-spinner-lite active></paper-spinner-lite> `;
+      return html`<ha-circular-progress active></ha-circular-progress>`;
     }
     return html`
       <div class="content">
@@ -44,7 +46,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>
@@ -64,6 +66,9 @@ class HassioAddonDocumentationDashboard extends LitElement {
           padding: 8px;
           max-width: 1024px;
         }
+        ha-markdown {
+          padding: 16px;
+        }
       `,
     ];
   }
@@ -76,9 +81,9 @@ class HassioAddonDocumentationDashboard extends LitElement {
         this.addon!.slug
       );
     } catch (err) {
-      this._error = `Failed to get addon documentation, ${
-        err.body?.message || err
-      }`;
+      this._error = `Failed to get addon documentation, ${extractApiErrorMessage(
+        err
+      )}`;
     }
   }
 }

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

@@ -4,7 +4,6 @@ import {
   mdiInformationVariant,
   mdiMathLog,
 } from "@mdi/js";
-import "@polymer/paper-spinner/paper-spinner-lite";
 import {
   css,
   CSSResult,
@@ -20,6 +19,7 @@ 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` <paper-spinner-lite active></paper-spinner-lite> `;
+      return html`<ha-circular-progress active></ha-circular-progress>`;
     }
 
     const addonTabs: PageNavigation[] = [

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

@@ -1,4 +1,3 @@
-import "@polymer/paper-spinner/paper-spinner-lite";
 import {
   css,
   CSSResult,
@@ -9,6 +8,7 @@ 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` <paper-spinner-lite active></paper-spinner-lite> `;
+      return html`<ha-circular-progress active></ha-circular-progress>`;
     }
 
     return html`

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

@@ -9,18 +9,17 @@ import {
   mdiExclamationThick,
   mdiFlask,
   mdiHomeAssistant,
-  mdiInformation,
   mdiKey,
   mdiNetwork,
   mdiPound,
   mdiShield,
 } from "@mdi/js";
-import "@polymer/paper-tooltip/paper-tooltip";
 import {
   css,
   CSSResult,
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
   TemplateResult,
@@ -34,19 +33,27 @@ import "../../../../src/components/buttons/ha-progress-button";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-label-badge";
 import "../../../../src/components/ha-markdown";
+import "../../../../src/components/ha-settings-row";
 import "../../../../src/components/ha-svg-icon";
 import "../../../../src/components/ha-switch";
 import {
   fetchHassioAddonChangelog,
+  fetchHassioAddonInfo,
   HassioAddonDetails,
   HassioAddonSetOptionParams,
   HassioAddonSetSecurityParams,
   installHassioAddon,
   setHassioAddonOption,
   setHassioAddonSecurity,
+  startHassioAddon,
   uninstallHassioAddon,
+  validateHassioAddonOption,
 } from "../../../../src/data/hassio/addon";
-import { showConfirmationDialog } from "../../../../src/dialogs/generic/show-dialog-box";
+import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
+import {
+  showAlertDialog,
+  showConfirmationDialog,
+} from "../../../../src/dialogs/generic/show-dialog-box";
 import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
 import "../../components/hassio-card-content";
@@ -124,9 +131,7 @@ class HassioAddonInfo extends LitElement {
 
   @property({ attribute: false }) public addon!: HassioAddonDetails;
 
-  @property() private _error?: string;
-
-  @property({ type: Boolean }) private _installing = false;
+  @internalProperty() private _error?: string;
 
   protected render(): TemplateResult {
     return html`
@@ -241,19 +246,23 @@ class HassioAddonInfo extends LitElement {
               `
             : ""}
           <div class="security">
-            <ha-label-badge
-              class=${classMap({
-                green: this.addon.stage === "stable",
-                yellow: this.addon.stage === "experimental",
-                red: this.addon.stage === "deprecated",
-              })}
-              @click=${this._showMoreInfo}
-              id="stage"
-              label="stage"
-              description=""
-            >
-              <ha-svg-icon .path=${STAGE_ICON[this.addon.stage]}></ha-svg-icon>
-            </ha-label-badge>
+            ${this.addon.stage !== "stable"
+              ? html` <ha-label-badge
+                  class=${classMap({
+                    yellow: this.addon.stage === "experimental",
+                    red: this.addon.stage === "deprecated",
+                  })}
+                  @click=${this._showMoreInfo}
+                  id="stage"
+                  label="stage"
+                  description=""
+                >
+                  <ha-svg-icon
+                    .path=${STAGE_ICON[this.addon.stage]}
+                  ></ha-svg-icon>
+                </ha-label-badge>`
+              : ""}
+
             <ha-label-badge
               class=${classMap({
                 green: [5, 6].includes(Number(this.addon.rating)),
@@ -381,67 +390,94 @@ class HassioAddonInfo extends LitElement {
 
           ${this.addon.version
             ? html`
-                <div class="state">
-                  <div>Start on boot</div>
-                  <ha-switch
-                    @change=${this._startOnBootToggled}
-                    .checked=${this.addon.boot === "auto"}
-                    haptic
-                  ></ha-switch>
-                </div>
-                ${this.addon.auto_update || this.hass.userData?.showAdvanced
-                  ? html`
-                      <div class="state">
-                        <div>Auto update</div>
-                        <ha-switch
-                          @change=${this._autoUpdateToggled}
-                          .checked=${this.addon.auto_update}
-                          haptic
-                        ></ha-switch>
-                      </div>
-                    `
-                  : ""}
-                ${this.addon.ingress
-                  ? html`
-                      <div class="state">
-                        <div>Show in sidebar</div>
-                        <ha-switch
-                          @change=${this._panelToggled}
-                          .checked=${this.addon.ingress_panel}
-                          .disabled=${this._computeCannotIngressSidebar}
-                          haptic
-                        ></ha-switch>
-                        ${this._computeCannotIngressSidebar
-                          ? html`
-                              <span>
-                                This option requires Home Assistant 0.92 or
-                                later.
-                              </span>
-                            `
-                          : ""}
-                      </div>
-                    `
-                  : ""}
-                ${this._computeUsesProtectedOptions
-                  ? html`
-                      <div class="state">
-                        <div>
-                          Protection mode
-                          <span>
-                            <ha-svg-icon path=${mdiInformation}></ha-svg-icon>
-                            <paper-tooltip>
-                              Grant the add-on elevated system access.
-                            </paper-tooltip>
+                <div class="addon-options">
+                  <ha-settings-row ?three-line=${this.narrow}>
+                    <span slot="heading">
+                      Start on boot
+                    </span>
+                    <span slot="description">
+                      Make the add-on start during a system boot
+                    </span>
+                    <ha-switch
+                      @change=${this._startOnBootToggled}
+                      .checked=${this.addon.boot === "auto"}
+                      haptic
+                    ></ha-switch>
+                  </ha-settings-row>
+
+                  ${this.addon.startup !== "once"
+                    ? html`
+                        <ha-settings-row ?three-line=${this.narrow}>
+                          <span slot="heading">
+                            Watchdog
                           </span>
-                        </div>
-                        <ha-switch
-                          @change=${this._protectionToggled}
-                          .checked=${this.addon.protected}
-                          haptic
-                        ></ha-switch>
-                      </div>
-                    `
-                  : ""}
+                          <span slot="description">
+                            This will start the add-on if it crashes
+                          </span>
+                          <ha-switch
+                            @change=${this._watchdogToggled}
+                            .checked=${this.addon.watchdog}
+                            haptic
+                          ></ha-switch>
+                        </ha-settings-row>
+                      `
+                    : ""}
+                  ${this.addon.auto_update || this.hass.userData?.showAdvanced
+                    ? html`
+                        <ha-settings-row ?three-line=${this.narrow}>
+                          <span slot="heading">
+                            Auto update
+                          </span>
+                          <span slot="description">
+                            Auto update the add-on when there is a new version
+                            available
+                          </span>
+                          <ha-switch
+                            @change=${this._autoUpdateToggled}
+                            .checked=${this.addon.auto_update}
+                            haptic
+                          ></ha-switch>
+                        </ha-settings-row>
+                      `
+                    : ""}
+                  ${this.addon.ingress
+                    ? html`
+                        <ha-settings-row ?three-line=${this.narrow}>
+                          <span slot="heading">
+                            Show in sidebar
+                          </span>
+                          <span slot="description">
+                            ${this._computeCannotIngressSidebar
+                              ? "This option requires Home Assistant 0.92 or later."
+                              : "Add this add-on to your sidebar"}
+                          </span>
+                          <ha-switch
+                            @change=${this._panelToggled}
+                            .checked=${this.addon.ingress_panel}
+                            .disabled=${this._computeCannotIngressSidebar}
+                            haptic
+                          ></ha-switch>
+                        </ha-settings-row>
+                      `
+                    : ""}
+                  ${this._computeUsesProtectedOptions
+                    ? html`
+                        <ha-settings-row ?three-line=${this.narrow}>
+                          <span slot="heading">
+                            Protection mode
+                          </span>
+                          <span slot="description">
+                            Blocks elevated system access from the add-on
+                          </span>
+                          <ha-switch
+                            @change=${this._protectionToggled}
+                            .checked=${this.addon.protected}
+                            haptic
+                          ></ha-switch>
+                        </ha-settings-row>
+                      `
+                    : ""}
+                </div>
               `
             : ""}
           ${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
@@ -467,12 +503,9 @@ class HassioAddonInfo extends LitElement {
                       </ha-call-api-button>
                     `
                   : html`
-                      <ha-call-api-button
-                        .hass=${this.hass}
-                        .path="hassio/addons/${this.addon.slug}/start"
-                      >
+                      <ha-progress-button @click=${this._startClicked}>
                         Start
-                      </ha-call-api-button>
+                      </ha-progress-button>
                     `}
                 ${this._computeShowWebUI
                   ? html`
@@ -496,12 +529,12 @@ class HassioAddonInfo extends LitElement {
                       </mwc-button>
                     `
                   : ""}
-                <mwc-button
+                <ha-progress-button
                   class=" right warning"
                   @click=${this._uninstallClicked}
                 >
                   Uninstall
-                </mwc-button>
+                </ha-progress-button>
                 ${this.addon.build
                   ? html`
                       <ha-call-api-button
@@ -523,8 +556,7 @@ class HassioAddonInfo extends LitElement {
                     `
                   : ""}
                 <ha-progress-button
-                  .disabled=${!this.addon.available || this._installing}
-                  .progress=${this._installing}
+                  .disabled=${!this.addon.available}
                   @click=${this._installClicked}
                 >
                   Install
@@ -547,138 +579,6 @@ class HassioAddonInfo extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult[] {
-    return [
-      haStyle,
-      hassioStyle,
-      css`
-        :host {
-          display: block;
-        }
-        ha-card {
-          display: block;
-          margin-bottom: 16px;
-        }
-        ha-card.warning {
-          background-color: var(--google-red-500);
-          color: white;
-        }
-        ha-card.warning .card-header {
-          color: white;
-        }
-        ha-card.warning .card-content {
-          color: white;
-        }
-        ha-card.warning mwc-button {
-          --mdc-theme-primary: white !important;
-        }
-        .warning {
-          color: var(--google-red-500);
-          --mdc-theme-primary: var(--google-red-500);
-        }
-        .light-color {
-          color: var(--secondary-text-color);
-        }
-        .addon-header {
-          padding-left: 8px;
-          font-size: 24px;
-          color: var(--ha-card-header-color, --primary-text-color);
-        }
-        .addon-version {
-          float: right;
-          font-size: 15px;
-          vertical-align: middle;
-        }
-        .errors {
-          color: var(--google-red-500);
-          margin-bottom: 16px;
-        }
-        .description {
-          margin-bottom: 16px;
-        }
-        img.logo {
-          max-height: 60px;
-          margin: 16px 0;
-          display: block;
-        }
-        .state {
-          display: flex;
-          margin: 33px 0;
-        }
-        .state div {
-          width: 180px;
-          display: inline-block;
-        }
-        .state ha-svg-icon {
-          width: 16px;
-          height: 16px;
-          color: var(--secondary-text-color);
-        }
-        ha-switch {
-          display: flex;
-        }
-        ha-svg-icon.running {
-          color: var(--paper-green-400);
-        }
-        ha-svg-icon.stopped {
-          color: var(--google-red-300);
-        }
-        ha-call-api-button {
-          font-weight: 500;
-          color: var(--primary-color);
-        }
-        .right {
-          float: right;
-        }
-        ha-markdown img {
-          max-width: 100%;
-        }
-        protection-enable mwc-button {
-          --mdc-theme-primary: white;
-        }
-        .description a,
-        ha-markdown a {
-          color: var(--primary-color);
-        }
-        .red {
-          --ha-label-badge-color: var(--label-badge-red, #df4c1e);
-        }
-        .blue {
-          --ha-label-badge-color: var(--label-badge-blue, #039be5);
-        }
-        .green {
-          --ha-label-badge-color: var(--label-badge-green, #0da035);
-        }
-        .yellow {
-          --ha-label-badge-color: var(--label-badge-yellow, #f4b400);
-        }
-        .security {
-          margin-bottom: 16px;
-        }
-        .card-actions {
-          display: flow-root;
-        }
-        .security h3 {
-          margin-bottom: 8px;
-          font-weight: normal;
-        }
-        .security ha-label-badge {
-          cursor: pointer;
-          margin-right: 4px;
-          --ha-label-badge-padding: 8px 0 0 0;
-        }
-        .changelog {
-          display: contents;
-        }
-        .changelog-link {
-          color: var(--primary-color);
-          text-decoration: underline;
-          cursor: pointer;
-        }
-      `,
-    ];
-  }
-
   private get _computeHassioApi(): boolean {
     return (
       this.addon.hassio_api &&
@@ -763,7 +663,29 @@ class HassioAddonInfo extends LitElement {
       };
       fireEvent(this, "hass-api-called", eventdata);
     } catch (err) {
-      this._error = `Failed to set addon option, ${err.body?.message || err}`;
+      this._error = `Failed to set addon option, ${extractApiErrorMessage(
+        err
+      )}`;
+    }
+  }
+
+  private async _watchdogToggled(): Promise<void> {
+    this._error = undefined;
+    const data: HassioAddonSetOptionParams = {
+      watchdog: !this.addon.watchdog,
+    };
+    try {
+      await setHassioAddonOption(this.hass, this.addon.slug, data);
+      const eventdata = {
+        success: true,
+        response: undefined,
+        path: "option",
+      };
+      fireEvent(this, "hass-api-called", eventdata);
+    } catch (err) {
+      this._error = `Failed to set addon option, ${extractApiErrorMessage(
+        err
+      )}`;
     }
   }
 
@@ -781,7 +703,9 @@ class HassioAddonInfo extends LitElement {
       };
       fireEvent(this, "hass-api-called", eventdata);
     } catch (err) {
-      this._error = `Failed to set addon option, ${err.body?.message || err}`;
+      this._error = `Failed to set addon option, ${extractApiErrorMessage(
+        err
+      )}`;
     }
   }
 
@@ -799,9 +723,9 @@ class HassioAddonInfo extends LitElement {
       };
       fireEvent(this, "hass-api-called", eventdata);
     } catch (err) {
-      this._error = `Failed to set addon security option, ${
-        err.body?.message || err
-      }`;
+      this._error = `Failed to set addon security option, ${extractApiErrorMessage(
+        err
+      )}`;
     }
   }
 
@@ -819,12 +743,13 @@ class HassioAddonInfo extends LitElement {
       };
       fireEvent(this, "hass-api-called", eventdata);
     } catch (err) {
-      this._error = `Failed to set addon option, ${err.body?.message || err}`;
+      this._error = `Failed to set addon option, ${extractApiErrorMessage(
+        err
+      )}`;
     }
   }
 
   private async _openChangelog(): Promise<void> {
-    this._error = undefined;
     try {
       const content = await fetchHassioAddonChangelog(
         this.hass,
@@ -835,15 +760,17 @@ class HassioAddonInfo extends LitElement {
         content,
       });
     } catch (err) {
-      this._error = `Failed to get addon changelog, ${
-        err.body?.message || err
-      }`;
+      showAlertDialog(this, {
+        title: "Failed to get addon changelog",
+        text: extractApiErrorMessage(err),
+      });
     }
   }
 
-  private async _installClicked(): Promise<void> {
-    this._error = undefined;
-    this._installing = true;
+  private async _installClicked(ev: CustomEvent): Promise<void> {
+    const button = ev.currentTarget as any;
+    button.progress = true;
+
     try {
       await installHassioAddon(this.hass, this.addon.slug);
       const eventdata = {
@@ -853,12 +780,62 @@ class HassioAddonInfo extends LitElement {
       };
       fireEvent(this, "hass-api-called", eventdata);
     } catch (err) {
-      this._error = `Failed to install addon, ${err.body?.message || err}`;
+      showAlertDialog(this, {
+        title: "Failed to install addon",
+        text: extractApiErrorMessage(err),
+      });
     }
-    this._installing = false;
+    button.progress = false;
   }
 
-  private async _uninstallClicked(): Promise<void> {
+  private async _startClicked(ev: CustomEvent): Promise<void> {
+    const button = ev.currentTarget as any;
+    button.progress = true;
+    try {
+      const validate = await validateHassioAddonOption(
+        this.hass,
+        this.addon.slug
+      );
+      if (!validate.data.valid) {
+        await showConfirmationDialog(this, {
+          title: "Failed to start addon - configruation validation faled!",
+          text: validate.data.message.split(" Got ")[0],
+          confirm: () => this._openConfiguration(),
+          confirmText: "Go to configruation",
+          dismissText: "Cancel",
+        });
+        button.progress = false;
+        return;
+      }
+    } catch (err) {
+      showAlertDialog(this, {
+        title: "Failed to validate addon configuration",
+        text: extractApiErrorMessage(err),
+      });
+      button.progress = false;
+      return;
+    }
+
+    try {
+      await startHassioAddon(this.hass, this.addon.slug);
+      this.addon = await fetchHassioAddonInfo(this.hass, this.addon.slug);
+    } catch (err) {
+      showAlertDialog(this, {
+        title: "Failed to start addon",
+        text: extractApiErrorMessage(err),
+      });
+    }
+    button.progress = false;
+  }
+
+  private _openConfiguration(): void {
+    navigate(this, `/hassio/addon/${this.addon.slug}/config`);
+  }
+
+  private async _uninstallClicked(ev: CustomEvent): Promise<void> {
+    const button = ev.currentTarget as any;
+    button.progress = true;
+
     const confirmed = await showConfirmationDialog(this, {
       title: this.addon.name,
       text: "Are you sure you want to uninstall this add-on?",
@@ -867,6 +844,7 @@ class HassioAddonInfo extends LitElement {
     });
 
     if (!confirmed) {
+      button.progress = false;
       return;
     }
 
@@ -880,8 +858,152 @@ class HassioAddonInfo extends LitElement {
       };
       fireEvent(this, "hass-api-called", eventdata);
     } catch (err) {
-      this._error = `Failed to uninstall addon, ${err.body?.message || err}`;
+      showAlertDialog(this, {
+        title: "Failed to uninstall addon",
+        text: extractApiErrorMessage(err),
+      });
     }
+    button.progress = false;
+  }
+
+  static get styles(): CSSResult[] {
+    return [
+      haStyle,
+      hassioStyle,
+      css`
+        :host {
+          display: block;
+        }
+        ha-card {
+          display: block;
+          margin-bottom: 16px;
+        }
+        ha-card.warning {
+          background-color: var(--error-color);
+          color: white;
+        }
+        ha-card.warning .card-header {
+          color: white;
+        }
+        ha-card.warning .card-content {
+          color: white;
+        }
+        ha-card.warning mwc-button {
+          --mdc-theme-primary: white !important;
+        }
+        .warning {
+          color: var(--error-color);
+          --mdc-theme-primary: var(--error-color);
+        }
+        .light-color {
+          color: var(--secondary-text-color);
+        }
+        .addon-header {
+          padding-left: 8px;
+          font-size: 24px;
+          color: var(--ha-card-header-color, --primary-text-color);
+        }
+        .addon-version {
+          float: right;
+          font-size: 15px;
+          vertical-align: middle;
+        }
+        .errors {
+          color: var(--error-color);
+          margin-bottom: 16px;
+        }
+        .description {
+          margin-bottom: 16px;
+        }
+        img.logo {
+          max-height: 60px;
+          margin: 16px 0;
+          display: block;
+        }
+
+        ha-switch {
+          display: flex;
+        }
+        ha-svg-icon.running {
+          color: var(--paper-green-400);
+        }
+        ha-svg-icon.stopped {
+          color: var(--google-red-300);
+        }
+        ha-call-api-button {
+          font-weight: 500;
+          color: var(--primary-color);
+        }
+        .right {
+          float: right;
+        }
+        protection-enable mwc-button {
+          --mdc-theme-primary: white;
+        }
+        .description a {
+          color: var(--primary-color);
+        }
+        .red {
+          --ha-label-badge-color: var(--label-badge-red, #df4c1e);
+        }
+        .blue {
+          --ha-label-badge-color: var(--label-badge-blue, #039be5);
+        }
+        .green {
+          --ha-label-badge-color: var(--label-badge-green, #0da035);
+        }
+        .yellow {
+          --ha-label-badge-color: var(--label-badge-yellow, #f4b400);
+        }
+        .security {
+          margin-bottom: 16px;
+        }
+        .card-actions {
+          display: flow-root;
+        }
+        .security h3 {
+          margin-bottom: 8px;
+          font-weight: normal;
+        }
+        .security ha-label-badge {
+          cursor: pointer;
+          margin-right: 4px;
+          --ha-label-badge-padding: 8px 0 0 0;
+        }
+        .changelog {
+          display: contents;
+        }
+        .changelog-link {
+          color: var(--primary-color);
+          text-decoration: underline;
+          cursor: pointer;
+        }
+        ha-markdown {
+          padding: 16px;
+        }
+        ha-settings-row {
+          padding: 0;
+          height: 54px;
+          width: 100%;
+        }
+        ha-settings-row > span[slot="description"] {
+          white-space: normal;
+          color: var(--secondary-text-color);
+        }
+        ha-settings-row[three-line] {
+          height: 74px;
+        }
+
+        .addon-options {
+          max-width: 50%;
+        }
+        @media (max-width: 720px) {
+          .addon-options {
+            max-width: 100%;
+          }
+        }
+      `,
+    ];
   }
 }
 declare global {

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

@@ -1,4 +1,3 @@
-import "@polymer/paper-spinner/paper-spinner-lite";
 import {
   css,
   CSSResult,
@@ -9,6 +8,7 @@ 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` <paper-spinner-lite active></paper-spinner-lite> `;
+      return html` <ha-circular-progress active></ha-circular-progress> `;
     }
     return html`
       <div class="content">

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

@@ -4,6 +4,7 @@ import {
   CSSResult,
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
   TemplateResult,
@@ -13,6 +14,7 @@ import {
   fetchHassioAddonLogs,
   HassioAddonDetails,
 } from "../../../../src/data/hassio/addon";
+import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
 import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
 import "../../components/hassio-ansi-to-html";
@@ -24,9 +26,9 @@ class HassioAddonLogs extends LitElement {
 
   @property({ attribute: false }) public addon!: HassioAddonDetails;
 
-  @property() private _error?: string;
+  @internalProperty() private _error?: string;
 
-  @property() private _content?: string;
+  @internalProperty() private _content?: string;
 
   public async connectedCallback(): Promise<void> {
     super.connectedCallback();
@@ -62,7 +64,7 @@ class HassioAddonLogs extends LitElement {
           display: block;
         }
         .errors {
-          color: var(--google-red-500);
+          color: var(--error-color);
           margin-bottom: 16px;
         }
       `,
@@ -74,7 +76,7 @@ class HassioAddonLogs extends LitElement {
     try {
       this._content = await fetchHassioAddonLogs(this.hass, this.addon.slug);
     } catch (err) {
-      this._error = `Failed to get addon logs, ${err.body?.message || err}`;
+      this._error = `Failed to get addon logs, ${extractApiErrorMessage(err)}`;
     }
   }
 

hassio/src/components/hassio-ansi-to-html.ts

@@ -21,7 +21,7 @@ interface State {
 class HassioAnsiToHtml extends LitElement {
   @property() public content!: string;
 
-  public render(): TemplateResult | void {
+  protected render(): TemplateResult | void {
     return html`${this._parseTextToColoredPre(this.content)}`;
   }
 

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

@@ -14,7 +14,7 @@ import { HomeAssistant } from "../../../src/types";
 
 @customElement("hassio-card-content")
 class HassioCardContent extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public title!: string;
 
@@ -98,7 +98,7 @@ class HassioCardContent extends LitElement {
         color: var(--paper-item-icon-color);
       }
       ha-svg-icon.not_available {
-        color: var(--google-red-500);
+        color: var(--error-color);
       }
       .title {
         color: var(--primary-text-color);

hassio/src/components/hassio-filter-addons.ts

@@ -1,13 +1,13 @@
-import * as Fuse from "fuse.js";
+import Fuse from "fuse.js";
 import { HassioAddonInfo } from "../../../src/data/hassio/addon";
 
 export function filterAndSort(addons: HassioAddonInfo[], filter: string) {
-  const options: Fuse.FuseOptions<HassioAddonInfo> = {
+  const options: Fuse.IFuseOptions<HassioAddonInfo> = {
     keys: ["name", "description", "slug"],
-    caseSensitive: false,
+    isCaseSensitive: false,
     minMatchCharLength: 2,
     threshold: 0.2,
   };
   const fuse = new Fuse(addons, options);
-  return fuse.search(filter);
+  return fuse.search(filter).map((result) => result.item);
 }

hassio/src/dashboard/hassio-addons.ts

@@ -19,7 +19,7 @@ import { hassioStyle } from "../resources/hassio-style";
 
 @customElement("hassio-addons")
 class HassioAddons extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public addons?: HassioAddonInfo[];
 

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-panel";
+import { supervisorTabs } from "../hassio-tabs";
 import "./hassio-addons";
 import "./hassio-update";
 

hassio/src/dashboard/hassio-update.ts

@@ -5,33 +5,43 @@ import {
   CSSResult,
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
   TemplateResult,
 } from "lit-element";
-import "../../../src/components/buttons/ha-call-api-button";
+import "../../../src/components/buttons/ha-progress-button";
 import "../../../src/components/ha-card";
 import "../../../src/components/ha-svg-icon";
+import {
+  extractApiErrorMessage,
+  HassioResponse,
+  ignoredStatusCodes,
+} from "../../../src/data/hassio/common";
 import { HassioHassOSInfo } from "../../../src/data/hassio/host";
 import {
   HassioHomeAssistantInfo,
   HassioSupervisorInfo,
 } from "../../../src/data/hassio/supervisor";
+import {
+  showAlertDialog,
+  showConfirmationDialog,
+} from "../../../src/dialogs/generic/show-dialog-box";
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant } from "../../../src/types";
 import { hassioStyle } from "../resources/hassio-style";
 
 @customElement("hassio-update")
 export class HassioUpdate extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public hassInfo: HassioHomeAssistantInfo;
+  @property({ attribute: false }) public hassInfo: HassioHomeAssistantInfo;
 
-  @property() public hassOsInfo?: HassioHassOSInfo;
+  @property({ attribute: false }) public hassOsInfo?: HassioHassOSInfo;
 
   @property() public supervisorInfo: HassioSupervisorInfo;
 
-  @property() private _error?: string;
+  @internalProperty() private _error?: string;
 
   protected render(): TemplateResult {
     const updatesAvailable: number = [
@@ -125,31 +135,46 @@ export class HassioUpdate extends LitElement {
           <a href="${releaseNotesUrl}" target="_blank" rel="noreferrer">
             <mwc-button>Release notes</mwc-button>
           </a>
-          <ha-call-api-button
-            .hass=${this.hass}
-            .path=${apiPath}
-            @hass-api-called=${this._apiCalled}
+          <ha-progress-button
+            .apiPath=${apiPath}
+            .name=${name}
+            .version=${lastVersion}
+            @click=${this._confirmUpdate}
           >
             Update
-          </ha-call-api-button>
+          </ha-progress-button>
         </div>
       </ha-card>
     `;
   }
 
-  private _apiCalled(ev): void {
-    if (ev.detail.success) {
-      this._error = "";
+  private async _confirmUpdate(ev): Promise<void> {
+    const item = ev.currentTarget;
+    item.progress = true;
+    const confirmed = await showConfirmationDialog(this, {
+      title: `Update ${item.name}`,
+      text: `Are you sure you want to update ${item.name} to version ${item.version}?`,
+      confirmText: "update",
+      dismissText: "cancel",
+    });
+
+    if (!confirmed) {
+      item.progress = false;
       return;
     }
-
-    const response = ev.detail.response;
-
-    if (typeof response.body === "object") {
-      this._error = response.body.message || "Unknown error";
-    } else {
-      this._error = response.body;
+    try {
+      await this.hass.callApi<HassioResponse<void>>("POST", item.apiPath);
+    } catch (err) {
+      // Only show an error if the status code was not expected (user behind proxy)
+      // or no status at all(connection terminated)
+      if (err.status_code && !ignoredStatusCodes.has(err.status_code)) {
+        showAlertDialog(this, {
+          title: "Update failed",
+          text: extractApiErrorMessage(err),
+        });
+      }
     }
+    item.progress = false;
   }
 
   static get styles(): CSSResult[] {
@@ -180,7 +205,7 @@ export class HassioUpdate extends LitElement {
           text-align: right;
         }
         .errors {
-          color: var(--google-red-500);
+          color: var(--error-color);
           padding: 16px;
         }
         a {

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

@@ -5,6 +5,7 @@ import {
   html,
   LitElement,
   property,
+  internalProperty,
   TemplateResult,
 } from "lit-element";
 import { createCloseHeading } from "../../../../src/components/ha-dialog";
@@ -16,13 +17,13 @@ import { HassioMarkdownDialogParams } from "./show-dialog-hassio-markdown";
 
 @customElement("dialog-hassio-markdown")
 class HassioMarkdownDialog extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public title!: string;
 
   @property() public content!: string;
 
-  @property() private _opened = false;
+  @internalProperty() private _opened = false;
 
   public showDialog(params: HassioMarkdownDialogParams) {
     this.title = params.title;
@@ -30,6 +31,10 @@ class HassioMarkdownDialog extends LitElement {
     this._opened = true;
   }
 
+  public closeDialog() {
+    this._opened = false;
+  }
+
   protected render(): TemplateResult {
     if (!this._opened) {
       return html``;
@@ -37,7 +42,7 @@ class HassioMarkdownDialog extends LitElement {
     return html`
       <ha-dialog
         open
-        @closing=${this._closeDialog}
+        @closed=${this.closeDialog}
         .heading=${createCloseHeading(this.hass, this.title)}
       >
         <ha-markdown .content=${this.content || ""}></ha-markdown>
@@ -45,10 +50,6 @@ class HassioMarkdownDialog extends LitElement {
     `;
   }
 
-  private _closeDialog(): void {
-    this._opened = false;
-  }
-
   static get styles(): CSSResult[] {
     return [
       haStyleDialog,
@@ -90,6 +91,9 @@ class HassioMarkdownDialog extends LitElement {
             color: var(--text-primary-color);
             background-color: var(--primary-color);
           }
+          ha-markdown {
+            padding: 16px;
+          }
         }
       `,
     ];

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

@@ -0,0 +1,333 @@
+import "@material/mwc-button/mwc-button";
+import "@material/mwc-icon-button";
+import "@material/mwc-tab";
+import "@material/mwc-tab-bar";
+import { mdiClose } from "@mdi/js";
+import { PaperInputElement } from "@polymer/paper-input/paper-input";
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  internalProperty,
+  LitElement,
+  property,
+  TemplateResult,
+} from "lit-element";
+import { cache } from "lit-html/directives/cache";
+import { fireEvent } from "../../../../src/common/dom/fire_event";
+import "../../../../src/components/ha-circular-progress";
+import "../../../../src/components/ha-dialog";
+import "../../../../src/components/ha-formfield";
+import "../../../../src/components/ha-header-bar";
+import "../../../../src/components/ha-radio";
+import type { HaRadio } from "../../../../src/components/ha-radio";
+import "../../../../src/components/ha-related-items";
+import "../../../../src/components/ha-svg-icon";
+import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
+import {
+  NetworkInterface,
+  updateNetworkInterface,
+} from "../../../../src/data/hassio/network";
+import {
+  showAlertDialog,
+  showConfirmationDialog,
+} from "../../../../src/dialogs/generic/show-dialog-box";
+import { HassDialog } from "../../../../src/dialogs/make-dialog-manager";
+import { haStyleDialog } from "../../../../src/resources/styles";
+import type { HomeAssistant } from "../../../../src/types";
+import { HassioNetworkDialogParams } from "./show-dialog-network";
+
+@customElement("dialog-hassio-network")
+export class DialogHassioNetwork extends LitElement implements HassDialog {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @internalProperty() private _prosessing = false;
+
+  @internalProperty() private _params?: HassioNetworkDialogParams;
+
+  @internalProperty() private _network!: {
+    interface: string;
+    data: NetworkInterface;
+  }[];
+
+  @internalProperty() private _curTabIndex = 0;
+
+  @internalProperty() private _device?: {
+    interface: string;
+    data: NetworkInterface;
+  };
+
+  @internalProperty() private _dirty = false;
+
+  public async showDialog(params: HassioNetworkDialogParams): Promise<void> {
+    this._params = params;
+    this._dirty = false;
+    this._curTabIndex = 0;
+    this._network = Object.keys(params.network?.interfaces)
+      .map((device) => ({
+        interface: device,
+        data: params.network.interfaces[device],
+      }))
+      .sort((a, b) => {
+        return a.data.primary > b.data.primary ? -1 : 1;
+      });
+    this._device = this._network[this._curTabIndex];
+    this._device.data.nameservers = String(this._device.data.nameservers);
+    await this.updateComplete;
+  }
+
+  public closeDialog(): void {
+    this._params = undefined;
+    this._prosessing = false;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+  }
+
+  protected render(): TemplateResult {
+    if (!this._params || !this._network) {
+      return html``;
+    }
+
+    return html`
+      <ha-dialog
+        open
+        scrimClickAction
+        escapeKeyAction
+        .heading=${true}
+        hideActions
+        @closed=${this.closeDialog}
+      >
+        <div slot="heading">
+          <ha-header-bar>
+            <span slot="title">
+              Network settings
+            </span>
+            <mwc-icon-button slot="actionItems" dialogAction="cancel">
+              <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
+            </mwc-icon-button>
+          </ha-header-bar>
+          ${this._network.length > 1
+            ? html` <mwc-tab-bar
+                .activeIndex=${this._curTabIndex}
+                @MDCTabBar:activated=${this._handleTabActivated}
+                >${this._network.map(
+                  (device) =>
+                    html`<mwc-tab
+                      .id=${device.interface}
+                      .label=${device.interface}
+                    >
+                    </mwc-tab>`
+                )}
+              </mwc-tab-bar>`
+            : ""}
+        </div>
+        ${cache(this._renderTab())}
+      </ha-dialog>
+    `;
+  }
+
+  private _renderTab() {
+    return html` <div class="form container">
+        <ha-formfield label="DHCP">
+          <ha-radio
+            @change=${this._handleRadioValueChanged}
+            value="dhcp"
+            name="method"
+            ?checked=${this._device!.data.method === "dhcp"}
+          >
+          </ha-radio>
+        </ha-formfield>
+        <ha-formfield label="Static">
+          <ha-radio
+            @change=${this._handleRadioValueChanged}
+            value="static"
+            name="method"
+            ?checked=${this._device!.data.method === "static"}
+          >
+          </ha-radio>
+        </ha-formfield>
+        ${this._device!.data.method !== "dhcp"
+          ? html` <paper-input
+                class="flex-auto"
+                id="ip_address"
+                label="IP address/Netmask"
+                .value="${this._device!.data.ip_address}"
+                @value-changed=${this._handleInputValueChanged}
+              ></paper-input>
+              <paper-input
+                class="flex-auto"
+                id="gateway"
+                label="Gateway address"
+                .value="${this._device!.data.gateway}"
+                @value-changed=${this._handleInputValueChanged}
+              ></paper-input>
+              <paper-input
+                class="flex-auto"
+                id="nameservers"
+                label="DNS servers"
+                .value="${this._device!.data.nameservers as string}"
+                @value-changed=${this._handleInputValueChanged}
+              ></paper-input>
+              NB!: If you are changing IP or gateway addresses, you might lose
+              the connection.`
+          : ""}
+      </div>
+      <div class="buttons">
+        <mwc-button label="close" @click=${this.closeDialog}> </mwc-button>
+        <mwc-button @click=${this._updateNetwork} ?disabled=${!this._dirty}>
+          ${this._prosessing
+            ? html`<ha-circular-progress active></ha-circular-progress>`
+            : "Update"}
+        </mwc-button>
+      </div>`;
+  }
+
+  private async _updateNetwork() {
+    this._prosessing = true;
+    let options: Partial<NetworkInterface> = {
+      method: this._device!.data.method,
+    };
+    if (options.method !== "dhcp") {
+      options = {
+        ...options,
+        address: this._device!.data.ip_address,
+        gateway: this._device!.data.gateway,
+        dns: String(this._device!.data.nameservers).split(","),
+      };
+    }
+    try {
+      await updateNetworkInterface(this.hass, this._device!.interface, options);
+    } catch (err) {
+      showAlertDialog(this, {
+        title: "Failed to change network settings",
+        text: extractApiErrorMessage(err),
+      });
+      this._prosessing = false;
+      return;
+    }
+    this._params?.loadData();
+    this.closeDialog();
+  }
+
+  private async _handleTabActivated(ev: CustomEvent): Promise<void> {
+    if (this._dirty) {
+      const confirm = await showConfirmationDialog(this, {
+        text:
+          "You have unsaved changes, these will get lost if you change tabs, do you want to continue?",
+        confirmText: "yes",
+        dismissText: "no",
+      });
+      if (!confirm) {
+        this.requestUpdate("_device");
+        return;
+      }
+    }
+    this._curTabIndex = ev.detail.index;
+    this._device = this._network[ev.detail.index];
+    this._device.data.nameservers = String(this._device.data.nameservers);
+  }
+
+  private _handleRadioValueChanged(ev: CustomEvent): void {
+    const value = (ev.target as HaRadio).value as "dhcp" | "static";
+
+    if (!value || !this._device || this._device!.data.method === value) {
+      return;
+    }
+
+    this._dirty = true;
+
+    this._device!.data.method = value;
+    this.requestUpdate("_device");
+  }
+
+  private _handleInputValueChanged(ev: CustomEvent): void {
+    const value: string | null | undefined = (ev.target as PaperInputElement)
+      .value;
+    const id = (ev.target as PaperInputElement).id;
+
+    if (!value || !this._device || this._device.data[id] === value) {
+      return;
+    }
+
+    this._dirty = true;
+
+    this._device.data[id] = value;
+  }
+
+  static get styles(): CSSResult[] {
+    return [
+      haStyleDialog,
+      css`
+        ha-header-bar {
+          --mdc-theme-on-primary: var(--primary-text-color);
+          --mdc-theme-primary: var(--mdc-theme-surface);
+          flex-shrink: 0;
+        }
+
+        mwc-tab-bar {
+          border-bottom: 1px solid
+            var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12));
+        }
+
+        ha-dialog {
+          --dialog-content-position: static;
+          --dialog-content-padding: 0;
+          --dialog-z-index: 6;
+        }
+
+        @media all and (min-width: 451px) and (min-height: 501px) {
+          .container {
+            width: 400px;
+          }
+        }
+
+        .content {
+          display: block;
+          padding: 20px 24px;
+        }
+
+        /* overrule the ha-style-dialog max-height on small screens */
+        @media all and (max-width: 450px), all and (max-height: 500px) {
+          ha-header-bar {
+            --mdc-theme-primary: var(--app-header-background-color);
+            --mdc-theme-on-primary: var(--app-header-text-color, white);
+          }
+        }
+
+        mwc-button.warning {
+          --mdc-theme-primary: var(--error-color);
+        }
+
+        :host([rtl]) app-toolbar {
+          direction: rtl;
+          text-align: right;
+        }
+        .container {
+          padding: 20px 24px;
+        }
+        .form {
+          margin-bottom: 53px;
+        }
+        .buttons {
+          position: absolute;
+          bottom: 0;
+          width: 100%;
+          box-sizing: border-box;
+          border-top: 1px solid
+            var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12));
+          display: flex;
+          justify-content: space-between;
+          padding: 8px;
+          padding-bottom: max(env(safe-area-inset-bottom), 8px);
+          background-color: var(--mdc-theme-surface, #fff);
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "dialog-hassio-network": DialogHassioNetwork;
+  }
+}

hassio/src/dialogs/network/show-dialog-network.ts

@@ -0,0 +1,22 @@
+import { fireEvent } from "../../../../src/common/dom/fire_event";
+import { NetworkInfo } from "../../../../src/data/hassio/network";
+import "./dialog-hassio-network";
+
+export interface HassioNetworkDialogParams {
+  network: NetworkInfo;
+  loadData: () => Promise<void>;
+}
+
+export const showNetworkDialog = (
+  element: HTMLElement,
+  dialogParams: HassioNetworkDialogParams
+): void => {
+  fireEvent(element, "show-dialog", {
+    dialogTag: "dialog-hassio-network",
+    dialogImport: () =>
+      import(
+        /* webpackChunkName: "dialog-hassio-network" */ "./dialog-hassio-network"
+      ),
+    dialogParams,
+  });
+};

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

@@ -5,24 +5,26 @@ 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 "@polymer/paper-spinner/paper-spinner";
 import {
   css,
   CSSResult,
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
   query,
   TemplateResult,
 } from "lit-element";
 import memoizeOne from "memoize-one";
+import "../../../../src/components/ha-circular-progress";
 import "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-svg-icon";
 import {
   fetchHassioAddonsInfo,
   HassioAddonRepository,
 } from "../../../../src/data/hassio/addon";
+import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
 import { setSupervisorOption } from "../../../../src/data/hassio/supervisor";
 import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
 import type { HomeAssistant } from "../../../../src/types";
@@ -39,11 +41,11 @@ class HassioRepositoriesDialog extends LitElement {
 
   @query("#repository_input") private _optionInput?: PaperInputElement;
 
-  @property() private _opened = false;
+  @internalProperty() private _opened = false;
 
-  @property() private _prosessing = false;
+  @internalProperty() private _prosessing = false;
 
-  @property() private _error?: string;
+  @internalProperty() private _error?: string;
 
   public async showDialog(_dialogParams: any): Promise<void> {
     this._dialogParams = _dialogParams;
@@ -108,7 +110,7 @@ class HassioRepositoriesDialog extends LitElement {
             ></paper-input>
             <mwc-button @click=${this._addRepository}>
               ${this._prosessing
-                ? html`<paper-spinner active></paper-spinner>`
+                ? html`<ha-circular-progress active></ha-circular-progress>`
                 : "Add"}
             </mwc-button>
           </div>
@@ -189,7 +191,7 @@ class HassioRepositoriesDialog extends LitElement {
 
       input.value = "";
     } catch (err) {
-      this._error = err.message;
+      this._error = extractApiErrorMessage(err);
     }
     this._prosessing = false;
   }
@@ -221,7 +223,7 @@ class HassioRepositoriesDialog extends LitElement {
 
       await this._dialogParams!.loadData();
     } catch (err) {
-      this._error = err.message;
+      this._error = extractApiErrorMessage(err);
     }
   }
 }

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

@@ -7,6 +7,7 @@ import {
   CSSResult,
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
   TemplateResult,
@@ -14,10 +15,12 @@ import {
 import { createCloseHeading } from "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-svg-icon";
 import { getSignedPath } from "../../../../src/data/auth";
+import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
 import {
   fetchHassioSnapshotInfo,
   HassioSnapshotDetail,
 } from "../../../../src/data/hassio/snapshot";
+import { showConfirmationDialog } from "../../../../src/dialogs/generic/show-dialog-box";
 import { PolymerChangedEvent } from "../../../../src/polymer-types";
 import { haStyleDialog } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
@@ -68,21 +71,21 @@ interface FolderItem {
 
 @customElement("dialog-hassio-snapshot")
 class HassioSnapshotDialog extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() private _error?: string;
+  @internalProperty() private _error?: string;
 
-  @property() private _snapshot?: HassioSnapshotDetail;
+  @internalProperty() private _snapshot?: HassioSnapshotDetail;
 
-  @property() private _folders!: FolderItem[];
+  @internalProperty() private _folders!: FolderItem[];
 
-  @property() private _addons!: AddonItem[];
+  @internalProperty() private _addons!: AddonItem[];
 
-  @property() private _dialogParams?: HassioSnapshotDialogParams;
+  @internalProperty() private _dialogParams?: HassioSnapshotDialogParams;
 
-  @property() private _snapshotPassword!: string;
+  @internalProperty() private _snapshotPassword!: string;
 
-  @property() private _restoreHass: boolean | null | undefined = true;
+  @internalProperty() private _restoreHass: boolean | null | undefined = true;
 
   public async showDialog(params: HassioSnapshotDialogParams) {
     this._snapshot = await fetchHassioSnapshotInfo(this.hass, params.slug);
@@ -224,7 +227,7 @@ class HassioSnapshotDialog extends LitElement {
         }
         .warning,
         .error {
-          color: var(--google-red-500);
+          color: var(--error-color);
         }
         .buttons {
           display: flex;
@@ -265,8 +268,12 @@ class HassioSnapshotDialog extends LitElement {
     this._snapshotPassword = ev.detail.value;
   }
 
-  private _partialRestoreClicked() {
-    if (!confirm("Are you sure you want to restore this snapshot?")) {
+  private async _partialRestoreClicked() {
+    if (
+      !(await showConfirmationDialog(this, {
+        title: "Are you sure you want partially to restore this snapshot?",
+      }))
+    ) {
       return;
     }
 
@@ -311,8 +318,13 @@ class HassioSnapshotDialog extends LitElement {
       );
   }
 
-  private _fullRestoreClicked() {
-    if (!confirm("Are you sure you want to restore this snapshot?")) {
+  private async _fullRestoreClicked() {
+    if (
+      !(await showConfirmationDialog(this, {
+        title:
+          "Are you sure you want to wipe your system and restore this snapshot?",
+      }))
+    ) {
       return;
     }
 
@@ -337,8 +349,12 @@ class HassioSnapshotDialog extends LitElement {
       );
   }
 
-  private _deleteClicked() {
-    if (!confirm("Are you sure you want to delete this snapshot?")) {
+  private async _deleteClicked() {
+    if (
+      !(await showConfirmationDialog(this, {
+        title: "Are you sure you want to delete this snapshot?",
+      }))
+    ) {
       return;
     }
 
@@ -364,7 +380,7 @@ class HassioSnapshotDialog extends LitElement {
         `/api/hassio/snapshots/${this._snapshot!.slug}/download`
       );
     } catch (err) {
-      alert(`Error: ${err.message}`);
+      alert(`Error: ${extractApiErrorMessage(err)}`);
       return;
     }
 

hassio/src/dialogs/suggestAddonRestart.ts

@@ -3,6 +3,7 @@ import {
   HassioAddonDetails,
   restartHassioAddon,
 } from "../../../src/data/hassio/addon";
+import { extractApiErrorMessage } from "../../../src/data/hassio/common";
 import {
   showAlertDialog,
   showConfirmationDialog,
@@ -26,7 +27,7 @@ export const suggestAddonRestart = async (
     } catch (err) {
       showAlertDialog(element, {
         title: "Failed to restart",
-        text: err.body.message,
+        text: extractApiErrorMessage(err),
       });
     }
   }

hassio/src/entrypoint.ts

@@ -1,9 +1,7 @@
-window.loadES5Adapter().then(() => {
-  // eslint-disable-next-line
-  import(/* webpackChunkName: "roboto" */ "../../src/resources/roboto");
-  // eslint-disable-next-line
-  import(/* webpackChunkName: "hassio-main" */ "./hassio-main");
-});
+import "../../src/resources/compatibility";
+import "../../src/resources/safari-14-attachshadow-patch";
+import "../../src/resources/roboto";
+import "./hassio-main";
 
 const styleEl = document.createElement("style");
 styleEl.innerHTML = `

hassio/src/hassio-main.ts

@@ -1,107 +1,35 @@
-import { PolymerElement } from "@polymer/polymer";
-import { customElement, property, PropertyValues } from "lit-element";
+import {
+  html,
+  PropertyValues,
+  customElement,
+  LitElement,
+  property,
+} from "lit-element";
+import "./hassio-router";
+import { urlSyncMixin } from "../../src/state/url-sync-mixin";
+import { ProvideHassLitMixin } from "../../src/mixins/provide-hass-lit-mixin";
+import { HomeAssistant, Route } from "../../src/types";
+import { HassioPanelInfo } from "../../src/data/hassio/supervisor";
 import { applyThemesOnElement } from "../../src/common/dom/apply_themes_on_element";
 import { fireEvent } from "../../src/common/dom/fire_event";
-import { navigate } from "../../src/common/navigate";
-import { fetchHassioAddonInfo } from "../../src/data/hassio/addon";
-import {
-  fetchHassioHassOsInfo,
-  fetchHassioHostInfo,
-  HassioHassOSInfo,
-  HassioHostInfo,
-} from "../../src/data/hassio/host";
-import {
-  createHassioSession,
-  fetchHassioHomeAssistantInfo,
-  fetchHassioSupervisorInfo,
-  HassioHomeAssistantInfo,
-  HassioPanelInfo,
-  HassioSupervisorInfo,
-} from "../../src/data/hassio/supervisor";
-import {
-  AlertDialogParams,
-  showAlertDialog,
-} from "../../src/dialogs/generic/show-dialog-box";
 import { makeDialogManager } from "../../src/dialogs/make-dialog-manager";
-import {
-  HassRouterPage,
-  RouterOptions,
-} from "../../src/layouts/hass-router-page";
-import { ProvideHassLitMixin } from "../../src/mixins/provide-hass-lit-mixin";
-import "../../src/resources/ha-style";
-import { HomeAssistant } from "../../src/types";
-// Don't codesplit it, that way the dashboard always loads fast.
-import "./hassio-panel";
+import { atLeastVersion } from "../../src/common/config/version";
 
 @customElement("hassio-main")
-class HassioMain extends ProvideHassLitMixin(HassRouterPage) {
-  @property() public hass!: HomeAssistant;
+export class HassioMain extends urlSyncMixin(ProvideHassLitMixin(LitElement)) {
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public panel!: HassioPanelInfo;
 
   @property() public narrow!: boolean;
 
-  protected routerOptions: RouterOptions = {
-    // Hass.io has a page with tabs, so we route all non-matching routes to it.
-    defaultPage: "dashboard",
-    initialLoad: () => this._fetchData(),
-    showLoading: true,
-    routes: {
-      dashboard: {
-        tag: "hassio-panel",
-        cache: true,
-      },
-      snapshots: "dashboard",
-      store: "dashboard",
-      system: "dashboard",
-      addon: {
-        tag: "hassio-addon-dashboard",
-        load: () =>
-          import(
-            /* webpackChunkName: "hassio-addon-dashboard" */ "./addon-view/hassio-addon-dashboard"
-          ),
-      },
-      ingress: {
-        tag: "hassio-ingress-view",
-        load: () =>
-          import(
-            /* webpackChunkName: "hassio-ingress-view" */ "./ingress-view/hassio-ingress-view"
-          ),
-      },
-    },
-  };
-
-  @property() private _supervisorInfo: HassioSupervisorInfo;
-
-  @property() private _hostInfo: HassioHostInfo;
-
-  @property() private _hassOsInfo?: HassioHassOSInfo;
-
-  @property() private _hassInfo: HassioHomeAssistantInfo;
+  @property() public route?: Route;
 
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
 
-    applyThemesOnElement(
-      this.parentElement,
-      this.hass.themes,
-      this.hass.selectedTheme || this.hass.themes.default_theme
-    );
+    this._applyTheme();
 
-    this.style.setProperty(
-      "--app-header-background-color",
-      "var(--sidebar-background-color)"
-    );
-    this.style.setProperty(
-      "--app-header-text-color",
-      "var(--sidebar-text-color)"
-    );
-    this.style.setProperty(
-      "--app-header-border-bottom",
-      "1px solid var(--divider-color)"
-    );
-
-    this.addEventListener("hass-api-called", (ev) => this._apiCalled(ev));
     // Paulus - March 17, 2019
     // We went to a single hass-toggle-menu event in HA 0.90. However, the
     // supervisor UI can also run under older versions of Home Assistant.
@@ -134,148 +62,61 @@ class HassioMain extends ProvideHassLitMixin(HassRouterPage) {
       });
     });
 
-    makeDialogManager(this, document.body);
+    makeDialogManager(this, this.shadowRoot!);
   }
 
-  protected updatePageEl(el) {
-    // the tabs page does its own routing so needs full route.
-    const route = el.nodeName === "HASSIO-PANEL" ? this.route : this.routeTail;
+  protected updated(changedProps: PropertyValues) {
+    super.updated(changedProps);
+    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
+    if (!oldHass) {
+      return;
+    }
+    if (oldHass.themes !== this.hass.themes) {
+      this._applyTheme();
+    }
+  }
 
-    if ("setProperties" in el) {
-      // As long as we have Polymer pages
-      (el as PolymerElement).setProperties({
-        hass: this.hass,
-        narrow: this.narrow,
-        supervisorInfo: this._supervisorInfo,
-        hostInfo: this._hostInfo,
-        hassInfo: this._hassInfo,
-        hassOsInfo: this._hassOsInfo,
-        route,
-      });
+  protected render() {
+    return html`
+      <hassio-router
+        .hass=${this.hass}
+        .route=${this.route}
+        .panel=${this.panel}
+        .narrow=${this.narrow}
+      ></hassio-router>
+    `;
+  }
+
+  private _applyTheme() {
+    let themeName: string;
+    let options: Partial<HomeAssistant["selectedTheme"]> | undefined;
+
+    if (atLeastVersion(this.hass.config.version, 0, 114)) {
+      themeName =
+        this.hass.selectedTheme?.theme ||
+        (this.hass.themes.darkMode && this.hass.themes.default_dark_theme
+          ? this.hass.themes.default_dark_theme!
+          : this.hass.themes.default_theme);
+
+      options = this.hass.selectedTheme;
+      if (themeName === "default" && options?.dark === undefined) {
+        options = {
+          ...this.hass.selectedTheme,
+          dark: this.hass.themes.darkMode,
+        };
+      }
     } else {
-      el.hass = this.hass;
-      el.narrow = this.narrow;
-      el.supervisorInfo = this._supervisorInfo;
-      el.hostInfo = this._hostInfo;
-      el.hassInfo = this._hassInfo;
-      el.hassOsInfo = this._hassOsInfo;
-      el.route = route;
-    }
-  }
-
-  private async _fetchData() {
-    if (this.panel.config && this.panel.config.ingress) {
-      await this._redirectIngress(this.panel.config.ingress);
-      return;
+      themeName =
+        ((this.hass.selectedTheme as unknown) as string) ||
+        this.hass.themes.default_theme;
     }
 
-    const [supervisorInfo, hostInfo, hassInfo] = await Promise.all([
-      fetchHassioSupervisorInfo(this.hass),
-      fetchHassioHostInfo(this.hass),
-      fetchHassioHomeAssistantInfo(this.hass),
-    ]);
-    this._supervisorInfo = supervisorInfo;
-    this._hostInfo = hostInfo;
-    this._hassInfo = hassInfo;
-
-    if (this._hostInfo.features && this._hostInfo.features.includes("hassos")) {
-      this._hassOsInfo = await fetchHassioHassOsInfo(this.hass);
-    }
-  }
-
-  private async _redirectIngress(addonSlug: string) {
-    // When we trigger a navigation, we sleep to make sure we don't
-    // show the hassio dashboard before navigating away.
-    const awaitAlert = async (
-      alertParams: AlertDialogParams,
-      action: () => void
-    ) => {
-      await new Promise((resolve) => {
-        alertParams.confirm = resolve;
-        showAlertDialog(this, alertParams);
-      });
-      action();
-      await new Promise((resolve) => setTimeout(resolve, 1000));
-    };
-
-    const createSessionPromise = createHassioSession(this.hass).then(
-      () => true,
-      () => false
+    applyThemesOnElement(
+      this.parentElement,
+      this.hass.themes,
+      themeName,
+      options
     );
-
-    let addon;
-
-    try {
-      addon = await fetchHassioAddonInfo(this.hass, addonSlug);
-    } catch (err) {
-      await awaitAlert(
-        {
-          text: "Unable to fetch add-on info to start Ingress",
-          title: "Supervisor",
-        },
-        () => history.back()
-      );
-
-      return;
-    }
-
-    if (!addon.ingress_url) {
-      await awaitAlert(
-        {
-          text: "Add-on does not support Ingress",
-          title: addon.name,
-        },
-        () => history.back()
-      );
-
-      return;
-    }
-
-    if (addon.state !== "started") {
-      await awaitAlert(
-        {
-          text: "Add-on is not running. Please start it first",
-          title: addon.name,
-        },
-        () => navigate(this, `/hassio/addon/${addon.slug}/info`, true)
-      );
-
-      return;
-    }
-
-    if (!(await createSessionPromise)) {
-      await awaitAlert(
-        {
-          text: "Unable to create an Ingress session",
-          title: addon.name,
-        },
-        () => history.back()
-      );
-
-      return;
-    }
-
-    location.assign(addon.ingress_url);
-    // await a promise that doesn't resolve, so we show the loading screen
-    // while we load the next page.
-    await new Promise(() => undefined);
-  }
-
-  private _apiCalled(ev) {
-    if (!ev.detail.success) {
-      return;
-    }
-
-    let tries = 1;
-
-    const tryUpdate = () => {
-      this._fetchData().catch(() => {
-        tries += 1;
-        setTimeout(tryUpdate, Math.min(tries, 5) * 1000);
-      });
-    };
-
-    tryUpdate();
   }
 }
 

hassio/src/hassio-panel-router.ts

@@ -3,6 +3,7 @@ import { HassioHassOSInfo, HassioHostInfo } from "../../src/data/hassio/host";
 import {
   HassioHomeAssistantInfo,
   HassioSupervisorInfo,
+  HassioInfo,
 } from "../../src/data/hassio/supervisor";
 import {
   HassRouterPage,
@@ -26,6 +27,8 @@ class HassioPanelRouter extends HassRouterPage {
 
   @property({ attribute: false }) public supervisorInfo: HassioSupervisorInfo;
 
+  @property({ attribute: false }) public hassioInfo!: HassioInfo;
+
   @property({ attribute: false }) public hostInfo: HassioHostInfo;
 
   @property({ attribute: false }) public hassInfo: HassioHomeAssistantInfo;
@@ -54,6 +57,7 @@ class HassioPanelRouter extends HassRouterPage {
     el.route = this.route;
     el.narrow = this.narrow;
     el.supervisorInfo = this.supervisorInfo;
+    el.hassioInfo = this.hassioInfo;
     el.hostInfo = this.hostInfo;
     el.hassInfo = this.hassInfo;
     el.hassOsInfo = this.hassOsInfo;

hassio/src/hassio-panel.ts

@@ -1,44 +1,21 @@
-import { mdiBackupRestore, mdiCogs, mdiStore, mdiViewDashboard } from "@mdi/js";
 import {
   customElement,
   html,
   LitElement,
   property,
   TemplateResult,
+  css,
+  CSSResult,
 } from "lit-element";
 import { HassioHassOSInfo, HassioHostInfo } from "../../src/data/hassio/host";
 import {
   HassioHomeAssistantInfo,
   HassioSupervisorInfo,
+  HassioInfo,
 } from "../../src/data/hassio/supervisor";
-import type { PageNavigation } from "../../src/layouts/hass-tabs-subpage";
-import "../../src/resources/ha-style";
 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;
@@ -49,6 +26,8 @@ class HassioPanel extends LitElement {
 
   @property({ attribute: false }) public supervisorInfo!: HassioSupervisorInfo;
 
+  @property({ attribute: false }) public hassioInfo!: HassioInfo;
+
   @property({ attribute: false }) public hostInfo!: HassioHostInfo;
 
   @property({ attribute: false }) public hassInfo!: HassioHomeAssistantInfo;
@@ -56,18 +35,32 @@ class HassioPanel extends LitElement {
   @property({ attribute: false }) public hassOsInfo!: HassioHassOSInfo;
 
   protected render(): TemplateResult {
+    if (!this.supervisorInfo) {
+      return html``;
+    }
     return html`
       <hassio-panel-router
         .route=${this.route}
         .hass=${this.hass}
         .narrow=${this.narrow}
         .supervisorInfo=${this.supervisorInfo}
+        .hassioInfo=${this.hassioInfo}
         .hostInfo=${this.hostInfo}
         .hassInfo=${this.hassInfo}
         .hassOsInfo=${this.hassOsInfo}
       ></hassio-panel-router>
     `;
   }
+
+  static get styles(): CSSResult {
+    return css`
+      :host {
+        --app-header-background-color: var(--sidebar-background-color);
+        --app-header-text-color: var(--sidebar-text-color);
+        --app-header-border-bottom: 1px solid var(--divider-color);
+      }
+    `;
+  }
 }
 
 declare global {

hassio/src/hassio-router.ts

@@ -0,0 +1,150 @@
+import {
+  customElement,
+  property,
+  internalProperty,
+  PropertyValues,
+} from "lit-element";
+import {
+  fetchHassioHassOsInfo,
+  fetchHassioHostInfo,
+  HassioHassOSInfo,
+  HassioHostInfo,
+} from "../../src/data/hassio/host";
+import {
+  fetchHassioHomeAssistantInfo,
+  fetchHassioSupervisorInfo,
+  fetchHassioInfo,
+  HassioHomeAssistantInfo,
+  HassioInfo,
+  HassioPanelInfo,
+  HassioSupervisorInfo,
+} from "../../src/data/hassio/supervisor";
+import {
+  HassRouterPage,
+  RouterOptions,
+} from "../../src/layouts/hass-router-page";
+import "../../src/resources/ha-style";
+import { HomeAssistant } from "../../src/types";
+// Don't codesplit it, that way the dashboard always loads fast.
+import "./hassio-panel";
+
+@customElement("hassio-router")
+class HassioRouter extends HassRouterPage {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() public panel!: HassioPanelInfo;
+
+  @property() public narrow!: boolean;
+
+  protected routerOptions: RouterOptions = {
+    // Hass.io has a page with tabs, so we route all non-matching routes to it.
+    defaultPage: "dashboard",
+    initialLoad: () => this._fetchData(),
+    showLoading: true,
+    routes: {
+      dashboard: {
+        tag: "hassio-panel",
+        cache: true,
+      },
+      snapshots: "dashboard",
+      store: "dashboard",
+      system: "dashboard",
+      addon: {
+        tag: "hassio-addon-dashboard",
+        load: () =>
+          import(
+            /* webpackChunkName: "hassio-addon-dashboard" */ "./addon-view/hassio-addon-dashboard"
+          ),
+      },
+      ingress: {
+        tag: "hassio-ingress-view",
+        load: () =>
+          import(
+            /* webpackChunkName: "hassio-ingress-view" */ "./ingress-view/hassio-ingress-view"
+          ),
+      },
+    },
+  };
+
+  @internalProperty() private _supervisorInfo: HassioSupervisorInfo;
+
+  @internalProperty() private _hostInfo: HassioHostInfo;
+
+  @internalProperty() private _hassioInfo?: HassioInfo;
+
+  @internalProperty() private _hassOsInfo?: HassioHassOSInfo;
+
+  @internalProperty() private _hassInfo: HassioHomeAssistantInfo;
+
+  protected firstUpdated(changedProps: PropertyValues) {
+    super.firstUpdated(changedProps);
+    this.addEventListener("hass-api-called", (ev) => this._apiCalled(ev));
+  }
+
+  protected updatePageEl(el) {
+    // the tabs page does its own routing so needs full route.
+    const route = el.nodeName === "HASSIO-PANEL" ? this.route : this.routeTail;
+
+    el.hass = this.hass;
+    el.narrow = this.narrow;
+    el.supervisorInfo = this._supervisorInfo;
+    el.hassioInfo = this._hassioInfo;
+    el.hostInfo = this._hostInfo;
+    el.hassInfo = this._hassInfo;
+    el.hassOsInfo = this._hassOsInfo;
+    el.route = route;
+
+    if (el.localName === "hassio-ingress-view") {
+      el.ingressPanel = this.panel.config && this.panel.config.ingress;
+    }
+  }
+
+  private async _fetchData() {
+    if (this.panel.config && this.panel.config.ingress) {
+      this._redirectIngress(this.panel.config.ingress);
+      return;
+    }
+
+    const [supervisorInfo, hostInfo, hassInfo, hassioInfo] = await Promise.all([
+      fetchHassioSupervisorInfo(this.hass),
+      fetchHassioHostInfo(this.hass),
+      fetchHassioHomeAssistantInfo(this.hass),
+      fetchHassioInfo(this.hass),
+    ]);
+    this._supervisorInfo = supervisorInfo;
+    this._hassioInfo = hassioInfo;
+    this._hostInfo = hostInfo;
+    this._hassInfo = hassInfo;
+
+    if (this._hostInfo.features && this._hostInfo.features.includes("hassos")) {
+      this._hassOsInfo = await fetchHassioHassOsInfo(this.hass);
+    }
+  }
+
+  private _redirectIngress(addonSlug: string) {
+    this.route = { prefix: "/hassio", path: `/ingress/${addonSlug}` };
+  }
+
+  private _apiCalled(ev) {
+    if (!ev.detail.success) {
+      return;
+    }
+
+    let tries = 1;
+
+    const tryUpdate = () => {
+      this._fetchData().catch(() => {
+        tries += 1;
+        setTimeout(tryUpdate, Math.min(tries, 5) * 1000);
+      });
+    };
+
+    tryUpdate();
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hassio-router": HassioRouter;
+  }
+}

hassio/src/hassio-tabs.ts

@@ -0,0 +1,25 @@
+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/ingress-view/hassio-ingress-view.ts

@@ -5,6 +5,7 @@ import {
   html,
   LitElement,
   property,
+  internalProperty,
   PropertyValues,
   TemplateResult,
 } from "lit-element";
@@ -16,29 +17,56 @@ import { createHassioSession } from "../../../src/data/hassio/supervisor";
 import "../../../src/layouts/hass-loading-screen";
 import "../../../src/layouts/hass-subpage";
 import { HomeAssistant, Route } from "../../../src/types";
+import { showAlertDialog } from "../../../src/dialogs/generic/show-dialog-box";
+import { navigate } from "../../../src/common/navigate";
+import { mdiMenu } from "@mdi/js";
+import { fireEvent } from "../../../src/common/dom/fire_event";
 
 @customElement("hassio-ingress-view")
 class HassioIngressView extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public route!: Route;
 
-  @property() private _addon?: HassioAddonDetails;
+  @property() public ingressPanel = false;
+
+  @internalProperty() private _addon?: HassioAddonDetails;
+
+  @property({ type: Boolean })
+  public narrow = false;
 
   protected render(): TemplateResult {
     if (!this._addon) {
       return html` <hass-loading-screen></hass-loading-screen> `;
     }
 
-    return html`
-      <hass-subpage .header=${this._addon.name} hassio>
-        <iframe src=${this._addon.ingress_url}></iframe>
-      </hass-subpage>
-    `;
+    const iframe = html`<iframe src=${this._addon.ingress_url!}></iframe>`;
+
+    if (!this.ingressPanel) {
+      return html`<hass-subpage
+        .header=${this._addon.name}
+        .narrow=${this.narrow}
+      >
+        ${iframe}
+      </hass-subpage>`;
+    }
+
+    return html`${this.narrow || this.hass.dockedSidebar === "always_hidden"
+      ? html`<div class="header">
+            <mwc-icon-button
+              aria-label=${this.hass.localize("ui.sidebar.sidebar_toggle")}
+              @click=${this._toggleMenu}
+            >
+              <ha-svg-icon path=${mdiMenu}></ha-svg-icon>
+            </mwc-icon-button>
+            <div class="main-title">${this._addon.name}</div>
+          </div>
+          ${iframe}`
+      : iframe}`;
   }
 
   protected updated(changedProps: PropertyValues) {
-    super.firstUpdated(changedProps);
+    super.updated(changedProps);
 
     if (!changedProps.has("route")) {
       return;
@@ -55,27 +83,56 @@ class HassioIngressView extends LitElement {
   }
 
   private async _fetchData(addonSlug: string) {
+    const createSessionPromise = createHassioSession(this.hass).then(
+      () => true,
+      () => false
+    );
+
+    let addon;
+
     try {
-      const [addon] = await Promise.all([
-        fetchHassioAddonInfo(this.hass, addonSlug).catch(() => {
-          throw new Error("Failed to fetch add-on info");
-        }),
-        createHassioSession(this.hass).catch(() => {
-          throw new Error("Failed to create an ingress session");
-        }),
-      ]);
-
-      if (!addon.ingress) {
-        throw new Error("This add-on does not support ingress");
-      }
-
-      this._addon = addon;
+      addon = await fetchHassioAddonInfo(this.hass, addonSlug);
     } catch (err) {
-      // eslint-disable-next-line
-      console.error(err);
-      alert(err.message || "Unknown error starting ingress.");
+      await showAlertDialog(this, {
+        text: "Unable to fetch add-on info to start Ingress",
+        title: "Supervisor",
+      });
       history.back();
+      return;
     }
+
+    if (!addon.ingress_url) {
+      await showAlertDialog(this, {
+        text: "Add-on does not support Ingress",
+        title: addon.name,
+      });
+      history.back();
+      return;
+    }
+
+    if (addon.state !== "started") {
+      await showAlertDialog(this, {
+        text: "Add-on is not running. Please start it first",
+        title: addon.name,
+      });
+      navigate(this, `/hassio/addon/${addon.slug}/info`, true);
+      return;
+    }
+
+    if (!(await createSessionPromise)) {
+      await showAlertDialog(this, {
+        text: "Unable to create an Ingress session",
+        title: addon.name,
+      });
+      history.back();
+      return;
+    }
+
+    this._addon = addon;
+  }
+
+  private _toggleMenu(): void {
+    fireEvent(this, "hass-toggle-menu");
   }
 
   static get styles(): CSSResult {
@@ -86,6 +143,41 @@ class HassioIngressView extends LitElement {
         height: 100%;
         border: 0;
       }
+
+      .header + iframe {
+        height: calc(100% - 40px);
+      }
+
+      .header {
+        display: flex;
+        align-items: center;
+        font-size: 16px;
+        height: 40px;
+        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;
+        --mdc-icon-size: 20px;
+      }
+
+      .main-title {
+        margin: 0 0 0 24px;
+        line-height: 20px;
+        flex-grow: 1;
+      }
+
+      mwc-icon-button {
+        pointer-events: auto;
+      }
+
+      hass-subpage {
+        --app-header-background-color: var(--sidebar-background-color);
+        --app-header-text-color: var(--sidebar-text-color);
+        --app-header-border-bottom: 1px solid var(--divider-color);
+      }
     `;
   }
 }

hassio/src/snapshots/hassio-snapshots.ts

@@ -13,14 +13,17 @@ import {
   CSSResultArray,
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
   PropertyValues,
   TemplateResult,
 } from "lit-element";
 import { fireEvent } from "../../../src/common/dom/fire_event";
+import "../../../src/components/buttons/ha-progress-button";
 import "../../../src/components/ha-card";
 import "../../../src/components/ha-svg-icon";
+import { extractApiErrorMessage } from "../../../src/data/hassio/common";
 import {
   createHassioFullSnapshot,
   createHassioPartialSnapshot,
@@ -37,7 +40,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-panel";
+import { supervisorTabs } from "../hassio-tabs";
 import { hassioStyle } from "../resources/hassio-style";
 
 interface CheckboxItem {
@@ -56,19 +59,19 @@ class HassioSnapshots extends LitElement {
 
   @property({ attribute: false }) public supervisorInfo!: HassioSupervisorInfo;
 
-  @property() private _snapshotName = "";
+  @internalProperty() private _snapshotName = "";
 
-  @property() private _snapshotPassword = "";
+  @internalProperty() private _snapshotPassword = "";
 
-  @property() private _snapshotHasPassword = false;
+  @internalProperty() private _snapshotHasPassword = false;
 
-  @property() private _snapshotType: HassioSnapshot["type"] = "full";
+  @internalProperty() private _snapshotType: HassioSnapshot["type"] = "full";
 
-  @property() private _snapshots?: HassioSnapshot[] = [];
+  @internalProperty() private _snapshots?: HassioSnapshot[] = [];
 
-  @property() private _addonList: CheckboxItem[] = [];
+  @internalProperty() private _addonList: CheckboxItem[] = [];
 
-  @property() private _folderList: CheckboxItem[] = [
+  @internalProperty() private _folderList: CheckboxItem[] = [
     {
       slug: "homeassistant",
       name: "Home Assistant configuration",
@@ -76,12 +79,11 @@ class HassioSnapshots extends LitElement {
     },
     { slug: "ssl", name: "SSL", checked: true },
     { slug: "share", name: "Share", checked: true },
+    { slug: "media", name: "Media", checked: true },
     { slug: "addons/local", name: "Local add-ons", checked: true },
   ];
 
-  @property() private _creatingSnapshot = false;
-
-  @property() private _error = "";
+  @internalProperty() private _error = "";
 
   public async refreshData() {
     await reloadHassioSnapshots(this.hass);
@@ -191,12 +193,9 @@ class HassioSnapshots extends LitElement {
                   : undefined}
               </div>
               <div class="card-actions">
-                <mwc-button
-                  .disabled=${this._creatingSnapshot}
-                  @click=${this._createSnapshot}
-                >
+                <ha-progress-button @click=${this._createSnapshot}>
                   Create
-                </mwc-button>
+                </ha-progress-button>
               </div>
             </ha-card>
           </div>
@@ -229,7 +228,7 @@ class HassioSnapshots extends LitElement {
                           .icon=${snapshot.type === "full"
                             ? mdiPackageVariantClosed
                             : mdiPackageVariant}
-                          .icon-class="snapshot"
+                          icon-class="snapshot"
                         ></hassio-card-content>
                       </div>
                     </ha-card>
@@ -243,7 +242,7 @@ class HassioSnapshots extends LitElement {
 
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
-    this._updateSnapshots();
+    this.refreshData();
   }
 
   protected updated(changedProps: PropertyValues) {
@@ -292,17 +291,20 @@ class HassioSnapshots extends LitElement {
       this._snapshots = await fetchHassioSnapshots(this.hass);
       this._snapshots.sort((a, b) => (a.date < b.date ? 1 : -1));
     } catch (err) {
-      this._error = err.message;
+      this._error = extractApiErrorMessage(err);
     }
   }
 
-  private async _createSnapshot() {
+  private async _createSnapshot(ev: CustomEvent): Promise<void> {
+    const button = ev.currentTarget as any;
+    button.progress = true;
+
     this._error = "";
     if (this._snapshotHasPassword && !this._snapshotPassword.length) {
       this._error = "Please enter a password.";
+      button.progress = false;
       return;
     }
-    this._creatingSnapshot = true;
     await this.updateComplete;
 
     const name =
@@ -342,10 +344,9 @@ class HassioSnapshots extends LitElement {
       this._updateSnapshots();
       fireEvent(this, "hass-api-called", { success: true, response: null });
     } catch (err) {
-      this._error = err.message;
-    } finally {
-      this._creatingSnapshot = false;
+      this._error = extractApiErrorMessage(err);
     }
+    button.progress = false;
   }
 
   private _computeDetails(snapshot: HassioSnapshot) {

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

@@ -1,17 +1,31 @@
 import "@material/mwc-button";
+import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
+import "@material/mwc-list/mwc-list-item";
+import { mdiDotsVertical } from "@mdi/js";
+import { safeDump } from "js-yaml";
 import {
   css,
   CSSResult,
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
   TemplateResult,
 } from "lit-element";
-import "../../../src/components/buttons/ha-call-api-button";
+import memoizeOne from "memoize-one";
+import "../../../src/components/buttons/ha-progress-button";
+import "../../../src/components/ha-button-menu";
+import "../../../src/components/ha-card";
+import "../../../src/components/ha-settings-row";
+import {
+  extractApiErrorMessage,
+  ignoredStatusCodes,
+} from "../../../src/data/hassio/common";
 import { fetchHassioHardwareInfo } from "../../../src/data/hassio/hardware";
 import {
   changeHostOptions,
+  configSyncOS,
   fetchHassioHostInfo,
   HassioHassOSInfo,
   HassioHostInfo as HassioHostInfoType,
@@ -19,6 +33,11 @@ import {
   shutdownHost,
   updateOS,
 } from "../../../src/data/hassio/host";
+import {
+  fetchNetworkInfo,
+  NetworkInfo,
+} from "../../../src/data/hassio/network";
+import { HassioInfo } from "../../../src/data/hassio/supervisor";
 import {
   showAlertDialog,
   showConfirmationDialog,
@@ -27,168 +46,191 @@ import {
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant } from "../../../src/types";
 import { showHassioMarkdownDialog } from "../dialogs/markdown/show-dialog-hassio-markdown";
+import { showNetworkDialog } from "../dialogs/network/show-dialog-network";
 import { hassioStyle } from "../resources/hassio-style";
 
 @customElement("hassio-host-info")
 class HassioHostInfo extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public hostInfo!: HassioHostInfoType;
 
-  @property() public hassOsInfo!: HassioHassOSInfo;
+  @property({ attribute: false }) public hassioInfo!: HassioInfo;
 
-  @property() private _errors?: string;
+  @property({ attribute: false }) public hassOsInfo!: HassioHassOSInfo;
 
-  public render(): TemplateResult | void {
+  @internalProperty() public _networkInfo?: NetworkInfo;
+
+  protected render(): TemplateResult | void {
+    const primaryIpAddress = this.hostInfo.features.includes("network")
+      ? this._primaryIpAddress(this._networkInfo!)
+      : "";
     return html`
-      <ha-card>
+      <ha-card header="Host System">
         <div class="card-content">
-          <h2>Host system</h2>
-          <table class="info">
-            <tbody>
-              <tr>
-                <td>Hostname</td>
-                <td>${this.hostInfo.hostname}</td>
-              </tr>
-              <tr>
-                <td>System</td>
-                <td>${this.hostInfo.operating_system}</td>
-              </tr>
-              ${this.hostInfo.deployment
-                ? html`
-                    <tr>
-                      <td>Deployment</td>
-                      <td>${this.hostInfo.deployment}</td>
-                    </tr>
-                  `
-                : ""}
-            </tbody>
-          </table>
-          <mwc-button raised @click=${this._showHardware} class="info">
-            Hardware
-          </mwc-button>
           ${this.hostInfo.features.includes("hostname")
-            ? html`
+            ? html`<ha-settings-row>
+                <span slot="heading">
+                  Hostname
+                </span>
+                <span slot="description">
+                  ${this.hostInfo.hostname}
+                </span>
                 <mwc-button
-                  raised
+                  title="Change the hostname"
+                  label="Change"
                   @click=${this._changeHostnameClicked}
-                  class="info"
                 >
-                  Change hostname
                 </mwc-button>
-              `
+              </ha-settings-row>`
             : ""}
-          ${this._errors
-            ? html` <div class="errors">Error: ${this._errors}</div> `
+          ${this.hostInfo.features.includes("network")
+            ? html` <ha-settings-row>
+                <span slot="heading">
+                  IP address
+                </span>
+                <span slot="description">
+                  ${primaryIpAddress}
+                </span>
+                <mwc-button
+                  title="Change the network"
+                  label="Change"
+                  @click=${this._changeNetworkClicked}
+                >
+                </mwc-button>
+              </ha-settings-row>`
+            : ""}
+
+          <ha-settings-row>
+            <span slot="heading">
+              Operating system
+            </span>
+            <span slot="description">
+              ${this.hostInfo.operating_system}
+            </span>
+            ${this.hostInfo.version !== this.hostInfo.version_latest &&
+            this.hostInfo.features.includes("hassos")
+              ? html`
+                  <ha-progress-button
+                    title="Update the host OS"
+                    @click=${this._osUpdate}
+                  >
+                    Update
+                  </ha-progress-button>
+                `
+              : ""}
+          </ha-settings-row>
+          ${!this.hostInfo.features.includes("hassos")
+            ? html`<ha-settings-row>
+                <span slot="heading">
+                  Docker version
+                </span>
+                <span slot="description">
+                  ${this.hassioInfo.docker}
+                </span>
+              </ha-settings-row>`
+            : ""}
+          ${this.hostInfo.deployment
+            ? html`<ha-settings-row>
+                <span slot="heading">
+                  Deployment
+                </span>
+                <span slot="description">
+                  ${this.hostInfo.deployment}
+                </span>
+              </ha-settings-row>`
             : ""}
         </div>
         <div class="card-actions">
           ${this.hostInfo.features.includes("reboot")
             ? html`
-                <mwc-button class="warning" @click=${this._rebootHost}
-                  >Reboot</mwc-button
+                <ha-progress-button
+                  title="Reboot the host OS"
+                  class="warning"
+                  @click=${this._hostReboot}
                 >
+                  Reboot
+                </ha-progress-button>
               `
             : ""}
           ${this.hostInfo.features.includes("shutdown")
             ? html`
-                <mwc-button class="warning" @click=${this._shutdownHost}
-                  >Shutdown</mwc-button
-                >
-              `
-            : ""}
-          ${this.hostInfo.features.includes("hassos")
-            ? html`
-                <ha-call-api-button
+                <ha-progress-button
+                  title="Shutdown the host OS"
                   class="warning"
-                  .hass=${this.hass}
-                  path="hassio/os/config/sync"
-                  title="Load HassOS configs or updates from USB"
-                  >Import from USB</ha-call-api-button
+                  @click=${this._hostShutdown}
                 >
+                  Shutdown
+                </ha-progress-button>
               `
             : ""}
-          ${this.hostInfo.version !== this.hostInfo.version_latest
-            ? html` <mwc-button @click=${this._updateOS}>Update</mwc-button> `
-            : ""}
+
+          <ha-button-menu
+            corner="BOTTOM_START"
+            @action=${this._handleMenuAction}
+          >
+            <mwc-icon-button slot="trigger">
+              <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
+            </mwc-icon-button>
+            <mwc-list-item title="Show a list of hardware">
+              Hardware
+            </mwc-list-item>
+            ${this.hostInfo.features.includes("hassos")
+              ? html`<mwc-list-item
+                  title="Load HassOS configs or updates from USB"
+                >
+                  Import from USB
+                </mwc-list-item>`
+              : ""}
+          </ha-button-menu>
         </div>
       </ha-card>
     `;
   }
 
-  static get styles(): CSSResult[] {
-    return [
-      haStyle,
-      hassioStyle,
-      css`
-        ha-card {
-          height: 100%;
-          width: 100%;
-        }
-        .card-content {
-          color: var(--primary-text-color);
-          box-sizing: border-box;
-          height: calc(100% - 47px);
-        }
-        .info {
-          width: 100%;
-        }
-        .info td:nth-child(2) {
-          text-align: right;
-        }
-        .errors {
-          color: var(--google-red-500);
-          margin-top: 16px;
-        }
-        mwc-button.info {
-          max-width: calc(50% - 12px);
-        }
-        table.info {
-          margin-bottom: 10px;
-        }
-        .warning {
-          --mdc-theme-primary: var(--google-red-500);
-        }
-      `,
-    ];
-  }
-
   protected firstUpdated(): void {
-    this.addEventListener("hass-api-called", (ev) => this._apiCalled(ev));
+    this._loadData();
   }
 
-  private _apiCalled(ev): void {
-    if (ev.detail.success) {
-      this._errors = undefined;
-      return;
+  private _primaryIpAddress = memoizeOne((network_info: NetworkInfo) => {
+    if (!network_info) {
+      return "";
     }
+    return Object.keys(network_info?.interfaces)
+      .map((device) => network_info.interfaces[device])
+      .find((device) => device.primary)?.ip_address;
+  });
 
-    const response = ev.detail.response;
-
-    this._errors =
-      typeof response.body === "object"
-        ? response.body.message || "Unknown error"
-        : response.body;
+  private async _handleMenuAction(ev: CustomEvent<ActionDetail>) {
+    switch (ev.detail.index) {
+      case 0:
+        await this._showHardware();
+        break;
+      case 1:
+        await this._importFromUSB();
+        break;
+    }
   }
 
   private async _showHardware(): Promise<void> {
     try {
-      const content = this._objectToMarkdown(
-        await fetchHassioHardwareInfo(this.hass)
-      );
+      const content = await fetchHassioHardwareInfo(this.hass);
       showHassioMarkdownDialog(this, {
         title: "Hardware",
-        content,
+        content: `<pre>${safeDump(content, { indent: 2 })}</pre>`,
       });
     } catch (err) {
-      showHassioMarkdownDialog(this, {
-        title: "Hardware",
-        content: "Error getting hardware info",
+      showAlertDialog(this, {
+        title: "Failed to get Hardware list",
+        text: extractApiErrorMessage(err),
       });
     }
   }
 
-  private async _rebootHost(): Promise<void> {
+  private async _hostReboot(ev: CustomEvent): Promise<void> {
+    const button = ev.currentTarget as any;
+    button.progress = true;
+
     const confirmed = await showConfirmationDialog(this, {
       title: "Reboot",
       text: "Are you sure you want to reboot the host?",
@@ -197,20 +239,28 @@ class HassioHostInfo extends LitElement {
     });
 
     if (!confirmed) {
+      button.progress = false;
       return;
     }
 
     try {
       await rebootHost(this.hass);
     } catch (err) {
-      showAlertDialog(this, {
-        title: "Failed to reboot",
-        text: err.body.message,
-      });
+      // Ignore connection errors, these are all expected
+      if (err.status_code && !ignoredStatusCodes.has(err.status_code)) {
+        showAlertDialog(this, {
+          title: "Failed to reboot",
+          text: extractApiErrorMessage(err),
+        });
+      }
     }
+    button.progress = false;
   }
 
-  private async _shutdownHost(): Promise<void> {
+  private async _hostShutdown(ev: CustomEvent): Promise<void> {
+    const button = ev.currentTarget as any;
+    button.progress = true;
+
     const confirmed = await showConfirmationDialog(this, {
       title: "Shutdown",
       text: "Are you sure you want to shutdown the host?",
@@ -219,20 +269,28 @@ class HassioHostInfo extends LitElement {
     });
 
     if (!confirmed) {
+      button.progress = false;
       return;
     }
 
     try {
       await shutdownHost(this.hass);
     } catch (err) {
-      showAlertDialog(this, {
-        title: "Failed to shutdown",
-        text: err.body.message,
-      });
+      // Ignore connection errors, these are all expected
+      if (err.status_code && !ignoredStatusCodes.has(err.status_code)) {
+        showAlertDialog(this, {
+          title: "Failed to shutdown",
+          text: extractApiErrorMessage(err),
+        });
+      }
     }
+    button.progress = false;
   }
 
-  private async _updateOS(): Promise<void> {
+  private async _osUpdate(ev: CustomEvent): Promise<void> {
+    const button = ev.currentTarget as any;
+    button.progress = true;
+
     const confirmed = await showConfirmationDialog(this, {
       title: "Update",
       text: "Are you sure you want to update the OS?",
@@ -241,6 +299,7 @@ class HassioHostInfo extends LitElement {
     });
 
     if (!confirmed) {
+      button.progress = false;
       return;
     }
 
@@ -249,30 +308,17 @@ class HassioHostInfo extends LitElement {
     } catch (err) {
       showAlertDialog(this, {
         title: "Failed to update",
-        text: err.body.message,
+        text: extractApiErrorMessage(err),
       });
     }
+    button.progress = false;
   }
 
-  private _objectToMarkdown(obj, indent = ""): string {
-    let data = "";
-    Object.keys(obj).forEach((key) => {
-      if (typeof obj[key] !== "object") {
-        data += `${indent}- ${key}: ${obj[key]}\n`;
-      } else {
-        data += `${indent}- ${key}:\n`;
-        if (Array.isArray(obj[key])) {
-          if (obj[key].length) {
-            data +=
-              `${indent}    - ` + obj[key].join(`\n${indent}    - `) + "\n";
-          }
-        } else {
-          data += this._objectToMarkdown(obj[key], `    ${indent}`);
-        }
-      }
+  private async _changeNetworkClicked(): Promise<void> {
+    showNetworkDialog(this, {
+      network: this._networkInfo!,
+      loadData: () => this._loadData(),
     });
-
-    return data;
   }
 
   private async _changeHostnameClicked(): Promise<void> {
@@ -291,11 +337,83 @@ class HassioHostInfo extends LitElement {
       } catch (err) {
         showAlertDialog(this, {
           title: "Setting hostname failed",
-          text: err.body.message,
+          text: extractApiErrorMessage(err),
         });
       }
     }
   }
+
+  private async _importFromUSB(): Promise<void> {
+    try {
+      await configSyncOS(this.hass);
+      this.hostInfo = await fetchHassioHostInfo(this.hass);
+    } catch (err) {
+      showAlertDialog(this, {
+        title: "Failed to import from USB",
+        text: extractApiErrorMessage(err),
+      });
+    }
+  }
+
+  private async _loadData(): Promise<void> {
+    this._networkInfo = await fetchNetworkInfo(this.hass);
+  }
+
+  static get styles(): CSSResult[] {
+    return [
+      haStyle,
+      hassioStyle,
+      css`
+        ha-card {
+          height: 100%;
+          justify-content: space-between;
+          flex-direction: column;
+          display: flex;
+        }
+        .card-actions {
+          height: 48px;
+          border-top: none;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+        ha-settings-row {
+          padding: 0;
+          height: 54px;
+          width: 100%;
+        }
+        ha-settings-row[three-line] {
+          height: 74px;
+        }
+        ha-settings-row > span[slot="description"] {
+          white-space: normal;
+          color: var(--secondary-text-color);
+        }
+
+        .warning {
+          --mdc-theme-primary: var(--error-color);
+        }
+
+        ha-button-menu {
+          color: var(--secondary-text-color);
+          --mdc-menu-min-width: 200px;
+        }
+        @media (min-width: 563px) {
+          paper-listbox {
+            max-height: 150px;
+            overflow: auto;
+          }
+        }
+        paper-item {
+          cursor: pointer;
+          min-height: 35px;
+        }
+        mwc-list-item ha-svg-icon {
+          color: var(--secondary-text-color);
+        }
+      `,
+    ];
+  }
 }
 
 declare global {