From 9c2f6e591d0a646c1871835a1bbe946330aae85f Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Sun, 21 Jan 2018 00:39:56 -0800
Subject: [PATCH] Run Hass.io panel in an iframe (#678)

* Run Hass.io in an iframe

* Update hass.io build script

* Lint

* Lint

* Fix build script

* Lint
---
 .gitignore                                    |  1 +
 gulp/tasks/hassio-panel.js                    | 57 +++++++++------
 .../addon-store/hassio-addon-repository.html  | 10 +--
 .../hassio-addon-store-overview.html          | 12 +--
 .../addon-store/hassio-addon-store-view.html  | 14 ++--
 .../addon-store/hassio-addon-store.html       | 14 ++--
 .../hassio-repositories-editor.html           |  8 +-
 .../addon-view/hassio-addon-info.html         | 22 +++---
 .../addon-view/hassio-addon-logs.html         |  6 +-
 .../addon-view/hassio-addon-network.html      | 10 +--
 .../addon-view/hassio-addon-options.html      | 12 +--
 .../addon-view/hassio-addon-view.html         | 12 +--
 .../advanced/hassio-advanced.html             | 14 ++--
 .../advanced/hassio-hass-info.html            |  8 +-
 .../advanced/hassio-host-info.html            |  6 +-
 .../advanced/hassio-supervisor-info.html      |  8 +-
 .../dashboard/hassio-addons.html              | 10 +--
 .../dashboard/hassio-dashboard.html           | 24 +++---
 .../dashboard/hassio-hass-update.html         |  8 +-
 hassio/hassio-app.html                        | 52 +++++++++++++
 {panels/hassio => hassio}/hassio-data.html    |  2 +-
 {panels/hassio => hassio}/hassio-main.html    | 13 ++--
 hassio/index.html                             | 37 ++++++++++
 .../snapshot/hassio-snapshot.html             | 22 +++---
 .../supervisor/hassio-supervisor.html         | 12 +--
 package.json                                  |  3 +-
 panels/hassio/ha-panel-hassio.html            | 73 +++++++++++++------
 panels/map/ha-panel-map.html                  |  2 +-
 yarn.lock                                     | 17 +++++
 29 files changed, 318 insertions(+), 171 deletions(-)
 rename {panels/hassio => hassio}/addon-store/hassio-addon-repository.html (83%)
 rename {panels/hassio => hassio}/addon-store/hassio-addon-store-overview.html (83%)
 rename {panels/hassio => hassio}/addon-store/hassio-addon-store-view.html (85%)
 rename {panels/hassio => hassio}/addon-store/hassio-addon-store.html (82%)
 rename {panels/hassio => hassio}/addon-store/hassio-repositories-editor.html (82%)
 rename {panels/hassio => hassio}/addon-view/hassio-addon-info.html (87%)
 rename {panels/hassio => hassio}/addon-view/hassio-addon-logs.html (82%)
 rename {panels/hassio => hassio}/addon-view/hassio-addon-network.html (88%)
 rename {panels/hassio => hassio}/addon-view/hassio-addon-options.html (82%)
 rename {panels/hassio => hassio}/addon-view/hassio-addon-view.html (86%)
 rename {panels/hassio => hassio}/advanced/hassio-advanced.html (76%)
 rename {panels/hassio => hassio}/advanced/hassio-hass-info.html (86%)
 rename {panels/hassio => hassio}/advanced/hassio-host-info.html (92%)
 rename {panels/hassio => hassio}/advanced/hassio-supervisor-info.html (89%)
 rename {panels/hassio => hassio}/dashboard/hassio-addons.html (81%)
 rename {panels/hassio => hassio}/dashboard/hassio-dashboard.html (75%)
 rename {panels/hassio => hassio}/dashboard/hassio-hass-update.html (83%)
 create mode 100644 hassio/hassio-app.html
 rename {panels/hassio => hassio}/hassio-data.html (93%)
 rename {panels/hassio => hassio}/hassio-main.html (90%)
 create mode 100644 hassio/index.html
 rename {panels/hassio => hassio}/snapshot/hassio-snapshot.html (82%)
 rename {panels/hassio => hassio}/supervisor/hassio-supervisor.html (74%)

diff --git a/.gitignore b/.gitignore
index 975bff0f78..8f5f200290 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,6 +3,7 @@ build-temp/*
 build-es5/*
 build-temp-es5/*
 build-translations/*
+build-hassio/*
 node_modules/*
 bower_components/*
 npm-debug.log
diff --git a/gulp/tasks/hassio-panel.js b/gulp/tasks/hassio-panel.js
index 2a5517a105..803a4b67be 100755
--- a/gulp/tasks/hassio-panel.js
+++ b/gulp/tasks/hassio-panel.js
@@ -1,5 +1,9 @@
+const del = require('del');
 const gulp = require('gulp');
 const rename = require('gulp-rename');
+const gzip = require('gulp-gzip');
+const path = require('path');
+const runSequence = require('run-sequence');
 
 const {
   stripImportsStrategy,
@@ -7,39 +11,44 @@ const {
 const minifyStream = require('../common/transform').minifyStream;
 const {
   bundledStreamFromHTML,
-  findDependencies
 } = require('../common/html');
 
-const { polymer_dir } = require('../config');
+const OUTPUT_DIR = 'build-hassio/';
 
 const DEPS_TO_STRIP = [
   'bower_components/font-roboto/roboto.html',
   'bower_components/paper-styles/color.html',
-  'bower_components/iron-meta/iron-meta.html',
-];
-const DEPS_TO_STRIP_RECURSIVELY = [
-  'bower_components/polymer/polymer.html',
 ];
 
-async function buildHassioPanel(es6) {
-  const toStrip = [...DEPS_TO_STRIP];
-
-  for (const dep of DEPS_TO_STRIP_RECURSIVELY) {
-    toStrip.push(dep);
-    const deps = await findDependencies(polymer_dir, dep);
-    for (const importUrl of deps) {
-      toStrip.push(importUrl);
-    }
-  }
-
-  const stream = await bundledStreamFromHTML('panels/hassio/hassio-main.html', {
-    strategy: stripImportsStrategy(toStrip)
+async function buildHassioPanel() {
+  const stream = await bundledStreamFromHTML('hassio/hassio-app.html', {
+    strategy: stripImportsStrategy(DEPS_TO_STRIP)
   });
 
-  return minifyStream(stream, es6)
-    .pipe(rename('hassio-main.html'))
-    .pipe(gulp.dest(es6 ? 'build-temp' : 'build-temp-es5'));
+  return minifyStream(stream, /* es6= */ false)
+    .pipe(rename('hassio-app.html'))
+    .pipe(gulp.dest(OUTPUT_DIR));
 }
 
