From 0ba12d4dd5d0aca8635c2703b197ef8182dc97ba Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Tue, 6 Feb 2024 16:49:28 +0100
Subject: [PATCH] Drop Waterfox Classic support (#4237)

---
 public/compatTest.js                          | 10 ++++++-
 src/components/common/Composer.scss           |  5 +---
 src/components/main/Main.scss                 |  6 ----
 src/components/mediaViewer/MediaViewer.scss   | 29 -------------------
 .../middle/FloatingActionButtons.module.scss  | 12 --------
 src/components/middle/MessageList.scss        | 10 ++-----
 .../middle/MessageSelectToolbar.scss          |  4 +--
 src/components/middle/MiddleColumn.scss       | 14 +++------
 src/components/middle/MiddleHeader.scss       | 11 -------
 src/components/middle/MobileSearch.scss       | 23 ++-------------
 .../composer/AttachmentModal.module.scss      |  8 ++---
 .../middle/composer/SymbolMenu.scss           | 24 +--------------
 src/components/right/RightColumn.scss         |  5 ----
 src/components/story/StoryFooter.module.scss  |  4 +--
 .../story/StorySettings.module.scss           |  6 +---
 .../story/StoryViewModal.module.scss          |  5 +---
 src/components/story/StoryViewer.module.scss  | 22 +++-----------
 src/index.html                                |  2 +-
 src/styles/_mixins.scss                       |  6 ----
 19 files changed, 31 insertions(+), 175 deletions(-)

diff --git a/public/compatTest.js b/public/compatTest.js
index 05b80d10f..2b4ea2ad4 100644
--- a/public/compatTest.js
+++ b/public/compatTest.js
@@ -3,8 +3,13 @@ function compatTest() {
   var hasWebSockets = typeof WebSocket !== 'undefined';
   var hasWebCrypto = window.crypto && typeof window.crypto.subtle !== 'undefined';
   var hasObjectFromEntries = typeof Object.fromEntries !== 'undefined';
+  var hasResizeObserver = typeof window.ResizeObserver !== 'undefined';
+  var hasCssSupports = window.CSS && typeof window.CSS.supports === 'function';
+  var hasIntl = typeof window.Intl !== 'undefined';
+  var hasDisplayNames = hasIntl && typeof Intl.DisplayNames !== 'undefined';
 
-  var isCompatible = hasPromise && hasWebSockets && hasWebCrypto && hasObjectFromEntries;
+  var isCompatible = hasPromise && hasWebSockets && hasWebCrypto && hasObjectFromEntries && hasResizeObserver
+    && hasCssSupports && hasDisplayNames;
 
   if (isCompatible || (window.localStorage && window.localStorage.getItem('tt-ignore-compat'))) {
     window.isCompatTestPassed = true;
@@ -17,6 +22,9 @@ function compatTest() {
     console.warn('WebSocket', hasWebSockets);
     console.warn('WebCrypto', hasWebCrypto);
     console.warn('Object.fromEntries', hasObjectFromEntries);
+    console.warn('ResizeObserver', hasResizeObserver);
+    console.warn('CSS.supports', hasCssSupports);
+    console.warn('Intl.DisplayNames', hasDisplayNames);
   }
 
   document.body.innerHTML = '<iframe src="./unsupported.html" width="100%" height="100%">';
diff --git a/src/components/common/Composer.scss b/src/components/common/Composer.scss
index 153f73a49..c3488b396 100644
--- a/src/components/common/Composer.scss
+++ b/src/components/common/Composer.scss
@@ -10,10 +10,7 @@
 
     @media (max-width: 600px) {
       padding-right: 1rem;
-
-      @supports (bottom: env(safe-area-inset-bottom)) {
-        bottom: env(safe-area-inset-bottom);
-      }
+      bottom: env(safe-area-inset-bottom);
     }
 
     &::before {
diff --git a/src/components/main/Main.scss b/src/components/main/Main.scss
index 4e605292d..2751945df 100644
--- a/src/components/main/Main.scss
+++ b/src/components/main/Main.scss
@@ -118,12 +118,6 @@
     left: env(safe-area-inset-left) !important;
     width: calc(100vw - env(safe-area-inset-left)) !important;
 
-    // Target: Old Firefox (Waterfox Classic)
-    @supports not (left: env(safe-area-inset-left)) {
-      left: 0 !important;
-      width: 100vw !important;
-    }
-
     // Fix: when opening the SymbolMenu, the chat list flashes in the background
     body.is-symbol-menu-open &::before {
       content: '';
diff --git a/src/components/mediaViewer/MediaViewer.scss b/src/components/mediaViewer/MediaViewer.scss
index 47e2d3fd5..0855dea70 100644
--- a/src/components/mediaViewer/MediaViewer.scss
+++ b/src/components/mediaViewer/MediaViewer.scss
@@ -89,15 +89,6 @@
       }
     }
 
-    // Target: Old Firefox (Waterfox Classic)
-    @supports not (padding: 0.5rem max(1.25rem, env(safe-area-inset-left))) {
-      padding: 0.5rem 1.25rem;
-
-      @media (max-width: 600px) {
-        padding: 0.5rem;
-      }
-    }
-
     body.is-electron.is-macos & {
       -webkit-app-region: drag;
     }
@@ -161,16 +152,6 @@
         right: env(safe-area-inset-right);
         transform: scaleX(-1);
       }
-
-      // Target: Old Firefox (Waterfox Classic)
-      @supports not (left: env(safe-area-inset-left)) {
-        left: 0;
-
-        &[dir="rtl"] {
-          left: auto;
-          right: 0;
-        }
-      }
     }
 
     &.next {
@@ -183,16 +164,6 @@
         left: env(safe-area-inset-left);
         transform: scaleX(-1);
       }
-
-      // Target: Old Firefox (Waterfox Classic)
-      @supports not (right: env(safe-area-inset-right)) {
-        right: 0;
-
-        &[dir="rtl"] {
-          right: auto;
-          left: 0;
-        }
-      }
     }
 
     &.inline {
diff --git a/src/components/middle/FloatingActionButtons.module.scss b/src/components/middle/FloatingActionButtons.module.scss
index 773728cfa..b0d09daf7 100644
--- a/src/components/middle/FloatingActionButtons.module.scss
+++ b/src/components/middle/FloatingActionButtons.module.scss
@@ -42,18 +42,6 @@
     }
   }
 
