Make the web engine publish view forward focus and unfocus events #50177

tugorez · 2024-01-30T18:18:41Z

Make the flutter web engine publish view focus events.

Relevant Issues are:

Design doc link: https://flutter.dev/go/focus-management
Design doc: Focus management flutter#141711
Focus in web multiview: [web:multi-view] Make keyboard and focus multi-view aware flutter#137443
Platform dispatcher changes: Add the focus state related methods to the platform dispatcher #49841

Pre-launch Checklist

I read the Contributor Guide and followed the process outlined there for submitting PRs.
I read the Tree Hygiene wiki page, which explains my responsibilities.
I read and followed the Flutter Style Guide and the C++, Objective-C, Java style guides.
I listed at least one issue that this PR fixes in the description above.
I added new tests to check the change I am making or feature I am adding, or the PR is test-exempt. See testing the engine for instructions on writing and running engine tests.
I updated/added relevant documentation (doc comments with ///).
I signed the CLA.
All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel on Discord.

lib/web_ui/lib/src/engine/view_embedder/dom_manager.dart

lib/web_ui/lib/src/engine/view_embedder/flutter_view_manager.dart

lib/web_ui/lib/src/engine/view_embedder/dom_manager.dart

ditman

Some small changes and comments. Thanks for this!

lib/web_ui/lib/src/engine/view_embedder/flutter_view_manager.dart

lib/web_ui/test/engine/view_embedder/flutter_view_manager_test.dart

lib/web_ui/lib/src/engine/view_embedder/flutter_view_manager.dart

ditman

This is looking pretty great to me!

QQ is there any way that I can use this to build my old element embedding demos to see if this yields the focus better, or are flutter framework parts still missing for this to fully work?

lib/web_ui/lib/src/engine/dom.dart

lib/web_ui/lib/src/engine/initialization.dart

lib/web_ui/lib/src/engine/platform_dispatcher/view_focus_binding.dart

ditman · 2024-02-08T02:15:37Z

lib/web_ui/lib/src/engine/platform_dispatcher/view_focus_binding.dart

+      return;
+    }
+
+    late final ui.ViewFocusEvent event;


No need to mark a local variable as late final if it's going to be initialized and returned immediately!

It can't be just final as it access other fields/methods in the instance.

lib/web_ui/lib/src/engine/platform_dispatcher/view_focus_binding.dart

tugorez · 2024-02-08T16:56:33Z

This is looking pretty great to me!

Thank you David 🤝. I do appreciate your feedback and thoughtful reviews, thank you!

QQ is there any way that I can use this to build my old element embedding demos to see if this yields the focus better, or are flutter framework parts still missing for this to fully work

No, you can't test any of these things yet end to end. FYI @gspencergoog will be driving the framework changes.

ditman

If @mdebbar is happy, I'm happy. LGTM!

ditman · 2024-02-09T02:56:26Z

lib/web_ui/lib/src/engine/platform_dispatcher/view_focus_binding.dart

+extension on DomElement? {
+  int? get viewId => int.tryParse(viewIdAttribute ?? '');
+  String? get viewIdAttribute => closestView?.getAttribute(GlobalHtmlAttributes.flutterViewIdAttributeName);
+  DomElement? get closestView => this?.closest(DomManager.flutterViewTagName);
+}


Is this extension available outside of this file? If so, please remove, it's hyper-specific to what you're trying to do. If it's only available here, carry on! Fancy!

Great question. AFAICT no, unnamed extensions can only be used within the library where they're declared.

https://dart.dev/language/extension-methods#unnamed-extensions

mdebbar

LGTM with some minor suggestions that are not blockers.

lib/web_ui/lib/src/engine/platform_dispatcher/view_focus_binding.dart

+      return;
+    }
+
+    late final ui.ViewFocusEvent event;


lib/web_ui/lib/src/engine/platform_dispatcher/view_focus_binding.dart

+extension on DomElement? {
+  int? get viewId => int.tryParse(viewIdAttribute ?? '');
+  String? get viewIdAttribute => closestView?.getAttribute(GlobalHtmlAttributes.flutterViewIdAttributeName);
+  DomElement? get closestView => this?.closest(DomManager.flutterViewTagName);
+}


lib/web_ui/lib/src/engine/platform_dispatcher/view_focus_binding.dart

