Bug 1379021 - Update top sites layout to match updated UI mocks. r=mcomella
authorSebastian Kaspari <s.kaspari@gmail.com>
Wed, 19 Jul 2017 14:27:38 +0200
changeset 419830 561a65c7698fec4293e3ee1184f8996e802bd220
parent 419829 21ac985081fd57393b47e57a25bd5824bb918d19
child 419831 a6bd93dfdbd87ccb23f0f03a08c0b529daf19b95
push id7566
push usermtabara@mozilla.com
push dateWed, 02 Aug 2017 08:25:16 +0000
treeherdermozilla-beta@86913f512c3c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmcomella
bugs1379021
milestone56.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 1379021 - Update top sites layout to match updated UI mocks. r=mcomella MozReview-Commit-ID: JA2xMC2IONJ
mobile/android/app/src/australis/res/values/colors.xml
mobile/android/app/src/australis/res/values/dimens.xml
mobile/android/app/src/main/res/layout/activity_stream_card_history_item.xml
mobile/android/app/src/main/res/layout/activity_stream_topsites_card.xml
mobile/android/app/src/main/res/values/vpi__attrs.xml
mobile/android/app/src/main/res/values/vpi__defaults.xml
mobile/android/app/src/photon/res/values/colors.xml
mobile/android/base/java/org/mozilla/gecko/activitystream/homepanel/topsites/TopSitesCard.java
mobile/android/base/java/org/mozilla/gecko/activitystream/homepanel/topsites/TopSitesPageAdapter.java
--- a/mobile/android/app/src/australis/res/values/colors.xml
+++ b/mobile/android/app/src/australis/res/values/colors.xml
@@ -139,17 +139,16 @@
   <!-- Top sites thumbnail colors -->
   <color name="top_site_default">#FFECF0F3</color>
   <color name="top_site_border">#FFCFD9E1</color>
 
   <color name="private_active_text">#FFFFFF</color>
 
   <color name="action_bar_bg_color">@color/toolbar_grey</color>
 
-  <color name="activity_stream_divider">#FFD2D2D2</color>
   <color name="activity_stream_subtitle">#FF919191</color>
   <color name="activity_stream_timestamp">#FFD3D3D3</color>
   <color name="activity_stream_icon">#FF919191</color>
 
   <color name="tablet_tab_strip_divider_color">#555555</color>
 
   <color name="bookmark_folder_bg_color">#FCFCFC</color>
 </resources>
--- a/mobile/android/app/src/australis/res/values/dimens.xml
+++ b/mobile/android/app/src/australis/res/values/dimens.xml
@@ -220,17 +220,17 @@
     <item name="match_parent" type="dimen">-1</item>
     <item name="wrap_content" type="dimen">-2</item>
 
     <item name="tab_strip_content_start" type="dimen">12dp</item>
     <item name="firstrun_tab_strip_content_start" type="dimen">15dp</item>
 
     <item name="notification_media_cover" type="dimen">128dp</item>
 
-    <item name="activity_stream_base_margin" type="dimen">10dp</item>
+    <item name="activity_stream_base_margin" type="dimen">8dp</item>
     <item name="activity_stream_desired_tile_width" type="dimen">90dp</item>
     <item name="activity_stream_desired_tile_height" type="dimen">70dp</item>
     <item name="activity_stream_top_sites_text_height" type="dimen">30dp</item>
 
     <!-- Default touch target size for buttons/imageviews that might be of small size -->
     <item name="touch_target_size" type="dimen">48dp</item>
 
     <!-- Custom tabs -->
--- a/mobile/android/app/src/main/res/layout/activity_stream_card_history_item.xml
+++ b/mobile/android/app/src/main/res/layout/activity_stream_card_history_item.xml
@@ -24,16 +24,17 @@
             android:layout_width="wrap_content"
             android:layout_height="wrap_content">
 
             <org.mozilla.gecko.widget.FaviconView
                 android:id="@+id/icon"
                 android:layout_width="@dimen/favicon_bg"
                 android:layout_height="@dimen/favicon_bg"
                 android:layout_marginStart="@dimen/activity_stream_base_margin"
