Polymer 2 prepare (#309)

* Remove unused paper-range-slider * Update app-storage * Upgrade paper-slider to 2.0 * Upgrade paper-scroll-header-panel * Update paper-card * Update slots * Working upgrades * More slots * Upgrade app-layout * More slot upgrades * Vaadin components to Polymer hybrid ones * Polymer 2 fixes * Update polymer to 1.9.2 * Lint
2025-07-23 09:16:38 +00:00 · 2017-06-18 11:29:20 -07:00 · 2017-06-18 11:29:20 -07:00 · bb83687d93
commit bb83687d93
parent 70da89ae73
34 changed files with 129 additions and 90 deletions
--- a/bower.json
+++ b/bower.json
@ -8,23 +8,58 @@
  "license": "MIT",
  "private": true,
  "devDependencies": {
-    "app-layout": "~0.10.6",
-    "app-storage": "PolymerElements/app-storage#~0.9.8",
+    "app-layout": "^2.0.0",
+    "app-storage": "^2.0.2",
    "fecha": "~2.3.0",
    "font-roboto-local": "~1.0.1",
    "google-apis": "GoogleWebComponents/google-apis#~1.1.6",
-    "iron-elements": "PolymerElements/iron-elements#~1.0.10",
-    "paper-elements": "PolymerElements/paper-elements#~1.0.7",
-    "paper-range-slider": "IftachSadeh/paper-range-slider#~0.2.4",
-    "paper-scroll-header-panel": "~1.0.16",
-    "polymer": "Polymer/polymer#~1.8.0",
-    "vaadin-combo-box": "vaadin/vaadin-combo-box#~1.1.5",
-    "vaadin-date-picker": "^1.2.1",
-    "paper-slider": "1.0.14",
+    "iron-autogrow-textarea": "PolymerElements/iron-autogrow-textarea#^2.0.0",
+    "iron-flex-layout": "PolymerElements/iron-flex-layout#^2.0.0",
+    "iron-icon": "PolymerElements/iron-icon#^2.0.0",
+    "iron-image": "PolymerElements/iron-image#^2.1.1",
+    "iron-input": "PolymerElements/iron-input#^2.0.0",
+    "iron-media-query": "PolymerElements/iron-media-query#^2.0.0",
+    "iron-pages": "PolymerElements/iron-pages#^2.0.0",
    "leaflet": "^1.0.2",
-    "polymer-sortablejs": "^0.1.3"
+    "neon-animation": "PolymerElements/neon-animation#^2.0.1",
+    "paper-button": "PolymerElements/paper-button#^2.0.0",
+    "paper-card": "PolymerElements/paper-card#^2.0.0",
+    "paper-checkbox": "PolymerElements/paper-checkbox#^2.0.0",
+    "paper-dialog": "PolymerElements/paper-dialog#^2.0.0",
+    "paper-dialog-scrollable": "PolymerElements/paper-dialog-scrollable#^2.1.0",
+    "paper-drawer-panel": "PolymerElements/paper-drawer-panel#^2.0.0",
+    "paper-dropdown-menu": "PolymerElements/paper-dropdown-menu#^2.0.0",
+    "paper-fab": "PolymerElements/paper-fab#^2.0.0",
+    "paper-icon-button": "PolymerElements/paper-icon-button#^2.0.0",
+    "paper-input": "PolymerElements/paper-input#^2.0.1",
+    "paper-item": "PolymerElements/paper-item#^2.0.0",
+    "paper-listbox": "PolymerElements/paper-listbox#^2.0.0",
+    "paper-material": "PolymerElements/paper-material#^2.0.0",
+    "paper-menu": "PolymerElements/paper-menu#^1.3.0",
+    "paper-menu-button": "PolymerElements/paper-menu-button#^2.0.0",
+    "paper-progress": "PolymerElements/paper-progress#^2.0.1",
+    "paper-radio-button": "PolymerElements/paper-radio-button#^2.0.0",
+    "paper-radio-group": "PolymerElements/paper-radio-group#^2.0.0",
+    "paper-scroll-header-panel": "~2.0.0",
+    "paper-slider": "PolymerElements/paper-slider#^2.0.1",
+    "paper-spinner": "PolymerElements/paper-spinner#^2.0.0",
+    "paper-styles": "PolymerElements/paper-styles#^2.0.0",
+    "paper-tabs": "PolymerElements/paper-tabs#^2.0.0",
+    "paper-toast": "PolymerElements/paper-toast#^2.0.0",
+    "paper-toggle-button": "PolymerElements/paper-toggle-button#^2.0.0",
+    "polymer": "Polymer/polymer#~1.9.2",
+    "polymer-sortablejs": "^0.1.3",
+    "vaadin-combo-box": "vaadin/vaadin-combo-box#v2.0.0-alpha4",
+    "vaadin-date-picker": "vaadin/vaadin-date-picker#v2.0.0-alpha1",
+    "web-animations-js": "^2.2.5"
  },
  "resolutions": {
-    "paper-slider": "1.0.14"
+    "polymer": "^1.0.0",
+    "webcomponentsjs": "^0.7.24",
+    "iron-flex-layout": "^2.0.0",
+    "paper-input": "^2.0.0",
+    "paper-styles": "2.0.0",
+    "iron-resizable-behavior": "^2.0.0",
+    "iron-a11y-keys-behavior": "^2.0.0"
  }
 }
