Merge branch 'develop'

2026-01-11 10:57:07 +01:00 · 2016-10-14 09:32:58 -07:00
parent 4014c27448 728284ab61
commit c0c4359661
19 changed files with 436 additions and 637 deletions
--- a/blockly_compressed.js
+++ b/blockly_compressed.js
@@ -981,8 +981,8 @@ Blockly.ConnectionDB.prototype.searchForClosest=function(a,b,c){if(!this.length)
 Blockly.ConnectionDB.init=function(a){var b=[];b[Blockly.INPUT_VALUE]=new Blockly.ConnectionDB;b[Blockly.OUTPUT_VALUE]=new Blockly.ConnectionDB;b[Blockly.NEXT_STATEMENT]=new Blockly.ConnectionDB;b[Blockly.PREVIOUS_STATEMENT]=new Blockly.ConnectionDB;a.connectionDBList=b};Blockly.constants={};Blockly.DRAG_RADIUS=5;Blockly.SNAP_RADIUS=20;Blockly.BUMP_DELAY=250;Blockly.COLLAPSE_CHARS=30;Blockly.LONGPRESS=750;Blockly.SOUND_LIMIT=100;Blockly.HSV_SATURATION=.45;Blockly.HSV_VALUE=.65;Blockly.SPRITE={width:96,height:124,url:"sprites.png"};Blockly.SVG_NS="http://www.w3.org/2000/svg";Blockly.HTML_NS="http://www.w3.org/1999/xhtml";Blockly.INPUT_VALUE=1;Blockly.OUTPUT_VALUE=2;Blockly.NEXT_STATEMENT=3;Blockly.PREVIOUS_STATEMENT=4;Blockly.DUMMY_INPUT=5;Blockly.ALIGN_LEFT=-1;
 Blockly.ALIGN_CENTRE=0;Blockly.ALIGN_RIGHT=1;Blockly.DRAG_NONE=0;Blockly.DRAG_STICKY=1;Blockly.DRAG_BEGIN=1;Blockly.DRAG_FREE=2;Blockly.OPPOSITE_TYPE=[];Blockly.OPPOSITE_TYPE[Blockly.INPUT_VALUE]=Blockly.OUTPUT_VALUE;Blockly.OPPOSITE_TYPE[Blockly.OUTPUT_VALUE]=Blockly.INPUT_VALUE;Blockly.OPPOSITE_TYPE[Blockly.NEXT_STATEMENT]=Blockly.PREVIOUS_STATEMENT;Blockly.OPPOSITE_TYPE[Blockly.PREVIOUS_STATEMENT]=Blockly.NEXT_STATEMENT;Blockly.TOOLBOX_AT_TOP=0;Blockly.TOOLBOX_AT_BOTTOM=1;
 Blockly.TOOLBOX_AT_LEFT=2;Blockly.TOOLBOX_AT_RIGHT=3;Blockly.Options=function(a){var b=!!a.readOnly;if(b)var c=null,d=!1,e=!1,f=!1,g=!1,h=!1,k=!1;else c=Blockly.Options.parseToolboxTree(a.toolbox),d=!(!c||!c.getElementsByTagName("category").length),e=a.trashcan,void 0===e&&(e=d),f=a.collapse,void 0===f&&(f=d),g=a.comments,void 0===g&&(g=d),h=a.disable,void 0===h&&(h=d),k=a.sounds,void 0===k&&(k=!0);var m=!!a.rtl,p=a.horizontalLayout;void 0===p&&(p=!1);var l=a.toolboxPosition,l="end"===l?!1:!0,l=p?l?Blockly.TOOLBOX_AT_TOP:Blockly.TOOLBOX_AT_BOTTOM:l==
-m?Blockly.TOOLBOX_AT_RIGHT:Blockly.TOOLBOX_AT_LEFT,n=a.scrollbars;void 0===n&&(n=d);var q=a.css;void 0===q&&(q=!0);var t="https://blockly-demo.appspot.com/static/media/";a.media?t=a.media:a.path&&(t=a.path+"media/");var r=!a.oneBasedIndex;this.RTL=m;this.oneBasedIndex=r;this.collapse=f;this.comments=g;this.disable=h;this.readOnly=b;this.maxBlocks=a.maxBlocks||Infinity;this.pathToMedia=t;this.hasCategories=d;this.hasScrollbars=n;this.hasTrashcan=e;this.hasSounds=k;this.hasCss=q;this.horizontalLayout=
-p;this.languageTree=c;this.gridOptions=Blockly.Options.parseGridOptions_(a);this.zoomOptions=Blockly.Options.parseZoomOptions_(a);this.toolboxPosition=l};Blockly.Options.prototype.parentWorkspace=null;Blockly.Options.prototype.setMetrics=null;Blockly.Options.prototype.getMetrics=null;
+m?Blockly.TOOLBOX_AT_RIGHT:Blockly.TOOLBOX_AT_LEFT,n=a.scrollbars;void 0===n&&(n=d);var q=a.css;void 0===q&&(q=!0);var t="https://blockly-demo.appspot.com/static/media/";a.media?t=a.media:a.path&&(t=a.path+"media/");var r=void 0===a.oneBasedIndex?!0:!!a.oneBasedIndex;this.RTL=m;this.oneBasedIndex=r;this.collapse=f;this.comments=g;this.disable=h;this.readOnly=b;this.maxBlocks=a.maxBlocks||Infinity;this.pathToMedia=t;this.hasCategories=d;this.hasScrollbars=n;this.hasTrashcan=e;this.hasSounds=k;this.hasCss=
+q;this.horizontalLayout=p;this.languageTree=c;this.gridOptions=Blockly.Options.parseGridOptions_(a);this.zoomOptions=Blockly.Options.parseZoomOptions_(a);this.toolboxPosition=l};Blockly.Options.prototype.parentWorkspace=null;Blockly.Options.prototype.setMetrics=null;Blockly.Options.prototype.getMetrics=null;
 Blockly.Options.parseZoomOptions_=function(a){a=a.zoom||{};var b={};b.controls=void 0===a.controls?!1:!!a.controls;b.wheel=void 0===a.wheel?!1:!!a.wheel;b.startScale=void 0===a.startScale?1:parseFloat(a.startScale);b.maxScale=void 0===a.maxScale?3:parseFloat(a.maxScale);b.minScale=void 0===a.minScale?.3:parseFloat(a.minScale);b.scaleSpeed=void 0===a.scaleSpeed?1.2:parseFloat(a.scaleSpeed);return b};
 Blockly.Options.parseGridOptions_=function(a){a=a.grid||{};var b={};b.spacing=parseFloat(a.spacing)||0;b.colour=a.colour||"#888";b.length=parseFloat(a.length)||1;b.snap=0<b.spacing&&!!a.snap;return b};Blockly.Options.parseToolboxTree=function(a){a?("string"!=typeof a&&("undefined"==typeof XSLTProcessor&&a.outerHTML?a=a.outerHTML:a instanceof Element||(a=null)),"string"==typeof a&&(a=Blockly.Xml.textToDom(a))):a=null;return a};Blockly.ScrollbarPair=function(a){this.workspace_=a;this.hScroll=new Blockly.Scrollbar(a,!0,!0);this.vScroll=new Blockly.Scrollbar(a,!1,!0);this.corner_=Blockly.createSvgElement("rect",{height:Blockly.Scrollbar.scrollbarThickness,width:Blockly.Scrollbar.scrollbarThickness,"class":"blocklyScrollbarBackground"},null);Blockly.Scrollbar.insertAfter_(this.corner_,a.getBubbleCanvas())};Blockly.ScrollbarPair.prototype.oldHostMetrics_=null;
 Blockly.ScrollbarPair.prototype.dispose=function(){goog.dom.removeNode(this.corner_);this.oldHostMetrics_=this.workspace_=this.corner_=null;this.hScroll.dispose();this.hScroll=null;this.vScroll.dispose();this.vScroll=null};
@@ -1048,7 +1048,7 @@ a.absoluteTop-this.HEIGHT_-this.bottom_,a.toolboxPosition==Blockly.TOOLBOX_AT_BO
 // Copyright 2014 Google Inc.  Apache License 2.0
 Blockly.WorkspaceSvg=function(a){Blockly.WorkspaceSvg.superClass_.constructor.call(this,a);this.getMetrics=a.getMetrics||Blockly.WorkspaceSvg.getTopLevelWorkspaceMetrics_;this.setMetrics=a.setMetrics||Blockly.WorkspaceSvg.setTopLevelWorkspaceMetrics_;Blockly.ConnectionDB.init(this);this.SOUNDS_=Object.create(null)};goog.inherits(Blockly.WorkspaceSvg,Blockly.Workspace);Blockly.WorkspaceSvg.prototype.resizeHandlerWrapper_=null;Blockly.WorkspaceSvg.prototype.rendered=!0;
 Blockly.WorkspaceSvg.prototype.isFlyout=!1;Blockly.WorkspaceSvg.prototype.isMutator=!1;Blockly.WorkspaceSvg.prototype.dragMode_=Blockly.DRAG_NONE;Blockly.WorkspaceSvg.prototype.scrollX=0;Blockly.WorkspaceSvg.prototype.scrollY=0;Blockly.WorkspaceSvg.prototype.startScrollX=0;Blockly.WorkspaceSvg.prototype.startScrollY=0;Blockly.WorkspaceSvg.prototype.dragDeltaXY_=null;Blockly.WorkspaceSvg.prototype.scale=1;Blockly.WorkspaceSvg.prototype.trashcan=null;Blockly.WorkspaceSvg.prototype.scrollbar=null;
-Blockly.WorkspaceSvg.prototype.lastSound_=null;Blockly.WorkspaceSvg.prototype.lastRecordedPageScroll_=null;Blockly.WorkspaceSvg.prototype.inverseScreenCTM_=null;Blockly.WorkspaceSvg.prototype.getInverseScreenCTM=function(){return this.inverseScreenCTM_};Blockly.WorkspaceSvg.prototype.updateInverseScreenCTM=function(){this.inverseScreenCTM_=this.getParentSvg().getScreenCTM().inverse()};Blockly.WorkspaceSvg.prototype.setResizeHandlerWrapper=function(a){this.resizeHandlerWrapper_=a};
+Blockly.WorkspaceSvg.prototype.lastSound_=null;Blockly.WorkspaceSvg.prototype.lastRecordedPageScroll_=null;Blockly.WorkspaceSvg.prototype.inverseScreenCTM_=null;Blockly.WorkspaceSvg.prototype.getInverseScreenCTM=function(){return this.inverseScreenCTM_};Blockly.WorkspaceSvg.prototype.updateInverseScreenCTM=function(){var a=this.getParentSvg().getScreenCTM();a&&(this.inverseScreenCTM_=a.inverse())};Blockly.WorkspaceSvg.prototype.setResizeHandlerWrapper=function(a){this.resizeHandlerWrapper_=a};
 Blockly.WorkspaceSvg.prototype.createDom=function(a){this.svgGroup_=Blockly.createSvgElement("g",{"class":"blocklyWorkspace"},null);a&&(this.svgBackground_=Blockly.createSvgElement("rect",{height:"100%",width:"100%","class":a},this.svgGroup_),"blocklyMainBackground"==a&&(this.svgBackground_.style.fill="url(#"+this.options.gridPattern.id+")"));this.svgBlockCanvas_=Blockly.createSvgElement("g",{"class":"blocklyBlockCanvas"},this.svgGroup_,this);this.svgBubbleCanvas_=Blockly.createSvgElement("g",{"class":"blocklyBubbleCanvas"},
 this.svgGroup_,this);a=Blockly.Scrollbar.scrollbarThickness;this.options.hasTrashcan&&(a=this.addTrashcan_(a));this.options.zoomOptions&&this.options.zoomOptions.controls&&(a=this.addZoomControls_(a));if(!this.isFlyout){Blockly.bindEventWithChecks_(this.svgGroup_,"mousedown",this,this.onMouseDown_);var b=this;Blockly.bindEventWithChecks_(this.svgGroup_,"touchstart",null,function(a){Blockly.longStart_(a,b)});this.options.zoomOptions&&this.options.zoomOptions.wheel&&Blockly.bindEventWithChecks_(this.svgGroup_,
 "wheel",this,this.onMouseWheel_)}this.options.hasCategories?this.toolbox_=new Blockly.Toolbox(this):this.options.languageTree&&this.addFlyout_();this.updateGridPattern_();this.recordDeleteAreas();return this.svgGroup_};
