Bug 1232439 - Part 4: Adjust bookmark list UI layout. r?ahunt draft
authorJing-wei Wu <topwu.tw@gmail.com>
Thu, 06 Apr 2017 11:44:20 +0800
changeset 566168 d427090b44516155e1189d0ed2f41b7a457b3929
parent 566167 b84d8b51183aec64a27cfc3be149f587c194bb4b
child 625218 a0817e03bdd0a46653eeeea8d555a260ddcec8a8
push id55112
push userbmo:topwu.tw@gmail.com
push dateFri, 21 Apr 2017 02:06:03 +0000
reviewersahunt
bugs1232439
milestone55.0a1
Bug 1232439 - Part 4: Adjust bookmark list UI layout. r?ahunt MozReview-Commit-ID: 5s74hg5daC5
mobile/android/base/java/org/mozilla/gecko/home/BookmarkFolderView.java
mobile/android/base/java/org/mozilla/gecko/icons/loader/IconGenerator.java
mobile/android/base/java/org/mozilla/gecko/widget/FaviconView.java
mobile/android/base/resources/layout/bookmark_folder_row.xml
mobile/android/base/resources/layout/bookmark_item_row.xml
mobile/android/base/resources/layout/home_pager.xml
mobile/android/base/resources/layout/two_line_folder_row.xml
mobile/android/base/resources/layout/two_line_page_row.xml
mobile/android/base/resources/values/dimens.xml
mobile/android/base/resources/values/styles.xml
--- a/mobile/android/base/java/org/mozilla/gecko/home/BookmarkFolderView.java
+++ b/mobile/android/base/java/org/mozilla/gecko/home/BookmarkFolderView.java
@@ -58,29 +58,31 @@ public class BookmarkFolderView extends 
 
         FolderState(final int image) { this.image = image; }
     }
 
     private final TextView mTitle;
     private final TextView mSubtitle;
 
     private final ImageView mIcon;
+    private final ImageView mIndicator;
 
     public BookmarkFolderView(Context context) {
         this(context, null);
     }
 
     public BookmarkFolderView(Context context, AttributeSet attrs) {
         super(context, attrs);
 
         LayoutInflater.from(context).inflate(R.layout.two_line_folder_row, this);
 
         mTitle = (TextView) findViewById(R.id.title);
         mSubtitle = (TextView) findViewById(R.id.subtitle);
         mIcon =  (ImageView) findViewById(R.id.icon);
+        mIndicator = (ImageView) findViewById(R.id.indicator);
     }
 
     public void update(String title, int folderID) {
         setTitle(title);
         setID(folderID);
     }
 
     private void setTitle(String title) {
@@ -138,10 +140,16 @@ public class BookmarkFolderView extends 
             new ItemCountUpdateTask(subTitleReference, folderID).execute();
         } else {
             mSubtitle.setVisibility(View.GONE);
         }
     }
 
     public void setState(@NonNull FolderState state) {
         mIcon.setImageResource(state.image);
+
+        if (state == FolderState.PARENT) {
+            mIndicator.setVisibility(View.GONE);
+        } else {
+            mIndicator.setVisibility(View.VISIBLE);
+        }
     }
 }