+                android:layout_marginLeft="@dimen/activity_stream_base_margin"
                 android:layout_marginTop="@dimen/activity_stream_base_margin"
                 android:layout_marginBottom="@dimen/activity_stream_base_margin"
                 android:layout_gravity="center"
                 gecko:enableRoundCorners="false"
                 tools:background="@drawable/favicon_globe" />
 
         </FrameLayout>
 
--- a/mobile/android/app/src/main/res/layout/activity_stream_topsites_card.xml
+++ b/mobile/android/app/src/main/res/layout/activity_stream_topsites_card.xml
@@ -1,62 +1,33 @@
 <?xml version="1.0" encoding="utf-8"?>
-<org.mozilla.gecko.widget.FilledCardView xmlns:android="http://schemas.android.com/apk/res/android"
+<FrameLayout
+    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"
-    android:layout_width="wrap_content"
-    android:layout_height="wrap_content">
-
-    <RelativeLayout
-        android:id="@+id/content"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:background="?android:attr/selectableItemBackground">
+    android:layout_width="match_parent"
+    android:layout_height="match_parent">
 
-        <org.mozilla.gecko.widget.FaviconView
-            android:id="@+id/favicon"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:layout_above="@+id/title"
-            android:layout_alignParentTop="true"
-            android:layout_centerHorizontal="true"
-            android:layout_gravity="center"
-            gecko:enableRoundCorners="false"
-            tools:background="@drawable/favicon_globe" />
-
-        <View
-            android:layout_width="match_parent"
-            android:layout_height="0.5dp"
-            android:layout_below="@id/favicon"
-            android:background="@color/activity_stream_divider" />
+    <org.mozilla.gecko.widget.FaviconView
+        android:id="@+id/favicon"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        gecko:enableRoundCorners="false"
+        tools:background="@drawable/favicon_globe"
+        android:layout_marginTop="0dp" />
 
-        <TextView
-            android:id="@+id/title"
-            android:drawablePadding="2dp"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_alignParentBottom="true"
-            android:layout_alignParentEnd="true"
-            android:layout_alignParentLeft="true"
-            android:layout_alignParentRight="true"
-            android:layout_alignParentStart="true"
-            android:ellipsize="end"
-            android:gravity="center"
-            android:lines="1"
-            android:padding="4dp"
-            android:textSize="12sp"
-            android:textColor="@android:color/black"
-            tools:text="Lorem Ipsum here is a title" />
+    <TextView
+        android:id="@+id/title"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:background="#66000000"
+        android:padding="5dp"
+        android:drawablePadding="2dp"
+        android:maxLines="1"
+        android:singleLine="true"
+        android:ellipsize="end"
+        android:gravity="center"
+        android:textColor="@android:color/white"
+        android:textSize="12sp"
+        android:layout_gravity="bottom"
+        tools:text="Lorem Ipsum here is a title" />
 
