Bug 1389164 - Support new lightweight theme design on Photon. r?nechen,walkingice draft
authorJing-wei Wu <topwu.tw@gmail.com>
Mon, 28 Aug 2017 11:41:20 +0800
changeset 653823 0a85405ed0bfba1055b50df8a2bb16ab6f3ec949
parent 653822 bd4bb1022900cddeef44076d91316fc171e85ae6
child 728426 dbc5590413ed343494289afc3209700b7f21cba0
push id76421
push userbmo:topwu.tw@gmail.com
push dateMon, 28 Aug 2017 03:43:55 +0000
reviewersnechen, walkingice
bugs1389164
milestone57.0a1
Bug 1389164 - Support new lightweight theme design on Photon. r?nechen,walkingice We use an extra mask for url bar to make url text more clear. MozReview-Commit-ID: D4ngrRdAof6
mobile/android/app/src/photon/res/color/tab_strip_item_title.xml
mobile/android/app/src/photon/res/color/url_bar_title.xml
mobile/android/app/src/photon/res/color/url_bar_title_highlight.xml
mobile/android/app/src/photon/res/color/url_bar_title_hint.xml
mobile/android/app/src/photon/res/drawable/tab_strip_item_bg.xml
mobile/android/app/src/photon/res/drawable/url_bar_title_bg.xml
mobile/android/app/src/photon/res/layout/browser_toolbar.xml
mobile/android/app/src/photon/res/layout/tab_strip_item_view.xml
mobile/android/app/src/photon/res/layout/toolbar_display_layout.xml
mobile/android/app/src/photon/res/layout/toolbar_edit_layout.xml
mobile/android/app/src/photon/res/values-large-v17/styles.xml
mobile/android/app/src/photon/res/values-large/styles.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/dimens.xml
mobile/android/app/src/photon/res/values/styles.xml
mobile/android/base/java/org/mozilla/gecko/lwt/LightweightThemeDrawable.java
mobile/android/base/java/org/mozilla/gecko/toolbar/BrowserToolbar.java
mobile/android/base/java/org/mozilla/gecko/toolbar/NavButton.java
--- a/mobile/android/app/src/photon/res/color/tab_strip_item_title.xml
+++ b/mobile/android/app/src/photon/res/color/tab_strip_item_title.xml
@@ -4,21 +4,28 @@
 
     <item android:color="@color/photon_text_main_private"
           android:state_checked="true"
           gecko:state_private="true"/>
 
     <item android:color="@color/photon_text_secondary_private"
           gecko:state_private="true"/>
 
-    <item android:color="@color/photon_text_main"
+    <item android:color="@color/tab_strip_title_lwt_checked"
           android:state_checked="true"
           gecko:state_dark="true"/>
 
-    <item android:color="@color/photon_text_secondary_private"
+    <item android:color="@color/tab_strip_title_lwt"
           gecko:state_dark="true"/>
 
+    <item android:color="@color/tab_strip_title_lwt_checked"
+          android:state_checked="true"
+          gecko:state_light="true"/>
+
+    <item android:color="@color/tab_strip_title_lwt"
+          gecko:state_light="true"/>
+
     <item android:color="@color/photon_text_main"
           android:state_checked="true"/>
 
     <item android:color="@color/photon_text_secondary"/>
 
 </selector>
--- a/mobile/android/app/src/photon/res/color/url_bar_title.xml
+++ b/mobile/android/app/src/photon/res/color/url_bar_title.xml
@@ -4,18 +4,12 @@
    - 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">
 
     <!-- private browsing mode -->
     <item android:color="@color/photon_text_main_private" gecko:state_private="true" />
 
-    <!-- dark theme -->
-    <item android:color="@color/photon_text_main_private" gecko:state_dark="true" />
-
-    <!-- light theme -->
-    <item android:color="@color/photon_text_main" gecko:state_light="true" />
-
     <!-- normal mode -->
     <item android:color="@color/photon_text_main" />
 
 </selector>
--- a/mobile/android/app/src/photon/res/color/url_bar_title_highlight.xml
+++ b/mobile/android/app/src/photon/res/color/url_bar_title_highlight.xml
@@ -4,18 +4,12 @@
    - 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">
 
     <!-- private browsing mode -->
     <item android:color="@color/photon_text_selected_highlight_private" gecko:state_private="true" />
 
-    <!-- dark theme -->
-    <item android:color="@color/photon_text_selected_highlight_private" gecko:state_dark="true" />
-
-    <!-- light theme -->
-    <item android:color="@color/photon_text_selected_highlight" gecko:state_light="true" />
-
     <!-- normal mode -->
     <item android:color="@color/photon_text_selected_highlight" />
 
 </selector>
