Add message and Help Center link to the chooser UI

chrome/browser/ui/views/website_settings/chooser_bubble_ui_view.cc

Index: chrome/browser/ui/views/website_settings/chooser_bubble_ui_view.cc
diff --git a/chrome/browser/ui/views/website_settings/chooser_bubble_ui_view.cc b/chrome/browser/ui/views/website_settings/chooser_bubble_ui_view.cc
index 4a412c6a53ccd7af07c70572614ddc340035e1bc..32247e8641d15e91bc72c9569beeb7f4e0f8dfda 100644
--- a/chrome/browser/ui/views/website_settings/chooser_bubble_ui_view.cc
+++ b/chrome/browser/ui/views/website_settings/chooser_bubble_ui_view.cc
@@ -30,6 +30,10 @@
 #include "ui/views/bubble/bubble_frame_view.h"
 #include "ui/views/controls/button/label_button.h"
 #include "ui/views/controls/button/label_button_border.h"
+#include "ui/views/controls/label.h"
+#include "ui/views/controls/link.h"
+#include "ui/views/controls/link_listener.h"
+#include "ui/views/controls/separator.h"
 #include "ui/views/controls/table/table_view.h"
 #include "ui/views/controls/table/table_view_observer.h"
 #include "ui/views/layout/box_layout.h"
@@ -50,6 +54,9 @@ const int kBubbleOuterMargin = 5;
 // Spacing between major items should be 9px.
 const int kItemMajorSpacing = 9;
 
+// Spacing between two text labels.
+const int kTextLabelSpacing = 3;
+
 // Button border size, draws inside the spacing distance.
 const int kButtonBorderSize = 2;
 
@@ -65,6 +72,7 @@ class ChooserTableModel;
 // View implementation for the chooser bubble.
 class ChooserBubbleUiViewDelegate : public views::BubbleDelegateView,
                                     public views::ButtonListener,
