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..a14a5db57f693298141b353ea6344e2f29139607 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
@@ -4,8 +4,11 @@
 
 #include "chrome/browser/ui/views/website_settings/chooser_bubble_ui_view.h"
 
+#include <stddef.h>
+
 #include <algorithm>
 #include <string>
+#include <vector>
 
 #include "base/macros.h"
 #include "base/strings/string16.h"
@@ -30,10 +33,14 @@
 #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/separator.h"
+#include "ui/views/controls/styled_label.h"
+#include "ui/views/controls/styled_label_listener.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"
 #include "ui/views/layout/grid_layout.h"
+#include "ui/views/layout/layout_constants.h"
 
 namespace {
 
@@ -43,16 +50,6 @@ const int kChooserPermissionBubbleWidth = 300;
 // Chooser permission bubble height
 const int kChooserPermissionBubbleHeight = 200;
 
-// Spacing constant for outer margin. This is added to the
-// bubble margin itself to equalize the margins at 13px.
-const int kBubbleOuterMargin = 5;
-
-// Spacing between major items should be 9px.
-const int kItemMajorSpacing = 9;
-
-// Button border size, draws inside the spacing distance.
-const int kButtonBorderSize = 2;
-
 }  // namespace
 
 scoped_ptr<BubbleUi> ChooserBubbleDelegate::BuildBubbleUi() {
@@ -65,6 +62,7 @@ class ChooserTableModel;
 // View implementation for the chooser bubble.
 class ChooserBubbleUiViewDelegate : public views::BubbleDelegateView,

[Evan Stade, 2016/02/22 23:15:16]

I find it very confusing how this is a BubbleDelegateView and also owns a
BubbleDelegate. I filed crbug.com/588868 because to fix this. (Not your fault.)

Regardless of the nomenclature in components/bubble, to better reflect its
responsibilities and clarify roles, I think you should rename
ChooserBubbleDelegate to ChooserBubbleController and chooser_bubble_delegate_ to
controller_.

[juncai, 2016/02/23 01:34:21]

Since the class name change will also touch the code on Mac side:
https://code.google.com/p/chromium/codesearch#chromium/src/chrome/browser/ui/...
I filed a bug and added a TODO to do it in a separate patch.

                                     public views::ButtonListener,
+                                    public views::StyledLabelListener,
                                     public views::TableViewObserver {
  public:
   ChooserBubbleUiViewDelegate(views::View* anchor_view,
@@ -75,14 +73,19 @@ 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::StyledLabelListener:
+  void StyledLabelLinkClicked(views::StyledLabel* label,
+                              const gfx::Range& range,
+                              int event_flags) override;
+
   // views::TableViewObserver:
   void OnSelectionChanged() override;
 
@@ -98,7 +101,6 @@ class ChooserBubbleUiViewDelegate : public views::BubbleDelegateView,
   ChooserBubbleDelegate* chooser_bubble_delegate_;
 
   views::LabelButton* connect_button_;
-  views::LabelButton* cancel_button_;
   views::TableView* table_view_;
   ChooserTableModel* chooser_table_model_;
   bool button_pressed_;
@@ -146,6 +148,24 @@ ChooserBubbleUiViewDelegate::ChooserBubbleUiViewDelegate(
       owner_(owner),
       chooser_bubble_delegate_(chooser_bubble_delegate),
       button_pressed_(false) {
+  // TODO(juncai): try using DialogClientView to build the chooser UI view since
+  // they look similar.
+  // https://crbug.com/587545
+  // ------------------------------------
+  // | 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,9 +173,8 @@ ChooserBubbleUiViewDelegate::ChooserBubbleUiViewDelegate(
   column_set->AddColumn(views::GridLayout::FILL, views::GridLayout::FILL, 1,
                         views::GridLayout::USE_PREF, 0, 0);
 
-  layout->StartRow(1, 0);
-
-  // Create a table view
+  // Lay out the table view.
+  layout->StartRow(0, 0);
   std::vector<ui::TableColumn> table_columns;
   table_columns.push_back(ChooserTableColumn(
       0, "" /* Empty string makes the column title invisible */));
@@ -165,33 +184,23 @@ ChooserBubbleUiViewDelegate::ChooserBubbleUiViewDelegate(
   table_view_->set_select_on_remove(false);
   chooser_table_model_->SetObserver(table_view_);
   table_view_->SetObserver(this);
+  if (chooser_bubble_delegate_->NumOptions() == 0)
+    table_view_->SetEnabled(false);

[Evan Stade, 2016/02/22 23:15:16]

nit:

table_view_->SetEnabled(chooser_bubble_delegate_->NumOptions() > 0);

[juncai, 2016/02/23 01:34:21]

Done.

   layout->AddView(table_view_->CreateParentIfNecessary(), 1, 1,
                   views::GridLayout::FILL, views::GridLayout::FILL,
                   kChooserPermissionBubbleWidth,
                   kChooserPermissionBubbleHeight);
-  if (chooser_bubble_delegate_->NumOptions() == 0) {
-    table_view_->SetEnabled(false);
-  }
 
-  layout->AddPaddingRow(0, kItemMajorSpacing);
+  layout->AddPaddingRow(0, views::kRelatedControlVerticalSpacing);
 
+  // Lay out the Connect/Cancel buttons.
+  layout->StartRow(0, 0);
   views::View* button_row = new views::View();
-  views::GridLayout* button_layout = new views::GridLayout(button_row);
-  views::ColumnSet* button_columns = button_layout->AddColumnSet(0);
+  views::BoxLayout* button_layout = new views::BoxLayout(
+      views::BoxLayout::kHorizontal, 0, 0, views::kRelatedButtonHSpacing);
+  button_layout->set_main_axis_alignment(
+      views::BoxLayout::MAIN_AXIS_ALIGNMENT_END);
   button_row->SetLayoutManager(button_layout);
-  layout->StartRow(1, 0);
-  layout->AddView(button_row);
-
-  // Lay out the Connect/Cancel buttons.
-  button_columns->AddColumn(views::GridLayout::TRAILING,
-                            views::GridLayout::FILL, 100,
-                            views::GridLayout::USE_PREF, 0, 0);
-  button_columns->AddPaddingColumn(0,
-                                   kItemMajorSpacing - (2 * kButtonBorderSize));
-  button_columns->AddColumn(views::GridLayout::TRAILING,
-                            views::GridLayout::FILL, 0,
-                            views::GridLayout::USE_PREF, 0, 0);
-  button_layout->StartRow(0, 0);
 
   base::string16 connect_text =
       l10n_util::GetStringUTF16(IDS_CHOOSER_BUBBLE_CONNECT_BUTTON_TEXT);
@@ -199,16 +208,35 @@ ChooserBubbleUiViewDelegate::ChooserBubbleUiViewDelegate(
   connect_button_->SetStyle(views::Button::STYLE_BUTTON);
   // Disable the connect button at the beginning since no device selected yet.
   connect_button_->SetEnabled(false);
-  button_layout->AddView(connect_button_);
+  button_row->AddChildView(connect_button_);
   chooser_table_model_->SetConnectButton(connect_button_);
 
   base::string16 cancel_text =
       l10n_util::GetStringUTF16(IDS_CHOOSER_BUBBLE_CANCEL_BUTTON_TEXT);
-  cancel_button_ = new views::LabelButton(this, cancel_text);
-  cancel_button_->SetStyle(views::Button::STYLE_BUTTON);
-  button_layout->AddView(cancel_button_);
+  views::LabelButton* cancel_button = new views::LabelButton(this, cancel_text);
+  cancel_button->SetStyle(views::Button::STYLE_BUTTON);
+  button_row->AddChildView(cancel_button);
+  layout->AddView(button_row);
 
-  button_layout->AddPaddingRow(0, kBubbleOuterMargin);
+  layout->AddPaddingRow(0, views::kRelatedControlVerticalSpacing);
+
+  // Lay out the separator.
+  layout->StartRow(0, 0);
+  layout->AddView(new views::Separator(views::Separator::HORIZONTAL));
+
+  layout->AddPaddingRow(0, views::kRelatedControlVerticalSpacing);
+
+  // Lay out the styled label.
+  layout->StartRow(0, 0);
+  base::string16 link =
+      l10n_util::GetStringUTF16(IDS_CHOOSER_BUBBLE_GET_HELP_LINK_TEXT);
+  size_t offset;
+  base::string16 text = l10n_util::GetStringFUTF16(
+      IDS_CHOOSER_BUBBLE_FOOTNOTE_TEXT, link, &offset);
+  views::StyledLabel* label = new views::StyledLabel(text, this);
+  label->AddStyleRange(gfx::Range(offset, offset + link.length()),
+                       views::StyledLabel::RangeStyleInfo::CreateForLink());
+  layout->AddView(label);
 }
 
 ChooserBubbleUiViewDelegate::~ChooserBubbleUiViewDelegate() {
@@ -256,6 +284,13 @@ void ChooserBubbleUiViewDelegate::ButtonPressed(views::Button* button,
   }
 }
 
+void ChooserBubbleUiViewDelegate::StyledLabelLinkClicked(
+    views::StyledLabel* label,
+    const gfx::Range& range,
+    int event_flags) {
+  chooser_bubble_delegate_->OpenHelpCenterUrl();
+}
+
 void ChooserBubbleUiViewDelegate::OnSelectionChanged() {
   connect_button_->SetEnabled(!table_view_->selection_model().empty());
 }