Bug 1379066 - 10. Apply style change in xml draft
authorJulian_Chu <walkingice0204@gmail.com>
Fri, 07 Jul 2017 15:54:04 +0800
changeset 607551 f070baefdb0f130a9a45c4ae7e53e21d0197baf2
parent 607550 dbfe0d6bc03210ddd8ddba64518ec15f2dd11a8b
child 637059 d3c4b2ada66b65e3794e5d841187baf1234b3531
push id68017
push userbmo:walkingice0204@gmail.com
push dateWed, 12 Jul 2017 10:37:39 +0000
bugs1379066
milestone56.0a1
Bug 1379066 - 10. Apply style change in xml This patch is pretty hard to read and review. It only changes styles in Photon flavor to match designer's design. Includes layout, dimension, colors....etc. Australis flavor should not aware of this patch. MozReview-Commit-ID: 9ROK1NcwJfC
mobile/android/app/src/photon/res/color/url_bar_image_color.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/action_bar_button.xml
mobile/android/app/src/photon/res/drawable/url_bar_bg.xml
mobile/android/app/src/photon/res/layout-large-v11/browser_toolbar.xml
mobile/android/app/src/photon/res/layout/browser_toolbar.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-v16/styles.xml
mobile/android/app/src/photon/res/values-large-v17/styles.xml
mobile/android/app/src/photon/res/values-large/dimens.xml
mobile/android/app/src/photon/res/values-large/styles.xml
mobile/android/app/src/photon/res/values-v16/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
new file mode 100644
--- /dev/null
+++ b/mobile/android/app/src/photon/res/color/url_bar_image_color.xml
@@ -0,0 +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/. -->
+
+<selector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:gecko="http://schemas.android.com/apk/res-auto">
+    <item android:color="@color/photon_toolbar_image_tint_private" android:state_enabled="false" gecko:state_private="true" />
+    <item android:color="@color/photon_toolbar_image_tint_private" android:state_enabled="true" gecko:state_private="true" />
+    <item android:color="@color/photon_toolbar_image_tint" android:state_enabled="false" gecko:state_private="false" />
+    <item android:color="@color/photon_toolbar_image_tint" />
+</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
@@ -2,20 +2,20 @@
 
 <!-- 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:color="@color/private_active_text" gecko:state_private="true" />
+    <item android:color="@color/photon_text_main_private" gecko:state_private="true" />
 
     <!-- dark theme -->
-    <item android:color="@color/private_active_text" gecko:state_dark="true" />
+    <item android:color="@color/photon_text_main_private" gecko:state_dark="true" />
 
     <!-- light theme -->
-    <item android:color="@color/placeholder_active_grey" gecko:state_light="true" />
+    <item android:color="@color/photon_text_main" gecko:state_light="true" />
 
     <!-- normal mode -->
-    <item android:color="@color/placeholder_active_grey" />
+    <item android:color="@color/photon_text_main" />
 
 </selector>
new file mode 100644
--- /dev/null
+++ b/mobile/android/app/src/photon/res/color/url_bar_title_highlight.xml
@@ -0,0 +1,21 @@
+<?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: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
@@ -2,14 +2,20 @@
 
 <!-- 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:color="#FF7F828A" gecko:state_private="true" />
+    <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="#FF666666" />
+    <item android:color="@color/photon_text_placeholder" />
 
 </selector>
--- a/mobile/android/app/src/photon/res/drawable/action_bar_button.xml
+++ b/mobile/android/app/src/photon/res/drawable/action_bar_button.xml
@@ -2,22 +2,27 @@
 
 <!-- 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_enabled="true" android:state_pressed="true">
-        <shape>
-            <solid android:color="@color/highlight" />
-        </shape>
+        <inset android:insetBottom="@dimen/browser_toolbar_image_button_v_spacing" android:insetTop="@dimen/browser_toolbar_image_button_v_spacing">
+            <shape>
+                <solid android:color="@color/highlight" />
+                <corners android:radius="2dp" />
+            </shape>
+        </inset>
     </item>
 
     <item android:state_focused="true" android:state_pressed="false">
