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

[web] Batch systemFontChange messages #17885

Merged
merged 3 commits into from
Apr 24, 2020
Merged

[web] Batch systemFontChange messages #17885

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
34d7742
Batch systemFontChange messages
ferhatb Apr 22, 2020
200bf77
Merge remote-tracking branch 'upstream/master' into fontload_optimiza…
ferhatb Apr 23, 2020
ce9dedd
Update test for async
ferhatb Apr 23, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 17 additions & 5 deletions lib/web_ui/lib/src/engine/util.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -461,11 +461,23 @@ void applyWebkitClipFix(html.Element containerElement) {

final ByteData _fontChangeMessage = JSONMessageCodec().encodeMessage(<String, dynamic>{'type': 'fontsChange'});

// Font load callbacks will typically arrive in sequence, we want to prevent
// sendFontChangeMessage of causing multiple synchronous rebuilds.
// This flag ensures we properly schedule a single call to framework.
bool _fontChangeScheduled = false;

FutureOr<void> sendFontChangeMessage() async {
if (window._onPlatformMessage != null)
window.invokeOnPlatformMessage(
'flutter/system',
_fontChangeMessage,
(_) {},
);
if (!_fontChangeScheduled) {
_fontChangeScheduled = true;
// Batch updates into next animationframe.
html.window.requestAnimationFrame((num _) {
Copy link
Contributor

@yjbanov yjbanov Apr 22, 2020 •
edited
Loading

Choose a reason for hiding this comment

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

This will debounce the notification at 16ms granularity, which seems too low for something that's loading over the network. Maybe use a Timer that debounces on the order of 100s of ms? We also have the AlarmClock with "snooze" feature for this sort of thing.

Copy link
Contributor Author

@ferhatb ferhatb Apr 23, 2020 •
edited
Loading

Choose a reason for hiding this comment

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

Gallery loads 6 fonts, they are coming in within 1ms of each other. 1 font sometimes misses 16ms window and markrelayout is called second time. 100ms would delay app first build for many frames, there is no easy signal to cancel the wait and complete future.

Copy link
Contributor

@yjbanov yjbanov Apr 24, 2020

Choose a reason for hiding this comment

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

Gotcha.

_fontChangeScheduled = false;
window.invokeOnPlatformMessage(
'flutter/system',
_fontChangeMessage,
(_) {},
);
});
}
}
4 changes: 4 additions & 0 deletions lib/web_ui/test/text/font_loading_test.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
// found in the LICENSE file.

// @dart = 2.6
import 'dart:async';
import 'dart:convert';
import 'dart:html' as html;
import 'dart:typed_data';
Expand Down Expand Up @@ -85,6 +86,9 @@ Future<void> main() async {
responseType: 'arraybuffer');
await ui.loadFontFromList(Uint8List.view(response.response),
fontFamily: 'Blehm');
final Completer<void> completer = Completer();
html.window.requestAnimationFrame( (_) { completer.complete(true); } );
await(completer.future);
window.onPlatformMessage = oldHandler;
expect(actualName, 'flutter/system');
expect(message, '{"type":"fontsChange"}');
Expand Down