Bug 704864: New tabs tray with thumbnails [r=mfinkle]

mobile/android/base/GeckoApp.java

@@ -616,13 +616,18 @@ abstract public class GeckoApp
                 mLastTitle = lastHistoryEntry.mTitle;
                 Bitmap bitmap = mSoftwareLayerClient.getBitmap();
                 if (bitmap != null) {
-                    // Make a thumbnail for the given tab, if it's still selected
-                    if (tab == mThumbnailTab)
-                        mThumbnailTab.updateThumbnail(bitmap);
-
                     ByteArrayOutputStream bos = new ByteArrayOutputStream();
                     bitmap.compress(Bitmap.CompressFormat.PNG, 0, bos);
                     mLastScreen = bos.toByteArray();
+
+                    // Make a thumbnail for the given tab, if it's still selected
+                    // NOTE: bitmap is recycled in updateThumbnail
+                    if (tab == mThumbnailTab) {
+                        if (mThumbnailTab.getURL().equals("about:home"))
+                            mThumbnailTab.updateThumbnail(null);
+                        else
+                            mThumbnailTab.updateThumbnail(bitmap);
+                    }
                 } else {
                     mLastScreen = null;
                 }

mobile/android/base/Makefile.in

@@ -227,6 +227,11 @@ RES_ANIM = \
   res/anim/shrink_fade_out.xml \
   $(NULL)
 
+RES_DRAWABLE_NODPI = \
+  res/drawable-nodpi/tabs_tray_bg.png \
+  res/drawable-nodpi/tabs_tray_pressed_bg.png \
+  $(NULL)
+
 RES_DRAWABLE_MDPI_V8 = \
   res/drawable-mdpi-v8/abouthome_icon.png \
   res/drawable-mdpi-v8/abouthome_logo.png \
@@ -241,6 +246,11 @@ RES_DRAWABLE_MDPI_V8 = \
   res/drawable-mdpi-v8/ic_menu_reload.png \
   res/drawable-mdpi-v8/ic_menu_save_as_pdf.png \
   res/drawable-mdpi-v8/ic_menu_share.png \
+  res/drawable-mdpi-v8/tab_new.png \
+  res/drawable-mdpi-v8/tab_close.png \
+  res/drawable-mdpi-v8/tab_thumbnail_default.png \
+  res/drawable-mdpi-v8/tab_thumbnail_shadow.png \
+  res/drawable-mdpi-v8/tab_selected.png \
   res/drawable-mdpi-v8/tabs_normal.png \
   res/drawable-mdpi-v8/tabs_pressed.png \
   res/drawable-mdpi-v8/tabs_more.png \
@@ -268,6 +278,11 @@ RES_DRAWABLE_HDPI_V8 = \
   res/drawable-hdpi-v8/ic_menu_reload.png \
   res/drawable-hdpi-v8/ic_menu_save_as_pdf.png \
   res/drawable-hdpi-v8/ic_menu_share.png \
+  res/drawable-hdpi-v8/tab_new.png \
+  res/drawable-hdpi-v8/tab_close.png \
+  res/drawable-hdpi-v8/tab_thumbnail_default.png \
+  res/drawable-hdpi-v8/tab_thumbnail_shadow.png \
+  res/drawable-hdpi-v8/tab_selected.png \
   res/drawable-hdpi-v8/tabs_normal.png \
   res/drawable-hdpi-v8/tabs_pressed.png \
   res/drawable-hdpi-v8/tabs_more.png \
@@ -345,6 +360,11 @@ RES_DRAWABLE_XHDPI_V11 = \
   res/drawable-xhdpi-v11/ic_menu_reload.png \
   res/drawable-xhdpi-v11/ic_menu_save_as_pdf.png \
   res/drawable-xhdpi-v11/ic_menu_share.png \
+  res/drawable-xhdpi-v11/tab_new.png \
+  res/drawable-xhdpi-v11/tab_close.png \
+  res/drawable-xhdpi-v11/tab_thumbnail_default.png \
+  res/drawable-xhdpi-v11/tab_thumbnail_shadow.png \
+  res/drawable-xhdpi-v11/tab_selected.png \
   res/drawable-xhdpi-v11/tabs_normal.png \
   res/drawable-xhdpi-v11/tabs_pressed.png \
   res/drawable-xhdpi-v11/tabs_more.png \
