[Media Router] Show user email in header if cloud sink is present.

chrome/browser/resources/media_router/elements/media_router_header/media_router_header.js

Index: chrome/browser/resources/media_router/elements/media_router_header/media_router_header.js
diff --git a/chrome/browser/resources/media_router/elements/media_router_header/media_router_header.js b/chrome/browser/resources/media_router/elements/media_router_header/media_router_header.js
index 3afac7f4c94f5f801b7cd3894fa72c585f64f2aa..72ff40f254624433a70d4db8b031abcd585bde73 100644
--- a/chrome/browser/resources/media_router/elements/media_router_header/media_router_header.js
+++ b/chrome/browser/resources/media_router/elements/media_router_header/media_router_header.js
@@ -36,13 +36,23 @@ Polymer({
     },
 
     /**
-     * The current view that this header should reflect.
-     * @type {?media_router.MediaRouterView}
+     * The height of the header when it shows the user email.
+     * @private {number}
      */
-    view: {
-      type: String,
-      value: null,
-      observer: 'updateHeaderCursorStyle_',
+    headerWithEmailHeight_: {
+      type: Number,
+      readOnly: true,
+      value: 62,

[imcheng, 2016/02/17 00:51:08]

nit: seems like you can just make this a String '62px'.

[amp, 2016/02/17 02:11:37]

It would work as a string, but if we ever need to calculate anything off this
value (which doesn't sound too far fetched) a number makes more sense.  Also we
have a different Height variable in the container.js that is also a number, so
there is parity with the style there.

I can change it if you feel strongly about it.

+    },
+
+    /**
+     * Whether to show the user email in the header.
+     * @type {boolean}
+     */
+    showEmail: {
+      type: Boolean,
+      value: false,
+      observer: 'maybeChangeHeaderHeight_',
     },
 
     /**
@@ -53,6 +63,25 @@ Polymer({
       type: String,
       value: '',
     },
+
+    /**
+     * The user email if they are signed in.
+     * @type {string}
+     */
+    userEmail: {
+      type: String,
+      value: '',
+    },
+
+    /**
+     * The current view that this header should reflect.
+     * @type {?media_router.MediaRouterView}
+     */
+    view: {
+      type: String,
+      value: null,
+      observer: 'updateHeaderCursorStyle_',
+    },
   },
 
   attached: function() {
@@ -121,6 +150,36 @@ Polymer({
   },
 
   /**
+   * Updates header height to accomodate email text. This is called on changes
+   * to |showEmail| and will return early if the value has not changed.
+   *
+   * @param {boolean} oldValue .
+   * @param {boolean} newValue .
+   * @private
+   */
+  maybeChangeHeaderHeight_: function(oldValue, newValue) {
+    if (oldValue == newValue) {
+      return;
+    }
+
+    // Ensures conditional templates are stamped.
+    this.async(function() {
+      var currentHeight = this.offsetHeight;
+
+      this.$$('#header-toolbar').style.height =
+          this.showEmail &&
+          !$('media-router-container').isEmptyOrWhitespace_(this.userEmail) ?
+          this.headerWithEmailHeight_ + 'px' : undefined;
+
+      var newHeight = this.offsetHeight;
+      // Only fire if height actually changed.
+      if (currentHeight != newHeight) {
+        this.fire('header-height-changed');
+      }
+    });
+  },
+
+  /**
    * Updates the cursor style for the header text when the view changes. When
    * the drop arrow is also shown, the header text is also clickable.
    *