[ios] Adds Visual Effects to ChromeTableVC Headers and NavigationBars

- Adds a BlurEffect to the styler.
- Makes NavigationBar translucent.

Screenshot:
https://drive.google.com/open?id=1wW2bL4AP3TusA64yPVgAyGMg4_hncVQT
(The blue squares were added so the Visual effect is easier to see)

Bug: 838580
Cq-Include-Trybots: luci.chromium.try:ios-simulator-full-configs;master.tryserver.chromium.mac:ios-simulator-cronet
Change-Id: I4e03b2dde5633716fbe131893433e6142abfa653
Reviewed-on: https://chromium-review.googlesource.com/1084321
Commit-Queue: Sergio Collazos <sczs@chromium.org>
Reviewed-by: Rohit Rao <rohitrao@chromium.org>
Cr-Commit-Position: refs/heads/master@{#565698}

ios/chrome/browser/ui/bookmarks/bookmark_home_view_controller.mm

@@ -362,9 +362,6 @@ const CGFloat kShadowRadius = 12.0f;
   if (experimental_flags::IsBookmarksUIRebootEnabled()) {
     self.navigationController.navigationBarHidden = NO;
     self.navigationController.toolbar.translucent = YES;
-    // If the NavigationBar is not translucent, set
-    // |self.extendedLayoutIncludesOpaqueBars| to YES.
-    self.extendedLayoutIncludesOpaqueBars = YES;
   } else {
     self.navigationController.navigationBarHidden = YES;
     self.navigationController.toolbar.translucent = NO;

ios/chrome/browser/ui/history/history_table_view_controller.mm

@@ -141,11 +141,6 @@ const CGFloat kSeparationSpaceBetweenSections = 9;
               action:@selector(displayContextMenuInvokedByGestureRecognizer:)];
   [self.tableView addGestureRecognizer:longPressRecognizer];
 
-  // If the NavigationBar is not translucent, set
-  // |self.extendedLayoutIncludesOpaqueBars| to YES in order to avoid a top
-  // margin inset on the |_tableViewController| subview.
-  self.extendedLayoutIncludesOpaqueBars = YES;
-
   // NavigationController configuration.
   self.title = l10n_util::GetNSString(IDS_HISTORY_TITLE);
   // Configures NavigationController Toolbar buttons.
@@ -167,7 +162,7 @@ const CGFloat kSeparationSpaceBetweenSections = 9;
   self.searchController.dimsBackgroundDuringPresentation = NO;
   self.searchController.searchBar.delegate = self;
   self.searchController.searchResultsUpdater = self;
-  self.searchController.searchBar.backgroundColor = [UIColor whiteColor];
+  self.searchController.searchBar.backgroundColor = [UIColor clearColor];
   self.searchController.searchBar.accessibilityIdentifier =
       kHistorySearchControllerSearchBarIdentifier;
   // UIKit needs to know which controller will be presenting the

ios/chrome/browser/ui/recent_tabs/recent_tabs_table_view_controller.mm

@@ -183,10 +183,6 @@ const CGFloat kDoubleLineSectionHeaderHeight = 56;
   tapGesture.delegate = self;
   [self.tableView addGestureRecognizer:tapGesture];
 
-  // If the NavigationBar is not translucent, set
-  // |self.extendedLayoutIncludesOpaqueBars| to YES in order to avoid a top
-  // margin inset on the |_tableViewController| subview.
-  self.extendedLayoutIncludesOpaqueBars = YES;
   self.title = l10n_util::GetNSString(IDS_IOS_CONTENT_SUGGESTIONS_RECENT_TABS);
 }
 

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

@@ -36,6 +36,9 @@ source_set("styler") {
     "chrome_table_view_styler.h",
     "chrome_table_view_styler.mm",
   ]
+  public_deps = [
+    "//ios/chrome/browser/ui:ui_util",
+  ]
 }
 
 source_set("presentation") {

ios/chrome/browser/ui/table_view/cells/table_view_header_footer_item.mm

@@ -5,6 +5,7 @@
 #import "ios/chrome/browser/ui/table_view/cells/table_view_header_footer_item.h"
 
 #import "base/logging.h"
+#import "ios/chrome/browser/ui/table_view/chrome_table_view_styler.h"
 
 #if !defined(__has_feature) || !__has_feature(objc_arc)
 #error "This file requires ARC support."
@@ -24,6 +25,9 @@
   DCHECK([headerFooter class] == self.cellClass);
   headerFooter.accessibilityTraits = self.accessibilityTraits;
   headerFooter.accessibilityIdentifier = self.accessibilityIdentifier;
+  UIVisualEffectView* visualEffect = [[UIVisualEffectView alloc]
+      initWithEffect:styler.tableViewSectionHeaderBlurEffect];
+  headerFooter.backgroundView = visualEffect;
 }
 
 @end

ios/chrome/browser/ui/table_view/cells/table_view_text_header_footer_item.mm

@@ -6,7 +6,6 @@
 
 #include "base/mac/foundation_util.h"
 #import "ios/chrome/browser/ui/table_view/cells/table_view_cells_constants.h"
-#import "ios/chrome/browser/ui/table_view/chrome_table_view_styler.h"
 #import "ios/chrome/browser/ui/uikit_ui_util.h"
 
 #if !defined(__has_feature) || !__has_feature(objc_arc)
