From 63088edf459f5f13bf8cba40fb5f92cdb25791dc Mon Sep 17 00:00:00 2001
From: automated-signal <37887102+automated-signal@users.noreply.github.com>
Date: Wed, 27 Oct 2021 17:24:02 -0700
Subject: [PATCH] Settings window: Add interaction mode and tab focus state

Co-authored-by: Scott Nonnenberg <scott@signal.org>
---
 stylesheets/components/Preferences.scss |  9 ++++
 ts/background.ts                        | 52 +-----------------
 ts/windows/settings/preload.ts          |  3 ++
 ts/windows/startInteractionMode.ts      | 71 +++++++++++++++++++++++++
 4 files changed, 85 insertions(+), 50 deletions(-)
 create mode 100644 ts/windows/startInteractionMode.ts

diff --git a/stylesheets/components/Preferences.scss b/stylesheets/components/Preferences.scss
index a0d711b6023..b6b3e0d1a87 100644
--- a/stylesheets/components/Preferences.scss
+++ b/stylesheets/components/Preferences.scss
@@ -55,6 +55,15 @@
       }
     }
 
+    &:focus {
+      @include keyboard-mode {
+        background: $color-gray-05;
+      }
+      @include dark-keyboard-mode {
+        background: $color-gray-75;
+      }
+    }
+
     &::before {
       content: '';
       display: block;
diff --git a/ts/background.ts b/ts/background.ts
index c617468adb8..83682decbff 100644
--- a/ts/background.ts
+++ b/ts/background.ts
@@ -121,6 +121,7 @@ import { ToastCaptchaSolved } from './components/ToastCaptchaSolved';
 import { ToastConversationArchived } from './components/ToastConversationArchived';
 import { ToastConversationUnarchived } from './components/ToastConversationUnarchived';
 import { showToast } from './util/showToast';
+import { startInteractionMode } from './windows/startInteractionMode';
 
 const MAX_ATTACHMENT_DOWNLOAD_AGE = 3600 * 72 * 1000;
 
@@ -440,56 +441,7 @@ export async function startApp(): Promise<void> {
     false
   );
 
-  // Keyboard/mouse mode
-  let interactionMode: 'mouse' | 'keyboard' = 'mouse';
-  $(document.body).addClass('mouse-mode');
-
-  window.enterKeyboardMode = () => {
-    if (interactionMode === 'keyboard') {
-      return;
-    }
-
-    interactionMode = 'keyboard';
-    $(document.body).addClass('keyboard-mode').removeClass('mouse-mode');
-    const { userChanged } = window.reduxActions.user;
-    const { clearSelectedMessage } = window.reduxActions.conversations;
-    if (clearSelectedMessage) {
-      clearSelectedMessage();
-    }
-    if (userChanged) {
-      userChanged({ interactionMode });
-    }
-  };
-  window.enterMouseMode = () => {
-    if (interactionMode === 'mouse') {
-      return;
-    }
-
-    interactionMode = 'mouse';
-    $(document.body).addClass('mouse-mode').removeClass('keyboard-mode');
-    const { userChanged } = window.reduxActions.user;
-    const { clearSelectedMessage } = window.reduxActions.conversations;
-    if (clearSelectedMessage) {
-      clearSelectedMessage();
-    }
-    if (userChanged) {
-      userChanged({ interactionMode });
-    }
-  };
-
-  document.addEventListener(
-    'keydown',
-    event => {
-      if (event.key === 'Tab') {
-        window.enterKeyboardMode();
-      }
-    },
-    true
-  );
-  document.addEventListener('wheel', window.enterMouseMode, true);
-  document.addEventListener('mousedown', window.enterMouseMode, true);
-
-  window.getInteractionMode = () => interactionMode;
+  startInteractionMode();
 
   // Load these images now to ensure that they don't flicker on first use
   window.preloadedImages = [];
diff --git a/ts/windows/settings/preload.ts b/ts/windows/settings/preload.ts
index 49ab5010eaa..7f46473bda5 100644
--- a/ts/windows/settings/preload.ts
+++ b/ts/windows/settings/preload.ts
@@ -15,6 +15,7 @@ import {
 } from '../../types/SystemTraySetting';
 import { awaitObject } from '../../util/awaitObject';
 import { createSetting, createCallback } from '../../util/preload';
+import { startInteractionMode } from '../startInteractionMode';
 
 function doneRendering() {
   ipcRenderer.send('settings-done-rendering');
@@ -124,6 +125,8 @@ function getSystemTraySettingValues(
 }
 
 const renderPreferences = async () => {
+  startInteractionMode();
+
   const {
     blockedCount,
     deviceName,
diff --git a/ts/windows/startInteractionMode.ts b/ts/windows/startInteractionMode.ts
new file mode 100644
index 00000000000..68f266f2a96
--- /dev/null
+++ b/ts/windows/startInteractionMode.ts
@@ -0,0 +1,71 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+let initialized = false;
+let interactionMode: 'mouse' | 'keyboard' = 'mouse';
+
+export function startInteractionMode(): void {
+  if (initialized) {
+    return;
+  }
+  initialized = true;
+
+  document.body.classList.add('mouse-mode');
+
+  window.enterKeyboardMode = () => {
+    if (interactionMode === 'keyboard') {
+      return;
+    }
+
+    interactionMode = 'keyboard';
+
+    document.body.classList.add('keyboard-mode');
+    document.body.classList.remove('mouse-mode');
+
+    const clearSelectedMessage =
+      window.reduxActions?.conversations?.clearSelectedMessage;
+    if (clearSelectedMessage) {
+      clearSelectedMessage();
+    }
+
+    const userChanged = window.reduxActions?.user?.userChanged;
+    if (userChanged) {
+      userChanged({ interactionMode });
+    }
+  };
+  window.enterMouseMode = () => {
+    if (interactionMode === 'mouse') {
+      return;
+    }
+
+    interactionMode = 'mouse';
+
+    document.body.classList.add('mouse-mode');
+    document.body.classList.remove('keyboard-mode');
+
+    const clearSelectedMessage =
+      window.reduxActions?.conversations?.clearSelectedMessage;
+    if (clearSelectedMessage) {
+      clearSelectedMessage();
+    }
+
+    const userChanged = window.reduxActions?.user?.userChanged;
+    if (userChanged) {
+      userChanged({ interactionMode });
+    }
+  };
+
+  document.addEventListener(
+    'keydown',
+    event => {
+      if (event.key === 'Tab') {
+        window.enterKeyboardMode();
+      }
+    },
+    true
+  );
+  document.addEventListener('wheel', window.enterMouseMode, true);
+  document.addEventListener('mousedown', window.enterMouseMode, true);
+
+  window.getInteractionMode = () => interactionMode;
+}