Removed old media-internals page and rewrote it.

content/browser/resources/media/graphs/rangeGraph.js

+// From Grumdrig
+// stackoverflow.com/questions/1255512/how-to-draw-a-rounded-rectangle-on-html-canvas
+CanvasRenderingContext2D.prototype.roundRect = function (x, y, w, h, r) {
+    "use strict";
+
+    if (w < 2 * r) {
+        r = w / 2;
+    }
+    if (h < 2 * r) {
+        r = h / 2;
+    }
+    this.beginPath();
+    this.moveTo(x + r, y);
+    this.arcTo(x + w, y, x + w, y + h, r);
+    this.arcTo(x + w, y + h, x, y + h, r);
+    this.arcTo(x, y + h, x, y, r);
+    this.arcTo(x, y, x + w, y, r);
+    this.closePath();
+    return this;
+};
+
+// Creates a new RangeGraph object that contains a canvas element that
+// it draws to.
+function RangeGraph(max, existing) {
+    "use strict";
+
+    this.max = max;
+
+    // If we already have a <canvas> element to draw to, use that
+    this.element = existing || document.createElement("canvas");
+    this.context = this.element.getContext('2d');
+
+    this.cornerLeft = 2;
+    this.cornerTop = 2;
+
+    this.toDraw = [];
+
+    // The drawing styles.  One constant list to draw from,
+    this.STYLES = ["rgb(100, 10,10)", "rgb(100, 10, 100)",
+        "rgb(70, 130, 70)", "rgb(70, 70, 130)" ];
+    // another list to pop off of
+    this.styles = this.STYLES;
+}
+
+RangeGraph.prototype.setWidth = function (width) {
+    "use strict";
+    this.width = width;
+    this.element.width = this.width + this.cornerLeft * 2;
+    this.height = 13;
+    this.element.height = this.height + this.cornerTop * 2;
+};
+
+RangeGraph.prototype.extend = function (max) {
+    "use strict";
+    this.end = max;
+};
+
+RangeGraph.prototype.plot = function (start, end) {
+    "use strict";
+
+    // Always keep them in order
+    if (end > start) {
+        this.toDraw.push([start, end]);
+    } else {
+        this.toDraw.push([end, start]);
+    }
+};
+
+RangeGraph.prototype.draw = function () {
+    "use strict";
+
+    // Fill the canvas wit white.
+    this.context.fillStyle = "white";
+    this.context.clearRect(0, 0, this.width, this.height);
+
+    // The light-grey background.
+    this.context.fillStyle = "rgb(200,200,200)";
+    this.context.roundRect(0, 0, this.element.width, this.element.height, 2);
+    this.context.fill();
+
+    // The inner shadow.
+    this.context.fillStyle = "rgba(170,170,170, 0.7)";
+    this.context.roundRect(this.cornerLeft, this.cornerTop, this.width,
+        this.height, 2);
+    this.context.fill();
+
+    // Translate because line drawing on whole pixels does
+    // terrible anti-aliasing.
+    this.context.translate(0.5, 0.5);
+
+    goog.array.forEach(this.toDraw, function (pair) {
+        var start = pair[0],
+            end = pair[1],
+            startPercent = start / this.max,
+            endPercent = end / this.max,
+            startPx = Math.floor(startPercent * this.width),
+            endPx = Math.ceil(endPercent * this.width);
+
+        // The main color bar
+        this.context.fillStyle = this.styles.pop() || "red";
+        this.context.roundRect(this.cornerLeft + startPx, this.cornerTop,
+            endPx - startPx, this.height - 1, 2);
+        this.context.fill();
+
+        // The gradient up on top
+        this.context.fillStyle = "rgba(200,200,200,0.4)";
+        this.context.roundRect(this.cornerLeft + startPx, this.cornerTop,
+            endPx - startPx,
+            Math.floor(this.height / 2.5) + 0.5, 2);
+        this.context.fill();
+
+
+        // The black outline
+        this.context.roundRect(this.cornerLeft + startPx, this.cornerTop,
+            endPx - startPx, this.height - 1, 2);
+        this.context.strokeStyle = "rgba(0, 0, 0, 0.7)";
+        this.context.stroke();
+
+    }, this);
+
+
+    // The tick marks
+    this.context.fillStyle = "rgba(0,0,0,0.4)";
+    var percent;
+    for (percent = 0.1; percent <= 0.9; percent += 0.1) {
+        var pxPos = Math.floor(percent * this.width);
+        this.context.fillRect(pxPos + 0.5, 2, 1, this.height - 1);
+    }
+
+    // Re-translate for the next call
+    this.context.translate(-0.5, -0.5);
+
+
+    this.toDraw = [];
+    this.styles = this.STYLES;
+};