--- a/mobile/android/app/src/photon/res/color/url_bar_title_hint.xml
+++ b/mobile/android/app/src/photon/res/color/url_bar_title_hint.xml
@@ -4,18 +4,12 @@
    - 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">
 
     <!-- private browsing mode -->
     <item android:color="@color/photon_text_placeholder_private" gecko:state_private="true" />
 
-    <!-- dark theme -->
-    <item android:color="@color/photon_text_placeholder_private" gecko:state_dark="true" />
-
-    <!-- light theme -->
-    <item android:color="@color/photon_text_placeholder" gecko:state_light="true" />
-
     <!-- normal mode -->
     <item android:color="@color/photon_text_placeholder" />
 
 </selector>
--- a/mobile/android/app/src/photon/res/drawable/tab_strip_item_bg.xml
+++ b/mobile/android/app/src/photon/res/drawable/tab_strip_item_bg.xml
@@ -1,62 +1,73 @@
 <?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">
 
+    <!-- private mode -->
     <item android:drawable="@color/photon_tab_strip_item_private_checked_pressed"
           android:state_checked="true"
           android:state_pressed="true"
           gecko:state_private="true"/>
 
     <item android:drawable="@color/photon_tab_strip_item_private_checked"
           android:state_checked="true"
           gecko:state_private="true"/>
 
     <item android:drawable="@color/photon_tab_strip_item_private_pressed"
           android:state_pressed="true"
           gecko:state_private="true"/>
 
-    <!-- dark theme -->
-    <item android:drawable="@color/photon_tab_strip_item_lwt_dark_checked_pressed"
+    <item android:drawable="@color/photon_tab_strip_item_private"
+          gecko:state_private="true"/>
+
+    <!-- dark theme-->
+    <item android:drawable="@color/photon_tab_strip_item_lwt_checked_pressed"
           android:state_checked="true"
           android:state_pressed="true"
           gecko:state_dark="true"/>
 
-    <item android:drawable="@color/photon_tab_strip_item_lwt_dark_checked"
+    <item android:drawable="@color/photon_tab_strip_item_lwt_checked"
           android:state_checked="true"
           gecko:state_dark="true"/>
 
-    <item android:drawable="@color/photon_tab_strip_item_lwt_dark_pressed"
+    <item android:drawable="@color/photon_tab_strip_item_lwt_pressed"
           android:state_pressed="true"
           gecko:state_dark="true"/>
 
-    <!-- light theme -->
-    <item android:drawable="@color/photon_tab_strip_item_lwt_checked_pressed"
+    <item android:drawable="@color/photon_tab_strip_item_lwt"
+          gecko:state_dark="true"/>
+
+    <!-- light theme-->
+    <item android:drawable="@color/photon_tab_strip_item_lwt_light_checked_pressed"
           android:state_checked="true"
           android:state_pressed="true"
           gecko:state_light="true"/>
 
-    <item android:drawable="@color/photon_tab_strip_item_lwt_checked"
+    <item android:drawable="@color/photon_tab_strip_item_lwt_light_checked"
           android:state_checked="true"
           gecko:state_light="true"/>
 
-    <item android:drawable="@color/photon_tab_strip_item_lwt_dark_pressed"
+    <item android:drawable="@color/photon_tab_strip_item_lwt_light_pressed"
           android:state_pressed="true"
           gecko:state_light="true"/>
 
+    <item android:drawable="@color/photon_tab_strip_item_lwt_light"
+          gecko:state_light="true"/>
+
+    <!-- normal mode -->
     <item android:drawable="@color/photon_tab_strip_item_checked_pressed"
           android:state_checked="true"
           android:state_pressed="true"/>
 
     <item android:drawable="@color/photon_tab_strip_item_checked"
           android:state_checked="true"/>
 
     <item android:drawable="@color/photon_tab_strip_item_pressed"
           android:state_pressed="true"/>
 
-    <item android:drawable="@android:color/transparent"/>
+    <item android:drawable="@color/photon_tab_strip_item"/>
 
 </selector>
new file mode 100644
--- /dev/null
+++ b/mobile/android/app/src/photon/res/drawable/url_bar_title_bg.xml
@@ -0,0 +1,25 @@
+<?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">
+
+    <!-- private browsing mode -->
+    <item android:drawable="@android:color/transparent"
+          gecko:state_private="true"/>
+
+    <!-- dark theme -->
+    <item android:drawable="@color/photon_url_bar_bg"
+          gecko:state_dark="true"/>
+
+    <!-- light theme -->
+    <item android:drawable="@color/photon_url_bar_bg"
+          gecko:state_light="true"/>
+
+    <!-- normal mode -->
+    <item android:drawable="@android:color/transparent"/>
+
+</selector>
--- a/mobile/android/app/src/photon/res/layout/browser_toolbar.xml
+++ b/mobile/android/app/src/photon/res/layout/browser_toolbar.xml
@@ -2,17 +2,17 @@
 
 <!-- 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"
