New tab rendering

    Rendering tabs from a fixed background asset

Change-Id: Ic02ed0c059486c2bb8157f19012f98099bf7e75a

17 files changed, 183 insertions, 29 deletions

diff --git a/res/drawable-hdpi/browsertab_add.png b/res/drawable-hdpi/browsertab_add.png
new file mode 100644
index 0000000..a48b0f8
--- /dev/null
+++ b/res/drawable-hdpi/browsertab_add.png
diff --git a/res/drawable-hdpi/ic_menu_new_window.png b/res/drawable-hdpi/ic_menu_new_window.png
index fa544fc..fd85bb7 100644
--- a/res/drawable-hdpi/ic_menu_new_window.png
+++ b/res/drawable-hdpi/ic_menu_new_window.png
diff --git a/res/drawable-mdpi/bg_browsertabs.png b/res/drawable-mdpi/bg_browsertabs.png
new file mode 100644
index 0000000..9d0ff07
--- /dev/null
+++ b/res/drawable-mdpi/bg_browsertabs.png
diff --git a/res/drawable-mdpi/browsertab_add.png b/res/drawable-mdpi/browsertab_add.png
new file mode 100644
index 0000000..cb12775
--- /dev/null
+++ b/res/drawable-mdpi/browsertab_add.png
diff --git a/res/drawable-mdpi/browsertab_inactive.png b/res/drawable-mdpi/browsertab_inactive.png
new file mode 100644
index 0000000..d441604
--- /dev/null
+++ b/res/drawable-mdpi/browsertab_inactive.png
diff --git a/res/drawable-mdpi/ic_menu_new_window.png b/res/drawable-mdpi/ic_menu_new_window.png
index c767979..c495162 100644
--- a/res/drawable-mdpi/ic_menu_new_window.png
+++ b/res/drawable-mdpi/ic_menu_new_window.png
diff --git a/res/drawable-mdpi/ic_tab_close.png b/res/drawable-mdpi/ic_tab_close.png
index 2f23842..b86c714 100644
--- a/res/drawable-mdpi/ic_tab_close.png
+++ b/res/drawable-mdpi/ic_tab_close.png
diff --git a/res/drawable-nodpi/bg_urlbar.png b/res/drawable-nodpi/bg_urlbar.png
new file mode 100644
index 0000000..ff173c4
--- /dev/null
+++ b/res/drawable-nodpi/bg_urlbar.png
diff --git a/res/layout/tab_bar.xml b/res/layout/tab_bar.xml
index 2726055..e8f146c 100644
--- a/res/layout/tab_bar.xml
+++ b/res/layout/tab_bar.xml
@@ -14,20 +14,24 @@
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:id="@+id/tabbarcontent"
     android:layout_width="match_parent"
-    android:layout_height="48dip"
+    android:layout_height="56dip"
     android:orientation="horizontal"
+    android:paddingLeft="12dip"
+    android:paddingTop="12dip"
+    android:paddingRight="0dip"
+    android:paddingBottom="0dip"
     style="@style/ActionBarStyle"
     >
     <com.android.browser.TabScrollView
         android:id="@+id/tabs"
         android:layout_width="wrap_content"
-        android:layout_height="match_parent"
+        android:layout_height="44dip"
         android:orientation="horizontal" />
     <ImageButton
         android:id="@+id/newtab"
         android:src="@drawable/ic_menu_new_window"
         android:layout_width="wrap_content"
-        android:layout_height="match_parent"
+        android:layout_height="44dip"
         style="@style/HoloButton"
-        android:background="@drawable/browserbarbutton" />
+        android:background="@drawable/browsertab_add" />
 </merge>
\ No newline at end of file
diff --git a/res/layout/tab_title.xml b/res/layout/tab_title.xml
index a2da03d..e4a4e58 100644
--- a/res/layout/tab_title.xml
+++ b/res/layout/tab_title.xml
@@ -15,8 +15,7 @@
     android:layout_width="wrap_content"
     android:layout_height="match_parent"
     android:gravity="center_vertical"
