From 6d4bd93d4349c68e044e8bf004308b5c753bbc00 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Sun, 15 Nov 2015 13:18:01 -0800
Subject: [PATCH 01/39] Fix bower.json

---
 bower.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/bower.json b/bower.json
index 5ef340f0ae..4b47119b81 100644
--- a/bower.json
+++ b/bower.json
@@ -12,6 +12,7 @@
     "pikaday": "1.4",
     "leaflet-map": "1.1.0",
     "iron-elements": "PolymerElements/iron-elements#~1.0.4",
-    "paper-elements": "PolymerElements/paper-elements#~1.0.6"
+    "paper-elements": "PolymerElements/paper-elements#~1.0.6",
+    "google-apis": "GoogleWebComponents/google-apis#~1.1.3"
   }
 }

From 244b8cde159d770b998230c5c9b7073eeeb77194 Mon Sep 17 00:00:00 2001
From: Fabian Affolter <fabian@affolter-engineering.ch>
Date: Tue, 17 Nov 2015 23:04:06 +0100
Subject: [PATCH 02/39] Add binary sensor

---
 src/util/domain-icon.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/util/domain-icon.js b/src/util/domain-icon.js
index bf799e4d45..83f750a382 100644
--- a/src/util/domain-icon.js
+++ b/src/util/domain-icon.js
@@ -5,6 +5,9 @@ export default function domainIcon(domain, state) {
   case 'alarm_control_panel':
     return state && state === 'disarmed' ? 'mdi:lock-open' : 'mdi:lock';
 
+  case 'binary_sensor':
+    return 'mdi:radiobox-marked';
+
   case 'camera':
     return 'mdi:video';
 

From d763c49d232cc9b0d54eb49442af5d89bcaed2f3 Mon Sep 17 00:00:00 2001
From: Fabian Affolter <fabian@affolter-engineering.ch>
Date: Tue, 17 Nov 2015 23:04:42 +0100
Subject: [PATCH 03/39] Add binary sensor

---
 src/components/ha-zone-cards.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/ha-zone-cards.js b/src/components/ha-zone-cards.js
index ebe5403801..9f16769768 100644
--- a/src/components/ha-zone-cards.js
+++ b/src/components/ha-zone-cards.js
@@ -16,8 +16,9 @@ const PRIORITY = {
   alarm_control_panel: 3,
   camera: 4,
   sensor: 5,
-  scene: 6,
-  script: 7,
+  binary_sensor: 6,
+  scene: 7,
+  script: 8,
   thermostat: 40,
   media_player: 50,
 };

From 0269527fdbb7cb0c36cdf1c147c59ab571e48fc9 Mon Sep 17 00:00:00 2001
From: Fabian Affolter <fabian@affolter-engineering.ch>
Date: Tue, 17 Nov 2015 23:05:09 +0100
Subject: [PATCH 04/39] Add binary sensor

---
 src/components/entity/ha-state-label-badge.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/components/entity/ha-state-label-badge.js b/src/components/entity/ha-state-label-badge.js
index c59ef1e665..d42c90b172 100644
--- a/src/components/entity/ha-state-label-badge.js
+++ b/src/components/entity/ha-state-label-badge.js
@@ -39,6 +39,8 @@ export default new Polymer({
 
   computeClasses(state) {
     switch (state.domain) {
+    case 'binary_sensor':
+      return state.state === 'on' ? 'green' : 'red';
     case 'scene':
       return 'green';
     case 'script':
@@ -52,6 +54,7 @@ export default new Polymer({
 
   computeValue(state) {
     switch (state.domain) {
+    case 'binary_sensor':
     case 'device_tracker':
     case 'updater':
     case 'sun':
@@ -78,6 +81,12 @@ export default new Polymer({
       }
       // state == 'disarmed'
       return 'mdi:lock-open';
+    case 'binary_sensor':
+      if (state.state === 'on') {
+        return 'mdi:radiobox-marked';
+      }
+      // state == 'off'
+      return 'mdi:radiobox-blank';
     case 'device_tracker':
     case 'scene':
     case 'script':

From 5ba4378c25482214b2200342cfc777fc671aac3a Mon Sep 17 00:00:00 2001
From: Fabian Affolter <fabian@affolter-engineering.ch>
Date: Wed, 18 Nov 2015 22:28:31 +0100
Subject: [PATCH 05/39] Change to work like the alarm control panel

---
 src/util/domain-icon.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/util/domain-icon.js b/src/util/domain-icon.js
index 83f750a382..260340e556 100644
--- a/src/util/domain-icon.js
+++ b/src/util/domain-icon.js
@@ -6,7 +6,7 @@ export default function domainIcon(domain, state) {
     return state && state === 'disarmed' ? 'mdi:lock-open' : 'mdi:lock';
 
   case 'binary_sensor':
-    return 'mdi:radiobox-marked';
+    return state && state === 'off' ? 'mdi:radiobox-blank' : 'mdi:radiobox-marked';
 
   case 'camera':
     return 'mdi:video';

From c39daa6a592f19fb4a6255fca56419a2299a90b2 Mon Sep 17 00:00:00 2001
From: Fabian Affolter <fabian@affolter-engineering.ch>
Date: Wed, 18 Nov 2015 22:29:35 +0100
Subject: [PATCH 06/39] Update color and computeIcon for binary sensor and
 updater

---
 src/components/entity/ha-state-label-badge.js | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/src/components/entity/ha-state-label-badge.js b/src/components/entity/ha-state-label-badge.js
index d42c90b172..748ea53825 100644
--- a/src/components/entity/ha-state-label-badge.js
+++ b/src/components/entity/ha-state-label-badge.js
@@ -40,7 +40,7 @@ export default new Polymer({
   computeClasses(state) {
     switch (state.domain) {
     case 'binary_sensor':
-      return state.state === 'on' ? 'green' : 'red';
+      return state.state === 'on' ? 'blue' : 'grey';
     case 'scene':
       return 'green';
     case 'script':
@@ -82,17 +82,11 @@ export default new Polymer({
       // state == 'disarmed'
       return 'mdi:lock-open';
     case 'binary_sensor':
-      if (state.state === 'on') {
-        return 'mdi:radiobox-marked';
-      }
-      // state == 'off'
-      return 'mdi:radiobox-blank';
     case 'device_tracker':
     case 'scene':
+    case 'updater':
     case 'script':
       return domainIcon(state.domain, state.state);
-    case 'updater':
-      return domainIcon(state.domain);
     case 'sun':
       return state.state === 'above_horizon' ?
         domainIcon(state.domain) : 'mdi:brightness-3';

From 717a3699b288c2ab6a70df32742ab06010c1dedd Mon Sep 17 00:00:00 2001
From: Fabian Affolter <fabian@affolter-engineering.ch>
Date: Fri, 20 Nov 2015 15:23:24 +0100
Subject: [PATCH 07/39] Combined with script

---
 src/components/entity/ha-state-label-badge.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/entity/ha-state-label-badge.js b/src/components/entity/ha-state-label-badge.js
index 748ea53825..c3f7dde5f4 100644
--- a/src/components/entity/ha-state-label-badge.js
+++ b/src/components/entity/ha-state-label-badge.js
@@ -39,10 +39,9 @@ export default new Polymer({
 
   computeClasses(state) {
     switch (state.domain) {
-    case 'binary_sensor':
-      return state.state === 'on' ? 'blue' : 'grey';
     case 'scene':
       return 'green';
+    case 'binary_sensor':
     case 'script':
       return state.state === 'on' ? 'blue' : 'grey';
     case 'updater':

From 62e494bd04509e8d9b73354b0e17d3381955e0c8 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Sat, 28 Nov 2015 01:16:30 -0800
Subject: [PATCH 08/39] Thermostat set temperature in 0.5 steps

---
 src/more-infos/more-info-thermostat.html | 2 +-
 src/more-infos/more-info-thermostat.js   | 6 +-----
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/more-infos/more-info-thermostat.html b/src/more-infos/more-info-thermostat.html
index 21da6548e5..199284b1ca 100644
--- a/src/more-infos/more-info-thermostat.html
+++ b/src/more-infos/more-info-thermostat.html
@@ -22,7 +22,7 @@
       <div>
         <div>Target Temperature</div>
         <paper-slider
-          min='[[tempMin]]' max='[[tempMax]]'
+          min='[[tempMin]]' max='[[tempMax]]' step='0.5'
           value='[[targetTemperatureSliderValue]]' pin
           on-change='targetTemperatureSliderChanged'>
         </paper-slider>
diff --git a/src/more-infos/more-info-thermostat.js b/src/more-infos/more-info-thermostat.js
index f3ffd08907..3a186e6071 100644
--- a/src/more-infos/more-info-thermostat.js
+++ b/src/more-infos/more-info-thermostat.js
@@ -44,13 +44,9 @@ export default new Polymer({
   },
 
   targetTemperatureSliderChanged(ev) {
-    const temp = parseInt(ev.target.value, 10);
-
-    if (isNaN(temp)) return;
-
     serviceActions.callService('thermostat', 'set_temperature', {
       entity_id: this.stateObj.entityId,
-      temperature: temp,
+      temperature: ev.target.value,
     });
   },
 

From 8d97bbcb73d5facb58a24cdb961a3d84b28e8e99 Mon Sep 17 00:00:00 2001
From: happyleaves <happyleaves.tfr@gmail.com>
Date: Sat, 28 Nov 2015 20:07:05 -0500
Subject: [PATCH 09/39] hide icon

---
 src/more-infos/more-info-default.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/more-infos/more-info-default.js b/src/more-infos/more-info-default.js
index d68b2faa27..532ea41acc 100644
--- a/src/more-infos/more-info-default.js
+++ b/src/more-infos/more-info-default.js
@@ -1,6 +1,6 @@
 import Polymer from '../polymer';
 
-const FILTER_KEYS = ['entity_picture', 'friendly_name', 'unit_of_measurement'];
+const FILTER_KEYS = ['entity_picture', 'friendly_name', 'icon', 'unit_of_measurement'];
 
 export default new Polymer({
   is: 'more-info-default',

From d2be4d025179620bf59ad1a926aab1463ad05cf6 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Sat, 28 Nov 2015 17:42:56 -0800
Subject: [PATCH 10/39] Fix introduction card link

---
 src/cards/ha-introduction-card.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/cards/ha-introduction-card.html b/src/cards/ha-introduction-card.html
index 9294868e8f..3f36f21160 100644
--- a/src/cards/ha-introduction-card.html
+++ b/src/cards/ha-introduction-card.html
@@ -49,7 +49,7 @@
           <li><a href='https://home-assistant.io/components/' target='_blank'>
             Available components
           </a></li>
-          <li><a href='https://home-assistant.io/getting-started/troubleshooting-configuration/'>Troubleshooting your configuration</a></li>
+          <li><a href='https://home-assistant.io/getting-started/troubleshooting-configuration/' target='_blank'>Troubleshooting your configuration</a></li>
           <li><a href='https://home-assistant.io/help/' target='_blank'>
             Getting help
           </a></li>

From 6685d657407b95df5e13b098729eb71c7801e702 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Sat, 28 Nov 2015 18:13:14 -0800
Subject: [PATCH 11/39] Improve loading speed

---
 src/home-assistant.js             | 4 ----
 src/layouts/login-form.html       | 2 +-
 src/layouts/login-form.js         | 6 ++++++
 src/layouts/partial-dev-info.html | 3 ++-
 4 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/home-assistant.js b/src/home-assistant.js
index 5aca29d898..c7d0bf1401 100644
--- a/src/home-assistant.js
+++ b/src/home-assistant.js
@@ -72,10 +72,6 @@ export default new Polymer({
 
     startLocalStoragePreferencesSync();
 
-    // remove the HTML init message
-    const initMsg = document.getElementById('init');
-    initMsg.parentElement.removeChild(initMsg);
-
     this.loadIcons();
   },
 });
diff --git a/src/layouts/login-form.html b/src/layouts/login-form.html
index bfae4f4ee1..bc469665dc 100644
--- a/src/layouts/login-form.html
+++ b/src/layouts/login-form.html
@@ -51,7 +51,7 @@
 
   <template>
     <div class="layout vertical center center-center fit">
-      <img src="/static/splash.png" height="230" />
+      <img src="/static/favicon-192x192.png" height="192" />
       <a href="#" id="hideKeyboardOnFocus"></a>
       <div class='interact'>
         <div id='loginform' hidden$="[[showLoading]]">
diff --git a/src/layouts/login-form.js b/src/layouts/login-form.js
index 539ff4df3c..9c732e6af9 100644
--- a/src/layouts/login-form.js
+++ b/src/layouts/login-form.js
@@ -84,4 +84,10 @@ export default new Polymer({
 
     validateAuth(this.$.passwordInput.value, this.$.rememberLogin.checked);
   },
+
+  attached() {
+    // remove the HTML init message
+    const initMsg = document.getElementById('init');
+    initMsg.parentElement.removeChild(initMsg);
+  },
 });
diff --git a/src/layouts/partial-dev-info.html b/src/layouts/partial-dev-info.html
index d86900905f..b89d61d316 100644
--- a/src/layouts/partial-dev-info.html
+++ b/src/layouts/partial-dev-info.html
@@ -56,7 +56,8 @@
       <div class='content fit'>
         <div class='about'>
           <p class='version'>
-            <a href='https://home-assistant.io'><img src="/static/splash.png" height="230" /></a><br />
+            <a href='https://home-assistant.io'><img src="/static/favicon-192x192.png" height="192" /></a><br />
+            Home Assistant<br />
             [[hassVersion]]
           </p>
           <p class='develop'>

From f29b1062b30c76ceeea87fd426a042d98358394a Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Sat, 28 Nov 2015 18:19:04 -0800
Subject: [PATCH 12/39] Update HA-JS version

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index f59e6713bf..381e6e71ff 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
   "author": "Paulus Schoutsen <Paulus@PaulusSchoutsen.nl> (http://paulusschoutsen.nl)",
   "license": "MIT",
   "dependencies": {
-    "home-assistant-js": "git+https://github.com/balloob/home-assistant-js.git#2877f375e76c85505de34af6b752478664570c23",
+    "home-assistant-js": "git+https://github.com/balloob/home-assistant-js.git#3a610931d99384bb1d666f022e8ff4ed17595f64",
     "lodash": "^3.10.1",
     "moment": "^2.10.6"
   },

From 33124030f6d119ad3a58cb520062f2aa58022c6d Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Sat, 28 Nov 2015 22:12:45 -0800
Subject: [PATCH 13/39] Bit more robust icon loading

---
 src/home-assistant.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/home-assistant.js b/src/home-assistant.js
index c7d0bf1401..0e0b0a4b40 100644
--- a/src/home-assistant.js
+++ b/src/home-assistant.js
@@ -54,9 +54,12 @@ export default new Polymer({
   },
 
   loadIcons() {
+    // If the import fails, we'll try to import again, must be a server glitch
+    // Since HTML imports only resolve once, we import another url.
+    const success = () => this.iconsLoaded = true;
     this.importHref(`/static/mdi-${this.icons}.html`,
-                    () => this.iconsLoaded = true,
-                    () => this.loadIcons());
+                    success,
+                    this.importHref(`/static/mdi.html`, success, success));
   },
 
   ready() {

From 300f3582a61b5781431778cd2f44bef05d49baf3 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Sun, 29 Nov 2015 22:48:55 -0800
Subject: [PATCH 14/39] Add support for locks

---
 package.json                                  |  2 +-
 src/components/entity/ha-entity-toggle.js     | 47 ++++++++++---------
 src/components/entity/ha-state-label-badge.js |  2 +-
 src/components/ha-zone-cards.js               |  2 -
 src/util/domain-icon.js                       | 25 +++++-----
 5 files changed, 42 insertions(+), 36 deletions(-)

diff --git a/package.json b/package.json
index 381e6e71ff..4bc4cf883c 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
   "author": "Paulus Schoutsen <Paulus@PaulusSchoutsen.nl> (http://paulusschoutsen.nl)",
   "license": "MIT",
   "dependencies": {
-    "home-assistant-js": "git+https://github.com/balloob/home-assistant-js.git#3a610931d99384bb1d666f022e8ff4ed17595f64",
+    "home-assistant-js": "git+https://github.com/balloob/home-assistant-js.git#1c29568abc9af18627cd70cab2262b32786cd63d",
     "lodash": "^3.10.1",
     "moment": "^2.10.6"
   },
diff --git a/src/components/entity/ha-entity-toggle.js b/src/components/entity/ha-entity-toggle.js
index 59ee410b42..89cabab9b4 100644
--- a/src/components/entity/ha-entity-toggle.js
+++ b/src/components/entity/ha-entity-toggle.js
@@ -23,11 +23,12 @@ export default new Polymer({
 
   toggleChanged(ev) {
     const newVal = ev.target.checked;
+    const curVal = this._checkToggle(this.stateObj);
 
-    if (newVal && this.stateObj.state === 'off') {
-      this.turn_on();
-    } else if (!newVal && this.stateObj.state !== 'off') {
-      this.turn_off();
+    if (newVal && !curVal) {
+      this._call_service(true);
+    } else if (!newVal && curVal) {
+      this._call_service(false);
     }
   },
 
@@ -49,23 +50,27 @@ export default new Polymer({
     this.toggleChecked = newState;
   },
 
-  turn_on() {
-    // We call updateToggle after a successful call to re-sync the toggle
-    // with the state. It will be out of sync if our service call did not
-    // result in the entity to be turned on. Since the state is not changing,
-    // the resync is not called automatic.
-    serviceActions.callTurnOn(this.stateObj.entityId).then(() => this.forceStateChange());
-  },
-
-  turn_off() {
-    // We call updateToggle after a successful call to re-sync the toggle
-    // with the state. It will be out of sync if our service call did not
-    // result in the entity to be turned on. Since the state is not changing,
-    // the resync is not called automatic.
-    serviceActions.callTurnOff(this.stateObj.entityId).then(() => this.forceStateChange());
-  },
-
   _checkToggle(stateObj) {
-    return stateObj && stateObj.state !== 'off';
+    return stateObj && stateObj.state !== 'off' && stateObj.state !== 'unlocked';
+  },
+
+  // We call updateToggle after a successful call to re-sync the toggle
+  // with the state. It will be out of sync if our service call did not
+  // result in the entity to be turned on. Since the state is not changing,
+  // the resync is not called automatic.
+  _call_service(turnOn) {
+    let domain;
+    let service;
+
+    if (this.stateObj.domain === 'lock') {
+      domain = 'lock';
+      service = turnOn ? 'lock' : 'unlock';
+    } else {
+      domain = 'homeassistant';
+      service = turnOn ? 'turn_on' : 'turn_off';
+    }
+
+    serviceActions.callService(domain, service, {entity_id: this.stateObj.entityId})
+      .then(() => this.forceStateChange());
   },
 });
diff --git a/src/components/entity/ha-state-label-badge.js b/src/components/entity/ha-state-label-badge.js
index c3f7dde5f4..7eff163117 100644
--- a/src/components/entity/ha-state-label-badge.js
+++ b/src/components/entity/ha-state-label-badge.js
@@ -79,7 +79,7 @@ export default new Polymer({
         return 'mdi:home-variant';
       }
       // state == 'disarmed'
-      return 'mdi:lock-open';
+      return domainIcon(state.domain, state.state);
     case 'binary_sensor':
     case 'device_tracker':
     case 'scene':
diff --git a/src/components/ha-zone-cards.js b/src/components/ha-zone-cards.js
index 9f16769768..1a2fd25cf3 100644
--- a/src/components/ha-zone-cards.js
+++ b/src/components/ha-zone-cards.js
@@ -19,8 +19,6 @@ const PRIORITY = {
   binary_sensor: 6,
   scene: 7,
   script: 8,
-  thermostat: 40,
-  media_player: 50,
 };
 
 function getPriority(domain) {
diff --git a/src/util/domain-icon.js b/src/util/domain-icon.js
index 260340e556..851ea7d097 100644
--- a/src/util/domain-icon.js
+++ b/src/util/domain-icon.js
@@ -3,10 +3,10 @@ import defaultIcon from './default-icon';
 export default function domainIcon(domain, state) {
   switch (domain) {
   case 'alarm_control_panel':
-    return state && state === 'disarmed' ? 'mdi:lock-open' : 'mdi:lock';
+    return state && state === 'disarmed' ? 'mdi:bell-outline' : 'mdi:bell';
 
   case 'binary_sensor':
-    return state && state === 'off' ? 'mdi:radiobox-blank' : 'mdi:radiobox-marked';
+    return state && state === 'off' ? 'mdi:radiobox-blank' : 'mdi:checkbox-marked-circle';
 
   case 'camera':
     return 'mdi:video';
@@ -29,6 +29,9 @@ export default function domainIcon(domain, state) {
   case 'light':
     return 'mdi:lightbulb';
 
+  case 'lock':
+    return state && state === 'unlocked' ? 'mdi:lock-open' : 'mdi:lock';
+
   case 'media_player':
     let icon = 'mdi:cast';
     if (state && state !== 'off' && state !== 'idle') {
@@ -43,15 +46,6 @@ export default function domainIcon(domain, state) {
   case 'updater':
     return 'mdi:cloud-upload';
 
-  case 'sun':
-    return 'mdi:white-balance-sunny';
-
-  case 'switch':
-    return 'mdi:flash';
-
-  case 'simple_alarm':
-    return 'mdi:bell';
-
   case 'scene':
     return 'mdi:google-pages';
 
@@ -61,6 +55,15 @@ export default function domainIcon(domain, state) {
   case 'sensor':
     return 'mdi:eye';
 
+  case 'simple_alarm':
+    return 'mdi:bell';
+
+  case 'sun':
+    return 'mdi:white-balance-sunny';
+
+  case 'switch':
+    return 'mdi:flash';
+
   case 'thermostat':
     return 'mdi:nest-thermostat';
 

From c130933f45262dd1c7b4fd75d23a90c132fb271f Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Mon, 30 Nov 2015 00:47:32 -0800
Subject: [PATCH 15/39] No longer load icons twice

---
 src/home-assistant.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/home-assistant.js b/src/home-assistant.js
index 0e0b0a4b40..4af9d7704d 100644
--- a/src/home-assistant.js
+++ b/src/home-assistant.js
@@ -59,7 +59,7 @@ export default new Polymer({
     const success = () => this.iconsLoaded = true;
     this.importHref(`/static/mdi-${this.icons}.html`,
                     success,
-                    this.importHref(`/static/mdi.html`, success, success));
+                    () => this.importHref(`/static/mdi.html`, success, success));
   },
 
   ready() {

From 04a7ce241c8c4d4f15afa61d1565641dda0d12e8 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Sat, 5 Dec 2015 00:13:38 -0800
Subject: [PATCH 16/39] Add rollershutter UI

---
 src/state-summary/state-card-content.html     |  1 +
 src/state-summary/state-card-content.js       |  1 +
 .../state-card-rollershutter.html             | 28 +++++++++++++++++
 src/state-summary/state-card-rollershutter.js | 30 +++++++++++++++++++
 src/util/domain-icon.js                       |  3 ++
 src/util/state-card-type.js                   |  2 +-
 6 files changed, 64 insertions(+), 1 deletion(-)
 create mode 100644 src/state-summary/state-card-rollershutter.html
 create mode 100644 src/state-summary/state-card-rollershutter.js

diff --git a/src/state-summary/state-card-content.html b/src/state-summary/state-card-content.html
index e489684e83..429adeeae1 100644
--- a/src/state-summary/state-card-content.html
+++ b/src/state-summary/state-card-content.html
@@ -6,3 +6,4 @@
 <link rel="import" href="state-card-configurator.html">
 <link rel="import" href="state-card-scene.html">
 <link rel="import" href="state-card-media_player.html">
+<link rel="import" href="state-card-rollershutter.html">
diff --git a/src/state-summary/state-card-content.js b/src/state-summary/state-card-content.js
index adc3eb4800..2e7f72f5af 100644
--- a/src/state-summary/state-card-content.js
+++ b/src/state-summary/state-card-content.js
@@ -8,6 +8,7 @@ require('./state-card-thermostat');
 require('./state-card-configurator');
 require('./state-card-scene');
 require('./state-card-media_player');
+require('./state-card-rollershutter');
 
 export default new Polymer({
   is: 'state-card-content',
diff --git a/src/state-summary/state-card-rollershutter.html b/src/state-summary/state-card-rollershutter.html
new file mode 100644
index 0000000000..667d872df2
--- /dev/null
+++ b/src/state-summary/state-card-rollershutter.html
@@ -0,0 +1,28 @@
+<link rel="import" href="../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
+
+<link rel="import" href="../components/state-info.html">
+
+<dom-module id="state-card-rollershutter">
+  <style>
+  :host {
+    line-height: 1.5;
+  }
+
+  .state {
+    margin-left: 16px;
+    text-align: right;
+  }
+
+  </style>
+  <template>
+    <div class='horizontal justified layout'>
+      <state-info state-obj="[[stateObj]]"></state-info>
+      <div class='state'>
+        <paper-icon-button icon="mdi:arrow-up" on-tap='onMoveUpTap'></paper-icon-button>
+        <paper-icon-button icon="mdi:arrow-down" on-tap='onMoveDownTap'></paper-icon-button>
+        <paper-icon-button icon="mdi:stop" on-tap='onStopTap'></paper-icon-button>
+      </div>
+    </div>
+  </template>
+</dom-module>
diff --git a/src/state-summary/state-card-rollershutter.js b/src/state-summary/state-card-rollershutter.js
new file mode 100644
index 0000000000..ff77e83a5a
--- /dev/null
+++ b/src/state-summary/state-card-rollershutter.js
@@ -0,0 +1,30 @@
+import { serviceActions } from '../util/home-assistant-js-instance';
+
+import Polymer from '../polymer';
+
+require('../components/state-info');
+
+export default new Polymer({
+  is: 'state-card-rollershutter',
+
+  properties: {
+    stateObj: {
+      type: Object,
+    },
+  },
+
+  onMoveUpTap() {
+    serviceActions.callService('rollershutter', 'move_up',
+                               {entity_id: this.stateObj.entityId});
+  },
+
+  onMoveDownTap() {
+    serviceActions.callService('rollershutter', 'move_down',
+                               {entity_id: this.stateObj.entityId});
+  },
+
+  onStopTap() {
+    serviceActions.callService('rollershutter', 'stop',
+                               {entity_id: this.stateObj.entityId});
+  },
+});
diff --git a/src/util/domain-icon.js b/src/util/domain-icon.js
index 851ea7d097..65b951580f 100644
--- a/src/util/domain-icon.js
+++ b/src/util/domain-icon.js
@@ -46,6 +46,9 @@ export default function domainIcon(domain, state) {
   case 'updater':
     return 'mdi:cloud-upload';
 
+  case 'rollershutter':
+    return 'mdi:blinds';
+
   case 'scene':
     return 'mdi:google-pages';
 
diff --git a/src/util/state-card-type.js b/src/util/state-card-type.js
index c1032fb598..b457aa4507 100644
--- a/src/util/state-card-type.js
+++ b/src/util/state-card-type.js
@@ -1,7 +1,7 @@
 import canToggle from './can-toggle';
 
 const DOMAINS_WITH_CARD = [
-  'thermostat', 'configurator', 'scene', 'media_player'];
+  'thermostat', 'configurator', 'scene', 'media_player', 'rollershutter'];
 
 export default function stateCardType(state) {
   if (DOMAINS_WITH_CARD.indexOf(state.domain) !== -1) {

From bd9d9e88158c890a73303eedd533739f1406527c Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Sat, 5 Dec 2015 00:13:54 -0800
Subject: [PATCH 17/39] Move removing init message back to root component

---
 src/home-assistant.js     | 6 ++++++
 src/layouts/login-form.js | 6 ------
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/home-assistant.js b/src/home-assistant.js
index 4af9d7704d..1d9b257af4 100644
--- a/src/home-assistant.js
+++ b/src/home-assistant.js
@@ -77,4 +77,10 @@ export default new Polymer({
 
     this.loadIcons();
   },
+
+  attached() {
+    // remove the HTML init message
+    const initMsg = document.getElementById('init');
+    initMsg.parentElement.removeChild(initMsg);
+  },
 });
diff --git a/src/layouts/login-form.js b/src/layouts/login-form.js
index 9c732e6af9..539ff4df3c 100644
--- a/src/layouts/login-form.js
+++ b/src/layouts/login-form.js
@@ -84,10 +84,4 @@ export default new Polymer({
 
     validateAuth(this.$.passwordInput.value, this.$.rememberLogin.checked);
   },
-
-  attached() {
-    // remove the HTML init message
-    const initMsg = document.getElementById('init');
-    initMsg.parentElement.removeChild(initMsg);
-  },
 });

From 20e7b9a87d76a5224564621f24b80b059d3e3fa9 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Sat, 5 Dec 2015 01:09:51 -0800
Subject: [PATCH 18/39] Tweak column sizes

---
 src/components/ha-zone-cards.html | 20 ++++++++++++++++----
 src/layouts/partial-zone.js       |  2 +-
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/components/ha-zone-cards.html b/src/components/ha-zone-cards.html
index b8c35253b9..1353366c06 100644
--- a/src/components/ha-zone-cards.html
+++ b/src/components/ha-zone-cards.html
@@ -23,14 +23,26 @@
       text-align: center;
     }
 
-    .column {
-      max-width: 500px;
-    }
-
     .zone-card {
       margin-left: 8px;
       margin-bottom: 8px;
     }
+
+    @media (max-width: 500px) {
+      :host {
+        padding-right: 0;
+      }
+
+      .zone-card {
+        margin-left: 0;
+      }
+    }
+
+    @media (min-width: 2000px) {
+      .column {
+        max-width: 500px;
+      }
+    }
   </style>
 
   <template>
diff --git a/src/layouts/partial-zone.js b/src/layouts/partial-zone.js
index 2118fc2ebd..737e18f3bf 100644
--- a/src/layouts/partial-zone.js
+++ b/src/layouts/partial-zone.js
@@ -74,7 +74,7 @@ export default new Polymer({
     this.windowChange = this.windowChange.bind(this);
     const sizes = [];
     for (let col = 0; col < 5; col++) {
-      sizes.push(278 + col * 278);
+      sizes.push(300 + col * 300);
     }
     this.mqls = sizes.map(width => {
       const mql = window.matchMedia(`(min-width: ${width}px)`);

From 2e8ad266eeb8cd0136df498b995f584e01338000 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Sat, 5 Dec 2015 01:10:04 -0800
Subject: [PATCH 19/39] Tweak UI for small screens

---
 src/state-summary/state-card-media_player.html  | 15 +++++++++------
 src/state-summary/state-card-rollershutter.html |  3 ++-
 src/state-summary/state-card-thermostat.html    | 13 ++++++++++---
 3 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/src/state-summary/state-card-media_player.html b/src/state-summary/state-card-media_player.html
index 52bf7e08b8..3e5dd277a2 100644
--- a/src/state-summary/state-card-media_player.html
+++ b/src/state-summary/state-card-media_player.html
@@ -15,15 +15,18 @@
   }
 
   .main-text {
-      white-space: nowrap;
-      overflow-x: hidden;
-      text-overflow: ellipsis;
-      text-transform: capitalize;
-      font-weight: 400;
+    white-space: nowrap;
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+    text-transform: capitalize;
+    font-weight: 400;
   }
 
   .secondary-text {
-      color: var(--secondary-text-color);
+    white-space: nowrap;
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+    color: var(--secondary-text-color);
   }
   </style>
   <template>
diff --git a/src/state-summary/state-card-rollershutter.html b/src/state-summary/state-card-rollershutter.html
index 667d872df2..f3f28062cb 100644
--- a/src/state-summary/state-card-rollershutter.html
+++ b/src/state-summary/state-card-rollershutter.html
@@ -10,8 +10,9 @@
   }
 
   .state {
-    margin-left: 16px;
     text-align: right;
+    white-space: nowrap;
+    width: 127px;
   }
 
   </style>
diff --git a/src/state-summary/state-card-thermostat.html b/src/state-summary/state-card-thermostat.html
index 977d615792..3797c63e16 100644
--- a/src/state-summary/state-card-thermostat.html
+++ b/src/state-summary/state-card-thermostat.html
@@ -11,15 +11,22 @@
   .state {
     margin-left: 16px;
     text-align: right;
+    overflow-x: hidden;
   }
 
   .target {
-      text-transform: capitalize;
-      font-weight: 400;
+    text-transform: capitalize;
+    font-weight: 400;
+    white-space: nowrap;
+    overflow-x: hidden;
+    text-overflow: ellipsis;
   }
 
   .current {
-      color: var(--secondary-text-color);
+    color: var(--secondary-text-color);
+    white-space: nowrap;
+    overflow-x: hidden;
+    text-overflow: ellipsis;
   }
   </style>
   <template>

From 758560ad056e7d0f6cfb1a9aabe9636d6a8e3731 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Sun, 6 Dec 2015 09:58:31 -0800
Subject: [PATCH 20/39] Always apply max column width

---
 src/components/ha-zone-cards.html | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/components/ha-zone-cards.html b/src/components/ha-zone-cards.html
index 1353366c06..1efd0cc06e 100644
--- a/src/components/ha-zone-cards.html
+++ b/src/components/ha-zone-cards.html
@@ -23,6 +23,10 @@
       text-align: center;
     }
 
+    .column {
+      max-width: 500px;
+    }
+
     .zone-card {
       margin-left: 8px;
       margin-bottom: 8px;
@@ -37,12 +41,6 @@
         margin-left: 0;
       }
     }
-
-    @media (min-width: 2000px) {
-      .column {
-        max-width: 500px;
-      }
-    }
   </style>
 
   <template>

From 41dbd6abc34473113ba9c9380d9d5e10dff3d623 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Sun, 6 Dec 2015 09:58:44 -0800
Subject: [PATCH 21/39] Rollershutter UI tweaks

---
 src/state-summary/state-card-rollershutter.html | 6 ++++--
 src/state-summary/state-card-rollershutter.js   | 8 ++++++++
 src/util/domain-icon.js                         | 2 +-
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/state-summary/state-card-rollershutter.html b/src/state-summary/state-card-rollershutter.html
index f3f28062cb..426ad10ce9 100644
--- a/src/state-summary/state-card-rollershutter.html
+++ b/src/state-summary/state-card-rollershutter.html
@@ -20,9 +20,11 @@
     <div class='horizontal justified layout'>
       <state-info state-obj="[[stateObj]]"></state-info>
       <div class='state'>
-        <paper-icon-button icon="mdi:arrow-up" on-tap='onMoveUpTap'></paper-icon-button>
-        <paper-icon-button icon="mdi:arrow-down" on-tap='onMoveDownTap'></paper-icon-button>
+        <paper-icon-button icon="mdi:arrow-up" on-tap='onMoveUpTap'
+          disabled='[[computeIsFullyClosed(stateObj)]]'></paper-icon-button>
         <paper-icon-button icon="mdi:stop" on-tap='onStopTap'></paper-icon-button>
+        <paper-icon-button icon="mdi:arrow-down" on-tap='onMoveDownTap'
+          disabled='[[computeIsFullyOpen(stateObj)]]'></paper-icon-button>
       </div>
     </div>
   </template>
diff --git a/src/state-summary/state-card-rollershutter.js b/src/state-summary/state-card-rollershutter.js
index ff77e83a5a..3a08509e0a 100644
--- a/src/state-summary/state-card-rollershutter.js
+++ b/src/state-summary/state-card-rollershutter.js
@@ -13,6 +13,14 @@ export default new Polymer({
     },
   },
 
+  computeIsFullyOpen(stateObj) {
+    return stateObj.attributes.current_position === 100;
+  },
+
+  computeIsFullyClosed(stateObj) {
+    return stateObj.attributes.current_position === 0;
+  },
+
   onMoveUpTap() {
     serviceActions.callService('rollershutter', 'move_up',
                                {entity_id: this.stateObj.entityId});
diff --git a/src/util/domain-icon.js b/src/util/domain-icon.js
index 65b951580f..84fed2f222 100644
--- a/src/util/domain-icon.js
+++ b/src/util/domain-icon.js
@@ -47,7 +47,7 @@ export default function domainIcon(domain, state) {
     return 'mdi:cloud-upload';
 
   case 'rollershutter':
-    return 'mdi:blinds';
+    return state && state === 'open' ? 'mdi:window-open' : 'mdi:window-closed';
 
   case 'scene':
     return 'mdi:google-pages';

From feb776ec89d6872dad2203b352cc6d652c46356d Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Sun, 6 Dec 2015 11:34:01 -0800
Subject: [PATCH 22/39] Remove no longer needed more info backdrop workaround

---
 src/dialogs/more-info-dialog.js | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/src/dialogs/more-info-dialog.js b/src/dialogs/more-info-dialog.js
index e7db62ee1c..945ec59d18 100644
--- a/src/dialogs/more-info-dialog.js
+++ b/src/dialogs/more-info-dialog.js
@@ -73,13 +73,6 @@ export default new Polymer({
       type: Boolean,
       value: false,
     },
-
-    _boundOnBackdropTap: {
-      type: Function,
-      value: function bindBackdropTap() {
-        return this._onBackdropTap.bind(this);
-      },
-    },
   },
 
   /**
@@ -121,18 +114,10 @@ export default new Polymer({
 
   dialogOpenChanged(newVal) {
     if (newVal) {
-      this.$.dialog.backdropElement.addEventListener('click',
-                                                     this._boundOnBackdropTap);
       this.async(() => this._delayedDialogOpen = true, 10);
     } else if (!newVal && this.stateObj) {
       moreInfoActions.deselectEntity();
       this._delayedDialogOpen = false;
     }
   },
-
-  _onBackdropTap() {
-    this.$.dialog.backdropElement.removeEventListener('click',
-                                                      this._boundOnBackdropTap);
-    this.dialogOpen = false;
-  },
 });

From 044a6d9810b6aa662b82af0f67deb662725ad4cb Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Sun, 6 Dec 2015 14:02:08 -0800
Subject: [PATCH 23/39] Update HA-JS version

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 4bc4cf883c..89d5f38ee3 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
   "author": "Paulus Schoutsen <Paulus@PaulusSchoutsen.nl> (http://paulusschoutsen.nl)",
   "license": "MIT",
   "dependencies": {
-    "home-assistant-js": "git+https://github.com/balloob/home-assistant-js.git#1c29568abc9af18627cd70cab2262b32786cd63d",
+    "home-assistant-js": "git+https://github.com/balloob/home-assistant-js.git#692a36d63523a980d64088ccf52f63d44e9f1602",
     "lodash": "^3.10.1",
     "moment": "^2.10.6"
   },

From 4219380146f98107fc829741f7650f56dd534c83 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Mon, 7 Dec 2015 21:34:54 -0800
Subject: [PATCH 24/39] Add basic service worker architecture

---
 src/home-assistant.js       | 24 ++++++++++++++++++++----
 src/service-worker/index.js | 23 +++++++++++++++++++++++
 webpack.config.js           | 23 ++++++++++++-----------
 3 files changed, 55 insertions(+), 15 deletions(-)
 create mode 100644 src/service-worker/index.js

diff --git a/src/home-assistant.js b/src/home-assistant.js
index 1d9b257af4..5d184a79ba 100644
--- a/src/home-assistant.js
+++ b/src/home-assistant.js
@@ -62,6 +62,16 @@ export default new Polymer({
                     () => this.importHref(`/static/mdi.html`, success, success));
   },
 
+  created() {
+    this.registerServiceWorker();
+  },
+
+  attached() {
+    // remove the HTML init message
+    const initMsg = document.getElementById('init');
+    initMsg.parentElement.removeChild(initMsg);
+  },
+
   ready() {
     reactor.batch(() => {
       // if auth was given, tell the backend
@@ -78,9 +88,15 @@ export default new Polymer({
     this.loadIcons();
   },
 
-  attached() {
-    // remove the HTML init message
-    const initMsg = document.getElementById('init');
-    initMsg.parentElement.removeChild(initMsg);
+  registerServiceWorker() {
+    if (!('serviceWorker' in navigator)) {
+      return;
+    }
+
+    navigator.serviceWorker.register('./service_worker.js').then(reg => {
+      console.log('Service Worker registration succeeded.');
+    }).catch(error => {
+      console.log(`Service Worker registration failed: ${error}`);
+    });
   },
 });
diff --git a/src/service-worker/index.js b/src/service-worker/index.js
new file mode 100644
index 0000000000..40e94ec79c
--- /dev/null
+++ b/src/service-worker/index.js
@@ -0,0 +1,23 @@
+if (__DEV__) {
+  console.log('Service Worker initialized.');
+}
+
+self.addEventListener('install', event => {
+  if (__DEV__) {
+    console.log('Service Worker installed.');
+  }
+});
+
+self.addEventListener('activate', event => {
+  if (__DEV__) {
+    console.log('Service Worker activated.');
+    // Force refresh service worker
+    event.waitUntil(global.clients.claim());
+  }
+});
+
+self.addEventListener('onmessage', message => {
+  if (__DEV__) {
+    console.log('Message received', message);
+  }
+});
diff --git a/webpack.config.js b/webpack.config.js
index 76c9b25508..c08e066614 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,5 +1,3 @@
-'use strict';
-
 var webpack = require("webpack");
 
 var definePlugin = new webpack.DefinePlugin({
@@ -8,22 +6,25 @@ var definePlugin = new webpack.DefinePlugin({
 });
 
 module.exports = {
-  entry: "./src/home-assistant.js",
+  entry: {
+    _app_compiled: './src/home-assistant.js',
+    service_worker: './src/service-worker/index.js',
+  },
   output: {
-      path: 'build',
-      filename: "_app_compiled.js"
+    path: 'build',
+    filename: '[name].js',
   },
   module: {
     loaders: [
       {
-        loader: "babel-loader",
+        loader: 'babel-loader',
         test: /.js$/,
-        exclude: /node_modules\/(^home-assistant-js)/
-      }
-    ]
+        exclude: /node_modules\/(^home-assistant-js)/,
+      },
+    ],
   },
   plugins: [
     definePlugin,
-    new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /no-other-locales-for-now/)
-  ]
+    new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /no-other-locales-for-now/),
+  ],
 };

From 254dd6243bcaf76697aade1285423a31605e0e72 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Mon, 7 Dec 2015 23:06:58 -0800
Subject: [PATCH 25/39] Cache index in service worker

---
 src/service-worker/index.js | 38 +++++++++++++++++++++++++++++++++++--
 1 file changed, 36 insertions(+), 2 deletions(-)

diff --git a/src/service-worker/index.js b/src/service-worker/index.js
index 40e94ec79c..474809fd6f 100644
--- a/src/service-worker/index.js
+++ b/src/service-worker/index.js
@@ -1,3 +1,8 @@
+const CACHE = '0.10';
+const INDEX_CACHE_URL = '/';
+const INDEX_ROUTES = ['/', '/logbook', '/history', '/map', '/devService', '/devState',
+                      '/devEvent', '/devInfo', '/states'];
+
 if (__DEV__) {
   console.log('Service Worker initialized.');
 }
@@ -6,6 +11,10 @@ self.addEventListener('install', event => {
   if (__DEV__) {
     console.log('Service Worker installed.');
   }
+
+  event.waitUntil(
+    caches.open(CACHE).then(cache => cache.add(INDEX_CACHE_URL))
+  );
 });
 
 self.addEventListener('activate', event => {
@@ -16,8 +25,33 @@ self.addEventListener('activate', event => {
   }
 });
 
-self.addEventListener('onmessage', message => {
+self.addEventListener('message', event => {
   if (__DEV__) {
-    console.log('Message received', message);
+    console.log('Message received', event.data);
   }
 });
+
+self.addEventListener('fetch', event => {
+  const path = event.request.url.substr(event.request.url.indexOf('/', 7));
+
+  if (event.request.mode !== 'same-origin' || !INDEX_ROUTES.includes(path)) {
+    return fetch(event.request);
+  }
+
+  event.respondWith(
+    caches.open(CACHE).then(cache => {
+      return cache.match(INDEX_CACHE_URL).then(cachedResponse => {
+        const networkFetch = fetch(event.request).then(response => {
+          cache.put(INDEX_CACHE_URL, response.clone());
+          return response;
+        });
+
+        if (__DEV__ && cachedResponse) {
+          console.log('Serving cached response for', path);
+        }
+
+        return cachedResponse || networkFetch;
+      });
+    })
+  );
+});

From e4c0ae0723ef361df705c9022f4a8e71b3bae5ee Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Mon, 7 Dec 2015 23:07:44 -0800
Subject: [PATCH 26/39] Allow logging in service worker.

---
 src/service-worker/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/service-worker/index.js b/src/service-worker/index.js
index 474809fd6f..090bae18e9 100644
--- a/src/service-worker/index.js
+++ b/src/service-worker/index.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 const CACHE = '0.10';
 const INDEX_CACHE_URL = '/';
 const INDEX_ROUTES = ['/', '/logbook', '/history', '/map', '/devService', '/devState',

From 26cf82fe8a1d22c5494e593088d11f1ee5af9d88 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Mon, 7 Dec 2015 23:11:40 -0800
Subject: [PATCH 27/39] Do not process instead of proxy events we dont care
 about

---
 src/service-worker/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/service-worker/index.js b/src/service-worker/index.js
index 090bae18e9..51596b529e 100644
--- a/src/service-worker/index.js
+++ b/src/service-worker/index.js
@@ -36,7 +36,7 @@ self.addEventListener('fetch', event => {
   const path = event.request.url.substr(event.request.url.indexOf('/', 7));
 
   if (event.request.mode !== 'same-origin' || !INDEX_ROUTES.includes(path)) {
-    return fetch(event.request);
+    return;
   }
 
   event.respondWith(

From 2bc0f827b2477e0f338f67b24e7107243581493f Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Mon, 7 Dec 2015 23:42:17 -0800
Subject: [PATCH 28/39] Cache favicon too

---
 src/service-worker/index.js | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/service-worker/index.js b/src/service-worker/index.js
index 51596b529e..63304e2cc3 100644
--- a/src/service-worker/index.js
+++ b/src/service-worker/index.js
@@ -3,6 +3,9 @@ const CACHE = '0.10';
 const INDEX_CACHE_URL = '/';
 const INDEX_ROUTES = ['/', '/logbook', '/history', '/map', '/devService', '/devState',
                       '/devEvent', '/devInfo', '/states'];
+const CACHE_URLS = [
+  '/static/favicon-192x192.png',
+];
 
 if (__DEV__) {
   console.log('Service Worker initialized.');
@@ -14,7 +17,7 @@ self.addEventListener('install', event => {
   }
 
   event.waitUntil(
-    caches.open(CACHE).then(cache => cache.add(INDEX_CACHE_URL))
+    caches.open(CACHE).then(cache => cache.addAll(CACHE_URLS.concat(INDEX_CACHE_URL)))
   );
 });
 
@@ -35,7 +38,15 @@ self.addEventListener('message', event => {
 self.addEventListener('fetch', event => {
   const path = event.request.url.substr(event.request.url.indexOf('/', 7));
 
-  if (event.request.mode !== 'same-origin' || !INDEX_ROUTES.includes(path)) {
+  // TODO: do not cache requests to 3rd party hosts (or remove those calls)
+
+  if (CACHE_URLS.includes(path)) {
+    event.respondWith(
+      caches.open(CACHE).then(cache => cache.match(event.request))
+    );
+  }
+
+  if (!INDEX_ROUTES.includes(path)) {
     return;
   }
 
@@ -47,10 +58,6 @@ self.addEventListener('fetch', event => {
           return response;
         });
 
-        if (__DEV__ && cachedResponse) {
-          console.log('Serving cached response for', path);
-        }
-
         return cachedResponse || networkFetch;
       });
     })

From e51b8add369f9e81d22b25b4be2400675361afdb Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Tue, 8 Dec 2015 09:07:51 -0800
Subject: [PATCH 29/39] SW: Fix getting path

---
 src/service-worker/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/service-worker/index.js b/src/service-worker/index.js
index 63304e2cc3..a9afb7fe61 100644
--- a/src/service-worker/index.js
+++ b/src/service-worker/index.js
@@ -36,7 +36,7 @@ self.addEventListener('message', event => {
 });
 
 self.addEventListener('fetch', event => {
-  const path = event.request.url.substr(event.request.url.indexOf('/', 7));
+  const path = event.request.url.substr(event.request.url.indexOf('/', 8));
 
   // TODO: do not cache requests to 3rd party hosts (or remove those calls)
 

From e9ed56961456f897b26f9e40fa91694913f51bab Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Sun, 13 Dec 2015 23:53:25 -0800
Subject: [PATCH 30/39] Stick node version

---
 .nvmrc | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 .nvmrc

diff --git a/.nvmrc b/.nvmrc
new file mode 100644
index 0000000000..f2c6cb6af2
--- /dev/null
+++ b/.nvmrc
@@ -0,0 +1 @@
+4.2.3

From f4d80f4977329cb250798b4a710ce286db7c8168 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Sun, 13 Dec 2015 23:53:35 -0800
Subject: [PATCH 31/39] Upgrade to babel 6

---
 .babelrc                                      | 12 ++++--------
 package.json                                  | 19 ++++++++++++-------
 src/cards/ha-domain-card.js                   |  6 ++++--
 src/components/entity-list.js                 |  4 +++-
 src/components/entity/ha-entity-marker.js     | 10 ++++++----
 src/components/entity/ha-entity-toggle.js     |  4 +++-
 src/components/entity/ha-state-label-badge.js | 10 ++++++----
 src/components/events-list.js                 |  4 +++-
 src/components/ha-sidebar.js                  | 14 ++++++++------
 src/components/ha-zone-cards.js               |  3 ++-
 src/components/logbook-entry.js               |  4 +++-
 src/components/relative-ha-datetime.js        |  4 ++--
 src/components/services-list.js               |  4 +++-
 src/components/stream-status.js               |  4 +++-
 src/dialogs/ha-voice-command-dialog.js        | 10 ++++++----
 src/dialogs/more-info-dialog.js               | 16 +++++++++-------
 src/home-assistant.js                         | 16 +++++++++-------
 src/layouts/home-assistant-main.js            | 14 ++++++++------
 src/layouts/login-form.js                     |  4 +++-
 src/layouts/partial-dev-call-service.js       | 12 +++++++-----
 src/layouts/partial-dev-fire-event.js         |  4 +++-
 src/layouts/partial-dev-info.js               | 10 ++++++----
 src/layouts/partial-dev-set-state.js          |  4 +++-
 src/layouts/partial-history.js                | 10 ++++++----
 src/layouts/partial-logbook.js                |  4 +++-
 src/layouts/partial-map.js                    | 10 ++++++----
 src/layouts/partial-zone.js                   | 19 +++++++++++--------
 src/managers/notification-manager.js          |  4 +++-
 .../more-info-alarm_control_panel.js          |  4 +++-
 src/more-infos/more-info-configurator.js      | 12 +++++++-----
 src/more-infos/more-info-group.js             | 10 ++++++----
 src/more-infos/more-info-light.js             |  3 ++-
 src/more-infos/more-info-media_player.js      |  3 ++-
 src/more-infos/more-info-sun.js               |  4 ++--
 src/more-infos/more-info-thermostat.js        |  3 ++-
 src/state-summary/state-card-rollershutter.js |  4 +++-
 src/state-summary/state-card-scene.js         |  4 +++-
 src/state-summary/state-card.js               |  4 +++-
 src/util/bound-nuclear-behavior.js            |  4 ++--
 src/util/can-toggle.js                        |  6 ++++--
 src/util/state-icon.js                        |  9 ++++-----
 src/util/validate-auth.js                     |  4 +++-
 webpack.config.js                             |  6 +++++-
 43 files changed, 196 insertions(+), 123 deletions(-)

diff --git a/.babelrc b/.babelrc
index 808edb3a5f..0672bb2444 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,10 +1,6 @@
 {
-  "stage": 1,
-  "highlightCode": true,
-  "optional": ["es7.objectRestSpread", "es7.classProperties"],
-  "env": {
-    "production": {
-      "optional": ["optimisation"]
-    }
-  }
+  "presets": ["es2015"],
+  "plugins": ["transform-object-rest-spread", "transform-export-extensions",
+              "transform-class-properties", "babel-plugin-default-import-checker"],
+  "highlightCode": true
 }
diff --git a/package.json b/package.json
index 89d5f38ee3..96234f1126 100644
--- a/package.json
+++ b/package.json
@@ -20,19 +20,24 @@
   "author": "Paulus Schoutsen <Paulus@PaulusSchoutsen.nl> (http://paulusschoutsen.nl)",
   "license": "MIT",
   "dependencies": {
-    "home-assistant-js": "git+https://github.com/balloob/home-assistant-js.git#692a36d63523a980d64088ccf52f63d44e9f1602",
+    "home-assistant-js": "git+https://github.com/balloob/home-assistant-js.git#b35fb90c94c1dfbb45c9691e9789f0b84b949d94",
     "lodash": "^3.10.1",
     "moment": "^2.10.6"
   },
   "devDependencies": {
-    "babel-core": "^5.8.29",
-    "babel-eslint": "^4.1.5",
-    "babel-loader": "^5.3.2",
+    "babel-core": "^6.3",
+    "babel-eslint": "^5.0.0-beta6",
+    "babel-loader": "^6.2",
+    "babel-plugin-default-import-checker": "^1.0.8",
+    "babel-plugin-transform-class-properties": "^6.3.13",
+    "babel-plugin-transform-export-extensions": "^6.3.13",
+    "babel-plugin-transform-object-rest-spread": "^6.3.13",
+    "babel-preset-es2015": "^6.0.0",
     "bower": "^1.6.5",
-    "eslint": "^1.9",
-    "eslint-config-airbnb": "^1.0.0",
+    "eslint": "^1.10.3",
+    "eslint-config-airbnb": "^0.1.0",
     "html-minifier": "^1.0.0",
     "vulcanize": "^1.14.0",
-    "webpack": "^1.12.2"
+    "webpack": "^1.12"
   }
 }
diff --git a/src/cards/ha-domain-card.js b/src/cards/ha-domain-card.js
index 40226da0f1..671ddd306f 100644
--- a/src/cards/ha-domain-card.js
+++ b/src/cards/ha-domain-card.js
@@ -1,11 +1,13 @@
 import Polymer from '../polymer';
-import { moreInfoActions } from '../util/home-assistant-js-instance';
+import hass from '../util/home-assistant-js-instance';
 import canToggle from '../util/can-toggle';
 
 require('../components/ha-card');
 require('../components/entity/ha-entity-toggle');
 require('../state-summary/state-card-content');
 
+const { moreInfoActions } = hass;
+
 export default new Polymer({
   is: 'ha-domain-card',
 
@@ -36,7 +38,7 @@ export default new Polymer({
   },
 
   showGroupToggle(groupEntity, states) {
-    if (!groupEntity || groupEntity.state !== 'on' && groupEntity.state !== 'off') {
+    if (!groupEntity || !states || groupEntity.state !== 'on' && groupEntity.state !== 'off') {
       return false;
     }
 
diff --git a/src/components/entity-list.js b/src/components/entity-list.js
index 85a59532a7..5286e875f7 100644
--- a/src/components/entity-list.js
+++ b/src/components/entity-list.js
@@ -1,8 +1,10 @@
-import { entityGetters } from '../util/home-assistant-js-instance';
+import hass from '../util/home-assistant-js-instance';
 
 import Polymer from '../polymer';
 import nuclearObserver from '../util/bound-nuclear-behavior';
 
+const { entityGetters } = hass;
+
 export default new Polymer({
   is: 'entity-list',
 
diff --git a/src/components/entity/ha-entity-marker.js b/src/components/entity/ha-entity-marker.js
index cc1f7dc701..82440cc73e 100644
--- a/src/components/entity/ha-entity-marker.js
+++ b/src/components/entity/ha-entity-marker.js
@@ -1,11 +1,13 @@
 import Polymer from '../../polymer';
-import {
+import hass from '../../util/home-assistant-js-instance';
+
+require('../../components/ha-label-badge');
+
+const {
   reactor,
   entityGetters,
   moreInfoActions,
-} from '../../util/home-assistant-js-instance';
-
-require('../../components/ha-label-badge');
+} = hass;
 
 export default new Polymer({
   is: 'ha-entity-marker',
diff --git a/src/components/entity/ha-entity-toggle.js b/src/components/entity/ha-entity-toggle.js
index 89cabab9b4..0edb3841ee 100644
--- a/src/components/entity/ha-entity-toggle.js
+++ b/src/components/entity/ha-entity-toggle.js
@@ -1,7 +1,9 @@
-import { serviceActions } from '../../util/home-assistant-js-instance';
+import hass from '../../util/home-assistant-js-instance';
 
 import Polymer from '../../polymer';
 
+const { serviceActions } = hass;
+
 export default new Polymer({
   is: 'ha-entity-toggle',
 
diff --git a/src/components/entity/ha-state-label-badge.js b/src/components/entity/ha-state-label-badge.js
index 7eff163117..ba22bd1c40 100644
--- a/src/components/entity/ha-state-label-badge.js
+++ b/src/components/entity/ha-state-label-badge.js
@@ -1,13 +1,15 @@
 import Polymer from '../../polymer';
-import {
-  moreInfoActions,
-  serviceActions,
-} from '../../util/home-assistant-js-instance';
+import hass from '../../util/home-assistant-js-instance';
 import domainIcon from '../../util/domain-icon';
 import canToggle from '../../util/can-toggle';
 
 require('../../components/ha-label-badge');
 
+const {
+  moreInfoActions,
+  serviceActions,
+} = hass;
+
 export default new Polymer({
   is: 'ha-state-label-badge',
 
diff --git a/src/components/events-list.js b/src/components/events-list.js
index 022df0422d..79e74c65ac 100644
--- a/src/components/events-list.js
+++ b/src/components/events-list.js
@@ -1,8 +1,10 @@
-import { eventGetters } from '../util/home-assistant-js-instance';
+import hass from '../util/home-assistant-js-instance';
 
 import Polymer from '../polymer';
 import nuclearObserver from '../util/bound-nuclear-behavior';
 
+const { eventGetters } = hass;
+
 export default new Polymer({
   is: 'events-list',
 
diff --git a/src/components/ha-sidebar.js b/src/components/ha-sidebar.js
index 3a4ae05865..4b68cbe34d 100644
--- a/src/components/ha-sidebar.js
+++ b/src/components/ha-sidebar.js
@@ -1,15 +1,17 @@
-import {
-  configGetters,
-  navigationGetters,
-  authActions,
-  navigationActions,
-} from '../util/home-assistant-js-instance';
+import hass from '../util/home-assistant-js-instance';
 
 import Polymer from '../polymer';
 import nuclearObserver from '../util/bound-nuclear-behavior';
 
 require('./stream-status');
 
+const {
+  configGetters,
+  navigationGetters,
+  authActions,
+  navigationActions,
+} = hass;
+
 export default new Polymer({
   is: 'ha-sidebar',
 
diff --git a/src/components/ha-zone-cards.js b/src/components/ha-zone-cards.js
index 1a2fd25cf3..2956ef6d6e 100644
--- a/src/components/ha-zone-cards.js
+++ b/src/components/ha-zone-cards.js
@@ -1,11 +1,12 @@
 import Polymer from '../polymer';
-import { util } from '../util/home-assistant-js-instance';
+import hass from '../util/home-assistant-js-instance';
 
 require('.//ha-demo-badge');
 require('../cards/ha-badges-card');
 require('../cards/ha-domain-card');
 require('../cards/ha-introduction-card');
 
+const { util } = hass;
 const PRIORITY = {
   configurator: -20,
   group: -10,
diff --git a/src/components/logbook-entry.js b/src/components/logbook-entry.js
index d6108d7dd6..f681ffdbfe 100644
--- a/src/components/logbook-entry.js
+++ b/src/components/logbook-entry.js
@@ -1,4 +1,4 @@
-import { moreInfoActions } from '../util/home-assistant-js-instance';
+import hass from '../util/home-assistant-js-instance';
 
 import Polymer from '../polymer';
 
@@ -6,6 +6,8 @@ require('./domain-icon');
 require('./display-time');
 require('./relative-ha-datetime');
 
+const { moreInfoActions } = hass;
+
 export default new Polymer({
   is: 'logbook-entry',
 
diff --git a/src/components/relative-ha-datetime.js b/src/components/relative-ha-datetime.js
index 307354f3a1..592ede193e 100644
--- a/src/components/relative-ha-datetime.js
+++ b/src/components/relative-ha-datetime.js
@@ -1,10 +1,10 @@
 import moment from 'moment';
-import { util } from '../util/home-assistant-js-instance';
+import hass from '../util/home-assistant-js-instance';
 import Polymer from '../polymer';
 
 const UPDATE_INTERVAL = 60000; // 60 seconds
 
-const { parseDateTime } = util;
+const { util: { parseDateTime } } = hass;
 
 export default new Polymer({
   is: 'relative-ha-datetime',
diff --git a/src/components/services-list.js b/src/components/services-list.js
index 080026889e..7870e4dfaa 100644
--- a/src/components/services-list.js
+++ b/src/components/services-list.js
@@ -1,10 +1,12 @@
-import { serviceGetters } from '../util/home-assistant-js-instance';
+import hass from '../util/home-assistant-js-instance';
 
 import Polymer from '../polymer';
 import nuclearObserver from '../util/bound-nuclear-behavior';
 
 require('./domain-icon');
 
+const { serviceGetters } = hass;
+
 export default new Polymer({
   is: 'services-list',
 
diff --git a/src/components/stream-status.js b/src/components/stream-status.js
index efba55205f..d8d76827e6 100644
--- a/src/components/stream-status.js
+++ b/src/components/stream-status.js
@@ -1,8 +1,10 @@
-import { streamGetters, streamActions } from '../util/home-assistant-js-instance';
+import hass from '../util/home-assistant-js-instance';
 
 import Polymer from '../polymer';
 import nuclearObserver from '../util/bound-nuclear-behavior';
 
+const { streamGetters, streamActions } = hass;
+
 export default new Polymer({
   is: 'stream-status',
 
diff --git a/src/dialogs/ha-voice-command-dialog.js b/src/dialogs/ha-voice-command-dialog.js
index ad1c599c08..a86354fbd4 100644
--- a/src/dialogs/ha-voice-command-dialog.js
+++ b/src/dialogs/ha-voice-command-dialog.js
@@ -1,11 +1,13 @@
-import {
-  voiceActions,
-  voiceGetters,
-} from '../util/home-assistant-js-instance';
+import hass from '../util/home-assistant-js-instance';
 
 import Polymer from '../polymer';
 import nuclearObserver from '../util/bound-nuclear-behavior';
 
+const {
+  voiceActions,
+  voiceGetters,
+} = hass;
+
 export default new Polymer({
   is: 'ha-voice-command-dialog',
 
diff --git a/src/dialogs/more-info-dialog.js b/src/dialogs/more-info-dialog.js
index 945ec59d18..bdf50646f2 100644
--- a/src/dialogs/more-info-dialog.js
+++ b/src/dialogs/more-info-dialog.js
@@ -1,10 +1,4 @@
-import {
-  configGetters,
-  entityHistoryGetters,
-  entityHistoryActions,
-  moreInfoGetters,
-  moreInfoActions,
-} from '../util/home-assistant-js-instance';
+import hass from '../util/home-assistant-js-instance';
 
 import Polymer from '../polymer';
 import nuclearObserver from '../util/bound-nuclear-behavior';
@@ -13,6 +7,14 @@ require('../state-summary/state-card-content');
 require('../components/state-history-charts');
 require('../more-infos/more-info-content');
 
+const {
+  configGetters,
+  entityHistoryGetters,
+  entityHistoryActions,
+  moreInfoGetters,
+  moreInfoActions,
+} = hass;
+
 // if you don't want the history component to show add the domain to this array
 const DOMAINS_WITH_NO_HISTORY = ['camera', 'configurator', 'scene'];
 
diff --git a/src/home-assistant.js b/src/home-assistant.js
index 5d184a79ba..9375837412 100644
--- a/src/home-assistant.js
+++ b/src/home-assistant.js
@@ -1,12 +1,6 @@
 import Polymer from './polymer';
 
-import {
-  localStoragePreferences,
-  navigationActions,
-  reactor,
-  startLocalStoragePreferencesSync,
-  syncGetters,
-} from './util/home-assistant-js-instance';
+import hass from './util/home-assistant-js-instance';
 
 import nuclearObserver from './util/bound-nuclear-behavior';
 import validateAuth from './util/validate-auth';
@@ -14,6 +8,14 @@ import validateAuth from './util/validate-auth';
 require('./layouts/login-form');
 require('./layouts/home-assistant-main');
 
+const {
+  localStoragePreferences,
+  navigationActions,
+  reactor,
+  startLocalStoragePreferencesSync,
+  syncGetters,
+} = hass;
+
 export default new Polymer({
   is: 'home-assistant',
 
diff --git a/src/layouts/home-assistant-main.js b/src/layouts/home-assistant-main.js
index e0bcafd0ce..8408cbf967 100644
--- a/src/layouts/home-assistant-main.js
+++ b/src/layouts/home-assistant-main.js
@@ -1,10 +1,5 @@
 import Polymer from '../polymer';
-import {
-  navigationActions,
-  navigationGetters,
-  startUrlSync,
-  stopUrlSync,
-} from '../util/home-assistant-js-instance';
+import hass from '../util/home-assistant-js-instance';
 
 import nuclearObserver from '../util/bound-nuclear-behavior';
 
@@ -21,6 +16,13 @@ require('../managers/notification-manager');
 require('../dialogs/more-info-dialog');
 require('../dialogs/ha-voice-command-dialog');
 
+const {
+  navigationActions,
+  navigationGetters,
+  startUrlSync,
+  stopUrlSync,
+} = hass;
+
 export default new Polymer({
   is: 'home-assistant-main',
 
diff --git a/src/layouts/login-form.js b/src/layouts/login-form.js
index 539ff4df3c..439dc31d24 100644
--- a/src/layouts/login-form.js
+++ b/src/layouts/login-form.js
@@ -1,10 +1,12 @@
 import Polymer from '../polymer';
 
-import { authGetters } from '../util/home-assistant-js-instance';
+import hass from '../util/home-assistant-js-instance';
 
 import nuclearObserver from '../util/bound-nuclear-behavior';
 import validateAuth from '../util/validate-auth';
 
+const { authGetters } = hass;
+
 export default new Polymer({
   is: 'login-form',
 
diff --git a/src/layouts/partial-dev-call-service.js b/src/layouts/partial-dev-call-service.js
index 8fdf084969..5b6853f61e 100644
--- a/src/layouts/partial-dev-call-service.js
+++ b/src/layouts/partial-dev-call-service.js
@@ -1,14 +1,16 @@
-import {
-  reactor,
-  serviceActions,
-  serviceGetters,
-} from '../util/home-assistant-js-instance';
+import hass from '../util/home-assistant-js-instance';
 
 import Polymer from '../polymer';
 
 require('./partial-base');
 require('../components/services-list');
 
+const {
+  reactor,
+  serviceActions,
+  serviceGetters,
+} = hass;
+
 export default new Polymer({
   is: 'partial-dev-call-service',
 
diff --git a/src/layouts/partial-dev-fire-event.js b/src/layouts/partial-dev-fire-event.js
index fc2d05dca5..863e1d4923 100644
--- a/src/layouts/partial-dev-fire-event.js
+++ b/src/layouts/partial-dev-fire-event.js
@@ -1,10 +1,12 @@
-import { eventActions } from '../util/home-assistant-js-instance';
+import hass from '../util/home-assistant-js-instance';
 
 import Polymer from '../polymer';
 
 require('./partial-base');
 require('../components/events-list');
 
+const { eventActions } = hass;
+
 export default new Polymer({
   is: 'partial-dev-fire-event',
 
diff --git a/src/layouts/partial-dev-info.js b/src/layouts/partial-dev-info.js
index 1ae261e09c..2ca1900e0b 100644
--- a/src/layouts/partial-dev-info.js
+++ b/src/layouts/partial-dev-info.js
@@ -1,13 +1,15 @@
-import {
-  configGetters,
-  errorLogActions,
-} from '../util/home-assistant-js-instance';
+import hass from '../util/home-assistant-js-instance';
 
 import Polymer from '../polymer';
 import nuclearObserver from '../util/bound-nuclear-behavior';
 
 require('./partial-base');
 
+const {
+  configGetters,
+  errorLogActions,
+} = hass;
+
 export default new Polymer({
   is: 'partial-dev-info',
 
diff --git a/src/layouts/partial-dev-set-state.js b/src/layouts/partial-dev-set-state.js
index f7ca1488ee..7bd37f3e6e 100644
--- a/src/layouts/partial-dev-set-state.js
+++ b/src/layouts/partial-dev-set-state.js
@@ -1,10 +1,12 @@
-import { reactor, entityGetters, entityActions } from '../util/home-assistant-js-instance';
+import hass from '../util/home-assistant-js-instance';
 
 import Polymer from '../polymer';
 
 require('./partial-base');
 require('../components/entity-list');
 
+const { reactor, entityGetters, entityActions } = hass;
+
 export default new Polymer({
   is: 'partial-dev-set-state',
 
diff --git a/src/layouts/partial-history.js b/src/layouts/partial-history.js
index 7b2b5e7e72..f5681b1cbe 100644
--- a/src/layouts/partial-history.js
+++ b/src/layouts/partial-history.js
@@ -1,7 +1,4 @@
-import {
-  entityHistoryGetters,
-  entityHistoryActions,
-} from '../util/home-assistant-js-instance';
+import hass from '../util/home-assistant-js-instance';
 
 import Polymer from '../polymer';
 import nuclearObserver from '../util/bound-nuclear-behavior';
@@ -9,6 +6,11 @@ import nuclearObserver from '../util/bound-nuclear-behavior';
 require('./partial-base');
 require('../components/state-history-charts');
 
+const {
+  entityHistoryGetters,
+  entityHistoryActions,
+} = hass;
+
 export default new Polymer({
   is: 'partial-history',
 
diff --git a/src/layouts/partial-logbook.js b/src/layouts/partial-logbook.js
index f85588649a..27b0e340a2 100644
--- a/src/layouts/partial-logbook.js
+++ b/src/layouts/partial-logbook.js
@@ -1,4 +1,4 @@
-import { logbookGetters, logbookActions } from '../util/home-assistant-js-instance';
+import hass from '../util/home-assistant-js-instance';
 
 import Polymer from '../polymer';
 import nuclearObserver from '../util/bound-nuclear-behavior';
@@ -7,6 +7,8 @@ require('./partial-base');
 require('../components/ha-logbook');
 require('../components/loading-box');
 
+const { logbookGetters, logbookActions } = hass;
+
 export default new Polymer({
   is: 'partial-logbook',
 
diff --git a/src/layouts/partial-map.js b/src/layouts/partial-map.js
index 918aee308d..b7e7cabb40 100644
--- a/src/layouts/partial-map.js
+++ b/src/layouts/partial-map.js
@@ -1,13 +1,15 @@
-import {
-  configGetters,
-  entityGetters,
-} from '../util/home-assistant-js-instance';
+import hass from '../util/home-assistant-js-instance';
 
 import Polymer from '../polymer';
 import nuclearObserver from '../util/bound-nuclear-behavior';
 
 require('../components/entity/ha-entity-marker');
 
+const {
+  configGetters,
+  entityGetters,
+} = hass;
+
 window.L.Icon.Default.imagePath = '/static/images/leaflet';
 
 export default new Polymer({
diff --git a/src/layouts/partial-zone.js b/src/layouts/partial-zone.js
index 737e18f3bf..fc57c1375e 100644
--- a/src/layouts/partial-zone.js
+++ b/src/layouts/partial-zone.js
@@ -1,4 +1,12 @@
-import {
+import hass from '../util/home-assistant-js-instance';
+
+import Polymer from '../polymer';
+import nuclearObserver from '../util/bound-nuclear-behavior';
+
+require('./partial-base');
+require('../components/ha-zone-cards');
+
+const {
   configGetters,
   entityGetters,
   voiceGetters,
@@ -6,13 +14,7 @@ import {
   syncGetters,
   syncActions,
   voiceActions,
-} from '../util/home-assistant-js-instance';
-
-import Polymer from '../polymer';
-import nuclearObserver from '../util/bound-nuclear-behavior';
-
-require('./partial-base');
-require('../components/ha-zone-cards');
+} = hass;
 
 export default new Polymer({
   is: 'partial-zone',
@@ -67,6 +69,7 @@ export default new Polymer({
 
     columns: {
       type: Number,
+      value: 1,
     },
   },
 
diff --git a/src/managers/notification-manager.js b/src/managers/notification-manager.js
index 30636315e0..97da5ff8ba 100644
--- a/src/managers/notification-manager.js
+++ b/src/managers/notification-manager.js
@@ -1,8 +1,10 @@
-import { notificationGetters } from '../util/home-assistant-js-instance';
+import hass from '../util/home-assistant-js-instance';
 
 import Polymer from '../polymer';
 import nuclearObserver from '../util/bound-nuclear-behavior';
 
+const { notificationGetters } = hass;
+
 export default new Polymer({
   is: 'notification-manager',
 
diff --git a/src/more-infos/more-info-alarm_control_panel.js b/src/more-infos/more-info-alarm_control_panel.js
index 4476856f51..f60a85c1f7 100644
--- a/src/more-infos/more-info-alarm_control_panel.js
+++ b/src/more-infos/more-info-alarm_control_panel.js
@@ -1,7 +1,9 @@
-import { serviceActions } from '../util/home-assistant-js-instance';
+import hass from '../util/home-assistant-js-instance';
 
 import Polymer from '../polymer';
 
+const { serviceActions } = hass;
+
 export default new Polymer({
   is: 'more-info-alarm_control_panel',
   handleDisarmTap() {
diff --git a/src/more-infos/more-info-configurator.js b/src/more-infos/more-info-configurator.js
index ae26ace2c8..3ae61594b1 100644
--- a/src/more-infos/more-info-configurator.js
+++ b/src/more-infos/more-info-configurator.js
@@ -1,14 +1,16 @@
-import {
-  streamGetters,
-  syncActions,
-  serviceActions,
-} from '../util/home-assistant-js-instance';
+import hass from '../util/home-assistant-js-instance';
 
 import Polymer from '../polymer';
 import nuclearObserver from '../util/bound-nuclear-behavior';
 
 require('../components/loading-box');
 
+const {
+  streamGetters,
+  syncActions,
+  serviceActions,
+} = hass;
+
 export default new Polymer({
   is: 'more-info-configurator',
 
diff --git a/src/more-infos/more-info-group.js b/src/more-infos/more-info-group.js
index 853a996c71..e484d351b2 100644
--- a/src/more-infos/more-info-group.js
+++ b/src/more-infos/more-info-group.js
@@ -1,13 +1,15 @@
-import {
-  entityGetters,
-  moreInfoGetters,
-} from '../util/home-assistant-js-instance';
+import hass from '../util/home-assistant-js-instance';
 
 import Polymer from '../polymer';
 import nuclearObserver from '../util/bound-nuclear-behavior';
 
 require('../state-summary/state-card-content');
 
+const {
+  entityGetters,
+  moreInfoGetters,
+} = hass;
+
 export default new Polymer({
   is: 'more-info-group',
 
diff --git a/src/more-infos/more-info-light.js b/src/more-infos/more-info-light.js
index bf8b8c63ab..bed13985b6 100644
--- a/src/more-infos/more-info-light.js
+++ b/src/more-infos/more-info-light.js
@@ -1,10 +1,11 @@
-import { serviceActions } from '../util/home-assistant-js-instance';
+import hass from '../util/home-assistant-js-instance';
 
 import Polymer from '../polymer';
 import attributeClassNames from '../util/attribute-class-names';
 
 require('../components/ha-color-picker');
 
+const { serviceActions } = hass;
 const ATTRIBUTE_CLASSES = ['brightness', 'rgb_color', 'color_temp'];
 
 export default new Polymer({
diff --git a/src/more-infos/more-info-media_player.js b/src/more-infos/more-info-media_player.js
index f7abd86028..6889bbb984 100644
--- a/src/more-infos/more-info-media_player.js
+++ b/src/more-infos/more-info-media_player.js
@@ -1,8 +1,9 @@
-import { serviceActions } from '../util/home-assistant-js-instance';
+import hass from '../util/home-assistant-js-instance';
 
 import Polymer from '../polymer';
 import attributeClassNames from '../util/attribute-class-names';
 
+const { serviceActions } = hass;
 const ATTRIBUTE_CLASSES = ['volume_level'];
 
 export default new Polymer({
diff --git a/src/more-infos/more-info-sun.js b/src/more-infos/more-info-sun.js
index b733d3c107..1fa165ae0c 100644
--- a/src/more-infos/more-info-sun.js
+++ b/src/more-infos/more-info-sun.js
@@ -1,9 +1,9 @@
 import Polymer from '../polymer';
-import { util } from '../util/home-assistant-js-instance';
+import hass from '../util/home-assistant-js-instance';
 
 import formatTime from '../util/format-time';
 
-const { parseDateTime } = util;
+const { util: { parseDateTime } } = hass;
 
 export default new Polymer({
   is: 'more-info-sun',
diff --git a/src/more-infos/more-info-thermostat.js b/src/more-infos/more-info-thermostat.js
index 3a186e6071..8adf907333 100644
--- a/src/more-infos/more-info-thermostat.js
+++ b/src/more-infos/more-info-thermostat.js
@@ -1,8 +1,9 @@
-import { serviceActions } from '../util/home-assistant-js-instance';
+import hass from '../util/home-assistant-js-instance';
 
 import Polymer from '../polymer';
 import attributeClassNames from '../util/attribute-class-names';
 
+const { serviceActions } = hass;
 const ATTRIBUTE_CLASSES = ['away_mode'];
 
 export default new Polymer({
diff --git a/src/state-summary/state-card-rollershutter.js b/src/state-summary/state-card-rollershutter.js
index 3a08509e0a..4bc27b1a1d 100644
--- a/src/state-summary/state-card-rollershutter.js
+++ b/src/state-summary/state-card-rollershutter.js
@@ -1,9 +1,11 @@
-import { serviceActions } from '../util/home-assistant-js-instance';
+import hass from '../util/home-assistant-js-instance';
 
 import Polymer from '../polymer';
 
 require('../components/state-info');
 
+const { serviceActions } = hass;
+
 export default new Polymer({
   is: 'state-card-rollershutter',
 
diff --git a/src/state-summary/state-card-scene.js b/src/state-summary/state-card-scene.js
index e872877073..d80a26d1a1 100644
--- a/src/state-summary/state-card-scene.js
+++ b/src/state-summary/state-card-scene.js
@@ -1,8 +1,10 @@
 import Polymer from '../polymer';
-import { serviceActions } from '../util/home-assistant-js-instance';
+import hass from '../util/home-assistant-js-instance';
 
 require('../components/state-info.js');
 
+const { serviceActions } = hass;
+
 export default new Polymer({
   is: 'state-card-scene',
 
diff --git a/src/state-summary/state-card.js b/src/state-summary/state-card.js
index e1f82d33e1..b2254f7035 100644
--- a/src/state-summary/state-card.js
+++ b/src/state-summary/state-card.js
@@ -1,9 +1,11 @@
-import { moreInfoActions } from '../util/home-assistant-js-instance';
+import hass from '../util/home-assistant-js-instance';
 
 import Polymer from '../polymer';
 
 require('./state-card-content');
 
+const { moreInfoActions } = hass;
+
 export default new Polymer({
   is: 'state-card',
 
diff --git a/src/util/bound-nuclear-behavior.js b/src/util/bound-nuclear-behavior.js
index c272df7886..18944ca667 100644
--- a/src/util/bound-nuclear-behavior.js
+++ b/src/util/bound-nuclear-behavior.js
@@ -1,5 +1,5 @@
-import { reactor } from '../util/home-assistant-js-instance';
+import hass from './home-assistant-js-instance';
 
 import nuclearObserver from './nuclear-behavior';
 
-export default nuclearObserver(reactor);
+export default nuclearObserver(hass.reactor);
diff --git a/src/util/can-toggle.js b/src/util/can-toggle.js
index aad0f2c403..0346568b74 100644
--- a/src/util/can-toggle.js
+++ b/src/util/can-toggle.js
@@ -1,7 +1,9 @@
-import {
+import hass from './home-assistant-js-instance';
+
+const {
   reactor,
   serviceGetters,
-} from './home-assistant-js-instance';
+} = hass;
 
 // Return boolean if entity can be toggled.
 export default function canToggle(entityId) {
diff --git a/src/util/state-icon.js b/src/util/state-icon.js
index 80d537a24c..93956aaf6f 100644
--- a/src/util/state-icon.js
+++ b/src/util/state-icon.js
@@ -1,9 +1,8 @@
 import defaultIcon from './default-icon';
 import domainIcon from './domain-icon.js';
-import {
-  util,
-} from './home-assistant-js-instance';
+import hass from './home-assistant-js-instance';
 
+const { util: { temperatureUnits } } = hass;
 
 export default function stateIcon(state) {
   if (!state) {
@@ -15,8 +14,8 @@ export default function stateIcon(state) {
   const unit = state.attributes.unit_of_measurement;
 
   if (unit && state.domain === 'sensor') {
-    if (unit === util.temperatureUnits.UNIT_TEMP_C ||
-        unit === util.temperatureUnits.UNIT_TEMP_F) {
+    if (unit === temperatureUnits.UNIT_TEMP_C ||
+        unit === temperatureUnits.UNIT_TEMP_F) {
       return 'mdi:thermometer';
     }
   }
diff --git a/src/util/validate-auth.js b/src/util/validate-auth.js
index fdcd568b41..710c0b98bb 100644
--- a/src/util/validate-auth.js
+++ b/src/util/validate-auth.js
@@ -1,4 +1,6 @@
-import { authActions, localStoragePreferences } from '../util/home-assistant-js-instance';
+import hass from '../util/home-assistant-js-instance';
+
+const { authActions, localStoragePreferences } = hass;
 
 export default function(authToken, rememberAuth) {
   authActions.validate(authToken, {
diff --git a/webpack.config.js b/webpack.config.js
index c08e066614..839c1d7b18 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,3 +1,4 @@
+var path = require('path');
 var webpack = require("webpack");
 
 var definePlugin = new webpack.DefinePlugin({
@@ -19,7 +20,10 @@ module.exports = {
       {
         loader: 'babel-loader',
         test: /.js$/,
-        exclude: /node_modules\/(^home-assistant-js)/,
+        include: [
+          path.resolve(__dirname, 'src'),
+          path.resolve(__dirname, 'node_modules/home-assistant-js/src'),
+        ],
       },
     ],
   },

From eff286e7425f53750048a68506767c5bc2f3a985 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Sun, 13 Dec 2015 23:55:45 -0800
Subject: [PATCH 32/39] Fix lint issues

---
 src/home-assistant.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/home-assistant.js b/src/home-assistant.js
index 9375837412..4d735f2ecd 100644
--- a/src/home-assistant.js
+++ b/src/home-assistant.js
@@ -95,10 +95,6 @@ export default new Polymer({
       return;
     }
 
-    navigator.serviceWorker.register('./service_worker.js').then(reg => {
-      console.log('Service Worker registration succeeded.');
-    }).catch(error => {
-      console.log(`Service Worker registration failed: ${error}`);
-    });
+    navigator.serviceWorker.register('./service_worker.js');
   },
 });

From e19f3c5e34bc2f5e5bd2dcc1444bb569fb1c0c68 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Mon, 14 Dec 2015 23:52:06 -0800
Subject: [PATCH 33/39] Fix column layout

---
 src/components/ha-zone-cards.html | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/components/ha-zone-cards.html b/src/components/ha-zone-cards.html
index 1efd0cc06e..1d364ba63e 100644
--- a/src/components/ha-zone-cards.html
+++ b/src/components/ha-zone-cards.html
@@ -25,6 +25,7 @@
 
     .column {
       max-width: 500px;
+      overflow-x: hidden;
     }
 
     .zone-card {
@@ -41,6 +42,13 @@
         margin-left: 0;
       }
     }
+
+    @media (max-width: 599px) {
+      .column {
+        max-width: 600px;
+      }
+    }
+
   </style>
 
   <template>

From f3d3724df7d8a275d57d821e61a5ea4b08ebcc67 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus.schoutsen@mycase.com>
Date: Thu, 17 Dec 2015 19:25:46 -0800
Subject: [PATCH 34/39] Upgrade bower dependencies

---
 bower.json                                  | 6 +++---
 src/components/entity/ha-entity-toggle.html | 1 +
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/bower.json b/bower.json
index 4b47119b81..39519388e9 100644
--- a/bower.json
+++ b/bower.json
@@ -8,11 +8,11 @@
   "license": "MIT",
   "private": true,
   "devDependencies": {
-    "polymer": "Polymer/polymer#^1.2",
+    "polymer": "Polymer/polymer#~1.2.3",
     "pikaday": "1.4",
     "leaflet-map": "1.1.0",
-    "iron-elements": "PolymerElements/iron-elements#~1.0.4",
-    "paper-elements": "PolymerElements/paper-elements#~1.0.6",
+    "iron-elements": "PolymerElements/iron-elements#~1.0.7",
+    "paper-elements": "PolymerElements/paper-elements#~1.0.7",
     "google-apis": "GoogleWebComponents/google-apis#~1.1.3"
   }
 }
diff --git a/src/components/entity/ha-entity-toggle.html b/src/components/entity/ha-entity-toggle.html
index 28d5751274..34f747be41 100644
--- a/src/components/entity/ha-entity-toggle.html
+++ b/src/components/entity/ha-entity-toggle.html
@@ -6,6 +6,7 @@
     paper-toggle-button {
       cursor: pointer;
       margin-right: -14px;
+      --paper-toggle-button-label-spacing: 0;
     }
   </style>
   <template>

From 190911b2618052d56e32150b6c557b7a4f4b70e7 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus.schoutsen@mycase.com>
Date: Thu, 17 Dec 2015 19:41:26 -0800
Subject: [PATCH 35/39] Delay removing of init skeleton.

---
 src/home-assistant.js              | 6 ------
 src/layouts/home-assistant-main.js | 2 ++
 src/layouts/login-form.js          | 5 +++++
 src/util/remove-init-message.js    | 7 +++++++
 4 files changed, 14 insertions(+), 6 deletions(-)
 create mode 100644 src/util/remove-init-message.js

diff --git a/src/home-assistant.js b/src/home-assistant.js
index 4d735f2ecd..282d15d678 100644
--- a/src/home-assistant.js
+++ b/src/home-assistant.js
@@ -68,12 +68,6 @@ export default new Polymer({
     this.registerServiceWorker();
   },
 
-  attached() {
-    // remove the HTML init message
-    const initMsg = document.getElementById('init');
-    initMsg.parentElement.removeChild(initMsg);
-  },
-
   ready() {
     reactor.batch(() => {
       // if auth was given, tell the backend
diff --git a/src/layouts/home-assistant-main.js b/src/layouts/home-assistant-main.js
index 8408cbf967..84b1b1bb17 100644
--- a/src/layouts/home-assistant-main.js
+++ b/src/layouts/home-assistant-main.js
@@ -2,6 +2,7 @@ import Polymer from '../polymer';
 import hass from '../util/home-assistant-js-instance';
 
 import nuclearObserver from '../util/bound-nuclear-behavior';
+import removeInitMsg from '../util/remove-init-message';
 
 require('../components/ha-sidebar');
 require('../layouts/partial-zone');
@@ -113,6 +114,7 @@ export default new Polymer({
   },
 
   attached() {
+    removeInitMsg();
     startUrlSync();
   },
 
diff --git a/src/layouts/login-form.js b/src/layouts/login-form.js
index 439dc31d24..a6981f175b 100644
--- a/src/layouts/login-form.js
+++ b/src/layouts/login-form.js
@@ -4,6 +4,7 @@ import hass from '../util/home-assistant-js-instance';
 
 import nuclearObserver from '../util/bound-nuclear-behavior';
 import validateAuth from '../util/validate-auth';
+import removeInitMsg from '../util/remove-init-message';
 
 const { authGetters } = hass;
 
@@ -54,6 +55,10 @@ export default new Polymer({
     'validatingChanged(isValidating, isInvalid)',
   ],
 
+  attached() {
+    removeInitMsg();
+  },
+
   computeShowSpinner(forceShowLoading, isValidating) {
     return forceShowLoading || isValidating;
   },
diff --git a/src/util/remove-init-message.js b/src/util/remove-init-message.js
new file mode 100644
index 0000000000..2c80816fb4
--- /dev/null
+++ b/src/util/remove-init-message.js
@@ -0,0 +1,7 @@
+export default function removeInitMessage() {
+  // remove the HTML init message
+  const initMsg = document.getElementById('ha-init-skeleton');
+  if (initMsg) {
+    initMsg.parentElement.removeChild(initMsg);
+  }
+}

From 50aadaf880a9cb36bf144540171ff5fa029e9eaf Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus.schoutsen@mycase.com>
Date: Thu, 17 Dec 2015 23:30:24 -0800
Subject: [PATCH 36/39] Add template editor

---
 src/components/ha-sidebar.html        |  3 +
 src/layouts/home-assistant-main.html  |  4 ++
 src/layouts/home-assistant-main.js    |  6 ++
 src/layouts/partial-dev-info.html     |  2 -
 src/layouts/partial-dev-template.html | 71 ++++++++++++++++++++
 src/layouts/partial-dev-template.js   | 94 +++++++++++++++++++++++++++
 src/layouts/partial-zone.html         |  2 +-
 7 files changed, 179 insertions(+), 3 deletions(-)
 create mode 100644 src/layouts/partial-dev-template.html
 create mode 100644 src/layouts/partial-dev-template.js

diff --git a/src/components/ha-sidebar.html b/src/components/ha-sidebar.html
index d364163c8f..d88730b08f 100644
--- a/src/components/ha-sidebar.html
+++ b/src/components/ha-sidebar.html
@@ -113,6 +113,9 @@
           <paper-icon-button
             icon='mdi:nfc' data-panel='devEvent'
             on-click='handleDevClick'></paper-icon-button>
+          <paper-icon-button
+            icon='mdi:file-xml' data-panel='devTemplate'
+            on-click='handleDevClick'></paper-icon-button>
           <paper-icon-button
             icon='mdi:information-outline' data-panel='devInfo'
             on-click='handleDevClick'></paper-icon-button>
diff --git a/src/layouts/home-assistant-main.html b/src/layouts/home-assistant-main.html
index 01920bf39e..1e30f570df 100644
--- a/src/layouts/home-assistant-main.html
+++ b/src/layouts/home-assistant-main.html
@@ -8,6 +8,7 @@
 <link rel='import' href='../layouts/partial-dev-call-service.html'>
 <link rel='import' href='../layouts/partial-dev-fire-event.html'>
 <link rel='import' href='../layouts/partial-dev-set-state.html'>
+<link rel='import' href='../layouts/partial-dev-template.html'>
 <link rel='import' href='../layouts/partial-dev-info.html'>
 <link rel='import' href='../managers/notification-manager.html'>
 <link rel="import" href="../dialogs/more-info-dialog.html">
@@ -50,6 +51,9 @@
       <template is='dom-if' if='[[isSelectedDevState]]'>
         <partial-dev-set-state main narrow='[[narrow]]' show-menu='[[showSidebar]]'></partial-dev-set-state>
       </template>
+      <template is='dom-if' if='[[isSelectedDevTemplate]]'>
+        <partial-dev-template main narrow='[[narrow]]' show-menu='[[showSidebar]]'></partial-dev-template>
+      </template>
       <template is='dom-if' if='[[isSelectedDevInfo]]'>
         <partial-dev-info main narrow='[[narrow]]' show-menu='[[showSidebar]]'></partial-dev-info>
       </template>
diff --git a/src/layouts/home-assistant-main.js b/src/layouts/home-assistant-main.js
index 84b1b1bb17..1e4cf0c90c 100644
--- a/src/layouts/home-assistant-main.js
+++ b/src/layouts/home-assistant-main.js
@@ -12,6 +12,7 @@ require('../layouts/partial-map');
 require('../layouts/partial-dev-call-service');
 require('../layouts/partial-dev-fire-event');
 require('../layouts/partial-dev-set-state');
+require('../layouts/partial-dev-template');
 require('../layouts/partial-dev-info');
 require('../managers/notification-manager');
 require('../dialogs/more-info-dialog');
@@ -71,6 +72,11 @@ export default new Polymer({
       bindNuclear: navigationGetters.isActivePane('devState'),
     },
 
+    isSelectedDevTemplate: {
+      type: Boolean,
+      bindNuclear: navigationGetters.isActivePane('devTemplate'),
+    },
+
     isSelectedDevService: {
       type: Boolean,
       bindNuclear: navigationGetters.isActivePane('devService'),
diff --git a/src/layouts/partial-dev-info.html b/src/layouts/partial-dev-info.html
index b89d61d316..fc71d2ddac 100644
--- a/src/layouts/partial-dev-info.html
+++ b/src/layouts/partial-dev-info.html
@@ -4,8 +4,6 @@
 
 <link rel="import" href="./partial-base.html">
 
-<link rel="import" href="../components/services-list.html">
-
 <dom-module id="partial-dev-info">
   <style>
     .content {
diff --git a/src/layouts/partial-dev-template.html b/src/layouts/partial-dev-template.html
new file mode 100644
index 0000000000..2d85f96fc8
--- /dev/null
+++ b/src/layouts/partial-dev-template.html
@@ -0,0 +1,71 @@
+<link rel="import" href="../../bower_components/polymer/polymer.html">
+
+<link rel="import" href="../../bower_components/paper-input/paper-textarea.html">
+<link rel="import" href="../../bower_components/paper-spinner/paper-spinner.html">
+
+<link rel="import" href="./partial-base.html">
+
+<link rel="import" href="../components/services-list.html">
+
+<dom-module id="partial-dev-template">
+  <style>
+    .content {
+      margin-top: 64px;
+      padding: 16px;
+      background-color: white;
+      -ms-user-select: initial;
+      -webkit-user-select: initial;
+      -moz-user-select: initial;
+    }
+
+    .edit-pane {
+      margin-right: 16px;
+    }
+
+    .horizontal .edit-pane {
+      max-width: 50%;      
+    }
+
+    .render-pane {
+      position: relative;
+    }
+
+    .render-spinner {
+      position: absolute;
+      top: 8px;
+      right: 8px;
+    }
+
+    .rendered {
+      clear: both;
+      white-space: pre-wrap;
+    }
+
+    .rendered.error {
+      color: red;
+    }
+  </style>
+  <template>
+    <partial-base narrow="[[narrow]]" show-menu='[[showMenu]]'>
+      <span header-title>Template Editor</span>
+
+      <div class$='[[computeFormClasses(narrow)]]'>
+        <div class='edit-pane'>
+          <p>
+            Templates are rendered using the Jinja2 template engine with some Home Assistant specific extensions.
+          </p>
+            <ul>
+              <li><a href='http://jinja.pocoo.org/docs/dev/templates/' target='_blank'>Jinja2 tempate documentation</a></li>
+              <li><a href='https://home-assistant.io/getting-started/templating/' target='_blank'>Home Assistant template extensions</a></li>
+            </ul>
+          </p>
+          <paper-textarea label="Template" value='{{template}}'></paper-textarea>
+        </div>
+        <div class='render-pane'>
+          <paper-spinner class='render-spinner' active='[[rendering]]'></paper-spinner>
+          <pre class$='[[computeRenderedClasses(error)]]'>[[processed]]</pre>
+        </div>
+      </div>
+    </partial-base>
+  </template>
+</dom-module>
diff --git a/src/layouts/partial-dev-template.js b/src/layouts/partial-dev-template.js
new file mode 100644
index 0000000000..eaed2ee36c
--- /dev/null
+++ b/src/layouts/partial-dev-template.js
@@ -0,0 +1,94 @@
+import hass from '../util/home-assistant-js-instance';
+
+import Polymer from '../polymer';
+import nuclearObserver from '../util/bound-nuclear-behavior';
+
+require('./partial-base');
+
+const {
+  templateActions,
+} = hass;
+
+export default new Polymer({
+  is: 'partial-dev-template',
+
+  behaviors: [nuclearObserver],
+
+  properties: {
+    narrow: {
+      type: Boolean,
+      value: false,
+    },
+
+    showMenu: {
+      type: Boolean,
+      value: false,
+    },
+
+    error: {
+      type: Boolean,
+      value: false,
+    },
+
+    rendering: {
+      type: Boolean,
+      value: false,
+    },
+
+    template: {
+      type: String,
+      value: '{%- if is_state("device_tracker.paulus", "home") and \n' +
+             '       is_state("device_tracker.anne_therese", "home") -%}\n' +
+             '\n' +
+             '  You are both home, you silly\n' +
+             '\n' +
+             '{%- else -%}\n' +
+             '\n' +
+             '  Anne Therese is at {{ states("device_tracker.anne_therese") }} and ' +
+             'Paulus is at {{ states("device_tracker.paulus") }}\n' +
+             '\n' +
+             '{%- endif %}\n' +
+             '\n' +
+             'For loop example:\n' +
+             '\n' +
+             '{% for state in states.sensor -%}\n' +
+             '  {%- if loop.first %}The {% elif loop.last %} and the {% else %}, the {% endif -%}\n' +
+             '  {{ state.name | lower }} is {{state.state}} {{- state.attributes.unit_of_measurement}}\n' +
+             '{%- endfor -%}.',
+      observer: 'templateChanged',
+    },
+
+    processed: {
+      type: String,
+      value: '',
+    },
+  },
+
+  computeFormClasses(narrow) {
+    return 'content fit layout ' + (narrow ? 'vertical' : 'horizontal');
+  },
+
+  computeRenderedClasses(error) {
+    return error ? 'error rendered' : 'rendered';
+  },
+
+  templateChanged() {
+    if (this.error) {
+      this.error = false;
+    }
+    this.debounce('render-template', this.renderTemplate, 500);
+  },
+
+  renderTemplate() {
+    this.rendering = true;
+
+    templateActions.render(this.template).then(processed => {
+      this.processed = processed;
+      this.rendering = false;
+    }, error => {
+      this.processed = error.message;
+      this.error = true;
+      this.rendering = false;
+    });
+  },
+});
diff --git a/src/layouts/partial-zone.html b/src/layouts/partial-zone.html
index ad8d7db5f3..aa20e2d09b 100644
--- a/src/layouts/partial-zone.html
+++ b/src/layouts/partial-zone.html
@@ -31,7 +31,7 @@
           on-click="handleListenClick"></paper-icon-button>
       </paper-toolbar>
 
-      <div class='content fit'>
+      <div class='fit'>
         <ha-zone-cards
           show-introduction='[[computeShowIntroduction(introductionLoaded, states)]]'
           states='[[states]]' columns='[[columns]]'></ha-zone-cards>

From 4da3ecaad401f556fda80706ab383ee4534e1ee0 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Sat, 2 Jan 2016 12:49:16 -0800
Subject: [PATCH 37/39] Remove CSS workaround for fixed bug in paper-toggle

---
 src/components/entity/ha-entity-toggle.html | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/entity/ha-entity-toggle.html b/src/components/entity/ha-entity-toggle.html
index 34f747be41..0c0d72ef9d 100644
--- a/src/components/entity/ha-entity-toggle.html
+++ b/src/components/entity/ha-entity-toggle.html
@@ -5,7 +5,6 @@
   <style>
     paper-toggle-button {
       cursor: pointer;
-      margin-right: -14px;
       --paper-toggle-button-label-spacing: 0;
     }
   </style>

From a604a2f527b3f485d347c75631d46c3390e4b2b4 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Sat, 2 Jan 2016 12:49:31 -0800
Subject: [PATCH 38/39] Debounce color picker calls.

---
 src/more-infos/more-info-light.js | 33 ++++++++++++++++++++++++++-----
 1 file changed, 28 insertions(+), 5 deletions(-)

diff --git a/src/more-infos/more-info-light.js b/src/more-infos/more-info-light.js
index bed13985b6..0801234a1e 100644
--- a/src/more-infos/more-info-light.js
+++ b/src/more-infos/more-info-light.js
@@ -8,6 +8,13 @@ require('../components/ha-color-picker');
 const { serviceActions } = hass;
 const ATTRIBUTE_CLASSES = ['brightness', 'rgb_color', 'color_temp'];
 
+function pickColor(entityId, color) {
+  serviceActions.callService('light', 'turn_on', {
+    entity_id: entityId,
+    rgb_color: [color.r, color.g, color.b],
+  });
+}
+
 export default new Polymer({
   is: 'more-info-light',
 
@@ -67,13 +74,29 @@ export default new Polymer({
     });
   },
 
+  /**
+   * Called when a new color has been picked. We will not respond to every
+   * color pick event but have a pause between requests.
+   */
   colorPicked(ev) {
-    const color = ev.detail.rgb;
+    if (this.skipColorPicked) {
+      this.colorChanged = true;
+      return;
+    }
 
-    serviceActions.callService('light', 'turn_on', {
-      entity_id: this.stateObj.entityId,
-      rgb_color: [color.r, color.g, color.b],
-    });
+    this.color = ev.detail.rgb;
+
+    pickColor(this.stateObj.entityId, this.color);
+
+    this.colorChanged = false;
+    this.skipColorPicked = true;
+
+    this.colorDebounce = setTimeout(() => {
+      if (this.colorChanged) {
+        pickColor(this.stateObj.entityId, this.color);
+      }
+      this.skipColorPicked = false;
+    }, 500);
   },
 
 });

From 78c348cb7b0a60ba015e3b652e538155d3e94a11 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Sat, 2 Jan 2016 12:49:40 -0800
Subject: [PATCH 39/39] Fix touch events color picker

---
 src/components/ha-color-picker.js   | 138 ++++++++++++----------------
 src/more-infos/more-info-light.html |   5 +-
 2 files changed, 64 insertions(+), 79 deletions(-)

diff --git a/src/components/ha-color-picker.js b/src/components/ha-color-picker.js
index 7fc5f156c2..21532bb560 100644
--- a/src/components/ha-color-picker.js
+++ b/src/components/ha-color-picker.js
@@ -7,35 +7,21 @@
  */
 import Polymer from '../polymer';
 
-/**
- * given red, green, blue values, return the equivalent hexidecimal value
- * base source: http://stackoverflow.com/a/5624139
- */
-function componentToHex(comp) {
-  const hex = comp.toString(16);
-  return hex.length === 1 ? '0' + hex : hex;
-}
-
-function rgbToHex(color) {
-  return '#' + componentToHex(color.r) + componentToHex(color.g) +
-         componentToHex(color.b);
-}
-
 export default new Polymer({
   is: 'ha-color-picker',
 
   properties: {
-    width: {
-      type: Number,
-      value: 300,
-    },
-    height: {
-      type: Number,
-      value: 300,
-    },
     color: {
       type: Object,
     },
+
+    width: {
+      type: Number,
+    },
+
+    height: {
+      type: Number,
+    },
   },
 
   listeners: {
@@ -64,56 +50,45 @@ export default new Polymer({
   },
 
   onTouchMove(ev) {
-    const touch = ev.touches[0];
-    this.onColorSelect(ev, {x: touch.clientX, y: touch.clientY});
+    if (!this.mouseMoveIsThrottled) {
+      return;
+    }
+    this.mouseMoveIsThrottled = false;
+    this.processColorSelect(ev.touches[0]);
+    this.async(() => this.mouseMoveIsThrottled = true, 100);
   },
 
   onMouseMove(ev) {
-    ev.preventDefault();
-    if (this.mouseMoveIsThrottled) {
-      this.mouseMoveIsThrottled = false;
-      this.onColorSelect(ev);
-      this.async(() => this.mouseMoveIsThrottled = true, 100);
+    if (!this.mouseMoveIsThrottled) {
+      return;
     }
+    this.mouseMoveIsThrottled = false;
+    this.processColorSelect(ev);
+    this.async(() => this.mouseMoveIsThrottled = true, 100);
   },
 
-  onColorSelect(ev, coords) {
-    if (this.context) {
-      const colorCoords = coords || this.relativeMouseCoordinates(ev);
-      const data = this.context.getImageData(colorCoords.x, colorCoords.y, 1, 1).data;
+  processColorSelect(ev) {
+    const rect = this.canvas.getBoundingClientRect();
 
-      this.setColor({r: data[0], g: data[1], b: data[2]});
+    // boundary check because people can move off-canvas.
+    if (ev.clientX < rect.left || ev.clientX >= rect.left + rect.width ||
+        ev.clientY < rect.top || ev.clientY >= rect.top + rect.height) {
+      return;
     }
+
+    this.onColorSelect(ev.clientX - rect.left, ev.clientY - rect.top);
+  },
+
+  onColorSelect(x, y) {
+    const data = this.context.getImageData(x, y, 1, 1).data;
+
+    this.setColor({r: data[0], g: data[1], b: data[2]});
   },
 
   setColor(rgb) {
-    // save calculated color
-    this.color = {hex: rgbToHex(rgb), rgb: rgb};
+    this.color = rgb;
 
-    this.fire('colorselected', {
-      rgb: this.color.rgb,
-      hex: this.color.hex,
-    });
-  },
-
-  /**
-   * given a mouse click event, return x,y coordinates relative to the clicked target
-   * @returns object with x, y values
-   */
-  relativeMouseCoordinates(ev) {
-    let xCoord = 0;
-    let yCoord = 0;
-
-    if (this.canvas) {
-      const rect = this.canvas.getBoundingClientRect();
-      xCoord = ev.clientX - rect.left;
-      yCoord = ev.clientY - rect.top;
-    }
-
-    return {
-      x: xCoord,
-      y: yCoord,
-    };
+    this.fire('colorselected', {rgb: this.color});
   },
 
   ready() {
@@ -122,25 +97,34 @@ export default new Polymer({
     this.canvas = this.children[0];
     this.context = this.canvas.getContext('2d');
 
-    const colorGradient = this.context.createLinearGradient(0, 0, this.width, 0);
-    colorGradient.addColorStop(0, 'rgb(255,0,0)');
-    colorGradient.addColorStop(0.16, 'rgb(255,0,255)');
-    colorGradient.addColorStop(0.32, 'rgb(0,0,255)');
-    colorGradient.addColorStop(0.48, 'rgb(0,255,255)');
-    colorGradient.addColorStop(0.64, 'rgb(0,255,0)');
-    colorGradient.addColorStop(0.80, 'rgb(255,255,0)');
-    colorGradient.addColorStop(1, 'rgb(255,0,0)');
-    this.context.fillStyle = colorGradient;
-    this.context.fillRect(0, 0, this.width, this.height);
+    this.debounce('drawGradient', () => {
+      const style = getComputedStyle(this);
+      const width = parseInt(style.width, 10);
+      const height = parseInt(style.height, 10);
 
-    const bwGradient = this.context.createLinearGradient(0, 0, 0, this.height);
-    bwGradient.addColorStop(0, 'rgba(255,255,255,1)');
-    bwGradient.addColorStop(0.5, 'rgba(255,255,255,0)');
-    bwGradient.addColorStop(0.5, 'rgba(0,0,0,0)');
-    bwGradient.addColorStop(1, 'rgba(0,0,0,1)');
+      this.width = width;
+      this.height = height;
 
-    this.context.fillStyle = bwGradient;
-    this.context.fillRect(0, 0, this.width, this.height);
+      const colorGradient = this.context.createLinearGradient(0, 0, width, 0);
+      colorGradient.addColorStop(0, 'rgb(255,0,0)');
+      colorGradient.addColorStop(0.16, 'rgb(255,0,255)');
+      colorGradient.addColorStop(0.32, 'rgb(0,0,255)');
+      colorGradient.addColorStop(0.48, 'rgb(0,255,255)');
+      colorGradient.addColorStop(0.64, 'rgb(0,255,0)');
+      colorGradient.addColorStop(0.80, 'rgb(255,255,0)');
+      colorGradient.addColorStop(1, 'rgb(255,0,0)');
+      this.context.fillStyle = colorGradient;
+      this.context.fillRect(0, 0, width, height);
+
+      const bwGradient = this.context.createLinearGradient(0, 0, 0, height);
+      bwGradient.addColorStop(0, 'rgba(255,255,255,1)');
+      bwGradient.addColorStop(0.5, 'rgba(255,255,255,0)');
+      bwGradient.addColorStop(0.5, 'rgba(0,0,0,0)');
+      bwGradient.addColorStop(1, 'rgba(0,0,0,1)');
+
+      this.context.fillStyle = bwGradient;
+      this.context.fillRect(0, 0, width, height);
+    }, 100);
   },
 
 });
diff --git a/src/more-infos/more-info-light.html b/src/more-infos/more-info-light.html
index 1db09a1653..2afbd888e0 100644
--- a/src/more-infos/more-info-light.html
+++ b/src/more-infos/more-info-light.html
@@ -15,7 +15,8 @@
 
     ha-color-picker {
       display: block;
-      width: 350px;
+      max-width: 350px;
+      height: 200px;
       margin: 0 auto;
 
       max-height: 0px;
@@ -52,7 +53,7 @@
         </paper-slider>
       </div>
 
-      <ha-color-picker on-colorselected='colorPicked' width='350' height='200'>
+      <ha-color-picker on-colorselected='colorPicked'>
       </ha-color-picker>
     </div>
   </template>