Bug 1070087 - Change tapped action bar buttons' visual to be smaller than the hit area. r=lucasr
authorMichael Comella <michael.l.comella@gmail.com>
Fri, 03 Oct 2014 18:03:49 -0700
changeset 208750 b1718e507da7dfc2610e460ff414c4f5fcc09bbf
parent 208749 8e3e47367465bbf5b13ff2c34dd6b11c65cc0daa
child 208751 63061f730d01c8259956572de06d5636dab3969f
push id1
push userroot
push dateMon, 20 Oct 2014 17:29:22 +0000
reviewerslucasr
bugs1070087
milestone35.0a1
Bug 1070087 - Change tapped action bar buttons' visual to be smaller than the hit area. r=lucasr
mobile/android/base/newtablet/res/drawable-large-v11/new_tablet_action_bar_button.xml
mobile/android/base/newtablet/res/layout-large-v11/new_tablet_browser_toolbar.xml
mobile/android/base/resources/values-large-v11/styles.xml
mobile/android/base/resources/values/dimens.xml
new file mode 100644
--- /dev/null
+++ b/mobile/android/base/newtablet/res/drawable-large-v11/new_tablet_action_bar_button.xml
@@ -0,0 +1,44 @@
+<?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/. -->
+
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <item android:state_pressed="true"
+          android:state_enabled="true">
+
+        <inset android:insetTop="@dimen/new_tablet_browser_toolbar_menu_item_inset_vertical"
+               android:insetBottom="@dimen/new_tablet_browser_toolbar_menu_item_inset_vertical"
+               android:insetLeft="@dimen/new_tablet_browser_toolbar_menu_item_inset_horizontal"
+               android:insetRight="@dimen/new_tablet_browser_toolbar_menu_item_inset_horizontal">
+            <shape android:shape="rectangle">
+                <solid android:color="#D7D7DC"/>
+                <corners android:radius="@dimen/new_tablet_browser_toolbar_menu_item_corner_radius"/>
+            </shape>
+        </inset>
+
+    </item>
+
+    <item android:state_focused="true"
+          android:state_pressed="false">
+
+        <inset android:insetTop="@dimen/new_tablet_browser_toolbar_menu_item_inset_vertical"
+               android:insetBottom="@dimen/new_tablet_browser_toolbar_menu_item_inset_vertical"
+               android:insetLeft="@dimen/new_tablet_browser_toolbar_menu_item_inset_horizontal"
+               android:insetRight="@dimen/new_tablet_browser_toolbar_menu_item_inset_horizontal">
+            <shape android:shape="rectangle">
+                <solid android:color="#C0C9D0"/>
+                <corners android:radius="@dimen/new_tablet_browser_toolbar_menu_item_corner_radius"/>
+            </shape>
+        </inset>
+
+    </item>
+
+    <item>
+        <shape android:shape="rectangle">
+            <solid android:color="@android:color/transparent"/>
+        </shape>
+    </item>
+
+</selector>
--- a/mobile/android/base/newtablet/res/layout-large-v11/new_tablet_browser_toolbar.xml
+++ b/mobile/android/base/newtablet/res/layout-large-v11/new_tablet_browser_toolbar.xml
@@ -58,17 +58,17 @@
                   android:layout_marginLeft="6dp"
                   android:orientation="horizontal"
                   android:layout_toLeftOf="@id/tabs"/>
 
     <org.mozilla.gecko.widget.ThemedImageButton
             android:id="@+id/tabs"
             style="@style/UrlBar.ImageButton.NewTablet"
             android:layout_toLeftOf="@id/menu"
-            android:background="@drawable/action_bar_button"/>
+            android:background="@drawable/new_tablet_action_bar_button"/>
 
     <!-- In a 56x60dp space, centering 24dp image will leave 16x18dp. -->
     <org.mozilla.gecko.toolbar.TabCounter android:id="@+id/tabs_counter"
                         style="@style/UrlBar.ImageButton.TabCount.NewTablet"
                         android:layout_alignLeft="@id/tabs"
                         android:layout_alignRight="@id/tabs"
                         android:layout_alignTop="@id/tabs"
                         android:layout_alignBottom="@id/tabs"
