Media Router: Replace sink custom elements with core/paper elements.

- Removes media-router-sink custom element.
- Removes media-router-sink-picker custom element.
- Replaces media-router-sink with paper-item (material).
- Replaces media-router-sink-picker with core-menu.
- Removes sink type icons.

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

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

chrome/browser/media_router_resources.grdp

@@ -21,18 +21,11 @@
   <include name="IDR_MEDIA_ROUTER_CONTAINER_HTML" file="resources\media_router\elements\media_router_container\media_router_container.html" type="BINDATA" />
   <include name="IDR_MEDIA_ROUTER_CONTAINER_CSS" file="resources\media_router\elements\media_router_container\media_router_container.css" type="BINDATA" />
   <include name="IDR_MEDIA_ROUTER_CONTAINER_JS" file="resources\media_router\elements\media_router_container\media_router_container.js" type="BINDATA" />
-  <include name="IDR_MEDIA_ROUTER_SINK_HTML" file="resources\media_router\elements\media_router_sink\media_router_sink.html" type="BINDATA" />
-  <include name="IDR_MEDIA_ROUTER_SINK_JS" file="resources\media_router\elements\media_router_sink\media_router_sink.js" type="BINDATA" />
-  <include name="IDR_MEDIA_ROUTER_SINK_CSS" file="resources\media_router\elements\media_router_sink\media_router_sink.css" type="BINDATA" />
-  <include name="IDR_MEDIA_ROUTER_SINK_PICKER_HTML" file="resources\media_router\elements\media_router_sink_picker\media_router_sink_picker.html" type="BINDATA" />
-  <include name="IDR_MEDIA_ROUTER_SINK_PICKER_JS" file="resources\media_router\elements\media_router_sink_picker\media_router_sink_picker.js" type="BINDATA" />
   <include name="IDR_ROUTE_DETAILS_HTML" file="resources\media_router\elements\route_details\route_details.html" type="BINDATA" />
   <include name="IDR_ROUTE_DETAILS_CSS" file="resources\media_router\elements\route_details\route_details.css" type="BINDATA" />
   <include name="IDR_ROUTE_DETAILS_JS" file="resources\media_router\elements\route_details\route_details.js" type="BINDATA" />
 
   <!-- Icons -->
-  <include name="IDR_MEDIA_ROUTER_CHROMECAST_ICON" file="resources\media_router\elements\icon\chromecast-icon.png" type="BINDATA" />
-  <include name="IDR_MEDIA_ROUTER_CHROMECAST_2X_ICON" file="resources\media_router\elements\icon\chromecast-icon2x.png" type="BINDATA" />
   <include name="IDR_CLOSE_GRAY_ICON" file="resources\media_router\elements\icon\close-gray.png" type="BINDATA" />
   <include name="IDR_CLOSE_GRAY_2X_ICON" file="resources\media_router\elements\icon\close-gray2x.png" type="BINDATA" />
   <include name="IDR_DROP_DOWN_ARROW_ICON" file="resources\media_router\elements\icon\drop-down-arrow.png" type="BINDATA" />
@@ -41,10 +34,6 @@
   <include name="IDR_DROP_DOWN_ARROW_HOVER_2X_ICON" file="resources\media_router\elements\icon\drop-down-arrow-hover2x.png" type="BINDATA" />
   <include name="IDR_DROP_DOWN_ARROW_SHOWING_ICON" file="resources\media_router\elements\icon\drop-down-arrow-showing.png" type="BINDATA" />
   <include name="IDR_DROP_DOWN_ARROW_SHOWING_2X_ICON" file="resources\media_router\elements\icon\drop-down-arrow-showing2x.png" type="BINDATA" />
-  <include name="IDR_MEDIA_ROUTER_GENERIC_DEVICE_ICON" file="resources\media_router\elements\icon\generic-device.png" type="BINDATA" />
-  <include name="IDR_MEDIA_ROUTER_GENERIC_DEVICE_2X_ICON" file="resources\media_router\elements\icon\generic-device2x.png" type="BINDATA" />
-  <include name="IDR_MEDIA_ROUTER_HANGOUTS_ICON" file="resources\media_router\elements\icon\hangouts-icon.png" type="BINDATA" />
-  <include name="IDR_MEDIA_ROUTER_HANGOUTS_2X_ICON" file="resources\media_router\elements\icon\hangouts-icon2x.png" type="BINDATA" />
   <include name="IDR_SAD_FACE_ICON" file="resources\media_router\elements\icon\sad-face.png" type="BINDATA" />
   <include name="IDR_SAD_FACE_2X_ICON" file="resources\media_router\elements\icon\sad-face2x.png" type="BINDATA" />
 </grit-part>

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

