From 0707528bd72128904a48dc8b518ec7f512457832 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Sat, 25 Nov 2017 16:00:43 -0800
Subject: [PATCH] Entity dropdown improvement (#674)

* Ignore hass changes while dropdown is open

* Upgrade vaadin-combo-box

* Fix styling on dev-service panel

* Fix styling for ha-entity-dropdown

* Fix height vaadin-combo-box dropdown

* Rename ha-entity-dropdown to ha-entity-picker

* More entity improvement (#675)

* Update script and automation editor to use entity picker

* Add entity and service picker to service dev panel

* Lint
---
 .eslintrc-hound.json                          |   1 +
 bower.json                                    |   2 +-
 js/automation-editor/automation.js            |  20 +-
 js/automation-editor/trigger/index.js         |   3 +-
 js/automation-editor/trigger/numeric_state.js |  19 +-
 js/automation-editor/trigger/state.js         |  18 +-
 js/automation-editor/trigger/trigger_edit.js  |   3 +-
 js/automation-editor/trigger/zone.js          |  44 ++-
 .../component/condition/condition_edit.js     |   3 +-
 js/common/component/condition/index.js        |   3 +-
 .../component/condition/numeric_state.js      |  18 +-
 js/common/component/condition/state.js        |  18 +-
 js/common/component/condition/zone.js         |  44 ++-
 js/common/component/script/action_edit.js     |   3 +-
 js/common/component/script/call_service.js    |  28 +-
 js/common/component/script/condition.js       |   3 +-
 js/common/component/script/index.js           |   3 +-
 js/common/util/location.js                    |   4 +
 .../automation/ha-automation-editor.html      |  32 +-
 panels/dev-service/ha-panel-dev-service.html  | 335 ++++++++++--------
 panels/dev-state/ha-panel-dev-state.html      |  18 +-
 panels/mailbox/ha-panel-mailbox.html          |   2 -
 src/components/entity/ha-entity-dropdown.html |  67 ----
 src/components/entity/ha-entity-picker.html   | 152 ++++++++
 src/components/ha-combo-box.html              | 106 ++++++
 src/components/ha-service-picker.html         |  46 +++
 src/resources/ha-style.html                   |   1 +
 test-mocha/common/util/location.js            |  38 ++
 28 files changed, 730 insertions(+), 304 deletions(-)
 create mode 100644 js/common/util/location.js
 delete mode 100644 src/components/entity/ha-entity-dropdown.html
 create mode 100644 src/components/entity/ha-entity-picker.html
 create mode 100644 src/components/ha-combo-box.html
 create mode 100644 src/components/ha-service-picker.html
 create mode 100644 test-mocha/common/util/location.js

diff --git a/.eslintrc-hound.json b/.eslintrc-hound.json
index fc0ccf9251..0adcc8129f 100644
--- a/.eslintrc-hound.json
+++ b/.eslintrc-hound.json
@@ -48,6 +48,7 @@
     "import/prefer-default-export": 0,
     "import/no-unresolved": 0,
     "import/extensions": [2, "ignorePackages"],
+    "object-curly-newline": 0,
     "react/jsx-no-bind": [2, { "ignoreRefs": true }],
     "react/jsx-no-duplicate-props": 2,
     "react/self-closing-comp": 2,
diff --git a/bower.json b/bower.json
index 565796f114..0ec9802361 100644
--- a/bower.json
+++ b/bower.json
@@ -51,7 +51,7 @@
     "paper-toast": "PolymerElements/paper-toast#^2.0.0",
     "paper-toggle-button": "PolymerElements/paper-toggle-button#^2.0.0",
     "polymer": "^2.1.1",
-    "vaadin-combo-box": "vaadin/vaadin-combo-box#^2.0.0",
+    "vaadin-combo-box": "vaadin/vaadin-combo-box#^3.0.2",
     "vaadin-date-picker": "vaadin/vaadin-date-picker#^2.0.0",
     "web-animations-js": "^2.2.5",
     "webcomponentsjs": "^1.0.10"
diff --git a/js/automation-editor/automation.js b/js/automation-editor/automation.js
index cebb63d8bf..d76177333c 100644
--- a/js/automation-editor/automation.js
+++ b/js/automation-editor/automation.js
@@ -42,7 +42,7 @@ export default class Automation extends Component {
     });
   }
 
