Add blur effect to the toolbar

This CL adds a blur effect to the toolbar's background, to see the
content of the page below.

Screenshot: https://drive.google.com/file/d/1MB5lyrozQ3OkEenWtXi3MWfOy0e2hwxx/view

Bug: 805846
Cq-Include-Trybots: master.tryserver.chromium.mac:ios-simulator-cronet;master.tryserver.chromium.mac:ios-simulator-full-configs
Change-Id: Ib12dd0396fbfef9868d352e92a9ec0981aa091df
Reviewed-on: https://chromium-review.googlesource.com/897323
Commit-Queue: Gauthier Ambard <gambard@chromium.org>
Reviewed-by: Louis Romero <lpromero@chromium.org>
Cr-Commit-Position: refs/heads/master@{#533645}

ios/chrome/browser/ui/toolbar/adaptive/primary_toolbar_view.mm

@@ -104,10 +104,9 @@
   }
   DCHECK(self.buttonFactory);
 
-  self.backgroundColor =
-      self.buttonFactory.toolbarConfiguration.backgroundColor;
   self.translatesAutoresizingMaskIntoConstraints = NO;
 
+  [self setUpBlurredBackground];
   [self setUpLocationBar];
   [self setUpLeadingStackView];
   [self setUpTrailingStackView];
@@ -124,11 +123,22 @@
 
 #pragma mark - Setup
 
+// Sets the blur effect on the toolbar background.
+- (void)setUpBlurredBackground {
+  UIBlurEffect* blurEffect = self.buttonFactory.toolbarConfiguration.blurEffect;
+  UIVisualEffectView* blur =
+      [[UIVisualEffectView alloc] initWithEffect:blurEffect];
+  [self addSubview:blur];
+  blur.translatesAutoresizingMaskIntoConstraints = NO;
+  AddSameConstraints(blur, self);
+}
+
 // Sets the location bar container and its view if present.
 - (void)setUpLocationBar {
   self.locationBarContainer = [[UIView alloc] init];
   self.locationBarContainer.backgroundColor =
-      self.buttonFactory.toolbarConfiguration.omniboxBackgroundColor;
+      [self.buttonFactory.toolbarConfiguration
+          locationBarBackgroundColorWithVisibility:1];
   self.locationBarContainer.layer.cornerRadius =
       kAdaptiveLocationBarCornerRadius;
   [self.locationBarContainer

ios/chrome/browser/ui/toolbar/adaptive/primary_toolbar_view_controller.mm

@@ -59,8 +59,7 @@
 
 - (void)resetAfterSideSwipeSnapshot {
   [super resetAfterSideSwipeSnapshot];
-  self.view.backgroundColor =
-      self.buttonFactory.toolbarConfiguration.backgroundColor;
+  self.view.backgroundColor = nil;
   self.view.locationBarContainer.hidden = NO;
 }
 
@@ -137,8 +136,8 @@
                         (kToolbarHeight - kToolbarHeightFullscreen) * progress -
                         2 * kLocationBarVerticalMargin);
   self.view.locationBarContainer.backgroundColor =
-      [self.buttonFactory.toolbarConfiguration.omniboxBackgroundColor
-          colorWithAlphaComponent:alphaValue];
+      [self.buttonFactory.toolbarConfiguration
+          locationBarBackgroundColorWithVisibility:alphaValue];
 }
 
 - (void)updateForFullscreenEnabled:(BOOL)enabled {

ios/chrome/browser/ui/toolbar/adaptive/secondary_toolbar_view.mm

@@ -71,10 +71,15 @@
   }
   DCHECK(self.buttonFactory);
 
-  self.backgroundColor =
-      self.buttonFactory.toolbarConfiguration.backgroundColor;
   self.translatesAutoresizingMaskIntoConstraints = NO;
 
+  UIBlurEffect* blurEffect = self.buttonFactory.toolbarConfiguration.blurEffect;
+  UIVisualEffectView* blur =
+      [[UIVisualEffectView alloc] initWithEffect:blurEffect];
+  [self addSubview:blur];
+  blur.translatesAutoresizingMaskIntoConstraints = NO;
+  AddSameConstraints(blur, self);
+
   self.tabGridButton = [self.buttonFactory tabGridButton];
   self.shareButton = [self.buttonFactory shareButton];
   self.omniboxButton = [self.buttonFactory omniboxButton];

ios/chrome/browser/ui/toolbar/clean/toolbar_configuration.h

@@ -19,17 +19,23 @@
 // Style of this configuration.
 @property(nonatomic, assign) ToolbarStyle style;
 
+// Blur effect for the toolbar background.
+@property(nonatomic, readonly) UIBlurEffect* blurEffect;
+
 // Background color of the NTP. Used to do as if the toolbar was transparent and
 // the NTP is visible behind it.
 @property(nonatomic, readonly) UIColor* NTPBackgroundColor;
 
 // Background color of the toolbar.
+// TODO(crbug.com/800266): Remove this property.
 @property(nonatomic, readonly) UIColor* backgroundColor;
 
 // Background color of the omnibox.
+// TODO(crbug.com/800266): Remove this property.
 @property(nonatomic, readonly) UIColor* omniboxBackgroundColor;
 
 // Border color of the omnibox.
+// TODO(crbug.com/800266): Remove this property.
 @property(nonatomic, readonly) UIColor* omniboxBorderColor;
 
 // Color of the title of the buttons for the normal state.
@@ -38,6 +44,12 @@
 // Color of the title of the buttons for the highlighted state.
 @property(nonatomic, readonly) UIColor* buttonTitleHighlightedColor;
 
