WebUI: Hide menus when navigation occurs

Details: Listen to window popstate event and hide the menus when the
event fires.

This also changes context menu to use an EventTracker to reduce the
code. I verified that all pages that include context_menu_handler.js
also already include event_tracker.js

BUG=306370
R=dbeam@chromium.org

Review URL: https://codereview.chromium.org/26279015

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

2 files changed, 15 insertions, 14 deletions

diff --git a/ui/webui/resources/js/cr/ui/context_menu_handler.js b/ui/webui/resources/js/cr/ui/context_menu_handler.js
index 05264d6..a00ccac 100644
--- a/ui/webui/resources/js/cr/ui/context_menu_handler.js
+++ b/ui/webui/resources/js/cr/ui/context_menu_handler.js
@@ -14,7 +14,9 @@ cr.define('cr.ui', function() {
    * @constructor
    * @extends {EventTarget}
    */
-  function ContextMenuHandler() {}
+  function ContextMenuHandler() {
+    this.showingEvents_ = new EventTracker();
+  }
 
   ContextMenuHandler.prototype = {
     __proto__: EventTarget.prototype,
@@ -46,12 +48,14 @@ cr.define('cr.ui', function() {
 
       // when the menu is shown we steal all keyboard events.
       var doc = menu.ownerDocument;
-      doc.addEventListener('keydown', this, true);
-      doc.addEventListener('mousedown', this, true);
-      doc.addEventListener('focus', this);
-      doc.defaultView.addEventListener('resize', this);
-      menu.addEventListener('contextmenu', this);
-      menu.addEventListener('activate', this);
+      var win = doc.defaultView;
+      this.showingEvents_.add(doc, 'keydown', this, true);
+      this.showingEvents_.add(doc, 'mousedown', this, true);
+      this.showingEvents_.add(doc, 'focus', this);
+      this.showingEvents_.add(win, 'popstate', this);
+      this.showingEvents_.add(win, 'resize', this);
+      this.showingEvents_.add(menu, 'contextmenu', this);
+      this.showingEvents_.add(menu, 'activate', this);
       this.positionMenu_(e, menu);
 
       var ev = new Event('show');
@@ -77,13 +81,7 @@ cr.define('cr.ui', function() {
       menu.hidden = true;
       var originalContextElement = menu.contextElement;
       menu.contextElement = null;
-      var doc = menu.ownerDocument;
-      doc.removeEventListener('keydown', this, true);
-      doc.removeEventListener('mousedown', this, true);
-      doc.removeEventListener('focus', this);
-      doc.defaultView.removeEventListener('resize', this);
-      menu.removeEventListener('contextmenu', this);
-      menu.removeEventListener('activate', this);
+      this.showingEvents_.removeAll();
       menu.selectedIndex = -1;
       this.menu_ = null;
 
@@ -184,6 +182,7 @@ cr.define('cr.ui', function() {
             this.hideMenu();
           break;
 
+        case 'popstate':
         case 'resize':
           this.hideMenu();
           break;
diff --git a/ui/webui/resources/js/cr/ui/menu_button.js b/ui/webui/resources/js/cr/ui/menu_button.js
index 8a34919..e9612bf 100644
--- a/ui/webui/resources/js/cr/ui/menu_button.js
+++ b/ui/webui/resources/js/cr/ui/menu_button.js
@@ -135,6 +135,7 @@ cr.define('cr.ui', function() {
           if (!(e.target == this.menu || this.menu.contains(e.target)))
             this.hideMenu();
           break;
+        case 'popstate':
         case 'resize':
           this.hideMenu();
           break;
@@ -168,6 +169,7 @@ cr.define('cr.ui', function() {
       this.showingEvents_.add(doc, 'mousedown', this, true);
       this.showingEvents_.add(doc, 'focus', this, true);
       this.showingEvents_.add(doc, 'scroll', this, true);
+      this.showingEvents_.add(win, 'popstate', this);
       this.showingEvents_.add(win, 'resize', this);
       this.showingEvents_.add(this.menu, 'activate', this);
       this.positionMenu_();