Merge remote-tracking branch 'upstream/master' into baseline5

Conflicts:
	sky/sdk/lib/rendering/flex.dart

packages/flutter/README.md

-Contributing
-============
+Getting started with Sky
+========================
 
-This SDK is generated from the
-[Sky repository](https://github.com/domokit/sky_engine) using
-[deploy_sdk.py](https://github.com/domokit/sky_engine/blob/master/sky/tools/deploy_sdk.py).
-Static files (including this README.md) are located under
-[sky/sdk](https://github.com/domokit/sky_engine/tree/master/sky/sdk).
+Sky apps are written in Dart. To get started, we need to set up Dart SDK:
 
-Pull
-requests and issue reports are gladly accepted at the
-[Sky repository](https://github.com/domokit/sky_engine)!
+ - Install the [Dart SDK](https://www.dartlang.org/downloads/).
+ - Ensure that `$DART_SDK` is set to the path of your Dart SDK and that the
+   `dart` and `pub` executables are on your `$PATH`.
 
-Sky
-===
+Once you have installed Dart SDK, create a new directory and add a
+[pubspec.yaml](https://www.dartlang.org/tools/pub/pubspec.html):
 
-Sky is an experimental, high-performance UI framework for mobile apps. Sky helps
-you create apps with beautiful user interfaces and high-quality interactive
-design that run smoothly at 120 Hz.
-
-Sky consists of two components:
-
-1. *The Sky engine.* The engine is the core of the system. Written in C++, the
-   engine provides the muscle of the Sky system. The engine provides
-   several primitives, including a soft real-time scheduler and a hierarchical,
-   retained-mode graphics system, that let you build high-quality apps.
-
-2. *The Sky framework.* The [framework](packages/sky/lib/framework) makes it
-   easy to build apps using Sky by providing familiar user interface widgets,
-   such as buttons, infinite lists, and animations, on top of the engine using
-   Dart. These extensible components follow a functional programming style
-   inspired by [React](http://facebook.github.io/react/).
-
-We're still iterating on Sky heavily, which means the framework and underlying
-engine are both likely to change in incompatible ways several times, but if
-you're interested in trying out the system, this document can help you get
-started.
-
-Examples
---------
-
-Sky uses Dart and Sky applications are
-[Dart Packages](https://www.dartlang.org/docs/tutorials/shared-pkgs/).
-Application creation starts by creating a new directory and
-adding a [pubspec.yaml](https://www.dartlang.org/tools/pub/pubspec.html):
-
- pubspec.yaml for your app:
 ```yaml
 name: your_app_name
 dependencies:
   sky: any
 ```
 
-Once the pubspec is in place, create a `lib` directory (where your dart code
-will go), ensure that the 'dart' and 'pub' executables are on your $PATH and
-run the following:
+Next, create a `lib` directory (which is where your Dart code will go) and use
+the `pub` tool to fetch the Sky package and its dependencies:
 
-`pub get && pub run sky:init`.
+ - `mkdir lib`
+ - `pub get && pub run sky:init`
 
-Currently the Sky Engine assumes the entry point for your application is a
-`main` function in a Dart file inside your package:
+Sky assumes the entry point for your application is a `main` function in
+`lib/main.dart`:
 
 ```dart
 import 'package:sky/widgets/basic.dart';
 
 class HelloWorldApp extends App {
   Widget build() {
-    return new Text('Hello, world!');
+    return new Center(child: new Text('Hello, world!'));
   }
 }
 
@@ -74,67 +39,27 @@ void main() {
 }
 ```
 
-Execution starts in `main`, which instructs the framework to run a new
-instance of the `HelloWorldApp`. The framework then calls the `build()`
-function on `HelloWorldApp` to create a tree of widgets, some of which might
-be other `Components`, which in turn have `build()` functions that generate
-more widgets iteratively to create the widget hierarchy.
-
-Later, if a `Component` changes state, the framework calls that component's
-`build()` function again to create a new widget tree. The framework diffs the
-new widget tree against the old widget tree and any differences are applyed
-to the underlying render tree.
-
- * To learn more about the widget system, please see the
-   [widgets tutorial](lib/widgets/README.md).
- * To learn how to run Sky on your device, please see the
-   [Running a Sky application](#running-a-sky-application) section in this
-   document.
- * To dive into examples, please see the [examples directory](example/).
-
-Services
---------
-
-Sky apps can access services from the host operating system using Mojo IPC. For
-example, you can access the network using the `network_service.mojom` interface.
-Although you can use these low-level interfaces directly, you might prefer to
-access these services via libraries in the framework. For example, the
-`fetch.dart` library wraps the underlying `network_service.mojom` in an
-ergonomic interface:
-
-```dart
-import 'package:sky/mojo/net/fetch.dart';
-
-main() async {
-  Response response = await fetchBody('example.txt');
-  print(response.bodyAsString());
-}
-```
-
-Set up your computer
---------------------
-
-1. Install the Dart SDK:
-  - https://www.dartlang.org/tools/download.html
+Execution starts in `main`, which runs a new instance of the `HelloWorldApp`.
+The `HelloWorldApp` builds a `Text` widget containing the famous `Hello, world!`
+string and centers it on the screen using a `Center` widget. To learn more about
+the widget system, please see the [widgets tutorial](lib/widgets/README.md).
 
-2. Install the `adb` tool from the Android SDK:
-  - https://developer.android.com/sdk/installing/index.html
-
-3. Ensure that `$DART_SDK` is set to the path of your Dart SDK and `adb`
-   (inside `platform-tools` in the android sdk) is in your `$PATH`.
-
-Set up your device
-------------------
+Setup your Android device
+-------------------------
 
 Currently Sky requires an Android device running the Lollipop (or newer) version
 of the Android operating system.
 
-1. Enable developer mode on your device by visiting `Settings > About phone`
+ - Install the `adb` tool from the [Android SDK](https://developer.android.com/sdk/installing/index.html)
+   and ensure that `adb` (inside `platform-tools` in the Android SDK) is in your
+   `$PATH`.
+
+ - Enable developer mode on your device by visiting `Settings > About phone`
    and tapping the `Build number` field five times.
 
-2. Enable `USB debugging` in `Settings > Developer options`.
+ - Enable `USB debugging` in `Settings > Developer options`.
 
-3. Using a USB cable, plug your phone into your computer. If prompted on your
+ - Using a USB cable, plug your phone into your computer. If prompted on your
    device, authorize your computer to access your device.
 
 Running a Sky application
@@ -142,73 +67,32 @@ Running a Sky application
 
 The `sky` pub package includes a `sky_tool` script to assist in running
 Sky applications inside the `SkyDemo.apk` harness.  The `sky_tool` script
-expects to be run from the root directory of your application pub package. To
-run one of the examples in this SDK, try:
+expects to be run from the root directory of your application's package (i.e.,
+the same directory that contains the `pubspec.yaml` file). To run your app,
+follow these instructions:
 
-1. `cd example/stocks`
-
-2. `pub get` to set up a copy of the sky package in the app directory.
-
-3. `./packages/sky/sky_tool start` to start the dev server and upload your
+ - `./packages/sky/sky_tool start` to start the dev server and upload your
    app to the device.
    (NOTE: add a `--install` flag to install `SkyDemo.apk` if it is not already
    installed on the device.)
 
-4. Use `adb logcat` to view any errors or Dart `print()` output from the app.
+ - Use `adb logcat` to view any errors or Dart `print()` output from the app.
    `adb logcat -s sky` can be used to filter only adb messages from
    `SkyDemo.apk`.
 
-Measuring Performance
----------------------
-
-Sky has support for generating trace files compatible with
-[Chrome's about:tracing](https://www.chromium.org/developers/how-tos/trace-event-profiling-tool).
-
-`packages/sky/sky_tool start_tracing` and `packages/sky/sky_tool stop_tracing`
-are the commands to use.
-
-Due to https://github.com/domokit/mojo/issues/127 tracing currently
-requires root access on the device.
-
 Debugging
 ---------
 
 Sky uses [Observatory](https://www.dartlang.org/tools/observatory/) for
 debugging and profiling. While running your Sky app using `sky_tool`, you can
-access Observatory by navigating your web browser to http://localhost:8181/.
-
-Building a standalone MyApp
----------------------------
-
-Although it is possible to bundle the Sky Engine in your own app (instead of
-running your code inside SkyDemo.apk), right now doing so is difficult.
-
-There is one example of doing so if you're feeling brave:
-https://github.com/domokit/sky_engine/tree/master/sky/sdk/example/stocks
-
-Eventually we plan to make this much easier and support platforms other than
-Android, but that work is yet in progress.
-
-Adding Services to MyApp
-------------------------
-
-[Mojo IPC](https://github.com/domokit/mojo) is an inter-process-communication
-system designed to provide cross-thread, cross-process, and language-agnostic
-communication between applications.  Sky uses Mojo IPC to make it possible
-to write UI code in Dart and yet depend on networking code, etc. written in
-another language.  Services are replicable, meaning that Dart code
-written to use the `network_service` remains portable to any platform
-(iOS, Android, etc.) by simply providing a 'natively' written `network_service`.
-
-Embedders of the Sky Engine and consumers of the Sky Framework can use this
-same mechanism to expose not only existing services like the
-[Keyboard](https://github.com/domokit/mojo/blob/master/mojo/services/keyboard/public/interfaces/keyboard.mojom)
-service to allow Sky Framework Dart code to interface with the underlying
-platform's Keyboard, but also to expose any additional non-Dart business logic
-to Sky/Dart UI code.
-
-As an example, [SkyApplication](https://github.com/domokit/sky_engine/blob/master/sky/shell/org/domokit/sky/shell/SkyApplication.java)
-exposes a mojo `network_service` (required by Sky Engine C++ code)
-[SkyDemoApplication](https://github.com/domokit/sky_engine/blob/master/sky/apk/demo/org/domokit/sky/demo/SkyDemoApplication.java)
-additionally exposes `keyboard_service` and `sensor_service` for use by the Sky
-Framework from Dart.
+access Observatory by navigating your web browser to
+[http://localhost:8181/](http://localhost:8181/).
+
+Building a standalone APK
+-------------------------
+
+Although it is possible to build a standalone APK containing your application,
+doing so right now is difficult. If you're feeling brave, you can see how we
+build the `Stocks.apk` in [example/stocks](example/stocks). Eventually we plan
+to make this much easier and support platforms other than Android, but that work
+still in progress.

packages/flutter/example/rendering/align_items.dart

@@ -20,7 +20,7 @@ void main() {
     TextStyle style = const TextStyle(color: const Color(0xFF000000));
     RenderParagraph paragraph = new RenderParagraph(new InlineStyle(style, [new InlineText("${alignItems}")]));
     table.add(new RenderPadding(child: paragraph, padding: new EdgeDims.only(top: 20.0)));
-    var row = new RenderFlex(alignItems: alignItems);
+    var row = new RenderFlex(alignItems: alignItems, baseline: TextBaseline.alphabetic);
 
     style = new TextStyle(fontSize: 15.0, color: const Color(0xFF000000));
     row.add(new RenderDecoratedBox(
@@ -32,7 +32,7 @@ void main() {
       decoration: new BoxDecoration(backgroundColor: const Color(0x7FCCFFCC)),
       child: new RenderParagraph(new InlineStyle(style, [new InlineText('foo foo foo')]))
     ));
-    var subrow = new RenderFlex(alignItems: alignItems);
+    var subrow = new RenderFlex(alignItems: alignItems, baseline: TextBaseline.alphabetic);
     style = new TextStyle(fontSize: 25.0, color: const Color(0xFF000000));
     subrow.add(new RenderDecoratedBox(
       decoration: new BoxDecoration(backgroundColor: const Color(0x7FCCCCFF)),

packages/flutter/example/stocks/lib/stock_row.dart

@@ -6,6 +6,7 @@ import 'package:sky/painting/text_style.dart';
 import 'package:sky/rendering/box.dart';
 import 'package:sky/widgets/ink_well.dart';
 import 'package:sky/widgets/basic.dart';
+import 'package:sky/widgets/default_text_style.dart';
 import 'package:sky/widgets/theme.dart';
 
 import 'stock_arrow.dart';
@@ -60,7 +61,11 @@ class StockRow extends Component {
             margin: const EdgeDims.only(right: 5.0)
           ),
           new Flexible(
-            child: new Flex(children, alignItems: FlexAlignItems.baseline)
+            child: new Flex(
+              children,
+              alignItems: FlexAlignItems.baseline,
+              textBaseline: DefaultTextStyle.of(this).textBaseline
+            )
           )
         ])
       )

packages/flutter/lib/painting/text_style.dart

@@ -10,6 +10,8 @@ const bold = FontWeight.w700;
 
 enum TextAlign { left, right, center }
 
+enum TextBaseline { alphabetic, ideographic }
+
 enum TextDecoration { none, underline, overline, lineThrough }
 const underline = const <TextDecoration>[TextDecoration.underline];
 const overline = const <TextDecoration>[TextDecoration.overline];
@@ -24,6 +26,7 @@ class TextStyle {
     this.fontSize,
     this.fontWeight,
     this.textAlign,
+    this.textBaseline,
     this.height,
     this.decoration,
     this.decorationColor,
@@ -35,6 +38,7 @@ class TextStyle {
   final double fontSize; // in pixels
   final FontWeight fontWeight;
   final TextAlign textAlign;
+  final TextBaseline textBaseline;
   final double height; // multiple of fontSize
   final List<TextDecoration> decoration; // TODO(ianh): Switch this to a Set<> once Dart supports constant Sets
   final Color decorationColor;
@@ -46,6 +50,7 @@ class TextStyle {
     double fontSize,
     FontWeight fontWeight,
     TextAlign textAlign,
+    TextBaseline textBaseline,
     double height,
     List<TextDecoration> decoration,
     Color decorationColor,
@@ -57,6 +62,7 @@ class TextStyle {
       fontSize: fontSize != null ? fontSize : this.fontSize,
       fontWeight: fontWeight != null ? fontWeight : this.fontWeight,
       textAlign: textAlign != null ? textAlign : this.textAlign,
+      textBaseline: textBaseline != null ? textBaseline : this.textBaseline,
       height: height != null ? height : this.height,
       decoration: decoration != null ? decoration : this.decoration,
       decorationColor: decorationColor != null ? decorationColor : this.decorationColor,
@@ -71,6 +77,7 @@ class TextStyle {
       fontSize: other.fontSize,
       fontWeight: other.fontWeight,
       textAlign: other.textAlign,
+      textBaseline: other.textBaseline,
       height: other.height,
       decoration: other.decoration,
       decorationColor: other.decorationColor,
@@ -161,6 +168,7 @@ class TextStyle {
       fontSize == other.fontSize &&
       fontWeight == other.fontWeight &&
       textAlign == other.textAlign &&
+      textBaseline == other.textBaseline &&
       decoration == other.decoration &&
       decorationColor == other.decorationColor &&
       decorationStyle == other.decorationStyle;
@@ -174,6 +182,7 @@ class TextStyle {
     value = 37 * value + fontSize.hashCode;
     value = 37 * value + fontWeight.hashCode;
     value = 37 * value + textAlign.hashCode;
+    value = 37 * value + textBaseline.hashCode;
     value = 37 * value + decoration.hashCode;
     value = 37 * value + decorationColor.hashCode;
     value = 37 * value + decorationStyle.hashCode;
@@ -193,6 +202,8 @@ class TextStyle {
       result.add('${prefix}fontWeight: $fontWeight');
     if (textAlign != null)
       result.add('${prefix}textAlign: $textAlign');
+    if (textBaseline != null)
+      result.add('${prefix}textBaseline: $textBaseline');
     if (decoration != null)
       result.add('${prefix}decoration: $decoration');
     if (decorationColor != null)

packages/flutter/lib/rendering/box.dart

@@ -7,10 +7,12 @@ import 'dart:sky' as sky;
 
 import 'package:sky/base/debug.dart';
 import 'package:sky/painting/box_painter.dart';
+import 'package:sky/painting/text_style.dart';
 import 'package:sky/rendering/object.dart';
 import 'package:vector_math/vector_math.dart';
 
 export 'package:sky/painting/box_painter.dart';
+export 'package:sky/painting/text_style.dart' show TextBaseline;
 
 // GENERIC BOX RENDERING
 // Anything that has a concept of x, y, width, height is going to derive from this
@@ -253,8 +255,6 @@ class BoxParentData extends ParentData {
   String toString() => 'position=$position';
 }
 
-enum TextBaseline { alphabetic, ideographic }
-
 abstract class RenderBox extends RenderObject {
 
   void setupParentData(RenderObject child) {

packages/flutter/lib/rendering/flex.dart

@@ -47,10 +47,12 @@ class RenderFlex extends RenderBox with ContainerRenderObjectMixin<RenderBox, Fl
     List<RenderBox> children,
     FlexDirection direction: FlexDirection.horizontal,
     FlexJustifyContent justifyContent: FlexJustifyContent.start,
-    FlexAlignItems alignItems: FlexAlignItems.center
+    FlexAlignItems alignItems: FlexAlignItems.center,
+    TextBaseline textBaseline
   }) : _direction = direction,
        _justifyContent = justifyContent,
-       _alignItems = alignItems {
+       _alignItems = alignItems,
+       _textBaseline = textBaseline {
     addAll(children);
   }
 
@@ -81,6 +83,15 @@ class RenderFlex extends RenderBox with ContainerRenderObjectMixin<RenderBox, Fl
     }
   }
 
+  TextBaseline _textBaseline;
+  TextBaseline get textBaseline => _textBaseline;
+  void set textBaseline (TextBaseline value) {
+    if (_textBaseline != value) {
+      _textBaseline = value;
+      markNeedsLayout();
+    }
+  }
+
   // Set during layout if overflow occurred on the main axis
   double _overflow;
 
@@ -345,8 +356,8 @@ class RenderFlex extends RenderBox with ContainerRenderObjectMixin<RenderBox, Fl
         crossSize = math.max(crossSize, _getCrossSize(child));
       }
       if (alignItems == FlexAlignItems.baseline) {
-        // TODO(jackson): Support for non-alphabetic baselines
-        double distance = child.getDistanceToBaseline(TextBaseline.alphabetic, onlyReal: true);
+        assert(textBaseline != null);
+        double distance = child.getDistanceToBaseline(textBaseline, onlyReal: true);
         if (distance != null)
           maxBaselineDistance = math.max(maxBaselineDistance, distance);
       }
@@ -411,10 +422,9 @@ class RenderFlex extends RenderBox with ContainerRenderObjectMixin<RenderBox, Fl
           break;
         case FlexAlignItems.baseline:
           childCrossPosition = 0.0;
-          // TODO(jackson): Support for vertical baselines
           if (_direction == FlexDirection.horizontal) {
-            // TODO(jackson): Support for non-alphabetic baselines
-            double distance = child.getDistanceToBaseline(TextBaseline.alphabetic, onlyReal: true);
+            assert(textBaseline != null);
+            double distance = child.getDistanceToBaseline(textBaseline, onlyReal: true);
             if (distance != null)
               childCrossPosition = maxBaselineDistance - distance;
           }

packages/flutter/lib/theme/typography.dart

@@ -9,20 +9,21 @@ import 'dart:sky';
 import 'package:sky/painting/text_style.dart';
 
 // TODO(eseidel): Font weights are supposed to be language relative!
+// TODO(jackson): Baseline should be language relative!
 // These values are for English-like text.
 class TextTheme {
   TextTheme._(Color color54, Color color87)
-    : display4 = new TextStyle(fontSize: 112.0, fontWeight: FontWeight.w100, color: color54),
-      display3 = new TextStyle(fontSize:  56.0, fontWeight: FontWeight.w400, color: color54),
-      display2 = new TextStyle(fontSize:  45.0, fontWeight: FontWeight.w400, color: color54, height: 48.0 / 45.0),
-      display1 = new TextStyle(fontSize:  34.0, fontWeight: FontWeight.w400, color: color54, height: 40.0 / 34.0),
-      headline = new TextStyle(fontSize:  24.0, fontWeight: FontWeight.w400, color: color87, height: 32.0 / 24.0),
-      title    = new TextStyle(fontSize:  20.0, fontWeight: FontWeight.w500, color: color87, height: 28.0 / 20.0),
-      subhead  = new TextStyle(fontSize:  16.0, fontWeight: FontWeight.w400, color: color87, height: 24.0 / 16.0),
-      body2    = new TextStyle(fontSize:  14.0, fontWeight: FontWeight.w500, color: color87, height: 24.0 / 14.0),
-      body1    = new TextStyle(fontSize:  14.0, fontWeight: FontWeight.w400, color: color87, height: 20.0 / 14.0),
-      caption  = new TextStyle(fontSize:  12.0, fontWeight: FontWeight.w400, color: color54),
-      button   = new TextStyle(fontSize:  14.0, fontWeight: FontWeight.w500, color: color87);
+    : display4 = new TextStyle(fontSize: 112.0, fontWeight: FontWeight.w100, color: color54, textBaseline: TextBaseline.alphabetic),
+      display3 = new TextStyle(fontSize:  56.0, fontWeight: FontWeight.w400, color: color54, textBaseline: TextBaseline.alphabetic),
+      display2 = new TextStyle(fontSize:  45.0, fontWeight: FontWeight.w400, color: color54, height: 48.0 / 45.0, textBaseline: TextBaseline.alphabetic),
+      display1 = new TextStyle(fontSize:  34.0, fontWeight: FontWeight.w400, color: color54, height: 40.0 / 34.0, textBaseline: TextBaseline.alphabetic),
+      headline = new TextStyle(fontSize:  24.0, fontWeight: FontWeight.w400, color: color87, height: 32.0 / 24.0, textBaseline: TextBaseline.alphabetic),
+      title    = new TextStyle(fontSize:  20.0, fontWeight: FontWeight.w500, color: color87, height: 28.0 / 20.0, textBaseline: TextBaseline.alphabetic),
+      subhead  = new TextStyle(fontSize:  16.0, fontWeight: FontWeight.w400, color: color87, height: 24.0 / 16.0, textBaseline: TextBaseline.alphabetic),
+      body2    = new TextStyle(fontSize:  14.0, fontWeight: FontWeight.w500, color: color87, height: 24.0 / 14.0, textBaseline: TextBaseline.alphabetic),
+      body1    = new TextStyle(fontSize:  14.0, fontWeight: FontWeight.w400, color: color87, height: 20.0 / 14.0, textBaseline: TextBaseline.alphabetic),
+      caption  = new TextStyle(fontSize:  12.0, fontWeight: FontWeight.w400, color: color54, textBaseline: TextBaseline.alphabetic),
+      button   = new TextStyle(fontSize:  14.0, fontWeight: FontWeight.w500, color: color87, textBaseline: TextBaseline.alphabetic);
 
   final TextStyle display4;
   final TextStyle display3;

packages/flutter/lib/widgets/README.md

@@ -12,14 +12,14 @@ in the underlying render tree to transition from one state to the next.
 Hello World
 -----------
 
-To build an application, create a subclass of App and instantiate it:
+To build an application, create a subclass of `App` and instantiate it:
 
 ```dart
 import 'package:sky/widgets/basic.dart';
 
 class HelloWorldApp extends App {
   Widget build() {
-    return new Text('Hello, world!');
+    return new Center(child: new Text('Hello, world!'));
   }
 }
 

packages/flutter/lib/widgets/basic.dart

@@ -401,12 +401,14 @@ class Flex extends MultiChildRenderObjectWrapper {
     String key,
     this.direction: FlexDirection.horizontal,
     this.justifyContent: FlexJustifyContent.start,
-    this.alignItems: FlexAlignItems.center
+    this.alignItems: FlexAlignItems.center,
+    this.textBaseline
   }) : super(key: key, children: children);
 
   final FlexDirection direction;
   final FlexJustifyContent justifyContent;
   final FlexAlignItems alignItems;
+  final TextBaseline textBaseline;
 
   RenderFlex createNode() => new RenderFlex(direction: this.direction);
   RenderFlex get root => super.root;
@@ -416,6 +418,7 @@ class Flex extends MultiChildRenderObjectWrapper {
     root.direction = direction;
     root.justifyContent = justifyContent;
     root.alignItems = alignItems;
+    root.textBaseline = textBaseline;
   }
 
 }