cbuiv: Change IPH bubble font size and text alignment

* Change title and body text alignment to left.
* Change font size to
  - with title: title 18pt, body 13pt, button 13pt
  - w/o title: body 14pt, button 13pt

This change will apply to all IPH bubbles, i.e. both
snooze and non-snooze bubbles.

spec: go/desktop-iph-snooze-ux-spec

Bug: 1121399
Change-Id: Idee04707d42d57b9f65cb99b36a29fa19a99318b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2425194Reviewed-by: Collin Baker <collinbaker@chromium.org>
Commit-Queue: Keren Zhu <kerenzhu@chromium.org>
Cr-Commit-Position: refs/heads/master@{#811282}

chrome/browser/ui/views/chrome_typography.cc

@@ -100,8 +100,20 @@ void ApplyCommonFontStyles(int context,
       *size_delta = 15 - gfx::PlatformFont::kDefaultBaseFontSize;
       break;
 #endif
+    case CONTEXT_IPH_BUBBLE_TITLE: {
+      *size_delta = GetFontSizeDeltaIgnoringUserOrLocaleSettings(18);
+      break;
+    }
+    case CONTEXT_IPH_BUBBLE_BODY_WITH_TITLE: {
+      *size_delta = GetFontSizeDeltaIgnoringUserOrLocaleSettings(13);
+      break;
+    }
+    case CONTEXT_IPH_BUBBLE_BODY_WITHOUT_TITLE: {
+      *size_delta = GetFontSizeDeltaIgnoringUserOrLocaleSettings(14);
+      break;
+    }
     case CONTEXT_IPH_BUBBLE_BUTTON: {
-      *size_delta = GetFontSizeDeltaIgnoringUserOrLocaleSettings(12);
+      *size_delta = GetFontSizeDeltaIgnoringUserOrLocaleSettings(13);
       break;
     }
   }

chrome/browser/ui/views/chrome_typography.h

@@ -56,7 +56,16 @@ enum ChromeTextContext {
   // Status labels in the download shelf.  Usually 10pt.
   CONTEXT_DOWNLOAD_SHELF_STATUS,
 
-  // Button label in the IPH bubble.
+  // Title label in the IPH bubble. Usually 18pt.
+  CONTEXT_IPH_BUBBLE_TITLE,
+
+  // Body text label in the IPH bubble when a title exists. Usually 13pt.
+  CONTEXT_IPH_BUBBLE_BODY_WITH_TITLE,
+
+  // Body text label in the IPH bubble when no title exists. Usually 14pt.
+  CONTEXT_IPH_BUBBLE_BODY_WITHOUT_TITLE,
+
+  // Button label in the IPH bubble. Usually 13pt.
   CONTEXT_IPH_BUBBLE_BUTTON
 };
 

chrome/browser/ui/views/in_product_help/feature_promo_bubble_view.cc

@@ -34,6 +34,7 @@
 #include "ui/views/layout/fill_layout.h"
 #include "ui/views/layout/layout_provider.h"
 #include "ui/views/style/platform_style.h"
+#include "ui/views/style/typography.h"
 #include "ui/views/view_class_properties.h"
 
 namespace {
@@ -166,40 +167,45 @@ FeaturePromoBubbleView::FeaturePromoBubbleView(
       ThemeProperties::COLOR_FEATURE_PROMO_BUBBLE_BACKGROUND);
   const SkColor text_color = theme_provider->GetColor(
       ThemeProperties::COLOR_FEATURE_PROMO_BUBBLE_TEXT);
-  const int vertical_spacing = layout_provider->GetDistanceMetric(
+  const int text_vertical_spacing = layout_provider->GetDistanceMetric(
+      views::DISTANCE_RELATED_CONTROL_VERTICAL);
+  const int button_vertical_spacing = layout_provider->GetDistanceMetric(
       views::DISTANCE_UNRELATED_CONTROL_VERTICAL);
 
   auto box_layout = std::make_unique<views::BoxLayout>(
       views::BoxLayout::Orientation::kVertical, kBubbleContentsInsets,
-      vertical_spacing);
+      text_vertical_spacing);
   box_layout->set_main_axis_alignment(
       views::BoxLayout::MainAxisAlignment::kCenter);
   box_layout->set_cross_axis_alignment(
       views::BoxLayout::CrossAxisAlignment::kStretch);
   SetLayoutManager(std::move(box_layout));
 
+  ChromeTextContext body_label_context;
   if (params.title_string_specifier.has_value()) {
     auto* title_label = AddChildView(std::make_unique<views::Label>(
-        l10n_util::GetStringUTF16(params.title_string_specifier.value())));
+        l10n_util::GetStringUTF16(params.title_string_specifier.value()),
+        ChromeTextContext::CONTEXT_IPH_BUBBLE_TITLE));
     title_label->SetBackgroundColor(background_color);
     title_label->SetEnabledColor(text_color);
-    title_label->SetFontList(views::style::GetFont(
-        views::style::CONTEXT_DIALOG_TITLE, views::style::STYLE_PRIMARY));
+    title_label->SetHorizontalAlignment(gfx::ALIGN_LEFT);
 
-    if (params.preferred_width.has_value()) {
+    if (params.preferred_width.has_value())
       title_label->SetMultiLine(true);
-      title_label->SetHorizontalAlignment(gfx::ALIGN_LEFT);
-    }
+
+    body_label_context = CONTEXT_IPH_BUBBLE_BODY_WITH_TITLE;
+  } else {
+    body_label_context = CONTEXT_IPH_BUBBLE_BODY_WITHOUT_TITLE;
   }
 
-  auto* body_label = AddChildView(std::make_unique<views::Label>(body_text));
+  auto* body_label = AddChildView(
+      std::make_unique<views::Label>(body_text, body_label_context));
   body_label->SetBackgroundColor(background_color);
   body_label->SetEnabledColor(text_color);
+  body_label->SetHorizontalAlignment(gfx::ALIGN_LEFT);
 
-  if (params.preferred_width.has_value()) {
+  if (params.preferred_width.has_value())
     body_label->SetMultiLine(true);
-    body_label->SetHorizontalAlignment(gfx::ALIGN_LEFT);
-  }
 
   if (snoozable_) {
     auto* button_container = AddChildView(std::make_unique<views::View>());
@@ -209,6 +215,8 @@ FeaturePromoBubbleView::FeaturePromoBubbleView(
 
     button_layout->set_main_axis_alignment(
         views::BoxLayout::MainAxisAlignment::kEnd);
+    button_container->SetProperty(
+        views::kMarginsKey, gfx::Insets(button_vertical_spacing, 0, 0, 0));
 
     const base::string16 snooze_text =
         l10n_util::GetStringUTF16(IDS_PROMO_SNOOZE_BUTTON);