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 <stddef.h>
+
 #include <algorithm>
 #include <string>
+#include <vector>
 
 #include "base/macros.h"
 #include "base/strings/string16.h"
 #include "chrome/browser/profiles/profile.h"
 #include "chrome/browser/ui/browser.h"
 #include "chrome/browser/ui/views/exclusive_access_bubble_views.h"
 #include "chrome/browser/ui/views/frame/browser_view.h"
 #include "chrome/browser/ui/views/frame/top_container_view.h"
 #include "chrome/browser/ui/views/location_bar/location_bar_view.h"
 #include "chrome/browser/ui/views/location_bar/location_icon_view.h"
 #include "chrome/browser/ui/website_settings/chooser_bubble_delegate.h"
 #include "chrome/common/pref_names.h"
 #include "chrome/grit/generated_resources.h"
 #include "components/prefs/pref_service.h"
 #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:
+  void OnNativeThemeChanged(const ui::NativeTheme* native_theme) override;
   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::TableView* table_view_;
   ChooserTableModel* chooser_table_model_;
+  base::string16 link_;
+  std::vector<size_t> offset_;
+  views::StyledLabel* label_;
   bool button_pressed_;
 
   DISALLOW_COPY_AND_ASSIGN(ChooserBubbleUiViewDelegate);
 };
 
 ui::TableColumn ChooserTableColumn(int id, const std::string& title) {
   ui::TableColumn column;
   column.id = id;
   column.title = base::ASCIIToUTF16(title.c_str());
   return column;
@@ skipping 25 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 ...? 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);
 
-  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 */));
   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);
+  if (chooser_bubble_delegate_->NumOptions() == 0)
+    table_view_->SetEnabled(false);
   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);
-
-  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->AddView(button_row);
+  layout->AddPaddingRow(0, views::kRelatedControlVerticalSpacing);
 
   // 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);
+  layout->StartRow(0, 0);
+  views::View* button_row = new views::View();
+  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);
 
   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_);
+  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);
+  link_ = l10n_util::GetStringUTF16(IDS_CHOOSER_BUBBLE_GET_HELP_LINK_TEXT);
+  base::string16 text = l10n_util::GetStringFUTF16(
+      IDS_CHOOSER_BUBBLE_NO_OPTION_TEXT,
+      chooser_bubble_delegate_->GetOptionDescription(), link_, &offset_);
+  label_ = new views::StyledLabel(text, this);
+  layout->AddView(label_);
 }
 
 ChooserBubbleUiViewDelegate::~ChooserBubbleUiViewDelegate() {
   RemoveAllChildViews(true);
   if (owner_)
     owner_->Close();
   chooser_table_model_->SetObserver(nullptr);
 }
 
 void ChooserBubbleUiViewDelegate::Close() {
   if (!button_pressed_)
     chooser_bubble_delegate_->Close();
   owner_ = nullptr;
   GetWidget()->Close();
 }
 
+void ChooserBubbleUiViewDelegate::OnNativeThemeChanged(

[Jeffrey Yasskin, 2016/02/19 21:25:40]

I don't see any other uses of this with RangeStyleInfo::CreateForLink(). See
what's happening with one of the other CreateForLink() calls, and imitate that?

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

This function is not overridden, since I was using gtk theme to test the bubble
UI. By changing it to classic theme, the link text color is blue.

+    const ui::NativeTheme* native_theme) {
+  views::BubbleDelegateView::OnNativeThemeChanged(native_theme);
+  views::StyledLabel::RangeStyleInfo link_style =
+      views::StyledLabel::RangeStyleInfo::CreateForLink();
+  link_style.color =
+      GetNativeTheme()->GetSystemColor(ui::NativeTheme::kColorId_LinkEnabled);
+  label_->AddStyleRange(gfx::Range(offset_[1], offset_[1] + link_.length()),
+                        link_style);
+}
+
 bool ChooserBubbleUiViewDelegate::ShouldShowWindowTitle() const {
   return true;
 }
 
 base::string16 ChooserBubbleUiViewDelegate::GetWindowTitle() const {
   return l10n_util::GetStringUTF16(IDS_CHOOSER_BUBBLE_PROMPT);
 }
 
 void ChooserBubbleUiViewDelegate::OnWidgetDestroying(views::Widget* widget) {
   views::BubbleDelegateView::OnWidgetDestroying(widget);
@@ skipping 11 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;
 }