(core) fix browser check and favicon in grist-core

Summary:
A check for old browsers and a Grist favicon were not available in
grist-core, leaving harmless but distracting errors in logs. This
adds them.

Test Plan: checked manually

Reviewers: georgegevoian

Reviewed By: georgegevoian

Subscribers: jarek

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

.gitignore

@@ -3,6 +3,7 @@
 /static/*.bundle.js
 /static/*.bundle.js.map
 /static/bundle.css
+/static/browser-check.js
 
 # Build helper files.
 /.build*

app/client/browserCheck.ts

@@ -0,0 +1,57 @@
+/**
+ * Check if browser is a version we are happy with.
+ * Introduce any new dependencies very carefully, checking that the code still runs
+ * on old browsers afterwards.
+ */
+
+// Use version of bowser with polyfill for old browsers.
+import * as bowser from 'bowser/bundled';
+
+// This code will run in the browser.
+const version = bowser.getParser(window.navigator.userAgent);
+(window as any)._parsedBrowserVersion = version;
+
+// Skip if user has already dismissed a warning from us.
+if (document && window && document.cookie.indexOf("gristbrowser=accept") === -1) {
+  const isHappyBrowser = version.satisfies({
+    desktop: {
+      chrome: ">=72.0.3626",   // first 2019 version
+      firefox: ">=65",         // first 2019 version
+      safari: ">=12.0.3",      // first 2019 version
+      edge: ">=80",            // one of first Chromium-based Edge versions, early 2020
+      opera: ">=66",           // first 2020 version
+    }
+  });
+  const isMobile = version.isPlatform('mobile') || version.isPlatform('tablet');
+  if (!isHappyBrowser) {
+    const problemElement = document.getElementById('browser-check-problem');
+    const dismissElement = document.getElementById('browser-check-problem-dismiss');
+    if (problemElement && dismissElement) {
+      // Prepare a button for dismissing the warning.
+      dismissElement.onclick = function() {
+        // Set a cookie so we don't show this warning once it is dismissed.
+        let cookie = "gristbrowser=accept; path=/";
+        // Keep the cookie for a year (60*60*24*365 seconds) before warning again.
+        cookie += "; max-age=31536000";
+
+        // NOTE: Safari seems to limit cookies (and other storage?) set via JS to 1 week, so
+        // people on mobile or old Safari may get prompted more often than we'd like. See
+        // https://webkit.org/blog/10218/full-third-party-cookie-blocking-and-more/
+
+        if (document.location.href.indexOf(".getgrist.com") !== -1) {
+          // on *.getgrist.com, set cookie domain to getgrist.com
+          cookie += "; Domain=.getgrist.com";
+        }
+        document.cookie = cookie;
+        // Hide the warning, showing the loaded page that it was obscuring.
+        problemElement.style.display = 'none';
+        return false;
+      };
+      // Show modal describing problem, and some possible solutions.
+      if (isMobile) {
+        problemElement.className += ' browser-check-is-mobile';
+      }
+      problemElement.style.display = 'block';
+    }
+  }
+}

buildtools/webpack.check.js

@@ -0,0 +1,11 @@
+const path = require('path');
+
+module.exports = {
+  target: 'web',
+  mode: 'production',
+  entry: "./_build/app/client/browserCheck.js",
+  output: {
+    path: path.resolve("./static"),
+    filename: "browser-check.js"
+  },
+};

package.json

@@ -8,7 +8,7 @@
   "scripts": {
     "start": "tsc --build -w --preserveWatchOutput & catw app/client/*.css app/client/*/*.css -o static/bundle.css -v & webpack --config buildtools/webpack.config.js --mode development --watch --hide-modules & NODE_PATH=_build:_build/stubs nodemon --delay 1 -w _build/app/server -w _build/app/common _build/stubs/app/server/server.js & wait",
     "install:python": "buildtools/prepare_python.sh",
-    "build:prod": "tsc --build && webpack --config buildtools/webpack.config.js --mode production && cat app/client/*.css app/client/*/*.css > static/bundle.css",
+    "build:prod": "tsc --build && webpack --config buildtools/webpack.config.js --mode production && webpack --config buildtools/webpack.check.js --mode production && cat app/client/*.css app/client/*/*.css > static/bundle.css",
     "start:prod": "NODE_PATH=_build:_build/stubs node _build/stubs/app/server/server.js",
     "test": "GRIST_SESSION_COOKIE=grist_test_cookie GRIST_TEST_LOGIN=1 TEST_SUPPORT_API_KEY=api_key_for_support NODE_PATH=_build:_build/stubs mocha _build/test/nbrowser/*.js",
     "test:smoke": "NODE_PATH=_build:_build/stubs mocha _build/test/nbrowser/Smoke.js",

static/app.html

@@ -5,7 +5,7 @@
 
 <!-- INSERT BASE -->
 
-<link rel="icon" type="image/x-icon" href="favicon.png" />
+<link rel="icon" type="image/x-icon" href="icons/favicon.png" />
 
 <link rel="stylesheet" href="jqueryui/themes/smoothness/jquery-ui.css">
 <link rel="stylesheet" href="bootstrap/dist/css/bootstrap.min.css">

static/custom-widget.html

@@ -3,7 +3,7 @@
 
 <head>
   <meta charset="utf8">
-  <link rel="icon" type="image/x-icon" href="favicon.png" />
+  <link rel="icon" type="image/x-icon" href="icons/favicon.png" />
   <link rel="stylesheet" href="icons/icons.css">
   <title>Custom widget</title>
   <style>

static/error.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="utf8">
   <!-- INSERT BASE -->
-  <link rel="icon" type="image/x-icon" href="favicon.png" />
+  <link rel="icon" type="image/x-icon" href="icons/favicon.png" />
   <link rel="stylesheet" href="icons/icons.css">
   <title>Grist</title>
 </head>