Use hidden attribute rather the 'display: none' for hiding menus.

BUG=None
TEST=Manual test of menus on NTP, bookmarks, chrome://history.

Review URL: https://chromiumcodereview.appspot.com/10389016

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

chrome/browser/resources/ntp4/other_sessions.js

@@ -55,7 +55,6 @@ cr.define('ntp', function() {
       // Create the context menu that appears when the user right clicks
       // on a device name.
       this.deviceContextMenu_ = DeviceContextMenuController.getInstance().menu;
-      this.deviceContextMenu_.style.display = 'none';
       document.body.appendChild(this.deviceContextMenu_);
 
       this.promoMessage_ = $('other-sessions-promo-template').cloneNode(true);
@@ -107,7 +106,7 @@ cr.define('ntp', function() {
      */
     hideMenu: function() {
       // Don't hide if the device context menu is currently showing.
-      if (this.deviceContextMenu_.style.display == 'none')
+      if (this.deviceContextMenu_.hidden)
         MenuButton.prototype.hideMenu.call(this);
     },
 

chrome/browser/resources/shared/css/menu.css

@@ -8,7 +8,6 @@ menu {
   background: white;
   color: black;
   cursor: default;
-  display: none;
   left: 0;
   margin: 0;
   outline: 1px solid rgba(0, 0, 0, 0.2);
@@ -18,6 +17,10 @@ menu {
   z-index: 3;
 }
 
+menu:not(.decorated) {
+  display: none;
+}
+
 menu > * {
   box-sizing: border-box;
   display: block;

chrome/browser/resources/shared/js/cr/ui/context_menu_handler.js

@@ -31,8 +31,8 @@ cr.define('cr.ui', function() {
      */
     showMenu: function(e, menu) {
       this.menu_ = menu;
+      menu.hidden = false;
 
-      menu.style.display = 'block';
       // when the menu is shown we steal all keyboard events.
       var doc = menu.ownerDocument;
       doc.addEventListener('keydown', this, true);
@@ -52,7 +52,7 @@ cr.define('cr.ui', function() {
       if (!menu)
         return;
 
-      menu.style.display = 'none';
+      menu.hidden = true;
       var doc = menu.ownerDocument;
       doc.removeEventListener('keydown', this, true);
       doc.removeEventListener('mousedown', this, true);

chrome/browser/resources/shared/js/cr/ui/menu.js

@@ -26,6 +26,9 @@ cr.define('cr.ui', function() {
       this.addEventListener('mouseover', this.handleMouseOver_);
       this.addEventListener('mouseout', this.handleMouseOut_);
 
+      this.classList.add('decorated');
+      this.hidden = true;  // Hide the menu by default.
+
       // Decorate the children as menu items.
       var children = this.children;
       for (var i = 0, child; child = children[i]; i++) {

chrome/browser/resources/shared/js/cr/ui/menu_button.js

@@ -113,7 +113,7 @@ cr.define('cr.ui', function() {
     showMenu: function() {
       this.hideMenu();
 
-      this.menu.style.display = 'block';
+      this.menu.hidden = false;
       this.setAttribute('menu-shown', '');
 
       // when the menu is shown we steal all keyboard events.
@@ -136,7 +136,7 @@ cr.define('cr.ui', function() {
         return;
 
       this.removeAttribute('menu-shown');
-      this.menu.style.display = 'none';
+      this.menu.hidden = true;
 
       this.showingEvents_.removeAll();
       this.menu.selectedIndex = -1;