Update BoxDecoration and RenderParagraph to use sky.Color instead of int.

Also add operator==, hashCode, toString, and some basic Color constants to
Color.

R=abarth@chromium.org, ianh@google.com

Review URL: https://codereview.chromium.org/1162023004

engine/core/painting/Color.dart

@@ -15,4 +15,7 @@ class Color {
               ((g & 0xff) << 8) |
               ((b & 0xff) << 0));
 
+  bool operator ==(other) => other is Color && _value == other._value;
+  int get hashCode => _value.hashCode;
+  String toString() => "Color(0x${_value.toRadixString(16).padLeft(8, '0')})";
 }

examples/fn2/container.dart

@@ -14,11 +14,11 @@ class ContainerApp extends App {
           padding: new EdgeDims.all(10.0),
           margin: new EdgeDims.all(10.0),
           desiredSize: new sky.Size(double.INFINITY, 100.0),
-          decoration: new BoxDecoration(backgroundColor: 0xFF00FF00),
+          decoration: new BoxDecoration(backgroundColor: const sky.Color(0xFF00FF00)),
           child: new BlockContainer(
               children: [
                   new Container(
-                      decoration: new BoxDecoration(backgroundColor: 0xFFFFFF00),
+                      decoration: new BoxDecoration(backgroundColor: const sky.Color(0xFFFFFF00)),
                       desiredSize: new sky.Size(double.INFINITY, 20.0)
                   )
               ])),

examples/raw/render_paragraph.dart

