Fix the toolbar buttons size

The clean toolbar buttons should have the same size and positioning
as the current toolbar.
This CL ensures this is happening.

Before: https://drive.google.com/file/d/1vorlHlUZvIZMV94iplEcPWdIPigV5Hgs/view
After: https://drive.google.com/file/d/1E1s8PKtyWILCvaO-fy8OX8-UJi_BoAK1/view

Bug: 791978
Cq-Include-Trybots: master.tryserver.chromium.mac:ios-simulator-cronet;master.tryserver.chromium.mac:ios-simulator-full-configs
Change-Id: Ie46f44c8eec3cb4fc194127d3092d8ea9328bd69
Reviewed-on: https://chromium-review.googlesource.com/809105
Commit-Queue: Gauthier Ambard <gambard@chromium.org>
Reviewed-by: Sergio Collazos <sczs@chromium.org>
Reviewed-by: Olivier Robin <olivierrobin@chromium.org>
Cr-Commit-Position: refs/heads/master@{#522060}

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

@@ -130,9 +130,7 @@ const int styleCount = 2;
                                      ? ToolbarControllerStyleLightMode
                                      : ToolbarControllerStyleIncognitoMode;
   ToolbarToolsMenuButton* toolsMenuButton =
-      [[ToolbarToolsMenuButton alloc] initWithFrame:CGRectZero
-                                              style:style
-                                              small:YES];
+      [[ToolbarToolsMenuButton alloc] initWithFrame:CGRectZero style:style];
 
   toolsMenuButton.accessibilityLabel =
       l10n_util::GetNSString(IDS_IOS_TOOLBAR_SETTINGS);

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

@@ -17,10 +17,11 @@ extern const CGFloat kToolbarBackgroundColor;
 extern const CGFloat kIncognitoToolbarBackgroundColor;
 
 // Stackview constraints.
-extern const CGFloat kVerticalMargin;
+extern const CGFloat kLocationBarVerticalMargin;
+extern const CGFloat kButtonVerticalMargin;
+extern const CGFloat kLeadingMarginIPad;
 extern const CGFloat kHorizontalMargin;
 extern const CGFloat kStackViewSpacing;
-extern const CGFloat kTrailingMargin;
 
 // Location bar styling.
 extern const CGFloat kLocationBarBorderWidth;
@@ -34,11 +35,14 @@ extern const CGFloat kIcongnitoLocationBackgroundColor;
 extern const CGFloat kProgressBarHeight;
 
 // Toolbar Buttons.
+extern const CGFloat kToolsMenuButtonWidth;
 extern const CGFloat kToolbarButtonWidth;
 extern const CGFloat kToolbarButtonTitleNormalColor;
 extern const CGFloat kToolbarButtonTitleHighlightedColor;
 extern const CGFloat kIncognitoToolbarButtonTitleNormalColor;
 extern const CGFloat kIncognitoToolbarButtonTitleHighlightedColor;
+extern const CGFloat kBackButtonImageInset;
+extern const CGFloat kForwardButtonImageInset;
 
 // Maximum number of tabs displayed by the button containing the tab count.
 extern const NSInteger kShowTabStripButtonMaxTabCount;

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

@@ -11,10 +11,11 @@
 const CGFloat kToolbarBackgroundColor = 0xF2F2F2;
 const CGFloat kIncognitoToolbarBackgroundColor = 0x505050;
 
-const CGFloat kVerticalMargin = 7.0f;
+const CGFloat kLocationBarVerticalMargin = 7.0f;
+const CGFloat kButtonVerticalMargin = 4.0f;
+const CGFloat kLeadingMarginIPad = 4.0f;
 const CGFloat kHorizontalMargin = 1.0f;
-const CGFloat kStackViewSpacing = 2.0f;
-const CGFloat kTrailingMargin = 10.0f;
+const CGFloat kStackViewSpacing = -2.0f;
 
 const CGFloat kLocationBarBorderWidth = 1.0f;
 const CGFloat kLocationBarBorderColor = 0xD0D0D0;
@@ -24,11 +25,14 @@ const CGFloat kIcongnitoLocationBackgroundColor = 0x737373;
 
 const CGFloat kProgressBarHeight = 2.0f;
 
-const CGFloat kToolbarButtonWidth = 42.0f;
+const CGFloat kToolsMenuButtonWidth = 44.0f;
+const CGFloat kToolbarButtonWidth = 48.0f;
 const CGFloat kToolbarButtonTitleNormalColor = 0x555555;
 const CGFloat kIncognitoLocationBarBorderColor = 0x4C4C4C;
 const CGFloat kToolbarButtonTitleHighlightedColor = 0x4285F4;
 const CGFloat kIncognitoToolbarButtonTitleNormalColor = 0xEEEEEE;
 const CGFloat kIncognitoToolbarButtonTitleHighlightedColor = 0x888a8c;
+const CGFloat kBackButtonImageInset = -9;
+const CGFloat kForwardButtonImageInset = -7;
 
 const NSInteger kShowTabStripButtonMaxTabCount = 99;

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

@@ -20,7 +20,7 @@
 // |frame| and the |style| of the toolbar it belongs to.
 - (instancetype)initWithFrame:(CGRect)frame
                         style:(ToolbarControllerStyle)style
-                        small:(BOOL)smallButton NS_DESIGNATED_INITIALIZER;
+    NS_DESIGNATED_INITIALIZER;
 
 - (instancetype)initWithFrame:(CGRect)frame NS_UNAVAILABLE;
 

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

@@ -20,8 +20,6 @@ const int kNumberOfDots = 3;
 // Position of the topmost dot.
 const CGFloat kDotOffsetX = 22;
 const CGFloat kDotOffsetY = 18;
-// Y offset of the topmost dot in case the button is the smaller version.
-const CGFloat kSmallButtonOffset = 3;
 // Vertical space between dots.
 const CGFloat kVerticalSpaceBetweenDots = 6;
 // The duration of the animation, in seconds.
@@ -60,9 +58,6 @@ const CGFloat kLineWidthAtApogee = 3;
   BOOL animationOnGoing_;
 }
 
