For #768: Add first time PWA dialog (#9308)

Co-authored-by: Tiger Oakes <toakes@mozilla.com>

app/src/main/java/org/mozilla/fenix/browser/BrowserFragment.kt

@@ -10,6 +10,7 @@ import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
 import androidx.coordinatorlayout.widget.CoordinatorLayout
+import androidx.navigation.fragment.findNavController
 import com.google.android.material.snackbar.Snackbar
 import kotlinx.android.synthetic.main.fragment_browser.*
 import kotlinx.android.synthetic.main.fragment_browser.view.*
@@ -35,6 +36,7 @@ import org.mozilla.fenix.ext.components
 import org.mozilla.fenix.ext.nav
 import org.mozilla.fenix.ext.requireComponents
 import org.mozilla.fenix.ext.settings
+import org.mozilla.fenix.shortcut.FirstTimePwaObserver
 import org.mozilla.fenix.trackingprotection.TrackingProtectionOverlay
 
 /**
@@ -107,14 +109,30 @@ class BrowserFragment : BaseBrowserFragment(), UserInteractionHandler {
 
     override fun onStart() {
         super.onStart()
+        val context = requireContext()
+        val settings = context.settings()
+        val session = getSessionById()
+
         val toolbarSessionObserver = TrackingProtectionOverlay(
-            context = requireContext(),
-            settings = requireContext().settings()
+            context = context,
+            settings = settings
         ) {
             browserToolbarView.view
         }
-        getSessionById()?.register(toolbarSessionObserver, this, autoPause = true)
+        session?.register(toolbarSessionObserver, this, autoPause = true)
         updateEngineBottomMargin()
+
+        if (settings.shouldShowFirstTimePwaFragment) {
+            session?.register(
+                FirstTimePwaObserver(
+                    navController = findNavController(),
+                    settings = settings,
+                    webAppUseCases = context.components.useCases.webAppUseCases
+                ),
+                owner = this,
+                autoPause = true
+            )
+        }
     }
 
     private fun updateEngineBottomMargin() {

app/src/main/java/org/mozilla/fenix/shortcut/FirstTimePwaFragment.kt

@@ -0,0 +1,44 @@
+/* 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 org.mozilla.fenix.shortcut
+
+import android.os.Bundle
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+import androidx.fragment.app.DialogFragment
+import androidx.lifecycle.lifecycleScope
+import kotlinx.android.synthetic.main.fragment_create_shortcut.*
+import kotlinx.coroutines.launch
+import org.mozilla.fenix.R
+import org.mozilla.fenix.ext.requireComponents
+
+/**
+ * Dialog displayed the first time the user navigates to an installable web app.
+ */
+class FirstTimePwaFragment : DialogFragment() {
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        setStyle(STYLE_NO_TITLE, R.style.CreateShortcutDialogStyle)
+    }
+
+    override fun onCreateView(
+        inflater: LayoutInflater,
+        container: ViewGroup?,
+        savedInstanceState: Bundle?
+    ): View? = inflater.inflate(R.layout.fragment_pwa_first_time, container, false)
+
+    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
+        super.onViewCreated(view, savedInstanceState)
+        val components = requireComponents
+
+        cancel_button.setOnClickListener { dismiss() }
+        add_button.setOnClickListener {
+            viewLifecycleOwner.lifecycleScope.launch {
+                components.useCases.webAppUseCases.addToHomescreen()
+            }.invokeOnCompletion { dismiss() }
+        }
+    }
+}

app/src/main/java/org/mozilla/fenix/shortcut/FirstTimePwaObserver.kt