--- a/mobile/android/base/java/org/mozilla/gecko/icons/loader/IconGenerator.java
+++ b/mobile/android/base/java/org/mozilla/gecko/icons/loader/IconGenerator.java
@@ -26,27 +26,24 @@ import org.mozilla.gecko.util.StringUtil
 /**
  * This loader will generate an icon in case no icon could be loaded. In order to do so this needs
  * to be the last loader that will be tried.
  */
 public class IconGenerator implements IconLoader {
     // Mozilla's Visual Design Colour Palette
     // http://firefoxux.github.io/StyleGuide/#/visualDesign/colours
     private static final int[] COLORS = {
-            0xFFc33c32,
-            0xFFf25820,
-            0xFFff9216,
-            0xFFffcb00,
-            0xFF57bd35,
-            0xFF01bdad,
-            0xFF0996f8,
-            0xFF02538b,
-            0xFF1f386e,
-            0xFF7a2f7a,
-            0xFFea385e,
+            0xFF9A4C00,
+            0xFFAB008D,
+            0xFF4C009C,
+            0xFF002E9C,
+            0xFF009EC2,
+            0xFF009D02,
+            0xFF51AB00,
+            0xFF36385A,
     };
 
     private static final int TEXT_SIZE_DP = 12;
     @Override
     public IconResponse load(IconRequest request) {
         if (request.getIconCount() > 1) {
             // There are still other icons to try. We will only generate an icon if there's only one
             // icon left and all previous loaders have failed (assuming this is the last one).
--- a/mobile/android/base/java/org/mozilla/gecko/widget/FaviconView.java
+++ b/mobile/android/base/java/org/mozilla/gecko/widget/FaviconView.java
@@ -5,21 +5,24 @@
 
 package org.mozilla.gecko.widget;
 
 import org.mozilla.gecko.R;
 import org.mozilla.gecko.icons.IconCallback;
 import org.mozilla.gecko.icons.IconResponse;
 
 import android.content.Context;
+import android.content.res.Resources;
 import android.content.res.TypedArray;
 import android.graphics.Bitmap;
 import android.graphics.Canvas;
 import android.graphics.Paint;
 import android.graphics.RectF;
+import android.support.v4.graphics.drawable.RoundedBitmapDrawable;
+import android.support.v4.graphics.drawable.RoundedBitmapDrawableFactory;
 import android.util.AttributeSet;
 import android.util.DisplayMetrics;
 import android.util.TypedValue;
 import android.widget.ImageView;
 
 import java.lang.ref.WeakReference;
 
 /**
@@ -28,17 +31,17 @@ import java.lang.ref.WeakReference;
  * selected is the dominant colour of the provided Favicon.
  */
 public class FaviconView extends ImageView {
     private static final String LOGTAG = "GeckoFaviconView";
 
     private static String DEFAULT_FAVICON_KEY = FaviconView.class.getSimpleName() + "DefaultFavicon";
 
     // Default x/y-radius of the oval used to round the corners of the background (dp)
-    private static final int DEFAULT_CORNER_RADIUS_DP = 4;
+    private static final int DEFAULT_CORNER_RADIUS_DP = 2;
 
     private Bitmap mIconBitmap;
 
     // Reference to the unscaled bitmap, if any, to prevent repeated assignments of the same bitmap
     // to the view from causing repeated rescalings (Some of the callers do this)
     private Bitmap mUnscaledBitmap;
 
     private int mActualWidth;
@@ -63,16 +66,18 @@ public class FaviconView extends ImageVi
     private final boolean isDominantBorderEnabled;
 
     // boolean switch for overriding scaletype, whose value is defined in attrs.xml .
     private final boolean isOverrideScaleTypeEnabled;
 
     // boolean switch for disabling rounded corners, value defined in attrs.xml .
     private final boolean areRoundCornersEnabled;
 
+    private final Resources mResources;
+
     // Initializing the static paints.
     static {
         sBackgroundPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
         sBackgroundPaint.setStyle(Paint.Style.FILL);
     }
 
     public FaviconView(Context context, AttributeSet attrs) {
         super(context, attrs);
@@ -89,16 +94,18 @@ public class FaviconView extends ImageVi
         if (isOverrideScaleTypeEnabled) {
             setScaleType(ImageView.ScaleType.CENTER);
         }
 
         final DisplayMetrics metrics = getResources().getDisplayMetrics();
 
         mBackgroundRect = new RectF(0, 0, 0, 0);
         mBackgroundCornerRadius = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, DEFAULT_CORNER_RADIUS_DP, metrics);
+
+        mResources = getResources();
     }
 
     @Override
     protected void onSizeChanged(int w, int h, int oldw, int oldh) {
         super.onSizeChanged(w, h, oldw, oldh);
 
         // No point rechecking the image if there hasn't really been any change.
         if (w == mActualWidth && h == mActualHeight) {
@@ -142,17 +149,30 @@ public class FaviconView extends ImageVi
         }
 
         if (mScalingExpected && mActualWidth != mIconBitmap.getWidth()) {
             scaleBitmap();
             // Don't scale the image every time something changes.
             mScalingExpected = false;
         }
 
-        setImageBitmap(mIconBitmap);
+        // In original, there is no round corners if FaviconView has bitmap icon. But the new design
+        // needs round corners all the time, so we use RoundedBitmapDrawableFactory to create round corners.
+        if (areRoundCornersEnabled) {
+            // mIconBitmap's size must bew small or equal to mActualWidth, or we cannot see the round corners.
+            if (mActualWidth < mIconBitmap.getWidth()) {
+                scaleBitmap();
+            }
+            RoundedBitmapDrawable roundedBitmapDrawable = RoundedBitmapDrawableFactory.create(mResources, mIconBitmap);
+            roundedBitmapDrawable.setCornerRadius(mBackgroundCornerRadius);
+            roundedBitmapDrawable.setAntiAlias(true);
+            setImageDrawable(roundedBitmapDrawable);
+        } else {
+            setImageBitmap(mIconBitmap);
+        }
 
         // After scaling, determine if we have empty space around the scaled image which we need to
         // fill with the coloured background. If applicable, show it.
         // We assume Favicons are still squares and only bother with the background if more than 3px
         // of it would be displayed.
         if (Math.abs(mIconBitmap.getWidth() - mActualWidth) < 3) {
             mDominantColor = 0;
         }
--- a/mobile/android/base/resources/layout/bookmark_folder_row.xml
+++ b/mobile/android/base/resources/layout/bookmark_folder_row.xml
@@ -1,15 +1,15 @@
 <?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/. -->
 
 <org.mozilla.gecko.home.BookmarkFolderView xmlns:android="http://schemas.android.com/apk/res/android"
                                            style="@style/Widget.FolderView"
                                            android:layout_width="match_parent"
-                                           android:paddingLeft="0dp"
-                                           android:paddingStart="0dp"
+                                           android:layout_height="wrap_content"
+                                           android:minHeight="@dimen/page_row_height"
+                                           android:paddingLeft="16dp"
+                                           android:paddingStart="16dp"
                                            android:paddingRight="16dp"
                                            android:paddingEnd="16dp"
-                                           android:paddingTop="0dp"
-                                           android:paddingBottom="0dp"
-                                           android:gravity="center_vertical"/>
+                                           android:gravity="center_vertical" />
--- a/mobile/android/base/resources/layout/bookmark_item_row.xml
+++ b/mobile/android/base/resources/layout/bookmark_item_row.xml
@@ -1,10 +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/. -->
 
 <org.mozilla.gecko.home.TwoLinePageRow xmlns:android="http://schemas.android.com/apk/res/android"
                                        style="@style/Widget.BookmarkItemView"
                                        android:layout_width="match_parent"
-                                       android:layout_height="@dimen/page_row_height"
-                                       android:minHeight="@dimen/page_row_height"/>
+                                       android:layout_height="wrap_content"
+                                       android:minHeight="@dimen/page_row_height"
+                                       android:gravity="center_vertical" />
--- a/mobile/android/base/resources/layout/home_pager.xml
+++ b/mobile/android/base/resources/layout/home_pager.xml
@@ -15,11 +15,12 @@
 
     <org.mozilla.gecko.home.TabMenuStrip android:layout_width="match_parent"
                                          android:layout_height="@dimen/tabs_strip_height"
                                          android:background="@color/about_page_header_grey"
                                          android:layout_gravity="top"
                                          gecko:strip="@drawable/home_tab_menu_strip"
                                          gecko:activeTextColor="@color/placeholder_grey"
                                          gecko:inactiveTextColor="@color/tab_text_color"
-                                         gecko:tabsMarginLeft="@dimen/tab_strip_content_start" />
+                                         gecko:tabsMarginLeft="@dimen/tab_strip_content_start"
+                                         gecko:titlebarFill="true" />
 
 </org.mozilla.gecko.home.HomePager>
--- a/mobile/android/base/resources/layout/two_line_folder_row.xml
+++ b/mobile/android/base/resources/layout/two_line_folder_row.xml
@@ -5,27 +5,28 @@
 
 <merge xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:gecko="http://schemas.android.com/apk/res-auto"
        tools:context=".BrowserApp">
 
     <ImageView android:id="@+id/icon"
                android:src="@drawable/folder_closed"
-               android:layout_width="24dp"
-               android:layout_height="18dp"
-               android:scaleType="fitXY"
-               android:layout_margin="20dp"/>
+               android:layout_width="@dimen/favicon_small_size"
+               android:layout_height="@dimen/favicon_small_size"
+               android:scaleType="fitCenter" />
 
     <LinearLayout android:layout_width="0dp"
                   android:layout_height="wrap_content"
                   android:layout_weight="1"
                   android:layout_gravity="center_vertical"
-                  android:paddingRight="10dp"
-                  android:paddingEnd="10dp"
+                  android:paddingLeft="16dp"
+                  android:paddingStart="16dp"
+                  android:paddingRight="16dp"
+                  android:paddingEnd="16dp"
                   android:orientation="vertical">
 
         <org.mozilla.gecko.widget.FadedSingleColorTextView
                 android:id="@+id/title"
                 style="@style/Widget.TwoLinePageRow.Title"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 gecko:fadeWidth="90dp"
@@ -36,9 +37,15 @@
                   android:layout_width="match_parent"
                   android:layout_height="wrap_content"
                   android:visibility="gone"
                   gecko:fadeWidth="90dp"
                   tools:text="1 items"/>
 
     </LinearLayout>
 
+    <ImageView android:id="@+id/indicator"
+               android:layout_width="wrap_content"
+               android:layout_height="wrap_content"
+               android:layout_gravity="center"
+               android:src="@drawable/arrow" />
+
 </merge>
--- a/mobile/android/base/resources/layout/two_line_page_row.xml
+++ b/mobile/android/base/resources/layout/two_line_page_row.xml
@@ -4,18 +4,18 @@
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 
 <merge xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:gecko="http://schemas.android.com/apk/res-auto"
        tools:context=".BrowserApp">
 
     <org.mozilla.gecko.widget.FaviconView android:id="@+id/icon"
-                                          android:layout_width="@dimen/favicon_bg"
-                                          android:layout_height="@dimen/favicon_bg"
+                                          android:layout_width="@dimen/favicon_small_size"
+                                          android:layout_height="@dimen/favicon_small_size"
                                           android:layout_margin="16dp"
                                           tools:background="@drawable/favicon_globe"/>
 
     <LinearLayout android:layout_width="0dp"
                   android:layout_height="wrap_content"
                   android:layout_weight="1"
                   android:layout_gravity="center_vertical"
                   android:paddingRight="10dp"
--- a/mobile/android/base/resources/values/dimens.xml
+++ b/mobile/android/base/resources/values/dimens.xml
@@ -51,24 +51,26 @@
     <!-- Padding combines with an 18dp image to form the menu item width and height. -->
     <dimen name="tablet_browser_toolbar_menu_item_padding_horizontal">19dp</dimen>
     <dimen name="tablet_browser_toolbar_menu_item_inset_vertical">5dp</dimen>
     <dimen name="tablet_browser_toolbar_menu_item_inset_horizontal">3dp</dimen>
     <dimen name="tablet_tab_strip_button_inset">5dp</dimen>
 
     <!-- Dimensions used by Favicons and FaviconView -->
     <dimen name="favicon_bg">32dp</dimen>
-    <dimen name="favicon_corner_radius">4dp</dimen>
+    <dimen name="favicon_corner_radius">2dp</dimen>
     <!-- Set the upper limit on the size of favicon that will be processed. Favicons larger than
          this will be downscaled to this value. If you need to use larger Favicons (Due to a UI
          redesign sometime after this is written) you should increase this value to the largest
          commonly-used size of favicon and, performance permitting, fetch the remainder from the
          database. The largest available size is always stored in the database, regardless of this
          value.-->
     <dimen name="favicon_largest_interesting_size">32dp</dimen>
+    <!-- Small favicon used in about:home(TopsitesPanel, BookmarksPanel and CombinedHistoryPanel) -->
+    <dimen name="favicon_small_size">25dp</dimen>
 
     <dimen name="firstrun_content_width">300dp</dimen>
     <dimen name="firstrun_min_height">120dp</dimen>
     <dimen name="firstrun_background_height">120dp</dimen>
 
     <dimen name="overlay_prompt_content_width">260dp</dimen>
     <dimen name="overlay_prompt_button_width">148dp</dimen>
     <dimen name="overlay_prompt_container_width">@dimen/match_parent</dimen>
@@ -87,17 +89,17 @@
 
     <dimen name="home_folder_title_oneline_textsize">16sp</dimen>
     <dimen name="home_folder_title_twoline_textsize">14sp</dimen>
     <dimen name="home_twolinepagerow_title_textsize">16sp</dimen>
 
     <dimen name="page_row_edge_padding">16dp</dimen>
 
     <!-- Regular page row on about:home -->
-    <dimen name="page_row_height">64dp</dimen>
+    <dimen name="page_row_height">56dp</dimen>
 
     <!-- Group/heading page row on about:home -->
     <dimen name="page_group_height">56dp</dimen>
     <dimen name="home_header_item_height">56dp</dimen>
     <dimen name="page_row_divider_height">1dp</dimen>
 
     <!-- Remote Tabs static view top padding. Less in landscape on phones. -->
     <dimen name="home_remote_tabs_top_padding">48dp</dimen>
--- a/mobile/android/base/resources/values/styles.xml
+++ b/mobile/android/base/resources/values/styles.xml
@@ -391,17 +391,17 @@
     <style name="TextAppearance.Widget.Home" />
 
     <style name="TextAppearance.Widget.Home.Header" parent="TextAppearance.Small">
         <item name="android:textColor">@color/disabled_grey</item>
         <item name="android:textSize">12sp</item>
     </style>
 
     <style name="TextAppearance.Widget.Home.ItemTitle" parent="TextAppearance">
-        <item name="android:textSize">16dp</item>
+        <item name="android:textSize">16sp</item>
     </style>
 
     <style name="TextAppearance.Widget.Home.ItemDescription" parent="TextAppearance.Micro">
         <item name="android:textColor">@color/tabs_tray_icon_grey</item>
     </style>
 
     <style name="TextAppearance.Widget.HomeBanner" parent="TextAppearance.Small">
         <item name="android:textColor">?android:attr/textColorHint</item>