Make the Cast dialog use the same pulldown button as the WebAuth dialog

The WebAuth dialog has implemented its own MD-style pulldown button with
a down arrow on it. This CL moves the button class into its own file and
reuses it as the source picker pulldown button in the Cast dialog.

Bug: 893307
Change-Id: I565ce0e991c9f41f3b2ae6747e017dbbfec84523
Reviewed-on: https://chromium-review.googlesource.com/c/1278127
Commit-Queue: Takumi Fujimoto <takumif@chromium.org>
Reviewed-by: Bret Sepulveda <bsep@chromium.org>
Reviewed-by: Balazs Engedy <engedy@chromium.org>
Cr-Commit-Position: refs/heads/master@{#604293}

chrome/browser/ui/BUILD.gn

@@ -2555,6 +2555,8 @@ jumbo_split_static_library("ui") {
       "views/login_view.h",
       "views/material_refresh_layout_provider.cc",
       "views/material_refresh_layout_provider.h",
+      "views/md_text_button_with_down_arrow.cc",
+      "views/md_text_button_with_down_arrow.h",
       "views/media_router/cast_dialog_helper.cc",
       "views/media_router/cast_dialog_helper.h",
       "views/media_router/cast_dialog_metrics.cc",

chrome/browser/ui/views/chrome_layout_provider.cc

@@ -109,6 +109,10 @@ int ChromeLayoutProvider::GetDistanceMetric(int metric) const {
                  views::DISTANCE_DIALOG_CONTENT_MARGIN_TOP_CONTROL) -
              8;
     }
+    case DISTANCE_DROPDOWN_BUTTON_LABEL_ARROW_SPACING:
+      return 8;
+    case DISTANCE_DROPDOWN_BUTTON_RIGHT_MARGIN:
+      return 12;
     case views::DISTANCE_RELATED_BUTTON_HORIZONTAL:
       return kHarmonyLayoutUnit / 2;
     case views::DISTANCE_RELATED_CONTROL_HORIZONTAL:

chrome/browser/ui/views/chrome_layout_provider.h

@@ -32,6 +32,11 @@ enum ChromeDistanceMetric {
   DISTANCE_CONTENT_LIST_VERTICAL_MULTI,
   // Vertical spacing between a list of multiple controls in one column.
   DISTANCE_CONTROL_LIST_VERTICAL,
+  // Width of the space in a dropdown button between its label and down arrow.
+  DISTANCE_DROPDOWN_BUTTON_LABEL_ARROW_SPACING,
+  // Width of the horizontal padding in a dropdown button between the down arrow
+  // and the button's border.
+  DISTANCE_DROPDOWN_BUTTON_RIGHT_MARGIN,
   // Smaller horizontal spacing between other controls that are logically
   // related.
   DISTANCE_RELATED_CONTROL_HORIZONTAL_SMALL,

chrome/browser/ui/views/md_text_button_with_down_arrow.cc

+// Copyright 2018 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.
+
+#include "chrome/browser/ui/views/md_text_button_with_down_arrow.h"
+
+#include "chrome/browser/ui/views/chrome_layout_provider.h"
+#include "ui/gfx/color_utils.h"
+#include "ui/gfx/paint_vector_icon.h"
+#include "ui/views/layout/layout_provider.h"
+#include "ui/views/vector_icons.h"
+
+namespace views {
+
+MdTextButtonWithDownArrow::MdTextButtonWithDownArrow(ButtonListener* listener,
+                                                     const base::string16& text)
+    : MdTextButton(listener, style::CONTEXT_BUTTON_MD) {
+  SetText(text);
+  SetFocusForPlatform();
+  SetHorizontalAlignment(gfx::ALIGN_RIGHT);
+  SetImageLabelSpacing(LayoutProvider::Get()->GetDistanceMetric(
+      DISTANCE_DROPDOWN_BUTTON_LABEL_ARROW_SPACING));
+  SetDropArrowImage();
+
+  // Reduce padding between the drop arrow and the right border.
+  const gfx::Insets original_padding = border()->GetInsets();
+  SetBorder(CreateEmptyBorder(original_padding.top(), original_padding.left(),
+                              original_padding.bottom(),
+                              LayoutProvider::Get()->GetDistanceMetric(
+                                  DISTANCE_DROPDOWN_BUTTON_RIGHT_MARGIN)));
+}
+
+MdTextButtonWithDownArrow::~MdTextButtonWithDownArrow() = default;
+
+void MdTextButtonWithDownArrow::OnNativeThemeChanged(
+    const ui::NativeTheme* theme) {
+  MdTextButton::OnNativeThemeChanged(theme);
+
+  // The icon's color is derived from the label's |enabled_color|, which might
+  // have changed as the result of the theme change.
+  SetDropArrowImage();
+}
+
+void MdTextButtonWithDownArrow::SetDropArrowImage() {
+  gfx::ImageSkia drop_arrow_image = gfx::CreateVectorIcon(
+      kMenuDropArrowIcon,
+      color_utils::DeriveDefaultIconColor(label()->enabled_color()));
+  SetImage(Button::STATE_NORMAL, drop_arrow_image);
+}
+
+}  // namespace views

chrome/browser/ui/views/md_text_button_with_down_arrow.h

+// Copyright 2018 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.
+
+#ifndef CHROME_BROWSER_UI_VIEWS_MD_TEXT_BUTTON_WITH_DOWN_ARROW_H_
+#define CHROME_BROWSER_UI_VIEWS_MD_TEXT_BUTTON_WITH_DOWN_ARROW_H_
+
+#include "base/macros.h"
+#include "base/strings/string16.h"
+#include "ui/views/controls/button/md_text_button.h"
+
+namespace views {
+
+class ButtonListener;
+
+// The material design themed text button with a drop arrow displayed on the
+// right side.
+class MdTextButtonWithDownArrow : public MdTextButton {
+ public:
+  MdTextButtonWithDownArrow(ButtonListener* listener,
+                            const base::string16& text);
+  ~MdTextButtonWithDownArrow() override;
+
+ protected:
+  // views::MdTextButton:
+  void OnNativeThemeChanged(const ui::NativeTheme* theme) override;
+
+ private:
+  void SetDropArrowImage();
+
+  DISALLOW_COPY_AND_ASSIGN(MdTextButtonWithDownArrow);
+};
+
+}  // namespace views
+
+#endif  // CHROME_BROWSER_UI_VIEWS_MD_TEXT_BUTTON_WITH_DOWN_ARROW_H_

chrome/browser/ui/views/media_router/cast_dialog_view.cc

@@ -18,6 +18,7 @@
 #include "chrome/browser/ui/views/chrome_layout_provider.h"
 #include "chrome/browser/ui/views/frame/browser_view.h"
 #include "chrome/browser/ui/views/frame/top_container_view.h"
+#include "chrome/browser/ui/views/md_text_button_with_down_arrow.h"
 #include "chrome/browser/ui/views/media_router/cast_dialog_no_sinks_view.h"
 #include "chrome/browser/ui/views/media_router/cast_dialog_sink_button.h"
 #include "chrome/browser/ui/views/media_router/cast_toolbar_button.h"
@@ -33,7 +34,6 @@
 #include "ui/gfx/vector_icon_types.h"
 #include "ui/views/bubble/bubble_border.h"
 #include "ui/views/controls/button/label_button.h"
-#include "ui/views/controls/button/md_text_button.h"
 #include "ui/views/controls/scroll_view.h"
 #include "ui/views/layout/box_layout.h"
 #include "ui/views/layout/fill_layout.h"
@@ -112,7 +112,7 @@ int CastDialogView::GetDialogButtons() const {
 }
 
 views::View* CastDialogView::CreateExtraView() {
-  sources_button_ = views::MdTextButton::CreateSecondaryUiButton(
+  sources_button_ = new views::MdTextButtonWithDownArrow(
       this,
       l10n_util::GetStringUTF16(IDS_MEDIA_ROUTER_ALTERNATIVE_SOURCES_BUTTON));
   sources_button_->set_id(kAlternativeSourceButtonId);

chrome/browser/ui/views/translate/translate_bubble_view.cc

@@ -25,6 +25,7 @@
 #include "chrome/browser/ui/translate/translate_bubble_model_impl.h"
 #include "chrome/browser/ui/translate/translate_bubble_view_state_transition.h"
 #include "chrome/browser/ui/views/chrome_layout_provider.h"
+#include "chrome/browser/ui/views/md_text_button_with_down_arrow.h"
 #include "chrome/common/url_constants.h"
 #include "chrome/grit/generated_resources.h"
 #include "chrome/grit/theme_resources.h"
@@ -614,10 +615,9 @@ views::View* TranslateBubbleView::CreateViewBeforeTranslate() {
   accept_button->set_id(BUTTON_ID_TRANSLATE);
 
   accept_button->SetIsDefault(true);
-  before_translate_options_button_ =
-      views::MdTextButton::CreateSecondaryUiButton(
-          this,
-          l10n_util::GetStringUTF16(IDS_TRANSLATE_BUBBLE_OPTIONS_MENU_BUTTON));
+  before_translate_options_button_ = new views::MdTextButtonWithDownArrow(
+      this,
+      l10n_util::GetStringUTF16(IDS_TRANSLATE_BUBBLE_OPTIONS_MENU_BUTTON));
   before_translate_options_button_->set_id(BUTTON_ID_OPTIONS_MENU);
   before_translate_options_button_->set_request_focus_on_press(true);
 
@@ -702,10 +702,9 @@ views::View* TranslateBubbleView::CreateViewAfterTranslate() {
   button->set_id(BUTTON_ID_SHOW_ORIGINAL);
   layout->AddView(button);
 
-  views::Button* options_menu_button =
-      views::MdTextButton::CreateSecondaryUiButton(
-          this,
-          l10n_util::GetStringUTF16(IDS_TRANSLATE_BUBBLE_OPTIONS_MENU_BUTTON));
+  views::Button* options_menu_button = new views::MdTextButtonWithDownArrow(
+      this,
+      l10n_util::GetStringUTF16(IDS_TRANSLATE_BUBBLE_OPTIONS_MENU_BUTTON));
   options_menu_button->set_id(BUTTON_ID_OPTIONS_MENU);
   options_menu_button->set_request_focus_on_press(true);
 

chrome/browser/ui/views/webauthn/authenticator_request_dialog_view.cc

@@ -8,6 +8,7 @@
 #include "base/strings/string16.h"
 #include "chrome/browser/ui/views/chrome_layout_provider.h"
 #include "chrome/browser/ui/views/chrome_typography.h"
+#include "chrome/browser/ui/views/md_text_button_with_down_arrow.h"
 #include "chrome/browser/ui/views/webauthn/authenticator_request_sheet_view.h"
 #include "chrome/browser/ui/views/webauthn/sheet_view_factory.h"
 #include "chrome/browser/ui/webauthn/authenticator_request_sheet_model.h"
@@ -21,60 +22,10 @@
 #include "ui/gfx/geometry/insets.h"
 #include "ui/gfx/paint_vector_icon.h"
 #include "ui/views/border.h"
-#include "ui/views/controls/button/md_text_button.h"
 #include "ui/views/layout/fill_layout.h"
 #include "ui/views/vector_icons.h"
 #include "ui/views/window/dialog_client_view.h"
 
-namespace {
-
-// The material design themed text button with a drop arrow displayed on the
-// right side.
-class MdTextButtonWithDropArrow : public views::MdTextButton {
- public:
-  MdTextButtonWithDropArrow(views::ButtonListener* listener,
-                            const base::string16& text)
-      : views::MdTextButton(listener, views::style::CONTEXT_BUTTON_MD) {
-    SetText(text);
-    SetFocusForPlatform();
-    SetHorizontalAlignment(gfx::ALIGN_RIGHT);
-    SetImageLabelSpacing(views::LayoutProvider::Get()->GetDistanceMetric(
-        DISTANCE_RELATED_LABEL_HORIZONTAL_LIST));
-    SetDropArrowImage();
-
-    // Reduce padding between the drop arrow and the right border.
-    constexpr int kPaddingBetweenBorderAndDropArrow = 8;
-    const gfx::Insets original_padding = border()->GetInsets();
-    SetBorder(views::CreateEmptyBorder(
-        original_padding.top(), original_padding.left(),
-        original_padding.bottom(), kPaddingBetweenBorderAndDropArrow));
-  }
-
-  ~MdTextButtonWithDropArrow() override {}
-
- protected:
-  void SetDropArrowImage() {
-    gfx::ImageSkia drop_arrow_image = gfx::CreateVectorIcon(
-        views::kMenuDropArrowIcon,
-        color_utils::DeriveDefaultIconColor(label()->enabled_color()));
-    SetImage(views::Button::STATE_NORMAL, drop_arrow_image);
-  }
-
-  // views::MdTextButton:
-  void OnNativeThemeChanged(const ui::NativeTheme* theme) override {
-    views::MdTextButton::OnNativeThemeChanged(theme);
-
-    // The icon's color is derived from the label's |enabled_color|, which might
-    // have changed as the result of the theme change.
-    SetDropArrowImage();
-  }
-
- private:
-  DISALLOW_COPY_AND_ASSIGN(MdTextButtonWithDropArrow);
-};
-
-}  // namespace
-
 // static
 void ShowAuthenticatorRequestDialog(
     content::WebContents* web_contents,
@@ -138,7 +89,7 @@ gfx::Size AuthenticatorRequestDialogView::CalculatePreferredSize() const {
 }
 
 views::View* AuthenticatorRequestDialogView::CreateExtraView() {
-  other_transports_button_ = new MdTextButtonWithDropArrow(
+  other_transports_button_ = new views::MdTextButtonWithDownArrow(
       this, l10n_util::GetStringUTF16(IDS_WEBAUTHN_TRANSPORT_POPUP_LABEL));
   ToggleOtherTransportsButtonVisibility();
   return other_transports_button_;