WebUI TaskManager: Delay scripts loading.

chrome/browser/resources/task_manager/main.js

 // Copyright (c) 2011 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.
 
 /** @constructor */
 function TaskManager() { }
 
 cr.addSingletonGetter(TaskManager);
 
 /*
@@ skipping 19 matching lines @@
 ];
 
 var COMMAND_CONTEXTMENU_COLUMN_PREFIX = 'columnContextMenu';
 var COMMAND_CONTEXTMENU_TABLE_PREFIX = 'tableContextMenu';
 
 var localStrings = new LocalStrings();
 
 TaskManager.prototype = {
   /**
    * Handle window close.
-   * @public
    */
   onClose: function () {
     if (!this.disabled_) {
       this.disabled_ = true;
       this.disableTaskManager();
     }
   },
 
   /**
    * Handle selection change.
    * This is also called when data of tasks are refleshed, even if selection
    * has not been changed.
-   * @public
    */
   onSelectionChange: function () {
     var sm = this.selectionModel_;
     var dm = this.dataModel_;
     var selectedIndexes = sm.selectedIndexes;
     var is_end_process_enabled = true;
     if (selectedIndexes.length == 0)
       is_end_process_enabled = false;
     for (var i = 0; i < selectedIndexes.length; i++) {
       var index = selectedIndexes[i];
       var task = dm.item(index);
       if (task['type'] == 'BROWSER')
         is_end_process_enabled = false;
     }
     if (this.is_end_process_enabled_ != is_end_process_enabled) {
       if (is_end_process_enabled)
         $('kill-process').removeAttribute("disabled");
       else
         $('kill-process').setAttribute("disabled", "true");
 
       this.is_end_process_enabled_ = is_end_process_enabled;
     }
   },
 
   /**
    * Closes taskmanager dialog.
    * After this function is called, onClose() will be called.
-   * @public
    */
   close: function () {
     window.close();
   },
 
   /**
    * Sends commands to kill selected processes.
-   * @public
    */
   killSelectedProcesses: function () {
     var selectedIndexes = this.selectionModel_.selectedIndexes;
     var dm = this.dataModel_;
     var uniqueIds = [];
     for (var i = 0; i < selectedIndexes.length; i++) {
       var index = selectedIndexes[i];
       var task = dm.item(index);
       uniqueIds.push(task['uniqueId'][0]);
     }
 
     chrome.send('killProcesses', uniqueIds);
   },
 
   /**
    * Sends command to initiate resource inspection.
-   * @public
    */
   inspect: function (uniqueId) {
     chrome.send('inspect', [uniqueId]);
   },
 
   /**
    * Sends command to kill a process.
-   * @public
    */
   openAboutMemory: function () {
     chrome.send('openAboutMemory');
   },
 
   /**
    * Sends command to disable taskmanager model.
-   * @public
    */
   disableTaskManager: function () {
     chrome.send('disableTaskManager');
   },
 
   /**
    * Sends command to enable taskmanager model.
-   * @public
    */
   enableTaskManager: function () {
     chrome.send('enableTaskManager');
   },
 
   /**
    * Sends command to activate a page.
-   * @public
    */
   activatePage: function (uniqueId) {
     chrome.send('activatePage', [uniqueId]);
   },
 
   /**
    * Initializes taskmanager.
-   * @public
    */
   initialize: function (dialogDom, opt) {
     if (!dialogDom) {
       console.log('ERROR: dialogDom is not defined.');
       return;
     }
 
+    measureTime.startInterval('Load.DOM');
+
     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.killSelectedProcesses.bind(this));
-    $('about-memory-link').addEventListener('click',
-                                            this.openAboutMemory.bind(this));
-
     this.is_column_shown_ = [];
     for (var i = 0; i < DEFAULT_COLUMNS.length; i++) {
       this.is_column_shown_[i] = DEFAULT_COLUMNS[i][3];
     }
 
     this.localized_column_ = [];
     for (var i = 0; i < DEFAULT_COLUMNS.length; i++) {
       var column_label_id = DEFAULT_COLUMNS[i][1];
       var localized_label = localStrings.getString(column_label_id);
       // Falls back to raw column_label_id if localized string is not defined.
       if (localized_label == "")
         localized_label = column_label_id;
 
       this.localized_column_[i] = localized_label;
     }
 
