Merge branch 'develop'

demos/blockfactory/app_controller.js

@@ -32,7 +32,6 @@ goog.require('FactoryUtils');
 goog.require('BlockLibraryController');
 goog.require('BlockExporterController');
 goog.require('goog.dom.classlist');
-goog.require('goog.string');
 goog.require('goog.ui.PopupColorPicker');
 goog.require('goog.ui.ColorPicker');
 
@@ -59,11 +58,11 @@ AppController = function() {
   // Map of tab type to the div element for the tab.
   this.tabMap = Object.create(null);
   this.tabMap[AppController.BLOCK_FACTORY] =
-      goog.dom.getElement('blockFactory_tab');
+      document.getElementById('blockFactory_tab');
   this.tabMap[AppController.WORKSPACE_FACTORY] =
-      goog.dom.getElement('workspaceFactory_tab');
+      document.getElementById('workspaceFactory_tab');
   this.tabMap[AppController.EXPORTER] =
-      goog.dom.getElement('blocklibraryExporter_tab');
+      document.getElementById('blocklibraryExporter_tab');
 
   // Last selected tab.
   this.lastSelectedTab = null;
@@ -535,7 +534,7 @@ AppController.prototype.assignBlockFactoryClickHandlers = function() {
       self.blockLibraryController.setNoneSelected();
 
       // Close the Block Library Dropdown.
-      goog.dom.getElement('dropdownDiv_blockLib').classList.remove("show");
+      document.getElementById('dropdownDiv_blockLib').classList.remove('show');
     });
 };
 

demos/blockfactory/block_exporter_tools.js

@@ -47,7 +47,7 @@ BlockExporterTools = function() {
   }, ''); // Empty quotes for empty div.
   // Hide hidden workspace.
   this.container.style.display = 'none';
-  goog.dom.appendChild(document.body, this.container);
+  document.body.appendChild(this.container);
   /**
    * Hidden workspace for the Block Exporter that holds pieces that make
    * up the block
@@ -251,9 +251,12 @@ BlockExporterTools.prototype.createBlockSelectorFromLib =
   // them in the exporter workspace.
   this.addBlockDefinitions(blockXmlMap);
 
-  var blockSelector = goog.dom.getElement(blockSelectorID);
+  var blockSelector = document.getElementById(blockSelectorID);
   // Clear the block selector.
-  goog.dom.removeChildren(blockSelector);
+  var child;
+  while ((child = blockSelector.firstChild)) {
+    blockSelector.removeChild(child);
+  }
 
   // Append each block option's dom to the selector.
   var blockOptions = Object.create(null);
@@ -266,7 +269,7 @@ BlockExporterTools.prototype.createBlockSelectorFromLib =
     // option to block selector.
     var blockOpt = new BlockOption(blockSelector, blockType, previewBlockXml);
     blockOpt.createDom();
-    goog.dom.appendChild(blockSelector, blockOpt.dom);
+    blockSelector.appendChild(blockOpt.dom);
     blockOpt.showPreviewBlock();
     blockOptions[blockType] = blockOpt;
   }

demos/blockfactory/block_exporter_view.js

@@ -61,10 +61,10 @@ BlockExporterView.prototype.setBlockOptions = function(blockOptions) {
  */
 BlockExporterView.prototype.updateHelperText = function(newText, opt_append) {
   if (opt_append) {
-    goog.dom.getElement('helperText').textContent =
-        goog.dom.getElement('helperText').textContent + newText;
+    document.getElementById('helperText').textContent =
+        document.getElementById('helperText').textContent + newText;
   } else {
-    goog.dom.getElement('helperText').textContent = newText;
+    document.getElementById('helperText').textContent = newText;
   }
 };
 
