Skip to content

Commit

Permalink
[web] Render in custom target (flutter#37738)
Browse files Browse the repository at this point in the history
* Introduce FullScreenApplicationDom, and wire it to meta viewport, event handlers and hot restart.

* Move internal stylesheet to HostNode from ViewEmbedder.

* Add setHostStyles and Attribute to ApplicationDom. Use it in the embedder.

* Move HotRestartCacheHandler to its own file.

* Remove Safari hack for visualViewport.

* No need to keep a ref to the viewport meta in full-screen.

* Add applicationDom.attachGlassPane and use it in the Embedder.

* Remove empty method bodies.

* Add attachResourcesHost and use it from the embedder.

* Removed some unused code.

* Some more cleanup.

* Add ResizeObserver JS interop API.

* Add the CustomElementApplicationDom and wire it to the ViewEmbedder.

* Add the DimensionsProvider classes.

* Reimplement engine.window using the DimensionsProvider.

* Delegate window metrics to engine window in html scene object.

* Wire DimensionsProvider into engine.window.

* Moved ApplicationDom into its own subdir.

* Make DimensionsProvider also an Observer. Expose onResize Stream.

* Delegate onResize and dpr from window to DimensionsObserver object.

* Remove or make most ApplicationDom methods private. Expose single initializeHost.

* Hook the new API.

* dart format

* ApplicationDom -> EmbeddingStrategy.

* Attach pointer move events to glassPaneElement

* Use offset positions for mouse events (relative to host element) rather than client (relative to viewport)

* Update TouchAdapter to understand scrolling (simulate offsetX/Y)

* Remove locale change handling from the embedding strategy.

Also, remove DomSubscription handling from the
hot_restart_cache_handler, now that it is not needed.

* Move locale handling from the embedder to the platform dispatcher

* Move some styles from host to glassPane so we are more friendly with external CSS.

* Make analyzer fixes

* Ensure DimensionsProvider is available in tests.

* Initialize the view DimensionsProvider next to where the EmbeddingStrategy is decided (more logical)

* Bring back the logic to support Firefox 83.

* Fix pointer_binding test for new anchor point in the DOM.

* Fix pointer_binding_test in Firefox.

* Add an iterable way of accessing 'rules'

From a CSSStyleSheet object.

Also add the cssText getter for a CSSRule so we can parse it later.

* Merge latest changes to host_node stylesheet.

* Add an id to the StyleSheet element that we add, so it can be selected
  later (in tests).
* Use the methods coming from browser_detection.dart to determine the
  browser runtime, instead of re-implementing them within the method.
* Merge the Edge stylesheet into the general one.
* Update tests so they can look at the CSS Rules that were added.

* Format test

* Try to use insertRule for -ms-reveal, and fallback in tests.

* Test hot_restart_cache_handler

Simplify API a little bit, make clear method private.

* Test dimensions_provider.

* Test full_page_dimensions_provider

* Test custom_element_dimensions_provider

* Test embedding_strategy. Make getDomCache util public.

* Fixes and tests for *_embedding_strategy.

* Move default text colors to our innermost style inside host_node (apply only to flt-scene-host). Remove code from the embedding strategies, and adjust tests.

* Safari expands shorthand properties in CSSOM.

Check individually for both font-family and font-size in Safari, rather
than font in the host_node_test.

* Add computeEventOffsetToTarget function, and use it.

* Address PR comments.

* Update licenses_flutter.

* Remove DomCSSRuleList class and instead use Iterable of DomCSSRule

* Make the embeddingStrategy final instead of late

* Attach mouse/pointermove events to domWindow.

* Rename DimensionsProvider.onHotRestart to .close, and slightly improve docs.

* Fix compute physicalX/Y for TalkBack events.

Extracted compute function to a helper file.

* Clarify what does (and does not) support 3D transforms in the event_position_helper file.

* Update licenses file
  • Loading branch information
ditman authored Dec 22, 2022
1 parent 234ab4c commit 2358215
Show file tree
Hide file tree
Showing 26 changed files with 1,951 additions and 491 deletions.
16 changes: 16 additions & 0 deletions ci/licenses_golden/licenses_flutter
Original file line number Diff line number Diff line change
Expand Up @@ -1962,6 +1962,7 @@ ORIGIN: ../../../flutter/lib/web_ui/lib/src/engine/platform_views/message_handle
ORIGIN: ../../../flutter/lib/web_ui/lib/src/engine/platform_views/slots.dart + ../../../flutter/LICENSE
ORIGIN: ../../../flutter/lib/web_ui/lib/src/engine/plugins.dart + ../../../flutter/LICENSE
ORIGIN: ../../../flutter/lib/web_ui/lib/src/engine/pointer_binding.dart + ../../../flutter/LICENSE
ORIGIN: ../../../flutter/lib/web_ui/lib/src/engine/pointer_binding/event_position_helper.dart + ../../../flutter/LICENSE
ORIGIN: ../../../flutter/lib/web_ui/lib/src/engine/pointer_converter.dart + ../../../flutter/LICENSE
ORIGIN: ../../../flutter/lib/web_ui/lib/src/engine/profiler.dart + ../../../flutter/LICENSE
ORIGIN: ../../../flutter/lib/web_ui/lib/src/engine/raw_keyboard.dart + ../../../flutter/LICENSE
Expand Down Expand Up @@ -2017,6 +2018,13 @@ ORIGIN: ../../../flutter/lib/web_ui/lib/src/engine/ulps.dart + ../../../flutter/
ORIGIN: ../../../flutter/lib/web_ui/lib/src/engine/util.dart + ../../../flutter/LICENSE
ORIGIN: ../../../flutter/lib/web_ui/lib/src/engine/validators.dart + ../../../flutter/LICENSE
ORIGIN: ../../../flutter/lib/web_ui/lib/src/engine/vector_math.dart + ../../../flutter/LICENSE
ORIGIN: ../../../flutter/lib/web_ui/lib/src/engine/view_embedder/dimensions_provider/custom_element_dimensions_provider.dart + ../../../flutter/LICENSE
ORIGIN: ../../../flutter/lib/web_ui/lib/src/engine/view_embedder/dimensions_provider/dimensions_provider.dart + ../../../flutter/LICENSE
ORIGIN: ../../../flutter/lib/web_ui/lib/src/engine/view_embedder/dimensions_provider/full_page_dimensions_provider.dart + ../../../flutter/LICENSE
ORIGIN: ../../../flutter/lib/web_ui/lib/src/engine/view_embedder/embedding_strategy/custom_element_embedding_strategy.dart + ../../../flutter/LICENSE
ORIGIN: ../../../flutter/lib/web_ui/lib/src/engine/view_embedder/embedding_strategy/embedding_strategy.dart + ../../../flutter/LICENSE
ORIGIN: ../../../flutter/lib/web_ui/lib/src/engine/view_embedder/embedding_strategy/full_page_embedding_strategy.dart + ../../../flutter/LICENSE
ORIGIN: ../../../flutter/lib/web_ui/lib/src/engine/view_embedder/hot_restart_cache_handler.dart + ../../../flutter/LICENSE
ORIGIN: ../../../flutter/lib/web_ui/lib/src/engine/window.dart + ../../../flutter/LICENSE
ORIGIN: ../../../flutter/lib/web_ui/lib/text.dart + ../../../flutter/LICENSE
ORIGIN: ../../../flutter/lib/web_ui/lib/tile_mode.dart + ../../../flutter/LICENSE
Expand Down Expand Up @@ -4413,6 +4421,7 @@ FILE: ../../../flutter/lib/web_ui/lib/src/engine/platform_views/message_handler.
FILE: ../../../flutter/lib/web_ui/lib/src/engine/platform_views/slots.dart
FILE: ../../../flutter/lib/web_ui/lib/src/engine/plugins.dart
FILE: ../../../flutter/lib/web_ui/lib/src/engine/pointer_binding.dart
FILE: ../../../flutter/lib/web_ui/lib/src/engine/pointer_binding/event_position_helper.dart
FILE: ../../../flutter/lib/web_ui/lib/src/engine/pointer_converter.dart
FILE: ../../../flutter/lib/web_ui/lib/src/engine/profiler.dart
FILE: ../../../flutter/lib/web_ui/lib/src/engine/raw_keyboard.dart
Expand Down Expand Up @@ -4468,6 +4477,13 @@ FILE: ../../../flutter/lib/web_ui/lib/src/engine/ulps.dart
FILE: ../../../flutter/lib/web_ui/lib/src/engine/util.dart
FILE: ../../../flutter/lib/web_ui/lib/src/engine/validators.dart
FILE: ../../../flutter/lib/web_ui/lib/src/engine/vector_math.dart
FILE: ../../../flutter/lib/web_ui/lib/src/engine/view_embedder/dimensions_provider/custom_element_dimensions_provider.dart
FILE: ../../../flutter/lib/web_ui/lib/src/engine/view_embedder/dimensions_provider/dimensions_provider.dart
FILE: ../../../flutter/lib/web_ui/lib/src/engine/view_embedder/dimensions_provider/full_page_dimensions_provider.dart
FILE: ../../../flutter/lib/web_ui/lib/src/engine/view_embedder/embedding_strategy/custom_element_embedding_strategy.dart
FILE: ../../../flutter/lib/web_ui/lib/src/engine/view_embedder/embedding_strategy/embedding_strategy.dart
FILE: ../../../flutter/lib/web_ui/lib/src/engine/view_embedder/embedding_strategy/full_page_embedding_strategy.dart
FILE: ../../../flutter/lib/web_ui/lib/src/engine/view_embedder/hot_restart_cache_handler.dart
FILE: ../../../flutter/lib/web_ui/lib/src/engine/window.dart
FILE: ../../../flutter/lib/web_ui/lib/text.dart
FILE: ../../../flutter/lib/web_ui/lib/tile_mode.dart
Expand Down
8 changes: 8 additions & 0 deletions lib/web_ui/lib/src/engine.dart
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,7 @@ export 'engine/platform_views/message_handler.dart';
export 'engine/platform_views/slots.dart';
export 'engine/plugins.dart';
export 'engine/pointer_binding.dart';
export 'engine/pointer_binding/event_position_helper.dart';
export 'engine/pointer_converter.dart';
export 'engine/profiler.dart';
export 'engine/raw_keyboard.dart';
Expand Down Expand Up @@ -170,4 +171,11 @@ export 'engine/text_editing/text_editing.dart';
export 'engine/util.dart';
export 'engine/validators.dart';
export 'engine/vector_math.dart';
export 'engine/view_embedder/dimensions_provider/custom_element_dimensions_provider.dart';
export 'engine/view_embedder/dimensions_provider/dimensions_provider.dart';
export 'engine/view_embedder/dimensions_provider/full_page_dimensions_provider.dart';
export 'engine/view_embedder/embedding_strategy/custom_element_embedding_strategy.dart';
export 'engine/view_embedder/embedding_strategy/embedding_strategy.dart';
export 'engine/view_embedder/embedding_strategy/full_page_embedding_strategy.dart';
export 'engine/view_embedder/hot_restart_cache_handler.dart';
export 'engine/window.dart';
86 changes: 82 additions & 4 deletions lib/web_ui/lib/src/engine/dom.dart
Original file line number Diff line number Diff line change
Expand Up @@ -174,6 +174,7 @@ class DomEvent {}

extension DomEventExtension on DomEvent {
external DomEventTarget? get target;
external DomEventTarget? get currentTarget;
external double? get timeStamp;
external String get type;
external void preventDefault();
Expand Down Expand Up @@ -461,6 +462,9 @@ class DomHTMLElement extends DomElement {}

extension DomHTMLElementExtension on DomHTMLElement {
external double get offsetWidth;
external double get offsetLeft;
external double get offsetTop;
external DomHTMLElement? get offsetParent;
}

@JS()
Expand Down Expand Up @@ -1089,6 +1093,8 @@ extension DomMouseEventExtension on DomMouseEvent {
external double get clientY;
external double get offsetX;
external double get offsetY;
external double get pageX;
external double get pageY;
DomPoint get client => DomPoint(clientX, clientY);
DomPoint get offset => DomPoint(offsetX, offsetY);
external double get button;
Expand Down Expand Up @@ -1312,7 +1318,10 @@ class DomStyleSheet {}
class DomCSSStyleSheet extends DomStyleSheet {}

extension DomCSSStyleSheetExtension on DomCSSStyleSheet {
external DomCSSRuleList get cssRules;
Iterable<DomCSSRule> get cssRules =>
createDomListWrapper<DomCSSRule>(js_util
.getProperty<_DomList>(this, 'cssRules'));

double insertRule(String rule, [int? index]) => js_util
.callMethod<double>(
this, 'insertRule',
Expand All @@ -1323,6 +1332,12 @@ extension DomCSSStyleSheetExtension on DomCSSStyleSheet {
@staticInterop
class DomCSSRule {}

@JS()
@staticInterop
extension DomCSSRuleExtension on DomCSSRule {
external String get cssText;
}

@JS()
@staticInterop
class DomScreen {}
Expand Down Expand Up @@ -1420,12 +1435,75 @@ extension DomMessageChannelExtension on DomMessageChannel {
external DomMessagePort get port2;
}

/// ResizeObserver JS binding.
///
/// See: https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver
@JS()
@staticInterop
class DomCSSRuleList {}
abstract class DomResizeObserver {}

extension DomCSSRuleListExtension on DomCSSRuleList {
external double get length;
/// Creates a DomResizeObserver with a callback.
///
/// Internally converts the `List<dynamic>` of entries into the expected
/// `List<DomResizeObserverEntry>`
DomResizeObserver? createDomResizeObserver(DomResizeObserverCallbackFn fn) {
return domCallConstructorString('ResizeObserver', <Object?>[
allowInterop(
(List<dynamic> entries, DomResizeObserver observer) {
fn(entries.cast<DomResizeObserverEntry>(), observer);
}
),
]) as DomResizeObserver?;
}

/// ResizeObserver instance methods.
///
/// See: https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver#instance_methods
extension DomResizeObserverExtension on DomResizeObserver {
external void disconnect();
external void observe(DomElement target, [DomResizeObserverObserveOptions options]);
external void unobserve(DomElement target);
}

/// Options object passed to the `observe` method of a [DomResizeObserver].
///
/// See: https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/observe#parameters
@JS()
@staticInterop
@anonymous
abstract class DomResizeObserverObserveOptions {
external factory DomResizeObserverObserveOptions({
String box,
});
}

/// Type of the function used to create a Resize Observer.
typedef DomResizeObserverCallbackFn = void Function(List<DomResizeObserverEntry> entries, DomResizeObserver observer);

/// The object passed to the [DomResizeObserverCallbackFn], which allows access to the new dimensions of the observed element.
///
/// See: https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry
@JS()
@staticInterop
abstract class DomResizeObserverEntry {}

/// ResizeObserverEntry instance properties.
///
/// See: https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry#instance_properties
extension DomResizeObserverEntryExtension on DomResizeObserverEntry {
/// A DOMRectReadOnly object containing the new size of the observed element when the callback is run.
///
/// Note that this is better supported than the above two properties, but it
/// is left over from an earlier implementation of the Resize Observer API, is
/// still included in the spec for web compat reasons, and may be deprecated
/// in future versions.
external DomRectReadOnly get contentRect;
external DomElement get target;
// Some more future getters:
//
// borderBoxSize
// contentBoxSize
// devicePixelContentBoxSize
}

/// A factory to create `TrustedTypePolicy` objects.
Expand Down
Loading

0 comments on commit 2358215

Please sign in to comment.