Bug 1379066 - 10. Apply style change in xml r=jwu

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

--HG--
extra : rebase_source : d280919e2ef43d072b4762e84e80f7bc3002bfdd

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>

mobile/android/app/src/photon/res/color/url_bar_title.xml

@@ -7,15 +7,15 @@
 <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>

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>

mobile/android/app/src/photon/res/color/url_bar_title_hint.xml

@@ -7,9 +7,15 @@
 <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>

mobile/android/app/src/photon/res/drawable/action_bar_button.xml

@@ -7,17 +7,22 @@
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
 
     <item android:state_enabled="true" android:state_pressed="true">
+        <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">
+        <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>

mobile/android/app/src/photon/res/drawable/url_bar_bg.xml

@@ -7,9 +7,9 @@
 <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>

mobile/android/app/src/photon/res/layout-large-v11/browser_toolbar.xml

@@ -119,11 +119,9 @@
     <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>

mobile/android/app/src/photon/res/layout/browser_toolbar.xml

@@ -4,7 +4,11 @@
    - 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. -->
@@ -17,7 +21,7 @@
         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,
@@ -31,7 +35,7 @@
         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
@@ -39,31 +43,26 @@
         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. -->
@@ -72,7 +71,7 @@
         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
@@ -81,6 +80,8 @@
     <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

mobile/android/app/src/photon/res/layout/toolbar_display_layout.xml

@@ -5,31 +5,29 @@
    - 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"
@@ -38,7 +36,7 @@
         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
@@ -53,7 +51,7 @@
         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>

mobile/android/app/src/photon/res/layout/toolbar_edit_layout.xml

@@ -5,7 +5,13 @@
    - 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 -->
@@ -26,7 +32,8 @@
         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"
@@ -44,18 +51,14 @@
 
     <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>

mobile/android/app/src/photon/res/values-large-v16/styles.xml

@@ -8,7 +8,6 @@
 
     <style name="TextAppearance.UrlBar.Title" parent="TextAppearance.Small">
         <item name="android:textSize">16sp</item>
-        <item name="android:fontFamily">sans-serif-light</item>
     </style>
 
 </resources>

mobile/android/app/src/photon/res/values-large-v17/styles.xml

@@ -73,8 +73,6 @@
     <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" />

mobile/android/app/src/photon/res/values-large/dimens.xml

@@ -8,19 +8,18 @@
 
     <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>

mobile/android/app/src/photon/res/values-large/styles.xml

@@ -181,8 +181,6 @@
     <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" />

mobile/android/app/src/photon/res/values-v16/styles.xml

@@ -23,8 +23,7 @@
     </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>

mobile/android/app/src/photon/res/values-v17/styles.xml

@@ -1,11 +1,18 @@
 <?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>
 
@@ -31,7 +38,7 @@
     <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>
 
@@ -55,8 +62,6 @@
     <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>

mobile/android/app/src/photon/res/values/colors.xml

@@ -189,13 +189,14 @@
     <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>

mobile/android/app/src/photon/res/values/dimens.xml

@@ -1,4 +1,5 @@
 <?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/. -->
@@ -10,7 +11,13 @@
     <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. -->
@@ -18,7 +25,7 @@
 
     <!-- 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>

mobile/android/app/src/photon/res/values/styles.xml

@@ -429,7 +429,7 @@
     </style>
 
     <style name="TextAppearance.UrlBar.Title" parent="TextAppearance.Small">
-        <item name="android:textSize">15sp</item>
+        <item name="android:textSize">16sp</item>
     </style>
 
     <!-- BrowserToolbar -->
@@ -452,12 +452,11 @@
         <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>
@@ -472,10 +471,12 @@
         <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 -->
@@ -801,11 +802,23 @@
         <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>
 
@@ -831,7 +844,7 @@
     <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>
 
@@ -856,8 +869,6 @@
     <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>