-        <shape>
-            <solid android:color="@color/highlight_focused" />
-        </shape>
+        <inset android:insetBottom="@dimen/browser_toolbar_image_button_v_spacing" android:insetTop="@dimen/browser_toolbar_image_button_v_spacing">
+            <shape>
+                <solid android:color="@color/highlight_focused" />
+                <corners android:radius="2dp" />
+            </shape>
+        </inset>
     </item>
 
     <item android:drawable="@android:color/transparent" />
-
 </selector>
--- a/mobile/android/app/src/photon/res/drawable/url_bar_bg.xml
+++ b/mobile/android/app/src/photon/res/drawable/url_bar_bg.xml
@@ -2,14 +2,14 @@
 
 <!-- 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="@color/tabs_tray_grey_pressed" gecko:state_private="true" />
+    <item android:drawable="@color/photon_browser_toolbar_bg_private" gecko:state_private="true" />
 
     <!-- normal mode -->
-    <item android:drawable="@color/toolbar_grey" />
+    <item android:drawable="@color/photon_browser_toolbar_bg" />
 
 </selector>
--- a/mobile/android/app/src/photon/res/layout-large-v11/browser_toolbar.xml
+++ b/mobile/android/app/src/photon/res/layout-large-v11/browser_toolbar.xml
@@ -114,16 +114,14 @@
         android:contentDescription="@string/menu"
         android:src="@drawable/menu" />
 
     <!-- We draw after the menu items so when they are hidden, the cancel button,
          which is thus drawn on top, may be pressed. -->
     <org.mozilla.gecko.widget.themed.ThemedImageView
         android:id="@+id/edit_cancel"
         style="@style/UrlBar.EditCancel"
-        android:layout_width="@dimen/browser_toolbar_icon_width"
-        android:layout_height="@dimen/browser_toolbar_height"
         android:layout_weight="0.0"
         android:contentDescription="@string/edit_mode_cancel"
-        android:src="@drawable/close_edit_mode_selector"
+        android:src="@drawable/ic_cancel"
         android:visibility="gone" />
 
 </merge>
--- a/mobile/android/app/src/photon/res/layout/browser_toolbar.xml
+++ b/mobile/android/app/src/photon/res/layout/browser_toolbar.xml
@@ -1,90 +1,91 @@
 <?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">
+<merge xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    tools:layout_height="wrap_content"
+    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"
         android:layout_marginBottom="8dp"
         android:layout_marginTop="8dp"
         android:clickable="false"
         android:duplicateParentState="true"
         android:focusable="false"
         android:scaleType="fitXY"
-        android:src="@drawable/url_bar_entry" />
+        android:src="@android:color/transparent" />
 
     <!-- A View that clips with url_bar_entry and translates
          around it to animate growing the url bar,
          which occurs in the display/editing mode transitions. -->
     <ImageView
         android:id="@+id/url_bar_translating_edge"
         style="@style/UrlBar.Edge"
         android:layout_alignBottom="@id/url_bar_entry"
         android:layout_alignTop="@id/url_bar_entry"
         android:clickable="false"
         android:duplicateParentState="true"
         android:focusable="false"
         android:scaleType="fitXY"
-        android:src="@drawable/url_bar_translating_edge"
+        android:src="@android:color/transparent"
         android:visibility="invisible" />
 
     <org.mozilla.gecko.widget.themed.ThemedImageButton
         android:id="@+id/menu"
         style="@style/UrlBar.Menu"
         android:background="@drawable/action_bar_button"
         android:contentDescription="@string/menu"
-        android:src="@drawable/menu" />
+        android:src="@drawable/ic_overflow"
+        tools:background="#880000FF" />
 
     <org.mozilla.gecko.widget.themed.ThemedImageButton
         android:id="@+id/tabs"
         style="@style/UrlBar.Tabs"
-        android:layout_width="64dip"
         android:layout_alignWithParentIfMissing="true"
-        android:background="@drawable/shaped_button" />
+        android:layout_marginRight="-2dp"
+        android:background="@drawable/action_bar_button"
+        tools:background="#88FF0000" />
 
-    <!-- The TextSwitcher should be shifted 24dp on the left, to avoid
-         the curve. On a 48dp space, centering 24dp image will leave
-         12dp on all sides. However this image has a perception of
-         2 layers. Hence to center this, an additional 4dp is added to the left.
-         The margins will be 40dp on left, 8dp on right, instead of ideal 30dp
-         and 12dp. -->
     <org.mozilla.gecko.toolbar.TabCounter
         android:id="@+id/tabs_counter"
         style="@style/UrlBar.TabCounter"