-        <ImageView
-            android:id="@+id/menu"
-            android:layout_width="wrap_content"
-            android:layout_height="28dp"
-            android:layout_alignParentEnd="true"
-            android:layout_alignParentRight="true"
-            android:layout_alignParentTop="true"
-            android:layout_gravity="right|end|top"
-            android:padding="6dp"
-            android:contentDescription="@string/menu"
-            android:src="@drawable/menu" />
-
-    </RelativeLayout>
-</org.mozilla.gecko.widget.FilledCardView>
\ No newline at end of file
+</FrameLayout>
deleted file mode 100644
--- a/mobile/android/app/src/main/res/values/vpi__attrs.xml
+++ /dev/null
@@ -1,59 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Copyright (C) 2012 Jake Wharton
-     Copyright (C) 2011 Patrik Ã…kerfeldt
-
-     Licensed under the Apache License, Version 2.0 (the "License");
-     you may not use this file except in compliance with the License.
-     You may obtain a copy of the License at
-
-          http://www.apache.org/licenses/LICENSE-2.0
-
-     Unless required by applicable law or agreed to in writing, software
-     distributed under the License is distributed on an "AS IS" BASIS,
-     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     See the License for the specific language governing permissions and
-     limitations under the License.
--->
-
-<resources>
-    <declare-styleable name="ViewPagerIndicator">
-        <!-- Style of the circle indicator. -->
-        <attr name="vpiCirclePageIndicatorStyle" format="reference"/>
-        <!-- Style of the icon indicator's views. -->
-        <attr name="vpiIconPageIndicatorStyle" format="reference"/>
-        <!-- Style of the line indicator. -->
-        <attr name="vpiLinePageIndicatorStyle" format="reference"/>
-        <!-- Style of the title indicator. -->
-        <attr name="vpiTitlePageIndicatorStyle" format="reference"/>
-        <!-- Style of the tab indicator's tabs. -->
-        <attr name="vpiTabPageIndicatorStyle" format="reference"/>
-        <!-- Style of the underline indicator. -->
-        <attr name="vpiUnderlinePageIndicatorStyle" format="reference"/>
-    </declare-styleable>
-
-    <attr name="centered" format="boolean" />
-    <attr name="selectedColor" format="color" />
-    <attr name="strokeWidth" format="dimension" />
-    <attr name="unselectedColor" format="color" />
-
-    <declare-styleable name="CirclePageIndicator">
-        <!-- Whether or not the indicators should be centered. -->
-        <attr name="centered" />
-        <!-- Color of the filled circle that represents the current page. -->
-        <attr name="fillColor" format="color" />
-        <!-- Color of the filled circles that represents pages. -->
-        <attr name="pageColor" format="color" />
-        <!-- Orientation of the indicator. -->
-        <attr name="android:orientation"/>
-        <!-- Radius of the circles. This is also the spacing between circles. -->
-        <attr name="radius" format="dimension" />
-        <!-- Whether or not the selected indicator snaps to the circles. -->
-        <attr name="snap" format="boolean" />
-        <!-- Color of the open circles. -->
-        <attr name="strokeColor" format="color" />
-        <!-- Width of the stroke used to draw the circles. -->
-        <attr name="strokeWidth" />
-        <!-- View background -->
-        <attr name="android:background"/>
-    </declare-styleable>
-</resources>
deleted file mode 100644
--- a/mobile/android/app/src/main/res/values/vpi__defaults.xml
+++ /dev/null
@@ -1,26 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Copyright (C) 2012 Jake Wharton
-
-     Licensed under the Apache License, Version 2.0 (the "License");
-     you may not use this file except in compliance with the License.
-     You may obtain a copy of the License at
-
-          http://www.apache.org/licenses/LICENSE-2.0
-
-     Unless required by applicable law or agreed to in writing, software
-     distributed under the License is distributed on an "AS IS" BASIS,
-     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     See the License for the specific language governing permissions and
-     limitations under the License.
--->
-
-<resources>
-    <bool name="default_circle_indicator_centered">true</bool>
-    <color name="default_circle_indicator_fill_color">#FFFFFFFF</color>
-    <color name="default_circle_indicator_page_color">#00000000</color>
-    <integer name="default_circle_indicator_orientation">0</integer>
-    <dimen name="default_circle_indicator_radius">3dp</dimen>
-    <bool name="default_circle_indicator_snap">false</bool>
-    <color name="default_circle_indicator_stroke_color">#FFDDDDDD</color>
-    <dimen name="default_circle_indicator_stroke_width">1dp</dimen>
-</resources>
\ No newline at end of file
--- a/mobile/android/app/src/photon/res/values/colors.xml
+++ b/mobile/android/app/src/photon/res/values/colors.xml
@@ -230,17 +230,16 @@
     <!-- Top sites thumbnail colors -->
     <color name="top_site_default">#FFECF0F3</color>
     <color name="top_site_border">#FFCFD9E1</color>
 
     <color name="private_active_text">#FFFFFF</color>
 
     <color name="action_bar_bg_color">@color/toolbar_grey</color>
 
-    <color name="activity_stream_divider">#FFD2D2D2</color>
     <color name="activity_stream_subtitle">#FF919191</color>
     <color name="activity_stream_timestamp">#FFD3D3D3</color>
     <color name="activity_stream_icon">#FF919191</color>
 
     <color name="tablet_tab_strip_divider_color">#555555</color>
 
     <color name="bookmark_folder_bg_color">#FCFCFC</color>
 </resources>