-// Whether the button is the smaller version.
-@property(nonatomic, assign, getter=isSmallButton) BOOL smallButton;
-
 // Tints of the button.
 @property(nonatomic, strong) UIColor* normalStateTint;
 @property(nonatomic, strong) UIColor* highlightedStateTint;
@@ -71,16 +66,13 @@ const CGFloat kLineWidthAtApogee = 3;
 
 @implementation ToolbarToolsMenuButton
 
-@synthesize smallButton = _smallButton;
 @synthesize normalStateTint = _normalStateTint;
 @synthesize highlightedStateTint = _highlightedStateTint;
 
 - (instancetype)initWithFrame:(CGRect)frame
-                        style:(ToolbarControllerStyle)style
-                        small:(BOOL)smallButton {
+                        style:(ToolbarControllerStyle)style {
   if (self = [super initWithFrame:frame]) {
     style_ = style;
-    _smallButton = smallButton;
     pathLayers_ = [[NSMutableArray alloc] initWithCapacity:kNumberOfDots];
 
     [self setTintColor:toolbar::NormalButtonTint(style_)
@@ -158,11 +150,6 @@ const CGFloat kLineWidthAtApogee = 3;
   self.tintColor = newTint;
 }
 
-// Returns the Y offset of the topmost dot.
-- (CGFloat)dotOffsetY {
-  return self.smallButton ? kDotOffsetY - kSmallButtonOffset : kDotOffsetY;
-}
-
 // Initializes the pathLayers.
 - (void)initializeShapeLayers {
   for (NSUInteger i = 0; i < pathLayers_.count; i++) {
@@ -172,7 +159,7 @@ const CGFloat kLineWidthAtApogee = 3;
   pathLayers_ = [[NSMutableArray alloc] initWithCapacity:kNumberOfDots];
   for (NSUInteger i = 0; i < kNumberOfDots; i++) {
     const CGFloat x = kDotOffsetX;
-    const CGFloat y = [self dotOffsetY] + kVerticalSpaceBetweenDots * i;
+    const CGFloat y = kDotOffsetY + kVerticalSpaceBetweenDots * i;
 
     UIBezierPath* path = [UIBezierPath bezierPath];
     [path moveToPoint:CGPointMake(x - kMaxWidthOfSegment * 0.5, y)];

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

@@ -211,7 +211,6 @@
     self.backButton, self.forwardButton, self.reloadButton, self.stopButton
   ]];
   self.leadingStackView.translatesAutoresizingMaskIntoConstraints = NO;
-  self.leadingStackView.spacing = kStackViewSpacing;
   self.leadingStackView.distribution = UIStackViewDistributionFill;
 
   self.trailingStackView = [[UIStackView alloc] initWithArrangedSubviews:@[
@@ -275,15 +274,15 @@
   ]];
 
   // Stack views directly in view constraints. Main StackViews.
-  // Layout: |-[leadingStackView]-[locationBarContainer]-[trailingStackView]-|.
+  // Layout: |[leadingStackView]-[locationBarContainer]-[trailingStackView]|.
+  CGFloat leadingMargin = IsIPadIdiom() ? kLeadingMarginIPad : 0;
   UILayoutGuide* viewSafeAreaGuide = SafeAreaLayoutGuideForView(self.view);
   NSArray* stackViewRegularConstraints = @[
     [self.leadingStackView.leadingAnchor
         constraintEqualToAnchor:viewSafeAreaGuide.leadingAnchor
-                       constant:kHorizontalMargin],
+                       constant:leadingMargin],
     [self.trailingStackView.trailingAnchor
-        constraintEqualToAnchor:viewSafeAreaGuide.trailingAnchor
-                       constant:-kHorizontalMargin]
+        constraintEqualToAnchor:viewSafeAreaGuide.trailingAnchor]
   ];
   [self.regularToolbarConstraints
       addObjectsFromArray:stackViewRegularConstraints];
@@ -300,17 +299,19 @@
         @"trailingStack" : self.trailingStackView
       },
       @{
-        @"height" : @(kToolbarHeight - 2 * kVerticalMargin),
-        @"margin" : @(kVerticalMargin),
-        @"spacing" : @(kStackViewSpacing)
+        @"height" : @(kToolbarHeight - 2 * kButtonVerticalMargin),
+        @"margin" : @(kButtonVerticalMargin),
+        @"spacing" : @(kHorizontalMargin)
       });
 
   // LocationBarContainer constraints.
   NSArray* locationBarRegularConstraints = @[
-    [self.locationBarContainer.bottomAnchor
-        constraintEqualToAnchor:self.leadingStackView.bottomAnchor],
-    [self.locationBarContainer.topAnchor
-        constraintEqualToAnchor:self.leadingStackView.topAnchor]
+    [self.view.bottomAnchor
+        constraintEqualToAnchor:self.locationBarContainer.bottomAnchor
+                       constant:kLocationBarVerticalMargin],
+    [self.locationBarContainer.heightAnchor
+        constraintEqualToConstant:kToolbarHeight -
+                                  2 * kLocationBarVerticalMargin],
   ];
   [self.regularToolbarConstraints
       addObjectsFromArray:locationBarRegularConstraints];
