Fix Color API, move toCss to helper functions (#15740)

* Fix Color API, move toCss to helper functions
* Move colorToCssString to engine

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

@@ -213,7 +213,7 @@ class BitmapCanvas extends EngineCanvas {
       contextHandle.fillStyle = paintStyle;
       contextHandle.strokeStyle = paintStyle;
     } else if (paint.color != null) {
-      final String colorString = paint.color.toCssString();
+      final String colorString = colorToCssString(paint.color);
       contextHandle.fillStyle = colorString;
       contextHandle.strokeStyle = colorString;
     } else {
@@ -561,7 +561,7 @@ class BitmapCanvas extends EngineCanvas {
       final ui.Color color = paint.color ?? ui.Color(0xFF000000);
       _canvasPool.contextHandle
         ..fillStyle = null
-        ..strokeStyle = color.toCssString();
+        ..strokeStyle = colorToCssString(color);
       _glRenderer.drawHairline(ctx, positions);
       restore();
       return;

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

@@ -370,7 +370,7 @@ class _CanvasPool extends _SaveStackTracking {
   void drawColor(ui.Color color, ui.BlendMode blendMode) {
     html.CanvasRenderingContext2D ctx = context;
     contextHandle.blendMode = blendMode;
-    contextHandle.fillStyle = color.toCssString();
+    contextHandle.fillStyle = colorToCssString(color);
     contextHandle.strokeStyle = '';
     ctx.beginPath();
     // Fill a virtually infinite rect with the color.
@@ -509,7 +509,7 @@ class _CanvasPool extends _SaveStackTracking {
           context.filter = _maskFilterToCss(
               ui.MaskFilter.blur(ui.BlurStyle.normal, shadow.blur));
           context.strokeStyle = '';
-          context.fillStyle = shadow.color.toCssString();
+          context.fillStyle = colorToCssString(shadow.color);
           _runPath(context, path);
           context.fill();
           context.restore();
@@ -525,9 +525,9 @@ class _CanvasPool extends _SaveStackTracking {
           context.save();
           context.filter = 'none';
           context.strokeStyle = '';
-          context.fillStyle = shadow.color.toCssString();
+          context.fillStyle = colorToCssString(shadow.color);
           context.shadowBlur = shadow.blur;
-          context.shadowColor = shadow.color.withAlpha(0xff).toCssString();
+          context.shadowColor = colorToCssString(shadow.color.withAlpha(0xff));
           context.shadowOffsetX = shadow.offsetX;
           context.shadowOffsetY = shadow.offsetY;
           _runPath(context, path);

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

@@ -51,7 +51,7 @@ class DomCanvas extends EngineCanvas with SaveElementStackTracking {
       ..right = '0'
       ..bottom = '0'
       ..left = '0'
-      ..backgroundColor = color.toCssString();
+      ..backgroundColor = colorToCssString(color);
     currentElement.append(box);
   }
 
@@ -104,7 +104,8 @@ class DomCanvas extends EngineCanvas with SaveElementStackTracking {
       ..transformOrigin = '0 0 0'
       ..transform = effectiveTransform;
 
-    final String cssColor = paint.color?.toCssString() ?? '#000000';
+    final String cssColor = paint.color == null ? '#000000'
+        : colorToCssString(paint.color);
 
     if (paint.maskFilter != null) {
       style.filter = 'blur(${paint.maskFilter.webOnlySigma}px)';

lib/web_ui/lib/src/engine/dom_renderer.dart

@@ -215,7 +215,7 @@ class DomRenderer {
         ..name = 'theme-color';
       html.document.head.append(theme);
     }
-    theme.content = color.toCssString();
+    theme.content = colorToCssString(color);
   }
 
   static const String defaultFontStyle = 'normal';

lib/web_ui/lib/src/engine/shader.dart

@@ -104,12 +104,12 @@ class GradientLinear extends EngineGradient {
         ctx.createLinearGradient(from.dx, from.dy, to.dx, to.dy);
     if (colorStops == null) {
       assert(colors.length == 2);
-      gradient.addColorStop(0, colors[0].toCssString());
-      gradient.addColorStop(1, colors[1].toCssString());
+      gradient.addColorStop(0, colorToCssString(colors[0]));
+      gradient.addColorStop(1, colorToCssString(colors[1]));
       return gradient;
     }
     for (int i = 0; i < colors.length; i++) {
-      gradient.addColorStop(colorStops[i], colors[i].toCssString());
+      gradient.addColorStop(colorStops[i], colorToCssString(colors[i]));
     }
     return gradient;
   }
@@ -118,7 +118,7 @@ class GradientLinear extends EngineGradient {
   List<dynamic> webOnlySerializeToCssPaint() {
     final List<dynamic> serializedColors = <dynamic>[];
     for (int i = 0; i < colors.length; i++) {
-      serializedColors.add(colors[i].toCssString());
+      serializedColors.add(colorToCssString(colors[i]));
     }
     return <dynamic>[
       1,
@@ -183,12 +183,12 @@ class GradientRadial extends EngineGradient {
         center.dx, center.dy, 0, center.dx, center.dy, radius);
     if (colorStops == null) {
       assert(colors.length == 2);
-      gradient.addColorStop(0, colors[0].toCssString());
-      gradient.addColorStop(1, colors[1].toCssString());
+      gradient.addColorStop(0, colorToCssString(colors[0]));
+      gradient.addColorStop(1, colorToCssString(colors[1]));
       return gradient;
     } else {
       for (int i = 0; i < colors.length; i++) {
-        gradient.addColorStop(colorStops[i], colors[i].toCssString());
+        gradient.addColorStop(colorStops[i], colorToCssString(colors[i]));
       }
     }
     return gradient;

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

@@ -190,7 +190,7 @@ class PersistedPhysicalShape extends PersistedContainerSurface
   }
 
   void _applyColor() {
-    rootElement.style.backgroundColor = color.toCssString();
+    rootElement.style.backgroundColor = colorToCssString(color);
   }
 
   void _applyShadow() {

lib/web_ui/lib/src/engine/surface/recording_canvas.dart

@@ -677,7 +677,7 @@ class PaintDrawColor extends PaintCommand {
 
   @override
   void serializeToCssPaint(List<List<dynamic>> serializedCommands) {
-    serializedCommands.add(<dynamic>[11, color.toCssString(), blendMode.index]);
+    serializedCommands.add(<dynamic>[11, colorToCssString(color), blendMode.index]);
   }
 }
 
@@ -1086,7 +1086,7 @@ List<dynamic> _serializePaintToCssPaint(SurfacePaintData paint) {
     paint.strokeWidth,
     paint.strokeCap?.index,
     paint.isAntiAlias,
-    paint.color.toCssString(),
+    colorToCssString(paint.color),
     engineShader?.webOnlySerializeToCssPaint(),
     paint.maskFilter?.webOnlySerializeToCssPaint(),
     paint.filterQuality?.index,

lib/web_ui/lib/src/engine/text/paragraph.dart

@@ -1282,7 +1282,7 @@ void _applyTextStyleToElement({
   if (previousStyle == null) {
     final ui.Color color = style._foreground?.color ?? style._color;
     if (color != null) {
-      cssStyle.color = color.toCssString();
+      cssStyle.color = colorToCssString(color);
     }
     if (style._fontSize != null) {
       cssStyle.fontSize = '${style._fontSize.floor()}px';
@@ -1322,7 +1322,7 @@ void _applyTextStyleToElement({
     if (style._color != previousStyle._color ||
         style._foreground != previousStyle._foreground) {
       final ui.Color color = style._foreground?.color ?? style._color;
-      cssStyle.color = color?.toCssString();
+      cssStyle.color = colorToCssString(color);
     }
 
     if (style._fontSize != previousStyle._fontSize) {
@@ -1366,7 +1366,7 @@ void _applyTextStyleToElement({
         cssStyle.textDecoration = textDecoration;
         final ui.Color decorationColor = style._decorationColor;
         if (decorationColor != null) {
-          cssStyle.textDecorationColor = decorationColor.toCssString();
+          cssStyle.textDecorationColor = colorToCssString(decorationColor);
         }
       }
     }
@@ -1389,7 +1389,7 @@ String _shadowListToCss(List<ui.Shadow> shadows) {
     }
     ui.Shadow shadow = shadows[i];
     sb.write('${shadow.offset.dx}px ${shadow.offset.dy}px '
-        '${shadow.blurRadius}px ${shadow.color.toCssString()}');
+        '${shadow.blurRadius}px ${colorToCssString(shadow.color)}');
   }
   return sb.toString();
 }
@@ -1405,12 +1405,12 @@ void _applyTextBackgroundToElement({
   if (previousStyle == null) {
     if (newBackground != null) {
       domRenderer.setElementStyle(
-          element, 'background-color', newBackground.color.toCssString());
+          element, 'background-color', colorToCssString(newBackground.color));
     }
   } else {
     if (newBackground != previousStyle._background) {
       domRenderer.setElementStyle(
-          element, 'background-color', newBackground.color?.toCssString());
+          element, 'background-color', colorToCssString(newBackground.color));
     }
   }
 }

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

@@ -331,6 +331,40 @@ String _pathToSvgClipPath(ui.Path path,
   return sb.toString();
 }
 
+/// Converts color to a css compatible attribute value.
+String colorToCssString(ui.Color color) {
+  if (color == null) {
+    return null;
+  }
+  final int value = color.value;
+  if ((0xff000000 & value) == 0xff000000) {
+    return _colorToCssStringRgbOnly(color);
+  } else {
+    final double alpha = ((value >> 24) & 0xFF) / 255.0;
+    final StringBuffer sb = StringBuffer();
+    sb.write('rgba(');
+    sb.write(((value >> 16) & 0xFF).toString());
+    sb.write(',');
+    sb.write(((value >> 8) & 0xFF).toString());
+    sb.write(',');
+    sb.write((value & 0xFF).toString());
+    sb.write(',');
+    sb.write(alpha.toString());
+    sb.write(')');
+    return sb.toString();
+  }
+}
+
+/// Returns the CSS value of this color without the alpha component.
+///
+/// This is useful when painting shadows as on the Web shadow opacity combines
+/// with the paint opacity.
+String _colorToCssStringRgbOnly(ui.Color color) {
+  final int value = color.value;
+  final String paddedValue = '00000${value.toRadixString(16)}';
+  return '#${paddedValue.substring(paddedValue.length - 6)}';
+}
+
 /// Determines if the (dynamic) exception passed in is a NS_ERROR_FAILURE
 /// (from Firefox).
 ///

lib/web_ui/lib/src/ui/painting.dart

@@ -249,37 +249,6 @@ class Color {
   @override
   int get hashCode => value.hashCode;
 
-  /// Converts color to a css compatible attribute value.
-  // webOnly
-  String toCssString() {
-    if ((0xff000000 & value) == 0xff000000) {
-      return toCssStringRgbOnly();
-    } else {
-      final double alpha = ((value >> 24) & 0xFF) / 255.0;
-      final StringBuffer sb = StringBuffer();
-      sb.write('rgba(');
-      sb.write(((value >> 16) & 0xFF).toString());
-      sb.write(',');
-      sb.write(((value >> 8) & 0xFF).toString());
-      sb.write(',');
-      sb.write((value & 0xFF).toString());
-      sb.write(',');
-      sb.write(alpha.toString());
-      sb.write(')');
-      return sb.toString();
-    }
-  }
-
-  /// Returns the CSS value of this color without the alpha component.
-  ///
-  /// This is useful when painting shadows as on the Web shadow opacity combines
-  /// with the paint opacity.
-  // webOnly
-  String toCssStringRgbOnly() {
-    final String paddedValue = '00000${value.toRadixString(16)}';
-    return '#${paddedValue.substring(paddedValue.length - 6)}';
-  }
-
   @override
   String toString() {
     return 'Color(0x${value.toRadixString(16).padLeft(8, '0')})';

lib/web_ui/test/golden_tests/engine/path_to_svg_golden_test.dart

@@ -132,11 +132,11 @@ html.Element pathToSvgElement(Path path, Paint paint) {
       '<svg viewBox="0 0 ${bounds.right} ${bounds.bottom}" width="${bounds.right}" height="${bounds.bottom}">');
   sb.write('<path ');
   if (paint.style == PaintingStyle.stroke) {
-    sb.write('stroke="${paint.color.toCssString()}" ');
+    sb.write('stroke="${colorToCssString(paint.color)}" ');
     sb.write('stroke-width="${paint.strokeWidth}" ');
   }
   if (paint.style == PaintingStyle.fill) {
-    sb.write('fill="${paint.color.toCssString()}" ');
+    sb.write('fill="${colorToCssString(paint.color)}" ');
   }
   sb.write('d="');
   pathToSvg(path, sb); // This is what we're testing!