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

chrome/browser/resources/media_internals/cache_entry.js

 // Copyright (c) 2011 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.
 
 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() {
     this.read_ = new media.DisjointRangeSet;
     this.written_ = new media.DisjointRangeSet;
     this.available_ = new media.DisjointRangeSet;
 
     // Set to true when we know the entry is sparse.
     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 = {
     /**
      * Mark a range of bytes as read from the cache.
      * @param {int} start The first byte read.
      * @param {int} length The number of bytes read.
      */
     readBytes: function(start, length) {
       start = parseInt(start);
@@ skipping 23 matching lines @@
     merge: function(other) {
       this.read_.merge(other.read_);
       this.written_.merge(other.written_);
       this.available_.merge(other.available_);
       this.sparse = this.sparse || other.sparse;
       this.key = this.key || other.key;
       this.size = this.size || other.size;
     },
 
     /**
+     * Clear all recorded ranges from this CacheEntry and redraw this.details_.
+     */
+    clear: function() {
+      this.read_ = new media.DisjointRangeSet;
+      this.written_ = new media.DisjointRangeSet;
+      this.available_ = new media.DisjointRangeSet;
+      this.generateDetails();
+    },
+
+    /**
+     * 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);
+
+      if (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.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(', ');
-
-      result.innerHTML += '. Written: ';
-      result.innerHTML += this.written_.map(function(start, end) {
-        return start + '-' + end;
-      }).join(', ');
-
-      // Include the total size if we know it.
-      if (this.size) {
-        result.innerHTML += '. Out of ';
-        result.innerHTML += this.size;
-      }
+      result.appendChild(this.details_);
       return result;
     }
   };
 
   return {
     CacheEntry: CacheEntry
   };
 });