From f597f15faf73939aa7f5f16688e6edb20adaadf8 Mon Sep 17 00:00:00 2001
From: Scott Nonnenberg <scott@signal.org>
Date: Fri, 4 Aug 2023 09:25:52 -0700
Subject: [PATCH] Formatting menu: Show popup guide faster, fade in/out

---
 stylesheets/components/CompositionInput.scss |  3 +
 ts/quill/formatting/menu.tsx                 | 77 +++++++++++++-------
 ts/util/lint/exceptions.json                 | 20 +++--
 3 files changed, 66 insertions(+), 34 deletions(-)

diff --git a/stylesheets/components/CompositionInput.scss b/stylesheets/components/CompositionInput.scss
index e1c6fc9fec74..ac427c4992ad 100644
--- a/stylesheets/components/CompositionInput.scss
+++ b/stylesheets/components/CompositionInput.scss
@@ -194,6 +194,9 @@
         border-radius: 4px;
         margin-bottom: 8px;
 
+        opacity: 0;
+        transition: opacity 120ms ease-out;
+
         @include light-theme {
           background-color: $color-black;
           color: $color-gray-05;
diff --git a/ts/quill/formatting/menu.tsx b/ts/quill/formatting/menu.tsx
index c6b8adfa2e41..d7d5bc1512a6 100644
--- a/ts/quill/formatting/menu.tsx
+++ b/ts/quill/formatting/menu.tsx
@@ -15,10 +15,10 @@ import * as log from '../../logging/log';
 import * as Errors from '../../types/errors';
 import type { LocalizerType } from '../../types/Util';
 import { handleOutsideClick } from '../../util/handleOutsideClick';
-import { SECOND } from '../../util/durations/constants';
 
-const FADE_OUT_MS = 200;
-const BUTTON_HOVER_TIMEOUT = 2 * SECOND;
+const MENU_FADE_OUT_MS = 200;
+const POPUP_GUIDE_FADE_MS = 120;
+const BUTTON_HOVER_TIMEOUT_MS = 900;
 const MENU_TEXT_BUFFER = 12; // pixels
 
 // Note: Keyboard shortcuts are defined in the constructor below, and when using
@@ -160,7 +160,7 @@ export class FormattingMenu {
       this.lastRect = undefined;
       this.fadingOutTimeout = undefined;
       this.render();
-    }, FADE_OUT_MS);
+    }, MENU_FADE_OUT_MS);
 
     this.render();
   }
