(core) Hides the link icon in print view

Summary:
Users complained about white spaces left by the link icon when printing.
Diff fixes the issue by hiding link icon completely.

Test Plan: Adds tests in `nbrowser/Printing.ts`

Reviewers: jarek

Reviewed By: jarek

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

app/client/components/Printing.ts

@@ -64,7 +64,7 @@ export async function printViewSection(layout: any, viewSection: ViewSectionRec)
   }
 
   const sub1 = dom.onElem(window, 'beforeprint', () => prepareToPrint(true));
-  const sub2 = dom.onElem(window, 'afterprint', () => {
+  const sub2 = dom.onElem(window, 'afterprint', (window as any).afterPrintCallback = () => {
     sub1.dispose();
     sub2.dispose();
     // To debug printing, set window.debugPrinting=1 in the console, then print a section, dismiss
@@ -75,6 +75,7 @@ export async function printViewSection(layout: any, viewSection: ViewSectionRec)
     } else {
       prepareToPrint(false);
     }
+    delete (window as any).afterPrintCallback;
   });
 
   // Running print on a timeout makes it possible to test printing using selenium, and doesn't

app/client/ui2018/cssVars.ts

@@ -10,7 +10,7 @@ import {getStorage} from 'app/client/lib/storage';
 import {urlState} from 'app/client/models/gristUrlState';
 import {getTheme, ProductFlavor} from 'app/client/ui/CustomThemes';
 import {Theme, ThemeAppearance} from 'app/common/ThemePrefs';
-import {dom, makeTestId, Observable, styled, TestId} from 'grainjs';
+import {dom, DomElementMethod, makeTestId, Observable, styled, TestId} from 'grainjs';
 import debounce = require('lodash/debounce');
 import values = require('lodash/values');
 
@@ -893,3 +893,16 @@ function getOrCreateStyleElement(id: string) {
   document.head.append(style);
   return style;
 }
+
+// A dom method to hide element in print view
+export function hideInPrintView(): DomElementMethod {
+  return cssHideInPrint.cls('');
+}
+
+const cssHideInPrint = styled('div', `
+  @media print {
+    & {
+      display: none !important;
+    }
+  }
+`);

app/client/ui2018/links.ts

@@ -1,5 +1,5 @@
 import { sameDocumentUrlState, urlState } from 'app/client/models/gristUrlState';
-import { theme } from 'app/client/ui2018/cssVars';
+import { hideInPrintView, theme } from 'app/client/ui2018/cssVars';
 import { CellValue } from 'app/plugin/GristData';
 import { dom, IDomArgs, Observable, styled } from 'grainjs';
 
@@ -30,6 +30,7 @@ export function gristLink(href: string|Observable<string>, ...args: IDomArgs<HTM
     // from running on the same process as Grist:
     // https://developers.google.com/web/tools/lighthouse/audits/noopener
     dom.attr("rel", "noopener noreferrer"),
+    hideInPrintView(),
     args
   );
 }

app/client/widgets/Reference.ts

@@ -1,7 +1,7 @@
 import {DataRowModel} from 'app/client/models/DataRowModel';
 import {ViewFieldRec} from 'app/client/models/entities/ViewFieldRec';
 import {cssLabel, cssRow} from 'app/client/ui/RightPanelStyles';
-import {colors, testId} from 'app/client/ui2018/cssVars';
+import {colors, hideInPrintView, testId} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
 import {IOptionFull, select} from 'app/client/ui2018/menus';
 import {NTextBox} from 'app/client/widgets/NTextBox';
@@ -103,7 +103,7 @@ export class Reference extends NTextBox {
       cssRef.cls('-blank', use => use(formattedValue).hasBlankReference),
       dom.style('text-align', this.alignment),
       dom.cls('text_wrapping', this.wrapping),
-      cssRefIcon('FieldReference', testId('ref-link-icon')),
+      cssRefIcon('FieldReference', testId('ref-link-icon'), hideInPrintView()),
       dom.text(use => {
         if (use(referenceId) === 0) { return ''; }
         if (use(formattedValue).hasBlankReference) { return '[Blank]'; }