Allow hiding of sessions from Other Devices via context menu.

chrome/browser/resources/ntp4/other_sessions.js

 // 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.
 
 /**
  * @fileoverview The menu that shows tabs from sessions on other devices.
  */
 
 cr.define('ntp', function() {
   'use strict';
 
   var localStrings = new LocalStrings();
   var Menu = cr.ui.Menu;
   var MenuItem = cr.ui.MenuItem;
   var MenuButton = cr.ui.MenuButton;
   var OtherSessionsMenuButton = cr.ui.define('button');
 
   // Histogram buckets for UMA tracking of menu usage.
   var HISTOGRAM_EVENT = {
       INITIALIZED: 0,
       SHOW_MENU: 1,
       LINK_CLICKED: 2,
-      LINK_RIGHT_CLICKED: 3
+      LINK_RIGHT_CLICKED: 3,
+      SESSION_NAME_RIGHT_CLICKED: 4
   };
-  var HISTOGRAM_EVENT_LIMIT = HISTOGRAM_EVENT.LINK_RIGHT_CLICKED + 1;
+  var HISTOGRAM_EVENT_LIMIT = HISTOGRAM_EVENT.SESSION_NAME_RIGHT_CLICKED + 1;
 
   OtherSessionsMenuButton.prototype = {
     __proto__: MenuButton.prototype,
 
     decorate: function() {
       MenuButton.prototype.decorate.call(this);
       this.menu = new Menu;
       cr.ui.decorate(this.menu, Menu);
       this.menu.classList.add('footer-menu');
       this.menu.addEventListener('contextmenu',
                                  this.onContextMenu_.bind(this), true);
       document.body.appendChild(this.menu);
 
+      // Create the context menu that appears when the user right clicks
+      // on a device name.
+      this.deviceContextMenu_ = DeviceContextMenu.getInstance().menu;
+      document.body.appendChild(this.deviceContextMenu_);
+
       this.promoMessage_ = $('other-sessions-promo-template').cloneNode(true);
       this.promoMessage_.removeAttribute('id');  // Prevent a duplicate id.
 
       this.sessions_ = [];
       this.anchorType = cr.ui.AnchorType.ABOVE;
       this.invertLeftRight = true;
 
       this.recordUmaEvent_(HISTOGRAM_EVENT.INITIALIZED);
     },
 
@@ skipping 11 matching lines @@
      */
     recordUmaEvent_: function(eventId) {
       chrome.send('metricsHandler:recordInHistogram',
           ['NewTabPage.OtherSessionsMenu', eventId, HISTOGRAM_EVENT_LIMIT]);
     },
 
     /**
      * Handle a context menu event for an object in the menu's DOM subtree.
      */
     onContextMenu_: function(e) {
-      // Only record the action if it occurred in one of the menu items.
-      if (findAncestorByClass(e.target, 'footer-menu-item'))
+      // Only record the action if it occurred in one of the menu items or
+      // on one of the session headings.
+      if (findAncestorByClass(e.target, 'footer-menu-item')) {
         this.recordUmaEvent_(HISTOGRAM_EVENT.LINK_RIGHT_CLICKED);
+      } else if (findAncestorByClass(e.target, 'session-heading')) {
+        this.recordUmaEvent_(
+            HISTOGRAM_EVENT.SESSION_NAME_RIGHT_CLICKED);
+
+        // Let the context menu know which session it was invoked on,
+        // since they all share the same instance of the menu.
+        DeviceContextMenu.getInstance().setSessionTag(e.target.sessionTag_);
+      }
     },
 
     /**
+     * Hides the menu.
+     * @override
+     */
+    hideMenu: function() {
+      // Don't hide if the device context menu is currently showing.
+      if (cr.ui.contextMenuHandler.menu != this.deviceContextMenu_)
+        MenuButton.prototype.hideMenu.call(this);
+    },
+
+    /**
      * Shows the menu, first rebuilding it if necessary.
      * TODO(estade): the right of the menu should align with the right of the
      * button.
      * @override
      */
     showMenu: function() {
       if (this.sessions_.length == 0)
         chrome.send('getForeignSessions');
       this.recordUmaEvent_(HISTOGRAM_EVENT.SHOW_MENU);
       MenuButton.prototype.showMenu.call(this);
@@ skipping 27 matching lines @@
      * Add the UI for a foreign session to the menu.
      * @param {Object} session Object describing the foreign session.
      */
     addSession_: function(session) {
       var doc = this.ownerDocument;
 
       var section = doc.createElement('section');
       this.menu.appendChild(section);
 
       var heading = doc.createElement('h3');
+      heading.classList.add('session-heading');

[Evan Stade, 2012/03/30 21:00:30]

className =

[Patrick Dubroy, 2012/03/30 21:21:20]

Done.

       heading.textContent = session.name;
+      heading.sessionTag_ = session.tag;
       section.appendChild(heading);
 
+      var timeSpan = doc.createElement('span');
+      timeSpan.classList.add('details');

[Evan Stade, 2012/03/30 21:00:30]

className =

[Patrick Dubroy, 2012/03/30 21:21:20]

Done.

+      timeSpan.textContent = session.modifiedTime;
+      heading.appendChild(timeSpan);
+
+      cr.ui.contextMenuHandler.setContextMenu(heading,
+                                              this.deviceContextMenu_);
+
       for (var i = 0; i < session.windows.length; i++) {
         var window = session.windows[i];
+
+        // Show a separator between multiple windows in the same session.
+        if (i > 0)
+          section.appendChild(doc.createElement('hr'));
+
         for (var j = 0; j < window.tabs.length; j++) {
           var tab = window.tabs[j];
           var a = doc.createElement('a');
           a.className = 'footer-menu-item';
           a.textContent = tab.title;
           a.href = tab.url;
           a.style.backgroundImage = 'url(chrome://favicon/' + tab.url + ')';
           var clickHandler = this.makeClickHandler_(
               session.tag, String(window.sessionId), String(tab.sessionId));
           a.addEventListener('click', clickHandler);
@@ skipping 34 matching lines @@
      * @param {boolean} signedIn Is the user currently signed in?
      */
     updateSignInState: function(signedIn) {
       if (signedIn)
         chrome.send('getForeignSessions');
       else
         this.classList.add('invisible');
     },
   };
 
+  /**
+   * Context menu for device names in the list of sessions.
+   * This class is designed to be used as a singleton.
+   *
+   * @constructor
+   */
+  function DeviceContextMenu() {
+    this.__proto__ = DeviceContextMenu.prototype;
+    this.initialize();
+  }
+  cr.addSingletonGetter(DeviceContextMenu);
+
+  DeviceContextMenu.prototype = {
+
+    initialize: function() {
+      var menu = new cr.ui.Menu;
+      cr.ui.decorate(menu, cr.ui.Menu);
+      menu.classList.add('device-context-menu');
+      menu.classList.add('footer-menu-context-menu');
+      this.menu = menu;
+      this.hideItem_ = this.appendMenuItem_('hide');
+      this.hideItem_.addEventListener('activate', this.onHide_.bind(this));
+    },
+
+    /**
+     * Appends a menu item to |this.menu|.
+     * @param {String} textId The ID for the localized string that acts as
+     *     the item's label.
+     */
+    appendMenuItem_: function(textId) {
+      var button = cr.doc.createElement('button');
+      this.menu.appendChild(button);
+      cr.ui.decorate(button, cr.ui.MenuItem);
+      button.textContent = localStrings.getString(textId);
+      return button;
+    },
+
+    /**
+     * Handler for the 'hide' menu item.
+     * @param {Event} e The activation event.
+     * @private
+     */
+    onHide_: function(e) {
+      chrome.send('deleteForeignSession', [this.sessionTag_]);
+      chrome.send('getForeignSessions');  // Refresh the list.
+    },
+
+    /**
+     * Set the session tag which identifies the session that the context menu
+     * was invoked on.
+     * @param {String} tag The session tag.
+     */
+    setSessionTag: function(tag) {
+      this.sessionTag_ = tag;
+    }
+  };
+
   return {
     OtherSessionsMenuButton: OtherSessionsMenuButton,
   };
 });