[CCTToSFRE] Rearrage views on FRE Welcome page

1. Move the baseline of the title at the center of the screen;
2. Increase the margin around bottom button group, and made adjust to
small screen devices;
3. Center the ToS and UMA components between the title and accept button

Bug: 1120842
Change-Id: Ie6ab2f4322d1ffd2e2614987424c636604797c61
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2391268Reviewed-by: Sky Malice <skym@chromium.org>
Reviewed-by: Theresa  <twellington@chromium.org>
Commit-Queue: Wenyu Fu <wenyufu@chromium.org>
Cr-Commit-Position: refs/heads/master@{#805459}

chrome/android/java/res/layout/fre_tosanduma.xml

@@ -31,7 +31,7 @@
                 android:layout_width="wrap_content"
                 android:layout_height="@dimen/fre_image_height"
                 android:layout_marginHorizontal="@dimen/fre_vertical_spacing"
-                android:layout_marginBottom="@dimen/fre_vertical_spacing"
+                android:layout_marginBottom="@dimen/fre_image_bottom_margin"
                 android:importantForAccessibility="no"
                 android:src="@drawable/fre_product_logo" />
 
@@ -61,14 +61,14 @@
                     android:layout_weight="1"
                     android:layout_marginTop="@dimen/fre_vertical_spacing"
                     android:layout_marginEnd="@dimen/fre_content_margin"
-                    android:gravity="bottom"
+                    android:gravity="center_vertical"
                     android:orientation="vertical" >
 
                     <org.chromium.ui.widget.TextViewWithClickableSpans
                         android:id="@+id/tos_and_privacy"
                         android:layout_width="wrap_content"
                         android:layout_height="wrap_content"
-                        android:layout_marginBottom="@dimen/fre_vertical_spacing"
+                        android:layout_marginBottom="@dimen/fre_tos_bottom_margin"
                         android:lineSpacingMultiplier="1.4"
                         android:textAppearance="@style/TextAppearance.TextMedium.Primary" />
 
@@ -84,7 +84,6 @@
         </LinearLayout>
     </ScrollView>
 
-    <!-- fre_button_bar_height = 62dp = layout_height + layout_marginVertical * 2 -->
     <ImageView
         android:id="@+id/shadow"
         android:layout_width="match_parent"
@@ -107,22 +106,21 @@
             android:id="@+id/terms_accept"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            android:layout_marginTop="@dimen/fre_bottom_vertical_margin"
-            android:layout_marginBottom="@dimen/fre_bottom_vertical_margin"
+            android:layout_marginVertical="@dimen/fre_button_vertical_margin"
             android:layout_gravity="bottom|center_horizontal"
             android:paddingStart="@dimen/fre_button_padding"
             android:paddingEnd="@dimen/fre_button_padding"
             android:text="@string/fre_accept_continue"
             style="@style/FilledButton.Flat" />
 
-        <!-- Same location as the button; marginButtom is adjusted for the different size. -->
+        <!-- Same location as the button; marginBottom is adjusted for the different size. -->
         <ProgressBar
             android:id="@+id/progress_spinner"
             style="@style/Widget.AppCompat.ProgressBar"
-            android:layout_marginBottom="22dp"
+            android:layout_marginBottom="@dimen/fre_bottom_loading_spinner_margin"
             android:layout_gravity="bottom|center_horizontal"
-            android:layout_width="24dp"
-            android:layout_height="24dp" />
+            android:layout_width="@dimen/fre_bottom_loading_spinner_size"
+            android:layout_height="@dimen/fre_bottom_loading_spinner_size"/>
     </FrameLayout>
 
     <!-- Place holder for privacy disclosure. -->

chrome/android/java/res/values/dimens.xml

@@ -149,13 +149,21 @@
     <dimen name="fre_content_margin">24dp</dimen>
     <dimen name="fre_vertical_spacing">32dp</dimen>
     <dimen name="fre_landscape_top_padding">72dp</dimen>
-    <dimen name="fre_button_bar_height">62dp</dimen>
-    <dimen name="fre_bottom_vertical_margin">10dp</dimen>
-    <dimen name="fre_button_padding">12dp</dimen>
     <dimen name="fre_margin">24dp</dimen>
+
+    <dimen name="fre_image_bottom_margin">36dp</dimen>
     <dimen name="fre_image_height">110dp</dimen>
     <dimen name="fre_tos_checkbox_padding">12dp</dimen>
+    <dimen name="fre_tos_bottom_margin">16dp</dimen>
     <dimen name="fre_loading_spinner_size">48dp</dimen>
+    <dimen name="fre_button_padding">12dp</dimen>
+    <dimen name="fre_bottom_loading_spinner_size">24dp</dimen>
+
+    <dimen name="fre_button_vertical_margin">24dp</dimen>
+    <!-- fre_button_bar_height = button_height(48dp) + fre_button_vertical_margin * 2-->
+    <dimen name="fre_button_bar_height">96dp</dimen>
+    <!-- fre_bottom_loading_spinner_margin = (fre_button_bar_height - fre_bottom_loading_spinner_size) / 2-->
+    <dimen name='fre_bottom_loading_spinner_margin'>36dp</dimen>
 
     <!-- Account Signin dimensions -->
     <!-- The Account Signin page appears in the First Run Experience (amongst other places), so uses

chrome/android/java/src/org/chromium/chrome/browser/firstrun/TosAndUmaFragmentView.java

@@ -43,6 +43,7 @@ public class TosAndUmaFragmentView extends FrameLayout {
     private int mLastWidth;
 
     // Spacing params
+    private int mImageBottomMargin;
     private int mVerticalSpacing;
     private int mImageSize;
     private int mLoadingSpinnerSize;
@@ -77,7 +78,8 @@ public class TosAndUmaFragmentView extends FrameLayout {
         // Set up shadow.
         mScrollView.getViewTreeObserver().addOnScrollChangedListener(this::updateShadowVisibility);
 
-        // Cache resource demensions that used in #onMeasure
+        // Cache resource dimensions that used in #onMeasure.
+        mImageBottomMargin = getResources().getDimensionPixelSize(R.dimen.fre_image_bottom_margin);
         mVerticalSpacing = getResources().getDimensionPixelSize(R.dimen.fre_vertical_spacing);
         mImageSize = getResources().getDimensionPixelSize(R.dimen.fre_image_height);
         mLoadingSpinnerSize =
@@ -119,8 +121,6 @@ public class TosAndUmaFragmentView extends FrameLayout {
             setTitleLayoutParams(useWideScreenLayout);
             setSpinnerLayoutParams(useWideScreenLayout, width, height);
 
-            mContentWrapper.setVerticalGravity(
-                    getContentLayoutVerticalGravity(useWideScreenLayout));
             setContentLayoutParams(useWideScreenLayout);
 
             setBottomGroupLayoutParams(useWideScreenLayout);
@@ -165,13 +165,10 @@ public class TosAndUmaFragmentView extends FrameLayout {
             spinnerParams.setMarginStart(spinnerStartMargin);
             spinnerParams.topMargin = spinnerTopMargin;
         } else {
-            // Calculate the estimated space below the title, which is centered in the overall
-            // content view.
-            int spaceBelowTitle = height / 2 - mHeadlineSize;
-
-            // Place the spinner in the middle of the remaining space;
+            // Center the spinner below the title, whose baseline is centered in the screen.
+            // For more information see #setLogoLayoutParams.
             int spinnerTopMargin =
-                    Math.max(mVerticalSpacing, (spaceBelowTitle - mLoadingSpinnerSize) / 2);
+                    Math.max(mVerticalSpacing, (height / 2 - mLoadingSpinnerSize) / 2);
 
             spinnerParams.gravity = Gravity.CENTER_HORIZONTAL;
             spinnerParams.setMarginStart(0);
@@ -198,15 +195,13 @@ public class TosAndUmaFragmentView extends FrameLayout {
             logoLayoutParams.topMargin = Math.max(0, topMargin);
             logoLayoutParams.gravity = Gravity.CENTER_HORIZONTAL | Gravity.TOP;
         } else {
-            // Otherwise, in tall screen mode, we want the image to sit right above the title
-            // with a vertical spacing in between. In XML, the title is ordered below the logo in
-            // the containing linear layout, so if we align the bottom of the logo mVerticalSpacing
-            // above the center of the screen, the top of the title will be at the center of the
-            // screen. While calculation is done in a similar way, we are putting
+            // Otherwise, in tall screen mode, we want the align the baseline of the title to the
+            // center of the screen. While calculation is done in a similar way, we are putting
             // mVerticalSpacing for marginTop as minimum to avoid 0dp spacing between top and logo
             // on small screen devices.
-            int freImageHeight = mImageSize + mVerticalSpacing;
-            logoLayoutParams.topMargin = Math.max(mVerticalSpacing, (height / 2 - freImageHeight));
+            int freImageHeight = mImageSize + mImageBottomMargin;
+            logoLayoutParams.topMargin =
+                    Math.max(mVerticalSpacing, (height / 2 - freImageHeight - mHeadlineSize));
             logoLayoutParams.gravity = Gravity.CENTER_HORIZONTAL | Gravity.BOTTOM;
         }
     }
@@ -231,10 +226,6 @@ public class TosAndUmaFragmentView extends FrameLayout {
                                                   : Gravity.CENTER_HORIZONTAL | Gravity.BOTTOM;
     }
 
-    private int getContentLayoutVerticalGravity(boolean useWideScreen) {
-        return useWideScreen ? Gravity.CENTER_VERTICAL : Gravity.BOTTOM;
-    }
-
     private int getTitleAndContentLayoutTopPadding(boolean useWideScreen) {
         return useWideScreen ? mLandscapeTopPadding : 0;
     }