Removed old media-internals page and rewrote it.

content/browser/resources/media/new/number_graph.js

+// Copyright (c) 2012 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.
+
+
+var NumberGraph = (function () {
+  "use strict";
+
+  function NumberGraph(title) {
+
+    this.element = document.createElement('canvas');
+    this.context = this.element.getContext('2d');
+
+    this.barWidth = 1;
+
+    this.previousDataValues = [];
+
+    // Indexed by the position from the left
+    this.recording = [];
+    this.hoverAt = 0;
+  }
+
+  NumberGraph.prototype.setSize = function (width, height) {
+    this.element.width = width;
+    this.element.height = height;
+    this.width = width;
+    this.height = height;
+
+    this.maxPoints = this.width / this.barWidth;
+
+    this.setup();
+  };
+
+  NumberGraph.prototype.setup = function () {
+    this.element.onmousedown = function (event) {
+      this.hoverAt = event.offsetX;
+      this.drawWith(this.previousDataValues);
+    }.bind(this);
+  };
+
+  NumberGraph.prototype.getRelativePos = function (min, max, value) {
+    var totalDist = Math.abs(max - min);
+    var posFromBottom = Math.abs(value - min);
+    var posPercent = posFromBottom / totalDist;
+    return Math.floor(posPercent * this.height);
+  };
+
+  NumberGraph.prototype.drawWith = function (dataValues_passed) {
+    this.previousDataValues = dataValues_passed.slice(0);
+    // Reverse it so we can traverse from newest to oldest
+    var dataValues = dataValues_passed.slice(0).reverse();
+    this.recording = [];
+
+    this.context.fillStyle = "white";
+    this.context.fillRect(0, 0, this.width, this.height);
+    // We only want values that are greater than 20 milliseconds apart
+    var using = [];
+    var last = {time: -1000};
+    var i = 0;
+    var len = dataValues.length;
+
+    // We only want the last |maxPoints| values.
+    for (i = 0; i < Math.min(this.maxPoints, dataValues.length); i++) {
+      var val = dataValues[i];
+      if (Math.abs(val.time - last.time) >= 20) {
+        using.unshift(val);
+        last = val;
+        this.recording.unshift(val);
+      }
+    }
+
+    var usingValues = using.map(function (t) {
+      return t.value;
+    });
+    var maximum = Math.max.apply(null, usingValues);
+    var minimum = Math.min.apply(null, usingValues);
+    var placeZero = this.height - this.getRelativePos(minimum, maximum, 0);
+
+
+    this.context.fillStyle = "rgb(70, 70, 130)";
+    var posw = 0;
+
+    using.forEach(function (v) {
+      var position = this.getRelativePos(minimum, maximum, v.value);
+      this.context.fillRect(posw, placeZero, this.barWidth,
+        this.height - (position + placeZero));
+      posw += this.barWidth;
+    }, this);
+
+    // Draw the horizontal '0' bar
+    this.context.fillStyle = "rgb(90, 90, 90)";
+    this.context.fillRect(0, placeZero - 1, this.width, 2);
+
+    // Draw the mouse bar
+    this.context.fillStyle = "red";
+    this.context.fillRect(this.hoverAt, 0, 1, this.height);
+
+    var normalizedPosition = Math.floor(this.hoverAt / this.barWidth);
+    var dataAtCursor = this.recording[normalizedPosition];
+    if (dataAtCursor) {
+      this.context.fillText(dataAtCursor.value.toFixed(4), 20, 20);
+      this.context.fillText(goog.time.millisToString(dataAtCursor.time),
+        20, 40);
+    }
+    if (usingValues.length >= this.maxPoints) {
+      this.hoverAt -= this.barWidth;
+    }
+  };
+
+  return NumberGraph;
+}());