Adds cache and buffer graphs to the properties pane.

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

Index: content/browser/resources/media/new/client_renderer.js
diff --git a/content/browser/resources/media/new/client_renderer.js b/content/browser/resources/media/new/client_renderer.js
index 02f47e163cf53dc1c5e3ea24066f03a76f1c0a3f..859b6c32cd7ed4bb8c4205faf29a815a3a5067c2 100644
--- a/content/browser/resources/media/new/client_renderer.js
+++ b/content/browser/resources/media/new/client_renderer.js
@@ -8,11 +8,16 @@ var ClientRenderer = (function() {
     this.audioStreamListElement = document.getElementById('audio-stream-list');
     this.propertiesTable = document.getElementById('property-table');
     this.logTable = document.getElementById('log');
+    this.graphElement = document.getElementById('graphs');
 
     this.selectedPlayer = null;
     this.selectedStream = null;
 
     this.selectedPlayerLogIndex = 0;
+
+    this.bufferCanvas = document.createElement('canvas');
+    this.bufferCanvas.width = media.BAR_WIDTH;
+    this.bufferCanvas.height = media.BAR_HEIGHT;
   };
 
   function removeChildren(element) {
@@ -76,6 +81,7 @@ var ClientRenderer = (function() {
       if (player === this.selectedPlayer) {
         this.drawProperties_(player.properties);
         this.drawLog_();
+        this.drawGraphs_();
       }
       if (key === 'name' || key === 'url') {
         this.redrawPlayerList_(players);
@@ -98,6 +104,7 @@ var ClientRenderer = (function() {
       this.selectedPlayer = null;
       this.drawProperties_(audioStream);
       removeChildren(this.logTable.querySelector('tbody'));
+      removeChildren(this.graphElement);
     },
 
     redrawPlayerList_: function(players) {
@@ -123,7 +130,9 @@ var ClientRenderer = (function() {
       this.drawProperties_(player.properties);
 
       removeChildren(this.logTable.querySelector('tbody'));
+      removeChildren(this.graphElement);
       this.drawLog_();
+      this.drawGraphs_();
     },
 
     drawProperties_: function(propertyMap) {
@@ -131,6 +140,7 @@ var ClientRenderer = (function() {
 
       for (key in propertyMap) {
         var value = propertyMap[key];
+
         var row = this.propertiesTable.insertRow(-1);
         var keyCell = row.insertCell(-1);
         var valueCell = row.insertCell(-1);
@@ -154,6 +164,75 @@ var ClientRenderer = (function() {
           this.selectedPlayerLogIndex);
       toDraw.forEach(this.appendEventToLog_.bind(this));
       this.selectedPlayerLogIndex = this.selectedPlayer.allEvents.length;
+    },
+
+    drawGraphs_: function() {
+      removeChildren(this.graphElement);

[scherkus (not reviewing), 2013/09/06 18:16:47]

won't this cause line 209 to always evaluate to true?

[Ty Overby, 2013/09/06 19:56:37]

Done.

+
+      var addToGraphs = (function(name, graph) {

[scherkus (not reviewing), 2013/09/06 18:16:47]

considering you're already passing in this. member variables, how about dropping
bind() in favour of something more straightforward:

function addGraph(graphElement, name, graph) {
  // ...
  graphElement.appendChild(li);
}

addGraph(this.graphElement, 'buffered', this.bufferedCanvas);

[Ty Overby, 2013/09/06 19:56:37]

Done.

+          var li = document.createElement('li');
+          li.appendChild(graph);
+          li.appendChild(document.createTextNode(name));
+          this.graphElement.appendChild(li);
+      }).bind(this);
+
+      var url = this.selectedPlayer.properties.url;
+      if (!url) {
+        return;
+      }
+
+      var cache = media.cacheForUrl(url);
+
+      var player = this.selectedPlayer;
+      var props = player.properties;
+
+      var cacheExists = false,
+          bufferExists = false;

[scherkus (not reviewing), 2013/09/06 18:16:47]

might as well use separate var statement here

[Ty Overby, 2013/09/06 19:56:37]

Done.

+
+      if (props['buffer_start'] !== undefined &&
+          props['buffer_current'] !== undefined &&
+          props['buffer_end'] !== undefined &&
+          props['total_bytes'] !== undefined) {
+        this.drawBufferGraph_(props['buffer_start'],
+                              props['buffer_current'],
+                              props['buffer_end'],
+                              props['total_bytes']);
+        bufferExists = true;
+      }
+
+      if (cache) {
+        cache.size = cache.size || +player.properties['total_bytes'];

[scherkus (not reviewing), 2013/09/06 18:16:47]

can you rewrite this to avoid type trickery

[Ty Overby, 2013/09/06 19:56:37]

Done.

+        cache.generateDetails();
+        cacheExists = true;
+      }
+
+      if (!this.graphElement.hasChildNodes()) {
+        if (bufferExists) {
+          addToGraphs('buffer', this.bufferCanvas);
+        }
+        if (cacheExists) {
+          addToGraphs('cache read', cache.readCanvas);
+          addToGraphs('cache write', cache.writeCanvas);
+        }
+      }
+    },
+
+    drawBufferGraph_: function(start, current, end, size) {
+      var ctx = this.bufferCanvas.getContext('2d');
+      var width = this.bufferCanvas.width;
+      var height = this.bufferCanvas.height;
+      ctx.fillStyle = '#aaa';
+      ctx.fillRect(0, 0, width, height);
+
+      var scale_factor = width / size;
+      var left = start * scale_factor;
+      var middle = current * scale_factor;
+      var right = end * scale_factor;
+
+      ctx.fillStyle = '#a0a';
+      ctx.fillRect(left, 0, middle - left, height);
+      ctx.fillStyle = '#aa0';
+      ctx.fillRect(middle, 0, right - middle, height);
     }
   };