NTP: Adds a context menu to the apps section...

chrome/browser/resources/new_new_tab.js

 // Copyright (c) 2010 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.
 
 // To avoid creating tons of unnecessary nodes. We assume we cannot fit more
 // than this many items in the miniview.
 var MAX_MINIVIEW_ITEMS = 15;
 
 // Extra spacing at the top of the layout.
 var LAYOUT_SPACING_TOP = 25;
@@ skipping 629 matching lines @@
 }
 
 function showFirstRunNotification() {
   showNotification(localStrings.getString('firstrunnotification'),
                    localStrings.getString('closefirstrunnotification'),
                    null, 30000);
   var notificationElement = $('notification');
   notification.classList.add('first-run');
 }
 
-/**
- * This handles the option menu.
- * @param {Element} button The button element.
- * @param {Element} menu The menu element.
- * @constructor
- */
-function OptionMenu(button, menu) {
-  this.button = button;
-  this.menu = menu;
-  this.button.onclick = bind(this.handleClick, this);
-  this.button.onmousedown = bind(this.handleMouseDown, this);
-  this.button.onkeydown = bind(this.handleKeyDown, this);
-  this.boundHideMenu_ = bind(this.hide, this);
-  this.boundMaybeHide_ = bind(this.maybeHide_, this);
-  this.menu.onmouseover = bind(this.handleMouseOver, this);
-  this.menu.onmouseout = bind(this.handleMouseOut, this);
-  this.menu.onmouseup = bind(this.handleMouseUp, this);
-}
-
-OptionMenu.prototype = {
-  show: function() {
-    this.positionMenu_();
-    this.menu.style.display = 'block';
-    this.button.classList.add('open');
-    this.button.focus();
-
-    // Listen to document and window events so that we hide the menu when the
-    // user clicks outside the menu or tabs away or the whole window is blurred.
-    document.addEventListener('focus', this.boundMaybeHide_, true);
-    document.addEventListener('mousedown', this.boundMaybeHide_, true);
-  },
-
-  positionMenu_: function() {
-    var rect = this.button.getBoundingClientRect();
-    this.menu.style.top = rect.bottom + 'px';
-    if (document.documentElement.dir == 'rtl')
-      this.menu.style.left = rect.left + 'px';
-    else
-      this.menu.style.right = (document.body.clientWidth - rect.right) + 'px'
-  },
-
-  hide: function() {
-    this.menu.style.display = 'none';
-    this.button.classList.remove('open');
-    this.setSelectedIndex(-1);
-
-    document.removeEventListener('focus', this.boundMaybeHide_, true);
-    document.removeEventListener('mousedown', this.boundMaybeHide_, true);
-  },
-
-  isShown: function() {
-    return this.menu.style.display == 'block';
-  },
-
-  /**
-   * Callback for document mousedown and focus. It checks if the user tried to
-   * navigate to a different element on the page and if so hides the menu.
-   * @param {Event} e The mouse or focus event.
-   * @private
-   */
-  maybeHide_: function(e) {
-    if (!this.menu.contains(e.target) && !this.button.contains(e.target)) {
-      this.hide();
-    }
-  },
-
-  handleMouseDown: function(e) {
-    if (this.isShown()) {
-      this.hide();
-    } else {
-      this.show();
-    }
-  },
-
-  handleClick: function(e) {
-    e.stopPropagation();
-  },
-
-  handleMouseOver: function(e) {
-    var el = e.target;
-    if (!el.hasAttribute('command')) {
-      this.setSelectedIndex(-1);
-    } else {
-      var index = Array.prototype.indexOf.call(this.menu.children, el);
-      this.setSelectedIndex(index);
-    }
-  },
-
-  handleMouseOut: function(e) {
-    this.setSelectedIndex(-1);
-  },
-
-  handleMouseUp: function(e) {
-    var item = this.getSelectedItem();
-    if (item) {
-      this.executeItem(item);
-    }
-  },
-
-  handleKeyDown: function(e) {
-    var item = this.getSelectedItem();
-
-    var self = this;
-    function selectNextVisible(m) {
-      var children = self.menu.children;
-      var len = children.length;
-      var i = self.selectedIndex_;
-      if (i == -1 && m == -1) {
-        // Edge case when we need to go the last item fisrt.
-        i = 0;
-      }
-      while (true) {
-        i = (i + m + len) % len;
-        item = children[i];
-        if (item && item.hasAttribute('command') &&
-            item.style.display != 'none') {
-          break;
-        }
-      }
-      if (item) {
-        self.setSelectedIndex(i);
-      }
-    }
-
-    switch (e.keyIdentifier) {
-      case 'Down':
-        if (!this.isShown()) {
-          this.show();
-        }
-        selectNextVisible(1);
-        e.preventDefault();
-        break;
-      case 'Up':
-        if (!this.isShown()) {
-          this.show();
-        }
-        selectNextVisible(-1);
-        e.preventDefault();
-        break;
-      case 'Esc':
-      case 'U+001B': // Maybe this is remote desktop playing a prank?
-        this.hide();
-        break;
-      case 'Enter':
-      case 'U+0020': // Space
-        if (this.isShown()) {
-          if (item) {
-            this.executeItem(item);
-          } else {
-            this.hide();
-          }
-        } else {
-          this.show();
-        }
-        e.preventDefault();
-        break;
-    }
-  },
-
-  selectedIndex_: -1,
-  setSelectedIndex: function(i) {
-    if (i != this.selectedIndex_) {
-      var items = this.menu.children;
-      var oldItem = items[this.selectedIndex_];
-      if (oldItem) {
-        oldItem.removeAttribute('selected');
-      }
-      var newItem = items[i];
-      if (newItem) {
-        newItem.setAttribute('selected', 'selected');
-      }
-      this.selectedIndex_ = i;
-    }
-  },
-
-  getSelectedItem: function() {
-    return this.menu.children[this.selectedIndex_] || null;
-  },
-
-  executeItem: function(item) {
-    var command = item.getAttribute('command');
-    if (command in this.commands) {
-      this.commands[command].call(this, item);
-    }
-
-    this.hide();
-  }
-};
-
-var optionMenu = new OptionMenu(
-    document.querySelector('#most-visited h2 .settings-wrapper'),
-    $('option-menu'));
-optionMenu.commands = {
-  'clear-all-blacklisted' : function() {
-    mostVisited.clearAllBlacklisted();
-    chrome.send('getMostVisited');
-  }
-};
-
 $('main').addEventListener('click', function(e) {
   var p = e.target;
   while (p && p.tagName != 'H2') {
+    // In case the user clicks on a button we do not want to expand/collapse a
+    // section.
+    if (p.tagName == 'BUTTON')
+      return;
     p = p.parentNode;
   }
 
   if (!p) {
     return;
   }
 
   p = p.parentNode;
   if (!getSectionMaxiview(p)) {
     return;
@@ skipping 197 matching lines @@
  * The sync code is not yet built by default on all platforms so we have to
  * make sure we don't send the initial sync message to the backend unless the
  * backend told us that the sync code is present.
  */
 function callGetSyncMessageIfSyncIsPresent() {
   if (document.documentElement.getAttribute('syncispresent') == 'true') {
     chrome.send('GetSyncMessage');
   }
 }
 
-function hideAllMenus() {
-  optionMenu.hide();
-}
-
-window.addEventListener('blur', hideAllMenus);
-window.addEventListener('keydown', function(e) {
-  if (e.keyIdentifier == 'Alt' || e.keyIdentifier == 'Meta') {
-    hideAllMenus();
-  }
-}, true);
-
 // Tooltip for elements that have text that overflows.
 document.addEventListener('mouseover', function(e) {
   // We don't want to do this while we are dragging because it makes things very
   // janky
   if (mostVisited.isDragging()) {
     return;
   }
 
   var el = findAncestor(e.target, function(el) {
     return el.xtitle;
@@ skipping 51 matching lines @@
   window.setTimeout(function() {
     mostVisited.ensureSmallGridCorrect();
     document.body.classList.remove('loading');
   }, 1);
 
   // Only show the first run notification if first run.
   if (firstRun) {
     showFirstRunNotification();
   }
 }