[Touchless] Implement new progress bar design

This implements the new progress bar design for touchless.

Screenshot of this implementation: http://crbug.com/958184#c21
Mock: https://docs.google.com/presentation/d/1c-aVSZ_zsBuzCwQ4CrBJppmRQjiupa6PXmlC2OS-F-Q/edit?hl=en#slide=id.g5a1bc6d2c5_1_0

Bug: 958069,958184
Change-Id: I0b21876379036cd4aba3105c35345e187275a60c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1628869
Commit-Queue: Mehran Mahmoudi <mahmoudi@chromium.org>
Reviewed-by: Matthew Jones <mdjones@chromium.org>
Cr-Commit-Position: refs/heads/master@{#664927}

chrome/android/java/src/org/chromium/chrome/browser/util/MathUtils.java

@@ -185,4 +185,20 @@ public class MathUtils {
         float yDist = y2 - y1;
         return (float) Math.sqrt(xDist * xDist + yDist * yDist);
     }
+
+    /**
+     * Maps {@code value} in [{@code fromStart}, {@code fromStop}] to
+     * [{@code toStart}, {@code toStop}].
+     *
+     * @param value A number in [{@code fromStart}, {@code fromStop}].
+     * @param fromStart Lower range of {@code value}.
+     * @param fromStop Upper range of {@code value}.
+     * @param toStart Lower range of mapped value.
+     * @param toStop Upper range of mapped value.
+     * @return mapped value.
+     */
+    public static float map(
+            float value, float fromStart, float fromStop, float toStart, float toStop) {
+        return toStart + (toStop - toStart) * ((value - fromStart) / (fromStop - fromStart));
+    }
 }

chrome/android/touchless/java/res/drawable/notouch_progress_bar_drawable.xml

@@ -6,16 +6,21 @@
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:id="@android:id/background">
         <shape>
-            <corners android:radius="16dp" />
-            <solid android:color="@android:color/transparent" />
+            <corners android:radius="@dimen/notouch_progressbar_radius"/>
+            <solid android:color="@color/notouch_progress_bar_background"/>
         </shape>
     </item>
 
-    <item android:id="@android:id/progress">
+    <!-- Without the 1dp padding, the edges of this layer will be partially visible when a
+    foreground layer is added on top. -->
+    <item android:id="@android:id/progress"
+          android:left="1dp"
+          android:right="1dp"
+          android:top="1dp">
         <clip>
             <shape>
-                <corners android:radius="16dp" />
-                <solid android:color="@color/notouch_progress_bar_foreground" />
+                <corners android:radius="@dimen/notouch_progressbar_radius"/>
+                <solid android:color="@color/notouch_progress_bar_fill"/>
             </shape>
         </clip>
     </item>

chrome/android/touchless/java/res/drawable/notouch_progress_bar_pill.xml

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright 2019 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. -->
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <corners android:radius="@dimen/notouch_progressbar_radius"/>
+    <solid android:color="@android:color/white"/>
+</shape>
\ No newline at end of file

chrome/android/touchless/java/res/layout/notouch_progress_bar_view.xml

@@ -10,12 +10,11 @@
     android:layout_gravity="center_horizontal"
     android:background="@drawable/progress_bar_shadow">
 
-    <ProgressBar
+    <org.chromium.chrome.browser.touchless.ui.progressbar.PillProgressBarView
         android:id="@+id/notouch_progress_bar_view"
         style="@android:style/Widget.ProgressBar.Horizontal"
         android:layout_width="192dp"
-        android:layout_height="36dp"
-        android:progressDrawable="@drawable/notouch_progress_bar_drawable" />
+        android:layout_height="36dp"/>
 
     <TextView
         android:id="@+id/notouch_url_text_view"

chrome/android/touchless/java/res/values-v17/colors.xml

@@ -4,9 +4,10 @@
      found in the LICENSE file. -->
 
 <resources>
-    <color name="modern_blue_100">#D2E3FC</color>
     <color name="modern_blue_600_alpha_12">#1F185ABC</color>
-    <color name="notouch_progress_bar_foreground">@color/modern_blue_100</color>
+    <color name="modern_blue_600_alpha_24">#3D1A73E8</color>
+    <color name="notouch_progress_bar_background">@color/modern_blue_600_alpha_24</color>
+    <color name="notouch_progress_bar_fill">@color/modern_blue_600</color>
     <color name="notouch_progress_bar_text">@color/modern_grey_800</color>
     <color name="notouch_tooltip_background">@color/modern_grey_800</color>
     <color name="notouch_key_functions_iph_item_border">@android:color/white</color>

chrome/android/touchless/java/res/values-v17/dimens.xml

@@ -15,6 +15,9 @@
     <dimen name="notouch_key_functions_tooltip_item_image_vertical_padding">5dp</dimen>
     <dimen name="notouch_key_functions_tooltip_item_horizontal_margin">4dp</dimen>
 
+    <dimen name="notouch_progressbar_fill_height">2dp</dimen>
+    <dimen name="notouch_progressbar_radius">18dp</dimen>
+
     <dimen name="focus_ring_stroke_width">2dp</dimen>
     <dimen name="touchless_preferences_highlight_padding">8dp</dimen>
 

chrome/android/touchless/java/src/org/chromium/chrome/browser/touchless/ui/progressbar/PillProgressBarView.java