-gulp.task('hassio-panel-es5', buildHassioPanel.bind(null, /* es6= */ false));
-gulp.task('hassio-panel', buildHassioPanel.bind(null, /* es6= */ true));
+function copyHassioIndex() {
+  return gulp.src('hassio/index.html')
+    .pipe(gulp.dest(OUTPUT_DIR));
+}
+
+function gzipOutput() {
+  return gulp.src(path.resolve(OUTPUT_DIR, '*.html'))
+    .pipe(gzip({ skipGrowingFiles: true }))
+    .pipe(gulp.dest(OUTPUT_DIR));
+}
+
+gulp.task('hassio-clean', () => del([OUTPUT_DIR]));
+gulp.task('hassio-panel-es5', buildHassioPanel);
+gulp.task('hassio-index-es5', copyHassioIndex);
+gulp.task('hassio-gzip-es5', gzipOutput);
+
+gulp.task('hassio-es5', () => runSequence.use(gulp)(
+  'hassio-clean',
+  'hassio-panel-es5',
+  'hassio-index-es5',
+  'hassio-gzip-es5',
+));
diff --git a/panels/hassio/addon-store/hassio-addon-repository.html b/hassio/addon-store/hassio-addon-repository.html
similarity index 83%
rename from panels/hassio/addon-store/hassio-addon-repository.html
rename to hassio/addon-store/hassio-addon-repository.html
index 4b28d83e6b..4006a2a953 100644
--- a/panels/hassio/addon-store/hassio-addon-repository.html
+++ b/hassio/addon-store/hassio-addon-repository.html
@@ -1,9 +1,9 @@
-<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
-<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
-<link rel="import" href="../../../bower_components/paper-item/paper-item.html">
-<link rel="import" href="../../../bower_components/paper-item/paper-item-body.html">
+<link rel="import" href="../../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../../bower_components/paper-card/paper-card.html">
+<link rel="import" href="../../bower_components/paper-item/paper-item.html">
+<link rel="import" href="../../bower_components/paper-item/paper-item-body.html">
 
-<link rel='import' href='../../../src/util/hass-mixins.html'>
+<link rel='import' href='../../src/util/hass-mixins.html'>
 
 <dom-module id="hassio-addon-repository">
   <template>
diff --git a/panels/hassio/addon-store/hassio-addon-store-overview.html b/hassio/addon-store/hassio-addon-store-overview.html
similarity index 83%
rename from panels/hassio/addon-store/hassio-addon-store-overview.html
rename to hassio/addon-store/hassio-addon-store-overview.html
index 4f1b885a7c..2c7a359094 100644
--- a/panels/hassio/addon-store/hassio-addon-store-overview.html
+++ b/hassio/addon-store/hassio-addon-store-overview.html
@@ -1,10 +1,10 @@
-<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
-<link rel="import" href="../../../bower_components/app-layout/app-header-layout/app-header-layout.html">
-<link rel="import" href="../../../bower_components/app-layout/app-header/app-header.html">
-<link rel="import" href="../../../bower_components/app-layout/app-toolbar/app-toolbar.html">
-<link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="../../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../../bower_components/app-layout/app-header-layout/app-header-layout.html">
+<link rel="import" href="../../bower_components/app-layout/app-header/app-header.html">
+<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
+<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
 
-<link rel='import' href='../../../src/util/hass-mixins.html'>
+<link rel='import' href='../../src/util/hass-mixins.html'>
 
 <link rel="import" href="./hassio-repositories-editor.html">
 <link rel="import" href="./hassio-addon-repository.html">
