Adding keyboard service.

sky/framework/sky-input.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/shell.sky" as="shell" />
 <import src="/sky/framework/sky-element/sky-element.sky" as="SkyElement" />
+<import src="/mojo/services/keyboard/public/interfaces/keyboard.mojom.sky" as="keyboard" />
 
 <sky-element name="sky-input" attributes="value:string">
 <template>
   <style>
   :host {
     display: flex;
     border: 1px solid blue;
     margin: 5px;
     padding: 4px;
   }
   #control {
     flex: 1;
     align-self: center;
     height: 1.2em;
     white-space: nowrap;
     overflow: hidden;
   }
   </style>
-  <div id="control" contenteditable on-keydown="handleKeyDown">{{ value }}</div>
+  <div id="control" contenteditable
+       on-focus="handleFocus"
+       on-blur="handleBlur"
+       on-keydown="handleKeyDown">{{ value }}</div>
 </template>
 <script>
+module.keyboard = shell.connectToService("mojo:keyboard", keyboard.Keyboard);

[qsr, 2015/01/21 15:33:05]

What is the right way to set a service to be used by this module? This obviously
works, but makes this available to all dependency while this should be private.

[abarth-chromium, 2015/01/21 17:43:58]

You can just store it in a variable:

var keyboard = shell.connectToService("mojo:keyboard", keyboard.Keyboard);

These sorts of variables are local to the module.

[qsr, 2015/01/21 18:13:15]

Done.

 module.exports = class extends SkyElement {
   shadowRootReady() {
     var control = this.shadowRoot.getElementById('control');
     var text = control.firstChild;
 
     var observer = new MutationObserver(function() {
       // contenteditable might remove the text node, but we need to keep it
       // since that's where the data binding is connected to.
       if (!text.parentNode)
         control.appendChild(text);
       if (this.value == control.textContent)
         return;
       this.value = control.textContent;
       this.dispatchEvent(new CustomEvent('change', {
         bubbles: true,
       }));
     }.bind(this));
 
     observer.observe(control, {
       subtree: true,
       characterData: true,
       childList: true,
     });
   }
   handleKeyDown(event) {
     // TODO(abarth): You can still get newlines if the user pastes them.
     if (event.keyCode == 0xD)
       event.preventDefault();
   }
+  handleFocus(event) {
+    module.keyboard.show();

[qsr, 2015/01/21 15:33:05]

Is that fine with you? Is there no change of this being overridden by
descendant? Are we sure that the blur event will happen before another input is
focused?

[abarth-chromium, 2015/01/21 17:43:58]

Yeah, this looks right.
It could be, but that's fine.  It's something that you'd expect to break.
It should!

+  }
+  handleBlur(event) {
+    module.keyboard.hide();
+  }
 }.register();
 </script>
 </sky-element>