Skip to content
This repository was archived by the owner on Feb 25, 2025. It is now read-only.

[web] Build multiple CanvasKit variants (using toolchain_args) #38448

Merged
merged 21 commits into from
Jan 23, 2023

Conversation

mdebbar
Copy link
Contributor

@mdebbar mdebbar commented Dec 21, 2022

I'm not sure if this is the right way to do it, but I wanted to start the conversation and iterate based on feedback from people who know more about the gn world than I do


The end goal here is to be able to build multiple CanvasKit variants for Flutter Web (e.g. one light, stripped down variant for Chromium; and one for other browsers).

I've found multiple ways to do this:

1. Python or shell script

The script would cd into //third_party/skia/modules/canvaskit and build CanvasKit in there (similar to how the CanvasKit team does it via compile.sh). The script has full control over the flags it passes to the CanvasKit build.

The script can then be called from web_sdk/BUILD.gn using an action(target_name). It can be called multiple times, one for each variant we need.

Pros/cons:

  • ✅ Straightforward to implement and maintain.
  • ❌ Requires doing ./bin/sync inside //third_party/skia to install all its deps (equivalent of gclient sync).
  • ❌ Skia dependencies are 5GB+

2. Using toolchain_args

Today, we add CanvasKit as a dep in web_sdk/BUILD.gn and we rely on the global gn args set by tools/gn to configure the CanvasKit/Skia build. This means we can only have a single variant of CanvasKit.

In order to be able to have multiple variants of CanvasKit with different flags, we could use a different toolchain with different toolchain_args. To my (limited) knowledge, toolchain_args can override the global gn args.

This is the approach I'm taking in this PR.

Pros/cons:

  • ✅ Can fit into our existing build and tools/gn.
  • ❌ Leads to confusion because the resulting CanvasKit build won't match whatever is in args.gn.
  • ❌ I don't understand the full ramifications of using a different toolchain to build CanvasKit.

3. Separate gn for building CanvasKit alone

Bypass tools/gn and create a canvaskit target that can be built alone without all the other ceremony that Flutter does. This new gn can be called multiple times to build multiple variants of CanvasKit with different flags. It can also be pointed to an out folder that makes sense (e.g. out/wasm_release/canvaskit1) so that it looks like part of the wasm_release build (and potentially easier for the flutter tool to deal with).

This is the approach I'm taking in this PR.

Pros/cons:

  • ✅ Straightforward to implement and maintain.
  • Might be the idiomatic way of doing things in gn?
  • ❌ Another tool has to invoke CanvasKit's new gn along with the usual invocations of tools/gn (this tool would probably be felt for the flutter web engine).

A full flutter web engine build would like:

  • Use tools/gn --web to build the Flutter Web Engine at out/wasm_release.
  • Use third_party/canvaskit/gn to build a full variant of CanvasKit at out/wasm_release/canvaskit.
  • Use third_party/canvaskit/gn --no-icu --no-decoders to build a light variant of CanvasKit at out/wasm_release/canvaskit_light.

Depends on flutter/buildroot#663
Depends on https://skia-review.googlesource.com/c/skia/+/616799

Fixes flutter/flutter#118746

@zanderso
Copy link
Member

The straightforward, though more expensive, way to accomplish this in our current build system, as well as with the engine_v2 recipes, is to do two complete builds, for example one under out/wasm_release and one under out/wasm_release_lite, then pick and choose the artifacts needed from each at the packaging/testing step. This is the approach that is used for variants of the native engine.

We haven't done this in the Flutter engine build, yet, but the idiomatic way to do this in GN without doing two completely separate builds is (2). AFAIK it isn't a big concern, but we can take steps to alleviate confusion about the contents of args.gn by ensuring that it contains either nothing or meaningless defaults for the impacted args. Then, those args are overridden in the toolchain definition. Previously, a bigger concern about this approach was around introducing multiple wasm toolchain definitions: one (or a collection) for CanvasKit, and a different one for everything else. My opinion is that this isn't a huge problem as long as the toolchain definitions for CanvasKit don't override anything unrelated to Skia/CanvasKit, and we employ GN visibility declarations and asserts to ensure that the CanvasKit toolchains aren't used for anything else.

