WebUI TaskManager: Make the initialization of model (in browser process) and UI (in render process) paralleled.

- Moves the sending of 'enableTaskManager' command to the first of the loading.
- Adds the "onReadyPeriodicalUpdated" callback. It is fired when the last of initialize of task manager model. On JS side, the list is refreshed forcibly by this event.
- Separates the code of initialization of task manager from main.js into preload.js and defines.js. 
- Moves the code of sending command from main.js to commands.js.

BUG=113939
TEST=manual

Review URL: http://codereview.chromium.org/9388001

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

11 files changed, 220 insertions, 152 deletions

diff --git a/chrome/browser/browser_resources.grd b/chrome/browser/browser_resources.grd
index aef5da9..a3865f6 100644
--- a/chrome/browser/browser_resources.grd
+++ b/chrome/browser/browser_resources.grd
@@ -122,7 +122,11 @@
       <include name="IDR_SSL_ERROR_HTML" file="resources\ssl_error.html" flattenhtml="true" type="BINDATA" />
       <include name="IDR_SSL_ROAD_BLOCK_HTML" file="resources\ssl_roadblock.html" flattenhtml="true" type="BINDATA" />
       <include name="IDR_TASK_MANAGER_HTML" file="resources\task_manager\main.html" flattenhtml="true" allowexternalscript="true" type="BINDATA" />
+      <include name="IDR_TASK_MANAGER_COMMANDS_JS" file="resources\task_manager\commands.js" type="BINDATA" />
+      <!-- The following defines.js uses flattenhtml feature to remove the platform-dependent code at complie-time. -->
+      <include name="IDR_TASK_MANAGER_DEFINES_JS" file="resources\task_manager\defines.js" flattenhtml="true" type="BINDATA" />
       <include name="IDR_TASK_MANAGER_INCLUDES_JS" file="resources\task_manager\includes.js" type="BINDATA" />
+      <include name="IDR_TASK_MANAGER_PRELOAD_JS" file="resources\task_manager\preload.js" type="BINDATA" />
       <!-- The following main.js uses flattenhtml feature to remove the platform-dependent code at complie-time. -->
       <include name="IDR_TASK_MANAGER_JS" file="resources\task_manager\main.js" flattenhtml="true" type="BINDATA" />
       <include name="IDR_TASK_MANAGER_MEASURE_TIME_JS" file="resources\task_manager\measure_time.js" type="BINDATA" /> 