-       tools:layout_height="@dimen/browser_toolbar_height"
+       tools:layout_height="@dimen/browser_toolbar_url_height"
        tools:layout_width="match_parent"
        tools:parentTag="RelativeLayout">
 
     <!-- Note: any layout parameters setting the right edge of
          this View should be matched in the url_bar_translating_edge. -->
     <ImageView
         android:id="@+id/url_bar_entry"
         style="@style/UrlBar.Entry"
--- 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
@@ -8,23 +8,20 @@
        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">
 
     <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_marginEnd="8dp"
-        android:layout_marginLeft="12dp"
-        android:layout_marginRight="8dp"
-        android:layout_marginStart="12dp"
         android:duplicateParentState="true"
         android:scaleType="centerInside"
         tools:src="@drawable/toolbar_favicon_default"/>
 
     <org.mozilla.gecko.widget.FadedSingleColorTextView
         android:id="@+id/title"
         android:layout_width="0dip"
         android:layout_height="match_parent"
--- a/mobile/android/app/src/photon/res/layout/toolbar_display_layout.xml
+++ b/mobile/android/app/src/photon/res/layout/toolbar_display_layout.xml
@@ -2,45 +2,42 @@
 
 <!-- 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"
+       tools:background="@android:color/black"
        tools:layout_height="@dimen/browser_toolbar_height"
        tools:layout_width="match_parent"
        tools:parentTag="LinearLayout">
 
     <!-- The site security icon is misaligned with the page title so
          we add a bottom margin to align their bottoms.
          Site security icon must have exact position and size as search icon in
          edit layout -->
 
     <org.mozilla.gecko.widget.themed.ThemedImageButton
         android:id="@+id/site_security"
         style="@style/UrlBar.SiteIdentity"
         android:layout_gravity="center_vertical"
-        android:layout_marginBottom="@dimen/browser_toolbar_site_security_margin_bottom"
-        android:layout_marginEnd="@dimen/browser_toolbar_site_security_margin_end"
-        android:layout_marginRight="@dimen/browser_toolbar_site_security_margin_end"
-        android:background="@android:color/transparent"
+        android:background="@drawable/url_bar_title_bg"
         android:contentDescription="@string/site_security"
         android:src="@drawable/security_mode_icon"
-        tools:background="#88FF0000"
         tools:src="@drawable/ic_lock"/>
 
     <org.mozilla.gecko.widget.FadedMultiColorTextView
         android:id="@+id/url_bar_title"
         style="@style/UrlBar.Title"
         android:layout_width="match_parent"
-        android:layout_height="match_parent"
+        android:layout_gravity="center_vertical"
         android:layout_weight="1.0"
-        gecko:autoUpdateTheme="false"
+        android:background="@drawable/url_bar_title_bg"
         gecko:fadeBackgroundColor="@android:color/transparent"
         gecko:fadeWidth="40dip"/>
 
     <org.mozilla.gecko.toolbar.PageActionLayout
         android:id="@+id/page_action_layout"
         android:layout_width="wrap_content"
         android:layout_height="match_parent"
         android:orientation="horizontal"
--- a/mobile/android/app/src/photon/res/layout/toolbar_edit_layout.xml
+++ b/mobile/android/app/src/photon/res/layout/toolbar_edit_layout.xml
@@ -13,34 +13,36 @@
        tools:orientation="horizontal"
        tools:parentTag="LinearLayout">
 
     <!-- Search icon must have exact position and size as site security in
          display layout -->
     <org.mozilla.gecko.widget.themed.ThemedImageButton
         android:id="@+id/search_icon"
         style="@style/UrlBar.SiteIdentity"
+        android:layout_gravity="center_vertical"
+        android:background="@drawable/url_bar_title_bg"
         android:scaleType="center"
         android:src="@drawable/ic_search_icon"
         android:visibility="gone"
         tools:visibility="visible"/>
 
     <org.mozilla.gecko.toolbar.ToolbarEditText
         android:id="@+id/url_edit_text"
         style="@style/UrlBar.Title"
         android:layout_width="match_parent"
-        android:layout_height="match_parent"
+        android:layout_gravity="center_vertical"
         android:layout_weight="1.0"
+        android:background="@drawable/url_bar_title_bg"
         android:contentDescription="@string/url_bar_default_text"
         android:imeOptions="actionGo|flagNoExtractUi|flagNoFullscreen"
         android:inputType="textUri"
         android:paddingEnd="8dp"
         android:paddingRight="8dp"
-        android:selectAllOnFocus="true"
-        gecko:autoUpdateTheme="false"/>
+        android:selectAllOnFocus="true"/>
 
     <org.mozilla.gecko.toolbar.ToolbarRoundButton
         android:id="@+id/qrcode"
         style="@style/UrlBar.QRCode"
         android:background="@drawable/url_bar_action_button"
         android:src="@drawable/ic_qrcode"/>
 
     <org.mozilla.gecko.toolbar.ToolbarRoundButton
