diff --git a/lib/web_ui/lib/src/engine/browser_detection.dart b/lib/web_ui/lib/src/engine/browser_detection.dart index 3251da99cf331..f22f29b302a29 100644 --- a/lib/web_ui/lib/src/engine/browser_detection.dart +++ b/lib/web_ui/lib/src/engine/browser_detection.dart @@ -2,10 +2,10 @@ // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. -import 'dart:html' as html; - import 'package:meta/meta.dart'; +import 'dom.dart'; + // iOS 15 launched WebGL 2.0, but there's something broken about it, which // leads to apps failing to load. For now, we're forcing WebGL 1 on iOS. // @@ -65,8 +65,8 @@ BrowserEngine get browserEngine { } BrowserEngine _detectBrowserEngine() { - final String vendor = html.window.navigator.vendor; - final String agent = html.window.navigator.userAgent.toLowerCase(); + final String vendor = domWindow.navigator.vendor; + final String agent = domWindow.navigator.userAgent.toLowerCase(); return detectBrowserEngineByVendorAgent(vendor, agent); } @@ -167,14 +167,14 @@ OperatingSystem detectOperatingSystem({ String? overrideUserAgent, int? overrideMaxTouchPoints, }) { - final String platform = overridePlatform ?? html.window.navigator.platform!; - final String userAgent = overrideUserAgent ?? html.window.navigator.userAgent; + final String platform = overridePlatform ?? domWindow.navigator.platform!; + final String userAgent = overrideUserAgent ?? domWindow.navigator.userAgent; if (platform.startsWith('Mac')) { // iDevices requesting a "desktop site" spoof their UA so it looks like a Mac. // This checks if we're in a touch device, or on a real mac. final int maxTouchPoints = - overrideMaxTouchPoints ?? html.window.navigator.maxTouchPoints ?? 0; + overrideMaxTouchPoints ?? domWindow.navigator.maxTouchPoints ?? 0; if (maxTouchPoints > 2) { return OperatingSystem.iOs; } @@ -233,7 +233,7 @@ bool get isIOS15 { return debugIsIOS15!; } return operatingSystem == OperatingSystem.iOs && - html.window.navigator.userAgent.contains('OS 15_'); + domWindow.navigator.userAgent.contains('OS 15_'); } /// Use in tests to simulate the detection of iOS 15. @@ -256,7 +256,7 @@ int get webGLVersion => /// /// Our CanvasKit backend is affected due to: https://github.com/emscripten-core/emscripten/issues/11819 int _detectWebGLVersion() { - final html.CanvasElement canvas = html.CanvasElement( + final DomCanvasElement canvas = DomCanvasElement( width: 1, height: 1, ); diff --git a/lib/web_ui/lib/src/engine/dom.dart b/lib/web_ui/lib/src/engine/dom.dart index 4d2ee5c68b971..58c1adf6bb1fa 100644 --- a/lib/web_ui/lib/src/engine/dom.dart +++ b/lib/web_ui/lib/src/engine/dom.dart @@ -11,17 +11,30 @@ class DomWindow {} extension DomWindowExtension on DomWindow { external DomDocument get document; + external DomNavigator get navigator; } @JS('window') external DomWindow get domWindow; +@JS() +@staticInterop +class DomNavigator {} + +extension DomNavigatorExtension on DomNavigator { + external int? get maxTouchPoints; + external String get vendor; + external String? get platform; + external String get userAgent; +} + @JS() @staticInterop class DomDocument {} extension DomDocumentExtension on DomDocument { external /* List */ List querySelectorAll(String selectors); + external DomHTMLElement createElement(String name, [dynamic options]); } @JS() @@ -42,9 +55,38 @@ class DomHTMLMetaElement {} extension DomHTMLMetaElementExtension on DomHTMLMetaElement { external String get name; + external set name(String value); external String get content; +} - external set name(String value); +@JS() +@staticInterop +class DomCanvasElement extends DomHTMLElement { + factory DomCanvasElement({int? width, int? height}) { + final DomCanvasElement canvas = + domWindow.document.createElement('canvas') as DomCanvasElement; + if (width != null) { + canvas.width = width; + } + if (height != null) { + canvas.height = height; + } + return canvas; + } +} + +extension DomCanvasElementExtension on DomCanvasElement { + external int? get width; + external set width(int? value); + external int? get height; + external set height(int? value); + + Object? getContext(String contextType, [Map? attributes]) { + return js_util.callMethod(this, 'getContext', [ + contextType, + if (attributes != null) js_util.jsify(attributes) + ]); + } } Object? domGetConstructor(String constructorName) =>