+extension on DomElement? {
+  int? get viewId => int.tryParse(viewIdAttribute ?? '');
+  String? get viewIdAttribute => closestView?.getAttribute(GlobalHtmlAttributes.flutterViewIdAttributeName);
+  DomElement? get closestView => this?.closest(DomManager.flutterViewTagName);
+}


tugorez · 2024-02-09T18:03:00Z

It is technically available to the entire engine in release mode (after we process sources through the sdk_rewriter, the entire engine is combined into a single library with part files).

Ohhhhhhh awesome feedback @mdebbar . I wasn't aware of this and similar differences between the engine and a regular dart program. Where can I read more about this rewriting process?

Decided it is best to keep everything within the class then. The extensions were removed.

mdebbar · 2024-02-09T18:09:16Z

Where can I read more about this rewriting process?

There's no documentation about this AFAIK. But here's where we do the rewriting:

The sdk rewriter implementation: https://github.com/flutter/engine/blob/main/web_sdk/sdk_rewriter.dart

The gn build template for invoking the rewriter:

engine/web_sdk/web_sdk.gni

Lines 10 to 75 in 8c521eb

    
           template("sdk_rewriter") { 
        
             ui = defined(invoker.ui) && invoker.ui 
        
             if (!ui) { 
        
               assert(defined(invoker.library_name), "Must pass 'library_name'") 
        
               assert(defined(invoker.api_file), "Must pass 'api_file'") 
        
             } 
        
             assert(defined(invoker.input_dir), "Must pass 'input_dir'") 
        
             assert(defined(invoker.output_dir), "Must pass 'output_dir'") 
        
             source_dart_files = exec_script("//third_party/dart/tools/list_dart_files.py", 
        
                                             [ 
        
                                               "absolute", 
        
                                               rebase_path(invoker.input_dir), 
        
                                             ], 
        
                                             "list lines") 
        
             if (defined(invoker.exclude_patterns)) { 
        
               filtered_files = filter_exclude(source_dart_files, invoker.exclude_patterns) 
        
               source_dart_files = [] 
        
               source_dart_files = filtered_files 
        
             } 
        
             prebuilt_dart_action(target_name) { 
        
               packages = dart_sdk_package_config 
        
               pool = "//flutter/build/dart:dart_pool" 
        
               script = "//flutter/web_sdk/sdk_rewriter.dart" 
        
               inputs = source_dart_files + [ script ] 
        
               stamp_location = "$target_gen_dir/$target_name.stamp" 
        
               outputs = [ 
        
                 stamp_location, 
        
                 invoker.output_dir, 
        
               ] 
        
               input_dir = rebase_path(invoker.input_dir) 
        
               output_dir = rebase_path(invoker.output_dir) 
        
               args = [ 
        
                 "--output-dir=$output_dir", 
        
                 "--input-dir=$input_dir", 
        
                 "--stamp", 
        
                 rebase_path(stamp_location, root_build_dir), 
        
               ] 
        
               if (defined(invoker.is_public) && invoker.is_public) { 
        
                 args += [ "--public" ] 
        
               } 
        
               if (ui) { 
        
                 args += [ "--ui" ] 
        
               } else { 
        
                 library_name = invoker.library_name 
        
                 api_file = rebase_path(invoker.api_file) 
        
                 args += [ 
        
                   "--library-name=$library_name", 
        
                   "--api-file=$api_file", 
        
                 ] 
        
               } 
        
               foreach(source_file, source_dart_files) { 
        
                 path = rebase_path(source_file) 
        
                 args += [ "--source-file=$path" ] 
        
               } 
        
             } 
        
           }

The invocations of the rewriter over various sub-parts of the engine:

engine/web_sdk/BUILD.gn

Lines 38 to 45 in 8c521eb

    
           sdk_rewriter("web_ui_library_sources") { 
        
             ui = true 
        
             input_dir = "//flutter/lib/web_ui/lib/" 
        
             output_dir = "$root_out_dir/flutter_web_sdk/lib/ui/" 
        
             # exclude everything in the engine directory, it will be a separate internal library 
        
             exclude_patterns = [ rebase_path("//flutter/lib/web_ui/lib/src/*") ] 
        
           }

engine/web_sdk/BUILD.gn

