Add Media Router route-details.

This custom polymer element shows some information from media that is currently cast to a device. It is styled after the current cast extension's route details view.

BUG=464222

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

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

chrome/browser/media_router_resources.grdp

@@ -3,6 +3,7 @@
   <!-- General -->
   <include name="IDR_MEDIA_ROUTER_DATA_JS" file="resources\media_router\media_router_data.js" type="BINDATA" />
   <include name="IDR_MEDIA_ROUTER_HTML" file="resources\media_router\media_router.html" type="BINDATA" />
+  <include name="IRD_MEDIA_ROUTER_COMMON_CSS" file="resources\media_router\media_router_common.css" type="BINDATA" />
 
   <!-- Polymer -->
   <include name="IDR_CAST_MODE_PICKER_HTML" file="resources\media_router\elements\cast_mode_picker\cast_mode_picker.html" type="BINDATA" />
@@ -19,6 +20,9 @@
   <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" />

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

@@ -2,18 +2,6 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
-button {
-  border: 1px solid rgb(193, 193, 195);
-  color: rgb(44, 44, 44);
-  cursor: pointer;
-  font-size: 0.875em;
-  font-weight: bold;
-  height: 32px;
-  overflow: hidden;
-  text-align: center;
-  width: 100%;
-}
-
 .button-secondary {
   background: linear-gradient(to top, rgb(254, 254, 254), rgb(222, 222, 222));
 }

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

 <link rel="import" href="chrome://resources/polymer/polymer/polymer.html">
 <polymer-element name="issue-banner">
 <template>
+  <link rel="stylesheet" href="../../media_router_common.css">
   <link rel="stylesheet" href="issue_banner.css">
   <template if="{{issue.isBlocking}}">
     <div class="blocking-issue-header">

chrome/browser/resources/media_router/elements/route_details/route_details.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. */
+
+#back-to-devices {
+  -webkit-padding-start: 10px;
+  color: rgb(20, 86, 218);
+  font-weight: bold;
+  line-height: 2em;
+}
+
+#back-to-devices:hover {
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+button {
+  background: linear-gradient(to top, rgb(254, 254, 254), rgb(222, 222, 222));
+}
+
+.device-name {
+  font-weight: bold;
+}
+
+hr {
+  margin: 0;
+}
+
+.route {
+  -webkit-padding-start: 10px;
+  line-height: 1.125em;
+}
+
+.route-status {
+  color: rgb(125, 125, 125);
+  margin: 8px 0;
+}
+
+.route-title {
+  font-weight: bold;
+  margin: 8px 0;
+  overflow: hidden;
+}

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

+<link rel="import" href="chrome://resources/polymer/polymer/polymer.html">
+<polymer-element name="route-details">
+<template>
+  <link rel="stylesheet" href="../../media_router_common.css">
+  <link rel="stylesheet" href="route_details.css">
+  <div>
+    <div id="back-to-devices" on-click="{{back}}">
+      <span i18n-content="backToSinkPicker"></span>
+    </div>
+    <hr>
+    <div class="route">
+      <div class="route-title">
+        {{route.title}}
+      </div>
+      <div class="route-status">
+        <span i18n-content="castingActivityStatus"></span>
+        <span class="device-name">{{sink.name}}</span>
+      </div>
+    </div>
+  </div>
+  <div>
+    <button class="button" on-click="{{closeRoute}}"
+        i18n-content="stopCastingButton">
+    </button>
+  </div>
+</template>
+<script src="route_details.js"></script>
+</polymer-element>

chrome/browser/resources/media_router/elements/route_details/route_details.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 from media that is currently cast
+// to a device. It is assumed that the passed in route and sink correspond
+// with each other.
+Polymer('route-details', {
+  publish: {
+    /**
+     * The route to show.
+     *
+     * @attribute route
+     * @type {media_router.Route}
+     * @default null
+     */
+    route: null,
+
+    /**
+     * The sink to show.
+     *
+     * @attribute sink
+     * @type {media_router.Sink}
+     * @default null
+     */
+    sink: null,
+  },
+
+  /**
+   * Fires a back-click event. This is called when the back link is clicked.
+   */
+  back: function() {
+    this.fire('back-click');
+  },
+
+  /**
+   * Fires a close-route-click event. This is called when the button to close
+   * the current route is clicked.
+   */
+  closeRoute: function() {
+    this.fire('close-route-click', {route: this.route});
+  },
+});

chrome/browser/resources/media_router/media_router_common.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. */
+
+button {
+  border: 1px solid rgb(193, 193, 195);
+  color: rgb(44, 44, 44);
+  cursor: pointer;
+  font-size: 1em;
+  font-weight: bold;
+  height: 32px;
+  overflow: hidden;
+  text-align: center;
+  width: 100%;
+}