-  // Target: Old Firefox (Waterfox Classic)
-  @supports not (right: max(1rem, env(safe-area-inset-right))) {
-    right: 1rem;
-    @media (max-width: 600px) {
-      right: 0.5rem;
-
-      :global(body:not(.keyboard-visible)) & {
-        bottom: 4.5rem;
-      }
-    }
-  }
-
   &.revealed {
     transform: translateY(0);
     opacity: 1;
diff --git a/src/components/middle/MessageList.scss b/src/components/middle/MessageList.scss
index dc15f86dd..4abdc02df 100644
--- a/src/components/middle/MessageList.scss
+++ b/src/components/middle/MessageList.scss
@@ -32,9 +32,7 @@
     bottom: 0;
 
     @media (max-width: 600px) {
-      @supports (bottom: calc(0px - env(safe-area-inset-bottom))) {
-        bottom: calc(0px - env(safe-area-inset-bottom));
-      }
+      bottom: calc(0px - env(safe-area-inset-bottom));
     }
 
     body.keyboard-visible.no-page-transitions & {
@@ -101,10 +99,8 @@
       .last-in-list {
         margin-bottom: 4.25rem;
 
-        @supports (margin-bottom: calc(4.25rem + env(safe-area-inset-bottom))) {
-          body:not(.keyboard-visible) & {
-            margin-bottom: calc(4.25rem + env(safe-area-inset-bottom));
-          }
+        body:not(.keyboard-visible) & {
+          margin-bottom: calc(4.25rem + env(safe-area-inset-bottom));
         }
       }
     }
diff --git a/src/components/middle/MessageSelectToolbar.scss b/src/components/middle/MessageSelectToolbar.scss
index 1639ee0cd..2bbe06cb8 100644
--- a/src/components/middle/MessageSelectToolbar.scss
+++ b/src/components/middle/MessageSelectToolbar.scss
@@ -9,9 +9,7 @@
   margin: 0;
 
   @media (max-width: 600px) {
-    @supports (bottom: calc(0.5rem + env(safe-area-inset-bottom))) {
-      bottom: calc(0.5rem + env(safe-area-inset-bottom));
-    }
+    bottom: calc(0.5rem + env(safe-area-inset-bottom));
   }
 
   .mask-image-disabled &::before {
diff --git a/src/components/middle/MiddleColumn.scss b/src/components/middle/MiddleColumn.scss
index 4fea37fa4..691231142 100644
--- a/src/components/middle/MiddleColumn.scss
+++ b/src/components/middle/MiddleColumn.scss
@@ -192,12 +192,10 @@
       top: 0;
 
       @media (max-width: 600px) {
-        @supports (padding-bottom: env(safe-area-inset-bottom)) {
-          padding-bottom: env(safe-area-inset-bottom);
+        padding-bottom: env(safe-area-inset-bottom);
 
-          body.keyboard-visible & {
-            top: env(safe-area-inset-bottom);
-          }
+        body.keyboard-visible & {
+          top: env(safe-area-inset-bottom);
         }
       }
     }
@@ -325,12 +323,8 @@
   }
 
   @media (max-width: 600px) {
-    padding-bottom: 0.75rem;
     margin-left: -0.5rem;
-
-    @supports (padding-bottom: calc(0.75rem + env(safe-area-inset-bottom))) {
-      padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
-    }
+    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
   }
 
   .mask-image-disabled &::before {
diff --git a/src/components/middle/MiddleHeader.scss b/src/components/middle/MiddleHeader.scss
index 0e1426ec0..3b25346c8 100644
--- a/src/components/middle/MiddleHeader.scss
+++ b/src/components/middle/MiddleHeader.scss
@@ -45,17 +45,6 @@
     padding-right: max(0.5rem, env(safe-area-inset-right));
   }
 
-  // Target: Old Firefox (Waterfox Classic)
-  @supports not (padding-left: max(1.5rem, env(safe-area-inset-left))) {
-    padding-left: 1.5rem;
-    padding-right: 0.8125rem;
-
-    @media (max-width: 600px) {
-      padding-left: 0.5rem;
-      padding-right: 0.5rem;
-    }
-  }
-
   .Transition {
     width: 100%;
     // https://dfmcphee.com/flex-items-and-min-width-0/
diff --git a/src/components/middle/MobileSearch.scss b/src/components/middle/MobileSearch.scss
index 75d8b5d6a..68866bedc 100644
--- a/src/components/middle/MobileSearch.scss
+++ b/src/components/middle/MobileSearch.scss
@@ -15,12 +15,6 @@
     margin-left: 0.25rem;
     flex: 1;
   }
-
-  // Target: Old Firefox (Waterfox Classic)
-  @supports not (padding-left: max(0.25rem, env(safe-area-inset-left))) {
-    padding-left: 0.25rem;
-    padding-right: 0.5rem;
-  }
 }
 
 #MobileSearch > .footer {
@@ -42,22 +36,9 @@
   }
 
   @media (max-width: 600px) {
-    @supports (padding-bottom: env(safe-area-inset-bottom)) {
-      body:not(.keyboard-visible) & {
-        padding-bottom: env(safe-area-inset-bottom);
-        height: calc(3.5rem + env(safe-area-inset-bottom));
-      }
-    }
-  }
-
-  // Target: Old Firefox (Waterfox Classic)
-  @supports not (padding-left: max(1rem, env(safe-area-inset-left))) {
-    padding-left: 1rem;
-    padding-right: 0.5rem;
-
     body:not(.keyboard-visible) & {
-      padding-bottom: 0;
-      height: 3.5rem;
+      padding-bottom: env(safe-area-inset-bottom);
+      height: calc(3.5rem + env(safe-area-inset-bottom));
     }
   }
 