+    this.initElements_();
     this.initColumnModel_();
     this.selectionModel_ = new cr.ui.ListSelectionModel();
     this.dataModel_ = new cr.ui.ArrayDataModel([]);
 
     this.selectionModel_.addEventListener('change',
                                           this.onSelectionChange.bind(this));
 
     // Initializes compare functions for column sort.
     var dm = this.dataModel_;
     // Columns to sort by value instead of itself.
@@ skipping 11 matching lines @@
               var aValues = a[value_id];
               var bValues = b[value_id];
               var aValue = aValues && aValues[0] || 0;
               var bvalue = bValues && bValues[0] || 0;
               return dm.defaultValuesCompareFunction(aValue, bvalue);
           };
       }();
       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_();
+
+    // Populate the static localized strings.
+    i18nTemplate.process(this.document_, templateData);
+
+    measureTime.recordInterval('Load.DOM');
+    measureTime.recordInterval('Load.Total');
+
+    loadDelayedIncludes(this);
+  },
+
+  /**
+   * Initializes the visibilities and handlers of the elements.
+   * This method is called by initialize().

[arv (Not doing code reviews), 2012/01/17 21:47:06]

@private

[yoshiki, 2012/01/18 16:54:29]

Done.

+   */
+  initElements_: function() {
+    // <if expr="pp_ifdef('chromeos')">
+    // The elements 'dialog-title' and 'close-window' exist only on ChromeOS.
+    // This <if ... /if> section is removed while flattening HTML if chrome is
+    // built as Desktop Chrome.
+    if (!this.opt_['isShowTitle'])
+      $('dialog-title').style.display = 'none';
+    if (!this.opt_['isShowCloseButton'])
+      $('close-window').style.display = 'none';
+    $('close-window').addEventListener('click', this.close.bind(this));
+    // </if>
+
+    $('kill-process').addEventListener('click',
+                                       this.killSelectedProcesses.bind(this));
+    $('about-memory-link').addEventListener('click',
+                                            this.openAboutMemory.bind(this));
+  },
+
+  /**
+   * Additional initialization of taskmanager. This function is called when
+   * the loading of delayed scripts finished.
+   */
+  delayedInitialize: function() {
+    this.initColumnMenu_();
+    this.initTableMenu_();
+
+    var dm = this.dataModel_;
+    for (var i = 0; i < dm.length; i++) {
+      for (var j = 0; j < DEFAULT_COLUMNS.length; j++) {
+        var columnId = DEFAULT_COLUMNS[j][0];
+        var row = dm.item(i)[columnId];
+        for (var k = 0; k < row.length; k++) {
+          var processId = dm.item(i)['processId'][0];
+          var labelId = 'detail-' + columnId + '-pid' + processId + '-' + k;
+          var label = $(labelId);
+
+          // Initialize a context-menu, if the label exists and its context-
+          // menu is not initialized yet.
+          if (label && !label.contextMenu)
+            this.setContextMenu_(label, this.tableContextMenu_);
+        }
+      }
     }
 
-    this.initTable_();
-    this.initColumnMenu_();
-    this.initTableMenu_();
+    this.isFinishedInitDelayed_ = true;
     this.table_.redraw();
   },
 
   initColumnModel_: function () {
     var table_columns = new Array();
     for (var i = 0; i < DEFAULT_COLUMNS.length; i++) {
       if (!this.is_column_shown_[i])
         continue;
 
       var column = DEFAULT_COLUMNS[i];
@@ skipping 32 matching lines @@
       command.menuitem = item;
       item.textContent = this.localized_column_[i];
       if (this.is_column_shown_[i])
         item.setAttributeNode(this.document_.createAttribute("checked"));
       this.columnSelectContextMenu_.appendChild(item);
     }
 
     this.document_.body.appendChild(this.columnSelectContextMenu_);
     cr.ui.Menu.decorate(this.columnSelectContextMenu_);
 
-    cr.ui.contextMenuHandler.addContextMenuProperty(this.table_.header);
-    this.table_.header.contextMenu = this.columnSelectContextMenu_;
-
-    cr.ui.contextMenuHandler.addContextMenuProperty(this.table_.list);
-    this.table_.list.contextMenu = this.columnSelectContextMenu_;
+    this.setContextMenu_(this.table_.header, this.columnSelectContextMenu_);
+    this.setContextMenu_(this.table_.list, this.columnSelectContextMenu_);
 
     this.document_.addEventListener('command', this.onCommand_.bind(this));
     this.document_.addEventListener('canExecute',
                                     this.onCommandCanExecute_.bind(this));
-
   },
 
   initTableMenu_: function () {
     this.table_menu_commands_ = [];
     this.tableContextMenu_ = this.document_.createElement('menu');
 
     var addMenuItem = function (tm, command_id, string_id, default_label) {
       // Creates command element to receive event.
       var command = tm.document_.createElement('command');
       command.id = COMMAND_CONTEXTMENU_TABLE_PREFIX + '-' + command_id;
@@ skipping 56 matching lines @@
       cell.appendChild(
           cm.getRenderFunction(i).call(null, dataItem, cm.getId(i), table));
 
       listItem.appendChild(cell);
     }
     listItem.data = dataItem;
 
     return listItem;
   },
 
