Add message and Help Center link to the chooser UI for Mac

chrome/browser/ui/cocoa/website_settings/chooser_bubble_ui_cocoa.mm

 // 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.
 
 #import "chrome/browser/ui/cocoa/website_settings/chooser_bubble_ui_cocoa.h"
 
 #include <algorithm>
 #include <cmath>
 #include <vector>
 
 #include "base/mac/scoped_nsobject.h"
 #include "base/strings/sys_string_conversions.h"
 #include "base/strings/utf_string_conversions.h"
 #include "chrome/browser/ui/browser.h"
 #include "chrome/browser/ui/browser_finder.h"
 #include "chrome/browser/ui/browser_window.h"
 #import "chrome/browser/ui/chrome_style.h"
 #import "chrome/browser/ui/cocoa/base_bubble_controller.h"
 #import "chrome/browser/ui/cocoa/browser_window_controller.h"
 #import "chrome/browser/ui/cocoa/browser_window_utils.h"
 #import "chrome/browser/ui/cocoa/constrained_window/constrained_window_button.h"
 #import "chrome/browser/ui/cocoa/hover_close_button.h"
 #import "chrome/browser/ui/cocoa/info_bubble_view.h"
 #import "chrome/browser/ui/cocoa/info_bubble_window.h"
 #import "chrome/browser/ui/cocoa/location_bar/location_bar_view_mac.h"
 #include "chrome/browser/ui/website_settings/chooser_bubble_delegate.h"
+#include "chrome/common/url_constants.h"
 #include "chrome/grit/generated_resources.h"
 #include "content/public/browser/native_web_keyboard_event.h"
+#include "skia/ext/skia_utils_mac.h"
+#include "ui/base/cocoa/controls/hyperlink_text_view.h"
 #include "ui/base/cocoa/window_size_constants.h"
 #include "ui/base/l10n/l10n_util_mac.h"
 
 namespace {
 
 // Chooser bubble width.
 const CGFloat kChooserBubbleWidth = 320.0f;
 
 // Chooser bubble height.
-const CGFloat kChooserBubbleHeight = 220.0f;
+const CGFloat kChooserBubbleHeight = 280.0f;
 
 // Distance between the bubble border and the view that is closest to the
 // border.
 const CGFloat kMarginX = 20.0f;
 const CGFloat kMarginY = 20.0f;
 
 // Distance between two views inside the bubble.
 const CGFloat kHorizontalPadding = 10.0f;
 const CGFloat kVerticalPadding = 10.0f;
 
-const CGFloat kTitlePaddingX = 50.0f;
-}
+}  // namespace
 
 scoped_ptr<BubbleUi> ChooserBubbleDelegate::BuildBubbleUi() {
   return make_scoped_ptr(new ChooserBubbleUiCocoa(browser_, this));
 }
 
 @interface ChooserBubbleUiController
     : BaseBubbleController<NSTableViewDataSource, NSTableViewDelegate> {
  @private
   // Bridge to the C++ class that created this object.
   ChooserBubbleUiCocoa* bridge_;
 
   base::scoped_nsobject<NSTextField> titleView_;
   base::scoped_nsobject<NSScrollView> scrollView_;
   base::scoped_nsobject<NSTableColumn> tableColumn_;
   base::scoped_nsobject<NSTableView> tableView_;
   base::scoped_nsobject<NSButton> connectButton_;
   base::scoped_nsobject<NSButton> cancelButton_;
+  base::scoped_nsobject<NSTextField> message_;
+  base::scoped_nsobject<HyperlinkTextView> helpLink_;
   bool buttonPressed_;
 
   Browser* browser_;                                // Weak.
   ChooserBubbleDelegate* chooserBubbleDelegate_;    // Weak.
 }
 
 // Designated initializer.  |browser| and |bridge| must both be non-nil.
 - (id)initWithBrowser:(Browser*)browser
     initWithChooserBubbleDelegate:(ChooserBubbleDelegate*)chooserBubbleDelegate
                            bridge:(ChooserBubbleUiCocoa*)bridge;
@@ skipping 36 matching lines @@
 // Creates a button with |title| and |action|.
 - (base::scoped_nsobject<NSButton>)buttonWithTitle:(NSString*)title
                                             action:(SEL)action;
 
 // Creates the "Connect" button.
 - (base::scoped_nsobject<NSButton>)connectButton;
 
 // Creates the "Cancel" button.
 - (base::scoped_nsobject<NSButton>)cancelButton;
 