diff --git a/src/components/middle/composer/AttachmentModal.module.scss b/src/components/middle/composer/AttachmentModal.module.scss
index 75efbf68e..e9961c29e 100644
--- a/src/components/middle/composer/AttachmentModal.module.scss
+++ b/src/components/middle/composer/AttachmentModal.module.scss
@@ -27,9 +27,7 @@
       overflow-x: auto;
 
       @media (max-width: 600px) {
-        @supports (padding-bottom: env(safe-area-inset-bottom)) {
-          padding-bottom: env(safe-area-inset-bottom);
-        }
+        padding-bottom: env(safe-area-inset-bottom);
       }
     }
 
@@ -81,9 +79,7 @@
     transform: translate3d(0, calc((var(--symbol-menu-height)) * -1), 0);
 
     @media (max-width: 600px) {
-      @supports (bottom: env(safe-area-inset-bottom)) {
-        transform: translate3d(0, calc((var(--symbol-menu-height) - env(safe-area-inset-bottom)) * -1), 0);
-      }
+      transform: translate3d(0, calc((var(--symbol-menu-height) - env(safe-area-inset-bottom)) * -1), 0);
     }
   }
 
diff --git a/src/components/middle/composer/SymbolMenu.scss b/src/components/middle/composer/SymbolMenu.scss
index 37f492820..215217b82 100644
--- a/src/components/middle/composer/SymbolMenu.scss
+++ b/src/components/middle/composer/SymbolMenu.scss
@@ -33,20 +33,6 @@
       transform: translate3d(0, calc(var(--symbol-menu-height)), 0);
     }
 
