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/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 {
 
 // 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;
-
-// 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::StyledLabelListener,
                                     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::StyledLabelListener:
+  void StyledLabelLinkClicked(views::StyledLabel* label,
+                              const gfx::Range& range,
+                              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::StyledLabel* label_;
   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) {
+  // 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);
 
   views::ColumnSet* column_set = layout->AddColumnSet(0);
   column_set->AddColumn(views::GridLayout::FILL, views::GridLayout::FILL, 1,
                         views::GridLayout::USE_PREF, 0, 0);

[Evan Stade, 2016/02/17 23:09:01]

so |layout| only has one column set with one column in it... this should be a
box layout

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

Tried using the following code to add a TableView to BoxLayout:
views::View* table_parent = table_view_->CreateParentIfNecessary();
AddChildView(table_parent);
layout->SetFlexForView(table_parent, 1);

But somehow the table view is not shown. Any suggestions? Thanks!

 
-  layout->StartRow(1, 0);
+  layout->StartRow(0, 0);

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

Should the table's row be resizable? (if the bubble is shorter than expected?)

[Jeffrey Yasskin, 2016/02/17 23:54:25]

The UX folks are still figuring out how to size the bubble appropriately:
https://groups.google.com/a/google.com/d/msg/chrome-ui-review/AHU4T6B-8sU/kBU...
Bluetooth, especially, causes a problem because it discovers devices over time,
which could cause the buttons to jump around.

 
   // 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);
+  layout->AddPaddingRow(0, views::kRelatedControlVerticalSpacing);
 
   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,

[Evan Stade, 2016/02/17 23:09:01]

this also seems like it should be a (horizontal) box layout

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

Done.

                             views::GridLayout::FILL, 100,
                             views::GridLayout::USE_PREF, 0, 0);
-  button_columns->AddPaddingColumn(0,
-                                   kItemMajorSpacing - (2 * kButtonBorderSize));
+  button_columns->AddPaddingColumn(0, views::kRelatedButtonHSpacing);
   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, views::kRelatedControlVerticalSpacing);
+
+  // Lay out the separator.
+  layout->StartRow(0, 0);
+  views::Separator* separator =
+      new views::Separator(views::Separator::HORIZONTAL);

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

nit: inline in AddView() call below; remove |separator|.

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

Done.

+  layout->AddView(separator);
+
+  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_NO_DEVICE_TEXT, link, &offset);
+  label_ = new views::StyledLabel(text, this);
+  views::StyledLabel::RangeStyleInfo link_style =
+      views::StyledLabel::RangeStyleInfo::CreateForLink();
+  link_style.color =
+      GetNativeTheme()->GetSystemColor(ui::NativeTheme::kColorId_LinkEnabled);

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

aside: odd that CreateForLink doesn't do this.

[Evan Stade, 2016/02/17 23:09:01]

I don't think you can call GetNativeTheme() yet (and get a good return value)
because you haven't been added to a parent view or widget hierarchy. This
probably breaks on Linux either in gtk theme mode or classic theme mode.

[Jeffrey Yasskin, 2016/02/17 23:54:25]

It does, by causing the created label at
https://code.google.com/p/chromium/codesearch/#chromium/src/ui/views/controls...
to be a Link, which has a default color at
https://code.google.com/p/chromium/codesearch/#chromium/src/ui/views/controls....

Jun, if you remove this line, does the link look like a link?

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

override
views::BubbleDelegateView::OnNativeThemeChanged to set the link text color.

Done.

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

If I remove this line, the link still looks like a link, but the color is red
instead of blue.

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

ok, this line of code is not needed, estade@ pointed out that I was testing the
bubble UI using the the gtk theme and the link text is red. In classic theme the
link text is blue. I changed it to classic theme and it works.

+  label_->AddStyleRange(gfx::Range(offset, offset + link.length()), link_style);
+  layout->AddView(label_);
 }
 
 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::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());
 }
 
 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;
 }