MD Bookmarks: Lazily render dropdown menus

chrome/browser/resources/md_bookmarks/command_manager.js

 // Copyright 2017 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 Element which shows context menus and handles keyboard
  * shortcuts.
  */
 cr.define('bookmarks', function() {
 
@@ skipping 88 matching lines @@
     /**
      * Display the command context menu at (|x|, |y|) in window co-ordinates.
      * Commands will execute on |items| if given, or on the currently selected
      * items.
      * @param {number} x
      * @param {number} y
      * @param {Set<string>=} items
      */
     openCommandMenuAtPosition: function(x, y, items) {
       this.menuIds_ = items || this.getState().selection.items;
-      /** @type {!CrActionMenuElement} */ (this.$.dropdown)
-          .showAtPosition({top: y, left: x});
+      var dropdown =
+          /** @type {!CrActionMenuElement} */ (this.$.dropdown.get());
+      // Ensure that the menu is fully rendered before trying to position it.
+      Polymer.dom.flush();
+      dropdown.showAtPosition({top: y, left: x});
     },
 
     /**
      * Display the command context menu positioned to cover the |target|
      * element. Commands will execute on the currently selected items.
      * @param {!Element} target
      */
     openCommandMenuAtElement: function(target) {
       this.menuIds_ = this.getState().selection.items;
-      /** @type {!CrActionMenuElement} */ (this.$.dropdown).showAt(target);
+      var dropdown =
+          /** @type {!CrActionMenuElement} */ (this.$.dropdown.get());
+      // Ensure that the menu is fully rendered before trying to position it.
+      Polymer.dom.flush();
+      dropdown.showAt(target);
     },
 
     closeCommandMenu: function() {
       this.menuIds_ = new Set();
-      /** @type {!CrActionMenuElement} */ (this.$.dropdown).close();
+      /** @type {!CrActionMenuElement} */ (this.$.dropdown.get()).close();
     },
 
     ////////////////////////////////////////////////////////////////////////////
     // Command handlers:
 
     /**
      * Determine if the |command| can be executed with the given |itemIds|.
      * Commands which appear in the context menu should be implemented
      * separately using `isCommandVisible_` and `isCommandEnabled_`.
      * @param {Command} command
@@ skipping 314 matching lines @@
     },
 
     /**
      * Close the menu on mousedown so clicks can propagate to the underlying UI.
      * This allows the user to right click the list while a context menu is
      * showing and get another context menu.
      * @param {Event} e
      * @private
      */
     onMenuMousedown_: function(e) {
-      if (e.path[0] != this.$.dropdown)
+      if (e.path[0] != this.$.dropdown.getIfExists())
         return;
 
       this.closeCommandMenu();
     },
 
     /**
      * @param {Command} command
      * @return {string}
      * @private
      */
@@ skipping 77 matching lines @@
 
   /** @return {!bookmarks.CommandManager} */
   CommandManager.getInstance = function() {
     return assert(CommandManager.instance_);
   };
 
   return {
     CommandManager: CommandManager,
   };
 });