@@ -350,6 +351,10 @@
   [buttonConstraints
       addObject:[self.backButton.widthAnchor
                     constraintEqualToConstant:kToolbarButtonWidth]];
+  if (!IsIPadIdiom()) {
+    self.backButton.imageEdgeInsets =
+        UIEdgeInsetsMakeDirected(0, 0, 0, kBackButtonImageInset);
+  }
   [self.backButton addTarget:self.dispatcher
                       action:@selector(goBack)
             forControlEvents:UIControlEventTouchUpInside];
@@ -367,6 +372,10 @@
   [buttonConstraints
       addObject:[self.forwardButton.widthAnchor
                     constraintEqualToConstant:kToolbarButtonWidth]];
+  if (!IsIPadIdiom()) {
+    self.forwardButton.imageEdgeInsets =
+        UIEdgeInsetsMakeDirected(0, kForwardButtonImageInset, 0, 0);
+  }
   [self.forwardButton addTarget:self.dispatcher
                          action:@selector(goForward)
                forControlEvents:UIControlEventTouchUpInside];
@@ -395,7 +404,7 @@
                                         ToolbarComponentVisibilityRegularWidth;
   [buttonConstraints
       addObject:[self.toolsMenuButton.widthAnchor
-                    constraintEqualToConstant:kToolbarButtonWidth]];
+                    constraintEqualToConstant:kToolsMenuButtonWidth]];
   [self.toolsMenuButton addTarget:self.dispatcher
                            action:@selector(showToolsMenu)
                  forControlEvents:UIControlEventTouchUpInside];
@@ -709,7 +718,7 @@
           constraintEqualToAnchor:self.view.trailingAnchor],
       [self.locationBarContainerStackView.topAnchor
           constraintEqualToAnchor:self.topSafeAnchor
-                         constant:kVerticalMargin],
+                         constant:kLocationBarVerticalMargin],
     ];
   }
   return _expandedToolbarConstraints;

ios/chrome/browser/ui/toolbar/toolbar_controller.mm

@@ -202,8 +202,7 @@ using ios::material::TimingFunction;
 
     toolsMenuButton_ =
         [[ToolbarToolsMenuButton alloc] initWithFrame:toolsMenuButtonFrame
-                                                style:style_
-                                                small:NO];
+                                                style:style_];
     [toolsMenuButton_ addTarget:self.dispatcher
                          action:@selector(showToolsMenu)
                forControlEvents:UIControlEventTouchUpInside];