--- a/mobile/android/app/src/photon/res/values-large-v17/styles.xml
+++ b/mobile/android/app/src/photon/res/values-large-v17/styles.xml
@@ -75,11 +75,12 @@
     <style name="UrlBar.V17.EditCancel" parent="UrlBar.Base.EditCancel">
         <item name="android:layout_alignParentEnd">true</item>
     </style>
 
     <style name="UrlBar.SiteIdentity" parent="UrlBar.V17.SiteIdentity" />
 
     <style name="UrlBar.V17.SiteIdentity" parent="UrlBar.Base.SiteIdentity">
         <item name="android:layout_marginStart">8dp</item>
+        <item name="android:paddingEnd">@dimen/browser_toolbar_site_security_margin_end</item>
     </style>
 
 </resources>
--- a/mobile/android/app/src/photon/res/values-large/styles.xml
+++ b/mobile/android/app/src/photon/res/values-large/styles.xml
@@ -194,11 +194,12 @@
     <style name="UrlBar.V15.EditCancel" parent="UrlBar.Base.EditCancel">
         <item name="android:layout_alignParentRight">true</item>
     </style>
 
     <style name="UrlBar.SiteIdentity" parent="UrlBar.V15.SiteIdentity" />
 
     <style name="UrlBar.V15.SiteIdentity" parent="UrlBar.Base.SiteIdentity">
         <item name="android:layout_marginLeft">8dp</item>
+        <item name="android:paddingRight">@dimen/browser_toolbar_site_security_margin_end</item>
     </style>
 
 </resources>
--- a/mobile/android/app/src/photon/res/values-v17/styles.xml
+++ b/mobile/android/app/src/photon/res/values-v17/styles.xml
@@ -1,15 +1,16 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
 
     <style name="UrlBar.SiteIdentity" parent="UrlBar.V17.SiteIdentity" />
 
     <style name="UrlBar.V17.SiteIdentity" parent="UrlBar.Base.SiteIdentity">
         <item name="android:layout_marginStart">5dp</item>
+        <item name="android:paddingEnd">@dimen/browser_toolbar_site_security_margin_end</item>
     </style>
 
     <style name="UrlBar.Entry" parent="UrlBar.V17.Entry" />
 
     <style name="UrlBar.V17.Entry" parent="UrlBar.Base.Entry">
         <item name="android:layout_marginStart">5dp</item>
         <item name="android:layout_toStartOf">@+id/tabs</item>
     </style>
@@ -58,17 +59,22 @@
         <item name="android:layout_marginEnd">-3dp</item>
     </style>
 
     <style name="UrlBar.DisplayLayout" parent="UrlBar.V17.DisplayLayout" />
 
     <style name="UrlBar.V17.DisplayLayout" parent="UrlBar.Base.DisplayLayout">
         <item name="android:layout_alignStart">@id/url_bar_entry</item>
         <item name="android:layout_alignEnd">@id/url_bar_entry</item>
-        <item name="android:layout_marginEnd">-3dp</item>
     </style>
 
     <style name="UrlBar.QRCode" parent="UrlBar.V17.QRCode"/>
     <style name="UrlBar.V17.QRCode" parent="UrlBar.ImageButton">
         <item name="android:layout_marginRight">-3dp</item>
     </style>
 
+    <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>
+
 </resources>
--- a/mobile/android/app/src/photon/res/values/colors.xml
+++ b/mobile/android/app/src/photon/res/values/colors.xml
@@ -77,35 +77,43 @@
     <color name="photon_home_list_divider_private">@color/photon_two_line_page_row_bg_private</color>
 
     <color name="photon_url_bar_blocked">#D70022</color>
     <color name="photon_url_bar_blocked_private">#D70022</color>
     <color name="photon_url_bar_certificate_owner">#05A700</color>
     <color name="photon_url_bar_certificate_owner_private">#16DA00</color>
     <color name="photon_url_bar_domain">@color/photon_text_main</color>
     <color name="photon_url_bar_domain_private">@color/photon_text_main_private</color>
+    <color name="photon_url_bar_bg">#80FFFFFF</color>
 
     <!-- Tab strip color on tablet -->
     <color name="photon_tab_strip_bg">#272727</color>
 
     <!-- Tab strip item color on tablet -->
     <color name="photon_tab_strip_item">#272727</color>
     <color name="photon_tab_strip_item_checked">#F9F9FA</color>
     <color name="photon_tab_strip_item_checked_pressed">#E4E4E5</color> <!-- #F9F9FA + #272727@10% Alpha -->
     <color name="photon_tab_strip_item_pressed">#3D3C3D</color> <!-- #272727 + #FFFFFF@10% Alpha -->
