Closes mozilla-mobile#9378: Add dot notification to the toolbar

Amejia481 · Jan 18, 2021 · 8e2ca55 · 8e2ca55
1 parent 70b26d2
commit 8e2ca55
Show file tree

Hide file tree

Showing 15 changed files with 127 additions and 184 deletions.
diff --git a/...onents/browser/toolbar/src/main/java/mozilla/components/browser/toolbar/BrowserToolbar.kt b/...onents/browser/toolbar/src/main/java/mozilla/components/browser/toolbar/BrowserToolbar.kt
@@ -25,7 +25,7 @@ import mozilla.components.browser.toolbar.edit.EditToolbar
 import mozilla.components.concept.toolbar.AutocompleteDelegate
 import mozilla.components.concept.toolbar.AutocompleteResult
 import mozilla.components.concept.toolbar.Toolbar
-import mozilla.components.concept.toolbar.Toolbar.PermissionHighlights
+import mozilla.components.concept.toolbar.Toolbar.Highlight
 import mozilla.components.support.base.android.Padding
 import mozilla.components.support.base.log.logger.Logger
 import mozilla.components.ui.autocomplete.AutocompleteView
@@ -112,10 +112,10 @@ class BrowserToolbar @JvmOverloads constructor(
         get() = display.siteSecurity
         set(value) { display.siteSecurity = value }
 
-    override var permissionHighlights: PermissionHighlights = PermissionHighlights.NONE
+    override var highlight: Highlight = Highlight.NONE
         set(value) {
             if (field != value) {
-                display.setPermissionIndicator(value)
+                display.setHighlight(value)
                 field = value
             }
         }

diff --git a/...rowser/toolbar/src/main/java/mozilla/components/browser/toolbar/display/DisplayToolbar.kt b/...rowser/toolbar/src/main/java/mozilla/components/browser/toolbar/display/DisplayToolbar.kt
@@ -78,7 +78,7 @@ class DisplayToolbar internal constructor(
         SECURITY,
         TRACKING_PROTECTION,
         EMPTY,
-        PERMISSION_HIGHLIGHTS
+        HIGHLIGHT
     }
 
     /**
@@ -93,7 +93,7 @@ class DisplayToolbar internal constructor(
      * @property text Text color of the URL.
      * @property trackingProtection Color tint for the tracking protection icons.
      * @property separator Color tint for the separator shown between indicators.
-     * @property permissionHighlights Color tint for the permission indicator.
+     * @property highlight Color tint for the highlight icon.
      *
      * Set/Get the site security icon colours. It uses a pair of color integers which represent the
      * insecure and secure colours respectively.
@@ -108,7 +108,7 @@ class DisplayToolbar internal constructor(
         @ColorInt val text: Int,
         @ColorInt val trackingProtection: Int?,
         @ColorInt val separator: Int,
-        @ColorInt val permissionHighlights: Int?
+        @ColorInt val highlight: Int?
     )
 
     /**
@@ -121,23 +121,16 @@ class DisplayToolbar internal constructor(
      * enabled and no trackers have been blocked.
      * @property trackingProtectionException An icon that is shown if tracking protection is enabled
      * but the current page is in the "exception list".
-     * @property permissionHighlights An icon that is shown if any site permission needs to be brought
-     * to the user's attention.
+     * @property highlight An icon that is shown if any event needs to be brought
+     * to the user's attention. Like the autoplay permission been blocked.
      */
     data class Icons(
         val emptyIcon: Drawable?,
         val trackingProtectionTrackersBlocked: Drawable,
         val trackingProtectionNothingBlocked: Drawable,
         val trackingProtectionException: Drawable,
-        val permissionHighlights: PermissionHighlights
-    ) {
-        /**
-         * Icons for site permission indicators.
-         */
-        data class PermissionHighlights(
-            val autoPlayBlocked: Drawable
-        )
-    }
+        val highlight: Drawable
+    )
 
     /**
      * Gravity enum for positioning the progress bar.
@@ -176,7 +169,7 @@ class DisplayToolbar internal constructor(
                 }
             }
         },
-        permissionIndicator = rootView.findViewById(R.id.mozac_browser_toolbar_permission_indicator)
+        highlight = rootView.findViewById(R.id.mozac_browser_toolbar_permission_indicator)
     )
 
     /**
@@ -192,7 +185,7 @@ class DisplayToolbar internal constructor(
         text = views.origin.textColor,
         trackingProtection = null,
         separator = ContextCompat.getColor(context, R.color.photonGrey80),
-        permissionHighlights = null
+        highlight = null
     )
     set(value) {
         field = value
@@ -210,8 +203,8 @@ class DisplayToolbar internal constructor(
             views.trackingProtectionIndicator.setColorFilter(value.trackingProtection)
         }
 
-        if (value.permissionHighlights != null) {
-            views.permissionIndicator.setTint(value.permissionHighlights)
+        if (value.highlight != null) {
+            views.highlight.setTint(value.highlight)
         }
     }
 
@@ -229,9 +222,8 @@ class DisplayToolbar internal constructor(
         trackingProtectionException = requireNotNull(
             getDrawable(context, TrackingProtectionIconView.DEFAULT_ICON_OFF_FOR_A_SITE)
         ),
-        permissionHighlights = Icons.PermissionHighlights(
-            autoPlayBlocked =
-            requireNotNull(getDrawable(context, R.drawable.mozac_ic_autoplay_blocked))
+        highlight = requireNotNull(
+                getDrawable(context, R.drawable.mozac_dot_notification)
         )
     )
     set(value) {
@@ -244,7 +236,7 @@ class DisplayToolbar internal constructor(
             value.trackingProtectionTrackersBlocked,
             value.trackingProtectionException
         )
-        views.permissionIndicator.setIcons(value.permissionHighlights)
+        views.highlight.setIcon(value.highlight)
     }
 
     /**
@@ -298,29 +290,6 @@ class DisplayToolbar internal constructor(
         }
     }
 
-    /**
-     * Sets a listener to be invoked when the site permission indicator icon is clicked.
-     */
-    fun setOnPermissionIndicatorClickedListener(listener: (() -> Unit)?) {
-        if (listener == null) {
-            views.permissionIndicator.setOnClickListener(null)
-            views.permissionIndicator.background = null
-        } else {
-            views.permissionIndicator.setOnClickListener {
-                listener.invoke()
-            }
-
-            val outValue = TypedValue()
-            context.theme.resolveAttribute(
-                android.R.attr.selectableItemBackgroundBorderless,
-                outValue,
-                true
-            )
-
-            views.permissionIndicator.setBackgroundResource(outValue.resourceId)
-        }
-    }
-
     /**
      *  Sets a lambda to be invoked when the menu is dismissed
      */