-    android:orientation="horizontal"
-    android:background="@drawable/tab_background">
+    android:orientation="horizontal">
     <ImageView
         android:id="@+id/incognito"
         android:layout_width="16dip"
@@ -56,6 +55,5 @@
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_marginLeft="16dip"
-        android:layout_marginRight="16dip"
         android:src="@drawable/ic_tab_close" />
 </merge>
diff --git a/res/layout/url_bar.xml b/res/layout/url_bar.xml
index f695ae3..3636ca8 100644
--- a/res/layout/url_bar.xml
+++ b/res/layout/url_bar.xml
@@ -21,7 +21,7 @@
         android:layout_width="match_parent"
         android:layout_height="48dip"
         android:orientation="horizontal"
-        android:background="@drawable/urlbar_bg">
+        android:background="@drawable/bg_urlbar">
         <ImageButton
             android:id="@+id/back"
             android:src="@drawable/ic_back_normal"
diff --git a/res/values-xlarge/styles.xml b/res/values-xlarge/styles.xml
index 952d97a..d87a347 100644
--- a/res/values-xlarge/styles.xml
+++ b/res/values-xlarge/styles.xml
@@ -43,9 +43,8 @@
     <style name="ShortCutTheme" parent="@android:Theme.Holo">
     </style>
     <style name="ActionBarStyle">
-        <item name="android:height">48dip</item>
-        <item name="android:padding">0dip</item>
-        <item name="android:background">@drawable/tabbar_bg</item>
+        <item name="android:height">56dip</item>
+        <item name="android:background">@drawable/bg_browsertabs</item>
         <item name="android:displayOptions"></item>
     </style>
     <style name="ActionButton">
diff --git a/res/values/dimensions.xml b/res/values/dimensions.xml
index d51ab33..7cfa3f6 100644
--- a/res/values/dimensions.xml
+++ b/res/values/dimensions.xml
@@ -13,12 +13,14 @@
 <resources
     xmlns:xliff="urn:oasis:names:tc:xliff:document:1.2">
     <!-- The width of a selected tab -->
-    <dimen
-        name="tab_width_selected">300dp</dimen>
+    <dimen name="tab_width_selected">280dp</dimen>
     <!-- The width of an unselected tab -->
-    <dimen
-        name="tab_width_unselected">300dp</dimen>
-
+    <dimen name="tab_width_unselected">240dp</dimen>
+    <dimen name="tab_height">44dp</dimen>
+    <dimen name="tab_overlap">8dp</dimen>
+    <dimen name="tab_slice">18dp</dimen>
+    <dimen name="tab_padding">16dp</dimen>
+    <dimen name="max_tab_width">300dp</dimen>
     <dimen name="bookmarkThumbnailWidth">90dip</dimen>
     <dimen name="bookmarkThumbnailHeight">80dip</dimen>
     <dimen name="add_bookmark_width">500dip</dimen>
diff --git a/res/values/integers.xml b/res/values/integers.xml
index 2864d47..e18676d 100644
--- a/res/values/integers.xml
+++ b/res/values/integers.xml
@@ -19,7 +19,7 @@
     <!--  The maximum number of open tabs -->
     <integer name="max_tabs">16</integer>
     <!--  The duration of the tab animations in millisecs  -->
-    <integer name="tab_animation_duration">500</integer>
+    <integer name="tab_animation_duration">200</integer>
     <integer name="max_width_crumb">200</integer>
     <!-- The maximum number of most visited URLs in the history tab -->
     <integer name="most_visits_limit">10</integer>
diff --git a/src/com/android/browser/BaseUi.java b/src/com/android/browser/BaseUi.java
index b7c5a82..4fca79d 100644
--- a/src/com/android/browser/BaseUi.java
+++ b/src/com/android/browser/BaseUi.java
@@ -508,6 +508,13 @@ public class BaseUi implements UI, WebViewFactory {
         mContentView.addView(container, COVER_SCREEN_PARAMS);
     }
 
