Bug 1406874 - Show a color indicator for the selected tab strip on tablet. r?nechen draft
authorJing-wei Wu <topwu.tw@gmail.com>
Mon, 09 Oct 2017 17:48:19 +0800
changeset 676692 f6b1450d665870fb193754da9f26ed094da50484
parent 676688 9b36493f531f6737011c6f97443dc89183ffa2fe
child 735020 53939d37ae99a8bc89cd0efe15078a7e6fda6c98
push id83587
push userbmo:topwu.tw@gmail.com
push dateMon, 09 Oct 2017 09:49:16 +0000
reviewersnechen
bugs1406874
milestone58.0a1
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
@@ -99,9 +99,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
@@ -960,9 +960,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())) {