update components

dashboard-ui/bower_components/iron-demo-helpers/url-bar.html

@@ -0,0 +1,71 @@
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../iron-location/iron-location.html">
+<link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
+
+<!--
+`url-bar` is a helper element that displays a simple read-only URL bar if
+and only if the page is in an iframe. In this way we can demo elements that
+deal with the URL in our iframe-based demo environments.
+
+If the page is not in an iframe, the url-bar element is not displayed.
+
+@element url-bar
+@demo demo/url-bar.html
+-->
+<dom-module id='url-bar'>
+  <template>
+    <style include="iron-flex">
+      :host {
+        margin: 0px;
+        padding: 15px 35px;
+        border-bottom: 2px solid gray;
+        height: 1em;
+        overflow: hidden;
+        display: none;
+      }
+      :host[in-iframe] {
+        /* This element only wants to be displayed if it's in an iframe. */
+        display: block;
+      }
+      label {
+        display: inline-block;
+        padding-right: 25px;
+      }
+      span {
+        font-family: monospace;
+        white-space: pre;
+      }
+    </style>
+    <iron-location path="{{path}}" query="{{query}}" hash="{{hash}}">
+    </iron-location>
+    <div class="layout horizontal">
+      <label>URL</label><span>{{url}}</span>
+    </div>
+  </template>
+  <script>
+    Polymer({
+      is: 'url-bar',
+      properties: {
+        url: {
+          computed: '__computeUrl(path, query, hash)'
+        },
+        inIframe: {
+          value: function() {
+            return window.top !== window;
+          },
+          reflectToAttribute: true
+        }
+      },
+      __computeUrl: function(path, query, hash) {
+        var url = path;
+        if (query) {
+          url += '?' + query;
+        }
+        if (hash) {
+          url += '#' + hash;
+        }
+        return url;
+      }
+    })
+  </script>
+</dom-module>