+    <color name="photon_tab_strip_item_private">#272727</color>
     <color name="photon_tab_strip_item_private_checked">#38383D</color>
     <color name="photon_tab_strip_item_private_checked_pressed">#4C4B51</color> <!-- #38383D + #FFFFFF@10% Alpha -->
     <color name="photon_tab_strip_item_private_pressed">#3D3C3D</color> <!-- #272727 + #FFFFFF@10% Alpha -->
 
-    <color name="photon_tab_strip_item_lwt_dark_checked">#1A38383D</color>
-    <color name="photon_tab_strip_item_lwt_dark_checked_pressed">#1AFFFFFF</color>
-    <color name="photon_tab_strip_item_lwt_dark_pressed">#1AFFFFFF</color>
-    <color name="photon_tab_strip_item_lwt_checked">#1AF9F9FA</color>
-    <color name="photon_tab_strip_item_lwt_checked_pressed">#1A272727</color>
-    <color name="photon_tab_strip_item_lwt_pressed">#1A272727</color>
+    <color name="photon_tab_strip_item_lwt_checked">#CCF9F9FA</color> <!-- 80% -->
+    <color name="photon_tab_strip_item_lwt_checked_pressed">#99FFFFFF</color> <!-- 60% -->
+    <color name="photon_tab_strip_item_lwt">#66E4E4E4</color> <!-- 40% -->
+    <color name="photon_tab_strip_item_lwt_pressed">#33FFFFFF</color> <!-- 20% -->
+
+    <color name="photon_tab_strip_item_lwt_light_checked">@color/photon_tab_strip_item_lwt_checked</color>
+    <color name="photon_tab_strip_item_lwt_light_checked_pressed">@color/photon_tab_strip_item_lwt_checked_pressed</color>
+    <color name="photon_tab_strip_item_lwt_light">@color/photon_tab_strip_item_lwt</color>
+    <color name="photon_tab_strip_item_lwt_light_pressed">@color/photon_tab_strip_item_lwt_pressed</color>
+
+    <color name="tab_strip_title_lwt_checked">#272727</color>
+    <color name="tab_strip_title_lwt">#272727</color>
 
     <!-- Status bar background color -->
     <color name="status_bar_bg_color">@color/photon_toolbar_bg</color>
     <color name="status_bar_bg_color_private">@color/photon_toolbar_bg_private</color>
     <color name="status_bar_bg_color_tablet">@color/photon_tabs_tray_bg</color>
 
     <!-- Toolbar menu item tint color -->
     <color name="menu_item_tint">@color/photon_icon</color>
@@ -278,12 +286,12 @@
 
     <color name="private_active_text">#FFFFFF</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">#414146</color>
+    <color name="tablet_tab_strip_divider_color">#737373</color>
 
     <color name="bookmark_folder_bg_color">#FCFCFC</color>
 </resources>
--- a/mobile/android/app/src/photon/res/values/dimens.xml
+++ b/mobile/android/app/src/photon/res/values/dimens.xml
@@ -27,16 +27,18 @@
     <!-- We use two different values for browser_toolbar_height on tablet
          which is inconsistent. Temporary value until bug 1150730 is fixed. -->
     <dimen name="browser_toolbar_height_flipper">@dimen/browser_toolbar_height</dimen>
     <dimen name="browser_toolbar_button_padding">12dp</dimen>
     <dimen name="browser_toolbar_icon_width">48dp</dimen>
     <dimen name="browser_toolbar_menu_icon_height">16dp</dimen>
     <dimen name="browser_toolbar_menu_radius">2dp</dimen>
 
+    <dimen name="browser_toolbar_url_height">32dp</dimen>
+
     <!-- favicon_size includes 4dp of right padding. We can't use margin (which would allow us to
          specify the actual size) because that would decrease the size of our hit target. -->
     <dimen name="browser_toolbar_favicon_size">21.33dip</dimen>
     <dimen name="browser_toolbar_shadow_size">1dp</dimen>
 
     <!-- If you update one of these values, update the others. -->
     <dimen name="tablet_nav_button_width">48dp</dimen>
     <dimen name="tablet_nav_button_width_half">21dp</dimen>
@@ -51,17 +53,17 @@
 
     <dimen name="tablet_tab_strip_height">48dp</dimen>
     <dimen name="tablet_tab_strip_item_width">178dp</dimen>
     <dimen name="tablet_tab_strip_item_height">40dp</dimen>
     <dimen name="tablet_tab_strip_fading_edge_size">15dp</dimen>
     <dimen name="tablet_tab_strip_item_margin">0dp</dimen>
     <dimen name="tablet_tab_strip_divider_width">1dp</dimen>
     <dimen name="tablet_tab_strip_divider_height">30dp</dimen>
