Terminal: Add support for (and "fix") backspace.

sky/examples/terminal/terminal.sky

 <!--
 // 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 src="/sky/framework/elements/sky-element.sky" />
 <import src="/sky/framework/elements/sky-scrollable.sky" />
 <sky-element>
 <template>
   <style>
     #control {
       height: -webkit-fill-available;
       background-color: black;
       color: rgb(255, 191, 0);
       font-family: 'Courier', 'monospace';
     }
-    span {
-      white-space: nowrap;
+    .line {
+      white-space: pre;
     }
   </style>
   <sky-scrollable id="control" contenteditable />
 </template>
 <script>
 import 'dart:async';
 import 'dart:core';
 import 'dart:sky';
 import 'package:examples/echo_terminal/terminal_client.mojom.dart' as terminal;
 import '/sky/framework/embedder.dart';
@@ skipping 18 matching lines @@
   // dequeued).
   List<Completer<int>> _readerQueue;
 
   TerminalDisplayImpl()
       : _inputQueue = new List<int>(),
         _readerQueue = new List<Completer<int>>() {
   }
 
   void shadowRootReady() {
     _control = shadowRoot.getElementById('control');
+    _control.addEventListener('keydown', _handleKeyDown);
     _control.addEventListener('keypress', _handleKeyPress);
 
     // Initialize with the first line.
     _newLine();
 
     _connect(getAttribute('url'));
   }
 
+  void _handleKeyDown(KeyboardEvent event) {

[ojan, 2015/03/12 20:11:48]

FWIW, you're better off just not using keypress. Use keydown for everything. We
need to remove keypress from the platform.

As for the contentedtiable thing, it appears we've broken tabindex (the standard
way of making something focusable on the web.

+    // TODO(vtl): In general, our key handling is a total hack (due in part to
+    // sky's keyboard support being incomplete) -- e.g., we shouldn't have to
+    // make our div contenteditable. We have to intercept backspace (^H) here,
+    // since we won't actually get a keypress event for it. (Possibly, we should
+    // only handle keydown instead of keypress, but then we'd have to handle
+    // shift, etc. ourselves.)
+    if (event.key == 8) {
+      _enqueueChar(8);
+      event.preventDefault();
+    }
+  }
+
   void _handleKeyPress(KeyboardEvent event) {
+    _enqueueChar(event.charCode);
+    event.preventDefault();
+  }
+
+  void _enqueueChar(int charCode) {
     // TODO(vtl): Add "echo" mode; do |putChar(event.charCode);| if echo is on.
 
     if (_readerQueue.isEmpty) {
-      _inputQueue.add(event.charCode);
+      _inputQueue.add(charCode);
     } else {
-      _readerQueue.removeAt(0).complete(event.charCode);
+      _readerQueue.removeAt(0).complete(charCode);
     }
+  }
 
-    event.preventDefault();
+  void _backspace() {
+    var oldText = _control.lastChild.textContent;
+    if (oldText.length > 0) {
+      _control.lastChild.textContent = oldText.substring(0, oldText.length - 1);
+    }
   }
 
   void _newLine() {
-    _control.appendChild(document.createElement('span'));
+    var line = document.createElement('div');
+    line.setAttribute('class', 'line');
+    _control.appendChild(line);
+  }
+
+  void _clear() {
+    while (_control.firstChild != null) {
+      _control.firstChild.remove();
+    }
+    _newLine();
   }
 
   // TODO(vtl): Should we always auto-connect? Should there be facilities for
   // programmatically connecting? (What if the |url| attribute isn't set?)
   void _connect(String url) {
     var terminalClient = new terminal.TerminalClientProxy.unbound();
     embedder.connectToService(url, terminalClient);
     terminalClient.ptr.connectToTerminal(new TerminalFileImpl(this).stub);
     terminalClient.close();
   }
 
   // |TerminalDisplay| implementation:
 
   @override
   void putChar(int byte) {
-    if (byte == 10 || byte == 13) {
-      _newLine();
+    // Fast-path for printable chars.
+    if (byte >= 32) {
+      _control.lastChild.textContent += new String.fromCharCode(byte);
       return;
     }
-    _control.lastChild.textContent += new String.fromCharCode(byte);
+
+    switch (byte) {
+      case 8:  // BS (^H).
+        _backspace();
+        break;
+      case 10:  // LF ('\n').
+        _newLine();  // TODO(vtl): LF and CR should be separated.
+        break;
+      case 12:  // FF (^L).
+        _clear();
+        break;
+      case 13:  // CR ('\r').
+        _newLine();  // TODO(vtl): LF and CR should be separated.
+        break;
+      default:
+        // Should beep or something.
+        break;
+    }
   }
 
   @override
   Future<int> getChar() async {
     if (_inputQueue.isNotEmpty) {
       return new Future.value(_inputQueue.removeAt(0));
     }
 
     var completer = new Completer<int>();
     _readerQueue.add(completer);
     return completer.future;
   }
 }
 
 _init(script) => register(script, TerminalDisplayImpl);
 </script>
 </sky-element>