Bug 836043: Use icon-tabs for tab switcher in tabs-ui. [r=mfinkle]

--HG--
extra : rebase_source : efa4b1633f7bbf4bcacc4b2140c759f1666386f6

mobile/android/base/GeckoViewsFactory.java

@@ -5,6 +5,7 @@
 package org.mozilla.gecko;
 
 import org.mozilla.gecko.gfx.LayerView;
+import org.mozilla.gecko.widget.IconTabWidget;
 import org.mozilla.gecko.widget.TabRow;
 import org.mozilla.gecko.widget.ThumbnailView;
 
@@ -80,6 +81,8 @@ public final class GeckoViewsFactory implements LayoutInflater.Factory {
                 return new LinkTextView(context, attrs);
             else if (TextUtils.equals(viewName, "FindInPageBar"))
                 return new FindInPageBar(context, attrs);
+            else if (TextUtils.equals(viewName, "IconTabWidget"))
+                return new IconTabWidget(context, attrs);
             else if (TextUtils.equals(viewName, "MenuButton"))
                 return new MenuButton(context, attrs);
             else if (TextUtils.equals(viewName, "RemoteTabs"))

mobile/android/base/Makefile.in

@@ -183,6 +183,7 @@ FENNEC_JAVA_FILES = \
   ui/SimpleScaleGestureDetector.java \
   ui/SubdocumentScrollHelper.java \
   widget/DateTimePicker.java \
+  widget/IconTabWidget.java \
   widget/TabRow.java \
   widget/ThumbnailView.java \
   GeckoNetworkManager.java \
@@ -409,6 +410,7 @@ RES_LAYOUT = \
   res/layout/remote_tabs_group.xml \
   res/layout/tabs_counter.xml \
   res/layout/tabs_panel_header.xml \
+  res/layout/tabs_panel_indicator.xml \
   res/layout/tabs_row.xml \
   res/layout/list_item_header.xml \
   res/layout/select_dialog_list.xml \
@@ -421,10 +423,6 @@ RES_LAYOUT = \
   res/layout/validation_message.xml \
   $(NULL)
 
-RES_LAYOUT_V11 = \
-  res/layout-v11/tabs_panel_header.xml \
-  $(NULL)
-
 RES_LAYOUT_LARGE_V11 = \
   res/layout-large-v11/doorhangerpopup.xml \
   res/layout-large-v11/site_identity_popup.xml \
@@ -540,6 +538,9 @@ RES_DRAWABLE_BASE = \
   res/drawable/ic_status_logo.png \
   res/drawable/remote_tabs_off.png \
   res/drawable/remote_tabs_on.png \
+  res/drawable/tab_indicator_divider.9.png \
+  res/drawable/tab_indicator_selected.9.png \
+  res/drawable/tab_indicator_selected_focused.9.png \
   res/drawable/spinner_default.9.png \
   res/drawable/spinner_focused.9.png \
   res/drawable/spinner_pressed.9.png \
@@ -576,6 +577,9 @@ RES_DRAWABLE_BASE = \
   res/drawable/site_security_identified.png \
   res/drawable/site_security_verified.png \
   res/drawable/tabs_menu.png \
+  res/drawable/tabs_normal.png \
+  res/drawable/tabs_private.png \
+  res/drawable/tabs_synced.png \
   res/drawable/urlbar_stop.png \
   res/drawable/reader.png \
   res/drawable/reading_list.png \
@@ -633,6 +637,9 @@ RES_DRAWABLE_HDPI = \
   res/drawable-hdpi/ic_status_logo.png \
   res/drawable-hdpi/remote_tabs_off.png \
   res/drawable-hdpi/remote_tabs_on.png \
+  res/drawable-hdpi/tab_indicator_divider.9.png \
+  res/drawable-hdpi/tab_indicator_selected.9.png \
+  res/drawable-hdpi/tab_indicator_selected_focused.9.png \
   res/drawable-hdpi/spinner_default.9.png \
   res/drawable-hdpi/spinner_focused.9.png \
   res/drawable-hdpi/spinner_pressed.9.png \
@@ -669,6 +676,9 @@ RES_DRAWABLE_HDPI = \
   res/drawable-hdpi/site_security_identified.png \
   res/drawable-hdpi/site_security_verified.png \
   res/drawable-hdpi/tabs_menu.png \
+  res/drawable-hdpi/tabs_normal.png \
+  res/drawable-hdpi/tabs_private.png \
+  res/drawable-hdpi/tabs_synced.png \
   res/drawable-hdpi/urlbar_stop.png \
   res/drawable-hdpi/reader.png \
   res/drawable-hdpi/reading_list.png \
@@ -755,9 +765,15 @@ RES_DRAWABLE_XHDPI = \
   res/drawable-xhdpi/menu_item_uncheck.png \
   res/drawable-xhdpi/remote_tabs_off.png \
   res/drawable-xhdpi/remote_tabs_on.png \
+  res/drawable-xhdpi/tab_indicator_divider.9.png \
+  res/drawable-xhdpi/tab_indicator_selected.9.png \
+  res/drawable-xhdpi/tab_indicator_selected_focused.9.png \
   res/drawable-xhdpi/site_security_identified.png \
   res/drawable-xhdpi/site_security_verified.png \
   res/drawable-xhdpi/tabs_menu.png \
+  res/drawable-xhdpi/tabs_normal.png \
+  res/drawable-xhdpi/tabs_private.png \
+  res/drawable-xhdpi/tabs_synced.png \
   res/drawable-xhdpi/validation_arrow.png \
   res/drawable-xhdpi/validation_arrow_inverted.png \
   res/drawable-xhdpi/validation_bg.9.png \
@@ -1008,6 +1024,9 @@ RES_DRAWABLE_XLARGE_MDPI_V11 = \
   res/drawable-xlarge-mdpi-v11/tabs_level.xml \
   res/drawable-xlarge-mdpi-v11/tabs_carat_contracted.png \
   res/drawable-xlarge-mdpi-v11/tabs_carat_expanded.png \
+  res/drawable-xlarge-mdpi-v11/tabs_normal.png \
+  res/drawable-xlarge-mdpi-v11/tabs_private.png \
+  res/drawable-xlarge-mdpi-v11/tabs_synced.png \
   $(NULL)
 
 RES_DRAWABLE_XLARGE_HDPI_V11 = \
@@ -1018,6 +1037,9 @@ RES_DRAWABLE_XLARGE_HDPI_V11 = \
   res/drawable-xlarge-hdpi-v11/menu_pb.png \
   res/drawable-xlarge-hdpi-v11/tabs_carat_contracted.png \
   res/drawable-xlarge-hdpi-v11/tabs_carat_expanded.png \
+  res/drawable-xlarge-hdpi-v11/tabs_normal.png \
+  res/drawable-xlarge-hdpi-v11/tabs_private.png \
+  res/drawable-xlarge-hdpi-v11/tabs_synced.png \
   $(NULL)
 
 RES_DRAWABLE_XLARGE_XHDPI_V11 = \
@@ -1028,6 +1050,9 @@ RES_DRAWABLE_XLARGE_XHDPI_V11 = \
   res/drawable-xlarge-xhdpi-v11/menu_pb.png \
   res/drawable-xlarge-xhdpi-v11/tabs_carat_contracted.png \
   res/drawable-xlarge-xhdpi-v11/tabs_carat_expanded.png \
+  res/drawable-xlarge-xhdpi-v11/tabs_normal.png \
+  res/drawable-xlarge-xhdpi-v11/tabs_private.png \
+  res/drawable-xlarge-xhdpi-v11/tabs_synced.png \
   $(NULL)
 
 RES_COLOR = \
@@ -1041,7 +1066,6 @@ RES_MENU = \
   res/menu/awesomebar_contextmenu.xml \
   res/menu/gecko_app_menu.xml \
   res/menu/tabs_menu.xml \
-  res/menu/tabs_switcher_menu.xml \
   res/menu/titlebar_contextmenu.xml \
   res/menu/abouthome_topsites_contextmenu.xml \
   res/menu-v11/tabs_menu.xml \
@@ -1097,6 +1121,7 @@ MOZ_ANDROID_DRAWABLES += \
   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/tabs_tray_bg_repeat.xml                \
   mobile/android/base/resources/drawable/tabs_tray_selected_bg_repeat.xml       \
   mobile/android/base/resources/drawable/shadow.png                             \
@@ -1108,7 +1133,7 @@ MOZ_BRANDING_DRAWABLE_MDPI = $(shell if test -e $(topsrcdir)/$(MOZ_BRANDING_DIRE
 MOZ_BRANDING_DRAWABLE_HDPI = $(shell if test -e $(topsrcdir)/$(MOZ_BRANDING_DIRECTORY)/android-resources-hdpi.mn; then cat $(topsrcdir)/$(MOZ_BRANDING_DIRECTORY)/android-resources-hdpi.mn | tr '\n' ' ';  fi)
 MOZ_BRANDING_DRAWABLE_XHDPI = $(shell if test -e $(topsrcdir)/$(MOZ_BRANDING_DIRECTORY)/android-resources-xhdpi.mn; then cat $(topsrcdir)/$(MOZ_BRANDING_DIRECTORY)/android-resources-xhdpi.mn | tr '\n' ' ';  fi)
 
-RESOURCES=$(RES_LAYOUT) $(RES_LAYOUT_V11) $(RES_LAYOUT_LARGE_V11) $(RES_LAYOUT_XLARGE_V11) $(RES_VALUES) $(RES_VALUES_LAND) $(RES_VALUES_V11) $(RES_VALUES_LARGE_V11) $(RES_VALUES_XLARGE_V11) $(RES_VALUES_LAND_V14) $(RES_XML) $(RES_ANIM) $(RES_DRAWABLE_NODPI) $(RES_DRAWABLE_BASE) $(RES_DRAWABLE_LDPI) $(RES_DRAWABLE_HDPI) $(RES_DRAWABLE_XHDPI) $(RES_DRAWABLE_MDPI_V11) $(RES_DRAWABLE_HDPI_V11) $(RES_DRAWABLE_XHDPI_V11) $(RES_DRAWABLE_LAND_V14) $(RES_DRAWABLE_LAND_MDPI_V14) $(RES_DRAWABLE_LAND_HDPI_V14) $(RES_DRAWABLE_LAND_XHDPI_V14) $(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)
+RESOURCES=$(RES_LAYOUT) $(RES_LAYOUT_LARGE_V11) $(RES_LAYOUT_XLARGE_V11) $(RES_VALUES) $(RES_VALUES_LAND) $(RES_VALUES_V11) $(RES_VALUES_LARGE_V11) $(RES_VALUES_XLARGE_V11) $(RES_VALUES_LAND_V14) $(RES_XML) $(RES_ANIM) $(RES_DRAWABLE_NODPI) $(RES_DRAWABLE_BASE) $(RES_DRAWABLE_LDPI) $(RES_DRAWABLE_HDPI) $(RES_DRAWABLE_XHDPI) $(RES_DRAWABLE_MDPI_V11) $(RES_DRAWABLE_HDPI_V11) $(RES_DRAWABLE_XHDPI_V11) $(RES_DRAWABLE_LAND_V14) $(RES_DRAWABLE_LAND_MDPI_V14) $(RES_DRAWABLE_LAND_HDPI_V14) $(RES_DRAWABLE_LAND_XHDPI_V14) $(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)
 
 RES_DIRS= \
   res/layout                    \
@@ -1116,7 +1141,6 @@ RES_DIRS= \
   res/layout-large-v11          \
   res/layout-xlarge-v11         \
   res/layout-xlarge-land-v11    \
-  res/layout-v11                \
   res/values                    \
   res/values-v11                \
   res/values-large-v11          \

mobile/android/base/TabsPanel.java

@@ -5,6 +5,8 @@
 
 package org.mozilla.gecko;
 
+import org.mozilla.gecko.widget.IconTabWidget;
+
 import android.content.Context;
 import android.content.res.TypedArray;
 import android.graphics.Color;
@@ -17,16 +19,14 @@ import android.view.MenuItem;
 import android.view.View;
 import android.view.ViewGroup;
 import android.widget.Button;
-import android.widget.AdapterView;
 import android.widget.FrameLayout;
 import android.widget.ImageButton;
 import android.widget.LinearLayout;
-import android.widget.Spinner;
 
 public class TabsPanel extends LinearLayout
                        implements GeckoPopupMenu.OnMenuItemClickListener,
                                   LightweightTheme.OnChangeListener,
-                                  AdapterView.OnItemSelectedListener {
+                                  IconTabWidget.OnTabChangedListener {
     private static final String LOGTAG = "GeckoTabsPanel";
 
     public static enum Panel {
@@ -55,18 +55,13 @@ public class TabsPanel extends LinearLayout
     private LinearLayout mFooter;
     private TabsLayoutChangeListener mLayoutChangeListener;
 
+    private IconTabWidget mTabWidget;
     private static ImageButton mMenuButton;
     private static ImageButton mAddTab;
-    private Button mTabsMenuButton;
-    private Spinner mTabsSpinner;
 
     private Panel mCurrentPanel;
     private boolean mIsSideBar;
     private boolean mVisible;
-    private boolean mInflated;
-
-    private GeckoPopupMenu mTabsPopupMenu;
-    private Menu mTabsMenu;
 
     private GeckoPopupMenu mPopupMenu;
     private Menu mMenu;
@@ -92,31 +87,11 @@ public class TabsPanel extends LinearLayout
         mPopupMenu.setOnMenuItemClickListener(this);
         mMenu = mPopupMenu.getMenu();
 
-        mTabsPopupMenu = new GeckoPopupMenu(context);
-        mTabsPopupMenu.inflate(R.menu.tabs_switcher_menu);
-        mTabsPopupMenu.setOnMenuItemClickListener(this);
-        mTabsPopupMenu.showArrowToAnchor(false);
-        mTabsMenu = mTabsPopupMenu.getMenu();
-
         LayoutInflater.from(context).inflate(R.layout.tabs_panel, this);
-    }
-
-    @Override
-    protected void onFinishInflate() {
-        super.onFinishInflate();
-
-        // HACK: Without this, the onFinishInflate is called twice
-        // This issue is due to a bug when Android inflates a layout with a
-        // parent. Fixed in Honeycomb
-        if (mInflated)
-            return;
-
-        mInflated = true;
-
         initialize();
     }
 
-    void initialize() {
+    private void initialize() {
         mPanelNormal = (TabsTray) findViewById(R.id.normal_tabs);
         mPanelNormal.setTabsPanel(this);
 
@@ -135,16 +110,11 @@ public class TabsPanel extends LinearLayout
             }
         });
 
-        mTabsSpinner = (Spinner) findViewById(R.id.tabs_menu);
+        mTabWidget = (IconTabWidget) findViewById(R.id.tab_widget);
-        mTabsSpinner.setOnItemSelectedListener(this);
+        mTabWidget.addTab(R.drawable.tabs_normal);
-
+        mTabWidget.addTab(R.drawable.tabs_private);
-        mTabsMenuButton = (Button) findViewById(R.id.tabs_switcher_menu);
+        mTabWidget.addTab(R.drawable.tabs_synced);
-        mTabsPopupMenu.setAnchor(mTabsMenuButton);
+        mTabWidget.setTabSelectionListener(this);
-        mTabsMenuButton.setOnClickListener(new Button.OnClickListener() {
-            public void onClick(View view) {
-                TabsPanel.this.openTabsSwitcherMenu();
-            }
-        });
 
         mMenuButton = (ImageButton) findViewById(R.id.menu);
         mMenuButton.setOnClickListener(new Button.OnClickListener() {
@@ -174,46 +144,19 @@ public class TabsPanel extends LinearLayout
         mPopupMenu.show();
     }
 
-    public void openTabsSwitcherMenu() {
-        mTabsPopupMenu.show();
-    }
-
     @Override
-    public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
+    public void onTabChanged(int index) {
-        if (!mVisible)
+        if (index == 0)
-            return;
+            show(Panel.NORMAL_TABS);
-
+        else if (index == 1)
-        Panel panel = TabsPanel.Panel.NORMAL_TABS;
+            show(Panel.PRIVATE_TABS);
-        if (position == 1)
+        else
-            panel = TabsPanel.Panel.PRIVATE_TABS;
+            show(Panel.REMOTE_TABS);
-        else if (position == 2)
-            panel = TabsPanel.Panel.REMOTE_TABS;
-
-        if (panel != mCurrentPanel)
-            show(panel);
-    }
-
-    @Override
-    public void onNothingSelected(AdapterView<?> parent) {
     }
 
     @Override
     public boolean onMenuItemClick(MenuItem item) {
         switch (item.getItemId()) {
-            case R.id.tabs_normal:
-                show(Panel.NORMAL_TABS);
-                return true;
-
-            case R.id.tabs_private:
-                mTabsMenuButton.setText(R.string.tabs_private);
-                show(Panel.PRIVATE_TABS);
-                return true;
-
-            case R.id.tabs_synced:
-                mTabsMenuButton.setText(R.string.tabs_synced);
-                show(Panel.REMOTE_TABS);
-                return true;
-
             case R.id.close_all_tabs:
                 for (Tab tab : Tabs.getInstance().getTabsInOrder()) {
                     Tabs.getInstance().closeTab(tab);
@@ -360,17 +303,14 @@ public class TabsPanel extends LinearLayout
         mCurrentPanel = panel;
 
         int index = panel.ordinal();
-        mTabsSpinner.setSelection(index);
+        mTabWidget.setCurrentTab(index);
 
         if (index == 0) {
             mPanel = mPanelNormal;
-            mTabsMenuButton.setText(R.string.tabs_normal);
         } else if (index == 1) {
             mPanel = mPanelPrivate;
-            mTabsMenuButton.setText(R.string.tabs_private);
         } else {
             mPanel = mPanelRemote;
-            mTabsMenuButton.setText(R.string.tabs_synced);
         }
 
         mPanel.show();

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

@@ -0,0 +1,48 @@
+<?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_focused="false"
+          android:state_selected="false"
+          android:state_pressed="false"
+          android:drawable="@color/tab_indicator_unselected"/>
+
+    <item android:state_focused="false"
+          android:state_selected="true"
+          android:state_pressed="false"
+          android:drawable="@drawable/tab_indicator_selected"/>
+
+    <item android:state_focused="true"
+          android:state_selected="false"
+          android:state_pressed="false"
+          android:drawable="@color/tab_indicator_unselected_focused"/>
+
+    <item android:state_focused="true"
+          android:state_selected="true"
+          android:state_pressed="false"
+          android:drawable="@drawable/tab_indicator_selected_focused"/>
+
+    <item android:state_focused="false"
+          android:state_selected="false"
+          android:state_pressed="true"
+          android:drawable="@drawable/highlight"/>
+
+    <item android:state_focused="false"
+          android:state_selected="true"
+          android:state_pressed="true"
+          android:drawable="@drawable/highlight"/>
+
+    <item android:state_focused="true"
+          android:state_selected="false"
+          android:state_pressed="true"
+          android:drawable="@drawable/highlight"/>
+
+    <item android:state_focused="true"
+          android:state_selected="true"
+          android:state_pressed="true"
+          android:drawable="@drawable/highlight"/>
+
+</selector>

mobile/android/base/resources/layout-v11/tabs_panel_header.xml

@@ -1,46 +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/. -->
-
-<merge xmlns:android="http://schemas.android.com/apk/res/android">
-
-    <Button android:id="@id/tabs_switcher_menu"
-            android:layout_width="0dip"
-            android:layout_height="0dip"
-            android:visibility="gone"/>
-
-    <Spinner android:id="@+id/tabs_menu"
-             android:layout_width="wrap_content"
-             android:layout_height="fill_parent"
-             android:minWidth="200dp"
-             android:gravity="left"
-             android:background="@drawable/spinner"
-             android:popupBackground="@drawable/menu_popup_bg"
-             android:dropDownHorizontalOffset="0dip"
-             android:dropDownSelector="@drawable/action_bar_button"
-             android:entries="@array/tabs_panel_spinner"/>
-
-    <View android:layout_width="0dip"
-          android:layout_height="fill_parent"
-          android:layout_weight="1.0"/>
-
-    <ImageButton android:id="@+id/add_tab"
-                 style="@style/AddressBar.ImageButton"
-                 android:layout_width="@dimen/browser_toolbar_height"
-                 android:layout_height="@dimen/browser_toolbar_height"
-                 android:padding="@dimen/browser_toolbar_button_padding"
-                 android:src="@drawable/tab_new_level"
-                 android:contentDescription="@string/new_tab"
-                 android:background="@drawable/action_bar_button"/>
-
-    <ImageButton android:id="@+id/menu"
-                 style="@style/AddressBar.ImageButton"
-                 android:layout_width="@dimen/browser_toolbar_height"
-                 android:layout_height="@dimen/browser_toolbar_height"
-                 android:padding="@dimen/browser_toolbar_button_padding"
-                 android:src="@drawable/tabs_menu"
-                 android:contentDescription="@string/menu"
-                 android:background="@drawable/action_bar_button"/>
-
-</merge>

mobile/android/base/resources/layout-xlarge-v11/tabs_panel_header.xml

@@ -5,20 +5,10 @@
 
 <merge xmlns:android="http://schemas.android.com/apk/res/android">
 
-    <Button android:id="@id/tabs_switcher_menu"
+    <Gecko.IconTabWidget android:id="@+id/tab_widget"
-            android:layout_width="0dip"
+                         android:layout_width="wrap_content"
-            android:layout_height="0dip"
+                         android:layout_height="fill_parent"
-            android:visibility="gone"/>
+                         android:tabStripEnabled="false"
-
+                         android:divider="@drawable/tab_indicator_divider"/>
-    <Spinner android:id="@+id/tabs_menu"
-             android:layout_width="fill_parent"
-             android:layout_height="fill_parent"
-             android:layout_marginLeft="12dp"
-             android:layout_marginRight="12dp"
-             android:background="@drawable/spinner"
-             android:popupBackground="@drawable/menu_popup_bg"
-             android:dropDownHorizontalOffset="0dip"
-             android:dropDownSelector="@drawable/action_bar_button"
-             android:entries="@array/tabs_panel_spinner"/>
 
 </merge>

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

@@ -5,22 +5,11 @@
 
 <merge xmlns:android="http://schemas.android.com/apk/res/android">
 
-    <Spinner android:id="@+id/tabs_menu"
+    <Gecko.IconTabWidget android:id="@+id/tab_widget"
-             android:layout_width="0dip"
+                         android:layout_width="wrap_content"
-             android:layout_height="0dip"
+                         android:layout_height="fill_parent"
-             android:visibility="gone"/>
+                         android:tabStripEnabled="false"
-
+                         android:divider="@drawable/tab_indicator_divider"/>
-    <Button android:id="@+id/tabs_switcher_menu"
-            android:layout_width="wrap_content"
-            android:layout_height="fill_parent"
-            android:minWidth="200dp"
-            android:gravity="left|center_vertical"
-            android:textColor="#FFFFFFFF"
-            android:textSize="18sp"
-            android:text="@string/tabs_normal"
-            android:paddingLeft="12dp"
-            android:paddingRight="12dp"
-            android:background="@drawable/spinner"/>
 
     <View android:layout_width="0dip"
           android:layout_height="fill_parent"

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

@@ -0,0 +1,11 @@
+<?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/. -->
+
+<ImageButton xmlns:android="http://schemas.android.com/apk/res/android"
+             style="@style/AddressBar.ImageButton"
+             android:layout_width="@dimen/browser_toolbar_height"
+             android:layout_height="@dimen/browser_toolbar_height"
+             android:padding="@dimen/browser_toolbar_button_padding"
+             android:background="@drawable/tabs_panel_indicator"/>

mobile/android/base/resources/menu/tabs_switcher_menu.xml

@@ -1,17 +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/. -->
-
-<menu xmlns:android="http://schemas.android.com/apk/res/android">
-
-    <item android:id="@+id/tabs_normal"
-          android:title="@string/tabs_normal"/>
-
-    <item android:id="@+id/tabs_private"
-          android:title="@string/tabs_private"/>
-
-    <item android:id="@+id/tabs_synced"
-          android:title="@string/tabs_synced"/>
-
-</menu>

mobile/android/base/widget/IconTabWidget.java

@@ -0,0 +1,59 @@
+/* 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.widget;
+
+import org.mozilla.gecko.R;
+
+import android.content.Context;
+import android.util.AttributeSet;
+import android.view.LayoutInflater;
+import android.view.View;
+import android.widget.ImageButton;
+import android.widget.TabWidget;
+
+public class IconTabWidget extends TabWidget {
+    private Context mContext;
+    private OnTabChangedListener mListener;
+
+    public static interface OnTabChangedListener {
+        public void onTabChanged(int tabIndex);
+    }
+
+    public IconTabWidget(Context context, AttributeSet attrs) {
+        super(context, attrs);
+        mContext = context;
+    }
+
+    public void addTab(int resId) {
+        ImageButton button = (ImageButton) LayoutInflater.from(mContext).inflate(R.layout.tabs_panel_indicator, null);
+        button.setImageResource(resId);
+
+        addView(button);
+        button.setOnClickListener(new TabClickListener(getTabCount() - 1));
+        button.setOnFocusChangeListener(this);
+    }
+
+    public void setTabSelectionListener(OnTabChangedListener listener) {
+        mListener = listener;
+    }
+
+    @Override
+    public void onFocusChange(View view, boolean hasFocus) {
+    }
+
+    private class TabClickListener implements OnClickListener {
+        private final int mIndex;
+
+        public TabClickListener(int index) {
+            mIndex = index;
+        }
+
+        @Override
+        public void onClick(View view) {
+            if (mListener != null)
+                mListener.onTabChanged(mIndex);
+        }
+    }
+}