[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

 /* Copyright 2015 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
 .active-sink {
   color: var(--paper-blue-500);
 }
 
 .cast-mode-icon,
 .sink-icon {
@@ skipping 132 matching lines @@
 
 .sink-content {
   display: flex;
   flex-direction: row;
   font-weight: normal;
 }
 
 .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 {
   color: var(--subtext-color);
   padding-top: 8px;
 }
 
 .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;
 }
 
 #route-details {
   margin-top: var(--container-header-height);
 }