Add a "Save log" button to media-internals

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.audioPropertiesTable =
         document.getElementById('audio-property-table').querySelector('tbody');
     this.playerPropertiesTable =
         document.getElementById('player-property-table').querySelector('tbody');
     this.logTable = document.getElementById('log').querySelector('tbody');
     this.graphElement = document.getElementById('graphs');
     this.audioPropertyName = document.getElementById('audio-property-name');
 
+    this.players = null;
     this.selectedPlayer = 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');
     var clipboardButtons = document.getElementsByClassName('copy-button');
     for (var i = 0; i < clipboardButtons.length; i++) {
       clipboardButtons[i].onclick = this.copyToClipboard_.bind(this);
     }
 
+    this.saveLogButton = document.getElementById('save-log-button');
+    this.saveLogButton.onclick = this.saveLog_.bind(this);
+
     this.hiddenKeys = ['component_id', 'component_type', 'owner_id'];
 
     // Tell CSS to hide certain content prior to making selections.
     document.body.classList.add(ClientRenderer.Css_.NO_PLAYERS_SELECTED);
     document.body.classList.add(ClientRenderer.Css_.NO_COMPONENTS_SELECTED);
   };
 
   /**
    * CSS classes added / removed in JS to trigger styling changes.
    * @private @enum {string}
@@ skipping 39 matching lines @@
   function selectSelectableButton(id) {
     var element = document.getElementById(id);
     if (!element) {
       console.error('failed to select button with id: ' + id);
       return;
     }
 
     element.checked = true;
   }
 
+  function downloadLog(text) {
+    var file = new Blob([text], {type: 'text/plain'});
+    var a = document.createElement('a');
+    a.href = URL.createObjectURL(file);
+    a.download = "media-internals.txt";
+    a.click();
+  }
+
   ClientRenderer.prototype = {
     /**
      * 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);
 
@@ skipping 117 matching lines @@
             cellElement = document.createTextNode(
                 ((typeof value) == 'undefined') ? 'n/a' : value);
           }
           tableCell.appendChild(cellElement)
           tableRow.appendChild(tableCell);
         }
         videoTableBodyElement.appendChild(tableRow);
       }
     },
 
-    getAudioComponentName_ : function(componentType, id) {
+    getAudioComponentName_: function(componentType, id) {
       var baseName;
       switch (componentType) {
         case 0:
         case 1:
           baseName = 'Controller';
           break;
         case 2:
           baseName = 'Stream';
           break;
         default:
           baseName = 'UnknownType'
           console.error('Unrecognized component type: ' + componentType);
           break;
       }
       return baseName + ' ' + id;
     },
 
-    getListElementForAudioComponent_ : function(componentType) {
+    getListElementForAudioComponent_: function(componentType) {
       var listElement;
       switch (componentType) {
         case 0:
           listElement = document.getElementById(
               'audio-input-controller-list');
           break;
         case 1:
           listElement = document.getElementById(
               'audio-output-controller-list');
           break;
@@ skipping 35 matching lines @@
       listElement.appendChild(fragment);
 
       if (this.selectedAudioComponentType &&
           this.selectedAudioComponentType == componentType &&
           this.selectedAudioComponentId in components) {
         // Re-select the selected component since the button was just recreated.
         selectSelectableButton(this.selectedAudioComponentId);
       }
     },
 
-    selectAudioComponent_: function(
-          componentType, componentId, componentData) {
+    selectAudioComponent_: function(componentType, componentId, componentData) {
       document.body.classList.remove(
          ClientRenderer.Css_.NO_COMPONENTS_SELECTED);
 
       this.selectedAudioComponentType = componentType;
       this.selectedAudioComponentId = componentId;
       this.selectedAudioCompontentData = componentData;
       this.drawProperties_(componentData, this.audioPropertiesTable);
 
       removeChildren(this.audioPropertyName);
       this.audioPropertyName.appendChild(document.createTextNode(
           this.getAudioComponentName_(componentType, componentId)));
     },
 
     redrawPlayerList_: function(players) {
+      this.players = players;
+
       // Group name imposes rule that only one component can be selected
       // (and have its properties displayed) at a time.
       var buttonGroupName = 'player-buttons';
 
+      var hasPlayers = false;
       var fragment = document.createDocumentFragment();
       for (id in players) {
+        hasPlayers = true;
         var player = players[id];
         var usableName = player.properties.name ||
             player.properties.url ||
             'Player ' + player.id;
 
         var li = document.createElement('li');
         var button_cb = this.selectPlayer_.bind(this, player);
         li.appendChild(createSelectableButton(
             id, buttonGroupName, usableName, button_cb));
         fragment.appendChild(li);
       }
       removeChildren(this.playerListElement);
       this.playerListElement.appendChild(fragment);
 
       if (this.selectedPlayer && this.selectedPlayer.id in players) {
         // Re-select the selected player since the button was just recreated.
         selectSelectableButton(this.selectedPlayer.id);
       }
+
+      this.saveLogButton.style.display = hasPlayers ? "inline-block" : "none";
     },
 
     selectPlayer_: function(player) {
       document.body.classList.remove(ClientRenderer.Css_.NO_PLAYERS_SELECTED);
 
       this.selectedPlayer = player;
       this.selectedPlayerLogIndex = 0;
       this.selectedAudioComponentType = null;
       this.selectedAudioComponentId = null;
       this.selectedAudioCompontentData = null;
@@ skipping 36 matching lines @@
       }
     },
 
     drawLog_: function() {
       var toDraw = this.selectedPlayer.allEvents.slice(
           this.selectedPlayerLogIndex);
       toDraw.forEach(this.appendEventToLog_.bind(this));
       this.selectedPlayerLogIndex = this.selectedPlayer.allEvents.length;
     },
 
+    saveLog_: function() {
+      var strippedPlayers = []
+      for (id in this.players) {
+        var p = this.players[id];
+        strippedPlayers.push({properties: p.properties, events: p.allEvents});
+      }
+      downloadLog(JSON.stringify(strippedPlayers, null, 2));
+    },
+
     drawGraphs_: function() {
       function addToGraphs(name, graph, graphElement) {
         var li = document.createElement('li');
         li.appendChild(graph);
         li.appendChild(document.createTextNode(name));
         graphElement.appendChild(li);
       }
 
       var url = this.selectedPlayer.properties.url;
       if (!url) {
@@ skipping 104 matching lines @@
       if (this.selectedPlayer) {
         removeChildren(this.logTable);
         this.selectedPlayerLogIndex = 0;
         this.drawLog_();
       }
     },
   };
 
   return ClientRenderer;
 })();