--- a/panels/automation/ha-automation-editor.html
+++ b/panels/automation/ha-automation-editor.html
@ -76,7 +76,7 @@
    </style>

    <app-header-layout has-scrolling-region>
-      <app-header fixed>
+      <app-header slot="header" fixed>
        <app-toolbar>
          <paper-icon-button
            icon='mdi:arrow-left'
--- a/panels/automation/ha-automation-picker.html
+++ b/panels/automation/ha-automation-picker.html
@ -51,7 +51,7 @@
    </style>

    <app-header-layout has-scrolling-region>
-      <app-header fixed>
+      <app-header slot="header" fixed>
        <app-toolbar>
          <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
          <div main-title>Automations Editor</div>
--- a/panels/config/group/ha-form-group.html
+++ b/panels/config/group/ha-form-group.html
@ -95,10 +95,10 @@
        >
          <paper-icon-button
            icon='mdi:plus'
-            class="dropdown-trigger"
+            slot="dropdown-trigger"
          ></paper-icon-button>
          <paper-listbox
-            class="dropdown-content"
+            slot="dropdown-content"
            selected='{{entityPollingIntensity}}'
          >
            <paper-item>Do not poll (0)</paper-item>
--- a/panels/config/ha-entity-config.html
+++ b/panels/config/ha-entity-config.html
@ -34,7 +34,7 @@
            disabled='[[!entities.length]]'
          >
            <paper-listbox
-              class="dropdown-content"
+              slot="dropdown-content"
              selected='{{selectedEntity}}'
            >
              <template is='dom-repeat' items='[[entities]]' as='state'>
--- a/panels/config/ha-panel-config.html
+++ b/panels/config/ha-panel-config.html
@ -31,7 +31,7 @@
    <iron-media-query query="(min-width: 1296px)" query-matches="{{wideSidebar}}">
    </iron-media-query>
    <app-header-layout has-scrolling-region>
-      <app-header fixed>
+      <app-header slot="header" fixed>
        <app-toolbar>
          <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
          <div main-title>Configuration</div>
--- a/panels/config/z-wave/ha-form-zwave-device.html
+++ b/panels/config/z-wave/ha-form-zwave-device.html
@ -22,7 +22,7 @@
        disabled='[[entityIgnored]]'
      >
        <paper-listbox
-          class="dropdown-content"
+          slot="dropdown-content"
          selected='{{entityPollingIntensity}}'
        >
          <paper-item>Do not poll (0)</paper-item>
--- a/panels/dev-event/ha-panel-dev-event.html
+++ b/panels/dev-event/ha-panel-dev-event.html
@ -40,7 +40,7 @@
    </style>

    <app-header-layout has-scrolling-region>
-      <app-header fixed>
+      <app-header slot="header" fixed>
        <app-toolbar>
          <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
          <div main-title>Events</div>
--- a/panels/dev-info/ha-panel-dev-info.html
+++ b/panels/dev-info/ha-panel-dev-info.html
@ -57,7 +57,7 @@
    </style>

    <app-header-layout has-scrolling-region>
-      <app-header fixed>
+      <app-header slot="header" fixed>
        <app-toolbar>
          <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
          <div main-title>About</div>
