Work towards migrating devtools_app to package:web

packages/devtools_app/lib/src/extensions/embedded/_controller_web.dart

@@ -2,14 +2,13 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-// ignore_for_file: avoid_web_libraries_in_flutter, as designed
 import 'dart:async';
-import 'dart:html' as html;
 import 'dart:ui_web' as ui_web;
 
 import 'package:devtools_app_shared/utils.dart';
 import 'package:devtools_extensions/api.dart';
 import 'package:path/path.dart' as path;
+import 'package:web/helpers.dart';
 
 import '../../shared/config_specific/server/server.dart';
 import '../../shared/development_helpers.dart';
@@ -44,7 +43,7 @@ class EmbeddedExtensionControllerImpl extends EmbeddedExtensionController
     }
 
     final baseUri = path.join(
-      html.window.location.origin,
+      window.location.origin,
       'devtools_extensions',
       extensionConfig.name,
       'index.html',
@@ -58,9 +57,9 @@ class EmbeddedExtensionControllerImpl extends EmbeddedExtensionController
     return Uri.parse(baseUri).copyWith(queryParameters: queryParams).toString();
   }
 
-  html.IFrameElement get extensionIFrame => _extensionIFrame;
+  HTMLIFrameElement get extensionIFrame => _extensionIFrame;
 
-  late final html.IFrameElement _extensionIFrame;
+  late final HTMLIFrameElement _extensionIFrame;
 
   final extensionPostEventStream =
       StreamController<DevToolsExtensionEvent>.broadcast();
@@ -75,7 +74,7 @@ class EmbeddedExtensionControllerImpl extends EmbeddedExtensionController
     );
     _initialized = true;
 
-    _extensionIFrame = html.IFrameElement()
+    _extensionIFrame = createElementTag('iframe') as HTMLIFrameElement
       // This url is safe because we built it ourselves and it does not include
       // any user input.
       // ignore: unsafe_html

packages/devtools_app/lib/src/extensions/embedded/_view_web.dart

@@ -3,13 +3,13 @@
 // found in the LICENSE file.
 
 import 'dart:async';
-// ignore: avoid_web_libraries_in_flutter, as designed
-import 'dart:html' as html;
+import 'dart:js_interop';
 
 import 'package:devtools_app_shared/ui.dart';
 import 'package:devtools_app_shared/utils.dart';
 import 'package:devtools_extensions/api.dart';
 import 'package:flutter/material.dart';
+import 'package:web/helpers.dart';
 
 import '../../shared/banner_messages.dart';
 import '../../shared/common_widgets.dart';
@@ -96,7 +96,7 @@ class _ExtensionIFrameController extends DisposableController
   /// We need to store this in a variable so that the listener is properly
   /// removed in [dispose]. Otherwise, we will end up in a state where we are
   /// leaking listeners when an extension is disabled and re-enabled.
-  html.EventListener? _handleMessageListener;
+  EventListener? _handleMessageListener;
 
   void init() {
     _iFrameReady = Completer<void>();
@@ -108,9 +108,9 @@ class _ExtensionIFrameController extends DisposableController
       }),
     );
 
-    html.window.addEventListener(
+    window.addEventListener(
       'message',
-      _handleMessageListener = _handleMessage,
+      _handleMessageListener = _handleMessage as EventListener,
     );
 
     autoDisposeStreamSubscription(
@@ -156,14 +156,14 @@ class _ExtensionIFrameController extends DisposableController
       ' _iFrameReady future completed.',
     );
     embeddedExtensionController.extensionIFrame.contentWindow!.postMessage(
-      message,
-      embeddedExtensionController.extensionUrl,
+      message.jsify(),
+      embeddedExtensionController.extensionUrl.toJS,
     );
   }
 
