Bug 1072469: Change new tablet toolbar height to 60dp and menu buttons to 56x60dp. r=lucasr
authorMichael Comella <michael.l.comella@gmail.com>
Wed, 01 Oct 2014 14:22:45 -0700
changeset 208748 ec342eaecda36f8ee5dd5ce7153b4d9dfa7969b4
parent 208747 15d93e79679e04a824cf9f05c39401d13b653b74
child 208749 8e3e47367465bbf5b13ff2c34dd6b11c65cc0daa
push id27593
push usernalexander@mozilla.com
push dateSun, 05 Oct 2014 03:27:38 +0000
treeherdermozilla-central@4b3d816c21fd [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerslucasr
bugs1072469
milestone35.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1072469: Change new tablet toolbar height to 60dp and menu buttons to 56x60dp. r=lucasr
mobile/android/base/moz.build
mobile/android/base/newtablet/res/layout-large-v11/new_tablet_browser_toolbar.xml
mobile/android/base/resources/layout/gecko_app.xml
mobile/android/base/resources/values-large-v11/styles.xml
mobile/android/base/resources/values/dimens.xml
mobile/android/base/toolbar/ActionBarViewFlipper.java
--- a/mobile/android/base/moz.build
+++ b/mobile/android/base/moz.build
@@ -401,16 +401,17 @@ gbjar.sources += [
     'tabs/TabsListLayout.java',
     'tabs/TabsPanel.java',
     'TabsAccessor.java',
     'Telemetry.java',
     'TelemetryContract.java',
     'TextSelection.java',
     'TextSelectionHandle.java',
     'ThumbnailHelper.java',
+    'toolbar/ActionBarViewFlipper.java',
     'toolbar/AutocompleteHandler.java',
     'toolbar/BackButton.java',
     'toolbar/BrowserToolbar.java',
     'toolbar/BrowserToolbarNewTablet.java',
     'toolbar/BrowserToolbarPhone.java',
     'toolbar/BrowserToolbarPhoneBase.java',
     'toolbar/BrowserToolbarPreHC.java',
     'toolbar/BrowserToolbarTablet.java',
--- 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
@@ -19,17 +19,17 @@
                android:focusable="false"
                android:background="@drawable/url_bar_entry"/>
 
     <org.mozilla.gecko.toolbar.ForwardButton style="@style/UrlBar.ImageButton.Forward.NewTablet"
                                              android:id="@+id/forward"
                                              android:layout_alignLeft="@id/back"/>
 
     <org.mozilla.gecko.toolbar.BackButton android:id="@id/back"
-                                          style="@style/UrlBar.ImageButton"
+                                          style="@style/UrlBar.ImageButton.NewTablet"
                                           android:layout_width="@dimen/back_button_width"
                                           android:layout_height="@dimen/back_button_width"
                                           android:layout_centerVertical="true"
                                           android:layout_marginLeft="12dp"
                                           android:layout_alignParentLeft="true"
                                           android:src="@drawable/new_tablet_ic_menu_back"
                                           android:contentDescription="@string/back"
                                           android:background="@drawable/url_bar_nav_button"/>
@@ -56,42 +56,45 @@
                   android:layout_height="match_parent"
                   android:gravity="center_vertical"
                   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"
+            style="@style/UrlBar.ImageButton.NewTablet"
             android:layout_toLeftOf="@id/menu"
             android:background="@drawable/action_bar_button"/>
 
-    <!-- In a 56dp space, centering 24dp image will leave 16dp on the horizontal sides. -->
+    <!-- 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"
-                        android:layout_margin="16dp"
+                        android:layout_marginTop="18dp"
+                        android:layout_marginBottom="18dp"
+                        android:layout_marginLeft="16dp"
+                        android:layout_marginRight="16dp"
                         gecko:layout="@layout/new_tablet_tabs_counter"/>
 
     <org.mozilla.gecko.widget.ThemedImageButton
             android:id="@+id/menu"
-            style="@style/UrlBar.ImageButton"
+            style="@style/UrlBar.ImageButton.NewTablet"
             android:layout_alignParentRight="true"
             android:layout_marginRight="6dp"
             android:contentDescription="@string/menu"
             android:background="@drawable/action_bar_button"
             android:visibility="gone"/>
 
     <org.mozilla.gecko.widget.ThemedImageView
             android:id="@+id/menu_icon"
-            style="@style/UrlBar.ImageButton"
+            style="@style/UrlBar.ImageButton.NewTablet"
             android:layout_alignLeft="@id/menu"
             android:layout_alignRight="@id/menu"
             android:src="@drawable/new_tablet_menu"
             android:visibility="gone"/>
 
     <!-- We draw after the menu items so when they are hidden, the cancel button,
          which is thus drawn on top, may be pressed. -->
     <org.mozilla.gecko.widget.ThemedImageView
--- a/mobile/android/base/resources/layout/gecko_app.xml
+++ b/mobile/android/base/resources/layout/gecko_app.xml
@@ -82,17 +82,17 @@
 
             <ViewStub android:id="@+id/new_tablet_tab_strip"
                       android:inflatedId="@id/new_tablet_tab_strip"
                       android:layout="@layout/new_tablet_tab_strip"
                       android:layout_width="match_parent"
                       android:layout_height="@dimen/new_tablet_tab_strip_height"
                       android:visibility="gone"/>
 
-            <org.mozilla.gecko.widget.GeckoViewFlipper
+            <org.mozilla.gecko.toolbar.ActionBarViewFlipper
                 android:id="@+id/browser_actionbar"
                 android:layout_width="match_parent"
                 android:layout_height="@dimen/browser_toolbar_height"
                 android:clickable="true"
                 android:focusable="true">
 
                 <org.mozilla.gecko.toolbar.BrowserToolbar
                     android:id="@+id/browser_toolbar"
@@ -103,17 +103,17 @@
                     android:focusable="true"
                     android:background="@drawable/url_bar_bg"/>
 
                 <org.mozilla.gecko.ActionModeCompatView android:id="@+id/actionbar"
                                                         android:layout_height="match_parent"
                                                         android:layout_width="match_parent"
                                                         style="@style/GeckoActionBar"/>
 
-            </org.mozilla.gecko.widget.GeckoViewFlipper>
+            </org.mozilla.gecko.toolbar.ActionBarViewFlipper>
 
         </LinearLayout>
 
         <org.mozilla.gecko.toolbar.ToolbarProgressView android:id="@+id/progress"
                                                        android:layout_width="match_parent"
                                                        android:layout_height="14dp"
                                                        android:layout_marginTop="-8dp"
                                                        android:layout_below="@id/browser_chrome"
--- a/mobile/android/base/resources/values-large-v11/styles.xml
+++ b/mobile/android/base/resources/values-large-v11/styles.xml
@@ -1,15 +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/. -->
 
 <resources>
 
+    <style name="UrlBar.ImageButton.NewTablet">
+        <item name="android:layout_width">@dimen/new_tablet_browser_toolbar_menu_item_width</item>
+    </style>
+
     <style name="UrlBar.ImageButton.Forward">
         <item name="android:contentDescription">@string/forward</item>
         <item name="android:layout_width">45dip</item>
         <item name="android:layout_height">37dip</item>
         <item name="android:paddingLeft">10dp</item>
         <item name="android:paddingTop">7dp</item>
         <item name="android:paddingBottom">7dp</item>
         <item name="android:layout_gravity">center_vertical</item>
@@ -28,16 +32,19 @@
         <item name="android:paddingBottom">0dp</item>
         <item name="android:layout_marginTop">11.5dp</item>
         <item name="android:layout_marginBottom">11.5dp</item>
         <item name="android:src">@drawable/new_tablet_ic_menu_forward</item>
     </style>
 
     <style name="UrlBar.ImageButton.TabCount.NewTablet">
         <item name="android:background">@drawable/new_tablet_tabs_count</item>
+
+        <!-- From UrlBar.ImageButton.NewTablet because we can't inherit directly. -->
+        <item name="android:layout_width">@dimen/new_tablet_browser_toolbar_menu_item_width</item>
     </style>
 
     <style name="UrlBar.Button.Container">
         <item name="android:layout_marginTop">6dp</item>
         <item name="android:layout_marginBottom">6dp</item>
         <!-- Start with forward hidden -->
         <item name="android:orientation">horizontal</item>
     </style>
@@ -60,26 +67,35 @@
 
         <!-- Same as pre-19 Toast style, but with no left and right margins.
              They're removed since large tablets are never going to be only 400dp wide. -->
     </style>
 
     <style name="Widget.MenuItemActionBar">
         <item name="android:layout_width">@dimen/browser_toolbar_height</item>
         <item name="android:layout_height">@dimen/browser_toolbar_height</item>
-        <item name="android:padding">@dimen/browser_toolbar_button_padding</item>
         <item name="android:background">@drawable/action_bar_button</item>
         <item name="android:scaleType">fitCenter</item>
+
+        <!-- We split up padding* because we can't override it in *.NewTablet otherwise. -->
+        <item name="android:paddingTop">@dimen/browser_toolbar_button_padding</item>
+        <item name="android:paddingBottom">@dimen/browser_toolbar_button_padding</item>
+        <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:padding">@dimen/new_tablet_browser_toolbar_menu_item_padding</item>
         <item name="android:scaleType">center</item>
+
+        <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>
     </style>
 
     <style name="Widget.TopSitesGridView" parent="Widget.GridView">
         <item name="android:paddingLeft">5dp</item>
--- a/mobile/android/base/resources/values/dimens.xml
+++ b/mobile/android/base/resources/values/dimens.xml
@@ -17,17 +17,21 @@
     <dimen name="browser_toolbar_favicon_size">21.33dip</dimen>
     <dimen name="browser_toolbar_shadow_size">2dp</dimen>
 
     <dimen name="new_tablet_tab_strip_height">48dp</dimen>
     <dimen name="new_tablet_tab_strip_item_width">250dp</dimen>
     <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_menu_item_padding">19dp</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="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
new file mode 100644
--- /dev/null
+++ b/mobile/android/base/toolbar/ActionBarViewFlipper.java
@@ -0,0 +1,36 @@
+/* -*- Mode: Java; c-basic-offset: 4; tab-width: 4; indent-tabs-mode: nil; -*-
+ * 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/. */
+
+package org.mozilla.gecko.toolbar;
+
+import org.mozilla.gecko.NewTabletUI;
+import org.mozilla.gecko.R;
+import org.mozilla.gecko.widget.GeckoViewFlipper;
+
+import android.content.Context;
+import android.util.AttributeSet;
+import android.view.ViewGroup;
+
+//TODO: (bug 1058909) Remove this class when old tablet is removed.
+/**
+ * A temporary view that sets its height based on whether we are on new tablet or not.
+ * Note that this view should be removed when the old tablet is removed and replaced with using
+ * browser_toolbar_height directly.
+ */
+public class ActionBarViewFlipper extends GeckoViewFlipper {
+
+    public ActionBarViewFlipper(final Context context, final AttributeSet attrs) {
+        super(context, attrs);
+    }
+
+    @Override
+    public void onAttachedToWindow() {
+        if (NewTabletUI.isEnabled(getContext())) {
+            final ViewGroup.LayoutParams lp = getLayoutParams();
+            lp.height = getResources().getDimensionPixelSize(R.dimen.new_tablet_browser_toolbar_height);
+            setLayoutParams(lp);
+        }
+    }
+}