Color Picker "More" button looks more button-like.

I've modified the UI for the "More" button in accordance with the UI
suggestions.  I've darkened the border, and added a white inner shadow.
I've also made the border thinner to match the Set and Cancel buttons, and
made the button smaller to match the size of the Set and Cancel buttons.

BUG=261531

Review URL: https://chromiumcodereview.appspot.com/20084004

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@213876 0039d316-1c4b-4281-b951-d872f2087c98

4 files changed, 65 insertions, 6 deletions

diff --git a/ui/android/java/res/drawable/color_picker_border.xml b/ui/android/java/res/drawable/color_picker_border.xml
index 87c0feb..4318c43 100644
--- a/ui/android/java/res/drawable/color_picker_border.xml
+++ b/ui/android/java/res/drawable/color_picker_border.xml
@@ -6,5 +6,5 @@
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="rectangle">
   <solid android:color="#00000000"/>
-  <stroke android:width="1px" android:color="#D0D0D0" />
+  <stroke android:width="1px" android:color="#B0B0B0" />
 </shape>
\ No newline at end of file
diff --git a/ui/android/java/res/layout/color_picker_dialog_content.xml b/ui/android/java/res/layout/color_picker_dialog_content.xml
index 9a3c763..fb7bd94 100644
--- a/ui/android/java/res/layout/color_picker_dialog_content.xml
+++ b/ui/android/java/res/layout/color_picker_dialog_content.xml
@@ -24,7 +24,7 @@
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:background="@drawable/color_picker_border"
-            android:padding="1dp">
+            android:padding="2px">
 
             <org.chromium.ui.ColorPickerSimple
                 android:id="@+id/color_picker_simple"
@@ -38,14 +38,17 @@
             android:layout_height="wrap_content"
             android:layout_below="@+id/color_picker_simple_border"
             android:background="@drawable/color_picker_border"
-            android:padding="1dp">
+            android:paddingStart="1px"
+            android:paddingEnd="1px"
+            android:paddingBottom="1px">
 
-            <Button
+            <org.chromium.ui.ColorPickerMoreButton
                 android:id="@+id/more_colors_button"
                 style="?android:attr/buttonBarButtonStyle"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                android:minHeight="60dip"
+                android:minHeight="48dp"
+                android:textAppearance="?android:attr/textAppearanceSmall"
                 android:text="@string/color_picker_button_more" />
         </FrameLayout>
 
diff --git a/ui/android/java/res/layout/color_picker_dialog_title.xml b/ui/android/java/res/layout/color_picker_dialog_title.xml
index acb9b73..d97cafb 100644
--- a/ui/android/java/res/layout/color_picker_dialog_title.xml
+++ b/ui/android/java/res/layout/color_picker_dialog_title.xml
@@ -29,7 +29,7 @@
         android:layout_alignParentEnd="true"
         android:id="@+id/selected_color_view_border"
         android:background="@drawable/color_picker_border"
-        android:padding="1dp">
+        android:padding="2px">
 
         <View
             android:id="@+id/selected_color_view"
diff --git a/ui/android/java/src/org/chromium/ui/ColorPickerMoreButton.java b/ui/android/java/src/org/chromium/ui/ColorPickerMoreButton.java
new file mode 100644
index 0000000..a982afd
--- /dev/null
+++ b/ui/android/java/src/org/chromium/ui/ColorPickerMoreButton.java
@@ -0,0 +1,56 @@
+// 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.ui;
+import android.content.Context;
+import android.graphics.Canvas;
+import android.graphics.Color;
+import android.graphics.Paint;
+import android.graphics.Paint.Style;
+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);
+    }
+}