-    // Target: Old Firefox (Waterfox Classic)
-    @supports not (padding-right: env(safe-area-inset-right)) {
-      padding-right: 0;
-      padding-left: 0;
-      transform: translate3d(0, calc(var(--symbol-menu-height)), 0);
-    }
-
-    @media (max-width: 600px) {
-      @supports not (padding-right: env(safe-area-inset-right)) {
-        padding-bottom: env(safe-area-inset-bottom);
-        transform: translate3d(0, calc(var(--symbol-menu-height) + env(safe-area-inset-bottom)), 0);
-      }
-    }
-
     body.no-page-transitions & {
       transition: none;
     }
@@ -61,9 +47,7 @@
     max-height: calc(100vh - var(--symbol-menu-footer-height));
 
     @media (max-width: 600px) {
-      @supports (max-height: calc(100vh - var(--symbol-menu-footer-height) - env(safe-area-inset-bottom))) {
-        max-height: calc(100vh - var(--symbol-menu-footer-height) - env(safe-area-inset-bottom));
-      }
+      max-height: calc(100vh - var(--symbol-menu-footer-height) - env(safe-area-inset-bottom));
     }
   }
 
@@ -181,12 +165,6 @@
     position: absolute;
     right: max(0.25rem, env(safe-area-inset-right));
     top: max(0.25rem, env(safe-area-inset-top));
