[fenix] For https://github.com/mozilla-mobile/fenix/issues/208 - Dark Mode UX edits

app/src/main/java/org/mozilla/fenix/home/sessions/SessionsAdapter.kt

@@ -4,7 +4,8 @@
 
 package org.mozilla.fenix.home.sessions
 
-import android.graphics.PorterDuff
+import android.graphics.Color
+import android.graphics.LightingColorFilter
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
@@ -112,10 +113,8 @@ class SessionsAdapter(
         fun bind(session: ArchivedSession) {
             this.session = session
             val color = availableColors[(session.id % availableColors.size).toInt()]
-
+            session_card_thumbnail.colorFilter =
-            session_card_thumbnail.setColorFilter(
+                LightingColorFilter(ContextCompat.getColor(itemView.context, color), Color.BLACK)
-                ContextCompat.getColor(itemView.context, color),
-                PorterDuff.Mode.MULTIPLY)
             session_card_timestamp.text = session.formattedSavedAt
             session_card_titles.text = session.titles
             session_card_extras.text = if (session.extrasLabel > 0) {
@@ -124,9 +123,14 @@ class SessionsAdapter(
         }
 
         companion object {
-            private val availableColors = listOf(
+            private val availableColors =
-                R.color.photonBlue40, R.color.photonGreen50, R.color.photonYellow50, R.color.photonOrange50,
+                listOf(
-                R.color.photonPurple50, R.color.photonInk70)
+                    R.color.session_placeholder_blue,
+                    R.color.session_placeholder_green,
+                    R.color.session_placeholder_orange,
+                    R.color.session_placeholder_purple,
+                    R.color.session_placeholder_pink
+                )
             const val LAYOUT_ID = R.layout.session_item
         }
     }

app/src/main/java/org/mozilla/fenix/search/awesomebar/AwesomeBarUIView.kt

@@ -89,10 +89,17 @@ class AwesomeBarUIView(
 
     init {
         with(container.context) {
+            val draw = getDrawable(R.drawable.ic_link)
+            draw?.setColorFilter(
+                ContextCompat.getColor(
+                    this,
+                    DefaultThemeManager.resolveAttribute(R.attr.searchShortcutsTextColor, this)
+                ), PorterDuff.Mode.SRC_IN
+            )
             clipboardSuggestionProvider = ClipboardSuggestionProvider(
                 this,
                 loadUrlUseCase,
-                getDrawable(R.drawable.ic_link)!!.toBitmap(),
+                draw!!.toBitmap(),
                 getString(R.string.awesomebar_clipboard_title)
             )
 

app/src/main/java/org/mozilla/fenix/search/awesomebar/ShortcutEngineManager.kt

@@ -66,8 +66,6 @@ class ShortcutEngineManager(
 
     private fun showShortcutEnginePicker() {
         with(context) {
-            awesomeBarUIView.search_shortcuts_button.background = getDrawable(R.drawable.search_pill_background)
-
             awesomeBarUIView.search_shortcuts_button.compoundDrawables[0].setTint(ContextCompat.getColor(this,
                 DefaultThemeManager.resolveAttribute(R.attr.pillWrapperBackground, this)))
 
@@ -81,9 +79,6 @@ class ShortcutEngineManager(
 
     private fun hideShortcutEnginePicker() {
         with(context) {
-            awesomeBarUIView.search_shortcuts_button.setBackgroundColor(ContextCompat.getColor(this,
-                DefaultThemeManager.resolveAttribute(R.attr.pillWrapperBackground, this)))
-
             awesomeBarUIView.search_shortcuts_button.compoundDrawables[0].setTint(ContextCompat.getColor(this,
                 DefaultThemeManager.resolveAttribute(R.attr.searchShortcutsTextColor, this)))
 

app/src/main/java/org/mozilla/fenix/utils/ItsNotBrokenSnack.kt

@@ -6,22 +6,31 @@ package org.mozilla.fenix.utils
 
 import android.content.Context
 import android.view.View
+import androidx.core.content.ContextCompat
 import com.google.android.material.snackbar.Snackbar
+import org.mozilla.fenix.R
 import org.mozilla.fenix.ext.asActivity
 import org.mozilla.fenix.ext.components
 
 class ItsNotBrokenSnack(val context: Context) {
 
     fun showSnackbar(issueNumber: String) {
-        val rootView = context.asActivity()?.window?.decorView?.findViewById<View>(android.R.id.content)
+        val rootView =
+            context.asActivity()?.window?.decorView?.findViewById<View>(android.R.id.content)
         rootView?.let {
-            Snackbar.make(rootView, message.replace("%", issueNumber), Snackbar.LENGTH_SHORT).apply {
+            Snackbar.make(rootView, message.replace("%", issueNumber), Snackbar.LENGTH_SHORT)
-                setAction("Add Tab to Issue") {
+                .apply {
-                    context.components.useCases.tabsUseCases.addTab
+                    setAction("Add Tab to Issue") {
-                        .invoke(issues + issueNumber)
+                        context.components.useCases.tabsUseCases.addTab
+                            .invoke(issues + issueNumber)
+                    }.setActionTextColor(
+                        ContextCompat.getColor(
+                            context,
+                            R.color.accent_bright_dark_theme
+                        )
+                    )
+                    show()
                 }
-                show()
-            }
         }
     }
 

app/src/main/res/drawable/ic_link.xml

@@ -10,7 +10,7 @@
   <path
       android:pathData="M2.47,5.53L5.515,2.485C5.7829,2.2172 6.2171,2.2172 6.485,2.485L10.685,6.685C11.4609,5.7001 11.3815,4.2915 10.5,3.4L7.837,0.734C6.863,-0.2399 5.284,-0.2399 4.31,0.734L0.766,4.279C0.2984,4.7465 0.0356,5.3807 0.0356,6.042C0.0356,6.7033 0.2984,7.3375 0.766,7.805L3.426,10.466C4.3,11.3366 5.68,11.4354 6.669,10.698L2.47,6.5C2.3409,6.3716 2.2683,6.1971 2.2683,6.015C2.2683,5.8329 2.3409,5.6584 2.47,5.53ZM19.27,12.163L19.266,12.163C20.2383,13.137 20.2379,14.7145 19.265,15.688L15.72,19.232C15.2525,19.6996 14.6183,19.9624 13.957,19.9624C13.2957,19.9624 12.6615,19.6996 12.194,19.232L9.533,16.572C8.6621,15.6985 8.5633,14.3186 9.301,13.33L13.501,17.53C13.6293,17.6588 13.8037,17.7312 13.9855,17.7312C14.1673,17.7312 14.3417,17.6588 14.47,17.53L17.512,14.479C17.7798,14.2111 17.7798,13.7769 17.512,13.509L13.312,9.309C14.2998,8.53 15.7139,8.612 16.605,9.5L19.27,12.163ZM14.163,12.718C14.542,13.1104 14.5366,13.7341 14.1508,14.1198C13.7651,14.5056 13.1414,14.511 12.749,14.132L5.829,7.212C5.559,6.9632 5.4471,6.5864 5.5375,6.2306C5.6279,5.8747 5.906,5.597 6.262,5.5071C6.6179,5.4172 6.9946,5.5297 7.243,5.8L14.163,12.718Z"
       android:strokeWidth="1"
-      android:fillColor="#2B20C1"
+      android:fillColor="?pillWrapperSelectedBackground"
       android:fillType="evenOdd"
       android:strokeColor="#00000000"/>
 </vector>

app/src/main/res/drawable/ic_session_thumbnail_placeholder_blue.xml

@@ -1,20 +0,0 @@
-<vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="64dp"
-    android:height="64dp"
-    android:viewportWidth="64"
-    android:viewportHeight="64">
-  <path
-      android:pathData="M12,8L60,8A4,4 0,0 1,64 12L64,60A4,4 0,0 1,60 64L12,64A4,4 0,0 1,8 60L8,12A4,4 0,0 1,12 8z"
-      android:fillColor="#024690"/>
-  <path
-      android:pathData="M8,4L56,4A4,4 0,0 1,60 8L60,56A4,4 0,0 1,56 60L8,60A4,4 0,0 1,4 56L4,8A4,4 0,0 1,8 4z"
-      android:fillColor="#0B68CD"/>
-  <path
-      android:pathData="M4,0L52,0A4,4 0,0 1,56 4L56,52A4,4 0,0 1,52 56L4,56A4,4 0,0 1,0 52L0,4A4,4 0,0 1,4 0z"
-      android:fillColor="#0390ED"/>
-  <path
-      android:pathData="M28.37,22.793L33.5,14 44,32L32.988,32c-0.26,5.567 -4.857,10 -10.488,10C16.701,42 12,37.299 12,31.5S16.701,21 22.5,21c2.175,0 4.195,0.661 5.87,1.793zM28.37,22.793L23,32h9.988c0.008,-0.166 0.012,-0.332 0.012,-0.5 0,-3.624 -1.836,-6.82 -4.63,-8.707z"
-      android:strokeAlpha="0.5"
-      android:fillColor="#024690"
-      android:fillAlpha="0.5"/>
-</vector>

app/src/main/res/drawable/ic_session_thumbnail_placeholder_greyscale.xml

@@ -0,0 +1,21 @@
+<!-- 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/. -->
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="64dp"
+    android:height="64dp"
+    android:viewportWidth="64"
+    android:viewportHeight="64">
+    <path
+        android:fillColor="@color/photonGrey60"
+        android:pathData="M12,8L60,8A4,4 0,0 1,64 12L64,60A4,4 0,0 1,60 64L12,64A4,4 0,0 1,8 60L8,12A4,4 0,0 1,12 8z" />
+    <path
+        android:fillColor="@color/photonGrey40"
+        android:pathData="M8,4L56,4A4,4 0,0 1,60 8L60,56A4,4 0,0 1,56 60L8,60A4,4 0,0 1,4 56L4,8A4,4 0,0 1,8 4z" />
+    <path
+        android:fillColor="@color/photonWhite"
+        android:pathData="M4,0L52,0A4,4 0,0 1,56 4L56,52A4,4 0,0 1,52 56L4,56A4,4 0,0 1,0 52L0,4A4,4 0,0 1,4 0z" />
+    <path
+        android:fillColor="@color/photonGrey30"
+        android:pathData="M28.37,22.793L33.5,14 44,32L32.988,32c-0.26,5.567 -4.857,10 -10.488,10C16.701,42 12,37.299 12,31.5S16.701,21 22.5,21c2.175,0 4.195,0.661 5.87,1.793zM28.37,22.793L23,32h9.988c0.008,-0.166 0.012,-0.332 0.012,-0.5 0,-3.624 -1.836,-6.82 -4.63,-8.707z" />
+</vector>

app/src/main/res/drawable/search_pill_background_unselected.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/. -->
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <solid android:color="?attr/pillWrapperBackground"/>
+
+    <stroke android:width="1dp"
+        android:color="?attr/disabledIconColor"/>
+
+    <corners android:radius="16dp"/>
+</shape>

app/src/main/res/drawable/search_pill_drawable_button_background.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:drawable="@drawable/search_pill_background" android:state_checked="true" />
+    <item android:drawable="@drawable/search_pill_background_unselected" />
+</selector>

app/src/main/res/layout/fragment_search.xml

@@ -74,21 +74,21 @@
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintBottom_toBottomOf="parent">
 
-        <Button
+        <ToggleButton
-            style="@style/search_pill"
             android:id="@+id/search_scan_button"
-            android:text="@string/search_scan_button"
-            android:drawableStart="@drawable/ic_qr"
-            android:layout_marginEnd="8dp"
-            android:textColor="?attr/searchShortcutsTextColor"
-            android:background="?attr/pillWrapperBackground"/>
-
-        <Button
             style="@style/search_pill"
+            android:layout_marginEnd="8dp"
+            android:drawableStart="@drawable/ic_qr"
+            android:textColor="?attr/searchShortcutsTextColor"
+            android:textOff="@string/search_scan_button"
+            android:textOn="@string/search_scan_button" />
+
+        <ToggleButton
             android:id="@+id/search_shortcuts_button"
-            android:text="@string/search_shortcuts_button"
+            style="@style/search_pill"
             android:drawableStart="@drawable/ic_search"
             android:textColor="?attr/searchShortcutsTextColor"
-            android:background="?attr/pillWrapperBackground"/>
+            android:textOff="@string/search_shortcuts_button"
+            android:textOn="@string/search_shortcuts_button" />
     </LinearLayout>
 </androidx.constraintlayout.widget.ConstraintLayout>

app/src/main/res/layout/session_bottom_sheet.xml

@@ -32,7 +32,9 @@
                 android:layout_margin="12dp"
                 android:contentDescription="@string/current_session_image"
                 android:paddingBottom="20dp"
-                android:src="@drawable/ic_session_thumbnail_placeholder_blue"
+                android:src="@drawable/ic_session_thumbnail_placeholder_greyscale"
+                android:tint="@color/session_placeholder_blue"
+                android:tintMode="multiply"
                 app:layout_constraintStart_toStartOf="parent"
                 app:layout_constraintTop_toTopOf="parent" />
 
@@ -91,7 +93,7 @@
     <View
         android:layout_width="match_parent"
         android:layout_height="1dp"
-        android:background="@color/photonGrey30" />
+        android:background="?attr/listDividerColor" />
 
     <TextView
         android:id="@+id/archive_session_button"

app/src/main/res/layout/session_item.xml

@@ -23,7 +23,7 @@
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_margin="@dimen/session_card_padding"
-            android:src="@drawable/ic_session_thumbnail_placeholder_blue"
+            android:src="@drawable/ic_session_thumbnail_placeholder_greyscale"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toTopOf="parent" />
 

app/src/main/res/values-night/colors.xml

@@ -11,8 +11,9 @@
     <color name="windowBackground_normal_theme">@color/background_dark_theme</color>
     <color name="text_color_normal_theme">@color/off_white</color>
     <color name="toolbar_normal_theme">@color/foreground_dark_theme</color>
-    <color name="toggle_activated_normal_theme">#A374F7</color>
+    <color name="toggle_activated_normal_theme">@color/accent_bright_dark_theme</color>
     <color name="colorSwitchThumbNormal_normal_theme">@color/off_white</color>
+    <color name="color_accent_normal_theme">@color/off_white</color>
 
     <color name="navigationBarColorHome_normal_theme">@android:color/transparent</color>
     <color name="navigationBarColorBrowser_normal_theme">@android:color/transparent</color>
@@ -29,6 +30,7 @@
     <color name="homeBackgroundBottomGradient_normal_theme">@color/background_dark_theme</color>
     <color name="menu_button_tint_normal_theme">@color/home_buttons_dark_theme</color>
     <color name="privateBrowsingButtonTint_normal_theme">@color/home_buttons_dark_theme</color>
+    <color name="list_divider_color_normal_theme">#494951</color>
 
     <!-- Colors for SearchView on homescreen -->
     <color name="searchBackground_normal_theme">@color/foreground_dark_theme</color>
@@ -41,7 +43,7 @@
 
     <!-- Session Colors -->
     <color name="sessionBackgroundColor_normal_theme">@color/foreground_dark_theme</color>
-    <color name="session_border_color">#592ACB</color>
+    <color name="session_border_color">@color/accent_bright_dark_theme</color>
     <color name="save_session_button_color">#EFEFF2</color>
     <color name="save_session_button_text_color">#1E1338</color>
     <color name="delete_session_button_background">#e5e5ea</color>
@@ -58,7 +60,7 @@
     <color name="library_list_item_text_color_light_mode">@color/off_white</color>
 
     <!-- Search Fragment -->
-    <color name="suggestionBackground_normal_theme">#A374F7</color>
+    <color name="suggestionBackground_normal_theme">@color/accent_bright_dark_theme</color>
     <color name="search_text">@color/off_white</color>
     <color name="url_box_view">@color/foreground_dark_theme</color>
 

app/src/main/res/values/attrs.xml

@@ -31,6 +31,7 @@
     <attr name="sessionBackgroundColor" format="reference" />
     <attr name="sessionBorderColor" format="reference" />
     <attr name="deleteColor" format="reference" />
+    <attr name="listDividerColor" format="reference" />
 
     <!-- Search fragment -->
     <attr name="searchBackground" format="reference"/>

app/src/main/res/values/colors.xml

@@ -7,6 +7,7 @@
     <color name="color_primary">#544CD9</color>
     <color name="color_primary_dark">#202340</color>
     <color name="color_accent">#D81B60</color>
+    <color name="color_accent_normal_theme">#312a65</color>
 
     <color name="off_white">#f9f9fa</color>
     <color name="secondary_text_color_normal_theme">#6b6b6b</color>
@@ -20,7 +21,14 @@
     <color name="foreground_dark_theme">#32313C</color>
     <color name="home_buttons_dark_theme">#A2A1A5</color>
     <color name="secondaryTextColor_dark_theme">#A4A3AA</color>
+    <color name="accent_bright_dark_theme">#AB71FF</color>
 
+    <!-- Session Placeholder Available Colors -->
+    <color name="session_placeholder_blue">#00B3F4</color>
+    <color name="session_placeholder_orange">#FF8A50</color>
+    <color name="session_placeholder_green">#54FFBD</color>
+    <color name="session_placeholder_purple">@color/accent_bright_dark_theme</color>
+    <color name="session_placeholder_pink">#FF4AA2</color>
     <!-- Normal Theme -->
     <color name="history_header_normal_theme">#696A6A</color>
     <color name="history_title_normal_theme">@color/text_color_normal_theme</color>
@@ -40,6 +48,7 @@
     <color name="privateBrowsingButtonTint_normal_theme">@color/menu_button_tint_normal_theme</color>
     <color name="browserToolbarBackground_normal_theme">@color/off_white</color>
     <color name="unloaded_progress_normal_theme">#E0E0E6</color>
+    <color name="list_divider_color_normal_theme">@color/photonGrey30</color>
 
     <color name="searchBackground_normal_theme">@color/off_white</color>
     <color name="search_stroke_normal">#c5c8d7</color>

app/src/main/res/values/styles.xml

@@ -13,7 +13,8 @@
         <item name="disabledIconColor">@color/disabled_icons_normal_theme</item>
         <item name="toolbarColor">@color/toolbar_normal_theme</item>
         <item name="colorPrimary">@color/color_primary</item>
-        <item name="colorAccent">@color/session_border_color</item>
+        <!-- Color Accent is used for Settings Category Text Color -->
+        <item name="colorAccent">@color/color_accent_normal_theme</item>
         <item name="android:progressBarStyleHorizontal">@style/progressBarStyleHorizontal</item>
         <item name="primaryTextColor">@color/text_color_normal_theme</item>
         <item name="secondaryTextColor">@color/secondary_text_color_normal_theme</item>
@@ -47,6 +48,7 @@
         <item name="sessionBackgroundColor">@color/sessionBackgroundColor_normal_theme</item>
         <item name="sessionBorderColor">@color/session_border_color</item>
         <item name="deleteColor">@color/delete_color</item>
+        <item name="listDividerColor">@color/list_divider_color_normal_theme</item>
 
         <!-- Search fragment colors -->
         <item name="searchBackground">@color/searchBackground_normal_theme</item>
@@ -111,6 +113,7 @@
         <item name="sessionBackgroundColor">@color/session_list_private_header</item>
         <item name="sessionBorderColor">@color/private_browsing_primary</item>
         <item name="deleteColor">@color/photonRed60</item>
+        <item name="listDividerColor">@color/search_private_background</item>
 
         <!-- Search fragment colors -->
         <item name="searchBackground">@color/private_browsing_bottom_gradient</item>
@@ -151,19 +154,19 @@
 
     <style name="search_pill" parent="Widget.AppCompat.Button.Borderless">
         <item name="android:layout_width">wrap_content</item>
-        <item name="android:layout_height">wrap_content</item>
+        <item name="android:layout_height">32dp</item>
         <item name="android:textAllCaps">false</item>
         <item name="android:textSize">14sp</item>
         <item name="android:textColor">@color/search_pill_primary</item>
         <item name="android:layout_gravity">center_vertical</item>
         <item name="android:gravity">center_vertical</item>
         <item name="android:singleLine">true</item>
-        <item name="android:padding">8dp</item>
+        <item name="android:paddingStart">8dp</item>
         <item name="android:paddingEnd">16dp</item>
         <item name="android:drawablePadding">8dp</item>
         <item name="android:minWidth">0dp</item>
         <item name="android:minHeight">0dp</item>
-        <item name="android:background">@drawable/search_pill_background</item>
+        <item name="android:background">@drawable/search_pill_drawable_button_background</item>
     </style>
 
     <style name="SitePermissionButton" parent="Widget.AppCompat.Button.Borderless">