@@ -5,6 +5,7 @@
 #cast-modes {
   margin: 30px 0;
   position: absolute;
+  z-index: 1;
 }
 
 :host-context(html[dir='ltr']) #cast-modes {
@@ -40,6 +41,10 @@
   display: none;
 }
 
+.route {
+  color: rgb(119, 119, 119);
+}
+
 #router-header-text {
   -webkit-padding-start: 20px;
   flex-grow: 1;
@@ -50,7 +55,23 @@
   padding-top: 10px;
 }
 
-#sinks {
+.sink {
+  -webkit-user-select: none;
+  cursor: pointer;
+  font-size: 1.0em;
+}
+
+.sink:hover {
+  background-color: rgb(187, 206, 236);
+  border: 0;
+}
+
+.sink-icon {
+  -webkit-padding-end: 10px;
+}
+
+#sink-list {
+  margin: 0;
   max-height: 275px;
   overflow-y: scroll;
 }
@@ -60,4 +81,5 @@
   height: 100%;
   position: absolute;
   width: 100%;
+  z-index: 1;
 }
\ No newline at end of file

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

 <link rel="import" href="chrome://resources/polymer/polymer/polymer.html">
+<link rel="import" href="chrome://resources/polymer/core-icon/core-icon.html">
+<link rel="import" href="chrome://resources/polymer/core-icons/hardware-icons.html">
+<link rel="import" href="chrome://resources/polymer/core-menu/core-menu.html">
+<link rel="import" href="chrome://resources/polymer/paper-item/paper-item.html">
 <link rel="import" href="../cast_mode_picker/cast_mode_picker.html">
 <link rel="import" href="../drop_down_button/drop_down_button.html">
 <link rel="import" href="../issue_banner/issue_banner.html">
-<link rel="import" href="../media_router_sink_picker/media_router_sink_picker.html">
 <link rel="import" href="../route_details/route_details.html">
 <polymer-element name="media-router-container">
 <template>
@@ -33,12 +36,28 @@
       on-back-click="{{showSinkPickerView}}"
       on-close-route-click="{{showSinkPickerView}}">
   </route-details>
-  <media-router-sink-picker id="sinks"
-      class="{{ {state: currentView_} | isSinkPickerHidden}}"
-      on-sink-click="{{onSinkClick}}"
-      sinkList="{{sinkList}}" routeList="{{routeList}}" sinkMap="{{sinkMap_}}"
-      routeMap="{{routeMap_}}" sinkToRouteMap="{{sinkToRouteMap_}}">
-  </media-router-sink-picker>
+  <!-- TODO(apacible): selectedAttribute here is a workaround for
+     https://github.com/Polymer/polymer/issues/946. Remove when core-menu
+     is updated. -->
+  <core-menu id="sink-list" selectedAttribute=""
+      class="{{ {state: currentView_} | isSinkPickerHidden}}">
+    <template repeat="{{sink in sinkList}}">
+      <paper-item class="sink" on-click="{{onSinkClick}}">
+        <!-- TODO(apacible): Show device icon based on device type. -->
+        <core-icon class="sink-icon" icon="hardware:chromecast"></core-icon>
+        <div>
+          {{sink.name}}
+          <template bind="{{sinkToRouteMap_[sink.id] as route}}">
+            <template if="{{route}}">
+              <div class="route">
+                {{route.title}}
+              </div>
+            </template>
+          </template>
+        </div>
+      </paper-item>
+    </template>
+  </core-menu>
 </template>
 <script src="media_router_container.js"></script>
 </polymer-element>

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