@@ -404,11 +424,13 @@ MOZ_ANDROID_DRAWABLES += mobile/android/base/resources/drawable/abouthome_bg.png
                          mobile/android/base/resources/drawable/progress_spinner_18.png         \
                          mobile/android/base/resources/drawable/start.png                       \
                          mobile/android/base/resources/drawable/site_security_level.xml         \
-                         mobile/android/base/resources/drawable/tab_new.png                     \
-                         mobile/android/base/resources/drawable/tab_close.png                   \
                          mobile/android/base/resources/drawable/tabs_button.xml                 \
                          mobile/android/base/resources/drawable/tabs_level.xml                  \
-                         mobile/android/base/resources/drawable/tabs_tray_bg.9.png              \
+                         mobile/android/base/resources/drawable/tabs_tray_bg_repeat.xml         \
+                         mobile/android/base/resources/drawable/tabs_tray_pressed_bg_repeat.xml \
+                         mobile/android/base/resources/drawable/tabs_tray_close_button.xml      \
+                         mobile/android/base/resources/drawable/tabs_tray_list_divider.xml      \
+                         mobile/android/base/resources/drawable/tabs_tray_list_selector.xml     \
                          mobile/android/base/resources/drawable/checkerboard.png                \
                          mobile/android/base/resources/drawable/shadow.png                      \
                          $(NULL)
