Port the Life example to Pepper 2.

examples/graphics/life/life.css

+/* Copyright 2011 The Native Client SDK Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can
+ * be found in the LICENSE file.
+ */
+
+/* These div ids are used together to implement a work-around for event
+ * bubbling when using a NaCl module.  Using these div ids allows you to
+ * handle user events in the browser, instead of the events being passed into
+ * the NaCl <embed> element.  The event layer stacks on top of the NaCl layer
+ * so that it captures the user events, like this:
+ * |--------------------|
+ * | |----------------| |
+ * | | |------------| | |
+ * | | | Event layer| | |
+ * | | |------------| | |
+ * | | NaCl layer     | |
+ * | |----------------| |
+ * | Background layer   |
+ * |--------------------|
+ */
+
+/* The background layer.  This establishes a Z-stack for the event and NaCl
+ * layers.
+ */
+#div_background_layer {
+  position: relative;
+  z-index: 0;
+}
+
+/* The event layer.  This layer has to completely cover the NaCl layer, and
+ * have a higher z-order.  This layer captures the user events and doesn't
+ * let them get through to the NaCl layer.  Note that |width| and |height|
+ * need to match the corresponding attributes of the <embed> tag that
+ * contains the NaCl module.

[dmichael(do not use this one), 2011/02/02 23:03:59]

Maybe reference the bug...  you shouldn't have to do all this to get the events
to JS.

On a side note...  maybe it should be valid to provide a NULL function pointer
for HandleInputEvent, which tells the browser 'I don't handle events'.  For NaCl
modules, it would be nice if you're not doing anything with input events on the
native side to not have to go through the proxy for every mouse move.

[David Springer, 2011/02/03 18:12:27]

I haven't written up the bug yet.  I want to make a small example to go with it
so that we can test.

I factored this a little to use CSS classes instead of ID names, and applied the
class to the <embed> element directly instead of wrapping it in a div.  This
seems to work fine, and gets rid of one of DOM elements.

+ */
+#div_event_layer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 200;
+  height: 200;
+  z-index: 2;
+}
+
+/* The NaCl layer.  This layer contains the NaCl module.  It must have a
+ * lower z-index than the event layer.
+ */
+#div_nacl_module_layer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}