Bug 1050403 - Update widget style. r=margaret

mobile/android/search/res/drawable/widget_button_left.xml

@@ -5,25 +5,10 @@
 
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
 
-    <item android:state_pressed="true">
-        <shape android:shape="rectangle">
-            <corners android:topLeftRadius="4dp"
-                     android:topRightRadius="0dp"
-                     android:bottomLeftRadius="0dp"
-                     android:bottomRightRadius="0dp"/>
-            <solid android:color="@color/widget_button_pressed"/>
-        </shape>
-    </item>
+    <item android:state_pressed="true"
+           android:drawable="@drawable/widget_button_left_pressed"/>
 
     <!-- The left button is gray in its off state -->
-    <item>
-        <shape android:shape="rectangle">
-            <corners android:topLeftRadius="4dp"
-                     android:topRightRadius="0dp"
-                     android:bottomLeftRadius="0dp"
-                     android:bottomRightRadius="0dp"/>
-            <solid android:color="@color/widget_logo_highlight"/>
-        </shape>
-    </item>
+    <item android:drawable="@drawable/widget_button_left_default"/>
 
 </selector>

mobile/android/search/res/drawable/widget_button_left_default.xml

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+<!-- These drawables have to be wrapped in a layer-list in order to produce padding at
+     the bottom of the drawable. That padding ensures the drawable doesn't block the
+     orange strip in widget_bg.9.png -->
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:bottom="@dimen/widget_bg_border_offset">
+        <shape android:shape="rectangle">
+            <corners android:topLeftRadius="@dimen/widget_drawable_corner_radius"
+                     android:topRightRadius="0dp"
+                     android:bottomLeftRadius="0dp"
+                     android:bottomRightRadius="0dp"/>
+            <solid android:color="@color/widget_logo_default"/>
+        </shape>
+    </item>
+</layer-list>

mobile/android/search/res/drawable/widget_button_left_pressed.xml

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+<!-- These drawables have to be wrapped in a layer-list in order to produce padding at
+     the bottom of the drawable. That padding ensures the drawable doesn't block the
+     orange strip in widget_bg.9.png -->
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:bottom="@dimen/widget_bg_border_offset">
+        <shape android:shape="rectangle">
+            <corners android:topLeftRadius="@dimen/widget_drawable_corner_radius"
+                     android:topRightRadius="0dp"
+                     android:bottomLeftRadius="0dp"
+                     android:bottomRightRadius="0dp"/>
+            <solid android:color="@color/widget_button_pressed"/>
+        </shape>
+    </item>
+</layer-list>

mobile/android/search/res/drawable/widget_button_middle.xml

@@ -5,15 +5,8 @@
 
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
 
-    <item android:state_pressed="true">
-        <shape android:shape="rectangle">
-            <corners android:topLeftRadius="0dp"
-                     android:topRightRadius="0dp"
-                     android:bottomLeftRadius="0dp"
-                     android:bottomRightRadius="0dp"/>
-            <solid android:color="@color/widget_button_pressed"/>
-        </shape>
-    </item>
+    <item android:state_pressed="true"
+           android:drawable="@drawable/widget_button_middle_pressed"/>
 
     <item android:drawable="@android:color/transparent"/>
 

mobile/android/search/res/drawable/widget_button_middle_pressed.xml

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+<!-- These drawables have to be wrapped in a layer-list in order to produce padding at
+     the bottom of the drawable. That padding ensures the drawable doesn't block the
+     orange strip in widget_bg.9.png -->
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:bottom="@dimen/widget_bg_border_offset">
+        <shape android:shape="rectangle">
+            <solid android:color="@color/widget_button_pressed"/>
+        </shape>
+    </item>
+</layer-list>

mobile/android/search/res/drawable/widget_button_right.xml

@@ -5,15 +5,8 @@
 
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
 
