Add Infobar Phase 1 UI changes.

This CL adds small tweaks to the UI and layout to bring infobar closer
to Phase 1 design.

Bug: 804652
Cq-Include-Trybots: master.tryserver.chromium.mac:ios-simulator-cronet;master.tryserver.chromium.mac:ios-simulator-full-configs
Change-Id: Ib8da40c032387eb9f7f06ad60e6c3283dea56bf8
Reviewed-on: https://chromium-review.googlesource.com/1036541
Commit-Queue: Peter Lee <pkl@chromium.org>
Reviewed-by: Rohit Rao <rohitrao@chromium.org>
Cr-Commit-Position: refs/heads/master@{#556183}

ios/chrome/app/theme/ios_theme_resources.grd

@@ -36,6 +36,7 @@
       <structure type="chrome_scaled_image" name="IDR_IOS_CONTROLLED_SETTING_MANDATORY" file="controlled_setting_mandatory.png" />
       <structure type="chrome_scaled_image" name="IDR_IOS_ERROR" file="error.png" />
       <structure type="chrome_scaled_image" name="IDR_IOS_INFOBAR_AUTOLOGIN" file="infobar_autologin.png" />
+      <structure type="chrome_scaled_image" name="IDR_IOS_INFOBAR_CLOSE" file="infobar_close.png" />
       <structure type="chrome_scaled_image" name="IDR_IOS_INFOBAR_RESTORE_SESSION" file="infobar_restore_session.png" />
       <structure type="chrome_scaled_image" name="IDR_IOS_INFOBAR_SAVE_PASSWORD" file="infobar_save_password.png" />
       <structure type="chrome_scaled_image" name="IDR_IOS_INFOBAR_TRANSLATE" file="infobar_translate.png" />

ios/chrome/browser/about_flags.mm

@@ -231,6 +231,9 @@ const flags_ui::FeatureEntry kFeatureEntries[] = {
     {"collections-ui-reboot", flag_descriptions::kCollectionsUIRebootName,
      flag_descriptions::kCollectionsUIRebootDescription, flags_ui::kOsIos,
      FEATURE_VALUE_TYPE(kCollectionsUIReboot)},
+    {"infobars-ui-reboot", flag_descriptions::kInfobarsUIRebootName,
+     flag_descriptions::kInfobarsUIRebootDescription, flags_ui::kOsIos,
+     FEATURE_VALUE_TYPE(kInfobarsUIReboot)},
     {"context-menu-element-post-message",
      flag_descriptions::kContextMenuElementPostMessageName,
      flag_descriptions::kContextMenuElementPostMessageDescription,

ios/chrome/browser/ios_chrome_flag_descriptions.cc

@@ -148,6 +148,10 @@ const char kPhysicalWebDescription[] =
     "When enabled, the omnibox will include suggestions for web pages "
     "broadcast by devices near you.";
 
+const char kInfobarsUIRebootName[] = "Infobars UI Reboot";
+const char kInfobarsUIRebootDescription[] =
+    "When enabled, Infobars will use the new UI Reboot layout.";
+
 const char kCollectionsUIRebootName[] = "Collections UI Reboot";
 const char kCollectionsUIRebootDescription[] =
     "When enabled, Collections will use the new UI Reboot stack.";

ios/chrome/browser/ios_chrome_flag_descriptions.h

@@ -126,6 +126,11 @@ extern const char kPhysicalWebDescription[];
 extern const char kCollectionsUIRebootName[];
 extern const char kCollectionsUIRebootDescription[];
 
+// Title and description for the flag to enable the new UI Reboot on existing
+// Infobars.
+extern const char kInfobarsUIRebootName[];
+extern const char kInfobarsUIRebootDescription[];
+
 // Title and description for the flag to enable WKBackForwardList based
 // navigation manager.
 extern const char kSlimNavigationManagerName[];

ios/chrome/browser/ui/infobars/BUILD.gn

@@ -18,6 +18,8 @@ source_set("infobars") {
     "//base",
     "//base:i18n",
     "//components/strings",
+    "//ios/chrome/app/theme:theme",
+    "//ios/chrome/app/theme:theme_grit",
     "//ios/chrome/browser/ui",
     "//ios/chrome/browser/ui/colors",
     "//ios/chrome/browser/ui/fancy_ui",

ios/chrome/browser/ui/infobars/infobar_view.mm

@@ -19,9 +19,11 @@
 #import "ios/chrome/browser/ui/uikit_ui_util.h"
 #import "ios/chrome/browser/ui/util/label_link_controller.h"
 #import "ios/chrome/browser/ui/util/named_guide.h"
+#include "ios/chrome/grit/ios_theme_resources.h"
 #import "ios/third_party/material_components_ios/src/components/Buttons/src/MaterialButtons.h"
 #import "ios/third_party/material_components_ios/src/components/Typography/src/MaterialTypography.h"
 #include "ui/base/l10n/l10n_util.h"
+#include "ui/base/resource/resource_bundle.h"
 #import "ui/gfx/ios/NSString+CrStringDrawing.h"
 #import "ui/gfx/ios/uikit_util.h"
 #include "url/gurl.h"
@@ -82,15 +84,74 @@ const LayoutMetrics kLayoutMetricsLegacy = {
     16.0   // horizontal_space_between_icon_and_text
 };
 
+const LayoutMetrics kLayoutMetricsPhase1 = {
+    20.0,  // left_margin_on_first_line_when_icon_absent
+    30.0,  // minimum_space_between_right_and_left_aligned_widgets
+    10.0,  // right_margin
+    10.0,  // space_between_widgets
+    8.0,   // close_button_inner_padding
+    36.0,  // button_height
+    16.0,  // button_margin
+    8.0,   // extra_button_margin_on_single_line
+    8.0,   // button_spacing
+    8.0,   // button_width_units
+    16.0,  // buttons_margin_top
+    16.0,  // close_button_margin_left
+    5.0,   // label_line_spacing
+    22.0,  // label_margin_bottom
+    0.0,   // extra_margin_between_label_and_button
+    21.0,  // label_margin_top
+    68.0,  // minimum_infobar_height
+    16.0   // horizontal_space_between_icon_and_text
+};
+
 // Returns the layout metrics data structure. Returned value is never nil.
-const LayoutMetrics* GetCurrentLayoutMetrics() {
-  return &kLayoutMetricsLegacy;
+const LayoutMetrics* InfoBarLayoutMetrics() {
+  return IsRefreshInfobarEnabled() ? &kLayoutMetricsPhase1
+                                   : &kLayoutMetricsLegacy;
 }
 
+// Color in RGB to be used as background of secondary actions button.
 const int kButton2TitleColor = 0x4285f4;
+// Color in RGB to be used as background of Image Icon.
+const int kImageBackgroundColor = 0xdce7f6;
+// Corner radius for background of Image Icon.
+const CGFloat kImageBackgroundCornerRadius = 12.0;
+// Corner radius for action buttons.
+const CGFloat kButtonCornerRadius = 11.0;
 
 enum InfoBarButtonPosition { ON_FIRST_LINE, CENTER, LEFT, RIGHT };
 
+// Returns the font for the Infobar's main body text.
+UIFont* InfoBarLabelFont() {
+  return IsRefreshInfobarEnabled()
+             ? [UIFont preferredFontForTextStyle:UIFontTextStyleSubheadline]
+             : [MDCTypography subheadFont];
+}
+
+// Returns the font for the Infobar's toggle switch's (if one exists) body text.
+// This text label is usually of a slightly smaller font size relative to
+// InfoBarLabelFont().
+UIFont* InfoBarSwitchLabelFont() {
+  return IsRefreshInfobarEnabled()
+             ? [UIFont preferredFontForTextStyle:UIFontTextStyleBody]
+             : [MDCTypography body1Font];
+}
+
+// Returns the font for the label on Infobar's action buttons.
+UIFont* InfoBarButtonLabelFont() {
+  DCHECK(IsRefreshInfobarEnabled());
+  return [UIFont preferredFontForTextStyle:UIFontTextStyleHeadline];
+}
+
+UIImage* InfoBarCloseImage() {
+  if (!IsRefreshInfobarEnabled()) {
+    return [UIImage imageNamed:@"infobar_close"];
+  }
+  ui::ResourceBundle& resourceBundle = ui::ResourceBundle::GetSharedInstance();
+  return resourceBundle.GetNativeImageNamed(IDR_IOS_INFOBAR_CLOSE).ToUIImage();
+}
+
 }  // namespace
 
 // UIView containing a switch and a label.
@@ -122,12 +183,12 @@ enum InfoBarButtonPosition { ON_FIRST_LINE, CENTER, LEFT, RIGHT };
 }
 
 - (id)initWithLabel:(NSString*)labelText isOn:(BOOL)isOn {
-  metrics_ = GetCurrentLayoutMetrics();
+  metrics_ = InfoBarLayoutMetrics();
 
   // Creates switch and label.
   UILabel* tempLabel = [[UILabel alloc] initWithFrame:CGRectZero];
   [tempLabel setTextAlignment:NSTextAlignmentNatural];
-  [tempLabel setFont:[MDCTypography body1Font]];
+  [tempLabel setFont:InfoBarSwitchLabelFont()];
   [tempLabel setText:labelText];
   [tempLabel setBackgroundColor:[UIColor clearColor]];
   [tempLabel setLineBreakMode:NSLineBreakByWordWrapping];
@@ -297,11 +358,13 @@ enum InfoBarButtonPosition { ON_FIRST_LINE, CENTER, LEFT, RIGHT };
   self = [super initWithFrame:frame];
   if (self) {
     delegate_ = delegate;
-    metrics_ = GetCurrentLayoutMetrics();
-    // Make the drop shadow.
-    UIImage* shadowImage = [UIImage imageNamed:@"infobar_shadow"];
-    shadow_ = [[UIImageView alloc] initWithImage:shadowImage];
-    [self addSubview:shadow_];
+    metrics_ = InfoBarLayoutMetrics();
+    if (!IsRefreshInfobarEnabled()) {
+      // Make the drop shadow.
+      UIImage* shadowImage = [UIImage imageNamed:@"infobar_shadow"];
+      shadow_ = [[UIImageView alloc] initWithImage:shadowImage];
+      [self addSubview:shadow_];
+    }
     [self setAutoresizingMask:UIViewAutoresizingFlexibleWidth |
                               UIViewAutoresizingFlexibleHeight];
     [self setAccessibilityViewIsModal:YES];
@@ -723,8 +786,7 @@ enum InfoBarButtonPosition { ON_FIRST_LINE, CENTER, LEFT, RIGHT };
                        target:(id)target
                        action:(SEL)action {
   DCHECK(!closeButton_);
-  // TODO(crbug/228611): Add IDR_ constant and use GetNativeImageNamed().
-  UIImage* image = [UIImage imageNamed:@"infobar_close"];
+  UIImage* image = InfoBarCloseImage();
   closeButton_ = [UIButton buttonWithType:UIButtonTypeCustom];
   [closeButton_ setExclusiveTouch:YES];
   [closeButton_ setImage:image forState:UIControlStateNormal];
@@ -733,6 +795,11 @@ enum InfoBarButtonPosition { ON_FIRST_LINE, CENTER, LEFT, RIGHT };
          forControlEvents:UIControlEventTouchUpInside];
   [closeButton_ setTag:tag];
   [closeButton_ setAccessibilityLabel:l10n_util::GetNSString(IDS_CLOSE)];
+  if (IsUIRefreshPhase1Enabled()) {
+    // TODO(crbug.com/804652): Remove setting of button alpha channel when
+    // InfoBarCloseImage() returns an image using the proper shade of gray.
+    closeButton_.alpha = 0.33;
+  }
   [self addSubview:closeButton_];
 }
 
@@ -751,6 +818,10 @@ enum InfoBarButtonPosition { ON_FIRST_LINE, CENTER, LEFT, RIGHT };
     [imageView_ removeFromSuperview];
   }
   imageView_ = [[UIImageView alloc] initWithImage:image];
+  if (IsRefreshInfobarEnabled()) {
+    imageView_.backgroundColor = UIColorFromRGB(kImageBackgroundColor);
+    imageView_.layer.cornerRadius = kImageBackgroundCornerRadius;
+  }
   [self addSubview:imageView_];
 }
 
@@ -812,9 +883,6 @@ enum InfoBarButtonPosition { ON_FIRST_LINE, CENTER, LEFT, RIGHT };
   }
 
   label_ = [[UILabel alloc] initWithFrame:CGRectZero];
-
-  UIFont* font = [MDCTypography subheadFont];
-
   [label_ setBackgroundColor:[UIColor clearColor]];
 
   NSMutableParagraphStyle* paragraphStyle =
@@ -823,7 +891,7 @@ enum InfoBarButtonPosition { ON_FIRST_LINE, CENTER, LEFT, RIGHT };
   paragraphStyle.lineSpacing = metrics_->label_line_spacing;
   NSDictionary* attributes = @{
     NSParagraphStyleAttributeName : paragraphStyle,
-    NSFontAttributeName : font,
+    NSFontAttributeName : InfoBarLabelFont(),
   };
   [label_ setNumberOfLines:0];
 
@@ -906,6 +974,11 @@ enum InfoBarButtonPosition { ON_FIRST_LINE, CENTER, LEFT, RIGHT };
                     target:(id)target
                     action:(SEL)action {
   MDCFlatButton* button = [[MDCFlatButton alloc] init];
+  if (IsRefreshInfobarEnabled()) {
+    button.uppercaseTitle = NO;
+    button.layer.cornerRadius = kButtonCornerRadius;
+    button.titleLabel.font = InfoBarButtonLabelFont();
+  }
   button.inkColor = [[palette tint300] colorWithAlphaComponent:0.5f];
   [button setBackgroundColor:[palette tint500] forState:UIControlStateNormal];
   [button setBackgroundColor:[UIColor colorWithWhite:0.8f alpha:1.0f]

ios/chrome/browser/ui/ui_feature_flags.cc

@@ -16,5 +16,8 @@ const base::Feature kUIRefreshPhase1{"UIRefreshPhase1",
 const base::Feature kCollectionsUIReboot{"CollectionsUIReboot",
                                          base::FEATURE_DISABLED_BY_DEFAULT};
 
+const base::Feature kInfobarsUIReboot{"InfobarsUIReboot",
+                                      base::FEATURE_DISABLED_BY_DEFAULT};
+
 const base::Feature kBrowserContainerFullscreen{
     "BrowserContainerFullscreen", base::FEATURE_DISABLED_BY_DEFAULT};

ios/chrome/browser/ui/ui_feature_flags.h

@@ -26,6 +26,11 @@ extern const base::Feature kUIRefreshPhase1;
 // experimental_flags::IsCollectionsUIRebootEnabled()
 extern const base::Feature kCollectionsUIReboot;
 
+// Feature to choose whether to use the new UI Reboot Infobar UX, or the legacy
+// one. This flag should not be used directly. Instead, use
+// IsRefreshInfobarEnabled().
+extern const base::Feature kInfobarsUIReboot;
+
 // Used to make BrowserContainerViewController fullscreen.
 extern const base::Feature kBrowserContainerFullscreen;
 #endif  // IOS_CHROME_BROWSER_UI_UI_FEATURE_FLAGS_H_

ios/chrome/browser/ui/ui_util.h

@@ -39,6 +39,9 @@ CGFloat CurrentScreenWidth();
 // Returns true if the device is an iPhone X.
 bool IsIPhoneX();
 
+// Returns whether the UI Refresh Infobar will be used.
+bool IsRefreshInfobarEnabled();
+
 // Returns whether the UI Refresh Location Bar will be used.
 bool IsRefreshLocationBarEnabled();
 

ios/chrome/browser/ui/ui_util.mm

@@ -57,6 +57,10 @@ bool IsIPhoneX() {
           CGRectGetHeight([[UIScreen mainScreen] nativeBounds]) == 2436);
 }
 
+bool IsRefreshInfobarEnabled() {
+  return base::FeatureList::IsEnabled(kInfobarsUIReboot);
+}
+
 bool IsRefreshLocationBarEnabled() {
   return base::FeatureList::IsEnabled(kUIRefreshLocationBar);
 }