+// Creates the message.
+- (base::scoped_nsobject<NSTextField>)message;
+
+// Creates the help link.
+- (base::scoped_nsobject<HyperlinkTextView>)helpLink;
+
 // Called when the "Connect" button is pressed.
 - (void)onConnect:(id)sender;
 
 // Called when the "Cancel" button is pressed.
 - (void)onCancel:(id)sender;
 
 @end
 
 @implementation ChooserBubbleUiController
 
@@ skipping 61 matching lines @@
   // | Chooser bubble title             |
   // | -------------------------------- |
   // | | option 0                     | |
   // | | option 1                     | |
   // | | option 2                     | |
   // | |                              | |
   // | |                              | |
   // | |                              | |
   // | -------------------------------- |
   // |            [ Connect] [ Cancel ] |
+  // |----------------------------------|
+  // | Not seeing your device? Get help |
   // ------------------------------------
 
   // Determine the dimensions of the bubble.
   // Once the height and width are set, the buttons and permission menus can
   // be laid out correctly.
   NSRect bubbleFrame =
       NSMakeRect(0, 0, kChooserBubbleWidth, kChooserBubbleHeight);
 
   // Create the views.
   // Title.
   titleView_ = [self bubbleTitle];
-  CGFloat titleOriginX = kMarginX;
   CGFloat titleHeight = NSHeight([titleView_ frame]);
-  CGFloat titleOriginY = kChooserBubbleHeight - kMarginY - titleHeight;
-  [titleView_ setFrameOrigin:NSMakePoint(titleOriginX, titleOriginY)];
-  [view addSubview:titleView_];
 
   // Connect button.
   connectButton_ = [self connectButton];
+  CGFloat connectButtonWidth = NSWidth([connectButton_ frame]);
+  CGFloat connectButtonHeight = NSHeight([connectButton_ frame]);
+
   // Cancel button.
   cancelButton_ = [self cancelButton];
-  CGFloat connectButtonWidth = NSWidth([connectButton_ frame]);
-  CGFloat connectButtonHeight = NSHeight([connectButton_ frame]);
   CGFloat cancelButtonWidth = NSWidth([cancelButton_ frame]);
 
+  // Message.
+  message_ = [self message];
+  CGFloat messageWidth = NSWidth([message_ frame]);
+  CGFloat messageHeight = NSHeight([message_ frame]);
+
+  // Help link.
+  helpLink_ = [self helpLink];
+
+  // Separator.
+  CGFloat separatorOriginX = 0.0f;
+  CGFloat separatorOriginY = kMarginY + messageHeight + kVerticalPadding;
+  NSBox* separator =
+      [self horizontalSeparatorWithFrame:NSMakeRect(separatorOriginX,
+                                                    separatorOriginY,
+                                                    kChooserBubbleWidth, 0.0f)];
+
   // ScollView embedding with TableView.
   CGFloat scrollViewWidth = kChooserBubbleWidth - 2 * kMarginX;
   CGFloat scrollViewHeight = kChooserBubbleHeight - 2 * kMarginY -
-                             2 * kVerticalPadding - titleHeight -
-                             connectButtonHeight;
-  NSRect scrollFrame =
-      NSMakeRect(kMarginX, kMarginY + connectButtonHeight + kVerticalPadding,
-                 scrollViewWidth, scrollViewHeight);
+                             4 * kVerticalPadding - titleHeight -
+                             connectButtonHeight - messageHeight;
+  NSRect scrollFrame = NSMakeRect(
+      kMarginX,
+      kMarginY + messageHeight + 3 * kVerticalPadding + connectButtonHeight,
+      scrollViewWidth, scrollViewHeight);
   scrollView_.reset([[NSScrollView alloc] initWithFrame:scrollFrame]);
   [scrollView_ setBorderType:NSBezelBorder];
   [scrollView_ setHasVerticalScroller:YES];
   [scrollView_ setHasHorizontalScroller:YES];
   [scrollView_ setAutohidesScrollers:YES];
 
   // TableView.
   tableView_.reset([[NSTableView alloc] initWithFrame:NSZeroRect]);
   tableColumn_.reset([[NSTableColumn alloc] initWithIdentifier:@""]);
   [tableColumn_ setWidth:(scrollViewWidth - kMarginX)];
   [tableView_ addTableColumn:tableColumn_];
   [tableView_ setDelegate:self];
   [tableView_ setDataSource:self];
   // Make the column title invisible.
   [tableView_ setHeaderView:nil];
   [tableView_ setFocusRingType:NSFocusRingTypeNone];
 
