Introduce new interface for MediaInternals updates.

content/browser/resources/media/client_renderer.js

 // Copyright 2013 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.
 
 var ClientRenderer = (function() {
   var ClientRenderer = function() {
     this.playerListElement = document.getElementById('player-list');
-    this.audioStreamListElement = document.getElementById('audio-stream-list');
-    this.propertiesTable = document.getElementById('property-table');
-    this.logTable = document.getElementById('log');
+    this.propertiesTable =
+        document.getElementById('property-table').querySelector('tbody');
+    this.logTable = document.getElementById('log').querySelector('tbody');
     this.graphElement = document.getElementById('graphs');
 
     this.selectedPlayer = null;
-    this.selectedStream = null;
+    this.selectedAudioComponentType = null;
+    this.selectedAudioComponentId = null;
+    this.selectedAudioCompontentData = null;
 
     this.selectedPlayerLogIndex = 0;
 
     this.filterFunction = function() { return true; };
     this.filterText = document.getElementById('filter-text');
     this.filterText.onkeyup = this.onTextChange_.bind(this);
 
     this.bufferCanvas = document.createElement('canvas');
     this.bufferCanvas.width = media.BAR_WIDTH;
     this.bufferCanvas.height = media.BAR_HEIGHT;
 
     this.clipboardTextarea = document.getElementById('clipboard-textarea');
     this.clipboardButton = document.getElementById('copy-button');
     this.clipboardButton.onclick = this.copyToClipboard_.bind(this);
+
+    this.hiddenKeys = ['component_id', 'component_type', 'owner_id'];
   };
 
   function removeChildren(element) {
     while (element.hasChildNodes()) {
       element.removeChild(element.lastChild);
     }
   };
 
   function createButton(text, select_cb) {
     var button = document.createElement('button');
 
     button.appendChild(document.createTextNode(text));
     button.onclick = function() {
       select_cb();
     };
 
     return button;
   };
 
   ClientRenderer.prototype = {
-    audioStreamAdded: function(audioStreams, audioStreamAdded) {
-      this.redrawAudioStreamList_(audioStreams);
-    },
+    /**
+     * Called when an audio component is added to the collection.
+     * @param componentType Integer AudioComponent enum value; must match values
+     * from the AudioLogFactory::AudioComponent enum.
+     * @param components The entire map of components (name -> dict).
+     */
+    audioComponentAdded: function(componentType, components) {
+      this.redrawAudioComponentList_(componentType, components);
 
-    audioStreamUpdated: function(audioStreams, stream, key, value) {
-      if (stream === this.selectedStream) {
-        this.drawProperties_(stream);
+      // Redraw the component if it's currently selected.
+      if (this.selectedAudioComponentType == componentType &&
+          this.selectedAudioComponentId &&
+          this.selectedAudioComponentId in components) {
+        this.selectAudioComponent_(
+            componentType, this.selectedAudioComponentId,
+            components[this.selectedAudioComponentId]);
       }
     },
 
-    audioStreamRemoved: function(audioStreams, audioStreamRemoved) {
-      this.redrawAudioStreamList_(audioStreams);
+    /**
+     * Called when an audio component is removed from the collection.
+     * @param componentType Integer AudioComponent enum value; must match values
+     * from the AudioLogFactory::AudioComponent enum.
+     * @param components The entire map of components (name -> dict).
+     */
+    audioComponentRemoved: function(componentType, components) {
+      this.redrawAudioComponentList_(componentType, components);
+
+      // Clear the component if it was previously currently selected.
+      if (this.selectedAudioComponentType == componentType &&
+          !(this.selectedAudioComponentId in components)) {
+        this.selectAudioComponent_(null, null, {});
+      }
     },
 
     /**
      * Called when a player is added to the collection.
      * @param players The entire map of id -> player.
      * @param player_added The player that is added.
      */
     playerAdded: function(players, playerAdded) {
       this.redrawPlayerList_(players);
     },
@@ skipping 18 matching lines @@
       if (player === this.selectedPlayer) {
         this.drawProperties_(player.properties);
         this.drawLog_();
         this.drawGraphs_();
       }
       if (key === 'name' || key === 'url') {
         this.redrawPlayerList_(players);
       }
     },
 
-    redrawAudioStreamList_: function(streams) {
-      removeChildren(this.audioStreamListElement);
+    redrawAudioComponentList_: function(componentType, components) {
+      function redrawList(renderer, baseName, element) {
+        removeChildren(element);
+        for (id in components) {

[acolwell GONE FROM CHROMIUM, 2013/11/26 01:33:17]

If this can get large, you might consider using a DocumentFragment here to avoid
triggering relayout on each element.appendChild().

var fragment = document.createDocumentFragment();
for (id in components) {
  ....
  fragment.appendChild(li)
}
removeChildren(element);
element.appendChild(fragment);

[DaleCurtis, 2013/11/26 03:02:21]

Done.

+          var li = document.createElement('li');
+          li.appendChild(createButton(
+              baseName + ' ' + id, renderer.selectAudioComponent_.bind(
+                  renderer, componentType, id, components[id])));
+          element.appendChild(li);
+        }
+      }
 
-      for (id in streams) {
-        var li = document.createElement('li');
-        li.appendChild(createButton(
-            id, this.selectAudioStream_.bind(this, streams[id])));
-        this.audioStreamListElement.appendChild(li);
+      switch (componentType) {
+        case 0:
+          redrawList(this, 'Controller', document.getElementById(
+              'audio-input-controller-list'));
+          break;
+        case 1:
+          redrawList(this, 'Controller', document.getElementById(
+              'audio-output-controller-list'));
+          break;
+        case 2:
+          redrawList(this, 'Stream', document.getElementById(
+              'audio-output-stream-list'));
+          break;
+        default:
+          break;
       }
     },
 
-    selectAudioStream_: function(audioStream) {
-      this.selectedStream = audioStream;
+    selectAudioComponent_: function(componentType, componentId, componentData) {
       this.selectedPlayer = null;
-      this.drawProperties_(audioStream);
-      removeChildren(this.logTable.querySelector('tbody'));
+      this.selectedAudioComponentType = componentType;
+      this.selectedAudioComponentId = componentId;
+      this.selectedAudioCompontentData = componentData;
+      this.drawProperties_(componentData);
+      removeChildren(this.logTable);
       removeChildren(this.graphElement);
     },
 
     redrawPlayerList_: function(players) {
       removeChildren(this.playerListElement);
 
       for (id in players) {
         var li = document.createElement('li');
         var player = players[id];
         var usableName = player.properties.name ||
             player.properties.url ||
-            'player ' + player.id;
+            'Player ' + player.id;
 
         li.appendChild(createButton(
             usableName, this.selectPlayer_.bind(this, player)));
         this.playerListElement.appendChild(li);
       }
     },
 
     selectPlayer_: function(player) {
       this.selectedPlayer = player;
       this.selectedPlayerLogIndex = 0;
-      this.selectedStream = null;
+      this.selectedAudioComponentType = null;
+      this.selectedAudioComponentId = null;
+      this.selectedAudioCompontentData = null;
       this.drawProperties_(player.properties);
 
-      removeChildren(this.logTable.querySelector('tbody'));
+      removeChildren(this.logTable);
       removeChildren(this.graphElement);
       this.drawLog_();
       this.drawGraphs_();
     },
 
     drawProperties_: function(propertyMap) {
       removeChildren(this.propertiesTable);
-
       var sortedKeys = Object.keys(propertyMap).sort();
       for (var i = 0; i < sortedKeys.length; ++i) {
         var key = sortedKeys[i];
+        if (this.hiddenKeys.indexOf(key) >= 0)
+          continue;
+
         var value = propertyMap[key];
-
         var row = this.propertiesTable.insertRow(-1);
         var keyCell = row.insertCell(-1);
         var valueCell = row.insertCell(-1);
 
         keyCell.appendChild(document.createTextNode(key));
         valueCell.appendChild(document.createTextNode(value));
       }
     },
 
     appendEventToLog_: function(event) {
       if (this.filterFunction(event.key)) {
-        var row = this.logTable.querySelector('tbody').insertRow(-1);
+        var row = this.logTable.insertRow(-1);
 
         row.insertCell(-1).appendChild(document.createTextNode(
             util.millisecondsToString(event.time)));
         row.insertCell(-1).appendChild(document.createTextNode(event.key));
         row.insertCell(-1).appendChild(document.createTextNode(event.value));
       }
     },
 
     drawLog_: function() {
       var toDraw = this.selectedPlayer.allEvents.slice(
@@ skipping 66 matching lines @@
       var middle = current * scale_factor;
       var right = end * scale_factor;
 
       ctx.fillStyle = '#a0a';
       ctx.fillRect(left, 0, middle - left, height);
       ctx.fillStyle = '#aa0';
       ctx.fillRect(middle, 0, right - middle, height);
     },
 
     copyToClipboard_: function() {
-      var properties = this.selectedStream ||
+      var properties = this.selectedAudioCompontentData ||
           this.selectedPlayer.properties || false;
       if (!properties) {
         return;
       }
       var stringBuffer = [];
 
       for (var key in properties) {
         var value = properties[key];
         stringBuffer.push(key.toString());
         stringBuffer.push(': ');
         stringBuffer.push(value.toString());
         stringBuffer.push('\n');
       }
 
       this.clipboardTextarea.value = stringBuffer.join('');
-      this.clipboardTextarea.classList.remove('hidden');
+      this.clipboardTextarea.classList.remove('hiddenClipboard');
       this.clipboardTextarea.focus();
       this.clipboardTextarea.select();
 
-      // The act of copying anything from the textarea gets canceled
-      // if the element in question gets the class 'hidden' (which contains the
-      // css property display:none) before the event is finished. For this, it
-      // is necessary put the property setting on the event loop to be executed
-      // after the copy has taken place.
-      this.clipboardTextarea.oncopy = function(event) {
+      // Hide the clipboard element when it loses focus.
+      this.clipboardTextarea.onblur = function(event) {
         setTimeout(function(element) {
-          event.target.classList.add('hidden');
+          event.target.classList.add('hiddenClipboard');
         }, 0);
       };
     },
 
     onTextChange_: function(event) {
       var text = this.filterText.value.toLowerCase();
       var parts = text.split(',').map(function(part) {
         return part.trim();
       }).filter(function(part) {
         return part.trim().length > 0;
       });
 
       this.filterFunction = function(text) {
         text = text.toLowerCase();
         return parts.length === 0 || parts.some(function(part) {
           return text.indexOf(part) != -1;
         });
       };
 
       if (this.selectedPlayer) {
-        removeChildren(this.logTable.querySelector('tbody'));
+        removeChildren(this.logTable);
         this.selectedPlayerLogIndex = 0;
         this.drawLog_();
       }
     },
   };
 
   return ClientRenderer;
 })();