Use core/paper elements in media-router-container.

- Use core-toolbar for header.
- Change close button div to a paper-icon-button.
- Remove close-gray.png and close-gray2x.png.
- Remove unneeded CSS, modifies some positioning.

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

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

chrome/browser/media_router_resources.grdp

@@ -26,8 +26,6 @@
   <include name="IDR_ROUTE_DETAILS_JS" file="resources\media_router\elements\route_details\route_details.js" type="BINDATA" />
 
   <!-- Icons -->
-  <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" />
   <include name="IDR_DROP_DOWN_ARROW_2X_ICON" file="resources\media_router\elements\icon\drop-down-arrow2x.png" type="BINDATA" />
   <include name="IDR_DROP_DOWN_ARROW_HOVER_ICON" file="resources\media_router\elements\icon\drop-down-arrow-hover.png" type="BINDATA" />

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

@@ -3,33 +3,21 @@
  * found in the LICENSE file. */
 
 #cast-modes {
-  margin: 30px 0;
+  margin: 40px 0;
   position: absolute;
   z-index: 1;
 }
 
 :host-context(html[dir='ltr']) #cast-modes {
-  right: 35px;
+  right: 72px;
 }
 
 :host-context(html[dir='rtl']) #cast-modes {
-  left: 35px;
-}
-
-#close-button {
-  -webkit-margin-start: 15px;
-  align-self: flex-start;
-  background-image: -webkit-image-set(
-    url(../icon/close-gray.png) 1x,
-    url(../icon/close-gray2x.png) 2x);
-  background-repeat: no-repeat;
-  height: 20px;
-  width: 20px;
+  left: 72px;
 }
 
 #container-header {
-  display: flex;
-  justify-content: space-between;
+  background-color: rgb(214, 214, 214);
 }
 
 #drop-down-button {
@@ -49,10 +37,7 @@
   -webkit-padding-start: 20px;
   flex-grow: 1;
   font-size: 1.25em;
-  font-weight: normal;
   margin: 0;
-  padding-bottom: 10px;
-  padding-top: 10px;
 }
 
 .sink {

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

@@ -2,7 +2,9 @@
 <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/core-toolbar/core-toolbar.html">
 <link rel="import" href="chrome://resources/polymer/paper-item/paper-item.html">
+<link rel="import" href="chrome://resources/polymer/paper-icon-button/paper-icon-button.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">
@@ -14,7 +16,7 @@
       class="{{ {castModeHidden: castModeHidden_} | isCastModeHidden }}"
       on-click="{{hideCastMode}}">
   </div>
-  <div id="container-header"
+  <core-toolbar id="container-header"
       class="{{ {state: currentView_} | isSinkPickerHidden}}">
     <div id="router-header-text">{{headerText}}</div>
     <drop-down-button id="drop-down-button"
@@ -25,8 +27,9 @@
         castModeList="{{castModeList}}"
         selectedCastModeValue="{{selectedCastModeValue_}}">
     </cast-mode-picker>
-    <div id="close-button" on-click="{{closeButtonClicked}}"></div>
-  </div>
+    <paper-icon-button id="close-button" on-click="{{closeButtonClicked}}">
+    </paper-icon-button>
+  </core-toolbar>
   <issue-banner id="issue-banner" issue="{{issue}}"
       class="{{ {state: currentView_, issue: issue} | isIssueBannerHidden}}">
   </issue-banner>

chrome/browser/resources/media_router/media_router.css

@@ -12,5 +12,4 @@ body {
   background-color: rgb(246, 246, 246);
   display: flex;
   flex-direction: column;
-  position: relative;
 }

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/close-gray.png",
-                              IDR_CLOSE_GRAY_ICON);
-  html_source->AddResourcePath("elements/icon/close-gray2x.png",
-                              IDR_CLOSE_GRAY_2X_ICON);
   html_source->AddResourcePath("elements/icon/drop-down-arrow.png",
                               IDR_DROP_DOWN_ARROW_ICON);
   html_source->AddResourcePath("elements/icon/drop-down-arrow2x.png",