Bug 1406874 - Show a color indicator for the selected tab strip on tablet. r=nechen
authorJing-wei Wu <topwu.tw@gmail.com>
Mon, 09 Oct 2017 17:48:19 +0800
changeset 385340 a9d5a7f5b04d94962baa9ba3c8076ac4249b1b8c
parent 385339 71d6058e889b542e489cd7b260e603a979ffee12
child 385341 263a3798a79843f919e310e2eeb72b4fed95fccb
push id32652
push userarchaeopteryx@coole-files.de
push dateTue, 10 Oct 2017 21:49:31 +0000
treeherdermozilla-central@f1ecd5c26948 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersnechen
bugs1406874
milestone58.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 1406874 - Show a color indicator for the selected tab strip on tablet. r=nechen MozReview-Commit-ID: 9vYGxkI9swX
mobile/android/app/src/photon/res/layout/tab_strip_item_view.xml
mobile/android/app/src/photon/res/values-v17/styles.xml
mobile/android/app/src/photon/res/values/colors.xml
mobile/android/app/src/photon/res/values/styles.xml
mobile/android/base/java/org/mozilla/gecko/tabs/TabStripItemView.java
--- a/mobile/android/app/src/photon/res/layout/tab_strip_item_view.xml
+++ b/mobile/android/app/src/photon/res/layout/tab_strip_item_view.xml
@@ -3,47 +3,55 @@
    - 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"
        xmlns:gecko="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        tools:layout_height="@dimen/tablet_tab_strip_item_height"
        tools:layout_width="@dimen/tablet_tab_strip_item_width"
-       tools:orientation="horizontal"
-       tools:parentTag="LinearLayout">
+       tools:parentTag="RelativeLayout">
+
+    <View
+        android:id="@+id/indicator"
+        android:layout_width="@dimen/tablet_tab_strip_item_width"
+        android:layout_height="3dp"
+        android:background="@color/tablet_tab_strip_indicator"
+        android:visibility="gone"
+        tools:visibility="visible"/>
 
     <ImageView
         android:id="@+id/favicon"
         style="@style/TabStrip.Favicon"
         android:layout_width="@dimen/browser_toolbar_favicon_size"
         android:layout_height="@dimen/browser_toolbar_favicon_size"
-        android:layout_gravity="center"
+        android:layout_centerVertical="true"
         android:duplicateParentState="true"
         android:scaleType="centerInside"
         tools:src="@drawable/toolbar_favicon_default"/>
 
-    <org.mozilla.gecko.widget.CheckableFadedSingleColorTextView
-        android:id="@+id/title"
-        android:layout_width="0dip"
-        android:layout_height="match_parent"
-        android:layout_weight="1.0"
-        android:duplicateParentState="true"
-        android:ellipsize="end"
-        android:gravity="center_vertical"
-        android:maxLines="1"
-        android:textColor="@color/tab_strip_item_title"
-        android:textSize="14sp"
-        gecko:fadeWidth="30dip"
-        tools:text="Mozilla"/>
-
     <org.mozilla.gecko.widget.themed.ThemedImageButton
         android:id="@+id/close"
+        style="@style/TabStrip.Close"
         android:layout_width="35dp"
         android:layout_height="match_parent"
         android:background="@android:color/transparent"
         android:contentDescription="@string/close_tab"
         android:duplicateParentState="true"
         android:scaleType="center"
         android:src="@drawable/tab_close"
         gecko:drawableTintList="@color/tab_strip_item_title"/>
 
+    <org.mozilla.gecko.widget.CheckableFadedSingleColorTextView
+        android:id="@+id/title"
+        style="@style/TabStrip.Title"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_centerVertical="true"
+        android:duplicateParentState="true"
+        android:ellipsize="end"
+        android:maxLines="1"
+        android:textColor="@color/tab_strip_item_title"
+        android:textSize="14sp"
+        gecko:fadeWidth="30dip"
+        tools:text="Mozilla"/>
+
 </merge>
--- a/mobile/android/app/src/photon/res/values-v17/styles.xml
+++ b/mobile/android/app/src/photon/res/values-v17/styles.xml
@@ -95,9 +95,20 @@
     <style name="TabsTray.V17.Menu" parent="TabsTray.Base.Menu"/>
 
     <style name="TabStrip.Favicon" parent="TabStrip.V17.Favicon"/>
     <style name="TabStrip.V17.Favicon" parent="TabStrip.Base.Favicon">
         <item name="android:layout_marginStart">12dp</item>
         <item name="android:layout_marginEnd">8dp</item>
     </style>
 
+    <style name="TabStrip.Close" parent="TabStrip.V17.Close"/>
+    <style name="TabStrip.V17.Close" parent="TabStrip.Base">
+        <item name="android:layout_alignParentEnd">true</item>
+    </style>
+
+    <style name="TabStrip.Title" parent="TabStrip.V17.Title"/>
+    <style name="TabStrip.V17.Title" parent="TabStrip.Base">
+        <item name="android:layout_toEndOf">@id/favicon</item>
+        <item name="android:layout_toStartOf">@id/close</item>
+    </style>
+
 </resources>
--- a/mobile/android/app/src/photon/res/values/colors.xml
+++ b/mobile/android/app/src/photon/res/values/colors.xml
@@ -258,11 +258,13 @@
     <color name="top_site_border">#FFCFD9E1</color>
 
     <color name="action_bar_bg_color">@color/toolbar_grey</color>
 
     <color name="activity_stream_subtitle">#FF919191</color>
     <color name="activity_stream_icon">#FF919191</color>
 
     <color name="tablet_tab_strip_divider_color">#737373</color>
