Bug 848719: TabsButton will have curve only one side. [r=mfinkle] [needs-clobber]
authorSriram Ramasubramanian <sriram@mozilla.com>
Thu, 14 Mar 2013 15:26:25 -0700
changeset 127764 841a0c51f991d1f02ef0f73c257f14024f8e874d
parent 127763 72e02f2e3521afdc9372bad99d4031c0557b9f2e
child 127765 052ef269b9c3e26b8bbed4892a832a3c718ec11a
push id24512
push userryanvm@gmail.com
push dateFri, 05 Apr 2013 20:13:49 +0000
treeherdermozilla-central@139b6ba547fa [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmfinkle
bugs848719
milestone23.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 848719: TabsButton will have curve only one side. [r=mfinkle] [needs-clobber]
mobile/android/base/AwesomeBar.java
mobile/android/base/BackButton.java
mobile/android/base/BrowserToolbar.java
mobile/android/base/GeckoViewsFactory.java
mobile/android/base/Makefile.in
mobile/android/base/MenuButton.java
mobile/android/base/ShapedButton.java
mobile/android/base/TabsButton.java
mobile/android/base/TabsPanel.java
mobile/android/base/resources/drawable-large-land-v11/tabs_button.xml
mobile/android/base/resources/drawable/menu_button.xml
mobile/android/base/resources/drawable/shaped_button.xml
mobile/android/base/resources/drawable/tabs_button.xml
mobile/android/base/resources/drawable/tabs_level.xml
mobile/android/base/resources/layout-land-v14/browser_toolbar.xml
mobile/android/base/resources/layout-land-v14/browser_toolbar_menu.xml
mobile/android/base/resources/layout-large-land-v11/tabs_panel.xml
mobile/android/base/resources/layout-large-v11/browser_toolbar_menu.xml
mobile/android/base/resources/layout-xlarge-v11/awesomebar_search.xml
mobile/android/base/resources/layout/browser_toolbar.xml
mobile/android/base/resources/layout/browser_toolbar_menu.xml
mobile/android/base/resources/layout/gecko_app.xml
mobile/android/base/resources/layout/tabs_panel.xml
mobile/android/base/resources/values/attrs.xml
mobile/android/base/resources/values/colors.xml
--- a/mobile/android/base/AwesomeBar.java
+++ b/mobile/android/base/AwesomeBar.java
@@ -131,17 +131,17 @@ public class AwesomeBar extends GeckoAct
 
         mTarget = intent.getStringExtra(TARGET_KEY);
         if (mTarget.equals(Target.CURRENT_TAB.name())) {
             Tab tab = Tabs.getInstance().getSelectedTab();
             if (tab != null && tab.isPrivate()) {
                 BrowserToolbarBackground mAddressBarBg = (BrowserToolbarBackground) findViewById(R.id.address_bar_bg);
                 mAddressBarBg.setPrivateMode(true);
 
-                TabsButton mTabs = (TabsButton) findViewById(R.id.dummy_tab);
+                ShapedButton mTabs = (ShapedButton) findViewById(R.id.dummy_tab);
                 if (mTabs != null)
                     mTabs.setPrivateMode(true);
 
                 mText.setPrivateMode(true);
             }
         }
         mAwesomeTabs.setTarget(mTarget);
 
--- a/mobile/android/base/BackButton.java
+++ b/mobile/android/base/BackButton.java
@@ -13,16 +13,17 @@ import android.graphics.Path;
 import android.graphics.PorterDuff.Mode;
 import android.graphics.Shader;
 import android.graphics.drawable.ColorDrawable;
 import android.graphics.drawable.Drawable;
 import android.graphics.drawable.StateListDrawable;
 import android.util.AttributeSet;
 
 public class BackButton extends ShapedButton { 
+    private Path mPath;
     private Path mBorderPath;
     private Paint mBorderPaint;
     private Paint mBorderPrivatePaint;
 
     public BackButton(Context context, AttributeSet attrs) {
         super(context, attrs);
 
         // Paint to draw the border.
--- a/mobile/android/base/BrowserToolbar.java
+++ b/mobile/android/base/BrowserToolbar.java
@@ -61,17 +61,17 @@ public class BrowserToolbar implements V
     private BrowserToolbarBackground mAddressBarBg;
     private View mAddressBarView;
     private BrowserToolbarBackground.CurveTowards mAddressBarBgCurveTowards;
     private int mAddressBarBgRightMargin;
     private GeckoTextView mTitle;
     private int mTitlePadding;
     private boolean mSiteSecurityVisible;
     private boolean mAnimateSiteSecurity;
-    private TabsButton mTabs;
+    private ShapedButton mTabs;
     private int mTabsPaneWidth;
     private ImageButton mBack;
     private ImageButton mForward;
     public ImageButton mFavicon;
     public ImageButton mStop;
     public ImageButton mSiteSecurity;
     public ImageButton mReader;
     private AnimationDrawable mProgressSpinner;
@@ -212,17 +212,17 @@ public class BrowserToolbar implements V
                     menu.findItem(R.id.copyurl).setVisible(false);
                     menu.findItem(R.id.share).setVisible(false);
                     menu.findItem(R.id.add_to_launcher).setVisible(false);
                     menu.findItem(R.id.subscribe).setVisible(false);
                 }
             }
         });
 
-        mTabs = (TabsButton) mLayout.findViewById(R.id.tabs);
+        mTabs = (ShapedButton) mLayout.findViewById(R.id.tabs);
         mTabs.setOnClickListener(new Button.OnClickListener() {
             @Override
             public void onClick(View v) {
                 toggleTabs();
             }
         });
         mTabs.setImageLevel(0);
 
@@ -901,31 +901,16 @@ public class BrowserToolbar implements V
             return;
         }
 
         mTabsCount.setText(String.valueOf(count));
         mTabs.setContentDescription((count > 1) ?
                                     mActivity.getString(R.string.num_tabs, count) :
                                     mActivity.getString(R.string.one_tab));
         mCount = count;
