OneClickSigninBubbleView: Update the bubble form to reflect new bubble/

dialog UI design paradigm [Mac/Views]:

- Add a title ("You're now signed in to Chromium!")
- Modify "OK" button to say "OK, got it!" instead
- Adjust margins and gaps according to spec.

XIB changes:
* Added a new NSTextField for the “You’re now signed in to Chromium” title.
* Made the entire bubble taller (167 height) and wider (350 width) to accommodate new UI spec and to make room for the title text field.
* Repositioned the Advanced link and the OK button in order to have 10 view units margin from the bottom and left/right edges (also for new UI spec).

Screenshots:
* Mac: http://i.imgur.com/qKWKwR4.png
* Views: http://i.imgur.com/6fYmi42.png

BUG=322593
R=thakis@chromium.org

Review URL: https://codereview.chromium.org/107673002

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@243744 0039d316-1c4b-4281-b951-d872f2087c98

chrome/app/chromium_strings.grd

@@ -866,9 +866,6 @@ For Chromium, processes used to display diagnostics information (such as this "a
         <message name="IDS_ONE_CLICK_SIGNIN_DIALOG_MESSAGE_NEW" desc="The message of the one click sign in dialog.">
           You're signed in as <ph name="USER_EMAIL_ADDRESS">$1<ex>foo@gmail.com</ex></ph>. Now you can access your bookmarks, history, and other settings on all your signed in devices.
         </message>
-        <message name="IDS_ONE_CLICK_SIGNIN_BUBBLE_MESSAGE" desc="The body of the sync promo NTP bubble.">
-          You're now signed in to Chromium! Your bookmarks, history, and other settings will be synced to your Google Account.
-        </message>
         <message name="IDS_ONE_CLICK_SIGNIN_BUBBLE_MESSAGE_NEW" desc="The body of the sync promo NTP bubble.">
           Now that you're signed in, you can get your tabs, bookmarks and other Chromium stuff across your laptop, phone and tablet. You will also receive more relevant suggestions and features on Google services.
         </message>

chrome/app/generated_resources.grd

@@ -10788,6 +10788,9 @@ Would you like to start <ph name="CONTROL_PANEL_APPLET_NAME">$1<ex>Add/Remove Pr
       <message name="IDS_ONE_CLICK_BUBBLE_UNDO" desc="The text for the undo button in the one click signin bubble.">
         Undo
       </message>
+      <message name="IDS_ONE_CLICK_SIGNIN_BUBBLE_MESSAGE" desc="The body of the sync promo NTP bubble.">
+        Your bookmarks, history, and other settings will be synced to your Google Account.
+      </message>
       <message name="IDS_ONE_CLICK_SIGNIN_DIALOG_OK_BUTTON" desc="The text of the OK button of the one click sign in dialog.">
         OK, got it!
       </message>

chrome/app/google_chrome_strings.grd

@@ -790,9 +790,6 @@ For Google Chrome, processes used to display diagnostics information (such as th
         <message name="IDS_ONE_CLICK_SIGNIN_DIALOG_MESSAGE_NEW" desc="The message of the one click sign in dialog.">
           You're signed in as <ph name="USER_EMAIL_ADDRESS">$1<ex>foo@gmail.com</ex></ph>. Now you can access your bookmarks, history, and other settings on all your signed in devices.
         </message>
-        <message name="IDS_ONE_CLICK_SIGNIN_BUBBLE_MESSAGE" desc="The body of the sync promo NTP bubble.">
-          You're now signed in to Chrome! Your bookmarks, history, and other settings will be synced to your Google Account.
-        </message>
         <message name="IDS_ONE_CLICK_SIGNIN_BUBBLE_MESSAGE_NEW" desc="The body of the sync promo NTP bubble.">
           Now that you're signed in, you can get your tabs, bookmarks and other Chrome stuff across your laptop, phone and tablet. You will also receive more relevant suggestions and features on Google services.
         </message>

chrome/browser/ui/cocoa/one_click_signin_view_controller.h

@@ -21,6 +21,7 @@ class WebContents;
 @interface OneClickSigninViewController : NSViewController<NSTextViewDelegate> {
  @private
   IBOutlet NSTextField* messageTextField_;
+  IBOutlet NSTextField* titleTextField_;
   IBOutlet NSTextField* informativePlaceholderTextField_;
   IBOutlet NSButton* advancedLink_;
   IBOutlet NSButton* closeButton_;

chrome/browser/ui/cocoa/one_click_signin_view_controller.mm

@@ -161,6 +161,11 @@ void ShiftOriginY(NSView* view, CGFloat amount) {
       [GTMUILocalizerAndLayoutTweaker
           sizeToFitFixedWidthTextField:messageTextField_];
 
+  ShiftOriginY(titleTextField_, totalYOffset);
+  totalYOffset +=
+      [GTMUILocalizerAndLayoutTweaker
+          sizeToFitFixedWidthTextField:titleTextField_];
+
   if (closeButton_)
     ShiftOriginY(closeButton_, totalYOffset);
 
@@ -225,6 +230,11 @@ void ShiftOriginY(NSView* view, CGFloat amount) {
                              messageColor:[NSColor blackColor]
                                 linkColor:linkColor];
 
+
+  // Make the "Advanced" link font as large as the "Learn More" link.
+  [[advancedLink_ cell] setFont:font];
+  [advancedLink_ sizeToFit];
+
   // Size to fit.
   [[informativePlaceholderTextField_ cell] setAttributedStringValue:
       [informativeTextView_ attributedString]];

chrome/browser/ui/views/sync/one_click_signin_bubble_view.cc

@@ -28,6 +28,9 @@
 #include "ui/views/layout/layout_constants.h"
 #include "ui/views/widget/widget.h"
 
+// Minimum width of the the bubble.
+const int kMinBubbleWidth = 310;
+
 // Minimum width for the multi-line label.
 const int kMinimumDialogLabelWidth = 400;
 const int kMinimumLabelWidth = 240;
@@ -115,9 +118,9 @@ OneClickSigninBubbleView::OneClickSigninBubbleView(
     set_arrow(views::BubbleBorder::NONE);
     set_anchor_view_insets(gfx::Insets(0, 0, anchor_view->height() / 2, 0));
     set_close_on_deactivate(false);
-    set_margins(gfx::Insets(kDialogMargin, kDialogMargin, kDialogMargin,
-                          kDialogMargin));
   }
+  int margin = is_sync_dialog_ ? kDialogMargin : views::kButtonVEdgeMarginNew;
+  set_margins(gfx::Insets(margin, margin, margin, margin));
 }
 
 OneClickSigninBubbleView::~OneClickSigninBubbleView() {
@@ -136,6 +139,7 @@ void OneClickSigninBubbleView::AnimationEnded(const gfx::Animation* animation) {
 void OneClickSigninBubbleView::Init() {
   views::GridLayout* layout = new views::GridLayout(this);
   SetLayoutManager(layout);
+
   set_border(views::Border::CreateEmptyBorder(8, 8, 8, 8));
 
   // Column set for descriptive text and link.
@@ -150,7 +154,6 @@ void OneClickSigninBubbleView::Init() {
   cs->AddPaddingColumn(1, views::kUnrelatedControlHorizontalSpacing);
   cs->AddColumn(views::GridLayout::TRAILING, views::GridLayout::CENTER, 0,
                 views::GridLayout::USE_PREF, 0, 0);
-  cs->AddPaddingColumn(0, views::kRelatedButtonHSpacing);
   cs->AddColumn(views::GridLayout::TRAILING, views::GridLayout::CENTER, 0,
                 views::GridLayout::USE_PREF, 0, 0);
 
@@ -171,6 +174,24 @@ void OneClickSigninBubbleView::Init() {
 }
 
 void OneClickSigninBubbleView::InitBubbleContent(views::GridLayout* layout) {
+  layout->set_minimum_size(gfx::Size(kMinBubbleWidth, 0));
+
+  // Add title message.
+  views::ColumnSet* cs = layout->AddColumnSet(COLUMN_SET_TITLE_BAR);
+  cs->AddColumn(views::GridLayout::LEADING, views::GridLayout::LEADING, 0,
+                views::GridLayout::USE_PREF, 0, 0);
+  {
+    layout->StartRow(0, COLUMN_SET_TITLE_BAR);
+
+    views::Label* label = new views::Label(
+        l10n_util::GetStringUTF16(IDS_ONE_CLICK_SIGNIN_DIALOG_TITLE_NEW));
+    label->SetHorizontalAlignment(gfx::ALIGN_LEFT);
+    label->SetFont(label->font().DeriveFont(3));
+    layout->AddView(label);
+  }
+
+  layout->AddPaddingRow(0, views::kUnrelatedControlLargeVerticalSpacing);
+
   // Add main text description.
   layout->StartRow(0, COLUMN_SET_FILL_ALIGN);
 
@@ -184,6 +205,8 @@ void OneClickSigninBubbleView::InitBubbleContent(views::GridLayout* layout) {
   label->SizeToFit(kMinimumLabelWidth);
   layout->AddView(label);
 
+  layout->AddPaddingRow(0, views::kUnrelatedControlVerticalSpacing);
+
   layout->StartRow(0, COLUMN_SET_CONTROLS);
 
   InitLearnMoreLink();
@@ -257,33 +280,24 @@ void OneClickSigninBubbleView::InitButtons(views::GridLayout* layout) {
 
 void OneClickSigninBubbleView::GetButtons(views::LabelButton** ok_button,
                                           views::LabelButton** undo_button) {
-  *ok_button = new views::LabelButton(this, base::string16());
+  base::string16 ok_label =
+      l10n_util::GetStringUTF16(IDS_ONE_CLICK_SIGNIN_DIALOG_OK_BUTTON);
+
+  *ok_button = new views::LabelButton(this, ok_label);
   (*ok_button)->SetStyle(views::Button::STYLE_NATIVE_TEXTBUTTON);
 
   // The default size of the buttons is too large.  To allow them to be smaller
   // ignore the minimum default size.,
   (*ok_button)->set_min_size(gfx::Size());
 
-  base::string16 ok_label;
-
   if (is_sync_dialog_) {
     *undo_button = new views::LabelButton(this, base::string16());
     (*undo_button)->SetStyle(views::Button::STYLE_NATIVE_TEXTBUTTON);
     (*undo_button)->set_min_size(gfx::Size());
 
-    ok_label = l10n_util::GetStringUTF16(IDS_ONE_CLICK_SIGNIN_DIALOG_OK_BUTTON);
     base::string16 undo_label =
         l10n_util::GetStringUTF16(IDS_ONE_CLICK_SIGNIN_DIALOG_UNDO_BUTTON);
-
-    // To make sure they are the same size, SetText() is called
-    // with both strings on both buttons.
-    (*ok_button)->SetText(undo_label);
-    (*ok_button)->SetText(ok_label);
-    (*undo_button)->SetText(ok_label);
     (*undo_button)->SetText(undo_label);
-  } else {
-    ok_label = l10n_util::GetStringUTF16(IDS_OK);
-    (*ok_button)->SetText(ok_label);
   }
 }