Add separators to toolbox.

core/css.js

@@ -346,6 +346,12 @@ Blockly.Css.CONTENT = [
   '  background-color: #e4e4e4;',
   '}',
 
+  '.blocklyTreeSeparator {',
+  '  height: 0px;',
+  '  border-bottom: solid #e5e5e5 1px;',
+  '  margin: 5px 0;',
+  '}',
+
   '.blocklyTreeIcon {',
   '  height: 16px;',
   '  width: 16px;',

core/toolbox.js

@@ -172,6 +172,8 @@ Blockly.Toolbox.populate_ = function() {
         } else {
           syncTrees(childIn, childOut);
         }
+      } else if (name == 'HR') {
+        treeOut.add(new Blockly.Toolbox.TreeSeparator());
       } else if (name == 'BLOCK') {
         treeOut.blocks.push(childIn);
       }
@@ -273,7 +275,7 @@ Blockly.Toolbox.TreeControl.prototype.setSelectedItem = function(node) {
 };
 
 /**
- * An single node in the tree, customized for Blockly's UI.
+ * A single node in the tree, customized for Blockly's UI.
  * @param {!goog.html.SafeHtml} html The HTML content of the node label.
  * @param {Object=} opt_config The configuration for the tree. See
  *    goog.ui.tree.TreeControl.DefaultConfig. If not specified, a default config
@@ -331,3 +333,24 @@ Blockly.Toolbox.TreeNode.prototype.onMouseDown = function(e) {
 Blockly.Toolbox.TreeNode.prototype.onDoubleClick_ = function(e) {
   // NOP.
 };
+
+/**
+ * A blank separator node in the tree.
+ * @constructor
+ * @extends {Blockly.Toolbox.TreeNode}
+ */
+Blockly.Toolbox.TreeSeparator = function() {
+  Blockly.Toolbox.TreeNode.call(this, '',
+      Blockly.Toolbox.TreeSeparator.CONFIG_);
+};
+goog.inherits(Blockly.Toolbox.TreeSeparator, Blockly.Toolbox.TreeNode);
+
+/**
+ * Configuration constants for tree separator.
+ * @type {Object.<string,*>}
+ * @const
+ * @private
+ */
+Blockly.Toolbox.TreeSeparator.CONFIG_ = {
+  cssTreeRow: 'blocklyTreeSeparator'
+};

demos/toolbox/index.html

@@ -138,6 +138,7 @@
     </category>
     <category name="Variables" custom="VARIABLE"></category>
     <category name="Functions" custom="PROCEDURE"></category>
+    <hr>
     <category name="Library">
       <category name="Randomize">
         <block type="procedures_defnoreturn">

tests/playground.html

@@ -352,6 +352,7 @@ h1 {
         </value>
       </block>
     </category>
+    <hr>
     <category name="Variables" custom="VARIABLE"></category>
     <category name="Functions" custom="PROCEDURE"></category>
   </xml>