feat: settings -> shortcuts: show conflicting shortcut label, p=#10735

locales/en-US/browser/browser/preferences/zen-preferences.ftl

@@ -89,7 +89,7 @@ zen-settings-workspaces-hide-default-container-indicator =
     .label = Hide the default container indicator in the tab bar
 
 zen-key-unsaved = Unsaved shortcut! Please save it by clicking the "Escape" key after retyping it.
-zen-key-conflict = Conflict with another shortcut
+zen-key-conflict = Conflicts with { $group } -> { $shortcut }
 
 pane-zen-theme-title = Theme Settings
 

src/browser/components/preferences/zen-settings.js

@@ -973,7 +973,7 @@ var gZenCKSSettings = {
       this._latestValidKey = null;
       return;
     } else if (shortcut == 'Escape' && !modifiersActive) {
-      const hasConflicts = gZenKeyboardShortcutsManager.checkForConflicts(
+      const { hasConflicts, conflictShortcut } = gZenKeyboardShortcutsManager.checkForConflicts(
         this._latestValidKey ? this._latestValidKey : shortcut,
         this._latestModifier ? this._latestModifier : modifiers,
         this._currentActionID
@@ -986,12 +986,29 @@ var gZenCKSSettings = {
           input.classList.add(`${ZEN_CKS_INPUT_FIELD_CLASS}-invalid`);
         }
         input.classList.remove(`${ZEN_CKS_INPUT_FIELD_CLASS}-unsafed`);
-        if (hasConflicts && !input.nextElementSibling) {
-          input.after(
-            window.MozXULElement.parseXULToFragment(`
-            <label class="${ZEN_CKS_CLASS_BASE}-conflict" data-l10n-id="zen-key-conflict"></label>
-          `)
-          );
+
+        if (hasConflicts) {
+          const shortcutL10nKey =
+            zenMissingKeyboardShortcutL10n[conflictShortcut.getID()] ??
+            conflictShortcut.getL10NID();
+
+          const [group, shortcut] = await document.l10n.formatValues([
+            { id: `${ZEN_CKS_GROUP_PREFIX}-${conflictShortcut.getGroup()}` },
+            { id: shortcutL10nKey },
+          ]);
+
+          if (!input.nextElementSibling) {
+            input.after(
+              window.MozXULElement.parseXULToFragment(`
+                <label class="${ZEN_CKS_CLASS_BASE}-conflict" data-l10n-id="zen-key-conflict"></label>
+              `)
+            );
+          }
+
+          document.l10n.setAttributes(input.nextElementSibling, 'zen-key-conflict', {
+            group: group ?? '',
+            shortcut: shortcut ?? '',
+          });
         }
       } else {
         input.classList.remove(`${ZEN_CKS_INPUT_FIELD_CLASS}-editing`);

src/zen/kbs/ZenKeyboardShortcuts.mjs

@@ -1343,11 +1343,16 @@ var gZenKeyboardShortcutsManager = {
         targetShortcut.getModifiers().equals(modifiers) &&
         targetShortcut.getKeyNameOrCode()?.toLowerCase() == realShortcut
       ) {
-        return true;
+        return {
+          hasConflicts: true,
+          conflictShortcut: targetShortcut,
+        };
       }
     }
 
-    return false;
+    return {
+      hasConflicts: false,
+    };
   },
 
   getShortcutFromCommand(command) {