diff --git a/panels/hassio/addon-store/hassio-addon-store-view.html b/hassio/addon-store/hassio-addon-store-view.html
similarity index 85%
rename from panels/hassio/addon-store/hassio-addon-store-view.html
rename to hassio/addon-store/hassio-addon-store-view.html
index 7c49655f36..0dbd9bbdf3 100644
--- a/panels/hassio/addon-store/hassio-addon-store-view.html
+++ b/hassio/addon-store/hassio-addon-store-view.html
@@ -1,11 +1,11 @@
-<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
-<link rel="import" href="../../../bower_components/app-layout/app-header-layout/app-header-layout.html">
-<link rel="import" href="../../../bower_components/app-layout/app-header/app-header.html">
-<link rel="import" href="../../../bower_components/app-layout/app-toolbar/app-toolbar.html">
-<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
+<link rel="import" href="../../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../../bower_components/app-layout/app-header-layout/app-header-layout.html">
+<link rel="import" href="../../bower_components/app-layout/app-header/app-header.html">
+<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
+<link rel="import" href="../../bower_components/paper-card/paper-card.html">
 
-<link rel='import' href='../../../src/util/hass-mixins.html'>
-<link rel="import" href="../../../src/components/buttons/ha-call-api-button.html">
+<link rel='import' href='../../src/util/hass-mixins.html'>
+<link rel="import" href="../../src/components/buttons/ha-call-api-button.html">
 
 <dom-module id="hassio-addon-store-view">
   <template>
diff --git a/panels/hassio/addon-store/hassio-addon-store.html b/hassio/addon-store/hassio-addon-store.html
similarity index 82%
rename from panels/hassio/addon-store/hassio-addon-store.html
rename to hassio/addon-store/hassio-addon-store.html
index 3d9876f231..0a8387449f 100644
--- a/panels/hassio/addon-store/hassio-addon-store.html
+++ b/hassio/addon-store/hassio-addon-store.html
@@ -1,11 +1,11 @@
-<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
-<link rel="import" href="../../../bower_components/app-layout/app-header-layout/app-header-layout.html">
-<link rel="import" href="../../../bower_components/app-layout/app-header/app-header.html">
-<link rel="import" href="../../../bower_components/app-layout/app-toolbar/app-toolbar.html">
-<link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
-<link rel="import" href="../../../bower_components/app-route/app-route.html">
+<link rel="import" href="../../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../../bower_components/app-layout/app-header-layout/app-header-layout.html">
+<link rel="import" href="../../bower_components/app-layout/app-header/app-header.html">
+<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
+<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="../../bower_components/app-route/app-route.html">
 
-<link rel="import" href="../../../src/components/ha-menu-button.html">
+<link rel="import" href="../../src/components/ha-menu-button.html">
 
 <link rel="import" href="./hassio-repositories-editor.html">
 <link rel="import" href="./hassio-addon-repository.html">
diff --git a/panels/hassio/addon-store/hassio-repositories-editor.html b/hassio/addon-store/hassio-repositories-editor.html
similarity index 82%
rename from panels/hassio/addon-store/hassio-repositories-editor.html
rename to hassio/addon-store/hassio-repositories-editor.html
index ee979054ed..3d9e7ada33 100644
--- a/panels/hassio/addon-store/hassio-repositories-editor.html
+++ b/hassio/addon-store/hassio-repositories-editor.html
@@ -1,8 +1,8 @@
-<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
-<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
-<link rel="import" href="../../../bower_components/iron-autogrow-textarea/iron-autogrow-textarea.html">
+<link rel="import" href="../../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../../bower_components/paper-card/paper-card.html">
+<link rel="import" href="../../bower_components/iron-autogrow-textarea/iron-autogrow-textarea.html">
 
-<link rel="import" href="../../../src/components/buttons/ha-call-api-button.html">
+<link rel="import" href="../../src/components/buttons/ha-call-api-button.html">
 
 <dom-module id="hassio-repositories-editor">
   <template>
diff --git a/panels/hassio/addon-view/hassio-addon-info.html b/hassio/addon-view/hassio-addon-info.html
similarity index 87%
rename from panels/hassio/addon-view/hassio-addon-info.html
rename to hassio/addon-view/hassio-addon-info.html
index 1731efd30d..1ed60d2d27 100644
--- a/panels/hassio/addon-view/hassio-addon-info.html
+++ b/hassio/addon-view/hassio-addon-info.html
@@ -1,16 +1,16 @@
-<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
-<link rel="import" href="../../../bower_components/app-layout/app-header-layout/app-header-layout.html">
-<link rel="import" href="../../../bower_components/app-layout/app-header/app-header.html">
-<link rel="import" href="../../../bower_components/app-layout/app-toolbar/app-toolbar.html">
-<link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
-<link rel="import" href="../../../bower_components/iron-icon/iron-icon.html">
-<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
-<link rel="import" href="../../../bower_components/paper-checkbox/paper-checkbox.html">
-<link rel="import" href="../../../bower_components/paper-button/paper-button.html">
+<link rel="import" href="../../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../../bower_components/app-layout/app-header-layout/app-header-layout.html">
+<link rel="import" href="../../bower_components/app-layout/app-header/app-header.html">
+<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
+<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
+<link rel="import" href="../../bower_components/paper-card/paper-card.html">
+<link rel="import" href="../../bower_components/paper-checkbox/paper-checkbox.html">
+<link rel="import" href="../../bower_components/paper-button/paper-button.html">
 
 
-<link rel="import" href="../../../src/components/ha-icon-check.html">
-<link rel="import" href="../../../src/components/buttons/ha-call-api-button.html">
+<link rel="import" href="../../src/components/ha-icon-check.html">
+<link rel="import" href="../../src/components/buttons/ha-call-api-button.html">
 
 <dom-module id="hassio-addon-info">
   <template>