-    <dimen name="tablet_tab_strip_divider_padding_bottom">6dp</dimen>
+    <dimen name="tablet_tab_strip_divider_padding_bottom">4dp</dimen>
     <dimen name="tablet_browser_toolbar_menu_item_width">56dp</dimen>
     <!-- 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_tab_strip_button_inset">5dp</dimen>
 
     <!-- Dimensions used by Favicons and FaviconView -->
     <dimen name="favicon_bg">112dp</dimen>
     <dimen name="favicon_corner_radius">2dp</dimen>
@@ -83,17 +85,16 @@
     <dimen name="overlay_prompt_button_width">148dp</dimen>
     <dimen name="overlay_prompt_container_width">@dimen/match_parent</dimen>
 
     <!-- Site security icon -->
     <dimen name="browser_toolbar_site_security_width">32dp</dimen>
     <dimen name="browser_toolbar_site_security_margin_end">0dp</dimen>
 
     <!-- If one of these values changes, they all should. -->
-    <dimen name="browser_toolbar_site_security_margin_bottom">.5dp</dimen>
     <dimen name="site_security_unknown_inset_top">1dp</dimen>
     <dimen name="site_security_unknown_inset_bottom">-1dp</dimen>
 
     <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>
--- a/mobile/android/app/src/photon/res/values/styles.xml
+++ b/mobile/android/app/src/photon/res/values/styles.xml
@@ -460,16 +460,17 @@
 
     <!-- URL bar - Button -->
     <style name="UrlBar.Button">
         <item name="android:layout_height">match_parent</item>
         <item name="android:background">@android:color/transparent</item>
     </style>
 
     <style name="UrlBar.Title" parent="UrlBar.Button">
+        <item name="android:layout_height">@dimen/browser_toolbar_url_height</item>
         <item name="android:textAppearance">@style/TextAppearance.UrlBar.Title</item>
         <item name="android:textColor">@color/url_bar_title</item>
         <item name="android:textColorHint">@color/url_bar_title_hint</item>
         <item name="android:textColorHighlight">@color/url_bar_title_highlight</item>
         <item name="android:textSelectHandle">@drawable/handle_middle</item>
         <item name="android:textSelectHandleLeft">@drawable/handle_start</item>
         <item name="android:textSelectHandleRight">@drawable/handle_end</item>
         <item name="android:textCursorDrawable">@null</item>
@@ -813,21 +814,22 @@
         <item name="colorButtonNormal">@color/link_blue</item>
         <item name="android:textColor">@android:color/white</item>
     </style>
 
     <!-- URL bar - Site identity -->
     <style name="UrlBar.SiteIdentity" parent="UrlBar.V15.SiteIdentity"/>
     <style name="UrlBar.Base.SiteIdentity" parent="UrlBar.Button">
         <item name="android:layout_width">@dimen/browser_toolbar_site_security_width</item>
-        <item name="android:layout_height">@dimen/browser_toolbar_height</item>
+        <item name="android:layout_height">@dimen/browser_toolbar_url_height</item>
         <item name="android:scaleType">center</item>
     </style>
     <style name="UrlBar.V15.SiteIdentity" parent="UrlBar.Base.SiteIdentity">
         <item name="android:layout_marginLeft">5dp</item>
+        <item name="android:paddingRight">@dimen/browser_toolbar_site_security_margin_end</item>
     </style>
 
     <style name="UrlBar.Entry" parent="UrlBar.V15.Entry"/>
     <style name="UrlBar.Base.Entry" parent="UrlBar.Button"/>
     <style name="UrlBar.V15.Entry" parent="UrlBar.Base.Entry">
         <item name="android:layout_marginLeft">5dp</item>
         <item name="android:layout_toLeftOf">@+id/tabs</item>
     </style>
@@ -882,17 +884,31 @@
     </style>
 
     <style name="UrlBar.DisplayLayout" parent="UrlBar.V15.DisplayLayout"/>
     <style name="UrlBar.Base.DisplayLayout" parent="UrlBar.Button"/>
 
     <style name="UrlBar.V15.DisplayLayout" parent="UrlBar.Base.DisplayLayout">
         <item name="android:layout_alignLeft">@id/url_bar_entry</item>
         <item name="android:layout_alignRight">@id/url_bar_entry</item>
-        <item name="android:layout_marginRight">-3dp</item>
     </style>
 
     <style name="UrlBar.QRCode" parent="UrlBar.V15.QRCode"/>
     <style name="UrlBar.V15.QRCode" parent="UrlBar.ImageButton">
         <item name="android:layout_marginRight">-3dp</item>
     </style>
 
+    <!-- TabStrip -->
+    <style name="TabStrip"/>
+
+    <style name="TabStrip.Base">
+        <item name="android:layout_width">@dimen/tablet_tab_strip_item_width</item>
+        <item name="android:layout_height">@dimen/tablet_tab_strip_item_height</item>
+    </style>
+
+    <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>
+
 </resources>