--- a/panels/dev-service/ha-panel-dev-service.html
+++ b/panels/dev-service/ha-panel-dev-service.html
@ -63,7 +63,7 @@
    </style>

    <app-header-layout has-scrolling-region>
-      <app-header fixed>
+      <app-header slot="header" fixed>
        <app-toolbar>
          <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
          <div main-title>Services</div>
@ -188,6 +188,7 @@ Polymer({
  },

  computeAttributesArray: function (serviceDomains, domain, service) {
+    if (!serviceDomains) return [];
    if (!(domain in serviceDomains)) return [];
    if (!(service in serviceDomains[domain])) return [];

--- a/panels/dev-state/ha-panel-dev-state.html
+++ b/panels/dev-state/ha-panel-dev-state.html
@ -48,7 +48,7 @@
    </style>

    <app-header-layout has-scrolling-region>
-      <app-header fixed>
+      <app-header slot="header" fixed>
        <app-toolbar>
          <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
          <div main-title>States</div>
--- a/panels/dev-template/ha-panel-dev-template.html
+++ b/panels/dev-template/ha-panel-dev-template.html
@ -59,7 +59,7 @@
    </style>

    <app-header-layout has-scrolling-region>
-      <app-header fixed>
+      <app-header slot="header" fixed>
        <app-toolbar>
          <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
          <div main-title>Templates</div>
--- a/panels/hassio/addon-store/hassio-addon-store.html
+++ b/panels/hassio/addon-store/hassio-addon-store.html
@ -26,7 +26,7 @@
      }
    </style>
    <app-header-layout has-scrolling-region>
-      <app-header fixed>
+      <app-header slot="header" fixed>
        <app-toolbar>
          <paper-icon-button
            icon='mdi:arrow-left'
--- a/panels/hassio/addon-view/hassio-addon-view.html
+++ b/panels/hassio/addon-view/hassio-addon-view.html
@ -37,7 +37,7 @@
      }
    </style>
    <app-header-layout has-scrolling-region>
-      <app-header fixed>
+      <app-header slot="header" fixed>
        <app-toolbar>
          <paper-icon-button
            icon='mdi:arrow-left'
--- a/panels/hassio/dashboard/hassio-dashboard.html
+++ b/panels/hassio/dashboard/hassio-dashboard.html
@ -33,7 +33,7 @@
      }
    </style>
    <app-header-layout has-scrolling-region>
-      <app-header fixed>
+      <app-header slot="header" fixed>
        <app-toolbar>
          <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
          <div main-title>Hass.io</div>
--- a/panels/hassio/supervisor/hassio-supervisor.html
+++ b/panels/hassio/supervisor/hassio-supervisor.html
@ -16,7 +16,7 @@
      }
    </style>
    <app-header-layout has-scrolling-region>
-      <app-header fixed>
+      <app-header slot="header" fixed>
        <app-toolbar>
          <paper-icon-button
            icon='mdi:arrow-left'
--- a/panels/history/ha-panel-history.html
+++ b/panels/history/ha-panel-history.html
@ -23,6 +23,9 @@
      }

      vaadin-date-picker {
+        --vaadin-date-picker-clear-icon: {
+          display: none;
+        }
        margin-bottom: 24px;
        margin-right: 16px;
        max-width: 200px;
@ -42,7 +45,7 @@
      is-loading='{{isLoadingData}}'
    ></ha-state-history-data>
    <app-header-layout has-scrolling-region>
-      <app-header fixed>
+      <app-header slot="header" fixed>
        <app-toolbar>
          <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
          <div main-title>History</div>
@ -63,7 +66,10 @@
            label='Period'
            disabled='[[isLoadingData]]'
          >
-            <paper-menu class="dropdown-content" selected="{{_periodIndex}}">
+            <paper-menu
+              slot="dropdown-content"
+              selected="{{_periodIndex}}"
+            >
              <paper-item>1 day</paper-item>
              <paper-item>3 days</paper-item>
              <paper-item>1 week</paper-item>
--- a/panels/logbook/ha-panel-logbook.html
+++ b/panels/logbook/ha-panel-logbook.html
@ -30,6 +30,9 @@
    }

    vaadin-date-picker {
+      --vaadin-date-picker-clear-icon: {
+        display: none;
+      }
      margin-bottom: 24px;
      max-width: 200px;
    }
@ -47,7 +50,7 @@
    ></ha-logbook-data>

    <app-header-layout has-scrolling-region>
