[web] Store Paint.color as an int. Only create a ui.Color when the color getter is called. (#37092)

* Store color as the int value. Only create a color when getter is called

* Refactor tests and painting

* Change SurfacePaintData to have default opaque black color

Author: Harry Terkelsen

lib/web_ui/lib/src/engine/canvas_pool.dart

@@ -1012,7 +1012,7 @@ class ContextStateHandle {
         }
       }
     } else if (paint.color != null) {
-      final String? colorString = colorToCssString(paint.color);
+      final String? colorString = colorValueToCssString(paint.color);
       fillStyle = colorString;
       strokeStyle = colorString;
     } else {
@@ -1036,12 +1036,8 @@ class ContextStateHandle {
       if (maskFilter != null) {
         context.save();
         context.shadowBlur = convertSigmaToRadius(maskFilter.webOnlySigma);
-        if (paint.color != null) {
-          // Shadow color must be fully opaque.
-          context.shadowColor = colorToCssString(paint.color!.withAlpha(255));
-        } else {
-          context.shadowColor = colorToCssString(const ui.Color(0xFF000000));
-        }
+        // Shadow color must be fully opaque.
+        context.shadowColor = colorToCssString(ui.Color(paint.color).withAlpha(255));
 
         // On the web a shadow must always be painted together with the shape
         // that casts it. In order to paint just the shadow, we offset the shape

lib/web_ui/lib/src/engine/canvaskit/painting.dart

@@ -21,7 +21,7 @@ import 'skia_object_cache.dart';
 class CkPaint extends ManagedSkiaObject<SkPaint> implements ui.Paint {
   CkPaint();
 
-  static const ui.Color _defaultPaintColor = ui.Color(0xFF000000);
+  static const int _defaultPaintColor = 0xFF000000;
 
   @override
   ui.BlendMode get blendMode => _blendMode;
@@ -103,18 +103,17 @@ class CkPaint extends ManagedSkiaObject<SkPaint> implements ui.Paint {
   bool _isAntiAlias = true;
 
   @override
-  ui.Color get color => _color;
+  ui.Color get color => ui.Color(_color);
   @override
   set color(ui.Color value) {
-    if (_color == value) {
+    if (_color == value.value) {
       return;
     }
-    _color =
-        value.runtimeType == ui.Color ? value : ui.Color(value.value);
+    _color = value.value;
     skiaObject.setColorInt(value.value);
   }
 
-  ui.Color _color = _defaultPaintColor;
+  int _color = _defaultPaintColor;
 
   @override
   bool get invertColors => _invertColors;
@@ -269,7 +268,7 @@ class CkPaint extends ManagedSkiaObject<SkPaint> implements ui.Paint {
   SkPaint createDefault() {
     final SkPaint paint = SkPaint();
     paint.setAntiAlias(_isAntiAlias);
-    paint.setColorInt(_color.value);
+    paint.setColorInt(_color);
     return paint;
   }
 
@@ -282,7 +281,7 @@ class CkPaint extends ManagedSkiaObject<SkPaint> implements ui.Paint {
     paint.setStyle(toSkPaintStyle(_style));
     paint.setStrokeWidth(_strokeWidth);
     paint.setAntiAlias(_isAntiAlias);
-    paint.setColorInt(_color.value);
+    paint.setColorInt(_color);
     paint.setShader(_shader?.withQuality(_filterQuality));
     paint.setMaskFilter(_ckMaskFilter?.skiaObject);
     paint.setColorFilter(_effectiveColorFilter?.skiaObject);

lib/web_ui/lib/src/engine/html/bitmap_canvas.dart

@@ -399,7 +399,7 @@ class BitmapCanvas extends EngineCanvas {
   @override
   void drawColor(ui.Color color, ui.BlendMode blendMode) {
     final SurfacePaintData paintData = SurfacePaintData()
-      ..color = color
+      ..color = color.value
       ..blendMode = blendMode;
     if (_useDomForRenderingFill(paintData)) {
       drawRect(_computeScreenBounds(_canvasPool.currentTransform), paintData);
@@ -592,8 +592,7 @@ class BitmapCanvas extends EngineCanvas {
   void _applyFilter(DomElement element, SurfacePaintData paint) {
     if (paint.maskFilter != null) {
       final bool isStroke = paint.style == ui.PaintingStyle.stroke;
-      final String cssColor =
-          paint.color == null ? '#000000' : colorToCssString(paint.color)!;
+      final String cssColor = colorValueToCssString(paint.color)!;
       final double sigma = paint.maskFilter!.webOnlySigma;
       if (browserEngine == BrowserEngine.webkit && !isStroke) {
         // A bug in webkit leaves artifacts when this element is animated
@@ -1031,7 +1030,7 @@ class BitmapCanvas extends EngineCanvas {
           : convertVertexPositions(mode, vertices.positions);
       // Draw hairline for vertices if no vertex colors are specified.
       save();
-      final ui.Color color = paint.color ?? const ui.Color(0xFF000000);
+      final ui.Color color = ui.Color(paint.color);
       _canvasPool.contextHandle
         ..fillStyle = null
         ..strokeStyle = colorToCssString(color);
@@ -1059,7 +1058,7 @@ class BitmapCanvas extends EngineCanvas {
     } else {
       _drawPointsPaint.style = ui.PaintingStyle.fill;
     }
-    _drawPointsPaint.color = paint.color ?? const ui.Color(0xFF000000);
+    _drawPointsPaint.color = paint.color;
     _drawPointsPaint.maskFilter = paint.maskFilter;
 
     final double dpr = ui.window.devicePixelRatio;

lib/web_ui/lib/src/engine/html/clip.dart

@@ -392,7 +392,7 @@ class PersistedPhysicalShape extends PersistedContainerSurface
         path,
         SurfacePaintData()
           ..style = ui.PaintingStyle.fill
-          ..color = color,
+          ..color = color.value,
         '${pathBounds2.right}',
         '${pathBounds2.bottom}');
 

lib/web_ui/lib/src/engine/html/dom_canvas.dart

@@ -257,16 +257,15 @@ DomHTMLElement buildDrawRectElement(
     ..transform = effectiveTransform;
 
   String cssColor =
-      paint.color == null ? '#000000' : colorToCssString(paint.color)!;
+      paint.color == null ? '#000000' : colorValueToCssString(paint.color)!;
 
   if (paint.maskFilter != null) {
     final double sigma = paint.maskFilter!.webOnlySigma;
     if (browserEngine == BrowserEngine.webkit && !isStroke) {
       // A bug in webkit leaves artifacts when this element is animated
       // with filter: blur, we use boxShadow instead.
       style.boxShadow = '0px 0px ${sigma * 2.0}px $cssColor';
-      cssColor = colorToCssString(
-          blurColor(paint.color ?? const ui.Color(0xFF000000), sigma))!;
+      cssColor = colorToCssString(blurColor(ui.Color(paint.color), sigma))!;
     } else {
       style.filter = 'blur(${sigma}px)';
     }
@@ -345,16 +344,15 @@ SVGSVGElement pathToSvgElement(
 
   final SVGPathElement svgPath = createSVGPathElement();
   root.append(svgPath);
-  final ui.Color color = paint.color ?? const ui.Color(0xFF000000);
   if (paint.style == ui.PaintingStyle.stroke ||
       (paint.style != ui.PaintingStyle.fill &&
           paint.strokeWidth != 0 &&
           paint.strokeWidth != null)) {
-    svgPath.setAttribute('stroke', colorToCssString(color)!);
+    svgPath.setAttribute('stroke', colorValueToCssString(paint.color)!);
     svgPath.setAttribute('stroke-width', '${paint.strokeWidth ?? 1.0}');
     svgPath.setAttribute('fill', 'none');
   } else if (paint.color != null) {
-    svgPath.setAttribute('fill', colorToCssString(color)!);
+    svgPath.setAttribute('fill', colorValueToCssString(paint.color)!);
   } else {
     svgPath.setAttribute('fill', '#000000');
   }

lib/web_ui/lib/src/engine/html/painting.dart

@@ -83,16 +83,15 @@ class SurfacePaint implements ui.Paint {
   }
 
   @override
-  ui.Color get color => _paintData.color ?? _defaultPaintColor;
+  ui.Color get color => ui.Color(_paintData.color);
 
   @override
   set color(ui.Color value) {
     if (_frozen) {
       _paintData = _paintData.clone();
       _frozen = false;
     }
-    _paintData.color =
-        value.runtimeType == ui.Color ? value : ui.Color(value.value);
+    _paintData.color = value.value;
   }
 
   @override
@@ -103,7 +102,7 @@ class SurfacePaint implements ui.Paint {
   @override
   set invertColors(bool value) {}
 
-  static const ui.Color _defaultPaintColor = ui.Color(0xFF000000);
+  static const int _defaultPaintColor = 0xFF000000;
 
   @override
   ui.Shader? get shader => _paintData.shader;
@@ -207,7 +206,7 @@ class SurfacePaint implements ui.Paint {
       result.write('${semicolon}antialias off');
       semicolon = '; ';
     }
-    if (color != _defaultPaintColor) {
+    if (color.value != _defaultPaintColor) {
       result.write('$semicolon$color');
       semicolon = '; ';
     }
@@ -225,7 +224,7 @@ class SurfacePaintData {
   ui.StrokeCap? strokeCap;
   ui.StrokeJoin? strokeJoin;
   bool isAntiAlias = true;
-  ui.Color? color;
+  int color = 0xFF000000;
   ui.Shader? shader;
   ui.MaskFilter? maskFilter;
   ui.FilterQuality? filterQuality;
@@ -269,7 +268,7 @@ class SurfacePaintData {
         buffer.write('strokeJoin = $strokeJoin; ');
       }
       if (color != null) {
-        buffer.write('color = ${colorToCssString(color)}; ');
+        buffer.write('color = ${colorToCssString(ui.Color(color))}; ');
       }
       if (shader != null) {
         buffer.write('shader = $shader; ');

lib/web_ui/lib/src/engine/html/render_vertices.dart

@@ -230,10 +230,9 @@ class _WebGlRenderer implements GlRenderer {
 
       // Buffer kBGRA_8888.
       if (vertices.colors == null) {
-        final ui.Color color = paint.color ?? const ui.Color(0xFF000000);
         final Uint32List vertexColors = Uint32List(vertexCount);
         for (int i = 0; i < vertexCount; i++) {
-          vertexColors[i] = color.value;
+          vertexColors[i] = paint.color;
         }
         gl.bufferData(vertexColors, gl.kStaticDraw);
       } else {

lib/web_ui/lib/src/engine/util.dart

@@ -344,6 +344,17 @@ String? colorToCssString(ui.Color? color) {
     return null;
   }
   final int value = color.value;
+  return colorValueToCssString(value);
+}
+
+// Converts a color value (as an int) into a CSS-compatible value.
+String? colorValueToCssString(int? value) {
+  if (value == null) {
+    return null;
+  }
+  if (value == 0xFF000000) {
+    return '#000000';
+  }
   if ((0xff000000 & value) == 0xff000000) {
     final String hexValue = (value & 0xFFFFFF).toRadixString(16);
     final int hexValueLength = hexValue.length;

lib/web_ui/test/html/bitmap_canvas_golden_test.dart

@@ -126,7 +126,7 @@ Future<void> testMain() async {
     canvas.clipRect(const Rect.fromLTWH(0, 0, 50, 50), ClipOp.intersect);
     canvas.translate(25, 25);
     canvas.drawPaint(SurfacePaintData()
-      ..color = const Color.fromRGBO(0, 255, 0, 1.0)
+      ..color = const Color.fromRGBO(0, 255, 0, 1.0).value
       ..style = PaintingStyle.fill);
 
     appendToScene();
@@ -209,7 +209,7 @@ Future<void> testMain() async {
     canvas.debugChildOverdraw = true;
 
     final SurfacePaintData pathPaint = SurfacePaintData()
-      ..color = const Color(0xFF7F7F7F)
+      ..color = 0xFF7F7F7F
       ..style = PaintingStyle.fill;
 
     const double r = 200.0;
@@ -227,7 +227,7 @@ Future<void> testMain() async {
       ..close()).shift(const Offset(250, 250));
 
     final SurfacePaintData borderPaint = SurfacePaintData()
-      ..color = black
+      ..color = black.value
       ..style = PaintingStyle.stroke;
 
     canvas.drawPath(path, pathPaint);

lib/web_ui/test/html/canvas_winding_rule_golden_test.dart

@@ -37,7 +37,7 @@ Future<void> testMain() async {
 void paintPaths(BitmapCanvas canvas) {
   canvas.drawRect(const Rect.fromLTRB(0, 0, 500, 500),
       SurfacePaintData()
-        ..color = const Color(0xFFFFFFFF)
+        ..color = 0xFFFFFFFF
         ..style = PaintingStyle.fill); // white
 
   final SurfacePaint paintFill = SurfacePaint()