Fix spacing on welcome screen for small screen (iPhone 4)

ios/chrome/browser/ui/first_run/welcome_to_chrome_view.mm

Index: ios/chrome/browser/ui/first_run/welcome_to_chrome_view.mm
diff --git a/ios/chrome/browser/ui/first_run/welcome_to_chrome_view.mm b/ios/chrome/browser/ui/first_run/welcome_to_chrome_view.mm
index b010c60b5a178015fa58ab8665ed856daccaa6f6..3a5a5df3f9222773b90f1e49c835d3012b1cda46 100644
--- a/ios/chrome/browser/ui/first_run/welcome_to_chrome_view.mm
+++ b/ios/chrome/browser/ui/first_run/welcome_to_chrome_view.mm
@@ -45,7 +45,7 @@ const CGFloat kContainerViewCompactWidthPercentage = 0.8;
 // Layout constants.
 const CGFloat kImageTopPadding[SIZE_CLASS_COUNT] = {32.0, 50.0};
 const CGFloat kTOSLabelTopPadding[SIZE_CLASS_COUNT] = {34.0, 40.0};
-const CGFloat kOptInLabelTopPadding[SIZE_CLASS_COUNT] = {10.0, 14.0};
+const CGFloat kOptInLabelPadding[SIZE_CLASS_COUNT] = {10.0, 14.0};
 const CGFloat kCheckBoxPadding[SIZE_CLASS_COUNT] = {10.0, 16.0};
 const CGFloat kOKButtonBottomPadding[SIZE_CLASS_COUNT] = {32.0, 32.0};
 const CGFloat kOKButtonHeight[SIZE_CLASS_COUNT] = {36.0, 54.0};
@@ -326,8 +326,10 @@ NSString* const kCheckBoxCheckedImageName = @"checkbox_checked";
   [self layoutTOSLabel];
   [self layoutOptInLabel];
   [self layoutCheckBoxButton];
-  [self layoutContainerView];
+  // The OK Button must be laid out before the container view so that the
+  // container view can take its position into account.
   [self layoutOKButton];
+  [self layoutContainerView];
 }
 
 - (void)layoutTitleLabel {
@@ -398,7 +400,7 @@ NSString* const kCheckBoxCheckedImageName = @"checkbox_checked";
 
 - (void)layoutOptInLabel {
   // The opt in label is laid out to the right (or left in RTL) of the check box
-  // button and below |TOSLabel| as specified by kOptInLabelTopPadding.
+  // button and below |TOSLabel| as specified by kOptInLabelPadding.
   CGSize checkBoxSize =
       [self.checkBoxButton imageForState:self.checkBoxButton.state].size;
   CGFloat checkBoxPadding = kCheckBoxPadding[self.cr_widthSizeClass];
@@ -407,7 +409,7 @@ NSString* const kCheckBoxCheckedImageName = @"checkbox_checked";
       sizeThatFits:CGSizeMake(CGRectGetWidth(self.containerView.bounds) -
                                   optInLabelSidePadding,
                               CGFLOAT_MAX)];
-  CGFloat optInLabelTopPadding = kOptInLabelTopPadding[self.cr_heightSizeClass];
+  CGFloat optInLabelTopPadding = kOptInLabelPadding[self.cr_heightSizeClass];
   CGFloat optInLabelOriginX =
       base::i18n::IsRTL() ? 0.0f : optInLabelSidePadding;
   self.optInLabel.frame = AlignRectOriginAndSizeToPixels(
@@ -447,12 +449,23 @@ NSString* const kCheckBoxCheckedImageName = @"checkbox_checked";
 - (void)layoutContainerView {
   // The container view is resized according to the final layout of
   // |checkBoxButton|, which is its lowest subview.  The resized view is then
-  // centered horizontally and vertically.
+  // centered horizontally. Vertically, the view is centered if doing so does
+  // not cause it to overlap the OKButton. Otherwise, it is shifted up to allow
+  // for the button + kOptInLabelPadding.

[kkhorimoto, 2017/05/31 20:44:40]

Optional: I feel like the wording here is a little clunky.  How about:

"...centered horizontally and vertically.  If necessary, it's shifted up to
allow |kOptInLabelPadding| between |optInLabel| and |OKButton|."

[lody, 2017/06/01 08:41:18]

Done.

   CGSize containerViewSize = self.containerView.bounds.size;
   containerViewSize.height = CGRectGetMaxY(self.checkBoxButton.frame);
+
+  CGFloat yAlign =

[kkhorimoto, 2017/05/31 20:44:40]

I'm not a fan of |yAlign| as a variable name here.  How about |originY|?

[lody, 2017/06/01 08:41:19]

Done.

+      (CGRectGetHeight(self.bounds) - containerViewSize.height) / 2.0;
+  CGFloat optInLabelBottomPadding = kOptInLabelPadding[self.cr_heightSizeClass];
+  CGFloat OKButtonTop =
+      CGRectGetMinY(self.OKButton.frame) - optInLabelBottomPadding;
+  if ((CGRectGetHeight(self.bounds) - OKButtonTop) > yAlign) {
+    yAlign = OKButtonTop - containerViewSize.height;
+  }

[kkhorimoto, 2017/05/31 20:44:39]

This whole block of logic can be simplified a bit:

CGFloat padding = kOptInLabelPadding[self.cr_heightSizeClass];
CGFloat originY = std::min(
    (CGRectGetHeight(self.bounds) - containerViewSize.height) / 2.0,
    CGRectGetMinY(self.OKButton.frame) - padding- containerViewSize.height);

[lody, 2017/06/01 08:41:18]

Good suggestion, that's way more readable! 

+
   self.containerView.frame = AlignRectOriginAndSizeToPixels(CGRectMake(
-      (CGRectGetWidth(self.bounds) - containerViewSize.width) / 2.0,
-      (CGRectGetHeight(self.bounds) - containerViewSize.height) / 2.0,
+      (CGRectGetWidth(self.bounds) - containerViewSize.width) / 2.0, yAlign,
       containerViewSize.width, CGRectGetMaxY(self.checkBoxButton.frame)));
 }