veyron/examples/pipetobrowser: Performance improvements for Console plugin.
In order to get 60FPS for Console plugin, the web component now buffers
texts that are being added to Console and only adds them to DOM in rAF
Also adding support for auto-scrolling so scrollbar stays at the bottom
when new text comes in.
Change-Id: I85017d88e99f1bf930e8613a25f43819febca41c
diff --git a/examples/pipetobrowser/browser/pipe-viewers/builtin/console/component.html b/examples/pipetobrowser/browser/pipe-viewers/builtin/console/component.html
index d9f773c..d816aed 100644
--- a/examples/pipetobrowser/browser/pipe-viewers/builtin/console/component.html
+++ b/examples/pipetobrowser/browser/pipe-viewers/builtin/console/component.html
@@ -1,19 +1,53 @@
<link rel="import" href="../../../third-party/polymer/polymer.html">
+<link rel="import" href="../../../third-party/paper-checkbox/paper-checkbox.html">
<polymer-element name="p2b-plugin-console">
<template>
<link rel="stylesheet" href="component.css">
+ <link rel="stylesheet" href="../../../libs/css/common-style.css">
+ <div title="Auto Scroll" class="auto-scroll {{ {hidden : !scrolling} | tokenList}}">
+ <paper-checkbox checked="{{autoScroll}}" label="Auto Scroll" id="autoscroll"></paper-checkbox>
+ </div>
<pre id="console"></pre>
</template>
<script>
Polymer('p2b-plugin-console', {
+ autoScroll: true,
+ textBuffer: [],
+ attached: function() {
+ this.renderLoop();
+ },
+ detached: function() {
+ this.isDetached = true;
+ },
+ renderLoop: function() {
+ var self = this;
+ if (!this.isDetached) {
+ requestAnimationFrame(function() {
+ self.render();
+ self.renderLoop();
+ });
+ }
+ },
+ render: function() {
+ if (this.textBuffer.length === 0) {
+ return;
+ }
+ var textNode = document.createTextNode(this.textBuffer.join(''));
+ this.textBuffer = [];
+ this.$.console.appendChild(textNode);
+ var scrollTop = this.scrollTop;
+ this.scrolling = scrollTop > 0;
+ if (this.autoScroll) {
+ this.scrollTop = this.scrollHeight;
+ }
+ },
/*
* Appends text to the console
* @param {string} text Text to add
*/
addText: function(text) {
- var textNode = document.createTextNode(text);
- this.$.console.appendChild(textNode);
+ this.textBuffer.push(text);
}
});
</script>
