feat: Add visibility controls to operation menu items

Author: micz

src/_locales/en/messages.json

@@ -157,5 +157,14 @@
     },
     "notificationActive": {
         "message": "Show a notification for each operation"
+    },
+    "operationMenuItemsTitle": {
+        "message": "Operation Menu Items"
+    },
+    "menuItemActionInfo": {
+        "message": "Choose which actions should be available in the popup menu."
+    },
+    "menuItemActionWarning": {
+        "message": "At least one item must be selected."
     }
 }

src/common/util.js

@@ -14,6 +14,10 @@ export const DEFAULT_PREFERENCES = {
   searchAccountName: false,
   notificationActive: false,
   operationCounters: { move: 0, copy: 0, tag: 0 },
+  operationMenuItemsMove: true,
+  operationMenuItemsCopy: true,
+  operationMenuItemsGoto: true,
+  operationMenuItemsTag: true,
 };
 
 export async function getValidatedFolders(rootNode, prefName) {

src/options/options.css

@@ -86,6 +86,27 @@ fieldset {
   min-height: 25em;
   grid-column: span 2;
   padding: 10px;
+  border-color: light-dark(#fff, #5f5f5f);
+}
+
+.menuItemActionDiv {
+  display: inline-block;
+  margin-left: 35px;
+}
+
+.menuItemActionDivGroup {
+  display: block;
+  margin-top: 20px;
+  text-align: center;
+}
+
+.menuItemActionDivText {
+  display: block;
+  margin-bottom: 10px;
+}
+
+.operationMenuItemsFieldset {
+  min-height: fit-content;
 }
 
 .overflow {

src/options/options.html

@@ -56,6 +56,31 @@
         <button id="translate" data-l10n-id="translate"></button>
       </div>
     </div>
+    <fieldset class="operationMenuItemsFieldset">
+      <legend data-l10n-id="operationMenuItemsTitle"></legend>
+      <div>
+        <div class="menuItemActionDivText" data-l10n-id="menuItemActionInfo"></div>
+        <div class="menuItemActionDivText" data-l10n-id="menuItemActionWarning"></div>
+        <div class="menuItemActionDivGroup">
+          <div class="preference menuItemActionDiv">
+            <input type="checkbox" id="operationMenuItemsMove" class="menuItemAction">
+            <label for="operationMenuItemsMove" data-l10n-id="actionMove"></label>
+          </div>
+          <div class="preference menuItemActionDiv">
+            <input type="checkbox" id="operationMenuItemsCopy" class="menuItemAction">
+            <label for="operationMenuItemsCopy" data-l10n-id="actionCopy"></label>
+          </div>
+          <div class="preference menuItemActionDiv">
+            <input type="checkbox" id="operationMenuItemsGoto" class="menuItemAction">
+            <label for="operationMenuItemsGoto" data-l10n-id="actionGoto"></label>
+          </div>
+          <div class="preference menuItemActionDiv">
+            <input type="checkbox" id="operationMenuItemsTag" class="menuItemAction">
+            <label for="operationMenuItemsTag" data-l10n-id="actionTag"></label>
+          </div>
+        </div>
+      </div>
+    </fieldset>
     <fieldset>
       <legend data-l10n-id="defaultFoldersTitle"></legend>
       <div id="defaultFolderSetting" data-type="radio">
@@ -91,5 +116,6 @@
         <folder-list id="excluded-folder-picker" search="true" data-l10n-attr-placeholder="excludedFoldersSearchPlaceholder" popup="true"></folder-list>
       </div>
       <folder-list id="excluded-folders" readonly="true" delete="true"></folder-list>
+    </fieldset>
   </body>
 </html>

src/options/options.js

@@ -44,6 +44,12 @@ function changeOptions(event) {
     browser.storage.local.set({ [node.name]: node.value });
   }
 
+  if (node.className === "menuItemAction") {
+    if (!checkMenuItemVisibility()) {
+      node.checked = true;
+    }
+  }
+
   if (node.id == "useLegacyShortcuts") {
     browser.runtime.sendMessage({ action: "setupShortcuts", enable: node.checked });
   }
@@ -114,6 +120,10 @@ async function setupListeners() {
   });
 }
 
+function checkMenuItemVisibility() {
+  return ["operationMenuItemsMove", "operationMenuItemsCopy", "operationMenuItemsGoto", "operationMenuItemsTag"].some(id => document.getElementById(id).checked);
+}
+
 function setupLocalization() {
   for (let node of document.querySelectorAll("[data-l10n-id]")) {
     let l10nId = node.getAttribute("data-l10n-id");

src/popup/popup.js

@@ -52,6 +52,31 @@ async function load() {
 
   setup_localization();
 
+  // hide action buttons
+  let { operationMenuItemsMove, operationMenuItemsCopy, operationMenuItemsGoto, operationMenuItemsTag } = await browser.storage.local.get({
+    operationMenuItemsMove: DEFAULT_PREFERENCES.operationMenuItemsMove,
+    operationMenuItemsCopy: DEFAULT_PREFERENCES.operationMenuItemsCopy,
+    operationMenuItemsGoto: DEFAULT_PREFERENCES.operationMenuItemsGoto,
+    operationMenuItemsTag: DEFAULT_PREFERENCES.operationMenuItemsTag
+  });
+
+  if (!operationMenuItemsMove) {
+    document.querySelector("label[for='action-move']").style.display = "none";
+    document.querySelector("#action-move").style.display = "none";
+  }
+  if (!operationMenuItemsCopy) {
+    document.querySelector("label[for='action-copy']").style.display = "none";
+    document.querySelector("#action-copy").style.display = "none";
+  }
+  if (!operationMenuItemsGoto) {
+    document.querySelector("label[for='action-goto']").style.display = "none";
+    document.querySelector("#action-goto").style.display = "none";
+  }
+  if (!operationMenuItemsTag) {
+    document.querySelector("label[for='action-tag']").style.display = "none";
+    document.querySelector("#action-tag").style.display = "none";
+  }
+
   let params = new URLSearchParams(window.location.search);
 
   let action = params.get("action") || "move";