@@ -0,0 +1,33 @@
+/* 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 org.mozilla.fenix.shortcut
+
+import androidx.navigation.NavController
+import mozilla.components.browser.session.Session
+import mozilla.components.concept.engine.manifest.WebAppManifest
+import mozilla.components.feature.pwa.WebAppUseCases
+import org.mozilla.fenix.R
+import org.mozilla.fenix.browser.BrowserFragmentDirections
+import org.mozilla.fenix.ext.nav
+import org.mozilla.fenix.utils.Settings
+
+/**
+ * Displays the [FirstTimePwaFragment] info dialog when a PWA is first opened in the browser.
+ */
+class FirstTimePwaObserver(
+    private val navController: NavController,
+    private val settings: Settings,
+    private val webAppUseCases: WebAppUseCases
+) : Session.Observer {
+
+    override fun onWebAppManifestChanged(session: Session, manifest: WebAppManifest?) {
+        if (webAppUseCases.isInstallable() && settings.shouldShowFirstTimePwaFragment) {
+            val directions = BrowserFragmentDirections.actionBrowserFragmentToFirstTimePwaFragment()
+            navController.nav(R.id.browserFragment, directions)
+
+            settings.shouldShowFirstTimePwaFragment = false
+        }
+    }
+}

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

@@ -434,6 +434,11 @@ class Settings private constructor(
         default = false
     )
 
