Refactor LogsView to be defined inside an anonymous namespace.

BUG=90857
Review URL: http://codereview.chromium.org/7558002

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@95261 0039d316-1c4b-4281-b951-d872f2087c98

1 files changed, 191 insertions, 167 deletions

diff --git a/chrome/browser/resources/net_internals/logs_view.js b/chrome/browser/resources/net_internals/logs_view.js
index facb40eb..b81e574 100644
--- a/chrome/browser/resources/net_internals/logs_view.js
+++ b/chrome/browser/resources/net_internals/logs_view.js
@@ -6,176 +6,200 @@
  * This view displays network related log data and is specific fo ChromeOS.
  * We get log data from chrome by filtering system logs for network related
  * keywords. Logs are not fetched until we actually need them.
- *
- * @constructor
  */
-function LogsView() {
-  const mainBoxId = 'logs-view-tab-content';
-  const tableId = 'logs-view-log-table';
-  const globalShowButtonId = 'logs-view-global-show-btn';
-  const globalHideButtonId = 'logs-view-global-hide-btn';
-  const refreshLogsButtonId = 'logs-view-refresh-btn';
-
-  var tableDiv = $(tableId);
-  this.rows = [];
-  this.PopulateTable(tableDiv, this.logFilterList);
-  $(globalShowButtonId).addEventListener('click',
-      this.onGlobalChangeVisibleClick_.bind(this, true));
-  $(globalHideButtonId).addEventListener('click',
-      this.onGlobalChangeVisibleClick_.bind(this, false));
-  $(refreshLogsButtonId).addEventListener('click',
-      this.onLogsRefresh_.bind(this));
-  DivView.call(this, mainBoxId);
-};
-
-inherits(LogsView, DivView);
-
-/**
- * Contains log keys we are interested in.
- */
-LogsView.prototype.logFilterList = [
-  {
-    key:'syslog',
-  },
-  {
-    key:'ui_log',
-  },
-  {
-    key:'chrome_system_log',
-  },
-  {
-    key:'chrome_log',
-  },
-];
-
-/**
- * Called during View's initialization. Creates the row of a table logs will be
- * shown in. Each row has 4 cells.
- *
- * First cell's content will be set to |logKey|, second will contain a button
- * that will be used to show or hide third cell, which will contain the filtered
- * log.
- * |logKey| also tells us which log we are getting data from.
- */
-LogsView.prototype.CreateTableRow = function(logKey) {
-  var row = document.createElement('tr');
-
-  var cells = [];
-  for (var i = 0; i < 3; i++) {
-    var rowCell = document.createElement('td');
-    cells.push(rowCell);
-    row.appendChild(rowCell);
+var LogsView = (function() {
+  // IDs for special HTML elements in logs_view.html
+  const MAIN_BOX_ID = 'logs-view-tab-content';
+  const TABLE_ID = 'logs-view-log-table';
+  const GLOBAL_SHOW_BUTTON_ID = 'logs-view-global-show-btn';
+  const GLOBAL_HIDE_BUTTON_ID = 'logs-view-global-hide-btn';
+  const REFRESH_LOGS_BUTTON_ID = 'logs-view-refresh-btn';
+
+  // Special classes (defined in logs_view.css).
+  const LOG_ROW_COLLAPSED_CLASSNAME = 'logs-view-log-row-collapsed';
+  const LOG_ROW_EXPANDED_CLASSNAME = 'logs-view-log-row-expanded';
+  const LOG_CELL_TEXT_CLASSNAME = 'logs-view-log-cell-text';
+  const LOG_CELL_LOG_CLASSNAME = 'logs-view-log-cell-log';
+  const LOG_TABLE_BUTTON_COLUMN_CLASSNAME = 'logs-view-log-table-button-column';
+  const LOG_BUTTON_CLASSNAME = 'logs-view-log-button';
+
+  // We inherit from DivView.
+  var superClass = DivView;
+
+  /**
+   * @constructor
+   */
+  function LogsView() {
+    // Call superclass's constructor.
+    superClass.call(this, MAIN_BOX_ID);
+
+    var tableDiv = $(TABLE_ID);
+    this.rows = [];
+    this.populateTable(tableDiv, kLogFilterList);
+    $(GLOBAL_SHOW_BUTTON_ID).addEventListener('click',
+        this.onGlobalChangeVisibleClick_.bind(this, true));
+    $(GLOBAL_HIDE_BUTTON_ID).addEventListener('click',
+        this.onGlobalChangeVisibleClick_.bind(this, false));
+    $(REFRESH_LOGS_BUTTON_ID).addEventListener('click',
+        this.onLogsRefresh_.bind(this));
   }
-  // Log key cell.
-  cells[0].className = 'logs-view-log-cell-text';
-  cells[0].textContent = logKey;
-  // Cell log is displayed in. Log content is in div element that is initially
-  // hidden and empty.
-  cells[2].className = 'logs-view-log-cell-text';
-  var logDiv = document.createElement('div');
-  logDiv.textContent = '';
-  logDiv.className = 'logs-view-log-cell-log';
-  logDiv.id = 'logsView.logCell.' + this.rows.length;
-  cells[2].appendChild(logDiv);
-
-  // Button that we use to show or hide div element with log content. Logs are
-  // not visible initially, so we initialize button accordingly.
-  var expandButton = document.createElement('button');
-  expandButton.textContent = 'Show...';
-  expandButton.className = 'logs-view-log-button';
-  expandButton.addEventListener('click',
-                                this.onButtonClicked_.bind(this, row));
-
-  // Cell that contains show/hide button.
-  cells[1].appendChild(expandButton);
-  cells[1].className = 'logs-view-log-table-button-column';
-
-  // Initially, log is not visible.
-  row.className = 'logs-view-log-row-collapsed';
-
-  // We will need those to process row buttons' onclick events.
-  row.logKey = logKey;
-  row.expandButton = expandButton;
-  row.logDiv = logDiv;
-  row.logVisible = false;
-  this.rows.push(row);
-
-  return row;
-};
 
-/**
- * Initializes |tableDiv| to represent data from |logList| which should be of
- * type LogsView.logFilterList.
- */
-LogsView.prototype.PopulateTable = function(tableDiv, logList) {
-  for (var i = 0; i < logList.length; i++) {
-    var logSource = this.CreateTableRow(logList[i].key);
-    tableDiv.appendChild(logSource);
-  }
-};
-
-/**
- * Processes clicks on buttons that show or hide log contents in log row.
- * Row containing the clicked button is given to the method since it contains
- * all data we need to process the click (unlike button object itself).
- */
-LogsView.prototype.onButtonClicked_ = function(containingRow) {
-  if (!containingRow.logVisible) {
-    containingRow.className = 'logs-view-log-row-expanded';
-    containingRow.expandButton.textContent = 'Hide...';
-    var logDiv = containingRow.logDiv;
-    if (logDiv.textContent == '') {
-      logDiv.textContent = 'Getting logs...';
-      // Callback will be executed by g_browser.
-      g_browser.getSystemLog(containingRow.logKey,
-                             containingRow.logDiv.id);
+  /**
+   * Contains log keys we are interested in.
+   */
+  const kLogFilterList = [
+    {
+      key:'syslog',
+    },
+    {
+      key:'ui_log',
+    },
+    {
+      key:'chrome_system_log',
+    },
+    {
+      key:'chrome_log',
     }
-  } else {
-    containingRow.className = 'logs-view-log-row-collapsed';
-    containingRow.expandButton.textContent = 'Show...';
-  }
-  containingRow.logVisible = !containingRow.logVisible;
-};
-
-/**
- * Processes click on one of the buttons that are used to show or hide all logs
- * we care about.
- */
-LogsView.prototype.onGlobalChangeVisibleClick_ = function(isShowAll) {
-  for (var row in this.rows) {
-    if (isShowAll != this.rows[row].logVisible) {
-      this.onButtonClicked_(this.rows[row]);
-    }
-  }
-};
-
-/**
- * Processes click event on the button we use to refresh fetched logs. we get
- * the newest logs from libcros, and refresh content of the visible log cells.
- */
-LogsView.prototype.onLogsRefresh_ = function() {
-  g_browser.refreshSystemLogs();
-
-  var visibleLogRows = [];
-  var hiddenLogRows = [];
-  for (var row in this.rows) {
-    if (this.rows[row].logVisible) {
-      visibleLogRows.push(this.rows[row]);
-    } else {
-      hiddenLogRows.push(this.rows[row]);
+  ];
+
+  LogsView.prototype = {
+    // Inherit the superclass's methods.
+    __proto__: superClass.prototype,
+
+    /**
+     * Called during View's initialization. Creates the row of a table logs will
+     * be shown in. Each row has 4 cells.
+     *
+     * First cell's content will be set to |logKey|, second will contain a
+     * button that will be used to show or hide third cell, which will contain
+     * the filtered log.
+     * |logKey| also tells us which log we are getting data from.
+     */
+    createTableRow: function(logKey) {
+      var row = document.createElement('tr');
+
+      var cells = [];
+      for (var i = 0; i < 3; i++) {
+        var rowCell = document.createElement('td');
+        cells.push(rowCell);
+        row.appendChild(rowCell);
+      }
+      // Log key cell.
+      cells[0].className = LOG_CELL_TEXT_CLASSNAME;
+      cells[0].textContent = logKey;
+      // Cell log is displayed in. Log content is in div element that is
+      // initially hidden and empty.
+      cells[2].className = LOG_CELL_TEXT_CLASSNAME;
+      var logDiv = document.createElement('div');
+      logDiv.textContent = '';
+      logDiv.className = LOG_CELL_LOG_CLASSNAME;
+      logDiv.id = 'logs-view.log-cell.' + this.rows.length;
+      cells[2].appendChild(logDiv);
+
+      // Button that we use to show or hide div element with log content. Logs
+      // are not visible initially, so we initialize button accordingly.
+      var expandButton = document.createElement('button');
+      expandButton.textContent = 'Show...';
+      expandButton.className = LOG_BUTTON_CLASSNAME;
+      expandButton.addEventListener('click',
+                                    this.onButtonClicked_.bind(this, row));
+
+      // Cell that contains show/hide button.
+      cells[1].appendChild(expandButton);
+      cells[1].className = LOG_TABLE_BUTTON_COLUMN_CLASSNAME;
+
+      // Initially, log is not visible.
+      row.className = LOG_ROW_COLLAPSED_CLASSNAME;
+
+      // We will need those to process row buttons' onclick events.
+      row.logKey = logKey;
+      row.expandButton = expandButton;
+      row.logDiv = logDiv;
+      row.logVisible = false;
+      this.rows.push(row);
+
+      return row;
+    },
+
+    /**
+     * Initializes |tableDiv| to represent data from |logList| which should be
+     * of type kLogFilterList.
+     */
+    populateTable: function(tableDiv, logList) {
+      for (var i = 0; i < logList.length; i++) {
+        var logSource = this.createTableRow(logList[i].key);
+        tableDiv.appendChild(logSource);
+      }
+    },
+
+    /**
+     * Processes clicks on buttons that show or hide log contents in log row.
+     * Row containing the clicked button is given to the method since it
+     * contains all data we need to process the click (unlike button object
+     * itself).
+     */
+    onButtonClicked_: function(containingRow) {
+      if (!containingRow.logVisible) {
+        containingRow.className = LOG_ROW_EXPANDED_CLASSNAME;
+        containingRow.expandButton.textContent = 'Hide...';
+        var logDiv = containingRow.logDiv;
+        if (logDiv.textContent == '') {
+          logDiv.textContent = 'Getting logs...';
+          // Callback will be executed by g_browser.
+          g_browser.getSystemLog(containingRow.logKey,
+                                 containingRow.logDiv.id);
+        }
+      } else {
+        containingRow.className = LOG_ROW_COLLAPSED_CLASSNAME;
+        containingRow.expandButton.textContent = 'Show...';
+      }
+      containingRow.logVisible = !containingRow.logVisible;
+    },
+
+    /**
+     * Processes click on one of the buttons that are used to show or hide all
+     * logs we care about.
+     */
+    onGlobalChangeVisibleClick_: function(isShowAll) {
+      for (var row in this.rows) {
+        if (isShowAll != this.rows[row].logVisible) {
+          this.onButtonClicked_(this.rows[row]);
+        }
+      }
+    },
+
+    /**
+     * Processes click event on the button we use to refresh fetched logs. We
+     * get the newest logs from libcros, and refresh content of the visible log
+     * cells.
+     */
+    onLogsRefresh_: function() {
+      g_browser.refreshSystemLogs();
+
+      var visibleLogRows = [];
+      var hiddenLogRows = [];
+      for (var row in this.rows) {
+        if (this.rows[row].logVisible) {
+          visibleLogRows.push(this.rows[row]);
+        } else {
+          hiddenLogRows.push(this.rows[row]);
+        }
+      }
+
+      // We have to refresh text content in visible rows.
+      for (row in visibleLogRows) {
+        visibleLogRows[row].logDiv.textContent = 'Getting logs...';
+        g_browser.getSystemLog(visibleLogRows[row].logKey,
+                               visibleLogRows[row].logDiv.id);
+      }
+
+      // In hidden rows we just clear potential log text, so we know we have to
+      // get new contents when we show the row next time.
+      for (row in hiddenLogRows) {
+        hiddenLogRows[row].logDiv.textContent = '';
+      }
     }
-  }
+  };
 
-  // We have to refresh text content in visible rows.
-  for (row in visibleLogRows) {
-    visibleLogRows[row].logDiv.textContent = 'Getting logs...';
-    g_browser.getSystemLog(visibleLogRows[row].logKey,
-                           visibleLogRows[row].logDiv.id);
-  }
-
-  // In hidden rows we just clear potential log text, so we know we have to get
-  // new contents when we show the row next time.
-  for (row in hiddenLogRows) {
-    hiddenLogRows[row].logDiv.textContent = '';
-  }
-};
+  return LogsView;
+})();