[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..b22f9d262b4df62bc68bf3c413deedfddc1103fd 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
@@ -150,6 +150,13 @@ paper-menu {
 .sink-domain {
   -webkit-padding-start: 6px;
   color: var(--subtext-color);
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.sink-name {

[apacible, 2016/02/25 00:16:02]

nit: I'd do something like --

.sink-domain {
  -webkit-padding-start: 6px;
  color: var(--subtext-color);
}

.sink-domain,
.sink-subtext {
  overflow: hidden;
  text-overflow: ellipsis;
}

That way any future changes related to the text and how they're handled will be
handled at once, and this will deter from styling not staying uniform.

(per offline discussion) Also, add a TODO to update this based on discussion
with UX?

[amp, 2016/02/25 03:01:14]

I ended up not having overflow for the domain (per previous security/privacy
discussion about making sure we always show it), but I did add a TODO to address
this at some point.  In practice I don't think there will be that many long
domain names to worry about.

I also set the sink-name to have a min-width of 10% so at least something shows
up, and set a title on both (in the html) so that a mouseover will display the
full content (I'm assuming accessibility works in this case as well).

+  overflow: hidden;
+  text-overflow: ellipsis
 }
 
 .sink-subtext {
@@ -159,10 +166,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;
 }