Refine the style of the botom toolbar in iOS reading list.

To be consistent with history and bookmarks, adjust the style of
reading list's toolbar:
1. Horizontal margin: 16pt
2. Vertical margin: 8pt
3. Spacing between button: 8pt
4. Font size: (same as bookmark cell)
5. Shadow opacity and radius

Screenshot:
https://drive.google.com/file/d/1DU5BpaWTIGFJuHUje7ideAcYEyWQG600
https://drive.google.com/file/d/1Bvxv5rcrn2P1dPQwai0rD9J_0pC9pKnN

Bug: 789417
Change-Id: I6b5791941ea68e5fe9c52ae46569ce0bbd3ad9fc
Reviewed-on: https://chromium-review.googlesource.com/796251
Commit-Queue: Marti Wong <martiw@chromium.org>
Reviewed-by: Gauthier Ambard <gambard@chromium.org>
Cr-Commit-Position: refs/heads/master@{#521252}

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

@@ -70,6 +70,8 @@ source_set("reading_list_ui") {
     "reading_list_empty_collection_background.mm",
     "reading_list_toolbar.h",
     "reading_list_toolbar.mm",
+    "reading_list_toolbar_button.h",
+    "reading_list_toolbar_button.mm",
     "reading_list_view_controller.h",
     "reading_list_view_controller.mm",
     "text_badge_view.h",

ios/chrome/browser/ui/reading_list/reading_list_collection_view_controller.mm

@@ -205,6 +205,11 @@ typedef void (^EntryUpdater)(CollectionViewItem* item);
   [self.collectionView addGestureRecognizer:longPressRecognizer];
 }
 
+- (void)viewDidLayoutSubviews {
+  [super viewDidLayoutSubviews];
+  [_toolbar updateHeight];
+}
+
 #pragma mark - UICollectionViewDelegate
 
 - (void)collectionView:(UICollectionView*)collectionView

ios/chrome/browser/ui/reading_list/reading_list_toolbar.h

@@ -52,6 +52,8 @@ typedef NS_ENUM(NSInteger, ReadingListToolbarHeight) {
 // message and no title.
 - (ActionSheetCoordinator*)actionSheetForMarkWithBaseViewController:
     (UIViewController*)viewController;
+// Updates the height of the toolbar.
+- (void)updateHeight;
 
 @end
 

ios/chrome/browser/ui/reading_list/reading_list_toolbar_button.h

+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+#ifndef IOS_CHROME_BROWSER_UI_READING_LIST_READING_LIST_TOOLBAR_BUTTON_H_
+#define IOS_CHROME_BROWSER_UI_READING_LIST_READING_LIST_TOOLBAR_BUTTON_H_
+
+#import <UIKit/UIKit.h>
+
+typedef NS_ENUM(NSInteger, ButtonPositioning) { Leading, Centered, Trailing };
+
+// A button class for the buttons in ReadingListToolBar's stackview.  Handles
+// the layout alignment of the button and its titleLabel.
+@interface ReadingListToolbarButton : UIView
+
+// Initializer.
+- (instancetype)initWithText:(NSString*)labelText
+                 destructive:(BOOL)isDestructive
+                    position:(ButtonPositioning)position;
+
+// Associates a target object and action method with the UIButton.
+- (void)addTarget:(id)target
+              action:(SEL)action
+    forControlEvents:(UIControlEvents)controlEvents;
+
+// Sets the title text of the UIButton.
+- (void)setTitle:(NSString*)title;
+
+// Enables or disables the UIButton.
+- (void)setEnabled:(BOOL)enabled;
+
+// Gets the titleLabel of the UIButton.
+- (UILabel*)titleLabel;
+
+// Sets the maximum width contraint of ReadingListToolbarButton.
+- (void)setMaxWidth:(CGFloat)maxWidth;
+
+// The font of the title text.
++ (UIFont*)textFont;
+
+@end
+
+#endif  // IOS_CHROME_BROWSER_UI_READING_LIST_READING_LIST_TOOLBAR_BUTTON_H_

ios/chrome/browser/ui/reading_list/reading_list_toolbar_button.mm

+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+#import "ios/chrome/browser/ui/reading_list/reading_list_toolbar_button.h"
+
+#include "base/logging.h"
+#import "ios/chrome/browser/ui/colors/MDCPalette+CrAdditions.h"
+#include "ios/chrome/browser/ui/rtl_geometry.h"
+#import "ios/chrome/browser/ui/util/constraints_ui_util.h"
+#import "ios/third_party/material_components_ios/src/components/Typography/src/MaterialTypography.h"
+
+#if !defined(__has_feature) || !__has_feature(objc_arc)
+#error "This file requires ARC support."
+#endif
+
+@interface ReadingListToolbarButton ()
+
+// The actual UIButton object inside ReadingListToolbarButton.
+@property(nonatomic, strong) UIButton* button;
+
+// Width constraint for the ReadingListToolbarButton.
+@property(nonatomic, strong) NSLayoutConstraint* widthConstraint;
+
+@end
+
+@implementation ReadingListToolbarButton
+
+@synthesize button = _button;
+@synthesize widthConstraint = _widthConstraint;
+
+#pragma mark - Public
+
+- (instancetype)initWithText:(NSString*)labelText
+                 destructive:(BOOL)isDestructive
+                    position:(ButtonPositioning)position {
+  self = [super init];
+  if (!self) {
+    return self;
+  }
+
+  _button = [self buttonWithText:labelText
+                     destructive:isDestructive
+                        position:position];
+  _button.translatesAutoresizingMaskIntoConstraints = NO;
+  [self addSubview:_button];
+
+  NSDictionary* views = @{@"button" : _button};
+  NSArray* constraints = nil;
+
+  switch (position) {
+    case Leading: {
+      constraints = @[ @"V:|[button]|", @"H:|[button]" ];
+      ApplyVisualConstraints(constraints, views);
+      [_button.trailingAnchor
+          constraintLessThanOrEqualToAnchor:self.trailingAnchor]
+          .active = YES;
+      break;
+    }
+    case Centered: {
+      constraints = @[ @"V:|[button]|" ];
+      ApplyVisualConstraints(constraints, views);
+      [_button.centerXAnchor constraintEqualToAnchor:self.centerXAnchor]
+          .active = YES;
+      [_button.trailingAnchor
+          constraintLessThanOrEqualToAnchor:self.trailingAnchor]
+          .active = YES;
+      [_button.leadingAnchor
+          constraintGreaterThanOrEqualToAnchor:self.leadingAnchor]
+          .active = YES;
+      break;
+    }
+    case Trailing: {
+      constraints = @[ @"V:|[button]|", @"H:[button]|" ];
+      ApplyVisualConstraints(constraints, views);
+      [_button.leadingAnchor
+          constraintGreaterThanOrEqualToAnchor:self.leadingAnchor]
+          .active = YES;
+      break;
+    }
+  }
+  return self;
+}
+
+- (void)addTarget:(id)target
+              action:(SEL)action
+    forControlEvents:(UIControlEvents)controlEvents {
+  [self.button addTarget:target action:action forControlEvents:controlEvents];
+}
+
+- (void)setTitle:(NSString*)title {
+  [self.button setTitle:title forState:UIControlStateNormal];
+}
+
+- (void)setEnabled:(BOOL)enabled {
+  self.button.enabled = enabled;
+}
+
+- (UILabel*)titleLabel {
+  return self.button.titleLabel;
+}
+
+- (void)setMaxWidth:(CGFloat)maxWidth {
+  if (!self.widthConstraint) {
+    self.widthConstraint =
+        [self.button.widthAnchor constraintLessThanOrEqualToConstant:maxWidth];
+    self.widthConstraint.active = YES;
+  }
+  self.widthConstraint.constant = maxWidth;
+}
+
+#pragma mark - Private
+
+- (UIButton*)buttonWithText:(NSString*)title
+                destructive:(BOOL)isDestructive
+                   position:(ButtonPositioning)position {
+  UIButton* button = [UIButton buttonWithType:UIButtonTypeCustom];
+  [button setTitle:title forState:UIControlStateNormal];
+  button.titleLabel.numberOfLines = 3;
+  button.titleLabel.adjustsFontSizeToFitWidth = YES;
+
+  button.backgroundColor = [UIColor whiteColor];
+  UIColor* textColor = isDestructive ? [[MDCPalette cr_redPalette] tint500]
+                                     : [[MDCPalette cr_bluePalette] tint500];
+  [button setTitleColor:textColor forState:UIControlStateNormal];
+  [button setTitleColor:[UIColor lightGrayColor]
+               forState:UIControlStateDisabled];
+  [button setTitleColor:[textColor colorWithAlphaComponent:0.3]
+               forState:UIControlStateHighlighted];
+  [[button titleLabel] setFont:[[self class] textFont]];
+
+  switch (position) {
+    case Leading: {
+      button.titleLabel.textAlignment = NSTextAlignmentNatural;
+      if (UseRTLLayout()) {
+        button.contentHorizontalAlignment =
+            UIControlContentHorizontalAlignmentRight;
+      } else {
+        button.contentHorizontalAlignment =
+            UIControlContentHorizontalAlignmentLeft;
+      }
+      break;
+    }
+    case Centered: {
+      button.titleLabel.textAlignment = NSTextAlignmentCenter;
+      button.contentHorizontalAlignment =
+          UIControlContentHorizontalAlignmentCenter;
+      break;
+    }
+    case Trailing: {
+      if (UseRTLLayout()) {
+        button.titleLabel.textAlignment = NSTextAlignmentLeft;
+        button.contentHorizontalAlignment =
+            UIControlContentHorizontalAlignmentLeft;
+      } else {
+        button.titleLabel.textAlignment = NSTextAlignmentRight;
+        button.contentHorizontalAlignment =
+            UIControlContentHorizontalAlignmentRight;
+      }
+      break;
+    }
+  }
+
+  return button;
+}
+
+#pragma mark - Static Properties
+
+// The font of the title text.
++ (UIFont*)textFont {
+  return [MDCTypography subheadFont];
+}
+
+@end