tor-browser

customkeys.js (7603B)

---

/* 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/. */

const table = document.getElementById("table");

function setTextContent(element, content) {
 if (content.startsWith("customkeys-")) {
   element.setAttribute("data-l10n-id", content);
 } else {
   element.textContent = content;
 }
}

function notifyUpdate() {
 window.dispatchEvent(new CustomEvent("CustomKeysUpdate"));
}

async function buildTable() {
 const keys = await RPMSendQuery("CustomKeys:GetKeys");
 for (const category in keys) {
   const tbody = document.createElement("tbody");
   table.append(tbody);
   let row = document.createElement("tr");
   row.className = "category";
   tbody.append(row);
   let cell = document.createElement("td");
   row.append(cell);
   cell.setAttribute("colspan", 5);
   const heading = document.createElement("h1");
   setTextContent(heading, category);
   cell.append(heading);
   const categoryKeys = keys[category];
   for (const keyId in categoryKeys) {
     row = document.createElement("tr");
     row.className = "key";
     tbody.append(row);
     row.setAttribute("data-id", keyId);
     cell = document.createElement("th");
     const key = categoryKeys[keyId];
     setTextContent(cell, key.title);
     row.append(cell);
     cell = document.createElement("td");
     cell.textContent = key.shortcut;
     row.append(cell);
     cell = document.createElement("td");
     let button = document.createElement("button");
     button.className = "change";
     button.setAttribute("data-l10n-id", "customkeys-change");
     cell.append(button);
     let label = document.createElement("label");
     label.className = "newLabel";
     let span = document.createElement("span");
     span.setAttribute("data-l10n-id", "customkeys-new-key");
     label.append(span);
     let input = document.createElement("input");
     input.className = "new";
     label.append(input);
     cell.append(label);
     row.append(cell);
     cell = document.createElement("td");
     button = document.createElement("button");
     button.className = "clear";
     button.setAttribute("data-l10n-id", "customkeys-clear");
     cell.append(button);
     row.append(cell);
     cell = document.createElement("td");
     button = document.createElement("button");
     button.className = "reset";
     button.setAttribute("data-l10n-id", "customkeys-reset");
     cell.append(button);
     row.append(cell);
     updateKey(row, key);
   }
 }
 notifyUpdate();
}

function updateKey(row, data) {
 row.children[1].textContent = data.shortcut;
 row.classList.toggle("customized", data.isCustomized);
 row.classList.toggle("assigned", !!data.shortcut);
}

// Returns false if the assignment should be cancelled.
async function maybeHandleConflict(data) {
 for (const row of table.querySelectorAll(".key")) {
   if (data.shortcut != row.children[1].textContent) {
     continue; // Not a conflict.
   }
   const conflictId = row.dataset.id;
   if (conflictId == data.id) {
     // We're trying to assign this key to the shortcut it is already
     // assigned to. We don't need to do anything.
     return false;
   }
   const conflictDesc = row.children[0].textContent;
   if (
     window.confirm(
       await document.l10n.formatValue("customkeys-conflict-confirm", {
         conflict: conflictDesc,
       })
     )
   ) {
     // Clear the conflicting key.
     const newData = await RPMSendQuery("CustomKeys:ClearKey", conflictId);
     updateKey(row, newData);
     return true;
   }
   return false;
 }
 return true;
}

async function onAction(event) {
 const row = event.target.closest("tr");
 const keyId = row.dataset.id;
 if (event.target.className == "reset") {
   Glean.browserCustomkeys.actions.reset.add();
   const data = await RPMSendQuery("CustomKeys:GetDefaultKey", keyId);
   if (await maybeHandleConflict(data)) {
     const newData = await RPMSendQuery("CustomKeys:ResetKey", keyId);
     updateKey(row, newData);
     notifyUpdate();
   }
 } else if (event.target.className == "change") {
   Glean.browserCustomkeys.actions.change.add();
   // The "editing" class will cause the Change button to be replaced by a
   // labelled input for the new key.
   row.classList.add("editing");
   // We need to listen for keys in the parent process because we want to
   // intercept reserved keys, which we can't do in the content process.
   RPMSendAsyncMessage("CustomKeys:CaptureKey", true);
   row.querySelector(".new").focus();
 } else if (event.target.className == "clear") {
   Glean.browserCustomkeys.actions.clear.add();
   const newData = await RPMSendQuery("CustomKeys:ClearKey", keyId);
   updateKey(row, newData);
   notifyUpdate();
 }
}

async function onKey({ data }) {
 const input = document.activeElement;
 const row = input.closest("tr");
 data.id = row.dataset.id;
 if (data.isModifier) {
   // This is a modifier. Display it, but don't assign yet. We assign when the
   // main key is pressed (below).
   input.value = data.modifierString;
   // Select the input's text so screen readers will report it.
   input.select();
   return;
 }
 if (!data.isValid) {
   input.value = await document.l10n.formatValue("customkeys-key-invalid");
   input.select();
   return;
 }
 if (await maybeHandleConflict(data)) {
   const newData = await RPMSendQuery("CustomKeys:ChangeKey", data);
   updateKey(row, newData);
 }
 RPMSendAsyncMessage("CustomKeys:CaptureKey", false);
 row.classList.remove("editing");
 row.querySelector(".change").focus();
 notifyUpdate();
}

function onFocusLost(event) {
 if (event.target.className == "new") {
   // If the input loses focus, cancel editing of the key.
   RPMSendAsyncMessage("CustomKeys:CaptureKey", false);
   const row = event.target.closest("tr");
   row.classList.remove("editing");
   // Clear any modifiers that were displayed, ready for the next edit.
   event.target.value = "";
 }
}

function onSearchInput(event) {
 const query = event.target.value.toLowerCase();
 for (const row of table.querySelectorAll(".key")) {
   row.hidden =
     query && !row.children[0].textContent.toLowerCase().includes(query);
 }
 for (const tbody of table.tBodies) {
   // Show a category only if it has at least 1 shown key.
   tbody.hidden = !tbody.querySelector(".key:not([hidden])");
 }
 notifyUpdate();
}

async function onResetAll() {
 Glean.browserCustomkeys.actions.reset_all.add();
 if (
   !window.confirm(
     await document.l10n.formatValue("customkeys-reset-all-confirm")
   )
 ) {
   return;
 }
 await RPMSendQuery("CustomKeys:ResetAll");
 const keysByCat = await RPMSendQuery("CustomKeys:GetKeys");
 const keysById = {};
 for (const category in keysByCat) {
   const categoryKeys = keysByCat[category];
   for (const keyId in categoryKeys) {
     keysById[keyId] = categoryKeys[keyId];
   }
 }
 for (const row of table.querySelectorAll(".key")) {
   const data = keysById[row.dataset.id];
   if (data) {
     updateKey(row, data);
   }
 }
 notifyUpdate();
}

buildTable();
table.addEventListener("click", onAction);
RPMAddMessageListener("CustomKeys:CapturedKey", onKey);
table.addEventListener("focusout", onFocusLost);
document.getElementById("search").addEventListener("input", onSearchInput);
document.getElementById("resetAll").addEventListener("click", onResetAll);
Glean.browserCustomkeys.opened.add();