--- a/core/options.js
+++ b/core/options.js
@@ -104,7 +104,11 @@ Blockly.Options = function(options) {
    // 'path' is a deprecated option which has been replaced by 'media'.
    pathToMedia = options['path'] + 'media/';
  }
-  var oneBasedIndex = !options['oneBasedIndex'];
+  if (options['oneBasedIndex'] === undefined) {
+    var oneBasedIndex = true;
+  } else {
+    var oneBasedIndex = !!options['oneBasedIndex'];
+  }

  this.RTL = rtl;
  this.oneBasedIndex = oneBasedIndex;
--- a/core/workspace_svg.js
+++ b/core/workspace_svg.js
@@ -187,7 +187,10 @@ Blockly.WorkspaceSvg.prototype.getInverseScreenCTM = function() {
 * Update the inverted screen CTM.
 */
 Blockly.WorkspaceSvg.prototype.updateInverseScreenCTM = function() {
-  this.inverseScreenCTM_ = this.getParentSvg().getScreenCTM().inverse();
+  var ctm = this.getParentSvg().getScreenCTM();
+  if (ctm) {
+    this.inverseScreenCTM_ = ctm.inverse();
+  }
 };

 /**
--- a/demos/blockfactory/app_controller.js
+++ b/demos/blockfactory/app_controller.js
@@ -145,7 +145,7 @@ AppController.prototype.exportBlockLibraryToFile = function() {

 /**
 * Converts an object mapping block type to XML to text file for output.
- * @param {!Object} blockXmlMap - Object mapping block type to XML.
+ * @param {!Object} blockXmlMap Object mapping block type to XML.
 * @return {string} XML text containing the block XMLs.
 * @private
 */
@@ -367,28 +367,27 @@ AppController.prototype.assignExporterClickHandlers = function() {
  var self = this;
  document.getElementById('button_setBlocks').addEventListener('click',
      function() {
-        document.getElementById('dropdownDiv_setBlocks').classList.toggle("show");
+        self.openModal('dropdownDiv_setBlocks');
      });

  document.getElementById('dropdown_addAllUsed').addEventListener('click',
      function() {
        self.exporter.selectUsedBlocks();
        self.exporter.updatePreview();
-        document.getElementById('dropdownDiv_setBlocks').classList.remove("show");
+        self.closeModal();
      });

  document.getElementById('dropdown_addAllFromLib').addEventListener('click',
      function() {
        self.exporter.selectAllBlocks();
        self.exporter.updatePreview();
-        document.getElementById('dropdownDiv_setBlocks').classList.remove("show");
+        self.closeModal();
      });

  document.getElementById('clearSelectedButton').addEventListener('click',
      function() {
        self.exporter.clearSelectedBlocks();
        self.exporter.updatePreview();
-        document.getElementById('dropdownDiv_setBlocks').classList.remove("show");
      });

  // Export blocks when the user submits the export settings.
@@ -408,14 +407,6 @@ AppController.prototype.assignExporterChangeListeners = function() {
  var blockDefCheck = document.getElementById('blockDefCheck');
  var genStubCheck = document.getElementById('genStubCheck');

-  var blockDefs = document.getElementById('blockDefs');
-  var blockDefSettings = document.getElementById('blockDefSettings');
-  var blockDefElements = [blockDefs, blockDefSettings];
-
-  var genStubs = document.getElementById('genStubs');
-  var genStubSettings = document.getElementById('genStubSettings');
-  var genStubElements = [genStubs, genStubSettings];
-
  // Select the block definitions and generator stubs on default.
  blockDefCheck.checked = true;
  genStubCheck.checked = true;
@@ -423,7 +414,8 @@ AppController.prototype.assignExporterChangeListeners = function() {
  // Checking the block definitions checkbox displays preview of code to export.
  document.getElementById('blockDefCheck').addEventListener('change',
      function(e) {
-        self.ifCheckedDisplay(blockDefCheck, blockDefElements);
+        self.ifCheckedEnable(blockDefCheck.checked,
+            ['blockDefs', 'blockDefSettings']);
      });

  // Preview updates when user selects different block definition format.
@@ -435,7 +427,8 @@ AppController.prototype.assignExporterChangeListeners = function() {
  // Checking the generator stub checkbox displays preview of code to export.
  document.getElementById('genStubCheck').addEventListener('change',
      function(e) {
-        self.ifCheckedDisplay(genStubCheck, genStubElements);
+        self.ifCheckedEnable(genStubCheck.checked,
+            ['genStubs', 'genStubSettings']);
      });

  // Preview updates when user selects different generator stub language.
@@ -446,14 +439,23 @@ AppController.prototype.assignExporterChangeListeners = function() {
 };

 /**
- * If given checkbox is checked, display given elements. Otherwise, hide.
- * @param {!Element} checkbox - Input element of type checkbox.
- * @param {!Array.<!Element>} elementArray - Array of elements to show when
- *    block is checked.
+ * If given checkbox is checked, enable the given elements.  Otherwise, disable.
+ * @param {boolean} enabled True if enabled, false otherwise.
+ * @param {!Array.<string>} idArray Array of element IDs to enable when
+ *    checkbox is checked.
 */
-AppController.prototype.ifCheckedDisplay = function(checkbox, elementArray) {
-  for (var i = 0, element; element = elementArray[i]; i++) {
-    element.style.display = checkbox.checked ? 'block' : 'none';
+AppController.prototype.ifCheckedEnable = function(enabled, idArray) {
+  for (var i = 0, id; id = idArray[i]; i++) {
+    var element = document.getElementById(id);
+    if (enabled) {
+      element.classList.remove('disabled');
+    } else {
+      element.classList.add('disabled');
+    }
+    var fields = element.querySelectorAll('input, textarea, select');
+    for (var j = 0, field; field = fields[j]; j++) {
+      field.disabled = !enabled;
+    }
  }
 };

@@ -485,7 +487,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 +536,7 @@ AppController.prototype.assignBlockFactoryClickHandlers = function() {
      self.blockLibraryController.setNoneSelected();

      // Close the Block Library Dropdown.
-      document.getElementById('dropdownDiv_blockLib').classList.remove('show');
+      self.closeModal();
    });
 };

@@ -629,11 +631,42 @@ 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.
 */
 AppController.prototype.init = function() {
-  // Blockly factory has a dependency on bits of Closure that core Blockly
+  // Block Factory has a dependency on bits of Closure that core Blockly
  // doesn't have. When you run this from file:// without a copy of Closure,
  // it breaks it non-obvious ways.  Warning about this for now until the
  // dependency is broken.
@@ -641,12 +674,13 @@ AppController.prototype.init = function() {
  if (!window.goog.dom.xml) {
    alert('Sorry: Closure dependency not found. We are working on removing ' +
      'this dependency.  In the meantime, you can use our hosted demo\n ' +
-      'https://blockly-demo.appspot.com/static/demos/blocklyfactory/index.html' +
+      'https://blockly-demo.appspot.com/static/demos/blockfactory/index.html' +
      '\nor use these instructions to continue running locally:\n' +
-      'https:developers.google.com/blockly/guides/modify/web/closure');
+      'https://developers.google.com/blockly/guides/modify/web/closure');
    return;
  }

+  var self = this;
  // Handle Blockly Storage with App Engine.
  if ('BlocklyStorage' in window) {
    this.initializeBlocklyStorage();
@@ -656,9 +690,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();
  });
--- a/demos/blockfactory/block_exporter_controller.js
+++ b/demos/blockfactory/block_exporter_controller.js
@@ -40,7 +40,7 @@ goog.require('goog.dom.xml');

 /**
 * BlockExporter Controller Class
- * @param {!BlockLibrary.Storage} blockLibStorage - Block Library Storage.
+ * @param {!BlockLibrary.Storage} blockLibStorage Block Library Storage.
 * @constructor
 */
 BlockExporterController = function(blockLibStorage) {
@@ -61,7 +61,7 @@ BlockExporterController = function(blockLibStorage) {

 /**
 * Set the block library storage object from which exporter exports.
- * @param {!BlockLibraryStorage} blockLibStorage - Block Library Storage object
+ * @param {!BlockLibraryStorage} blockLibStorage Block Library Storage object
 *    that stores the blocks.
 */
 BlockExporterController.prototype.setBlockLibraryStorage =
@@ -71,7 +71,7 @@ BlockExporterController.prototype.setBlockLibraryStorage =

 /**
 * Get the block library storage object from which exporter exports.
- * @return {!BlockLibraryStorage} blockLibStorage - Block Library Storage object
+ * @return {!BlockLibraryStorage} blockLibStorage Block Library Storage object
 *    that stores the blocks.
 */
 BlockExporterController.prototype.getBlockLibraryStorage =
@@ -263,7 +263,7 @@ BlockExporterController.prototype.selectUsedBlocks = function() {

 /**
 * Set the array that holds the block types used in workspace factory.
- * @param {!Array.<string>} usedBlockTypes - Block types used in
+ * @param {!Array.<string>} usedBlockTypes Block types used in
 */
 BlockExporterController.prototype.setUsedBlockTypes =
    function(usedBlockTypes) {
--- a/demos/blockfactory/block_exporter_tools.js
+++ b/demos/blockfactory/block_exporter_tools.js
@@ -236,13 +236,13 @@ BlockExporterTools.prototype.generateCategoryFromBlockLib =
 * Generate selector dom from block library storage. For each block in the
 * library, it has a block option, which consists of a checkbox, a label,
 * and a fixed size preview workspace.
- * @param {!BlockLibraryStorage} blockLibStorage - Block Library Storage object.
- * @param {string} blockSelectorID - ID of the div element that will contain
+ * @param {!BlockLibraryStorage} blockLibStorage Block Library Storage object.
+ * @param {string} blockSelectorId ID of the div element that will contain
 *    the block options.
 * @return {!Object} Map of block type to Block Option object.
 */
 BlockExporterTools.prototype.createBlockSelectorFromLib =
-    function(blockLibStorage, blockSelectorID) {
+    function(blockLibStorage, blockSelectorId) {
  // Object mapping each stored block type to XML.
  var allBlockTypes = blockLibStorage.getBlockTypes();
  var blockXmlMap = blockLibStorage.getBlockXmlMap(allBlockTypes);
@@ -251,7 +251,7 @@ BlockExporterTools.prototype.createBlockSelectorFromLib =
  // them in the exporter workspace.
  this.addBlockDefinitions(blockXmlMap);

-  var blockSelector = document.getElementById(blockSelectorID);
+  var blockSelector = document.getElementById(blockSelectorId);
  // Clear the block selector.
  var child;
  while ((child = blockSelector.firstChild)) {
--- a/demos/blockfactory/block_exporter_view.js
+++ b/demos/blockfactory/block_exporter_view.js
@@ -53,21 +53,6 @@ BlockExporterView.prototype.setBlockOptions = function(blockOptions) {
  this.blockOptions = blockOptions;
 };

-/**
- * Updates the helper text.
- * @param {string} newText New helper text.
- * @param {boolean} opt_append True if appending to helper Text, false if
- *    replacing.
- */
-BlockExporterView.prototype.updateHelperText = function(newText, opt_append) {
-  if (opt_append) {
-    document.getElementById('helperText').textContent =
-        document.getElementById('helperText').textContent + newText;
-  } else {
-    document.getElementById('helperText').textContent = newText;
-  }
-};
-
 /**
 * Updates the helper text to show list of currently selected blocks.
 */
--- a/demos/blockfactory/block_library_controller.js
+++ b/demos/blockfactory/block_library_controller.js
@@ -203,8 +203,7 @@ BlockLibraryController.prototype.getBlockXml = function(blockType) {

 /**
 * Set the block library storage object from which exporter exports.
- * @param {!BlockLibraryStorage} blockLibStorage - Block Library Storage
- *    object.
+ * @param {!BlockLibraryStorage} blockLibStorage Block Library Storage object.
 */
 BlockLibraryController.prototype.setBlockLibraryStorage
    = function(blockLibStorage) {
@@ -276,7 +275,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.
--- a/demos/blockfactory/block_library_view.js
+++ b/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.
@@ -54,23 +52,9 @@ var BlockLibraryView = function() {
 };

 /**
- * 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.
- * @param {boolean} selected - Whether or not the option should be selected on
+ * Creates a node of a given element type and appends to the node with given ID.
+ * @param {string} blockType Type of block.
+ * @param {boolean} selected Whether or not the option should be selected on
 *    the dropdown.
 */
 BlockLibraryView.prototype.addOption = function(blockType, selected) {
@@ -93,7 +77,7 @@ BlockLibraryView.prototype.addOption = function(blockType, selected) {
 /**
 * Sets a given block type to selected and all other blocks to deselected.
 * If null, deselects all blocks.
- * @param {string} blockTypeToSelect - Type of block to select or null.
+ * @param {string} blockTypeToSelect Type of block to select or null.
 */
 BlockLibraryView.prototype.setSelectedBlockType = function(blockTypeToSelect) {
  // Select given block type and deselect all others. Will deselect all blocks
@@ -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);
  }
 };
--- a/demos/blockfactory/block_option.js
+++ b/demos/blockfactory/block_option.js
@@ -35,10 +35,10 @@ goog.require('goog.dom');
 * BlockOption Class
 * A block option includes checkbox, label, and div element that shows a preview
 * of the block.
- * @param {!Element} blockSelector - Scrollable div that will contain the
+ * @param {!Element} blockSelector Scrollable div that will contain the
 *    block options for the selector.
- * @param {string} blockType - Type of block for which to create an option.
- * @param {!Element} previewBlockXml - Xml element containing the preview block.
+ * @param {string} blockType Type of block for which to create an option.
+ * @param {!Element} previewBlockXml XML element containing the preview block.
 * @constructor
 */
 var BlockOption = function(blockSelector, blockType, previewBlockXml) {
--- a/demos/blockfactory/factory.css
+++ b/demos/blockfactory/factory.css
@@ -102,6 +102,10 @@ pre,
  padding: 5px;
 }

+.disabled {
+  color: #888;
+}
+
 button:disabled, .buttonStyle:disabled {
  opacity: 0.6;
 }
@@ -386,11 +390,6 @@ td.taboff:hover {
  font-size: large;
 }

-td {
-  padding: 0;
-  vertical-align: top;
-}
-
 .inputfile {
  height: 0;
  opacity: 0;
@@ -467,12 +466,13 @@ td {

 #preload_div {
  display: table;
-  height: 70%;
-  margin-right: 5%;
+  height: 75%;
+  margin-left: 2%;
+  margin-right: 2%;
  max-height: 500px;
  overflow: hidden;
  overflow-y: scroll;
-  width: 35%;
+  width: 30%;
 }

 #shadowBlockDropdown {
@@ -504,6 +504,17 @@ td {
  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;
@@ -517,19 +528,19 @@ td {
  border: 0;
  text-align: center;
  vertical-align: middle;
-  border-right: 1px solid #000000;
+  border-right: 1px solid #000;
  font-size: 1px;
 }

 .goog-palette-colorswatch {
-  border: 1px solid #000000;
+  border: 1px solid #000;
  height: 13px;
  position: relative;
  width: 15px;
 }

 .goog-palette-cell-hover .goog-palette-colorswatch {
-  border: 1px solid #FFF;
+  border: 1px solid #fff;
 }

 .goog-palette-cell-selected .goog-palette-colorswatch {
@@ -544,6 +555,7 @@ td {

 .goog-popupcolorpicker {
  position: absolute;
+  z-index: 101;  /* On top of the modal Shadow. */
 }

 /* The container <div> - needed to position the dropdown content */
@@ -553,13 +565,13 @@ td {

 /* Dropdown Content (Hidden by Default) */
 .dropdown-content {
-  background-color: #FFF;
+  background-color: #fff;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,.2);
  display: none;
  min-width: 170px;
  opacity: 1;
  position: absolute;
-  z-index: 1;
+  z-index: 101;  /* On top of the modal Shadow. */
 }

 /* Links inside the dropdown */
--- a/demos/blockfactory/factory_utils.js
+++ b/demos/blockfactory/factory_utils.js
@@ -36,11 +36,11 @@ goog.provide('FactoryUtils');

 /**
 * Get block definition code for the current block.
- * @param {string} blockType - Type of block.
- * @param {!Blockly.Block} rootBlock - RootBlock from main workspace in which
+ * @param {string} blockType Type of block.
+ * @param {!Blockly.Block} rootBlock RootBlock from main workspace in which
 *    user uses Block Factory Blocks to create a custom block.
- * @param {string} format - 'JSON' or 'JavaScript'.
- * @param {!Blockly.Workspace} workspace - Where the root block lives.
+ * @param {string} format 'JSON' or 'JavaScript'.
+ * @param {!Blockly.Workspace} workspace Where the root block lives.
 * @return {string} Block definition.
 */
 FactoryUtils.getBlockDefinition = function(blockType, rootBlock, format, workspace) {
@@ -259,7 +259,7 @@ FactoryUtils.formatJson_ = function(blockType, rootBlock) {
 * Update the language code as JavaScript.
 * @param {string} blockType Name of block.
 * @param {!Blockly.Block} rootBlock Factory_base block.
- * @param {!Blockly.Workspace} workspace - Where the root block lives.
+ * @param {!Blockly.Workspace} workspace Where the root block lives.
 * @return {string} Generated language code.
 * @private
 */
@@ -345,7 +345,7 @@ FactoryUtils.formatJavaScript_ = function(blockType, rootBlock, workspace) {
 * Create JS code required to create a top, bottom, or value connection.
 * @param {string} functionName JavaScript function name.
 * @param {string} typeName Name of type input.
- * @param {!Blockly.Workspace} workspace - Where the root block lives.
+ * @param {!Blockly.Workspace} workspace Where the root block lives.
 * @return {string} Line of JavaScript code to create connection.
 * @private
 */
@@ -639,9 +639,9 @@ FactoryUtils.escapeString = function(string) {

 /**
 * Return the uneditable container block that everything else attaches to in
- * given workspace
- * @param {!Blockly.Workspace} workspace - where the root block lives
- * @return {Blockly.Block} root block
+ * given workspace.
+ * @param {!Blockly.Workspace} workspace Where the root block lives.
+ * @return {Blockly.Block} Root block.
 */
 FactoryUtils.getRootBlock = function(workspace) {
  var blocks = workspace.getTopBlocks(false);
@@ -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 (!blockXml1.tagName.toLowerCase() == 'xml' ||
-      !blockXml2.tagName.toLowerCase() == '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 + '.');
  }
@@ -943,7 +943,7 @@ FactoryUtils.isProcedureBlock = function(block) {
 * Returns whether or not a modified block's changes has been saved to the
 * Block Library.
 * TODO(quachtina96): move into the Block Factory Controller once made.
- * @param {!BlockLibraryController} blockLibraryController - Block Library
+ * @param {!BlockLibraryController} blockLibraryController Block Library
 *    Controller storing custom blocks.
 * @return {boolean} True if all changes made to the block have been saved to
 *    the given Block Library.
--- a/demos/blockfactory/index.html
+++ b/demos/blockfactory/index.html
@@ -5,20 +5,19 @@
 <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/messages.js"></script>
+  <script src="../../msg/js/en.js"></script>
  <script src="../../blocks_compressed.js"></script>
+  <script src="../../../closure-library/closure/goog/base.js"></script>
+  <script src="factory_utils.js"></script>
  <script src="workspacefactory/wfactory_model.js"></script>
+  <script src="standard_categories.js"></script>
  <script src="workspacefactory/wfactory_controller.js"></script>
  <script src="workspacefactory/wfactory_view.js"></script>
  <script src="workspacefactory/wfactory_generator.js"></script>
  <script src="workspacefactory/wfactory_init.js"></script>
-  <script src="standard_categories.js"></script>
-  <script src="/storage.js"></script>
-  <script src="../../../closure-library/closure/goog/base.js"></script>
-  <script src="factory_utils.js"></script>
  <script src="block_option.js"></script>
  <script src="factory.js"></script>
  <script src="block_library_view.js"></script>
@@ -29,6 +28,7 @@
  <script src="block_exporter_controller.js"></script>
  <script src="blocks.js"></script>
  <script src="app_controller.js"></script>
+  <script src="/storage.js"></script>
  <link rel="stylesheet" href="factory.css">
  <link rel="stylesheet" href="../prettify.css">
  <script src="../prettify.js"></script>
@@ -42,33 +42,34 @@
  </script>
 </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 Developer Tools
-  <button id="helpButton" title="View documentation in new window.">
-    <span>Help</span>
-  </button>
-</h1>
- <div id="tabContainer">
-    <div id="blockFactory_tab" class="tab tabon"> Block Factory</div>
-    <div id="blocklibraryExporter_tab" class="tab taboff"> Block Exporter</div>
-    <div id="workspaceFactory_tab" class="tab taboff"> Workspace Factory</div>
+  <h1><a href="https://developers.google.com/blockly/">Blockly</a> &gt;
+    <a href="../index.html">Demos</a> &gt; Blockly Developer Tools
+    <button id="helpButton" title="View documentation in new window.">
+      <span>Help</span>
+    </button>
+  </h1>
+  <div id="tabContainer">
+    <div id="blockFactory_tab" class="tab tabon">Block Factory</div>
+    <div id="blocklibraryExporter_tab" class="tab taboff">Block Exporter</div>
+    <div id="workspaceFactory_tab" class="tab taboff">Workspace Factory</div>
  </div>

  <!-- Exporter tab -->
  <div id="blockLibraryExporter">
    <br>
-    <p id="helperText"> First, select blocks from your block library by clicking on them. Then, use the Export Settings form to download starter code for selected blocks.
+    <p>
+      First, select blocks from your block library by clicking on them. Then, use the Export Settings form to download starter code for selected blocks.
    </p>
    <div id="exportSelector">
      <br>
-      <h3> Block Selector </h3>
-      <div class='dropdown'>
+      <h3>Block Selector</h3>
+      <div class="dropdown">
        <button id="button_setBlocks">Select</button>
        <div id="dropdownDiv_setBlocks" class="dropdown-content">
-          <a id='dropdown_addAllFromLib' title="Select all block library blocks.">All Stored in Block Library</a>
-          <a id='dropdown_addAllUsed' title="Select all block library blocks used in workspace factory.">All Used in Workspace Factory</a>
+          <a id="dropdown_addAllFromLib" title="Select all block library blocks.">All Stored in Block Library</a>
+          <a id="dropdown_addAllUsed" title="Select all block library blocks used in workspace factory.">All Used in Workspace Factory</a>
        </div>
-          <button id='clearSelectedButton' title="Clear selected blocks.">Clear Selected</a>
+        <button id="clearSelectedButton" title="Clear selected blocks.">Clear Selected</a>
      </div>

      <div id="blockSelector"></div>
@@ -84,49 +85,48 @@
          <p>Currently Selected:</p>
          <p id="selectedBlocksText"></p>
        </div>
-        <input type="checkbox" id="blockDefCheck">Block Definition(s)<br>
+        <label><input type="checkbox" id="blockDefCheck">Block Definition(s)</label><br>
        <div id="blockDefSettings" class="subsettings">
-          Format:
+          <label>Format:
          <select id="exportFormat">
            <option value="JSON">JSON</option>
            <option value="JavaScript">JavaScript</option>
-          </select>
+          </select></label>
          <br>
-          File Name:
-          <br>
-          <input type="text" id="blockDef_filename">
+          <label>File Name:<br>
+          <input type="text" id="blockDef_filename"></label>
        </div>
-          <br>
-        <input type="checkbox" id="genStubCheck">Generator Stub(s)<br>
+        <br>
+
+        <label><input type="checkbox" id="genStubCheck">Generator Stub(s)</label><br>
        <div id="genStubSettings" class="subsettings">
-          Language:
+          <label>Language:
          <select id="exportLanguage">
            <option value="JavaScript">JavaScript</option>
            <option value="Python">Python</option>
            <option value="PHP">PHP</option>
            <option value="Lua">Lua</option>
            <option value="Dart">Dart</option>
-          </select>
+          </select></label>
          <br>
-          File Name:
-          <br>
-          <input type="text" id="generatorStub_filename"><br>
+          <label>File Name:<br>
+          <input type="text" id="generatorStub_filename"></label><br>
        </div>
-          <br>
+        <br>
      </form>
-        <button id="exporterSubmitButton" title="Download block starter code as specified in export settings."> Export </button>
+      <button id="exporterSubmitButton" title="Download block starter code as specified in export settings.">Export</button>
    </div>
    <div id="exportPreview">
      <br>
-      <h3>Export Preview </h3>
-        <div id="blockDefs" class="exportPreviewTextArea">
-          <p id="blockDefs_label">Block Definitions:</p>
-          <pre id="blockDefs_textArea"></pre>
-        </div>
-        <div id="genStubs" class="exportPreviewTextArea">
-          <p id="genStubs_label">Generator Stubs:</p>
-          <pre id="genStubs_textArea"></pre>
-        </div>
+      <h3>Export Preview</h3>
+      <div id="blockDefs" class="exportPreviewTextArea">
+        <p id="blockDefs_label">Block Definitions:</p>
+        <pre id="blockDefs_textArea"></pre>
+      </div>
+      <div id="genStubs" class="exportPreviewTextArea">
+        <p id="genStubs_label">Generator Stubs:</p>
+        <pre id="genStubs_textArea"></pre>
+      </div>
    </div>
  </div>

@@ -158,15 +158,14 @@
        <div class="dropdown">
        <button id="button_export">Export</button>
          <div id="dropdownDiv_export" class="dropdown-content">
-            <a id='dropdown_exportOptions'>Starter Code</a>
-            <a id='dropdown_exportToolbox'>Toolbox</a>
-            <a id='dropdown_exportPreload'>Workspace Blocks</a>
-            <a id='dropdown_exportAll'>All</a>
+            <a id="dropdown_exportOptions">Starter Code</a>
+            <a id="dropdown_exportToolbox">Toolbox</a>
+            <a id="dropdown_exportPreload">Workspace Blocks</a>
+            <a id="dropdown_exportAll">All</a>
          </div>
        </div>

        <button id="button_clear">Clear</button>
-
      </p>
    </div>

@@ -175,27 +174,29 @@
        <h3>Edit</h3>
        <p id="editHelpText">Drag blocks into the workspace to configure the toolbox in your custom workspace.</p>
      </div>
-      <table id='workspaceTabs' style="width:auto; height:auto">
-        <td id="tab_toolbox" class="tabon">Toolbox</td>
-        <td id="tab_preload" class="taboff">Workspace</td>
+      <table id="workspaceTabs" style="width:auto; height:auto">
+        <tr>
+          <td id="tab_toolbox" class="tabon">Toolbox</td>
+          <td id="tab_preload" class="taboff">Workspace</td>
+        </tr>
      </table>
      <section id="toolbox_section">
        <div id="toolbox_blocks"></div>
      </section>
      <aside id="toolbox_div">
-        <p id="categoryHeader">Your categories will appear here</p>
+        <p id="categoryHeader">You currently have no categories.</p>
        <table id="categoryTable" style="width:auto; height:auto">
        </table>
        <p>&nbsp;</p>

-        <div class='dropdown'>
-        <button id="button_add" class="large">+</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>
-          <a id='dropdown_loadStandardToolbox'>Standard Toolbox</a>
-        </div>
+        <div class="dropdown">
+          <button id="button_add" class="large">+</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>
+            <a id="dropdown_loadStandardToolbox">Standard Toolbox</a>
+          </div>
        </div>

        <button id="button_remove" class="large">-</button>
@@ -204,62 +205,73 @@
        <button id="button_down" class="large">&#8595;</button>

        <br>
-        <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 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'>Colour</a>
+          </div>
        </div>

      </aside>

-      <button id='button_addShadow' style='display:none'>Make Shadow</button>
-      <button id='button_removeShadow' style='display:none'>Remove Shadow</button>
+      <button id="button_addShadow" style="display: none">Make Shadow</button>
+      <button id="button_removeShadow" style="display: none">Remove Shadow</button>

-      <aside id='preload_div' style='display:none'>
+      <aside id="preload_div" style="display:none">
        <div id="preloadHelp">
          <p>Configure the options for your Blockly inject call.</p>
          <button id="button_optionsHelp">Help</button>
          <button class="small" id="button_standardOptions">Reset to Default</button>
        </div>
        <div id="workspace_options">
-          <input type="checkbox" id="option_readOnly_checkbox" class="optionsInput">Read Only<br>
-          <input type="checkbox" id="option_collapse_checkbox" class="optionsInput">Collapsible Blocks<br>
-          <input type="checkbox" id="option_comments_checkbox" class="optionsInput">Comments for Blocks<br>
-          <input type="checkbox" id="option_css_checkbox" class="optionsInput">Use Blockly CSS<br>
-          <input type="checkbox" id="option_disable_checkbox" class="optionsInput">Disabled Blocks<br>
-          <input type="checkbox" id="option_grid_checkbox" class="optionsInput">Use Grid<br>
-          <div id="grid_options" name="grid" style="display:none">
-            Spacing <input type="number" id="gridOption_spacing_number" class="optionsInput" value="0"><br>
-            Length <input type="number" id="gridOption_length_number" class="optionsInput" value="1"><br>
-            Color <input type="text" id="gridOption_colour_text" class="optionsInput" value="#888"><br>
-            <input type="checkbox" id="gridOption_snap_checkbox" class="optionsInput" value="grid_snap_checkbox">Snap<br>
+          <label><input type="checkbox" id="option_readOnly_checkbox" class="optionsInput">Read Only</label><br>
+          <div id="readonly1">
+            <label><input type="checkbox" id="option_collapse_checkbox" class="optionsInput">Collapsible Blocks</label><br>
          </div>
-          <input type="checkbox" id="option_infiniteBlocks_checkbox" class="optionsInput" value="checked">Infinite Blocks<br>
-          <div id="maxBlockNumber_option" style="display:none">
-            Max Blocks <input type="number" id="option_maxBlocks_number" class="optionsInput" value=100><br>
+          <div id="readonly2">
+            <label><input type="checkbox" id="option_comments_checkbox" class="optionsInput">Comments for Blocks</label><br>
          </div>
-          Path to Blockly Media <input type="text" id="option_media_text" class="optionsInput"><br>
-          <input type="checkbox" id="option_rtl_checkbox" class="optionsInput">Layout with RTL<br>
-          <input type="checkbox" id="option_scrollbars_checkbox" class="optionsInput">Scrollbars<br>
-          <input type="checkbox" id="option_sounds_checkbox" class="optionsInput">Sounds<br>
-          <div id="trashcan_option">
-            <input type="checkbox" id="option_trashcan_checkbox" class="optionsInput">Trashcan<br>
+          <label><input type="checkbox" id="option_css_checkbox" class="optionsInput">Use Blockly CSS</label><br>
+          <div id="readonly3">
+            <label><input type="checkbox" id="option_disable_checkbox" class="optionsInput">Disabled Blocks</label><br>
          </div>
-          <input type="checkbox" id="option_zoom_checkbox" class="optionsInput">Zoom<br>
-          <div id="zoom_options" name="zoom" style="display:none">
-            <input type="checkbox" id="zoomOption_controls_checkbox" class="optionsInput">Zoom Controls<br>
-            <input type="checkbox" id="zoomOption_wheel_checkbox" class="optionsInput">Zoom Wheel<br>
-            Start Scale <input type="number" id="zoomOption_startScale_number" class="optionsInput" name="startScale" value="1.0"><br>
-            Max Scale <input type="number" id="zoomOption_maxScale_number" class="optionsInput" value="3"><br>
-            Min Scale <input type="number" id="zoomOption_minScale_number" class="optionsInput" value="0.3"><br>
-            Scale Speed <input type="number" id="zoomOption_scaleSpeed_number" class="optionsInput" value="1.2"><br>
+          <label><input type="checkbox" id="option_grid_checkbox" class="optionsInput">Use Grid</label><br>
+          <div id="grid_options" name="grid" style="display: none">
+            <label>Spacing <input type="number" id="gridOption_spacing_number" class="optionsInput" value="0"></label><br>
+            <label>Length <input type="number" id="gridOption_length_number" class="optionsInput" value="1"></label><br>
+            <label>Colour <input type="text" id="gridOption_colour_text" class="optionsInput" value="#888"></label><br>
+            <label><input type="checkbox" id="gridOption_snap_checkbox" class="optionsInput" value="grid_snap_checkbox">Snap</label><br>
+          </div>
+          <div id="readonly4">
+            <label><input type="checkbox" id="option_infiniteBlocks_checkbox" class="optionsInput" value="checked">Infinite Blocks</label><br>
+            <div id="maxBlockNumber_option" style="display: none">
+              <label>Max Blocks <input type="number" id="option_maxBlocks_number" class="optionsInput" value=100></label><br>
+            </div>
+          </div>
+          <label>Path to Blockly Media <input type="text" id="option_media_text" class="optionsInput"></label><br>
+          <label><input type="checkbox" id="option_rtl_checkbox" class="optionsInput">Layout with RTL</label><br>
+          <label><input type="checkbox" id="option_scrollbars_checkbox" class="optionsInput">Scrollbars</label><br>
+          <div id="readonly5">
+            <label><input type="checkbox" id="option_sounds_checkbox" class="optionsInput">Sounds<br>
+          </div>
+          <div id="readonly6">
+            <label><input type="checkbox" id="option_trashcan_checkbox" class="optionsInput">Trashcan</label><br>
+          </div>
+          <div id="readonly7">
+            <label><input type="checkbox" id="option_zoom_checkbox" class="optionsInput">Zoom</label><br>
+            <div id="zoom_options" name="zoom" style="display: none">
+              <label><input type="checkbox" id="zoomOption_controls_checkbox" class="optionsInput">Zoom Controls</label><br>
+              <label><input type="checkbox" id="zoomOption_wheel_checkbox" class="optionsInput">Zoom Wheel</label><br>
+              <label>Start Scale <input type="number" id="zoomOption_startScale_number" class="optionsInput" name="startScale" value="1.0"></label><br>
+              <label>Max Scale <input type="number" id="zoomOption_maxScale_number" class="optionsInput" value="3"></label><br>
+              <label>Min Scale <input type="number" id="zoomOption_minScale_number" class="optionsInput" value="0.3"></label><br>
+              <label>Scale Speed <input type="number" id="zoomOption_scaleSpeed_number" class="optionsInput" value="1.2"></label><br>
+            </div>
          </div>
        </div>
      </aside>

-
    </section>

    <aside id="previewDiv">
@@ -281,10 +293,10 @@
          <tr id="blockLibrary">
            <td id="blockLibraryContainer">
            <span>
-              <div class='dropdown'>
+              <div class="dropdown">
                <button id="button_blockLib">Block Library</button>
                <div id="dropdownDiv_blockLib" class="dropdown-content">
-                  <a id='createNewBlockButton'>Create New Block</a>
+                  <a id="createNewBlockButton">Create New Block</a>
                </div>
              </div>
              <select id="blockLibraryDropdown" style="display:none">
@@ -385,6 +397,8 @@
      </tr>
  </table>

+  <div id="modalShadow"></div>
+
  <xml id="blockfactory_toolbox" class="toolbox">
    <category name="Input">
      <block type="input_value">
--- a/demos/blockfactory/workspacefactory/style.css
+++ b/demos/blockfactory/workspacefactory/style.css
@@ -1,224 +0,0 @@
-body {
-  background-color: #fff;
-  font-family: sans-serif;
-}
-
-h1 {
-  font-weight: normal;
-  font-size: 140%;
-}
-
-section {
-  float: left;
-}
-
-aside {
-  float: right;
-}
-
-#categoryTable>table {
-  border: 1px solid #ccc;
-  border-bottom: none;
-}
-
-#workspaceTabs>table {
-  float: right;
-}
-
-td.tabon {
-  border-bottom-color: #ddd !important;
-  background-color: #ddd;
-  padding: 5px 19px;
-}
-
-td.taboff {
-  cursor: pointer;
-  padding: 5px 19px;
-}
-
-td.taboff:hover {
-  background-color: #eee;
-}
-
-button {
-  border-radius: 4px;
-  border: 1px solid #ddd;
-  background-color: #eee;
-  color: #000;
-  font-size: large;
-  margin: 0 5px;
-  padding: 10px;
-}
-
-button:hover:not(:disabled) {
-  box-shadow: 2px 2px 5px #888;
-}
-
-button:disabled {
-  opacity: .6;
-}
-
-button>* {
-  opacity: .6;
-  vertical-align: text-bottom;
-}
-
-button:hover:not(:disabled)>* {
-  opacity: 1;
-}
-
-button.small {
-  font-size: small;
-}
-
-table {
-  border: none;
-  border-collapse: collapse;
-  margin: 0;
-  padding: 0;
-}
-
-td {
-  padding: 0;
-  vertical-align: top;
-}
-
-.inputfile {
-  height: 0;
-  opacity: 0;
-  overflow: hidden;
-  position: absolute;
-  width: 0;
-  z-index: -1;
-}
-
-#toolbox_section {
-  height: 480px;
-  width: 80%;
-  position: relative;
-}
-
-#toolbox_blocks {
-  height: 100%;
-  width: 100%;
-}
-
-#preview_blocks {
-  height: 300px;
-  width: 100%;
-}
-
-#createDiv {
-  width: 70%;
-}
-
-#previewDiv {
-  width: 30%;
-}
-
-#toolbox_div {
-  width: 20%;
-}
-
-#preload_div {
-  width: 20%;
-}
-
-#disable_div {
-  background-color: white;
-  height: 100%;
-  left: 0;
-  opacity: .5;
-  position: absolute;
-  top: 0;
-  width: 100%;
-  z-index: -1;  /* Start behind workspace */
-}
-
-/* Rules for Closure popup color picker */
-.goog-palette {
-  outline: none;
-  cursor: default;
-}
-
-.goog-palette-cell {
-  height: 13px;
-  width: 15px;
-  margin: 0;
-  border: 0;
-  text-align: center;
-  vertical-align: middle;
-  border-right: 1px solid #000000;
-  font-size: 1px;
-}
-
-.goog-palette-colorswatch {
-  border: 1px solid #000000;
-  height: 13px;
-  position: relative;
-  width: 15px;
-}
-
-.goog-palette-cell-hover .goog-palette-colorswatch {
-  border: 1px solid #FFF;
-}
-
-.goog-palette-cell-selected .goog-palette-colorswatch {
-  border: 1px solid #000;
-  color: #fff;
-}
-
-.goog-palette-table {
-  border: 1px solid #000;
-  border-collapse: collapse;
-}
-
-.goog-popupcolorpicker {
-  position: absolute;
-}
-
-/* The container <div> - needed to position the dropdown content */
-.dropdown {
-    position: relative;
-    display: inline-block;
-}
-
-/* Dropdown Content (Hidden by Default) */
-.dropdown-content {
-  background-color: #f9f9f9;
-  box-shadow: 0px 8px 16px 0px rgba(0,0,0,.2);
-  display: none;
-  min-width: 170px;
-  opacity: 1;
-  position: absolute;
-  z-index: 1;
-}
-
-/* Links inside the dropdown */
-.dropdown-content a, .dropdown-content label {
-  color: black;
-  display: block;
-  font-size: small;
-  padding: 12px 16px;
-  text-decoration: none;
-}
-
-/* Change color of dropdown links on hover. */
-.dropdown-content a:hover, .dropdown-content label:hover {
-  background-color: #f1f1f1
-}
-
-/* Show the dropdown menu */
-.show {
-  display: block;
-}
-
-.shadowBlock>.blocklyPath {
-  fill-opacity: .5;
-  stroke-opacity: .5;
-}
-
-.shadowBlock>.blocklyPathLight,
-.shadowBlock>.blocklyPathDark {
-  display: none;
-}
--- a/demos/blockfactory/workspacefactory/wfactory_controller.js
+++ b/demos/blockfactory/workspacefactory/wfactory_controller.js
@@ -108,7 +108,7 @@ WorkspaceFactoryController.prototype.addCategory = function() {
  // After possibly creating a category, check again if it's the first category.
  var isFirstCategory = !this.model.hasElements();
  // Get name from user.
-  name = this.promptForNewCategoryName('Enter the name of your new category:');
+  var name = this.promptForNewCategoryName('Enter the name of your new category:');
  if (!name) {  // Exit if cancelled.
    return;
  }
@@ -238,7 +238,7 @@ WorkspaceFactoryController.prototype.removeElement = function() {
 * Gets a valid name for a new category from the user.
 * @param {string} promptString Prompt for the user to enter a name.
 * @param {string=} opt_oldName The current name.
- * @return {string} Valid name for a new category, or null if cancelled.
+ * @return {string?} Valid name for a new category, or null if cancelled.
 */
 WorkspaceFactoryController.prototype.promptForNewCategoryName =
    function(promptString, opt_oldName) {
--- a/demos/blockfactory/workspacefactory/wfactory_init.js
+++ b/demos/blockfactory/workspacefactory/wfactory_init.js
@@ -67,22 +67,21 @@ WorkspaceFactoryInit.initColorPicker_ = function(controller) {
  // and value 65% as specified in Blockly Developer documentation:
  // developers.google.com/blockly/guides/create-custom-blocks/define-blocks
  var colors = [
-    '#A65C5C', '#A6635C', '#A66A5C', '#A6725C', '#A6795C',
-    '#A6815C', '#A6885C', '#A6905C', '#A6975C', '#A69F5C',
-    '#A6A65C', '#9FA65C', '#97A65C', '#90A65C', '#88A65C',
-    '#81A65C', '#79A65C', '#6FA65C', '#66A65C', '#5EA65C',
-    '#5CA661', '#5CA668', '#5CA66F', '#5CA677', '#5CA67E',
-    '#5CA686', '#5CA68D', '#5CA695', '#5CA69C', '#5CA6A4',
-    '#5CA1A6', '#5C9AA6', '#5C92A6', '#5C8BA6', '#5C83A6',
-    '#5C7CA6', '#5C74A6', '#5C6AA6', '#5C61A6', '#5E5CA6',
-    '#665CA6', '#6D5CA6', '#745CA6', '#7C5CA6', '#835CA6',
-    '#8B5CA6', '#925CA6', '#9A5CA6', '#A15CA6', '#A65CA4',
-    '#A65C9C', '#A65C95', '#A65C8D', '#A65C86', '#A65C7E',
-    '#A65C77', '#A65C6F', '#A65C66', '#A65C61', '#A65C5E'
+    '#A6795C', '#A69F5C', '#88A65C', '#5EA65C', '#5CA67E', '#5CA6A4', '#5C83A6',
+        '#5E5CA6', '#835CA6', '#A65CA4', '#A65C7E', '#A65C5E',
+    '#A6725C', '#A6975C', '#90A65C', '#66A65C', '#5CA677', '#5CA69C', '#5C8BA6',
+        '#5C61A6', '#7C5CA6', '#A15CA6', '#A65C86', '#A65C61',
+    '#A66A5C', '#A6905C', '#97A65C', '#6FA65C', '#5CA66F', '#5CA695', '#5C92A6',
+        '#5C6AA6', '#745CA6', '#9A5CA6', '#A65C8D', '#A65C66',
+    '#A6635C', '#A6885C', '#9FA65C', '#79A65C', '#5CA668', '#5CA68D', '#5C9AA6',
+        '#5C74A6', '#6D5CA6', '#925CA6', '#A65C95', '#A65C6F',
+    '#A65C5C', '#A6815C', '#A6A65C', '#81A65C', '#5CA661', '#5CA686', '#5CA1A6',
+        '#5C7CA6', '#665CA6', '#8B5CA6', '#A65C9C', '#A65C77'
  ];

  // Create color picker with specific set of Blockly colors.
  var colorPicker = new goog.ui.ColorPicker();
+  colorPicker.setSize(12);
  colorPicker.setColors(colors);

  // Create and render the popup color picker and attach to button.
@@ -92,8 +91,7 @@ WorkspaceFactoryInit.initColorPicker_ = function(controller) {
  popupPicker.setFocusable(true);
  goog.events.listen(popupPicker, 'change', function(e) {
    controller.changeSelectedCategoryColor(popupPicker.getSelectedColor());
-    document.getElementById('dropdownDiv_editCategory').classList.remove
-        ('show');
+    blocklyFactory.closeModal();
  });
 };

@@ -105,184 +103,167 @@ WorkspaceFactoryInit.initColorPicker_ = function(controller) {
 */
 WorkspaceFactoryInit.assignWorkspaceFactoryClickHandlers_ =
    function(controller) {
-  document.getElementById('tab_toolbox').addEventListener
+
+  // Import Custom Blocks button.
+  document.getElementById('button_importBlocks').addEventListener
      ('click',
      function() {
-        controller.setMode(WorkspaceFactoryController.MODE_TOOLBOX);
+        blocklyFactory.openModal('dropdownDiv_importBlocks');
      });
+  document.getElementById('input_importBlocksJson').addEventListener
+      ('change',
+      function() {
+        controller.importBlocks(event.target.files[0], 'JSON');
+      });
+  document.getElementById('input_importBlocksJson').addEventListener
+      ('click', function() {blocklyFactory.closeModal()});
+  document.getElementById('input_importBlocksJs').addEventListener
+      ('change',
+      function() {
+        controller.importBlocks(event.target.files[0], 'JavaScript');
+      });
+  document.getElementById('input_importBlocksJs').addEventListener
+      ('click', function() {blocklyFactory.closeModal()});

-  document.getElementById('tab_preload').addEventListener
+  // Load to Edit button.
+  document.getElementById('button_load').addEventListener
      ('click',
      function() {
-        controller.setMode(WorkspaceFactoryController.MODE_PRELOAD);
+        blocklyFactory.openModal('dropdownDiv_load');
      });
-
-  document.getElementById('button_add').addEventListener
-      ('click',
+  document.getElementById('input_loadToolbox').addEventListener
+      ('change',
      function() {
-        document.getElementById('dropdownDiv_add').classList.toggle('show');
+        controller.importFile(event.target.files[0],
+            WorkspaceFactoryController.MODE_TOOLBOX);
      });
-
-  document.getElementById('dropdown_newCategory').addEventListener
-      ('click',
+  document.getElementById('input_loadToolbox').addEventListener
+      ('click', function() {blocklyFactory.closeModal()});
+  document.getElementById('input_loadPreload').addEventListener
+      ('change',
      function() {
-        controller.addCategory();
-        document.getElementById('dropdownDiv_add').classList.remove('show');
-      });
-
-  document.getElementById('dropdown_loadCategory').addEventListener
-      ('click',
-      function() {
-        controller.loadCategory();
-        document.getElementById('dropdownDiv_add').classList.remove('show');
-      });
-
-  document.getElementById('dropdown_separator').addEventListener
-      ('click',
-      function() {
-        controller.addSeparator();
-        document.getElementById('dropdownDiv_add').classList.remove('show');
-      });
-
-  document.getElementById('dropdown_loadStandardToolbox').addEventListener
-      ('click',
-      function() {
-        controller.loadStandardToolbox();
-        document.getElementById('dropdownDiv_add').classList.remove('show');
-      });
-
-  document.getElementById('button_remove').addEventListener
-      ('click',
-      function() {
-        controller.removeElement();
-      });
-
-  document.getElementById('dropdown_exportToolbox').addEventListener
-      ('click',
-      function() {
-        controller.exportXmlFile(WorkspaceFactoryController.MODE_TOOLBOX);
-        document.getElementById('dropdownDiv_export').classList.remove('show');
-      });
-
-  document.getElementById('dropdown_exportPreload').addEventListener
-      ('click',
-      function() {
-        controller.exportXmlFile(WorkspaceFactoryController.MODE_PRELOAD);
-        document.getElementById('dropdownDiv_export').classList.remove('show');
+        controller.importFile(event.target.files[0],
+            WorkspaceFactoryController.MODE_PRELOAD);
      });
+  document.getElementById('input_loadPreload').addEventListener
+      ('click', function() {blocklyFactory.closeModal()});

+  // Export button.
  document.getElementById('dropdown_exportOptions').addEventListener
      ('click',
      function() {
        controller.exportInjectFile();
-        document.getElementById('dropdownDiv_export').classList.remove('show');
+        blocklyFactory.closeModal();
+      });
+  document.getElementById('dropdown_exportToolbox').addEventListener
+      ('click',
+      function() {
+        controller.exportXmlFile(WorkspaceFactoryController.MODE_TOOLBOX);
+        blocklyFactory.closeModal();
+      });
+  document.getElementById('dropdown_exportPreload').addEventListener
+      ('click',
+      function() {
+        controller.exportXmlFile(WorkspaceFactoryController.MODE_PRELOAD);
+        blocklyFactory.closeModal();
      });
-
  document.getElementById('dropdown_exportAll').addEventListener
      ('click',
      function() {
        controller.exportInjectFile();
        controller.exportXmlFile(WorkspaceFactoryController.MODE_TOOLBOX);
        controller.exportXmlFile(WorkspaceFactoryController.MODE_PRELOAD);
-        document.getElementById('dropdownDiv_export').classList.remove('show');
+        blocklyFactory.closeModal();
      });
-
  document.getElementById('button_export').addEventListener
      ('click',
      function() {
-        document.getElementById('dropdownDiv_export').classList.toggle('show');
-        document.getElementById('dropdownDiv_load').classList.remove('show');
-        document.getElementById('dropdownDiv_importBlocks').classList.
-            remove('show');
+        blocklyFactory.openModal('dropdownDiv_export');
      });

+  // Clear button.
+  document.getElementById('button_clear').addEventListener
+      ('click',
+      function() {
+        controller.clearAll();
+      });
+
+  // Toolbox and Workspace tabs.
+  document.getElementById('tab_toolbox').addEventListener
+      ('click',
+      function() {
+        controller.setMode(WorkspaceFactoryController.MODE_TOOLBOX);
+      });
+  document.getElementById('tab_preload').addEventListener
+      ('click',
+      function() {
+        controller.setMode(WorkspaceFactoryController.MODE_PRELOAD);
+      });
+
+  // '+' button.
+  document.getElementById('button_add').addEventListener
+      ('click',
+      function() {
+        blocklyFactory.openModal('dropdownDiv_add');
+      });
+  document.getElementById('dropdown_newCategory').addEventListener
+      ('click',
+      function() {
+        controller.addCategory();
+        blocklyFactory.closeModal();
+      });
+  document.getElementById('dropdown_loadCategory').addEventListener
+      ('click',
+      function() {
+        controller.loadCategory();
+        blocklyFactory.closeModal();
+      });
+  document.getElementById('dropdown_separator').addEventListener
+      ('click',
+      function() {
+        controller.addSeparator();
+        blocklyFactory.closeModal();
+      });
+  document.getElementById('dropdown_loadStandardToolbox').addEventListener
+      ('click',
+      function() {
+        controller.loadStandardToolbox();
+        blocklyFactory.closeModal();
+      });
+
+  // '-' button.
+  document.getElementById('button_remove').addEventListener
+      ('click',
+      function() {
+        controller.removeElement();
+      });
+
+  // Up/Down buttons.
  document.getElementById('button_up').addEventListener
      ('click',
      function() {
        controller.moveElement(-1);
      });
-
  document.getElementById('button_down').addEventListener
      ('click',
      function() {
        controller.moveElement(1);
      });

+  // Edit Category button.
  document.getElementById('button_editCategory').addEventListener
      ('click',
      function() {
-        document.getElementById('dropdownDiv_editCategory').classList.
-        toggle('show');
+        blocklyFactory.openModal('dropdownDiv_editCategory');
      });
-
  document.getElementById('dropdown_name').addEventListener
      ('click',
      function() {
        controller.changeCategoryName();
-        document.getElementById('dropdownDiv_editCategory').classList.
-            remove('show');
-      });
-
-  document.getElementById('button_importBlocks').addEventListener
-      ('click',
-      function() {
-        document.getElementById('dropdownDiv_importBlocks').classList.
-            toggle('show');
-        document.getElementById('dropdownDiv_export').classList.remove('show');
-        document.getElementById('dropdownDiv_load').classList.remove('show');
-      });
-
-  document.getElementById('button_load').addEventListener
-      ('click',
-      function() {
-        document.getElementById('dropdownDiv_load').classList.toggle('show');
-        document.getElementById('dropdownDiv_export').classList.remove('show');
-        document.getElementById('dropdownDiv_importBlocks').classList.
-            remove('show');
-      });
-
-  document.getElementById('input_loadToolbox').addEventListener
-      ('change',
-      function() {
-        controller.importFile(event.target.files[0],
-            WorkspaceFactoryController.MODE_TOOLBOX);
-        document.getElementById('dropdownDiv_load').classList.remove('show');
-      });
-
-  document.getElementById('input_loadPreload').addEventListener
-      ('change',
-      function() {
-        controller.importFile(event.target.files[0],
-            WorkspaceFactoryController.MODE_PRELOAD);
-        document.getElementById('dropdownDiv_load').classList.remove('show');
-      });
-
-  document.getElementById('input_importBlocksJson').addEventListener
-      ('change',
-      function() {
-        controller.importBlocks(event.target.files[0],'JSON');
-        document.getElementById('dropdownDiv_importBlocks').classList.
-            remove('show');
-      });
-
-  document.getElementById('input_importBlocksJs').addEventListener
-      ('change',
-      function() {
-        controller.importBlocks(event.target.files[0],'JavaScript');
-        document.getElementById('dropdownDiv_importBlocks').classList.
-            remove('show');
-      });
-
-  document.getElementById('button_clear').addEventListener
-      ('click',
-      function() {
-        document.getElementById('dropdownDiv_importBlocks').classList.
-            remove('show');
-        document.getElementById('dropdownDiv_export').classList.remove('show');
-        document.getElementById('dropdownDiv_load').classList.remove('show');
-        controller.clearAll();
+        blocklyFactory.closeModal();
      });

+  // Make/Remove Shadow buttons.
  document.getElementById('button_addShadow').addEventListener
      ('click',
      function() {
@@ -290,7 +271,6 @@ WorkspaceFactoryInit.assignWorkspaceFactoryClickHandlers_ =
        WorkspaceFactoryInit.displayAddShadow_(false);
        WorkspaceFactoryInit.displayRemoveShadow_(true);
      });
-
  document.getElementById('button_removeShadow').addEventListener
      ('click',
      function() {
@@ -305,15 +285,17 @@ WorkspaceFactoryInit.assignWorkspaceFactoryClickHandlers_ =
        }
      });

+  // Help button on workspace tab.
+  document.getElementById('button_optionsHelp').addEventListener
+      ('click', function() {
+        open('https://developers.google.com/blockly/guides/get-started/web#configuration');
+      });
+
+  // Reset to Default button on workspace tab.
  document.getElementById('button_standardOptions').addEventListener
      ('click', function() {
        controller.setStandardOptionsAndUpdate();
      });
-
-  document.getElementById('button_optionsHelp').addEventListener
-      ('click', function() {
-        open('https://developers.google.com/blockly/guides/get-started/web');
-      });
 };

 /**
@@ -541,9 +523,10 @@ WorkspaceFactoryInit.addWorkspaceFactoryOptionsListeners_ =

  document.getElementById('option_readOnly_checkbox').addEventListener('change',
    function(e) {
-      document.getElementById('trashcan_option').style.display =
-          document.getElementById('option_readOnly_checkbox').checked ?
-            'none' : 'block';
+      var checkbox = document.getElementById('option_readOnly_checkbox');
+      blocklyFactory.ifCheckedEnable(!checkbox.checked,
+          ['readonly1', 'readonly2', 'readonly3', 'readonly4', 'readonly5',
+           'readonly6', 'readonly7']);
    });

    document.getElementById('option_infiniteBlocks_checkbox').addEventListener('change',
--- a/demos/blockfactory/workspacefactory/wfactory_view.js
+++ b/demos/blockfactory/workspacefactory/wfactory_view.js
@@ -51,7 +51,7 @@ WorkspaceFactoryView.prototype.addCategoryRow = function(name, id) {

  // Delete help label and enable category buttons if it's the first category.
  if (count == 0) {
-    document.getElementById('categoryHeader').textContent = 'Your Categories:';
+    document.getElementById('categoryHeader').textContent = 'Your categories:';
  }

  // Create tab.
@@ -91,9 +91,9 @@ WorkspaceFactoryView.prototype.deleteElementRow = function(id, index) {
 */
 WorkspaceFactoryView.prototype.addEmptyCategoryMessage = function() {
  var table = document.getElementById('categoryTable');
-  if (table.rows.length == 0) {
+  if (!table.rows.length) {
    document.getElementById('categoryHeader').textContent =
-        'Your categories will appear here';
+        'You currently have no categories.';
  }
 };

@@ -243,7 +243,7 @@ WorkspaceFactoryView.prototype.addSeparatorTab = function(id) {
  var count = table.rows.length;

  if (count == 0) {
-    document.getElementById('categoryHeader').textContent = 'Your Categories:';
+    document.getElementById('categoryHeader').textContent = 'Your categories:';
  }
  // Create separator.
  var row = table.insertRow(count);
--- a/msg/js/ar.js
+++ b/msg/js/ar.js
@@ -8,7 +8,7 @@ goog.require('Blockly.Msg');

 Blockly.Msg.ADD_COMMENT = "اضافة تعليق";
 Blockly.Msg.CHANGE_VALUE_TITLE = "تغيير قيمة:";
-Blockly.Msg.CLEAN_UP = "Clean up Blocks";  // untranslated
+Blockly.Msg.CLEAN_UP = "مجموعات التنظيف";
 Blockly.Msg.COLLAPSE_ALL = "إخفاء القطع";
 Blockly.Msg.COLLAPSE_BLOCK = "إخفاء القطعة";
 Blockly.Msg.COLOUR_BLEND_COLOUR1 = "اللون 1";
@@ -39,7 +39,7 @@ Blockly.Msg.CONTROLS_FOREACH_TITLE = "لكل عنصر %1 في قائمة %2";
 Blockly.Msg.CONTROLS_FOREACH_TOOLTIP = "لكل عنصر في قائمة ما، عين المتغير '%1' لهذا الغنصر، ومن ثم نفذ بعض الأوامر.";
 Blockly.Msg.CONTROLS_FOR_HELPURL = "https://github.com/google/blockly/wiki/Loops#count-with";  // untranslated
 Blockly.Msg.CONTROLS_FOR_TITLE = "عد بـ %1 من %2 إلى %3 بمعدل %4";
-Blockly.Msg.CONTROLS_FOR_TOOLTIP = "اجعل المتغير  %1 يأخذ القيم من رقم البداية الى رقم النهاية، قم بالعد داخل المجال المحدد، وطبق أوامر القطع المحددة.";
+Blockly.Msg.CONTROLS_FOR_TOOLTIP = "اجعل المتغير  %1 يأخذ القيم من رقم البداية الى رقم النهاية، وقم بالعد داخل المجال المحدد، وطبق أوامر القطع المحددة.";
 Blockly.Msg.CONTROLS_IF_ELSEIF_TOOLTIP = "إضف شرطا إلى القطعة الشرطية \"إذا\".";
 Blockly.Msg.CONTROLS_IF_ELSE_TOOLTIP = "أضف شرط \"نهاية، إجمع\" إلى القطعة الشرطية \"إذا\".";
 Blockly.Msg.CONTROLS_IF_HELPURL = "https://github.com/google/blockly/wiki/IfElse";  // untranslated
@@ -62,8 +62,8 @@ Blockly.Msg.CONTROLS_WHILEUNTIL_TOOLTIP_UNTIL = "بما ان القيمة خاط
 Blockly.Msg.CONTROLS_WHILEUNTIL_TOOLTIP_WHILE = "بما ان القيمة صحيحة, نفّذ بعض الأوامر.";
 Blockly.Msg.DELETE_ALL_BLOCKS = "حذف كل مناعات %1؟";
 Blockly.Msg.DELETE_BLOCK = "إحذف القطعة";
-Blockly.Msg.DELETE_VARIABLE = "Delete the '%1' variable";  // untranslated
-Blockly.Msg.DELETE_VARIABLE_CONFIRMATION = "Delete %1 uses of the '%2' variable?";  // untranslated
+Blockly.Msg.DELETE_VARIABLE = "حذف المتغير %1";
+Blockly.Msg.DELETE_VARIABLE_CONFIRMATION = "حذف%1 1 استخدامات المتغير '%2'؟";
 Blockly.Msg.DELETE_X_BLOCKS = "إحذف قطع %1";
 Blockly.Msg.DISABLE_BLOCK = "عطّل القطعة";
 Blockly.Msg.DUPLICATE_BLOCK = "ادمج";
@@ -140,20 +140,20 @@ Blockly.Msg.LISTS_SET_INDEX_TOOLTIP_SET_FIRST = "يحدد العنصر الأو
 Blockly.Msg.LISTS_SET_INDEX_TOOLTIP_SET_FROM = "يحدد العنصر في الموضع المحدد في قائمة ما.";
 Blockly.Msg.LISTS_SET_INDEX_TOOLTIP_SET_LAST = "يحدد العنصر الأخير في قائمة.";
 Blockly.Msg.LISTS_SET_INDEX_TOOLTIP_SET_RANDOM = "يحدد عنصرا عشوائيا في قائمة.";
-Blockly.Msg.LISTS_SORT_HELPURL = "https://github.com/google/blockly/wiki/Lists#sorting-a-list";  // untranslated
-Blockly.Msg.LISTS_SORT_ORDER_ASCENDING = "ascending";  // untranslated
-Blockly.Msg.LISTS_SORT_ORDER_DESCENDING = "descending";  // untranslated
-Blockly.Msg.LISTS_SORT_TITLE = "sort %1 %2 %3";  // untranslated
-Blockly.Msg.LISTS_SORT_TOOLTIP = "Sort a copy of a list.";  // untranslated
-Blockly.Msg.LISTS_SORT_TYPE_IGNORECASE = "alphabetic, ignore case";  // untranslated
-Blockly.Msg.LISTS_SORT_TYPE_NUMERIC = "numeric";  // untranslated
-Blockly.Msg.LISTS_SORT_TYPE_TEXT = "alphabetic";  // untranslated
+Blockly.Msg.LISTS_SORT_HELPURL = "https://github.com/google/blockly/wiki/Lists#sorting-a-list";
+Blockly.Msg.LISTS_SORT_ORDER_ASCENDING = "تصاعديا";
+Blockly.Msg.LISTS_SORT_ORDER_DESCENDING = "تنازليا";
+Blockly.Msg.LISTS_SORT_TITLE = "رتب %1 %2 %3";
+Blockly.Msg.LISTS_SORT_TOOLTIP = "فرز نسخة من القائمة.";
+Blockly.Msg.LISTS_SORT_TYPE_IGNORECASE = "أبجديا، وتجاهل الحالة";
+Blockly.Msg.LISTS_SORT_TYPE_NUMERIC = "رقمي";
+Blockly.Msg.LISTS_SORT_TYPE_TEXT = "أبجديًا";
 Blockly.Msg.LISTS_SPLIT_HELPURL = "https://github.com/google/blockly/wiki/Lists#splitting-strings-and-joining-lists";  // untranslated
 Blockly.Msg.LISTS_SPLIT_LIST_FROM_TEXT = "إعداد قائمة من النصوص";
 Blockly.Msg.LISTS_SPLIT_TEXT_FROM_LIST = "إعداد نص من القائمة";
-Blockly.Msg.LISTS_SPLIT_TOOLTIP_JOIN = "Join a list of texts into one text, separated by a delimiter.";  // untranslated
-Blockly.Msg.LISTS_SPLIT_TOOLTIP_SPLIT = "Split text into a list of texts, breaking at each delimiter.";  // untranslated
-Blockly.Msg.LISTS_SPLIT_WITH_DELIMITER = "with delimiter";  // untranslated
+Blockly.Msg.LISTS_SPLIT_TOOLTIP_JOIN = "ضم قائمة النصوص في نص واحد، مفصولة بواسطة محدد.";
+Blockly.Msg.LISTS_SPLIT_TOOLTIP_SPLIT = "تقسيم النص إلى قائمة من النصوص، وكسر في كل محدد";
+Blockly.Msg.LISTS_SPLIT_WITH_DELIMITER = "مع محدد";
 Blockly.Msg.LOGIC_BOOLEAN_FALSE = "خاطئ";
 Blockly.Msg.LOGIC_BOOLEAN_HELPURL = "https://github.com/google/blockly/wiki/Logic#values";  // untranslated
 Blockly.Msg.LOGIC_BOOLEAN_TOOLTIP = "يرجع صحيح أو خاطئ.";
@@ -264,10 +264,10 @@ Blockly.Msg.MATH_TRIG_TOOLTIP_ATAN = "يرجع قوس الظل للرقم.";
 Blockly.Msg.MATH_TRIG_TOOLTIP_COS = "يرجع جيب التمام لدرجة (لا زواية نصف قطرية).";
 Blockly.Msg.MATH_TRIG_TOOLTIP_SIN = "يرجع جيب التمام لدرجة (لا زواية نصف قطرية).";
 Blockly.Msg.MATH_TRIG_TOOLTIP_TAN = "يرجع الظل لدرجة (لا دائرة نصف قطرية).";
-Blockly.Msg.NEW_VARIABLE = "متغير جديد...";
+Blockly.Msg.NEW_VARIABLE = "إنشاء متغير...";
 Blockly.Msg.NEW_VARIABLE_TITLE = "اسم المتغير الجديد:";
 Blockly.Msg.ORDINAL_NUMBER_SUFFIX = "";  // untranslated
-Blockly.Msg.PROCEDURES_ALLOW_STATEMENTS = "allow statements";  // untranslated
+Blockly.Msg.PROCEDURES_ALLOW_STATEMENTS = "اسمح بالبيانات";
 Blockly.Msg.PROCEDURES_BEFORE_PARAMS = "مع:";
 Blockly.Msg.PROCEDURES_CALLNORETURN_HELPURL = "https://en.wikipedia.org/wiki/Procedure_%28computer_science%29";
 Blockly.Msg.PROCEDURES_CALLNORETURN_TOOLTIP = "تشغيل الدالة المعرفة من قبل المستخدم '%1'.";
@@ -275,7 +275,7 @@ Blockly.Msg.PROCEDURES_CALLRETURN_HELPURL = "https://en.wikipedia.org/wiki/Proce
 Blockly.Msg.PROCEDURES_CALLRETURN_TOOLTIP = "تشغيل الدالة المعرفة من قبل المستخدم %1 واستخدام  مخرجاتها.";
 Blockly.Msg.PROCEDURES_CALL_BEFORE_PARAMS = "مع:";
 Blockly.Msg.PROCEDURES_CREATE_DO = "إنشئ '%1'";
-Blockly.Msg.PROCEDURES_DEFNORETURN_COMMENT = "Describe this function...";  // untranslated
+Blockly.Msg.PROCEDURES_DEFNORETURN_COMMENT = "صف هذه الوظيفة...";
 Blockly.Msg.PROCEDURES_DEFNORETURN_DO = "";  // untranslated
 Blockly.Msg.PROCEDURES_DEFNORETURN_HELPURL = "https://en.wikipedia.org/wiki/Procedure_%28computer_science%29";
 Blockly.Msg.PROCEDURES_DEFNORETURN_PROCEDURE = "القيام بشيء ما";
@@ -290,10 +290,10 @@ Blockly.Msg.PROCEDURES_IFRETURN_HELPURL = "http://c2.com/cgi/wiki?GuardClause";
 Blockly.Msg.PROCEDURES_IFRETURN_TOOLTIP = "إذا كانت القيمة صحيحة ، اذان قم بارجاع القيمة الثانية.";
 Blockly.Msg.PROCEDURES_IFRETURN_WARNING = "تحذير:هذه القطعة تستخدم فقط داخل تعريف دالة.";
 Blockly.Msg.PROCEDURES_MUTATORARG_TITLE = "اسم الإدخال:";
-Blockly.Msg.PROCEDURES_MUTATORARG_TOOLTIP = "Add an input to the function.";  // untranslated
+Blockly.Msg.PROCEDURES_MUTATORARG_TOOLTIP = "أضف مدخلا إلى الوظيفة.";
 Blockly.Msg.PROCEDURES_MUTATORCONTAINER_TITLE = "المدخلات";
-Blockly.Msg.PROCEDURES_MUTATORCONTAINER_TOOLTIP = "Add, remove, or reorder inputs to this function.";  // untranslated
-Blockly.Msg.REDO = "Redo";  // untranslated
+Blockly.Msg.PROCEDURES_MUTATORCONTAINER_TOOLTIP = "إضافة أو إزالة أو إعادة ترتيب المدخلات لهذه المهمة.";
+Blockly.Msg.REDO = "إعادة";
 Blockly.Msg.REMOVE_COMMENT = "ازل التعليق";
 Blockly.Msg.RENAME_VARIABLE = "إعادة تسمية المتغير...";
 Blockly.Msg.RENAME_VARIABLE_TITLE = "إعادة تسمية كافة المتغيرات '%1' إلى:";
--- a/msg/js/et.js
+++ b/msg/js/et.js
@@ -29,16 +29,16 @@ Blockly.Msg.COLOUR_RGB_RED = "punasest";
 Blockly.Msg.COLOUR_RGB_TITLE = "segu";
 Blockly.Msg.COLOUR_RGB_TOOLTIP = "Tekitab värvi määratud hulgast punasest, rohelisest ja sinisest. Kõik väärtused peavad olema 0 ja 100 vahel.";
 Blockly.Msg.CONTROLS_FLOW_STATEMENTS_HELPURL = "https://github.com/google/blockly/wiki/Loops#loop-termination-blocks";  // untranslated
-Blockly.Msg.CONTROLS_FLOW_STATEMENTS_OPERATOR_BREAK = "katkesta kordus";
-Blockly.Msg.CONTROLS_FLOW_STATEMENTS_OPERATOR_CONTINUE = "liigu järgmisele kordusele";
-Blockly.Msg.CONTROLS_FLOW_STATEMENTS_TOOLTIP_BREAK = "Katkestab korduse ja liigub edasi korduse järel oleva koodi käivitamisele.";
-Blockly.Msg.CONTROLS_FLOW_STATEMENTS_TOOLTIP_CONTINUE = "Katkestab korduse sees oleva koodi käivitamise ja käivitab järgmise korduse.";
+Blockly.Msg.CONTROLS_FLOW_STATEMENTS_OPERATOR_BREAK = "välju kordusest";
+Blockly.Msg.CONTROLS_FLOW_STATEMENTS_OPERATOR_CONTINUE = "katkesta see kordus ja liigu järgmisele";
+Blockly.Msg.CONTROLS_FLOW_STATEMENTS_TOOLTIP_BREAK = "Väljub kordusest ja liigub edasi korduse järel oleva koodi käivitamisele.";
+Blockly.Msg.CONTROLS_FLOW_STATEMENTS_TOOLTIP_CONTINUE = "Katkestab korduses oleva koodi käivitamise ja käivitab järgmise korduse.";
 Blockly.Msg.CONTROLS_FLOW_STATEMENTS_WARNING = "Hoiatus: Seda plokki saab kasutada ainult korduse sees.";
 Blockly.Msg.CONTROLS_FOREACH_HELPURL = "https://github.com/google/blockly/wiki/Loops#for-each";  // untranslated
 Blockly.Msg.CONTROLS_FOREACH_TITLE = "iga elemendiga %1 loendis %2";
 Blockly.Msg.CONTROLS_FOREACH_TOOLTIP = "Iga elemendiga loendis anna muutujale '%1' elemendi väärtus ja kõivita plokis olevad käsud.";
 Blockly.Msg.CONTROLS_FOR_HELPURL = "https://github.com/google/blockly/wiki/Loops#count-with";  // untranslated
-Blockly.Msg.CONTROLS_FOR_TITLE = "loenda muutujaga %1 alates %2 kuni %3 %4 kaupa";
+Blockly.Msg.CONTROLS_FOR_TITLE = "loendus muutujaga %1 alates %2 kuni %3, %4 kaupa";
 Blockly.Msg.CONTROLS_FOR_TOOLTIP = "Annab muutujale '%1' väärtused ühest numbrist teiseni, muutes seda intervalli kaupa ja käivitab igal muudatusel ploki sees oleva koodi.";
 Blockly.Msg.CONTROLS_IF_ELSEIF_TOOLTIP = "Lisab „kui“ plokile tingimuse.";
 Blockly.Msg.CONTROLS_IF_ELSE_TOOLTIP = "Lisab „kui“ plokile lõpliku tingimuseta koodiploki.";
@@ -53,17 +53,17 @@ Blockly.Msg.CONTROLS_IF_TOOLTIP_3 = "Kui esimene avaldis on tõene, käivita kä
 Blockly.Msg.CONTROLS_IF_TOOLTIP_4 = "Kui esimene avaldis on tõene, käivita käsud esimesest plokist. Vastasel juhul, kui teine avaldis on tõene, käivita käsud teisest plokist. Kui ükski avaldistest pole tõene, käivita käsud viimasest plokist.";
 Blockly.Msg.CONTROLS_REPEAT_HELPURL = "https://en.wikipedia.org/wiki/For_loop";
 Blockly.Msg.CONTROLS_REPEAT_INPUT_DO = "käivita";
-Blockly.Msg.CONTROLS_REPEAT_TITLE = "kordus %1 korda";
-Blockly.Msg.CONTROLS_REPEAT_TOOLTIP = "Plokis olevate käskude käivitamine mitu korda.";
+Blockly.Msg.CONTROLS_REPEAT_TITLE = "%1 korda";
+Blockly.Msg.CONTROLS_REPEAT_TOOLTIP = "Plokis olevate käskude käivitamine määratud arv kordi.";
 Blockly.Msg.CONTROLS_WHILEUNTIL_HELPURL = "https://github.com/google/blockly/wiki/Loops#repeat";  // untranslated
-Blockly.Msg.CONTROLS_WHILEUNTIL_OPERATOR_UNTIL = "kordus kuni pole";
-Blockly.Msg.CONTROLS_WHILEUNTIL_OPERATOR_WHILE = "kordus kuni on";
-Blockly.Msg.CONTROLS_WHILEUNTIL_TOOLTIP_UNTIL = "Kuni avaldis pole tõene, korda plokis olevaid käske.";
-Blockly.Msg.CONTROLS_WHILEUNTIL_TOOLTIP_WHILE = "Kuni avaldis on tõene, korda plokis olevaid käske.";
+Blockly.Msg.CONTROLS_WHILEUNTIL_OPERATOR_UNTIL = "seni kuni pole";
+Blockly.Msg.CONTROLS_WHILEUNTIL_OPERATOR_WHILE = "seni kuni on";
+Blockly.Msg.CONTROLS_WHILEUNTIL_TOOLTIP_UNTIL = "Plokis olevaid käske korratakse seni kui avaldis pole tõene.";
+Blockly.Msg.CONTROLS_WHILEUNTIL_TOOLTIP_WHILE = "Plokis olevaid käske korratakse seni kui avaldis on tõene.";
 Blockly.Msg.DELETE_ALL_BLOCKS = "Kas kustutada kõik %1 plokki?";
 Blockly.Msg.DELETE_BLOCK = "Kustuta plokk";
-Blockly.Msg.DELETE_VARIABLE = "Delete the '%1' variable";  // untranslated
-Blockly.Msg.DELETE_VARIABLE_CONFIRMATION = "Delete %1 uses of the '%2' variable?";  // untranslated
+Blockly.Msg.DELETE_VARIABLE = "Kustuta muutuja '%1'";
+Blockly.Msg.DELETE_VARIABLE_CONFIRMATION = "Kas kustutada %1 kohas kasutatav muutuja '%2'?";
 Blockly.Msg.DELETE_X_BLOCKS = "Kustuta %1 plokki";
 Blockly.Msg.DISABLE_BLOCK = "Keela ploki kasutamine";
 Blockly.Msg.DUPLICATE_BLOCK = "Tekita duplikaat";
@@ -79,14 +79,14 @@ Blockly.Msg.LISTS_CREATE_EMPTY_TOOLTIP = "Tagastab loendi, mille pikkus on 0 ja
 Blockly.Msg.LISTS_CREATE_WITH_CONTAINER_TITLE_ADD = "loend";
 Blockly.Msg.LISTS_CREATE_WITH_CONTAINER_TOOLTIP = "Loendiploki elementide lisamine, eemaldamine või järjestuse muutmine.";
 Blockly.Msg.LISTS_CREATE_WITH_HELPURL = "https://github.com/google/blockly/wiki/Lists#create-list-with";  // untranslated
-Blockly.Msg.LISTS_CREATE_WITH_INPUT_WITH = "loend elementidest";
+Blockly.Msg.LISTS_CREATE_WITH_INPUT_WITH = "uus loend";
 Blockly.Msg.LISTS_CREATE_WITH_ITEM_TOOLTIP = "Elemendi lisamine loendisse.";
 Blockly.Msg.LISTS_CREATE_WITH_TOOLTIP = "Tekitab mistahes arvust elementidest loendi.";
 Blockly.Msg.LISTS_GET_INDEX_FIRST = "esimene element";
-Blockly.Msg.LISTS_GET_INDEX_FROM_END = "# lõpust";
-Blockly.Msg.LISTS_GET_INDEX_FROM_START = "#";  // untranslated
-Blockly.Msg.LISTS_GET_INDEX_GET = "võta";
-Blockly.Msg.LISTS_GET_INDEX_GET_REMOVE = "võta ja eemalda";
+Blockly.Msg.LISTS_GET_INDEX_FROM_END = "element # (lõpust)";
+Blockly.Msg.LISTS_GET_INDEX_FROM_START = "element #";
+Blockly.Msg.LISTS_GET_INDEX_GET = "võetud";
+Blockly.Msg.LISTS_GET_INDEX_GET_REMOVE = "võetud ja eemaldatud";
 Blockly.Msg.LISTS_GET_INDEX_LAST = "viimane element";
 Blockly.Msg.LISTS_GET_INDEX_RANDOM = "juhuslik element";
 Blockly.Msg.LISTS_GET_INDEX_REMOVE = "eemalda";
@@ -114,10 +114,10 @@ Blockly.Msg.LISTS_GET_SUBLIST_TAIL = "";  // untranslated
 Blockly.Msg.LISTS_GET_SUBLIST_TOOLTIP = "Tekitab loendi määratud osast koopia.";
 Blockly.Msg.LISTS_INDEX_FROM_END_TOOLTIP = "Viimane element on %1.";
 Blockly.Msg.LISTS_INDEX_FROM_START_TOOLTIP = "Esimene element on %1.";
-Blockly.Msg.LISTS_INDEX_OF_FIRST = "esimene leitud element";
+Blockly.Msg.LISTS_INDEX_OF_FIRST = "esimene leitud";
 Blockly.Msg.LISTS_INDEX_OF_HELPURL = "https://github.com/google/blockly/wiki/Lists#getting-items-from-a-list";  // untranslated
-Blockly.Msg.LISTS_INDEX_OF_LAST = "viimane leitud element";
-Blockly.Msg.LISTS_INDEX_OF_TOOLTIP = "Tagastab esimese/viimase loendist leitud elemendi asukoha (järjekorranumbri). Kui elementi ei leita, tagastab %1.";
+Blockly.Msg.LISTS_INDEX_OF_LAST = "viimase leitud";
+Blockly.Msg.LISTS_INDEX_OF_TOOLTIP = "Tagastab esimese/viimase loendist leitud objekti asukoha (objekti järjekorranumbri loendis). Kui objekti ei leita, tagastab %1.";
 Blockly.Msg.LISTS_INLIST = "loendis";
 Blockly.Msg.LISTS_ISEMPTY_HELPURL = "https://github.com/google/blockly/wiki/Lists#is-empty";  // untranslated
 Blockly.Msg.LISTS_ISEMPTY_TITLE = "%1 on tühi";
@@ -129,7 +129,7 @@ Blockly.Msg.LISTS_REPEAT_HELPURL = "https://github.com/google/blockly/wiki/Lists
 Blockly.Msg.LISTS_REPEAT_TITLE = "loend pikkusega %2 elemendist %1";
 Blockly.Msg.LISTS_REPEAT_TOOLTIP = "Tekitab uue loendi, millesse lisatakse ühte elementi pikkusega määratud arv kordi.";
 Blockly.Msg.LISTS_SET_INDEX_HELPURL = "https://github.com/google/blockly/wiki/Lists#in-list--set";  // untranslated
-Blockly.Msg.LISTS_SET_INDEX_INPUT_TO = "väärtus:";
+Blockly.Msg.LISTS_SET_INDEX_INPUT_TO = ", väärtus";
 Blockly.Msg.LISTS_SET_INDEX_INSERT = "lisa asukohale";
 Blockly.Msg.LISTS_SET_INDEX_SET = "asenda";
 Blockly.Msg.LISTS_SET_INDEX_TOOLTIP_INSERT_FIRST = "Lisab loendi algusesse uue elemendi.";
@@ -364,11 +364,11 @@ Blockly.Msg.VARIABLES_DEFAULT_NAME = "objekt";
 Blockly.Msg.VARIABLES_GET_CREATE_SET = "Tekita 'määra „%1“ väärtuseks' plokk";
 Blockly.Msg.VARIABLES_GET_HELPURL = "https://github.com/google/blockly/wiki/Variables#get";  // untranslated
 Blockly.Msg.VARIABLES_GET_TOOLTIP = "Tagastab selle muutuja väärtuse.";
-Blockly.Msg.VARIABLES_SET = "\"määra %1 väärtuseks %2";
+Blockly.Msg.VARIABLES_SET = "määra %1 väärtuseks %2";
 Blockly.Msg.VARIABLES_SET_CREATE_GET = "Tekita '„%1“ väärtus' plokk";
 Blockly.Msg.VARIABLES_SET_HELPURL = "https://github.com/google/blockly/wiki/Variables#set";  // untranslated
 Blockly.Msg.VARIABLES_SET_TOOLTIP = "Määrab selle muutuja väärtuse võrdseks sisendi väärtusega.";
-Blockly.Msg.VARIABLE_ALREADY_EXISTS = "A variable named '%1' already exists.";  // untranslated
+Blockly.Msg.VARIABLE_ALREADY_EXISTS = "'%1'-nimeline muutuja on juba olemas.";
 Blockly.Msg.PROCEDURES_DEFRETURN_TITLE = Blockly.Msg.PROCEDURES_DEFNORETURN_TITLE;
 Blockly.Msg.CONTROLS_IF_IF_TITLE_IF = Blockly.Msg.CONTROLS_IF_MSG_IF;
 Blockly.Msg.CONTROLS_WHILEUNTIL_INPUT_DO = Blockly.Msg.CONTROLS_REPEAT_INPUT_DO;