Improve compositing strategy for Shrine (#5014)

This patch includes a number of improvements:

 * Material page routes now put a repaint boundary inside their transition so
   they don't repaint during the transition.
 * Heroes that are on a quest now get a repaint boundary so we repaint them
   individually.
 * I've hoisted the transparent material for the product items up in the widget
   tree, which doesn't affect performance but makes the ink splashes reach the
   edge of the product cards.
 * I've changed the repaint rainbow visualization to make it easier to see
   what's going on.

examples/flutter_gallery/lib/demo/shrine/shrine_home.dart

@@ -258,37 +258,37 @@ class ProductItem extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return new Card(
-      child: new Column(
+      child: new Stack(
         children: <Widget>[
-          new Align(
-            alignment: FractionalOffset.centerRight,
-            child: new ProductPriceItem(product: product)
-          ),
-          new Container(
-            width: 144.0,
-            height: 144.0,
-            padding: const EdgeInsets.symmetric(horizontal: 8.0),
-            child: new Stack(
-              children: <Widget>[
-                new Hero(
-                  tag: productHeroTag,
-                  key: new ObjectKey(product),
-                  child: new Image(
-                    image: new AssetImage(product.imageAsset),
-                    fit: ImageFit.contain
+          new Column(
+            children: <Widget>[
+              new Align(
+                alignment: FractionalOffset.centerRight,
+                child: new ProductPriceItem(product: product)
+              ),
+              new Container(
+                width: 144.0,
+                height: 144.0,
+                padding: const EdgeInsets.symmetric(horizontal: 8.0),
+                child: new Hero(
+                    tag: productHeroTag,
+                    key: new ObjectKey(product),
+                    child: new Image(
+                      image: new AssetImage(product.imageAsset),
+                      fit: ImageFit.contain
+                    )
                   )
                 ),
-                new Material(
-                  color: Theme.of(context).canvasColor.withAlpha(0x00),
-                  child: new InkWell(onTap: onPressed)
-                ),
-              ]
-            )
+              new Padding(
+                padding: const EdgeInsets.symmetric(horizontal: 8.0),
+                child: new VendorItem(vendor: product.vendor)
+              )
+            ]
+          ),
+          new Material(
+            type: MaterialType.transparency,
+            child: new InkWell(onTap: onPressed)
           ),
-          new Padding(
-            padding: const EdgeInsets.symmetric(horizontal: 8.0),
-            child: new VendorItem(vendor: product.vendor)
-          )
         ]
       )
     );

packages/flutter/lib/src/rendering/object.dart

@@ -173,8 +173,13 @@ class PaintingContext {
     if (!_isRecording)
       return;
     assert(() {
-      if (debugRepaintRainbowEnabled)
-        canvas.drawRect(_paintBounds, new Paint()..color = debugCurrentRepaintColor.toColor());
+      if (debugRepaintRainbowEnabled) {
+        Paint paint = new Paint()
+          ..style = PaintingStyle.stroke
+          ..strokeWidth = 6.0
+          ..color = debugCurrentRepaintColor.toColor();
+        canvas.drawRect(_paintBounds.deflate(3.0), paint);
+      }
       if (debugPaintLayerBordersEnabled) {
         Paint paint = new Paint()
           ..style = PaintingStyle.stroke

packages/flutter/lib/src/widgets/heroes.dart

@@ -272,7 +272,7 @@ class _HeroQuestState implements HeroHandle {
       size: animationArea.size,
       child: new RotationTransition(
         turns: currentTurns.animate(animation),
-        child: new KeyedSubtree(
+        child: new RepaintBoundary(
           key: key,
           child: child
         )

packages/flutter/lib/src/widgets/routes.dart

@@ -426,15 +426,14 @@ class _ModalScopeState extends State<_ModalScope> {
           context,
           config.route.animation,
           config.route.forwardAnimation,
-          contents
+          new RepaintBoundary(child: contents)
         )
       );
     }
-    contents = new Focus(
+    return new Focus(
       key: config.route.focusKey,
-      child: new RepaintBoundary(child: contents)
+      child: contents
     );
-    return contents;
   }
 }