Removed old media-internals page and rewrote it.

content/browser/resources/media/new/render_manager.js

Index: content/browser/resources/media/new/render_manager.js
diff --git a/content/browser/resources/media/new/render_manager.js b/content/browser/resources/media/new/render_manager.js
new file mode 100644
index 0000000000000000000000000000000000000000..009b9de69fc69477042ffa01157682bcf0864729
--- /dev/null
+++ b/content/browser/resources/media/new/render_manager.js
@@ -0,0 +1,191 @@
+// Copyright (c) 2012 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 RenderManager = (function () {
+  "use strict";
+
+
+  function timer(millis) {
+    var lastTime = (new Date()).getTime();
+
+    // A function that if called will return true
+    // if |millis| time has passed.  If so, it resets
+    // to be used again.
+    var toReturn = function () {
+      var curTime = (new Date()).getTime();
+      if (curTime - lastTime >= millis) {
+        lastTime = curTime;
+        return true;
+      }
+
+      return false;
+    };
+
+    // Forces the next call to the timer to succeeded.
+    toReturn.trigger = function () {
+      lastTime -= millis;
+      return toReturn;
+    };
+
+    // The timer is reset.
+    toReturn.postpone = function () {
+      lastTime = (new Date()).getTime();
+      return toReturn;
+    };
+
+    // The original time that the timer is set for.
+    toReturn.time = millis;
+
+    return toReturn;
+  }
+
+  // A painter is a class that has three methods:
+  //    paintNew(playerInfo, div, properties)
+  //    paintExist(playerInfo, div, properties)
+  //    invalidate(playerInfo, properties)
+  // where |playerInfo| is a PlayerInfo instance, |div|
+  // is the div that is going to be rendered into, and
+  // |properties| is an object containing other properties
+  // that the painter might want.
+  function RenderManager(playerManager) {
+    // A model is an object that contains the following properties
+    this.models = {
+      log: {
+        // The name of the model (used for errors and such)
+        name: "log",
+        // The div that the model can modify anything inside of
+        div: document.querySelector("#log"),
+        // The element (if any) that could be hiding the |div|
+        collapse: document.querySelector("#log-wrapper>.collapse"),
+        // If the element needs to be completely rewritten from scratch
+        dirty: true,
+        // An object containing functions that
+        // write html to the inside of |div|
+        painter: logPainter,
+        // A timer for how often it should be redrawn
+        timer: timer(500).trigger()
+      },
+      graph: {
+        name: "graph",
+        div: document.querySelector("#graph"),
+        collapse: document.querySelector("#graph-wrapper>.collapse"),
+        dirty: true,
+        painter: graphPainter,
+        timer: timer(100).trigger()
+      },
+      prop: {
+        name: "prop",
+        div: document.querySelector("#properties"),
+        collapse: null,
+        dirty: true,
+        painter: propertyPainter,
+        timer: timer(200).trigger()
+      },
+      playerList: {
+        name: "player list",
+        div: document.querySelector("#stream"),
+        collapse: null,
+        dirty: true,
+        painter: playerListPainter,
+        timer: timer(1000).trigger()
+      }
+    };
+
+    // All the models that contain information about a Player.
+    // Non-standard models include the player-list and the system properties
+    this.standardModels = [this.models.log, this.models.graph,
+      this.models.prop];
+
+    // The id of the current player
+    this.cachedId = -1;
+    // The playerInfo instance of the current player
+    this.current = null;
+    // The playerManager that owns this class
+    this.playerManager = playerManager;
+
+    // The text being used to filter logs
+    this.filterText = "";
+
+    // If the user is scrolling through the log, don't update it.
+    this.models.log.div.parentNode.onscroll = function () {
+      this.models.log.timer.postpone();
+    }.bind(this);
+
+    // When <enter> is pressed inside the input, set |this.filterText|.
+    var filterField = document.querySelector("#filter-input");
+    filterField.onkeydown = function (event) {
+      // 13 is the keyCode for <enter>
+      if (event.keyCode === 13) {
+        this.filterText = filterField.value;
+        // We need to trigger a repaint immediately
+        this.models.log.dirty = true;
+        this.models.log.timer.trigger();
+        this.update();
+      }
+    }.bind(this);
+  }
+
+  // Checks to see if a collapsible div is open or not
+  function isOpen(div) {
+    // If there is no parent, we have to assume that
+    // this is viewable
+    if (!div) {
+      return true;
+    }
+
+    return div.className.indexOf("open") !== -1;
+  }
+
+  // Ran when a player is selected in the playerList
+  RenderManager.prototype.select = function (id) {
+    // If we are already viewing it, don't do anything
+    if (this.cachedId === id) {
+      return;
+    }
+    this.cachedId = id;
+    this.current = this.playerManager.players[id];
+
+    // All the models need to be reset and triggered so that they
+    // are redrawn completely and immediately;
+    this.standardModels.forEach(function (m) {
+      m.dirty = true;
+      m.timer.trigger();
+    });
+    this.update();
+  };
+
+  // Ran whenever a property is updated
+  RenderManager.prototype.update = function () {
+    // To get passed into the painters
+    var extra = {filterText: this.filterText};
+
+    // If we are actually looking at something
+    if (this.current) {
+      this.standardModels.forEach(function (model) {
+        if (model.timer() && isOpen(model.collapse)) {
+          if (model.dirty) {
+            console.warn("writing " + model.name +
+              " from scratch.");
+            model.painter.paintNew(this.current, model.div, extra);
+            model.dirty = false;
+          } else {
+            model.painter.paintExist(this.current,
+              model.div, extra);
+          }
+        }
+      }, this);
+    }
+  };
+
+  // Redraws the playerList
+  RenderManager.prototype.redrawList = function () {
+    var m = this.models.playerList;
+    var prop = {playerManager: this.playerManager};
+
+    m.painter.paintNew(null, m.div, prop);
+  };
+
+  return RenderManager;
+}());