[Harmony Cast Dialog] Update the "no devices found" view to match the mocks

Per the mocks, move the throbber and the info icon to the left of the view.
Also factor out constants and throbber creating code into a helper file.
Screencap: https://drive.google.com/open?id=1UF1uamxoR0oG-3aEHwdJkoHU_7pJW_CB

Bug: 879630
Change-Id: I42ee54d063df0f9af74cad10a4a21a9a8f78a869
Reviewed-on: https://chromium-review.googlesource.com/1199945
Commit-Queue: Takumi Fujimoto <takumif@chromium.org>
Reviewed-by: Derek Cheng <imcheng@chromium.org>
Cr-Commit-Position: refs/heads/master@{#589206}

chrome/browser/ui/BUILD.gn

@@ -3175,6 +3175,8 @@ jumbo_split_static_library("ui") {
         "views/location_bar/selected_keyword_view.h",
         "views/location_bar/star_view.cc",
         "views/location_bar/star_view.h",
+        "views/media_router/cast_dialog_helper.cc",
+        "views/media_router/cast_dialog_helper.h",
         "views/media_router/cast_dialog_metrics.cc",
         "views/media_router/cast_dialog_metrics.h",
         "views/media_router/cast_dialog_no_sinks_view.cc",

chrome/browser/ui/views/media_router/cast_dialog_helper.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/media_router/cast_dialog_helper.h"
+
+#include "ui/gfx/geometry/insets.h"
+#include "ui/views/border.h"
+#include "ui/views/controls/throbber.h"
+#include "ui/views/layout/fill_layout.h"
+
+namespace media_router {
+
+std::unique_ptr<views::View> CreateThrobber() {
+  views::Throbber* throbber = new views::Throbber();
+  throbber->Start();
+  auto throbber_container = std::make_unique<views::View>();
+  throbber_container->SetLayoutManager(std::make_unique<views::FillLayout>());
+  // The throbber is smaller than other icons, so the difference must be added
+  // to the border to make their overall sizes match.
+  const int extra_borders =
+      kPrimaryIconSize - throbber->CalculatePreferredSize().height();
+  throbber_container->SetBorder(views::CreateEmptyBorder(
+      gfx::Insets(extra_borders / 2 + kPrimaryIconBorderWidth)));
+  throbber_container->AddChildView(throbber);
+  return throbber_container;
+}
+
+}  // namespace media_router

chrome/browser/ui/views/media_router/cast_dialog_helper.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_MEDIA_ROUTER_CAST_DIALOG_HELPER_H_
+#define CHROME_BROWSER_UI_VIEWS_MEDIA_ROUTER_CAST_DIALOG_HELPER_H_
+
+#include <memory>
+
+#include "ui/views/view.h"
+
+namespace media_router {
+
+// Icon sizes in DIP.
+constexpr int kPrimaryIconSize = 20;
+constexpr int kPrimaryIconBorderWidth = 6;
+
+// Creates a view containing a throbber. The throbber has a border around it so
+// that the view's size is the same with the primary icon with its border.
+std::unique_ptr<views::View> CreateThrobber();
+
+}  // namespace media_router
+
+#endif  // CHROME_BROWSER_UI_VIEWS_MEDIA_ROUTER_CAST_DIALOG_HELPER_H_

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

@@ -13,7 +13,7 @@
 #include "chrome/browser/ui/browser.h"
 #include "chrome/browser/ui/browser_tabstrip.h"
 #include "chrome/browser/ui/views/hover_button.h"
-#include "chrome/browser/ui/views/media_router/cast_dialog_sink_button.h"
+#include "chrome/browser/ui/views/media_router/cast_dialog_helper.h"
 #include "chrome/common/url_constants.h"
 #include "chrome/grit/generated_resources.h"
 #include "components/vector_icons/vector_icons.h"
@@ -30,18 +30,6 @@
 
 namespace media_router {
 
-namespace {
-
-std::unique_ptr<views::ImageView> CreateTvIcon() {
-  auto icon = std::make_unique<views::ImageView>();
-  // Share the icon size with sink buttons for consistency.
-  icon->SetImage(gfx::CreateVectorIcon(
-      kTvIcon, CastDialogSinkButton::kPrimaryIconSize, gfx::kGoogleGrey500));
-  return icon;
-}
-
-}  // namespace
-
 CastDialogNoSinksView::CastDialogNoSinksView(Browser* browser)
     : browser_(browser), weak_factory_(this) {
   SetLayoutManager(
@@ -81,10 +69,8 @@ void CastDialogNoSinksView::ShowHelpCenterArticle() {
 views::View* CastDialogNoSinksView::CreateLookingForSinksView() {
   base::string16 title =
       l10n_util::GetStringUTF16(IDS_MEDIA_ROUTER_STATUS_LOOKING_FOR_DEVICES);
-  auto throbber = std::make_unique<views::Throbber>();
-  throbber->Start();
-  HoverButton* view = new HoverButton(nullptr, CreateTvIcon(), title,
-                                      base::string16(), std::move(throbber));
+  HoverButton* view = new HoverButton(
+      /* button_listener */ nullptr, CreateThrobber(), title, base::string16());
   view->SetEnabled(false);
   return view;
 }
@@ -96,12 +82,14 @@ views::View* CastDialogNoSinksView::CreateHelpIconView() {
   views::ImageButton* help_icon_ptr = help_icon.get();
   help_icon->SetImage(
       views::Button::STATE_NORMAL,
-      gfx::CreateVectorIcon(::vector_icons::kHelpOutlineIcon,
-                            CastDialogSinkButton::kPrimaryIconSize,
+      gfx::CreateVectorIcon(::vector_icons::kHelpOutlineIcon, kPrimaryIconSize,
                             gfx::kChromeIconGrey));
   help_icon->SetFocusForPlatform();
-  HoverButton* view = new HoverButton(nullptr, CreateTvIcon(), title,
-                                      base::string16(), std::move(help_icon));
+  help_icon->SetBorder(
+      views::CreateEmptyBorder(gfx::Insets(kPrimaryIconBorderWidth)));
+  HoverButton* view =
+      new HoverButton(/* button_listener */ nullptr, std::move(help_icon),
+                      title, base::string16());
   view->SetEnabled(false);
   // HoverButton disables event handling by its icons, so enable it again.
   help_icon_ptr->set_can_process_events_within_subtree(true);

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

@@ -8,6 +8,7 @@
 #include "chrome/app/vector_icons/vector_icons.h"
 #include "chrome/browser/ui/views/chrome_layout_provider.h"
 #include "chrome/browser/ui/views/chrome_typography.h"
+#include "chrome/browser/ui/views/media_router/cast_dialog_helper.h"
 #include "chrome/common/media_router/issue.h"
 #include "chrome/grit/generated_resources.h"
 #include "components/vector_icons/vector_icons.h"
@@ -38,13 +39,11 @@ class StopButton : public views::LabelButton {
       : views::LabelButton(button_listener, base::string16()) {
     // TODO(https://crbug.com/877702): Update the icon to match the mocks.
     static const gfx::ImageSkia icon = CreateVectorIcon(
-        kNavigateStopIcon, CastDialogSinkButton::kPrimaryIconSize,
-        gfx::kGoogleBlue500);
+        kNavigateStopIcon, kPrimaryIconSize, gfx::kGoogleBlue500);
     SetImage(views::Button::STATE_NORMAL, icon);
     SetInkDropMode(views::InkDropHostView::InkDropMode::ON);
     set_tag(button_tag);
-    SetBorder(views::CreateEmptyBorder(
-        gfx::Insets(CastDialogSinkButton::kPrimaryIconBorderWidth)));
+    SetBorder(views::CreateEmptyBorder(gfx::Insets(kPrimaryIconBorderWidth)));
     SetEnabled(enabled);
     // Make it possible to navigate to this button by pressing the tab key.
     SetFocusBehavior(FocusBehavior::ALWAYS);
@@ -103,29 +102,13 @@ gfx::ImageSkia CreateSinkIcon(SinkIconType icon_type, bool enabled = true) {
       break;
   }
   SkColor icon_color = enabled ? gfx::kChromeIconGrey : gfx::kGoogleGrey500;
-  return gfx::CreateVectorIcon(
-      *vector_icon, CastDialogSinkButton::kPrimaryIconSize, icon_color);
+  return gfx::CreateVectorIcon(*vector_icon, kPrimaryIconSize, icon_color);
 }
 
 gfx::ImageSkia CreateDisabledSinkIcon(SinkIconType icon_type) {
   return CreateSinkIcon(icon_type, false);
 }
 
-std::unique_ptr<views::View> CreateThrobber() {
-  views::Throbber* throbber = new views::Throbber();
-  throbber->Start();
-  auto throbber_container = std::make_unique<views::View>();
-  throbber_container->SetLayoutManager(std::make_unique<views::FillLayout>());
-  // The throbber is smaller than other icons, so the difference must be added
-  // to the border to make their overall sizes match.
-  const int extra_borders = CastDialogSinkButton::kPrimaryIconSize -
-                            throbber->CalculatePreferredSize().height();
-  throbber_container->SetBorder(views::CreateEmptyBorder(gfx::Insets(
-      extra_borders / 2 + CastDialogSinkButton::kPrimaryIconBorderWidth)));
-  throbber_container->AddChildView(throbber);
-  return throbber_container;
-}
-
 std::unique_ptr<views::View> CreatePrimaryIconForSink(
     views::ButtonListener* button_listener,
     const UIMediaSink& sink,
@@ -133,10 +116,10 @@ std::unique_ptr<views::View> CreatePrimaryIconForSink(
   if (sink.issue) {
     auto icon_view = std::make_unique<views::ImageView>();
     icon_view->SetImage(CreateVectorIcon(::vector_icons::kInfoOutlineIcon,
-                                         CastDialogSinkButton::kPrimaryIconSize,
+                                         kPrimaryIconSize,
                                          gfx::kChromeIconGrey));
-    icon_view->SetBorder(views::CreateEmptyBorder(
-        gfx::Insets(CastDialogSinkButton::kPrimaryIconBorderWidth)));
+    icon_view->SetBorder(
+        views::CreateEmptyBorder(gfx::Insets(kPrimaryIconBorderWidth)));
     return icon_view;
   } else if (sink.state == UIMediaSinkState::CONNECTED ||
              sink.state == UIMediaSinkState::DISCONNECTING) {
@@ -147,8 +130,8 @@ std::unique_ptr<views::View> CreatePrimaryIconForSink(
   }
   auto icon_view = std::make_unique<views::ImageView>();
   icon_view->SetImage(CreateSinkIcon(sink.icon_type));
-  icon_view->SetBorder(views::CreateEmptyBorder(
-      gfx::Insets(CastDialogSinkButton::kPrimaryIconBorderWidth)));
+  icon_view->SetBorder(
+      views::CreateEmptyBorder(gfx::Insets(kPrimaryIconBorderWidth)));
   return icon_view;
 }
 
@@ -169,11 +152,6 @@ base::string16 GetStatusTextForSink(const UIMediaSink& sink) {
 
 }  // namespace
 
-// static
-int CastDialogSinkButton::kPrimaryIconSize = 20;
-int CastDialogSinkButton::kPrimaryIconBorderWidth = 6;
-int CastDialogSinkButton::kSecondaryIconSize = 16;
-
 CastDialogSinkButton::CastDialogSinkButton(
     views::ButtonListener* button_listener,
     const UIMediaSink& sink,

chrome/browser/ui/views/media_router/cast_dialog_sink_button.h

@@ -18,12 +18,6 @@ namespace media_router {
 // hovered.
 class CastDialogSinkButton : public HoverButton {
  public:
-  // Icon sizes in DIP. These values are also used by the "no devices" view for
-  // consistency.
-  static int kPrimaryIconSize;
-  static int kPrimaryIconBorderWidth;
-  static int kSecondaryIconSize;
-
   CastDialogSinkButton(views::ButtonListener* button_listener,
                        const UIMediaSink& sink,
                        int button_tag);