Use a HtmlElementView for the debugger page
#1255
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,97 @@ | ||
| // Copyright 2019 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. | ||
|
|
||
| // This code imports dart:ui, but it uses API calls | ||
| // that are only available in the web implementation of dart:ui. | ||
| import 'dart:ui' as dart_ui_web; | ||
|
|
||
| import 'package:flutter_web_plugins/flutter_web_plugins.dart'; | ||
|
|
||
| // TODO(https://github.com/flutter/devtools/issues/1258): switch to dart:html | ||
| // when turning down html_shim. | ||
| // This is web plugin code may only be compiled into the web app. | ||
| import 'package:html_shim/html.dart' as html; | ||
|
|
||
| import 'src/debugger/html_debugger_screen.dart'; | ||
| import 'src/framework/html_framework.dart'; | ||
| import 'src/ui/html_elements.dart'; | ||
|
|
||
| /// A web-only Flutter plugin to show the [HtmlDebuggerScreen]. | ||
| class DebuggerHtmlPlugin { | ||
| DebuggerHtmlPlugin(); | ||
|
|
||
| HtmlFramework _framework; | ||
| HtmlDebuggerScreen _screen; | ||
| html.Element _viewRoot; | ||
|
|
||
| /// Registers this plugin with Flutter. | ||
| /// | ||
| /// The pubspec.yaml tells Flutter to look at this class for a plugin. | ||
| /// When it finds the class, it invokes this static method from | ||
| /// `generated_plugin_registrant.dart`. | ||
| static void registerWith(Registrar registrar) { | ||
| final instance = DebuggerHtmlPlugin(); | ||
| // This call is only defined for the web implementation of dart:ui. | ||
| // The regular dart UI cannot resolve this method call. | ||
| // TODO(https://github.com/flutter/flutter/issues/43377): Remove 'ignore' | ||
| // after the APIs match between flutter and web. | ||
| // ignore:undefined_prefixed_name | ||
| dart_ui_web.platformViewRegistry.registerViewFactory( | ||
| 'DebuggerFlutterPlugin', | ||
| instance.build, | ||
| ); | ||
| } | ||
|
|
||
| /// Builds the html content of the debugger plugin. | ||
| /// | ||
| /// [viewId] is used to distinguish between multiple instances of the same | ||
| /// view, such as video players. We can ignore it on DevTools. | ||
| html.Element build(int viewId) { | ||
| if (_viewRoot != null) { | ||
| return _viewRoot; | ||
| } | ||
| // Flutter loads this view inside of a shadow DOM. | ||
| // To get our existing CSS to work, we wrap the shadow page with the regular | ||
| // | ||
| // <html><head></head><body></body></html>. | ||
| _viewRoot = html.Element.tag('html'); | ||
| html.HttpRequest.getString('debugger_screen.html').then(_updateViewRoot); | ||
| return _viewRoot; | ||
| } | ||
|
|
||
| /// Loads the [HtmlDebuggerScreen] after receiving the debugger screen | ||
| /// template html. | ||
| void _updateViewRoot(String response) { | ||
| _viewRoot.setInnerHtml( | ||
| response, | ||
| treeSanitizer: html.NodeTreeSanitizer.trusted, | ||
| ); | ||
|
|
||
| // Tell the DevTools html code that the root to query for elements from | ||
| // is under this overridden root. | ||
| overrideDocumentRoot = _viewRoot; | ||
| _framework = HtmlFramework(); | ||
| _screen = HtmlDebuggerScreen(); | ||
| _framework.addScreen(_screen); | ||
|
|
||
| // Wait for the content to attach to the page, then load the debugger | ||
| // screen. | ||
| final observer = html.MutationObserver((mutations, observer) { | ||
| if (_framework.mainElement.element.isConnected) { | ||
| observer.disconnect(); | ||
| _framework.load(_screen); | ||
| } | ||
| }); | ||
| observer.observe(html.document, subtree: true, childList: true); | ||
|
|
||
| // TODO(https://github.com/flutter/flutter/issues/43520): This works around | ||
| // Flutter taking the mouse wheel events. | ||
| _viewRoot.onWheel.listen((event) { | ||
| event.stopImmediatePropagation(); | ||
| }); | ||
| _viewRoot.onMouseWheel.listen((event) { | ||
| event.stopImmediatePropagation(); | ||
| }); | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| // Copyright 2019 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 'package:flutter/foundation.dart'; | ||
| import 'package:flutter/gestures.dart'; | ||
| import 'package:flutter/material.dart'; | ||
| import 'package:flutter_icons/flutter_icons.dart'; | ||
|
|
||
| import '../../flutter/screen.dart'; | ||
|
|
||
| class DebuggerScreen extends Screen { | ||
|
There was a problem hiding this comment. this file turned out nice and simple. |
||
| const DebuggerScreen() : super('Debugger'); | ||
|
|
||
| @override | ||
| Widget build(BuildContext context) { | ||
| return DebuggerScreenBody(); | ||
| } | ||
|
|
||
| @override | ||
| Widget buildTab(BuildContext context) { | ||
| return Tab( | ||
| text: 'Debugger', | ||
| icon: Icon(Octicons.getIconData('bug')), | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| class DebuggerScreenBody extends StatelessWidget { | ||
| @override | ||
| Widget build(BuildContext context) { | ||
| if (!kIsWeb) { | ||
| final theme = Theme.of(context); | ||
| final textStyle = Theme.of(context) | ||
| .textTheme | ||
| .headline | ||
| .copyWith(color: theme.accentColor); | ||
| return Center( | ||
| child: Text( | ||
| 'The debugger screen is only available when running DevTools as a web' | ||
| 'app.\n' | ||
| '\n' | ||
| 'It is implemented as a webview, which is not available in Flutter ' | ||
| 'desktop embedding.', | ||
| style: textStyle, | ||
| textAlign: TextAlign.center, | ||
| ), | ||
| ); | ||
| } | ||
|
|
||
| // TODO(https://github.com/flutter/flutter/issues/43532): Don't build const | ||
| // because compile time const evaluation will fail on non-web apps. | ||
| // ignore:prefer_const_constructors | ||
|
There was a problem hiding this comment. Use conditional imports instead of hacking around the const limitations. On the web you would have this Screen widget. There was a problem hiding this comment. We should treat this as a bug in Flutter. Android and iOS native view widgets do not have this issue when building. I want to make sure that future Flutter for web users don't need to be a special case. For showing platform views, we should be able to get a pattern like switch(platform) {
case Platform.android:
return AndroidView(name);
case Platform.web:
return HtmlElementView(name);
case Platform.macos:
return MacosView(name);
// etc.
} |
||
| final webView = HtmlElementView( | ||
| viewType: 'DebuggerFlutterPlugin', | ||
| ); | ||
|
|
||
| // Wrap the content with an EagerGestureRecognizer to pass all mouse | ||
| // events to the web view. | ||
| return RawGestureDetector( | ||
| gestures: { | ||
| EagerGestureRecognizer: _EagerGestureFactory(PointerDeviceKind.mouse), | ||
| }, | ||
| child: webView, | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| class _EagerGestureFactory | ||
| extends GestureRecognizerFactory<EagerGestureRecognizer> { | ||
| _EagerGestureFactory(this.kind); | ||
|
|
||
| final PointerDeviceKind kind; | ||
|
|
||
| @override | ||
| EagerGestureRecognizer constructor() => EagerGestureRecognizer(kind: kind); | ||
|
|
||
| @override | ||
| void initializer(EagerGestureRecognizer instance) {} | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,2 @@ | ||
| #include "Pods/Target Support Files/Pods-Runner/Pods-Runner.debug.xcconfig" | ||
| #include "ephemeral/Flutter-Generated.xcconfig" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,2 @@ | ||
| #include "Pods/Target Support Files/Pods-Runner/Pods-Runner.release.xcconfig" | ||
| #include "ephemeral/Flutter-Generated.xcconfig" |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
including all of html_framework.dart worries me a bit as there is going to be a bunch of intentional overlap with the flutter framework.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We need to quantify exactly which functionality needs to get tied in with Flutter. We can discuss this in detail in #1259