@@ -74,7 +74,7 @@ BlockExporterView.prototype.updateHelperText = function(newText, opt_append) {
 BlockExporterView.prototype.listSelectedBlocks = function() {
 
   var selectedBlocksText = this.getSelectedBlockTypes().join(",\n ");
-  goog.dom.getElement('selectedBlocksText').textContent = selectedBlocksText;
+  document.getElementById('selectedBlocksText').textContent = selectedBlocksText;
 };
 
 /**

demos/blockfactory/block_library_view.js

@@ -41,13 +41,13 @@ 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 = goog.dom.getElement('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.
   this.optionMap = Object.create(null);
   // Save and delete buttons.
-  this.saveButton = goog.dom.getElement('saveToBlockLibraryButton');
-  this.deleteButton = goog.dom.getElement('removeBlockFromLibraryButton');
+  this.saveButton = document.getElementById('saveToBlockLibraryButton');
+  this.deleteButton = document.getElementById('removeBlockFromLibraryButton');
   // Initially, user should not be able to delete a block. They must save a
   // block or select a stored block first.
   this.deleteButton.disabled = true;
@@ -202,17 +202,15 @@ BlockLibraryView.prototype.getSelectedBlockType = function() {
  * @return {!Element} HTML 'a' element that is the option for a block type.
  */
 BlockLibraryView.prototype.getSelectedOption = function() {
-  return goog.dom.getElementByClass('dropdown-content-selected', this.dropdown);
+  return this.dropdown.getElementsByClassName('dropdown-content-selected')[0];
 };
 
 /**
  * Removes all options from dropdown.
  */
 BlockLibraryView.prototype.clearOptions = function() {
-  var blockOpts = goog.dom.getElementsByClass('blockLibOpt', this.dropdown);
-  if (blockOpts) {
-    for (var i = 0, option; option = blockOpts[i]; i++) {
-      goog.dom.removeNode(option);
-    }
+  var blockOpts = this.dropdown.getElementsByClassName('blockLibOpt');
+  for (var i = 0, option; option = blockOpts[i]; i++) {
+    option.parentNode.removeChild(option);
   }
 };

demos/blockfactory/block_option.js

@@ -81,38 +81,38 @@ BlockOption.prototype.createDom = function() {
     'id' : this.blockType + '_workspace',
     'class': 'blockOption_preview'
   }, '');
-  goog.dom.appendChild(blockOptContainer,blockOptionPreview);
+  blockOptContainer.appendChild(blockOptionPreview);
 
   // Create and append container to hold checkbox and label.
   var checkLabelContainer = goog.dom.createDom('div', {
     'class': 'blockOption_checkLabel'
   }, '');
-  goog.dom.appendChild(blockOptContainer,checkLabelContainer);
+  blockOptContainer.appendChild(checkLabelContainer);
 
   // Create and append container for checkbox.
   var checkContainer = goog.dom.createDom('div', {
     'class': 'blockOption_check'
   }, '');
-  goog.dom.appendChild(checkLabelContainer, checkContainer);
+  checkLabelContainer.appendChild(checkContainer);
 
   // Create and append checkbox.
   this.checkbox = goog.dom.createDom('input', {
     'type': 'checkbox',
     'id': this.blockType + '_check'
   }, '');
-  goog.dom.appendChild(checkContainer, this.checkbox);
+  checkContainer.appendChild(this.checkbox);
 
   // Create and append container for block label.
   var labelContainer = goog.dom.createDom('div', {
     'class': 'blockOption_label'
   }, '');
-  goog.dom.appendChild(checkLabelContainer, labelContainer);
+  checkLabelContainer.appendChild(labelContainer);
 
   // Create and append text node for the label.
   var labelText = goog.dom.createDom('p', {
     'id': this.blockType + '_text'
   }, this.blockType);
-  goog.dom.appendChild(labelContainer, labelText);
+  labelContainer.appendChild(labelText);
 
   this.dom = blockOptContainer;
   return this.dom;

demos/blockfactory/factory_utils.js

@@ -884,8 +884,8 @@ FactoryUtils.injectCode = function(code, id) {
  */
 FactoryUtils.sameBlockXml = function(blockXml1, blockXml2) {
   // Each XML element should contain a single child element with a 'block' tag
-  if (goog.string.caseInsensitiveCompare(blockXml1.tagName, 'xml') ||
-      goog.string.caseInsensitiveCompare(blockXml2.tagName, 'xml')) {
+  if (!blockXml1.tagName.toLowerCase() == 'xml' ||
+      !blockXml2.tagName.toLowerCase() == 'xml') {
     throw new Error('Expected two XML elements, recieved elements with tag ' +
         'names: ' + blockXml1.tagName + ' and ' + blockXml2.tagName + '.');
   }

demos/blockfactory/index.html

@@ -43,7 +43,7 @@
 </head>
 <body onbeforeunload="return blocklyFactory.confirmLeavePage()">
 <h1><a href="https://developers.google.com/blockly/">Blockly</a> &gt;
-  <a href="../index.html">Demos</a> &gt; Blockly Factory
+  <a href="../index.html">Demos</a> &gt; Blockly Developer Tools
   <button id="helpButton" title="View documentation in new window.">
     <span>Help</span>
   </button>

demos/blockfactory/workspacefactory/index.html

@@ -1,769 +0,0 @@
-<!DOCTYPE html>
-<html>
-<title>Blockly Workspace Factory</title>
-<script src="../../../blockly_compressed.js"></script>
-<script src="../../../javascript_compressed.js"></script>
-<script src="../../../msg/messages.js"></script>
-<script src="../../../blocks_compressed.js"></script>
-<script src="wfactory_model.js"></script>
-<script src="wfactory_controller.js"></script>
-<script src="wfactory_view.js"></script>
-<script src="wfactory_generator.js"></script>
-<script src="standard_categories.js"></script>
-<script src="../../../../closure-library/closure/goog/base.js"></script>
-<link rel="stylesheet" href="style.css">
-
-<script>
-goog.require('goog.ui.PopupColorPicker');
-goog.require('goog.ui.ColorPicker');
-</script>
-
-<table width="100%" height="100%">
-  <tr>
-    <td>
-      <h1><a href="https://developers.google.com/blockly/">Blockly</a>&rlm; &gt;
-        <a href="../index.html">Demos</a>&rlm; &gt;
-        <span id="title">Workspace Factory</span>
-      </h1>
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <p>
-        <div class="dropdown">
-        <button id="button_import">Import</button>
-        <div id="dropdownDiv_import" class="dropdown-content">
-          <input type="file" id="input_importToolbox" class="inputfile"></input>
-          <label for="input_importToolbox">Toolbox</label>
-          <input type="file" id="input_importPreload" class="inputfile"></input>
-          <label for="input_importPreload">Workspace Blocks</label>
-        </div>
-        </div>
-
-        <div class="dropdown">
-        <button id="button_export">Export</button>
-        <div id="dropdownDiv_export" class="dropdown-content">
-          <a id='dropdown_exportToolbox'>Toolbox</a>
-          <a id='dropdown_exportPreload'>Workspace Blocks</a>
-          <a id='dropdown_exportOptions'>Inject Options</a>
-          <a id='dropdown_exportAll'>All</a>
-        </div>
-        </div>
-
-        <button id="button_print">Print Toolbox</button>
-        <button id="button_clear">Clear Toolbox</button>
-      </p>
-    </td>
-  </tr>
-</table>
-
-<section id="createDiv">
-  <p id="editHelpText">Drag blocks into your toolbox:</p>
-  <table id='workspaceTabs'>
-    <td id="tab_toolbox" class="tabon">Toolbox</td>
-    <td id="tab_preload" class="taboff">Workspace</td>
-  </table>
-  <section id="toolbox_section">
-    <div id="toolbox_blocks" class="content"></div>
-    <div id='disable_div'></div>
-  </section>
-
-  <aside id="toolbox_div">
-    <table id="categoryTable">
-      <td id="tab_help">Your categories will appear here</td>
-    </table>
-    <p>&nbsp;</p>
-
-    <div class='dropdown'>
-    <button id="button_add">+</button>
-    <div id="dropdownDiv_add" class="dropdown-content">
-      <a id='dropdown_newCategory'>New Category</a>
-      <a id='dropdown_loadCategory'>Standard Category</a>
-      <a id='dropdown_separator'>Separator</a>
-    </div>
-    </div>
-
-    <button id="button_remove">-</button>
-
-    <button id="button_up">&#8593;</button>
-    <button id="button_down">&#8595;</button>
-
-    <p>&nbsp;</p>
-    <div class='dropdown'>
-    <button id="button_editCategory">Edit Category</button>
-    <div id="dropdownDiv_editCategory" class="dropdown-content">
-      <a id='dropdown_name'>Name</a>
-      <a id='dropdown_color'>Color</a>
-    </div>
-    </div>
-
-  </aside>
-
-  <div class='dropdown'>
-    <button id="button_editShadow">Edit Block</button>
-    <div id="dropdownDiv_editShadowAdd" class="dropdown-content">
-      <a id='dropdown_addShadow'>Add Shadow</a>
-    </div>
-    <div id="dropdownDiv_editShadowRemove" class="dropdown-content">
-      <a id='dropdown_removeShadow'>Remove Shadow</a>
-    </div>
-  </div>
-
-  <aside id='preload_div' style='display:none'>
-    <p>Configure the <a href="https://developers.google.com/blockly/guides/get-started/web">options</a> for your Blockly inject call.</p>
-    <button class="small" id="button_standardOptions">Standard Options</button>
-    <form id="workspace_options">
-      <input type="checkbox" id="option_collapse_checkbox" name="collapse">Collapsible Blocks<br>
-      <input type="checkbox" id="option_comments_checkbox" name="comments">Comments for Blocks<br>
-      <input type="checkbox" id="option_css_checkbox" name="css">Use Blockly CSS<br>
-      <input type="checkbox" id="option_disable_checkbox" name="disable">Disabled Blocks<br>
-      <input type="checkbox" id="option_grid_checkbox" name="grid">Use Grid<br>
-      <div id="grid_options" name="grid" style="display:none">
-        Spacing <input type="text" id="gridOption_spacing_text" name="spacing" value="0"><br>
-        Length <input type="text" id="gridOption_length_text" name="length" value="1"><br>
-        Color <input type="text" id="gridOption_colour_text" name="colour" value="#888"><br>
-        <input type="checkbox" id="gridOption_snap_checkbox" value="grid_snap_checkbox" name="snap">Snap<br>
-      </div>
-      Max Blocks <input type="text" id="option_maxBlocks_text" name="maxBlocks" value="Infinity"><br>
-      Path to Blockly Media <input type="text" id="option_media_text" name="media"><br>
-      <input type="checkbox" id="option_readOnly_checkbox" name="readOnly">Read Only<br>
-      <input type="checkbox" id="option_rtl_checkbox" name="rtl">Layout with RTL<br>
-      <input type="checkbox" id="option_scrollbars_checkbox" name="scrollbars">Scrollbars<br>
-      <input type="checkbox" id="option_sounds_checkbox" name="sounds">Sounds<br>
-      <input type="checkbox" id="option_trashcan_checkbox" name="trashcan">Trashcan<br>
-      <input type="checkbox" id="option_zoom_checkbox" name="zoom">Zoom<br>
-      <div id="zoom_options" name="zoom" style="display:none">
-        <input type="checkbox" id="zoomOption_controls_checkbox" name="controls">Zoom Controls<br>
-        <input type="checkbox" id="zoomOption_wheel_checkbox" name="wheel">Zoom Wheel<br>
-        Start Scale <input type="text" id="zoomOption_startScale_text" name="startScale" value="1.0"><br>
-        Max Scale <input type="text" id="zoomOption_maxScale_text" name="maxScale" value="3"><br>
-        Min Scale <input type="text" id="zoomOption_minScale_text" name="minScale" value="0.3"><br>
-        Scale Speed <input type="text" id="zoomOption_scaleSpeed_text" name="scaleSpeed" value="1.2"><br>
-      </div>
-    </form>
-  </aside>
-
-</section>
-
-<aside id="previewDiv">
-  <p>Preview your workspace:</p>
-  <div id="preview_blocks" class="content"></div>
-</aside>
-
-<xml id="toolbox" style="display: none">
-  <category name="Logic" colour="210">
-    <block type="controls_if"></block>
-    <block type="logic_compare"></block>
-    <block type="logic_operation"></block>
-    <block type="logic_negate"></block>
-    <block type="logic_boolean"></block>
-    <block type="logic_null"></block>
-    <block type="logic_ternary"></block>
-  </category>
-  <category name="Loops" colour="120">
-    <block type="controls_repeat_ext">
-      <value name="TIMES">
-        <shadow type="math_number">
-          <field name="NUM">10</field>
-        </shadow>
-      </value>
-    </block>
-    <block type="controls_whileUntil"></block>
-    <block type="controls_for">
-      <value name="FROM">
-        <shadow type="math_number">
-          <field name="NUM">1</field>
-        </shadow>
-      </value>
-      <value name="TO">
-        <shadow type="math_number">
-          <field name="NUM">10</field>
-        </shadow>
-      </value>
-      <value name="BY">
-        <shadow type="math_number">
-          <field name="NUM">1</field>
-        </shadow>
-      </value>
-    </block>
-    <block type="controls_forEach"></block>
-    <block type="controls_flow_statements"></block>
-  </category>
-  <category name="Math" colour="230">
-    <block type="math_number"></block>
-    <block type="math_arithmetic">
-      <value name="A">
-        <shadow type="math_number">
-          <field name="NUM">1</field>
-        </shadow>
-      </value>
-      <value name="B">
-        <shadow type="math_number">
-          <field name="NUM">1</field>
-        </shadow>
-      </value>
-    </block>
-    <block type="math_single">
-      <value name="NUM">
-        <shadow type="math_number">
-          <field name="NUM">9</field>
-        </shadow>
-      </value>
-    </block>
-    <block type="math_trig">
-      <value name="NUM">
-        <shadow type="math_number">
-          <field name="NUM">45</field>
-        </shadow>
-      </value>
-    </block>
-    <block type="math_constant"></block>
-    <block type="math_number_property">
-      <value name="NUMBER_TO_CHECK">
-        <shadow type="math_number">
-          <field name="NUM">0</field>
-        </shadow>
-      </value>
-    </block>
-    <block type="math_change">
-      <value name="DELTA">
-        <shadow type="math_number">
-          <field name="NUM">1</field>
-        </shadow>
-      </value>
-    </block>
-    <block type="math_round">
-      <value name="NUM">
-        <shadow type="math_number">
-          <field name="NUM">3.1</field>
-        </shadow>
-      </value>
-    </block>
-    <block type="math_on_list"></block>
-    <block type="math_modulo">
-      <value name="DIVIDEND">
-        <shadow type="math_number">
-          <field name="NUM">64</field>
-        </shadow>
-      </value>
-      <value name="DIVISOR">
-        <shadow type="math_number">
-          <field name="NUM">10</field>
-        </shadow>
-      </value>
-    </block>
-    <block type="math_constrain">
-      <value name="VALUE">
-        <shadow type="math_number">
-          <field name="NUM">50</field>
-        </shadow>
-      </value>
-      <value name="LOW">
-        <shadow type="math_number">
-          <field name="NUM">1</field>
-        </shadow>
-      </value>
-      <value name="HIGH">
-        <shadow type="math_number">
-          <field name="NUM">100</field>
-        </shadow>
-      </value>
-    </block>
-    <block type="math_random_int">
-      <value name="FROM">
-        <shadow type="math_number">
-          <field name="NUM">1</field>
-        </shadow>
-      </value>
-      <value name="TO">
-        <shadow type="math_number">
-          <field name="NUM">100</field>
-        </shadow>
-      </value>
-    </block>
-    <block type="math_random_float"></block>
-  </category>
-  <category name="Text" colour="160">
-    <block type="text"></block>
-    <block type="text_join"></block>
-    <block type="text_append">
-      <value name="TEXT">
-        <shadow type="text"></shadow>
-      </value>
-    </block>
-    <block type="text_length">
-      <value name="VALUE">
-        <shadow type="text">
-          <field name="TEXT">abc</field>
-        </shadow>
-      </value>
-    </block>
-    <block type="text_isEmpty">
-      <value name="VALUE">
-        <shadow type="text">
-          <field name="TEXT"></field>
-        </shadow>
-      </value>
-    </block>
-    <block type="text_indexOf">
-      <value name="VALUE">
-        <block type="variables_get">
-          <field name="VAR">text</field>
-        </block>
-      </value>
-      <value name="FIND">
-        <shadow type="text">
-          <field name="TEXT">abc</field>
-        </shadow>
-      </value>
-    </block>
-    <block type="text_charAt">
-      <value name="VALUE">
-        <block type="variables_get">
-          <field name="VAR">text</field>
-        </block>
-      </value>
-    </block>
-    <block type="text_getSubstring">
-      <value name="STRING">
-        <block type="variables_get">
-          <field name="VAR">text</field>
-        </block>
-      </value>
-    </block>
-    <block type="text_changeCase">
-      <value name="TEXT">
-        <shadow type="text">
-          <field name="TEXT">abc</field>
-        </shadow>
-      </value>
-    </block>
-    <block type="text_trim">
-      <value name="TEXT">
-        <shadow type="text">
-          <field name="TEXT">abc</field>
-        </shadow>
-      </value>
-    </block>
-    <block type="text_print">
-      <value name="TEXT">
-        <shadow type="text">
-          <field name="TEXT">abc</field>
-        </shadow>
-      </value>
-    </block>
-    <block type="text_prompt_ext">
-      <value name="TEXT">
-        <shadow type="text">
-          <field name="TEXT">abc</field>
-        </shadow>
-      </value>
-    </block>
-  </category>
-  <category name="Lists" colour="260">
-    <block type="lists_create_with">
-      <mutation items="0"></mutation>
-    </block>
-    <block type="lists_create_with"></block>
-    <block type="lists_repeat">
-      <value name="NUM">
-        <shadow type="math_number">
-          <field name="NUM">5</field>
-        </shadow>
-      </value>
-    </block>
-    <block type="lists_length"></block>
-    <block type="lists_isEmpty"></block>
-    <block type="lists_indexOf">
-      <value name="VALUE">
-        <block type="variables_get">
-          <field name="VAR">list</field>
-        </block>
-      </value>
-    </block>
-    <block type="lists_getIndex">
-      <value name="VALUE">
-        <block type="variables_get">
-          <field name="VAR">list</field>
-        </block>
-      </value>
-    </block>
-    <block type="lists_setIndex">
-      <value name="LIST">
-        <block type="variables_get">
-          <field name="VAR">list</field>
-        </block>
-      </value>
-    </block>
-    <block type="lists_getSublist">
-      <value name="LIST">
-        <block type="variables_get">
-          <field name="VAR">list</field>
-        </block>
-      </value>
-    </block>
-    <block type="lists_split">
-      <value name="DELIM">
-        <shadow type="text">
-          <field name="TEXT">,</field>
-        </shadow>
-      </value>
-    </block>
-    <block type="lists_sort"></block>
-  </category>
-  <category name="Colour" colour="20">
-    <block type="colour_picker"></block>
-    <block type="colour_random"></block>
-    <block type="colour_rgb">
-      <value name="RED">
-        <shadow type="math_number">
-          <field name="NUM">100</field>
-        </shadow>
-      </value>
-      <value name="GREEN">
-        <shadow type="math_number">
-          <field name="NUM">50</field>
-        </shadow>
-      </value>
-      <value name="BLUE">
-        <shadow type="math_number">
-          <field name="NUM">0</field>
-        </shadow>
-      </value>
-    </block>
-    <block type="colour_blend">
-      <value name="COLOUR1">
-        <shadow type="colour_picker">
-          <field name="COLOUR">#ff0000</field>
-        </shadow>
-      </value>
-      <value name="COLOUR2">
-        <shadow type="colour_picker">
-          <field name="COLOUR">#3333ff</field>
-        </shadow>
-      </value>
-      <value name="RATIO">
-        <shadow type="math_number">
-          <field name="NUM">0.5</field>
-        </shadow>
-      </value>
-    </block>
-  </category>
-  <sep></sep>
-  <category name="Variables" colour="330" custom="VARIABLE"></category>
-  <category name="Functions" colour="290" custom="PROCEDURE"></category>
-</xml>
-<script type="text/javascript">
-  // Create empty workspace for configuring workspace.
-  var toolboxWorkspace = Blockly.inject('toolbox_blocks',
-    {grid:
-      {spacing: 25,
-       length: 3,
-       colour: '#ccc',
-       snap: true},
-       media: '../../../media/',
-       toolbox: toolbox,
-     });
-  // Create empty workspace for previewing created workspace.
-  var previewWorkspace = Blockly.inject('preview_blocks',
-    {grid:
-      {spacing: 25,
-       length: 3,
-       colour: '#ccc',
-       snap: true},
-     media: '../../../media/',
-     toolbox: '<xml></xml>',
-     zoom:
-       {controls: true,
-        wheel: true}
-    });
-
-  var controller = new WorkspaceFactoryController(toolboxWorkspace, previewWorkspace);
-
-  // Wrappers to attach buttons to method calls for the controller object
-  var addWrapper = function() {
-    document.getElementById('dropdownDiv_add').classList.toggle("show");
-  };
-  var newCategoryWrapper = function() {
-    controller.addCategory();
-    document.getElementById('dropdownDiv_add').classList.remove("show");
-  };
-  var loadCategoryWrapper = function() {
-    controller.loadCategory();
-    document.getElementById('dropdownDiv_add').classList.remove("show");
-  };
-  var separatorWrapper = function() {
-    controller.addSeparator();
-    document.getElementById('dropdownDiv_add').classList.remove("show");
-  };
-  var removeWrapper = function() {
-    controller.removeElement();
-  };
-  var exportWrapper = function() {
-    document.getElementById('dropdownDiv_export').classList.toggle("show");
-    document.getElementById('dropdownDiv_import').classList.remove("show");
-  };
-  var printWrapper = function() {
-    controller.printConfig();
-  };
-  var upWrapper = function() {
-    controller.moveElement(-1);
-  };
-  var downWrapper = function() {
-    controller.moveElement(1);
-  };
-  var editCategoryWrapper = function() {
-    document.getElementById('dropdownDiv_editCategory').classList.toggle("show");
-  };
-  var nameWrapper = function() {
-    controller.changeCategoryName();
-    document.getElementById('dropdownDiv_editCategory').classList.remove("show");
-  };
-  var shadowAddWrapper = function() {
-    controller.addShadow();
-    document.getElementById('dropdownDiv_editShadowAdd').classList.remove("show");
-  };
-  var shadowRemoveWrapper = function() {
-    controller.removeShadow();
-    document.getElementById('dropdownDiv_editShadowRemove').classList.remove("show");
-    // If turning invalid shadow block back to normal block, remove warning and disable
-    // block editing privileges.
-    Blockly.selected.setWarningText(null);
-    if (!Blockly.selected.getSurroundParent()) {
-      document.getElementById('button_editShadow').disabled = true;
-    }
-  };
-  var editShadowWrapper = function() {
-    if (Blockly.selected) {
-      // Can only edit blocks when a block is selected.
-
-      if (!controller.isUserGenShadowBlock(Blockly.selected.id) && Blockly.selected.getSurroundParent() != null) {
-        // If a block is selected that could be a valid shadow block (not a shadow block,
-        // has a surrounding parent), let the user make it a shadow block.
-        // Use toggle instead of add so that the user can click the button again
-        // to make the dropdown disappear without clicking one of the options.
-        document.getElementById('dropdownDiv_editShadowRemove').classList.remove("show");
-        document.getElementById('dropdownDiv_editShadowAdd').classList.toggle("show");
-      } else {
-        // If the block is a shadow block, let the user make it a normal block.
-        document.getElementById('dropdownDiv_editShadowAdd').classList.remove("show");
-        document.getElementById('dropdownDiv_editShadowRemove').classList.toggle("show");
-      }
-    }
-  };
-  var importWrapper = function() {
-    document.getElementById('dropdownDiv_import').classList.toggle("show");
-    document.getElementById('dropdownDiv_export').classList.remove("show");
-  };
-  var clearWrapper = function() {
-    controller.clearToolbox();
-  };
-  var editToolboxWrapper = function() {
-    controller.setMode(WorkspaceFactoryController.MODE_TOOLBOX);
-  };
-  var editPreloadWrapper = function() {
-    controller.setMode(WorkspaceFactoryController.MODE_PRELOAD);
-  };
-  var importToolboxWrapper = function(e) {
-    controller.importFile(event.target.files[0], WorkspaceFactoryController.MODE_TOOLBOX);
-    document.getElementById('dropdownDiv_import').classList.remove("show");
-  };
-  var importPreloadWrapper = function(e) {
-    controller.importFile(event.target.files[0], WorkspaceFactoryController.MODE_PRELOAD);
-    document.getElementById('dropdownDiv_import').classList.remove("show");
-  };
-  var editToolboxWrapper = function() {
-    controller.setMode(WorkspaceFactoryController.MODE_TOOLBOX);
-  };
-  var editPreloadWrapper = function() {
-    controller.setMode(WorkspaceFactoryController.MODE_PRELOAD);
-  };
-  var exportToolboxWrapper = function() {
-    controller.exportFile(WorkspaceFactoryController.MODE_TOOLBOX);
-    document.getElementById('dropdownDiv_export').classList.remove("show");
-  }
-  var exportPreloadWrapper = function() {
-    controller.exportXmlFile(WorkspaceFactoryController.MODE_PRELOAD);
-    document.getElementById('dropdownDiv_export').classList.remove("show");
-  }
-  var exportOptionsWrapper = function() {
-    controller.exportOptionsFile();
-    document.getElementById('dropdownDiv_export').classList.remove("show");
-  }
-  var exportAllWrapper = function() {
-    controller.exportXmlFile(WorkspaceFactoryController.MODE_TOOLBOX);
-    controller.exportXmlFile(WorkspaceFactoryController.MODE_PRELOAD);
-    controller.exportOptionsFile();
-    document.getElementById('dropdownDiv_export').classList.remove("show");
-  }
-  var standardOptionsWrapper = function() {
-    controller.setStandardOptionsAndUpdate();
-  };
-
-  document.getElementById('button_add').addEventListener
-      ('click', addWrapper);
-  document.getElementById('dropdown_newCategory').addEventListener
-      ('click', newCategoryWrapper);
-  document.getElementById('dropdown_loadCategory').addEventListener
-      ('click', loadCategoryWrapper);
-  document.getElementById('dropdown_separator').addEventListener
-      ('click', separatorWrapper);
-  document.getElementById('button_remove').addEventListener
-      ('click', removeWrapper);
-  document.getElementById('dropdown_exportToolbox').addEventListener
-      ('click', exportToolboxWrapper);
-  document.getElementById('dropdown_exportPreload').addEventListener
-      ('click', exportPreloadWrapper);
-  document.getElementById('dropdown_exportOptions').addEventListener
-      ('click', exportOptionsWrapper);
-  document.getElementById('dropdown_exportAll').addEventListener
-      ('click', exportAllWrapper);
-  document.getElementById('button_export').addEventListener
-      ('click', exportWrapper);
-  document.getElementById('button_print').addEventListener
-      ('click', printWrapper);
-  document.getElementById('button_up').addEventListener
-      ('click', upWrapper);
-  document.getElementById('button_down').addEventListener
-      ('click', downWrapper);
-  document.getElementById('button_editCategory').addEventListener
-      ('click', editCategoryWrapper);
-  document.getElementById('button_editShadow').addEventListener
-      ('click', editShadowWrapper);
-  document.getElementById('dropdown_name').addEventListener
-      ('click', nameWrapper);
-  document.getElementById('button_import').addEventListener
-      ('click', importWrapper);
-  document.getElementById('input_importToolbox').addEventListener
-      ('change', importToolboxWrapper);
-  document.getElementById('input_importPreload').addEventListener
-      ('change', importPreloadWrapper);
-  document.getElementById('button_clear').addEventListener
-      ('click', clearWrapper);
-  document.getElementById('dropdown_addShadow').addEventListener
-      ('click', shadowAddWrapper);
-  document.getElementById('dropdown_removeShadow').addEventListener
-      ('click', shadowRemoveWrapper);
-  document.getElementById('tab_toolbox').addEventListener
-      ('click', editToolboxWrapper);
-  document.getElementById('tab_preload').addEventListener
-      ('click', editPreloadWrapper);
-  document.getElementById('button_standardOptions').addEventListener
-      ('click', standardOptionsWrapper);
-
-  // Use up and down arrow keys to move categories.
-  // TODO(evd2014): When merge with next CL for editing preloaded blocks, make sure
-  // mode is toolbox.
-  window.addEventListener('keydown', function(e) {
-    if (e.keyCode == 38) {    // Arrow up.
-      upWrapper();
-    } else if (e.keyCode == 40) {   // Arrow down.
-      downWrapper();
-    }
-  });
-
-  // Disable category editing buttons until categories are created.
-  document.getElementById('button_remove').disabled = true;
-  document.getElementById('button_up').disabled = true;
-  document.getElementById('button_down').disabled = true;
-  document.getElementById('button_editCategory').disabled = true;
-  document.getElementById('button_editShadow').disabled = true;
-
-  toolboxWorkspace.addChangeListener(function(e) {
-    // Listen for Blockly move and delete events to update preview.
-    // Not listening for Blockly create events because causes the user to drop
-    // blocks when dragging them into workspace. Could cause problems if ever load
-    // blocks into workspace directly without calling updatePreview.
-    if (e.type == Blockly.Events.MOVE || e.type == Blockly.Events.DELETE) {
-      controller.saveStateFromWorkspace();
-      controller.updatePreview();
-    }
-
-    // Listen for Blockly UI events to correctly enable the "Edit Block" button.
-    // Only enable "Edit Block" when a block is selected and it has a surrounding
-    // parent, meaning it is nested in another block (blocks that are not
-    // nested in parents cannot be shadow blocks).
-    if (e.type == Blockly.Events.MOVE || (e.type == Blockly.Events.UI &&
-        e.element == 'selected')) {
-      var selected = Blockly.selected;
-
-      if (selected != null && selected.getSurroundParent() != null) {
-
-        // A valid shadow block is selected. Enable block editing and remove warnings.
-        document.getElementById('button_editShadow').disabled = false;
-        Blockly.selected.setWarningText(null);
-      } else {
-        if (selected != null && controller.isUserGenShadowBlock(selected.id)) {
-
-        // Provide warning if shadow block is moved and is no longer a valid shadow block.
-          Blockly.selected.setWarningText('Shadow blocks must be nested inside other' +
-              ' blocks to be displayed.');
-
-          // Give editing options so that the user can make an invalid shadow block
-          // a normal block.
-          document.getElementById('button_editShadow').disabled = false;
-        } else {
-
-          // No block selected that is a shadow block or could be a valid shadow block.
-          // Disable block editing.
-          document.getElementById('button_editShadow').disabled = true;
-          document.getElementById('dropdownDiv_editShadowRemove').classList.remove("show");
-          document.getElementById('dropdownDiv_editShadowAdd').classList.remove("show");
-        }
-      }
-    }
-
-    // Convert actual shadow blocks added from the toolbox to user-generated shadow blocks.
-    if (e.type == Blockly.Events.CREATE) {
-      controller.convertShadowBlocks();
-    }
-  });
-
-  // Add event listeners for checkboxes and text fields for configuring the Options object.
-
-  // Checking the grid checkbox displays grid options and updates the options
-  // object.
-  document.getElementById('option_grid_checkbox').addEventListener('change', function(e) {
-      document.getElementById('grid_options').style.display = document.getElementById('option_grid_checkbox').checked ? 'block' : 'none';
-      controller.generateNewOptions();
-  });
-
-  // Checking the grid checkbox displays zoom options and updates the options
-  // object.
-  document.getElementById('option_zoom_checkbox').addEventListener('change', function(e) {
-      document.getElementById('zoom_options').style.display = document.getElementById('option_zoom_checkbox').checked ? 'block' : 'none';
-      controller.generateNewOptions();
-  });
-
-  var optionListener = function() {
-    controller.generateNewOptions();
-  };
-
-  // Add event listeners to generate new options for each options input field.
-  document.getElementById('option_collapse_checkbox').addEventListener('change', optionListener);
-  document.getElementById('option_comments_checkbox').addEventListener('change', optionListener);
-  document.getElementById('option_css_checkbox').addEventListener('change', optionListener);
-  document.getElementById('option_disable_checkbox').addEventListener('change', optionListener);
-  document.getElementById('gridOption_spacing_text').addEventListener('change', optionListener);
-  document.getElementById('gridOption_length_text').addEventListener('change', optionListener);
-  document.getElementById('gridOption_colour_text').addEventListener('change', optionListener);
-  document.getElementById('gridOption_snap_checkbox').addEventListener('change', optionListener);
-  document.getElementById('option_maxBlocks_text').addEventListener('change', optionListener);
-  document.getElementById('option_media_text').addEventListener('change', optionListener);
-  document.getElementById('option_readOnly_checkbox').addEventListener('change', optionListener);
-  document.getElementById('option_rtl_checkbox').addEventListener('change', optionListener);
-  document.getElementById('option_scrollbars_checkbox').addEventListener('change', optionListener);
-  document.getElementById('option_sounds_checkbox').addEventListener('change', optionListener);
-  document.getElementById('option_trashcan_checkbox').addEventListener('change', optionListener);
-  document.getElementById('zoomOption_controls_checkbox').addEventListener('change', optionListener);
-  document.getElementById('zoomOption_wheel_checkbox').addEventListener('change', optionListener);
-  document.getElementById('zoomOption_startScale_text').addEventListener('change', optionListener);
-  document.getElementById('zoomOption_maxScale_text').addEventListener('change', optionListener);
-  document.getElementById('zoomOption_minScale_text').addEventListener('change', optionListener);
-  document.getElementById('zoomOption_scaleSpeed_text').addEventListener('change', optionListener);
-
-  // Check standard options and apply the changes to update the view.
-  controller.setStandardOptionsAndUpdate();
-
-</script>
-</html>

demos/blockfactory/workspacefactory/wfactory_controller.js

@@ -277,7 +277,7 @@ WorkspaceFactoryController.prototype.switchElement = function(id) {
 /**
  * Switches to a new tab for the element by ID. Helper for switchElement.
  * Updates selected, clears the workspace and clears undo, loads a new element.
- * @param {string} id ID of category to load
+ * @param {string} id ID of category to load.
  */
 WorkspaceFactoryController.prototype.clearAndLoadElement = function(id) {
   // Unselect current tab if switching to and from an element.
@@ -1242,7 +1242,7 @@ WorkspaceFactoryController.prototype.setBlockLibCategory =
     function(categoryXml, libBlockTypes) {
   var blockLibCategory = document.getElementById('blockLibCategory');
 
-  // Set category id so that it can be easily replaced, and set a standard,
+  // Set category ID so that it can be easily replaced, and set a standard,
   // arbitrary block library color.
   categoryXml.setAttribute('id', 'blockLibCategory');
   categoryXml.setAttribute('colour', 260);

demos/blockfactory/workspacefactory/wfactory_view.js

@@ -121,7 +121,7 @@ WorkspaceFactoryView.prototype.updateState = function(selectedIndex, selected) {
 };
 
 /**
- * Determines the DOM id for a category given its name.
+ * Determines the DOM ID for a category given its name.
  * @param {string} name Name of category
  * @return {string} ID of category tab
  */
@@ -146,8 +146,8 @@ WorkspaceFactoryView.prototype.setCategoryTabSelection =
 /**
  * Used to bind a click to a certain DOM element (used for category tabs).
  * Taken directly from code.js
- * @param {string|!Element} e1 tab element or corresponding id string
- * @param {!Function} func Function to be executed on click
+ * @param {string|!Element} e1 Tab element or corresponding ID string.
+ * @param {!Function} func Function to be executed on click.
  */
 WorkspaceFactoryView.prototype.bindClick = function(el, func) {
   if (typeof el == 'string') {

demos/index.html

@@ -199,12 +199,12 @@
     <tr>
       <td>
         <a href="blockfactory/index.html">
-          <img src="blockfactory/icon.png" height=80 width=100>
+          <img src="blockfactory/devtools.png" height=96 width=184>
         </a>
       </td>
       <td>
-        <div><a href="blockfactory/index.html">Block Factory</a></div>
-        <div>Build custom blocks using Blockly.</div>
+        <div><a href="blockfactory/index.html">Blockly Developer Tools</a></div>
+        <div>Build custom blocks and setup a toolbox using Blockly.</div>
       </td>
     </tr>
   </table>