TaskManager: Added "inspect" on context-menu on the task list.

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 179 matching lines @@
 
     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.initColumnMenu_();
+    this.initTableMenu_();
     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 41 matching lines @@
 
     cr.ui.contextMenuHandler.addContextMenuProperty(this.table_.header);
     this.table_.header.contextMenu = 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');
+
+    // Creates command element to receive event.
+    var command = this.document_.createElement('command');
+    command.id = 'tableContextMenu-inspect';
+    cr.ui.Command.decorate(command);
+    this.table_menu_commands_[command.id] = command;
+    this.commandsElement_.appendChild(command);
+
+    // Creates menuitem element.
+    var item = this.document_.createElement('menuitem');
+    item.command = command;
+    command.menuitem = item;
+    var localized_label = localStrings.getString('INSPECT');
+    item.textContent = (localized_label != "") ? localized_label : "Inspect";
+    this.tableContextMenu_.appendChild(item);
+
+    this.document_.body.appendChild(this.tableContextMenu_);
+    cr.ui.Menu.decorate(this.tableContextMenu_);
+  },
+
   initTable_: function () {
     if (!this.dataModel_ || !this.selectionModel_ || !this.columnModel_) {
       console.log('ERROR: some models are not defined.');
       return;
     }
 
     this.table_ = this.dialogDom_.querySelector('.detail-table');
     cr.ui.Table.decorate(this.table_);
 
     this.table_.dataModel = this.dataModel_;
     this.table_.selectionModel = this.selectionModel_;
     this.table_.columnModel = this.columnModel_;
 
     // Expands height of row when a process has some tasks.
     this.table_.autoExpands = true;
 
+    this.table_.list.addEventListener('contextmenu',
+                                      this.onTableContextMenuOpened_.bind(this),
+                                      true);
+
     // Sets custom row render function.
     this.table_.setRenderFunction(this.renderRow_.bind(this));
   },
 
   renderRow_: function(dataItem, table) {
     var cm = table.columnModel;
     var listItem = new cr.ui.ListItem({label: ''});
 
     listItem.className = 'table-row';
     if (this.opt_.isBackgroundMode && dataItem.isBackgroundResource)
       listItem.className += ' table-background-row';
 
     for (var i = 0; i < cm.size; i++) {
       var cell = document.createElement('div');
       cell.style.width = cm.getWidth(i) + '%';
       cell.className = 'table-row-cell';
       cell.appendChild(
           cm.getRenderFunction(i).call(null, dataItem, cm.getId(i), table));
 
       listItem.appendChild(cell);
     }
+    listItem.data = dataItem;
 
     return listItem;
   },
 
   renderColumn_: function(entry, columnId, table) {
     var container = this.document_.createElement('div');
     container.id = 'detail-container-' + columnId + '-pid' + entry.processId;
     container.className = 'detail-container-' + columnId;
 
     if (entry[columnId]) {
       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_;
+
+          label.data = entry;
+          label.index_in_group = i;
         } else {
           label.textContent = entry[columnId][i];
         }
         label.id = 'detail-' + columnId + '-pid' + entry.processId + '-' + i;
         label.className = 'detail-' + columnId + ' pid' + entry.processId;
         container.appendChild(label);
       }
     }
     return container;
   },
@@ skipping 35 matching lines @@
   },
 
   /**
    * Respond to a command being executed.
    */
   onCommand_: function(event) {
     var command = event.command;
     if (command.id.substr(0, 18) == 'columnContextMenu-') {
       console.log(command.id.substr(18));
       this.onColumnContextMenu_(command.id.substr(18), command);
+    } else if (command.id == 'tableContextMenu-inspect') {
+      var contextMenuTarget = this.currentContextMenuTarget_;
+      if (contextMenuTarget) {
+        this.inspect(contextMenuTarget);
+        this.currentContextMenuTarget_ = undefined;
+      }
     }
   },
 
   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) {
+    var command = this.table_menu_commands_['tableContextMenu-inspect'];
+    var menuItem = command.menuitem;
+
+    // Disabled by default.
+    menuItem.disabled = true;
+    this.currentContextMenuTarget_ = undefined;
+
+    var target = e.target;
+    var classes = target.className.split(" ");

[pfeldman1, 2011/10/31 08:17:41]

var classes = target.classList; (new HTML5 feature)

+    while (target && classes.indexOf('detail-title') == -1) {
+      target = target.parentNode;
+      classes = target.className.split(" ");
+    }
+
+    if (!target)
+      return;
+
+    var index_in_group = target.index_in_group;
+
+    var canInspect = target.data['canInspect'][index_in_group];
+    if (canInspect) {
+      menuItem.disabled = false;
+      this.currentContextMenuTarget_ =
+          target.data['uniqueId'][index_in_group];
+    }
+  },
+
   onColumnContextMenu_: function(id, command) {
     var menuitem = command.menuitem;
     var checked_item_count = 0;
     var is_uncheck = 0;
 
     // Leaves a item visible when user tries making invisible but it is the
     // last one.
     for (var i = 0; i < DEFAULT_COLUMNS.length; i++) {
       var column = DEFAULT_COLUMNS[i];
       if (column[0] == id && this.is_column_shown_[i]) {
@@ skipping 53 matching lines @@
   taskmanager.onTaskChange(start, length, tasks);
 }
 
 function taskRemoved(start, length) {
   // Sometimes this can get called too early.
   if (!taskmanager)
     return;
   taskmanager.onTaskRemove(start, length);
 }