-
-    // Target: Old Firefox (Waterfox Classic)
-    @supports not (right: max(0.25rem, env(safe-area-inset-right))) {
-      right: 0.25rem;
-      top: 0.25rem;
-    }
   }
 
   @media (orientation: landscape) {
diff --git a/src/components/right/RightColumn.scss b/src/components/right/RightColumn.scss
index 10a454baf..78cb89386 100644
--- a/src/components/right/RightColumn.scss
+++ b/src/components/right/RightColumn.scss
@@ -12,11 +12,6 @@
 
   transition: transform var(--layer-transition);
 
-  // Target: Old Firefox (Waterfox Classic)
-  @supports not (padding-right: env(safe-area-inset-right)) {
-    padding-right: 0;
-  }
-
   body.no-page-transitions &,
   body.no-right-column-animations & {
     transition: none !important;
diff --git a/src/components/story/StoryFooter.module.scss b/src/components/story/StoryFooter.module.scss
index fefe64a3e..5646dc1bd 100644
--- a/src/components/story/StoryFooter.module.scss
+++ b/src/components/story/StoryFooter.module.scss
@@ -12,9 +12,7 @@
     padding: 0 0.5rem 0.5rem;
   }
 
-  @supports (margin-bottom: env(safe-area-inset-bottom)) {
-    margin-bottom: env(safe-area-inset-bottom);
-  }
+  margin-bottom: env(safe-area-inset-bottom);
 }
 
 .viewInfo {
diff --git a/src/components/story/StorySettings.module.scss b/src/components/story/StorySettings.module.scss
index e1eb08681..731de88d3 100644
--- a/src/components/story/StorySettings.module.scss
+++ b/src/components/story/StorySettings.module.scss
@@ -8,11 +8,7 @@
   flex-direction: column;
   overflow: hidden;
   color: var(--color-text);
-  height: 38rem;
-
-  @supports (height: min(38rem, 90vh)) {
-    height: min(38rem, 90vh);
-  }
+  height: min(38rem, 90vh);
 }
 
 .header {
diff --git a/src/components/story/StoryViewModal.module.scss b/src/components/story/StoryViewModal.module.scss
index 002c4e43f..57a3f311e 100644
--- a/src/components/story/StoryViewModal.module.scss
+++ b/src/components/story/StoryViewModal.module.scss
@@ -3,10 +3,7 @@
   flex-direction: column;
   padding-bottom: 0 !important;
 
-  height: 35rem;
-  @supports (height: min(80vh, 35rem)) {
-    height: min(80vh, 35rem);
-  }
+  height: min(35rem, 80vh);
 }
 
 .views-list-loading {
diff --git a/src/components/story/StoryViewer.module.scss b/src/components/story/StoryViewer.module.scss
index e307026c8..be7a6613d 100644
--- a/src/components/story/StoryViewer.module.scss
+++ b/src/components/story/StoryViewer.module.scss
@@ -237,10 +237,7 @@
     width: calc(100% - 1rem) !important;
     height: auto !important;
     margin: 0.5rem;
-    bottom: 3.5rem;
-    @supports (bottom: calc(3.5rem + env(safe-area-inset-bottom))) {
-      bottom: calc(3.5rem + env(safe-area-inset-bottom));
-    }
+    bottom: calc(3.5rem + env(safe-area-inset-bottom));
   }
 
   :global(body.ghost-animating) & {
@@ -522,20 +519,16 @@
 
 .caption {
   position: absolute;
-  bottom: 5rem;
   left: 0;
   width: 100%;
   top: 4rem;
+  bottom: calc(4.25rem + env(safe-area-inset-bottom));
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   border-radius: 0 0 var(--border-radius-default-small) var(--border-radius-default-small);
   overflow: hidden;
   pointer-events: none;
-
-  @supports (bottom: env(safe-area-inset-bottom)) {
-    bottom: calc(4.25rem + env(safe-area-inset-bottom));
-  }
 }
 
 .captionInner {
@@ -628,10 +621,7 @@
 
     @media (max-width: 600px) {
       padding: 0 0.5rem 0.5rem;
-
-      @supports (margin-bottom: env(safe-area-inset-bottom)) {
-        margin-bottom: env(safe-area-inset-bottom);
-      }
+      margin-bottom: env(safe-area-inset-bottom);
     }
   }
 
@@ -694,11 +684,7 @@
 
 .modal :global(.modal-content) {
   padding: 0.5rem !important;
-  max-height: 35rem;
-
-  @supports (max-height: min(80vh, 35rem)) {
-    max-height: min(80vh, 35rem);
-  }
+  max-height: min(35rem, 80vh);
 }
 
 .thumbnail {
diff --git a/src/index.html b/src/index.html
index ca3eaec3f..b27fef498 100644
--- a/src/index.html
+++ b/src/index.html
@@ -50,7 +50,6 @@
   <link rel="alternate icon" href="./favicon.ico" type="image/x-icon">
   <link rel="manifest" id="the-manifest-placeholder" href="./<%= htmlWebpackPlugin.options.manifest %>">
 
-  <script src="./compatTest.js"></script>
   <script src="./redirect.js"></script>
 </head>
 
@@ -61,6 +60,7 @@
     <p>Please, enable JavaScript to open the app.</p>
   </noscript>
   <div id="portals"></div>
+  <script src="./compatTest.js"></script>
 </body>
 
 </html>
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
index 7bfcfcdaa..4abcfbe46 100644
--- a/src/styles/_mixins.scss
+++ b/src/styles/_mixins.scss
@@ -109,12 +109,6 @@
   padding-right: max(0.5rem, env(safe-area-inset-right));
   background: var(--color-background);
 
-  // Target: Old Firefox (Waterfox Classic)
-  @supports not (padding-left: max(0.75rem, env(safe-area-inset-left))) {
-    padding-left: 0.75rem;
-    padding-right: 0.5rem;
-  }
-
   &::before {
     content: "";
     display: block;