preference: Use querySelector relative to $root.

Signed-off-by: Anders Kaseorg <anders@zulip.com>

app/renderer/js/pages/preference/connected-org-section.ts

@@ -11,11 +11,13 @@ interface ConnectedOrgSectionProps {
   $root: Element;
 }
 
-export function initConnectedOrgSection(props: ConnectedOrgSectionProps): void {
-  props.$root.textContent = "";
+export function initConnectedOrgSection({
+  $root,
+}: ConnectedOrgSectionProps): void {
+  $root.textContent = "";
 
   const servers = DomainUtil.getDomains();
-  props.$root.innerHTML = html`
+  $root.innerHTML = html`
     <div class="settings-pane" id="server-settings-pane">
       <div class="page-title">${t.__("Connected organizations")}</div>
       <div class="title" id="existing-servers">
@@ -32,13 +34,11 @@ export function initConnectedOrgSection(props: ConnectedOrgSectionProps): void {
     </div>
   `.html;
 
-  const $serverInfoContainer = document.querySelector(
-    "#server-info-container",
-  )!;
-  const $existingServers = document.querySelector("#existing-servers")!;
+  const $serverInfoContainer = $root.querySelector("#server-info-container")!;
+  const $existingServers = $root.querySelector("#existing-servers")!;
   const $newOrgButton: HTMLButtonElement =
-    document.querySelector("#new-org-button")!;
-  const $findAccountsContainer = document.querySelector(
+    $root.querySelector("#new-org-button")!;
+  const $findAccountsContainer = $root.querySelector(
     "#find-accounts-container",
   )!;
 

app/renderer/js/pages/preference/general-section.ts

@@ -23,8 +23,8 @@ interface GeneralSectionProps {
   $root: Element;
 }
 
-export function initGeneralSection(props: GeneralSectionProps): void {
-  props.$root.innerHTML = html`
+export function initGeneralSection({$root}: GeneralSectionProps): void {
+  $root.innerHTML = html`
     <div class="settings-pane">
       <div class="title">${t.__("Appearance")}</div>
       <div id="appearance-option-settings" class="settings-card">
@@ -251,7 +251,7 @@ export function initGeneralSection(props: GeneralSectionProps): void {
 
   function updateTrayOption(): void {
     generateSettingOption({
-      $element: document.querySelector("#tray-option .setting-control")!,
+      $element: $root.querySelector("#tray-option .setting-control")!,
       value: ConfigUtil.getConfigItem("trayIcon", true),
       clickHandler: () => {
         const newValue = !ConfigUtil.getConfigItem("trayIcon", true);
@@ -264,7 +264,7 @@ export function initGeneralSection(props: GeneralSectionProps): void {
 
   function updateMenubarOption(): void {
     generateSettingOption({
-      $element: document.querySelector("#menubar-option .setting-control")!,
+      $element: $root.querySelector("#menubar-option .setting-control")!,
       value: ConfigUtil.getConfigItem("autoHideMenubar", false),
       clickHandler: () => {
         const newValue = !ConfigUtil.getConfigItem("autoHideMenubar", false);
@@ -277,7 +277,7 @@ export function initGeneralSection(props: GeneralSectionProps): void {
 
   function updateBadgeOption(): void {
     generateSettingOption({
-      $element: document.querySelector("#badge-option .setting-control")!,
+      $element: $root.querySelector("#badge-option .setting-control")!,
       value: ConfigUtil.getConfigItem("badgeOption", true),
       clickHandler: () => {
         const newValue = !ConfigUtil.getConfigItem("badgeOption", true);
@@ -290,7 +290,7 @@ export function initGeneralSection(props: GeneralSectionProps): void {
 
   function updateDockBouncing(): void {
     generateSettingOption({
-      $element: document.querySelector("#dock-bounce-option .setting-control")!,
+      $element: $root.querySelector("#dock-bounce-option .setting-control")!,
       value: ConfigUtil.getConfigItem("dockBouncing", true),
       clickHandler: () => {
         const newValue = !ConfigUtil.getConfigItem("dockBouncing", true);
@@ -302,9 +302,7 @@ export function initGeneralSection(props: GeneralSectionProps): void {
 
   function updateFlashTaskbar(): void {
     generateSettingOption({
-      $element: document.querySelector(
-        "#flash-taskbar-option .setting-control",
-      )!,
+      $element: $root.querySelector("#flash-taskbar-option .setting-control")!,
       value: ConfigUtil.getConfigItem("flashTaskbarOnMessage", true),
       clickHandler: () => {
         const newValue = !ConfigUtil.getConfigItem(
@@ -319,7 +317,7 @@ export function initGeneralSection(props: GeneralSectionProps): void {
 
   function autoUpdateOption(): void {
     generateSettingOption({
-      $element: document.querySelector("#autoupdate-option .setting-control")!,
+      $element: $root.querySelector("#autoupdate-option .setting-control")!,
       disabled: EnterpriseUtil.configItemExists("autoUpdate"),
       value: ConfigUtil.getConfigItem("autoUpdate", true),
       clickHandler: () => {
@@ -337,7 +335,7 @@ export function initGeneralSection(props: GeneralSectionProps): void {
 
   function betaUpdateOption(): void {
     generateSettingOption({
-      $element: document.querySelector("#betaupdate-option .setting-control")!,
+      $element: $root.querySelector("#betaupdate-option .setting-control")!,
       value: ConfigUtil.getConfigItem("betaUpdate", false),
       clickHandler: () => {
         const newValue = !ConfigUtil.getConfigItem("betaUpdate", false);
@@ -351,7 +349,7 @@ export function initGeneralSection(props: GeneralSectionProps): void {
 
   function updateSilentOption(): void {
     generateSettingOption({
-      $element: document.querySelector("#silent-option .setting-control")!,
+      $element: $root.querySelector("#silent-option .setting-control")!,
       value: ConfigUtil.getConfigItem("silent", false),
       clickHandler: () => {
         const newValue = !ConfigUtil.getConfigItem("silent", true);
@@ -368,7 +366,7 @@ export function initGeneralSection(props: GeneralSectionProps): void {
 
   function showDesktopNotification(): void {
     generateSettingOption({
-      $element: document.querySelector(
+      $element: $root.querySelector(
         "#show-notification-option .setting-control",
       )!,
       value: ConfigUtil.getConfigItem("showNotification", true),
@@ -382,7 +380,7 @@ export function initGeneralSection(props: GeneralSectionProps): void {
 
   function updateSidebarOption(): void {
     generateSettingOption({
-      $element: document.querySelector("#sidebar-option .setting-control")!,
+      $element: $root.querySelector("#sidebar-option .setting-control")!,
       value: ConfigUtil.getConfigItem("showSidebar", true),
       clickHandler: () => {
         const newValue = !ConfigUtil.getConfigItem("showSidebar", true);
@@ -395,9 +393,7 @@ export function initGeneralSection(props: GeneralSectionProps): void {
 
   function updateStartAtLoginOption(): void {
     generateSettingOption({
-      $element: document.querySelector(
-        "#startAtLogin-option .setting-control",
-      )!,
+      $element: $root.querySelector("#startAtLogin-option .setting-control")!,
       value: ConfigUtil.getConfigItem("startAtLogin", false),
       clickHandler: () => {
         const newValue = !ConfigUtil.getConfigItem("startAtLogin", false);
@@ -410,7 +406,7 @@ export function initGeneralSection(props: GeneralSectionProps): void {
 
   function updateQuitOnCloseOption(): void {
     generateSettingOption({
-      $element: document.querySelector("#quitOnClose-option .setting-control")!,
+      $element: $root.querySelector("#quitOnClose-option .setting-control")!,
       value: ConfigUtil.getConfigItem("quitOnClose", false),
       clickHandler: () => {
         const newValue = !ConfigUtil.getConfigItem("quitOnClose", false);
@@ -422,7 +418,7 @@ export function initGeneralSection(props: GeneralSectionProps): void {
 
   function enableSpellchecker(): void {
     generateSettingOption({
-      $element: document.querySelector(
+      $element: $root.querySelector(
         "#enable-spellchecker-option .setting-control",
       )!,
       value: ConfigUtil.getConfigItem("enableSpellchecker", true),
@@ -431,8 +427,8 @@ export function initGeneralSection(props: GeneralSectionProps): void {
         ConfigUtil.setConfigItem("enableSpellchecker", newValue);
         enableSpellchecker();
         const spellcheckerLanguageInput: HTMLElement =
-          document.querySelector("#spellcheck-langs")!;
-        const spellcheckerNote: HTMLElement = document.querySelector("#note")!;
+          $root.querySelector("#spellcheck-langs")!;
+        const spellcheckerNote: HTMLElement = $root.querySelector("#note")!;
         spellcheckerLanguageInput.style.display =
           spellcheckerLanguageInput.style.display === "none" ? "" : "none";
         spellcheckerNote.style.display =
@@ -443,7 +439,7 @@ export function initGeneralSection(props: GeneralSectionProps): void {
 
   function enableErrorReporting(): void {
     generateSettingOption({
-      $element: document.querySelector(
+      $element: $root.querySelector(
         "#enable-error-reporting .setting-control",
       )!,
       value: ConfigUtil.getConfigItem("errorReporting", true),
@@ -472,11 +468,11 @@ export function initGeneralSection(props: GeneralSectionProps): void {
   }
 
   function setLocale(): void {
-    const langDiv: HTMLSelectElement = document.querySelector(".lang-div")!;
+    const langDiv: HTMLSelectElement = $root.querySelector(".lang-div")!;
     const langListHTML = generateSelectHTML(supportedLocales, "lang-menu");
     langDiv.innerHTML += langListHTML.html;
     // `langMenu` is the select-option dropdown menu formed after executing the previous command
-    const langMenu: HTMLSelectElement = document.querySelector(".lang-menu")!;
+    const langMenu: HTMLSelectElement = $root.querySelector(".lang-menu")!;
 
     // The next three lines set the selected language visible on the dropdown button
     let language = ConfigUtil.getConfigItem("appLanguage", "en");
@@ -491,9 +487,7 @@ export function initGeneralSection(props: GeneralSectionProps): void {
 
   function minimizeOnStart(): void {
     generateSettingOption({
-      $element: document.querySelector(
-        "#start-minimize-option .setting-control",
-      )!,
+      $element: $root.querySelector("#start-minimize-option .setting-control")!,
       value: ConfigUtil.getConfigItem("startMinimized", false),
       clickHandler: () => {
         const newValue = !ConfigUtil.getConfigItem("startMinimized", false);
@@ -504,7 +498,7 @@ export function initGeneralSection(props: GeneralSectionProps): void {
   }
 
   function addCustomCSS(): void {
-    const customCSSButton = document.querySelector(
+    const customCSSButton = $root.querySelector(
       "#add-custom-css .custom-css-button",
     )!;
     customCSSButton.addEventListener("click", async () => {
@@ -514,14 +508,13 @@ export function initGeneralSection(props: GeneralSectionProps): void {
 
   function showCustomCSSPath(): void {
     if (!ConfigUtil.getConfigItem("customCSS", null)) {
-      const cssPATH: HTMLElement =
-        document.querySelector("#remove-custom-css")!;
+      const cssPATH: HTMLElement = $root.querySelector("#remove-custom-css")!;
       cssPATH.style.display = "none";
     }
   }
 
   function removeCustomCSS(): void {
-    const removeCSSButton = document.querySelector("#css-delete-action")!;
+    const removeCSSButton = $root.querySelector("#css-delete-action")!;
     removeCSSButton.addEventListener("click", () => {
       ConfigUtil.setConfigItem("customCSS", "");
       ipcRenderer.send("forward-message", "hard-reload");
@@ -539,7 +532,7 @@ export function initGeneralSection(props: GeneralSectionProps): void {
     );
     if (!canceled) {
       ConfigUtil.setConfigItem("downloadsPath", filePaths[0]);
-      const downloadFolderPath: HTMLElement = document.querySelector(
+      const downloadFolderPath: HTMLElement = $root.querySelector(
         ".download-folder-path",
       )!;
       downloadFolderPath.textContent = filePaths[0];
@@ -547,7 +540,7 @@ export function initGeneralSection(props: GeneralSectionProps): void {
   }
 
   function downloadFolder(): void {
-    const downloadFolder = document.querySelector(
+    const downloadFolder = $root.querySelector(
       "#download-folder .download-folder-button",
     )!;
     downloadFolder.addEventListener("click", async () => {
@@ -557,7 +550,7 @@ export function initGeneralSection(props: GeneralSectionProps): void {
 
   function updatePromptDownloadOption(): void {
     generateSettingOption({
-      $element: document.querySelector("#prompt-download .setting-control")!,
+      $element: $root.querySelector("#prompt-download .setting-control")!,
       value: ConfigUtil.getConfigItem("promptDownload", false),
       clickHandler: () => {
         const newValue = !ConfigUtil.getConfigItem("promptDownload", false);
@@ -588,7 +581,7 @@ export function initGeneralSection(props: GeneralSectionProps): void {
   }
 
   function factoryReset(): void {
-    const factoryResetButton = document.querySelector(
+    const factoryResetButton = $root.querySelector(
       "#factory-reset-option .factory-reset-button",
     )!;
     factoryResetButton.addEventListener("click", async () => {
@@ -599,7 +592,7 @@ export function initGeneralSection(props: GeneralSectionProps): void {
   function initSpellChecker(): void {
     // The elctron API is a no-op on macOS and macOS default spellchecker is used.
     if (process.platform === "darwin") {
-      const note: HTMLElement = document.querySelector("#note")!;
+      const note: HTMLElement = $root.querySelector("#note")!;
       note.append(t.__("On macOS, the OS spellchecker is used."));
       note.append(document.createElement("br"));
       note.append(
@@ -608,12 +601,11 @@ export function initGeneralSection(props: GeneralSectionProps): void {
         ),
       );
     } else {
-      const note: HTMLElement = document.querySelector("#note")!;
+      const note: HTMLElement = $root.querySelector("#note")!;
       note.append(
         t.__("You can select a maximum of 3 languages for spellchecking."),
       );
-      const spellDiv: HTMLElement =
-        document.querySelector("#spellcheck-langs")!;
+      const spellDiv: HTMLElement = $root.querySelector("#spellcheck-langs")!;
       spellDiv.innerHTML += html`
         <div class="setting-description">${t.__("Spellchecker Languages")}</div>
         <input name="spellcheck" placeholder="Enter Languages" />
@@ -646,7 +638,7 @@ export function initGeneralSection(props: GeneralSectionProps): void {
         [...languagePairs].sort((a, b) => (a[0] < b[0] ? -1 : 1)),
       );
 
-      const tagField: HTMLInputElement = document.querySelector(
+      const tagField: HTMLInputElement = $root.querySelector(
         "input[name=spellcheck]",
       )!;
       const tagify = new Tagify(tagField, {
@@ -688,8 +680,8 @@ export function initGeneralSection(props: GeneralSectionProps): void {
     // Do not display the spellchecker input and note if it is disabled
     if (!ConfigUtil.getConfigItem("enableSpellchecker", true)) {
       const spellcheckerLanguageInput: HTMLElement =
-        document.querySelector("#spellcheck-langs")!;
-      const spellcheckerNote: HTMLElement = document.querySelector("#note")!;
+        $root.querySelector("#spellcheck-langs")!;
+      const spellcheckerNote: HTMLElement = $root.querySelector("#note")!;
       spellcheckerLanguageInput.style.display = "none";
       spellcheckerNote.style.display = "none";
     }

app/renderer/js/pages/preference/nav.ts

@@ -47,7 +47,7 @@ export default class PreferenceNav {
 
   registerListeners(): void {
     for (const navItem of this.navItems) {
-      const $item = document.querySelector(`#nav-${CSS.escape(navItem)}`)!;
+      const $item = this.$el.querySelector(`#nav-${CSS.escape(navItem)}`)!;
       $item.addEventListener("click", () => {
         this.props.onItemSelected(navItem);
       });
@@ -65,12 +65,12 @@ export default class PreferenceNav {
   }
 
   activate(navItem: NavItem): void {
-    const $item = document.querySelector(`#nav-${CSS.escape(navItem)}`)!;
+    const $item = this.$el.querySelector(`#nav-${CSS.escape(navItem)}`)!;
     $item.classList.add("active");
   }
 
   deactivate(navItem: NavItem): void {
-    const $item = document.querySelector(`#nav-${CSS.escape(navItem)}`)!;
+    const $item = this.$el.querySelector(`#nav-${CSS.escape(navItem)}`)!;
     $item.classList.remove("active");
   }
 }

app/renderer/js/pages/preference/network-section.ts

@@ -9,8 +9,8 @@ interface NetworkSectionProps {
   $root: Element;
 }
 
-export function initNetworkSection(props: NetworkSectionProps): void {
-  props.$root.innerHTML = html`
+export function initNetworkSection({$root}: NetworkSectionProps): void {
+  $root.innerHTML = html`
     <div class="settings-pane">
       <div class="title">${t.__("Proxy")}</div>
       <div id="appearance-option-settings" class="settings-card">
@@ -55,17 +55,17 @@ export function initNetworkSection(props: NetworkSectionProps): void {
     </div>
   `.html;
 
-  const $proxyPAC: HTMLInputElement = document.querySelector(
+  const $proxyPAC: HTMLInputElement = $root.querySelector(
     "#proxy-pac-option .setting-input-value",
   )!;
-  const $proxyRules: HTMLInputElement = document.querySelector(
+  const $proxyRules: HTMLInputElement = $root.querySelector(
     "#proxy-rules-option .setting-input-value",
   )!;
-  const $proxyBypass: HTMLInputElement = document.querySelector(
+  const $proxyBypass: HTMLInputElement = $root.querySelector(
     "#proxy-bypass-option .setting-input-value",
   )!;
-  const $proxySaveAction = document.querySelector("#proxy-save-action")!;
-  const $manualProxyBlock = props.$root.querySelector(".manual-proxy-block")!;
+  const $proxySaveAction = $root.querySelector("#proxy-save-action")!;
+  const $manualProxyBlock = $root.querySelector(".manual-proxy-block")!;
 
   toggleManualProxySettings(ConfigUtil.getConfigItem("useManualProxy", false));
   updateProxyOption();
@@ -92,9 +92,7 @@ export function initNetworkSection(props: NetworkSectionProps): void {
 
   function updateProxyOption(): void {
     generateSettingOption({
-      $element: document.querySelector(
-        "#use-system-settings .setting-control",
-      )!,
+      $element: $root.querySelector("#use-system-settings .setting-control")!,
       value: ConfigUtil.getConfigItem("useSystemProxy", false),
       clickHandler: () => {
         const newValue = !ConfigUtil.getConfigItem("useSystemProxy", false);
@@ -118,9 +116,7 @@ export function initNetworkSection(props: NetworkSectionProps): void {
       },
     });
     generateSettingOption({
-      $element: document.querySelector(
-        "#use-manual-settings .setting-control",
-      )!,
+      $element: $root.querySelector("#use-manual-settings .setting-control")!,
       value: ConfigUtil.getConfigItem("useManualProxy", false),
       clickHandler: () => {
         const newValue = !ConfigUtil.getConfigItem("useManualProxy", false);

app/renderer/js/pages/preference/new-server-form.ts

@@ -14,7 +14,7 @@ interface NewServerFormProps {
   onChange: () => void;
 }
 
-export function initNewServerForm(props: NewServerFormProps): void {
+export function initNewServerForm({$root, onChange}: NewServerFormProps): void {
   const $newServerForm = generateNodeFromHTML(html`
     <div class="server-input-container">
       <div class="title">${t.__("Organization URL")}</div>
@@ -52,8 +52,8 @@ export function initNewServerForm(props: NewServerFormProps): void {
   `);
   const $saveServerButton: HTMLButtonElement =
     $newServerForm.querySelector("#connect")!;
-  props.$root.textContent = "";
-  props.$root.append($newServerForm);
+  $root.textContent = "";
+  $root.append($newServerForm);
   const $newServerUrl: HTMLInputElement = $newServerForm.querySelector(
     "input.setting-input-value",
   )!;
@@ -77,7 +77,7 @@ export function initNewServerForm(props: NewServerFormProps): void {
     }
 
     await DomainUtil.addDomain(serverConf);
-    props.onChange();
+    onChange();
   }
 
   $saveServerButton.addEventListener("click", async () => {
@@ -91,14 +91,14 @@ export function initNewServerForm(props: NewServerFormProps): void {
 
   // Open create new org link in default browser
   const link = "https://zulip.com/new/";
-  const externalCreateNewOrgElement = document.querySelector(
+  const externalCreateNewOrgElement = $root.querySelector(
     "#open-create-org-link",
   )!;
   externalCreateNewOrgElement.addEventListener("click", async () => {
     await LinkUtil.openBrowser(new URL(link));
   });
 
-  const networkSettingsId = document.querySelector(".server-network-option")!;
+  const networkSettingsId = $root.querySelector(".server-network-option")!;
   networkSettingsId.addEventListener("click", () => {
     ipcRenderer.send("forward-message", "open-network-settings");
   });

app/renderer/js/pages/preference/servers-section.ts

@@ -8,10 +8,8 @@ interface ServersSectionProps {
   $root: Element;
 }
 
-export function initServersSection(props: ServersSectionProps): void {
-  props.$root.textContent = "";
-
-  props.$root.innerHTML = html`
+export function initServersSection({$root}: ServersSectionProps): void {
+  $root.innerHTML = html`
     <div class="add-server-modal">
       <div class="modal-container">
         <div class="settings-pane" id="server-settings-pane">
@@ -21,7 +19,7 @@ export function initServersSection(props: ServersSectionProps): void {
       </div>
     </div>
   `.html;
-  const $newServerContainer = document.querySelector("#new-server-container")!;
+  const $newServerContainer = $root.querySelector("#new-server-container")!;
 
   initNewServerForm({
     $root: $newServerContainer,

app/renderer/js/pages/preference/shortcuts-section.ts

@@ -7,10 +7,10 @@ interface ShortcutsSectionProps {
 }
 
 // eslint-disable-next-line complexity
-export function initShortcutsSection(props: ShortcutsSectionProps): void {
+export function initShortcutsSection({$root}: ShortcutsSectionProps): void {
   const cmdOrCtrl = process.platform === "darwin" ? "⌘" : "Ctrl";
 
-  props.$root.innerHTML = html`
+  $root.innerHTML = html`
     <div class="settings-pane">
       <div class="settings-card tip">
         <p>
@@ -224,7 +224,7 @@ export function initShortcutsSection(props: ShortcutsSectionProps): void {
 
   const link = "https://zulip.com/help/keyboard-shortcuts";
   const externalCreateNewOrgElement =
-    document.querySelector("#open-hotkeys-link")!;
+    $root.querySelector("#open-hotkeys-link")!;
   externalCreateNewOrgElement.addEventListener("click", async () => {
     await LinkUtil.openBrowser(new URL(link));
   });