Fix visibility changes with toolbox.

core/toolbox.js

@@ -180,30 +180,28 @@ Blockly.Toolbox.prototype.populate_ = function(newTree) {
         // Skip over text.
         continue;
       }
-      var name = childIn.tagName.toUpperCase();
-      if (name == 'CATEGORY') {
-        var childOut = rootOut.createNode(childIn.getAttribute('name'));
-        childOut.blocks = [];
-        if (childIn.getAttribute('expanded') == 'true') {
-          childOut.setExpanded(true);
-        }
-        treeOut.add(childOut);
-        var custom = childIn.getAttribute('custom');
-        if (custom) {
-          // Variables and procedures have special categories that are dynamic.
-          childOut.blocks = custom;
-        } else {
-          syncTrees(childIn, childOut);
-        }
-      } else if (name == 'HR') {
-        // <hr> tag is deprecated, use <sep></sep> instead.
-        // https://github.com/google/blockly/issues/50
-        console.warn('The <hr> separator tag in the toolbox XML needs to be ' +
-                     'changed to <sep></sep> (due to a bug in IE).');
-      } else if (name == 'SEP') {
-        treeOut.add(new Blockly.Toolbox.TreeSeparator());
-      } else if (name == 'BLOCK') {
-        treeOut.blocks.push(childIn);
+      switch (childIn.tagName.toUpperCase()) {
+        case 'CATEGORY':
+          var childOut = rootOut.createNode(childIn.getAttribute('name'));
+          childOut.blocks = [];
+          if (childIn.getAttribute('expanded') == 'true') {
+            childOut.setExpanded(true);
+          }
+          treeOut.add(childOut);
+          var custom = childIn.getAttribute('custom');
+          if (custom) {
+            // Variables and procedures are special dynamic categories.
+            childOut.blocks = custom;
+          } else {
+            syncTrees(childIn, childOut);
+          }
+          break;
+        case 'SEP':
+          treeOut.add(new Blockly.Toolbox.TreeSeparator());
+          break;
+        case 'BLOCK':
+          treeOut.blocks.push(childIn);
+          break;
       }
     }
   }

core/workspace.js

@@ -214,3 +214,6 @@ Blockly.Workspace.prototype.updateToolbox = function(tree) {
     this.flyout_.show(tree.childNodes);
   }
 };
+
+// Export symbols that would otherwise be renamed by Closure compiler.
+Blockly.Workspace.prototype['clear'] = Blockly.Workspace.prototype.clear;

core/workspace_svg.js

@@ -278,6 +278,27 @@ Blockly.WorkspaceSvg.prototype.getWidth = function() {
   return this.getMetrics().viewWidth;
 };
 
+/**
+ * Toggles the visibility of the workspace.
+ * Currently only intended for main workspace.
+ * @param {boolean} isVisible True if workspace should be visible.
+ */
+Blockly.WorkspaceSvg.prototype.setVisible = function(isVisible) {
+  this.options.svg.style.display = isVisible ? 'block' : 'none';
+  if (this.toolbox_) {
+    // Currently does not support toolboxes in mutators.
+    this.toolbox_.HtmlDiv.style.display = isVisible ? 'block' : 'none';
+  }
+  if (isVisible) {
+    this.render();
+    if (this.toolbox_) {
+      this.toolbox_.position();
+    }
+  } else {
+    Blockly.hideChaff(true);
+  }
+};
+
 /**
  * Render all blocks in workspace.
  */
@@ -657,7 +678,8 @@ Blockly.WorkspaceSvg.prototype.markFocused = function() {
 };
 
 // Export symbols that would otherwise be renamed by Closure compiler.
-Blockly.WorkspaceSvg.prototype['clear'] = Blockly.WorkspaceSvg.prototype.clear;
+Blockly.WorkspaceSvg.prototype['setVisible'] =
+    Blockly.WorkspaceSvg.prototype.setVisible;
 Blockly.WorkspaceSvg.prototype['addChangeListener'] =
     Blockly.WorkspaceSvg.prototype.addChangeListener;
 Blockly.WorkspaceSvg.prototype['removeChangeListener'] =

demos/code/code.js

@@ -273,6 +273,9 @@ Code.tabClick = function(clickedName) {
     }
   }
 
+  if (document.getElementById('tab_blocks').className == 'tabon') {
+    Code.workspace.setVisible(false);
+  }
   // Deselect all tabs and hide all panes.
   for (var i = 0; i < Code.TABS_.length; i++) {
     var name = Code.TABS_[i];
@@ -287,6 +290,9 @@ Code.tabClick = function(clickedName) {
   document.getElementById('content_' + clickedName).style.visibility =
       'visible';
   Code.renderContent();
+  if (clickedName == 'blocks') {
+    Code.workspace.setVisible(true);
+  }
   Blockly.fireUiEvent(window, 'resize');
 };
 
@@ -417,7 +423,7 @@ Code.init = function() {
 Code.initLanguage = function() {
   // Set the HTML's language and direction.
   var rtl = Code.isRtl();
-  document.head.parentElement.setAttribute('dir', rtl ? 'rtl' : 'ltr');
+  document.dir = rtl ? 'rtl' : 'ltr';
   document.head.parentElement.setAttribute('lang', Code.LANG);
 
   // Sort languages alphabetically.

tests/playground.html

@@ -418,8 +418,8 @@ h1 {
 
   <h1>Blockly Playground</h1>
 
-  <p><a href="javascript:void([document.getElementById('blocklyDiv').style.display = 'block', workspace.render()])">Show</a>
-   - <a href="javascript:void(document.getElementById('blocklyDiv').style.display = 'none')">Hide</a></p>
+  <p><a href="javascript:void(workspace.setVisible(true))">Show</a>
+   - <a href="javascript:void(workspace.setVisible(false))">Hide</a></p>
 
   <script>
     if (rtl) {