Bug 1366679 - Part 3: Implement search suggestion visual refresh for Photon. r?nechen,walkingice draft
authorjwu <topwu.tw@gmail.com>
Wed, 28 Jun 2017 15:00:51 -0700
changeset 601561 37209c6f4f859a9e2ff258843bf78202aeb21059
parent 601560 d94e6f801bc7142c9b8a402a23bfc19aa6fe7a9a
child 635304 1543ad4e0822504f0e6e07305448b99464134aef
push id66109
push userbmo:topwu.tw@gmail.com
push dateWed, 28 Jun 2017 22:04:34 +0000
reviewersnechen, walkingice
bugs1366679
milestone56.0a1
Bug 1366679 - Part 3: Implement search suggestion visual refresh for Photon. r?nechen,walkingice MozReview-Commit-ID: 5ASj7AByPaA
mobile/android/app/src/australis/res/drawable/search_list_selector.xml
mobile/android/app/src/photon/java/org/mozilla/gecko/home/SearchEngineRow.java
mobile/android/app/src/photon/java/org/mozilla/gecko/home/SuggestionItem.java
mobile/android/app/src/photon/res/color/search_suggestion_text.xml
mobile/android/app/src/photon/res/color/two_line_page_row_title.xml
mobile/android/app/src/photon/res/color/two_line_page_row_url.xml
mobile/android/app/src/photon/res/drawable/search_list_bg.xml
mobile/android/app/src/photon/res/drawable/search_list_selector.xml
mobile/android/app/src/photon/res/drawable/search_suggestion_button.xml
mobile/android/app/src/photon/res/drawable/search_suggestion_prompt_no.xml
mobile/android/app/src/photon/res/drawable/search_suggestion_prompt_yes.xml
mobile/android/app/src/photon/res/layout/browser_search.xml
mobile/android/app/src/photon/res/layout/home_item_row.xml
mobile/android/app/src/photon/res/layout/home_search_item_row.xml
mobile/android/app/src/photon/res/layout/home_suggestion_prompt.xml
mobile/android/app/src/photon/res/layout/search_engine_row.xml
mobile/android/app/src/photon/res/layout/suggestion_item.xml
mobile/android/app/src/photon/res/layout/two_line_page_row.xml
mobile/android/app/src/photon/res/values/colors.xml
mobile/android/app/src/photon/res/values/dimens.xml
mobile/android/base/moz.build
new file mode 100644
--- /dev/null
+++ b/mobile/android/app/src/australis/res/drawable/search_list_selector.xml
@@ -0,0 +1,10 @@
+<?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"
+          xmlns:gecko="http://schemas.android.com/apk/res-auto">
+
+    <item android:drawable="@android:color/transparent"/>
+
+</selector>
--- a/mobile/android/app/src/photon/java/org/mozilla/gecko/home/SearchEngineRow.java
+++ b/mobile/android/app/src/photon/java/org/mozilla/gecko/home/SearchEngineRow.java
@@ -268,17 +268,17 @@ class SearchEngineRow extends RelativeLa
     private void bindSuggestionView(String suggestion, int recycledSuggestionCount, Integer previousSuggestionChildIndex, boolean isUserSavedSearch, String telemetryTag) {
         final View suggestionItem;
 
         // Reuse suggestion views from recycled view, if possible.
         if (previousSuggestionChildIndex + 1 < recycledSuggestionCount) {
             suggestionItem = mSuggestionView.getChildAt(previousSuggestionChildIndex + 1);
             suggestionItem.setVisibility(View.VISIBLE);
         } else {
-            suggestionItem = mInflater.inflate(R.layout.suggestion_item, null);
+            suggestionItem = View.inflate(getContext(), R.layout.suggestion_item, null);
 
             suggestionItem.setOnClickListener(mClickListener);
             suggestionItem.setOnLongClickListener(mLongClickListener);
 
             suggestionItem.setTag(telemetryTag);
 
             mSuggestionView.addView(suggestionItem);
         }
new file mode 100644
--- /dev/null
+++ b/mobile/android/app/src/photon/java/org/mozilla/gecko/home/SuggestionItem.java
@@ -0,0 +1,43 @@
+/* -*- Mode: Java; c-basic-offset: 4; tab-width: 20; indent-tabs-mode: nil; -*-
+ * 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.home;
+
+import android.content.Context;
+import android.util.AttributeSet;
+
+import org.mozilla.gecko.R;
+import org.mozilla.gecko.widget.themed.ThemedLinearLayout;
+import org.mozilla.gecko.widget.themed.ThemedTextView;
+
+public class SuggestionItem extends ThemedLinearLayout {
+
+    private ThemedTextView suggestionText;
+
+    public SuggestionItem(Context context) {
+        this(context, null);
+    }
+
+    public SuggestionItem(Context context, AttributeSet attrs) {
+        super(context, attrs);
+    }
+
+    @Override
+    protected void onFinishInflate() {
+        super.onFinishInflate();
+
+        suggestionText = (ThemedTextView) findViewById(R.id.suggestion_text);
+    }
+
+    @Override
+    public void setPrivateMode(boolean isPrivate) {
+        super.setPrivateMode(isPrivate);
+
+        if (suggestionText != null) {
+            suggestionText.setPrivateMode(isPrivate);
+        }
+    }
+}
+
new file mode 100644
--- /dev/null
+++ b/mobile/android/app/src/photon/res/color/search_suggestion_text.xml
@@ -0,0 +1,10 @@
+<?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:color="@color/photon_search_item_text" />
+
+</selector>
new file mode 100644
--- /dev/null
+++ b/mobile/android/app/src/photon/res/color/two_line_page_row_title.xml
@@ -0,0 +1,10 @@
+<?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:color="@color/photon_text_main"/>
+
+</selector>
new file mode 100644
--- /dev/null
+++ b/mobile/android/app/src/photon/res/color/two_line_page_row_url.xml
@@ -0,0 +1,10 @@
+<?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:color="@color/photon_text_secondary"/>
+
+</selector>
new file mode 100644
--- /dev/null
+++ b/mobile/android/app/src/photon/res/drawable/search_list_bg.xml
@@ -0,0 +1,8 @@
+<?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:drawable="@color/photon_content_bg"/>
+</selector>
new file mode 100644
--- /dev/null
+++ b/mobile/android/app/src/photon/res/drawable/search_list_selector.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/. -->
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <item android:state_pressed="true"
+          android:drawable="@color/photon_content_bg_pressed"/>
+
+    <item android:drawable="@color/photon_content_bg"/>
+</selector>
--- a/mobile/android/app/src/photon/res/drawable/search_suggestion_button.xml
+++ b/mobile/android/app/src/photon/res/drawable/search_suggestion_button.xml
@@ -1,19 +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/. -->
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
-    <item android:state_pressed="true">
-        <shape>
-            <solid android:color="@color/toolbar_grey_pressed"/>
-            <corners android:radius="@dimen/standard_corner_radius"/>
-        </shape>
-    </item>
 
-    <item>
-        <shape>
-            <solid android:color="@color/toolbar_grey"/>
-            <corners android:radius="@dimen/standard_corner_radius"/>
-        </shape>
-    </item>
+    <item android:state_pressed="true"
+          android:drawable="@color/photon_search_suggestion_box_pressed"/>
+
+    <item android:drawable="@color/photon_search_suggestion_box"/>
 </selector>
--- a/mobile/android/app/src/photon/res/drawable/search_suggestion_prompt_no.xml
+++ b/mobile/android/app/src/photon/res/drawable/search_suggestion_prompt_no.xml
@@ -1,20 +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/. -->
 
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
-    <item android:state_pressed="true">
-        <shape>
-            <solid android:color="@color/toolbar_grey_pressed"/>
-            <corners android:radius="@dimen/doorhanger_rounded_corner_radius"/>
-        </shape>
-    </item>
+    <item android:state_pressed="true"
+          android:drawable="@color/photon_notification_bg_pressed"/>
 
-    <item>
-        <shape>
-            <solid android:color="@color/toolbar_menu_dark_grey"/>
-            <corners android:radius="@dimen/doorhanger_rounded_corner_radius"/>
-        </shape>
-    </item>
+    <item android:drawable="@color/photon_notification_bg"/>
 </selector>
--- a/mobile/android/app/src/photon/res/drawable/search_suggestion_prompt_yes.xml
+++ b/mobile/android/app/src/photon/res/drawable/search_suggestion_prompt_yes.xml
@@ -1,20 +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/. -->
 
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
-<item android:state_pressed="true">
-    <shape>
-        <solid android:color="@color/link_blue_pressed"/>
-        <corners android:radius="@dimen/doorhanger_rounded_corner_radius"/>
-    </shape>
-</item>
+    <item android:state_pressed="true"
+          android:drawable="@color/photon_notification_bg_pressed"/>
 
-<item>
-    <shape>
-        <solid android:color="@color/link_blue"/>
-        <corners android:radius="@dimen/doorhanger_rounded_corner_radius"/>
-    </shape>
-</item>
+    <item android:drawable="@color/photon_notification_bg"/>
 </selector>
--- a/mobile/android/app/src/photon/res/layout/browser_search.xml
+++ b/mobile/android/app/src/photon/res/layout/browser_search.xml
@@ -1,35 +1,43 @@
 <?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/. -->
 
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
-              android:orientation="vertical"
-              android:layout_width="match_parent"
-              android:layout_height="match_parent">
-
-    <ViewStub android:id="@+id/suggestions_opt_in_prompt"
+              xmlns:tools="http://schemas.android.com/tools"
               android:layout_width="match_parent"
-              android:layout_height="wrap_content"
-              android:layout="@layout/home_suggestion_prompt" />
+              android:layout_height="match_parent"
+              android:orientation="vertical">
+
+    <ViewStub
+        android:id="@+id/suggestions_opt_in_prompt"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout="@layout/home_suggestion_prompt"/>
 
-    <view class="org.mozilla.gecko.home.BrowserSearch$HomeSearchListView"
-            android:id="@+id/home_list_view"
-            android:layout_width="match_parent"
-            android:layout_height="0dp"
-            android:layout_weight="1" />
+    <view
+        android:id="@+id/home_list_view"
+        class="org.mozilla.gecko.home.BrowserSearch$HomeSearchListView"
+        android:layout_width="match_parent"
+        android:layout_height="0dp"
+        android:layout_weight="1"
+        android:background="@drawable/search_list_bg"
+        android:divider="@null"
+        android:dividerHeight="0dp"
+        android:listSelector="@drawable/search_list_selector"
+        tools:listitem="@layout/home_search_item_row"/>
 
     <!-- listSelector is too slow for showing pressed state
          so we set the pressed colors on the child. -->
     <org.mozilla.gecko.home.SearchEngineBar
-          android:id="@+id/search_engine_bar"
-          android:layout_width="match_parent"
-          android:layout_height="48dp"
-          android:paddingTop="1dp"
-          android:orientation="horizontal"
-          android:layout_gravity="center_horizontal"
-          android:choiceMode="singleChoice"
-          android:listSelector="@android:color/transparent"
-          android:cacheColorHint="@android:color/transparent" />
+        android:id="@+id/search_engine_bar"
+        android:layout_width="match_parent"
+        android:layout_height="48dp"
+        android:layout_gravity="center_horizontal"
+        android:cacheColorHint="@android:color/transparent"
+        android:choiceMode="singleChoice"
+        android:listSelector="@android:color/transparent"
+        android:orientation="horizontal"
+        android:paddingTop="1dp"/>
 
 </LinearLayout>
--- a/mobile/android/app/src/photon/res/layout/home_item_row.xml
+++ b/mobile/android/app/src/photon/res/layout/home_item_row.xml
@@ -1,10 +1,12 @@
 <?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.TwoLinePageRow"
                                        android:layout_width="match_parent"
-                                       android:layout_height="@dimen/page_row_height"
-                                       android:minHeight="@dimen/page_row_height"/>
+                                       android:layout_height="@dimen/wrap_content"
+                                       android:background="@android:color/transparent"
+                                       android:gravity="center_vertical"
+                                       android:minHeight="@dimen/search_item_min_height"/>
--- a/mobile/android/app/src/photon/res/layout/home_search_item_row.xml
+++ b/mobile/android/app/src/photon/res/layout/home_search_item_row.xml
@@ -1,12 +1,13 @@
 <?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.SearchEngineRow xmlns:android="http://schemas.android.com/apk/res/android"
                                         android:layout_width="match_parent"
                                         android:layout_height="wrap_content"
-                                        android:minHeight="@dimen/search_row_height"
+                                        android:clickable="false"
                                         android:duplicateParentState="true"
-                                        android:paddingTop="5dp"
-                                        android:paddingBottom="5dp"/>
+                                        android:minHeight="@dimen/search_engine_row_min_height"
+                                        android:paddingBottom="7dp"
+                                        android:paddingTop="7dp"/>
--- a/mobile/android/app/src/photon/res/layout/home_suggestion_prompt.xml
+++ b/mobile/android/app/src/photon/res/layout/home_suggestion_prompt.xml
@@ -1,56 +1,56 @@
 <?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/. -->
 
-<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
-             android:layout_width="match_parent"
-             android:layout_height="wrap_content"
-             android:background="@color/about_page_header_grey">
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+              xmlns:tools="http://schemas.android.com/tools"
+              android:id="@+id/prompt"
+              android:layout_width="match_parent"
+              android:layout_height="wrap_content"
+              android:background="@color/photon_notification_bg"
+              android:focusable="true"
+              android:gravity="center_vertical"
+              android:minHeight="48dp"
+              android:orientation="horizontal">
 
-    <LinearLayout android:id="@+id/prompt"
-                  android:focusable="true"
-                  android:layout_width="match_parent"
-                  android:minHeight="48dp"
-                  android:layout_height="wrap_content"
-                  android:orientation="horizontal"
-                  android:gravity="center_vertical"
-                  android:paddingLeft="15dp"
-                  android:paddingRight="15dp"
-                  android:textSize="12sp">
-
-        <TextView android:id="@+id/suggestions_prompt_title"
-                  android:layout_height="wrap_content"
-                  android:layout_width="0dp"
-                  android:layout_weight="1"
-                  android:fontFamily="sans-serif"
-                  android:textColor="@color/text_and_tabs_tray_grey"
-                  android:layout_marginRight="10dp"/>
+    <TextView
+        android:id="@+id/suggestions_prompt_title"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:layout_margin="16dp"
+        android:layout_weight="1"
+        android:fontFamily="sans-serif"
+        android:lineSpacingMultiplier="1.1"
+        android:textColor="@android:color/white"
+        android:textSize="14sp"
+        tools:text="Would you like to turn on search suggestion?"/>
 
-        <TextView android:id="@+id/suggestions_prompt_no"
-                  android:layout_height="32dp"
-                  android:minWidth="72dp"
-                  android:layout_width="wrap_content"
-                  android:layout_marginRight="10dp"
-                  android:textColor="@color/text_and_tabs_tray_grey"
-                  android:gravity="center"
-                  android:background="@drawable/search_suggestion_prompt_no"
-                  android:nextFocusRight="@+id/suggestions_prompt_yes"
-                  android:focusable="true"
-                  android:text="@string/button_no"/>
+    <TextView
+        android:id="@+id/suggestions_prompt_no"
+        android:layout_width="wrap_content"
+        android:layout_height="match_parent"
+        android:alpha="0.5"
+        android:background="@drawable/search_suggestion_prompt_no"
+        android:focusable="true"
+        android:gravity="center"
+        android:minWidth="64dp"
+        android:nextFocusRight="@+id/suggestions_prompt_yes"
+        android:text="@string/button_no"
+        android:textColor="@android:color/white"
+        android:textSize="14sp"
+        android:textStyle="bold"/>
 
-        <TextView android:id="@+id/suggestions_prompt_yes"
-                  android:layout_height="32dp"
-                  android:minWidth="72dp"
-                  android:layout_width="wrap_content"
-                  android:gravity="center"
-                  android:textColor="@android:color/white"
-                  android:background="@drawable/search_suggestion_prompt_yes"
-                  android:focusable="true"
-                  android:text="@string/button_yes"/>
-
-
-
-    </LinearLayout>
-
-</FrameLayout>
+    <TextView
+        android:id="@+id/suggestions_prompt_yes"
+        android:layout_width="wrap_content"
+        android:layout_height="match_parent"
+        android:background="@drawable/search_suggestion_prompt_yes"
+        android:focusable="true"
+        android:gravity="center"
+        android:minWidth="64dp"
+        android:text="@string/button_yes"
+        android:textColor="@android:color/white"
+        android:textSize="14sp"
+        android:textStyle="bold"/>
+</LinearLayout>
--- a/mobile/android/app/src/photon/res/layout/search_engine_row.xml
+++ b/mobile/android/app/src/photon/res/layout/search_engine_row.xml
@@ -1,34 +1,44 @@
 <?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">
-
-    <org.mozilla.gecko.widget.FaviconView android:id="@+id/suggestion_icon"
-                                          android:layout_width="@dimen/favicon_bg"
-                                          android:layout_height="@dimen/favicon_bg"
-                                          android:layout_marginLeft="16dip"
-                                          android:layout_marginStart="16dip"
-                                          android:layout_marginRight="16dip"
-                                          android:layout_marginEnd="16dip"
-                                          android:layout_centerVertical="true"
-                                          android:minWidth="@dimen/favicon_bg"
-                                          android:minHeight="@dimen/favicon_bg"/>
+<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="wrap_content"
+       tools:layout_width="match_parent"
+       tools:parentTag="RelativeLayout">
 
-    <org.mozilla.gecko.widget.FlowLayout android:id="@+id/suggestion_layout"
-                                         android:layout_toRightOf="@id/suggestion_icon"
-                                         android:layout_toEndOf="@id/suggestion_icon"
-                                         android:layout_centerVertical="true"
-                                         android:layout_width="wrap_content"
-                                         android:layout_height="wrap_content"
-                                         android:layout_marginRight="15dp"
-                                         android:layout_marginEnd="15dp"
-                                         android:duplicateParentState="true">
+    <org.mozilla.gecko.widget.FaviconView
+        android:id="@+id/suggestion_icon"
+        android:layout_width="@dimen/favicon_small_size"
+        android:layout_height="@dimen/favicon_small_size"
+        android:layout_centerVertical="true"
+        android:layout_marginEnd="20dp"
+        android:layout_marginLeft="20dp"
+        android:layout_marginRight="20dp"
+        android:layout_marginStart="20dp"
+        android:minHeight="@dimen/favicon_small_size"
+        android:minWidth="@dimen/favicon_small_size"
+        gecko:backgroundCornerRadius="1dp"
+        tools:background="@android:color/holo_green_light"/>
 
-        <include layout="@layout/suggestion_item"
-                 android:id="@+id/suggestion_user_entered"/>
+    <org.mozilla.gecko.widget.FlowLayout
+        android:id="@+id/suggestion_layout"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_centerVertical="true"
+        android:layout_marginEnd="15dp"
+        android:layout_marginRight="15dp"
+        android:layout_toEndOf="@id/suggestion_icon"
+        android:layout_toRightOf="@id/suggestion_icon"
+        android:duplicateParentState="true">
+
+        <include
+            android:id="@+id/suggestion_user_entered"
+            layout="@layout/suggestion_item"/>
 
     </org.mozilla.gecko.widget.FlowLayout>
 
 </merge>
--- a/mobile/android/app/src/photon/res/layout/suggestion_item.xml
+++ b/mobile/android/app/src/photon/res/layout/suggestion_item.xml
@@ -1,31 +1,42 @@
 <?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/. -->
 
-<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
-              android:layout_width="wrap_content"
-              android:layout_height="wrap_content"
-              android:minHeight="32dp"
-              android:orientation="horizontal"
-              android:background="@drawable/search_suggestion_button"
-              android:gravity="center_vertical"
-              android:clickable="true"
-              android:padding="5dp">
+<org.mozilla.gecko.home.SuggestionItem
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:background="@drawable/search_suggestion_button"
+    android:clickable="true"
+    android:gravity="center_vertical"
+    android:minHeight="@dimen/search_suggestion_item_min_height"
+    android:orientation="horizontal"
+    android:paddingBottom="@dimen/search_suggestion_item_padding_vertical"
+    android:paddingLeft="@dimen/search_suggestion_item_padding_horizontal"
+    android:paddingRight="@dimen/search_suggestion_item_padding_horizontal"
+    android:paddingTop="@dimen/search_suggestion_item_padding_vertical">
 
-    <ImageView android:id="@+id/suggestion_item_icon"
-               android:src="@drawable/icon_most_recent_empty"
-               android:layout_marginRight="3dip"
-               android:layout_width="18dip"
-               android:layout_height="18dip"
-               android:visibility="gone"/>
+    <ImageView
+        android:id="@+id/suggestion_item_icon"
+        android:layout_width="18dip"
+        android:layout_height="18dip"
+        android:layout_marginEnd="3dip"
+        android:layout_marginRight="3dip"
+        android:src="@drawable/icon_most_recent_empty"
+        android:visibility="gone"
+        tools:visibility="visible"/>
 
-    <TextView android:id="@+id/suggestion_text"
-              android:layout_width="wrap_content"
-              android:layout_height="wrap_content"
-              android:textColor="@color/text_and_tabs_tray_grey"
-              android:textSize="14sp"
-              android:gravity="center_vertical"
-              android:layout_gravity="center_vertical"/>
+    <org.mozilla.gecko.widget.themed.ThemedTextView
+        android:id="@+id/suggestion_text"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_gravity="center_vertical"
+        android:gravity="center_vertical"
+        android:lineSpacingMultiplier="1.1"
+        android:textColor="@color/search_suggestion_text"
+        android:textSize="14sp"
+        tools:text="suggestion text"/>
 
-</LinearLayout>
+</org.mozilla.gecko.home.SuggestionItem>
--- a/mobile/android/app/src/photon/res/layout/two_line_page_row.xml
+++ b/mobile/android/app/src/photon/res/layout/two_line_page_row.xml
@@ -1,54 +1,74 @@
 <?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"
+       xmlns:gecko="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
-       xmlns:gecko="http://schemas.android.com/apk/res-auto"
-       tools:context=".BrowserApp">
+       tools:context=".BrowserApp"
+       tools:layout_height="wrap_content"
+       tools:layout_width="match_parent"
+       tools:minHeight="@dimen/page_row_height"
+       tools:parentTag="LinearLayout">
 
-    <org.mozilla.gecko.widget.FaviconView android:id="@+id/icon"
-                                          android:layout_width="@dimen/favicon_small_size"
-                                          android:layout_height="@dimen/favicon_small_size"
-                                          android:layout_margin="16dp"
-                                          tools:background="@drawable/favicon_globe"/>
+    <org.mozilla.gecko.widget.FaviconView
+        android:id="@+id/icon"
+        android:layout_width="@dimen/favicon_small_size"
+        android:layout_height="@dimen/favicon_small_size"
+        android:layout_gravity="center_vertical"
+        android:layout_marginLeft="20dp"
+        android:layout_marginRight="20dp"
+        gecko:backgroundCornerRadius="1dp"
+        tools:background="@android:color/holo_green_light"/>
 
-    <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:orientation="vertical">
+    <LinearLayout
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:layout_gravity="center_vertical"
+        android:layout_weight="1"
+        android:orientation="vertical"
+        android:paddingEnd="10dp"
+        android:paddingRight="10dp">
 
         <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"
-                tools:text="This is a long test title"/>
+            android:id="@+id/title"
+            style="@style/Widget.TwoLinePageRow.Title"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:layout_marginBottom="2dp"
+            android:background="@null"
+            android:lineSpacingMultiplier="1.1"
+            android:textColor="@color/two_line_page_row_title"
+            android:textSize="14sp"
+            gecko:fadeWidth="90dp"
+            tools:text="This is a long test title"/>
 
-        <org.mozilla.gecko.widget.FadedSingleColorTextView android:id="@+id/url"
-                  style="@style/Widget.TwoLinePageRow.Url"
-                  android:layout_width="match_parent"
-                  android:layout_height="wrap_content"
-                  android:drawablePadding="5dp"
-                  android:maxLength="1024"
-                  gecko:fadeWidth="90dp"
-                  tools:text="http://test.com/test"
-                  tools:drawableLeft="@drawable/ic_url_bar_tab"
-                  tools:drawableStart="@drawable/ic_url_bar_tab"
-            />
+        <org.mozilla.gecko.widget.FadedSingleColorTextView
+            android:id="@+id/url"
+            style="@style/Widget.TwoLinePageRow.Url"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:background="@null"
+            android:drawablePadding="5dp"
+            android:lineSpacingMultiplier="1.2"
+            android:maxLength="1024"
+            android:textColor="@color/two_line_page_row_url"
+            android:textSize="12sp"
+            gecko:fadeWidth="90dp"
+            tools:drawableLeft="@drawable/ic_url_bar_tab"
+            tools:drawableStart="@drawable/ic_url_bar_tab"
+            tools:text="http://test.com/test"/>
 
     </LinearLayout>
 
-    <ImageView android:id="@+id/status_icon_bookmark"
-               android:layout_width="20dp"
-               android:layout_height="20dp"
-               android:layout_gravity="center"
-               android:visibility="gone"
-               android:src="@drawable/star_blue"/>
+    <ImageView
+        android:id="@+id/status_icon_bookmark"
+        android:layout_width="20dp"
+        android:layout_height="20dp"
+        android:layout_gravity="center"
+        android:src="@drawable/star_blue"
+        android:visibility="gone"
+        tools:visibility="visible"/>
 
 </merge>
--- a/mobile/android/app/src/photon/res/values/colors.xml
+++ b/mobile/android/app/src/photon/res/values/colors.xml
@@ -48,18 +48,18 @@
     <color name="photon_menu_bg">#F9F9FA</color>
     <color name="photon_menu_bg_private">#38383D</color>
     <color name="photon_icon">#272727</color>
     <color name="photon_icon_private">#FFFFFF</color>
     <color name="photon_icon_lock">#16DA00</color>
 
     <color name="photon_notification_bg">#0096DD</color>
 
-    <!-- opacity: 10% -->
-    <color name="photon_notification_bg_pressed">#19000000</color>
+    <!-- opacity: 20% -->
+    <color name="photon_notification_bg_pressed">#33000000</color>
 
     <color name="photon_toolbar_text_color">#3B3B3B</color>
     <color name="photon_toolbar_text_color_private">#FFFFFF</color>
     <color name="photon_toolbar_image_tint">@color/photon_toolbar_text_color</color>
     <color name="photon_toolbar_image_tint_private">@color/photon_toolbar_text_color_private</color>
     <color name="photon_toolbar_bg">#F7FAFC</color>
     <color name="photon_toolbar_bg_private">#38383D</color>
 
--- a/mobile/android/app/src/photon/res/values/dimens.xml
+++ b/mobile/android/app/src/photon/res/values/dimens.xml
@@ -59,18 +59,18 @@
     <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>
+    <!-- Small favicon used in about:home(TopsitesPanel, BookmarksPanel, CombinedHistoryPanel and BrowserSearch) -->
+    <dimen name="favicon_small_size">24dp</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>
@@ -103,17 +103,23 @@
 
     <!-- Remote Tabs static view top padding. Less in landscape on phones. -->
     <dimen name="home_remote_tabs_top_padding">48dp</dimen>
 
     <!-- Remote Tabs Hidden devices row height -->
     <dimen name="home_remote_tabs_hidden_footer_height">40dp</dimen>
 
     <!-- Search Engine Row height -->
-    <dimen name="search_row_height">48dp</dimen>
+    <dimen name="search_engine_row_min_height">42dp</dimen>
+    <dimen name="search_suggestion_item_min_height">30dp</dimen>
+    <dimen name="search_suggestion_item_padding_horizontal">8dp</dimen>
+    <dimen name="search_suggestion_item_padding_vertical">7dp</dimen>
+
+    <!-- Search Home Item Row height -->
+    <dimen name="search_item_min_height">64dp</dimen>
 
     <dimen name="doorhanger_width">300dp</dimen>
     <dimen name="doorhanger_input_width">250dp</dimen>
     <dimen name="doorhanger_offsetX">12dp</dimen>
     <dimen name="doorhanger_offsetY">67dp</dimen>
     <dimen name="doorhanger_drawable_padding">5dp</dimen>
     <dimen name="doorhanger_subsection_padding">8dp</dimen>
     <dimen name="doorhanger_section_padding_small">10dp</dimen>
--- a/mobile/android/base/moz.build
+++ b/mobile/android/base/moz.build
@@ -1007,16 +1007,17 @@ gbjar.sources += ['java/org/mozilla/geck
     'widget/themed/ThemedRelativeLayout.java',
     'widget/themed/ThemedTextSwitcher.java',
     'widget/themed/ThemedTextView.java',
     'widget/themed/ThemedView.java',
 ]]
 if CONFIG['MOZ_ANDROID_PHOTON']:
     gbjar.sources += ['../app/src/photon/java/org/mozilla/gecko/' + x for x in [
         'home/SearchEngineRow.java',
+        'home/SuggestionItem.java',
         'skin/SkinConfig.java',
         'toolbar/TabCounter.java',
     ]]
 else:
     gbjar.sources += ['../app/src/australis/java/org/mozilla/gecko/' + x for x in [
         'home/SearchEngineRow.java',
         'skin/SkinConfig.java',
         'toolbar/TabCounter.java',