+  setContextMenu_: function(element, contextMenuElement) {

[arv (Not doing code reviews), 2012/01/17 21:47:06]

I've said this before but this is too hacky. How about adding a way to set the
context menu of any element in cr.ui.contextMenuHandler instead?

[yoshiki, 2012/01/18 16:54:29]

Thanks. Added cr.ui.contextMenuHandler.setContextMenu() instead of this.

On 2012/01/17 21:47:06, arv wrote:

+    if (!element.contextMenu) {
+      cr.ui.contextMenuHandler.addContextMenuProperty(element);
+      element.contextMenu = contextMenuElement;
+    }
+  },
+
   renderColumn_: function(entry, columnId, table) {
     var container = this.document_.createElement('div');
     container.className = 'detail-container-' + columnId;
 
     if (entry && entry[columnId]) {
       container.id = 'detail-container-' + columnId + '-pid' + entry.processId;
 
       for (var i = 0; i < entry[columnId].length; i++) {
         var label = document.createElement('div');
         if (columnId == 'title') {
           var image = this.document_.createElement('img');
           image.className = 'detail-title-image';
           image.src = entry['icon'][i];
           label.appendChild(image);
           var text = this.document_.createElement('div');
           text.className = 'detail-title-text';
           text.textContent = entry['title'][i];
           label.appendChild(text);
 
-          cr.ui.contextMenuHandler.addContextMenuProperty(label);
-          label.contextMenu = this.tableContextMenu_;
+          // Chech if the delayed scripts (included in includes.js) have been
+          // loaded or not. If the delayed scripts ware not loaded yet, a
+          // context menu could not be initialized. In such case, it will be
+          // initialized at delayedInitialize() just after loading of delayed
+          // scripts instead of here.
+          if (this.isFinishedInitDelayed_)
+            this.setContextMenu_(label, this.tableContextMenu_);

[arv (Not doing code reviews), 2012/01/17 21:47:06]

... something like:

cr.ui.contextMenuHandler.setContextMenu(label, menu)

[yoshiki, 2012/01/18 16:54:29]

Done.

 
           label.addEventListener('dblclick', (function(uniqueId) {
               this.activatePage(uniqueId);
           }).bind(this, entry['uniqueId'][i]));
 
           label.data = entry;
           label.index_in_group = i;
         } else {
           label.textContent = entry[columnId][i];
         }
@@ skipping 76 matching lines @@
 
   onCommandCanExecute_: function(event) {
     event.canExecute = true;
   },
 
   /**
    * Store resourceIndex of target resource of context menu, because resource
    * will be replaced when it is refleshed.
    */
   onTableContextMenuOpened_: function (e) {
+    if (!this.isFinishedInitDelayed_)
+      return;
+
     var mc = this.table_menu_commands_;
     var inspect_menuitem =
         mc[COMMAND_CONTEXTMENU_TABLE_PREFIX + '-inspect'].menuitem;
     var activate_menuitem =
         mc[COMMAND_CONTEXTMENU_TABLE_PREFIX + '-activate'].menuitem;
 
     // Disabled by default.
     inspect_menuitem.disabled = true;
     activate_menuitem.disabled = true;
 
@@ skipping 87 matching lines @@
     return;
   taskmanager.onTaskChange(start, length, tasks);
 }
 
 function taskRemoved(start, length) {
   // Sometimes this can get called too early.
   if (!taskmanager)
     return;
   taskmanager.onTaskRemove(start, length);
 }
-