fix: better feature export & unit display

assets/translations/README.md

@@ -6,15 +6,15 @@ To submit or edit a translation, please follow [this guide](../../contributing.m
 ### Translation progress:
 | Locale | Translated keys | Based on |
 | ------ | --------------- | :------: |
-| [`en_US`](./en_US.json) | 163 (default locale) |  |
-| [`de_DE`](./de_DE.json) | ✅ `163/163` (100.0%) | ─ |
-| [`en_UK`](./en_UK.json) | ✅ `163/163` (100.0%) | `en_US` |
-| [`es_ES`](./es_ES.json) | ✅ `163/163` (100.0%) | ─ |
-| [`fr_FR`](./fr_FR.json) | ✅ `163/163` (100.0%) | ─ |
-| [`hi_IN`](./hi_IN.json) | ✅ `163/163` (100.0%) | ─ |
-| [`ja_JA`](./ja_JA.json) | ✅ `163/163` (100.0%) | ─ |
-| [`pt_BR`](./pt_BR.json) | ✅ `163/163` (100.0%) | ─ |
-| [`zh_CN`](./zh_CN.json) | ✅ `163/163` (100.0%) | ─ |
+| [`en_US`](./en_US.json) | 164 (default locale) |  |
+| [`de_DE`](./de_DE.json) | 🚫 `163/164` (99.4%) | ─ |
+| [`en_UK`](./en_UK.json) | ✅ `164/164` (100.0%) | `en_US` |
+| [`es_ES`](./es_ES.json) | 🚫 `163/164` (99.4%) | ─ |
+| [`fr_FR`](./fr_FR.json) | 🚫 `163/164` (99.4%) | ─ |
+| [`hi_IN`](./hi_IN.json) | 🚫 `163/164` (99.4%) | ─ |
+| [`ja_JA`](./ja_JA.json) | 🚫 `163/164` (99.4%) | ─ |
+| [`pt_BR`](./pt_BR.json) | 🚫 `163/164` (99.4%) | ─ |
+| [`zh_CN`](./zh_CN.json) | 🚫 `163/164` (99.4%) | ─ |
 
 <br>
 
@@ -24,4 +24,59 @@ This means you need to manually check against the base translations for missing
 <br>
 
 ### Missing keys:
-No missing keys
+
+<details><summary><code>de_DE</code> - 1 missing key <i>(click to show)</i></summary><br>
+
+| Key | English text |
+| --- | ------------ |
+| `click_to_reveal_sensitive_info` | `(click to reveal sensitive information)` |
+
+<br></details>
+
+<details><summary><code>es_ES</code> - 1 missing key <i>(click to show)</i></summary><br>
+
+| Key | English text |
+| --- | ------------ |
+| `click_to_reveal_sensitive_info` | `(click to reveal sensitive information)` |
+
+<br></details>
+
+<details><summary><code>fr_FR</code> - 1 missing key <i>(click to show)</i></summary><br>
+
+| Key | English text |
+| --- | ------------ |
+| `click_to_reveal_sensitive_info` | `(click to reveal sensitive information)` |
+
+<br></details>
+
+<details><summary><code>hi_IN</code> - 1 missing key <i>(click to show)</i></summary><br>
+
+| Key | English text |
+| --- | ------------ |
+| `click_to_reveal_sensitive_info` | `(click to reveal sensitive information)` |
+
+<br></details>
+
+<details><summary><code>ja_JA</code> - 1 missing key <i>(click to show)</i></summary><br>
+
+| Key | English text |
+| --- | ------------ |
+| `click_to_reveal_sensitive_info` | `(click to reveal sensitive information)` |
+
+<br></details>
+
+<details><summary><code>pt_BR</code> - 1 missing key <i>(click to show)</i></summary><br>
+
+| Key | English text |
+| --- | ------------ |
+| `click_to_reveal_sensitive_info` | `(click to reveal sensitive information)` |
+
+<br></details>
+
+<details><summary><code>zh_CN</code> - 1 missing key <i>(click to show)</i></summary><br>
+
+| Key | English text |
+| --- | ------------ |
+| `click_to_reveal_sensitive_info` | `(click to reveal sensitive information)` |
+
+<br></details>

assets/translations/en_US.json

@@ -13,6 +13,7 @@
     "version_tooltip": "Version %1 (build %2) - click to open the changelog",
     "export": "Export",
     "export_hint": "Copy the following text to export your configuration.\nWarning: it may contain sensitive data.",
+    "click_to_reveal_sensitive_info": "(click to reveal sensitive information)",
     "export_tooltip": "Export your current configuration",
     "import": "Import",
     "import_hint": "Paste the configuration you want to import into the field below, then click the import button:",

src/features/index.ts

@@ -315,7 +315,7 @@ export const featInfo = {
     min: 100,
     max: 5000,
     step: 100,
-    unit: (val: number) => tp("unit_entries", val),
+    unit: (val: number) => " " + tp("unit_entries", val),
     enable: noopTODO,
     change: noopTODO,
     advanced: true,
@@ -329,7 +329,7 @@ export const featInfo = {
     min: 1,
     max: 100,
     step: 1,
-    unit: (val: number) => tp("unit_days", val),
+    unit: (val: number) => " " + tp("unit_days", val),
     enable: noopTODO,
     change: noopTODO,
     advanced: true,

src/menu/_DEPRECATED_README.txt

@@ -0,0 +1,2 @@
+The files in this folder are to be slowly migrated to use the BytmDialog class.
+They will end up in the new "dialogs" folder and so no more new menus should be created in here.

src/menu/__DEPRECATED.txt

@@ -1,2 +0,0 @@
-The files in this folder are to be slowly migrated to use the BytmDialog class.
-They will end up in the new "dialogs" folder and so no more menus should be created in here.

src/menu/menu_old.css

@@ -302,6 +302,7 @@
 }
 
 #bytm-export-menu-text, #bytm-import-menu-text {
+  white-space: pre;
   font-size: 1.6em;
   margin-bottom: 15px;
 }

src/menu/menu_old.ts

@@ -430,7 +430,7 @@ async function addCfgMenu() {
           if(type === "slider") {
             labelElem = document.createElement("label");
             labelElem.classList.add("bytm-ftconf-label", "bytm-slider-label");
-            labelElem.textContent = `${fmtVal(initialVal)} ${unitTxt}`;
+            labelElem.textContent = `${fmtVal(initialVal)}${unitTxt}`;
 
             inputElem.addEventListener("input", () => {
               if(labelElem && lastDisplayedVal !== inputElem.value) {
@@ -557,7 +557,7 @@ async function addCfgMenu() {
         typeof ftInfo.unit === "function" ? ftInfo.unit(Number(ftElem.value)) : ""
       ));
       if(ftInfo.type === "slider")
-        labelElem.textContent = `${fmtVal(Number(value))} ${unitTxt}`;
+        labelElem.textContent = `${fmtVal(Number(value))}${unitTxt}`;
     }
     info("Rebuilt config menu");
   });
@@ -922,16 +922,29 @@ async function addExportMenu() {
   const textAreaElem = document.createElement("textarea");
   textAreaElem.id = "bytm-export-menu-textarea";
   textAreaElem.readOnly = true;
-  const cfgString = JSON.stringify({ formatVersion, data: getFeatures() });
   lastUncompressedCfgString = JSON.stringify({ formatVersion, data: getFeatures() }, undefined, 2);
-  textAreaElem.value = canCompress ? await compress(cfgString, compressionFormat, "string") : cfgString;
+  textAreaElem.value = t("click_to_reveal_sensitive_info");
+  textAreaElem.setAttribute("revealed", "false");
+
+  const textAreaClicked = async () => {
+    const cfgString = JSON.stringify({ formatVersion, data: getFeatures() });
+    lastUncompressedCfgString = JSON.stringify({ formatVersion, data: getFeatures() }, undefined, 2);
+    textAreaElem.value = canCompress ? await compress(cfgString, compressionFormat, "string") : cfgString;
+    textAreaElem.setAttribute("revealed", "true");
+  };
+
+  textAreaElem.addEventListener("click", textAreaClicked);
+  textAreaElem.addEventListener("keydown", (e) => ["Enter", " ", "Space"].includes(e.key) && textAreaClicked());
 
   siteEvents.on("configChanged", async (data) => {
     const textAreaElem = document.querySelector<HTMLTextAreaElement>("#bytm-export-menu-textarea");
     const cfgString = JSON.stringify({ formatVersion, data });
     lastUncompressedCfgString = JSON.stringify({ formatVersion, data }, undefined, 2);
-    if(textAreaElem)
+    if(textAreaElem) {
+      if(textAreaElem.getAttribute("revealed") !== "true")
+        return;
       textAreaElem.value = canCompress ? await compress(cfgString, compressionFormat, "string") : cfgString;
+    }
   });
 
   //#SECTION footer
@@ -951,16 +964,13 @@ async function addExportMenu() {
 
   const copyBtnClicked = async (evt: MouseEvent | KeyboardEvent) => {
     evt?.bubbles && evt.stopPropagation();
-    const textAreaElem = document.querySelector<HTMLTextAreaElement>("#bytm-export-menu-textarea");
-    if(textAreaElem) {
-      GM.setClipboard(String(evt?.shiftKey || evt?.ctrlKey ? lastUncompressedCfgString : textAreaElem.value));
-      copiedTextElem.style.display = "inline-block";
-      if(typeof copiedTxtTimeout === "undefined") {
-        copiedTxtTimeout = setTimeout(() => {
-          copiedTextElem.style.display = "none";
-          copiedTxtTimeout = undefined;
-        }, 3000) as unknown as number;
-      }
+    GM.setClipboard(String(evt?.shiftKey || evt?.ctrlKey ? lastUncompressedCfgString : await compress(JSON.stringify({ formatVersion, data: getFeatures() }), compressionFormat, "string")));
+    copiedTextElem.style.display = "inline-block";
+    if(typeof copiedTxtTimeout === "undefined") {
+      copiedTxtTimeout = setTimeout(() => {
+        copiedTextElem.style.display = "none";
+        copiedTxtTimeout = undefined;
+      }, 3000) as unknown as number;
     }
   };
   copyBtnElem.addEventListener("click", copyBtnClicked);
@@ -999,9 +1009,15 @@ function closeExportMenu(evt: MouseEvent | KeyboardEvent) {
   menuBg.style.visibility = "hidden";
   menuBg.style.display = "none";
 
-  const copiedTxt = document.querySelector<HTMLElement>("#bytm-export-menu-copied-txt");
-  if(copiedTxt) {
-    copiedTxt.style.display = "none";
+  const textAreaElem = menuBg.querySelector<HTMLTextAreaElement>("#bytm-export-menu-textarea");
+  if(textAreaElem) {
+    textAreaElem.value = t("click_to_reveal_sensitive_info");
+    textAreaElem.setAttribute("revealed", "false");
+  }
+
+  const copiedTxtElem = document.querySelector<HTMLElement>("#bytm-export-menu-copied-txt");
+  if(copiedTxtElem) {
+    copiedTxtElem.style.display = "none";
     if(typeof copiedTxtTimeout === "number") {
       clearTimeout(copiedTxtTimeout);
       copiedTxtTimeout = undefined;