+// Copyright 2019 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.
+
+package org.chromium.chrome.browser.touchless.ui.progressbar;
+
+import android.annotation.SuppressLint;
+import android.annotation.TargetApi;
+import android.content.Context;
+import android.graphics.drawable.ClipDrawable;
+import android.graphics.drawable.Drawable;
+import android.os.Build;
+import android.util.AttributeSet;
+import android.view.Gravity;
+import android.widget.ProgressBar;
+
+import org.chromium.chrome.browser.util.MathUtils;
+import org.chromium.chrome.touchless.R;
+
+/**
+ * A pill shaped progress bar. This view is blank for the most part, except for the bottom
+ * R.dimen.notouch_progressbar_fill_height where the progress is shown.
+ */
+@TargetApi(Build.VERSION_CODES.M)
+public class PillProgressBarView extends ProgressBar {
+    // The start and the end of the progress bar will be hidden behind the corner radius. This
+    // variable holds the offset progress that is hidden.
+    private int mDispalyableProgressOffset;
+
+    // ClipDrawable's max is a fixed constant 10000.
+    // http://developer.android.com/reference/android/graphics/drawable/ClipDrawable.html
+    private static final int CLIP_DRAWABLE_MAX = 10000;
+
+    public PillProgressBarView(Context context, AttributeSet attrs) {
+        super(context, attrs);
+        Drawable pillDrawable = getResources().getDrawable(R.drawable.notouch_progress_bar_pill);
+        setBackground(pillDrawable);
+        setForeground(new ClipDrawable(pillDrawable, Gravity.TOP, ClipDrawable.VERTICAL));
+        setProgressDrawable(getResources().getDrawable(R.drawable.notouch_progress_bar_drawable));
+    }
+
+    @Override
+    protected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
+        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
+        // The height of the portion of the progress bar that is visible.
+        float progressFillHeight =
+                getResources().getDimension(R.dimen.notouch_progressbar_fill_height);
+        // The radius of pill's curved corners.
+        float radius = getResources().getDimension(R.dimen.notouch_progressbar_radius);
+
+        // Clip the white foreground to only show progressFillHeight of progress bar at the bottom.
+        int clipLevel = (int) (CLIP_DRAWABLE_MAX * (getMeasuredHeight() - progressFillHeight)
+                / getMeasuredHeight());
+        getForeground().setLevel(clipLevel);
+
+        // Because of the corner radius, a portion of the progress bar is obscured from left and
+        // right by the white overlay. We should calculate this offset in order to scale the
+        // progress value accordingly.
+        float dispalyableProgressOffsetPx = radius
+                - (float) Math.sqrt(Math.pow(radius, 2) - Math.pow(radius - progressFillHeight, 2));
+        mDispalyableProgressOffset =
+                (int) ((dispalyableProgressOffsetPx * getMax()) / getMeasuredWidth());
+    }
+
+    // public synchronized methods cause a lint warning, but this needs to be synchronized because
+    // of the super method.
+    @SuppressLint("NoSynchronizedMethodCheck")
+    @Override
+    public synchronized void setProgress(int progress) {
+        // Scale progress from [0, getMax()] to
+        // [mDispalyableProgressOffset, getMax() - mDispalyableProgressOffset].
+        int scaledProgress = (int) MathUtils.map(progress, 0, getMax(), mDispalyableProgressOffset,
+                getMax() - mDispalyableProgressOffset);
+        super.setProgress(scaledProgress);
+    }
+}

chrome/android/touchless/java/src/org/chromium/chrome/browser/touchless/ui/progressbar/ProgressBarView.java

@@ -8,7 +8,6 @@ import android.content.Context;
 import android.support.design.widget.CoordinatorLayout;
 import android.util.AttributeSet;
 import android.view.Gravity;
-import android.widget.ProgressBar;
 import android.widget.RelativeLayout;
 import android.widget.TextView;
 
@@ -19,10 +18,8 @@ import org.chromium.chrome.touchless.R;
  * eTLD+1.
  */
 public class ProgressBarView extends RelativeLayout {
-    private static final int MAX_PROGRESS = 100;
-
     private TextView mUrlTextView;
-    private ProgressBar mProgressBar;
+    private PillProgressBarView mProgressBar;
 
     public ProgressBarView(Context context) {
         super(context);
@@ -50,13 +47,12 @@ public class ProgressBarView extends RelativeLayout {
         mProgressBar = findViewById(R.id.notouch_progress_bar_view);
         mUrlTextView = findViewById(R.id.notouch_url_text_view);
 
-        mProgressBar.setMax(MAX_PROGRESS);
         setVisibility(false);
     }
 
     void setProgress(float progressFraction) {
         assert progressFraction >= 0f && progressFraction <= 1f;
-        mProgressBar.setProgress((int) (progressFraction * MAX_PROGRESS));
+        mProgressBar.setProgress((int) (progressFraction * mProgressBar.getMax()));
     }
 
     void setUrlText(String text) {

chrome/android/touchless/touchless_java_sources.gni

@@ -56,6 +56,7 @@ touchless_java_sources = [
   "touchless/java/src/org/chromium/chrome/browser/touchless/ui/iph/KeyFunctionsIPHProperties.java",
   "touchless/java/src/org/chromium/chrome/browser/touchless/ui/iph/KeyFunctionsIPHView.java",
   "touchless/java/src/org/chromium/chrome/browser/touchless/ui/iph/KeyFunctionsIPHViewBinder.java",
+  "touchless/java/src/org/chromium/chrome/browser/touchless/ui/progressbar/PillProgressBarView.java",
   "touchless/java/src/org/chromium/chrome/browser/touchless/ui/progressbar/ProgressBarCoordinator.java",
   "touchless/java/src/org/chromium/chrome/browser/touchless/ui/progressbar/ProgressBarMediator.java",
   "touchless/java/src/org/chromium/chrome/browser/touchless/ui/progressbar/ProgressBarProperties.java",