+                                    public views::LinkListener,
                                     public views::TableViewObserver {
  public:
   ChooserBubbleUiViewDelegate(views::View* anchor_view,
@@ -75,14 +83,17 @@ class ChooserBubbleUiViewDelegate : public views::BubbleDelegateView,
 
   void Close();
 
-  // BubbleDelegateView:
+  // views::BubbleDelegateView:
   bool ShouldShowWindowTitle() const override;
   base::string16 GetWindowTitle() const override;
   void OnWidgetDestroying(views::Widget* widget) override;
 
-  // ButtonListener:
+  // views::ButtonListener:
   void ButtonPressed(views::Button* button, const ui::Event& event) override;
 
+  // views::LinkListener:
+  void LinkClicked(views::Link* source, int event_flags) override;
+
   // views::TableViewObserver:
   void OnSelectionChanged() override;
 
@@ -99,6 +110,7 @@ class ChooserBubbleUiViewDelegate : public views::BubbleDelegateView,
 
   views::LabelButton* connect_button_;
   views::LabelButton* cancel_button_;
+  views::Link* get_help_link_;
   views::TableView* table_view_;
   ChooserTableModel* chooser_table_model_;
   bool button_pressed_;
@@ -146,6 +158,21 @@ ChooserBubbleUiViewDelegate::ChooserBubbleUiViewDelegate(
       owner_(owner),
       chooser_bubble_delegate_(chooser_bubble_delegate),
       button_pressed_(false) {
+  // ------------------------------------

[msw, 2016/02/17 01:31:35]

Why is this bubble a darker gray than others?

[juncai, 2016/02/17 22:40:40]

The chooser bubble color is the same color as other permission bubble such as
geolocation.

+  // | Chooser bubble title             |
+  // | -------------------------------- |
+  // | | option 0                     | |
+  // | | option 1                     | |
+  // | | option 2                     | |
+  // | |                              | |
+  // | |                              | |
+  // | |                              | |
+  // | -------------------------------- |
+  // |            [ Connect] [ Cancel ] |
+  // |----------------------------------|
+  // | Not seeing your device? Get help |
+  // ------------------------------------
+
   views::GridLayout* layout = new views::GridLayout(this);
   SetLayoutManager(layout);
 
@@ -153,7 +180,7 @@ ChooserBubbleUiViewDelegate::ChooserBubbleUiViewDelegate(
   column_set->AddColumn(views::GridLayout::FILL, views::GridLayout::FILL, 1,
                         views::GridLayout::USE_PREF, 0, 0);
 
-  layout->StartRow(1, 0);
+  layout->StartRow(0, 0);
 
   // Create a table view
   std::vector<ui::TableColumn> table_columns;
@@ -169,9 +196,8 @@ ChooserBubbleUiViewDelegate::ChooserBubbleUiViewDelegate(
                   views::GridLayout::FILL, views::GridLayout::FILL,
                   kChooserPermissionBubbleWidth,
                   kChooserPermissionBubbleHeight);
-  if (chooser_bubble_delegate_->NumOptions() == 0) {
+  if (chooser_bubble_delegate_->NumOptions() == 0)
     table_view_->SetEnabled(false);
-  }
 
   layout->AddPaddingRow(0, kItemMajorSpacing);
 
@@ -179,7 +205,7 @@ ChooserBubbleUiViewDelegate::ChooserBubbleUiViewDelegate(
   views::GridLayout* button_layout = new views::GridLayout(button_row);
   views::ColumnSet* button_columns = button_layout->AddColumnSet(0);
   button_row->SetLayoutManager(button_layout);
-  layout->StartRow(1, 0);
+  layout->StartRow(0, 0);
   layout->AddView(button_row);
 
   // Lay out the Connect/Cancel buttons.
@@ -209,6 +235,46 @@ ChooserBubbleUiViewDelegate::ChooserBubbleUiViewDelegate(
   button_layout->AddView(cancel_button_);
 
   button_layout->AddPaddingRow(0, kBubbleOuterMargin);
+
+  layout->AddPaddingRow(0, kItemMajorSpacing);
+
+  // Lay out the separator.
+  layout->StartRow(0, 0);
+  views::Separator* separator =
+      new views::Separator(views::Separator::HORIZONTAL);
+  layout->AddView(separator);
+
+  layout->AddPaddingRow(0, kItemMajorSpacing);
+
+  // Lay out the message label and link.
+  views::View* message_row = new views::View();
+  views::GridLayout* message_layout = new views::GridLayout(message_row);
+  views::ColumnSet* message_columns = message_layout->AddColumnSet(0);
+  message_row->SetLayoutManager(message_layout);
+  layout->StartRow(0, 0);
+  layout->AddView(message_row);
+
+  message_columns->AddColumn(views::GridLayout::TRAILING,
+                             views::GridLayout::FILL, 0,
+                             views::GridLayout::USE_PREF, 0, 0);
+  message_columns->AddPaddingColumn(0, kTextLabelSpacing);
+  message_columns->AddColumn(views::GridLayout::TRAILING,
+                             views::GridLayout::FILL, 0,
+                             views::GridLayout::USE_PREF, 0, 0);
+  message_layout->StartRow(0, 0);
+
+  views::Label* label = new views::Label(
+      l10n_util::GetStringUTF16(IDS_CHOOSER_BUBBLE_NO_DEVICE_TEXT));
+  label->SetHorizontalAlignment(gfx::ALIGN_LEFT);
+  message_layout->AddView(label);
+
+  get_help_link_ = new views::Link(
+      l10n_util::GetStringUTF16(IDS_CHOOSER_BUBBLE_GET_HELP_LINK_TEXT));
+  get_help_link_->SetEnabledColor(SkColorSetRGB(66, 133, 255));

[msw, 2016/02/17 01:31:35]

Where did this color come from? Can you use something from the native theme?

[juncai, 2016/02/17 22:40:40]

Done.

+  get_help_link_->SetUnderline(false);
+  get_help_link_->set_listener(this);
+  get_help_link_->SetHorizontalAlignment(gfx::ALIGN_LEFT);
+  message_layout->AddView(get_help_link_);
 }
 
 ChooserBubbleUiViewDelegate::~ChooserBubbleUiViewDelegate() {
@@ -256,6 +322,14 @@ void ChooserBubbleUiViewDelegate::ButtonPressed(views::Button* button,
   }
 }
 
+void ChooserBubbleUiViewDelegate::LinkClicked(views::Link* source,
+                                              int event_flags) {
+  if (source == get_help_link_)
+    chooser_bubble_delegate_->OpenHelpCenterURL();
+  else
+    NOTREACHED();
+}
+
 void ChooserBubbleUiViewDelegate::OnSelectionChanged() {
   connect_button_->SetEnabled(!table_view_->selection_model().empty());
 }