diff --git a/chrome/browser/resources/task_manager/commands.js b/chrome/browser/resources/task_manager/commands.js
new file mode 100644
index 0000000..803099b
--- /dev/null
+++ b/chrome/browser/resources/task_manager/commands.js
@@ -0,0 +1,59 @@
+// 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.
+
+TaskManagerCommands = {
+  /**
+   * Sends commands to kill selected processes.
+   */
+  killSelectedProcesses: function(uniqueIds) {
+    chrome.send('killProcesses', uniqueIds);
+  },
+
+  /**
+   * Sends command to initiate resource inspection.
+   */
+  inspect: function(uniqueId) {
+    chrome.send('inspect', [uniqueId]);
+  },
+
+  /**
+   * Sends command to kill a process.
+   */
+  openAboutMemory: function() {
+    chrome.send('openAboutMemory');
+  },
+
+  /**
+   * Sends command to disable taskmanager model.
+   */
+  disableTaskManager: function() {
+    chrome.send('disableTaskManager');
+  },
+
+  /**
+   * Sends command to enable taskmanager model.
+   */
+  enableTaskManager: function() {
+    chrome.send('enableTaskManager');
+  },
+
+  /**
+   * Sends command to activate a page.
+   */
+  activatePage: function(uniqueId) {
+    chrome.send('activatePage', [uniqueId]);
+  },
+
+  /**
+   * Sends command to enable or disable the given columns to update the data.
+   * @public
+   */
+  setUpdateColumn: function(columnId, isEnabled) {
+    chrome.send('setUpdateColumn', [columnId, isEnabled]);
+
+    // The 'title' column contains the icon.
+    if (columnId == 'title')
+      chrome.send('setUpdateColumn', ['icon', isEnabled]);
+  }
+};
diff --git a/chrome/browser/resources/task_manager/defines.js b/chrome/browser/resources/task_manager/defines.js
new file mode 100644
index 0000000..bcffd38
--- /dev/null
+++ b/chrome/browser/resources/task_manager/defines.js
@@ -0,0 +1,45 @@
+// 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.
+
+/**
+ * Whether task manager shows 'Private Memory' instead of 'Phsical Memory'.
+ * @const
+ */
+var USE_PRIVATE_MEM = false;
+// <if expr="(is_linux or pp_ifdef('chromeos'))">
+// On Linux and ChromeOS, this is true because calculating Phsical Memory is
+// slow.
+USE_PRIVATE_MEM = true;
+// </if>
+
+/*
+ * Default columns (column_id, label_id, width, is_default)
+ * @const
+ */
+var DEFAULT_COLUMNS = [
+  ['title', 'pageColumn', 300, true],
+  ['profileName', 'profileNameColumn', 120, false],
+  ['physicalMemory', 'physicalMemColumn', 80, !USE_PRIVATE_MEM],
+  ['sharedMemory', 'sharedMemColumn', 80, false],
+  ['privateMemory', 'privateMemColumn', 80, USE_PRIVATE_MEM],
+  ['cpuUsage', 'cpuColumn', 80, true],
+  ['networkUsage', 'netColumn', 85, true],
+  ['processId', 'processIDColumn', 100, false],
+  ['webCoreImageCacheSize', 'webcoreImageCacheColumn', 120, false],
+  ['webCoreScriptsCacheSize', 'webcoreScriptsCacheColumn', 120, false],
+  ['webCoreCSSCacheSize', 'webcoreCSSCacheColumn', 120, false],
+  ['fps', 'fpsColumn', 50, true],
+  ['sqliteMemoryUsed', 'sqliteMemoryUsedColumn', 80, false],
+  ['goatsTeleported', 'goatsTeleportedColumn', 80, false],
+  ['v8MemoryAllocatedSize', 'javascriptMemoryAllocatedColumn', 120, false],
+];
+
+/*
+ * Height of each tasks. It is 20px, which is also defined in CSS.
+ * @const
+ */
+var HEIGHT_OF_TASK = 20;
+
+var COMMAND_CONTEXTMENU_COLUMN_PREFIX = 'columnContextMenu';
+var COMMAND_CONTEXTMENU_TABLE_PREFIX = 'tableContextMenu';
diff --git a/chrome/browser/resources/task_manager/main.html b/chrome/browser/resources/task_manager/main.html
index cd04ff7..8d9a0a4 100644
--- a/chrome/browser/resources/task_manager/main.html
+++ b/chrome/browser/resources/task_manager/main.html
@@ -10,6 +10,9 @@
     <title i18n-content="title"></title>
     <script src="measure_time.js"></script>
 
+    <script src="commands.js"></script>
+    <script src="defines.js"></script>
+    <script src="preload.js"></script>
     <script src="includes.js"></script>
     <script src="main.js"></script>
     <script src="chrome://tasks/strings.js"></script>
diff --git a/chrome/browser/resources/task_manager/main.js b/chrome/browser/resources/task_manager/main.js
index b4cb77b..85b6489 100644
--- a/chrome/browser/resources/task_manager/main.js
+++ b/chrome/browser/resources/task_manager/main.js
@@ -7,45 +7,6 @@ function TaskManager() { }
 
 cr.addSingletonGetter(TaskManager);
 
