EditableText underlines the word being edited

sky/sdk/lib/editing/input.dart

 // Copyright 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../painting/text_style.dart';
+import '../theme/colors.dart';
+import '../theme/typography.dart' as typography;
 import '../widgets/basic.dart';
 import 'editable_string.dart';
 import 'editable_text.dart';
 import 'keyboard.dart';
 
 typedef void ValueChanged(value);
 
 class Input extends Component {
 
   Input({String key,
          this.placeholder,
          this.onChanged,
          this.focused})
       : super(key: key, stateful: true) {
     _editableValue = new EditableString(
       text: _value,
       onUpdated: _handleTextUpdated
     );
   }
 
-  // static final Style _style = new Style('''
-  //   transform: translateX(0);
-  //   margin: 8px;
-  //   padding: 8px;
-  //   border-bottom: 1px solid ${Grey[200]};
-  //   align-self: center;
-  //   height: 1.2em;
-  //   white-space: pre;

[Hixie, 2015/06/19 22:39:44]

did white-space:pre get carried over?

[hansmuller, 2015/06/19 23:32:12]

Good point. The height and white-space haven't been carried forward.
I'll add a comment.

-  //   overflow: hidden;'''
-  // );
-
-  // static final Style _placeholderStyle = new Style('''
-  //   top: 8px;
-  //   left: 8px;
-  //   position: absolute;
-  //   ${typography.black.caption};'''
-  // );
-
-  // static final String _focusedInlineStyle = '''
-  //   padding: 7px;
-  //   border-bottom: 2px solid ${Blue[500]};''';
+  static final TextStyle _placeholderStyle = typography.black.caption;
 
   String placeholder;
   ValueChanged onChanged;
   bool focused = false;
 
   void syncFields(Input source) {
     placeholder = source.placeholder;
     onChanged = source.onChanged;
     focused = source.focused;
   }
@@ skipping 10 matching lines @@
         onChanged(_value);
     }
   }
 
   Widget build() {
     if (focused && !_isAttachedToKeyboard) {
       keyboard.show(_editableValue.stub);
       _isAttachedToKeyboard = true;
     }
 
-    List<Widget> children = [];
-
+    List<Widget> textChildren = [];

[Hixie, 2015/06/19 22:39:44]

<Widget>[].

[hansmuller, 2015/06/19 23:32:12]

Done.

     if (placeholder != null && _value.isEmpty) {
-      children.add(new Container(
-          // style: _placeholderStyle,
-          child: new Text(placeholder)
+      textChildren.add(new Container(

[Hixie, 2015/06/19 22:39:44]

What is the Container() for?

[hansmuller, 2015/06/19 23:32:12]

Oops, thanks for pointing that out.

+        child: new Text(placeholder, style: _placeholderStyle)
       ));
     }
+    textChildren.add(
+      new EditableText(value: _editableValue, focused: focused));

[Hixie, 2015/06/19 22:39:44]

If you put a line break after a (, but a line break before its corresponding ).

[hansmuller, 2015/06/19 23:32:12]

Done.

 
-    children.add(new EditableText(value: _editableValue, focused: focused));
+    Container text = new Container(
+      padding: const EdgeDims.only(left: 8.0, right: 8.0, top: 2.0),
+      child: new Stack(textChildren),
+      constraints: new BoxConstraints(minWidth: double.INFINITY)

[abarth-chromium, 2015/06/19 22:41:38]

You might as well just write:

width: double.INFINITY

But rather than do this, see below.

[hansmuller, 2015/06/19 23:32:12]

Acknowledged.

+    );
+
+    Color focusColor = focused ? Blue[400] : Grey[200];
+    Container focusHighlight = new Container(
+      margin: const EdgeDims.only(top: 8.0),
+      constraints: new BoxConstraints.tightFor(height: focused ? 2.0 : 1.0),
+      decoration: new BoxDecoration(backgroundColor: focusColor)

[abarth-chromium, 2015/06/19 22:41:38]

Why not use a bottom border to draw this line?  That's much cheaper than
creating an entire entry in the render tree.

[hansmuller, 2015/06/19 23:32:12]

Done.

+    );
+
+    Flex input = new Flex([text, focusHighlight],
+      direction: FlexDirection.vertical, 
+      justifyContent: FlexJustifyContent.center
+    );
 
     return new Listener(
-      // style: _style,
-      // inlineStyle: focused ? _focusedInlineStyle : null,
-      child: new Stack(children),
+      child: input,
       onPointerDown: (_) => keyboard.showByRequest()
     );
   }
 
   void didUnmount() {
     if (_isAttachedToKeyboard)
       keyboard.hide();
     super.didUnmount();
   }
-
 }