-        android:layout_width="24dip"
         android:layout_height="24dip"
         android:layout_centerVertical="true"
-        android:background="@drawable/tabs_count"
         android:clipChildren="false"
         android:clipToPadding="false"
-        android:gravity="center_horizontal" />
+        android:gravity="center_horizontal"
+        tools:background="#8800FF00" />
 
     <!-- Note that the edit components are invisible so that the views
          depending on their location can properly layout. -->
     <org.mozilla.gecko.widget.themed.ThemedImageView
         android:id="@+id/edit_cancel"
         style="@style/UrlBar.EditCancel"
         android:background="@drawable/action_bar_button"
         android:contentDescription="@string/edit_mode_cancel"
-        android:src="@drawable/close_edit_mode_selector"
+        android:src="@drawable/ic_cancel"
         android:visibility="invisible" />
 
     <!-- The space to the left of the cancel button would be larger than the right because
          the url bar drawable contains some whitespace, so we compensate by removing
          some padding from the right (value determined through experimentation). -->
     <org.mozilla.gecko.toolbar.ToolbarEditLayout
         android:id="@+id/edit_layout"
         style="@style/UrlBar.EditLayout"
+        android:paddingEnd="0dp"
+        android:paddingRight="0dp"
         android:visibility="invisible" />
 
     <org.mozilla.gecko.toolbar.ToolbarDisplayLayout
         android:id="@+id/display_layout"
         style="@style/UrlBar.DisplayLayout" />
 
 </merge>
--- a/mobile/android/app/src/photon/res/layout/toolbar_display_layout.xml
+++ b/mobile/android/app/src/photon/res/layout/toolbar_display_layout.xml
@@ -1,59 +1,57 @@
 <?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:gecko="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
+    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.Button"
-        android:layout_width="@dimen/browser_toolbar_site_security_width"
-        android:layout_height="@dimen/browser_toolbar_site_security_height"
+        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:contentDescription="@string/site_security"
-        android:paddingBottom="@dimen/browser_toolbar_site_security_padding_vertical"
-        android:paddingEnd="@dimen/browser_toolbar_site_security_padding_horizontal"
-        android:paddingLeft="@dimen/browser_toolbar_site_security_padding_horizontal"
-        android:paddingRight="@dimen/browser_toolbar_site_security_padding_horizontal"
-        android:paddingStart="@dimen/browser_toolbar_site_security_padding_horizontal"
-        android:paddingTop="@dimen/browser_toolbar_site_security_padding_vertical"
-        android:scaleType="fitCenter"
-        android:src="@drawable/security_mode_icon" />
+        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_weight="1.0"
         gecko:autoUpdateTheme="false"
-        gecko:fadeBackgroundColor="@color/toolbar_display_layout_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"
         android:visibility="gone" />
 
     <org.mozilla.gecko.widget.themed.ThemedImageButton
         android:id="@+id/stop"
         style="@style/UrlBar.ImageButton"
         android:background="@drawable/action_bar_button"
         android:contentDescription="@string/stop"
-        android:src="@drawable/urlbar_stop"
+        android:src="@drawable/ic_cancel"
         android:visibility="gone" />
 
 </merge>
--- a/mobile/android/app/src/photon/res/layout/toolbar_edit_layout.xml
+++ b/mobile/android/app/src/photon/res/layout/toolbar_edit_layout.xml
@@ -1,16 +1,22 @@
 <?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:gecko="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
+    tools:background="@android:color/holo_green_light"
+    tools:layout_height="wrap_content"
+    tools:layout_width="match_parent"
+    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.ImageButtonBase"
         android:layout_width="@dimen/browser_toolbar_height"
         android:layout_height="@dimen/browser_toolbar_site_security_height"
