Permissions button in browser action popup (#1368)

* Add key icon

* Update context icon styles

* Add permissions links

* Show warning badge if permissions are insufficient for certain settings

* Create PermissionsUtil

* Use PermissionsUtil in Backend

* Update SettingsController to use PermissionsUtil

* Update AnkiController to use getRequiredPermissionsForAnkiFieldValue

* Show the permissions buttons/links on the context page when necessary

* Update MV3 compatibility

4 files changed, 16 insertions, 74 deletions

diff --git a/ext/bg/js/settings/anki-controller.js b/ext/bg/js/settings/anki-controller.js
index cb6922b8..db3e3c14 100644
--- a/ext/bg/js/settings/anki-controller.js
+++ b/ext/bg/js/settings/anki-controller.js
@@ -34,10 +34,6 @@ class AnkiController {
             onRemoved: this._removeCardController.bind(this),
             isStale: this._isCardControllerStale.bind(this)
         });
-        this._fieldMarkersRequiringClipboardPermission = new Set([
-            'clipboard-image',
-            'clipboard-text'
-        ]);
         this._stringComparer = new Intl.Collator(); // Locale does not matter
         this._getAnkiDataPromise = null;
         this._ankiErrorContainer = null;
@@ -157,13 +153,7 @@ class AnkiController {
     }
 
     getRequiredPermissions(fieldValue) {
-        const markers = this._getFieldMarkers(fieldValue);
-        for (const marker of markers) {
-            if (this._fieldMarkersRequiringClipboardPermission.has(marker)) {
-                return ['clipboardRead'];
-            }
-        }
-        return [];
+        return this._settingsController.permissionsUtil.getRequiredPermissionsForAnkiFieldValue(fieldValue);
     }
 
     containsAnyMarker(field) {
@@ -338,16 +328,6 @@ class AnkiController {
         this._ankiErrorMessageDetailsToggle.hidden = false;
     }
 
-    _getFieldMarkers(fieldValue) {
-        const pattern = /\{([\w-]+)\}/g;
-        const markers = [];
-        let match;
-        while ((match = pattern.exec(fieldValue)) !== null) {
-            markers.push(match[1]);
-        }
-        return markers;
-    }
-
     _sortStringArray(array) {
         const stringComparer = this._stringComparer;
         array.sort((a, b) => stringComparer.compare(a, b));
@@ -656,7 +636,7 @@ class AnkiCardController {
 
     async _requestPermissions(permissions) {
         try {
-            await this._settingsController.setPermissionsGranted(permissions, true);
+            await this._settingsController.permissionsUtil.setPermissionsGranted({permissions}, true);
         } catch (e) {
             yomichan.logError(e);
         }
@@ -669,8 +649,8 @@ class AnkiCardController {
             node.dataset.requiredPermission = permissions.join(' ');
             const hasPermissions = await (
                 request ?
-                this._settingsController.setPermissionsGranted(permissions, true) :
-                this._settingsController.hasPermissions(permissions)
+                this._settingsController.permissionsUtil.setPermissionsGranted({permissions}, true) :
+                this._settingsController.permissionsUtil.hasPermissions({permissions})
             );
             node.dataset.hasPermissions = `${hasPermissions}`;
         } else {
diff --git a/ext/bg/js/settings/backup-controller.js b/ext/bg/js/settings/backup-controller.js
index 34817ee9..8837b927 100644
--- a/ext/bg/js/settings/backup-controller.js
+++ b/ext/bg/js/settings/backup-controller.js
@@ -87,7 +87,7 @@ class BackupController {
         const optionsFull = await this._settingsController.getOptionsFull();
         const environment = await api.getEnvironmentInfo();
         const fieldTemplatesDefault = await api.getDefaultAnkiFieldTemplates();
-        const permissions = await this._settingsController.getAllPermissions();
+        const permissions = await this._settingsController.permissionsUtil.getAllPermissions();
 
         // Format options
         for (const {options} of optionsFull.profiles) {
diff --git a/ext/bg/js/settings/permissions-toggle-controller.js b/ext/bg/js/settings/permissions-toggle-controller.js
index 04c8f3f2..f80e7585 100644
--- a/ext/bg/js/settings/permissions-toggle-controller.js
+++ b/ext/bg/js/settings/permissions-toggle-controller.js
@@ -71,13 +71,13 @@ class PermissionsToggleController {
 
         if (value || !hasPermissionsSetting) {
             toggle.checked = valuePre;
-            const requiredPermissions = this._getRequiredPermissions(toggle);
+            const permissions = this._getRequiredPermissions(toggle);
             try {
-                value = await this._settingsController.setPermissionsGranted(requiredPermissions, value);
+                value = await this._settingsController.permissionsUtil.setPermissionsGranted({permissions}, value);
             } catch (error) {
                 value = valuePre;
                 try {
-                    value = await this._settingsController.hasPermissions(requiredPermissions);
+                    value = await this._settingsController.permissionsUtil.hasPermissions({permissions});
                 } catch (error2) {
                     // NOP
                 }
@@ -113,7 +113,7 @@ class PermissionsToggleController {
     }
 
     async _updateValidity() {
-        const permissions = await this._settingsController.getAllPermissions();
+        const permissions = await this._settingsController.permissionsUtil.getAllPermissions();
         this._onPermissionsChanged({permissions});
     }
 
diff --git a/ext/bg/js/settings/settings-controller.js b/ext/bg/js/settings/settings-controller.js
index a3885ef6..11a9435c 100644
--- a/ext/bg/js/settings/settings-controller.js
+++ b/ext/bg/js/settings/settings-controller.js
@@ -18,6 +18,7 @@
 /* global
  * HtmlTemplateCollection
  * OptionsUtil
+ * PermissionsUtil
  * api
  */
 
@@ -29,6 +30,7 @@ class SettingsController extends EventDispatcher {
         this._pageExitPreventions = new Set();
         this._pageExitPreventionEventListeners = new EventListenerCollection();
         this._templates = new HtmlTemplateCollection(document);
+        this._permissionsUtil = new PermissionsUtil();
     }
 
     get source() {
@@ -44,6 +46,10 @@ class SettingsController extends EventDispatcher {
         this._setProfileIndex(value);
     }
 
+    get permissionsUtil() {
+        return this._permissionsUtil;
+    }
+
     prepare() {
         yomichan.on('optionsUpdated', this._onOptionsUpdated.bind(this));
         chrome.permissions.onAdded.addListener(this._onPermissionsChanged.bind(this));
@@ -134,50 +140,6 @@ class SettingsController extends EventDispatcher {
         return optionsFull;
     }
 
-    hasPermissions(permissions) {
-        return new Promise((resolve, reject) => chrome.permissions.contains({permissions}, (result) => {
-            const e = chrome.runtime.lastError;
-            if (e) {
-                reject(new Error(e.message));
-            } else {
-                resolve(result);
-            }
-        }));
-    }
-
-    setPermissionsGranted(permissions, shouldHave) {
-        return (
-            shouldHave ?
-            new Promise((resolve, reject) => chrome.permissions.request({permissions}, (result) => {
-                const e = chrome.runtime.lastError;
-                if (e) {
-                    reject(new Error(e.message));
-                } else {
-                    resolve(result);
-                }
-            })) :
-            new Promise((resolve, reject) => chrome.permissions.remove({permissions}, (result) => {
-                const e = chrome.runtime.lastError;
-                if (e) {
-                    reject(new Error(e.message));
-                } else {
-                    resolve(!result);
-                }
-            }))
-        );
-    }
-
-    getAllPermissions() {
-        return new Promise((resolve, reject) => chrome.permissions.getAll((result) => {
-            const e = chrome.runtime.lastError;
-            if (e) {
-                reject(new Error(e.message));
-            } else {
-                resolve(result);
-            }
-        }));
-    }
-
     // Private
 
     _setProfileIndex(value) {
@@ -242,7 +204,7 @@ class SettingsController extends EventDispatcher {
         const event = 'permissionsChanged';
         if (!this.hasListeners(event)) { return; }
 
-        const permissions = await this.getAllPermissions();
+        const permissions = await this._permissionsUtil.getAllPermissions();
         this.trigger(event, {permissions});
     }
 }