@@ -31,10 +30,6 @@
 - (void)configureHeaderFooterView:(UITableViewHeaderFooterView*)headerFooter
                        withStyler:(ChromeTableViewStyler*)styler {
   [super configureHeaderFooterView:headerFooter withStyler:styler];
-
-  // Set the contentView backgroundColor, not the header's.
-  headerFooter.contentView.backgroundColor = styler.tableViewBackgroundColor;
-
   TableViewTextHeaderFooterView* header =
       base::mac::ObjCCastStrict<TableViewTextHeaderFooterView>(headerFooter);
   header.textLabel.text = self.text;

ios/chrome/browser/ui/table_view/cells/table_view_text_header_footer_item_unittest.mm

@@ -39,19 +39,3 @@ TEST_F(TableViewTextHeaderFooterItemTest, HeaderFooterTextLabels) {
   [item configureHeaderFooterView:textHeaderFooter withStyler:styler];
   EXPECT_NSEQ(text, textHeaderFooter.textLabel.text);
 }
-
-TEST_F(TableViewTextHeaderFooterItemTest, Styler) {
-  TableViewTextHeaderFooterItem* item =
-      [[TableViewTextHeaderFooterItem alloc] initWithType:0];
-  id headerFooter = [[[item cellClass] alloc] init];
-  ASSERT_TRUE(
-      [headerFooter isMemberOfClass:[TableViewTextHeaderFooterView class]]);
-  TableViewTextHeaderFooterView* textHeaderFooter =
-      base::mac::ObjCCastStrict<TableViewTextHeaderFooterView>(headerFooter);
-
-  ChromeTableViewStyler* styler = [[ChromeTableViewStyler alloc] init];
-  UIColor* testColor = [UIColor redColor];
-  styler.tableViewBackgroundColor = testColor;
-  [item configureHeaderFooterView:textHeaderFooter withStyler:styler];
-  EXPECT_NSEQ(testColor, textHeaderFooter.contentView.backgroundColor);
-}

ios/chrome/browser/ui/table_view/chrome_table_view_styler.h

@@ -9,6 +9,10 @@
 
 @interface ChromeTableViewStyler : NSObject
 
+// The BlurEffect used on the UITableView section headers.
+@property(nonatomic, readwrite, strong)
+    UIBlurEffect* tableViewSectionHeaderBlurEffect;
+
 // The background color for the table view and its cells. If this is set to an
 // opaque color, cells can choose to make themselves opaque and draw their own
 // background as a performance optimization.

ios/chrome/browser/ui/table_view/chrome_table_view_styler.mm

@@ -4,19 +4,30 @@
 
 #import "ios/chrome/browser/ui/table_view/chrome_table_view_styler.h"
 
+#import "ios/chrome/browser/ui/uikit_ui_util.h"
+
 #if !defined(__has_feature) || !__has_feature(objc_arc)
 #error "This file requires ARC support."
 #endif
 
-@implementation ChromeTableViewStyler
+namespace {
+// The width and height of the favicon ImageView.
+const int kTableViewBackgroundRGBColor = 0xF9F9F9;
+}
 
+@implementation ChromeTableViewStyler
+@synthesize tableViewSectionHeaderBlurEffect =
+    _tableViewSectionHeaderBlurEffect;
 @synthesize tableViewBackgroundColor = _tableViewBackgroundColor;
 @synthesize cellTitleColor = _cellTitleColor;
 @synthesize headerFooterTitleColor = _headerFooterTitleColor;
 
 - (instancetype)init {
   if ((self = [super init])) {
-    _tableViewBackgroundColor = [UIColor whiteColor];
+    _tableViewBackgroundColor = UIColorFromRGB(kTableViewBackgroundRGBColor, 1);
+
+    _tableViewSectionHeaderBlurEffect =
+        [UIBlurEffect effectWithStyle:UIBlurEffectStyleExtraLight];
   }
   return self;
 }

ios/chrome/browser/ui/table_view/table_view_navigation_controller.mm

@@ -28,16 +28,22 @@
 #pragma mark - View Lifecycle
 
 - (void)viewDidLoad {
-  [self.navigationBar setBackgroundImage:[UIImage new]
-                           forBarMetrics:UIBarMetricsDefault];
-  if (self.tableViewController.styler.tableViewBackgroundColor !=
-      [UIColor clearColor]) {
-    self.navigationBar.translucent = NO;
-  }
+  [super viewDidLoad];
+
+  UIVisualEffectView* visualEffectView = [[UIVisualEffectView alloc]
+      initWithEffect:[UIBlurEffect
+                         effectWithStyle:UIBlurEffectStyleExtraLight]];
 
-  if (@available(iOS 11, *)) {
+  self.navigationBar.translucent = YES;
+  self.navigationController.navigationBar.backgroundColor =
+      [UIColor clearColor];
+  [self.navigationController.navigationBar addSubview:visualEffectView];
+  if (@available(iOS 11, *))
     self.navigationBar.prefersLargeTitles = YES;
-  }
+
+  self.toolbar.clipsToBounds = YES;
+  self.toolbar.translucent = YES;
+  [self.toolbar addSubview:visualEffectView];
 }
 
 @end