Settings window: Add interaction mode and tab focus state

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;

ts/background.ts

@@ -122,6 +122,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;
 
@@ -441,56 +442,7 @@ export async function startApp(): Promise<void> {
     false
   );
 
-  // Keyboard/mouse mode
+  startInteractionMode();
-  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;
 
   // Load these images now to ensure that they don't flicker on first use
   window.preloadedImages = [];

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,

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;
+}