Soften shadows (flutter#17231)

yjbanov · web-flow · commit 2f769be66344 · 2020-03-20T19:50:00.000-07:00
* Soften shadows

* update goldens
diff --git a/lib/web_ui/dev/goldens_lock.yaml b/lib/web_ui/dev/goldens_lock.yaml
@@ -1,2 +1,2 @@
 repository: https://github.com/flutter/goldens.git
-revision: 8f692819e8881b7d2131dbd61d965c21d5e3e345
+revision: ae6003206eb721137c20cd56d8d1d8e2a76d6dd1
diff --git a/lib/web_ui/lib/src/engine/canvas_pool.dart b/lib/web_ui/lib/src/engine/canvas_pool.dart
@@ -613,7 +613,12 @@ class _CanvasPool extends _SaveStackTracking {
         context.save();
         context.filter = 'none';
         context.strokeStyle = '';
-        context.fillStyle = colorToCssString(color);
+        final int red = color.red;
+        final int green = color.green;
+        final int blue = color.blue;
+        // Multiply by 0.4 to make shadows less aggressive (https://github.com/flutter/flutter/issues/52734)
+        final int alpha = (0.4 * color.alpha).round();
+        context.fillStyle = colorComponentsToCssString(red, green, blue, alpha);
         context.shadowBlur = shadow.blurWidth;
         context.shadowColor = colorToCssString(color.withAlpha(0xff));
         context.shadowOffsetX = shadow.offset.dx;
diff --git a/lib/web_ui/lib/src/engine/shadow.dart b/lib/web_ui/lib/src/engine/shadow.dart
@@ -133,7 +133,9 @@ void applyCssShadow(
   if (shadow == null) {
     element.style.boxShadow = 'none';
   } else {
+    // Multiply by 0.4 to make shadows less aggressive (https://github.com/flutter/flutter/issues/52734)
+    final double alpha = 0.4 * color.alpha / 255;
     element.style.boxShadow = '${shadow.offset.dx}px ${shadow.offset.dy}px '
-        '${shadow.blurWidth}px 0px rgb(${color.red}, ${color.green}, ${color.blue})';
+        '${shadow.blurWidth}px 0px rgba(${color.red}, ${color.green}, ${color.blue}, $alpha)';
   }
 }
diff --git a/lib/web_ui/lib/src/engine/util.dart b/lib/web_ui/lib/src/engine/util.dart
@@ -349,6 +349,16 @@ String _colorToCssStringRgbOnly(ui.Color color) {
   return '#${paddedValue.substring(paddedValue.length - 6)}';
 }
 
+/// Converts color components to a CSS compatible attribute value.
+String colorComponentsToCssString(int r, int g, int b, int a) {
+  if (a == 255) {
+    return 'rgb($r,$g,$b)';
+  } else {
+    final double alphaRatio = a / 255;
+    return 'rgba($r,$g,$b,${alphaRatio.toStringAsFixed(2)})';
+  }
+}
+
 /// Determines if the (dynamic) exception passed in is a NS_ERROR_FAILURE
 /// (from Firefox).
 ///
diff --git a/lib/web_ui/test/golden_tests/engine/shadow_golden_test.dart b/lib/web_ui/test/golden_tests/engine/shadow_golden_test.dart
@@ -12,7 +12,7 @@ import 'package:web_engine_tester/golden_tester.dart';
 
 import 'scuba.dart';
 
-const Color _kShadowColor = Color.fromARGB(255, 255, 0, 0);
+const Color _kShadowColor = Color.fromARGB(255, 0, 0, 0);
 
 void main() async {
   final Rect region = Rect.fromLTWH(0, 0, 550, 300);

Original file line number	Diff line number	Diff line change
`@@ -1,2 +1,2 @@`
`1`	`1`	`repository: https://github.com/flutter/goldens.git`
`2`		`-revision: 8f692819e8881b7d2131dbd61d965c21d5e3e345`
	`2`	`+revision: ae6003206eb721137c20cd56d8d1d8e2a76d6dd1`
Original file line number	Diff line number	Diff line change
`@@ -133,7 +133,9 @@ void applyCssShadow(`
`133`	`133`	`if (shadow == null) {`
`134`	`134`	`element.style.boxShadow = 'none';`
`135`	`135`	`} else {`
	`136`	`+ // Multiply by 0.4 to make shadows less aggressive (https://github.com/flutter/flutter/issues/52734)`
	`137`	`+ final double alpha = 0.4 * color.alpha / 255;`
`136`	`138`	`element.style.boxShadow = '${shadow.offset.dx}px ${shadow.offset.dy}px '`
`137`		`- '${shadow.blurWidth}px 0px rgb(${color.red}, ${color.green}, ${color.blue})';`
	`139`	`+ '${shadow.blurWidth}px 0px rgba(${color.red}, ${color.green}, ${color.blue}, $alpha)';`
`138`	`140`	`}`
`139`	`141`	`}`