WebUI TaskManager: Optimize initialization taskmanager and loading scripts.

BUG=104136
TEST=manual on linux


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

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

6 files changed, 101 insertions, 70 deletions

diff --git a/chrome/browser/browser_resources.grd b/chrome/browser/browser_resources.grd
index 34b3d19..a23f49a 100644
--- a/chrome/browser/browser_resources.grd
+++ b/chrome/browser/browser_resources.grd
@@ -111,9 +111,7 @@
       <include name="IDR_SYNC_SETTING_UP_HTML" file="sync\resources\setting_up.html" flattenhtml="true" type="BINDATA" />
       <include name="IDR_SYNC_SETUP_DONE_HTML" file="sync\resources\setup_done.html" flattenhtml="true" type="BINDATA" />
       <include name="IDR_SYNC_SETUP_FLOW_HTML" file="sync\resources\setup_flow.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_INCLUDES_JS" file="resources\task_manager\includes.js" type="BINDATA" />
-      <include name="IDR_TASK_MANAGER_JS" file="resources\task_manager\main.js" type="BINDATA" />
+      <include name="IDR_TASK_MANAGER_HTML" file="resources\task_manager\main.html" flattenhtml="true" type="BINDATA" />
       <include name="IDR_TRACING_HTML" file="resources\tracing.html" flattenhtml="true" allowexternalscript="true" type="BINDATA" />
       <include name="IDR_TRACING_JS" file="resources\tracing.js" flattenhtml="true" type="BINDATA" />
       <include name="IDR_TRANSLATE_JS" file="resources\translate.js" type="BINDATA" />
