Allow setting optional permissions on welcome page (#942)

* Differentiate between recommended and full permissions on welcome page

* Allow setting optional permissions from welcome page

* Fix early return causing firefox permission text to not update correctly

1 files changed, 35 insertions, 10 deletions

diff --git a/ext/js/pages/settings/recommended-permissions-controller.js b/ext/js/pages/settings/recommended-permissions-controller.js
index 80572a9b..4177f1bb 100644
--- a/ext/js/pages/settings/recommended-permissions-controller.js
+++ b/ext/js/pages/settings/recommended-permissions-controller.js
@@ -30,6 +30,8 @@ export class RecommendedPermissionsController {
         this._settingsController = settingsController;
         /** @type {HTMLInputElement} */
         this._originToggleNode = querySelectorNotNull(document, '#recommended-permissions-toggle');
+        /** @type {HTMLInputElement} */
+        this._optionalPermissionsToggleNode = querySelectorNotNull(document, '#optional-permissions-toggle');
         /** @type {EventListenerCollection} */
         this._eventListeners = new EventListenerCollection();
         /** @type {?HTMLElement} */
@@ -40,6 +42,7 @@ export class RecommendedPermissionsController {
     async prepare() {
         this._errorContainer = document.querySelector('#recommended-permissions-error');
         this._originToggleNode.addEventListener('change', this._onOriginToggleChange.bind(this), false);
+        this._optionalPermissionsToggleNode.addEventListener('change', this._onOptionalPermissionsToggleChange.bind(this), false);
 
         this._settingsController.on('permissionsChanged', this._onPermissionsChanged.bind(this));
         await this._updatePermissions();
@@ -55,6 +58,8 @@ export class RecommendedPermissionsController {
         const originsSet = new Set(permissions.origins);
         const {origin} = this._originToggleNode.dataset;
         this._originToggleNode.checked = typeof origin === 'string' && originsSet.has(origin);
+
+        this._optionalPermissionsToggleNode.checked = Array.isArray(permissions.permissions) && permissions.permissions.includes('clipboardRead') && permissions.permissions.includes('nativeMessaging');
     }
 
     /**
@@ -70,11 +75,22 @@ export class RecommendedPermissionsController {
         void this._setOriginPermissionEnabled(origin, value);
     }
 
+    /**
+     * @param {Event} e
+     */
+    async _onOptionalPermissionsToggleChange(e) {
+        const node = /** @type {HTMLInputElement} */ (e.currentTarget);
+        const value = node.checked;
+        const permissions = ['clipboardRead', 'nativeMessaging'];
+        await setPermissionsGranted({permissions}, value);
+        await this._updatePermissions();
+    }
+
     /** */
     async _updatePermissions() {
         const permissions = await getAllPermissions();
         this._onPermissionsChanged({permissions});
-        this._setWelcomePageText();
+        void this._setWelcomePageText();
     }
 
     /**
@@ -92,23 +108,32 @@ export class RecommendedPermissionsController {
                 this._errorContainer.textContent = toError(e).message;
             }
         }
-        if (!added) { return false; }
         await this._updatePermissions();
-        return true;
+        return added;
     }
 
     /** */
-    _setWelcomePageText() {
+    async _setWelcomePageText() {
+        const permissions = await getAllPermissions();
+        const recommendedPermissions = permissions.origins?.includes('<all_urls>');
+        const optionalPermissions = permissions.permissions?.includes('clipboardRead') && permissions.permissions?.includes('nativeMessaging');
         /** @type {HTMLElement | null} */
-        this._textIfEnabled = document.querySelector('#permissions-enabled');
+        this._textIfFullEnabled = document.querySelector('#full-permissions-enabled');
+        /** @type {HTMLElement | null} */
+        this._textIfRecommendedEnabled = document.querySelector('#recommended-permissions-enabled');
         /** @type {HTMLElement | null} */
         this._textIfDisabled = document.querySelector('#permissions-disabled');
-        if (this._textIfEnabled && this._textIfDisabled) {
-            if (this._originToggleNode.checked) {
-                this._textIfEnabled.hidden = false;
-                this._textIfDisabled.hidden = true;
+
+        if (this._textIfFullEnabled && this._textIfRecommendedEnabled && this._textIfDisabled) {
+            this._textIfFullEnabled.hidden = true;
+            this._textIfRecommendedEnabled.hidden = true;
+            this._textIfDisabled.hidden = true;
+
+            if (optionalPermissions && recommendedPermissions) {
+                this._textIfFullEnabled.hidden = false;
+            } else if (recommendedPermissions) {
+                this._textIfRecommendedEnabled.hidden = false;
             } else {
-                this._textIfEnabled.hidden = true;
                 this._textIfDisabled.hidden = false;
             }
         }