@@ -11,9 +11,9 @@ import 'package:sky/framework/rendering/paragraph.dart';
 
 class RenderSolidColor extends RenderDecoratedBox {
   final Size desiredSize;
-  final int backgroundColor;
+  final Color backgroundColor;
 
-  RenderSolidColor(int backgroundColor, { this.desiredSize: const Size.infinite() })
+  RenderSolidColor(Color backgroundColor, { this.desiredSize: const Size.infinite() })
       : backgroundColor = backgroundColor,
         super(decoration: new BoxDecoration(backgroundColor: backgroundColor));
 
@@ -27,7 +27,7 @@ class RenderSolidColor extends RenderDecoratedBox {
 
   void handlePointer(PointerEvent event) {
     if (event.type == 'pointerdown')
-      decoration = new BoxDecoration(backgroundColor: 0xFFFF0000);
+      decoration = new BoxDecoration(backgroundColor: const Color(0xFFFF0000));
     else if (event.type == 'pointerup')
       decoration = new BoxDecoration(backgroundColor: backgroundColor);
   }
@@ -39,11 +39,11 @@ void main() {
   RenderFlex flexRoot = new RenderFlex(direction: FlexDirection.Vertical);
 
   RenderNode root = new RenderDecoratedBox(
-    decoration: new BoxDecoration(backgroundColor: 0xFF606060),
+    decoration: new BoxDecoration(backgroundColor: const Color(0xFF606060)),
     child: flexRoot
   );
 
-  RenderNode child = new RenderSolidColor(0xFFFFFF00);
+  RenderNode child = new RenderSolidColor(const Color(0xFFFFFF00));
   flexRoot.add(child);
   child.parentData.flex = 2;
 
@@ -55,8 +55,8 @@ alcatra. Pork pork belly alcatra, flank chuck drumstick biltong doner jowl.
 Pancetta meatball tongue tenderloin rump tail jowl boudin.""";
 
   child = new RenderDecoratedBox(
-    decoration: new BoxDecoration(backgroundColor: 0xFFFFFFFF),
-    child: new RenderParagraph(text: meatyString, color: 0xFF009900)
+    decoration: new BoxDecoration(backgroundColor: const Color(0xFFFFFFFF)),
+    child: new RenderParagraph(text: meatyString, color: const Color(0xFF009900))
   );
   flexRoot.add(child);
   child.parentData.flex = 1;

examples/raw/sector_layout.dart

@@ -463,7 +463,7 @@ class RenderBoxToRenderSectorAdapter extends RenderBox {
 }
 
 class RenderSolidColor extends RenderDecoratedSector {
-  RenderSolidColor(int backgroundColor, {
+  RenderSolidColor(sky.Color backgroundColor, {
     this.desiredDeltaRadius: double.INFINITY,
     this.desiredDeltaTheta: kTwoPi
   }) : this.backgroundColor = backgroundColor,
@@ -471,7 +471,7 @@ class RenderSolidColor extends RenderDecoratedSector {
 
   double desiredDeltaRadius;
   double desiredDeltaTheta;
-  final int backgroundColor;
+  final sky.Color backgroundColor;
 
   SectorDimensions getIntrinsicDimensions(SectorConstraints constraints, double radius) {
     return new SectorDimensions.withConstraints(constraints, deltaTheta: 1.0); // 1.0 radians
@@ -484,7 +484,7 @@ class RenderSolidColor extends RenderDecoratedSector {
 
   void handlePointer(sky.PointerEvent event) {
     if (event.type == 'pointerdown')
-      decoration = new BoxDecoration(backgroundColor: 0xFFFF0000);
+      decoration = new BoxDecoration(backgroundColor: const sky.Color(0xFFFF0000));
     else if (event.type == 'pointerup')
       decoration = new BoxDecoration(backgroundColor: backgroundColor);
   }
@@ -495,12 +495,12 @@ AppView app;
 void main() {
 
   var rootCircle = new RenderSectorRing(padding: 20.0);
-  rootCircle.add(new RenderSolidColor(0xFF00FFFF, desiredDeltaTheta: kTwoPi * 0.15));
-  rootCircle.add(new RenderSolidColor(0xFF0000FF, desiredDeltaTheta: kTwoPi * 0.4));
+  rootCircle.add(new RenderSolidColor(const sky.Color(0xFF00FFFF), desiredDeltaTheta: kTwoPi * 0.15));
+  rootCircle.add(new RenderSolidColor(const sky.Color(0xFF0000FF), desiredDeltaTheta: kTwoPi * 0.4));
   var stack = new RenderSectorSlice(padding: 2.0);
-  stack.add(new RenderSolidColor(0xFFFFFF00, desiredDeltaRadius: 20.0));
-  stack.add(new RenderSolidColor(0xFFFF9000, desiredDeltaRadius: 20.0));
-  stack.add(new RenderSolidColor(0xFF00FF00));
+  stack.add(new RenderSolidColor(const sky.Color(0xFFFFFF00), desiredDeltaRadius: 20.0));
+  stack.add(new RenderSolidColor(const sky.Color(0xFFFF9000), desiredDeltaRadius: 20.0));
+  stack.add(new RenderSolidColor(const sky.Color(0xFF00FF00)));
   rootCircle.add(stack);
 
   var root = new RenderBoxToRenderSectorAdapter(innerRadius: 50.0, child: rootCircle);

examples/raw/transform.dart

@@ -12,7 +12,7 @@ AppView app;
 
 void main() {
   RenderDecoratedBox green = new RenderDecoratedBox(
-      decoration: new BoxDecoration(backgroundColor: 0xFF00FF00));
+      decoration: new BoxDecoration(backgroundColor: const sky.Color(0xFF00FF00)));
   RenderSizedBox box = new RenderSizedBox(
       desiredSize: new sky.Size(200.0, 200.0), child: green);
 

examples/stocks2/lib/stock_app.dart

@@ -209,7 +209,7 @@ class StocksApp extends App {
     return new Container(
       child: new BlockContainer(children: [buildToolBar()]),
       decoration: new BoxDecoration(
-        backgroundColor: 0xFFFFFFFF
+        backgroundColor: const sky.Color(0xFFFFFFFF)
       )
     );
 

sdk/lib/framework/components2/icon.dart

@@ -30,7 +30,7 @@ class Icon extends Component {
     // TODO(jackson): Use a real image.
     return new Container(
       desiredSize: new sky.Size(size.toDouble(), size.toDouble()),
-      decoration: new BoxDecoration(backgroundColor: 0xFFFF0000)
+      decoration: new BoxDecoration(backgroundColor: const sky.Color(0xFFFF0000))
     );
     // return new Image(width: size, height: size,
     //   src: '${kAssetBase}/${category}/2x_web/ic_${subtype}_${size}dp.png');

sdk/lib/framework/components2/tool_bar.dart

@@ -43,7 +43,7 @@ class ToolBar extends Component {
       ),
       desiredSize: new sky.Size.fromHeight(56.0),
       // padding: new EdgeDims(kStatusBarHeight.toDouble(), 8.0, 0.0, 8.0),
-      decoration: new BoxDecoration(backgroundColor: backgroundColor.value)
+      decoration: new BoxDecoration(backgroundColor: backgroundColor)
     );
   }
 }

sdk/lib/framework/rendering/box.dart

@@ -251,11 +251,7 @@ class RenderPadding extends RenderBox with RenderNodeWithChildMixin<RenderBox> {
 
 // This must be immutable, because we won't notice when it changes
 class BoxDecoration {
-  // TODO(mpcomplete): go through and change the users of this class to pass
-  // a Color object.
-  BoxDecoration({
-    backgroundColor
-  }) : backgroundColor = new sky.Color(backgroundColor);
+  const BoxDecoration({this.backgroundColor});
 
   final sky.Color backgroundColor;
 }

sdk/lib/framework/rendering/paragraph.dart

@@ -16,7 +16,7 @@ class RenderParagraph extends RenderBox {
 
   RenderParagraph({
     String text,
-    int color
+    sky.Color color
   }) : _color = color {
     _layoutRoot.rootElement = _document.createElement('p');
     this.text = text;
@@ -31,9 +31,9 @@ class RenderParagraph extends RenderBox {
     markNeedsLayout();
   }
 
-  int _color = 0xFF000000;
-  int get color => _color;
-  void set color (int value) {
+  sky.Color _color = const sky.Color(0xFF000000);
+  sky.Color get color => _color;
+  void set color (sky.Color value) {
     if (_color != value) {
       _color = value;
       markNeedsPaint();

tests/raw/box_layout-expected.txt

@@ -5,12 +5,12 @@ PAINT FOR FRAME #1 ----------------------------------------------
 1 | TestDisplayList() constructor: 800.0 x 600.0
 1 | paintChild at 0.0,0.0
 1 |  | TestDisplayList() constructor: 800.0 x 600.0
-1 |  | drawRect(0.0:0.0:600.0:800.0, Paint(0xff0000ff))
+1 |  | drawRect(0.0:0.0:600.0:800.0, Paint(Color(0xff0000ff)))
 1 |  | paintChild at 0.0,0.0
 1 |  |  | TestDisplayList() constructor: 800.0 x 600.0
 1 |  |  | paintChild at 50.0,50.0
 1 |  |  |  | TestDisplayList() constructor: 800.0 x 600.0
-1 |  |  |  | drawRect(0.0:0.0:100.0:700.0, Paint(0xff00ff00))
+1 |  |  |  | drawRect(0.0:0.0:100.0:700.0, Paint(Color(0xff00ff00)))
 ------------------------------------------------------------------------
 CONSOLE: PASS: padding
 CONSOLE: 

tests/raw/box_layout.dart

@@ -15,10 +15,10 @@ void main() {
 
   test("padding", () {
     var size = new RenderSizedBox(desiredSize: new sky.Size(double.INFINITY, 100.0));
-    var inner = new RenderDecoratedBox(decoration: new BoxDecoration(backgroundColor: 0xFF00FF00), child: size);
+    var inner = new RenderDecoratedBox(decoration: new BoxDecoration(backgroundColor: const sky.Color(0xFF00FF00)), child: size);
     var padding = new RenderPadding(padding: new EdgeDims.all(50.0), child: inner);
     var block = new RenderBlock(children: [padding]);
-    var outer = new RenderDecoratedBox(decoration: new BoxDecoration(backgroundColor: 0xFF0000FF), child: block);
+    var outer = new RenderDecoratedBox(decoration: new BoxDecoration(backgroundColor: const sky.Color(0xFF0000FF)), child: block);
     app = new TestApp(outer);
   });
 }

tests/raw/render_box-expected.txt

@@ -5,7 +5,7 @@ PAINT FOR FRAME #1 ----------------------------------------------
 1 | TestDisplayList() constructor: 800.0 x 600.0
 1 | paintChild at 0.0,0.0
 1 |  | TestDisplayList() constructor: 800.0 x 600.0
-1 |  | drawRect(0.0:0.0:600.0:800.0, Paint(0xff00ff00))
+1 |  | drawRect(0.0:0.0:600.0:800.0, Paint(Color(0xff00ff00)))
 ------------------------------------------------------------------------
 CONSOLE: PASS: should size to render view
 CONSOLE: 

tests/raw/render_box.dart

@@ -14,7 +14,7 @@ void main() {
   test("should size to render view", () {
     RenderSizedBox root = new RenderSizedBox(
       child: new RenderDecoratedBox(
-        decoration: new BoxDecoration(backgroundColor: 0xFF00FF00)
+        decoration: new BoxDecoration(backgroundColor: const sky.Color(0xFF00FF00))
       )
     );
     TestView renderView = new TestView(child: root);

tests/raw/render_flex-expected.txt

@@ -5,33 +5,33 @@ PAINT FOR FRAME #1 ----------------------------------------------
 1 | TestDisplayList() constructor: 800.0 x 600.0
 1 | paintChild at 0.0,0.0
 1 |  | TestDisplayList() constructor: 800.0 x 600.0
-1 |  | drawRect(0.0:0.0:600.0:800.0, Paint(0xff000000))
+1 |  | drawRect(0.0:0.0:600.0:800.0, Paint(Color(0xff000000)))
 1 |  | paintChild at 0.0,0.0
 1 |  |  | TestDisplayList() constructor: 800.0 x 600.0
-1 |  |  | drawRect(0.0:0.0:82.5:800.0, Paint(0xffffff00))
+1 |  |  | drawRect(0.0:0.0:82.5:800.0, Paint(Color(0xffffff00)))
 1 |  | paintChild at 350.0,82.5
 1 |  |  | TestDisplayList() constructor: 800.0 x 600.0
-1 |  |  | drawRect(0.0:0.0:100.0:100.0, Paint(0x7700ffff))
+1 |  |  | drawRect(0.0:0.0:100.0:100.0, Paint(Color(0x7700ffff)))
 1 |  | paintChild at 0.0,182.5
 1 |  |  | TestDisplayList() constructor: 800.0 x 600.0
 1 |  |  | paintChild at 10.0,10.0
 1 |  |  |  | TestDisplayList() constructor: 800.0 x 600.0
-1 |  |  |  | drawRect(0.0:0.0:150.0:780.0, Paint(0xffffffff))
+1 |  |  |  | drawRect(0.0:0.0:150.0:780.0, Paint(Color(0xffffffff)))
 1 |  |  |  | paintChild at 0.0,0.0
 1 |  |  |  |  | TestDisplayList() constructor: 800.0 x 600.0
-1 |  |  |  |  | drawRect(0.0:0.0:50.0:780.0, Paint(0xff00ff00))
+1 |  |  |  |  | drawRect(0.0:0.0:50.0:780.0, Paint(Color(0xff00ff00)))
 1 |  |  |  | paintChild at 0.0,50.0
 1 |  |  |  |  | TestDisplayList() constructor: 800.0 x 600.0
-1 |  |  |  |  | drawRect(0.0:0.0:100.0:780.0, Paint(0x7700ffff))
+1 |  |  |  |  | drawRect(0.0:0.0:100.0:780.0, Paint(Color(0x7700ffff)))
 1 |  | paintChild at 0.0,352.5
 1 |  |  | TestDisplayList() constructor: 800.0 x 600.0
-1 |  |  | drawRect(0.0:0.0:247.5:800.0, Paint(0xff333333))
+1 |  |  | drawRect(0.0:0.0:247.5:800.0, Paint(Color(0xff333333)))
 1 |  |  | paintChild at 0.0,0.0
 1 |  |  |  | TestDisplayList() constructor: 800.0 x 600.0
-1 |  |  |  | drawRect(0.0:0.0:247.5:266.6666564941406, Paint(0x77ff00ff))
+1 |  |  |  | drawRect(0.0:0.0:247.5:266.6666564941406, Paint(Color(0x77ff00ff)))
 1 |  |  | paintChild at 266.6666666666667,0.0
 1 |  |  |  | TestDisplayList() constructor: 800.0 x 600.0
-1 |  |  |  | drawRect(0.0:0.0:247.5:533.3333129882812, Paint(0xff0000ff))
+1 |  |  |  | drawRect(0.0:0.0:247.5:533.3333129882812, Paint(Color(0xff0000ff)))
 ------------------------------------------------------------------------
 CONSOLE: PASS: should flex
 CONSOLE: 

tests/raw/render_flex.dart

@@ -13,9 +13,9 @@ import 'package:sky/framework/rendering/flex.dart';
 
 class RenderSolidColor extends RenderDecoratedBox {
   final sky.Size desiredSize;
-  final int backgroundColor;
+  final sky.Color backgroundColor;
 
-  RenderSolidColor(int backgroundColor, { this.desiredSize: const sky.Size.infinite() })
+  RenderSolidColor(sky.Color backgroundColor, { this.desiredSize: const sky.Size.infinite() })
       : backgroundColor = backgroundColor,
         super(decoration: new BoxDecoration(backgroundColor: backgroundColor)) {
   }
@@ -30,7 +30,7 @@ class RenderSolidColor extends RenderDecoratedBox {
 
   void handlePointer(sky.PointerEvent event) {
     if (event.type == 'pointerdown')
-      decoration = new BoxDecoration(backgroundColor: 0xFFFF0000);
+      decoration = new BoxDecoration(backgroundColor: const sky.Color(0xFFFF0000));
     else if (event.type == 'pointerup')
       decoration = new BoxDecoration(backgroundColor: backgroundColor);
   }
@@ -45,30 +45,30 @@ void main() {
     RenderFlex flexRoot = new RenderFlex(direction: FlexDirection.Vertical);
 
     RenderDecoratedBox root = new RenderDecoratedBox(
-      decoration: new BoxDecoration(backgroundColor: 0xFF000000),
+      decoration: new BoxDecoration(backgroundColor: const sky.Color(0xFF000000)),
       child: flexRoot
     );
 
-    void addFlexChildSolidColor(RenderFlex parent, int backgroundColor, { int flex: 0 }) {
+    void addFlexChildSolidColor(RenderFlex parent, sky.Color backgroundColor, { int flex: 0 }) {
       RenderSolidColor child = new RenderSolidColor(backgroundColor);
       parent.add(child);
       child.parentData.flex = flex;
     }
 
     // Yellow bar at top
-    addFlexChildSolidColor(flexRoot, 0xFFFFFF00, flex: 1);
+    addFlexChildSolidColor(flexRoot, const sky.Color(0xFFFFFF00), flex: 1);
 
     // Turquoise box
-    flexRoot.add(new RenderSolidColor(0x7700FFFF, desiredSize: new sky.Size(100.0, 100.0)));
+    flexRoot.add(new RenderSolidColor(const sky.Color(0x7700FFFF), desiredSize: new sky.Size(100.0, 100.0)));
 
     // Green and cyan render block with padding
     var renderBlock = new RenderBlock();
 
-    renderBlock.add(new RenderSolidColor(0xFF00FF00, desiredSize: new sky.Size(100.0, 50.0)));
-    renderBlock.add(new RenderSolidColor(0x7700FFFF, desiredSize: new sky.Size(50.0, 100.0)));
+    renderBlock.add(new RenderSolidColor(const sky.Color(0xFF00FF00), desiredSize: new sky.Size(100.0, 50.0)));
+    renderBlock.add(new RenderSolidColor(const sky.Color(0x7700FFFF), desiredSize: new sky.Size(50.0, 100.0)));
 
     var renderDecoratedBlock = new RenderDecoratedBox(
-      decoration: new BoxDecoration(backgroundColor: 0xFFFFFFFF),
+      decoration: new BoxDecoration(backgroundColor: const sky.Color(0xFFFFFFFF)),
       child: renderBlock
     );
 
@@ -77,11 +77,11 @@ void main() {
     var row = new RenderFlex(direction: FlexDirection.Horizontal);
 
     // Purple and blue cells
-    addFlexChildSolidColor(row, 0x77FF00FF, flex: 1);
-    addFlexChildSolidColor(row, 0xFF0000FF, flex: 2);
+    addFlexChildSolidColor(row, const sky.Color(0x77FF00FF), flex: 1);
+    addFlexChildSolidColor(row, const sky.Color(0xFF0000FF), flex: 2);
 
     var decoratedRow = new RenderDecoratedBox(
-      decoration: new BoxDecoration(backgroundColor: 0xFF333333),
+      decoration: new BoxDecoration(backgroundColor: const sky.Color(0xFF333333)),
       child: row
     );
 

tests/resources/display_list.dart

@@ -23,7 +23,7 @@ class TestDisplayList extends RenderNodeDisplayList {
   }
 
   String explainPaint(sky.Paint paint) {
-    return "Paint(0x${paint.color.value.toRadixString(16).padLeft(8, '0')})";
+    return "Paint(${paint.color})";
   }
 
   void save() {