diff --git a/panels/hassio/addon-view/hassio-addon-logs.html b/hassio/addon-view/hassio-addon-logs.html
similarity index 82%
rename from panels/hassio/addon-view/hassio-addon-logs.html
rename to hassio/addon-view/hassio-addon-logs.html
index a7a169e1d4..a7a2af903f 100644
--- a/panels/hassio/addon-view/hassio-addon-logs.html
+++ b/hassio/addon-view/hassio-addon-logs.html
@@ -1,6 +1,6 @@
-<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
-<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
-<link rel="import" href="../../../bower_components/paper-button/paper-button.html">
+<link rel="import" href="../../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../../bower_components/paper-card/paper-card.html">
+<link rel="import" href="../../bower_components/paper-button/paper-button.html">
 
 <dom-module id="hassio-addon-logs">
   <template>
diff --git a/panels/hassio/addon-view/hassio-addon-network.html b/hassio/addon-view/hassio-addon-network.html
similarity index 88%
rename from panels/hassio/addon-view/hassio-addon-network.html
rename to hassio/addon-view/hassio-addon-network.html
index 5e1a0aa97e..c5aa87d271 100644
--- a/panels/hassio/addon-view/hassio-addon-network.html
+++ b/hassio/addon-view/hassio-addon-network.html
@@ -1,10 +1,10 @@
-<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
-<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
-<link rel="import" href="../../../bower_components/paper-input/paper-input.html">
+<link rel="import" href="../../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../../bower_components/paper-card/paper-card.html">
+<link rel="import" href="../../bower_components/paper-input/paper-input.html">
 
-<link rel='import' href='../../../src/util/hass-mixins.html'>
+<link rel='import' href='../../src/util/hass-mixins.html'>
 
-<link rel="import" href="../../../src/components/buttons/ha-call-api-button.html">
+<link rel="import" href="../../src/components/buttons/ha-call-api-button.html">
 
 <dom-module id="hassio-addon-network">
   <template>
diff --git a/panels/hassio/addon-view/hassio-addon-options.html b/hassio/addon-view/hassio-addon-options.html
similarity index 82%
rename from panels/hassio/addon-view/hassio-addon-options.html
rename to hassio/addon-view/hassio-addon-options.html
index 883ff8d538..d5756e3031 100644
--- a/panels/hassio/addon-view/hassio-addon-options.html
+++ b/hassio/addon-view/hassio-addon-options.html
@@ -1,10 +1,10 @@
-<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
-<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
-<link rel="import" href="../../../bower_components/iron-autogrow-textarea/iron-autogrow-textarea.html">
-<link rel="import" href="../../../bower_components/iron-flex-layout/iron-flex-layout.html">
-<link rel="import" href="../../../bower_components/paper-button/paper-button.html">
+<link rel="import" href="../../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../../bower_components/paper-card/paper-card.html">
+<link rel="import" href="../../bower_components/iron-autogrow-textarea/iron-autogrow-textarea.html">
+<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
+<link rel="import" href="../../bower_components/paper-button/paper-button.html">
 
-<link rel="import" href="../../../src/components/buttons/ha-call-api-button.html">
+<link rel="import" href="../../src/components/buttons/ha-call-api-button.html">
 
 <dom-module id="hassio-addon-options">
   <template>
diff --git a/panels/hassio/addon-view/hassio-addon-view.html b/hassio/addon-view/hassio-addon-view.html
similarity index 86%
rename from panels/hassio/addon-view/hassio-addon-view.html
rename to hassio/addon-view/hassio-addon-view.html
index ed79749842..d344f0c0e5 100644
--- a/panels/hassio/addon-view/hassio-addon-view.html
+++ b/hassio/addon-view/hassio-addon-view.html
@@ -1,10 +1,10 @@
-<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
-<link rel="import" href="../../../bower_components/app-layout/app-header-layout/app-header-layout.html">
-<link rel="import" href="../../../bower_components/app-layout/app-header/app-header.html">
-<link rel="import" href="../../../bower_components/app-layout/app-toolbar/app-toolbar.html">
-<link rel="import" href="../../../bower_components/app-route/app-route.html">
+<link rel="import" href="../../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../../bower_components/app-layout/app-header-layout/app-header-layout.html">
+<link rel="import" href="../../bower_components/app-layout/app-header/app-header.html">
+<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
+<link rel="import" href="../../bower_components/app-route/app-route.html">
 
-<link rel="import" href="../../../src/components/ha-menu-button.html">
+<link rel="import" href="../../src/components/ha-menu-button.html">
 
 <link rel="import" href="./hassio-addon-info.html">
 <link rel="import" href="./hassio-addon-options.html">
diff --git a/panels/hassio/advanced/hassio-advanced.html b/hassio/advanced/hassio-advanced.html
similarity index 76%
rename from panels/hassio/advanced/hassio-advanced.html
rename to hassio/advanced/hassio-advanced.html
index c887556283..7ddcd71ac6 100644
--- a/panels/hassio/advanced/hassio-advanced.html
+++ b/hassio/advanced/hassio-advanced.html
@@ -1,11 +1,11 @@
-<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
-<link rel="import" href="../../../bower_components/app-layout/app-header-layout/app-header-layout.html">
-<link rel="import" href="../../../bower_components/app-layout/app-header/app-header.html">
-<link rel="import" href="../../../bower_components/app-layout/app-toolbar/app-toolbar.html">
-<link rel="import" href="../../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
-<link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="../../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../../bower_components/app-layout/app-header-layout/app-header-layout.html">
+<link rel="import" href="../../bower_components/app-layout/app-header/app-header.html">
+<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
+<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
+<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
 