@@ -21,17 +27,18 @@
         android:paddingBottom="@dimen/browser_toolbar_site_security_padding_vertical"
         android:paddingEnd="@dimen/browser_toolbar_site_security_padding_horizontal"
         android:paddingLeft="@dimen/browser_toolbar_site_security_padding_horizontal"
         android:paddingRight="@dimen/browser_toolbar_site_security_padding_horizontal"
         android:paddingStart="@dimen/browser_toolbar_site_security_padding_horizontal"
         android:paddingTop="@dimen/browser_toolbar_site_security_padding_vertical"
         android:scaleType="fitCenter"
         android:src="@drawable/search_icon_inactive"
-        android:visibility="gone" />
+        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_weight="1.0"
         android:contentDescription="@string/url_bar_default_text"
@@ -39,23 +46,19 @@
         android:inputType="textUri"
         android:paddingEnd="8dp"
         android:paddingRight="8dp"
         android:selectAllOnFocus="true"
         gecko:autoUpdateTheme="false" />
 
     <org.mozilla.gecko.widget.themed.ThemedImageButton
         android:id="@+id/qrcode"
-        style="@style/UrlBar.ImageButtonBase"
-        android:layout_width="@dimen/browser_toolbar_height"
-        android:layout_height="match_parent"
+        style="@style/UrlBar.ImageButton"
         android:background="@drawable/action_bar_button"
-        android:src="@drawable/ab_qrcode" />
+        android:src="@drawable/ic_qrcode" />
 
     <org.mozilla.gecko.widget.themed.ThemedImageButton
         android:id="@+id/mic"
-        style="@style/UrlBar.ImageButtonBase"
-        android:layout_width="@dimen/browser_toolbar_height"
-        android:layout_height="match_parent"
+        style="@style/UrlBar.ImageButton"
         android:background="@drawable/action_bar_button"
-        android:src="@drawable/ab_mic" />
+        android:src="@drawable/ic_mic" />
 
 </merge>
--- a/mobile/android/app/src/photon/res/values-large-v16/styles.xml
+++ b/mobile/android/app/src/photon/res/values-large-v16/styles.xml
@@ -3,12 +3,11 @@
 <!-- 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/. -->
 
 <resources xmlns:android="http://schemas.android.com/apk/res/android">
 
     <style name="TextAppearance.UrlBar.Title" parent="TextAppearance.Small">
         <item name="android:textSize">16sp</item>
-        <item name="android:fontFamily">sans-serif-light</item>
     </style>
 
 </resources>
--- a/mobile/android/app/src/photon/res/values-large-v17/styles.xml
+++ b/mobile/android/app/src/photon/res/values-large-v17/styles.xml
@@ -68,18 +68,16 @@
         <item name="android:layout_toEndOf">@id/back</item>
     </style>
 
     <style name="UrlBar.DisplayLayout" parent="UrlBar.V17.DisplayLayout" />
 
     <style name="UrlBar.V17.DisplayLayout" parent="UrlBar.Base.DisplayLayout">
         <item name="android:layout_toStartOf">@id/menu_items</item>
         <item name="android:layout_toEndOf">@id/back</item>
-        <item name="android:paddingStart">0dip</item>
-        <item name="android:paddingEnd">4dip</item>
     </style>
 
     <style name="UrlBar.EditCancel" parent="UrlBar.V17.EditCancel" />
 
     <style name="UrlBar.V17.EditCancel" parent="UrlBar.Base.EditCancel">
         <item name="android:layout_alignParentEnd">true</item>
     </style>
 
--- a/mobile/android/app/src/photon/res/values-large/dimens.xml
+++ b/mobile/android/app/src/photon/res/values-large/dimens.xml
@@ -3,29 +3,28 @@
 <!-- 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/. -->
 
 <resources>
 
     <dimen name="doorhanger_offsetY">100dp</dimen>
 
-    <dimen name="browser_toolbar_height">56dp</dimen>
     <!-- This value is the height of the Tabs Panel header view
          (browser_toolbar_height) minus the height of the indicator
          (6dp). This value should change when the height of the view changes. -->
     <dimen name="tabs_panel_indicator_selected_padding_top">50dp</dimen>
 
-    <dimen name="browser_toolbar_height_flipper">60dp</dimen>
+    <dimen name="browser_toolbar_height_flipper">@dimen/browser_toolbar_height</dimen>
     <dimen name="browser_toolbar_button_padding">16dp</dimen>
     <dimen name="browser_toolbar_favicon_size">16dp</dimen>
 
     <dimen name="browser_toolbar_site_security_height">60dp</dimen>
     <dimen name="browser_toolbar_site_security_width">34dp</dimen>
