(core) Polish tutorial popups

Summary:
Includes the following changes:
 *  Adds "Click to expand" hover tooltip to all images
 *  Adds support for minimize/maximize by double clicking tutorial popup header
 *  Add New menu (and all other popups) should now persist when user moves tutorial popup
 *  Preserves scrollbar position when minimizing and maximizing tutorial popup
 *  Formula cell editor (and other elements) should now be stacked under tutorial

Test Plan: Browser and manual tests.

Reviewers: jarek

Reviewed By: jarek

Differential Revision: https://phab.getgrist.com/D3864

app/client/ui/ApiKey.ts

@@ -115,8 +115,12 @@ export class ApiKey extends Disposable {
     confirmModal(
       t("Remove API Key"), t("Remove"),
       () => this._onDelete(),
-      t("You're about to delete an API key. This will cause all future requests " +
-        "using this API key to be rejected. Do you still want to delete?")
+      {
+        explanation: t(
+          "You're about to delete an API key. This will cause all future requests " +
+          "using this API key to be rejected. Do you still want to delete?"
+        ),
+      }
     );
   }
 }

app/client/ui/App.css

@@ -19,7 +19,7 @@ body {
   left: 10%;
   height: 80%;
   width: 80%;
-  z-index: 999;
+  z-index: var(--grist-modal-z-index);
 
   padding: 1rem;
 

app/client/ui/DocMenu.ts

@@ -476,7 +476,8 @@ export function makeDocOptionsMenu(home: HomeModel, doc: Document, renaming: Obs
   function deleteDoc() {
     confirmModal(t("Delete {{name}}", {name: doc.name}), t("Delete"),
       () => home.deleteDoc(doc.id, false).catch(reportError),
-      t("Document will be moved to Trash."));
+      {explanation: t("Document will be moved to Trash.")}
+    );
   }
 
   async function manageUsers() {
@@ -529,7 +530,8 @@ export function makeRemovedDocOptionsMenu(home: HomeModel, doc: Document, worksp
   function hardDeleteDoc() {
     confirmModal(t("Permanently Delete \"{{name}}\"?", {name: doc.name}), t("Delete Forever"),
       () => home.deleteDoc(doc.id, true).catch(reportError),
-      t("Document will be permanently deleted."));
+      {explanation: t("Document will be permanently deleted.")}
+    );
   }
 
   return [

app/client/ui/DocTutorial.ts

@@ -3,9 +3,9 @@ import {urlState} from 'app/client/models/gristUrlState';
 import {renderer} from 'app/client/ui/DocTutorialRenderer';
 import {cssPopupBody, FloatingPopup} from 'app/client/ui/FloatingPopup';
 import {sanitizeHTML} from 'app/client/ui/sanitizeHTML';
-import {hoverTooltip} from 'app/client/ui/tooltips';
+import {hoverTooltip, setHoverTooltip} from 'app/client/ui/tooltips';
 import {basicButton, primaryButton} from 'app/client/ui2018/buttons';
-import {mediaXSmall, theme} from 'app/client/ui2018/cssVars';
+import {mediaXSmall, theme, vars} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
 import {loadingSpinner} from 'app/client/ui2018/loaders';
 import {confirmModal, modal} from 'app/client/ui2018/modals';
@@ -25,6 +25,8 @@ interface DocTutorialSlide {
 
 const testId = makeTestId('test-doc-tutorial-');
 
+const TOOLTIP_KEY = 'docTutorialTooltip';
+
 export class DocTutorial extends FloatingPopup {
   private _appModel = this._gristDoc.docPageModel.appModel;
   private _currentDoc = this._gristDoc.docPageModel.currentDoc.get();
@@ -44,7 +46,7 @@ export class DocTutorial extends FloatingPopup {
   });
 
   constructor(private _gristDoc: GristDoc) {
-    super();
+    super({stopClickPropagationOnMove: true});
   }
 
   public async start() {
@@ -77,7 +79,7 @@ export class DocTutorial extends FloatingPopup {
 
               this._openLightbox((ev.target as HTMLImageElement).src);
             }),
-            this._restartGIFs(),
+            this._initializeImages(),
           ],
           testId('popup-body'),
         );
@@ -94,14 +96,17 @@ export class DocTutorial extends FloatingPopup {
           return [
               cssFooterButtonsLeft(
               cssPopupFooterButton(icon('Undo'),
-                hoverTooltip('Restart Tutorial', {key: 'docTutorialTooltip'}),
+                hoverTooltip('Restart Tutorial', {key: TOOLTIP_KEY}),
                 dom.on('click', () => this._restartTutorial()),
                 testId('popup-restart'),
               ),
             ),
             cssProgressBar(
               range(slides.length).map((i) => cssProgressBarDot(
-                {title: slides[i].slideTitle},
+                hoverTooltip(slides[i].slideTitle, {
+                  closeOnClick: false,
+                  key: TOOLTIP_KEY,
+                }),
                 cssProgressBarDot.cls('-current', i === slideIndex),
                 i === slideIndex ? null : dom.on('click', () => this._changeSlide(i)),
                 testId(`popup-slide-${i + 1}`),
@@ -251,11 +256,19 @@ export class DocTutorial extends FloatingPopup {
     confirmModal(
       'Do you want to restart the tutorial? All progress will be lost.',
       'Restart',
-      doRestart
+      doRestart,
+      {
+        modalOptions: {
+          backerDomArgs: [
+            // Stack modal above the tutorial popup.
+            dom.style('z-index', vars.tutorialModalZIndex.toString()),
+          ],
+        },
+      }
     );
   }
 
-  private _restartGIFs() {
+  private _initializeImages() {
     return (element: HTMLElement) => {
       setTimeout(() => {
         const imgs = element.querySelectorAll('img');
@@ -263,6 +276,16 @@ export class DocTutorial extends FloatingPopup {
           // Re-assigning src to itself is a neat way to restart a GIF.
           // eslint-disable-next-line no-self-assign
           img.src = img.src;
+
+          setHoverTooltip(img, 'Click to expand', {
+            key: TOOLTIP_KEY,
+            modifiers: {
+              flip: {
+                boundariesElement: 'scrollParent',
+              },
+            },
+            placement: 'bottom',
+          });
         }
       }, 0);
     };
@@ -281,6 +304,11 @@ export class DocTutorial extends FloatingPopup {
         dom.on('click', (ev, elem) => void (ev.target === elem ? ctl.close() : null)),
         testId('lightbox'),
       ];
+    }, {
+      backerDomArgs: [
+        // Stack modal above the tutorial popup.
+        dom.style('z-index', vars.tutorialModalZIndex.toString()),
+      ],
     });
   }
 }

app/client/ui/FloatingPopup.ts

@@ -1,5 +1,5 @@
 import {hoverTooltip} from 'app/client/ui/tooltips';
-import {isNarrowScreen, isNarrowScreenObs, theme} from 'app/client/ui2018/cssVars';
+import {isNarrowScreen, isNarrowScreenObs, theme, vars} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
 import {Disposable, dom, DomArg, DomContents, IDisposable, makeTestId, Observable, styled} from 'grainjs';
 
@@ -16,11 +16,15 @@ export interface PopupOptions {
   onClose?: () => void;
   closeButton?: boolean;
   autoHeight?: boolean;
+  /** Defaults to false. */
+  stopClickPropagationOnMove?: boolean;
 }
 
 export class FloatingPopup extends Disposable {
   protected _isMinimized = Observable.create(this, false);
+  private _isFinishingMove = false;
   private _popupElement: HTMLElement | null = null;
+  private _popupMinimizeButtonElement: HTMLElement | null = null;
 
   private _startX: number;
   private _startY: number;
@@ -33,6 +37,25 @@ export class FloatingPopup extends Disposable {
   constructor(protected _options: PopupOptions = {}, private _args: DomArg[] = []) {
     super();
 
+    if (_options.stopClickPropagationOnMove){
+      // weasel.js registers a 'click' listener that closes any open popups that
+      // are outside the click target. We capture the click event here, stopping
+      // propagation in a few scenarios where closing popups is undesirable.
+      window.addEventListener('click', (ev) => {
+        if (this._isFinishingMove) {
+          ev.stopPropagation();
+          this._isFinishingMove = false;
+          return;
+        }
+
+        if (this._popupMinimizeButtonElement?.contains(ev.target as Node)) {
+          ev.stopPropagation();
+          this._minimizeOrMaximize();
+          return;
+        }
+      }, {capture: true});
+    }
+
     this._handleMouseDown = this._handleMouseDown.bind(this);
     this._handleMouseMove = this._handleMouseMove.bind(this);
     this._handleMouseUp = this._handleMouseUp.bind(this);
@@ -181,6 +204,7 @@ export class FloatingPopup extends Disposable {
   }
 
   private _handleMouseUp() {
+    this._isFinishingMove = true;
     document.removeEventListener('mousemove', this._handleMouseMove);
     document.removeEventListener('mouseup', this._handleMouseUp);
     document.body.removeEventListener('mouseleave', this._handleMouseUp);
@@ -221,6 +245,11 @@ export class FloatingPopup extends Disposable {
     this._popupElement!.style.top = `${newTop}px`;
   }
 
+  private _minimizeOrMaximize() {
+    this._isMinimized.set(!this._isMinimized.get());
+    this._repositionPopup();
+  }
+
   private _buildPopup() {
     const body = cssPopup(
       {tabIndex: '-1'},
@@ -231,7 +260,8 @@ export class FloatingPopup extends Disposable {
           return cssResizeTopLayer(
             cssTopHandle(testId('resize-handle')),
             dom.on('mousedown', () => this._resize = true),
-            dom.on('dblclick', () => {
+            dom.on('dblclick', (e) => {
+              e.stopImmediatePropagation();
               this._popupElement?.style.setProperty('--height', `${POPUP_MAX_HEIGHT}px`);
               this._repositionPopup();
             })
@@ -262,23 +292,27 @@ export class FloatingPopup extends Disposable {
                 }),
                 testId('close'),
               ),
-              cssPopupHeaderButton(
+              this._popupMinimizeButtonElement = cssPopupHeaderButton(
                 isMinimized ? icon('Maximize'): icon('Minimize'),
                 hoverTooltip(isMinimized ? 'Maximize' : 'Minimize', {key: 'docTutorialTooltip'}),
-                dom.on('click', () => {
-                  this._isMinimized.set(!this._isMinimized.get());
-                  this._repositionPopup();
-                }),
+                dom.on('click', () => this._minimizeOrMaximize()),
                 testId('minimize-maximize'),
               ),
+              // Disable dragging when a button in the header is clicked.
+              dom.on('mousedown', ev => ev.stopPropagation()),
+              dom.on('touchstart', ev => ev.stopPropagation()),
             )
           ];
         }),
         dom.on('mousedown', this._handleMouseDown),
         dom.on('touchstart', this._handleTouchStart),
+        dom.on('dblclick', () => this._minimizeOrMaximize()),
         testId('header'),
       ),
-      dom.maybe(use => !use(this._isMinimized), () => this._buildContent()),
+      cssPopupContent(
+        this._buildContent(),
+        cssPopupContent.cls('-minimized', this._isMinimized),
+      ),
       () => { window.addEventListener('resize', this._handleWindowResize); },
       dom.onDispose(() => {
         document.removeEventListener('mousemove', this._handleMouseMove);
@@ -344,7 +378,7 @@ const cssPopup = styled('div', `
   flex-direction: column;
   border: 2px solid ${theme.accentBorder};
   border-radius: 5px;
-  z-index: 999;
+  z-index: ${vars.floatingPopupZIndex};
   --height: ${POPUP_MAX_HEIGHT}px;
   height: ${POPUP_HEIGHT};
   width: ${POPUP_WIDTH};
@@ -441,10 +475,10 @@ const cssPopupHeaderButton = styled('div', `
 
 const cssResizeTopLayer = styled('div', `
   position: absolute;
-  top: 0;
+  top: -6px;
   left: 0;
   right: 0;
-  bottom: 70%;
+  bottom: 28px;
   z-index: 500;
   cursor: ns-resize;
 `);
@@ -465,3 +499,14 @@ const cssBottomHandle = styled(cssTopHandle, `
   bottom: 0;
   left: 0;
 `);
+
+const cssPopupContent = styled('div', `
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  overflow: hidden;
+
+  &-minimized {
+    display: none;
+  }
+`);

app/client/ui/HomeLeftPane.ts

@@ -217,7 +217,7 @@ function workspaceMenu(home: HomeModel, ws: Workspace, renaming: Observable<Work
   function deleteWorkspace() {
     confirmModal(t("Delete {{workspace}} and all included documents?", {workspace: ws.name}), t("Delete"),
       () => home.deleteWorkspace(ws.id, false),
-      t("Workspace will be moved to Trash."));
+      {explanation: t("Workspace will be moved to Trash.")});
   }
 
   async function manageWorkspaceUsers() {

app/client/ui/MakeCopyMenu.ts

@@ -59,7 +59,7 @@ export async function replaceTrunkWithFork(user: FullUser|null, doc: Document, a
       } catch (e) {
         reportError(e);  // For example: no write access on trunk.
       }
-    },  warningText);
+    }, {explanation: warningText});
 }
 
 // Show message in a modal with a `Sign up` button that redirects to the login page.

app/client/ui/NotifyUI.ts

@@ -258,13 +258,13 @@ const cssDropdownStatusText = styled('div', `
   color: ${theme.lightText};
 `);
 
-// z-index below is set above other assorted children of <body> which include z-index such as 999
-// and 1050 (for new-style and old-style modals, for example).
+// z-index below is set above other assorted children of <body>, which includes
+// indexes such as 999 for modals.
 const cssSnackbarWrapper = styled('div', `
   position: fixed;
   bottom: 8px;
   right: 8px;
-  z-index: 1100;
+  z-index: ${vars.notificationZIndex};
 
   display: flex;
   flex-direction: column;

app/client/ui/OnBoardingPopups.ts

@@ -326,7 +326,7 @@ const Container = styled('div', `
   align-self: center;
   border: 2px solid ${theme.accentBorder};
   border-radius: 3px;
-  z-index: 1000;
+  z-index: ${vars.onboardingPopupZIndex};
   max-width: 490px;
   position: relative;
   background-color: ${theme.popupBg};
@@ -423,7 +423,7 @@ const Overlay = styled('div', `
   height: 100%;
   top: 0;
   left: 0;
-  z-index: 999;
+  z-index: ${vars.onboardingBackdropZIndex};
   overflow-y: auto;
 `);
 

app/client/ui/UserManager.ts

@@ -105,9 +105,14 @@ export function showUserManagerModal(userApi: UserAPI, options: IUserManagerOpti
       confirmModal(
         `You are about to remove your own access to this ${name}`,
         'Remove my access', tryToSaveChanges,
-        'Once you have removed your own access, ' +
-          'you will not be able to get it back without assistance ' +
-          `from someone else with sufficient access to the ${name}.`);
+        {
+          explanation: (
+            'Once you have removed your own access, ' +
+            'you will not be able to get it back without assistance ' +
+            `from someone else with sufficient access to the ${name}.`
+          ),
+        }
+      );
     } else {
       tryToSaveChanges().catch(reportError);
     }

app/client/ui/tooltips.ts

@@ -404,7 +404,7 @@ const cssColumnInfoTooltipButton = styled('div', `
 
 const cssTooltip = styled('div', `
   position: absolute;
-  z-index: 5000;      /* should be higher than a modal */
+  z-index: ${vars.tooltipZIndex};      /* should be higher than a modal */
   background-color: ${theme.tooltipBg};
   border-radius: 3px;
   box-shadow: 0 0 2px rgba(0,0,0,0.5);