diff --git a/chrome/browser/resources/task_manager/includes.js b/chrome/browser/resources/task_manager/includes.js
index 75708b1..7deebfd 100644
--- a/chrome/browser/resources/task_manager/includes.js
+++ b/chrome/browser/resources/task_manager/includes.js
@@ -2,44 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-// This script includes additional resources via document.write(). Hence, it
-// must be a separate script file loaded before other scripts which would
-// reference the resources.
-
-var css = [
-  'chrome_shared.css',
-  'list.css',
-  'table.css',
-  'menu.css',
-  'button.css',
-];
+// This script loads additional scripts after initialization of task manager.
 
 var script = [
-  'local_strings.js',
-  'i18n_template.js',
-
-  'util.js',
-  'cr.js',
-  'cr/ui.js',
-  'cr/event_target.js',
-  'cr/ui/array_data_model.js',
-  'cr/ui/list_item.js',
-  'cr/ui/list_selection_model.js',
-  'cr/ui/list_single_selection_model.js',
-  'cr/ui/list_selection_controller.js',
-  'cr/ui/list.js',
-
-  'cr/ui/splitter.js',
-  'cr/ui/table/table_splitter.js',
-
-  'cr/ui/table/table_column.js',
-  'cr/ui/table/table_column_model.js',
-  'cr/ui/table/table_header.js',
-  'cr/ui/table/table_list.js',
-  'cr/ui/table.js',
-
-  'cr/ui/grid.js',
-
   'cr/ui/command.js',
   'cr/ui/position_util.js',
   'cr/ui/menu_item.js',
@@ -47,20 +12,30 @@ var script = [
   'cr/ui/context_menu_handler.js',
 ];
 
-(function() {
+/**
+ * Loads delayed scripts.
+ * This function is called by TaskManager::initalize() in main.js.
+ */
+function loadDelayedIncludes(taskmanager) {
   // Switch to 'test harness' mode when loading from a file url.
   var isHarness = document.location.protocol == 'file:';
 
   // In test harness mode we load resources from relative dirs.
   var prefix = isHarness ? './shared/' : 'chrome://resources/';
 
-  for (var i = 0; i < css.length; ++i) {
-    document.write('<link href="' + prefix + 'css/' + css[i] +
-                   '" rel="stylesheet"></link>');
-  }
+  // Number of remaining scripts to load.
+  var remain = script.length;
 
+  // Waits for initialization of task manager.
   for (var i = 0; i < script.length; ++i) {
-    document.write('<script src="' + prefix + 'js/' + script[i] +
-                   '"><\/script>');
+    var s = document.createElement('script');
+    s.onload = function(e) {
+      if (!--remain)
+        taskmanager.delayedInitialize();
+    };
+    s.type = 'text/javascript';
+    s.src = prefix + 'js/' + script[i];
+    s.defer = 'defer';
+    document.body.appendChild(s);
   }
-})();
+}
diff --git a/chrome/browser/resources/task_manager/main.html b/chrome/browser/resources/task_manager/main.html
index 20bc62f..a8705ba 100644
--- a/chrome/browser/resources/task_manager/main.html
+++ b/chrome/browser/resources/task_manager/main.html
@@ -8,10 +8,47 @@
   <head>
     <meta charset="utf-8">
     <title i18n-content="title"></title>
-    <script src="chrome://tasks/includes.js"></script>
-    <script src="chrome://tasks/main.js"></script>
+
+    <link rel="stylesheet" href="../shared/css/chrome_shared.css"></link>
+    <link rel="stylesheet" href="../shared/css/list.css"></link>
+    <link rel="stylesheet" href="../shared/css/table.css"></link>
+    <link rel="stylesheet" href="../shared/css/menu.css"></link>
+    <link rel="stylesheet" href="../shared/css/button.css"></link>
+    <link rel="stylesheet" href="task_manager.css"></link>
+
+    <!-- strings.js must be specified as full path, since it will be genereted
+      -- in chrome/browser/ui/webui/task_manager_ui.cc dynamically.
+      -->
     <script src="chrome://tasks/strings.js"></script>
-    <link rel="stylesheet" href="task_manager.css">
+
+    <script src="../shared/js/local_strings.js"></script>
+    <script src="../shared/js/i18n_template.js"></script>
+
+    <script src="../shared/js/util.js"></script>
+    <script src="../shared/js/cr.js"></script>
+    <script src="../shared/js/cr/ui.js"></script>
+    <script src="../shared/js/cr/event_target.js"></script>
+    <script src="../shared/js/cr/ui/array_data_model.js"></script>
+    <script src="../shared/js/cr/ui/list_item.js"></script>
+    <script src="../shared/js/cr/ui/list_selection_model.js"></script>
+    <script src="../shared/js/cr/ui/list_selection_controller.js"></script>
+    <script src="../shared/js/cr/ui/list.js"></script>
+
+    <script src="../shared/js/cr/ui/splitter.js"></script>
+    <script src="../shared/js/cr/ui/table/table_splitter.js"></script>
+
+    <script src="../shared/js/cr/ui/table/table_column.js"></script>
+    <script src="../shared/js/cr/ui/table/table_column_model.js"></script>
+    <script src="../shared/js/cr/ui/table/table_header.js"></script>
+    <script src="../shared/js/cr/ui/table/table_list.js"></script>
+    <script src="../shared/js/cr/ui/table.js"></script>
+
+    <script src="main.js"></script>
+
+    <!-- Loads the other scripts. -->
+    <script src="includes.js"></script>
+
+  </head>
   </head>
   <body>
     <div class="dialog-title" i18n-content="title"
@@ -32,8 +69,6 @@
                 visibleif='this.opt_.isShowCloseButton'></button>
       </div>
     </div>
-    <script src="chrome://resources/js/i18n_template.js"></script>
-    <script src="chrome://resources/js/i18n_process.js"></script>
+    <script src="../shared/js/i18n_process.js"></script>
   </body>
 </html>
-
diff --git a/chrome/browser/resources/task_manager/main.js b/chrome/browser/resources/task_manager/main.js
index 5df154a..ab68bef 100644
--- a/chrome/browser/resources/task_manager/main.js
+++ b/chrome/browser/resources/task_manager/main.js
@@ -145,16 +145,17 @@ TaskManager.prototype = {
 
     this.opt_ = opt;
 
-    this.initialized_ = true;
     this.enableTaskManager();
 
     this.dialogDom_ = dialogDom;
     this.document_ = dialogDom.ownerDocument;
 
-    $('close-window').addEventListener('click', this.close.bind(this));
-    $('kill-process').addEventListener('click', this.killProcess.bind(this));
-    $('about-memory-link').addEventListener('click',
-                                            this.openAboutMemory.bind(this));
+    var ary = this.dialogDom_.querySelectorAll('[visibleif]');
+    for (var i = 0; i < ary.length; i++) {
+      var expr = ary[i].getAttribute('visibleif');
+      if (!eval(expr))
+        ary[i].hidden = true;
+    }
 
     this.is_column_shown_ = [];
     for (var i = 0; i < DEFAULT_COLUMNS.length; i++) {
@@ -203,17 +204,31 @@ TaskManager.prototype = {
       dm.setCompareFunction(column_id, compare_func);
     }
 
-    var ary = this.dialogDom_.querySelectorAll('[visibleif]');
-    for (var i = 0; i < ary.length; i++) {
-      var expr = ary[i].getAttribute('visibleif');
-      if (!eval(expr))
-        ary[i].hidden = true;
-    }
-
     this.initTable_();
+    this.initialized_ = true;
+
+    loadDelayedIncludes(this);
+  },
+
+  /**
+   * Additional initialization of taskmanager. This function is called when
+   * the loading of delayed scripts finished.
+   * @public
+   */
+  delayedInitialize: function () {
+    $('close-window').addEventListener('click', this.close.bind(this));
+    $('kill-process').addEventListener('click', this.killProcess.bind(this));
+    $('about-memory-link').addEventListener('click',
+                                            this.openAboutMemory.bind(this));
     this.initColumnMenu_();
     this.initTableMenu_();
-    this.table_.redraw();
+
+    if (this.delayedInitLabels_) {
+      while (this.delayedInitLabels_.length > 0)
+        this.delayedInitLabels_.pop().call();
+    }
+
+    this.isFinishedInitDelayed_ = true;
   },
 
   initColumnModel_: function () {
@@ -352,6 +367,8 @@ TaskManager.prototype = {
   },
 
   renderColumn_: function(entry, columnId, table) {
+    this.delayedInitLabels_ = [];
+
     var container = this.document_.createElement('div');
     container.id = 'detail-container-' + columnId + '-pid' + entry.processId;
     container.className = 'detail-container-' + columnId;
@@ -369,8 +386,15 @@ TaskManager.prototype = {
           text.textContent = entry['title'][i];
           label.appendChild(text);
 
-          cr.ui.contextMenuHandler.addContextMenuProperty(label);
-          label.contextMenu = this.tableContextMenu_;
+          var addContextMenu = function() {
+            cr.ui.contextMenuHandler.addContextMenuProperty(label);
+            label.contextMenu = this.tableContextMenu_;
+          };
+
+          if (this.isFinishedInitDelayed_)
+            addContextMenu.call(this);
+          else
+            this.delayedInitLabels_.push(addContextMenu.bind(this));
 
           label.addEventListener('dblclick', (function(uniqueId) {
               this.activatePage(uniqueId);
diff --git a/chrome/browser/ui/webui/chrome_url_data_manager_backend.cc b/chrome/browser/ui/webui/chrome_url_data_manager_backend.cc
index 5c3295a..7066eb1 100644
--- a/chrome/browser/ui/webui/chrome_url_data_manager_backend.cc
+++ b/chrome/browser/ui/webui/chrome_url_data_manager_backend.cc
@@ -63,6 +63,7 @@ class ChromeURLContentSecurityPolicyExceptionSet
     insert(chrome::kChromeUIDialogHost);
     insert(chrome::kChromeUIInputWindowDialogHost);
     insert(chrome::kChromeUINewTabHost);
+    insert(chrome::kChromeUITaskManagerHost);
 #if defined(OS_CHROMEOS)
     insert(chrome::kChromeUIMobileSetupHost);
     insert(chrome::kChromeUIOobeHost);
diff --git a/chrome/browser/ui/webui/task_manager_ui.cc b/chrome/browser/ui/webui/task_manager_ui.cc
index 0359b69..fe94bb6 100644
--- a/chrome/browser/ui/webui/task_manager_ui.cc
+++ b/chrome/browser/ui/webui/task_manager_ui.cc
@@ -60,8 +60,6 @@ ChromeWebUIDataSource* CreateTaskManagerUIHTMLSource() {
   source->AddLocalizedString("inspect", IDS_TASK_MANAGER_INSPECT);
   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("includes.js", IDR_TASK_MANAGER_INCLUDES_JS);
   source->set_default_resource(IDR_TASK_MANAGER_HTML);
 
   return source;