-    <dimen name="browser_toolbar_site_security_margin_end">1dp</dimen>
+    <dimen name="browser_toolbar_site_security_margin_end">6dp</dimen>
     <!-- We primarily use padding (instead of margins) to increase the hit area. -->
     <dimen name="browser_toolbar_site_security_padding_vertical">21dp</dimen>
     <dimen name="browser_toolbar_site_security_padding_horizontal">8dp</dimen>
 
     <dimen name="firstrun_background_height">300dp</dimen>
 
     <dimen name="tabs_panel_indicator_width">72dp</dimen>
     <dimen name="tabs_panel_button_width">60dp</dimen>
--- a/mobile/android/app/src/photon/res/values-large/styles.xml
+++ b/mobile/android/app/src/photon/res/values-large/styles.xml
@@ -176,18 +176,16 @@
 
     <style name="UrlBar.DisplayLayout" parent="UrlBar.V15.DisplayLayout" />
 
     <style name="UrlBar.Base.DisplayLayout" parent="UrlBar.Button.Container" />
 
     <style name="UrlBar.V15.DisplayLayout" parent="UrlBar.Base.DisplayLayout">
         <item name="android:layout_toLeftOf">@id/menu_items</item>
         <item name="android:layout_toRightOf">@id/back</item>
-        <item name="android:paddingLeft">0dip</item>
-        <item name="android:paddingRight">4dip</item>
     </style>
 
     <style name="UrlBar.EditCancel" parent="UrlBar.V15.EditCancel" />
 
     <style name="UrlBar.Base.EditCancel" parent="UrlBar.ImageButton" />
 
     <style name="UrlBar.V15.EditCancel" parent="UrlBar.Base.EditCancel">
         <item name="android:layout_alignParentRight">true</item>
--- a/mobile/android/app/src/photon/res/values-v16/styles.xml
+++ b/mobile/android/app/src/photon/res/values-v16/styles.xml
@@ -18,13 +18,12 @@
         <item name="android:fontFamily">sans-serif-light</item>
     </style>
 
     <style name="TextAppearance.FirstrunTextRegular">
         <item name="android:fontFamily">sans-serif</item>
     </style>
 
     <style name="TextAppearance.UrlBar.Title" parent="TextAppearance.Small">
-        <item name="android:textSize">15sp</item>
-        <item name="android:fontFamily">sans-serif-light</item>
+        <item name="android:textSize">16sp</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,16 +1,23 @@
 <?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:paddingStart">5.5dp</item>
+        <item name="android:paddingEnd">5.5dp</item>
+    </style>
+
     <style name="UrlBar.Entry" parent="UrlBar.V17.Entry" />
 
     <style name="UrlBar.V17.Entry" parent="UrlBar.Base.Entry">
-        <item name="android:layout_marginStart">8dp</item>
-        <item name="android:layout_marginEnd">-6dp</item>
+        <item name="android:layout_marginStart">5dp</item>
         <item name="android:layout_toStartOf">@+id/tabs</item>
     </style>
 
     <style name="UrlBar.Edge" parent="UrlBar.V17.Edge" />
 
     <style name="UrlBar.V17.Edge" parent="UrlBar.Base.Edge">
         <item name="android:layout_alignStart">@id/url_bar_entry</item>
         <item name="android:layout_alignEnd">@+id/url_bar_entry</item>
@@ -26,17 +33,17 @@
 
     <style name="UrlBar.V17.Tabs" parent="UrlBar.Base.Tabs">
         <item name="android:layout_toStartOf">@id/menu</item>
     </style>
 
     <style name="UrlBar.TabCounter" parent="UrlBar.V17.TabCounter" />
 
     <style name="UrlBar.V17.TabCounter" parent="UrlBar.Base.TabCounter">
-        <item name="android:layout_marginEnd">8dip</item>
+
         <item name="android:layout_alignEnd">@id/tabs</item>
     </style>
 
     <style name="UrlBar.EditCancel" parent="UrlBar.V17.EditCancel" />
 
     <style name="UrlBar.V17.EditCancel" parent="UrlBar.Base.EditCancel">
         <item name="android:layout_alignParentEnd">true</item>
     </style>
