Add Media Router route-details.

chrome/browser/resources/media_router/elements/route-details/route_details.html

Index: chrome/browser/resources/media_router/elements/route-details/route_details.html
diff --git a/chrome/browser/resources/media_router/elements/route-details/route_details.html b/chrome/browser/resources/media_router/elements/route-details/route_details.html
new file mode 100644
index 0000000000000000000000000000000000000000..8b70b1a24dd6655b20d64d9659f420aa1795fde8
--- /dev/null
+++ b/chrome/browser/resources/media_router/elements/route-details/route_details.html
@@ -0,0 +1,28 @@
+<link rel="import" href="chrome://resources/polymer/polymer/polymer.html">
+<polymer-element name="route-details">
+<template>
+  <link rel="stylesheet" href="route_details.css">
+  <div>
+    <div id="back-to-devices" on-click="{{back}}">
+      &lsaquo;&nbsp; Back to device list

[James Hawkins, 2015/04/08 19:02:36]

Are you sure we should be using &lsaquo instead of an image?

[apacible, 2015/04/08 20:02:02]

Talked offline, keeping as is.

+    </div>
+    <hr>
+    <div class="activity">
+      <div class="activity-description">
+        {{route.description}}
+      </div>
+      <div class="activity-status">
+        <span>{{route.isMirroring ? "Casting to" : "Playing on"}}</span>
+        <!-- TODO(apacible): Show the sink's name rather than ID -->
+        <span class="device-name">{{route.sinkId}}</span>
+      </div>
+    </div>
+  </div>
+  <div>
+    <button class="button" on-click="{{closeRoute}}">
+      Stop casting
+    </button>
+  </div>
+</template>
+<script src="route_details.js"></script>
+</polymer-element>