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

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

Index: chrome/browser/resources/media_router/elements/media_router_container/media_router_container.css
diff --git a/chrome/browser/resources/media_router/elements/media_router_container/media_router_container.css b/chrome/browser/resources/media_router/elements/media_router_container/media_router_container.css
index b9f4735866526b584f3adcd53fbaa9dfb780185f..9c1789547370ffdc39f8fc2d4a968972c1d4b126 100644
--- a/chrome/browser/resources/media_router/elements/media_router_container/media_router_container.css
+++ b/chrome/browser/resources/media_router/elements/media_router_container/media_router_container.css
@@ -152,6 +152,11 @@ paper-menu {
   color: var(--subtext-color);
 }
 
+.sink-name {

[apacible, 2016/02/23 21:51:00]

Should this treatment also be used for very long domains?

[amp, 2016/02/24 00:29:22]

I considered this.  As it is now, a long domain name can completely overflow the
sink name.

I think we want to set it's max width to something like 20% so there will always
be at least part of the sink name to compare against, but in practice I expect
the vast majority of domain names to be the shorter of the two.

WDYT?

I tried out some various combinations in the css, but nothing looks really good
in all the different scenarios (perhaps easier to discuss offline).

+  overflow: hidden;
+  text-overflow: ellipsis
+}
+
 .sink-subtext {
   color: var(--subtext-color);
   padding-top: 8px;
@@ -159,10 +164,10 @@ paper-menu {
 
 .sink-text {
   -webkit-padding-end: var(--dialog-padding-end);
+  display: inline-flex;
   flex-direction: row;
+  flex-flow: row nowrap;
   line-height: normal;
-  overflow: hidden;
-  text-overflow: ellipsis;
   white-space: nowrap;
   width: 250px;
 }