@@ -50,13 +57,11 @@
         <item name="android:paddingEnd">8dp</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:paddingStart">1dip</item>
-        <item name="android:paddingEnd">4dip</item>
     </style>
 
 </resources>
--- a/mobile/android/app/src/photon/res/values/colors.xml
+++ b/mobile/android/app/src/photon/res/values/colors.xml
@@ -184,23 +184,24 @@
     <color name="text_color_link">#22629E</color>
 
     <!-- Divider colors -->
     <color name="toolbar_divider_grey">#D7D9DB</color>
 
     <color name="doorhanger_link">#FF2AA1FE</color>
 
     <color name="validation_message_text">#ffffff</color>
-    <color name="url_bar_text_highlight_pb">#FFD06BFF</color>
+    <color name="url_bar_text_highlight">@color/photon_text_selected_highlight</color>
+    <color name="url_bar_text_highlight_private">@color/photon_text_selected_highlight_private</color>
     <color name="tab_row_pressed">#4D000000</color>
 
-    <color name="url_bar_urltext">#AFB1B3</color>
-    <color name="url_bar_urltext_private">#777777</color>
-    <color name="url_bar_domaintext">#363B40</color>
-    <color name="url_bar_domaintext_private">#FFFFFF</color>
+    <color name="url_bar_urltext">@color/photon_text_placeholder</color>
+    <color name="url_bar_urltext_private">@color/photon_text_placeholder_private</color>
+    <color name="url_bar_domaintext">@color/photon_url_bar_domain</color>
+    <color name="url_bar_domaintext_private">@color/photon_url_bar_domain_private</color>
     <color name="url_bar_blockedtext">@color/photon_url_bar_blocked</color>
     <color name="url_bar_blockedtext_private">@color/photon_url_bar_blocked_private</color>
     <color name="url_bar_certificate_owner">@color/photon_url_bar_certificate_owner</color>
     <color name="url_bar_certificate_owner_private">
         @color/photon_url_bar_certificate_owner_private
     </color>
     <color name="url_bar_shadow">#12000000</color>
 
--- a/mobile/android/app/src/photon/res/values/dimens.xml
+++ b/mobile/android/app/src/photon/res/values/dimens.xml
@@ -1,29 +1,36 @@
 <?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/. -->
 
 <resources>
 
     <dimen name="standard_corner_radius">4dp</dimen>
 
     <dimen name="autocomplete_min_width">200dp</dimen>
     <dimen name="autocomplete_row_height">32dp</dimen>
 
-    <dimen name="browser_toolbar_height">48dp</dimen>
+    <dimen name="browser_toolbar_height">56dp</dimen>
+    <dimen name="browser_toolbar_image_button_width">48dp</dimen>
+    <!-- ToolbarImageButton's pressed-highlight region is different from clickable region.
+         Our design is to make pressed-highlight region to be square. this vertical spacing value
+         helps drawable xml to set padding: (56 - 48) / 2 -->
+    <dimen name="browser_toolbar_image_button_v_spacing">4dp</dimen>
+
     <!-- This value is the height of the Tabs Panel header view
          (browser_toolbar_height) minus the height of the indicator
          (6dp). This value should change when the height of the view changes. -->
     <dimen name="tabs_panel_indicator_selected_padding_top">42dp</dimen>
 
     <!-- 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">48dp</dimen>
+    <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>
 
     <!-- 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">2dp</dimen>
--- a/mobile/android/app/src/photon/res/values/styles.xml
+++ b/mobile/android/app/src/photon/res/values/styles.xml
@@ -424,17 +424,17 @@
         <item name="android:fontFamily">sans-serif-light</item>
     </style>
 
     <style name="TextAppearance.DoorHanger.Small">
         <item name="android:textSize">14sp</item>
     </style>
 
     <style name="TextAppearance.UrlBar.Title" parent="TextAppearance.Small">
-        <item name="android:textSize">15sp</item>
+        <item name="android:textSize">16sp</item>
     </style>
 
     <!-- BrowserToolbar -->
     <style name="BrowserToolbar">
         <item name="android:layout_width">match_parent</item>
         <item name="android:layout_height">@dimen/browser_toolbar_height</item>
         <item name="android:orientation">horizontal</item>
     </style>