-<link rel="import" href="../../../src/components/ha-menu-button.html">
+<link rel="import" href="../../src/components/ha-menu-button.html">
 
 <link rel="import" href="./hassio-host-info.html">
 <link rel="import" href="./hassio-hass-info.html">
diff --git a/panels/hassio/advanced/hassio-hass-info.html b/hassio/advanced/hassio-hass-info.html
similarity index 86%
rename from panels/hassio/advanced/hassio-hass-info.html
rename to hassio/advanced/hassio-hass-info.html
index 50219276ec..d38843961b 100644
--- a/panels/hassio/advanced/hassio-hass-info.html
+++ b/hassio/advanced/hassio-hass-info.html
@@ -1,8 +1,8 @@
-<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
-<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
+<link rel="import" href="../../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../../bower_components/paper-card/paper-card.html">
 
-<link rel="import" href="../../../src/components/buttons/ha-call-api-button.html">
-<link rel="import" href="../../../src/components/buttons/ha-call-service-button.html">
+<link rel="import" href="../../src/components/buttons/ha-call-api-button.html">
+<link rel="import" href="../../src/components/buttons/ha-call-service-button.html">
 
 <dom-module id="hassio-hass-info">
   <template>
diff --git a/panels/hassio/advanced/hassio-host-info.html b/hassio/advanced/hassio-host-info.html
similarity index 92%
rename from panels/hassio/advanced/hassio-host-info.html
rename to hassio/advanced/hassio-host-info.html
index a1d2cf0ba1..0c84e4c52d 100644
--- a/panels/hassio/advanced/hassio-host-info.html
+++ b/hassio/advanced/hassio-host-info.html
@@ -1,7 +1,7 @@
-<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
-<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
+<link rel="import" href="../../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../../bower_components/paper-card/paper-card.html">
 
-<link rel="import" href="../../../src/components/buttons/ha-call-api-button.html">
+<link rel="import" href="../../src/components/buttons/ha-call-api-button.html">
 
 <dom-module id="hassio-host-info">
   <template>
diff --git a/panels/hassio/advanced/hassio-supervisor-info.html b/hassio/advanced/hassio-supervisor-info.html
similarity index 89%
rename from panels/hassio/advanced/hassio-supervisor-info.html
rename to hassio/advanced/hassio-supervisor-info.html
index 2e21a8104a..babac87922 100644
--- a/panels/hassio/advanced/hassio-supervisor-info.html
+++ b/hassio/advanced/hassio-supervisor-info.html
@@ -1,8 +1,8 @@
-<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
-<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
+<link rel="import" href="../../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../../bower_components/paper-card/paper-card.html">
 
-<link rel='import' href='../../../src/util/hass-mixins.html'>
-<link rel="import" href="../../../src/components/buttons/ha-call-api-button.html">
+<link rel='import' href='../../src/util/hass-mixins.html'>
+<link rel="import" href="../../src/components/buttons/ha-call-api-button.html">
 
 <dom-module id="hassio-supervisor-info">
   <template>
diff --git a/panels/hassio/dashboard/hassio-addons.html b/hassio/dashboard/hassio-addons.html
similarity index 81%
rename from panels/hassio/dashboard/hassio-addons.html
rename to hassio/dashboard/hassio-addons.html
index acb8bf5cb9..fbe8353618 100644
--- a/panels/hassio/dashboard/hassio-addons.html
+++ b/hassio/dashboard/hassio-addons.html
@@ -1,9 +1,9 @@
-<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
-<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
-<link rel="import" href="../../../bower_components/paper-item/paper-item.html">
-<link rel="import" href="../../../bower_components/paper-item/paper-item-body.html">
+<link rel="import" href="../../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../../bower_components/paper-card/paper-card.html">
+<link rel="import" href="../../bower_components/paper-item/paper-item.html">
+<link rel="import" href="../../bower_components/paper-item/paper-item-body.html">
 
-<link rel='import' href='../../../src/util/hass-mixins.html'>
+<link rel='import' href='../../src/util/hass-mixins.html'>
 
 <dom-module id="hassio-addons">
   <template>
diff --git a/panels/hassio/dashboard/hassio-dashboard.html b/hassio/dashboard/hassio-dashboard.html
similarity index 75%
rename from panels/hassio/dashboard/hassio-dashboard.html
rename to hassio/dashboard/hassio-dashboard.html
index 9bebd0618e..1a7e6bcaa9 100644
--- a/panels/hassio/dashboard/hassio-dashboard.html
+++ b/hassio/dashboard/hassio-dashboard.html
@@ -1,17 +1,17 @@
-<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
-<link rel="import" href="../../../bower_components/app-layout/app-header-layout/app-header-layout.html">
-<link rel="import" href="../../../bower_components/app-layout/app-header/app-header.html">
-<link rel="import" href="../../../bower_components/app-layout/app-toolbar/app-toolbar.html">
-<link rel="import" href="../../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
-<link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="../../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../../bower_components/app-layout/app-header-layout/app-header-layout.html">
+<link rel="import" href="../../bower_components/app-layout/app-header/app-header.html">
+<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
+<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
+<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
 