+    int getTitleBarWidth() {
+        if (mTitleBar != null) {
+            return mTitleBar.getWidth();
+        }
+        return 0;
+    }
+
     void showFakeTitleBar() {
         if (!isFakeTitleBarShowing() && mActiveTabsPage == null &&
                 !mActivityPaused) {
diff --git a/src/com/android/browser/TabBar.java b/src/com/android/browser/TabBar.java
index 14b1845..4f179b0 100644
--- a/src/com/android/browser/TabBar.java
+++ b/src/com/android/browser/TabBar.java
@@ -22,7 +22,13 @@ import android.app.Activity;
 import android.content.Context;
 import android.content.res.Resources;
 import android.graphics.Bitmap;
+import android.graphics.BitmapShader;
+import android.graphics.Canvas;
 import android.graphics.Color;
+import android.graphics.LinearGradient;
+import android.graphics.Paint;
+import android.graphics.Path;
+import android.graphics.Shader;
 import android.graphics.drawable.BitmapDrawable;
 import android.graphics.drawable.Drawable;
 import android.graphics.drawable.LayerDrawable;
@@ -74,6 +80,17 @@ public class TabBar extends LinearLayout
     private Drawable mGenericFavicon;
     private String mLoadingText;
 
+    private Drawable mActiveDrawable;
+    private Drawable mInactiveDrawable;
+
+    private Bitmap mShaderBuffer;
+    private Canvas mShaderCanvas;
+    private Paint mShaderPaint;
+    private int mTabHeight;
+    private int mTabOverlap;
+    private int mTabSliceWidth;
+    private int mTabPadding;
+
     public TabBar(Activity activity, UiController controller, BaseUi ui) {
         super(activity);
         mActivity = activity;
@@ -83,16 +100,20 @@ public class TabBar extends LinearLayout
         Resources res = activity.getResources();
         mTabWidthSelected = (int) res.getDimension(R.dimen.tab_width_selected);
         mTabWidthUnselected = (int) res.getDimension(R.dimen.tab_width_unselected);
+        mActiveDrawable = res.getDrawable(R.drawable.bg_urlbar);
+        mInactiveDrawable = res.getDrawable(R.drawable.browsertab_inactive);
 
         mTabMap = new HashMap<Tab, TabViewData>();
         Resources resources = activity.getResources();
         LayoutInflater factory = LayoutInflater.from(activity);
         factory.inflate(R.layout.tab_bar, this);
+        setPadding(12, 12, 0, 0);
         mTabs = (TabScrollView) findViewById(R.id.tabs);
         mNewTab = (ImageButton) findViewById(R.id.newtab);
         mNewTab.setOnClickListener(this);
         mGenericFavicon = res.getDrawable(R.drawable.app_web_browser_sm);
         mLoadingText = res.getString(R.string.title_bar_loading);
+        setChildrenDrawingOrderEnabled(true);
 
         // TODO: Change enabled states based on whether you can go
         // back/forward.  Probably should be done inside onPageStarted.
@@ -102,6 +123,22 @@ public class TabBar extends LinearLayout
         mUserRequestedUrlbar = false;
         mTitleVisible = true;
         mButtonWidth = -1;
+        // tab dimensions
+        mTabHeight = (int) res.getDimension(R.dimen.tab_height);
+        mTabOverlap = (int) res.getDimension(R.dimen.tab_overlap);
+        mTabSliceWidth = (int) res.getDimension(R.dimen.tab_slice);
+        mTabPadding = (int) res.getDimension(R.dimen.tab_padding);
+        int maxTabWidth = (int) res.getDimension(R.dimen.max_tab_width);
+        // shader initialization
+        mShaderBuffer = Bitmap.createBitmap(maxTabWidth, mTabHeight,
+                Bitmap.Config.ARGB_8888);
+        mShaderCanvas = new Canvas(mShaderBuffer);
+        mShaderPaint = new Paint();
+        BitmapShader shader = new BitmapShader(mShaderBuffer,
+                Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
+        mShaderPaint.setShader(shader);
+        mShaderPaint.setStyle(Paint.Style.FILL);
+        mShaderPaint.setAntiAlias(true);
     }
 
     void updateTabs(List<Tab> tabs) {
@@ -115,17 +152,31 @@ public class TabBar extends LinearLayout
     }
 
     @Override
+    protected void onMeasure(int hspec, int vspec) {
+        super.onMeasure(hspec, vspec);
+        int w = getMeasuredWidth();
+        // adjust for new tab overlap
+        w -= mTabOverlap;
+        setMeasuredDimension(w, getMeasuredHeight());
+    }
+
+    @Override
     protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
+        // use paddingLeft and paddingTop
+        int pl = getPaddingLeft();
+        int pt = getPaddingTop();
         if (mButtonWidth == -1) {
-            mButtonWidth = mNewTab.getMeasuredWidth();
+            mButtonWidth = mNewTab.getMeasuredWidth() - mTabOverlap;
         }
         int sw = mTabs.getMeasuredWidth();
-        int w = right-left;
+        int w = right - left - pl;
         if (w-sw < mButtonWidth) {
             sw = w - mButtonWidth;
         }
-        mTabs.layout(0, 0, sw, bottom-top );
-        mNewTab.layout(sw, 0, sw+mButtonWidth, bottom-top);
+        mTabs.layout(pl, pt, pl + sw, bottom - top);
+        // adjust for overlap
+        mNewTab.layout(pl + sw - mTabOverlap, pt,
+                pl + sw + mButtonWidth - mTabOverlap, bottom - top);
     }
 
     public void onClick(View view) {
@@ -212,6 +263,12 @@ public class TabBar extends LinearLayout
         return tv;
     }
 
+    @Override
+    protected int getChildDrawingOrder(int count, int i) {
+        // reverse
+        return count - 1 - i;
+    }
+
     /**
      * View used in the tab bar
      */
@@ -226,16 +283,21 @@ public class TabBar extends LinearLayout
         ImageView mClose;
         boolean mSelected;
         boolean mInLoad;
+        Path mPath;
+        int[] mWindowPos;
 
         /**
          * @param context
          */
         public TabView(Context context, TabViewData tab) {
             super(context);
+            setWillNotDraw(false);
+            mPath = new Path();
+            mWindowPos = new int[2];
             mTabData = tab;
             setGravity(Gravity.CENTER_VERTICAL);
             setOrientation(LinearLayout.HORIZONTAL);
-            setBackgroundResource(R.drawable.tab_background);
+            setPadding(0, 0, mTabPadding, 0);
             LayoutInflater inflater = LayoutInflater.from(getContext());
             mTabContent = inflater.inflate(R.layout.tab_title, this, true);
             mTitle = (TextView) mTabContent.findViewById(R.id.title);
@@ -286,11 +348,11 @@ public class TabBar extends LinearLayout
             mTitle.setTextAppearance(mActivity, mSelected ?
                     R.style.TabTitleSelected : R.style.TabTitleUnselected);
             setHorizontalFadingEdgeEnabled(!mSelected);
-            setFadingEdgeLength(50);
             super.setActivated(selected);
-            setLayoutParams(new LayoutParams(selected ?
-                    mTabWidthSelected : mTabWidthUnselected,
-                    LayoutParams.MATCH_PARENT));
+            LayoutParams lp = (LinearLayout.LayoutParams) getLayoutParams();
+            lp.width = selected ? mTabWidthSelected : mTabWidthUnselected;
+            lp.height =  LayoutParams.MATCH_PARENT;
+            setLayoutParams(lp);
         }
 
         void setDisplayTitle(String title) {
@@ -328,6 +390,42 @@ public class TabBar extends LinearLayout
             }
         }
 
+        @Override
+        protected void onLayout(boolean changed, int l, int t, int r, int b) {
+            super.onLayout(changed, l, t, r, b);
+            setTabPath(mPath, 0, 0, r - l, b - t);
+        }
+
+        @Override
+        protected void dispatchDraw(Canvas canvas) {
+            int state = canvas.save();
+            int[] pos = new int[2];
+            getLocationInWindow(mWindowPos);
+            Drawable drawable = mSelected ? mActiveDrawable : mInactiveDrawable;
+            drawable.setBounds(0, 0, mUi.getTitleBarWidth(), getHeight());
+            drawClipped(canvas, drawable, mPath, mWindowPos[0]);
+            canvas.restoreToCount(state);
+            super.dispatchDraw(canvas);
+        }
+
+        private void drawClipped(Canvas canvas, Drawable drawable,
+                Path clipPath, int left) {
+            mShaderCanvas.drawColor(Color.TRANSPARENT);
+            mShaderCanvas.translate(-left, 0);
+            drawable.draw(mShaderCanvas);
+            canvas.drawPath(clipPath, mShaderPaint);
+            mShaderCanvas.translate(left, 0);
+        }
+
+        private void setTabPath(Path path, int l, int t, int r, int b) {
+            path.reset();
+            path.moveTo(l, b);
+            path.lineTo(l, t);
+            path.lineTo(r - mTabSliceWidth, t);
+            path.lineTo(r, b);
+            path.close();
+        }
+
     }
 
     /**
diff --git a/src/com/android/browser/TabScrollView.java b/src/com/android/browser/TabScrollView.java
index fbb40aa..04ed5a3 100644
--- a/src/com/android/browser/TabScrollView.java
+++ b/src/com/android/browser/TabScrollView.java
@@ -17,10 +17,8 @@
 package com.android.browser;
 
 import android.animation.Animator;
-import android.animation.Animator.AnimatorListener;
 import android.animation.AnimatorListenerAdapter;
 import android.animation.ObjectAnimator;
-import android.animation.PropertyValuesHolder;
 import android.content.Context;
 import android.graphics.Canvas;
 import android.graphics.drawable.Drawable;
@@ -41,6 +39,7 @@ public class TabScrollView extends HorizontalScrollView {
     private Drawable mArrowLeft;
     private Drawable mArrowRight;
     private int mAnimationDuration;
+    private int mTabOverlap;
 
     /**
      * @param context
@@ -73,8 +72,10 @@ public class TabScrollView extends HorizontalScrollView {
         mContext = ctx;
         mAnimationDuration = ctx.getResources().getInteger(
                 R.integer.tab_animation_duration);
+        mTabOverlap = (int) ctx.getResources().getDimension(R.dimen.tab_overlap);
         setHorizontalScrollBarEnabled(false);
-        mContentView = new LinearLayout(mContext);
+        setOverScrollMode(OVER_SCROLL_NEVER);
+        mContentView = new TabLayout(mContext);
         mContentView.setOrientation(LinearLayout.HORIZONTAL);
         mContentView.setLayoutParams(
                 new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT));
@@ -211,4 +212,49 @@ public class TabScrollView extends HorizontalScrollView {
         return getScrollX();
     }
 
+    class TabLayout extends LinearLayout {
+
+        public TabLayout(Context context) {
+            super(context);
+            setChildrenDrawingOrderEnabled(true);
+        }
+
+        @Override
+        protected void onMeasure(int hspec, int vspec) {
+            super.onMeasure(hspec, vspec);
+            int w = getMeasuredWidth();
+            w -= Math.max(0, mContentView.getChildCount() - 1) * mTabOverlap;
+            setMeasuredDimension(w, getMeasuredHeight());
+        }
+
+        @Override
+        protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
+            super.onLayout(changed, left, top, right, bottom);
+            if (getChildCount() > 1) {
+                int nextLeft = getChildAt(0).getRight() - mTabOverlap;
+                for (int i = 1; i < getChildCount(); i++) {
+                    View tab = getChildAt(i);
+                    int w = tab.getRight() - tab.getLeft();
+                    tab.layout(nextLeft, tab.getTop(), nextLeft + w, tab.getBottom());
+                    nextLeft += w - mTabOverlap;
+                }
+            }
+        }
+
+        @Override
+        protected int getChildDrawingOrder(int count, int i) {
+            int next = -1;
+            if ((i == (count - 1)) && (mSelected >= 0)) {
+                next = mSelected;
+            } else {
+                next = count - i - 1;
+                if (next <= mSelected) {
+                    next--;
+                }
+            }
+            return next;
+        }
+
+    }
+
 }