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
--- 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() {