@@ -476,6 +498,10 @@ $(RES_ANIM): $(subst res/,$(srcdir)/resources/,$(RES_ANIM))
 	$(NSINSTALL) -D res/anim
 	$(NSINSTALL) $(srcdir)/resources/anim/* res/anim/
 
+$(RES_DRAWABLE_NODPI): $(subst res/,$(srcdir)/resources/,$(RES_DRAWABLE_NODPI))
+	$(NSINSTALL) -D res/drawable-nodpi
+	$(NSINSTALL) $(srcdir)/resources/drawable-nodpi/* res/drawable-nodpi/
+
 $(RES_DRAWABLE_MDPI_V8): $(subst res/,$(srcdir)/resources/,$(RES_DRAWABLE_MDPI_V8))
 	$(NSINSTALL) -D res/drawable-mdpi-v8
 	$(NSINSTALL) $(srcdir)/resources/drawable-mdpi-v8/* res/drawable-mdpi-v8/
@@ -508,10 +534,10 @@ $(RES_COLOR): $(subst res/,$(srcdir)/resources/,$(RES_COLOR))
 	$(NSINSTALL) -D res/color
 	$(NSINSTALL) $^  res/color
 
-R.java: $(MOZ_APP_ICON) $(RES_LAYOUT) $(RES_LAYOUT_V11) $(RES_DRAWABLE) $(RES_VALUES) $(RES_VALUES_V11) $(RES_XML) $(RES_ANIM) $(RES_DRAWABLE_MDPI_V8) $(RES_DRAWABLE_HDPI_V8) $(RES_DRAWABLE_MDPI_V9) $(RES_DRAWABLE_HDPI_V9) $(RES_DRAWABLE_MDPI_V11) $(RES_DRAWABLE_HDPI_V11) $(RES_DRAWABLE_XHDPI_V11) $(RES_COLOR) res/drawable/icon.png res/drawable-hdpi/icon.png res/values/strings.xml AndroidManifest.xml
+R.java: $(MOZ_APP_ICON) $(RES_LAYOUT) $(RES_LAYOUT_V11) $(RES_DRAWABLE) $(RES_VALUES) $(RES_VALUES_V11) $(RES_XML) $(RES_ANIM) $(RES_DRAWABLE_NODPI) $(RES_DRAWABLE_MDPI_V8) $(RES_DRAWABLE_HDPI_V8) $(RES_DRAWABLE_MDPI_V9) $(RES_DRAWABLE_HDPI_V9) $(RES_DRAWABLE_MDPI_V11) $(RES_DRAWABLE_HDPI_V11) $(RES_DRAWABLE_XHDPI_V11) $(RES_COLOR) res/drawable/icon.png res/drawable-hdpi/icon.png res/values/strings.xml AndroidManifest.xml
 	$(AAPT) package -f -M AndroidManifest.xml -I $(ANDROID_SDK)/android.jar -S res -J . --custom-package org.mozilla.gecko
 
-gecko.ap_: AndroidManifest.xml res/drawable/icon.png res/drawable-hdpi/icon.png $(RES_LAYOUT) $(RES_LAYOUT_V11) $(RES_DRAWABLE) $(RES_VALUES) $(RES_VALUES_V11) $(RES_XML) $(RES_ANIM) $(RES_DRAWABLE_MDPI_V8) $(RES_DRAWABLE_HDPI_V8) $(RES_DRAWABLE_MDPI_V9) $(RES_DRAWABLE_HDPI_V9) $(RES_DRAWABLE_MDPI_V11) $(RES_DRAWABLE_HDPI_V11) $(RES_DRAWABLE_XHDPI_V11) $(RES_COLOR) res/values/strings.xml FORCE
+gecko.ap_: AndroidManifest.xml res/drawable/icon.png res/drawable-hdpi/icon.png $(RES_LAYOUT) $(RES_LAYOUT_V11) $(RES_DRAWABLE) $(RES_VALUES) $(RES_VALUES_V11) $(RES_XML) $(RES_ANIM) $(RES_DRAWABLE_NODPI) $(RES_DRAWABLE_MDPI_V8) $(RES_DRAWABLE_HDPI_V8) $(RES_DRAWABLE_MDPI_V9) $(RES_DRAWABLE_HDPI_V9) $(RES_DRAWABLE_MDPI_V11) $(RES_DRAWABLE_HDPI_V11) $(RES_DRAWABLE_XHDPI_V11) $(RES_COLOR) res/values/strings.xml FORCE
 	$(AAPT) package -f -M AndroidManifest.xml -I $(ANDROID_SDK)/android.jar  -S res -F $@
 
 libs:: classes.dex package-name.txt

mobile/android/base/Tab.java

@@ -61,6 +61,7 @@ public class Tab {
     private static final int kThumbnailSize = 96;
 
     static int sMinDim = 0;
+    static float sDensity = 1;
     private int mId;
     private String mUrl;
     private String mTitle;
@@ -152,13 +153,18 @@ public class Tab {
                     DisplayMetrics metrics = new DisplayMetrics();
                     GeckoApp.mAppContext.getWindowManager().getDefaultDisplay().getMetrics(metrics);
                     sMinDim = Math.min(metrics.widthPixels, metrics.heightPixels);
+                    sDensity = metrics.density;
                 }
                 if (b != null) {
                     try {
                         Bitmap cropped = Bitmap.createBitmap(b, 0, 0, sMinDim, sMinDim);
                         Bitmap bitmap = Bitmap.createScaledBitmap(cropped, kThumbnailSize, kThumbnailSize, false);
+                        saveThumbnailToDB(new BitmapDrawable(bitmap));
+                        b.recycle();
+
+                        bitmap = Bitmap.createBitmap(cropped, 0, 0, (int) (138 * sDensity), (int) (78 * sDensity));
                         mThumbnail = new BitmapDrawable(bitmap);
-                        saveThumbnailToDB((BitmapDrawable) mThumbnail);
+                        cropped.recycle();
                     } catch (OutOfMemoryError oom) {
                         Log.e(LOGTAG, "Unable to create/scale bitmap", oom);
                         mThumbnail = null;

mobile/android/base/TabsTray.java

@@ -45,7 +45,6 @@ import android.content.Intent;
 import android.content.Context;
 import android.graphics.drawable.Drawable;
 import android.graphics.drawable.BitmapDrawable;
-import android.graphics.Typeface;
 import android.os.Bundle;
 import android.view.LayoutInflater;
 import android.view.View;
@@ -85,13 +84,6 @@ public class TabsTray extends Activity implements GeckoApp.OnTabsChangedListener
             }
         });
         
-        // Adding a native divider for the add-tab
-        LinearLayout lastDivider = new LinearLayout(this);
-        lastDivider.setOrientation(LinearLayout.HORIZONTAL);
-        lastDivider.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, mList.getDividerHeight()));
-        lastDivider.setBackgroundDrawable(mList.getDivider());
-        addTab.addView(lastDivider, 0);
-        
         LinearLayout container = (LinearLayout) findViewById(R.id.container);
         container.setOnClickListener(new Button.OnClickListener() {
             public void onClick(View v) {
@@ -211,19 +203,19 @@ public class TabsTray extends Activity implements GeckoApp.OnTabsChangedListener
             if (view == null || tab == null)
                 return;
 
-            ImageView favicon = (ImageView) view.findViewById(R.id.favicon);
+            ImageView thumbnail = (ImageView) view.findViewById(R.id.thumbnail);
 
-            Drawable faviconImage = tab.getFavicon();
-            if (faviconImage != null)
-                favicon.setImageDrawable(faviconImage);
+            Drawable thumbnailImage = tab.getThumbnail();
+            if (thumbnailImage != null)
+                thumbnail.setImageDrawable(thumbnailImage);
             else
-                favicon.setImageResource(R.drawable.favicon);
+                thumbnail.setImageResource(R.drawable.tab_thumbnail_default);
+
+            if (Tabs.getInstance().isSelectedTab(tab))
+                ((ImageView) view.findViewById(R.id.selected_indicator)).setVisibility(View.VISIBLE);
 
             TextView title = (TextView) view.findViewById(R.id.title);
             title.setText(tab.getDisplayTitle());
-
-            if (Tabs.getInstance().isSelectedTab(tab))
-                title.setTypeface(title.getTypeface(), Typeface.BOLD);
         }
 
         @Override    

mobile/android/base/resources/drawable/tabs_tray_bg_repeat.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
+        android:src="@drawable/tabs_tray_bg"
+        android:tileMode="repeat"/>

mobile/android/base/resources/drawable/tabs_tray_close_button.xml

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

mobile/android/base/resources/drawable/tabs_tray_list_divider.xml

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <item>
+
+        <shape android:shape="rectangle">
+             <size android:height="1dp"/>
+             <solid android:color="#4C5157"/>
+        </shape>
+
+    </item>
+
+    <item android:top="1dp">
+
+        <shape android:shape="rectangle">
+             <size android:height="1dp"/>
+             <solid android:color="#7A7E81"/>
+        </shape>
+
+    </item>
+
+</layer-list>

mobile/android/base/resources/drawable/tabs_tray_list_selector.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <item android:state_pressed="true" android:drawable="@drawable/tabs_tray_pressed_bg_repeat"/>
+    <item android:drawable="@drawable/tabs_tray_bg_repeat"/>
+
+</selector>

mobile/android/base/resources/drawable/tabs_tray_pressed_bg_repeat.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
+        android:src="@drawable/tabs_tray_pressed_bg"
+        android:tileMode="repeat"/>

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

@@ -2,36 +2,59 @@
 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                 android:id="@+id/info"
                 android:layout_width="fill_parent"
-                android:layout_height="48dip"
-                android:minHeight="48dip"
-                android:background="@android:drawable/list_selector_background">
+                android:layout_height="100dip"
+                android:minHeight="100dip"
+                android:background="@drawable/tabs_tray_list_selector">
 
-    <ImageView android:id="@+id/favicon"
-               android:layout_width="24dip"
-               android:layout_height="24dip"
-               android:layout_marginLeft="12dip"
-               android:layout_marginRight="8dip"
+    <ImageView android:id="@+id/thumbnail"
+               android:layout_width="138dip"
+               android:layout_height="78dip"
+               android:layout_marginLeft="35dip"
                android:layout_alignParentLeft="true"
                android:layout_centerVertical="true"
+               android:src="@drawable/tab_thumbnail_default"
                android:scaleType="fitCenter"/>
 
+    <ImageView android:id="@+id/shadow"
+               android:layout_width="140dip"
+               android:layout_height="80dip"
+               android:layout_marginLeft="34dip"
+               android:layout_alignParentLeft="true"
+               android:layout_centerVertical="true"
+               android:src="@drawable/tab_thumbnail_shadow"
+               android:scaleType="fitCenter"/>
+
+    <ImageView android:id="@+id/selected_indicator"
+               android:layout_width="18dip"
+               android:layout_height="54dip"
+               android:layout_alignLeft="@id/shadow"
+               android:layout_centerVertical="true"
+               android:src="@drawable/tab_selected"
+               android:scaleType="fitCenter"
+               android:visibility="gone"/>
+
     <TextView android:id="@+id/title"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
-              android:layout_toRightOf="@id/favicon"
-              android:layout_marginRight="48dip"
-              android:layout_centerVertical="true"
-              android:textAppearance="?android:attr/textAppearanceMediumInverse"
-              android:textColor="?android:attr/textColorPrimaryInverse"
-              android:singleLine="true"
-              android:ellipsize="middle"/>
+              android:layout_toRightOf="@id/thumbnail"
+              android:layout_margin="10dip"
+              android:textAppearance="?android:attr/textAppearanceSmall"
+              android:textColor="#E5F2FF"
+              android:singleLine="false"
+              android:maxLines="3"
+              android:ellipsize="middle"
+              android:shadowColor="#000000"
+              android:shadowRadius="1"
+              android:shadowDx="0"
+              android:shadowDy="1"/>
 
     <ImageButton android:id="@+id/close"
-                 android:layout_width="48dip"
-                 android:layout_height="48dip"
-                 android:layout_alignParentRight="true"
-                 android:background="@android:drawable/list_selector_background"
-                 android:padding="15dip"
+                 android:layout_width="34dip"
+                 android:layout_height="34dip"
+                 android:layout_alignParentLeft="true"
+                 android:layout_centerVertical="true"
+                 android:background="@drawable/tabs_tray_close_button"
+                 android:padding="10dip"
                  android:scaleType="centerInside"
                  android:src="@drawable/tab_close"/>
 

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

@@ -3,44 +3,33 @@
               android:id="@+id/container"
               android:layout_width="match_parent"
               android:layout_height="match_parent"
-              android:orientation="vertical"
-              android:paddingTop="40dip">
+              android:orientation="vertical">
 
      <LinearLayout android:layout_width="match_parent"
                    android:layout_height="wrap_content"
-                   android:background="@drawable/tabs_tray_bg"
-                   android:orientation="vertical">
+                   android:orientation="vertical"
+                   android:background="@drawable/tabs_tray_bg_repeat">
 
          <ListView android:id="@+id/list"
-                   style="@style/AwesomeBarList"/>
+                   style="@style/TabsList"
+                   android:divider="@drawable/tabs_tray_list_divider"/>
+
+         <LinearLayout android:layout_width="match_parent"
+                       android:layout_height="2dp"
+                       android:background="@drawable/tabs_tray_list_divider"/>
 
          <LinearLayout android:id="@+id/add_tab"
                        android:layout_width="match_parent"
-                       android:layout_height="48dip"
-                       android:orientation="vertical"
-                       android:background="@android:drawable/list_selector_background">
-
-                       <LinearLayout android:layout_width="match_parent"
-                                     android:layout_height="match_parent"
-                                     android:layout_weight="1"
+                       android:layout_height="50dip"
                        android:orientation="horizontal"
-                                     android:gravity="center">
+                       android:gravity="center|right"
+                       android:background="@drawable/tabs_tray_list_selector">
 
-                           <ImageView android:layout_width="32dip"
-                                      android:layout_height="32dip"
-                                      android:layout_marginRight="12dip"
+             <ImageView android:layout_width="20dip"
+                        android:layout_height="20dip"
+                        android:layout_marginRight="20dip"
                         android:src="@drawable/tab_new"/>
 
-                           <TextView android:layout_width="wrap_content"
-                                     android:layout_height="wrap_content"
-                                     android:textAppearance="?android:attr/textAppearanceMediumInverse"
-                                     android:textColor="?android:attr/textColorPrimaryInverse"
-                                     android:text="@string/new_tab"
-                                     android:singleLine="true"
-                                     android:ellipsize="middle"/>
-
-                       </LinearLayout>
-
          </LinearLayout>
 
      </LinearLayout>

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

@@ -61,4 +61,11 @@
         <item name="android:layout_height">fill_parent</item>
         <item name="android:layout_weight">1</item>
     </style>
+
+    <!-- Lists in TabsTray -->
+    <style name="TabsList" parent="android:style/Widget.ListView">
+        <item name="android:layout_width">match_parent</item>
+        <item name="android:layout_height">fill_parent</item>
+        <item name="android:layout_weight">1</item>
+    </style>
 </resources>