Polymer .9: Convert more info contents

homeassistant/components/frontend/www_static/polymer/bower.json

@@ -33,14 +33,14 @@
     "paper-drawer-panel": "PolymerElements/paper-drawer-panel#^0.9",
     "google-apis": "GoogleWebComponents/google-apis#0.8-preview",
     "moment": "^2.10.3",
-    "layout": "Polymer/layout"
+    "layout": "Polymer/layout",
+    "color-picker-element": "~0.0.3"
   },
   "stillUpgrading": {
     "core-tooltip": "Polymer/core-tooltip#~0.9",
     "core-item": "Polymer/core-item#~0.9",
     "core-style": "polymer/core-style#~0.9",
     "paper-dropdown": "PolymerElements/paper-dropdown#~0.9",
-    "color-picker-element": "~0.0.2",
     "google-apis": "GoogleWebComponents/google-apis#~0.4.4",
     "core-scroll-header-panel": "polymer/core-scroll-header-panel#~0.9",
     "paper-menu-button": "PolymerElements/paper-menu-button#~0.9"

homeassistant/components/frontend/www_static/polymer/cards/state-card-configurator.html

@@ -1,15 +1,15 @@
-<link rel="import" href="../bower_components/polymer/polymer.html">
+<link rel='import' href='../bower_components/polymer/polymer.html'>
 
-<link rel="import" href="./state-card-display.html">
+<link rel='import' href='./state-card-display.html'>
-<link rel="import" href="../components/state-info.html">
+<link rel='import' href='../components/state-info.html'>
 
-<dom-module id="state-card-configurator">
+<dom-module id='state-card-configurator'>
   <template>
-    <state-card-display state-obj="[[stateObj]]"></state-card-display>
+    <state-card-display state-obj='[[stateObj]]'></state-card-display>
 
     <!-- pre load the image so the dialog is rendered the proper size -->
-    <template if="[[stateObj.attributes.description_image]]">
+    <template is='dom-if' if='[[stateObj.attributes.description_image]]'>
-      <img hidden src="[[stateObj.attributes.description_image]]" />
+      <img hidden src='[[stateObj.attributes.description_image]]' />
     </template>
   </template>
 </dom-module>

homeassistant/components/frontend/www_static/polymer/home-assistant.html

@@ -1,5 +1,5 @@
 <link rel='import' href='bower_components/polymer/polymer.html'>
-<!-- <link rel='import' href='bower_components/font-roboto/roboto.html'> -->
+<link rel='import' href='bower_components/font-roboto/roboto.html'>
 
 <link rel='import' href='resources/home-assistant-js.html'>
 <link rel='import' href='resources/home-assistant-icons.html'>

homeassistant/components/frontend/www_static/polymer/more-infos/more-info-configurator.html

@@ -1,9 +1,9 @@
-<link rel="import" href="../bower_components/polymer/polymer.html">
+<link rel='import' href='../bower_components/polymer/polymer.html'>
-<link rel="import" href="../bower_components/paper-button/paper-button.html">
+<link rel='import' href='../bower_components/paper-button/paper-button.html'>
-<link rel="import" href="../bower_components/paper-spinner/paper-spinner.html">
 
-<polymer-element name="more-info-configurator" attributes="stateObj">
+<link rel='import' href='../components/loading-box.html'>
-<template>
+
+<dom-module id='more-info-configurator'>
   <style>
     p {
       margin: 8px 0;
@@ -25,62 +25,78 @@
       text-align: center;
       height: 41px;
     }
-
-    p.submit paper-spinner {
-      margin-right: 16px;
-    }
-
-    p.submit span {
-      display: inline-block;
-      vertical-align: top;
-      margin-top: 6px;
-    }
   </style>
+  <template>
+    <div class='layout vertical'>
+      <template is='dom-if' if='[[isConfigurable]]'>
 
-  <div layout vertical>
+        <p hidden$='[[!stateObj.attributes.description]]'>[[stateObj.attributes.description]]</p>
-    <template if="{{stateObj.state == 'configure'}}">
 
-      <p hidden?="{{!stateObj.attributes.description}}">
+        <p class='error' hidden$='[[!stateObj.attributes.errors]]'>[[stateObj.attributes.errors]]</p>
-        {{stateObj.attributes.description}}
-      </p>
 
-      <p class='error' hidden?="{{!stateObj.attributes.errors}}">
+        <p class='center' hidden$='[[!stateObj.attributes.description_image]]'>
-        {{stateObj.attributes.errors}}
+          <img src='[[stateObj.attributes.description_image]]' />
-      </p>
-
-      <p class='center' hidden?="{{!stateObj.attributes.description_image}}">
-        <img src='{{stateObj.attributes.description_image}}' />
         </p>
 
         <p class='submit'>
-        <paper-button raised on-click="{{submitClicked}}"
+          <paper-button raised on-click='submitClicked'
-                      hidden?="{{action !== 'display'}}">
+                        hidden$='[[isConfiguring]]'>[[submitCaption]]</paper-button>
-          {{stateObj.attributes.submit_caption || "Set configuration"}}
-        </paper-button>
 
-        <span hidden?="{{action !== 'configuring'}}">
+          <loading-box hidden$='[[!isConfiguring]]'>Configuring</loading-box>
-          <paper-spinner active="true"></paper-spinner><span>Configuring…</span>
-        </span>
         </p>
 
       </template>
     </div>
   </template>
+</dom-module>
+
 <script>
-  var storeListenerMixIn = window.hass.storeListenerMixIn;
+(function() {
   var syncActions = window.hass.syncActions;
   var serviceActions = window.hass.serviceActions;
 
-  Polymer(Polymer.mixin({
+  Polymer({
-    action: "display",
+    is: 'more-info-configurator',
-    isStreaming: false,
 
-    attached: function() {
+    behaviors: [StoreListenerBehavior],
-      this.listenToStores(true);
+
+    properties: {
+      stateObj: {
+        type: Object,
       },
 
-    detached: function() {
+      action: {
-      this.stopListeningToStores();
+        type: String,
+        value: 'display',
+      },
+
+      isStreaming: {
+        type: Boolean,
+        value: false,
+      },
+
+      isConfigurable: {
+        type: Boolean,
+        computed: 'computeIsConfigurable(stateObj)',
+      },
+
+      isConfiguring: {
+        type: Boolean,
+        value: false,
+      },
+
+      submitCaption: {
+        type: String,
+        computed: 'computeSubmitCaption(stateObj)',
+      },
+    },
+
+    computeIsConfigurable: function(stateObj) {
+      return stateObj.state == 'configure';
+    },
+
+    computeSubmitCaption: function(stateObj) {
+      return stateObj.attributes.submit_caption || 'Set configuration';
     },
 
     streamStoreChanged: function(streamStore) {
@@ -88,15 +104,15 @@
     },
 
     submitClicked: function() {
-      this.action = "configuring";
+      this.isConfiguring = true;
+
       var data = {
         configure_id: this.stateObj.attributes.configure_id
       };
 
       serviceActions.callService('configurator', 'configure', data).then(
-
         function() {
-          this.action = 'display';
+          this.isConfiguring = false;
 
           if (!this.isStreaming) {
             syncActions.fetchAll();
@@ -104,9 +120,9 @@
         }.bind(this),
 
         function() {
-          this.action = 'display';
+          this.isConfiguring = false;
         }.bind(this));
     },
-  }, storeListenerMixIn));
+  });
+})();
 </script>
-</polymer-element>

homeassistant/components/frontend/www_static/polymer/more-infos/more-info-content.html

@@ -1,14 +1,14 @@
-<link rel="import" href="../bower_components/polymer/polymer.html">
+<link rel='import' href='../bower_components/polymer/polymer.html'>
 
-<link rel="import" href="more-info-default.html">
+<link rel='import' href='more-info-default.html'>
-<!-- <link rel="import" href="more-info-light.html">
+<link rel='import' href='more-info-group.html'>
-<link rel="import" href="more-info-group.html">
+<link rel='import' href='more-info-sun.html'>
-<link rel="import" href="more-info-sun.html">
+<link rel='import' href='more-info-configurator.html'>
-<link rel="import" href="more-info-configurator.html">
+<link rel='import' href='more-info-thermostat.html'>
-<link rel="import" href="more-info-thermostat.html">
+<link rel='import' href='more-info-script.html'>
-<link rel="import" href="more-info-script.html"> -->
+<link rel='import' href='more-info-light.html'>
 
-<dom-module id="more-info-content">
+<dom-module id='more-info-content'>
   <style>
     :host {
       display: block;
@@ -56,23 +56,22 @@
 
     stateObjChanged: function(newVal, oldVal) {
       var root = Polymer.dom(this);
+      var newMoreInfoType;
 
-      if (!newVal) {
+      if (!newVal || !(newMoreInfoType = uiUtil.stateMoreInfoType(newVal))) {
         if (root.lastChild) {
           root.removeChild(root.lastChild);
         }
         return;
       }
 
-      var newMoreInfoType = uiUtil.stateMoreInfoType(newVal);
-      newMoreInfoType = 'default';
-
       if (!oldVal || uiUtil.stateMoreInfoType(oldVal) != newMoreInfoType) {
+
         if (root.lastChild) {
           root.removeChild(root.lastChild);
         }
 
-        var moreInfo = document.createElement("more-info-" + newMoreInfoType);
+        var moreInfo = document.createElement('more-info-' + newMoreInfoType);
         moreInfo.stateObj = newVal;
         moreInfo.dialogOpen = this.dialogOpen;
         root.appendChild(moreInfo);
@@ -85,7 +84,7 @@
       }
 
       this.classNames = Object.keys(newVal.attributes).map(
-        function(key) { return "has-" + key; }).join(' ');
+        function(key) { return 'has-' + key; }).join(' ');
     },
   });
 })();

homeassistant/components/frontend/www_static/polymer/more-infos/more-info-default.html

@@ -6,7 +6,6 @@
       max-width: 200px;
     }
   </style>
