Issue mozilla-mobile#3647 - Custom HTTP(S) icons in toolbar

components/browser/toolbar/src/main/java/mozilla/components/browser/toolbar/BrowserToolbar.kt

@@ -30,6 +30,7 @@ import kotlinx.coroutines.launch
 import mozilla.components.browser.menu.BrowserMenuBuilder
 import mozilla.components.browser.toolbar.display.DisplayToolbar
 import mozilla.components.browser.toolbar.display.DisplayToolbar.Companion.BOTTOM_PROGRESS_BAR
+import mozilla.components.browser.toolbar.display.SiteSecurityIcons
 import mozilla.components.browser.toolbar.edit.EditToolbar
 import mozilla.components.concept.toolbar.AutocompleteDelegate
 import mozilla.components.concept.toolbar.AutocompleteResult
@@ -111,12 +112,12 @@ class BrowserToolbar @JvmOverloads constructor(
         }
 
     /**
-     *  Set/Get the site security icon colours (usually a lock or globe icon). It uses a pair of integers
+     *  Set/Get the site security icons (usually a lock or globe icon). It uses a pair of drawables
      *  which represent the insecure and secure colours respectively.
      */
-    var siteSecurityColor: Pair<Int, Int>
-        get() = displayToolbar.securityIconColor
-        set(value) { displayToolbar.securityIconColor = value }
+    var siteSecurityIcons
+        get() = displayToolbar.securityIcons
+        set(value) { displayToolbar.securityIcons = value }
 
     /**
      * Gets/Sets a custom view that will be drawn as behind the URL and page actions in display mode.
@@ -373,15 +374,11 @@ class BrowserToolbar @JvmOverloads constructor(
                     R.styleable.BrowserToolbar_browserToolbarSuggestionBackgroundColor,
                     suggestionBackgroundColor
                 )
-                val inSecure = getColor(
-                    R.styleable.BrowserToolbar_browserToolbarInsecureColor,
-                    displayToolbar.securityIconColor.first
-                )
-                val secure = getColor(
-                    R.styleable.BrowserToolbar_browserToolbarSecureColor,
-                    displayToolbar.securityIconColor.second
-                )
-                siteSecurityColor = Pair(inSecure, secure)
+                val inSecure = getDrawable(R.styleable.BrowserToolbar_browserToolbarInsecureIcon)
+                    ?: displayToolbar.securityIcons.insecure
+                val secure = getDrawable(R.styleable.BrowserToolbar_browserToolbarSecureIcon)
+                    ?: displayToolbar.securityIcons.secure
+                siteSecurityIcons = SiteSecurityIcons(inSecure, secure)
                 val fadingEdgeLength = getDimensionPixelSize(
                     R.styleable.BrowserToolbar_browserToolbarFadingEdgeSize,
                     resources.getDimensionPixelSize(R.dimen.mozac_browser_toolbar_url_fading_edge_size)

components/browser/toolbar/src/main/java/mozilla/components/browser/toolbar/display/DisplayToolbar.kt

@@ -6,6 +6,13 @@ package mozilla.components.browser.toolbar.display
 
 import android.annotation.SuppressLint
 import android.content.Context
+import android.graphics.BlendMode
+import android.graphics.BlendModeColorFilter
+import android.graphics.ColorFilter
+import android.graphics.PorterDuff
+import android.graphics.PorterDuffColorFilter
+import android.os.Build
+import android.os.Build.VERSION.SDK_INT
 import android.view.Gravity
 import android.view.View
 import android.view.ViewGroup
@@ -162,7 +169,7 @@ internal class DisplayToolbar(
 
     private var currentSiteSecurity = SiteSecurity.INSECURE
 
-    internal var securityIconColor = Pair(defaultColor, defaultColor)
+    internal var securityIcons = getDefaultSecurityIcons()
         set(value) {
             field = value
             setSiteSecurity(currentSiteSecurity)
@@ -262,14 +269,11 @@ internal class DisplayToolbar(
      * Sets the site's security icon as secure if true, else the regular globe.
      */
     fun setSiteSecurity(secure: SiteSecurity) {
-        val (image, color) = when (secure) {
-            SiteSecurity.INSECURE -> Pair(mozac_ic_globe, securityIconColor.first)
-            SiteSecurity.SECURE -> Pair(mozac_ic_lock, securityIconColor.second)
-        }
-        siteSecurityIconView.apply {
-            setImageResource(image)
-            setColorFilter(color)
+        val drawable = when (secure) {
+            SiteSecurity.INSECURE -> securityIcons.insecure
+            SiteSecurity.SECURE -> securityIcons.secure
         }
+        siteSecurityIconView.setImageDrawable(drawable)
 
         currentSiteSecurity = secure
     }
@@ -472,6 +476,23 @@ internal class DisplayToolbar(
         }
     }
 