-<link rel="import" href="../../../bower_components/paper-dropdown-menu/paper-dropdown-menu-light.html">
-<link rel="import" href="../../../bower_components/paper-listbox/paper-listbox.html">
-<link rel="import" href="../../../bower_components/paper-menu-button/paper-menu-button.html">
-<link rel="import" href="../../../bower_components/paper-item/paper-item.html">
+<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu-light.html">
+<link rel="import" href="../../bower_components/paper-listbox/paper-listbox.html">
+<link rel="import" href="../../bower_components/paper-menu-button/paper-menu-button.html">
+<link rel="import" href="../../bower_components/paper-item/paper-item.html">
 
-<link rel='import' href='../../../src/util/hass-mixins.html'>
-<link rel="import" href="../../../src/components/ha-menu-button.html">
+<link rel='import' href='../../src/util/hass-mixins.html'>
+<link rel="import" href="../../src/components/ha-menu-button.html">
 
 <link rel="import" href="./hassio-addons.html">
 <link rel="import" href="./hassio-hass-update.html">
diff --git a/panels/hassio/dashboard/hassio-hass-update.html b/hassio/dashboard/hassio-hass-update.html
similarity index 83%
rename from panels/hassio/dashboard/hassio-hass-update.html
rename to hassio/dashboard/hassio-hass-update.html
index e2479a8e0c..027f70700e 100644
--- a/panels/hassio/dashboard/hassio-hass-update.html
+++ b/hassio/dashboard/hassio-hass-update.html
@@ -1,8 +1,8 @@
-<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
-<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
+<link rel="import" href="../../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../../bower_components/paper-card/paper-card.html">
 
-<link rel="import" href="../../../src/components/buttons/ha-call-api-button.html">
-<link rel="import" href="../../../src/components/buttons/ha-call-service-button.html">
+<link rel="import" href="../../src/components/buttons/ha-call-api-button.html">
+<link rel="import" href="../../src/components/buttons/ha-call-service-button.html">
 
 <dom-module id="hassio-hass-update">
   <template>
