From 91b5ca95119e48e74566ecddf78c6a20675850fb Mon Sep 17 00:00:00 2001
From: c727 <crusader727@gmx.de>
Date: Mon, 12 Mar 2018 11:54:41 +0100
Subject: [PATCH] Added instructions for custom UIs to show up in the HA dev
 info panel (#4903)

* Update frontend_creating_custom_ui.markdown

Added instructions for custom UIs to show up in the HA dev info panel

https://github.com/home-assistant/home-assistant-polymer/pull/981

* Use note class

* Update frontend_creating_custom_ui.markdown
---
 .../frontend_creating_custom_ui.markdown        | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/source/developers/frontend_creating_custom_ui.markdown b/source/developers/frontend_creating_custom_ui.markdown
index c9da0cf1e22..d28623e8da1 100644
--- a/source/developers/frontend_creating_custom_ui.markdown
+++ b/source/developers/frontend_creating_custom_ui.markdown
@@ -53,6 +53,20 @@ frontend:
 </dom-module>
 
 <script>
+// show the version of your custom UI in the HA dev info panel (HA 0.66.0+):
+const CUSTOM_UI_NAME = 'state-card-my-custom-light';
+const CUSTOM_UI_VERSION = '20180312';
+const CUSTOM_UI_URL = 'https://home-assistant.io/developers/frontend_creating_custom_ui/';
+
+if (!window.CUSTOM_UI_LIST) {
+  window.CUSTOM_UI_LIST = [];
+}
+window.CUSTOM_UI_LIST.push({
+  name: CUSTOM_UI_NAME,
+  version: CUSTOM_UI_VERSION,
+  url: CUSTOM_UI_URL
+}); 
+
 class StateCardMyCustomLight extends Polymer.Element {
   static get is() { return 'state-card-my-custom-light'; }
   
@@ -77,5 +91,8 @@ class StateCardMyCustomLight extends Polymer.Element {
 customElements.define(StateCardMyCustomLight.is, StateCardMyCustomLight);
 </script>
 ```
+<p class='note'>
+Some browsers don't support latest ECMAScript standards, these require a separate ES5 compatible file (`extra_html_url_es5`).
+</p>
 
 For more possibilities, see the [Custom UI section](/cookbook/#user-interface) on our Examples page.