Display active media players on chrome://media-internals.

chrome/browser/resources/media_internals/media_player.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 inherits from <li> and is designed to store and display
+   * information about an open media player.
+   */
+  var MediaPlayer = cr.ui.define('li');
+
+  MediaPlayer.prototype = {
+    __proto__: HTMLLIElement.prototype,
+    renderer: null,
+    id: null,
+
+    /**
+     * Decorate this <li> as a MediaPlayer.
+     */
+    decorate: function() {
+      this.properties = {};
+
+      this.details_ = document.createElement('details');
+      this.summary_ = document.createElement('summary');
+      this.details_.open = true;
+      this.details_.appendChild(this.summary_);
+
+      this.propertyTable_ = document.createElement('table');
+      this.events_ = new media.EventList;
+      this.metrics_ = new media.Metrics;
+
+      var properties = media.createDetailsLi();
+      properties.summary.textContent = 'Properties:';
+      properties.details.appendChild(this.propertyTable_);
+
+      var ul = document.createElement('ul');
+      ul.appendChild(properties);
+      ul.appendChild(this.metrics_);
+      ul.appendChild(this.events_);
+      this.details_.appendChild(ul);
+
+      this.appendChild(this.details_);
+      document.getElementById('media-players').appendChild(this);
+    },
+
+    /**
+     * Record an event and update statistics etc.
+     * @param {Object} event The event that occurred.
+     */
+    addEvent: function(event) {
+      for (var key in event.params) {
+        this.properties[key] = event.params[key];
+      }
+
+      if (event.type == 'BUFFERED_EXTENTS_CHANGED')
+        return;
+      this.events_.addEvent(event);
+      this.metrics_.addEvent(event);
+    },
+
+    /**
+     * Update the summary line and properties table and redraw the canvas.
+     * @return {HTMLElement} A <li> representing this MediaPlayer.
+     */
+    redraw: function() {
+      media.printDictionaryToTable(this.properties, this.propertyTable_);
+
+      this.setAttribute('status', this.properties.state);
+      this.summary_.textContent = '';
+      this.summary_.appendChild(document.createTextNode(
+            this.id + ' (' + this.properties.url + '):'));
+      this.summary_.appendChild(document.createElement('br'));
+
+      // Draw the state of BufferedResourceLoader.
+      var canvas = document.createElement('canvas');
+      canvas.width = media.BAR_WIDTH;
+      canvas.height = 3 * media.BAR_HEIGHT + 2;
+      canvas.className = 'buffer-canvas';
+      this.summary_.appendChild(canvas);
+
+      var context = canvas.getContext('2d');
+      context.textAlign = 'center';
+      context.textBaseline = 'middle';
+      context.fillStyle = '#aaa';
+      context.fillRect(0, 0, canvas.width, canvas.height);
+
+      var size = this.properties.total_bytes;
+      if (!size) {
+        context.fillStyle = '#fff';
+        context.fillText('Unknown file size.', canvas.width / 2,

[arv (Not doing code reviews), 2011/10/18 20:50:07]

To me it always suspicious when fillText is used. Can this be done in some other
way so it can be selected, copied, read etc?

[scherkus (not reviewing), 2011/10/19 00:19:43]

such as a <div> of text w/ z-index:1 over top of the <canvas>?

on further inspection it looks like fillText() is only used in error conditions
in which case we might not even require a <canvas> in those cases and could
append a <div> of text instead.

was that what you were thinking of?

[arv (Not doing code reviews), 2011/10/19 20:30:21]

Yeah, a <p> or something like that would make more sense if the text does not
need be used as part of an image.

+            canvas.height / 2);
+        return;
+      }
+
+      var left = this.properties.buffer_start / size * canvas.width;
+      var middle = this.properties.buffer_current / size * canvas.width;
+      var right = this.properties.buffer_end / size * canvas.width;
+      context.fillStyle = '#a0a';
+      context.fillRect(left, 0, middle - left, media.BAR_HEIGHT);
+      context.fillStyle = '#aa0';
+      context.fillRect(middle, 0, right - middle, media.BAR_HEIGHT);
+
+      media.drawLine(context, media.BAR_HEIGHT + 0.5);
+
+      context.fillStyle = '#fff';
+      context.fillText('Buffered by player.', canvas.width / 2,
+          media.BAR_HEIGHT / 2);
+
+      if (!media.cacheEntriesByKey[this.properties.url]) {
+        context.fillText('No cache entry for this file.', canvas.width / 2,
+            2 * canvas.height / 3);
+      } else {
+        var cached = media.cacheEntriesByKey[this.properties.url].canvas;
+        var data = cached.getContext('2d').getImageData(0, 0, cached.width,
+            cached.height);
+        context.putImageData(data, 0, media.BAR_HEIGHT + 1);
+      }
+    },
+  };
+
+  return {
+    MediaPlayer: MediaPlayer
+  };
+});