[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..25b51478fc695af6f84892e41d7dc15d755f2dda 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,
+    },
+
+    /**
+     * 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() {
@@ -91,6 +120,17 @@ Polymer({
   },
 
   /**
+   * Returns whether given string is undefined, null, empty, or whitespace only.
+   * @param {?string} str String to be tested.
+   * @return {boolean} |true| if the string is undefined, null, empty, or
+   *     whitespace.
+   * @private
+   */
+  isEmptyOrWhitespace_: function(str) {
+    return str === undefined || str === null || (/^\s*$/).test(str);
+  },
+
+  /**
    * Handles a click on the arrow button by firing an arrow-click event.
    *
    * @private
@@ -121,6 +161,34 @@ 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 && !this.isEmptyOrWhitespace_(this.userEmail) ?
+              this.headerWithEmailHeight_ + 'px' : undefined;
+
+      // Only fire if height actually changed.
+      if (currentHeight != this.offsetHeight) {
+        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.
    *