Move wm_flow off of views and onto Sky

examples/wm_flow/wm/window_frame.sky

Index: examples/wm_flow/wm/window_frame.sky
diff --git a/examples/wm_flow/wm/window_frame.sky b/examples/wm_flow/wm/window_frame.sky
new file mode 100644
index 0000000000000000000000000000000000000000..5e69da485e984cb45b1bb53f6068af3e3fdc2965
--- /dev/null
+++ b/examples/wm_flow/wm/window_frame.sky
@@ -0,0 +1,92 @@
+#!mojo:sky_viewer
+<!--
+// Copyright 2014 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.
+-->
+<sky>
+<import src="/sky/framework/sky-button/sky-button.sky"/>
+<import src="/sky/framework/sky-checkbox/sky-checkbox.sky"/>
+<import src="/sky/framework/sky-element/sky-element.sky" as="SkyElement"/>
+<!-- HACK: Hard-coded out/Debug path is wrong, but we can't both expose
+/examples so that c++ can load this .sky url as well as map /examples to the gen
+directory. We'll need a location for mapping /gen urls, presumably to /gen. -->
+<import src="/out/Debug/gen/examples/wm_flow/wm/window_frame_host.mojom.sky" as="example" />
+<import src="/sky/framework/shell.sky" as="shell" />
+
+<style>
+/* FIXME: Hack until the requirement of a single root element is lifted. */
+sky { height: 100%; }
+</style>
+
+<sky-element name="window-frame">
+<template>
+  <style>
+  :host {
+    height: 100%;
+    background-color: lightgrey;
+  }
+  /* Nest two flexboxes and make the right side take up as much as possible */
+  window-bar {
+    display: flex;
+  }
+  left {
+    flex: 1;
+    display: flex;
+    align-content: flex-start;
+  }
+  /* Also making the checkbox and label a flexbox for convenience */
+  right {
+    display: flex;
+  }
+
+  /* Style sky controls to make them look more like ui/views */
+  sky-button {
+    border: none;
+    border: 1px solid blue;
+    padding: 2px;
+  }
+  sky-button:hover {
+    border: 1px solid lightblue;
+    background-color: darkgrey;
+  }
+  </style>
+  <window-bar>
+    <left>
+      <sky-checkbox on-click="handleCaptureClick" />Capture
+    </left>
+    <right>
+      <sky-button on-click="handleEmbiggenClick">Embiggen</sky-button>
+      <sky-button on-click="handleBegoneClick">Begone</sky-button>
+    </right>
+  </window-bar>
+</template>
+<script>
+module.exports = class extends SkyElement {
+  // Unclear if this belongs on shell or not?
+  connectToEmbedderService(service, client) {
+    var handle = internals.connectToEmbedderService(service.name);
+    return shell.wrapHandle(handle, service, client);

[abarth-chromium, 2015/01/06 21:20:43]

This should be in Sky

+  }
+  created() {
+    this.embedder = this.connectToEmbedderService(example.WindowFrameHost);
+    this.addEventListener('mousedown', function() {
+      this.embedder.activateWindow();
+    }.bind(this));
+  }
+  handleCaptureClick(event) {
+    this.embedder.setCapture(event.target.checked);
+  }
+  handleEmbiggenClick(event) {
+    this.embedder.toggleMaximize();
+  }
+  handleBegoneClick(event) {
+    this.embedder.closeWindow();
+  }
+}.register();
+</script>
+</sky-element>
+
+<window-frame />
+
+</sky>