Bug 1064415 - Tabs tray/grid/panel interactions and visual design (r=lucasr)

mobile/android/base/newtablet/res/color-large-v11/new_tablet_tab_item_title.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <item android:state_checked="true"
+          android:color="@color/text_color_primary_inverse"/>
+
+    <item android:state_pressed="true"
+          android:color="@color/text_color_primary_inverse"/>
+
+    <item android:color="@color/new_tablet_tab_grid_text_unselected"/>
+
+</selector>

mobile/android/base/newtablet/res/drawable-large-v11/new_tablet_tab_item_close_button.xml

@@ -0,0 +1,18 @@
+<?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">
+
+    <!-- pressed state -->
+    <item android:state_pressed="true"
+          android:drawable="@drawable/new_tablet_tab_close_active"/>
+
+    <item android:state_checked="true"
+          android:drawable="@drawable/new_tablet_tab_close_active"/>
+
+    <!-- normal mode -->
+    <item android:drawable="@drawable/new_tablet_tab_close"/>
+
+</selector>

mobile/android/base/resources/layout/new_tablet_tabs_item_cell.xml

@@ -9,26 +9,25 @@
                                            android:id="@+id/info"
                                            android:layout_width="wrap_content"
                                            android:layout_height="wrap_content"
-                                           android:paddingTop="6dip"
-                                           android:paddingBottom="6dip"
-                                           android:paddingLeft="1dip"
-                                           android:paddingRight="1dip"
                                            android:gravity="center"
-                                           android:orientation="vertical">
+                                           android:orientation="vertical"
+                                           android:paddingBottom="@dimen/new_tablet_tab_panel_grid_padding">
 
-    <LinearLayout android:layout_width="@dimen/new_tablet_tab_thumbnail_width"
+    <LinearLayout android:layout_width="fill_parent"
                   android:layout_height="wrap_content"
                   android:orientation="horizontal"
-                  android:padding="3dip">
+                  android:duplicateParentState="true"
+                  android:paddingLeft="@dimen/new_tablet_tab_highlight_stroke_width"
+                  android:paddingRight="@dimen/new_tablet_tab_highlight_stroke_width"
+                  android:paddingBottom="@dimen/new_tablet_tab_highlight_stroke_width">
 
         <TextView android:id="@+id/title"
                   android:layout_width="0dip"
                   android:layout_height="wrap_content"
                   android:layout_weight="1.0"
-                  android:paddingTop="4dip"
                   style="@style/TabLayoutItemTextAppearance"
-                  android:textSize="12sp"
-                  android:textColor="#FFFFFFFF"
+                  android:textSize="14sp"
+                  android:textColor="@color/new_tablet_tab_item_title"
                   android:singleLine="true"
                   android:duplicateParentState="true"/>
 
@@ -36,16 +35,17 @@
                      style="@style/TabsItemClose"
                      android:layout_width="wrap_content"
                      android:layout_height="match_parent"
-                     android:background="@drawable/action_bar_button_inverse"
                      android:scaleType="center"
+                     android:background="@android:color/transparent"
                      android:contentDescription="@string/close_tab"
-                     android:src="@drawable/new_tablet_tab_close"/>
+                     android:src="@drawable/new_tablet_tab_item_close_button"
+                     android:duplicateParentState="true"/>
 
     </LinearLayout>
 
     <RelativeLayout android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
-                    android:padding="3dp"
+                    android:padding="@dimen/new_tablet_tab_highlight_stroke_width"
                     android:background="@drawable/tab_thumbnail"
                     android:duplicateParentState="true">
 

mobile/android/base/resources/values/colors.xml

@@ -152,4 +152,8 @@
   <color name="top_site_default">#FFECF0F3</color>
   <color name="top_site_border">#FFCFD9E1</color>
 
+  <!-- Tab grid text highlight colour -->
+  <color name="new_tablet_tab_grid_text_unselected">#FFAFB1B3</color>
+
+
 </resources>

mobile/android/base/resources/values/dimens.xml

@@ -128,9 +128,13 @@
     <dimen name="history_tab_indicator_height">50dp</dimen>
 
 
-    <dimen name="new_tablet_tab_thumbnail_height">180dp</dimen>
-    <dimen name="new_tablet_tab_thumbnail_width">180dp</dimen>
-    <dimen name="new_tablet_tab_panel_grid_padding">24dp</dimen>
+    <dimen name="new_tablet_tab_thumbnail_width">168dp</dimen>
+    <dimen name="new_tablet_tab_thumbnail_height">140dp</dimen>
+    <dimen name="new_tablet_tab_panel_column_width">178dp</dimen>
+    <dimen name="new_tablet_tab_panel_grid_padding">19dp</dimen>
+    <dimen name="new_tablet_tab_panel_grid_padding_top">24dp</dimen>
+
+    <dimen name="new_tablet_tab_highlight_stroke_width">5dp</dimen>
 
     <!-- PageActionButtons dimensions -->
     <dimen name="page_action_button_width">32dp</dimen>

mobile/android/base/tabs/TabsGridLayout.java

@@ -68,11 +68,12 @@ class TabsGridLayout extends GridView
         setNumColumns(GridView.AUTO_FIT);
 
         final Resources resources = getResources();
-        final int columnWidth = resources.getDimensionPixelSize(R.dimen.new_tablet_tab_thumbnail_width);
+        final int columnWidth = resources.getDimensionPixelSize(R.dimen.new_tablet_tab_panel_column_width);
         setColumnWidth(columnWidth);
 
         final int padding = resources.getDimensionPixelSize(R.dimen.new_tablet_tab_panel_grid_padding);
-        setPadding(padding, 0, padding, 0);
+        final int paddingTop = resources.getDimensionPixelSize(R.dimen.new_tablet_tab_panel_grid_padding_top);
+        setPadding(padding, paddingTop, padding, padding);
     }
 
     private class TabsGridLayoutAdapter extends TabsLayoutAdapter {

mobile/android/base/tabs/TabsLayoutItemView.java

@@ -15,6 +15,7 @@ import android.view.View;
 import android.widget.Checkable;
 import android.widget.ImageButton;
 import android.widget.ImageView;
+import android.widget.ImageView.ScaleType;
 import android.widget.LinearLayout;
 import android.widget.TextView;
 
@@ -95,7 +96,7 @@ public class TabsLayoutItemView extends LinearLayout
 
         Drawable thumbnailImage = tab.getThumbnail();
         if (thumbnailImage != null) {
-            mThumbnail.setImageDrawable(thumbnailImage);
+            setThumbnail(thumbnailImage);
         } else {
             mThumbnail.setImageResource(R.drawable.tab_thumbnail_default);
         }