Use different z-index for app-loading-screen

Co-authored-by: Fedor Indutny <79877362+indutny-signal@users.noreply.github.com>

js/modules/indexeddb.js

@@ -1,7 +1,7 @@
 // Copyright 2018-2020 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-/* global window, Whisper, setTimeout */
+/* global window, Whisper, clearTimeout, setTimeout */
 
 const MESSAGE_MINIMUM_VERSION = 7;
 
@@ -21,15 +21,26 @@ async function doesDatabaseExist() {
 
     let existed = true;
 
-    setTimeout(() => {
+    let timer = setTimeout(() => {
       window.SignalContext.log.warn(
         'doesDatabaseExist: Timed out attempting to check IndexedDB status'
       );
       return resolve(false);
     }, 1000);
 
-    req.onerror = reject;
+    const clearTimer = () => {
+      if (timer !== undefined) {
+        clearTimeout(timer);
+        timer = undefined;
+      }
+    };
+
+    req.onerror = error => {
+      clearTimer();
+      reject(error);
+    };
     req.onsuccess = () => {
+      clearTimer();
       req.result.close();
       resolve(existed);
     };

stylesheets/_modules.scss

@@ -7913,6 +7913,15 @@ button.module-image__border-overlay:focus {
   z-index: $z-index-popup-overlay;
 }
 
+.module-modal-host--on-top-of-everything {
+  $loading-screen-modal-overlay: $z-index-on-top-of-everything + 1;
+
+  .module-modal-host__overlay,
+  .module-modal-host__container {
+    z-index: $loading-screen-modal-overlay;
+  }
+}
+
 // Module: GroupV2 Join Dialog
 
 .module-group-v2-join-dialog {

ts/background.ts

@@ -542,6 +542,7 @@ export async function startApp(): Promise<void> {
         try {
           await new Promise<void>((resolve, reject) => {
             window.showConfirmationDialog({
+              onTopOfEverything: true,
               cancelText: window.i18n('quit'),
               confirmStyle: 'negative',
               message: window.i18n('deleteOldIndexedDBData'),

ts/components/ConfirmationDialog.tsx

@@ -17,19 +17,20 @@ export type ActionSpec = {
   style?: 'affirmative' | 'negative';
 };
 
-export type OwnProps = {
+export type OwnProps = Readonly<{
-  readonly moduleClassName?: string;
+  moduleClassName?: string;
-  readonly actions?: Array<ActionSpec>;
+  actions?: Array<ActionSpec>;
-  readonly cancelText?: string;
+  cancelText?: string;
-  readonly children?: React.ReactNode;
+  children?: React.ReactNode;
-  readonly i18n: LocalizerType;
+  i18n: LocalizerType;
-  readonly onCancel?: () => unknown;
+  onCancel?: () => unknown;
-  readonly onClose: () => unknown;
+  onClose: () => unknown;
-  readonly title?: string | React.ReactNode;
+  title?: string | React.ReactNode;
-  readonly theme?: Theme;
+  theme?: Theme;
-  readonly hasXButton?: boolean;
+  hasXButton?: boolean;
-  readonly cancelButtonVariant?: ButtonVariant;
+  cancelButtonVariant?: ButtonVariant;
-};
+  onTopOfEverything?: boolean;
+}>;
 
 export type Props = OwnProps;
 
@@ -66,6 +67,7 @@ export const ConfirmationDialog = React.memo(
     title,
     hasXButton,
     cancelButtonVariant,
+    onTopOfEverything,
   }: Props) => {
     const { close, overlayStyles, modalStyles } = useAnimated(onClose, {
       getFrom: () => ({ opacity: 0, transform: 'scale(0.25)' }),
@@ -91,7 +93,12 @@ export const ConfirmationDialog = React.memo(
     const hasActions = Boolean(actions.length);
 
     return (
-      <ModalHost onClose={close} theme={theme} overlayStyles={overlayStyles}>
+      <ModalHost
+        onTopOfEverything={onTopOfEverything}
+        onClose={close}
+        theme={theme}
+        overlayStyles={overlayStyles}
+      >
         <animated.div style={modalStyles}>
           <ModalWindow
             hasXButton={hasXButton}

ts/components/ModalHost.tsx

@@ -6,20 +6,22 @@ import { createPortal } from 'react-dom';
 import FocusTrap from 'focus-trap-react';
 import type { SpringValues } from '@react-spring/web';
 import { animated } from '@react-spring/web';
+import classNames from 'classnames';
 
 import type { ModalConfigType } from '../hooks/useAnimated';
 import type { Theme } from '../util/theme';
 import { themeClassName } from '../util/theme';
 import { useEscapeHandling } from '../hooks/useEscapeHandling';
 
-export type PropsType = {
+export type PropsType = Readonly<{
-  readonly children: React.ReactElement;
+  children: React.ReactElement;
-  readonly noMouseClose?: boolean;
+  noMouseClose?: boolean;
-  readonly onClose: () => unknown;
+  onClose: () => unknown;
-  readonly onEscape?: () => unknown;
+  onEscape?: () => unknown;
-  readonly overlayStyles?: SpringValues<ModalConfigType>;
+  overlayStyles?: SpringValues<ModalConfigType>;
-  readonly theme?: Theme;
+  theme?: Theme;
-};
+  onTopOfEverything?: boolean;
+}>;
 
 export const ModalHost = React.memo(
   ({
@@ -29,6 +31,7 @@ export const ModalHost = React.memo(
     onEscape,
     theme,
     overlayStyles,
+    onTopOfEverything,
   }: PropsType) => {
     const [root, setRoot] = React.useState<HTMLElement | null>(null);
     const [isMouseDown, setIsMouseDown] = React.useState(false);
@@ -67,6 +70,11 @@ export const ModalHost = React.memo(
       [onClose, isMouseDown, setIsMouseDown]
     );
 
+    const className = classNames([
+      theme ? themeClassName(theme) : undefined,
+      onTopOfEverything ? 'module-modal-host--on-top-of-everything' : undefined,
+    ]);
+
     return root
       ? createPortal(
           <FocusTrap
@@ -75,7 +83,7 @@ export const ModalHost = React.memo(
               allowOutsideClick: false,
             }}
           >
-            <div className={theme ? themeClassName(theme) : undefined}>
+            <div className={className}>
               <animated.div
                 role="presentation"
                 className="module-modal-host__overlay"

ts/shims/showConfirmationDialog.tsx

@@ -9,6 +9,7 @@
 // being included in a <script /> tag.
 
 type ConfirmationDialogViewProps = {
+  onTopOfEverything?: boolean;
   cancelText?: string;
   confirmStyle?: 'affirmative' | 'negative';
   message: string;
@@ -50,6 +51,7 @@ function showConfirmationDialog(options: ConfirmationDialogViewProps) {
   window.ReactDOM.render(
     // eslint-disable-next-line react/react-in-jsx-scope, react/jsx-no-undef
     <window.Signal.Components.ConfirmationDialog
+      onTopOfEverything={options.onTopOfEverything}
       actions={[
         {
           action: () => {