diff --git a/hassio/hassio-app.html b/hassio/hassio-app.html
new file mode 100644
index 0000000000..0d8c0e632d
--- /dev/null
+++ b/hassio/hassio-app.html
@@ -0,0 +1,52 @@
+<link rel="import" href="../bower_components/polymer/polymer-element.html">
+<link rel="import" href="./hassio-main.html">
+
+<dom-module id="hassio-app">
+  <template>
+    <template is='dom-if' if='[[hass]]'>
+      <hassio-main
+        hass='[[hass]]'
+        narrow='[[narrow]]'
+        show-menu='[[showMenu]]'
+        route='[[route]]'
+      ></hassio-main>
+    </template>
+  </template>
+</dom-module>
+
+<script>
+class HassioApp extends Polymer.Element {
+  static get is() { return 'hassio-app'; }
+
+  static get properties() {
+    return {
+      hass: Object,
+      narrow: Boolean,
+      showMenu: Boolean,
+      route: Object,
+      hassioPanel: {
+        type: Object,
+        value: window.parent.hassioPanel,
+      },
+    };
+  }
+
+  ready() {
+    super.ready();
+    window.setProperties = this.setProperties.bind(this);
+    this.addEventListener('location-changed', () => this._locationChanged());
+    this.addEventListener('hass-open-menu', () => this._menuEvent(true));
+    this.addEventListener('hass-close-menu', () => this._menuEvent(false));
+  }
+
+  _menuEvent(shouldOpen) {
+    this.hassioPanel.fire(shouldOpen ? 'hass-open-menu' : 'hass-close-menu');
+  }
+
+  _locationChanged() {
+    this.hassioPanel.navigate(window.location.pathname);
+  }
+}
+
+customElements.define(HassioApp.is, HassioApp);
+</script>
diff --git a/panels/hassio/hassio-data.html b/hassio/hassio-data.html
similarity index 93%
rename from panels/hassio/hassio-data.html
rename to hassio/hassio-data.html
index 831a476aa6..2618307e26 100644
--- a/panels/hassio/hassio-data.html
+++ b/hassio/hassio-data.html
@@ -1,4 +1,4 @@
-<link rel="import" href="../../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../bower_components/polymer/polymer-element.html">
 
 <script>
 class HassioData extends Polymer.Element {
diff --git a/panels/hassio/hassio-main.html b/hassio/hassio-main.html
similarity index 90%
rename from panels/hassio/hassio-main.html
rename to hassio/hassio-main.html
index bc7aeba797..fdd64fcd5f 100644
--- a/panels/hassio/hassio-main.html
+++ b/hassio/hassio-main.html
@@ -1,10 +1,11 @@
-<link rel="import" href="../../bower_components/polymer/polymer-element.html">
-<link rel="import" href="../../bower_components/app-route/app-route.html">
-<link rel="import" href="../../bower_components/iron-pages/iron-pages.html">
+<link rel="import" href="../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../bower_components/app-route/app-route.html">
+<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
 
-<link rel="import" href="../../src/layouts/hass-loading-screen.html">
-<link rel="import" href="../../src/layouts/hass-error-screen.html">
-<link rel='import' href='../../src/util/hass-mixins.html'>
+<link rel="import" href="../src/layouts/hass-loading-screen.html">
+<link rel="import" href="../src/layouts/hass-error-screen.html">
+<link rel='import' href='../src/util/hass-mixins.html'>
+<link rel='import' href='../src/resources/ha-style.html'>
 
 <link rel="import" href="./dashboard/hassio-dashboard.html">
 <link rel="import" href="./advanced/hassio-advanced.html">
diff --git a/hassio/index.html b/hassio/index.html
new file mode 100644
index 0000000000..e8cf3df57a
--- /dev/null
+++ b/hassio/index.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Hass.io</title>
+    <meta name='viewport' content='width=device-width, user-scalable=no'>
+    <style>
+      body {
+        height: 100vh;
+        margin: 0;
+        padding: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <hassio-app></hassio-app>
+    <script>
+      function addScript(src) {
+        var e = document.createElement('script');
+        e.src = src;
+        document.head.appendChild(e);
+      }
+      if (!window.parent.HASS_DEV) {
+        addScript('/frontend_es5/custom-elements-es5-adapter.js');
+      }
+      var webComponentsSupported = (
+        'customElements' in window &&
+        'import' in document.createElement('link') &&
+        'content' in document.createElement('template'));
+      if (!webComponentsSupported) {
+        addScript('/static/webcomponents-lite.js');
+      }
+    </script>
+    <link rel='import' href='./hassio-app.html'>
+    <link rel='import' href='/static/mdi.html' async>
+  </body>
+</html>
diff --git a/panels/hassio/snapshot/hassio-snapshot.html b/hassio/snapshot/hassio-snapshot.html
similarity index 82%
rename from panels/hassio/snapshot/hassio-snapshot.html
rename to hassio/snapshot/hassio-snapshot.html
index 7b0ff9486a..edae8c47e4 100644
--- a/panels/hassio/snapshot/hassio-snapshot.html
+++ b/hassio/snapshot/hassio-snapshot.html
@@ -1,16 +1,16 @@
-<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
-<link rel="import" href="../../../bower_components/app-layout/app-header-layout/app-header-layout.html">
-<link rel="import" href="../../../bower_components/app-layout/app-header/app-header.html">
-<link rel="import" href="../../../bower_components/app-layout/app-toolbar/app-toolbar.html">
-<link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
-<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
-<link rel="import" href="../../../bower_components/paper-button/paper-button.html">
-<link rel="import" href="../../../bower_components/paper-input/paper-input.html">
+<link rel="import" href="../../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../../bower_components/app-layout/app-header-layout/app-header-layout.html">
+<link rel="import" href="../../bower_components/app-layout/app-header/app-header.html">
+<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
+<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="../../bower_components/paper-card/paper-card.html">
+<link rel="import" href="../../bower_components/paper-button/paper-button.html">
+<link rel="import" href="../../bower_components/paper-input/paper-input.html">
 
-<link rel='import' href='../../../src/util/hass-mixins.html'>
+<link rel='import' href='../../src/util/hass-mixins.html'>
 
-<link rel="import" href="../../../src/components/ha-menu-button.html">
-<link rel="import" href="../../../src/components/buttons/ha-call-api-button.html">
+<link rel="import" href="../../src/components/ha-menu-button.html">
+<link rel="import" href="../../src/components/buttons/ha-call-api-button.html">
 
 <dom-module id="hassio-snapshot">
   <template>
diff --git a/panels/hassio/supervisor/hassio-supervisor.html b/hassio/supervisor/hassio-supervisor.html
similarity index 74%
rename from panels/hassio/supervisor/hassio-supervisor.html
rename to hassio/supervisor/hassio-supervisor.html
index ce136b1755..1919b787d0 100644
--- a/panels/hassio/supervisor/hassio-supervisor.html
+++ b/hassio/supervisor/hassio-supervisor.html
@@ -1,10 +1,10 @@
-<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
-<link rel="import" href="../../../bower_components/app-layout/app-header-layout/app-header-layout.html">
-<link rel="import" href="../../../bower_components/app-layout/app-header/app-header.html">
-<link rel="import" href="../../../bower_components/app-layout/app-toolbar/app-toolbar.html">
-<link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="../../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../../bower_components/app-layout/app-header-layout/app-header-layout.html">
+<link rel="import" href="../../bower_components/app-layout/app-header/app-header.html">
+<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
+<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
 
-<link rel="import" href="../../../src/components/ha-menu-button.html">
+<link rel="import" href="../../src/components/ha-menu-button.html">
 
 <dom-module id="hassio-supervisor">
   <template>
diff --git a/package.json b/package.json
index d82023024b..ab0945eb41 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
     "dev-watch": "npm run gulp watch_ru_all gen-service-worker",
     "dev-es5": "npm run gulp ru_all_es5 gen-service-worker-es5",
     "dev-watch-es5": "npm run gulp watch_ru_all_es5 gen-service-worker-es5",
-    "lint_js": "eslint src panels js test-mocha --ext js,html",
+    "lint_js": "eslint src panels js hassio test-mocha --ext js,html",
     "lint_html": "ls -1 src/home-assistant.html panels/**/ha-panel-*.html | xargs polymer lint --input",
     "mocha": "node_modules/.bin/mocha --opts test-mocha/mocha.opts",
     "test": "npm run lint_js && npm run lint_html && npm run mocha"
@@ -50,6 +50,7 @@
     "gulp-file": "^0.3.0",
     "gulp-filter": "^5.0.1",
     "gulp-foreach": "^0.1.0",
+    "gulp-gzip": "^1.4.0",
     "gulp-hash": "^4.0.1",
     "gulp-html-minifier": "^0.1.8",
     "gulp-if": "^2.0.2",
diff --git a/panels/hassio/ha-panel-hassio.html b/panels/hassio/ha-panel-hassio.html
index fa2cd7f4cd..b04f1e2951 100644
--- a/panels/hassio/ha-panel-hassio.html
+++ b/panels/hassio/ha-panel-hassio.html
@@ -1,25 +1,25 @@
 <link rel="import" href="../../bower_components/polymer/polymer-element.html">
-<link rel="import" href="./hassio-main.html">
+<link rel='import' href='../../src/util/hass-mixins.html'>
 
 <dom-module id="ha-panel-hassio">
   <template>
     <style>
-      [hidden] {
-        display: none !important;
+      iframe {
+        border: 0;
+        width: 100%;
+        height: 100%;
       }
     </style>
-
-    <hassio-main
-      hass='[[hass]]'
-      narrow='[[narrow]]'
-      show-menu='[[showMenu]]'
-      route='[[route]]'
-    ></hassio-main>
+    <iframe
+      id='iframe'
+      src="[[iframeUrl]]"
+    ></iframe>
   </template>
 </dom-module>
 
 <script>
-class HaPanelHassio extends Polymer.Element {
+class HaPanelHassio extends
+  window.hassMixins.NavigateMixin(window.hassMixins.EventsMixin(Polymer.Element)) {
   static get is() { return 'ha-panel-hassio'; }
 
   static get properties() {
@@ -29,21 +29,50 @@ class HaPanelHassio extends Polymer.Element {
       showMenu: Boolean,
       route: Object,
 
-      loaded: {
-        type: Boolean,
-        value: false,
-      },
+      iframeUrl: {
+        type: String,
+        value: window.HASS_DEV ?
+          '/home-assistant-polymer/hassio/index.html' : '/api/hassio/app-es5/index.html',
+      }
     };
   }
 
-  connectedCallback() {
-    super.connectedCallback();
-    if (!window.HASS_DEV) {
-      Polymer.importHref(`/api/hassio/panel_${window.HASS_BUILD}`, null, () => {
-        // eslint-disable-next-line
-        alert('Failed to load the Hass.io panel from supervisor.');
-      });
+  static get observers() {
+    return [
+      '_dataChanged(hass, narrow, showMenu, route)'
+    ];
+  }
+
+  ready() {
+    super.ready();
+    // Make it available for the iframe to interact
+    window.hassioPanel = this;
+  }
+
+  _dataChanged(hass, narrow, showMenu, route) {
+    this._updateProperties({ hass, narrow, showMenu, route });
+  }
+
+  _updateProperties(data) {
+    const setProperties = this.$.iframe.contentWindow.setProperties;
+
+    // Delay calling setProperties until iframe loaded
+    if (!setProperties) {
+      // Check if we already have a setTimeout scheduled
+      const needTimeout = !this._dataToSet;
+      this._dataToSet = data;
+
+      if (needTimeout) {
+        setTimeout(() => {
+          const dataToSet = this._dataToSet;
+          this._dataToSet = null;
+          this._updateProperties(dataToSet);
+        }, 100);
+      }
+      return;
     }
+
+    setProperties(data);
   }
 }
 
diff --git a/panels/map/ha-panel-map.html b/panels/map/ha-panel-map.html
index 30eb14652f..26d48e6f6c 100644
--- a/panels/map/ha-panel-map.html
+++ b/panels/map/ha-panel-map.html
@@ -59,7 +59,7 @@ class HaPanelMap extends window.hassMixins.LocalizeMixin(Polymer.Element) {
     var map = this._map = window.L.map(this.$.map);
     var style = document.createElement('link');
     style.setAttribute('href', window.HASS_DEV ?
-      '/static/home-assistant-polymer/bower_components/leaflet/dist/leaflet.css' :
+      '/home-assistant-polymer/bower_components/leaflet/dist/leaflet.css' :
       '/static/images/leaflet/leaflet.css');
     style.setAttribute('rel', 'stylesheet');
     this.$.map.parentNode.appendChild(style);
diff --git a/yarn.lock b/yarn.lock
index ebc07dbc92..06eeae9e88 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1637,6 +1637,10 @@ bytes@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
 
+bytes@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/bytes/-/bytes-0.3.0.tgz#78e2e0e28c7f9c7b988ea8aee0db4d5fa9941935"
+
 bytes@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-1.0.0.tgz#3569ede8ba34315fab99c3e92cb04c7220de1fa8"
@@ -3713,6 +3717,15 @@ gulp-foreach@^0.1.0:
     gulp-util "~2.2.14"
     through2 "~0.6.3"
 
+gulp-gzip@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/gulp-gzip/-/gulp-gzip-1.4.0.tgz#5ff8dff837cac2ebc2c89743dc0ac76e2be5e6c2"
+  dependencies:
+    bytes "^0.3.0"
+    gulp-util "^2.2.14"
+    stream-to-array "~1.0.0"
+    through2 "^0.4.1"
+
 gulp-hash@^4.0.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/gulp-hash/-/gulp-hash-4.1.1.tgz#7779910f6c378686b62f88abbb57ebeef20945d0"
@@ -7450,6 +7463,10 @@ stream-to-array@^2.0.2:
   dependencies:
     any-promise "^1.1.0"
 
+stream-to-array@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/stream-to-array/-/stream-to-array-1.0.0.tgz#94166bb29f3ea24f082d2f8cd3ebb2cc0d6eca2c"
+
 streamfilter@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/streamfilter/-/streamfilter-1.0.5.tgz#87507111beb8e298451717b511cfed8f002abf53"