chore: Worked on keyboard shortcuts

src/browser/components/preferences/preferences-js.patch

@@ -1,13 +1,14 @@
 diff --git a/browser/components/preferences/preferences.js b/browser/components/preferences/preferences.js
-index 7e21bab426b6eb52fe84876d817fddbdb1a35ffc..fe23eb36a28a2baa4facad80a776e739ee6e43b1 100644
+index 7e21bab426b6eb52fe84876d817fddbdb1a35ffc..fb7c6f419c02701aecd148ef2fe271ed6f1a73c1 100644
 --- a/browser/components/preferences/preferences.js
 +++ b/browser/components/preferences/preferences.js
-@@ -196,6 +196,8 @@ function init_all() {
+@@ -196,6 +196,9 @@ function init_all() {
    // the entire document.
    Preferences.queueUpdateOfAllElements();
    Services.telemetry.setEventRecordingEnabled("aboutpreferences", true);
 +  register_module("paneZenLooks", gZenLooksAndFeel);
 +  register_module("paneZenWorkspaces", gZenWorkspacesSettings);
++  register_module("paneZenCKS", gZenCKSSettings);
  
    register_module("paneGeneral", gMainPane);
    register_module("paneHome", gHomePane);

src/browser/components/preferences/preferences-xhtml.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/components/preferences/preferences.xhtml b/browser/components/preferences/preferences.xhtml
-index 3affb19d1a243da4a5782c9a4a5588d165b4119f..ccb56cc323ff5c3e94013de782af54911fc0c360 100644
+index 3affb19d1a243da4a5782c9a4a5588d165b4119f..6fdc0c4447d2d43ee5f4563c725b6eca1cf7acc5 100644
 --- a/browser/components/preferences/preferences.xhtml
 +++ b/browser/components/preferences/preferences.xhtml
 @@ -43,6 +43,8 @@
@@ -24,7 +24,7 @@ index 3affb19d1a243da4a5782c9a4a5588d165b4119f..ccb56cc323ff5c3e94013de782af5491
        <!-- category list -->
        <richlistbox id="categories" data-l10n-id="category-list" data-l10n-attrs="aria-label">
          <richlistitem id="category-general"
-@@ -110,6 +118,28 @@
+@@ -110,6 +118,39 @@
            <label class="category-name" flex="1" data-l10n-id="pane-general-title"></label>
          </richlistitem>
  
@@ -49,11 +49,22 @@ index 3affb19d1a243da4a5782c9a4a5588d165b4119f..ccb56cc323ff5c3e94013de782af5491
 +          <image class="category-icon"/>
 +          <label class="category-name" flex="1" data-l10n-id="pane-zen-workspaces-title"></label>
 +        </richlistitem>
++
++        <richlistitem id="category-zen-CKS"
++                      class="category"
++                      value="paneZenCKS"
++                      helpTopic="prefs-main"
++                      data-l10n-id="category-zen-CKS"
++                      data-l10n-attrs="tooltiptext"
++                      align="center">
++          <image class="category-icon"/>
++          <label class="category-name" flex="1" data-l10n-id="pane-zen-CKS-title"></label>
++        </richlistitem>
 +
          <richlistitem id="category-home"
                        class="category"
                        value="paneHome"
-@@ -228,11 +258,13 @@
+@@ -228,11 +269,13 @@
                  <html:a href="about:policies" target="_blank" data-l10n-id="managed-notice"/>
                </hbox>
              </hbox>
@@ -67,11 +78,12 @@ index 3affb19d1a243da4a5782c9a4a5588d165b4119f..ccb56cc323ff5c3e94013de782af5491
            </hbox>
          </hbox>
          <vbox id="mainPrefPane">
-@@ -246,6 +278,8 @@
+@@ -246,6 +289,9 @@
  #include sync.inc.xhtml
  #include experimental.inc.xhtml
  #include moreFromMozilla.inc.xhtml
 +#include zenLooksAndFeel.inc.xhtml
++#include zenKeyboardShortcuts.inc.xhtml
 +#include zenWorkspaces.inc.xhtml
          </vbox>
        </vbox>

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

@@ -19,6 +19,7 @@ var gZenLooksAndFeel = {
   init() {
     this._initializeColorPicker(this._getInitialAccentColor());
     window.zenPageAccentColorChanged = this._handleAccentColorChange.bind(this);
+    gZenThemeBuilder.init();
   },
 
   _initializeColorPicker(accentColor) {
@@ -56,6 +57,127 @@ var gZenWorkspacesSettings = {
   },
 };
 
+var gZenCKSSettings = {
+  init() {
+    this._currentAction = null;
+    this._initializeEvents();
+    this._initializeCKS();
+  },
+
+  _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"></label>
+          <html:input readonly="1" class="zenCKSOption-input"/>
+        </hbox>
+      `);
+      document.l10n.setAttributes(fragment.querySelector(".zenCKSOption-label"), l10nId);
+
+      const input = fragment.querySelector(".zenCKSOption-input");
+      const shortcut = gZenKeyboardShortcuts.getShortcut(key);
+      if (shortcut) {
+        input.value = gZenKeyboardShortcuts.shortCutToString(shortcut);
+      } else {
+        this._resetCKS(input, key);
+      }
+
+      input.setAttribute("data-key", key);
+      input.addEventListener("focusin", (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);
+  },
+
+  _initializeEvents() {
+    window.addEventListener("keydown", this._handleKeyDown.bind(this));
+  },
+
+  _handleKeyDown(event) {
+    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
+    };
+
+    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;
+      } else {
+        shortcut.key = event.key;
+      }
+    }
+
+    if (event.key === "Escape" || event.key === "Tab") {
+      this._currentAction = null;
+      input.classList.remove("zenCKSOption-input-editing");
+      return;
+    } else if (event.key === "Backspace") {
+      this._resetCKS(input, this._currentAction);
+      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");
+    }
+  },
+};
+
 Preferences.addAll([
   {
     id: "zen.theme.toolbar-themed",

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

@@ -0,0 +1,23 @@
+<script src="chrome://browser/content/zen-components/ZenKeyboardShortcuts.mjs"/>
+<html:template id="template-paneZenCKS">
+<hbox id="ZenCKSCategory"
+      class="subcategory"
+      hidden="true"
+      data-category="paneZenCKS">
+<html:h1 data-l10n-id="pane-zen-CKS-title"/>
+</hbox>
+
+<hbox id="zenCKSCategory"
+      class="subcategory"
+      hidden="true"
+      data-category="paneZenCKS">
+</hbox>
+
+<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 id="zenCKSOptions-wrapper"></vbox>
+</groupbox>
+
+</html:template>