Refactor subproject commit in zen-components and update keyboard shortcuts preferences

src/browser/app/profile/zen-browser.js

@@ -98,7 +98,6 @@ pref('zen.view.sidebar-collapsed.hide-mute-button', true);
 
 pref('zen.keyboard.shortcuts.enabled', true);
 pref('zen.keyboard.shortcuts', ""); // Empty string means default shortcuts
-pref('zen.keyboard.shortcuts.disable-firefox', false);
 pref('zen.tabs.dim-pending', true);
 pref('zen.themes.updated-value-observer', false);
 
@@ -209,4 +208,4 @@ pref('media.ffmpeg.vaapi.enabled', true);
 pref('media.ffmpeg.encoder.enabled', true);
 
 pref("media.hardware-video-decoding.enabled", true);
-pref("gfx.canvas.accelerated", true);
+pref("gfx.canvas.accelerated", true);

src/browser/base/content/ZenStartup.mjs

@@ -1,12 +1,6 @@
-
 {
   const lazy = {};
-  XPCOMUtils.defineLazyPreferenceGetter(
-    lazy,
-    "sidebarHeightThrottle",
-    "zen.view.sidebar-height-throttle",
-    500
-  );
+  XPCOMUtils.defineLazyPreferenceGetter(lazy, 'sidebarHeightThrottle', 'zen.view.sidebar-height-throttle', 500);
   var ZenStartup = {
     init() {
       this.logHeader();
@@ -45,7 +39,7 @@
         gZenUIManager.init();
         gZenVerticalTabsManager.init();
         gZenCompactModeManager.init();
-        gZenKeyboardShortcuts.init();
+        gZenKeyboardShortcutsManager.init();
 
         function throttle(f, delay) {
           let timer = 0;
@@ -55,7 +49,9 @@
           };
         }
 
-        new ResizeObserver(throttle(this._updateTabsToolbar.bind(this), lazy.sidebarHeightThrottle)).observe(document.getElementById('tabbrowser-tabs'));
+        new ResizeObserver(throttle(this._updateTabsToolbar.bind(this), lazy.sidebarHeightThrottle)).observe(
+          document.getElementById('tabbrowser-tabs')
+        );
       } catch (e) {
         console.error('ZenThemeModifier: Error initializing browser layout', e);
       }
@@ -150,4 +146,4 @@
   };
 
   ZenStartup.init();
-}
+}

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

