Add a fps-counter widget to some Sky demos

This CL makes some Sky demos more interesting and adds an fps-widget to see how
fast they run.

R=esprehn@chromium.org

Review URL: https://codereview.chromium.org/803283006

examples/fps-counter.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/sky-element/sky-element.sky" as="SkyElement" />
+
+<sky-element name="fps-counter" attributes="showHistory:boolean">
+<template>
+  <template if="{{ showHistory }}">
+    <template repeat="{{ history }}">
+      <div>{{ }} ms</div>
+    </template>
+    <div>max = {{ max }} ms</div>
+  </template>
+  <div>fps = {{ framerate }} Hz</div>
+</template>
+<script>
+var kMaxDeltaLength = 10;
+
+module.exports = class extends SkyElement {
+  created() {
+    this.framerate = "...";
+    this.max = 0;
+    this.lastTimeStamp = 0;
+    this.rafId = 0;
+    this.currentDeltaIndex = 0;
+    this.deltas = new Array(kMaxDeltaLength);
+    for (var i = 0; i < kMaxDeltaLength; ++i)
+      this.deltas[i] = 0;
+    this.history = new Array(kMaxDeltaLength);
+    for (var i = 0; i < kMaxDeltaLength; ++i)
+      this.history[i] = 0;
+  }
+  attached() {
+    this.scheduleTick();
+  }
+  detached() {
+    cancelAnimationFrame(this.rafId);
+    this.rafId = 0;
+  }
+  scheduleTick() {
+    this.rafId = requestAnimationFrame(this.tick.bind(this));  
+  }
+  tick(timeStamp) {
+    this.scheduleTick();
+    var lastTimeStamp = this.lastTimeStamp;
+    this.lastTimeStamp = timeStamp;
+    if (!lastTimeStamp)
+      return;
+    var delta = timeStamp - lastTimeStamp;
+    this.deltas[this.currentDeltaIndex++ % kMaxDeltaLength] = delta;
+    for (var i = 0; i < kMaxDeltaLength; ++i) {
+      var value = this.deltas[(i + this.currentDeltaIndex) % kMaxDeltaLength];
+      this.history[i] = value.toFixed(2);
+    }
+    var sum = this.deltas.reduce(function(a, b) { return a + b }, 0);
+    var avg = sum / kMaxDeltaLength;
+    this.framerate = (1000 / avg).toFixed(2);
+    this.max = Math.max(delta, this.max).toFixed(2);
+  }
+}.register();
+</script>
+</sky-element>

examples/spinning-square.sky

 #!mojo mojo:sky_viewer
 <sky>
+<import src="fps-counter.sky" />
 <style>
 square {
   margin: 50px;
@@ -8,7 +9,8 @@ square {
   background-color: green;
 }
 </style>
-<square></square>
+<square />
+<fps-counter showHistory="true" />
 <script>
 var square = document.querySelector('square');
 var timeBase = 0;

examples/touch-demo.sky

 <sky>
-<div id="log">Ready</div>
+<import src="fps-counter.sky" />
+<style>
+dot {
+    position: absolute;
+    height: 100px;
+    width: 100px;
+    background-color: #00FF00;
+}
+</style>
+<dot />
+<log>Ready</log>
+<x-fps-counter />
 <script>
+var dot = document.querySelector("dot");
+var log = document.querySelector("log");
+
 function logTouchEvent(evt) {
   var message = "type=" + event.type;
-  if (evt.touches && evt.touches.length > 0)
-    message += " x=" + evt.touches[0].clientX + " y=" + evt.touches[0].clientY;
-  document.getElementById("log").textContent = message;
+  if (evt.touches && evt.touches.length > 0) {
+    var x = evt.touches[0].clientX.toFixed(2);
+    var y = evt.touches[0].clientY.toFixed(2);
+    message += " x=" + x + " y=" + y;
+
+    var transform = "translate(" + (x - 50)  + "px," + (y - 50) + "px)";
+    dot.style.transform = transform;
+  }
+  log.textContent = message;
 }
 
 document.documentElement.addEventListener("touchstart", logTouchEvent);