Add top level app element

appengine/swarming/elements/res/imp/common/auth-signin.html

 <!--
   Copyright 2016 The LUCI Authors. All rights reserved.
   Use of this source code is governed under the Apache License, Version 2.0
   that can be found in the LICENSE file.
 
   The `auth-signin` element displays sign-in/sign-out button, user email and
   avatar.
   It has a google-signin/google-signin-aware element under the hood that handles
   the actual OAuth logic.
 
   Usage:
 
     <auth-signin></auth-signin>
 
   Properties:
     authHeaders: Object, Use this in iron-ajax to set oauth2 headers.
     authResponse: Object, The raw gapi.auth2.AuthResponse object.
     clientId: String, The client id to authenticate
     profile: Object, Read Only, The email address and imageurl of the logged in user.
     signedIn: Boolean, Read Only, if the user is logged in.
 
   Methods:
     signIn(): Signs the user in by popping up the authorization dialog.
     signOut(): Signs the user out.
 
   Events:
     auth-signin: Fired when the oauth handshake has completed and a user has logged in.
 -->
 
-<link rel="import" href="../../bower_components/google-signin/google-signin-aware.html">
-<link rel="import" href="../../bower_components/polymer/polymer.html">
+<link rel="import" href="/res/imp/bower_components/google-signin/google-signin-aware.html">
+<link rel="import" href="/res/imp/bower_components/polymer/polymer.html">
 
 
 <dom-module id="auth-signin">
   <template>
     <style>
       #avatar {
         border-radius: 5px;
       }
-      #signinContainer {
-        margin-top: 14px;
+      a {
+        color: white;
+      }
+      .center {
+        vertical-align: middle;
       }
     </style>
 
     <google-signin-aware id="aware"
       client-id="[[clientId]]"
       scopes="email"
       on-google-signin-aware-success="_onSignin"
       on-google-signin-aware-signed-out="_onSignout">
     </google-signin-aware>
 
     <template is="dom-if" if="[[!signedIn]]">
       <div id="signinContainer">
         <a on-tap="signIn" href="#">Sign in</a>
       </div>
     </template>
 
     <template is="dom-if" if="[[signedIn]]">
-      <img id="avatar" src="[[profile.imageUrl]]" width="30" height="30">
-      <span>[[profile.email]]</span>
-      <span>|</span>
-      <a on-tap="signOut" href="#">Sign out</a>
+      <img class="center" id="avatar" src="[[profile.imageUrl]]" width="30" height="30">
+      <span class="center" >[[profile.email]]</span>
+      <span class="center" >|</span>
+      <a class="center" on-tap="signOut" href="#">Sign out</a>
     </template>
   </template>
   <script>
     'use strict';
     Polymer({
       is: 'auth-signin',
       properties: {
         authHeaders: {
           type: Object,
           computed: "_makeHeader(authResponse)",
@@ skipping 46 matching lines @@
       signIn: function() {
         this.$.aware.signIn();
       },
 
       signOut: function() {
         this.$.aware.signOut();
       }
     });
   </script>
 </dom-module>