[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..51730dc22d0e70c8765e1f28bb459baa715b64d5 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,6 +36,16 @@ Polymer({
     },
 
     /**
+     * The height of the header when it shows the user email.
+     * @private {number}
+     */
+    headerWithEmailHeight_: {

[apacible, 2016/02/13 08:13:02]

nit: here and below, alphabetize properties.

[amp, 2016/02/16 22:19:12]

Done.

+      type: Number,
+      readOnly: true,
+      value: 62,

[amp, 2016/02/16 22:19:12]

Is there anything we should do here to reference the css somehow?

I get the feeling that we will update something in the css and this value will
become invalid and won't get noticed or be hard to find.

+    },
+
+    /**
      * The current view that this header should reflect.
      * @type {?media_router.MediaRouterView}
      */
@@ -53,6 +63,16 @@ Polymer({
       type: String,
       value: '',
     },
+
+    /**
+     * Whether to show the user email in the header.
+     * @type {boolean}
+     */
+    showEmail: {
+      type: Boolean,
+      value: false,
+      observer: 'maybeChangeHeaderHeight_',
+    },
   },
 
   attached: function() {
@@ -121,6 +141,32 @@ Polymer({
   },
 
   /**
+   * Updates header height to accomodate email text.
+   *
+   * @private
+   */
+  maybeChangeHeaderHeight_: function() {

[apacible, 2016/02/13 08:13:02]

The function can return early if |showEmail| was never changed.

maybeChangeHeaderHeight_: function(newValue, oldValue) {
  if (newValue == oldValue)
    return;
  ...
}

https://www.polymer-project.org/1.0/docs/devguide/properties.html#change-call...

[amp, 2016/02/16 22:19:12]

Done.

+    // Ensures conditional templates are stamped.
+    this.async(function() {
+      // can we get the offset Height like this?

[apacible, 2016/02/13 08:13:02]

Yes. (just checked)

[amp, 2016/02/16 22:19:12]

Acknowledged.

+      var currentHeight = this.offsetHeight;
+      if (this.showEmail && this.userEmail) {

[apacible, 2016/02/13 08:13:02]

this.$$('#header-toolbar').style.height = this.showEmail && this.userEmail ?
    this.headerWithEmailHeight_ + 'px' : undefined;

[apacible, 2016/02/13 08:13:02]

Check if |userEmail| is empty/null/whitespace?

[amp, 2016/02/16 22:19:12]

Done. I didn't want to redefine the method in the header as well as the
container, so I call back up into the container, but it looks kind of ugly.  Let
me know if you would prefer something else in that regard.

+        this.$$('#header-toolbar').style.height =
+            this.headerWithEmailHeight_ + 'px';
+      } else {
+        // unset the style to go back to defaults.
+        this.$$('#header-toolbar').style.height =
+            undefined;
+      }
+      var newHeight = this.offsetHeight;
+      // only fire this if it actually changed
+      if (currentHeigt != newHeight) {

[apacible, 2016/02/13 08:13:02]

currentHeight

[amp, 2016/02/16 22:19:12]

Done.

+        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.
    *