-    <item android:state_pressed="true">
-        <shape android:shape="rectangle">
-            <corners android:topLeftRadius="0dp"
-                     android:topRightRadius="4dp"
-                     android:bottomLeftRadius="0dp"
-                     android:bottomRightRadius="0dp"/>
-            <solid android:color="@color/widget_button_pressed"/>
-        </shape>
-    </item>
+    <item android:state_pressed="true"
+          android:drawable="@drawable/widget_button_right_pressed"/>
 
     <item android:drawable="@android:color/transparent"/>
 

mobile/android/search/res/drawable/widget_button_right_pressed.xml

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+<!-- These drawables have to be wrapped in a layer-list in order to produce padding at
+     the bottom of the drawable. That padding ensures the drawable doesn't block the
+     orange strip in widget_bg.9.png -->
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:bottom="@dimen/widget_bg_border_offset">
+        <shape android:shape="rectangle">
+            <corners android:topLeftRadius="0dp"
+                     android:topRightRadius="@dimen/widget_drawable_corner_radius"
+                     android:bottomLeftRadius="0dp"
+                     android:bottomRightRadius="0dp"/>
+            <solid android:color="@color/widget_button_pressed"/>
+        </shape>
+    </item>
+</layer-list>

mobile/android/search/res/layout/search_widget.xml

@@ -15,9 +15,10 @@
     <ImageView android:id="@+id/logo_button"
         android:layout_width="0dp"
         android:layout_weight="1"
+        android:padding="@dimen/widget_padding"
         android:background="@drawable/widget_button_left"
         android:layout_height="match_parent"
-        android:src="@drawable/icon"/>
+        android:src="@drawable/widget_icon"/>
 
     <LinearLayout android:id="@+id/search_button"
         android:layout_width="0dp"
@@ -32,11 +33,12 @@
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:drawableLeft="@drawable/ic_widget_search"
-            android:drawablePadding="@dimen/widget_drawable_padding"
+            android:drawablePadding="@dimen/widget_padding"
             android:text="@string/search_widget_button_label"
             android:gravity="center"
+            android:fontFamily="sans-serif"
             android:textSize="@dimen/widget_text_size"
-            android:textColor="@color/text_color_secondary"/>
+            android:textColor="@color/widget_text_color"/>
 
     </LinearLayout>
 
@@ -54,11 +56,12 @@
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:drawableLeft="@drawable/ic_widget_new_tab"
-            android:drawablePadding="@dimen/widget_drawable_padding"
+            android:drawablePadding="@dimen/widget_padding"
             android:gravity="center"
             android:text="@string/new_tab"
+            android:fontFamily="sans-serif"
             android:textSize="@dimen/widget_text_size"
-            android:textColor="@color/text_color_secondary"/>
+            android:textColor="@color/widget_text_color"/>
 
     </LinearLayout>
 

mobile/android/search/res/values/search_colors.xml

@@ -15,8 +15,9 @@
     <color name="card_background_pressed">#DCDCE1</color>
     <color name="card_border">#BFBFBF</color>
 
-    <color name="widget_logo_highlight">#11000000</color>
+    <color name="widget_logo_default">#EBEBF0</color>
     <color name="widget_button_pressed">#33000000</color>
+    <color name="widget_text_color">#5F6368</color>
 
     <!-- Search suggestion highlight color is defined in SearchFragment.java -->
 </resources>

mobile/android/search/res/values/search_dimens.xml

@@ -34,7 +34,9 @@
     <dimen name="widget_header_height">70dp</dimen>
     <dimen name="widget_button_offset">-50dp</dimen>
     <dimen name="widget_button_padding">45dp</dimen>
-    <dimen name="widget_text_size">13sp</dimen>
-    <dimen name="widget_drawable_padding">4dp</dimen>
+    <dimen name="widget_text_size">14sp</dimen>
+    <dimen name="widget_padding">7dp</dimen>
+    <dimen name="widget_drawable_corner_radius">4dp</dimen>
+    <dimen name="widget_bg_border_offset">3dp</dimen>
 
 </resources>