-/**
- * Whether task manager shows 'Private Memory' instead of 'Phsical Memory'.
- * On Linux and ChromeOS, this is true because calculating Phsical Memory is
- * slow.
- * @const
- */
-var USE_PRIVATE_MEM = cr.isLinux || cr.isChromeOS;
-
-/*
- * Default columns (column_id, label_id, width, is_default)
- * @const
- */
-var DEFAULT_COLUMNS = [
-    ['title', 'pageColumn', 300, true],
-    ['profileName', 'profileNameColumn', 120, false],
-    ['physicalMemory', 'physicalMemColumn', 80, !USE_PRIVATE_MEM],
-    ['sharedMemory', 'sharedMemColumn', 80, false],
-    ['privateMemory', 'privateMemColumn', 80, USE_PRIVATE_MEM],
-    ['cpuUsage', 'cpuColumn', 80, true],
-    ['networkUsage', 'netColumn', 85, true],
-    ['processId', 'processIDColumn', 100, false],
-    ['webCoreImageCacheSize', 'webcoreImageCacheColumn', 120, false],
-    ['webCoreScriptsCacheSize', 'webcoreScriptsCacheColumn', 120, false],
-    ['webCoreCSSCacheSize', 'webcoreCSSCacheColumn', 120, false],
-    ['fps', 'fpsColumn', 50, true],
-    ['sqliteMemoryUsed', 'sqliteMemoryUsedColumn', 80, false],
-    ['goatsTeleported', 'goatsTeleportedColumn', 80, false],
-    ['v8MemoryAllocatedSize', 'javascriptMemoryAllocatedColumn', 120, false],
-];
-
-/*
- * Height of each tasks. It is 20px, which is also defined in CSS.
- * @const
- */
-var HEIGHT_OF_TASK = 20;
-
-var COMMAND_CONTEXTMENU_COLUMN_PREFIX = 'columnContextMenu';
-var COMMAND_CONTEXTMENU_TABLE_PREFIX = 'tableContextMenu';
-
 var localStrings = new LocalStrings();
 
 TaskManager.prototype = {
@@ -55,7 +16,7 @@ TaskManager.prototype = {
   onClose: function () {
     if (!this.disabled_) {
       this.disabled_ = true;
-      this.disableTaskManager();
+      commands.disableTaskManager();
     }
   },
 
@@ -108,54 +69,7 @@ TaskManager.prototype = {
       uniqueIds.push(task['uniqueId'][0]);
     }
 
-    chrome.send('killProcesses', uniqueIds);
-  },
-
-  /**
-   * Sends command to initiate resource inspection.
-   */
-  inspect: function (uniqueId) {
-    chrome.send('inspect', [uniqueId]);
-  },
-
-  /**
-   * Sends command to kill a process.
-   */
-  openAboutMemory: function () {
-    chrome.send('openAboutMemory');
-  },
-
-  /**
-   * Sends command to disable taskmanager model.
-   */
-  disableTaskManager: function () {
-    chrome.send('disableTaskManager');
-  },
-
-  /**
-   * Sends command to enable taskmanager model.
-   */
-  enableTaskManager: function () {
-    chrome.send('enableTaskManager');
-  },
-
-  /**
-   * Sends command to activate a page.
-   */
-  activatePage: function (uniqueId) {
-    chrome.send('activatePage', [uniqueId]);
-  },
-
-  /**
-   * Sends command to enable or disable the given columns to update the data.
-   * @public
-   */
-  setUpdateColumn: function(columnId, isEnabled) {
-    chrome.send('setUpdateColumn', [columnId, isEnabled]);
-
-    // The 'title' column contains the icon.
-    if (columnId == 'title')
-      chrome.send('setUpdateColumn', ['icon', isEnabled]);
+    commands.killSelectedProcesses(uniqueIds);
   },
 
   /**
@@ -177,7 +91,6 @@ TaskManager.prototype = {
     this.dialogDom_ = dialogDom;
     this.document_ = dialogDom.ownerDocument;
 
-    this.pendingTaskUpdates_ = [];
     this.is_column_shown_ = [];
     for (var i = 0; i < DEFAULT_COLUMNS.length; i++) {
       this.is_column_shown_[i] = DEFAULT_COLUMNS[i][3];
@@ -235,11 +148,14 @@ TaskManager.prototype = {
     // enableTaskManager() must be called after enabling columns using
     // setUpdateColumn() because it is necessary to tell the handler which
     // columns to display before updating.
-    this.enableTaskManager();
+    commands.enableTaskManager();
 
     // Populate the static localized strings.
     i18nTemplate.process(this.document_, templateData);
 
+    if (taskmanagerForceUpdate)
+      this.processTaskChange(pendingTaskUpdates);
+
     measureTime.recordInterval('Load.DOM');
     measureTime.recordInterval('Load.Total');
 
@@ -265,8 +181,7 @@ TaskManager.prototype = {
 
     $('kill-process').addEventListener('click',
                                        this.killSelectedProcesses.bind(this));
-    $('about-memory-link').addEventListener('click',
-                                            this.openAboutMemory.bind(this));
+    $('about-memory-link').addEventListener('click', commands.openAboutMemory);
   },
 
   /**
@@ -315,8 +230,6 @@ TaskManager.prototype = {
       table_columns.push(new cr.ui.table.TableColumn(columnId,
                                                      this.localized_column_[i],
                                                      column[2]));
-
-      this.setUpdateColumn(columnId, true);
     }
 
     for (var i = 0; i < table_columns.length; i++) {
@@ -392,9 +305,6 @@ TaskManager.prototype = {
 
     this.document_.body.appendChild(this.tableContextMenu_);
     cr.ui.Menu.decorate(this.tableContextMenu_);
-
-    this.setUpdateColumn('canInspect', true);
-    this.setUpdateColumn('canActivate', true);
   },
 
   initTable_: function () {
@@ -594,7 +504,7 @@ TaskManager.prototype = {
                                                     this.tableContextMenu_);
 
           label.addEventListener('dblclick', (function(uniqueId) {
-              this.activatePage(uniqueId);
+              commands.activatePage(uniqueId);
           }).bind(this, entry['uniqueId'][i]));
 
           label.data = entry;
@@ -619,31 +529,32 @@ TaskManager.prototype = {
   },
 
   /**
-   * Updates the task list with the |this.pendingTaskUpdates_| queue.
+   * Updates the task list with the |pendingTaskUpdates| queue.
    * This function does nothing if it is less than 900 ms after last update. In
    * such case, the queue remains at that time, and it will update the list
    * at next change event or at periodical every-second reflesh.
    * @private
    */
-  processTaskChange_: function() {
+  processTaskChange: function(pendingTaskUpdates) {
     var now = +new Date();  // Casts to integer and gets milliseconds.
 
     // If it is less than 900 ms after last update, the list isn't updated now.
     // 900 ms is a time to allow at least periodical reflesh of every second.
-    if ((now - this.lastUpdate_) < 900)
+    if (!taskmanagerForceUpdate && (now - this.lastUpdate_) < 900)
       return;
     this.lastUpdate_ = now;
+    taskmanagerForceUpdate = false;
 
     var dm = this.dataModel_;
     var sm = this.selectionModel_;
-    if (!dm || !sm || this.pendingTaskUpdates_.length == 0)
+    if (!dm || !sm || pendingTaskUpdates.length == 0)
       return;
 
     this.table_.list.startBatchUpdates();
     sm.beginChange();
 
     var task;
-    while (task = this.pendingTaskUpdates_.shift()) {
+    while (task = pendingTaskUpdates.shift()) {
       var type = task.type;
       var start = task.start;
       var length = task.length;
@@ -685,24 +596,6 @@ TaskManager.prototype = {
     this.table_.list.endBatchUpdates();
   },
 
-  onTaskChange: function(start, length, tasks) {
-    this.pendingTaskUpdates_.push(
-          {type:'change', start:start, length:length, tasks:tasks});
-    this.processTaskChange_();
-  },
-
-  onTaskAdd: function(start, length, tasks) {
-    this.pendingTaskUpdates_.push(
-        {type:'add', start:start, length:length, tasks:tasks});
-    this.processTaskChange_();
-  },
-
-  onTaskRemove: function(start, length, tasks) {
-    this.pendingTaskUpdates_.push(
-        {type:'remove', start:start, length:length, tasks:tasks});
-    this.processTaskChange_();
-  },
-
   /**
    * Respond to a command being executed.
    */
@@ -722,9 +615,9 @@ TaskManager.prototype = {
         return;
 
       if (sub_command == 'inspect')
-        this.inspect(target_unique_id);
+        commands.inspect(target_unique_id);
       else if (sub_command == 'activate')
-        this.activatePage(target_unique_id);
+        commands.activatePage(target_unique_id);
 
       this.currentContextMenuTarget_ = undefined;
     }
@@ -807,14 +700,15 @@ TaskManager.prototype = {
         this.table_.columnModel = this.columnModel_;
         this.table_.redraw();
 
-        this.setUpdateColumn(column[0], checked);
+        commands.setUpdateColumn(column[0], checked);
         return;
       }
     }
   },
 };
 
-var taskmanager = TaskManager.getInstance();
+// |taskmanager| has been declared in preload.js.
+taskmanager = TaskManager.getInstance();
 
 function init() {
   var params = parseQueryParams(window.location);
@@ -825,30 +719,5 @@ function init() {
   taskmanager.initialize(document.body, opt);
 }
 
-function onClose() {
-  return taskmanager.onClose();
-}
-
 document.addEventListener('DOMContentLoaded', init);
-document.addEventListener('Close', onClose);
-
-function taskAdded(start, length, tasks) {
-  // Sometimes this can get called too early.
-  if (!taskmanager)
-    return;
-  taskmanager.onTaskAdd(start, length, tasks);
-}
-
-function taskChanged(start, length,tasks) {
-  // Sometimes this can get called too early.
-  if (!taskmanager)
-    return;
-  taskmanager.onTaskChange(start, length, tasks);
-}
-
-function taskRemoved(start, length) {
-  // Sometimes this can get called too early.
-  if (!taskmanager)
-    return;
-  taskmanager.onTaskRemove(start, length);
-}
+document.addEventListener('Close', taskmanager.onClose.bind(taskmanager));
diff --git a/chrome/browser/resources/task_manager/preload.js b/chrome/browser/resources/task_manager/preload.js
new file mode 100644
index 0000000..9afd4b8
--- /dev/null
+++ b/chrome/browser/resources/task_manager/preload.js
@@ -0,0 +1,66 @@
+// 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.
+
+// Defines global variables.
+var commands = TaskManagerCommands;
+var taskmanager = undefined;  // This will be instantiated in main.js.
+var taskmanagerForceUpdate = false;
+var pendingTaskUpdates = [];
+
+/**
+ * Invoked when new items are added.
+ */
+function taskAdded(start, length, tasks) {
+  pendingTaskUpdates.push(
+      {type: 'add', start: start, length: length, tasks: tasks});
+
+  // Sometimes this can get called too early.
+  if (!taskmanager)
+    return;
+  taskmanager.processTaskChange(pendingTaskUpdates);
+}
+
+/**
+ * Invoked when a range of items has changed.
+ */
+function taskChanged(start, length, tasks) {
+  pendingTaskUpdates.push(
+      {type: 'change', start: start, length: length, tasks: tasks});
+
+  if (taskmanager)
+    taskmanager.processTaskChange(pendingTaskUpdates);
+}
+
+/**
+ * Invoked when a range of items has been removed.
+ */
+function taskRemoved(start, length) {
+  pendingTaskUpdates.push(
+      {type: 'remove', start: start, length: length, tasks: undefined});
+
+  if (taskmanager)
+    taskmanager.processTaskChange(pendingTaskUpdates);
+}
+
+/**
+ * Invoked when the initialization of the model has been finished and periodical
+ * updates is started.
+ */
+function onReadyPeriodicalUpdate() {
+  taskmanagerForceUpdate = true;
+
+  if (taskmanager)
+    taskmanager.processTaskChange(pendingTaskUpdates);
+}
+
+// Enable the taskmanager model before the loading of scripts.
+(function () {
+  for (var i = 0; i < DEFAULT_COLUMNS.length; i++) {
+    if (DEFAULT_COLUMNS[i][3])
+      commands.setUpdateColumn(DEFAULT_COLUMNS[i][0], true);
+  }
+  commands.setUpdateColumn('canInspect', true);
+  commands.setUpdateColumn('canActivate', true);
+  commands.enableTaskManager();
+})();
diff --git a/chrome/browser/task_manager/task_manager.cc b/chrome/browser/task_manager/task_manager.cc
index 36bf397..bcb965c 100644
--- a/chrome/browser/task_manager/task_manager.cc
+++ b/chrome/browser/task_manager/task_manager.cc
@@ -638,6 +638,11 @@ void TaskManagerModel::StartUpdating() {
        iter != providers_.end(); ++iter) {
     (*iter)->StartUpdating();
   }
+
+  if (!resources_.empty()) {
+    FOR_EACH_OBSERVER(TaskManagerModelObserver, observer_list_,
+                      OnReadyPeriodicalUpdate());
+  }
 }
 
 void TaskManagerModel::StopUpdating() {
diff --git a/chrome/browser/task_manager/task_manager.h b/chrome/browser/task_manager/task_manager.h
index e3686fb..37930d0 100644
--- a/chrome/browser/task_manager/task_manager.h
+++ b/chrome/browser/task_manager/task_manager.h
@@ -1,4 +1,4 @@
-// Copyright (c) 2011 The Chromium Authors. All rights reserved.
+// 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.
 
@@ -253,6 +253,11 @@ class TaskManagerModelObserver {
 
   // Invoked when a range of items has been removed.
   virtual void OnItemsRemoved(int start, int length) = 0;
+
+  // Invoked when the initialization of the model has been finished and
+  // periodical updates is started. The first periodical update will be done
+  // in a few seconds. (depending on platform)
+  virtual void OnReadyPeriodicalUpdate() {}
 };
 
 // The model that the TaskManager is using.
diff --git a/chrome/browser/ui/webui/task_manager_handler.cc b/chrome/browser/ui/webui/task_manager_handler.cc
index 1a72f501..71d76ad 100644
--- a/chrome/browser/ui/webui/task_manager_handler.cc
+++ b/chrome/browser/ui/webui/task_manager_handler.cc
@@ -508,3 +508,8 @@ void TaskManagerHandler::OnGroupRemoved(const int group_start,
   if (is_enabled_ && is_alive())
     web_ui()->CallJavascriptFunction("taskRemoved", start_value, length_value);
 }
+
+void TaskManagerHandler::OnReadyPeriodicalUpdate() {
+  if (is_enabled_ && is_alive())
+    web_ui()->CallJavascriptFunction("onReadyPeriodicalUpdate");
+}
diff --git a/chrome/browser/ui/webui/task_manager_handler.h b/chrome/browser/ui/webui/task_manager_handler.h
index 0a00765..52ae4905 100644
--- a/chrome/browser/ui/webui/task_manager_handler.h
+++ b/chrome/browser/ui/webui/task_manager_handler.h
@@ -33,6 +33,10 @@ class TaskManagerHandler : public content::WebUIMessageHandler,
   // Invoked when a range of items has been removed.
   virtual void OnItemsRemoved(int start, int length) OVERRIDE;
 
+  // Invoked when the initialization of the model has been finished and
+  // periodic updates is started.
+  virtual void OnReadyPeriodicalUpdate() OVERRIDE;
+
   // WebUIMessageHandler implementation.
   virtual void RegisterMessages() OVERRIDE;
 
diff --git a/chrome/browser/ui/webui/task_manager_ui.cc b/chrome/browser/ui/webui/task_manager_ui.cc
index 10b2661..8ddea36 100644
--- a/chrome/browser/ui/webui/task_manager_ui.cc
+++ b/chrome/browser/ui/webui/task_manager_ui.cc
@@ -64,7 +64,10 @@ ChromeWebUIDataSource* CreateTaskManagerUIHTMLSource() {
   source->AddLocalizedString("activate", IDS_TASK_MANAGER_ACTIVATE);
   source->set_json_path("strings.js");
   source->add_resource_path("main.js", IDR_TASK_MANAGER_JS);
+  source->add_resource_path("commands.js", IDR_TASK_MANAGER_COMMANDS_JS);
+  source->add_resource_path("defines.js", IDR_TASK_MANAGER_DEFINES_JS);
   source->add_resource_path("includes.js", IDR_TASK_MANAGER_INCLUDES_JS);
+  source->add_resource_path("preload.js", IDR_TASK_MANAGER_PRELOAD_JS);
   source->add_resource_path("measure_time.js",
                             IDR_TASK_MANAGER_MEASURE_TIME_JS);
   source->add_resource_path("measure_time_end.js",