Display active media players on 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 in pixels.
-   */
-  var CANVAS_WIDTH = 500;
-  var CANVAS_HEIGHT = 31;
+  'use strict';
 
   /**
    * 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.
@@ skipping 21 matching lines @@
     summary.appendChild(controls);
     summary.appendChild(document.createElement('br'));
 
     // A link to clear recorded data from this CacheEntry.
     var clearControl = document.createElement('a');
     clearControl.href = 'javascript:void(0)';
     clearControl.onclick = this.clear.bind(this);
     clearControl.textContent = '(clear entry)';
     controls.appendChild(clearControl);
 
-    // 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_);
+    this.details_.appendChild(summary);
 
-    this.details_.appendChild(summary);
+    // The canvas for drawing cache writes.
+    this.writeCanvas = document.createElement('canvas');
+    this.writeCanvas.width = media.BAR_WIDTH;
+    this.writeCanvas.height = media.BAR_HEIGHT;
+    this.details_.appendChild(this.writeCanvas);
+
+    // The canvas for drawing cache reads.
+    this.readCanvas = document.createElement('canvas');
+    this.readCanvas.width = media.BAR_WIDTH;
+    this.readCanvas.height = media.BAR_HEIGHT;
+    this.details_.appendChild(this.readCanvas);
 
     // A tabular representation of the data in the above canvas.
     this.detailTable_ = document.createElement('table');
     this.detailTable_.className = 'cache-table';
     this.details_.appendChild(this.detailTable_);
-  };
+  }
 
   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);
       length = parseInt(length);
@@ skipping 32 matching lines @@
      * 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();
     },
 
     /**
-     * Redraw this.canvas_.
-     * It should consist of two horizontal bars with highlighted sections to
-     * represent which parts of a file have been read from (top) and written to
-     * (bottom) the cache.
+     * Draw cache writes to the given canvas.
+     *
+     * It should consist of a horizontal bar with highlighted sections to
+     * represent which parts of a file have been written to the cache.
+     *
      * e.g. |xxxxxx----------x|
-     *      |-----xxxxx-------|
      */
-    generateCanvas: function() {
-      var context = this.canvas_.getContext('2d');
-      context.textAlign = 'center';
-      context.textBaseline = 'middle';
+    drawCacheWritesToCanvas: function(canvas) {
+      // Don't bother drawing anything if we don't know the total size.
+      if (!this.size) {
+        return;
+      }
+
+      var width = canvas.width;
+      var height = canvas.height;
+      var context = canvas.getContext('2d');
+      var fileSize = this.size;
 
       context.fillStyle = '#aaa';
-      context.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
+      context.fillRect(0, 0, width, height);
 
-      if (this.size) {
-        var fileSize = this.size;
-        drawRange = function(start, end, top) {
-          var left = start / fileSize * CANVAS_WIDTH;
-          var right = end / fileSize * CANVAS_WIDTH;
-          context.fillRect(left, top, right - left, top + CANVAS_HEIGHT / 2);
-        };
+      var drawRange = function(start, end) {

[arv (Not doing code reviews), 2011/10/20 20:29:37]

function drawRange(start, end) {
   ...
}

[scherkus (not reviewing), 2011/10/24 18:12:28]

Done.

+        var left = start / fileSize * width;
+        var right = end / fileSize * width;
+        context.fillRect(left, 0, right - left, height);
+      };
 
-        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);
-      }
+      context.fillStyle = '#00a';
+      this.written_.map(function(start, end) {
+        drawRange(start, end);
+      });
     },
 
     /**
+     * Draw cache reads to the given canvas.
+     *
+     * It should consist of a horizontal bar with highlighted sections to
+     * represent which parts of a file have been read from the cache.
+     *
+     * e.g. |xxxxxx----------x|
+     */
+    drawCacheReadsToCanvas: function(canvas) {

[arv (Not doing code reviews), 2011/10/20 20:29:37]

This looks like copy pasted code. Can you refactore to reduce duplication?

[scherkus (not reviewing), 2011/10/24 18:12:28]

Busted :(

Refactored but keep in mind I'm not sure what the Javascript-approved way of
doing helper methods.

+      // Don't bother drawing anything if we don't know the total size.
+      if (!this.size) {
+        return;
+      }
+
+      var width = canvas.width;
+      var height = canvas.height;
+      var context = canvas.getContext('2d');
+      var fileSize = this.size;
+
+      context.fillStyle = '#aaa';
+      context.fillRect(0, 0, width, height);
+
+      var drawRange = function(start, end) {
+        var left = start / fileSize * width;
+        var right = end / fileSize * width;
+        context.fillRect(left, 0, right - left, height);
+      };
+
+      context.fillStyle = '#0a0';
+      this.read_.map(function(start, end) {
+        drawRange(start, end);
+      });
+    },
+
+    /**
      * Update this.details_ to contain everything we currently know about
      * this file.
      */
     generateDetails: function() {
-      function makeElement(type, content) {
-        var element = document.createElement(type);
-        element.textContent = content;
-        return element;
-      };
-
       this.details_.id = this.key;
       this.summaryText_.textContent = this.key || 'Unknown File';
 
       this.detailTable_.textContent = '';
       var header = document.createElement('thead');
       var footer = document.createElement('tfoot');
       var body = document.createElement('tbody');
       this.detailTable_.appendChild(header);
       this.detailTable_.appendChild(footer);
       this.detailTable_.appendChild(body);
 
       var headerRow = document.createElement('tr');
-      headerRow.appendChild(makeElement('th', 'Read From Cache'));
-      headerRow.appendChild(makeElement('th', 'Written To Cache'));
+      headerRow.appendChild(media.makeElement('th', 'Read From Cache'));
+      headerRow.appendChild(media.makeElement('th', 'Written To Cache'));
       header.appendChild(headerRow);
 
       var footerRow = document.createElement('tr');
       var footerCell = document.createElement('td');
       footerCell.textContent = 'Out of ' + (this.size || 'unkown size');
       footerCell.setAttribute('colspan', 2);
       footerRow.appendChild(footerCell);
       footer.appendChild(footerRow);
 
       var read = this.read_.map(function(start, end) {
         return start + ' - ' + end;
       });
       var written = this.written_.map(function(start, end) {
         return start + ' - ' + end;
       });
 
       var length = Math.max(read.length, written.length);
       for (var i = 0; i < length; i++) {
         var row = document.createElement('tr');
-        row.appendChild(makeElement('td', read[i] || ''));
-        row.appendChild(makeElement('td', written[i] || ''));
+        row.appendChild(media.makeElement('td', read[i] || ''));
+        row.appendChild(media.makeElement('td', written[i] || ''));
         body.appendChild(row);
       }
 
-      this.generateCanvas();
+      this.drawCacheWritesToCanvas(this.writeCanvas);
+      this.drawCacheReadsToCanvas(this.readCanvas);
     },
 
     /**
      * 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;
     }
   };
 
   return {
     CacheEntry: CacheEntry
   };
 });