chore: Worked on keyboard shortcuts

configs/common/mozconfig

@@ -94,8 +94,8 @@ mk_add_options MOZ_SERVICES_HEALTHREPORT=0
 mk_add_options MOZ_TELEMETRY_REPORTING=0
 
 # Allow loading unsigned extensions
-export MOZ_REQUIRE_SIGNING=1
+export MOZ_REQUIRE_SIGNING=
-mk_add_options MOZ_REQUIRE_SIGNING=1
+mk_add_options MOZ_REQUIRE_SIGNING=
 
 # Sorry ptr, I didnt mean to!
 ac_add_options --without-wasm-sandboxed-libraries

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>

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

@@ -58,3 +58,91 @@ zen-vertical-tabs-show-expand-button =
     .label = Show Expand Button
 zen-vertical-tabs-expand-tabs-by-default = 
     .label = Expand Tabs by Default
+
+
+pane-zen-CKS-title = Keyboard Shortcuts
+category-zen-CKS =
+    .tooltiptext = { pane-zen-CKS-title }
+pane-settings-CKS-title = { -brand-short-name } Keyboard Shortcuts
+
+zen-settings-CKS-header = Customize your keyboard shortcuts
+zen-settings-CKS-description = Change the default keyboard shortcuts to your liking and improve your browsing experience
+
+
+zen-cks-group-tab-action = Tab Actions
+zen-cks-group-page-action = Page Actions
+zen-cks-group-visible-action = Visible Actions
+zen-cks-group-history-action = History Actions
+zen-cks-group-search-action = Search Actions
+zen-cks-group-tools-action = Tools Actions
+zen-cks-group-bookmark-action = Bookmark Actions
+zen-cks-group-open-page-action = Open Page Actions
+zen-cks-group-downloads-action = Downloads Actions
+zen-cks-group-sidebar-action = Sidebar Actions
+zen-cks-group-custom-action = Custom Actions
+
+
+open-new-tab = Open New Tab
+close-tab = Close Tab
+open-new-window = Open New Window
+open-new-private-window = Open New Private Window
+close-window = Close Window
+restore-last-tab = Restore Last Tab
+restore-last-window = Restore Last Window
+show-next-tab = Show Next Tab
+show-previous-tab = Show Previous Tab
+show-all-tabs-panel = Show All Tabs Panel
+send-with-mail = Send Page with Mail
+save-page = Save Page
+print-page = Print Page
+mute-current-tab = Mute Current Tab
+show-source-of-page = Show Source of Page
+show-page-info = Show Page Info
+zoom-in = Zoom In
+zoom-out = Zoom Out
+reset-zoom = Reset Zoom
+back = Back
+forward = Forward
+stop = Stop
+reload = Reload
+force-reload = Force Reload
+search-in-this-page = Search in This Page
+show-next-search-result = Show Next Search Result
+show-previous-search-result = Show Previous Search Result
+search-the-web = Search the Web
+open-migration-wizard = Open Migration Wizard
+quit-from-application = Quit Application
+enter-into-customize-mode = Enter Customize Mode
+enter-into-offline-mode = Enter Offline Mode
+open-screen-capture = Open Screen Capture
+bookmark-this-page = Bookmark This Page
+open-bookmark-add-tool = Open Bookmark Add Tool
+open-bookmarks-manager = Open Bookmarks Manager
+toggle-bookmark-toolbar = Toggle Bookmark Toolbar
+open-general-preferences = Open General Preferences
+open-privacy-preferences = Open Privacy Preferences
+open-workspaces-preferences = Open Workspaces Preferences
+open-containers-preferences = Open Containers Preferences
+open-search-preferences = Open Search Preferences
+open-sync-preferences = Open Sync Preferences
+open-task-manager = Open Task Manager
+open-addons-manager = Open Add-ons Manager
+open-home-page = Open Home Page
+forget-history = Forget History
+quick-forget-history = Quick Forget History
+clear-recent-history = Clear Recent History
+restore-last-session = Restore Last Session
+search-history = Search History
+manage-history = Manage History
+open-downloads = Open Downloads
+show-bookmark-sidebar = Show Bookmark Sidebar
+show-history-sidebar = Show History Sidebar
+show-synced-tabs-sidebar = Show Synced Tabs Sidebar
+reverse-sidebar = Reverse Sidebar Position
+hide-sidebar = Hide Sidebar
+toggle-sidebar = Toggle Sidebar
+custom-action-1 = Custom Action 1
+custom-action-2 = Custom Action 2
+custom-action-3 = Custom Action 3
+custom-action-4 = Custom Action 4
+custom-action-5 = Custom Action 5

src/browser/themes/shared/preferences/zen-preferences.css

@@ -28,16 +28,16 @@ groupbox {
 .subcategory + groupbox,
 #noFxaAccount,
 #hasFxaAccount {
-  border-top-left-radius: 15px;
+  border-top-left-radius: 10px;
-  border-top-right-radius: 15px;
+  border-top-right-radius: 10px;
   margin-top: 5px;
 }
 
 groupbox:has(+ script),
 groupbox:last-of-type,
 groupbox:has(+ .subcategory) {
-  border-bottom-left-radius: 15px !important;
+  border-bottom-left-radius: 10px !important;
-  border-bottom-right-radius: 15px !important;
+  border-bottom-right-radius: 10px !important;
 }
 
 .sticky-inner-container{
@@ -197,6 +197,53 @@ groupbox h2 {
   list-style-image: url("chrome://browser/skin/window.svg");
 }
 
+/* CKS */
+
+#category-zen-CKS > .category-icon {
+  list-style-image: url("chrome://browser/skin/save.svg");
+}
+
+.zenCKSOption-input {
+  padding: 5px;
+  border-radius: 5px;
+  border: 1px solid var(--zen-colors-border);
+  margin-left: auto;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  width: 40%;
+  user-select: none;
+  cursor: text;
+  background: transparent;
+}
+
+.zenCKSOption {
+  margin-bottom: 10px;
+}
+
+.zenCKSOption > label {
+  font-size: 14px;
+  color: light-dark(rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.7));
+}
+
+.zenCKSOption-input.zenCKSOption-input-not-set {
+  color: light-dark(rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0.3));
+}
+
+.zenCKSOption-input.zenCKSOption-input-editing {
+  border-color: transparent;
+  box-shadow: 0 0 0 2px var(--zen-primary-color);
+}
+
+.zenCKSOption-input.zenCKSOption-input-invalid {
+  border-color: red;
+}
+
+#zenCKSOptions-wrapper > [data-group]:not(:first-of-type) {
+  border-top: 1px solid light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
+  padding-top: 10px;
+}
+
 /* Theme builder */
 
 #zen-theme-builder {