@@ -470,8 +439,8 @@ class DisplayToolbar internal constructor(
             View.GONE
         }
 
-        views.permissionIndicator.visibility = if (!urlEmpty && indicators.contains(Indicators.PERMISSION_HIGHLIGHTS)) {
-            setPermissionIndicator(toolbar.permissionHighlights)
+        views.highlight.visibility = if (!urlEmpty && indicators.contains(Indicators.HIGHLIGHT)) {
+            setHighlight(toolbar.highlight)
         } else {
             View.GONE
         }
@@ -549,14 +518,14 @@ class DisplayToolbar internal constructor(
         updateSeparatorVisibility()
     }
 
-    internal fun setPermissionIndicator(state: Toolbar.PermissionHighlights): Int {
-        if (!indicators.contains(Indicators.PERMISSION_HIGHLIGHTS)) {
-            return views.permissionIndicator.visibility
+    internal fun setHighlight(state: Toolbar.Highlight): Int {
+        if (!indicators.contains(Indicators.HIGHLIGHT)) {
+            return views.highlight.visibility
         }
 
-        views.permissionIndicator.permissionHighlights = state
+        views.highlight.state = state
 
-        return views.permissionIndicator.visibility
+        return views.highlight.visibility
     }
 
     internal fun onStop() {
@@ -685,5 +654,5 @@ internal class DisplayToolbarViews(
     val trackingProtectionIndicator: TrackingProtectionIconView,
     val origin: OriginView,
     val progress: ProgressBar,
-    val permissionIndicator: PermissionHighlightsIconView
+    val highlight: HighlightView
 )
diff --git a/...r/display/PermissionHighlightsIconView.kt → .../browser/toolbar/display/HighlightView.kt b/...r/display/PermissionHighlightsIconView.kt → .../browser/toolbar/display/HighlightView.kt
@@ -12,14 +12,14 @@ import androidx.appcompat.content.res.AppCompatResources
 import androidx.appcompat.widget.AppCompatImageView
 import androidx.core.view.isVisible
 import mozilla.components.browser.toolbar.R
-import mozilla.components.concept.toolbar.Toolbar.PermissionHighlights
-import mozilla.components.concept.toolbar.Toolbar.PermissionHighlights.AUTOPLAY_BLOCKED
-import mozilla.components.concept.toolbar.Toolbar.PermissionHighlights.NONE
+import mozilla.components.concept.toolbar.Toolbar.Highlight
+import mozilla.components.concept.toolbar.Toolbar.Highlight.AUTOPLAY_BLOCKED
+import mozilla.components.concept.toolbar.Toolbar.Highlight.NONE
 
 /**
- * Internal widget to display the different icons of site permission.
+ * Internal widget to display a dot notification.
  */
-internal class PermissionHighlightsIconView @JvmOverloads constructor(
+internal class HighlightView @JvmOverloads constructor(
     context: Context,
     attrs: AttributeSet? = null,
     defStyleAttr: Int = 0
@@ -29,7 +29,7 @@ internal class PermissionHighlightsIconView @JvmOverloads constructor(
         visibility = GONE
     }
 
-    var permissionHighlights: PermissionHighlights = NONE
+    var state: Highlight = NONE
         set(value) {
             if (value != field) {
                 field = value
@@ -38,26 +38,26 @@ internal class PermissionHighlightsIconView @JvmOverloads constructor(
         }
 
     @VisibleForTesting
-    internal var permissionTint: Int? = null
+    internal var highlightTint: Int? = null
 
-    private var iconAutoplayBlocked: Drawable =
-        requireNotNull(AppCompatResources.getDrawable(context, DEFAULT_ICON_AUTOPLAY_BLOCKED))
+    private var highlightIcon: Drawable =
+        requireNotNull(AppCompatResources.getDrawable(context, DEFAULT_ICON))
 
     fun setTint(tint: Int) {
-        permissionTint = tint
+        highlightTint = tint
         setColorFilter(tint)
     }
 
-    fun setIcons(icons: DisplayToolbar.Icons.PermissionHighlights) {
-        this.iconAutoplayBlocked = icons.autoPlayBlocked
+    fun setIcon(icons: Drawable) {
+        this.highlightIcon = icons
 
         updateIcon()
     }
 
     @Synchronized
     @VisibleForTesting
     internal fun updateIcon() {
-        val update = permissionHighlights.toUpdate()
+        val update = state.toUpdate()
 
         isVisible = update.visible
 
@@ -67,18 +67,17 @@ internal class PermissionHighlightsIconView @JvmOverloads constructor(
             null
         }
 
-        permissionTint?.let { setColorFilter(it) }
+        highlightTint?.let { setColorFilter(it) }
         setImageDrawable(update.drawable)
     }
 
     companion object {
-        val DEFAULT_ICON_AUTOPLAY_BLOCKED =
-            R.drawable.mozac_ic_autoplay_blocked
+        val DEFAULT_ICON = R.drawable.mozac_dot_notification
     }
 
-    private fun PermissionHighlights.toUpdate(): Update = when (this) {
+    private fun Highlight.toUpdate(): Update = when (this) {
         AUTOPLAY_BLOCKED -> Update(
-            iconAutoplayBlocked,
+            highlightIcon,
             R.string.mozac_browser_toolbar_content_description_autoplay_blocked,
             true)
 

diff --git a/components/browser/toolbar/src/main/res/drawable/mozac_dot_notification.xml b/components/browser/toolbar/src/main/res/drawable/mozac_dot_notification.xml
@@ -0,0 +1,16 @@
+<?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/. -->
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="8dp"
+    android:height="8dp"
+    android:viewportWidth="10"
+    android:viewportHeight="10">
+    <path
+        android:pathData="M1,5a4,4 0 1,0 8,0a4,4 0 1,0 -8,0"
+        android:strokeWidth="1"
+        android:strokeAlpha=".2"
+        android:fillColor="#fff"
+        android:strokeColor="#000" />
+</vector>
diff --git a/components/browser/toolbar/src/main/res/layout/mozac_browser_toolbar_displaytoolbar.xml b/components/browser/toolbar/src/main/res/layout/mozac_browser_toolbar_displaytoolbar.xml
@@ -83,20 +83,18 @@
         app:layout_constraintTop_toTopOf="parent"
         app:srcCompat="@drawable/mozac_ic_site_security" />
 
-    <mozilla.components.browser.toolbar.display.PermissionHighlightsIconView
+    <mozilla.components.browser.toolbar.display.HighlightView
         android:id="@+id/mozac_browser_toolbar_permission_indicator"
-        android:layout_width="30dp"
-        android:layout_height="40dp"
-        android:layout_marginTop="8dp"
+        android:layout_width="10dp"
+        android:layout_height="10dp"
         android:importantForAccessibility="no"
-        android:scaleType="center"
+        app:layout_constraintBottom_toBottomOf="@+id/mozac_browser_toolbar_security_indicator"
+        app:layout_constraintEnd_toEndOf="@+id/mozac_browser_toolbar_security_indicator"
+        android:layout_marginEnd="8dp"
+        android:layout_marginBottom="8dp"
         android:visibility="gone"
-        app:layout_constraintStart_toEndOf="@+id/mozac_browser_toolbar_security_indicator"
-        app:layout_constraintTop_toTopOf="parent"
-        android:paddingStart="0dp"
-        android:paddingEnd="8dp"
-        app:layout_goneMarginStart="8dp"
-        app:srcCompat="@drawable/mozac_ic_autoplay_blocked" />
+        android:tint="@color/photonBlue40"
+        app:srcCompat="@drawable/mozac_dot_notification" />
 
     <!-- URL & Title -->
 
@@ -106,8 +104,9 @@
         android:layout_height="40dp"
         android:layout_marginTop="8dp"
         app:layout_constraintEnd_toStartOf="@+id/mozac_browser_toolbar_page_actions"
-        app:layout_constraintStart_toEndOf="@+id/mozac_browser_toolbar_permission_indicator"
+        app:layout_constraintStart_toEndOf="@+id/mozac_browser_toolbar_security_indicator"
         app:layout_constraintTop_toTopOf="parent"
+        app:layout_goneMarginStart="8dp"
         app:layout_goneMarginTop="8dp" />
 
     <!-- Page actions -->