Make dropdown in Block Factory modal.

demos/blockfactory/app_controller.js

@@ -485,7 +485,7 @@ AppController.prototype.assignLibraryClickHandlers = function() {
   // Hide and show the block library dropdown.
   document.getElementById('button_blockLib').addEventListener('click',
       function() {
-        document.getElementById('dropdownDiv_blockLib').classList.toggle("show");
+        self.openModal('dropdownDiv_blockLib');
       });
 };
 
@@ -534,7 +534,7 @@ AppController.prototype.assignBlockFactoryClickHandlers = function() {
       self.blockLibraryController.setNoneSelected();
 
       // Close the Block Library Dropdown.
-      document.getElementById('dropdownDiv_blockLib').classList.remove('show');
+      self.closeModal();
     });
 };
 
@@ -629,6 +629,37 @@ AppController.prototype.confirmLeavePage = function() {
   }
 };
 
+/**
+ * Show a modal element, usually a dropdown list.
+ * @param {string} id ID of element to show.
+ */
+AppController.prototype.openModal = function(id) {
+  Blockly.hideChaff();
+  this.modalName_ = id;
+  document.getElementById(id).style.display = 'block';
+  document.getElementById('modalShadow').style.display = 'block';
+};
+
+/**
+ * Hide a previously shown modal element.
+ */
+AppController.prototype.closeModal = function() {
+  var id = this.modalName_;
+  if (!id) {
+    return;
+  }
+  document.getElementById(id).style.display = 'none';
+  document.getElementById('modalShadow').style.display = 'none';
+  this.modalName_ = null;
+};
+
+/**
+ * Name of currently open modal.
+ * @type {string?}
+ * @private
+ */
+AppController.prototype.modalName_ = null;
+
 /**
  * Initialize Blockly and layout.  Called on page load.
  */
@@ -647,6 +678,7 @@ AppController.prototype.init = function() {
     return;
   }
 
+  var self = this;
   // Handle Blockly Storage with App Engine.
   if ('BlocklyStorage' in window) {
     this.initializeBlocklyStorage();
@@ -656,9 +688,13 @@ AppController.prototype.init = function() {
   this.assignExporterClickHandlers();
   this.assignLibraryClickHandlers();
   this.assignBlockFactoryClickHandlers();
+  // Hide and show the block library dropdown.
+  document.getElementById('modalShadow').addEventListener('click',
+      function() {
+        self.closeModal();
+      });
 
   this.onresize();
-  var self = this;
   window.addEventListener('resize', function() {
     self.onresize();
   });

demos/blockfactory/block_library_controller.js

@@ -276,7 +276,7 @@ BlockLibraryController.prototype.addOptionSelectHandler = function(blockType) {
     // Thus, the buttons show up as a disabled update button and an enabled
     // delete.
     self.view.updateButtons(blockType, true, true);
-    self.view.hide();
+    blocklyFactory.closeModal();
   };
 
   // Returns a block option select handler.

demos/blockfactory/block_library_view.js

@@ -39,8 +39,6 @@ goog.require('goog.dom.classlist');
  */
 var BlockLibraryView = function() {
   // Div element to contain the block types to choose from.
-  // Id of the div that holds the block library view.
-  this.blockLibraryViewDivID = 'dropdownDiv_blockLib';
   this.dropdown = document.getElementById('dropdownDiv_blockLib');
   // Map of block type to corresponding 'a' element that is the option in the
   // dropdown. Used to quickly and easily get a specific option.
@@ -53,20 +51,6 @@ var BlockLibraryView = function() {
   this.deleteButton.disabled = true;
 };
 
-/**
- * Open the Block Library dropdown.
- */
-BlockLibraryView.prototype.show = function() {
-  this.dropdown.classList.add("show");
-};
-
-/**
- * Close the Block Library dropdown.
- */
-BlockLibraryView.prototype.hide = function() {
-  this.dropdown.classList.remove("show");
-};
-
 /**
  * Creates a node of a given element type and appends to the node with given id.
  * @param {string} blockType - Type of block.
@@ -210,7 +194,8 @@ BlockLibraryView.prototype.getSelectedOption = function() {
  */
 BlockLibraryView.prototype.clearOptions = function() {
   var blockOpts = this.dropdown.getElementsByClassName('blockLibOpt');
-  for (var i = 0, option; option = blockOpts[i]; i++) {
+  var option;
+  while ((option = blockOpts[0])) {
     option.parentNode.removeChild(option);
   }
 };

demos/blockfactory/factory.css

@@ -499,6 +499,17 @@ td.taboff:hover {
   padding-left: 15px;
 }
 
+#modalShadow {
+  display: none;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.05);
+  z-index: 100;
+}
+
 /* Rules for Closure popup color picker */
 .goog-palette {
   outline: none;
@@ -554,7 +565,7 @@ td.taboff:hover {
   min-width: 170px;
   opacity: 1;
   position: absolute;
-  z-index: 1;
+  z-index: 101;
 }
 
 /* Links inside the dropdown */

demos/blockfactory/index.html

@@ -5,7 +5,7 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="target-densitydpi=device-dpi, height=660, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-  <title>Blockly Demo: Blockly Factory</title>
+  <title>Blockly Demo: Blockly Developer Tools</title>
   <script src="../../blockly_compressed.js"></script>
   <script src="../../javascript_compressed.js"></script>
   <script src="../../msg/js/en.js"></script>
@@ -386,6 +386,8 @@
       </tr>
   </table>
 
+  <div id="modalShadow"></div>
+
   <xml id="blockfactory_toolbox" class="toolbox">
     <category name="Input">
       <block type="input_value">