Improve experience in Internet Explorer + tweak Edge message (#542)

DanTup · kenzieschmoll · commit 786cb33326c4 · 2019-04-16T15:37:52.000-07:00
* Redirect browsers that don't support ES6 classes to an unsupported page

This will catch really old browsers like IE.

* Change name for IE since it includes Edge too
diff --git a/packages/devtools/web/index.html b/packages/devtools/web/index.html
@@ -23,6 +23,17 @@
     <link rel="stylesheet" href="packages/devtools/src/timeline/timeline.css">
 
     <script type="text/javascript">
+        function supportsES6Classes() {
+          "use strict";
+          try { eval("class Foo {}"); }
+          catch (e) { return false; }
+          return true;
+        }
+
+        if (!supportsES6Classes()) {
+          window.location.href = '/unsupported-browser.html';
+        }
+
         (function() {
             var params = new URLSearchParams(window.location.search);
             if (params.get('theme') == 'dark') {
diff --git a/packages/devtools/web/main.dart b/packages/devtools/web/main.dart
@@ -14,9 +14,13 @@ void main() {
   final PerfToolFramework framework = PerfToolFramework();
 
   if (!browser.isChrome) {
+    final browserName =
+        // Edge shows up as IE, so we replace it's name to avoid confusion.
+        browser.isInternetExplorer || browser == Browser.UnknownBrowser
+            ? 'an unsupported browser'
+            : browser.name;
     framework.disableAppWithError(
-      'ERROR: You are running DevTools on '
-          '${browser.name == Browser.UnknownBrowser.name ? 'an unknown browswer' : browser.name}, '
+      'ERROR: You are running DevTools on $browserName, '
           'but DevTools only runs on Chrome.',
       'Reopen this url in a Chrome browser to use DevTools.',
     );
diff --git a/packages/devtools/web/unsupported-browser.html b/packages/devtools/web/unsupported-browser.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Dart DevTools - Unsupported Browser</title>
+    <style>
+      body {
+        margin: 50px 30px;
+        font-family: "Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+      }
+    </style>
+</head>
+<body>
+  <h1>Unsupported Browser</h1>
+  <p>Your browser is not supported by DevTools. Please try using Google Chrome.</p>
+</body>
+</html>