+  // Lay out the views.
+  // Title.
+  CGFloat titleOriginX = kMarginX;
+  CGFloat titleOriginY = kChooserBubbleHeight - kMarginY - titleHeight;
+  [titleView_ setFrameOrigin:NSMakePoint(titleOriginX, titleOriginY)];
+  [view addSubview:titleView_];
+
+  // ScollView.
   [scrollView_ setDocumentView:tableView_];
   [view addSubview:scrollView_];
 
-  // Set connect button and cancel button to the right place.
+  // Connect button.
   CGFloat connectButtonOriginX = kChooserBubbleWidth - kMarginX -
                                  kHorizontalPadding - connectButtonWidth -
                                  cancelButtonWidth;
-  CGFloat connectButtonOriginY = kMarginY;
+  CGFloat connectButtonOriginY =
+      kMarginY + messageHeight + 2 * kVerticalPadding;
   [connectButton_
       setFrameOrigin:NSMakePoint(connectButtonOriginX, connectButtonOriginY)];
   [connectButton_ setEnabled:NO];
   [view addSubview:connectButton_];
 
+  // Cancel button.
   CGFloat cancelButtonOriginX =
       kChooserBubbleWidth - kMarginX - cancelButtonWidth;
-  CGFloat cancelButtonOriginY = kMarginY;
+  CGFloat cancelButtonOriginY = connectButtonOriginY;
   [cancelButton_
       setFrameOrigin:NSMakePoint(cancelButtonOriginX, cancelButtonOriginY)];
   [view addSubview:cancelButton_];
 