-      <app-header fixed>
+      <app-header slot="header" fixed>
        <app-toolbar>
          <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
          <div main-title>Logbook</div>
--- a/panels/zwave/ha-panel-zwave.html
+++ b/panels/zwave/ha-panel-zwave.html
@ -51,7 +51,7 @@
        }
    </style>
    <app-header-layout has-scrolling-region>
-      <app-header fixed>
+      <app-header slot="header" fixed>
        <app-toolbar>
          <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
          <div main-title>Z-Wave Manager</div>
@ -74,7 +74,7 @@
          <div class='device-picker'>
            <paper-dropdown-menu label="Nodes" class="flex">
              <paper-listbox
-                class="dropdown-content"
+                slot="dropdown-content"
                selected='{{selectedNode}}'>
              <template is='dom-repeat' items='[[nodes]]' as='state'>
                <paper-item>[[computeSelectCaption(state)]]</paper-item>
@ -138,7 +138,7 @@
           <div class='device-picker'>
            <paper-dropdown-menu label="Entities of this node" class="flex">
              <paper-listbox
-                class="dropdown-content"
+                slot="dropdown-content"
                selected='{{selectedEntity}}'>
                <template is='dom-repeat' items='[[entities]]' as='state'>
                  <paper-item>[[computeSelectCaptionEnt(state)]]</paper-item>
--- a/panels/zwave/zwave-groups.html
+++ b/panels/zwave/zwave-groups.html
@ -37,7 +37,7 @@
          <div class='device-picker'>
          <paper-dropdown-menu label="Node to control" class='flex'>
            <paper-listbox
-              class="dropdown-content"
+              slot="dropdown-content"
              selected='{{selectedTargetNode}}'>
               <template is='dom-repeat' items='[[nodes]]' as='state'>
                <paper-item>[[computeSelectCaption(state)]]</paper-item>
@ -50,7 +50,7 @@
          <div class='device-picker'>
          <paper-dropdown-menu label="Group" class='flex'>
            <paper-listbox
-              class="dropdown-content"
+              slot="dropdown-content"
              selected='{{selectedGroup}}'>
              <template is='dom-repeat' items='[[groups]]' as='state'>
                <paper-item>[[computeSelectCaptionGroup(state)]]</paper-item>
--- a/panels/zwave/zwave-node-config.html
+++ b/panels/zwave/zwave-node-config.html
@ -55,7 +55,7 @@
        <div class='device-picker'>
        <paper-dropdown-menu label="Config parameter" class='flex'>
          <paper-listbox
-            class="dropdown-content"
+            slot="dropdown-content"
            selected='{{selectedConfigParameter}}'>
            <template is='dom-repeat' items='[[config]]' as='state'>
              <paper-item>[[computeSelectCaptionConfigParameter(state)]]</paper-item>
@ -67,7 +67,7 @@
          <div class='device-picker'>
            <paper-dropdown-menu label="Config value" class='flex' placeholder='{{loadedConfigValue}}'>
              <paper-listbox
-                class="dropdown-content"
+                slot="dropdown-content"
                selected='{{selectedConfigValue}}'>
                <template is='dom-repeat' items='[[selectedConfigParameterValues]]' as='state'>
                  <paper-item>[[state]]</paper-item>
@ -92,7 +92,7 @@
          <div class='device-picker'>
            <paper-dropdown-menu label="Config value" class='flex' placeholder='{{loadedConfigValue}}'>
              <paper-listbox
-                class="dropdown-content"
+                slot="dropdown-content"
                selected='{{selectedConfigValue}}'>
                <template is='dom-repeat' items='[[selectedConfigParameterValues]]' as='state'>
                  <paper-item>[[state]]</paper-item>
--- a/panels/zwave/zwave-usercodes.html
+++ b/panels/zwave/zwave-usercodes.html
@ -33,7 +33,7 @@
          <div class='device-picker'>
          <paper-dropdown-menu label="Code slot" class='flex'>
            <paper-listbox
-              class="dropdown-content"
+              slot="dropdown-content"
              selected='{{selectedUserCode}}'>
              <template is='dom-repeat' items='[[userCodes]]' as='state'>
                <paper-item>[[computeSelectCaptionUserCodes(state)]]</paper-item>