@@ -452,34 +452,47 @@ function FormattingButton({
   toggleForStyle: (style: QuillFormattingStyle) => unknown;
 }): JSX.Element {
   const buttonRef = React.useRef<HTMLButtonElement | null>(null);
-  const timerRef = React.useRef<NodeJS.Timeout | undefined>();
+
   const [isHovered, setIsHovered] = React.useState<boolean>(false);
+  const hoverTimerRef = React.useRef<NodeJS.Timeout | undefined>();
+
+  const [isFadingOut, setIsFadingOut] = React.useState<boolean>(false);
+  const fadeOutTimerRef = React.useRef<NodeJS.Timeout | undefined>();
 
   React.useEffect(() => {
     return () => {
-      if (timerRef.current) {
-        clearTimeout(timerRef.current);
-        timerRef.current = undefined;
+      if (hoverTimerRef.current) {
+        clearTimeout(hoverTimerRef.current);
+        hoverTimerRef.current = undefined;
+      }
+
+      if (fadeOutTimerRef.current) {
+        clearTimeout(fadeOutTimerRef.current);
+        fadeOutTimerRef.current = undefined;
       }
     };
   }, []);
 
   return (
     <>
-      {hasLongHovered && isHovered && buttonRef.current ? (
+      {(isFadingOut || (hasLongHovered && isHovered)) && buttonRef.current ? (
         <Popper placement="top" referenceElement={buttonRef.current}>
-          {({ ref, style: popperStyles }) => (
-            <div
-              className="module-composition-input__format-menu__item__popover"
-              ref={ref}
-              style={popperStyles}
-            >
-              {popupGuideText}
-              <div className="module-composition-input__format-menu__item__popover__shortcut">
-                {popupGuideShortcut}
+          {({ ref, style: popperStyles }) => {
+            const opacity = !popperStyles.transform || isFadingOut ? 0 : 1;
+
+            return (
+              <div
+                className="module-composition-input__format-menu__item__popover"
+                ref={ref}
+                style={{ ...popperStyles, opacity }}
+              >
+                {popupGuideText}
+                <div className="module-composition-input__format-menu__item__popover__shortcut">
+                  {popupGuideShortcut}
+                </div>
               </div>
-            </div>
-          )}
+            );
+          }}
         </Popper>
       ) : null}
       <button
@@ -499,21 +512,29 @@ function FormattingButton({
           toggleForStyle(style);
         }}
         onMouseEnter={() => {
-          if (timerRef.current) {
-            clearTimeout(timerRef.current);
-            timerRef.current = undefined;
+          if (hoverTimerRef.current) {
+            clearTimeout(hoverTimerRef.current);
+            hoverTimerRef.current = undefined;
           }
 
-          timerRef.current = setTimeout(() => {
+          hoverTimerRef.current = setTimeout(() => {
             onLongHover(true);
-          }, BUTTON_HOVER_TIMEOUT);
+          }, BUTTON_HOVER_TIMEOUT_MS);
 
           setIsHovered(true);
         }}
         onMouseLeave={() => {
-          if (timerRef.current) {
-            clearTimeout(timerRef.current);
-            timerRef.current = undefined;
+          if (hoverTimerRef.current) {
+            clearTimeout(hoverTimerRef.current);
+            hoverTimerRef.current = undefined;
+          }
+
+          if (hasLongHovered && isHovered) {
+            fadeOutTimerRef.current = setTimeout(() => {
+              setIsFadingOut(false);
+              fadeOutTimerRef.current = undefined;
+            }, POPUP_GUIDE_FADE_MS);
+            setIsFadingOut(true);
           }
 
           setIsHovered(false);
diff --git a/ts/util/lint/exceptions.json b/ts/util/lint/exceptions.json
index 7b2552b3d18a..99f5d0194011 100644
--- a/ts/util/lint/exceptions.json
+++ b/ts/util/lint/exceptions.json
@@ -2861,18 +2861,26 @@
   {
     "rule": "React-useRef",
     "path": "ts/quill/formatting/menu.tsx",
-    "line": "  const buttonRef = React.useRef<HTMLButtonElement | null>(null);",
-    "reasonCategory": "usageTrusted",
-    "updated": "2023-04-22T00:07:56.294Z",
-    "reasonDetail": "Popper needs to reference the button"
+    "line": "  const fadeOutTimerRef = React.useRef<NodeJS.Timeout | undefined>();",
+    "reasonCategory": "falseMatch|testCode|exampleCode|otherUtilityCode|regexMatchedSafeCode|notExercisedByOurApp|ruleNeeded|usageTrusted",
+    "updated": "2023-08-02T19:01:24.771Z",
+    "reasonDetail": "We need a persistent timer to know when to remove after fade-out"
   },
   {
     "rule": "React-useRef",
     "path": "ts/quill/formatting/menu.tsx",
-    "line": "  const timerRef = React.useRef<NodeJS.Timeout | undefined>();",
+    "line": "  const hoverTimerRef = React.useRef<NodeJS.Timeout | undefined>();",
+    "reasonCategory": "falseMatch|testCode|exampleCode|otherUtilityCode|regexMatchedSafeCode|notExercisedByOurApp|ruleNeeded|usageTrusted",
+    "updated": "2023-08-02T19:01:24.771Z",
+    "reasonDetail": "We need a persistent timer to track long-hovers"
+  },
+  {
+    "rule": "React-useRef",
+    "path": "ts/quill/formatting/menu.tsx",
+    "line": "  const buttonRef = React.useRef<HTMLButtonElement | null>(null);",
     "reasonCategory": "usageTrusted",
     "updated": "2023-04-22T00:07:56.294Z",
-    "reasonDetail": "We need a persistent timer to track long-hovers"
+    "reasonDetail": "Popper needs to reference the button"
   },
   {
     "rule": "DOM-innerHTML",