+  // Separator.
+  [view addSubview:separator];
+
+  // Message.
+  CGFloat messageOriginX = kMarginX;
+  CGFloat messageOriginY = kMarginY;
+  [message_ setFrameOrigin:NSMakePoint(messageOriginX, messageOriginY)];
+  [view addSubview:message_];
+
+  // Help link.
+  CGFloat helpLinkOriginX = kMarginX + messageWidth;
+  CGFloat helpLinkOriginY = kMarginY;
+  [helpLink_ setFrameOrigin:NSMakePoint(helpLinkOriginX, helpLinkOriginY)];
+  [view addSubview:helpLink_];
+
   bubbleFrame = [[self window] frameRectForContentRect:bubbleFrame];
   if ([[self window] isVisible]) {
     // Unfortunately, calling -setFrame followed by -setFrameOrigin  (called
     // within -setAnchorPoint) causes flickering.  Avoid the flickering by
     // manually adjusting the new frame's origin so that the top left stays the
     // same, and only calling -setFrame.
     NSRect currentWindowFrame = [[self window] frame];
     bubbleFrame.origin = currentWindowFrame.origin;
     bubbleFrame.origin.y = bubbleFrame.origin.y +
                            currentWindowFrame.size.height -
@@ skipping 100 matching lines @@
 - (base::scoped_nsobject<NSTextField>)bubbleTitle {
   base::scoped_nsobject<NSTextField> titleView(
       [[NSTextField alloc] initWithFrame:NSZeroRect]);
   [titleView setDrawsBackground:NO];
   [titleView setBezeled:NO];
   [titleView setEditable:NO];
   [titleView setSelectable:NO];
   [titleView setStringValue:l10n_util::GetNSString(IDS_CHOOSER_BUBBLE_PROMPT)];
   [titleView setFont:[NSFont systemFontOfSize:[NSFont systemFontSize]]];
   [titleView sizeToFit];
-  NSRect titleFrame = [titleView frame];
-  [titleView setFrameSize:NSMakeSize(NSWidth(titleFrame) + kTitlePaddingX,
-                                     NSHeight(titleFrame))];
   return titleView;
 }
 
 - (base::scoped_nsobject<NSButton>)buttonWithTitle:(NSString*)title
                                             action:(SEL)action {
   base::scoped_nsobject<NSButton> button(
       [[ConstrainedWindowButton alloc] initWithFrame:NSZeroRect]);
   [button setButtonType:NSMomentaryPushInButton];
   [button setTitle:title];
   [button setTarget:self];
   [button setAction:action];
   [button sizeToFit];
   return button;
 }
 
 - (base::scoped_nsobject<NSButton>)connectButton {
   NSString* connectTitle =
       l10n_util::GetNSString(IDS_CHOOSER_BUBBLE_CONNECT_BUTTON_TEXT);
   return [self buttonWithTitle:connectTitle action:@selector(onConnect:)];
 }
 
 - (base::scoped_nsobject<NSButton>)cancelButton {
   NSString* cancelTitle =
       l10n_util::GetNSString(IDS_CHOOSER_BUBBLE_CANCEL_BUTTON_TEXT);
   return [self buttonWithTitle:cancelTitle action:@selector(onCancel:)];
 }
 
+- (base::scoped_nsobject<NSTextField>)message {
+  base::scoped_nsobject<NSTextField> messageView(
+      [[NSTextField alloc] initWithFrame:NSZeroRect]);
+  [messageView setDrawsBackground:NO];
+  [messageView setBezeled:NO];
+  [messageView setEditable:NO];
+  [messageView setSelectable:NO];
+  [messageView
+      setStringValue:l10n_util::GetNSString(IDS_CHOOSER_BUBBLE_NO_DEVICE_TEXT)];
+  [messageView setFont:[NSFont systemFontOfSize:[NSFont systemFontSize]]];
+  [messageView sizeToFit];
+  return messageView;
+}
+
+- (base::scoped_nsobject<HyperlinkTextView>)helpLink {
+  base::scoped_nsobject<HyperlinkTextView> helpTextView(
+      [[HyperlinkTextView alloc] initWithFrame:NSZeroRect]);
+  NSString* getHelpText =
+      l10n_util::GetNSString(IDS_CHOOSER_BUBBLE_GET_HELP_LINK_TEXT);
+
+  NSColor* linkColor =
+      skia::SkColorToCalibratedNSColor(chrome_style::GetLinkColor());
+  [helpTextView setMessage:getHelpText
+                  withFont:[NSFont systemFontOfSize:[NSFont systemFontSize]]
+              messageColor:linkColor];
+
+  NSUInteger getHelpOffset = 0;
+  [helpTextView addLinkRange:NSMakeRange(getHelpOffset, [getHelpText length])

[Robert Sesek, 2016/02/16 21:26:40]

Since you're linkifying the entire text content, did you look at
HyperlinkButtonCell ?

[juncai, 2016/02/17 01:06:42]

Done.

+                     withURL:@(chrome::kChooserUIGetHelpURL)
+                   linkColor:linkColor];
+
+  // Removes the underlining from the link.
+  NSTextStorage* textStorage = [helpTextView textStorage];
+  [textStorage addAttribute:NSUnderlineStyleAttributeName
+                      value:@(NSUnderlineStyleNone)
+                      range:NSMakeRange(getHelpOffset, [getHelpText length])];
+
+  [helpTextView setFrameSize:NSMakeSize(70, 17)];
+
+  return helpTextView;
+}
+
 + (CGFloat)matchWidthsOf:(NSView*)viewA andOf:(NSView*)viewB {
   NSRect frameA = [viewA frame];
   NSRect frameB = [viewB frame];
   CGFloat width = std::max(NSWidth(frameA), NSWidth(frameB));
   [viewA setFrameSize:NSMakeSize(width, NSHeight(frameA))];
   [viewB setFrameSize:NSMakeSize(width, NSHeight(frameB))];
   return width;
 }
 
 + (void)alignCenterOf:(NSView*)viewA verticallyToCenterOf:(NSView*)viewB {
@@ skipping 65 matching lines @@
   [chooser_bubble_ui_controller_ onOptionAdded:static_cast<NSInteger>(index)];
 }
 
 void ChooserBubbleUiCocoa::OnOptionRemoved(size_t index) {
   [chooser_bubble_ui_controller_ onOptionRemoved:static_cast<NSInteger>(index)];
 }
 
 void ChooserBubbleUiCocoa::OnBubbleClosing() {
   chooser_bubble_ui_controller_ = nil;
 }