Update button color of Color picker dialog

Replace "more" button on color picker dialog with ButtonCompat. The
bg color of the original one does not turn dark on night mode.

Bug: 1045190
Change-Id: Ifdf2bf60314cbf93b5136ca3007a0cf0204f235c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2119370Reviewed-by: Ted Choc <tedchoc@chromium.org>
Reviewed-by: Theresa  <twellington@chromium.org>
Commit-Queue: Lijin Shen <lazzzis@google.com>
Cr-Commit-Position: refs/heads/master@{#755234}

chrome/android/BUILD.gn

@@ -879,6 +879,7 @@ android_library("chrome_test_java") {
     "//components/embedder_support/android:content_view_java",
     "//components/embedder_support/android:util_java",
     "//components/embedder_support/android:web_contents_delegate_java",
+    "//components/embedder_support/android:web_contents_delegate_javatests",
     "//components/external_intents/android:java",
     "//components/feature_engagement:feature_engagement_java",
     "//components/gcm_driver/android:gcm_driver_java",

chrome/test/data/android/render_tests/ColorPickerDialogRenderTest.NightModeDisabled-color_picker_dialog.Nexus_5X-23.png.sha1

+9dd61cf83e86f243291f884a7257cbc3f9a7cd2c
\ No newline at end of file

chrome/test/data/android/render_tests/ColorPickerDialogRenderTest.NightModeEnabled-color_picker_dialog.Nexus_5X-23.png.sha1

+191c5c1ffd1c98a2a89af85ce44d0d4665617ec6
\ No newline at end of file

components/embedder_support/android/BUILD.gn

@@ -150,7 +150,6 @@ android_library("web_contents_delegate_java") {
     "java/src/org/chromium/components/embedder_support/delegate/ColorPickerAdvanced.java",
     "java/src/org/chromium/components/embedder_support/delegate/ColorPickerAdvancedComponent.java",
     "java/src/org/chromium/components/embedder_support/delegate/ColorPickerDialog.java",
-    "java/src/org/chromium/components/embedder_support/delegate/ColorPickerMoreButton.java",
     "java/src/org/chromium/components/embedder_support/delegate/ColorPickerSimple.java",
     "java/src/org/chromium/components/embedder_support/delegate/ColorSuggestion.java",
     "java/src/org/chromium/components/embedder_support/delegate/ColorSuggestionListAdapter.java",
@@ -234,3 +233,23 @@ junit_binary("components_embedder_support_junit_tests") {
     "//base:base_junit_test_support",
   ]
 }
+
+android_library("web_contents_delegate_javatests") {
+  testonly = true
+
+  sources = [ "java/src/org/chromium/components/embedder_support/delegate/ColorPickerDialogRenderTest.java" ]
+  deps = [
+    ":web_contents_delegate_java",
+    ":web_contents_delegate_java_resources",
+    "//base:base_java",
+    "//base:base_java_test_support",
+    "//content/public/test/android:content_java_test_support",
+    "//third_party/android_deps:androidx_core_core_java",
+    "//third_party/android_deps:com_android_support_appcompat_v7_java",
+    "//third_party/android_support_test_runner:rules_java",
+    "//third_party/android_support_test_runner:runner_java",
+    "//third_party/junit",
+    "//ui/android:ui_java",
+    "//ui/android:ui_java_test_support",
+  ]
+}

components/embedder_support/android/DEPS

 include_rules = [
   "-content/public/android/java",
   "+content/public/android/java/src/org/chromium/content_public",
+  "+content/public/test/android",
 
   "+cc",
   "+components/embedder_support/android/web_contents_delegate_jni_headers",

components/embedder_support/android/java/res/layout/color_picker_dialog_content.xml

@@ -27,25 +27,14 @@
         android:layout_height="wrap_content"
         android:divider="@color/color_picker_border_color"
         android:dividerHeight="1px"
-        android:paddingStart="1px"
-        android:paddingEnd="1px"
-        android:paddingTop="1px"
+        android:padding="1px"
         android:background="@drawable/color_picker_border" />
 
-    <FrameLayout
-        android:id="@+id/more_colors_button_border"
+    <org.chromium.ui.widget.ButtonCompat
+        android:id="@+id/more_colors_button"
+        style="@style/TextButton"
+        android:layout_marginTop="16dp"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:background="@drawable/color_picker_border"
-        android:padding="1px">
-
-        <org.chromium.components.embedder_support.delegate.ColorPickerMoreButton
-            android:id="@+id/more_colors_button"
-            style="?android:attr/buttonBarButtonStyle"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:minHeight="48dp"
-            android:textAppearance="?android:attr/textAppearanceSmall"
-            android:text="@string/color_picker_button_more" />
-    </FrameLayout>
+        android:text="@string/color_picker_button_more" />
 </LinearLayout>

components/embedder_support/android/java/res/values/colors.xml

@@ -5,6 +5,7 @@
      found in the LICENSE file.
 -->
 <resources>
-    <color name="color_picker_border_color">#B0B0B0</color>
-    <color name="color_picker_background_color">#FFFFFF</color>
+    <!-- TODO(crbug.com/775198): update colors once UX spec available. -->
+    <color name="color_picker_border_color">@color/hairline_stroke_color</color>
+    <color name="color_picker_background_color">@color/default_bg_color</color>
 </resources>

components/embedder_support/android/java/src/org/chromium/components/embedder_support/delegate/ColorPickerDialog.java

@@ -13,6 +13,8 @@ import android.view.View;
 import android.widget.Button;
 import android.widget.TextView;
 
+import androidx.annotation.VisibleForTesting;
+
 import org.chromium.base.StrictModeContext;
 
 /**
@@ -26,6 +28,8 @@ public class ColorPickerDialog extends AlertDialog implements OnColorChangedList
 
     private final Button mMoreButton;
 
+    private final View mContent;
+
     // The view up in the corner that shows the user the color they've currently selected.
     private final View mCurrentColorView;
 
@@ -99,11 +103,11 @@ public class ColorPickerDialog extends AlertDialog implements OnColorChangedList
         });
 
         // Initialize main content view
-        View content = inflateView(context, R.layout.color_picker_dialog_content);
-        setView(content);
+        mContent = inflateView(context, R.layout.color_picker_dialog_content);
+        setView(mContent);
 
         // Initialize More button.
-        mMoreButton = (Button) content.findViewById(R.id.more_colors_button);
+        mMoreButton = (Button) mContent.findViewById(R.id.more_colors_button);
         mMoreButton.setOnClickListener(new Button.OnClickListener() {
             @Override
             public void onClick(View v) {
@@ -113,11 +117,11 @@ public class ColorPickerDialog extends AlertDialog implements OnColorChangedList
 
         // Initialize advanced color view (hidden initially).
         mAdvancedColorPicker =
-                (ColorPickerAdvanced) content.findViewById(R.id.color_picker_advanced);
+                (ColorPickerAdvanced) mContent.findViewById(R.id.color_picker_advanced);
         mAdvancedColorPicker.setVisibility(View.GONE);
 
         // Initialize simple color view (default view).
-        mSimpleColorPicker = (ColorPickerSimple) content.findViewById(R.id.color_picker_simple);
+        mSimpleColorPicker = (ColorPickerSimple) mContent.findViewById(R.id.color_picker_simple);
         mSimpleColorPicker.init(suggestions, this);
 
         updateCurrentColor(mInitialColor);
@@ -141,8 +145,7 @@ public class ColorPickerDialog extends AlertDialog implements OnColorChangedList
     private void showAdvancedView() {
         // Only need to hide the borders, not the Views themselves, since the Views are
         // contained within the borders.
-        View buttonBorder = findViewById(R.id.more_colors_button_border);
-        buttonBorder.setVisibility(View.GONE);
+        mMoreButton.setVisibility(View.GONE);
 
         View simpleView = findViewById(R.id.color_picker_simple);
         simpleView.setVisibility(View.GONE);
@@ -167,4 +170,9 @@ public class ColorPickerDialog extends AlertDialog implements OnColorChangedList
         mCurrentColor = color;
         if (mCurrentColorView != null) mCurrentColorView.setBackgroundColor(color);
     }
+
+    @VisibleForTesting
+    public View getContentView() {
+        return mContent;
+    }
 }

components/embedder_support/android/java/src/org/chromium/components/embedder_support/delegate/ColorPickerDialogRenderTest.java

+// Copyright 2020 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.components.embedder_support.delegate;
+
+import static android.view.ViewGroup.LayoutParams.WRAP_CONTENT;
+
+import android.app.Activity;
+import android.graphics.Color;
+import android.view.View;
+import android.view.ViewGroup.LayoutParams;
+
+import androidx.test.filters.MediumTest;
+
+import org.junit.Rule;
+import org.junit.Test;
+import org.junit.runner.RunWith;
+
+import org.chromium.base.test.params.BaseJUnit4RunnerDelegate;
+import org.chromium.base.test.params.ParameterAnnotations;
+import org.chromium.base.test.params.ParameterAnnotations.UseRunnerDelegate;
+import org.chromium.base.test.params.ParameterSet;
+import org.chromium.base.test.params.ParameterizedRunner;
+import org.chromium.base.test.util.Feature;
+import org.chromium.content_public.browser.test.util.TestThreadUtils;
+import org.chromium.ui.R;
+import org.chromium.ui.test.util.DummyUiActivityTestCase;
+import org.chromium.ui.test.util.NightModeTestUtils;
+import org.chromium.ui.test.util.RenderTestRule;
+
+import java.io.IOException;
+import java.util.List;
+
+/**
+ * Render tests for color picker dialog.
+ */
+@RunWith(ParameterizedRunner.class)
+@UseRunnerDelegate(BaseJUnit4RunnerDelegate.class)
+public class ColorPickerDialogRenderTest extends DummyUiActivityTestCase {
+    @ParameterAnnotations.ClassParameter
+    private static List<ParameterSet> sClassParams =
+            new NightModeTestUtils.NightModeParams().getParameters();
+
+    @Rule
+    public RenderTestRule mRenderTestRule =
+            new RenderTestRule("chrome/test/data/android/render_tests");
+
+    private View mView;
+
+    public ColorPickerDialogRenderTest(boolean nightModeEnabled) {
+        NightModeTestUtils.setUpNightModeForDummyUiActivity(nightModeEnabled);
+        mRenderTestRule.setNightModeEnabled(nightModeEnabled);
+    }
+
+    @Override
+    public void setUpTest() throws Exception {
+        super.setUpTest();
+        ColorSuggestion[] suggestions = new ColorSuggestion[8];
+        suggestions[0] = new ColorSuggestion(Color.WHITE, "white");
+        suggestions[1] = new ColorSuggestion(Color.BLACK, "black");
+        suggestions[2] = new ColorSuggestion(Color.YELLOW, "yellow");
+        suggestions[3] = new ColorSuggestion(Color.BLUE, "blue");
+        suggestions[4] = new ColorSuggestion(Color.GREEN, "green");
+        suggestions[5] = new ColorSuggestion(Color.RED, "red");
+        suggestions[6] = new ColorSuggestion(Color.MAGENTA, "magenta");
+        suggestions[7] = new ColorSuggestion(Color.CYAN, "cyan");
+        TestThreadUtils.runOnUiThreadBlocking(() -> {
+            Activity activity = getActivity();
+            ColorPickerDialog dialog =
+                    new ColorPickerDialog(activity, (v) -> {}, Color.RED, suggestions);
+            mView = dialog.getContentView();
+            mView.setBackgroundResource(R.color.default_bg_color);
+            activity.setContentView(mView, new LayoutParams(WRAP_CONTENT, WRAP_CONTENT));
+        });
+    }
+
+    @Test
+    @MediumTest
+    @Feature({"RenderTest"})
+    public void testRender_ColorPickerDialog() throws IOException {
+        mRenderTestRule.render(mView, "color_picker_dialog");
+    }
+}

components/embedder_support/android/java/src/org/chromium/components/embedder_support/delegate/ColorPickerMoreButton.java

-// Copyright 2013 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.components.embedder_support.delegate;
-
-import android.content.Context;
-import android.graphics.Canvas;
-import android.graphics.Color;
-import android.graphics.Paint;
-import android.util.AttributeSet;
-import android.widget.Button;
-
-/**
- * Simple class that draws a white border around a button, purely for a UI change.
- */
-public class ColorPickerMoreButton extends Button {
-    // A cache for the paint used to draw the border, so it doesn't have to be created in
-    // every onDraw() call.
-    private Paint mBorderPaint;
-
-    public ColorPickerMoreButton(Context context, AttributeSet attrs) {
-        super(context, attrs);
-        init();
-    }
-
-    public ColorPickerMoreButton(Context context, AttributeSet attrs, int defStyle) {
-        super(context, attrs, defStyle);
-        init();
-    }
-
-    /**
-     * Sets up the paint to use for drawing the border.
-     */
-    public void init() {
-        mBorderPaint = new Paint();
-        mBorderPaint.setStyle(Paint.Style.STROKE);
-        mBorderPaint.setColor(Color.WHITE);
-        // Set the width to one pixel.
-        mBorderPaint.setStrokeWidth(1.0f);
-        // And make sure the border doesn't bleed into the outside.
-        mBorderPaint.setAntiAlias(false);
-    }
-
-    /**
-     * Draws the border around the edge of the button.
-     *
-     * @param canvas The canvas to draw on.
-     */
-    @Override
-    protected void onDraw(Canvas canvas) {
-        canvas.drawRect(0.5f, 0.5f, getWidth() - 1.5f, getHeight() - 1.5f, mBorderPaint);
-        super.onDraw(canvas);
-    }
-}