Modifier key platform names (#519)

* wip

* add environment class

* use Environment class

* use Environment for scanning modifier options

* remove Environment in favor of API

* await promise

* use modifier symbols on macOS

* fix key separator issues

* if else to switch

* simplify variable names

3 files changed, 27 insertions, 2 deletions

diff --git a/ext/bg/js/settings/conditions-ui.js b/ext/bg/js/settings/conditions-ui.js
index 0670de5a..031689a7 100644
--- a/ext/bg/js/settings/conditions-ui.js
+++ b/ext/bg/js/settings/conditions-ui.js
@@ -310,10 +310,14 @@ ConditionsUI.Condition = class Condition {
         inputInner.prop('readonly', true);
 
         let values = [];
+        let keySeparator = ' + ';
         for (const object of objects) {
             if (hasOwn(object, 'values')) {
                 values = object.values;
             }
+            if (hasOwn(object, 'keySeparator')) {
+                keySeparator = object.keySeparator;
+            }
         }
 
         const pressedKeyIndices = new Set();
@@ -347,7 +351,7 @@ ConditionsUI.Condition = class Condition {
                 }
             }
 
-            const inputValue = [...pressedKeyIndices].map((i) => values[i].name).join(' + ');
+            const inputValue = [...pressedKeyIndices].map((i) => values[i].name).join(keySeparator);
             inputInner.val(inputValue);
             inputInner.change();
         };
diff --git a/ext/bg/js/settings/main.js b/ext/bg/js/settings/main.js
index cf75d629..61395b1c 100644
--- a/ext/bg/js/settings/main.js
+++ b/ext/bg/js/settings/main.js
@@ -22,6 +22,7 @@
  * ankiTemplatesInitialize
  * ankiTemplatesUpdateValue
  * apiForwardLogsToBackend
+ * apiGetEnvironmentInfo
  * apiOptionsSave
  * appearanceInitialize
  * audioSettingsInitialize
@@ -285,6 +286,23 @@ function showExtensionInformation() {
     node.textContent = `${manifest.name} v${manifest.version}`;
 }
 
+async function settingsPopulateModifierKeys() {
+    const scanModifierKeySelect = document.querySelector('#scan-modifier-key');
+    scanModifierKeySelect.textContent = '';
+
+    const environment = await apiGetEnvironmentInfo();
+    const modifierKeys = [
+        {value: 'none', name: 'None'},
+        ...environment.modifiers.keys
+    ];
+    for (const {value, name} of modifierKeys) {
+        const option = document.createElement('option');
+        option.value = value;
+        option.textContent = name;
+        scanModifierKeySelect.appendChild(option);
+    }
+}
+
 
 async function onReady() {
     apiForwardLogsToBackend();
@@ -292,6 +310,7 @@ async function onReady() {
 
     showExtensionInformation();
 
+    await settingsPopulateModifierKeys();
     formSetupEventListeners();
     appearanceInitialize();
     await audioSettingsInitialize();
diff --git a/ext/bg/js/settings/profiles.js b/ext/bg/js/settings/profiles.js
index 3f4b1da7..bdf5a13d 100644
--- a/ext/bg/js/settings/profiles.js
+++ b/ext/bg/js/settings/profiles.js
@@ -23,6 +23,7 @@
  * getOptionsFullMutable
  * getOptionsMutable
  * profileConditionsDescriptor
+ * profileConditionsDescriptorPromise
  * settingsSaveOptions
  * utilBackgroundIsolate
  */
@@ -98,6 +99,7 @@ async function profileFormWrite(optionsFull) {
         profileConditionsContainer.cleanup();
     }
 
+    await profileConditionsDescriptorPromise;
     profileConditionsContainer = new ConditionsUI.Container(
         profileConditionsDescriptor,
         'popupLevel',
@@ -128,7 +130,7 @@ function profileOptionsPopulateSelect(select, profiles, currentValue, ignoreIndi
 }
 
 async function profileOptionsUpdateTarget(optionsFull) {
-    profileFormWrite(optionsFull);
+    await profileFormWrite(optionsFull);
 
     const optionsContext = getOptionsContext();
     const options = await getOptionsMutable(optionsContext);