--- a/panels/zwave/zwave-values.html
+++ b/panels/zwave/zwave-values.html
@ -37,7 +37,7 @@
        <div class='device-picker'>
        <paper-dropdown-menu label="Value" class='flex'>
          <paper-listbox
-            class="dropdown-content"
+            slot="dropdown-content"
            selected='{{selectedValue}}'>
             <template is='dom-repeat' items='[[values]]' as='item'>
              <paper-item>[[computeSelectCaption(item)]]</paper-item>
--- a/preact-src/script/script_action.js
+++ b/preact-src/script/script_action.js
@ -56,7 +56,7 @@ export default class Action extends Component {
        <div>
          <paper-dropdown-menu-light label="Action Type" no-animations>
            <paper-listbox
-              class="dropdown-content"
+              slot="dropdown-content"
              selected={selected}
              oniron-select={this.typeChanged}
            >
@ -90,9 +90,9 @@ export default class Action extends Component {
          >
            <paper-icon-button
              icon="mdi:dots-vertical"
-              class="dropdown-trigger"
+              slot="dropdown-trigger"
            />
-            <paper-menu class="dropdown-content">
+            <paper-menu slot="dropdown-content">
              <paper-item disabled>Duplicate</paper-item>
              <paper-item onTap={this.onDelete}>Delete</paper-item>
            </paper-menu>
--- a/preact-src/trigger/trigger_row.js
+++ b/preact-src/trigger/trigger_row.js
@ -54,7 +54,7 @@ export default class TriggerRow extends Component {
        <div>
          <paper-dropdown-menu-light label="Trigger Type" no-animations>
            <paper-listbox
-              class="dropdown-content"
+              slot="dropdown-content"
              selected={selected}
              oniron-select={this.typeChanged}
            >
@ -88,9 +88,9 @@ export default class TriggerRow extends Component {
          >
            <paper-icon-button
              icon="mdi:dots-vertical"
-              class="dropdown-trigger"
+              slot="dropdown-trigger"
            />
-            <paper-menu class="dropdown-content">
+            <paper-menu slot="dropdown-content">
              <paper-item disabled>Duplicate</paper-item>
              <paper-item onTap={this.onDelete}>Delete</paper-item>
            </paper-menu>
--- a/src/components/ha-sidebar.html
+++ b/src/components/ha-sidebar.html
@ -101,19 +101,19 @@

    <paper-menu attr-for-selected='data-panel' selected='[[hass.currentPanel]]' on-iron-select='menuSelect'>
      <paper-icon-item on-tap='menuClicked' data-panel='states'>
-        <iron-icon item-icon icon='mdi:apps'></iron-icon>
+        <iron-icon slot="item-icon" icon='mdi:apps'></iron-icon>
        <span class='item-text'>States</span>
      </paper-icon-item>

      <template is='dom-repeat' items='[[panels]]'>
        <paper-icon-item on-tap='menuClicked' data-panel$='[[item.url_path]]'>
-          <iron-icon item-icon icon='[[item.icon]]'></iron-icon>
+          <iron-icon slot="item-icon" icon='[[item.icon]]'></iron-icon>
          <span class='item-text'>[[item.title]]</span>
        </paper-icon-item>
      </template>

      <paper-icon-item on-tap='menuClicked' data-panel='logout' class='logout'>
-        <iron-icon item-icon icon='mdi:exit-to-app'></iron-icon>
+        <iron-icon slot="item-icon" icon='mdi:exit-to-app'></iron-icon>
        <span class='item-text'>Log Out</span>
      </paper-icon-item>
    </paper-menu>
--- a/src/home-assistant.html
+++ b/src/home-assistant.html
@ -5,6 +5,10 @@
 <link rel='import' href='../bower_components/paper-styles/typography.html'>
 <link rel='import' href='../bower_components/iron-flex-layout/iron-flex-layout-classes.html'>

+<!--polyfill for paper-dropdown-->
+<link rel="import" href="../bower_components/neon-animation/web-animations.html">
+
+
 <link rel='import' href='./util/hass-util.html'>
 <link rel='import' href='./util/ha-pref-storage.html'>
 <link rel='import' href='./util/hass-call-api.html'>
--- a/src/layouts/home-assistant-main.html
+++ b/src/layouts/home-assistant-main.html
@ -26,10 +26,10 @@
      force-narrow='[[computeForceNarrow(narrow, dockedSidebar)]]'
      responsive-width='0' disable-swipe='[[isSelectedMap]]'
      disable-edge-swipe='[[isSelectedMap]]'>
-      <ha-sidebar drawer narrow='[[narrow]]' hass='[[hass]]'></ha-sidebar>
+      <ha-sidebar slot="drawer" narrow='[[narrow]]' hass='[[hass]]'></ha-sidebar>

      <iron-pages
-        main
+        slot="main"
        attr-for-selected='id'
        fallback-selection='panel-resolver'
        selected='[[currentPanel]]'
@ -63,6 +63,7 @@ Polymer({
    hass: {
      type: Object,
      value: null,
+      observer: 'hassChanged',
    },

    narrow: {
@ -71,8 +72,6 @@ Polymer({

    currentPanel: {
      type: String,
-      computed: 'computeCurrentPanel(hass)',
-      observer: 'currentPanelChanged',
    },

    dockedSidebar: {
@ -87,6 +86,16 @@ Polymer({
    'hass-start-voice': 'handleStartVoice',
  },

+  hassChanged: function (hass) {
+    if (this.currentPanel !== hass.currentPanel) {
+      this.currentPanel = hass.currentPanel;
+
+      if (this.narrow) {
+        this.$.drawer.closeDrawer();
+      }
+    }
+  },
+
  handleStartVoice: function (ev) {
    ev.stopPropagation();
    this.$.voiceDialog.startListening();
@ -107,12 +116,6 @@ Polymer({
    }
  },

-  currentPanelChanged: function () {
-    if (this.narrow) {
-      this.$.drawer.closeDrawer();
-    }
-  },
-
  attached: function () {
    window.removeInitMsg();
  },
@ -121,10 +124,6 @@ Polymer({
    return narrow || !dockedSidebar;
  },

-  computeCurrentPanel: function (hass) {
-    return hass.currentPanel;
-  },
-
  computeDockedSidebar: function (hass) {
    return hass.dockedSidebar;
  },
--- a/src/layouts/partial-cards.html
+++ b/src/layouts/partial-cards.html
@ -37,7 +37,7 @@
    </style>

    <app-header-layout has-scrolling-region id='layout'>
-      <app-header effects="waterfall" condenses fixed>
+      <app-header effects="waterfall" condenses fixed slot="header">
        <app-toolbar>
          <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
          <div main-title>[[computeTitle(views, locationName)]]</div>
@ -126,7 +126,7 @@ Polymer({
    hass: {
      type: Object,
      value: null,
-      observer: 'computeAllViews'
+      observer: 'hassChanged'
    },

    narrow: {
@ -162,7 +162,6 @@ Polymer({

    currentView: {
      type: String,
-      computed: 'computeCurrentView(hass)',
    },

    views: {
@ -250,7 +249,7 @@ Polymer({
  },

  computeTitle: function (views, locationName) {
-    return views.length > 0 ? 'Home Assistant' : locationName;
+    return views && views.length > 0 ? 'Home Assistant' : locationName;
  },

  computeShowIntroduction: function (currentView, introductionLoaded, states) {
@ -276,7 +275,13 @@ Polymer({
    return window.hassUtil.isComponentLoaded(hass, 'introduction');
  },

-  computeAllViews: function (hass) {
+  hassChanged: function (hass) {
+    var newView = hass.currentView || '';
+
+    if (newView !== this.currentView) {
+      this.currentView = newView;
+    }
+
    var views = window.HAWS.extractViews(hass.states);
    // If default view present, it's in first index.
    if (views.length > 0 && views[0].entity_id === this.DEFAULT_VIEW_ENTITY_ID) {
@ -334,9 +339,5 @@ Polymer({

    return states;
  },
-
-  computeCurrentView: function (hass) {
-    return hass.currentView || '';
-  },
 });
 </script>
--- a/src/more-infos/more-info-climate.html
+++ b/src/more-infos/more-info-climate.html
@ -7,7 +7,6 @@
 <link rel='import' href='../../bower_components/paper-item/paper-item.html'>
 <link rel='import' href='../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html'>
 <link rel='import' href='../../bower_components/paper-toggle-button/paper-toggle-button.html'>
-<link rel="import" href="../../bower_components/paper-range-slider/paper-range-slider.html">

 <link rel="import" href='../components/ha-climate-control.html'>

@ -76,15 +75,6 @@
        --paper-slider-secondary-color: var(--paper-blue-400);
      }

-      paper-range-slider {
-        --paper-range-slider-lower-color: var(--paper-orange-400);
-        --paper-range-slider-active-color: var(--paper-green-400);
-        --paper-range-slider-higher-color: var(--paper-blue-400);
-        --paper-range-slider-knob-color: var(--primary-color);
-        --paper-range-slider-pin-color: var(--primary-color);
-        --paper-range-slider-width: 100%;
-      }
-
      .single-row {
        padding: 8px 0;
      }
@ -129,7 +119,7 @@
      <div class='container-operation_list'>
        <div class='controls'>
          <paper-dropdown-menu label-float label='Operation'>
-            <paper-menu class="dropdown-content" selected="{{operationIndex}}">
+            <paper-menu slot="dropdown-content" selected="{{operationIndex}}">
              <template is='dom-repeat'
                        items='[[stateObj.attributes.operation_list]]'>
                <paper-item class="capitalize">[[item]]</paper-item>
@ -141,7 +131,7 @@

      <div class='container-fan_list'>
        <paper-dropdown-menu label-float label='Fan Mode'>
-          <paper-menu class="dropdown-content" selected="{{fanIndex}}">
+          <paper-menu slot="dropdown-content" selected="{{fanIndex}}">
            <template is='dom-repeat'
                      items='[[stateObj.attributes.fan_list]]'>
              <paper-item>[[item]]</paper-item>
@ -152,7 +142,7 @@

      <div class='container-swing_list'>
        <paper-dropdown-menu label-float label='Swing Mode'>
-          <paper-menu class="dropdown-content" selected="{{swingIndex}}">
+          <paper-menu slot="dropdown-content" selected="{{swingIndex}}">
            <template is='dom-repeat'
                      items='[[stateObj.attributes.swing_list]]'>
              <paper-item>[[item]]</paper-item>
--- a/src/more-infos/more-info-fan.html
+++ b/src/more-infos/more-info-fan.html
@ -28,7 +28,7 @@

      <div class="container-speed_list">
        <paper-dropdown-menu label-float label='Speed'>
-          <paper-menu class='dropdown-content' selected='{{speedIndex}}'>
+          <paper-menu slot="dropdown-content" selected='{{speedIndex}}'>
            <template is='dom-repeat'
                      items='[[stateObj.attributes.speed_list]]'>
              <paper-item>[[item]]</paper-item>
--- a/src/more-infos/more-info-light.html
+++ b/src/more-infos/more-info-light.html
@ -52,7 +52,7 @@

      <div class='effect_list'>
        <paper-dropdown-menu label-float label='Effect'>
-          <paper-menu class="dropdown-content" selected="{{effectIndex}}">
+          <paper-menu slot="dropdown-content" selected="{{effectIndex}}">
            <template is='dom-repeat'
                      items='[[stateObj.attributes.effect_list]]'>
              <paper-item>[[item]]</paper-item>
--- a/src/more-infos/more-info-media_player.html
+++ b/src/more-infos/more-info-media_player.html
@ -93,7 +93,7 @@
           hidden$='[[computeHideSelectSource(isOff, supportsSelectSource)]]'>
        <iron-icon class="source-input" icon="mdi:login-variant"></iron-icon>
        <paper-dropdown-menu class="flex source-input" label-float label='Source'>
-          <paper-menu class="dropdown-content" selected="{{sourceIndex}}">
+          <paper-menu slot="dropdown-content" selected="{{sourceIndex}}">
            <template is='dom-repeat' items='[[stateObj.attributes.source_list]]'>
              <paper-item>[[item]]</paper-item>
            </template>
--- a/src/state-summary/state-card-input_select.html
+++ b/src/state-summary/state-card-input_select.html
@ -28,7 +28,7 @@
      on-tap='stopPropagation'
      selected-item-label='{{selectedOption}}'
      label='[[computeStateName(stateObj)]]'>
-      <paper-menu class="dropdown-content" selected="[[computeSelected(stateObj)]]">
+      <paper-menu slot="dropdown-content" selected="[[computeSelected(stateObj)]]">
        <template is='dom-repeat' items='[[stateObj.attributes.options]]'>
          <paper-item>[[item]]</paper-item>
        </template>