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

2 files changed, 54 insertions, 14 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;
             }
         }
diff --git a/ext/welcome.html b/ext/welcome.html
index f2192686..dd3e2f1e 100644
--- a/ext/welcome.html
+++ b/ext/welcome.html
@@ -31,15 +31,30 @@
         <div class="settings-item"><div class="settings-item-inner">
             <div class="settings-item-left">
                 <div class="settings-item-label">Enable recommended permissions</div>
-                <div class="settings-item-description">This will allow Yomitan to scan text from most sites. Further configuration is available on the <a href="/permissions.html" rel="noopener">Permissions page</a>.</div>
-                <div class="danger-text margin-above" id="permissions-disabled" hidden><strong>Yomitan features will be limited if the recommended permissions are not enabled.</strong></div>
-                <div class="success-text margin-above" id="permissions-enabled" hidden><strong>All Yomitan features are available.</strong></div>
-                <div id="recommended-permissions-error" class="margin-above danger-text" hidden></div>
+                <div class="settings-item-description">This will allow Yomitan to scan text from most sites.</div>
             </div>
             <div class="settings-item-right">
                 <label class="toggle"><input type="checkbox" id="recommended-permissions-toggle" data-origin="&lt;all_urls&gt;"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
             </div>
         </div></div>
+        <div class="settings-item"><div class="settings-item-inner">
+            <div class="settings-item-left">
+                <div class="settings-item-label">Enable optional permissions</div>
+                <div class="settings-item-description">This will allow Yomitan to read the clipboard and communicate with external programs.</div>
+            </div>
+            <div class="settings-item-right">
+                <label class="toggle"><input type="checkbox" id="optional-permissions-toggle" data-origin="&lt;all_urls&gt;"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
+            </div>
+        </div></div>
+        <div class="settings-item"><div class="settings-item-inner">
+            <div class="settings-item-left">
+                <div class="settings-item-description">Further configuration is available on the <a href="/permissions.html" rel="noopener">Permissions page</a> and the web browser's <a tabindex="0" class="extension-settings-link" data-special-url="chrome://extensions/?id={id}">extension settings page</a>.</div>
+                <div class="danger-text margin-above" id="permissions-disabled" hidden><strong>Yomitan features will be limited if the recommended permissions are not enabled.</strong></div>
+                <div class="success-text margin-above" id="recommended-permissions-enabled" hidden><strong>Essential Yomitan features are available.</strong></div>
+                <div class="success-text margin-above" id="full-permissions-enabled" hidden><strong>All Yomitan features are available.</strong></div>
+                <div id="recommended-permissions-error" class="margin-above danger-text" hidden></div>
+            </div>
+        </div></div>
     </div>
 
     <!-- Notifications -->