Removed old media-internals page and rewrote it.

content/browser/resources/media/main/renderManager.js

+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;
+        goog.array.forEach(this.standardModels, 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) {
+            goog.array.forEach(this.standardModels, 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;
+}());