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

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

Index: chrome/browser/resources/media_router/elements/media_router_container/media_router_container.js
diff --git a/chrome/browser/resources/media_router/elements/media_router_container/media_router_container.js b/chrome/browser/resources/media_router/elements/media_router_container/media_router_container.js
index da84a48c968aed9d168b69a6b2add3a3ea449ed5..0b64fb2211975ecb6b1247634a04f6d6baebb12b 100644
--- a/chrome/browser/resources/media_router/elements/media_router_container/media_router_container.js
+++ b/chrome/browser/resources/media_router/elements/media_router_container/media_router_container.js
@@ -193,6 +193,15 @@ Polymer({
     },
 
     /**
+     * The height of the header when it shows the user email.
+     * @private {number}
+     */
+    headerWithEmailHeight_: {

[apacible, 2016/02/11 17:09:14]

Since the height there would be dependent on whether we show the email text,
could we move this property and maybeChangeHeaderHeight_() to
media-router-header?

[amp, 2016/02/11 21:21:24]

I'll attempt this as well, but it felt easier to keep the logic in here since
the list and mode views are also dependent on the height of the header.  I guess
we can just send an event from the header up to the container (but I'll need to
look up how to do that).

+      type: Number,
+      value: 62,

[apacible, 2016/02/11 17:09:14]

Add: readOnly: true,

[amp, 2016/02/11 21:21:24]

Done.

+    },
+
+    /**
      * The issue to show.
      * @type {?media_router.Issue}
      */
@@ -317,6 +326,15 @@ Polymer({
     },
 
     /**
+     * Whether to show the sink domain in the list..

[apacible, 2016/02/11 17:09:14]

nit: one period at the end.

[amp, 2016/02/11 21:21:24]

Done.

+     * @type {boolean}
+     */
+    showSinkDomain: {
+      type: Boolean,
+      value: false,
+    },
+
+    /**
      * The cast mode shown to the user. Initially set to auto mode. (See
      * media_router.CastMode documentation for details on auto mode.)
      * This value may be changed in one of the following ways:
@@ -428,6 +446,24 @@ Polymer({
   },
 
   /**
+   * Updates |container_header_| height to accomodate email text.
+   *
+   * @private
+   */
+  maybeChangeHeaderHeight_: function() {
+    if (this.showEmail && this.userEmail) {
+      // Changing the toolbar height here updates the container header height
+      // offset so that updateElementPositioning_ correctly positions all
+      // components.
+      this.$$('#container-header').$$('#header-toolbar').style.height =
+          this.headerWithEmailHeight_ + 'px';
+    } else {
+      this.$$('#container-header').$$('#header-toolbar').style.height =

[apacible, 2016/02/11 17:09:14]

What happens when the height is undefined?

[amp, 2016/02/11 21:21:24]

It starts out undefined so if it is set back to undefined it should revert to
the styling it was before.  You can also set it to '' for the same effect.

[apacible, 2016/02/12 21:26:15]

Acknowledged.

+          undefined;
+    }
+  },
+
+  /**
    * Fires a 'report-initial-action' event when the user takes their first
    * action after the dialog opens. Also fires a 'report-initial-action-close'
    * event if that initial action is to close the dialog.
@@ -550,6 +586,20 @@ Polymer({
   },
 
   /**
+   * @param {boolean} showEmail true if the email show be shown.
+   * @param {string} userEmail The users email text for the header.
+   * @return {string} The email text for the header.
+   * @private
+   */
+  computeEmailText_: function(showEmail, userEmail) {
+    var text = '';

[apacible, 2016/02/11 17:09:14]

return showEmail ? userEmail : '';

[amp, 2016/02/11 21:21:24]

Done.

+    if (showEmail) {
+      text = userEmail;
+    }
+    return text;
+  },
+
+  /**
    * @param {?media_router.MediaRouterView} view The current view.
    * @param {string} headerText The header text for the sink list.
    * @return {string} The text for the header.
@@ -724,15 +774,28 @@ Polymer({
   },
 
   /**
+   * Returns the text to be shown for the |domain|. Only called if
+   * |computeSinkDomainHidden_| returns false for the associated |sink|.
+   * @param {?string} domain
+   * @return {?string} The subtext to be shown.
+   * @private
+   */
+  computeSinkDomainText_: function(domain) {
+    var domainText = domain;

[apacible, 2016/02/11 17:09:14]

return domainText == 'default' ? this.userDomain : domain;

[amp, 2016/02/11 21:21:24]

Done.

+    if (domainText == 'default') {
+      domainText = this.userDomain;
+    }
+    return domainText;
+  },
+
+  /**
    * Returns whether the sink domain for |sink| should be hidden.
    * @param {!media_router.Sink} sink
    * @return {boolean} |true| if the domain should be hidden.
    * @private
    */
   computeSinkDomainHidden_: function(sink) {
-    // TODO(amp): Check the domain of Chrome profile identity and only show the
-    // sink domain if it doesn't match the profile domain. crbug.com/570797
-    return this.isEmptyOrWhitespace_(sink.domain);
+    return !this.showSinkDomain || this.isEmptyOrWhitespace_(sink.domain);
   },
 
   /**
@@ -1057,9 +1120,21 @@ Polymer({
   reindexSinksAndRebuildSinksToShow_: function() {
     this.sinkMap_ = {};
 
+    // We show the email if any sink has a domain.
+    var hasSinkWithDomain = false;
+    // We show the domain if any sink domain is not the user default domain.
+    var hasExternalDomain = false;
     this.allSinks.forEach(function(sink) {
       this.sinkMap_[sink.id] = sink;
+      if (sink.domain) {
+        hasSinkWithDomain = true;
+        hasExternalDomain = sink.domain != 'default' &&

[apacible, 2016/02/11 17:14:12]

If both hasSinkWithDomain and hasExternalDomain are true, break out of the loop
early. Otherwise, hasExternalDomain could be reset back to false.

[amp, 2016/02/11 21:21:24]

Nice catch, I can't break out of the loop here though, because the sinkMap is
still being rebuilt, but I'll make sure to only set showSinkDomain once.

Even with this change though, I still end up with this.showSinkDomain set to
true when it shouldn't be and I can't figure out why...

+            sink.domain != this.userDomain;
+      }
     }, this);
+    this.showEmail = hasSinkWithDomain;
+    this.showSinkDomain = hasExternalDomain;
+    this.updateElementPositioning_();
 
     this.rebuildSinksToShow_();
   },
@@ -1198,6 +1273,7 @@ Polymer({
   updateElementPositioning_: function() {
     // Ensures that conditionally templated elements have finished stamping.
     this.async(function() {
+      this.maybeChangeHeaderHeight_();

[apacible, 2016/02/11 17:09:14]

We only want to call this if there was a change to |showEmail|.

[amp, 2016/02/11 21:21:24]

Yea, there is probably a better way to do this with observers or something, but
I was just trying different things out and haven't dug into how to make it work
best with the available platform libraries etc.

A quick overview of what is possible/recommended in this regard would be useful.

       var headerHeight = this.$$('#container-header').offsetHeight;
       var firstRunFlowHeight = this.$$('#first-run-flow') &&
           this.$$('#first-run-flow').style.display != 'none' ?