-        mHandler.postDelayed(new Runnable() {
-            @Override
-            public void run() {
-                GeckoTextView view = (GeckoTextView) mTabsCount.getCurrentView();
-                view.setSelected(true);
-            }
-        }, mDuration);
-
-        mHandler.postDelayed(new Runnable() {
-            @Override
-            public void run() {
-                GeckoTextView view = (GeckoTextView) mTabsCount.getCurrentView();
-                view.setSelected(false);
-            }
-        }, 2 * mDuration);
     }
 
     public void updateTabCount(int count) {
         mTabsCount.setCurrentText(String.valueOf(count));
         mTabs.setContentDescription((count > 1) ?
                                     mActivity.getString(R.string.num_tabs, count) :
                                     mActivity.getString(R.string.one_tab));
         mCount = count;
@@ -1000,49 +985,30 @@ public class BrowserToolbar implements V
     }
 
     public void adjustForTabsLayout(int width) {
         mTabsPaneWidth = width;
         adjustTabsAnimation(true);
     }
 
     public void updateTabs(boolean areTabsShown) {
-        if (areTabsShown) {
-            mTabs.getBackground().setLevel(TABS_EXPANDED);
-
-            if (!mActivity.hasTabsSideBar()) {
-                mTabs.setImageLevel(0);
-                mTabsCount.setVisibility(View.GONE);
-                mMenu.setImageLevel(TABS_EXPANDED);
-                mMenu.getBackground().setLevel(TABS_EXPANDED);
-            } else {
-                mTabs.setImageLevel(TABS_EXPANDED);
-            }
-        } else {
+        if (areTabsShown)
+            mTabs.setImageLevel(TABS_EXPANDED);
+        else
             mTabs.setImageLevel(TABS_CONTRACTED);
-            mTabs.getBackground().setLevel(TABS_CONTRACTED);
-
-            if (!mActivity.hasTabsSideBar()) {
-                mTabsCount.setVisibility(View.VISIBLE);
-                mMenu.setImageLevel(TABS_CONTRACTED);
-                mMenu.getBackground().setLevel(TABS_CONTRACTED);
-            }
-        }
 
         // A level change will not trigger onMeasure() for the tabs, where the path is created.
         // Manually requesting a layout to re-calculate the path.
         mTabs.requestLayout();
     }
 
     public void setIsSideBar(boolean isSideBar) {
-        mTabs.setIsSideBar(isSideBar);
-
         Resources resources = mActivity.getResources();
         mTabs.setImageDrawable(resources.getDrawable(R.drawable.tabs_level));
-        mTabs.setBackgroundDrawable(resources.getDrawable(R.drawable.tabs_button));
+        mTabs.setBackgroundDrawable(resources.getDrawable(R.drawable.shaped_button));
     }
 
     public void setProgressVisibility(boolean visible) {
         // The "Throbber start" and "Throbber stop" log messages in this method
         // are needed by S1/S2 tests (http://mrcote.info/phonedash/#).
         // See discussion in Bug 804457. Bug 805124 tracks paring these down.
         if (visible) {
             mFavicon.setImageDrawable(mProgressSpinner);
--- a/mobile/android/base/GeckoViewsFactory.java
+++ b/mobile/android/base/GeckoViewsFactory.java
@@ -60,20 +60,19 @@ public final class GeckoViewsFactory imp
             mFactoryMap.put("CheckableLinearLayout", CheckableLinearLayout.class.getConstructor(arg1Class, arg2Class));
             mFactoryMap.put("FormAssistPopup", FormAssistPopup.class.getConstructor(arg1Class, arg2Class));
             mFactoryMap.put("ForwardButton", ForwardButton.class.getConstructor(arg1Class, arg2Class));
             mFactoryMap.put("GeckoApp$MainLayout", GeckoApp.MainLayout.class.getConstructor(arg1Class, arg2Class));
             mFactoryMap.put("LinkTextView", LinkTextView.class.getConstructor(arg1Class, arg2Class));
             mFactoryMap.put("MenuItemDefault", MenuItemDefault.class.getConstructor(arg1Class, arg2Class));
             mFactoryMap.put("FindInPageBar", FindInPageBar.class.getConstructor(arg1Class, arg2Class));
             mFactoryMap.put("IconTabWidget", IconTabWidget.class.getConstructor(arg1Class, arg2Class));
-            mFactoryMap.put("MenuButton", MenuButton.class.getConstructor(arg1Class, arg2Class));
             mFactoryMap.put("RemoteTabs", RemoteTabs.class.getConstructor(arg1Class, arg2Class));
+            mFactoryMap.put("ShapedButton", ShapedButton.class.getConstructor(arg1Class, arg2Class));
             mFactoryMap.put("TabRow", TabRow.class.getConstructor(arg1Class, arg2Class));
-            mFactoryMap.put("TabsButton", TabsButton.class.getConstructor(arg1Class, arg2Class));
             mFactoryMap.put("TabsPanel", TabsPanel.class.getConstructor(arg1Class, arg2Class));
             mFactoryMap.put("TabsPanel$TabsListContainer", TabsPanel.TabsListContainer.class.getConstructor(arg1Class, arg2Class));
             mFactoryMap.put("TabsPanel$TabsPanelToolbar", TabsPanel.TabsPanelToolbar.class.getConstructor(arg1Class, arg2Class));
             mFactoryMap.put("TabsTray", TabsTray.class.getConstructor(arg1Class, arg2Class));
             mFactoryMap.put("ThumbnailView", ThumbnailView.class.getConstructor(arg1Class, arg2Class));
             mFactoryMap.put("TextSelectionHandle", TextSelectionHandle.class.getConstructor(arg1Class, arg2Class));
             mFactoryMap.put("gfx.LayerView", LayerView.class.getConstructor(arg1Class, arg2Class));
             mFactoryMap.put("AllCapsTextView", AllCapsTextView.class.getConstructor(arg1Class, arg2Class));
--- a/mobile/android/base/Makefile.in
+++ b/mobile/android/base/Makefile.in
@@ -107,17 +107,16 @@ FENNEC_JAVA_FILES = \
   GeckoViewsFactory.java \
   HeightChangeAnimation.java \
   InputMethods.java \
   JavaAddonManager.java \
   LightweightTheme.java \
   LightweightThemeDrawable.java \
   LinkPreference.java \
   MemoryMonitor.java \
-  MenuButton.java \
   MenuItemActionBar.java \
   MenuItemDefault.java \
   MenuPanel.java \
   MenuPopup.java \
   MotionEventInterceptor.java \
   MultiChoicePreference.java \
   NotificationClient.java \
   NotificationHandler.java \
@@ -141,17 +140,16 @@ FENNEC_JAVA_FILES = \
   SessionParser.java \
   SetupScreen.java \
   ShapedButton.java \
   SiteIdentityPopup.java \
   SuggestClient.java \
   SurfaceBits.java \
   Tab.java \
   Tabs.java \
-  TabsButton.java \
   TabsPanel.java \
   TabsTray.java \
   TabsAccessor.java \
   TailTouchDelegate.java \
   Telemetry.java \
   TextSelection.java \
   TextSelectionHandle.java \
   ThumbnailHelper.java \
@@ -912,17 +910,16 @@ RES_DRAWABLE_LAND_HDPI_V14 = \
   res/drawable-land-hdpi-v14/tabs_carat.png \
   $(NULL)
 
 RES_DRAWABLE_LAND_XHDPI_V14 = \
   res/drawable-land-xhdpi-v14/tabs_carat.png \
   $(NULL)
 
 RES_DRAWABLE_LARGE_LAND_V11 = \
-  res/drawable-large-land-v11/tabs_button.xml \
   res/drawable-large-land-v11/tabs_level.xml \
   $(NULL)
 
 RES_DRAWABLE_LARGE_MDPI_V11 = \
   res/drawable-large-mdpi-v11/doorhanger_popup_bg.9.png \
   res/drawable-large-mdpi-v11/ic_menu_reload.png \
   res/drawable-large-mdpi-v11/ic_menu_forward.png \
   res/drawable-large-mdpi-v11/menu.png \
@@ -1022,28 +1019,27 @@ MOZ_ANDROID_DRAWABLES += \
   mobile/android/base/resources/drawable/awesomebar_tab_selected.xml            \
   mobile/android/base/resources/drawable/awesomebar_tab_unselected.xml          \
   mobile/android/base/resources/drawable/handle_end_level.xml                   \
   mobile/android/base/resources/drawable/handle_start_level.xml                 \
   mobile/android/base/resources/drawable/ic_menu_back.xml                       \
   mobile/android/base/resources/drawable/ic_menu_desktop_mode_off.xml           \
   mobile/android/base/resources/drawable/ic_menu_desktop_mode_on.xml            \
   mobile/android/base/resources/drawable/ic_menu_quit.xml                       \
-  mobile/android/base/resources/drawable/menu_button.xml                        \
   mobile/android/base/resources/drawable/menu_item_state.xml                    \
   mobile/android/base/resources/drawable/menu_level.xml                         \
   mobile/android/base/resources/drawable/progress_spinner.xml                   \
   mobile/android/base/resources/drawable/remote_tabs_child_divider.xml          \
+  mobile/android/base/resources/drawable/shaped_button.xml                      \
   mobile/android/base/resources/drawable/site_security_level.xml                \
   mobile/android/base/resources/drawable/spinner.xml                            \
   mobile/android/base/resources/drawable/suggestion_selector.xml                \
   mobile/android/base/resources/drawable/tab_new_level.xml                      \
   mobile/android/base/resources/drawable/tab_row.xml                            \
   mobile/android/base/resources/drawable/tab_thumbnail.xml                      \
-  mobile/android/base/resources/drawable/tabs_button.xml                        \
   mobile/android/base/resources/drawable/tabs_level.xml                         \
   mobile/android/base/resources/drawable/tabs_panel_indicator.xml               \
   mobile/android/base/resources/drawable/webapp_titlebar_bg.xml                 \
   $(NULL)
 
 MOZ_BRANDING_DRAWABLE_MDPI = $(shell if test -e $(topsrcdir)/$(MOZ_BRANDING_DIRECTORY)/android-resources.mn; then cat $(topsrcdir)/$(MOZ_BRANDING_DIRECTORY)/android-resources.mn | tr '\n' ' ';  fi)
 
 RESOURCES=$(RES_LAYOUT) $(RES_LAYOUT_LAND_V14) $(RES_LAYOUT_LARGE_LAND_V11) $(RES_LAYOUT_LARGE_V11) $(RES_LAYOUT_XLARGE_V11) $(RES_LAYOUT_XLARGE_LAND_V11) $(RES_VALUES) $(RES_VALUES_LAND) $(RES_VALUES_V11) $(RES_VALUES_LARGE_V11) $(RES_VALUES_LARGE_LAND_V11) $(RES_VALUES_XLARGE_V11) $(RES_VALUES_LAND_V14) $(RES_VALUES_V14) $(RES_XML) $(RES_ANIM) $(RES_DRAWABLE_MDPI) $(RES_DRAWABLE_LDPI) $(RES_DRAWABLE_HDPI) $(RES_DRAWABLE_XHDPI) $(RES_DRAWABLE_MDPI_V11) $(RES_DRAWABLE_HDPI_V11) $(RES_DRAWABLE_XHDPI_V11) $(RES_DRAWABLE_LAND_MDPI_V14) $(RES_DRAWABLE_LAND_HDPI_V14) $(RES_DRAWABLE_LAND_XHDPI_V14) $(RES_DRAWABLE_LARGE_LAND_V11) $(RES_DRAWABLE_LARGE_MDPI_V11) $(RES_DRAWABLE_LARGE_HDPI_V11) $(RES_DRAWABLE_LARGE_XHDPI_V11) $(RES_DRAWABLE_XLARGE_MDPI_V11) $(RES_DRAWABLE_XLARGE_HDPI_V11) $(RES_DRAWABLE_XLARGE_XHDPI_V11) $(RES_COLOR) $(RES_MENU)
deleted file mode 100644
--- a/mobile/android/base/MenuButton.java
+++ /dev/null
@@ -1,82 +0,0 @@
-/* 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;
-
-import android.content.Context;
-import android.content.res.Resources;
-import android.graphics.Color;
-import android.graphics.Path;
-import android.graphics.PorterDuff.Mode;
-import android.graphics.drawable.ColorDrawable;
-import android.graphics.drawable.LevelListDrawable;
-import android.graphics.drawable.StateListDrawable;
-import android.util.AttributeSet;
-
-public class MenuButton extends ShapedButton {
-
-    public MenuButton(Context context, AttributeSet attrs) {
-        super(context, attrs);
-
-        // Path is clipped.
-        mPath = new Path();
-        mCanvasDelegate = new CanvasDelegate(this, Mode.DST_OUT);
-    }
-
-    @Override
-    public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
-        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
-
-        int width = getMeasuredWidth();
-        int height = getMeasuredHeight();
-        int curve = (int) (height * 1.125f);
-
-        mPath.reset();
-
-        // Clipping happens on opposite side for menu.
-        if (mSide == CurveTowards.RIGHT) {
-            mPath.moveTo(0, 0);
-            mPath.cubicTo(curve * 0.75f, 0,
-                          curve * 0.25f, height,
-                          curve, height);
-            mPath.lineTo(0, height);
-            mPath.lineTo(0, 0);
-        } else if (mSide == CurveTowards.LEFT) {
-            mPath.moveTo(width, 0);
-            mPath.cubicTo((width - (curve * 0.75f)), 0,
-                          (width - (curve * 0.25f)), height,
-                          (width - curve), height);
-            mPath.lineTo(width, height);
-            mPath.lineTo(width, 0);
-        }
-    }
-
-    // The drawable is constructed as per @drawable/menu_button.
-    @Override
-    public void onLightweightThemeChanged() {
-        LightweightThemeDrawable drawable = mActivity.getLightweightTheme().getColorDrawable(this, Color.BLACK);
-        if (drawable == null)
-            return;
-
-        drawable.setAlpha(34, 34);
-
-        Resources resources = getContext().getResources();
-        StateListDrawable stateList = new StateListDrawable();
-        stateList.addState(new int[] { android.R.attr.state_pressed }, new ColorDrawable(resources.getColor(R.color.highlight_menu)));
-        stateList.addState(new int[] { android.R.attr.state_focused }, new ColorDrawable(resources.getColor(R.color.highlight_menu_focused)));
-        stateList.addState(new int[] { R.attr.state_private }, new ColorDrawable(Color.BLACK));
-        stateList.addState(new int[] {}, drawable);
-
-        LevelListDrawable levelList = new LevelListDrawable();
-        levelList.addLevel(0, 1, stateList);
-        levelList.addLevel(2, 2, new ColorDrawable(Color.TRANSPARENT));
-
-        setBackgroundDrawable(levelList);
-    }
-
-    @Override
-    public void onLightweightThemeReset() {
-        setBackgroundResource(R.drawable.menu_button);
-    }
-}
--- a/mobile/android/base/ShapedButton.java
+++ b/mobile/android/base/ShapedButton.java
@@ -1,61 +1,128 @@
 /* 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;
 
 import android.content.Context;
+import android.content.res.Resources;
 import android.content.res.TypedArray;
 import android.graphics.Canvas;
 import android.graphics.Path;
+import android.graphics.PorterDuff.Mode;
+import android.graphics.drawable.ColorDrawable;
 import android.graphics.drawable.Drawable;
+import android.graphics.drawable.LevelListDrawable;
+import android.graphics.drawable.StateListDrawable;
 import android.util.AttributeSet;
 
 public class ShapedButton extends GeckoImageButton
                           implements CanvasDelegate.DrawManager {
     protected GeckoActivity mActivity;
-    protected Path mPath;
-    protected CurveTowards mSide;
+
+    private Path mPath;
+    private CurveTowards mSide;
+
     protected CanvasDelegate mCanvasDelegate;
 
-    protected enum CurveTowards { NONE, LEFT, RIGHT };
+    private enum CurveTowards { NONE, LEFT, RIGHT };
 
     public ShapedButton(Context context, AttributeSet attrs) {
         super(context, attrs);
         mActivity = (GeckoActivity) context;
 
         TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.BrowserToolbarCurve);
-        int curveTowards = a.getInt(R.styleable.BrowserToolbarCurve_curveTowards, 0x02);
+        int curveTowards = a.getInt(R.styleable.BrowserToolbarCurve_curveTowards, 0x00);
         a.recycle();
 
         if (curveTowards == 0x00)
             mSide = CurveTowards.NONE;
         else if (curveTowards == 0x01)
             mSide = CurveTowards.LEFT;
         else
             mSide = CurveTowards.RIGHT;
 
+        // Path is clipped.
+        mPath = new Path();
+        mCanvasDelegate = new CanvasDelegate(this, Mode.DST_OUT);
+
         setWillNotDraw(false);
     }
 
     @Override
+    public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
+        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
+
+        if (mSide == CurveTowards.NONE)
+            return;
+
+        int width = getMeasuredWidth();
+        int height = getMeasuredHeight();
+        int curve = (int) (height * 1.125f);
+
+        mPath.reset();
+
+        if (mSide == CurveTowards.RIGHT) {
+            mPath.moveTo(0, 0);
+            mPath.cubicTo(curve * 0.75f, 0,
+                          curve * 0.25f, height,
+                          curve, height);
+            mPath.lineTo(0, height);
+            mPath.lineTo(0, 0);
+        } else if (mSide == CurveTowards.LEFT) {
+            mPath.moveTo(width, 0);
+            mPath.cubicTo((width - (curve * 0.75f)), 0,
+                          (width - (curve * 0.25f)), height,
+                          (width - curve), height);
+            mPath.lineTo(width, height);
+            mPath.lineTo(width, 0);
+        }
+    }
+
+    @Override
     public void draw(Canvas canvas) {
-        if (mCanvasDelegate != null)
+        if (mCanvasDelegate != null && mSide != CurveTowards.NONE)
             mCanvasDelegate.draw(canvas, mPath, getWidth(), getHeight());
         else
             defaultDraw(canvas);
     }
 
     @Override
     public void defaultDraw(Canvas canvas) {
         super.draw(canvas);
     }
 
+    // The drawable is constructed as per @drawable/shaped_button.
+    @Override
+    public void onLightweightThemeChanged() {
+        int background = mActivity.getResources().getColor(R.color.background_tabs);
+        LightweightThemeDrawable lightWeight = mActivity.getLightweightTheme().getColorDrawable(this, background);
+
+        if (lightWeight == null)
+            return;
+
+        lightWeight.setAlpha(34, 34);
+
+        Resources resources = this.getContext().getResources();
+        StateListDrawable stateList = new StateListDrawable();
+        stateList.addState(new int[] { android.R.attr.state_pressed }, new ColorDrawable(resources.getColor(R.color.highlight_shaped)));
+        stateList.addState(new int[] { android.R.attr.state_focused }, new ColorDrawable(resources.getColor(R.color.highlight_shaped_focused)));
+        stateList.addState(new int[] { R.attr.state_private }, new ColorDrawable(resources.getColor(R.color.background_tabs)));
+        stateList.addState(new int[] {}, lightWeight);
+
+        setBackgroundDrawable(stateList);
+    }
+
+    @Override
+    public void onLightweightThemeReset() {
+        setBackgroundResource(R.drawable.shaped_button);
+    }
+
     @Override
     public void setBackgroundDrawable(Drawable drawable) {
         if (getBackground() == null || drawable == null) {
             super.setBackgroundDrawable(drawable);
             return;
         }
 
         int[] padding =  new int[] { getPaddingLeft(),
deleted file mode 100644
--- a/mobile/android/base/TabsButton.java
+++ /dev/null
@@ -1,208 +0,0 @@
-/* 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;
-
-import android.content.Context;
-import android.content.res.Resources;
-import android.content.res.TypedArray;
-import android.graphics.Canvas;
-import android.graphics.Color;
-import android.graphics.Paint;
-import android.graphics.Path;
-import android.graphics.PorterDuff.Mode;
-import android.graphics.drawable.ColorDrawable;
-import android.graphics.drawable.Drawable;
-import android.graphics.drawable.LevelListDrawable;
-import android.graphics.drawable.StateListDrawable;
-import android.util.AttributeSet;
-
-public class TabsButton extends ShapedButton { 
-    private Paint mPaint;
-
-    private Path mBackgroundPath;
-    private Path mLeftCurve;
-    private Path mRightCurve;
-
-    private boolean mCropped;
-    private boolean mSideBar;
-
-    public TabsButton(Context context, AttributeSet attrs) {
-        super(context, attrs);
-
-        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.TabsButton);
-        mCropped = a.getBoolean(R.styleable.TabsButton_cropped, false);
-        a.recycle();
-
-        mSideBar = false;
-
-        // Paint to draw the background.
-        mPaint = new Paint();
-        mPaint.setAntiAlias(true);
-        mPaint.setColor(0xFF000000);
-        mPaint.setStrokeWidth(0.0f);
-
-        // Path is masked.
-        mPath = new Path();
-        mBackgroundPath = new Path();
-        mLeftCurve = new Path();
-        mRightCurve = new Path();
-        mCanvasDelegate = new CanvasDelegate(this, Mode.DST_IN);
-    }
-
-    @Override
-    public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
-        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
-
-        int width = getMeasuredWidth();
-        int height = getMeasuredHeight();
-        int curve = (int) (height * 1.125f);
-
-        // The bounds for the rectangle to carve the curves.
-        float left;
-        float right;
-        float top;
-        float bottom;
-
-        if (mSide == CurveTowards.RIGHT) {
-            left = 0;
-            right = width;
-            top = 0;
-            bottom = height;
-        } else {
-            left = 0;
-            right = width;
-            top = height;
-            bottom = 0;
-        }
-
-        mLeftCurve.reset();
-        mLeftCurve.moveTo(left, top);
-
-        if (mCropped && mSide == CurveTowards.LEFT) {
-            mLeftCurve.lineTo(left, top/2);
-            mLeftCurve.quadTo(left * 0.95f, top * 0.05f, left + curve/2, bottom);
-        } else {
-            mLeftCurve.cubicTo(left + (curve * 0.75f), top,
-                               left + (curve * 0.25f), bottom,
-                               left + curve, bottom);
-        }
-
-        mRightCurve.reset();
-        mRightCurve.moveTo(right, bottom);
-
-        if (mCropped && mSide == CurveTowards.RIGHT) {
-            mRightCurve.lineTo(right, bottom/2);
-            mRightCurve.quadTo(right * 0.95f, bottom * 0.05f, right - (curve/2), top);
-        } else {
-            mRightCurve.cubicTo(right - (curve * 0.75f), bottom,
-                                right - (curve * 0.25f), top,
-                                right - curve, top);
-        }
-
-        mPath.reset();
-
-        // Level 2: for phones: transparent.
-        //          for tablets: only one curve.
-        Drawable background = getBackground();
-        if (background == null)
-            return;
-
-        if (!(background.getCurrent() instanceof ColorDrawable)) {
-            if (background.getLevel() == 2) {
-                mPath.moveTo(left, top);
-                mPath.lineTo(left, bottom);
-                mPath.lineTo(right, bottom);
-                mPath.addPath(mRightCurve);
-                mPath.lineTo(left, top);
-            } else {
-                mPath.moveTo(left, top);
-                mPath.addPath(mLeftCurve);
-                mPath.lineTo(right, bottom);
-                mPath.addPath(mRightCurve);
-                mPath.lineTo(left, top);
-            }
-        }
-
-        if (mCropped) {
-            mBackgroundPath.reset();
-
-            if (mSide == CurveTowards.RIGHT) {
-                mBackgroundPath.moveTo(right, bottom);
-                mBackgroundPath.addPath(mRightCurve);
-                mBackgroundPath.lineTo(right, top);
-                mBackgroundPath.lineTo(right, bottom);
-            } else {
-                mBackgroundPath.moveTo(left, top);
-                mBackgroundPath.addPath(mLeftCurve);
-                mBackgroundPath.lineTo(left, bottom);
-                mBackgroundPath.lineTo(left, top);
-            }
-        }
-    }
-
-    @Override
-    public void draw(Canvas canvas) {
-        mCanvasDelegate.draw(canvas, mPath, getWidth(), getHeight());
-
-        Drawable background = getBackground();
-        if (background.getCurrent() instanceof ColorDrawable)
-            return;
-
-        // Additionally draw a black curve for cropped button's default level.
-        if (mCropped && background.getLevel() != 2)
-            canvas.drawPath(mBackgroundPath, mPaint);
-    }
-
-    // The drawable is constructed as per @drawable/tabs_button.
-    @Override
-    public void onLightweightThemeChanged() {
-        int background1 = mActivity.getResources().getColor(R.color.background_tabs_light);
-        LightweightThemeDrawable lightWeight1 = mActivity.getLightweightTheme().getColorDrawable(this, background1);
-        int background2 = mActivity.getResources().getColor(R.color.background_tabs_dark);
-        LightweightThemeDrawable lightWeight2 = mActivity.getLightweightTheme().getColorDrawable(this, background2);
-        if (lightWeight1 == null || lightWeight2 == null)
-            return;
-
-        lightWeight1.setAlpha(34, 34);
-        lightWeight2.setAlpha(34, 34);
-
-        Resources resources = this.getContext().getResources();
-        StateListDrawable stateList1 = new StateListDrawable();
-        stateList1.addState(new int[] { android.R.attr.state_pressed }, new ColorDrawable(resources.getColor(R.color.highlight_tabs)));
-        stateList1.addState(new int[] { android.R.attr.state_focused }, new ColorDrawable(resources.getColor(R.color.highlight_tabs_focused)));
-        stateList1.addState(new int[] { R.attr.state_private }, new ColorDrawable(resources.getColor(R.color.background_tabs_light)));
-        stateList1.addState(new int[] {}, lightWeight1);
-
-        StateListDrawable stateList2 = new StateListDrawable();
-        stateList2.addState(new int[] { android.R.attr.state_pressed }, new ColorDrawable(resources.getColor(R.color.highlight_tabs)));
-        stateList2.addState(new int[] { android.R.attr.state_focused }, new ColorDrawable(resources.getColor(R.color.highlight_tabs_focused)));
-        stateList2.addState(new int[] { R.attr.state_private }, new ColorDrawable(resources.getColor(R.color.background_tabs_dark)));
-        stateList2.addState(new int[] {}, lightWeight2);
-
-        LevelListDrawable levelList = new LevelListDrawable();
-        levelList.addLevel(0, 1, stateList1);
-
-        // If there is a side bar, the expanded state will have a filled button.
-        if (mSideBar)
-            levelList.addLevel(2, 2, stateList2);
-        else
-            levelList.addLevel(2, 2, new ColorDrawable(Color.TRANSPARENT));
-
-        setBackgroundDrawable(levelList);
-    }
-
-    @Override
-    public void onLightweightThemeReset() {
-        setBackgroundResource(R.drawable.tabs_button);
-    }
-
-    public void setIsSideBar(boolean isSideBar) {
-        if (mSideBar == isSideBar)
-            return;
-
-        mSideBar = isSideBar;
-        requestLayout();
-    }
-}
--- a/mobile/android/base/TabsPanel.java
+++ b/mobile/android/base/TabsPanel.java
@@ -168,28 +168,28 @@ public class TabsPanel extends LinearLay
     @Override
     public void onDetachedFromWindow() {
         super.onDetachedFromWindow();
         mActivity.getLightweightTheme().removeListener(this);
     }
     
     @Override
     public void onLightweightThemeChanged() {
-        int background = mActivity.getResources().getColor(R.color.background_tabs_light);
+        int background = mActivity.getResources().getColor(R.color.background_tabs);
         LightweightThemeDrawable drawable = mActivity.getLightweightTheme().getColorDrawable(this, background, true);
         if (drawable == null)
             return;
 
         drawable.setAlpha(34, 0);
         setBackgroundDrawable(drawable);
     }
 
     @Override
     public void onLightweightThemeReset() {
-        setBackgroundColor(getContext().getResources().getColor(R.color.background_tabs_light));
+        setBackgroundColor(getContext().getResources().getColor(R.color.background_tabs));
     }
 
     @Override
     protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
         super.onLayout(changed, left, top, right, bottom);
         onLightweightThemeChanged();
     }
 
@@ -251,28 +251,28 @@ public class TabsPanel extends LinearLay
         @Override
         public void onDetachedFromWindow() {
             super.onDetachedFromWindow();
             mActivity.getLightweightTheme().removeListener(this);
         }
     
         @Override
         public void onLightweightThemeChanged() {
-            int background = mActivity.getResources().getColor(R.color.background_tabs_dark);
+            int background = mActivity.getResources().getColor(R.color.background_tabs);
             LightweightThemeDrawable drawable = mActivity.getLightweightTheme().getColorDrawable(this, background);
             if (drawable == null)
                 return;
 
             drawable.setAlpha(34, 34);
             setBackgroundDrawable(drawable);
         }
 
         @Override
         public void onLightweightThemeReset() {
-            setBackgroundColor(getContext().getResources().getColor(R.color.background_tabs_dark));
+            setBackgroundColor(getContext().getResources().getColor(R.color.background_tabs));
         }
 
         @Override
         protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
             super.onLayout(changed, left, top, right, bottom);
             onLightweightThemeChanged();
         }
     }
deleted file mode 100644
--- a/mobile/android/base/resources/drawable-large-land-v11/tabs_button.xml
+++ /dev/null
@@ -1,42 +0,0 @@
-<?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/. -->
-
-<level-list xmlns:android="http://schemas.android.com/apk/res/android">
-
-    <item android:maxLevel="1">
-
-        <selector>
-
-            <item android:state_pressed="true"
-                  android:drawable="@color/highlight_tabs"/>
-
-            <item android:state_focused="true"
-                  android:state_pressed="false"
-                  android:drawable="@color/highlight_tabs_focused"/>
-
-            <item android:drawable="@color/background_tabs_light"/>
-
-        </selector>
-
-    </item>
-
-    <item android:maxLevel="2">
-
-        <selector>
-
-            <item android:state_pressed="true"
-                  android:drawable="@color/highlight_tabs"/>
-
-            <item android:state_focused="true"
-                  android:state_pressed="false"
-                  android:drawable="@color/highlight_tabs_focused"/>
-
-            <item android:drawable="@color/background_tabs_dark"/>
-
-        </selector>
-
-    </item>
-
-</level-list>
deleted file mode 100644
--- a/mobile/android/base/resources/drawable/menu_button.xml
+++ /dev/null
@@ -1,27 +0,0 @@
-<?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/. -->
-
-<level-list xmlns:android="http://schemas.android.com/apk/res/android">
-
-    <item android:maxLevel="1">
-
-        <selector>
-
-            <item android:state_pressed="true"
-                  android:drawable="@color/highlight_menu"/>
-
-            <item android:state_focused="true"
-                  android:state_pressed="false"
-                  android:drawable="@color/highlight_menu_focused"/>
-
-            <item android:drawable="@android:color/black"/>
-
-        </selector>
-
-    </item>
-
-    <item android:maxLevel="2" android:drawable="@android:color/transparent"/>
-
-</level-list>
new file mode 100644
--- /dev/null
+++ b/mobile/android/base/resources/drawable/shaped_button.xml
@@ -0,0 +1,17 @@
+<?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:drawable="@color/highlight_shaped"/>
+
+    <item android:state_focused="true"
+          android:state_pressed="false"
+          android:drawable="@color/highlight_shaped_focused"/>
+ 
+    <item android:drawable="@color/background_tabs"/>
+
+</selector>
deleted file mode 100644
--- a/mobile/android/base/resources/drawable/tabs_button.xml
+++ /dev/null
@@ -1,27 +0,0 @@
-<?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/. -->
-
-<level-list xmlns:android="http://schemas.android.com/apk/res/android">
-
-    <item android:maxLevel="1">
-
-        <selector>
-
-            <item android:state_pressed="true"
-                  android:drawable="@color/highlight_tabs"/>
-
-            <item android:state_focused="true"
-                  android:state_pressed="false"
-                  android:drawable="@color/highlight_tabs_focused"/>
-
-            <item android:drawable="@color/background_tabs_light"/>
-
-        </selector>
-
-    </item>
-
-    <item android:maxLevel="2" android:drawable="@android:color/transparent"/>
-
-</level-list>
--- a/mobile/android/base/resources/drawable/tabs_level.xml
+++ b/mobile/android/base/resources/drawable/tabs_level.xml
@@ -2,11 +2,11 @@
 <!-- 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/. -->
 
 <level-list xmlns:android="http://schemas.android.com/apk/res/android">
 
     <item android:maxLevel="0" android:drawable="@android:color/transparent"/>
 
-    <item android:maxLevel="1" android:drawable="@drawable/tabs_carat"/>
+    <item android:maxLevel="2" android:drawable="@drawable/tabs_carat"/>
 
 </level-list>
--- a/mobile/android/base/resources/layout-land-v14/browser_toolbar.xml
+++ b/mobile/android/base/resources/layout-land-v14/browser_toolbar.xml
@@ -13,29 +13,23 @@
 
         <ImageButton android:id="@+id/back"
                      android:contentDescription="@string/back"
                      style="@style/AddressBar.ImageButton.Unused"/>
 
         <ImageButton style="@style/AddressBar.ImageButton.Forward"
                      android:id="@+id/forward"/>
  
-        <view class="org.mozilla.gecko.TabsPanel$TabsPanelToolbar"
-              android:layout_width="60dip"
-              android:layout_height="fill_parent"
-              android:layout_alignParentTop="true"
-              android:layout_alignParentRight="true"
-              android:background="@color/background_tabs_dark"/>
-
         <org.mozilla.gecko.BrowserToolbarBackground android:id="@+id/address_bar_bg"
                                                     android:layout_width="fill_parent"
                                                     android:layout_height="fill_parent"
                                                     android:layout_marginRight="14dip"
                                                     android:layout_alignParentTop="true"
                                                     android:layout_alignParentRight="true"
+                                                    gecko:curveTowards="right"
                                                     android:background="@drawable/address_bar_bg"/>
 
          <FrameLayout style="@style/AddressBar.Button.Container"
                       android:id="@+id/addressbar">
 
             <Gecko.RelativeLayout android:id="@+id/awesome_bar"
                                   style="@style/AddressBar.Button"
                                   android:layout_centerVertical="true"
@@ -134,30 +128,29 @@
 
         </FrameLayout>
 
         <LinearLayout android:id="@+id/menu_items"
                       android:layout_width="0dip"
                       android:layout_height="0dip"
                       android:visibility="gone"/>
 
-        <org.mozilla.gecko.MenuButton android:id="@+id/menu"
-                                      style="@style/AddressBar.ImageButton.Unused"/>
+        <Gecko.ShapedButton android:id="@+id/menu"
+                            style="@style/AddressBar.ImageButton.Unused"/>
 
-        <org.mozilla.gecko.TabsButton android:id="@+id/tabs"
-                                      style="@style/AddressBar.ImageButton"
-                                      android:layout_width="60dip"
-                                      android:layout_alignParentRight="true"
-                                      gecko:curveTowards="right"
-                                      gecko:cropped="true"
-                                      android:background="@drawable/tabs_button"
-                                      android:gravity="center_vertical"
-                                      android:src="@drawable/tabs_level"
-                                      android:paddingLeft="30dip"
-                                      android:paddingRight="10dip"/>
+        <Gecko.ShapedButton android:id="@+id/tabs"
+                            style="@style/AddressBar.ImageButton"
+                            android:layout_width="60dip"
+                            android:layout_alignParentRight="true"
+                            gecko:curveTowards="right"
+                            android:background="@drawable/shaped_button"
+                            android:gravity="center_vertical"
+                            android:src="@drawable/tabs_level"
+                            android:paddingLeft="30dip"
+                            android:paddingRight="10dip"/>
 
         <Gecko.TextSwitcher android:id="@+id/tabs_count"
                             style="@style/AddressBar.ImageButton"
                             android:layout_width="39dip"
                             android:layout_height="wrap_content"
                             android:layout_marginTop="4.5dp"
                             android:layout_alignRight="@id/tabs"
                             android:gravity="center_horizontal"/>
--- a/mobile/android/base/resources/layout-land-v14/browser_toolbar_menu.xml
+++ b/mobile/android/base/resources/layout-land-v14/browser_toolbar_menu.xml
@@ -13,29 +13,23 @@
 
         <ImageButton android:id="@+id/back"
                      android:contentDescription="@string/back"
                      style="@style/AddressBar.ImageButton.Unused"/>
 
         <ImageButton style="@style/AddressBar.ImageButton.Forward"
                      android:id="@+id/forward"/>
 
-        <view class="org.mozilla.gecko.TabsPanel$TabsPanelToolbar"
-              android:layout_width="95dip"
-              android:layout_height="fill_parent"
-              android:layout_alignParentTop="true"
-              android:layout_alignParentRight="true"
-              android:background="@color/background_tabs_dark"/>
-
         <org.mozilla.gecko.BrowserToolbarBackground android:id="@+id/address_bar_bg"
                                                     android:layout_width="fill_parent"
                                                     android:layout_height="fill_parent"
                                                     android:layout_marginRight="50dip"
                                                     android:layout_alignParentTop="true"
                                                     android:layout_alignParentRight="true"
+                                                    gecko:curveTowards="right"
                                                     android:background="@drawable/address_bar_bg"/>
         
         <FrameLayout style="@style/AddressBar.Button.Container"
                      android:id="@+id/addressbar">
 
             <Gecko.RelativeLayout android:id="@+id/awesome_bar"
                                   style="@style/AddressBar.Button"
                                   android:layout_centerVertical="true"
@@ -134,42 +128,40 @@
 
         </FrameLayout>
 
         <LinearLayout android:id="@+id/menu_items"
                       android:layout_width="0dip"
                       android:layout_height="0dip"
                       android:visibility="gone"/>
 
-        <org.mozilla.gecko.MenuButton android:id="@+id/menu"
-                                      style="@style/AddressBar.ImageButton"
-                                      android:layout_width="60dip"
-                                      android:layout_alignParentRight="true"
-                                      android:gravity="center_vertical"
-                                      android:src="@drawable/menu_level"
-                                      android:contentDescription="@string/menu"
-                                      android:background="@drawable/menu_button"
-                                      android:paddingLeft="30dip"
-                                      android:paddingRight="10dip"/>
+        <Gecko.ShapedButton android:id="@+id/menu"
+                            style="@style/AddressBar.ImageButton"
+                            android:layout_width="40dip"
+                            android:layout_alignParentRight="true"
+                            android:gravity="center_vertical"
+                            android:src="@drawable/menu_level"
+                            android:contentDescription="@string/menu"
+                            android:background="@drawable/shaped_button"/>
 
-        <org.mozilla.gecko.TabsButton android:id="@+id/tabs"
-                                      style="@style/AddressBar.ImageButton"
-                                      android:layout_width="80dip"
-                                      android:layout_marginRight="15dip"
-                                      android:layout_alignParentRight="true"
-                                      gecko:curveTowards="right"
-                                      android:background="@drawable/tabs_button"
-                                      android:gravity="center_vertical"
-                                      android:src="@drawable/tabs_level"
-                                      android:paddingLeft="30dip"
-                                      android:paddingRight="30dip"/>
+        <Gecko.ShapedButton android:id="@+id/tabs"
+                            style="@style/AddressBar.ImageButton"
+                            android:layout_width="60dip"
+                            android:layout_marginRight="40dip"
+                            android:layout_alignParentRight="true"
+                            gecko:curveTowards="right"
+                            android:background="@drawable/shaped_button"
+                            android:gravity="center_vertical"
+                            android:src="@drawable/tabs_level"
+                            android:paddingLeft="30dip"
+                            android:paddingRight="10dip"/>
 
         <Gecko.TextSwitcher android:id="@+id/tabs_count"
                             style="@style/AddressBar.ImageButton"
-                            android:layout_width="80dip"
+                            android:layout_width="39dip"
                             android:layout_height="wrap_content"
                             android:layout_marginTop="4.5dp"
                             android:layout_alignRight="@id/tabs"
                             android:gravity="center_horizontal"/>
 
          <ImageView android:id="@+id/shadow"
                     android:layout_width="fill_parent"
                     android:layout_height="2dp"
--- a/mobile/android/base/resources/layout-large-land-v11/tabs_panel.xml
+++ b/mobile/android/base/resources/layout-large-land-v11/tabs_panel.xml
@@ -8,17 +8,17 @@
 
     <RelativeLayout android:id="@+id/tabs_panel_header"
                     android:layout_width="fill_parent"
                     android:layout_height="@dimen/browser_toolbar_height">
 
         <view class="org.mozilla.gecko.TabsPanel$TabsPanelToolbar"
               android:layout_width="fill_parent"
               android:layout_height="fill_parent"
-              android:background="@color/background_tabs_dark">
+              android:background="@color/background_tabs">
 
             <include layout="@layout/tabs_panel_header"/>
 
         </view>
 
         <View android:layout_width="fill_parent"
               android:layout_height="2dp"
               android:layout_alignParentBottom="true"
@@ -61,17 +61,17 @@
 
     <RelativeLayout android:id="@+id/tabs_panel_footer"
                     android:layout_width="fill_parent"
                     android:layout_height="@dimen/browser_toolbar_height">
 
         <view class="org.mozilla.gecko.TabsPanel$TabsPanelToolbar"
               android:layout_width="fill_parent"
               android:layout_height="fill_parent"
-              android:background="@color/background_tabs_dark">
+              android:background="@color/background_tabs">
 
             <include layout="@layout/tabs_panel_footer"/>
 
         </view>
 
         <View android:layout_width="fill_parent"
               android:layout_height="2dp"
               android:layout_alignParentTop="true"
--- a/mobile/android/base/resources/layout-large-v11/browser_toolbar_menu.xml
+++ b/mobile/android/base/resources/layout-large-v11/browser_toolbar_menu.xml
@@ -6,39 +6,33 @@
 <org.mozilla.gecko.BrowserToolbarLayout xmlns:android="http://schemas.android.com/apk/res/android"
               xmlns:gecko="http://schemas.android.com/apk/res-auto"
               android:id="@+id/browser_toolbar"
               style="@style/BrowserToolbar">
 
     <RelativeLayout android:id="@+id/address_bar"
                     style="@style/AddressBar">
 
-        <view class="org.mozilla.gecko.TabsPanel$TabsPanelToolbar"
-              android:layout_width="84dip"
-              android:layout_height="fill_parent"
-              android:background="@color/background_tabs_dark"/>
-
         <org.mozilla.gecko.BrowserToolbarBackground android:id="@+id/address_bar_bg"
                                                     android:layout_width="fill_parent"
                                                     android:layout_height="fill_parent"
                                                     android:layout_marginLeft="21dip"
                                                     gecko:curveTowards="left"
                                                     android:background="@drawable/address_bar_bg"/>
 
-        <org.mozilla.gecko.TabsButton android:id="@+id/tabs"
-                                      style="@style/AddressBar.ImageButton"
-                                      android:layout_width="84dip"
-                                      android:layout_alignParentLeft="true"
-                                      gecko:curveTowards="left"
-                                      gecko:cropped="true"
-                                      android:background="@drawable/tabs_button"
-                                      android:gravity="center_vertical"
-                                      android:src="@drawable/tabs_level"
-                                      android:paddingLeft="6dip"
-                                      android:paddingRight="38dip"/>
+        <Gecko.ShapedButton android:id="@+id/tabs"
+                            style="@style/AddressBar.ImageButton"
+                            android:layout_width="84dip"
+                            android:layout_alignParentLeft="true"
+                            gecko:curveTowards="left"
+                            android:background="@drawable/shaped_button"
+                            android:gravity="center_vertical"
+                            android:src="@drawable/tabs_level"
+                            android:paddingLeft="6dip"
+                            android:paddingRight="38dip"/>
 
         <Gecko.TextSwitcher android:id="@+id/tabs_count"
                             style="@style/AddressBar.ImageButton"
                             android:layout_width="52dip"
                             android:layout_height="wrap_content"
                             android:layout_marginTop="8dp"
                             android:layout_alignLeft="@id/tabs"
                             android:gravity="center_horizontal"/>
--- a/mobile/android/base/resources/layout-xlarge-v11/awesomebar_search.xml
+++ b/mobile/android/base/resources/layout-xlarge-v11/awesomebar_search.xml
@@ -10,24 +10,23 @@
     <org.mozilla.gecko.BrowserToolbarBackground android:id="@+id/address_bar_bg"
                                                 android:layout_width="fill_parent"
                                                 android:layout_height="fill_parent"
                                                 android:layout_alignParentTop="true"
                                                 android:layout_alignParentRight="true"
                                                 gecko:curveTowards="none"
                                                 android:background="@drawable/address_bar_bg"/>
 
-    <org.mozilla.gecko.TabsButton android:id="@+id/dummy_tab"
-                                  style="@style/AddressBar.ImageButton"
-                                  android:layout_width="84dip"
-                                  android:layout_alignParentLeft="true"
-                                  gecko:curveTowards="left"
-                                  gecko:cropped="true"
-                                  android:background="@drawable/tabs_button"
-                                  android:gravity="center_vertical"/>
+    <Gecko.ShapedButton android:id="@+id/dummy_tab"
+                        style="@style/AddressBar.ImageButton"
+                        android:layout_width="84dip"
+                        android:layout_alignParentLeft="true"
+                        gecko:curveTowards="left"
+                        android:background="@drawable/shaped_button"
+                        android:gravity="center_vertical"/>
 
     <view class="org.mozilla.gecko.CustomEditText"
           android:id="@+id/awesomebar_text"
           style="@style/AddressBar.Button"
           android:background="@drawable/address_bar_url"
           android:layout_marginLeft="0dip"
           android:layout_marginRight="56dip"
           android:layout_marginTop="7dip"
--- a/mobile/android/base/resources/layout/browser_toolbar.xml
+++ b/mobile/android/base/resources/layout/browser_toolbar.xml
@@ -13,29 +13,23 @@
 
         <ImageButton android:id="@+id/back"
                      android:contentDescription="@string/back"
                      style="@style/AddressBar.ImageButton.Unused"/>
 
         <ImageButton style="@style/AddressBar.ImageButton.Forward"
                      android:id="@+id/forward"/>
 
-        <view class="org.mozilla.gecko.TabsPanel$TabsPanelToolbar"
-              android:layout_width="72dip"
-              android:layout_height="fill_parent"
-              android:layout_alignParentTop="true"
-              android:layout_alignParentRight="true"
-              android:background="@color/background_tabs_dark"/>
-
         <org.mozilla.gecko.BrowserToolbarBackground android:id="@+id/address_bar_bg"
                                                     android:layout_width="fill_parent"
                                                     android:layout_height="fill_parent"
                                                     android:layout_marginRight="18dip"
                                                     android:layout_alignParentTop="true"
                                                     android:layout_alignParentRight="true"
+                                                    gecko:curveTowards="right"
                                                     android:background="@drawable/address_bar_bg"/>
 
         <FrameLayout style="@style/AddressBar.Button.Container"
                      android:id="@+id/addressbar">
 
             <Gecko.RelativeLayout android:id="@+id/awesome_bar"
                                   style="@style/AddressBar.Button"
                                   android:layout_centerVertical="true"
@@ -132,30 +126,29 @@
 
         </FrameLayout>
 
         <LinearLayout android:id="@+id/menu_items"
                       android:layout_width="0dip"
                       android:layout_height="0dip"
                       android:visibility="gone"/>
 
-        <org.mozilla.gecko.MenuButton android:id="@+id/menu"
-                                      style="@style/AddressBar.ImageButton.Unused"/>
+        <Gecko.ShapedButton android:id="@+id/menu"
+                            style="@style/AddressBar.ImageButton.Unused"/>
 
-        <org.mozilla.gecko.TabsButton android:id="@+id/tabs"
-                                      style="@style/AddressBar.ImageButton"
-                                      android:layout_width="72dip"
-                                      android:layout_alignParentRight="true"
-                                      gecko:curveTowards="right"
-                                      gecko:cropped="true"
-                                      android:background="@drawable/tabs_button"
-                                      android:gravity="center_vertical"
-                                      android:src="@drawable/tabs_level"
-                                      android:paddingLeft="37dip"
-                                      android:paddingRight="11dip"/>
+        <Gecko.ShapedButton android:id="@+id/tabs"
+                            style="@style/AddressBar.ImageButton"
+                            android:layout_width="72dip"
+                            android:layout_alignParentRight="true"
+                            gecko:curveTowards="right"
+                            android:background="@drawable/shaped_button"
+                            android:gravity="center_vertical"
+                            android:src="@drawable/tabs_level"
+                            android:paddingLeft="37dip"
+                            android:paddingRight="11dip"/>
 
         <Gecko.TextSwitcher android:id="@+id/tabs_count"
                             style="@style/AddressBar.ImageButton"
                             android:layout_width="44.5dip"
                             android:layout_height="wrap_content"
                             android:layout_marginTop="5dp"
                             android:layout_alignRight="@id/tabs"
                             android:gravity="center_horizontal"/>
--- a/mobile/android/base/resources/layout/browser_toolbar_menu.xml
+++ b/mobile/android/base/resources/layout/browser_toolbar_menu.xml
@@ -13,29 +13,23 @@
 
         <ImageButton android:id="@+id/back"
                      android:contentDescription="@string/back"
                      style="@style/AddressBar.ImageButton.Unused"/>
 
         <ImageButton style="@style/AddressBar.ImageButton.Forward"
                      android:id="@+id/forward"/>
 
-        <view class="org.mozilla.gecko.TabsPanel$TabsPanelToolbar"
-              android:layout_width="120dip"
-              android:layout_height="fill_parent"
-              android:layout_alignParentTop="true"
-              android:layout_alignParentRight="true"
-              android:background="@color/background_tabs_dark"/>
-
         <org.mozilla.gecko.BrowserToolbarBackground android:id="@+id/address_bar_bg"
                                                     android:layout_width="fill_parent"
                                                     android:layout_height="fill_parent"
                                                     android:layout_marginRight="66dip"
                                                     android:layout_alignParentTop="true"
                                                     android:layout_alignParentRight="true"
+                                                    gecko:curveTowards="right"
                                                     android:background="@drawable/address_bar_bg"/>
 
         <FrameLayout style="@style/AddressBar.Button.Container"
                      android:id="@+id/addressbar">
 
             <Gecko.RelativeLayout android:id="@+id/awesome_bar"
                                   style="@style/AddressBar.Button"
                                   android:layout_centerVertical="true"
@@ -132,43 +126,40 @@
 
         </FrameLayout>
 
         <LinearLayout android:id="@+id/menu_items"
                       android:layout_width="0dip"
                       android:layout_height="0dip"
                       android:visibility="gone"/>
 
-        <org.mozilla.gecko.MenuButton android:id="@+id/menu"
-                                      style="@style/AddressBar.ImageButton"
-                                      android:layout_width="76dip"
-                                      android:layout_alignParentRight="true"
-                                      gecko:curveTowards="right"
-                                      android:gravity="center_vertical"
-                                      android:src="@drawable/menu_level"
-                                      android:contentDescription="@string/menu"
-                                      android:background="@drawable/menu_button"
-                                      android:paddingLeft="40dip"
-                                      android:paddingRight="12dip"
-                                      android:visibility="gone"/>
+        <Gecko.ShapedButton android:id="@+id/menu"
+                            style="@style/AddressBar.ImageButton"
+                            android:layout_width="48dip"
+                            android:layout_alignParentRight="true"
+                            android:gravity="center_vertical"
+                            android:src="@drawable/menu_level"
+                            android:contentDescription="@string/menu"
+                            android:background="@drawable/shaped_button"/>
 
-        <org.mozilla.gecko.TabsButton android:id="@+id/tabs"
-                                      style="@style/AddressBar.ImageButton"
-                                      android:layout_width="98dip"
-                                      android:layout_marginRight="22dip"
-                                      android:layout_alignParentRight="true"
-                                      android:background="@drawable/tabs_button"
-                                      android:gravity="center_vertical"
-                                      android:src="@drawable/tabs_level"
-                                      android:paddingLeft="37dip"
-                                      android:paddingRight="37dip"/>
+        <Gecko.ShapedButton android:id="@+id/tabs"
+                            style="@style/AddressBar.ImageButton"
+                            android:layout_width="72dip"
+                            android:layout_marginRight="48dip"
+                            android:layout_alignParentRight="true"
+                            gecko:curveTowards="right"
+                            android:background="@drawable/shaped_button"
+                            android:gravity="center_vertical"
+                            android:src="@drawable/tabs_level"
+                            android:paddingLeft="37dip"
+                            android:paddingRight="11dip"/>
 
         <Gecko.TextSwitcher android:id="@+id/tabs_count"
                             style="@style/AddressBar.ImageButton"
-                            android:layout_width="98dip"
+                            android:layout_width="44.5dip"
                             android:layout_height="wrap_content"
                             android:layout_marginTop="5dp"
                             android:layout_alignRight="@id/tabs"
                             android:gravity="center_horizontal"/>
 
         <ImageView android:id="@+id/shadow"
                    android:layout_width="fill_parent"
                    android:layout_height="2dp"
--- a/mobile/android/base/resources/layout/gecko_app.xml
+++ b/mobile/android/base/resources/layout/gecko_app.xml
@@ -5,17 +5,17 @@
 
 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                 android:layout_width="fill_parent"
                 android:layout_height="fill_parent">
 
     <org.mozilla.gecko.TabsPanel android:id="@+id/tabs_panel"
                                  android:layout_width="fill_parent"
                                  android:layout_height="fill_parent"
-                                 android:background="@color/background_tabs_light"
+                                 android:background="@color/background_tabs"
                                  android:visibility="invisible"/>
 
    <view class="org.mozilla.gecko.GeckoApp$MainLayout"
          android:id="@+id/main_layout"
          style="@style/Screen.Transparent">
 
         <!-- BrowserToolbar will be added dynamically -->
 
--- a/mobile/android/base/resources/layout/tabs_panel.xml
+++ b/mobile/android/base/resources/layout/tabs_panel.xml
@@ -8,17 +8,17 @@
 
     <RelativeLayout android:id="@+id/tabs_panel_header"
                     android:layout_width="fill_parent"
                     android:layout_height="@dimen/browser_toolbar_height">
 
         <view class="org.mozilla.gecko.TabsPanel$TabsPanelToolbar"
               android:layout_width="fill_parent"
               android:layout_height="fill_parent"
-              android:background="@color/background_tabs_dark">
+              android:background="@color/background_tabs">
 
             <include layout="@layout/tabs_panel_header"/>
 
         </view>
 
         <View android:layout_width="fill_parent"
               android:layout_height="2dp"
               android:layout_alignParentBottom="true"
--- a/mobile/android/base/resources/values/attrs.xml
+++ b/mobile/android/base/resources/values/attrs.xml
@@ -40,20 +40,16 @@
     <declare-styleable name="BrowserToolbarCurve">
         <attr name="curveTowards">
             <flag name="none" value="0x00" />
             <flag name="left" value="0x01" />
             <flag name="right" value ="0x02" />
         </attr>
     </declare-styleable>
 
-    <declare-styleable name="TabsButton">
-        <attr name="cropped" format="boolean"/>
-    </declare-styleable>
-
     <declare-styleable name="TabsTray">
         <attr name="tabs">
             <flag name="tabs_normal" value="0x00" />
             <flag name="tabs_private" value ="0x01" />
         </attr>
     </declare-styleable>
 
     <declare-styleable name="TextSelectionHandle">
--- a/mobile/android/base/resources/values/colors.xml
+++ b/mobile/android/base/resources/values/colors.xml
@@ -3,34 +3,27 @@
    - 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>
   <color name="awesomebar_header_row">#FFD2DAE2</color>
   <color name="awesomebar_header_row_focused">#FFA2AAB2</color>
   <color name="background_normal">#FFCED7DE</color>
   <color name="background_private">#FF292C29</color>
-  <color name="background_tabs_dark">#FF363B40</color>
-  <color name="background_tabs_light">#FF43484E</color>
+  <color name="background_tabs">#FF363B40</color>
   <color name="highlight">#33000000</color>
   <color name="highlight_focused">#1A000000</color>
   <color name="highlight_dark">#33FFFFFF</color>
   <color name="highlight_dark_focused">#1AFFFFFF</color>
 
-  <!-- highlight on tabs button: 20% white over background_tabs_dark -->
-  <color name="highlight_tabs">#FF696D71</color>
-
-  <!-- highlight-focused on tabs button: 10% white over background_tabs_dark -->
-  <color name="highlight_tabs_focused">#FF565B60</color>
+  <!-- highlight on shaped button: 20% white over background_tabs -->
+  <color name="highlight_shaped">#FF696D71</color>
 
-  <!-- highlight on menu button: 20% white over black -->
-  <color name="highlight_menu">#FF333333</color>
-
-  <!-- highlight-focused on menu button: 10% white over black -->
-  <color name="highlight_menu_focused">#FF1A1A1A</color>
+  <!-- highlight-focused on shaped button: 10% white over background_tabs -->
+  <color name="highlight_shaped_focused">#FF565B60</color>
 
   <!-- highlight on nav button: 20% black over background_normal -->
   <color name="highlight_nav">#FFA5ACB2</color>
 
   <!-- highlight-focused on nav button: 10% black over background_normal -->
   <color name="highlight_nav_focused">#FFB9C1C7</color>
 
   <!-- highlight on private nav button: 20% white over background_private -->