Update Media Router cast mode list style.

Changes to reflect UI spec:
- Add icons to the cast mode list.
- Sizing, alignment, and color modifications.

Changes (pixels, colors) taken from redlines or from offline conversation with UX.

BUG=501452

Review URL: https://codereview.chromium.org/1230633002

Cr-Commit-Position: refs/heads/master@{#338193}

3 files changed, 22 insertions, 32 deletions

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 b331aa5..1eaa302 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
@@ -6,23 +6,6 @@
   color: rgb(33, 150, 243);
 }
 
-.cast-mode {
-  -webkit-padding-start: 5px;
-  cursor: pointer;
-  font-size: 1.0em;
-}
-
-.cast-mode:hover {
-  background-color: rgb(187, 206, 236);
-  border: 0;
-}
-
-#cast-mode-list {
-  -webkit-user-select: none;
-  color: rgb(44, 44, 44);
-  margin: 0;
-}
-
 #container-header.cast-mode {
   /* TODO(kdresner): Update this when we get a real color. */
   background-color: rgb(244, 67, 54);
@@ -59,8 +42,7 @@
   color: rgb(150, 150, 150);
 }
 
-.sink {
-  -webkit-user-select: none;
+paper-item {
   cursor: pointer;
   font-size: 1.0em;
   line-height: 0;
@@ -68,28 +50,32 @@
   padding: 14px 0;
 }
 
-.sink:hover {
-  background-color: rgb(187, 206, 236);
+paper-item:hover {
+  background-color: rgb(238, 238, 238);
   border: 0;
 }
 
-.sink-content {
-  display: flex;
-  flex-direction: row;
-}
-
-.sink-icon {
+paper-item iron-icon {
   -webkit-padding-end: 16px;
   -webkit-padding-start: 20px;
   height: 16px;
   width: 16px;
 }
 
+paper-menu {
+  -webkit-user-select: none;
+  color: rgb(0, 0, 0);
+  padding: 0;
+}
+
+.sink-content {
+  display: flex;
+  flex-direction: row;
+}
+
 #sink-list {
-  margin: 0;
   max-height: 275px;
   overflow-y: scroll;
-  padding: 0;
 }
 
 .sink-text {
diff --git a/chrome/browser/resources/media_router/elements/media_router_container/media_router_container.html b/chrome/browser/resources/media_router/elements/media_router_container/media_router_container.html
index 073123b..cf10eb7 100644
--- a/chrome/browser/resources/media_router/elements/media_router_container/media_router_container.html
+++ b/chrome/browser/resources/media_router/elements/media_router_container/media_router_container.html
@@ -34,7 +34,11 @@
         hidden$="[[computeCastModeHidden_(currentView_)]]">
       <template is="dom-repeat" id="castModeList" items="[[castModeList]]">
         <paper-item class="cast-mode" on-click="onCastModeClick_">
-          <span>[[item.description]]</span>
+          <!-- TODO(apacible): Show icon based on cast mode. -->
+          <iron-icon icon="tab"></iron-icon>
+          <div>
+            <span>[[item.description]]</span>
+          </div>
         </paper-item>
       </template>
     </paper-menu>
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 8058012..d6f6090 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
@@ -258,11 +258,11 @@ Polymer({
    * @param {!string} sinkId A sink ID.
    * @param {!Object<!string, ?media_router.Route>} sinkToRouteMap
    *     Maps media_router.Sink.id to corresponding media_router.Route.
-   * @return {string} The class(es) for the sink icon.
+   * @return {string} The class for the sink icon.
    * @private
    */
   computeSinkIconClass_: function(sinkId, sinkToRouteMap) {
-    return sinkToRouteMap[sinkId] ? 'sink-icon active-sink' : 'sink-icon';
+    return sinkToRouteMap[sinkId] ? 'active-sink' : '';
   },
 
   /**