Add a fps-counter widget to some Sky demos

sky/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>