@@ -131,8 +131,8 @@ Polymer('media-router-container', {
   sinkMap_: null,
 
   /**
-   * Maps media_router.Sink.id to corresponding media_router.Route.id.
-   * @private {?Object<!string, ?string>}
+   * Maps media_router.Sink.id to corresponding media_router.Route.
+   * @private {?Object<!string, ?media_router.Route>}
    * @default null
    */
   sinkToRouteMap_: null,
@@ -261,17 +261,16 @@ Polymer('media-router-container', {
   },
 
   /**
-   * Called when an on-sink-click event bubbles up. Updates |currentRoute_|.
+   * Called when a sink is clicked. Updates |currentRoute_|.
    *
-   * @param {{detail: {route: ?media_router.Route, sink: !media_router.Sink}}}
-   *   data The information passed up with the event.
-   * Parameters in |data|.detail:
-   *   route - The existing route associated with |sink|.
-   *   sink - The sink that was clicked.
+   * @param {!Event} event The event object.
+   * @param {Object} detail The details of the event.
+   * @param {!Element} sender Reference to clicked node.
    */
-  onSinkClick: function(data) {
-    this.currentRoute_ = data.detail.route;
-    this.maybeCreateRoute(data.detail.sink, this.currentRoute_);
+  onSinkClick: function(event, detail, sender) {
+    var clickedSink = event.target.templateInstance.model.sink;
+    this.currentRoute_ = this.sinkToRouteMap_[clickedSink.id];
+    this.maybeCreateRoute(clickedSink, this.currentRoute_);
   },
 
   /**
@@ -286,7 +285,7 @@ Polymer('media-router-container', {
     // Rebuild |routeMap_| and |sinkToRouteMap_|.
     this.routeList.forEach(function(route) {
       this.routeMap_[route.id] = route;
-      this.sinkToRouteMap_[route.sinkId] = route.id;
+      this.sinkToRouteMap_[route.sinkId] = route;
     }, this);
   },
 

chrome/browser/resources/media_router/elements/media_router_sink/media_router_sink.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. */
-
-.cast-device {
-  background-image: -webkit-image-set(
-    url(../icon/chromecast-icon.png) 1x,
-    url(../icon/chromecast-icon2x.png) 2x);
-}
-
-.device {
-  -webkit-padding-end: 8px;
-  background-repeat: no-repeat;
-  display: inline-block;
-  height: 18px;
-  vertical-align: middle;
-  width: 18px;
-}
-
-.generic-device {
-  background-image: -webkit-image-set(
-    url(../icon/generic-device.png) 1x,
-    url(../icon/generic-device2x.png) 2x);
-}
-
-.hangouts-device {
-  background-image: -webkit-image-set(
-    url(../icon/hangouts-icon.png) 1x,
-    url(../icon/hangouts-icon2x.png) 2x);
-}
-
-.sink {
-  -webkit-padding-start: 11px;
-  -webkit-user-select: none;
-  cursor: pointer;
-  line-height: 3em;
-  padding-bottom: 4px;
-}
-
-.sink:hover {
-  background-color: rgb(187, 206, 236);
-  border: 0;
-}
-
-.route {
-  -webkit-padding-start: 28px;
-  color: rgb(119, 119, 119);
-  line-height: 0.875em;
-}

chrome/browser/resources/media_router/elements/media_router_sink/media_router_sink.html

-<link rel="import" href="chrome://resources/polymer/polymer/polymer.html">
-<polymer-element name="media-router-sink">
-<template>
-  <link rel="stylesheet" href="media_router_sink.css">
-  <div class="sink">
-    <!-- TODO(apacible): Show device icon based on device type. -->
-    <div class="device cast-device"></div>
-    <span>{{sink.name}}</span>
-    <template if="{{route}}">
-      <div class="route">{{route.title}}</div>
-    </template>
-  </div>
-</template>
-<script src="media_router_sink.js"></script>
-</polymer-element>

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

-// 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.
-
-// This Polymer element shows information about a media sink.
-Polymer('media-router-sink', {
-  publish: {
-    /**
-     * The sink to show.
-     *
-     * @attribute sink
-     * @type {media_router.Sink}
-     * @default null
-     */
-    sink: null,
-
-    /**
-     * The route to show.
-     *
-     * @attribute route
-     * @type {media_router.Route}
-     * @default null
-     */
-    route: null,
-  },
-});

chrome/browser/resources/media_router/elements/media_router_sink_picker/media_router_sink_picker.html

-<link rel="import" href="chrome://resources/polymer/polymer/polymer.html">
-<link rel="import" href="../media_router_sink/media_router_sink.html">
-<polymer-element name="media-router-sink-picker">
-<template>
-  <div>
-    <template repeat="{{sink in sinkList}}">
-      <media-router-sink on-click="{{onClickSink}}" sink="{{sink}}"
-      	  route="{{routeMap[sinkToRouteMap[sink.id]]}}">
-      </media-router-sink>
-    </template>
-  </div>
-</template>
-<script src="media_router_sink_picker.js"></script>
-</polymer-element>

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

-// 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.
-
-// This Polymer element shows a list of discovered sinks and their routes,
-// if they exist.
-Polymer('media-router-sink-picker', {
-  publish: {
-    /**
-     * Maps media_router.Route.id to corresponding media_router.Route.
-     *
-     * @attribute routeMap
-     * @type {?Object<string, !media_router.Route>}
-     * @default null
-     */
-    routeMap: null,
-
-    /**
-     * List of discovered sinks.
-     *
-     * @attribute sinkList
-     * @type {?Array<!media_router.Sink>}
-     * @default null
-     */
-    sinkList: null,
-
-    /**
-     * Maps media_router.Sink.id to corresponding media_router.Route.id.
-     *
-     * @attribute sinkToRouteMap
-     * @type {?Object<!string, ?string>}
-     * @default null
-     */
-    sinkToRouteMap: null,
-  },
-
-  created: function() {
-    this.routeMap = {};
-    this.sinkList = [];
-    this.sinkToRouteMap = {};
-  },
-
-  /**
-   * Fires a sink-click event. This is called when a media-router-sink
-   * is clicked.
-   *
-   * @param {!Event} event The event object.
-   * @param {Object} detail The details of the event.
-   * @param {!Element} sender Reference to clicked node.
-   */
-  onClickSink: function(event, detail, sender) {
-    // TODO(imcheng): Indicate route request is in progress.
-    // TODO(imcheng): Only allow one request route at a time.
-    this.fire('sink-click', {
-        sink: sender.sink,
-        route: sender.route
-    });
-  },
-});

chrome/browser/ui/webui/media_router/media_router_resources_provider.cc

@@ -10,10 +10,6 @@
 namespace {
 
 void AddIcons(content::WebUIDataSource* html_source) {
-  html_source->AddResourcePath("elements/icon/chromecast-icon.png",
-                              IDR_MEDIA_ROUTER_CHROMECAST_ICON);
-  html_source->AddResourcePath("elements/icon/chromecast-icon2x.png",
-                              IDR_MEDIA_ROUTER_CHROMECAST_2X_ICON);
   html_source->AddResourcePath("elements/icon/close-gray.png",
                               IDR_CLOSE_GRAY_ICON);
   html_source->AddResourcePath("elements/icon/close-gray2x.png",
@@ -30,14 +26,6 @@ void AddIcons(content::WebUIDataSource* html_source) {
                               IDR_DROP_DOWN_ARROW_SHOWING_ICON);
   html_source->AddResourcePath("elements/icon/drop-down-arrow-showing2x.png",
                               IDR_DROP_DOWN_ARROW_SHOWING_2X_ICON);
-  html_source->AddResourcePath("elements/icon/generic-device.png",
-                              IDR_MEDIA_ROUTER_GENERIC_DEVICE_2X_ICON);
-  html_source->AddResourcePath("elements/icon/generic-device2x.png",
-                              IDR_MEDIA_ROUTER_GENERIC_DEVICE_2X_ICON);
-  html_source->AddResourcePath("elements/icon/hangouts-icon.png",
-                              IDR_MEDIA_ROUTER_HANGOUTS_2X_ICON);
-  html_source->AddResourcePath("elements/icon/hangouts-icon2x.png",
-                              IDR_MEDIA_ROUTER_HANGOUTS_2X_ICON);
   html_source->AddResourcePath("elements/icon/sad-face.png",
                               IDR_SAD_FACE_ICON);
   html_source->AddResourcePath("elements/icon/sad-face2x.png",
@@ -93,21 +81,6 @@ void AddPolymerElements(content::WebUIDataSource* html_source) {
   html_source->AddResourcePath(
       "elements/media_router_container/media_router_container.js",
       IDR_MEDIA_ROUTER_CONTAINER_JS);
-  html_source->AddResourcePath(
-      "elements/media_router_sink/media_router_sink.css",
-      IDR_MEDIA_ROUTER_SINK_CSS);
-  html_source->AddResourcePath(
-      "elements/media_router_sink/media_router_sink.html",
-      IDR_MEDIA_ROUTER_SINK_HTML);
-  html_source->AddResourcePath(
-      "elements/media_router_sink/media_router_sink.js",
-      IDR_MEDIA_ROUTER_SINK_JS);
-  html_source->AddResourcePath(
-      "elements/media_router_sink_picker/media_router_sink_picker.html",
-      IDR_MEDIA_ROUTER_SINK_PICKER_HTML);
-  html_source->AddResourcePath(
-      "elements/media_router_sink_picker/media_router_sink_picker.js",
-      IDR_MEDIA_ROUTER_SINK_PICKER_JS);
   html_source->AddResourcePath(
       "elements/route_details/route_details.css",
       IDR_ROUTE_DETAILS_CSS);