Media Router: Replace drop-down-button with core-icon-button.

- Removes drop-down-button custom polymer element.
- Removes Media Router drop-down icons.
- Replace drop-down-button with core-icon-button.

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

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

chrome/browser/media_router_resources.grdp

@@ -12,9 +12,6 @@
   <include name="IDR_CAST_MODE_PICKER_HTML" file="resources\media_router\elements\cast_mode_picker\cast_mode_picker.html" type="BINDATA" />
   <include name="IDR_CAST_MODE_PICKER_CSS" file="resources\media_router\elements\cast_mode_picker\cast_mode_picker.css" type="BINDATA" />
   <include name="IDR_CAST_MODE_PICKER_JS" file="resources\media_router\elements\cast_mode_picker\cast_mode_picker.js" type="BINDATA" />
-  <include name="IDR_DROP_DOWN_BUTTON_HTML" file="resources\media_router\elements\drop_down_button\drop_down_button.html" type="BINDATA" />
-  <include name="IDR_DROP_DOWN_BUTTON_CSS" file="resources\media_router\elements\drop_down_button\drop_down_button.css" type="BINDATA" />
-  <include name="IDR_DROP_DOWN_BUTTON_JS" file="resources\media_router\elements\drop_down_button\drop_down_button.js" type="BINDATA" />
   <include name="IDR_ISSUE_BANNER_HTML" file="resources\media_router\elements\issue_banner\issue_banner.html" type="BINDATA" />
   <include name="IDR_ISSUE_BANNER_JS" file="resources\media_router\elements\issue_banner\issue_banner.js" type="BINDATA" />
   <include name="IDR_ISSUE_BANNER_CSS" file="resources\media_router\elements\issue_banner\issue_banner.css" type="BINDATA" />
@@ -26,12 +23,6 @@
   <include name="IDR_ROUTE_DETAILS_JS" file="resources\media_router\elements\route_details\route_details.js" type="BINDATA" />
 
   <!-- Icons -->
-  <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" />
-  <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_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/drop_down_button/drop_down_button.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. */
-
-#drop-down {
-  background: white;
-  background-image: -webkit-image-set(
-    url(../icon/drop-down-arrow.png) 1x,
-    url(../icon/drop-down-arrow2x.png) 2x);
-  background-repeat: no-repeat;
-  border: 1px solid rgb(192, 195, 198);
-  height: 18px;
-  width: 18px;
-}
-
-#drop-down:hover {
-  background-image: -webkit-image-set(
-    url(../icon/drop-down-arrow-hover.png) 1x,
-    url(../icon/drop-down-arrow-hover2x.png) 2x);
-}
-
-#drop-down.showing {
-  background-image: -webkit-image-set(
-    url(../icon/drop-down-arrow-showing.png) 1x,
-    url(../icon/drop-down-arrow-showing2x.png) 2x);
-}
\ No newline at end of file

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

-<link rel="import" href="chrome://resources/polymer/polymer/polymer.html">
-<polymer-element name="drop-down-button">
-<template>
-  <link rel="stylesheet" href="drop_down_button.css">
-  <div id="drop-down" class="{{ {showing: useShownIcon_} | tokenList}}"
-      on-click="{{onButtonClick}}">
-  </div>
-</template>
-<script src="drop_down_button.js"></script>
-</polymer-element>
\ No newline at end of file

chrome/browser/resources/media_router/elements/drop_down_button/drop_down_button.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 is used as a button to toggle a drop down, such as
-// the cast-mode-picker.
-Polymer('drop-down-button', {
-  /**
-   * Whether or not to use the icon indicating that the drop down is shown.
-   * @private {boolean}
-   * @default false
-   */
-  useShownIcon_: false,
-
-  /**
-   * Fires a drop-down-button-click event. This is called when |this| is
-   * clicked. Switches the value of |useShownIcon_|.
-   */
-  onButtonClick: function() {
-    this.useShownIcon_ = !this.useShownIcon_;
-    this.fire('drop-down-button-click');
-  },
-});

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

