(core) Adding links to description tooltips

Summary: Column and widget descriptions now support links in text.

Test Plan: Updated

Reviewers: georgegevoian

Reviewed By: georgegevoian

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

app/client/components/Banner.ts

@@ -68,6 +68,7 @@ export class Banner extends Disposable {
       cssBanner.cls(`-${this._options.style}`),
       this._buildContent(),
       this._buildButtons(),
+      testId('element')
     );
   }
 

app/client/components/DetailView.js

@@ -266,7 +266,7 @@ DetailView.prototype.buildFieldDom = function(field, row) {
       kd.cssClass(function() { return 'detail_theme_field_' + self.viewSection.themeDef(); }),
       dom('div.g_record_detail_label_container',
         dom('div.g_record_detail_label', kd.text(field.label)),
-        kd.scope(field.description, desc => desc ? descriptionInfoTooltip(kd.text(field.description), "colmun") : null)
+        kd.scope(field.description, desc => desc ? descriptionInfoTooltip(desc, "colmun") : null)
       ),
       dom('div.g_record_detail_value'),
     );
@@ -299,7 +299,7 @@ DetailView.prototype.buildFieldDom = function(field, row) {
     kd.cssClass(function() { return 'detail_theme_field_' + self.viewSection.themeDef(); }),
     dom('div.g_record_detail_label_container',
       dom('div.g_record_detail_label', kd.text(field.displayLabel)),
-      kd.scope(field.description, desc => desc ? descriptionInfoTooltip(kd.text(field.description), "column") : null)
+      kd.scope(field.description, desc => desc ? descriptionInfoTooltip(desc, "column") : null)
     ),
     dom('div.g_record_detail_value',
       kd.toggleClass('scissors', isCopyActive),

app/client/components/GridView.js

@@ -1105,7 +1105,7 @@ GridView.prototype.buildDom = function() {
                   if (btn) { btn.click(); }
                 }),
                 dom('div.g-column-label',
-                  kd.scope(field.description, desc => desc ? descriptionInfoTooltip(kd.text(field.description), "column") : null),
+                  kd.scope(field.description, desc => desc ? descriptionInfoTooltip(desc, "column") : null),
                   dom.on('mousedown', ev => isEditingLabel() ? ev.stopPropagation() : true),
                   // We are using editableLabel here, but we don't use it for editing.
                   kf.editableLabel(self.isPreview ? field.label : field.displayLabel, ko.observable(false)),

app/client/ui/tooltips.ts

@@ -8,6 +8,7 @@
 import {prepareForTransition} from 'app/client/ui/transitions';
 import {testId, theme, vars} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
+import {makeLinks} from 'app/client/ui2018/links';
 import {menuCssClass} from 'app/client/ui2018/menus';
 import {dom, DomContents, DomElementArg, DomElementMethod, styled} from 'grainjs';
 import Popper from 'popper.js';
@@ -138,7 +139,8 @@ export function showTooltip(
 
   // Add the content element.
   const content = cssTooltip({role: 'tooltip'}, tipContent(ctl), testId(`tooltip`));
-  document.body.appendChild(content);
+  // Prepending instead of appending allows better text selection, as this element is on top.
+  document.body.prepend(content);
 
   // Create a popper for positioning the tooltip content relative to refElem.
   const popperOptions: Popper.PopperOptions = {
@@ -203,26 +205,56 @@ export function setHoverTooltip(
   // Controller for closing the tooltip, if one is open.
   let tipControl: ITooltipControl|undefined;
 
+  // A marker, that the tooltip should be closed, but we are waiting for the mouseup event.
+  const POSTPONED = Symbol();
+
   // Timer to open or close the tooltip, depending on whether tipControl is set.
-  let timer: ReturnType<typeof setTimeout>|undefined;
+  let timer: ReturnType<typeof setTimeout>|undefined|typeof POSTPONED;
+
+  // To allow user select text, we will monitor if the selection has started in the tooltip (by listening
+  // to the mousedown event). If it has and mouse goes outside, we will mark that the tooltip should be closed.
+  // When the selection is over (by listening to mouseup on window), a new close is scheduled with 1.4s, to allow
+  // user to press Ctrl+C (but only if the marker - POSTPONED - is still set).
+  let mouseGrabbed = false;
+  function grabMouse(tip: Element) {
+    mouseGrabbed = true;
+    const listener = dom.onElem(window, 'mouseup', () => {
+      mouseGrabbed = false;
+      if (timer === POSTPONED) {
+        scheduleCloseIfOpen(1400);
+      }
+    });
+    dom.autoDisposeElem(tip, listener);
+
+    // Disable text selection in any other element except this one. This class sets user-select: none to all
+    // elements except the tooltip. This helps to avoid accidental selection of text in other elements, once
+    // the mouse leaves the tooltip.
+    document.body.classList.add(cssDisableSelectOnAll.className);
+    dom.onDisposeElem(tip, () => document.body.classList.remove(cssDisableSelectOnAll.className));
+  }
 
   function clearTimer() {
-    if (timer) { clearTimeout(timer); timer = undefined; }
+    if (timer !== POSTPONED) { clearTimeout(timer); }
+    timer = undefined;
   }
-  function resetTimer(func: () => void, delay: number) {
+  function resetTimer(func: () => void, delay: number|typeof POSTPONED) {
     clearTimer();
-    timer = setTimeout(func, delay);
+    timer = delay === POSTPONED ? POSTPONED : setTimeout(func, delay);
   }
-  function scheduleCloseIfOpen() {
+  function scheduleCloseIfOpen(timeout = closeDelay) {
     clearTimer();
-    if (tipControl) { resetTimer(close, closeDelay); }
+    if (tipControl) {
+      resetTimer(close, mouseGrabbed ? POSTPONED : timeout);
+    }
   }
   function open() {
     clearTimer();
     tipControl = showTooltip(refElem, ctl => tipContentFunc({...ctl, close}), options);
-    dom.onElem(tipControl.getDom(), 'mouseenter', clearTimer);
-    dom.onElem(tipControl.getDom(), 'mouseleave', scheduleCloseIfOpen);
-    dom.onDisposeElem(tipControl.getDom(), () => close());
+    const tipDom = tipControl.getDom();
+    dom.onElem(tipDom, 'mouseenter', clearTimer);
+    dom.onElem(tipDom, 'mouseleave', () => scheduleCloseIfOpen());
+    dom.onElem(tipDom, 'mousedown', grabMouse.bind(null, tipDom));
+    dom.onDisposeElem(tipDom, () => close());
     if (timeoutMs) { resetTimer(close, timeoutMs); }
   }
   function close() {
@@ -247,7 +279,7 @@ export function setHoverTooltip(
     }
   });
 
-  dom.onElem(refElem, 'mouseleave', scheduleCloseIfOpen);
+  dom.onElem(refElem, 'mouseleave', () => scheduleCloseIfOpen());
 
   if (openOnClick) {
     // If requested, re-open on click.
@@ -354,30 +386,49 @@ export function withInfoTooltip(
  * Renders an description info icon that shows a tooltip with the specified `content` on click.
  */
 export function descriptionInfoTooltip(
-  content: DomContents,
+  content: string,
   testPrefix: string,
   ...domArgs: DomElementArg[]) {
+  const body = makeLinks(content);
+  const options = {
+    closeDelay: 200,
+    key: 'columnDescription',
+    openOnClick: true,
+  };
+  const builder = () => cssDescriptionInfoTooltip(
+    body,
+    // Used id test to find the origin of the tooltip regardless webdriver implementation (some of them start)
+    cssTooltipCorner(testId('tooltip-origin')),
+    testId(`${testPrefix}-info-tooltip-popup`),
+    {tabIndex: '-1'}
+  );
   return cssDescriptionInfoTooltipButton(
     icon('Info', dom.cls("info_toggle_icon")),
     testId(`${testPrefix}-info-tooltip`),
     dom.on('mousedown', (e) => e.stopPropagation()),
     dom.on('click', (e) => e.stopPropagation()),
-    hoverTooltip(() => cssDescriptionInfoTooltip(content, testId(`${testPrefix}-info-tooltip-popup`)), {
-      closeDelay: 200,
-      key: 'columnDescription',
-      openOnClick: true,
-    }),
+    hoverTooltip(builder, options),
     dom.cls("info_toggle_icon_wrapper"),
     ...domArgs,
   );
 }
 
+const cssTooltipCorner = styled('div', `
+  position: absolute;
+  width: 0;
+  height: 0;
+  top: 0;
+  left: 0;
+  visibility: hidden;
+`);
 
 const cssDescriptionInfoTooltip = styled('div', `
+  position: relative;
   white-space: pre-wrap;
   text-align: left;
   text-overflow: ellipsis;
   overflow: hidden;
+  line-height: 1.4;
   max-width: min(500px, calc(100vw - 80px)); /* can't use 100%, 500px and 80px are picked by hand */
 `);
 
@@ -412,6 +463,13 @@ const cssTooltip = styled('div', `
   padding: 8px 16px;
   margin: 4px;
   transition: opacity 0.2s;
+  user-select: auto;
+`);
+
+const cssDisableSelectOnAll = styled('div', `
+  & *:not(.${cssTooltip.className}, .${cssTooltip.className} *) {
+    user-select: none;
+  }
 `);
 
 const cssTooltipCloseButton = styled('div', `

app/client/ui2018/links.ts

@@ -1,7 +1,9 @@
+import {findLinks} from 'app/client/lib/textUtils';
 import { sameDocumentUrlState, urlState } from 'app/client/models/gristUrlState';
-import { hideInPrintView, theme } from 'app/client/ui2018/cssVars';
+import { colors, hideInPrintView, testId, theme } from 'app/client/ui2018/cssVars';
+import {cssIconBackground, icon} from 'app/client/ui2018/icons';
 import { CellValue } from 'app/plugin/GristData';
-import { dom, IDomArgs, Observable, styled } from 'grainjs';
+import { dom, DomArg, IDomArgs, Observable, styled } from 'grainjs';
 
 /**
  * Styling for a simple <A HREF> link.
@@ -49,3 +51,67 @@ export async function onClickHyperLink(ev: MouseEvent, url: CellValue) {
   ev.preventDefault();
   await urlState().pushUrl(newUrlState);
 }
+
+/**
+ * Generates dom contents out of a text with clickable links.
+ */
+export function makeLinks(text: string) {
+  try {
+    const domElements: DomArg[] = [];
+    for (const {value, isLink} of findLinks(text)) {
+      if (isLink) {
+        // Wrap link with a span to provide hover on and to override wrapping.
+        domElements.push(cssMaybeWrap(
+          gristLink(value,
+            cssIconBackground(
+              icon("FieldLink", testId('tb-link-icon')),
+              dom.cls(cssHoverInText.className),
+            ),
+          ),
+          linkColor(value),
+          testId("text-link")
+        ));
+      } else {
+        domElements.push(value);
+      }
+    }
+    return domElements;
+  } catch(ex) {
+    // In case when something went wrong, simply log and return original text, as showing
+    // links is not that important.
+    console.warn("makeLinks failed", ex);
+    return text;
+  }
+}
+
+// For links we want to break all the parts, not only words.
+const cssMaybeWrap = styled('span', `
+  white-space: inherit;
+  .text_wrapping & {
+    word-break: break-all;
+    white-space: pre-wrap;
+  }
+`);
+
+// A gentle transition effect on hover in, and the same effect on hover out with a little delay.
+export const cssHoverIn = (parentClass: string) => styled('span', `
+  --icon-color: var(--grist-actual-cell-color, ${colors.lightGreen});
+  margin: -1px 2px 2px 0;
+  border-radius: 3px;
+  transition-property: background-color;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  transition-delay: 90ms;
+  .${parentClass}:hover & {
+    --icon-background: ${colors.lightGreen};
+    --icon-color: white;
+    transition-duration: 80ms;
+    transition-delay: 0ms;
+  }
+`);
+
+const cssHoverInText = cssHoverIn(cssMaybeWrap.className);
+
+const linkColor = styled('span', `
+  color: var(--grist-actual-cell-color, ${colors.lightGreen});;
+`);

app/client/widgets/HyperLinkTextBox.ts

@@ -3,8 +3,8 @@ import { ViewFieldRec } from 'app/client/models/entities/ViewFieldRec';
 import { constructUrl } from 'app/client/models/gristUrlState';
 import { colors, testId } from 'app/client/ui2018/cssVars';
 import { cssIconBackground, icon } from 'app/client/ui2018/icons';
-import { gristLink } from 'app/client/ui2018/links';
-import { cssHoverIn, NTextBox } from 'app/client/widgets/NTextBox';
+import { cssHoverIn, gristLink } from 'app/client/ui2018/links';
+import { NTextBox } from 'app/client/widgets/NTextBox';
 import { CellValue } from 'app/common/DocActions';
 import { Computed, dom, styled } from 'grainjs';
 

app/client/widgets/NTextBox.ts

@@ -1,15 +1,13 @@
 import { fromKoSave } from 'app/client/lib/fromKoSave';
-import { findLinks } from 'app/client/lib/textUtils';
 import { DataRowModel } from 'app/client/models/DataRowModel';
 import { ViewFieldRec } from 'app/client/models/entities/ViewFieldRec';
 import { cssRow } from 'app/client/ui/RightPanelStyles';
 import { alignmentSelect, cssButtonSelect, makeButtonSelect } from 'app/client/ui2018/buttonSelect';
-import { colors, testId } from 'app/client/ui2018/cssVars';
-import { cssIconBackground, icon } from 'app/client/ui2018/icons';
-import { gristLink } from 'app/client/ui2018/links';
+import { testId } from 'app/client/ui2018/cssVars';
+import { makeLinks } from 'app/client/ui2018/links';
 import { NewAbstractWidget, Options } from 'app/client/widgets/NewAbstractWidget';
-import { Computed, dom, DomArg, DomContents, fromKo, Observable, styled } from 'grainjs';
-import {makeT} from 'app/client/lib/localization';
+import { Computed, dom, DomContents, fromKo, Observable } from 'grainjs';
+import { makeT } from 'app/client/lib/localization';
 
 const t = makeT('NTextBox');
 
@@ -69,64 +67,3 @@ export class NTextBox extends NewAbstractWidget {
     );
   }
 }
-
-function makeLinks(text: string) {
-  try {
-    const domElements: DomArg[] = [];
-    for (const {value, isLink} of findLinks(text)) {
-      if (isLink) {
-        // Wrap link with a span to provide hover on and to override wrapping.
-        domElements.push(cssMaybeWrap(
-          gristLink(value,
-            cssIconBackground(
-              icon("FieldLink", testId('tb-link-icon')),
-              dom.cls(cssHoverInText.className),
-            ),
-          ),
-          linkColor(value),
-          testId("text-link")
-        ));
-      } else {
-        domElements.push(value);
-      }
-    }
-    return domElements;
-  } catch(ex) {
-    // In case when something went wrong, simply log and return original text, as showing
-    // links is not that important.
-    console.warn("makeLinks failed", ex);
-    return text;
-  }
-}
-
-// For links we want to break all the parts, not only words.
-const cssMaybeWrap = styled('span', `
-  white-space: inherit;
-  .text_wrapping & {
-    word-break: break-all;
-    white-space: pre-wrap;
-  }
-`);
-
-// A gentle transition effect on hover in, and the same effect on hover out with a little delay.
-export const cssHoverIn = (parentClass: string) => styled('span', `
-  --icon-color: var(--grist-actual-cell-color, ${colors.lightGreen});
-  margin: -1px 2px 2px 0;
-  border-radius: 3px;
-  transition-property: background-color;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-  transition-delay: 90ms;
-  .${parentClass}:hover & {
-    --icon-background: ${colors.lightGreen};
-    --icon-color: white;
-    transition-duration: 80ms;
-    transition-delay: 0ms;
-  }
-`);
-
-const cssHoverInText = cssHoverIn(cssMaybeWrap.className);
-
-const linkColor = styled('span', `
-  color: var(--grist-actual-cell-color, ${colors.lightGreen});;
-`);