@mdebbar mdebbar changed the title [web] New gn for building CanvasKit [web] Override CanvasKit gn args using toolchain_args Dec 21, 2022
@flutter-dashboard flutter-dashboard bot added the platform-web Code specifically for the web engine label Dec 21, 2022
@mdebbar
Copy link
Contributor Author

mdebbar commented Dec 21, 2022

@zanderso thanks for the suggestion!

I updated the PR to use toolchain_args. Does it look like what you had in mind? (You probably need to also look at the corresponding PR in the buildroot repo).

I haven't looked at the visibility thing yet, and I'm not familiar with it. I'll read about it and see how it can be used in this PR.

Copy link
Member

@zanderso zanderso left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, this is roughly what I was thinking. Let's talk more next year =)

web_sdk/BUILD.gn Outdated
@@ -559,7 +559,8 @@ if (!is_fuchsia) {
] + web_engine_libraries

if (build_canvaskit) {
deps += [ "//third_party/skia/modules/canvaskit" ]
deps +=
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would need to investigate more to make specific suggestions about how to guard the canvaskit toolchain definitions with visibility annotations or asserts, but one thing that will probably help in any case is putting the targets you want to build with those toolchains right next to the toolchain definitions, with comments saying not to use those toolchains for anything else.

So here, you'd depend on a group target, where the group has a public_deps on //third_party/skia/..., and the group target is in the same file as the toolchain definitions.

@mdebbar mdebbar changed the title [web] Override CanvasKit gn args using toolchain_args [web] Build multiple CanvasKit variants (using toolchain_args) Jan 3, 2023
@flutter-dashboard
Copy link

It looks like this pull request may not have tests. Please make sure to add tests before merging. If you need an exemption to this rule, contact Hixie on the #hackers channel in Chat (don't just cc him here, he won't see it! He's on Discord!).

If you are not sure if you need tests, consider this rule of thumb: the purpose of a test is to make sure someone doesn't accidentally revert the fix. Ask yourself, is there anything in your PR that you feel it is important we not accidentally revert back to how it was before your fix?

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

@@ -0,0 +1,36 @@
# Copyright 2022 The Flutter Authors. All rights reserved.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
# Copyright 2022 The Flutter Authors. All rights reserved.
# Copyright 2013 The Flutter Authors. All rights reserved.

@mdebbar mdebbar requested a review from zanderso January 17, 2023 19:57
Copy link
Member

@zanderso zanderso left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

DEPS Outdated
@@ -236,7 +236,7 @@ allowed_hosts = [
]

deps = {
'src': 'https://github.com/flutter/buildroot.git' + '@' + 'b2ab6e1908b3eb268d2a2cab1ec5b63f38e1bc11',
'src': 'https://github.com/flutter/buildroot.git' + '@' + 'fbaac6aad455f77ccafc4d3f15bad31856fbcb5b',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Double check that this won't revert someone else's buildroot roll =)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the reminder! Yes, this needs to change to whatever SHA is produced once the buildroot PR lands.

Copy link
Contributor

@harryterkelsen harryterkelsen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@mdebbar mdebbar added the autosubmit Merge PR when tree becomes green via auto submit App label Jan 23, 2023
@auto-submit auto-submit bot merged commit 7d3233d into flutter:main Jan 23, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/flutter that referenced this pull request Jan 23, 2023
auto-submit bot pushed a commit to flutter/flutter that referenced this pull request Jan 24, 2023
sourcegraph-bot pushed a commit to sgtest/megarepo that referenced this pull request Jan 24, 2023
…lchain_args) (flutter/engine#38448) (#119021)

Commit: 1906ce5d43d26009c149b20ade660123d605cc80
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jan 24, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/plugins that referenced this pull request Jan 24, 2023
auto-submit bot pushed a commit to flutter/packages that referenced this pull request Jan 24, 2023
* 3bf7960 [web] Fix paths fetched by flutter.js (flutter/flutter#118684)

* e71e8da 76998e529 Roll Fuchsia Linux SDK from f613tOkDB282hW2tA... to GLRbnjiO5SbZKX-Us... (flutter/engine#39067) (flutter/flutter#119009)

* 71a4256 Revert "[Re-land] Button padding m3 (#118640)" (flutter/flutter#118962)

* 90ffb1c 94fc0728f Roll Dart SDK from c52810968747 to 107a1280a61f (1 revision) (flutter/engine#39069) (flutter/flutter#119010)

* 224e6aa Remove unnecessary null checks in flutter/gestures (flutter/flutter#118926)

* 6cd4945 Remove unnecessary null checks in flutter_web_plugins (flutter/flutter#118862)

* a63e19b Remove unnecessary null checks in flutter_localizations (flutter/flutter#118863)

* 19dfde6 Remove unnecessary null checks in `flutter/{foundation,services,physics}` (flutter/flutter#118910)

* 392dffe Update the Linux Android defines test to use dimensions when selecting a build bot (flutter/flutter#118930)

* 5e50ed9 Test Utf8FromUtf16 (flutter/flutter#118647)

* edb571e Update README.md (flutter/flutter#118803)

* 38630b6 Remove unnecessary null checks in `flutter_tool` (flutter/flutter#118857)

* 332aed9 Revert "Update the Linux Android defines test to use dimensions when selecting a build bot (#118930)" (flutter/flutter#119023)

* 84071aa Add todo for linux defines test. (flutter/flutter#119035)

* e8b7f4b [examples] Fix typo in `refresh_indicator` example (flutter/flutter#119000)

* df44208 Remove ThemeData.buttonColor references (flutter/flutter#118658)

* 6548616 Remove animated_complex_opacity_perf_macos__e2e_summary bringup (flutter/flutter#118916)

* 59767e5 Remove unnecessary null checks in `flutter/material` (flutter/flutter#119022)

* 1906ce5 7d3233d26 [web] Build multiple CanvasKit variants (using toolchain_args) (flutter/engine#38448) (flutter/flutter#119021)

* 720bea0 Remove unnecessary null checks in `flutter/widgets` (flutter/flutter#119028)

* 0de8bef Remove unnecessary null checks in flutter/cupertino (flutter/flutter#119020)

* 2e8dd9d Run integration_ui_test_test_macos in prod (flutter/flutter#118919)

* 64b4c69 roll pub deps and remove archive, crypto, typed_data from allow-list (flutter/flutter#119018)

* c35efda Remove superfluous words. (flutter/flutter#119008)
auto-submit bot pushed a commit to flutter/plugins that referenced this pull request Jan 24, 2023
* 3bf7960 [web] Fix paths fetched by flutter.js (flutter/flutter#118684)

* e71e8da 76998e529 Roll Fuchsia Linux SDK from f613tOkDB282hW2tA... to GLRbnjiO5SbZKX-Us... (flutter/engine#39067) (flutter/flutter#119009)

* 71a4256 Revert "[Re-land] Button padding m3 (#118640)" (flutter/flutter#118962)

* 90ffb1c 94fc0728f Roll Dart SDK from c52810968747 to 107a1280a61f (1 revision) (flutter/engine#39069) (flutter/flutter#119010)

* 224e6aa Remove unnecessary null checks in flutter/gestures (flutter/flutter#118926)

* 6cd4945 Remove unnecessary null checks in flutter_web_plugins (flutter/flutter#118862)

* a63e19b Remove unnecessary null checks in flutter_localizations (flutter/flutter#118863)

* 19dfde6 Remove unnecessary null checks in `flutter/{foundation,services,physics}` (flutter/flutter#118910)

* 392dffe Update the Linux Android defines test to use dimensions when selecting a build bot (flutter/flutter#118930)

* 5e50ed9 Test Utf8FromUtf16 (flutter/flutter#118647)

* edb571e Update README.md (flutter/flutter#118803)

* 38630b6 Remove unnecessary null checks in `flutter_tool` (flutter/flutter#118857)

* 332aed9 Revert "Update the Linux Android defines test to use dimensions when selecting a build bot (#118930)" (flutter/flutter#119023)

* 84071aa Add todo for linux defines test. (flutter/flutter#119035)

* e8b7f4b [examples] Fix typo in `refresh_indicator` example (flutter/flutter#119000)

* df44208 Remove ThemeData.buttonColor references (flutter/flutter#118658)

* 6548616 Remove animated_complex_opacity_perf_macos__e2e_summary bringup (flutter/flutter#118916)

* 59767e5 Remove unnecessary null checks in `flutter/material` (flutter/flutter#119022)

* 1906ce5 7d3233d26 [web] Build multiple CanvasKit variants (using toolchain_args) (flutter/engine#38448) (flutter/flutter#119021)

* 720bea0 Remove unnecessary null checks in `flutter/widgets` (flutter/flutter#119028)

* 0de8bef Remove unnecessary null checks in flutter/cupertino (flutter/flutter#119020)

* 2e8dd9d Run integration_ui_test_test_macos in prod (flutter/flutter#118919)

* 64b4c69 roll pub deps and remove archive, crypto, typed_data from allow-list (flutter/flutter#119018)

* c35efda Remove superfluous words. (flutter/flutter#119008)
ricardoamador pushed a commit to ricardoamador/engine that referenced this pull request Jan 25, 2023
…er#38448)

* [web] New gn for building CanvasKit

* Use toolchain_args to override CanvasKit gn args

* Use correct path for the generated canvaskit files

* Put toolchain close to target

* remove extra toolchains

* remove extra import

* add canvaskit_lite to archive

* fix local canvaskit path in tests

* add some guards using visibility and asserts

* renames

* formatting

* rename mistake

* Add github issue to the TODO

* Update buildroot sha

* clang-tidy error

* skip canvaskit targets when not needed
mauricioluz pushed a commit to mauricioluz/plugins that referenced this pull request Jan 26, 2023
* 3bf7960 [web] Fix paths fetched by flutter.js (flutter/flutter#118684)

* e71e8da 76998e529 Roll Fuchsia Linux SDK from f613tOkDB282hW2tA... to GLRbnjiO5SbZKX-Us... (flutter/engine#39067) (flutter/flutter#119009)

* 71a4256 Revert "[Re-land] Button padding m3 (#118640)" (flutter/flutter#118962)

* 90ffb1c 94fc0728f Roll Dart SDK from c52810968747 to 107a1280a61f (1 revision) (flutter/engine#39069) (flutter/flutter#119010)

* 224e6aa Remove unnecessary null checks in flutter/gestures (flutter/flutter#118926)

* 6cd4945 Remove unnecessary null checks in flutter_web_plugins (flutter/flutter#118862)

* a63e19b Remove unnecessary null checks in flutter_localizations (flutter/flutter#118863)

* 19dfde6 Remove unnecessary null checks in `flutter/{foundation,services,physics}` (flutter/flutter#118910)

* 392dffe Update the Linux Android defines test to use dimensions when selecting a build bot (flutter/flutter#118930)

* 5e50ed9 Test Utf8FromUtf16 (flutter/flutter#118647)

* edb571e Update README.md (flutter/flutter#118803)

* 38630b6 Remove unnecessary null checks in `flutter_tool` (flutter/flutter#118857)

* 332aed9 Revert "Update the Linux Android defines test to use dimensions when selecting a build bot (#118930)" (flutter/flutter#119023)

* 84071aa Add todo for linux defines test. (flutter/flutter#119035)

* e8b7f4b [examples] Fix typo in `refresh_indicator` example (flutter/flutter#119000)

* df44208 Remove ThemeData.buttonColor references (flutter/flutter#118658)

* 6548616 Remove animated_complex_opacity_perf_macos__e2e_summary bringup (flutter/flutter#118916)

* 59767e5 Remove unnecessary null checks in `flutter/material` (flutter/flutter#119022)

* 1906ce5 7d3233d26 [web] Build multiple CanvasKit variants (using toolchain_args) (flutter/engine#38448) (flutter/flutter#119021)

* 720bea0 Remove unnecessary null checks in `flutter/widgets` (flutter/flutter#119028)

* 0de8bef Remove unnecessary null checks in flutter/cupertino (flutter/flutter#119020)

* 2e8dd9d Run integration_ui_test_test_macos in prod (flutter/flutter#118919)

* 64b4c69 roll pub deps and remove archive, crypto, typed_data from allow-list (flutter/flutter#119018)

* c35efda Remove superfluous words. (flutter/flutter#119008)
@mdebbar mdebbar deleted the ck_gn branch June 22, 2023 21:37
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
autosubmit Merge PR when tree becomes green via auto submit App needs tests platform-web Code specifically for the web engine
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[web] Add support for building multiple CanvasKit variants
4 participants