+    var shouldShowFirstTimePwaFragment by booleanPreference(
+        appContext.getPreferenceKey(R.string.pref_key_show_first_time_pwa),
+        default = true
+    )
+
     @VisibleForTesting(otherwise = PRIVATE)
     internal val trackingProtectionOnboardingCount by intPreference(
         appContext.getPreferenceKey(R.string.pref_key_tracking_protection_onboarding),

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

@@ -2,8 +2,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/. -->
-
-<shape xmlns:android="http://schemas.android.com/apk/res/android">
-    <corners android:radius="8dp"/>
-    <solid android:color="?inset" />
-</shape>
+<ripple xmlns:android="http://schemas.android.com/apk/res/android"
+        android:color="?android:attr/colorControlHighlight">
+    <item android:id="@android:id/mask">
+        <shape>
+            <solid android:color="#000000" />
+            <corners android:radius="8dp" />
+        </shape>
+    </item>
+    <item>
+        <shape android:shape="rectangle">
+            <solid android:color="?inset" />
+            <corners android:radius="8dp" />
+        </shape>
+    </item>
+</ripple>

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

@@ -0,0 +1,96 @@
+<?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/. -->
+<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:id="@+id/createShortcutWrapper"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:background="@drawable/scrim_background"
+    android:fitsSystemWindows="true"
+    tools:context="org.mozilla.fenix.shortcut.FirstTimePwaFragment">
+    <androidx.constraintlayout.widget.ConstraintLayout
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_gravity="center"
+        android:layout_marginStart="32dp"
+        android:layout_marginEnd="32dp"
+        android:layout_marginTop="16dp"
+        android:layout_marginBottom="16dp"
+        android:paddingTop="16dp"
+        android:paddingBottom="16dp"
+        android:paddingStart="16dp"
+        android:paddingEnd="16dp"
+        android:background="@drawable/dialog_background">
+        <TextView
+            android:id="@+id/dialog_title"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:textAppearance="@style/HeaderTextStyle"
+            android:textSize="20sp"
+            app:layout_constraintTop_toTopOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            android:text="@string/add_to_homescreen_title"/>
+
+        <ImageView
+            android:id="@+id/home_icon"
+            android:importantForAccessibility="no"
+            android:layout_width="24dp"
+            android:layout_height="24dp"
+            android:layout_marginTop="16dp"
+            android:layout_marginStart="0dp"
+            android:layout_marginEnd="16dp"
+            app:srcCompat="@drawable/ic_add_to_homescreen"
+            app:layout_constraintTop_toBottomOf="@id/dialog_title"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintEnd_toStartOf="@id/description" />
+        <TextView
+            android:id="@+id/description"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:textColor="?primaryText"
+            android:textSize="16sp"
+            android:text="@string/add_to_homescreen_description"
+            app:layout_constraintStart_toEndOf="@id/home_icon"
+            app:layout_constraintTop_toTopOf="@id/home_icon"
+            app:layout_constraintEnd_toEndOf="parent" />
+
+        <com.google.android.material.button.MaterialButton
+            style="@style/Widget.MaterialComponents.Button"
+            android:id="@+id/add_button"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:layout_marginTop="16dp"
+            android:backgroundTint="?accent"
+            android:padding="10dp"
+            android:text="@string/add_to_homescreen_title"
+            android:textAllCaps="false"
+            android:textColor="?contrastText"
+            android:textSize="16sp"
+            android:textStyle="bold"
+            android:letterSpacing="0"
+            app:layout_constraintBottom_toTopOf="@id/cancel_button"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@id/description" />
+
+        <com.google.android.material.button.MaterialButton
+            android:id="@+id/cancel_button"
+            style="@style/Widget.MaterialComponents.Button.TextButton"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:padding="10dp"
+            android:text="@string/add_to_homescreen_continue"
+            android:textAllCaps="false"
+            android:textColor="?primaryText"
+            android:textSize="16sp"
+            android:textStyle="bold"
+            android:letterSpacing="0"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@id/add_button" />
+    </androidx.constraintlayout.widget.ConstraintLayout>
+</FrameLayout>

app/src/main/res/navigation/nav_graph.xml

@@ -211,6 +211,9 @@
         <action
             android:id="@+id/action_browserFragment_to_createShortcutFragment"
             app:destination="@id/createShortcutFragment" />
+        <action
+            android:id="@+id/action_browserFragment_to_firstTimePwaFragment"
+            app:destination="@id/firstTimePwaFragment" />
         <action
             android:id="@+id/action_browserFragment_to_shareFragment"
             app:destination="@id/shareFragment" />
@@ -649,10 +652,17 @@
             app:argType="org.mozilla.fenix.collections.SaveCollectionStep"
             app:nullable="false" />
     </dialog>
+
     <dialog
         android:id="@+id/createShortcutFragment"
         android:name="org.mozilla.fenix.shortcut.CreateShortcutFragment"
         tools:layout="@layout/fragment_create_shortcut" />
+    <dialog
+        android:id="@+id/firstTimePwaFragment"
+        android:name="org.mozilla.fenix.shortcut.FirstTimePwaFragment"
+        android:label="fragment_pwa_first_time"
+        tools:layout="@layout/fragment_pwa_first_time" />
+
     <dialog
         android:id="@+id/shareFragment"
         android:name="org.mozilla.fenix.share.ShareFragment"

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

@@ -157,4 +157,6 @@
     <string name="pref_key_encryption_key_generated" translatable="false">pref_key_encryption_key_generated</string>
     <string name="default_top_sites_added" translatable="false">pref_key_pocket_top_site_added</string>
     <string name="pref_key_top_sites_size" translatable="false">pref_key_top_sites_size</string>
+
+    <string name="pref_key_show_first_time_pwa" translatable="false">pref_key_show_first_time_pwa</string>
 </resources>

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

@@ -1099,8 +1099,12 @@
     <string name="add_to_homescreen_cancel">Cancel</string>
     <!-- Add button text for the Add to Homescreen dialog -->
     <string name="add_to_homescreen_add">Add</string>
+    <!-- Continue to website button text for the first-time Add to Homescreen dialog -->
+    <string name="add_to_homescreen_continue">Continue to website</string>
     <!-- Placeholder text for the TextView in the Add to Homescreen dialog -->
     <string name="add_to_homescreen_text_placeholder">Shortcut name</string>
+    <!-- Describes the add to homescreen functionality -->
+    <string name="add_to_homescreen_description">You can easily add this website to your phone’s Home screen to have instant access and browse faster with an app-like experience.</string>
 
     <!-- Preference for managing the settings for logins and passwords in Fenix -->
     <string name="preferences_passwords_logins_and_passwords">Logins and passwords</string>