Fix bugs where package:devtools was still used when devtools_app was required. (#1059)

Author: jacob314

packages/devtools_app/example/readme.md

@@ -0,0 +1,101 @@
+// Copyright 2018 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'dart:async';
+import 'package:html_shim/html.dart';
+
+import 'package:devtools_app/src/framework/framework_core.dart';
+import 'package:devtools_app/src/main.dart';
+import 'package:devtools_app/src/ui/analytics.dart' as ga;
+import 'package:devtools_app/src/ui/analytics_platform.dart' as ga_platform;
+import 'package:platform_detect/platform_detect.dart';
+
+void main() {
+  // Run in a zone in order to catch all Dart exceptions.
+  runZoned(
+    () {
+      // Initialize the core framework.
+      FrameworkCore.init();
+
+      // Load the web app framework.
+      final PerfToolFramework framework = PerfToolFramework();
+
+      // Show the opt-in dialog for collection analytics?
+      try {
+        if (ga.isGtagsEnabled() &
+            (!window.localStorage.containsKey(ga_platform.devToolsProperty()) ||
+                window.localStorage[ga_platform.devToolsProperty()].isEmpty)) {
+          framework.showAnalyticsDialog();
+        }
+      } catch (e) {
+        // If there are errors setting up analytics, write them to the console
+        // but do not prevent DevTools from loading.
+        window.console.error(e);
+      }
+
+      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 $browserName, '
+              'but DevTools only runs on Chrome.',
+          'Reopen this url in a Chrome browser to use DevTools.',
+        );
+        return;
+      }
+
+      FrameworkCore.initVmService(errorReporter: (String title, dynamic error) {
+        framework.showError(title, error);
+      }).then((bool connected) {
+        if (!connected) {
+          framework.showConnectionDialog();
+          framework.showSnapshotMessage();
+          // Clear the main element so it stops displaying "Loading..."
+          // TODO(jacobr): display a message explaining how to launch a Flutter
+          // application from the command line and connect to it with DevTools.
+          framework.mainElement.clear();
+        }
+      });
+
+      framework.loadScreenFromLocation();
+    },
+    zoneSpecification: const ZoneSpecification(
+      handleUncaughtError: _handleUncaughtError,
+    ),
+  );
+}
+
+void _handleUncaughtError(
+  Zone self,
+  ZoneDelegate parent,
+  Zone zone,
+  Object error,
+  StackTrace stackTrace,
+) {
+  // TODO(devoncarew): `stackTrace` always seems to be null.
+
+  // Report exceptions with DevTools to GA; user's Flutter app exceptions are
+  // not collected.
+  ga.error('$error\n${stackTrace ?? ''}'.trim(), true);
+
+  final Console console = window.console;
+
+  // Also write them to the console to aid debugging.
+  final errorLines = error.toString().split('\n');
+  console.groupCollapsed(
+      'DevTools exception: [${error.runtimeType}] ${errorLines.first}');
+  console.log(errorLines.skip(1).join('\n'));
+
+  if (stackTrace != null) {
+    if (errorLines.length > 1) {
+      console.log('\n');
+    }
+    console.log(stackTrace.toString().trim());
+  }
+
+  console.groupEnd();
+}

packages/devtools_app/example/test.dart

@@ -2,11 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import 'package:js/js_util.dart';
+import 'package:html_shim/js_util.dart';
+import 'package:plotly_js/plotly.dart';
 
-import '../ui/fake_flutter/dart_ui/dart_ui.dart';
+import '../ui/fake_flutter/fake_flutter.dart';
 import '../ui/flutter_html_shim.dart';
-import '../ui/plotly.dart';
 import '../ui/theme.dart';
 import 'memory_chart.dart';
 

packages/devtools_app/example/test_foo.dart

@@ -10,7 +10,11 @@ library model;
 
 import 'dart:async';
 import 'dart:convert';
-import 'dart:js' as js;
+
+// TODO(jacobr): remove these dependencies on html_shim.
+import 'package:html_shim/html.dart' show window;
+import 'package:html_shim/js.dart' as js;
+import 'package:html_shim/js_util.dart' as js_util;
 
 import 'package:vm_service/vm_service.dart';
 
@@ -64,8 +68,9 @@ class App {
   final PerfToolFramework framework;
 
   void _bind() {
-    final js.JsObject binding = js.JsObject.jsify(<dynamic, dynamic>{});
-    binding['send'] = (String method, int id, dynamic arg) {
+    final binding = js_util.newObject();
+    js_util.setProperty(binding, 'send',
+        js.allowInterop((String method, int id, dynamic arg) {
       try {
         final dynamic result = _dispatch(method, id, arg);
         Future<dynamic>.value(result).then((dynamic result) {
@@ -76,9 +81,9 @@ class App {
       } catch (error, stackTrace) {
         _sendReponseError(id, error, stackTrace);
       }
-    };
+    }));
 
-    js.context['devtools'] = binding;
+    js_util.setProperty(window, 'devtools', binding);
   }
 
   Future<void> devToolsReady(dynamic message) async {

packages/devtools_app/lib/main.dart

@@ -4,11 +4,12 @@
 
 import 'dart:async';
 
+import 'package:plotly_js/plotly.dart';
+
 import '../config_specific/logger.dart';
 import '../framework/framework.dart';
 import '../ui/analytics.dart' as ga;
 import '../ui/elements.dart';
-import '../ui/plotly.dart';
 import 'frames_bar_plotly.dart';
 import 'timeline_controller.dart';
 import 'timeline_model.dart';

packages/devtools_app/lib/src/memory/memory_plotly.dart

@@ -2,11 +2,12 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import 'package:js/js_util.dart';
+// TODO(jacobr): remove all uses of JS interop from package:devtools_app
+import 'package:html_shim/js_util.dart';
+import 'package:plotly_js/plotly.dart';
 
 import '../ui/colors.dart';
 import '../ui/flutter_html_shim.dart';
-import '../ui/plotly.dart';
 import '../ui/theme.dart';
 
 class FramesBarPlotly {

packages/devtools_app/lib/src/model/model.dart

@@ -279,7 +279,7 @@ class _MaterialIconRenderer extends HtmlIconRenderer<MaterialIcon> {
       if (_iconsFont == null) {
         _iconsFont = FontFace(
           'Material Icons',
-          'url(packages/devtools/src/ui/MaterialIcons-Regular.woff2)',
+          'url(packages/devtools_app/src/ui/MaterialIcons-Regular.woff2)',
         );
         document.fonts.add(_iconsFont);
         _iconsFontFuture = _iconsFont.load();