+// Returns the background color of the location bar, with a |visibilityFactor|.
+// The |visibilityFactor| is here to alter the alpha value of the background
+// color. Even with a |visibilityFactor| of 1, the final color could is
+// translucent.
+- (UIColor*)locationBarBackgroundColorWithVisibility:(CGFloat)visibilityFactor;
+
 @end
 
 #endif  // IOS_CHROME_BROWSER_UI_TOOLBAR_CLEAN_TOOLBAR_CONFIGURATION_H_

ios/chrome/browser/ui/toolbar/clean/toolbar_configuration.mm

@@ -4,6 +4,7 @@
 
 #import "ios/chrome/browser/ui/toolbar/clean/toolbar_configuration.h"
 
+#import "base/logging.h"
 #import "ios/chrome/browser/ui/toolbar/clean/toolbar_constants.h"
 #import "ios/chrome/browser/ui/toolbar/public/web_toolbar_controller_constants.h"
 #include "ios/chrome/browser/ui/ui_util.h"
@@ -25,6 +26,15 @@
   return self;
 }
 
+- (UIBlurEffect*)blurEffect {
+  switch (self.style) {
+    case NORMAL:
+      return [UIBlurEffect effectWithStyle:UIBlurEffectStyleProminent];
+    case INCOGNITO:
+      return [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];
+  }
+}
+
 - (UIColor*)NTPBackgroundColor {
   switch (self.style) {
     case NORMAL:
@@ -37,12 +47,8 @@
 
 - (UIColor*)backgroundColor {
   if (IsUIRefreshPhase1Enabled()) {
-    switch (self.style) {
-      case NORMAL:
-        return UIColorFromRGB(kAdaptiveToolbarBackgroundColor);
-      case INCOGNITO:
-        return UIColorFromRGB(kIncognitoToolbarBackgroundColor);
-    }
+    NOTREACHED();
+    return nil;
   } else {
     switch (self.style) {
       case NORMAL:
@@ -55,12 +61,8 @@
 
 - (UIColor*)omniboxBackgroundColor {
   if (IsUIRefreshPhase1Enabled()) {
-    switch (self.style) {
-      case NORMAL:
-        return UIColorFromRGB(kAdaptiveLocationBackgroundColor);
-      case INCOGNITO:
-        return UIColorFromRGB(kIcongnitoAdaptiveLocationBackgroundColor);
-    }
+    NOTREACHED();
+    return nil;
   } else {
     switch (self.style) {
       case NORMAL:
@@ -72,11 +74,16 @@
 }
 
 - (UIColor*)omniboxBorderColor {
-  switch (self.style) {
-    case NORMAL:
-      return UIColorFromRGB(kLocationBarBorderColor);
-    case INCOGNITO:
-      return UIColorFromRGB(kIncognitoLocationBarBorderColor);
+  if (IsUIRefreshPhase1Enabled()) {
+    NOTREACHED();
+    return nil;
+  } else {
+    switch (self.style) {
+      case NORMAL:
+        return UIColorFromRGB(kLocationBarBorderColor);
+      case INCOGNITO:
+        return UIColorFromRGB(kIncognitoLocationBarBorderColor);
+    }
   }
 }
 
@@ -98,4 +105,17 @@
   }
 }
 
+- (UIColor*)locationBarBackgroundColorWithVisibility:(CGFloat)visibilityFactor {
+  switch (self.style) {
+    case NORMAL:
+      return [UIColor colorWithWhite:0
+                               alpha:kAdaptiveLocationBarBackgroundAlpha *
+                                     visibilityFactor];
+    case INCOGNITO:
+      return [UIColor colorWithWhite:1
+                               alpha:kAdaptiveLocationBarBackgroundAlpha *
+                                     visibilityFactor];
+  }
+}
+
 @end

ios/chrome/browser/ui/toolbar/clean/toolbar_constants.h

@@ -56,12 +56,9 @@ extern const NSInteger kShowTabStripButtonMaxTabCount;
 // Animation constants.
 extern const LayoutOffset kToolbarButtonAnimationOffset;
 
-// Adaptive Toolbar styling.
-extern const CGFloat kAdaptiveToolbarBackgroundColor;
-
 // Adaptive Location bar constants.
 extern const CGFloat kAdaptiveLocationBarCornerRadius;
-extern const CGFloat kAdaptiveLocationBackgroundColor;
 extern const CGFloat kIcongnitoAdaptiveLocationBackgroundColor;
+extern const CGFloat kAdaptiveLocationBarBackgroundAlpha;
 
 #endif  // IOS_CHROME_BROWSER_UI_TOOLBAR_CLEAN_TOOLBAR_CONSTANTS_H_

ios/chrome/browser/ui/toolbar/clean/toolbar_constants.mm

@@ -43,7 +43,6 @@ const NSInteger kShowTabStripButtonMaxTabCount = 99;
 
 const LayoutOffset kToolbarButtonAnimationOffset = -10.0;
 
-const CGFloat kAdaptiveToolbarBackgroundColor = 0xE4E4E4;
-const CGFloat kAdaptiveLocationBarCornerRadius = 12;
-const CGFloat kAdaptiveLocationBackgroundColor = 0xCCCCCC;
+const CGFloat kAdaptiveLocationBarCornerRadius = 11;
 const CGFloat kIcongnitoAdaptiveLocationBackgroundColor = 0x6A6A6A;
+const CGFloat kAdaptiveLocationBarBackgroundAlpha = 0.12;