+    private fun getDefaultSecurityIcons(): SiteSecurityIcons {
+        val defaultColorFilter: ColorFilter = if (SDK_INT >= Build.VERSION_CODES.Q) {
+            BlendModeColorFilter(defaultColor, BlendMode.SRC_IN)
+        } else {
+            PorterDuffColorFilter(defaultColor, PorterDuff.Mode.SRC_IN)
+        }
+
+        return SiteSecurityIcons(
+            insecure = context.getDrawable(mozac_ic_globe)?.apply {
+                colorFilter = defaultColorFilter
+            },
+            secure = context.getDrawable(mozac_ic_lock)?.apply {
+                colorFilter = defaultColorFilter
+            }
+        )
+    }
+
     companion object {
         internal const val MEASURED_HEIGHT_THIRD_DENOMINATOR = 3
         internal const val MEASURED_HEIGHT_DENOMINATOR = 2

components/browser/toolbar/src/main/java/mozilla/components/browser/toolbar/display/SiteSecurityIcons.kt

@@ -0,0 +1,18 @@
+/* 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/. */
+
+package mozilla.components.browser.toolbar.display
+
+import android.graphics.drawable.Drawable
+
+/**
+ * Specifies icons to display in the toolbar representing the security of the current website.
+ *
+ * @property insecure Icon to display for HTTP sites.
+ * @property secure Icon to display for HTTPS sites.
+ */
+class SiteSecurityIcons(
+    val insecure: Drawable?,
+    val secure: Drawable?
+)

components/browser/toolbar/src/main/res/values/attrs_browser_toolbar.xml

@@ -8,8 +8,8 @@
     <attr name="browserToolbarHintColor" format="color"/>
     <attr name="browserToolbarTextColor" format="color"/>
     <attr name="browserToolbarTextSize" format="dimension"/>
-    <attr name="browserToolbarSecureColor" format="color"/>
-    <attr name="browserToolbarInsecureColor" format="color"/>
+    <attr name="browserToolbarSecureIcon" format="reference"/>
+    <attr name="browserToolbarInsecureIcon" format="reference"/>
     <attr name="browserToolbarMenuColor" format="color"/>
     <attr name="browserToolbarSuggestionBackgroundColor" format="color" />
     <attr name="browserToolbarSuggestionForegroundColor" format="color" />

components/browser/toolbar/src/test/java/mozilla/components/browser/toolbar/display/DisplayToolbarTest.kt

@@ -28,6 +28,7 @@ import mozilla.components.support.test.mock
 import mozilla.components.support.test.robolectric.testContext
 import org.junit.Assert.assertEquals
 import org.junit.Assert.assertFalse
+import org.junit.Assert.assertNotEquals
 import org.junit.Assert.assertNotNull
 import org.junit.Assert.assertNull
 import org.junit.Assert.assertTrue
@@ -796,26 +797,27 @@ class DisplayToolbarTest {
     }
 
     @Test
-    fun `securityIconColor is set when securityIconColor changes`() {
+    fun `securityIcons is set when securityIcons changes`() {
         val toolbar = mock(BrowserToolbar::class.java)
         val displayToolbar = DisplayToolbar(testContext, toolbar)
 
-        displayToolbar.securityIconColor = Pair(R.color.photonBlue40, R.color.photonBlue40)
+        val insecure = testContext.getDrawable(R.drawable.mozac_ic_globe)
+        val secure = testContext.getDrawable(R.drawable.mozac_ic_lock)
+        displayToolbar.securityIcons = SiteSecurityIcons(insecure, secure)
 
-        assertEquals(R.color.photonBlue40, displayToolbar.securityIconColor.first)
-        assertEquals(R.color.photonBlue40, displayToolbar.securityIconColor.second)
+        assertEquals(insecure, displayToolbar.securityIcons.insecure)
+        assertEquals(secure, displayToolbar.securityIcons.secure)
     }
 
     @Test
-    fun `setSiteSecurity is called when securityIconColor changes`() {
+    fun `setSiteSecurity is called when securityIcons changes`() {
         val toolbar = BrowserToolbar(testContext)
-        toolbar.displayToolbar
 
-        assertNull(toolbar.displayToolbar.siteSecurityIconView.colorFilter)
+        val icons = SiteSecurityIcons(mock(), mock())
+        assertNotEquals(icons, toolbar.displayToolbar.securityIcons)
 
-        toolbar.siteSecurityColor = Pair(R.color.photonBlue40, R.color.photonBlue40)
-
-        assertNotNull(toolbar.displayToolbar.siteSecurityIconView.colorFilter)
+        toolbar.siteSecurityIcons = icons
+        assertEquals(icons, toolbar.displayToolbar.securityIcons)
     }
 
     @Test