Display active media players on 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 60deab4cfe29a91628d454fd9895f01746a647e6..008d5d7d55e00e94cafcd05f200d6dd604e71e7d 100644
--- a/chrome/browser/resources/media_internals/cache_entry.js
+++ b/chrome/browser/resources/media_internals/cache_entry.js
@@ -5,12 +5,6 @@
 cr.define('media', function() {
 
   /**
-   * The width and height of a CacheEntry canvas in pixels.
-   */
-  var CANVAS_WIDTH = 500;
-  var CANVAS_HEIGHT = 31;
-
-  /**
    * This class represents a file cached by net.
    */
   function CacheEntry() {
@@ -45,19 +39,19 @@ cr.define('media', function() {
 
     // A link to clear recorded data from this CacheEntry.
     var clearControl = document.createElement('a');
-    clearControl.href = 'javascript:void(0)';
+    clearControl.href = '#';

[arv (Not doing code reviews), 2011/08/16 19:29:03]

this change is not for the better. Now we get a history entry

[Scott Franklin, 2011/08/16 23:33:52]

It did work fine before, but Content Security Policy throws an error with
javascript: urls. Done.

     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);
 
+    // The canvas upon which to draw the cached sections of a file.
+    this.canvas = document.createElement('canvas');
+    this.canvas.width = media.BAR_WIDTH;
+    this.canvas.height = 2 * media.BAR_HEIGHT + 1;
+    this.details_.appendChild(this.canvas);
+
     // A tabular representation of the data in the above canvas.
     this.detailTable_ = document.createElement('table');
     this.detailTable_.className = 'cache-table';
@@ -115,7 +109,7 @@ cr.define('media', function() {
     },
 
     /**
-     * Redraw this.canvas_.
+     * 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.
@@ -123,19 +117,21 @@ cr.define('media', function() {
      *      |-----xxxxx-------|
      */
     generateCanvas: function() {
-      var context = this.canvas_.getContext('2d');
+      var width = this.canvas.width;
+      var height = this.canvas.height;
+      var context = this.canvas.getContext('2d');
       context.textAlign = 'center';
       context.textBaseline = 'middle';
 
       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 left = start / fileSize * width;
+          var right = end / fileSize * width;
+          context.fillRect(left, top, right - left, top + height / 2);
         };
 
         context.fillStyle = '#0a0';
@@ -145,26 +141,22 @@ cr.define('media', function() {
 
         context.fillStyle = '#00a';
         this.written_.map(function(start, end) {
-          drawRange(start, end, CANVAS_HEIGHT / 2);
+          drawRange(start, end, 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();
+        context.fillText('Read from cache.', width / 2,
+                         height / 4 - 0.5);
+        context.fillText('Written to cache.', width / 2,
+                         height * 3 / 4 + 0.5);
+
+        media.drawLine(context, height / 2);
       } 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);
+                         width / 2, height / 2);
       }
     },
 
@@ -173,14 +165,8 @@ cr.define('media', function() {
      * 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.summaryText_.textContent = clipURL(this.key) || 'Unknown File';
 
       this.detailTable_.textContent = '';
       var header = document.createElement('thead');
@@ -234,6 +220,6 @@ cr.define('media', function() {
   };
 
   return {
-    CacheEntry: CacheEntry
+    CacheEntry: CacheEntry,

[scherkus (not reviewing), 2011/08/16 19:18:29]

aren't trailing , bad in  JS?

[arv (Not doing code reviews), 2011/08/16 19:29:03]

undo change

[Scott Franklin, 2011/08/16 23:33:52]

Done.

   };
 });