Add message and Help Center link to the chooser UI

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

 // 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.
 
 #include "chrome/browser/ui/views/website_settings/chooser_bubble_ui_view.h"
 
 #include <algorithm>
 #include <string>
 
 #include "base/macros.h"
@@ skipping 12 matching lines @@
 #include "ui/accessibility/ax_view_state.h"
 #include "ui/base/l10n/l10n_util.h"
 #include "ui/base/resource/resource_bundle.h"
 #include "ui/gfx/paint_vector_icon.h"
 #include "ui/gfx/text_constants.h"
 #include "ui/gfx/vector_icons_public.h"
 #include "ui/views/bubble/bubble_delegate.h"
 #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"
 #include "ui/views/layout/grid_layout.h"
 
 namespace {
 
 // Chooser permission bubble width
 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;
 
+// Spacing between two text labels.
+const int kTextLabelSpacing = 3;

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

Try to use ui/views/layout/layout_constants.h here and elsewhere.

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

Done.

+
 // Button border size, draws inside the spacing distance.
 const int kButtonBorderSize = 2;
 
 }  // namespace
 
 scoped_ptr<BubbleUi> ChooserBubbleDelegate::BuildBubbleUi() {
   return make_scoped_ptr(new ChooserBubbleUiView(browser_, this));
 }
 
 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,
                               views::BubbleBorder::Arrow anchor_arrow,
                               ChooserBubbleUiView* owner,
                               ChooserBubbleDelegate* chooser_bubble_delegate);
   ~ChooserBubbleUiViewDelegate() override;
 
   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;
 
   // Updates the anchor's arrow and view. Also repositions the bubble so it's
   // displayed in the correct location.
   void UpdateAnchor(views::View* anchor_view,
                     views::BubbleBorder::Arrow anchor_arrow);
 
  private:
   friend ChooserBubbleUiView;
 
   ChooserBubbleUiView* owner_;
   ChooserBubbleDelegate* chooser_bubble_delegate_;
 
   views::LabelButton* connect_button_;
   views::LabelButton* cancel_button_;
+  views::Link* get_help_link_;
   views::TableView* table_view_;
   ChooserTableModel* chooser_table_model_;
   bool button_pressed_;
 
   DISALLOW_COPY_AND_ASSIGN(ChooserBubbleUiViewDelegate);
 };
 
 ui::TableColumn ChooserTableColumn(int id, const std::string& title) {
   ui::TableColumn column;
   column.id = id;
@@ skipping 27 matching lines @@
 
 ChooserBubbleUiViewDelegate::ChooserBubbleUiViewDelegate(
     views::View* anchor_view,
     views::BubbleBorder::Arrow anchor_arrow,
     ChooserBubbleUiView* owner,
     ChooserBubbleDelegate* chooser_bubble_delegate)
     : views::BubbleDelegateView(anchor_view, anchor_arrow),
       owner_(owner),
       chooser_bubble_delegate_(chooser_bubble_delegate),
       button_pressed_(false) {
+  // ------------------------------------

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

This looks so close to DialogClientView (content, ok/cancel, footnote view), I
would prefer to see that re-used here instead of partially rebuilt.

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

I filed a bug and added a TODO here to try it in a new patch once this patch is
done.

+  // | Chooser bubble title             |
+  // | -------------------------------- |
+  // | | option 0                     | |
+  // | | option 1                     | |
+  // | | option 2                     | |
+  // | |                              | |
+  // | |                              | |
+  // | |                              | |
+  // | -------------------------------- |
+  // |            [ Connect] [ Cancel ] |

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

nit: space after connect...

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

Done.

+  // |----------------------------------|
+  // | Not seeing your device? Get help |

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

Is "device" relevant terminology for every chooser bubble?

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

It is relevant for the two components that use this UI now: WebUsb and
WebBluetooth. This is part of the UI that was discussed at:
http://code.google.com/p/chromium/issues/detail?id=583479

[msw, 2016/02/17 22:58:16]

Okay, perhaps this should be a DeviceChooserBubbleUiViewDelegate... ha.

[juncai, 2016/02/19 01:51:00]

Added a GetOptionDescription virtual function to ChooserBubbleDelegate and
subclass can override it with different option description.

Also updated the comments.

Done.

[juncai, 2016/02/20 02:25:04]

We may not need to generalize the chooser UI yet since usb/bluetooth use it and
have the same UI footnote text. So we will hold off this change for now.

[Jeffrey Yasskin, 2016/02/22 19:54:14]

It'd be better to ask if that's all right with Mike. I suggested holding off on
the change because YAGNI, but Mike has more experience with this area and might
disagree.

[msw, 2016/02/22 20:13:11]

Since the chooser is limited to bluetooth and usb device choosing, this seems
acceptable for now.

+  // ------------------------------------
+
   views::GridLayout* layout = new views::GridLayout(this);
   SetLayoutManager(layout);
 
   views::ColumnSet* column_set = layout->AddColumnSet(0);
   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;
   table_columns.push_back(ChooserTableColumn(
       0, "" /* Empty string makes the column title invisible */));
   chooser_table_model_ = new ChooserTableModel(chooser_bubble_delegate_);
   table_view_ = new views::TableView(chooser_table_model_, table_columns,
                                      views::TEXT_ONLY, true);
   table_view_->set_select_on_remove(false);
   chooser_table_model_->SetObserver(table_view_);
   table_view_->SetObserver(this);
   layout->AddView(table_view_->CreateParentIfNecessary(), 1, 1,
                   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);
 
   views::View* button_row = new views::View();
   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.
   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);
   connect_button_ = new views::LabelButton(this, connect_text);
   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_);
   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_);
 
   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.

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

Putting the link right of the text isn't always correct (think about
internationalization). Use StyledLabel, I guess.

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

Done.

+  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));
+  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() {
   RemoveAllChildViews(true);
   if (owner_)
     owner_->Close();
   chooser_table_model_->SetObserver(nullptr);
 }
 
 void ChooserBubbleUiViewDelegate::Close() {
@@ skipping 27 matching lines @@
     chooser_bubble_delegate_->Select(table_view_->selection_model().active());
   else
     chooser_bubble_delegate_->Cancel();
 
   if (owner_) {
     owner_->Close();
     owner_ = nullptr;
   }
 }
 
+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());
 }
 
 void ChooserBubbleUiViewDelegate::UpdateAnchor(
     views::View* anchor_view,
     views::BubbleBorder::Arrow anchor_arrow) {
   if (GetAnchorView() == anchor_view && arrow() == anchor_arrow)
     return;
 
@@ skipping 131 matching lines @@
     return browser_view->exclusive_access_bubble()->GetView();
 
   return browser_view->top_container();
 }
 
 views::BubbleBorder::Arrow ChooserBubbleUiView::GetAnchorArrow() {
   if (browser_->SupportsWindowFeature(Browser::FEATURE_LOCATIONBAR))
     return views::BubbleBorder::TOP_LEFT;
   return views::BubbleBorder::NONE;
 }