Closes mozilla-mobile#1127: Expose ReloadPageButton through BrowserToolbar

This code already exists in our sample app, and was moved to make it
available to apps as well.

Renamed ReloadPageAction -> TwoStateButton.

Updates changelog doc with this and the parent issue.

Author: jonalmeida

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

@@ -13,6 +13,7 @@ import android.util.AttributeSet
 import android.view.View
 import android.view.View.OnFocusChangeListener
 import android.view.ViewGroup
+import android.widget.ImageButton
 import mozilla.components.browser.menu.BrowserMenuBuilder
 import mozilla.components.browser.toolbar.display.DisplayToolbar
 import mozilla.components.browser.toolbar.edit.EditToolbar
@@ -433,6 +434,50 @@ class BrowserToolbar @JvmOverloads constructor(
         }
     }
 
+    /**
+     * An action that either shows an active button or an inactive button based on the provided
+     * <code>isEnabled</code> lambda.
+     *
+     * @param enabledImage The drawable to be show if the button is in the enabled stated.
+     * @param enabledContentDescription The content description to use if the button is in the enabled state.
+     * @param disabledImage The drawable to be show if the button is in the disabled stated.
+     * @param disabledContentDescription The content description to use if the button is in the enabled state.
+     * @param isEnabled Lambda that returns true of false to indicate whether this button should be enabled/disabled.
+     * @param background A custom (stateful) background drawable resource to be used.
+     * @param listener Callback that will be invoked whenever the checked state changes.
+     */
+    open class TwoStateButton(
+        private val enabledImage: Drawable,
+        private val enabledContentDescription: String,
+        private val disabledImage: Drawable,
+        private val disabledContentDescription: String,
+        private val isEnabled: () -> Boolean = { true },
+        background: Int = 0,
+        listener: () -> Unit
+    ) : BrowserToolbar.Button(
+        enabledImage,
+        enabledContentDescription,
+        listener = listener,
+        background = background
+    ) {
+        var enabled: Boolean = false
+            private set
+
+        override fun bind(view: View) {
+            enabled = isEnabled.invoke()
+
+            val button = view as ImageButton
+
+            if (enabled) {
+                button.setImageDrawable(disabledImage)
+                button.contentDescription = disabledContentDescription
+            } else {
+                button.setImageDrawable(enabledImage)
+                button.contentDescription = enabledContentDescription
+            }
+        }
+    }
+
     companion object {
         private const val DEFAULT_TOOLBAR_HEIGHT_DP = 56
         internal const val ACTION_PADDING_DP = 16

components/browser/toolbar/src/test/java/mozilla/components/browser/toolbar/BrowserToolbarTest.kt

@@ -6,8 +6,10 @@ package mozilla.components.browser.toolbar
 
 import android.graphics.Color
 import android.graphics.Typeface
+import android.graphics.drawable.Drawable
 import android.util.AttributeSet
 import android.view.View
+import android.widget.ImageButton
 import android.widget.LinearLayout
 import mozilla.components.browser.menu.BrowserMenuBuilder
 import mozilla.components.browser.toolbar.BrowserToolbar.Companion.ACTION_PADDING_DP
@@ -718,4 +720,21 @@ class BrowserToolbarTest {
 
         assertEquals(false, button.visible())
     }
+
+    @Test
+    fun `ReloadPageAction visibility changes update image`() {
+        val reloadImage: Drawable = mock()
+        val stopImage: Drawable = mock()
+        val view: ImageButton = mock()
+        var reloadPageAction = BrowserToolbar.TwoStateButton(reloadImage, "reload", stopImage, "stop") {}
+        assertFalse(reloadPageAction.enabled)
+        reloadPageAction.bind(view)
+        verify(view).setImageDrawable(stopImage)
+        verify(view).contentDescription = "stop"
+
+        reloadPageAction = BrowserToolbar.TwoStateButton(reloadImage, "reload", stopImage, "stop", { false }) {}
+        reloadPageAction.bind(view)
+        verify(view).setImageDrawable(stopImage)
+        verify(view).contentDescription = "reload"
+    }
 }

docs/changelog.md

@@ -30,25 +30,25 @@ permalink: /changelog/
 
   ```kotlin
   // Before
-  Config.custom(CONFIG_URL).then { config: Config ->    
+  Config.custom(CONFIG_URL).then { config: Config ->
     account = FirefoxAccount(config, CLIENT_ID, REDIRECT_URL)
   }
 
-  // Now  
+  // Now
   val account = async {
     Config.custom(CONFIG_URL).await().use { config ->
       FirefoxAccount(config, CLIENT_ID, REDIRECT_URL)
-    }                  
-  }    
+    }
+  }
   ```
   In case error handling is needed, the new API will also become easier to work with:
-   ```kotlin
+  ```kotlin
   // Before
   account.beginOAuthFlow(scopes, wantsKeys).then({ url ->
     showLoginScreen(url)
   }, { exception ->
     handleException(exception)
-  }
+  })
 
   // Now
   async {
@@ -63,14 +63,60 @@ permalink: /changelog/
 * **browser-engine-system, browser-engine-gecko, browser-engine-gecko-beta and browser-engine-gecko-nightly**:
   Adding support for using `SystemEngineView` and `GeckoEngineView` in a `CoordinatorLayout`.
   This allows to create nice transitions like hiding the toolbar when scrolls.
+* **browser-session**
+  * Fixed an issue where a custom tab `Session?` could get selected after removing the currently selected `Session`.
+* **browser-toolbar**:
+  * Added TwoStateButton that will change drawables based on the `isEnabled` listener. This is particularly useful for
+  having a reload/cancel button.
+  ```kotlin
+  var isLoading: Boolean // updated by some state change.
+  BrowserToolbar.TwoStateButton(
+      reloadDrawable,
+      "reload button",
+      cancelDrawable,
+      "cancel button",
+      { isLoading }
+  ) { /* On-click listener */ }
+  ```
+  * BrowserToolbar APIs for Button and ToggleButton have also been updated to accept `Drawable` instead of resource IDs:
+  ```kotlin
+  // Before
+  BrowserToolbar.Button(R.drawable.image, "image description") {
+    // perform an action on click.
+  }
+
+  // Now
+  val imageDrawable: Drawable = Drawable()
+  BrowserToolbar.Button(imageDrawable, "image description") {
+    // perform an action on click.
+  }
+
+  // Before
+  BrowserToolbar.ToggleButton(
+    R.drawable.image,
+    R.drawable.image_selected,
+    "image description",
+    "image selected description") {
+    // perform an action on click.
+  }
+
+  // Now
+  val imageDrawable: Drawable = Drawable()
+  val imageSelectedDrawable: Drawable = Drawable()
+  BrowserToolbar.ToggleButton(
+    imageDrawable,
+    imageSelectedDrawable,
+    "image description",
+    "image selected description") {
+    // perform an action on click.
+  }
+  ```
 * **concept-awesomebar**
   * 🆕 New component: An abstract definition of an awesome bar component.
 * **browser-awesomebar**
   * 🆕 New component: A customizable [Awesome Bar](https://support.mozilla.org/en-US/kb/awesome-bar-search-firefox-bookmarks-history-tabs) implementation for browsers.A
 * **feature-awesomebar**
   * 🆕 New component: A component that connects a [concept-awesomebar](https://github.com/mozilla-mobile/android-components/components/concept/awesomebar/README.md) implementation to a [concept-toolbar](https://github.com/mozilla-mobile/android-components/components/concept/toolbar/README.md) implementation and provides implementations of various suggestion providers.
-* **browser-session**
-  * Fixed an issue where a custom tab `Session? could get selected after removing the currently selected `Session`.
 
 # 0.29.0
 

samples/toolbar/src/main/java/org/mozilla/samples/toolbar/SampleToolbarHelpers.kt

@@ -5,18 +5,15 @@ import android.content.Context
 import android.content.Intent
 import android.graphics.Canvas
 import android.graphics.drawable.ClipDrawable
-import android.graphics.drawable.Drawable
 import android.support.v7.widget.RecyclerView
 import android.view.Gravity
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
-import android.widget.ImageButton
 import android.widget.TextView
 import kotlinx.coroutines.experimental.android.UI
 import kotlinx.coroutines.experimental.delay
 import kotlinx.coroutines.experimental.launch
-import mozilla.components.browser.toolbar.BrowserToolbar
 
 // Code needed for assembling the sample application - but not needed to actually explain the toolbar
 
@@ -129,39 +126,3 @@ class UrlBoxProgressView(
         progressDrawable.draw(canvas)
     }
 }
-
-/**
- * A custom page action that either shows a reload button or a stop button based on the provided
- * <code>isLoading</code> lambda.
- */
-class ReloadPageAction(
-    private val reloadImage: Drawable,
-    private val reloadContentDescription: String,
-    private val stopImage: Drawable,
-    private val stopContentDescription: String,
-    private val isLoading: () -> Boolean,
-    background: Int = 0,
-    listener: () -> Unit
-) : BrowserToolbar.Button(
-    reloadImage,
-    reloadContentDescription,
-    listener = listener,
-    background = background
-) {
-    var loading: Boolean = false
-        private set
-
-    override fun bind(view: View) {
-        loading = isLoading.invoke()
-
-        val button = view as ImageButton
-
-        if (loading) {
-            button.setImageDrawable(stopImage)
-            button.contentDescription = stopContentDescription
-        } else {
-            button.setImageDrawable(reloadImage)
-            button.contentDescription = reloadContentDescription
-        }
-    }
-}

samples/toolbar/src/main/java/org/mozilla/samples/toolbar/ToolbarActivity.kt

@@ -290,12 +290,12 @@ class ToolbarActivity : AppCompatActivity() {
         // Add a custom page action for reload and two browser actions
         // //////////////////////////////////////////////////////////////////////////////////////////
 
-        val reload = ReloadPageAction(
-            reloadImage = resources.getThemedDrawable(mozilla.components.ui.icons.R.drawable.mozac_ic_refresh),
-            reloadContentDescription = "Reload",
-            stopImage = resources.getThemedDrawable(mozilla.components.ui.icons.R.drawable.mozac_ic_stop),
-            stopContentDescription = "Stop",
-            isLoading = { loading },
+        val reload = BrowserToolbar.TwoStateButton(
+            enabledImage = resources.getThemedDrawable(mozilla.components.ui.icons.R.drawable.mozac_ic_refresh),
+            enabledContentDescription = "Reload",
+            disabledImage = resources.getThemedDrawable(mozilla.components.ui.icons.R.drawable.mozac_ic_stop),
+            disabledContentDescription = "Stop",
+            isEnabled = { loading },
             background = R.drawable.pageaction_background
         ) {
             if (loading) {