@@ -3,7 +3,7 @@
  * found in the LICENSE file. */
 
 #cast-modes {
-  margin: 40px 0;
+  margin: 40px 2px;
   position: absolute;
   z-index: 1;
 }
@@ -20,11 +20,6 @@
   background-color: rgb(214, 214, 214);
 }
 
-#drop-down-button {
-  margin-top: 10px;
-  z-index: 1;
-}
-
 .hide {
   display: none;
 }

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

@@ -3,10 +3,9 @@
 <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="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="../route_details/route_details.html">
 <polymer-element name="media-router-container">
@@ -19,9 +18,9 @@
   <core-toolbar id="container-header"
       class="{{ {state: currentView_} | isSinkPickerHidden}}">
     <div id="router-header-text">{{headerText}}</div>
-    <drop-down-button id="drop-down-button"
-        on-click="{{toggleCastMode}}">
-    </drop-down-button>
+    <paper-icon-button on-click="{{toggleCastMode}}"
+        icon="{{ {castModeHidden: castModeHidden_} | getDropDownIcon}}">
+    </paper-icon-button>
     <cast-mode-picker id="cast-modes"
         class="{{ {castModeHidden: castModeHidden_} | isCastModeHidden }}"
         castModeList="{{castModeList}}"

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

@@ -225,6 +225,18 @@ Polymer('media-router-container', {
     }
   },
 
+  /**
+   * Filter that returns the arrow-drop-* icon to show.
+   *
+   * @param {{castModeHidden: boolean}} value The parameters passed into this
+   *   filter.
+   * Parameters in |value|:
+   *   castModeHidden - Whether or not the cast mode is currently hidden.
+   */
+  getDropDownIcon: function(value) {
+    return value['castModeHidden'] ? 'arrow-drop-down' : 'arrow-drop-up';
+  },
+
   /**
    * Hides cast-mode-picker.
    */

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

@@ -10,18 +10,6 @@
 namespace {
 
 void AddIcons(content::WebUIDataSource* html_source) {
-  html_source->AddResourcePath("elements/icon/drop-down-arrow.png",
-                              IDR_DROP_DOWN_ARROW_ICON);
-  html_source->AddResourcePath("elements/icon/drop-down-arrow2x.png",
-                              IDR_DROP_DOWN_ARROW_2X_ICON);
-  html_source->AddResourcePath("elements/icon/drop-down-arrow-hover.png",
-                              IDR_DROP_DOWN_ARROW_HOVER_ICON);
-  html_source->AddResourcePath("elements/icon/drop-down-arrow-hover2x.png",
-                              IDR_DROP_DOWN_ARROW_HOVER_2X_ICON);
-  html_source->AddResourcePath("elements/icon/drop-down-arrow-showing.png",
-                              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/sad-face.png",
                               IDR_SAD_FACE_ICON);
   html_source->AddResourcePath("elements/icon/sad-face2x.png",
@@ -50,15 +38,6 @@ void AddPolymerElements(content::WebUIDataSource* html_source) {
   html_source->AddResourcePath(
       "elements/cast_mode_picker/cast_mode_picker.js",
       IDR_CAST_MODE_PICKER_JS);
-  html_source->AddResourcePath(
-      "elements/drop_down_button/drop_down_button.css",
-      IDR_DROP_DOWN_BUTTON_CSS);
-  html_source->AddResourcePath(
-      "elements/drop_down_button/drop_down_button.html",
-      IDR_DROP_DOWN_BUTTON_HTML);
-  html_source->AddResourcePath(
-      "elements/drop_down_button/drop_down_button.js",
-      IDR_DROP_DOWN_BUTTON_JS);
   html_source->AddResourcePath(
       "elements/issue_banner/issue_banner.css",
       IDR_ISSUE_BANNER_CSS);