<commit_before>// 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.graphElement = document.getElementById('graphs');

    this.selectedPlayer = null;
    this.selectedStream = 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);
  };

  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);
    },

    audioStreamUpdated: function(audioStreams, stream, key, value) {
      if (stream === this.selectedStream) {
        this.drawProperties_(stream);
      }
    },

    audioStreamRemoved: function(audioStreams, audioStreamRemoved) {
      this.redrawAudioStreamList_(audioStreams);
    },

    /**
     * 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);
    },

    /**
     * Called when a playre is removed from the collection.
     * @param players The entire map of id -> player.
     * @param player_added The player that was removed.
     */
    playerRemoved: function(players, playerRemoved) {
      this.redrawPlayerList_(players);
    },

    /**
     * Called when a property on a player is changed.
     * @param players The entire map of id -> player.
     * @param player The player that had its property changed.
     * @param key The name of the property that was changed.
     * @param value The new value of the property.
     */
    playerUpdated: function(players, player, key, value) {
      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);

      for (id in streams) {
        var li = document.createElement('li');
        li.appendChild(createButton(
            id, this.selectAudioStream_.bind(this, streams[id])));
        this.audioStreamListElement.appendChild(li);
      }
    },

    selectAudioStream_: function(audioStream) {
      this.selectedStream = audioStream;
      this.selectedPlayer = null;
      this.drawProperties_(audioStream);
      removeChildren(this.logTable.querySelector('tbody'));
      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;

        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.drawProperties_(player.properties);

      removeChildren(this.logTable.querySelector('tbody'));
      removeChildren(this.graphElement);
      this.drawLog_();
      this.drawGraphs_();
    },

    drawProperties_: function(propertyMap) {
      removeChildren(this.propertiesTable);

      for (key in propertyMap) {<commit_msg>Sort the chrome://media-internals properties table by key name.<commit_after>// 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.graphElement = document.getElementById('graphs');

    this.selectedPlayer = null;
    this.selectedStream = 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);
  };

  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);
    },

    audioStreamUpdated: function(audioStreams, stream, key, value) {
      if (stream === this.selectedStream) {
        this.drawProperties_(stream);
      }
    },

    audioStreamRemoved: function(audioStreams, audioStreamRemoved) {
      this.redrawAudioStreamList_(audioStreams);
    },

    /**
     * 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);
    },

    /**
     * Called when a playre is removed from the collection.
     * @param players The entire map of id -> player.
     * @param player_added The player that was removed.
     */
    playerRemoved: function(players, playerRemoved) {
      this.redrawPlayerList_(players);
    },

    /**
     * Called when a property on a player is changed.
     * @param players The entire map of id -> player.
     * @param player The player that had its property changed.
     * @param key The name of the property that was changed.
     * @param value The new value of the property.
     */
    playerUpdated: function(players, player, key, value) {
      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);

      for (id in streams) {
        var li = document.createElement('li');
        li.appendChild(createButton(
            id, this.selectAudioStream_.bind(this, streams[id])));
        this.audioStreamListElement.appendChild(li);
      }
    },

    selectAudioStream_: function(audioStream) {
      this.selectedStream = audioStream;
      this.selectedPlayer = null;
      this.drawProperties_(audioStream);
      removeChildren(this.logTable.querySelector('tbody'));
      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;

        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.drawProperties_(player.properties);

      removeChildren(this.logTable.querySelector('tbody'));
      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];
{'fraction_non_alphanumeric': 0.11251528740317979, 'fraction_numerical': 0.0013249082755809212, 'mean_word_length': 3.092160133444537, 'pattern_counts': {'":': 0, '<': 4, '<?xml version=': 0, '>': 9, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4663468', 'n_tokens_mistral': 2714, 'n_tokens_neox': 2623, 'n_words': 596}