--- a/mobile/android/base/java/org/mozilla/gecko/lwt/LightweightThemeDrawable.java
+++ b/mobile/android/base/java/org/mozilla/gecko/lwt/LightweightThemeDrawable.java
@@ -29,16 +29,17 @@ public class LightweightThemeDrawable ex
     private final Paint mPaint;
     private Paint mColorPaint;
 
     private final Bitmap mBitmap;
     private final Resources mResources;
 
     private int mStartColor;
     private int mEndColor;
+    private boolean mHorizontalGradient;
 
     public LightweightThemeDrawable(Resources resources, Bitmap bitmap) {
         mBitmap = bitmap;
         mResources = resources;
 
         mPaint = new Paint();
         mPaint.setAntiAlias(true);
         mPaint.setStrokeWidth(0.0f);
@@ -99,35 +100,47 @@ public class LightweightThemeDrawable ex
      * @param filter The filter color to be applied using SRC_OVER mode.
      */
     public void setColorWithFilter(int color, int filter) {
         mColorPaint = new Paint(mPaint);
         mColorPaint.setColor(color);
         mColorPaint.setColorFilter(new PorterDuffColorFilter(filter, PorterDuff.Mode.SRC_OVER));
     }
 
+    public void setAlpha(final int startAlpha, final int endAlpha) {
+        // By default we draw a vertical linear gradient.
+        setAlpha(startAlpha, endAlpha, false);
+    }
+
     /**
      * Set the alpha for the linear gradient used with the bitmap's shader.
      *
      * @param startAlpha The starting alpha (0..255) value to be applied to the LinearGradient.
-     * @param startAlpha The ending alpha (0..255) value to be applied to the LinearGradient.
+     * @param endAlpha The ending alpha (0..255) value to be applied to the LinearGradient.
+     * @param horizontalGradient Draw gradient in horizontal direction; otherwise in vertical direction.
      */
-    public void setAlpha(int startAlpha, int endAlpha) {
+    public void setAlpha(final int startAlpha, final int endAlpha, final boolean horizontalGradient) {
         mStartColor = startAlpha << 24;
         mEndColor = endAlpha << 24;
+        mHorizontalGradient = horizontalGradient;
         initializeBitmapShader();
     }
 
     private void initializeBitmapShader() {
         // A bitmap-shader to draw the bitmap.
         // Clamp mode will repeat the last row of pixels.
         // Hence its better to have an endAlpha of 0 for the linear-gradient.
-        BitmapShader bitmapShader = new BitmapShader(mBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
+        final BitmapShader bitmapShader = new BitmapShader(mBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
 
         // A linear-gradient to specify the opacity of the bitmap.
-        LinearGradient gradient = new LinearGradient(0, 0, 0, mBitmap.getHeight(), mStartColor, mEndColor, Shader.TileMode.CLAMP);
+        final LinearGradient gradient;
+        if (mHorizontalGradient) {
+            gradient = new LinearGradient(0, 0, mBitmap.getWidth(), 0, mStartColor, mEndColor, Shader.TileMode.CLAMP);
+        } else {
+            gradient = new LinearGradient(0, 0, 0, mBitmap.getHeight(), mStartColor, mEndColor, Shader.TileMode.CLAMP);
+        }
 
         // Make a combined shader -- a performance win.
         // The linear-gradient is the 'SRC' and the bitmap-shader is the 'DST'.
         // Drawing the DST in the SRC will provide the opacity.
         mPaint.setShader(new ComposeShader(bitmapShader, gradient, PorterDuff.Mode.DST_IN));
     }
 }
--- a/mobile/android/base/java/org/mozilla/gecko/toolbar/BrowserToolbar.java
+++ b/mobile/android/base/java/org/mozilla/gecko/toolbar/BrowserToolbar.java
@@ -27,16 +27,17 @@ import org.mozilla.gecko.lwt.Lightweight
 import org.mozilla.gecko.menu.GeckoMenu;
 import org.mozilla.gecko.menu.MenuPopup;
 import org.mozilla.gecko.preferences.GeckoPreferences;
 import org.mozilla.gecko.tabs.TabHistoryController;
 import org.mozilla.gecko.toolbar.ToolbarDisplayLayout.OnStopListener;
 import org.mozilla.gecko.toolbar.ToolbarDisplayLayout.OnTitleChangeListener;
 import org.mozilla.gecko.toolbar.ToolbarDisplayLayout.UpdateFlags;
 import org.mozilla.gecko.util.Clipboard;
+import org.mozilla.gecko.util.HardwareUtils;
 import org.mozilla.gecko.util.MenuUtils;
 import org.mozilla.gecko.util.WindowUtil;
 import org.mozilla.gecko.widget.AnimatedProgressBar;
 import org.mozilla.gecko.widget.themed.ThemedImageButton;
 import org.mozilla.gecko.widget.themed.ThemedRelativeLayout;
 
 import android.content.Context;
 import android.content.res.Resources;
@@ -76,17 +77,19 @@ import android.support.annotation.NonNul
 * as a set of listeners to allow {@code BrowserToolbar} users to react
 * to state changes accordingly.
 */
 public abstract class BrowserToolbar extends ThemedRelativeLayout
                                      implements Tabs.OnTabsChangedListener,
                                                 GeckoMenu.ActionItemBarPresenter {
     private static final String LOGTAG = "GeckoToolbar";
 
-    private static final int LIGHTWEIGHT_THEME_ALPHA = 77;
+    private static final int LIGHTWEIGHT_THEME_INVERT_ALPHA_START = 204; // 255 - alpha = invert_alpha
+    private static final int LIGHTWEIGHT_THEME_INVERT_ALPHA_END = 102;
+    public static final int LIGHTWEIGHT_THEME_INVERT_ALPHA_TABLET = 51;
 
     public interface OnActivateListener {
         public void onActivate();
     }
 
     public interface OnCommitListener {
         public void onCommit();
     }
@@ -903,17 +906,17 @@ public abstract class BrowserToolbar ext
     @Override
     public void onLightweightThemeChanged() {
         final Drawable drawable = getLWTDefaultStateSetDrawable();
         if (drawable == null) {
             return;
         }
 
         final StateListDrawable stateList = new StateListDrawable();
-        stateList.addState(PRIVATE_STATE_SET, getColorDrawable(R.color.tabs_tray_grey_pressed));
+        stateList.addState(PRIVATE_STATE_SET, getColorDrawable(R.color.photon_browser_toolbar_bg_private));
         stateList.addState(EMPTY_STATE_SET, drawable);
 
         setBackgroundDrawable(stateList);
     }
 
     public void setTouchEventInterceptor(TouchEventInterceptor interceptor) {
         mTouchEventInterceptor = interceptor;
     }
@@ -932,17 +935,29 @@ public abstract class BrowserToolbar ext
     }
 
     public static LightweightThemeDrawable getLightweightThemeDrawable(final View view,
             final LightweightTheme theme, final int colorResID) {
         final int color = ContextCompat.getColor(view.getContext(), colorResID);
 
         final LightweightThemeDrawable drawable = theme.getColorDrawable(view, color);
         if (drawable != null) {
-            drawable.setAlpha(LIGHTWEIGHT_THEME_ALPHA, LIGHTWEIGHT_THEME_ALPHA);
+            final int startAlpha, endAlpha;
+            final boolean horizontalGradient;
+
+            if (HardwareUtils.isTablet()) {
+                startAlpha = LIGHTWEIGHT_THEME_INVERT_ALPHA_TABLET;
+                endAlpha = LIGHTWEIGHT_THEME_INVERT_ALPHA_TABLET;
+                horizontalGradient = false;
+            } else {
+                startAlpha = LIGHTWEIGHT_THEME_INVERT_ALPHA_START;
+                endAlpha = LIGHTWEIGHT_THEME_INVERT_ALPHA_END;
+                horizontalGradient = true;
+            }
+            drawable.setAlpha(startAlpha, endAlpha, horizontalGradient);
         }
 
         return drawable;
     }
 
     public static class TabEditingState {
         // The edited text from the most recent time this tab was unselected.
         protected String lastEditingText;
--- a/mobile/android/base/java/org/mozilla/gecko/toolbar/NavButton.java
+++ b/mobile/android/base/java/org/mozilla/gecko/toolbar/NavButton.java
@@ -53,18 +53,27 @@ abstract class NavButton extends ShapedB
         super.setPrivateMode(isPrivate);
         mBorderPaint.setColor(isPrivate ? mBorderColorPrivate : mBorderColor);
     }
 
     @Override
     public void draw(Canvas canvas) {
         super.draw(canvas);
 
-        final double alpha = 255 * (isEnabled() ? 1 : 0.05);
-        mBorderPaint.setAlpha((int) alpha);
+        final double alphaRatio;
+        if (getTheme().isEnabled()) {
+            // When LightweightTheme is enabled, we don't want to show clear border.
+            alphaRatio = 0.4;
+        } else if (isEnabled()) {
+            alphaRatio = 1;
+        } else {
+            // We also use low alpha value to present disabled state.
+            alphaRatio = 0.05;
+        }
+        mBorderPaint.setAlpha((int) (255 * alphaRatio));
 
         // Draw the border on top.
         canvas.drawPath(mBorderPath, mBorderPaint);
     }
 
     // The drawable is constructed as per @drawable/url_bar_nav_button.
     @Override
     public void onLightweightThemeChanged() {