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

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

Index: chrome/browser/resources/media_router/elements/media_router_container/media_router_container.html
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 2fe6daed0ce22d422eeffa617876b832498533d6..944248077e07751165402393cfdd499459bfef1f 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
@@ -1,8 +1,11 @@
 <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="{{routeMap_[sinkToRouteMap_[sink.id]] as route}}">

[mark a. foltz, 2015/05/09 06:37:38]

The extra lookup to get the route from the sink makes this template a bit
complex.

Another approach would it be to produce a list of [sink, route?] pairs in
media_router_container.js so that the template can simply iterate over one list.

WDYT?

[apacible, 2015/05/11 17:59:48]

SGTM, this makes another route lookup in media_router_container.js simpler as
well.

+            <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>