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

1 files changed, 4 insertions, 24 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 {