@@ -79,17 +79,17 @@
                         gecko:layout="@layout/new_tablet_tabs_counter"/>
 
     <org.mozilla.gecko.widget.ThemedImageButton
             android:id="@+id/menu"
             style="@style/UrlBar.ImageButton.NewTablet"
             android:layout_alignParentRight="true"
             android:layout_marginRight="6dp"
             android:contentDescription="@string/menu"
-            android:background="@drawable/action_bar_button"
+            android:background="@drawable/new_tablet_action_bar_button"
             android:visibility="gone"/>
 
     <org.mozilla.gecko.widget.ThemedImageView
             android:id="@+id/menu_icon"
             style="@style/UrlBar.ImageButton.NewTablet"
             android:layout_alignLeft="@id/menu"
             android:layout_alignRight="@id/menu"
             android:src="@drawable/new_tablet_menu"
--- a/mobile/android/base/resources/values-large-v11/styles.xml
+++ b/mobile/android/base/resources/values-large-v11/styles.xml
@@ -81,17 +81,19 @@
         <item name="android:paddingLeft">@dimen/browser_toolbar_button_padding</item>
         <item name="android:paddingRight">@dimen/browser_toolbar_button_padding</item>
     </style>
 
     <style name="Widget.MenuItemActionBar.NewTablet">
         <item name="android:layout_width">wrap_content</item>
         <item name="android:layout_height">wrap_content</item>
         <item name="android:scaleType">center</item>
+        <item name="android:background">@drawable/new_tablet_action_bar_button</item>
 
+        <!-- layout_* doesn't work here, likely because it's an ImageButton, so we use padding instead. -->
         <item name="android:paddingTop">@dimen/new_tablet_browser_toolbar_menu_item_padding_vertical</item>
         <item name="android:paddingBottom">@dimen/new_tablet_browser_toolbar_menu_item_padding_vertical</item>
         <item name="android:paddingLeft">@dimen/new_tablet_browser_toolbar_menu_item_padding_horizontal</item>
         <item name="android:paddingRight">@dimen/new_tablet_browser_toolbar_menu_item_padding_horizontal</item>
     </style>
 
     <style name="Widget.BookmarksListView" parent="Widget.HomeListView">
         <item name="android:scrollbarStyle">outsideOverlay</item>
--- a/mobile/android/base/resources/values/dimens.xml
+++ b/mobile/android/base/resources/values/dimens.xml
@@ -22,16 +22,19 @@
     <dimen name="new_tablet_tab_strip_item_margin">-30dp</dimen>
     <dimen name="new_tablet_tab_strip_favicon_size">16dp</dimen>
     <dimen name="new_tablet_forward_default_offset">-6dp</dimen>
     <dimen name="new_tablet_browser_toolbar_height">60dp</dimen>
     <dimen name="new_tablet_browser_toolbar_menu_item_width">56dp</dimen>
     <!-- Padding combines with an 18dp image to form the menu item width and height. -->
     <dimen name="new_tablet_browser_toolbar_menu_item_padding_horizontal">19dp</dimen>
     <dimen name="new_tablet_browser_toolbar_menu_item_padding_vertical">21dp</dimen>
+    <dimen name="new_tablet_browser_toolbar_menu_item_inset_vertical">5dp</dimen>
+    <dimen name="new_tablet_browser_toolbar_menu_item_inset_horizontal">3dp</dimen>
+    <dimen name="new_tablet_browser_toolbar_menu_item_corner_radius">5dp</dimen>
     <dimen name="forward_default_offset">-13dip</dimen>
 
     <!-- Dimensions used by Favicons and FaviconView -->
     <dimen name="favicon_size_small">16dp</dimen>
     <dimen name="favicon_size_large">32dp</dimen>
     <dimen name="favicon_bg">32dp</dimen>
     <dimen name="favicon_bg_radius">1dp</dimen>
     <!-- Set the upper limit on the size of favicon that will be processed. Favicons larger than