--- a/mobile/android/base/java/org/mozilla/gecko/activitystream/homepanel/topsites/TopSitesCard.java
+++ b/mobile/android/base/java/org/mozilla/gecko/activitystream/homepanel/topsites/TopSitesCard.java
@@ -5,87 +5,84 @@
 package org.mozilla.gecko.activitystream.homepanel.topsites;
 
 import android.graphics.Color;
 import android.graphics.drawable.Drawable;
 import android.support.v4.widget.TextViewCompat;
 import android.support.v7.widget.RecyclerView;
 import android.view.View;
 import android.widget.FrameLayout;
-import android.widget.ImageView;
 import android.widget.TextView;
 
 import org.mozilla.gecko.R;
 import org.mozilla.gecko.Telemetry;
 import org.mozilla.gecko.TelemetryContract;
 import org.mozilla.gecko.activitystream.ActivityStream;
 import org.mozilla.gecko.activitystream.ActivityStreamTelemetry;
-import org.mozilla.gecko.home.HomePager;
 import org.mozilla.gecko.activitystream.homepanel.menu.ActivityStreamContextMenu;
 import org.mozilla.gecko.activitystream.homepanel.model.TopSite;
+import org.mozilla.gecko.home.HomePager;
 import org.mozilla.gecko.icons.IconCallback;
 import org.mozilla.gecko.icons.IconResponse;
 import org.mozilla.gecko.icons.Icons;
 import org.mozilla.gecko.util.DrawableUtil;
 import org.mozilla.gecko.util.ViewUtil;
