Add charts to the resource data section of chrome://media-internals.

chrome/browser/resources/media_internals/cache_entry.js

Index: chrome/browser/resources/media_internals/cache_entry.js
diff --git a/chrome/browser/resources/media_internals/cache_entry.js b/chrome/browser/resources/media_internals/cache_entry.js
index 1136a3f71691a6ac3e48101c9e3c9587e4c04cb5..6f7885e0f71412238f3529205aa0cefe4b4aa38f 100644
--- a/chrome/browser/resources/media_internals/cache_entry.js
+++ b/chrome/browser/resources/media_internals/cache_entry.js
@@ -5,6 +5,12 @@
 cr.define('media', function() {
 
   /**
+   * The width and height of a CacheEntry canvas.

[Evan Stade, 2011/07/22 19:48:12]

in pixels (I presume)

[Scott Franklin, 2011/07/22 22:27:20]

Oh right.

+   */
+  var CANVAS_WIDTH = 500;
+  var CANVAS_HEIGHT = 31;
+
+  /**
    * This class represents a file cached by net.
    */
   function CacheEntry() {
@@ -16,6 +22,51 @@ cr.define('media', function() {
     this.sparse = false;
     this.key = null;
     this.size = null;
+
+    // The <details> element representing this CacheEntry.
+    this.details_ = document.createElement('details');
+    this.details_.className = 'cache-entry';
+    this.details_.open = false;
+
+    // The <details> summary line. It contains a chart of requested file ranges
+    // and the url if we know it.
+    var summary = document.createElement('summary');
+
+    this.summary_text_ = document.createTextNode('');
+    summary.appendChild(this.summary_text_);
+    summary.appendChild(document.createElement('br'));
+
+    // The canvas upon which to draw the cached sections of a file.
+    this.canvas_ = document.createElement('canvas');
+    this.canvas_.width = CANVAS_WIDTH;
+    this.canvas_.height = CANVAS_HEIGHT;
+    summary.appendChild(this.canvas_);
+
+    // A detailed writen description of the above.

[scherkus (not reviewing), 2011/07/22 19:26:46]

s/writen/written

[Scott Franklin, 2011/07/22 22:27:20]

Done.

+    this.detail_text_ = document.createElement('p');
+
+    // Some controls to modify this CacheEntry.
+    var controls = document.createElement('footer');
+
+    // A link to manually set the file size of this CacheEntry.
+    var set_size_control = document.createElement('a');
+    set_size_control.href = 'javascript:void(0)';
+    set_size_control.onclick = this.setSize.bind(this);
+    set_size_control.textContent = '(set size)';
+    controls.appendChild(set_size_control);
+
+    controls.appendChild(document.createTextNode(' - '));
+
+    // A link to clear recorded data from this CacheEntry.
+    var clear_control = document.createElement('a');
+    clear_control.href = 'javascript:void(0)';
+    clear_control.onclick = this.clear.bind(this);
+    clear_control.textContent = '(clear)';
+    controls.appendChild(clear_control);
+
+    this.details_.appendChild(summary);
+    this.details_.appendChild(this.detail_text_);
+    this.details_.appendChild(controls);
   };
 
   CacheEntry.prototype = {
@@ -59,28 +110,118 @@ cr.define('media', function() {
     },
 
     /**
-     * Render this CacheEntry as a <li>.
-     * @return {HTMLElement} A <li> representing this CacheEntry.
+     * Clear all recorded ranges from this CacheEntry and redraw this.details_.
      */
-    toListItem: function() {
-      var result = document.createElement('li');
-      result.id = this.key;
-      result.className = 'cache-entry';
-      result.innerHTML = this.key + '<br />Read: ';
-      result.innerHTML += this.read_.map(function(start, end) {
-        return start + '-' + end;
-      }).join(', ');
+    clear: function() {
+      this.read_ = new media.DisjointRangeSet;
+      this.written_ = new media.DisjointRangeSet;
+      this.available_ = new media.DisjointRangeSet;
+      this.generateDetails();
+    },
 
-      result.innerHTML += '. Written: ';
-      result.innerHTML += this.written_.map(function(start, end) {
-        return start + '-' + end;
-      }).join(', ');
+    /**
+     * Prompt the user for the size of the file, using the maximum seen size
+     * as the defualt. Also redraw this.details_.
+     * There is currently no way to reliably infer the size of a file that is
+     * already fully cached. This provides a (probably rarely used) way to set
+     * it manually.
+     */
+    setSize: function() {

[scherkus (not reviewing), 2011/07/22 19:26:46]

are we better off prompting or simply documenting that it's a limitation of the
caching system

if it's rarely used... will anyone really know the size of the file?

[Scott Franklin, 2011/07/22 22:27:20]

I used it quite a bit when debugging canvas issues. But to be honest no one else
is likely to do so.
Removed.

+      size = prompt("file size:", Math.max(this.size, this.available_.max()));
+      if (size)
+        this.size = size;
+      this.generateDetails();
+    },
+
+    /**
+     * Redraw this.canvas_.

[Evan Stade, 2011/07/22 19:48:12]

maybe a little context about the desired outcome?

[Scott Franklin, 2011/07/22 22:27:20]

Done.

+     */
+    generateCanvas: function() {
+      var context = this.canvas_.getContext('2d');
+      context.textAlign = 'center';
+      context.textBaseline = 'middle';
+
+      context.fillStyle = '#aaa';
+      context.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
 
-      // Include the total size if we know it.
       if (this.size) {
-        result.innerHTML += '. Out of ';
-        result.innerHTML += this.size;
+        var file_size = this.size;
+        drawRange = function(start, end, top) {
+          var left = start / file_size * CANVAS_WIDTH;
+          var right = end / file_size * CANVAS_WIDTH;
+          context.fillRect(left, top, right - left, top + CANVAS_HEIGHT / 2);
+        };
+
+        context.fillStyle = '#0a0';
+        this.read_.map(function(start, end) {
+          drawRange(start, end, 0);
+        });
+
+        context.fillStyle = '#00a';
+        this.written_.map(function(start, end) {
+          drawRange(start, end, CANVAS_HEIGHT / 2);
+        });
+
+        // Overlay a description of each bar.
+        context.fillStyle = '#fff';
+        context.fillText('Read from cache.', CANVAS_WIDTH / 2,
+                         CANVAS_HEIGHT / 4 - 0.5);
+        context.fillText('Written to cache.', CANVAS_WIDTH / 2,
+                         CANVAS_HEIGHT * 3 / 4 + 0.5);
+
+        // Add a 1px separator line.
+        context.moveTo(0, CANVAS_HEIGHT / 2);
+        context.lineTo(CANVAS_WIDTH, CANVAS_HEIGHT / 2);
+        context.strokeStyle = '#fff';
+        context.stroke();
+      } else {
+        // We can't draw bars if we don't know how big the file is.
+        context.fillStyle = '#fff';
+        context.fillText('Unknown file size. See details below.',
+                         CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2);
       }
+    },
+
+    /**
+     * Update this.details_.
+     */
+    generateDetails: function() {
+      this.details_.id = this.key;
+
+      if (this.key)
+        this.summary_text_.textContent = this.key;
+      else
+        this.summary_text_.textContent = 'Unknown File';
+
+      this.detail_text_.innerHTML = '<strong>Read from cache:</strong><br />';

[Evan Stade, 2011/07/22 19:48:12]

I think you should use css instead of strong.

This looks like tabular data, so it's ok to use tables for it. And instead of
writing html in strings, I think the js approach would be clearer here.

[Scott Franklin, 2011/07/22 22:27:20]

The tables look good; I like it.

+      this.detail_text_.innerHTML += this.read_.map(function(start, end) {
+        return start + '-' + end;
+      }).join('<br />');
+
+      this.detail_text_.innerHTML += '<br /><strong>Written to cache:</strong>';
+      this.detail_text_.innerHTML += '<br />';
+      this.detail_text_.innerHTML += this.written_.map(function(start, end) {
+        return start + '-' + end;
+      }).join('<br />');
+
+      this.detail_text_.innerHTML += '<br /><strong>Out of</strong> ';
+      if (this.size)
+        this.detail_text_.innerHTML += this.size;

[Evan Stade, 2011/07/22 19:48:12]

I always prefer the ternary operator

[Scott Franklin, 2011/07/22 22:27:20]

And plain old || is even better.

+      else
+        this.detail_text_.innerHTML += 'unknown size';
+
+      this.generateCanvas();
+    },
+
+    /**
+     * Render this CacheEntry as a <li>.
+     * @return {HTMLElement} A <li> representing this CacheEntry.
+     */
+    toListItem: function() {
+      this.generateDetails();
+
+      var result = document.createElement('li');
+      result.appendChild(this.details_);
       return result;
     }
   };