[web] change status bar color based on SystemUiOverlayStyle (#40599)

maRci002 · web-flow · commit 1a25b7a55171 · 2023-04-20T14:33:07.000Z
Closes flutter/flutter#123365 In my [example code](flutter/flutter#123365 (comment)) I'm using `SystemUiOverlayStyle.dark` which has `null` `statusBarColor` by default (_which can be changed via `Change status bar color` button_) in this case we do not override browser's default status bar color. | Old behaviour | New behaviour | | -- | -- | | <video src="https://user-images.githubusercontent.com/8436039/227386349-e30cce47-ffc6-4465-bb30-cd2888f77d32.mp4" /> | <video src="https://user-images.githubusercontent.com/8436039/227580430-a25e57dc-9d5a-43a1-bcb3-3bd8abd753d8.mp4" /> | In case of PWA the when `statusBarColor` is `null` it will use `theme_color` property from `manifest.json` (I don't know from where does flutter generate `manifest.json`). The default status bar color for PWA is: `"theme_color": "#0175C2",` https://github.com/flutter/flutter/blob/f4caee6efbc0b0094f3cee9e31a7486e3d030819/examples/api/web/manifest.json#L7 | Old PWA behaviour | New PWA behaviour | | -- | -- | | <video src="https://user-images.githubusercontent.com/8436039/227607373-79be7294-d9f7-4a45-9014-28720acce0c7.mp4" /> | <video src="https://user-images.githubusercontent.com/8436039/227607329-be16131f-4104-419a-8e16-2b229d73d95e.mp4" /> | [C++, Objective-C, Java style guides]: https://github.com/flutter/engine/blob/main/CONTRIBUTING.md#style
diff --git a/lib/web_ui/lib/src/engine/platform_dispatcher.dart b/lib/web_ui/lib/src/engine/platform_dispatcher.dart
@@ -514,14 +514,20 @@ class EnginePlatformDispatcher extends ui.PlatformDispatcher {
             replyToPlatformMessage(callback, codec.encodeSuccessEnvelope(true));
             return;
           case 'SystemChrome.setApplicationSwitcherDescription':
-            final Map<String, dynamic> arguments = decoded.arguments as Map<String, dynamic>;
-            // TODO(ferhat): Find more appropriate defaults? Or noop when values are null?
+            final Map<String, Object?> arguments = decoded.arguments as Map<String, Object?>;
             final String label = arguments['label'] as String? ?? '';
+            // TODO(web): Stop setting the color from here, https://github.com/flutter/flutter/issues/123365
             final int primaryColor = arguments['primaryColor'] as int? ?? 0xFF000000;
             domDocument.title = label;
             setThemeColor(ui.Color(primaryColor));
             replyToPlatformMessage(callback, codec.encodeSuccessEnvelope(true));
             return;
+          case 'SystemChrome.setSystemUIOverlayStyle':
+            final Map<String, Object?> arguments = decoded.arguments as Map<String, Object?>;
+            final int? statusBarColor = arguments['statusBarColor'] as int?;
+            setThemeColor(statusBarColor == null ? null : ui.Color(statusBarColor));
+            replyToPlatformMessage(callback, codec.encodeSuccessEnvelope(true));
+            return;
           case 'SystemChrome.setPreferredOrientations':
             final List<dynamic> arguments = decoded.arguments as List<dynamic>;
             flutterViewEmbedder.setPreferredOrientation(arguments).then((bool success) {
diff --git a/lib/web_ui/lib/src/engine/util.dart b/lib/web_ui/lib/src/engine/util.dart
@@ -679,16 +679,21 @@ void setClipPath(DomElement element, String? value) {
   }
 }
 
-void setThemeColor(ui.Color color) {
+void setThemeColor(ui.Color? color) {
   DomHTMLMetaElement? theme =
       domDocument.querySelector('#flutterweb-theme') as DomHTMLMetaElement?;
-  if (theme == null) {
-    theme = createDomHTMLMetaElement()
-      ..id = 'flutterweb-theme'
-      ..name = 'theme-color';
-    domDocument.head!.append(theme);
+
+  if (color != null) {
+    if (theme == null) {
+      theme = createDomHTMLMetaElement()
+        ..id = 'flutterweb-theme'
+        ..name = 'theme-color';
+      domDocument.head!.append(theme);
+    }
+    theme.content = colorToCssString(color)!;
+  } else {
+    theme?.remove();
   }
-  theme.content = colorToCssString(color)!;
 }
 
 bool? _ellipseFeatureDetected;
diff --git a/lib/web_ui/test/engine/platform_dispatcher/application_switcher_description_test.dart b/lib/web_ui/test/engine/platform_dispatcher/application_switcher_description_test.dart
@@ -0,0 +1,110 @@
+// Copyright 2013 The Flutter 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:test/bootstrap/browser.dart';
+import 'package:test/test.dart';
+import 'package:ui/src/engine.dart';
+import 'package:ui/ui.dart' as ui;
+
+void main() {
+  internalBootstrapBrowserTest(() => testMain);
+}
+
+Future<void> testMain() async {
+  ensureFlutterViewEmbedderInitialized();
+
+  String? getCssThemeColor() {
+    final DomHTMLMetaElement? theme =
+        domDocument.querySelector('#flutterweb-theme') as DomHTMLMetaElement?;
+    return theme?.content;
+  }
+
+  const MethodCodec codec = JSONMethodCodec();
+
+  group('Title and Primary Color/Theme meta', () {
+    test('is set on the document by platform message', () {
+      // Run the unit test without emulating Flutter tester environment.
+      ui.debugEmulateFlutterTesterEnvironment = false;
+
+      // TODO(yjbanov): https://github.com/flutter/flutter/issues/39159
+      domDocument.title = '';
+      expect(domDocument.title, '');
+      expect(getCssThemeColor(), isNull);
+
+      ui.window.sendPlatformMessage(
+        'flutter/platform',
+        codec.encodeMethodCall(const MethodCall(
+          'SystemChrome.setApplicationSwitcherDescription',
+          <String, dynamic>{
+            'label': 'Title Test',
+            'primaryColor': 0xFF00FF00,
+          },
+        )),
+        null,
+      );
+
+      const ui.Color expectedPrimaryColor = ui.Color(0xFF00FF00);
+
+      expect(domDocument.title, 'Title Test');
+      expect(getCssThemeColor(), colorToCssString(expectedPrimaryColor));
+
+      ui.window.sendPlatformMessage(
+        'flutter/platform',
+        codec.encodeMethodCall(const MethodCall(
+          'SystemChrome.setApplicationSwitcherDescription',
+          <String, dynamic>{
+            'label': 'Different title',
+            'primaryColor': 0xFFFABADA,
+          },
+        )),
+        null,
+      );
+
+      const ui.Color expectedNewPrimaryColor = ui.Color(0xFFFABADA);
+
+      expect(domDocument.title, 'Different title');
+      expect(getCssThemeColor(), colorToCssString(expectedNewPrimaryColor));
+    });
+
+    test('supports null title and primaryColor', () {
+      // Run the unit test without emulating Flutter tester environment.
+      ui.debugEmulateFlutterTesterEnvironment = false;
+
+      const ui.Color expectedNullColor = ui.Color(0xFF000000);
+      // TODO(yjbanov): https://github.com/flutter/flutter/issues/39159
+      domDocument.title = 'Something Else';
+      expect(domDocument.title, 'Something Else');
+
+      ui.window.sendPlatformMessage(
+        'flutter/platform',
+        codec.encodeMethodCall(const MethodCall(
+          'SystemChrome.setApplicationSwitcherDescription',
+          <String, dynamic>{
+            'label': null,
+            'primaryColor': null,
+          },
+        )),
+        null,
+      );
+
+      expect(domDocument.title, '');
+      expect(getCssThemeColor(), colorToCssString(expectedNullColor));
+
+      domDocument.title = 'Something Else';
+      expect(domDocument.title, 'Something Else');
+
+      ui.window.sendPlatformMessage(
+        'flutter/platform',
+        codec.encodeMethodCall(const MethodCall(
+          'SystemChrome.setApplicationSwitcherDescription',
+          <String, dynamic>{},
+        )),
+        null,
+      );
+
+      expect(domDocument.title, '');
+      expect(getCssThemeColor(), colorToCssString(expectedNullColor));
+    });
+  });
+}
diff --git a/lib/web_ui/test/engine/platform_dispatcher/platform_dispatcher_test.dart b/lib/web_ui/test/engine/platform_dispatcher/platform_dispatcher_test.dart
@@ -72,6 +72,27 @@ void testMain() {
       );
     });
 
+    test('responds to flutter/platform SystemChrome.setSystemUIOverlayStyle',
+        () async {
+      const MethodCodec codec = JSONMethodCodec();
+      final Completer<ByteData?> completer = Completer<ByteData?>();
+      ui.PlatformDispatcher.instance.sendPlatformMessage(
+        'flutter/platform',
+        codec.encodeMethodCall(const MethodCall(
+          'SystemChrome.setSystemUIOverlayStyle',
+          <String, dynamic>{},
+        )),
+        completer.complete,
+      );
+
+      final ByteData? response = await completer.future;
+      expect(response, isNotNull);
+      expect(
+        codec.decodeEnvelope(response!),
+        true,
+      );
+    });
+
     test('responds to flutter/contextmenu enable', () async {
       const MethodCodec codec = JSONMethodCodec();
       final Completer<ByteData?> completer = Completer<ByteData?>();
@@ -144,7 +165,8 @@ void testMain() {
         () async {
       final DomElement root = domDocument.documentElement!;
       final String oldFontSize = root.style.fontSize;
-      final ui.VoidCallback? oldCallback = ui.PlatformDispatcher.instance.onTextScaleFactorChanged;
+      final ui.VoidCallback? oldCallback =
+          ui.PlatformDispatcher.instance.onTextScaleFactorChanged;
 
       addTearDown(() {
         root.style.fontSize = oldFontSize;
@@ -162,15 +184,17 @@ void testMain() {
       await Future<void>.delayed(Duration.zero);
       expect(root.style.fontSize, '20px');
       expect(isCalled, isTrue);
-      expect(ui.PlatformDispatcher.instance.textScaleFactor, findBrowserTextScaleFactor());
+      expect(ui.PlatformDispatcher.instance.textScaleFactor,
+          findBrowserTextScaleFactor());
 
       isCalled = false;
 
       root.style.fontSize = '16px';
       await Future<void>.delayed(Duration.zero);
       expect(root.style.fontSize, '16px');
       expect(isCalled, isTrue);
-      expect(ui.PlatformDispatcher.instance.textScaleFactor, findBrowserTextScaleFactor());
+      expect(ui.PlatformDispatcher.instance.textScaleFactor,
+          findBrowserTextScaleFactor());
     });
   });
 }
@@ -183,7 +207,6 @@ class MockHighContrastSupport implements HighContrastSupport {
   @override
   bool get isHighContrastEnabled => isEnabled;
 
-
   void invokeListeners(bool val) {
     for (final HighContrastListener listener in _listeners) {
       listener(val);
diff --git a/lib/web_ui/test/engine/platform_dispatcher/system_ui_overlay_style_test.dart b/lib/web_ui/test/engine/platform_dispatcher/system_ui_overlay_style_test.dart
@@ -0,0 +1,53 @@
+// Copyright 2013 The Flutter 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:test/bootstrap/browser.dart';
+import 'package:test/test.dart';
+import 'package:ui/src/engine.dart';
+import 'package:ui/ui.dart' as ui;
+
+void main() {
+  internalBootstrapBrowserTest(() => testMain);
+}
+
+void testMain() {
+  ensureFlutterViewEmbedderInitialized();
+
+  const MethodCodec codec = JSONMethodCodec();
+
+  void sendSetSystemUIOverlayStyle({ui.Color? statusBarColor}) {
+    ui.window.sendPlatformMessage(
+      'flutter/platform',
+      codec.encodeMethodCall(MethodCall(
+        'SystemChrome.setSystemUIOverlayStyle',
+        <String, dynamic>{
+          'statusBarColor': statusBarColor?.value,
+        },
+      )),
+      null,
+    );
+  }
+
+  String? getCssThemeColor() {
+    final DomHTMLMetaElement? theme =
+        domDocument.querySelector('#flutterweb-theme') as DomHTMLMetaElement?;
+    return theme?.content;
+  }
+
+  group('SystemUIOverlayStyle', () {
+    test('theme color is set / removed by platform message', () {
+      // Run the unit test without emulating Flutter tester environment.
+      ui.debugEmulateFlutterTesterEnvironment = false;
+
+      expect(getCssThemeColor(), null);
+
+      const ui.Color statusBarColor = ui.Color(0xFFF44336);
+      sendSetSystemUIOverlayStyle(statusBarColor: statusBarColor);
+      expect(getCssThemeColor(), colorToCssString(statusBarColor));
+
+      sendSetSystemUIOverlayStyle();
+      expect(getCssThemeColor(), null);
+    });
+  });
+}
diff --git a/lib/web_ui/test/ui/title_test.dart b/lib/web_ui/test/ui/title_test.dart