-  render({ automation, isWide }) {
+  render({ automation, isWide, hass }) {
     const {
       alias, trigger, condition, action
     } = automation;
@@ -77,7 +77,11 @@ export default class Automation extends Component {
               Learn more about triggers.
             </a></p>
           </span>
-          <Trigger trigger={trigger} onChange={this.triggerChanged} />
+          <Trigger
+            trigger={trigger}
+            onChange={this.triggerChanged}
+            hass={hass}
+          />
         </ha-config-section>
 
         <ha-config-section is-wide={isWide}>
@@ -93,7 +97,11 @@ export default class Automation extends Component {
               Learn more about conditions.
             </a></p>
           </span>
-          <Condition condition={condition || []} onChange={this.conditionChanged} />
+          <Condition
+            condition={condition || []}
+            onChange={this.conditionChanged}
+            hass={hass}
+          />
         </ha-config-section>
 
         <ha-config-section is-wide={isWide}>
@@ -104,7 +112,11 @@ export default class Automation extends Component {
               Learn more about actions.
             </a></p>
           </span>
-          <Script script={action} onChange={this.actionChanged} />
+          <Script
+            script={action}
+            onChange={this.actionChanged}
+            hass={hass}
+          />
         </ha-config-section>
       </div>
     );
diff --git a/js/automation-editor/trigger/index.js b/js/automation-editor/trigger/index.js
index f64f341179..5f61fb2025 100644
--- a/js/automation-editor/trigger/index.js
+++ b/js/automation-editor/trigger/index.js
@@ -32,7 +32,7 @@ export default class Trigger extends Component {
     this.props.onChange(trigger);
   }
 
-  render({ trigger }) {
+  render({ trigger, hass }) {
     return (
       <div class="triggers">
         {trigger.map((trg, idx) => (
@@ -40,6 +40,7 @@ export default class Trigger extends Component {
             index={idx}
             trigger={trg}
             onChange={this.triggerChanged}
+            hass={hass}
           />))}
         <paper-card>
           <div class='card-actions add-card'>
diff --git a/js/automation-editor/trigger/numeric_state.js b/js/automation-editor/trigger/numeric_state.js
index 7a4f996599..a7c962f80c 100644
--- a/js/automation-editor/trigger/numeric_state.js
+++ b/js/automation-editor/trigger/numeric_state.js
@@ -7,20 +7,29 @@ export default class NumericStateTrigger extends Component {
     super();
 
     this.onChange = onChangeEvent.bind(this, 'trigger');
+    this.entityPicked = this.entityPicked.bind(this);
+  }
+
+  entityPicked(ev) {
+    this.props.onChange(this.props.index, {
+      ...this.props.trigger,
+      entity_id: ev.target.value,
+    });
   }
 
   /* eslint-disable camelcase */
-  render({ trigger }) {
+  render({ trigger, hass }) {
     const {
       value_template, entity_id, below, above
     } = trigger;
+
     return (
       <div>
-        <paper-input
-          label="Entity Id"
-          name="entity_id"
+        <ha-entity-picker
           value={entity_id}
-          onChange={this.onChange}
+          onChange={this.entityPicked}
+          hass={hass}
+          allowCustomEntity
         />
         <paper-input
           label="Above"
diff --git a/js/automation-editor/trigger/state.js b/js/automation-editor/trigger/state.js
index 9e166111b9..8eea0599e8 100644
--- a/js/automation-editor/trigger/state.js
+++ b/js/automation-editor/trigger/state.js
@@ -7,20 +7,28 @@ export default class StateTrigger extends Component {
     super();
 
     this.onChange = onChangeEvent.bind(this, 'trigger');
+    this.entityPicked = this.entityPicked.bind(this);
+  }
+
+  entityPicked(ev) {
+    this.props.onChange(this.props.index, {
+      ...this.props.trigger,
+      entity_id: ev.target.value,
+    });
   }
 
   /* eslint-disable camelcase */
-  render({ trigger }) {
+  render({ trigger, hass }) {
     const { entity_id, to } = trigger;
     const trgFrom = trigger.from;
     const trgFor = trigger.for;
     return (
       <div>
-        <paper-input
-          label="Entity Id"
-          name="entity_id"
+        <ha-entity-picker
           value={entity_id}
-          onChange={this.onChange}
+          onChange={this.entityPicked}
+          hass={hass}
+          allowCustomEntity
         />
         <paper-input
           label="From"
diff --git a/js/automation-editor/trigger/trigger_edit.js b/js/automation-editor/trigger/trigger_edit.js
index 78303d88f6..85bd0cd3de 100644
--- a/js/automation-editor/trigger/trigger_edit.js
+++ b/js/automation-editor/trigger/trigger_edit.js
@@ -42,7 +42,7 @@ export default class TriggerEdit extends Component {
     }
   }
 
-  render({ index, trigger, onChange }) {
+  render({ index, trigger, onChange, hass }) {
     const Comp = TYPES[trigger.platform];
     const selected = OPTIONS.indexOf(trigger.platform);
 
@@ -69,6 +69,7 @@ export default class TriggerEdit extends Component {
           index={index}
           trigger={trigger}
           onChange={onChange}
+          hass={hass}
         />
       </div>
     );
diff --git a/js/automation-editor/trigger/zone.js b/js/automation-editor/trigger/zone.js
index 3907eb0a62..2d5937047d 100644
--- a/js/automation-editor/trigger/zone.js
+++ b/js/automation-editor/trigger/zone.js
@@ -1,6 +1,12 @@
 import { h, Component } from 'preact';
 
 import { onChangeEvent } from '../../common/util/event.js';
+import { hasLocation } from '../../common/util/location.js';
+import computeDomain from '../../common/util/compute_domain.js';
+
+function zoneAndLocationFilter(stateObj) {
+  return hasLocation(stateObj) && computeDomain(stateObj) !== 'zone';
+}
 
 export default class ZoneTrigger extends Component {
   constructor() {
@@ -8,6 +14,22 @@ export default class ZoneTrigger extends Component {
 
     this.onChange = onChangeEvent.bind(this, 'trigger');
     this.radioGroupPicked = this.radioGroupPicked.bind(this);
+    this.entityPicked = this.entityPicked.bind(this);
+    this.zonePicked = this.zonePicked.bind(this);
+  }
+
+  entityPicked(ev) {
+    this.props.onChange(this.props.index, {
+      ...this.props.trigger,
+      entity_id: ev.target.value,
+    });
+  }
+
+  zonePicked(ev) {
+    this.props.onChange(this.props.index, {
+      ...this.props.trigger,
+      zone: ev.target.value,
+    });
   }
 
   radioGroupPicked(ev) {
@@ -18,21 +40,25 @@ export default class ZoneTrigger extends Component {
   }
 
   /* eslint-disable camelcase */
-  render({ trigger }) {
+  render({ trigger, hass }) {
     const { entity_id, zone, event } = trigger;
     return (
       <div>
-        <paper-input
-          label="Entity Id"
-          name="entity_id"
+        <ha-entity-picker
+          label='Entity with location'
           value={entity_id}
-          onChange={this.onChange}
+          onChange={this.entityPicked}
+          hass={hass}
+          allowCustomEntity
+          entityFilter={zoneAndLocationFilter}
         />
-        <paper-input
-          label="Zone"
-          name="zone"
+        <ha-entity-picker
+          label='Zone'
           value={zone}
-          onChange={this.onChange}
+          onChange={this.zonePicked}
+          hass={hass}
+          allowCustomEntity
+          domainFilter='zone'
         />
         <label id="eventlabel">Event:</label>
         <paper-radio-group
diff --git a/js/common/component/condition/condition_edit.js b/js/common/component/condition/condition_edit.js
index ac970ef741..240244646c 100644
--- a/js/common/component/condition/condition_edit.js
+++ b/js/common/component/condition/condition_edit.js
@@ -36,7 +36,7 @@ export default class ConditionRow extends Component {
     }
   }
 
-  render({ index, condition, onChange }) {
+  render({ index, condition, onChange, hass }) {
     const Comp = TYPES[condition.condition];
     const selected = OPTIONS.indexOf(condition.condition);
 
@@ -64,6 +64,7 @@ export default class ConditionRow extends Component {
           index={index}
           condition={condition}
           onChange={onChange}
+          hass={hass}
         />
       </div>
     );
diff --git a/js/common/component/condition/index.js b/js/common/component/condition/index.js
index 6232c0028e..d3d3a5ebd8 100644
--- a/js/common/component/condition/index.js
+++ b/js/common/component/condition/index.js
@@ -30,7 +30,7 @@ export default class Condition extends Component {
     this.props.onChange(condition);
   }
 
-  render({ condition }) {
+  render({ condition, hass }) {
     return (
       <div class="triggers">
         {condition.map((cnd, idx) => (
@@ -38,6 +38,7 @@ export default class Condition extends Component {
             index={idx}
             condition={cnd}
             onChange={this.conditionChanged}
+            hass={hass}
           />))}
         <paper-card>
           <div class='card-actions add-card'>
diff --git a/js/common/component/condition/numeric_state.js b/js/common/component/condition/numeric_state.js
index e387d22555..e892734cb6 100644
--- a/js/common/component/condition/numeric_state.js
+++ b/js/common/component/condition/numeric_state.js
@@ -7,20 +7,28 @@ export default class NumericStateCondition extends Component {
     super();
 
     this.onChange = onChangeEvent.bind(this, 'condition');
+    this.entityPicked = this.entityPicked.bind(this);
+  }
+
+  entityPicked(ev) {
+    this.props.onChange(this.props.index, {
+      ...this.props.condition,
+      entity_id: ev.target.value,
+    });
   }
 
   /* eslint-disable camelcase */
-  render({ condition }) {
+  render({ condition, hass }) {
     const {
       value_template, entity_id, below, above
     } = condition;
     return (
       <div>
-        <paper-input
-          label="Entity Id"
-          name="entity_id"
+        <ha-entity-picker
           value={entity_id}
-          onChange={this.onChange}
+          onChange={this.entityPicked}
+          hass={hass}
+          allowCustomEntity
         />
         <paper-input
           label="Above"
diff --git a/js/common/component/condition/state.js b/js/common/component/condition/state.js
index d701d550ad..e2cef4ede5 100644
--- a/js/common/component/condition/state.js
+++ b/js/common/component/condition/state.js
@@ -7,19 +7,27 @@ export default class StateCondition extends Component {
     super();
 
     this.onChange = onChangeEvent.bind(this, 'condition');
+    this.entityPicked = this.entityPicked.bind(this);
+  }
+
+  entityPicked(ev) {
+    this.props.onChange(this.props.index, {
+      ...this.props.condition,
+      entity_id: ev.target.value,
+    });
   }
 
   /* eslint-disable camelcase */
-  render({ condition }) {
+  render({ condition, hass }) {
     const { entity_id, state } = condition;
     const cndFor = condition.for;
     return (
       <div>
-        <paper-input
-          label="Entity Id"
-          name="entity_id"
+        <ha-entity-picker
           value={entity_id}
-          onChange={this.onChange}
+          onChange={this.entityPicked}
+          hass={hass}
+          allowCustomEntity
         />
         <paper-input
           label="State"
diff --git a/js/common/component/condition/zone.js b/js/common/component/condition/zone.js
index 405437c073..13359d0cf1 100644
--- a/js/common/component/condition/zone.js
+++ b/js/common/component/condition/zone.js
@@ -1,30 +1,56 @@
 import { h, Component } from 'preact';
 
 import { onChangeEvent } from '../../util/event.js';
+import { hasLocation } from '../../util/location.js';
+import computeDomain from '../../util/compute_domain.js';
+
+function zoneAndLocationFilter(stateObj) {
+  return hasLocation(stateObj) && computeDomain(stateObj) !== 'zone';
+}
 
 export default class ZoneCondition extends Component {
   constructor() {
     super();
 
     this.onChange = onChangeEvent.bind(this, 'condition');
+    this.entityPicked = this.entityPicked.bind(this);
+    this.zonePicked = this.zonePicked.bind(this);
+  }
+
+  entityPicked(ev) {
+    this.props.onChange(this.props.index, {
+      ...this.props.condition,
+      entity_id: ev.target.value,
+    });
+  }
+
+  zonePicked(ev) {
+    this.props.onChange(this.props.index, {
+      ...this.props.condition,
+      zone: ev.target.value,
+    });
   }
 
   /* eslint-disable camelcase */
-  render({ condition }) {
+  render({ condition, hass }) {
     const { entity_id, zone } = condition;
     return (
       <div>
-        <paper-input
-          label="Entity Id"
-          name="entity_id"
+        <ha-entity-picker
+          label='Entity with location'
           value={entity_id}
-          onChange={this.onChange}
+          onChange={this.entityPicked}
+          hass={hass}
+          allowCustomEntity
+          entityFilter={zoneAndLocationFilter}
         />
-        <paper-input
-          label="Zone entity id"
-          name="zone"
+        <ha-entity-picker
+          label='Zone'
           value={zone}
-          onChange={this.onChange}
+          onChange={this.zonePicked}
+          hass={hass}
+          allowCustomEntity
+          domainFilter='zone'
         />
       </div>
     );
diff --git a/js/common/component/script/action_edit.js b/js/common/component/script/action_edit.js
index 99db36129d..f87498404e 100644
--- a/js/common/component/script/action_edit.js
+++ b/js/common/component/script/action_edit.js
@@ -42,7 +42,7 @@ export default class Action extends Component {
     }
   }
 
-  render({ index, action, onChange }) {
+  render({ index, action, onChange, hass }) {
     const type = getType(action);
     const Comp = type && TYPES[type];
     const selected = OPTIONS.indexOf(type);
@@ -70,6 +70,7 @@ export default class Action extends Component {
           index={index}
           action={action}
           onChange={onChange}
+          hass={hass}
         />
       </div>
     );
diff --git a/js/common/component/script/call_service.js b/js/common/component/script/call_service.js
index 4191355265..5375715e5e 100644
--- a/js/common/component/script/call_service.js
+++ b/js/common/component/script/call_service.js
@@ -1,16 +1,22 @@
 import { h, Component } from 'preact';
 
 import JSONTextArea from '../json_textarea.js';
-import { onChangeEvent } from '../../util/event.js';
 
 export default class CallServiceAction extends Component {
   constructor() {
     super();
 
-    this.onChange = onChangeEvent.bind(this, 'action');
+    this.serviceChanged = this.serviceChanged.bind(this);
     this.serviceDataChanged = this.serviceDataChanged.bind(this);
   }
 
+  serviceChanged(ev) {
+    this.props.onChange(this.props.index, {
+      ...this.props.action,
+      service: ev.target.value,
+    });
+  }
+
   serviceDataChanged(data) {
     this.props.onChange(this.props.index, {
       ...this.props.action,
@@ -18,21 +24,15 @@ export default class CallServiceAction extends Component {
     });
   }
 
-  render({ action }) {
-    const { alias, service, data } = action;
+  render({ action, hass }) {
+    const { service, data } = action;
+
     return (
       <div>
-        <paper-input
-          label="Alias"
-          name="alias"
-          value={alias}
-          onChange={this.onChange}
-        />
-        <paper-input
-          label="Service"
-          name="service"
+        <ha-service-picker
+          hass={hass}
           value={service}
-          onChange={this.onChange}
+          onChange={this.serviceChanged}
         />
         <JSONTextArea
           label="Service Data"
diff --git a/js/common/component/script/condition.js b/js/common/component/script/condition.js
index 3b37a9dab0..071eb91a56 100644
--- a/js/common/component/script/condition.js
+++ b/js/common/component/script/condition.js
@@ -5,12 +5,13 @@ import ConditionEdit from '../condition/condition_edit.js';
 
 export default class ConditionAction extends Component {
   // eslint-disable-next-line
-  render({ action, index, onChange }) {
+  render({ action, index, onChange, hass }) {
     return (
       <ConditionEdit
         condition={action}
         onChange={onChange}
         index={index}
+        hass={hass}
       />
     );
   }
diff --git a/js/common/component/script/index.js b/js/common/component/script/index.js
index dcf764729e..2d5ec54507 100644
--- a/js/common/component/script/index.js
+++ b/js/common/component/script/index.js
@@ -30,7 +30,7 @@ export default class Script extends Component {
     this.props.onChange(script);
   }
 
-  render({ script }) {
+  render({ script, hass }) {
     return (
       <div class="script">
         {script.map((act, idx) => (
@@ -38,6 +38,7 @@ export default class Script extends Component {
             index={idx}
             action={act}
             onChange={this.actionChanged}
+            hass={hass}
           />))}
         <paper-card>
           <div class='card-actions add-card'>
diff --git a/js/common/util/location.js b/js/common/util/location.js
new file mode 100644
index 0000000000..de86471ee0
--- /dev/null
+++ b/js/common/util/location.js
@@ -0,0 +1,4 @@
+export function hasLocation(stateObj) {
+  return ('latitude' in stateObj.attributes &&
+          'longitude' in stateObj.attributes);
+}
diff --git a/panels/config/automation/ha-automation-editor.html b/panels/config/automation/ha-automation-editor.html
index 85cffe0585..3cb59bfc8e 100644
--- a/panels/config/automation/ha-automation-editor.html
+++ b/panels/config/automation/ha-automation-editor.html
@@ -16,6 +16,9 @@
 <link rel="import" href="../../../bower_components/paper-fab/paper-fab.html">
 <link rel="import" href="../../../bower_components/iron-autogrow-textarea/iron-autogrow-textarea.html">
 
+<link rel='import' href='../../../src/components/entity/ha-entity-picker.html'>
+<link rel='import' href='../../../src/components/ha-combo-box.html'>
+<link rel='import' href='../../../src/components/ha-service-picker.html'>
 <link rel='import' href='../../../src/util/hass-mixins.html'>
 
 <link rel="import" href="../ha-config-section.html">
@@ -117,6 +120,7 @@ class HaAutomationEditor extends window.hassMixins.EventsMixin(Polymer.Element)
     return {
       hass: {
         type: Object,
+        observer: '_updateComponent',
       },
 
       narrow: {
@@ -160,7 +164,7 @@ class HaAutomationEditor extends window.hassMixins.EventsMixin(Polymer.Element)
 
       isWide: {
         type: Boolean,
-        observer: 'isWideChanged',
+        observer: '_updateComponent',
       },
     };
   }
@@ -169,6 +173,7 @@ class HaAutomationEditor extends window.hassMixins.EventsMixin(Polymer.Element)
     super.ready();
     this.configChanged = this.configChanged.bind(this);
     this._rendered = null;
+    this._renderScheduled = false;
   }
 
   disconnectedCallback() {
@@ -184,13 +189,13 @@ class HaAutomationEditor extends window.hassMixins.EventsMixin(Polymer.Element)
     this.config = config;
     this.errors = null;
     this.dirty = true;
-    this._updateComponent(config);
+    this._updateComponent();
   }
 
   automationChanged(newVal, oldVal) {
     if (!newVal) return;
     if (!this.hass) {
-      setTimeout(this.automationChanged.bind(this, newVal, oldVal), 0);
+      setTimeout(() => this.automationChanged(newVal, oldVal), 0);
       return;
     }
     if (oldVal && oldVal.attributes.id === newVal.attributes.id) {
@@ -230,11 +235,6 @@ class HaAutomationEditor extends window.hassMixins.EventsMixin(Polymer.Element)
     this._updateComponent();
   }
 
-  isWideChanged() {
-    if (this.config === null) return;
-    this._updateComponent();
-  }
-
   backTapped() {
     if (this.dirty &&
         // eslint-disable-next-line
@@ -245,11 +245,17 @@ class HaAutomationEditor extends window.hassMixins.EventsMixin(Polymer.Element)
   }
 
   _updateComponent() {
-    this._rendered = window.AutomationEditor(this.$.root, {
-      automation: this.config,
-      onChange: this.configChanged,
-      isWide: this.isWide,
-    }, this._rendered);
+    if (this._renderScheduled || !this.hass || !this.config) return;
+    this._renderScheduled = true;
+    Promise.resolve().then(() => {
+      this._rendered = window.AutomationEditor(this.$.root, {
+        automation: this.config,
+        onChange: this.configChanged,
+        isWide: this.isWide,
+        hass: this.hass,
+      }, this._rendered);
+      this._renderScheduled = false;
+    });
   }
 
   saveAutomation() {
diff --git a/panels/dev-service/ha-panel-dev-service.html b/panels/dev-service/ha-panel-dev-service.html
index 34aad313f6..6d9fede93e 100644
--- a/panels/dev-service/ha-panel-dev-service.html
+++ b/panels/dev-service/ha-panel-dev-service.html
@@ -8,9 +8,9 @@
 <link rel='import' href='../../bower_components/app-layout/app-toolbar/app-toolbar.html'>
 <link rel="import" href="../../bower_components/app-storage/app-localstorage/app-localstorage-document.html">
 
-<link rel="import" href="../../bower_components/vaadin-combo-box/vaadin-combo-box.html">
-
 <link rel='import' href='../../src/components/ha-menu-button.html'>
+<link rel='import' href='../../src/components/entity/ha-entity-picker.html'>
+<link rel='import' href='../../src/components/ha-service-picker.html'>
 <link rel='import' href='../../src/resources/ha-style.html'>
 
 <dom-module id='ha-panel-dev-service'>
@@ -28,7 +28,7 @@
 
       .ha-form {
         margin-right: 16px;
-        max-width: 500px;
+        max-width: 400px;
       }
 
       .description {
@@ -68,6 +68,14 @@
       h1 {
         white-space: normal;
       }
+
+      td {
+        padding: 4px;
+      }
+
+      .error {
+        color: var(--google-red-500);
+      }
     </style>
 
     <app-header-layout has-scrolling-region>
@@ -79,69 +87,77 @@
       </app-header>
 
       <app-localstorage-document
-        key='panel-dev-service-state-domain'
-        data='{{domain}}'>
+        key='panel-dev-service-state-domain-service'
+        data='{{domainService}}'>
       </app-localstorage-document>
       <app-localstorage-document
-        key='[[computeServiceKey(domain)]]'
-        data='{{service}}'>
-      </app-localstorage-document>
-      <app-localstorage-document
-        key='[[computeServicedataKey(domain, service)]]'
+        key='[[_computeServicedataKey(domainService)]]'
         data='{{serviceData}}'>
       </app-localstorage-document>
 
       <div class='content'>
         <p>
-          Call a service from a component.
+          The service dev tool allows you to call any available service in Home Assistant.
         </p>
 
         <div class='ha-form'>
-          <vaadin-combo-box label='Domain' items='[[computeDomains(serviceDomains)]]' value='{{domain}}'></vaadin-combo-box>
-          <vaadin-combo-box label='Service' items='[[computeServices(serviceDomains, domain)]]' value='{{service}}'></vaadin-combo-box>
+          <ha-service-picker
+            hass='[[hass]]'
+            value='{{domainService}}'
+          ></ha-service-picker>
+          <template is='dom-if' if='[[_computeHasEntity(_attributes)]]'>
+            <ha-entity-picker
+              hass='[[hass]]'
+              value='[[_computeEntityValue(parsedJSON)]]'
+              on-change='_entityPicked'
+              disabled='[[!validJSON]]'
+              domain-filter='[[_computeEntityDomainFilter(_domain)]]'
+              allow-custom-entity
+            ></ha-entity-picker>
+          </template>
           <paper-textarea
             always-float-label
             label='Service Data (JSON, optional)'
             value='{{serviceData}}'
           ></paper-textarea>
-          <paper-button on-tap='callService' raised>Call Service</paper-button>
+          <paper-button
+            on-tap='_callService'
+            raised
+            disabled='[[!validJSON]]'
+          >Call Service</paper-button>
+          <template is='dom-if' if='[[!validJSON]]'>
+              <span class='error'>Invalid JSON</span>
+          </template>
         </div>
 
-        <template is='dom-if' if='[[!domain]]'>
-          <h1>Select a domain and service to see the description</h1>
+        <template is='dom-if' if='[[!domainService]]'>
+          <h1>Select a service to see the description</h1>
         </template>
 
-        <template is='dom-if' if='[[domain]]'>
-          <template is='dom-if' if='[[!service]]'>
-            <h1>Select a service to see the description</h1>
+        <template is='dom-if' if='[[domainService]]'>
+          <template is='dom-if' if='[[!_description]]'>
+            <h1>No description is available</h1>
           </template>
-        </template>
+          <template is='dom-if' if='[[_description]]'>
+            <h3>[[_description]]</h3>
 
-        <template is='dom-if' if='[[domain]]'>
-          <template is='dom-if' if='[[service]]'>
-            <template is='dom-if' if='[[!_description]]'>
-              <h1>No description is available</h1>
-            </template>
-            <template is='dom-if' if='[[_description]]'>
-              <h3>[[_description]]</h3>
-            </template>
-            <template is='dom-if' if='[[_attributes.length]]'>
-              <h1>Valid Parameters</h1>
-              <table class='attributes'>
+            <table class='attributes'>
+              <tr>
+                <th>Parameter</th>
+                <th>Description</th>
+                <th>Example</th>
+              </tr>
+              <template is='dom-if' if='[[!_attributes.length]]'>
+                <tr><td colspan='3'>This service takes no parameters.</td></tr>
+              </template>
+              <template is='dom-repeat' items='[[_attributes]]' as='attribute'>
                 <tr>
-                  <th>Parameter</th>
-                  <th>Description</th>
-                  <th>Example</th>
+                  <td><pre>[[attribute.key]]</pre></td>
+                  <td>[[attribute.description]]</td>
+                  <td>[[attribute.example]]</td>
                 </tr>
-                <template is='dom-repeat' items='[[_attributes]]' as='attribute'>
-                  <tr>
-                    <td><pre>[[attribute.key]]</pre></td>
-                    <td>[[attribute.description]]</td>
-                    <td>[[attribute.example]]</td>
-                  </tr>
-                </template>
-              </table>
-            </template>
+              </template>
+            </table>
           </template>
         </template>
       </div>
@@ -151,128 +167,143 @@
 </dom-module>
 
 <script>
-class HaPanelDevService extends Polymer.Element {
-  static get is() { return 'ha-panel-dev-service'; }
+{
+  const ERROR_SENTINEL = {};
+  class HaPanelDevService extends Polymer.Element {
+    static get is() { return 'ha-panel-dev-service'; }
 
-  static get properties() {
-    return {
-      hass: {
-        type: Object,
-      },
+    static get properties() {
+      return {
+        hass: {
+          type: Object,
+        },
 
-      narrow: {
-        type: Boolean,
-        value: false,
-      },
+        narrow: {
+          type: Boolean,
+          value: false,
+        },
 
-      showMenu: {
-        type: Boolean,
-        value: false,
-      },
+        showMenu: {
+          type: Boolean,
+          value: false,
+        },
 
-      domain: {
-        type: String,
-        value: '',
-        observer: 'domainChanged',
-      },
+        domainService: {
+          type: String,
+          observer: '_domainServiceChanged',
+        },
 
-      service: {
-        type: String,
-        value: '',
-        observer: 'serviceChanged',
-      },
+        _domain: {
+          type: String,
+          computed: '_computeDomain(domainService)',
+        },
 
-      serviceData: {
-        type: String,
-        value: '',
-      },
+        _service: {
+          type: String,
+          computed: '_computeService(domainService)',
+        },
 
-      _attributes: {
-        type: Array,
-        computed: 'computeAttributesArray(serviceDomains, domain, service)',
-      },
+        serviceData: {
+          type: String,
+          value: '',
+        },
 
-      _description: {
-        type: String,
-        computed: 'computeDescription(serviceDomains, domain, service)',
-      },
+        parsedJSON: {
+          type: Object,
+          computed: '_computeParsedServiceData(serviceData)'
+        },
 
-      serviceDomains: {
-        type: Object,
-        computed: 'computeServiceDomains(hass)',
-      },
-    };
-  }
+        validJSON: {
+          type: Boolean,
+          computed: '_computeValidJSON(parsedJSON)',
+        },
 
-  computeServiceDomains(hass) {
-    return hass.config.services;
-  }
+        _attributes: {
+          type: Array,
+          computed: '_computeAttributesArray(hass, _domain, _service)',
+        },
 
-  computeAttributesArray(serviceDomains, domain, service) {
-    if (!serviceDomains) return [];
-    if (!(domain in serviceDomains)) return [];
-    if (!(service in serviceDomains[domain])) return [];
-
-    var fields = serviceDomains[domain][service].fields;
-    return Object.keys(fields).map(function (field) {
-      return Object.assign({}, fields[field], { key: field });
-    });
-  }
-
-  computeDescription(serviceDomains, domain, service) {
-    if (!serviceDomains) return undefined;
-    if (!(domain in serviceDomains)) return undefined;
-    if (!(service in serviceDomains[domain])) return undefined;
-    return serviceDomains[domain][service].description;
-  }
-
-  computeDomains(serviceDomains) {
-    return Object.keys(serviceDomains).sort();
-  }
-
-  computeServices(serviceDomains, domain) {
-    if (!(domain in serviceDomains)) return [];
-
-    return Object.keys(serviceDomains[domain]).sort();
-  }
-
-  computeServiceKey(domain) {
-    if (!domain) {
-      return 'panel-dev-service-state-service';
-    }
-    return 'panel-dev-service-state-service.' + domain;
-  }
-
-  computeServicedataKey(domain, service) {
-    if (!domain || !service) {
-      return 'panel-dev-service-state-servicedata';
-    }
-    return 'panel-dev-service-state-servicedata.' + domain + '.' + service;
-  }
-
-  domainChanged() {
-    this.service = '';
-    this.serviceData = '';
-  }
-
-  serviceChanged() {
-    this.serviceData = '';
-  }
-
-  callService() {
-    var serviceData;
-    try {
-      serviceData = this.serviceData ? JSON.parse(this.serviceData) : {};
-    } catch (err) {
-      /* eslint-disable no-alert */
-      alert('Error parsing JSON: ' + err);
-      /* eslint-enable no-alert */
-      return;
+        _description: {
+          type: String,
+          computed: '_computeDescription(hass, _domain, _service)',
+        },
+      };
     }
 
-    this.hass.callService(this.domain, this.service, serviceData);
+    _domainServiceChanged() {
+      this.serviceData = '';
+    }
+
+    _computeAttributesArray(hass, domain, service) {
+      const serviceDomains = hass.config.services;
+      if (!(domain in serviceDomains)) return [];
+      if (!(service in serviceDomains[domain])) return [];
+
+      const fields = serviceDomains[domain][service].fields;
+      return Object.keys(fields).map(function (field) {
+        return Object.assign({ key: field }, fields[field]);
+      });
+    }
+
+    _computeDescription(hass, domain, service) {
+      const serviceDomains = hass.config.services;
+      if (!(domain in serviceDomains)) return undefined;
+      if (!(service in serviceDomains[domain])) return undefined;
+      return serviceDomains[domain][service].description;
+    }
+
+    _computeServicedataKey(domainService) {
+      return `panel-dev-service-state-servicedata.${domainService}`;
+    }
+
+    _computeDomain(domainService) {
+      return domainService.split('.', 1)[0];
+    }
+
+    _computeService(domainService) {
+      return domainService.split('.', 2)[1] || null;
+    }
+
+    _computeParsedServiceData(serviceData) {
+      try {
+        return serviceData ? JSON.parse(serviceData) : {};
+      } catch (err) {
+        return ERROR_SENTINEL;
+      }
+    }
+
+    _computeValidJSON(parsedJSON) {
+      return parsedJSON !== ERROR_SENTINEL;
+    }
+
+    _computeHasEntity(attributes) {
+      return attributes.some(attr => attr.key === 'entity_id');
+    }
+
+    _computeEntityValue(parsedJSON) {
+      return parsedJSON === ERROR_SENTINEL ? '' : parsedJSON.entity_id;
+    }
+
+    _computeEntityDomainFilter(domain) {
+      return domain === 'homeassistant' ? null : domain;
+    }
+
+    _callService() {
+      if (this.parsedJSON === ERROR_SENTINEL) {
+        // eslint-disable-next-line
+        alert(`Error parsing JSON: ${this.serviceData}`);
+      }
+
+      this.hass.callService(this.domain, this.service, this.parsedJSON);
+    }
+
+    _entityPicked(ev) {
+      this.serviceData = JSON.stringify(Object.assign({}, this.parsedJSON, {
+        entity_id: ev.target.value
+      }), null, 2);
+    }
   }
+
+  customElements.define(HaPanelDevService.is, HaPanelDevService);
 }
-
-customElements.define(HaPanelDevService.is, HaPanelDevService);
 </script>
diff --git a/panels/dev-state/ha-panel-dev-state.html b/panels/dev-state/ha-panel-dev-state.html
index fb3cbd3120..1e16a7772d 100644
--- a/panels/dev-state/ha-panel-dev-state.html
+++ b/panels/dev-state/ha-panel-dev-state.html
@@ -10,7 +10,7 @@
 <link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
 
 <link rel="import" href="../../src/components/ha-menu-button.html">
-<link rel="import" href="../../src/components/entity/ha-entity-dropdown.html">
+<link rel="import" href="../../src/components/entity/ha-entity-picker.html">
 <link rel="import" href="../../src/resources/ha-style.html">
 
 <dom-module id="ha-panel-dev-state">
@@ -26,9 +26,9 @@
         padding: 16px;
       }
 
-      ha-entity-dropdown {
+      ha-entity-picker, .state-input, paper-textarea {
         display: block;
-        max-width: 300px;
+        max-width: 400px;
       }
 
       .entities th {
@@ -72,12 +72,18 @@
             This will not communicate with the actual device.
           </p>
 
-          <ha-entity-dropdown
+          <ha-entity-picker
             autofocus
             hass="[[hass]]"
             value="{{_entityId}}"
-          ></ha-entity-dropdown>
-          <paper-input label="State" required value='{{_state}}'></paper-input>
+            allow-custom-entity
+          ></ha-entity-picker>
+          <paper-input
+            label="State"
+            required
+            value='{{_state}}'
+            class='state-input'
+          ></paper-input>
           <paper-textarea label="State attributes (JSON, optional)" value='{{_stateAttributes}}'></paper-textarea>
           <paper-button on-tap='handleSetState' raised>Set State</paper-button>
         </div>
diff --git a/panels/mailbox/ha-panel-mailbox.html b/panels/mailbox/ha-panel-mailbox.html
index 50a177d715..f6096bddd9 100644
--- a/panels/mailbox/ha-panel-mailbox.html
+++ b/panels/mailbox/ha-panel-mailbox.html
@@ -12,8 +12,6 @@
 <link rel='import' href='../../bower_components/app-layout/app-toolbar/app-toolbar.html'>
 <link rel="import" href="../../bower_components/app-storage/app-localstorage/app-localstorage-document.html">
 
-<link rel="import" href="../../bower_components/vaadin-combo-box/vaadin-combo-box.html">
-
 <link rel='import' href='../../src/components/ha-menu-button.html'>
 <link rel='import' href='../../src/resources/ha-style.html'>
 
diff --git a/src/components/entity/ha-entity-dropdown.html b/src/components/entity/ha-entity-dropdown.html
deleted file mode 100644
index 76642cec2c..0000000000
--- a/src/components/entity/ha-entity-dropdown.html
+++ /dev/null
@@ -1,67 +0,0 @@
-<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
-<link rel="import" href="../../../bower_components/vaadin-combo-box/vaadin-combo-box.html">
-<link rel="import" href="../../../bower_components/paper-listbox/paper-listbox.html">
-<link rel="import" href="../../../bower_components/paper-item/paper-icon-item.html">
-<link rel="import" href="../../../bower_components/paper-item/paper-item-body.html">
-
-<link rel="import" href="./state-badge.html">
-
-<dom-module id="ha-entity-dropdown">
-  <template>
-    <vaadin-combo-box
-      autofocus="[[autofocus]]"
-      label="[[label]]"
-      items='[[computeStates(hass)]]'
-      item-value-path='entity_id'
-      item-label-path='entity_id'
-      value='{{value}}'
-    >
-      <template>
-        <style>
-          paper-icon-item {
-            margin: -13px -16px;
-          }
-        </style>
-        <paper-icon-item>
-          <state-badge state-obj="[[item]]" slot='item-icon'></state-badge>
-          <paper-item-body two-line>
-            <div>[[computeStateName(item)]]</div>
-            <div secondary>[[item.entity_id]]</div>
-          </paper-item-body>
-        </paper-icon-item>
-      </template>
-    </vaadin-combo-box>
-
-  </template>
-</dom-module>
-
-<script>
-class HaEntityDropdown extends Polymer.Element {
-  static get is() { return 'ha-entity-dropdown'; }
-
-  static get properties() {
-    return {
-      hass: Object,
-      autofocus: Boolean,
-      label: {
-        type: String,
-        value: 'Entity',
-      },
-      value: {
-        type: String,
-        notify: true,
-      }
-    };
-  }
-
-  computeStates(hass) {
-    return Object.keys(hass.states).sort().map(key => hass.states[key]);
-  }
-
-  computeStateName(state) {
-    return window.hassUtil.computeStateName(state);
-  }
-}
-
-customElements.define(HaEntityDropdown.is, HaEntityDropdown);
-</script>
diff --git a/src/components/entity/ha-entity-picker.html b/src/components/entity/ha-entity-picker.html
new file mode 100644
index 0000000000..25973b1f0a
--- /dev/null
+++ b/src/components/entity/ha-entity-picker.html
@@ -0,0 +1,152 @@
+<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../../../bower_components/vaadin-combo-box/vaadin-combo-box-light.html">
+<link rel="import" href="../../../bower_components/paper-item/paper-icon-item.html">
+<link rel="import" href="../../../bower_components/paper-item/paper-item-body.html">
+
+<link rel="import" href="./state-badge.html">
+
+<dom-module id="ha-entity-picker">
+  <template>
+    <style>
+      paper-input > paper-icon-button {
+        width: 24px;
+        height: 24px;
+        padding: 2px;
+        color: var(--secondary-text-color);
+      }
+      [hidden] {
+        display: none;
+      }
+    </style>
+    <vaadin-combo-box-light
+      items='[[_states]]'
+      item-value-path='entity_id'
+      item-label-path='entity_id'
+      value='{{value}}'
+      opened='{{opened}}'
+      allow-custom-value='[[allowCustomEntity]]'
+    >
+      <paper-input
+        autofocus="[[autofocus]]"
+        label="[[label]]"
+        class="input"
+        disabled='[[disabled]]'
+      >
+        <paper-icon-button
+          slot="suffix"
+          class="clear-button"
+          icon="mdi:close"
+          no-ripple
+          hidden$='[[!value]]'
+        >Clear</paper-icon-button>
+        <paper-icon-button
+          slot="suffix"
+          class="toggle-button"
+          icon='[[_computeToggleIcon(opened)]]'
+          hidden='[[!_states.length]]'
+        >Toggle</paper-icon-button>
+      </paper-input>
+      <template>
+        <style>
+          paper-icon-item {
+            margin: -10px;
+          }
+        </style>
+        <paper-icon-item>
+          <state-badge state-obj="[[item]]" slot='item-icon'></state-badge>
+          <paper-item-body two-line>
+            <div>[[computeStateName(item)]]</div>
+            <div secondary>[[item.entity_id]]</div>
+          </paper-item-body>
+        </paper-icon-item>
+      </template>
+    </vaadin-combo-box-light>
+  </template>
+</dom-module>
+
+<script>
+class HaEntityPicker extends Polymer.Element {
+  static get is() { return 'ha-entity-picker'; }
+
+  static get properties() {
+    return {
+      allowCustomEntity: {
+        type: Boolean,
+        value: false,
+      },
+      hass: {
+        type: Object,
+        observer: '_hassChanged',
+      },
+      _hass: Object,
+      _states: {
+        type: Array,
+        computed: '_computeStates(_hass, domainFilter, entityFilter)',
+      },
+      autofocus: Boolean,
+      label: {
+        type: String,
+        value: 'Entity',
+      },
+      value: {
+        type: String,
+        notify: true,
+      },
+      opened: {
+        type: Boolean,
+        value: false,
+        observer: '_openedChanged',
+      },
+      domainFilter: {
+        type: String,
+        value: null,
+      },
+      entityFilter: {
+        type: Function,
+        value: null,
+      },
+      disabled: Boolean,
+    };
+  }
+
+  _computeStates(hass, domainFilter, entityFilter) {
+    if (!hass) return [];
+
+    let entityIds = Object.keys(hass.states);
+
+    if (domainFilter) {
+      entityIds = entityIds.filter(eid => eid.substr(0, eid.indexOf('.')) === domainFilter);
+    }
+
+    let entities = entityIds.sort().map(key => hass.states[key]);
+
+    if (entityFilter) {
+      entities = entities.filter(entityFilter);
+    }
+
+    return entities;
+  }
+
+  computeStateName(state) {
+    return window.hassUtil.computeStateName(state);
+  }
+
+  _openedChanged(newVal) {
+    if (!newVal) {
+      this._hass = this.hass;
+    }
+  }
+
+  _hassChanged(newVal) {
+    if (!this.opened) {
+      this._hass = newVal;
+    }
+  }
+
+  _computeToggleIcon(opened) {
+    return opened ? 'mdi:menu-up' : 'mdi:menu-down';
+  }
+}
+
+customElements.define(HaEntityPicker.is, HaEntityPicker);
+</script>
diff --git a/src/components/ha-combo-box.html b/src/components/ha-combo-box.html
new file mode 100644
index 0000000000..03d4fa6b4a
--- /dev/null
+++ b/src/components/ha-combo-box.html
@@ -0,0 +1,106 @@
+<link rel="import" href="../../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../../bower_components/vaadin-combo-box/vaadin-combo-box-light.html">
+<link rel="import" href="../../bower_components/paper-item/paper-item.html">
+
+<dom-module id="ha-combo-box">
+  <template>
+    <style>
+      paper-input > paper-icon-button {
+        width: 24px;
+        height: 24px;
+        padding: 2px;
+        color: var(--secondary-text-color);
+      }
+      [hidden] {
+        display: none;
+      }
+    </style>
+    <vaadin-combo-box-light
+      items='[[items]]'
+      item-value-path='[[itemValuePath]]'
+      item-label-path='[[itemLabelPath]]'
+      value='{{value}}'
+      opened='{{opened}}'
+      allow-custom-value='[[allowCustomValue]]'
+    >
+      <paper-input
+        autofocus="[[autofocus]]"
+        label="[[label]]"
+        class="input"
+      >
+        <paper-icon-button
+          slot="suffix"
+          class="clear-button"
+          icon="mdi:close"
+          hidden$='[[!value]]'
+        >Clear</paper-icon-button>
+        <paper-icon-button
+          slot="suffix"
+          class="toggle-button"
+          icon='[[_computeToggleIcon(opened)]]'
+          hidden$='[[!items.length]]'
+          >Toggle</paper-icon-button>
+      </paper-input>
+      <template>
+        <style>
+            paper-item {
+              margin: -5px -10px;
+            }
+        </style>
+        <paper-item>[[_computeItemLabel(item, itemLabelPath)]]</paper-item>
+      </template>
+    </vaadin-combo-box-light>
+  </template>
+</dom-module>
+
+<script>
+class HaComboBox extends Polymer.Element {
+  static get is() { return 'ha-combo-box'; }
+
+  static get properties() {
+    return {
+      allowCustomValue: Boolean,
+      items: {
+        type: Object,
+        observer: '_itemsChanged',
+      },
+      _items: Object,
+      itemLabelPath: String,
+      itemValuePath: String,
+      autofocus: Boolean,
+      label: String,
+      opened: {
+        type: Boolean,
+        value: false,
+        observer: '_openedChanged',
+      },
+      value: {
+        type: String,
+        notify: true,
+      },
+    };
+  }
+
+  _openedChanged(newVal) {
+    if (!newVal) {
+      this._items = this.items;
+    }
+  }
+
+  _itemsChanged(newVal) {
+    if (!this.opened) {
+      this._items = newVal;
+    }
+  }
+
+  _computeToggleIcon(opened) {
+    return opened ? 'mdi:menu-up' : 'mdi:menu-down';
+  }
+
+  _computeItemLabel(item, itemLabelPath) {
+    return itemLabelPath ? item[itemLabelPath] : item;
+  }
+}
+
+customElements.define(HaComboBox.is, HaComboBox);
+</script>
diff --git a/src/components/ha-service-picker.html b/src/components/ha-service-picker.html
new file mode 100644
index 0000000000..602abf74e5
--- /dev/null
+++ b/src/components/ha-service-picker.html
@@ -0,0 +1,46 @@
+<link rel="import" href="../../bower_components/polymer/polymer-element.html">
+
+<link rel="import" href="./ha-combo-box.html">
+
+<dom-module id="ha-service-picker">
+  <template>
+    <ha-combo-box
+      label='Service'
+      items='[[_computeServices(hass)]]'
+      value='{{value}}'
+      allow-custom-value
+    ></ha-combo-box>
+  </template>
+</dom-module>
+
+<script>
+class HaServicePicker extends Polymer.Element {
+  static get is() { return 'ha-service-picker'; }
+
+  static get properties() {
+    return {
+      hass: Object,
+      value: {
+        type: String,
+        notify: true,
+      },
+    };
+  }
+
+  _computeServices(hass) {
+    const result = [];
+
+    Object.keys(hass.config.services).sort().forEach((domain) => {
+      const services = Object.keys(hass.config.services[domain]).sort();
+
+      for (let i = 0; i < services.length; i++) {
+        result.push(`${domain}.${services[i]}`);
+      }
+    });
+
+    return result;
+  }
+}
+
+customElements.define(HaServicePicker.is, HaServicePicker);
+</script>
diff --git a/src/resources/ha-style.html b/src/resources/ha-style.html
index b01a1adaba..355978d43f 100644
--- a/src/resources/ha-style.html
+++ b/src/resources/ha-style.html
@@ -4,6 +4,7 @@
 <style is="custom-style">/* remove is= on Polymer 2 */
   body {
     font-size: 14px;
+    height: 100vh;
 
     /* for paper-toggle-button */
     --paper-grey-50: #fafafa;
diff --git a/test-mocha/common/util/location.js b/test-mocha/common/util/location.js
new file mode 100644
index 0000000000..b563352b3c
--- /dev/null
+++ b/test-mocha/common/util/location.js
@@ -0,0 +1,38 @@
+import { hasLocation } from '../../../js/common/util/location';
+
+const assert = require('assert');
+
+describe('hasLocation', () => {
+  it('flags states with location', () => {
+    const stateObj = {
+      attributes: {
+        latitude: 12.34,
+        longitude: 12.34
+      }
+    };
+    assert(hasLocation(stateObj));
+  });
+  it('does not flag states with only latitude', () => {
+    const stateObj = {
+      attributes: {
+        latitude: 12.34,
+      }
+    };
+    assert(!hasLocation(stateObj));
+  });
+  it('does not flag states with only longitude', () => {
+    const stateObj = {
+      attributes: {
+        longitude: 12.34
+      }
+    };
+    assert(!hasLocation(stateObj));
+  });
+  it('does not flag states with no location', () => {
+    const stateObj = {
+      attributes: {
+      }
+    };
+    assert(!hasLocation(stateObj));
+  });
+});