Adds cache and buffer graphs to the properties pane.

content/browser/resources/media/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() {
   'use strict';
 
   /**
    * This class represents a file cached by net.
    */
@@ skipping 158 matching lines @@
      */
     drawCacheReadsToCanvas: function(canvas) {
       this.drawCacheEntriesToCanvas(this.read_, '#0a0', canvas);
     },
 
     /**
      * Update this.details_ to contain everything we currently know about
      * this file.
      */
     generateDetails: function() {
+      function makeElement(tag, content) {
+        var toReturn = document.createElement(tag);
+        toReturn.appendChild(document.createTextNode(content));
+        return toReturn;
+      }
+
       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(media.makeElement('th', 'Read From Cache'));
-      headerRow.appendChild(media.makeElement('th', 'Written To Cache'));
+      headerRow.appendChild(makeElement('th', 'Read From Cache'));
+      headerRow.appendChild(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(media.makeElement('td', read[i] || ''));
-        row.appendChild(media.makeElement('td', written[i] || ''));
+        row.appendChild(makeElement('td', read[i] || ''));
+        row.appendChild(makeElement('td', written[i] || ''));
         body.appendChild(row);
       }
 
       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
   };
 });