[menu.js] Menu.menuItemSelector has to be set before decoration

In menu.js, the Menu.menuItemSelector is refereed in the decorator, so we need to set it before decoration

BUG=none
TEST=manually tested

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

Cr-Commit-Position: refs/heads/master@{#323889}

chrome/browser/resources/ntp4/other_sessions.js

@@ -72,8 +72,8 @@ cr.define('ntp', function() {
     decorate: function() {
       MenuButton.prototype.decorate.call(this);
       this.menu = new Menu;
+      this.menu.menuItemSelector = '[role=menuitem]';  // before decoration
       cr.ui.decorate(this.menu, Menu);
-      this.menu.menuItemSelector = '[role=menuitem]';
       this.menu.classList.add('footer-menu');
       this.menu.addEventListener('contextmenu',
                                  this.onContextMenu_.bind(this), true);

ui/file_manager/file_manager/foreground/js/ui/gear_menu.js

@@ -70,7 +70,6 @@ function GearMenu(element) {
   this.spaceInfoPromise_ = null;
 
   // Initialize attributes.
-  element.menuItemSelector = 'cr-menu-item, hr';
   this.syncButton.checkable = true;
   this.hostedButton.checkable = true;
 }

ui/file_manager/file_manager/main.html

@@ -292,7 +292,8 @@
       <cr-menu-item command="#create-folder-shortcut"></cr-menu-item>
     </cr-menu>
 
-    <cr-menu id="gear-menu" class="chrome-menu" showShortcuts>
+    <cr-menu id="gear-menu" class="chrome-menu" showShortcuts
+             menu-item-selector="cr-menu-item, hr">
       <cr-menu-item id="gear-menu-newwindow" command="#new-window"></cr-menu-item>
       <cr-menu-item id="gear-menu-newfolder" command="#new-folder"></cr-menu-item>
       <hr>

ui/webui/resources/js/cr/ui/menu.js

@@ -26,11 +26,6 @@ cr.define('cr.ui', function() {
      */
     contextElement: null,
 
-    /**
-     * Selector for children which are menu items.
-     */
-    menuItemSelector: '*',
-
     /**
      * Initializes the menu element.
      */
@@ -119,7 +114,7 @@ cr.define('cr.ui', function() {
     },
 
     get menuItems() {
-      return this.querySelectorAll(this.menuItemSelector);
+      return this.querySelectorAll(this.menuItemSelector || '*');
     },
 
     /**
@@ -272,6 +267,11 @@ cr.define('cr.ui', function() {
   cr.defineProperty(Menu, 'selectedIndex', cr.PropertyKind.JS,
       selectedIndexChanged);
 
+  /**
+   * Selector for children which are menu items.
+   */
+  cr.defineProperty(Menu, 'menuItemSelector', cr.PropertyKind.ATTR);
+
   // Export
   return {
     Menu: Menu