@@ -1,7 +1,6 @@
 // This Source Code Form is subject to the terms of the Mozilla Public
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
-
 var gZenMarketplaceManager = {
   init() {
     const checkForUpdates = document.getElementById('zenThemeMarketplaceCheckForUpdates');
@@ -631,150 +630,148 @@ var gZenWorkspacesSettings = {
   },
 };
 
+const ZEN_CKS_CLASS_BASE = 'zenCKSOption';
+const ZEN_CKS_INPUT_FIELD_CLASS = `${ZEN_CKS_CLASS_BASE}-input`;
+const ZEN_CKS_LABEL_CLASS = `${ZEN_CKS_CLASS_BASE}-label`;
+const ZEN_CKS_WRAPPER_ID = `${ZEN_CKS_CLASS_BASE}-wrapper`;
+const ZEN_CKS_GROUP_PREFIX = `${ZEN_CKS_CLASS_BASE}-group`;
+const KEYBIND_ATTRIBUTE_KEY = 'key';
+
 var gZenCKSSettings = {
-  init() {
+  async init() {
     this._currentAction = null;
     this._initializeEvents();
-    this._initializeCKS();
-    this._addPrefObservers();
-    window.addEventListener('unload', () => {
-      Services.prefs.removeObserver('zen.keyboard.shortcuts.disable-firefox', this);
-    });
-  },
-
-  _addPrefObservers() {
-    Services.prefs.addObserver('zen.keyboard.shortcuts.disable-firefox', this);
-  },
-
-  observe(subject, topic, data) {
-    this.onDisableFirefoxShortcutsChange();
-  },
-
-  async onDisableFirefoxShortcutsChange(event) {
-    let checked = Services.prefs.getBoolPref('zen.keyboard.shortcuts.disable-firefox');
-    if (checked) return;
-    let buttonIndex = await confirmRestartPrompt(true, 1, true, false);
-    if (buttonIndex == CONFIRM_RESTART_PROMPT_RESTART_NOW) {
-      Services.startup.quit(Ci.nsIAppStartup.eAttemptQuit | Ci.nsIAppStartup.eRestart);
-      return;
-    }
-  },
-
-  _initializeCKS() {
-    let wrapepr = document.getElementById('zenCKSOptions-wrapper');
-
-    // Create the groups first.
-    for (let key in kZKSActions) {
-      const data = kZKSActions[key];
-      const group = data[2];
-      if (!wrapepr.querySelector(`[data-group="${group}"]`)) {
-        let groupElem = document.createElement('h2');
-        groupElem.setAttribute('data-group', group);
-        document.l10n.setAttributes(groupElem, `zen-cks-group-${group}`);
-        wrapepr.appendChild(groupElem);
-      }
-    }
-
-    const keys = Object.keys(kZKSActions);
-    for (let i = keys.length - 1; i >= 0; i--) {
-      const key = keys[i];
-      const data = kZKSActions[key];
-      const l10nId = data[1];
-      const group = data[2];
-      let fragment = window.MozXULElement.parseXULToFragment(`
-        <hbox class="zenCKSOption">
-          <label class="zenCKSOption-label" for="zenCKSOption-${key}"></label>
-          <html:input readonly="1" class="zenCKSOption-input" id="zenCKSOption-${key}" />
-        </hbox>
-      `);
-      document.l10n.setAttributes(fragment.querySelector('.zenCKSOption-label'), l10nId);
-
-      let input = fragment.querySelector('.zenCKSOption-input');
-      let shortcut = gZenKeyboardShortcuts.getShortcut(key);
-      if (shortcut) {
-        input.value = gZenKeyboardShortcuts.shortCutToString(shortcut);
-      } else {
-        this._resetCKS(input, key);
-      }
-
-      input.setAttribute('data-key', key);
-      input.addEventListener('focus', (event) => {
-        const key = event.target.getAttribute('data-key');
-        this._currentAction = key;
-        event.target.classList.add('zenCKSOption-input-editing');
-      });
-
-      input.addEventListener('blur', (event) => {
-        this._currentAction = null;
-        event.target.classList.remove('zenCKSOption-input-editing');
-      });
-
-      const groupElem = wrapepr.querySelector(`[data-group="${group}"]`);
-      groupElem.after(fragment);
-    }
-  },
-
-  _resetCKS(input, key) {
-    input.value = 'Not set';
-    input.classList.add('zenCKSOption-input-not-set');
-    input.classList.remove('zenCKSOption-input-invalid');
-    gZenKeyboardShortcuts.setShortcut(key, null);
+    await this._initializeCKS();
   },
 
   _initializeEvents() {
     window.addEventListener('keydown', this._handleKeyDown.bind(this));
   },
 
-  _handleKeyDown(event) {
+  async _initializeCKS() {
+    let wrapper = document.getElementById(ZEN_CKS_WRAPPER_ID);
+
+    let shortcuts = await gZenKeyboardShortcutsManager.getModifiableShortcuts();
+
+    if (!shortcuts) {
+      throw Error('No shortcuts defined!');
+    }
+
+    // Generate section per each group
+    for (let group of VALID_SHORTCUT_GROUPS) {
+      let groupClass = `${ZEN_CKS_GROUP_PREFIX}-${group}`;
+      if (!wrapper.querySelector(`[data-group="${groupClass}"]`)) {
+        let groupElem = document.createElement('h2');
+        groupElem.setAttribute('data-group', groupClass);
+        document.l10n.setAttributes(groupElem, `groupClass`);
+        wrapper.appendChild(groupElem);
+      }
+    }
+
+    for (let shortcut of shortcuts) {
+      const keyID = shortcut.getID();
+      const action = shortcut.getAction();
+      const l10nID = shortcut.getL10NID();
+      const group = shortcut.getGroup();
+      const keyInString = shortcut.toUserString();
+      console.debug(keyInString);
+
+      // const labelValue = l10nID == null ? keyID : l10nID;
+      const labelValue = keyID;
+
+      let fragment = window.MozXULElement.parseXULToFragment(`
+        <hbox class="${ZEN_CKS_CLASS_BASE}">
+          <label class="${ZEN_CKS_LABEL_CLASS}" for="${ZEN_CKS_CLASS_BASE}-${action}">${labelValue}</label>
+          <html:input readonly="1" class="${ZEN_CKS_INPUT_FIELD_CLASS}" id="${ZEN_CKS_INPUT_FIELD_CLASS}-${action}" />
+        </hbox>
+      `);
+
+      document.l10n.setAttributes(fragment.querySelector(`.${ZEN_CKS_LABEL_CLASS}`), labelValue);
+
+      let input = fragment.querySelector(`.${ZEN_CKS_INPUT_FIELD_CLASS}`);
+      if (keyInString) {
+        input.value = keyInString;
+      } else {
+        this._resetShortcut(input);
+      }
+
+      input.setAttribute(KEYBIND_ATTRIBUTE_KEY, action);
+
+      input.addEventListener('focus', (event) => {
+        const value = event.target.getAttribute(KEYBIND_ATTRIBUTE_KEY);
+        this._currentAction = value;
+        event.target.classList.add(`${ZEN_CKS_INPUT_FIELD_CLASS}-editing`);
+      });
+
+      input.addEventListener('editDone', (event) => {
+        const target = event.target;
+        target.classList.add(`${ZEN_CKS_INPUT_FIELD_CLASS}-editing`);
+        this._editDone(target);
+      });
+
+      const groupElem = wrapper.querySelector(`[data-group="${ZEN_CKS_GROUP_PREFIX}-${group}"]`);
+      groupElem.after(fragment);
+    }
+  },
+
+  async _resetShortcut(input) {
+    input.value = 'Not set';
+    input.classList.remove(`${ZEN_CKS_INPUT_FIELD_CLASS}-invalid`);
+    input.classList.remove(`${ZEN_CKS_INPUT_FIELD_CLASS}-editing`);
+    input.classList.add(`${ZEN_CKS_INPUT_FIELD_CLASS}-not-set`);
+
+    if (this._currentAction) {
+      this._editDone();
+      await gZenKeyboardShortcutsManager.setShortcut(this._currentAction, null, null);
+    }
+  },
+
+  _editDone(shortcut, modifiers) {
+    gZenKeyboardShortcutsManager.setShortcut(this._currentAction, shortcut, modifiers);
+    this._currentAction = null;
+  },
+
+  //TODO Check for duplicates
+  async _handleKeyDown(event) {
+    event.preventDefault();
+
     if (!this._currentAction) {
       return;
     }
 
-    let input = document.querySelector(`.zenCKSOption-input[data-key="${this._currentAction}"]`);
-    let shortcut = {
-      ctrl: event.ctrlKey,
-      alt: event.altKey,
-      shift: event.shiftKey,
-      meta: event.metaKey,
-    };
+    let input = document.querySelector(`.${ZEN_CKS_INPUT_FIELD_CLASS}[${KEYBIND_ATTRIBUTE_KEY}="${this._currentAction}"]`);
+    const modifiers = new KeyShortcutModifiers(event.ctrlKey, event.altKey, event.shiftKey, event.metaKey);
+    const modifiersActive = modifiers.areAnyActive();
 
-    const shortcutWithoutModifiers = !shortcut.ctrl && !shortcut.alt && !shortcut.shift && !shortcut.meta;
+    let shortcut = event.key;
 
-    if (event.key === 'Tab' && shortcutWithoutModifiers) {
+    shortcut = shortcut.replace(/Ctrl|Control|Shift|Alt|Option|Cmd|Meta/, ''); // Remove all modifiers
+
+    if (shortcut == 'Tab' && !modifiersActive) {
+      input.classList.remove(`${ZEN_CKS_INPUT_FIELD_CLASS}-editing`);
+      this._latestValidKey = null;
       return;
-    } else if (event.key === 'Escape' && shortcutWithoutModifiers) {
-      this._currentAction = null;
-      input.blur();
-      return;
-    } else if (event.key === 'Backspace' && shortcutWithoutModifiers) {
-      this._resetCKS(input, this._currentAction);
-      return;
-    }
+    } else if (shortcut == 'Escape' && !modifiersActive) {
+      input.classList.remove(`${ZEN_CKS_INPUT_FIELD_CLASS}-editing`);
 
-    if (!shortcut.ctrl && !shortcut.alt && !shortcut.shift && !shortcut.meta) {
-      this._resetCKS(input, this._currentAction);
-      return; // No modifiers, ignore.
-    }
-
-    if (!['Control', 'Alt', 'Meta', 'Shift'].includes(event.key)) {
-      if (event.keycode) {
-        shortcut.keycode = event.keycode;
+      if (!this._latestValidKey) {
+        if (!input.classList.contains(`${ZEN_CKS_INPUT_FIELD_CLASS}-invalid`)) {
+          input.classList.add(`${ZEN_CKS_INPUT_FIELD_CLASS}-invalid`);
+        }
       } else {
-        shortcut.key = event.key;
+        this._editDone(input, this._latestValidKey, modifiers);
+        this._latestValidKey = null;
       }
+      return;
+    } else if (shortcut == 'Backspace' && !modifiersActive) {
+      this._resetShortcut(input);
+      this._latestValidKey = null;
+      return;
     }
 
-    event.preventDefault();
-    gZenKeyboardShortcuts.setShortcut(this._currentAction, shortcut);
-
-    input.value = gZenKeyboardShortcuts.shortCutToString(shortcut);
-    input.classList.remove('zenCKSOption-input-not-set');
-
-    if (gZenKeyboardShortcuts.isValidShortcut(shortcut)) {
-      input.classList.remove('zenCKSOption-input-invalid');
-    } else {
-      input.classList.add('zenCKSOption-input-invalid');
-    }
+    input.classList.remove(`${ZEN_CKS_INPUT_FIELD_CLASS}-invalid`);
+    input.value = modifiers.toUserString() + shortcut;
+    this._latestValidKey = shortcut;
   },
 };
 
@@ -829,11 +826,6 @@ Preferences.addAll([
     type: 'bool',
     default: true,
   },
-  {
-    id: 'zen.keyboard.shortcuts.disable-firefox',
-    type: 'bool',
-    default: false,
-  },
   {
     id: 'zen.workspaces.hide-default-container-indicator',
     type: 'bool',
@@ -849,4 +841,4 @@ Preferences.addAll([
     type: 'bool',
     default: true,
   },
-]);
+]);

src/browser/components/preferences/zenKeyboardShortcuts.inc.xhtml

@@ -10,12 +10,7 @@
 <groupbox id="zenCKSGroup" data-category="paneZenCKS" hidden="true" class="highlighting-group">
       <label><html:h2 data-l10n-id="zen-settings-CKS-header"/></label>
       <description class="description-deemphasized" data-l10n-id="zen-settings-CKS-description" />
-      <vbox class="indent">
-            <checkbox id="zenKSCDisableFirefoxShortcuts"
-                  data-l10n-id="zen-settings-CKS-disable-firefox"
-                  preference="zen.keyboard.shortcuts.disable-firefox" />
-      </vbox>
-      <vbox id="zenCKSOptions-wrapper"></vbox>
+      <vbox id="zenCKSOption-wrapper"></vbox>
 </groupbox>
 
-</html:template>
+</html:template>