-import org.mozilla.gecko.util.TouchTargetUtil;
 import org.mozilla.gecko.widget.FaviconView;
 
 import java.util.concurrent.Future;
 
 /* package-local */ class TopSitesCard extends RecyclerView.ViewHolder
         implements IconCallback {
     private final FaviconView faviconView;
 
     private final TextView title;
-    private final ImageView menuButton;
     private Future<IconResponse> ongoingIconLoad;
 
     private TopSite topSite;
     private int absolutePosition;
 
     private final HomePager.OnUrlOpenListener onUrlOpenListener;
     private final HomePager.OnUrlOpenInBackgroundListener onUrlOpenInBackgroundListener;
 
-    /* package-local */ TopSitesCard(FrameLayout card, final HomePager.OnUrlOpenListener onUrlOpenListener, final HomePager.OnUrlOpenInBackgroundListener onUrlOpenInBackgroundListener) {
+    /* package-local */ TopSitesCard(final FrameLayout card, final HomePager.OnUrlOpenListener onUrlOpenListener, final HomePager.OnUrlOpenInBackgroundListener onUrlOpenInBackgroundListener) {
         super(card);
 
         faviconView = (FaviconView) card.findViewById(R.id.favicon);
 
         title = (TextView) card.findViewById(R.id.title);
-        menuButton = (ImageView) card.findViewById(R.id.menu);
 
         this.onUrlOpenListener = onUrlOpenListener;
         this.onUrlOpenInBackgroundListener = onUrlOpenInBackgroundListener;
 
-        TouchTargetUtil.ensureTargetHitArea(menuButton, card);
-        menuButton.setOnClickListener(new View.OnClickListener() {
+        card.setOnLongClickListener(new View.OnLongClickListener() {
             @Override
-            public void onClick(View v) {
+            public boolean onLongClick(View v) {
                 ActivityStreamTelemetry.Extras.Builder extras = ActivityStreamTelemetry.Extras.builder()
                         .forTopSite(topSite)
                         .set(ActivityStreamTelemetry.Contract.ACTION_POSITION, absolutePosition);
 
                 ActivityStreamContextMenu.show(itemView.getContext(),
-                        menuButton,
+                        card,
                         extras,
                         ActivityStreamContextMenu.MenuMode.TOPSITE,
                         topSite,
                         onUrlOpenListener, onUrlOpenInBackgroundListener,
                         faviconView.getWidth(), faviconView.getHeight());
 
                 Telemetry.sendUIEvent(
                         TelemetryContract.Event.SHOW,
                         TelemetryContract.Method.CONTEXT_MENU,
                         extras.build()
                 );
+
+                return true;
             }
         });
 
-        ViewUtil.enableTouchRipple(menuButton);
+        ViewUtil.enableTouchRipple(card);
     }
 
     void bind(final TopSite topSite, final int absolutePosition) {
         this.topSite = topSite;
         this.absolutePosition = absolutePosition;
 
         if (ongoingIconLoad != null) {
             ongoingIconLoad.cancel(true);
@@ -94,17 +91,17 @@ import java.util.concurrent.Future;
         ongoingIconLoad = Icons.with(itemView.getContext())
                 .pageUrl(topSite.getUrl())
                 .skipNetwork()
                 .build()
                 .execute(this);
 
         final Drawable pinDrawable;
         if (topSite.isPinned()) {
-            pinDrawable = DrawableUtil.tintDrawable(itemView.getContext(), R.drawable.as_pin, itemView.getResources().getColor(R.color.placeholder_grey));
+            pinDrawable = DrawableUtil.tintDrawable(itemView.getContext(), R.drawable.as_pin, Color.WHITE);
         } else {
             pinDrawable = null;
         }
         TextViewCompat.setCompoundDrawablesRelativeWithIntrinsicBounds(title, pinDrawable, null, null, null);
 
         // setCenteredText() needs to have all drawable's in place to correctly layout the text,
         // so we need to wait with requesting the title until we've set our pin icon.
         ActivityStream.extractLabel(itemView.getContext(), topSite.getUrl(), true, new ActivityStream.LabelCallback() {
@@ -115,15 +112,10 @@ import java.util.concurrent.Future;
                 ViewUtil.setCenteredText(title, label, title.getPaddingTop());
             }
         });
     }
 
     @Override
     public void onIconResponse(IconResponse response) {
         faviconView.updateImage(response);
-
-        final int tintColor = !response.hasColor() || response.getColor() == Color.WHITE ? Color.LTGRAY : Color.WHITE;
-
-        menuButton.setImageDrawable(
-                DrawableUtil.tintDrawable(menuButton.getContext(), R.drawable.menu, tintColor));
     }
 }
--- a/mobile/android/base/java/org/mozilla/gecko/activitystream/homepanel/topsites/TopSitesPageAdapter.java
+++ b/mobile/android/base/java/org/mozilla/gecko/activitystream/homepanel/topsites/TopSitesPageAdapter.java
@@ -12,18 +12,18 @@ import android.view.LayoutInflater;
 import android.view.View;
 import android.view.ViewGroup;
 import android.widget.FrameLayout;
 
 import org.mozilla.gecko.R;
 import org.mozilla.gecko.Telemetry;
 import org.mozilla.gecko.TelemetryContract;
 import org.mozilla.gecko.activitystream.ActivityStreamTelemetry;
+import org.mozilla.gecko.activitystream.homepanel.model.TopSite;
 import org.mozilla.gecko.home.HomePager;
-import org.mozilla.gecko.activitystream.homepanel.model.TopSite;
 import org.mozilla.gecko.util.StringUtils;
 import org.mozilla.gecko.widget.RecyclerViewClickSupport;
 
 import java.util.ArrayList;
 import java.util.EnumSet;
 import java.util.List;
 
 /* package-local */ class TopSitesPageAdapter extends RecyclerView.Adapter<TopSitesCard> implements RecyclerViewClickSupport.OnItemClickListener {
@@ -96,22 +96,21 @@ import java.util.List;
         holder.bind(topSites.get(position), getTopSiteAbsolutePosition(position));
     }
 
     @Override
     public TopSitesCard onCreateViewHolder(ViewGroup parent, int viewType) {
         final LayoutInflater inflater = LayoutInflater.from(parent.getContext());
 
         final FrameLayout card = (FrameLayout) inflater.inflate(R.layout.activity_stream_topsites_card, parent, false);
-        final View content = card.findViewById(R.id.content);
 
-        ViewGroup.LayoutParams layoutParams = content.getLayoutParams();
+        ViewGroup.LayoutParams layoutParams = card.getLayoutParams();
         layoutParams.width = tilesWidth;
         layoutParams.height = tilesHeight + textHeight;
-        content.setLayoutParams(layoutParams);
+        card.setLayoutParams(layoutParams);
 
         return new TopSitesCard(card, onUrlOpenListener, onUrlOpenInBackgroundListener);
     }
 
     @Override
     public int getItemCount() {
         return topSites.size();
     }