Removed old media-internals page and rewrote it.

content/browser/resources/media/new/range_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.
+
+
+// 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);
+
+  this.toDraw.forEach(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;
+};