-  <!-- <core-style ref='ha-key-value-table'></core-style> -->
   <template>
     <div class='layout vertical'>
       <template is='dom-repeat' items="[[getAttributes(stateObj)]]" as="attribute">

homeassistant/components/frontend/www_static/polymer/more-infos/more-info-group.html

@@ -2,8 +2,7 @@
 
 <link rel="import" href="../cards/state-card-content.html">
 
-<polymer-element name="more-info-group" attributes="stateObj">
+<dom-module id="more-info-group">
-<template>
   <style>
     .child-card {
       margin-bottom: 8px;
@@ -13,37 +12,44 @@
       margin-bottom: 0;
     }
   </style>
+  <template>
+    <template is='dom-repeat' items="[[states]]" as='state'>
+      <div class='child-card'>
+        <state-card-content state-obj="[[state]]"></state-card-content>
+      </div>
+    </template>
+  </template>
+</dom-module>
 
-  <template repeat="{{states as state}}">
-    <state-card-content stateObj="{{state}}" class='child-card'>
-    </state-card-content>
-  </template>
-</template>
 <script>
-var storeListenerMixIn = window.hass.storeListenerMixIn;
+(function() {
   var stateStore = window.hass.stateStore;
 
-Polymer(Polymer.mixin({
+  Polymer({
-  attached: function() {
+    is: 'more-info-group',
-    this.listenToStores(true);
+
+    behaviors: [StoreListenerBehavior],
+
+    properties: {
+      stateObj: {
+        type: Object,
+        observer: 'updateStates',
       },
 
-  detached: function() {
+      states: {
-    this.stopListeningToStores();
+        type: Array,
+        value: [],
+      },
     },
 
     stateStoreChanged: function() {
       this.updateStates();
     },
 
-  stateObjChanged: function() {
-    this.updateStates();
-  },
-
     updateStates: function() {
       this.states = this.stateObj && this.stateObj.attributes.entity_id ?
         stateStore.gets(this.stateObj.attributes.entity_id).toArray() : [];
     },
-}, storeListenerMixIn));
+  });
+})();
 </script>
-</polymer-element>

homeassistant/components/frontend/www_static/polymer/more-infos/more-info-light.html

@@ -1,10 +1,9 @@
-<link rel="import" href="../bower_components/polymer/polymer.html">
+<link rel='import' href='../bower_components/polymer/polymer.html'>
-<link rel="import" href="../bower_components/paper-slider/paper-slider.html">
+<link rel='import' href='../bower_components/paper-slider/paper-slider.html'>
 
-<link rel="import" href="../bower_components/color-picker-element/dist/color-picker.html">
+<link rel='import' href='../bower_components/color-picker-element/dist/color-picker.html'>
 
-<polymer-element name="more-info-light" attributes="stateObj">
+<dom-module id='more-info-light'>
-<template>
   <style>
     .brightness {
       margin-bottom: 8px;
@@ -29,63 +28,66 @@
       transition: max-height .5s ease-in .3s;
     }
 
-    :host-context(.has-brightness) .brightness {
+    /*:host-context(.has-brightness)*/ .brightness {
       max-height: 500px;
     }
 
-    :host-context(.has-xy_color) color-picker {
+    /*:host-context(.has-xy_color)*/ color-picker {
       max-height: 500px;
     }
-
   </style>
+  <template>
     <div>
       <div class='brightness'>
         <div center horizontal layout>
           <div>Brightness</div>
           <paper-slider
-          max="255" flex id='brightness' value='{{brightnessSliderValue}}'
+            max='255' flex id='brightness' value='{{brightnessSliderValue}}'
-          on-change="{{brightnessSliderChanged}}">
+            on-change='brightnessSliderChanged'>
           </paper-slider>
         </div>
       </div>
 
-    <color-picker id="colorpicker" width="350" height="200">
+      <color-picker on-colorselected='colorPicked' width='350' height='200'>
       </color-picker>
     </div>
   </template>
+</dom-module>
+
 <script>
+(function() {
   var serviceActions = window.hass.serviceActions;
 
   Polymer({
-  brightnessSliderValue: 0,
+    is: 'more-info-light',
 
-  observe: {
+    properties: {
-    'stateObj.attributes.brightness': 'stateObjBrightnessChanged',
+      stateObj: {
+        type: Object,
+        observer: 'stateObjChanged',
       },
 
-  stateObjChanged: function(oldVal, newVal) {
+      brightnessSliderValue: {
+        type: Number,
+        value: 0,
+      }
+    },
+
+    stateObjChanged: function(newVal, oldVal) {
       if (newVal && newVal.state === 'on') {
         this.brightnessSliderValue = newVal.attributes.brightness;
       }
     },
 
-  stateObjBrightnessChanged: function(oldVal, newVal) {
+    brightnessSliderChanged: function(ev) {
-    this.brightnessSliderValue = newVal;
+      var bri = parseInt(ev.target.value);
-  },
-
-  domReady: function() {
-    this.$.colorpicker.addEventListener('colorselected', this.colorPicked.bind(this));
-  },
-
-  brightnessSliderChanged: function(ev, details, target) {
-    var bri = parseInt(target.value);
 
       if(isNaN(bri)) return;
 
       if(bri === 0) {
         serviceActions.callTurnOff(this.stateObj.entityId);
       } else {
-      serviceActions.callService("light", "turn_on", {
+        serviceActions.callService('light', 'turn_on', {
           entity_id: this.stateObj.entityId,
           brightness: bri
         });
@@ -95,12 +97,12 @@ Polymer({
     colorPicked: function(ev) {
       var color = ev.detail.rgb;
 
-    serviceActions.callService("light", "turn_on", {
+      serviceActions.callService('light', 'turn_on', {
         entity_id: this.stateObj.entityId,
         rgb_color: [color.r, color.g, color.b]
       });
     }
 
   });
+})();
 </script>
-</polymer-element>

homeassistant/components/frontend/www_static/polymer/more-infos/more-info-script.html

@@ -1,22 +1,26 @@
-<link rel="import" href="../bower_components/polymer/polymer.html">
+<link rel='import' href='../bower_components/polymer/polymer.html'>
-<link rel="import" href="../bower_components/core-style/core-style.html">
 
-<polymer-element name="more-info-script" attributes="stateObj" noscript>
+<dom-module id='more-info-script'>
   <template>
-  <core-style ref='ha-key-value-table'></core-style>
+    <div class='layout vertical'>
-  <style>
+      <div class='data-entry layout justified horizontal'>
-    .data-entry .value {
-      max-width: 200px;
-    }
-  </style>
-
-  <div layout vertical>
-    <div layout justified horizontal class='data-entry'>
         <div class='key'>Last Action</div>
-      <div class='value'>
+        <div class='value'>[[stateObj.attributes.last_action]]</div>
-        {{stateObj.attributes.last_action}}
-      </div>
       </div>
     </div>
   </template>
-</polymer-element>
+</dom-module>
+
+<script>
+(function() {
+  Polymer({
+    is: 'more-info-script',
+
+    properties: {
+      stateObj: {
+        type: Object,
+      },
+    },
+  });
+})();
+</script>

homeassistant/components/frontend/www_static/polymer/more-infos/more-info-sun.html

@@ -1,53 +1,71 @@
 <link rel="import" href="../bower_components/polymer/polymer.html">
-<link rel="import" href="../bower_components/core-style/core-style.html">
 
 <link rel="import" href="../components/relative-ha-datetime.html">
 
-<polymer-element name="more-info-sun" attributes="stateObj">
+<dom-module id="more-info-sun">
   <template>
-  <core-style ref='ha-key-value-table'></core-style>
+    <div class='data-entry layout justified horizontal' id='rising'>
-
-  <div layout vertical id='sunData'>
-
-    <div layout justified horizontal class='data-entry' id='rising'>
       <div class='key'>
-        Rising <relative-ha-datetime datetimeObj="{{rising}}"></relative-ha-datetime>
+        Rising <relative-ha-datetime datetime-obj="[[risingDate]]"></relative-ha-datetime>
-      </div>
-      <div class='value'>
-        {{rising | formatTime}}
       </div>
+      <div class='value'>[[risingTime]]</div>
     </div>
 
-    <div layout justified horizontal class='data-entry' id='setting'>
+    <div class='data-entry layout justified horizontal' id='setting'>
       <div class='key'>
-        Setting <relative-ha-datetime datetimeObj="{{setting}}"></relative-ha-datetime>
+        Setting <relative-ha-datetime datetime-obj="[[settingDate]]"></relative-ha-datetime>
       </div>
-      <div class='value'>
+      <div class='value'>[[settingTime]]</div>
-        {{setting | formatTime}}
-      </div>
-    </div>
-
     </div>
   </template>
+</dom-module>
+
 <script>
 (function() {
   var parseDateTime = window.hass.util.parseDateTime;
+  var formatTime = window.hass.uiUtil.formatTime;
 
   Polymer({
-  rising: null,
+    is: 'more-info-sun',
-  setting: null,
+
+    properties: {
+      stateObj: {
+        type: Object,
+        observer: 'stateObjChanged',
+      },
+
+      risingDate: {
+        type: Object,
+      },
+
+      settingDate: {
+        type: Object,
+      },
+
+      risingTime: {
+        type: String,
+      },
+
+      settingTime: {
+        type: String,
+      },
+    },
 
     stateObjChanged: function() {
-    this.rising = parseDateTime(this.stateObj.attributes.next_rising);
+      this.risingDate = parseDateTime(this.stateObj.attributes.next_rising);
-    this.setting = parseDateTime(this.stateObj.attributes.next_setting);
+      this.risingTime = formatTime(this.risingDate);
 
-    if(self.rising > self.setting) {
+      this.settingDate = parseDateTime(this.stateObj.attributes.next_setting);
-      this.$.sunData.appendChild(this.$.rising);
+      this.settingTime = formatTime(this.settingDate);
+
+      var root = Polymer.dom(this);
+
+      if(self.risingDate > self.settingDate) {
+        root.appendChild(this.$.rising);
       } else {
-      this.$.sunData.appendChild(this.$.setting);
+        root.appendChild(this.$.setting);
       }
     }
   });
 })();
 </script>
-</polymer-element>

homeassistant/components/frontend/www_static/polymer/more-infos/more-info-thermostat.html

@@ -1,66 +1,76 @@
-<link rel="import" href="../bower_components/polymer/polymer.html">
+<link rel='import' href='../bower_components/polymer/polymer.html'>
-<link rel="import" href="../bower_components/paper-slider/paper-slider.html">
+<link rel='import' href='../bower_components/paper-slider/paper-slider.html'>
-<link rel="import" href="../bower_components/paper-toggle-button/paper-toggle-button.html">
+<link rel='import' href='../bower_components/paper-toggle-button/paper-toggle-button.html'>
 
-<polymer-element name="more-info-thermostat" attributes="stateObj">
+<dom-module id='more-info-thermostat'>
-<template>
   <style>
     paper-slider {
       width: 100%;
     }
 
-    paper-slider::shadow #sliderKnobInner,
-    paper-slider::shadow #sliderBar::shadow #activeProgress {
-      background-color: #039be5;
-    }
-
     .away-mode-toggle {
       display: none;
       margin-top: 16px;
     }
 
-    :host-context(.has-away_mode) .away-mode-toggle {
+    /*:host-context(.has-away_mode)*/ .away-mode-toggle {
       display: block;
     }
   </style>
-
+  <template>
-  <div>
     <div>
       <div>Target Temperature</div>
       <paper-slider
-        min="{{tempMin}}" max="{{tempMax}}"
+        min='[[tempMin]]' max='[[tempMax]]'
-        value='{{targetTemperatureSliderValue}}' pin
+        value='[[targetTemperatureSliderValue]]' pin
-        on-change="{{targetTemperatureSliderChanged}}">
+        on-change='targetTemperatureSliderChanged'>
       </paper-slider>
     </div>
 
     <div class='away-mode-toggle'>
       <div center horizontal layout>
         <div flex>Away Mode</div>
-        <paper-toggle-button
+        <paper-toggle-button checked='[[awayToggleChecked]]' on-change='toggleChanged'>
-          checked="{{awayToggleChecked}}"
-          on-change="{{toggleChanged}}">
         </paper-toggle-button>
       </div>
     </div>
-  </div>
   </template>
+</dom-module>
+
 <script>
+(function() {
   var constants = window.hass.constants;
+  var serviceActions = window.hass.serviceActions;
 
   Polymer({
-  tempMin: 10,
+    is: 'more-info-thermostat',
-  tempMax: 40,
-  targetTemperatureSliderValue: 0,
 
-  awayToggleChecked: false,
+    properties: {
-
+      stateObj: {
-  observe: {
+        type: Object,
-    'stateObj.attributes.away_mode': 'awayChanged'
+        observer: 'stateObjChanged',
       },
 
-  stateObjChanged: function(oldVal, newVal) {
+      tempMin: {
+        type: Number,
+      },
+
+      tempMax: {
+        type: Number,
+      },
+
+      targetTemperatureSliderValue: {
+        type: Number,
+      },
+
+      awayToggleChecked: {
+        type: Boolean,
+      },
+    },
+
+    stateObjChanged: function(newVal, oldVal) {
       this.targetTemperatureSliderValue = this.stateObj.state;
+      this.awayToggleChecked = this.stateObj.attributes.away_mode == 'on';
 
       if (this.stateObj.attributes.unit_of_measurement === constants.UNIT_TEMP_F) {
         this.tempMin = 45;
@@ -71,12 +81,12 @@ Polymer({
       }
     },
 
-  targetTemperatureSliderChanged: function(ev, details, target) {
+    targetTemperatureSliderChanged: function(ev) {
-    var temp = parseInt(target.value);
+      var temp = parseInt(ev.target.value);
 
       if(isNaN(temp)) return;
 
-    serviceActions.callService("thermostat", "set_temperature", {
+      serviceActions.callService('thermostat', 'set_temperature', {
         entity_id: this.stateObj.entityId,
         temperature: temp
       });
@@ -92,10 +102,6 @@ Polymer({
       }
     },
 
-  awayChanged: function(oldVal, newVal) {
-    this.awayToggleChecked = newVal == 'on';
-  },
-
     service_set_away: function(away_mode) {
       // We call stateChanged after a successful call to re-sync the toggle
       // with the state. It will be out of sync if our service call did not
@@ -106,9 +112,9 @@ Polymer({
         {entity_id: this.stateObj.entityId, away_mode: away_mode})
 
       .then(function() {
-      this.awayChanged(null, this.stateObj.attributes.away_mode);
+        this.stateObjChanged(this.stateObj);
       }.bind(this));
     },
   });
+})();
 </script>
-</polymer-element>

homeassistant/components/frontend/www_static/polymer/resources/home-assistant-js.html

@@ -6,6 +6,9 @@
     var DOMAINS_WITH_MORE_INFO = [
       'light', 'group', 'sun', 'configurator', 'thermostat', 'script'
     ];
+    var DOMAINS_HIDE_MORE_INFO = [
+      'sensor',
+    ];
 
     // Add some frontend specific helpers to the models
     Object.defineProperties(window.hass.stateModel.prototype, {
@@ -70,7 +73,9 @@
       },
 
       stateMoreInfoType: function(state) {
-        if(DOMAINS_WITH_MORE_INFO.indexOf(state.domain) !== -1) {
+        if(DOMAINS_HIDE_MORE_INFO.indexOf(state.domain) !== -1) {
+          return false;
+        } else if(DOMAINS_WITH_MORE_INFO.indexOf(state.domain) !== -1) {
           return state.domain;
         } else {
           return 'default';

homeassistant/components/frontend/www_static/polymer/resources/home-assistant-style.html

@@ -1,7 +1,7 @@
 <link rel="import" href="../bower_components/polymer/polymer.html">
 
 <style is="custom-style">
-  * {
+  :root {
     --dark-primary-color: #0288D1;
     --default-primary-color: #03A9F4;
     --light-primary-color: #B3E5FC;