@@ -447,40 +447,41 @@
     </style>
 
     <!-- URL bar - Button -->
     <style name="UrlBar.Button">
         <item name="android:layout_height">match_parent</item>
         <item name="android:background">@android:color/transparent</item>
     </style>
 
-    <!-- URL bar - Button -->
     <style name="UrlBar.Title" parent="UrlBar.Button">
         <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/fennec_ui_orange</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>
         <item name="android:singleLine">true</item>
         <item name="android:gravity">center_vertical|left|start</item>
         <item name="android:hint">@string/url_bar_default_text</item>
     </style>
 
     <!-- URL bar - Image Button -->
     <style name="UrlBar.ImageButtonBase" parent="UrlBar.Button">
         <item name="android:scaleType">center</item>
         <item name="android:layout_gravity">center_vertical</item>
         <item name="android:background">@android:color/transparent</item>
+        <item name="drawableTintList">@color/url_bar_image_color</item>
     </style>
 
     <style name="UrlBar.ImageButton" parent="UrlBar.ImageButtonBase">
-        <item name="android:layout_width">@dimen/browser_toolbar_height</item>
+        <item name="android:layout_height">match_parent</item>
+        <item name="android:layout_width">@dimen/browser_toolbar_image_button_width</item>
     </style>
 
     <!-- TabsLayout -->
     <style name="TabsLayout">
          <item name="android:background">@android:color/transparent</item>
          <item name="android:scrollbars">vertical</item>
     </style>
 
@@ -796,21 +797,33 @@
         <item name="android:listDivider">@drawable/as_contextmenu_divider</item>
     </style>
 
     <style name="ActivityStreamButton" parent="Widget.AppCompat.Button.Colored">
         <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">35dp</item>
+        <item name="android:layout_height">@dimen/browser_toolbar_height</item>
+        <item name="android:scaleType">fitCenter</item>
+    </style>
+    <style name="UrlBar.V15.SiteIdentity" parent="UrlBar.Base.SiteIdentity">
+        <item name="android:layout_marginLeft">5dp</item>
+        <item name="android:paddingLeft">5.5dp</item>
+        <item name="android:paddingRight">5.5dp</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">8dp</item>
-        <item name="android:layout_marginRight">-6dp</item>
+        <item name="android:layout_marginLeft">5dp</item>
         <item name="android:layout_toLeftOf">@+id/tabs</item>
     </style>
 
     <style name="UrlBar.Edge" parent="UrlBar.V15.Edge"/>
     <style name="UrlBar.Base.Edge" parent="UrlBar.Button"/>
     <style name="UrlBar.V15.Edge" parent="UrlBar.Base.Edge">
         <item name="android:layout_alignLeft">@id/url_bar_entry</item>
         <item name="android:layout_alignRight">@+id/url_bar_entry</item>
@@ -826,17 +839,17 @@
     <style name="UrlBar.Base.Tabs" parent="UrlBar.ImageButton"/>
     <style name="UrlBar.V15.Tabs" parent="UrlBar.Base.Tabs">
         <item name="android:layout_toLeftOf">@id/menu</item>
     </style>
 
     <style name="UrlBar.TabCounter" parent="UrlBar.V15.TabCounter"/>
     <style name="UrlBar.Base.TabCounter" parent="UrlBar.ImageButton"/>
     <style name="UrlBar.V15.TabCounter" parent="UrlBar.Base.TabCounter">
-        <item name="android:layout_marginRight">8dip</item>
+        <item name="android:layout_alignTop">@id/tabs</item>
         <item name="android:layout_alignRight">@id/tabs</item>
     </style>
 
     <style name="UrlBar.EditCancel" parent="UrlBar.V15.EditCancel"/>
     <style name="UrlBar.Base.EditCancel" parent="UrlBar.ImageButton"/>
     <style name="UrlBar.V15.EditCancel" parent="UrlBar.Base.EditCancel">
         <item name="android:layout_alignParentRight">true</item>
     </style>
@@ -851,13 +864,11 @@
     </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:paddingLeft">1dip</item>
-        <item name="android:paddingRight">4dip</item>
     </style>
 
 </resources>