Lines 51 to 60 in 8c521eb

    
           sdk_rewriter("web_engine_library") { 
        
             library_name = "engine" 
        
             api_file = "//flutter/lib/web_ui/lib/src/engine.dart" 
        
             input_dir = "//flutter/lib/web_ui/lib/src/engine/" 
        
             output_dir = "$root_out_dir/flutter_web_sdk/lib/_engine/" 
        
             # exclude skwasm, it will be a separate internal library 
        
             exclude_patterns = 
        
                 [ rebase_path("//flutter/lib/web_ui/lib/src/engine/skwasm/*") ] 
        
           }

auto-submit · 2024-02-09T18:20:05Z

auto label is removed for flutter/engine/50177, due to - The status or check suite Linux Fuchsia FEMU has failed. Please fix the issues identified (or deflake) before re-applying this label.

auto-submit · 2024-02-09T20:18:58Z

auto label is removed for flutter/engine/50177, due to - The status or check suite Linux mac_unopt has failed. Please fix the issues identified (or deflake) before re-applying this label.

auto-submit · 2024-02-09T22:51:48Z

auto label is removed for flutter/engine/50177, due to - The status or check suite Linux Fuchsia FEMU has failed. Please fix the issues identified (or deflake) before re-applying this label.

…events (flutter/engine#50177)

…143264) flutter/engine@1b8f23b...e08b6c8 2024-02-10 dnfield@google.com Clean up additional NDK helper related code (flutter/engine#50518) 2024-02-09 tugorez@users.noreply.github.com Make the web engine publish view forward focus and unfocus events (flutter/engine#50177) If this roll has caused a breakage, revert this CL and stop the roller using the controls here: https://autoroll.skia.org/r/flutter-engine-flutter-autoroll Please CC chinmaygarde@google.com,rmistry@google.com,zra@google.com on the revert to ensure that a human is aware of the problem. To file a bug in Flutter: https://github.com/flutter/flutter/issues/new/choose To report a problem with the AutoRoller itself, please file a bug: https://issues.skia.org/issues/new?component=1389291&template=1850622 Documentation for the AutoRoller is here: https://skia.googlesource.com/buildbot/+doc/main/autoroll/README.md

github-actions bot added the platform-web Code specifically for the web engine label Jan 30, 2024

tugorez changed the title ~~Focus management web~~ Make the web engine publish view focus events Jan 30, 2024

tugorez force-pushed the focus-management-web branch from 00f7be0 to 2183faa Compare January 30, 2024 19:20

tugorez changed the title ~~Make the web engine publish view focus events~~ Make the web engine publish view forward focus and unfocus events Jan 30, 2024

mdebbar reviewed Feb 1, 2024

View reviewed changes

tugorez force-pushed the focus-management-web branch 3 times, most recently from 03883f4 to f233cb5 Compare February 1, 2024 21:21

tugorez marked this pull request as ready for review February 1, 2024 21:31

tugorez requested review from ditman and mdebbar February 2, 2024 17:35

tugorez force-pushed the focus-management-web branch 2 times, most recently from c0b5081 to fcbfd29 Compare February 2, 2024 18:33

tugorez mentioned this pull request Feb 2, 2024

Copy the analyze_snippet_code.dart script in the engine repo and make it a PR blocker. flutter/flutter#142834

Open

tugorez commented Feb 2, 2024

View reviewed changes

lib/web_ui/lib/src/engine/view_embedder/dom_manager.dart Outdated Show resolved Hide resolved

tugorez force-pushed the focus-management-web branch from ae2cce1 to da93ed6 Compare February 6, 2024 18:33

ditman requested changes Feb 7, 2024

View reviewed changes

tugorez force-pushed the focus-management-web branch 4 times, most recently from 53a7c17 to 8084028 Compare February 7, 2024 21:59

tugorez requested a review from ditman February 7, 2024 22:05

tugorez force-pushed the focus-management-web branch 2 times, most recently from 69f7fcb to 09b0bd2 Compare February 7, 2024 22:31

ditman reviewed Feb 8, 2024

View reviewed changes

tugorez force-pushed the focus-management-web branch 3 times, most recently from 977866d to f8ec60c Compare February 8, 2024 16:53

tugorez force-pushed the focus-management-web branch from f8ec60c to 1efdf2c Compare February 8, 2024 17:00

tugorez requested a review from ditman February 8, 2024 18:59

tugorez force-pushed the focus-management-web branch from 7ae2195 to d01dfb9 Compare February 8, 2024 22:37

ditman approved these changes Feb 9, 2024

View reviewed changes

mdebbar approved these changes Feb 9, 2024

View reviewed changes

Make the web engine publish view forward focus and unfocus events

1642798

tugorez force-pushed the focus-management-web branch from d01dfb9 to 1642798 Compare February 9, 2024 17:59

tugorez added the autosubmit Merge PR when tree becomes green via auto submit App label Feb 9, 2024

auto-submit bot removed the autosubmit Merge PR when tree becomes green via auto submit App label Feb 9, 2024

Merge branch 'main' into focus-management-web

99596bf

tugorez added the autosubmit Merge PR when tree becomes green via auto submit App label Feb 9, 2024

auto-submit bot removed the autosubmit Merge PR when tree becomes green via auto submit App label Feb 9, 2024

tugorez added the autosubmit Merge PR when tree becomes green via auto submit App label Feb 9, 2024

Merge branch 'main' into focus-management-web

13643af

auto-submit bot removed the autosubmit Merge PR when tree becomes green via auto submit App label Feb 9, 2024

tugorez added the autosubmit Merge PR when tree becomes green via auto submit App label Feb 9, 2024

auto-submit bot merged commit 5e0df01 into flutter:main Feb 9, 2024
28 checks passed

tugorez deleted the focus-management-web branch February 9, 2024 23:30

engine-flutter-autoroll mentioned this pull request Feb 10, 2024

Roll Flutter Engine from 1b8f23bbd099 to 5e0df0151485 (1 revision) flutter/flutter#143263

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/flutter that referenced this pull request Feb 10, 2024

5e0df0151 Make the web engine publish view forward focus and unfocus …

94c1450

…events (flutter/engine#50177)

engine-flutter-autoroll mentioned this pull request Feb 10, 2024

Roll Flutter Engine from 1b8f23bbd099 to e08b6c899c42 (2 revisions) flutter/flutter#143264

Merged

engine-flutter-autoroll added a commit to engine-flutter-autoroll/flutter that referenced this pull request Feb 10, 2024

5e0df0151 Make the web engine publish view forward focus and unfocus …

7f46c9b

…events (flutter/engine#50177)

ditman mentioned this pull request Feb 14, 2024

Make the view focus binding report focus transitions across elements. #50610

Merged

8 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Make the web engine publish view forward focus and unfocus events #50177

Make the web engine publish view forward focus and unfocus events #50177

tugorez commented Jan 30, 2024 •

edited by parlough

Loading

ditman left a comment

ditman left a comment

ditman Feb 8, 2024

tugorez Feb 8, 2024

This comment was marked as resolved.

tugorez commented Feb 8, 2024

ditman left a comment

ditman Feb 9, 2024

tugorez Feb 9, 2024

This comment was marked as outdated.

This comment was marked as outdated.

mdebbar left a comment

This comment was marked as resolved.

This comment was marked as outdated.

This comment was marked as outdated.

tugorez commented Feb 9, 2024

mdebbar commented Feb 9, 2024

auto-submit bot commented Feb 9, 2024

auto-submit bot commented Feb 9, 2024

auto-submit bot commented Feb 9, 2024

Make the web engine publish view forward focus and unfocus events #50177

Make the web engine publish view forward focus and unfocus events #50177

Conversation

tugorez commented Jan 30, 2024 • edited by parlough Loading

Pre-launch Checklist

ditman left a comment

Choose a reason for hiding this comment

ditman left a comment

Choose a reason for hiding this comment

ditman Feb 8, 2024

Choose a reason for hiding this comment

tugorez Feb 8, 2024

Choose a reason for hiding this comment

This comment was marked as resolved.

tugorez commented Feb 8, 2024

ditman left a comment

Choose a reason for hiding this comment

ditman Feb 9, 2024

Choose a reason for hiding this comment

tugorez Feb 9, 2024

Choose a reason for hiding this comment

This comment was marked as outdated.

This comment was marked as outdated.

mdebbar left a comment

Choose a reason for hiding this comment

This comment was marked as resolved.

This comment was marked as outdated.

This comment was marked as outdated.

tugorez commented Feb 9, 2024

mdebbar commented Feb 9, 2024

auto-submit bot commented Feb 9, 2024

auto-submit bot commented Feb 9, 2024

auto-submit bot commented Feb 9, 2024

tugorez commented Jan 30, 2024 •

edited by parlough

Loading