+    <color name="tablet_tab_strip_indicator">#0060DF</color>
+    <color name="tablet_tab_strip_indicator_private">#8000D7</color>
 
     <color name="bookmark_folder_bg_color">#FCFCFC</color>
 </resources>
--- a/mobile/android/app/src/photon/res/values/styles.xml
+++ b/mobile/android/app/src/photon/res/values/styles.xml
@@ -956,9 +956,20 @@
 
     <style name="TabStrip.Favicon" parent="TabStrip.V15.Favicon"/>
     <style name="TabStrip.Base.Favicon" parent="TabStrip.Base"/>
     <style name="TabStrip.V15.Favicon" parent="TabStrip.Base.Favicon">
         <item name="android:layout_marginLeft">12dp</item>
         <item name="android:layout_marginRight">8dp</item>
     </style>
 
+    <style name="TabStrip.Close" parent="TabStrip.V15.Close"/>
+    <style name="TabStrip.V15.Close" parent="TabStrip.Base">
+        <item name="android:layout_alignParentRight">true</item>
+    </style>
+
+    <style name="TabStrip.Title" parent="TabStrip.V15.Title"/>
+    <style name="TabStrip.V15.Title" parent="TabStrip.Base">
+        <item name="android:layout_toRightOf">@id/favicon</item>
+        <item name="android:layout_toLeftOf">@id/close</item>
+    </style>
+
 </resources>
--- a/mobile/android/base/java/org/mozilla/gecko/tabs/TabStripItemView.java
+++ b/mobile/android/base/java/org/mozilla/gecko/tabs/TabStripItemView.java
@@ -6,58 +6,58 @@
 package org.mozilla.gecko.tabs;
 
 import org.mozilla.gecko.AboutPages;
 import org.mozilla.gecko.R;
 import org.mozilla.gecko.Tab;
 import org.mozilla.gecko.Tabs;
 import org.mozilla.gecko.annotation.RobocopTarget;
 import org.mozilla.gecko.widget.themed.ThemedImageButton;
-import org.mozilla.gecko.widget.themed.ThemedLinearLayout;
+import org.mozilla.gecko.widget.themed.ThemedRelativeLayout;
 import org.mozilla.gecko.widget.themed.ThemedTextView;
 
 import android.content.Context;
 import android.content.res.ColorStateList;
 import android.content.res.Resources;
 import android.graphics.Bitmap;
 import android.graphics.Color;
 import android.graphics.drawable.Drawable;
 import android.support.v4.graphics.drawable.DrawableCompat;
 import android.support.v4.widget.TextViewCompat;
 import android.util.AttributeSet;
 import android.view.LayoutInflater;
 import android.view.View;
 import android.widget.Checkable;
 import android.widget.ImageView;
 
-public class TabStripItemView extends ThemedLinearLayout
+public class TabStripItemView extends ThemedRelativeLayout
                               implements Checkable {
     private static final String LOGTAG = "GeckoTabStripItem";
 
     private static final int[] STATE_CHECKED = {
         android.R.attr.state_checked
     };
 
     private int id = -1;
     private boolean checked;
 
     private final ImageView faviconView;
     private final ThemedTextView titleView;
     private final ThemedImageButton closeView;
+    private final View indicatorView;
 
     private final int faviconSize;
     private Bitmap lastFavicon;
 
     public TabStripItemView(Context context) {
         this(context, null);
     }
 
     public TabStripItemView(Context context, AttributeSet attrs) {
         super(context, attrs);
-        setOrientation(HORIZONTAL);
 
         final Resources res = context.getResources();
 
         faviconSize = res.getDimensionPixelSize(R.dimen.browser_toolbar_favicon_size);
 
         LayoutInflater.from(context).inflate(R.layout.tab_strip_item_view, this);
         setOnClickListener(new View.OnClickListener() {
             @Override
@@ -80,16 +80,18 @@ public class TabStripItemView extends Th
                 if (id < 0) {
                     throw new IllegalStateException("Invalid tab id:" + id);
                 }
 
                 final Tabs tabs = Tabs.getInstance();
                 tabs.closeTab(tabs.getTab(id), true);
             }
         });
+
+        indicatorView = findViewById(R.id.indicator);
     }
 
     @RobocopTarget
     public int getTabId() {
         return id;
     }
 
     @Override
@@ -148,16 +150,25 @@ public class TabStripItemView extends Th
         }
 
         id = tab.getId();
 
         setChecked(Tabs.getInstance().isSelectedTab(tab));
         updateTitle(tab);
         updateFavicon(tab.getFavicon());
         setPrivateMode(tab.isPrivate());
+
+        if (checked) {
+            indicatorView.setBackgroundResource(isPrivateMode()
+                                                        ? R.color.tablet_tab_strip_indicator_private
+                                                        : R.color.tablet_tab_strip_indicator);
+            indicatorView.setVisibility(VISIBLE);
+        } else {
+            indicatorView.setVisibility(GONE);
+        }
     }
 
     private void updateTitle(Tab tab) {
         final String title;
 
         // Avoid flickering the about:home URL on every load given how often
         // this page is used in the UI.
         if (AboutPages.isAboutHome(tab.getURL())) {