-  void _handleMessage(html.Event e) {
-    if (e is html.MessageEvent) {
-      final extensionEvent = DevToolsExtensionEvent.tryParse(e.data);
+  void _handleMessage(Event e) {
+    if (e is MessageEvent) {
+      final extensionEvent = DevToolsExtensionEvent.tryParse(e.data!);
       if (extensionEvent != null) {
         onEventReceived(
           extensionEvent,
@@ -205,7 +205,7 @@ class _ExtensionIFrameController extends DisposableController
 
   @override
   void dispose() {
-    html.window.removeEventListener('message', _handleMessageListener);
+    window.removeEventListener('message', _handleMessageListener);
     _handleMessageListener = null;
     _pollForExtensionHandlerReady?.cancel();
     super.dispose();

packages/devtools_app/lib/src/screens/performance/panes/timeline_events/perfetto/_perfetto_controller_web.dart

@@ -3,11 +3,10 @@
 // found in the LICENSE file.
 
 import 'dart:async';
-// ignore: avoid_web_libraries_in_flutter, as designed
-import 'dart:html' as html;
 import 'dart:ui_web' as ui_web;
 
 import 'package:flutter/foundation.dart';
+import 'package:web/helpers.dart';
 
 import '../../../../../shared/globals.dart';
 import '../../../../../shared/primitives/trace_event.dart';
@@ -120,18 +119,18 @@ class PerfettoControllerImpl extends PerfettoController {
       return _debugPerfettoUrl;
     }
     final basePath = assetUrlHelper(
-      origin: html.window.location.origin,
-      path: html.window.location.pathname ?? '',
+      origin: window.location.origin,
+      path: window.location.pathname,
     );
     final indexFilePath = ui_web.assetManager
         .getAssetUrl(devToolsExtensionPoints.perfettoIndexLocation);
     final baseUrl = '$basePath/$indexFilePath';
     return '$baseUrl$_embeddedModeQuery';
   }
 
-  html.IFrameElement get perfettoIFrame => _perfettoIFrame;
+  HTMLIFrameElement get perfettoIFrame => _perfettoIFrame;
 
-  late final html.IFrameElement _perfettoIFrame;
+  late final HTMLIFrameElement _perfettoIFrame;
 
   /// The set of trace events that should be shown in the Perfetto trace viewer.
   ///
@@ -166,7 +165,7 @@ class PerfettoControllerImpl extends PerfettoController {
     );
     _initialized = true;
 
-    _perfettoIFrame = html.IFrameElement()
+    _perfettoIFrame = createElementTag('iframe') as HTMLIFrameElement
       // This url is safe because we built it ourselves and it does not include
       // any user input.
       // ignore: unsafe_html

packages/devtools_app/lib/src/screens/performance/panes/timeline_events/perfetto/_perfetto_web.dart

@@ -4,12 +4,12 @@
 
 import 'dart:async';
 import 'dart:convert';
-// ignore: avoid_web_libraries_in_flutter, as designed
-import 'dart:html' as html;
+import 'dart:js_interop';
 
 import 'package:devtools_app_shared/utils.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
+import 'package:web/helpers.dart';
 
 import '../../../../../shared/analytics/analytics.dart' as ga;
 import '../../../../../shared/analytics/constants.dart' as gac;
@@ -119,12 +119,12 @@ class _PerfettoViewController extends DisposableController
 
   static const _pollUntilReadyTimeout = Duration(seconds: 10);
 
-  /// The listener that is added to DevTools' [html.window] to receive messages
+  /// The listener that is added to DevTools' [window] to receive messages
   /// from the Perfetto iFrame.
   ///
   /// We need to store this in a variable so that the listener is properly
   /// removed in [dispose].
-  html.EventListener? _handleMessageListener;
+  EventListener? _handleMessageListener;
 
   void init() {
     _perfettoIFrameReady = Completer<void>();
@@ -137,9 +137,9 @@ class _PerfettoViewController extends DisposableController
       }),
     );
 
-    html.window.addEventListener(
+    window.addEventListener(
       'message',
-      _handleMessageListener = _handleMessage,
+      _handleMessageListener = _handleMessage as EventListener,
     );
 
     unawaited(_loadStyle(preferences.darkModeTheme.value));
@@ -244,8 +244,8 @@ class _PerfettoViewController extends DisposableController
       ' _perfettoIFrameReady future completed.',
     );
     perfettoController.perfettoIFrame.contentWindow!.postMessage(
-      message,
-      perfettoController.perfettoUrl,
+      message.jsify(),
+      perfettoController.perfettoUrl.toJS,
     );
   }
 
@@ -261,14 +261,14 @@ class _PerfettoViewController extends DisposableController
     _postMessage(message);
   }
 
-  void _handleMessage(html.Event e) {
-    if (e is html.MessageEvent) {
-      if (e.data == EmbeddedPerfettoEvent.pong.event &&
+  void _handleMessage(Event e) {
+    if (e is MessageEvent) {
+      if (e.data.toString() == EmbeddedPerfettoEvent.pong.event &&
           !_perfettoHandlerReady.isCompleted) {
         _perfettoHandlerReady.complete();
       }
 
-      if (e.data == EmbeddedPerfettoEvent.devtoolsThemePong.event &&
+      if (e.data.toString() == EmbeddedPerfettoEvent.devtoolsThemePong.event &&
           !_devtoolsThemeHandlerReady.isCompleted) {
         _devtoolsThemeHandlerReady.complete();
       }
@@ -315,7 +315,7 @@ class _PerfettoViewController extends DisposableController
 
   @override
   void dispose() {
-    html.window.removeEventListener('message', _handleMessageListener);
+    window.removeEventListener('message', _handleMessageListener);
     _handleMessageListener = null;
     _pollForPerfettoHandlerReady?.cancel();
     _pollForThemeHandlerReady?.cancel();

packages/devtools_app/lib/src/shared/config_specific/drag_and_drop/drag_and_drop.dart

@@ -6,9 +6,8 @@ import 'package:flutter/material.dart';
 import 'package:flutter/rendering.dart';
 
 import '../../primitives/utils.dart';
-import '_drag_and_drop_stub.dart'
-    if (dart.library.js_interop) '_drag_and_drop_web.dart'
-    if (dart.library.io) '_drag_and_drop_desktop.dart';
+import '_drag_and_drop_desktop.dart'
+    if (dart.library.js_interop) '_drag_and_drop_web.dart';
 
 abstract class DragAndDropManager {
   factory DragAndDropManager(int viewId) => createDragAndDropManager(viewId);

packages/devtools_app/lib/src/shared/config_specific/file/file.dart

@@ -2,9 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import '_file_stub.dart'
-    if (dart.library.js_interop) '_file_web.dart'
-    if (dart.library.io) '_file_desktop.dart';
+import '_file_desktop.dart'
+    if (dart.library.js_interop) '_file_web.dart';
 
 abstract class FileIO {
   factory FileIO() {

packages/devtools_app/lib/src/shared/config_specific/framework_initialize/_framework_initialize_web.dart

@@ -3,9 +3,11 @@
 // found in the LICENSE file.
 
 // ignore: avoid_web_libraries_in_flutter, as designed
-import 'dart:html' hide Storage;
+import 'dart:html' as html hide Storage;
+import 'dart:js_interop';
 
 import 'package:devtools_app_shared/utils.dart';
+import 'package:web/helpers.dart' hide Storage;
 
 import '../../../service/service_manager.dart';
 import '../../globals.dart';
@@ -15,7 +17,7 @@ import '../../server_api_client.dart';
 /// Return the url the application is launched from.
 Future<String> initializePlatform() async {
   // Clear out the unneeded HTML from index.html.
-  for (var element in document.body!.querySelectorAll('.legacy-dart')) {
+  for (var element in html.document.body!.querySelectorAll('.legacy-dart')) {
     element.remove();
   }
 
@@ -77,7 +79,10 @@ void _sendKeyPressToParent(KeyboardEvent event) {
     'repeat': event.repeat,
     'shiftKey': event.shiftKey,
   };
-  window.parent?.postMessage({'command': 'keydown', 'data': data}, '*');
+  window.parent?.postMessage(
+    {'command': 'keydown', 'data': data}.jsify(),
+    '*'.toJS,
+  );
 }
 
 class ServerConnectionStorage implements Storage {

packages/devtools_app/lib/src/shared/config_specific/framework_initialize/framework_initialize.dart

@@ -3,9 +3,8 @@
 // found in the LICENSE file.
 
 import '../../../framework/framework_core.dart';
-import '_framework_initialize_stub.dart'
-    if (dart.library.js_interop) '_framework_initialize_web.dart'
-    if (dart.library.io) '_framework_initialize_desktop.dart';
+import '_framework_initialize_desktop.dart'
+    if (dart.library.js_interop) '_framework_initialize_web.dart';
 
 Future<void> initializeFramework() async {
   FrameworkCore.initGlobals();

packages/devtools_app/lib/src/shared/config_specific/host_platform/host_platform_web.dart → packages/devtools_app/lib/src/shared/config_specific/host_platform/_host_platform_web.dart

@@ -2,8 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be found
 // in the LICENSE file.
 
-// ignore: avoid_web_libraries_in_flutter, as designed
-import 'dart:html';
+import 'package:web/helpers.dart';
 
 class HostPlatform {
   HostPlatform._() {

packages/devtools_app/lib/src/shared/config_specific/host_platform/host_platform.dart

@@ -2,6 +2,5 @@
 // Use of this source code is governed by a BSD-style license that can be found
 // in the LICENSE file.
 
-export 'host_platform_stub.dart'
-    if (dart.library.js_interop) 'host_platform_web.dart'
-    if (dart.library.io) 'host_platform_desktop.dart';
+export '_host_platform_desktop.dart'
+    if (dart.library.js_interop) 'host_platform_web.dart';

packages/devtools_app/lib/src/shared/config_specific/import_export/import_export.dart

@@ -12,9 +12,8 @@ import '../../globals.dart';
 import '../../primitives/simple_items.dart';
 import '../../primitives/utils.dart';
 import '../../screen.dart';
-import '_export_stub.dart'
-    if (dart.library.js_interop) '_export_web.dart'
-    if (dart.library.io) '_export_desktop.dart';
+import '_export_desktop.dart'
+    if (dart.library.js_interop) '_export_web.dart';
 
 const nonDevToolsFileMessage = 'The imported file is not a Dart DevTools file.'
     ' At this time, DevTools only supports importing files that were originally'