Merge blockly sub-tree

48 files changed, 21069 insertions, 0 deletions

diff --git a/blockly/core/block.js b/blockly/core/block.js
new file mode 100644
index 0000000..2021d3f
--- /dev/null
+++ b/blockly/core/block.js
@@ -0,0 +1,1364 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2011 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview The class representing one block.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.Block');
+
+goog.require('Blockly.Blocks');
+goog.require('Blockly.Comment');
+goog.require('Blockly.Connection');
+goog.require('Blockly.Input');
+goog.require('Blockly.Mutator');
+goog.require('Blockly.Warning');
+goog.require('Blockly.Workspace');
+goog.require('Blockly.Xml');
+goog.require('goog.array');
+goog.require('goog.asserts');
+goog.require('goog.math.Coordinate');
+goog.require('goog.string');
+
+
+/**
+ * Class for one block.
+ * Not normally called directly, workspace.newBlock() is preferred.
+ * @param {!Blockly.Workspace} workspace The block's workspace.
+ * @param {?string} prototypeName Name of the language object containing
+ *     type-specific functions for this block.
+ * @param {=string} opt_id Optional ID.  Use this ID if provided, otherwise
+ *     create a new id.
+ * @constructor
+ */
+Blockly.Block = function(workspace, prototypeName, opt_id) {
+  /** @type {string} */
+  this.id = (opt_id && !workspace.getBlockById(opt_id)) ?
+      opt_id : Blockly.genUid();
+  workspace.blockDB_[this.id] = this;
+  /** @type {Blockly.Connection} */
+  this.outputConnection = null;
+  /** @type {Blockly.Connection} */
+  this.nextConnection = null;
+  /** @type {Blockly.Connection} */
+  this.previousConnection = null;
+  /** @type {!Array.<!Blockly.Input>} */
+  this.inputList = [];
+  /** @type {boolean|undefined} */
+  this.inputsInline = undefined;
+  /** @type {boolean} */
+  this.disabled = false;
+  /** @type {string|!Function} */
+  this.tooltip = '';
+  /** @type {boolean} */
+  this.contextMenu = true;
+
+  /**
+   * @type {Blockly.Block}
+   * @private
+   */
+  this.parentBlock_ = null;
+
+  /**
+   * @type {!Array.<!Blockly.Block>}
+   * @private
+   */
+  this.childBlocks_ = [];
+
+  /**
+   * @type {boolean}
+   * @private
+   */
+  this.deletable_ = true;
+
+  /**
+   * @type {boolean}
+   * @private
+   */
+  this.movable_ = true;
+
+  /**
+   * @type {boolean}
+   * @private
+   */
+  this.editable_ = true;
+
+  /**
+   * @type {boolean}
+   * @private
+   */
+  this.isShadow_ = false;
+
+  /**
+   * @type {boolean}
+   * @private
+   */
+  this.collapsed_ = false;
+
+  /** @type {string|Blockly.Comment} */
+  this.comment = null;
+
+  /**
+   * @type {!goog.math.Coordinate}
+   * @private
+   */
+  this.xy_ = new goog.math.Coordinate(0, 0);
+
+  /** @type {!Blockly.Workspace} */
+  this.workspace = workspace;
+  /** @type {boolean} */
+  this.isInFlyout = workspace.isFlyout;
+  /** @type {boolean} */
+  this.isInMutator = workspace.isMutator;
+
+  /** @type {boolean} */
+  this.RTL = workspace.RTL;
+
+  // Copy the type-specific functions and data from the prototype.
+  if (prototypeName) {
+    /** @type {string} */
+    this.type = prototypeName;
+    var prototype = Blockly.Blocks[prototypeName];
+    goog.asserts.assertObject(prototype,
+        'Error: "%s" is an unknown language block.', prototypeName);
+    goog.mixin(this, prototype);
+  }
+
+  workspace.addTopBlock(this);
+
+  // Call an initialization function, if it exists.
+  if (goog.isFunction(this.init)) {
+    this.init();
+  }
+  // Record initial inline state.
+  /** @type {boolean|undefined} */
+  this.inputsInlineDefault = this.inputsInline;
+  if (Blockly.Events.isEnabled()) {
+    Blockly.Events.fire(new Blockly.Events.Create(this));
+  }
+  // Bind an onchange function, if it exists.
+  if (goog.isFunction(this.onchange)) {
+    this.onchangeWrapper_ = this.onchange.bind(this);
+    this.workspace.addChangeListener(this.onchangeWrapper_);
+  }
+};
+
+/**
+ * Obtain a newly created block.
+ * @param {!Blockly.Workspace} workspace The block's workspace.
+ * @param {?string} prototypeName Name of the language object containing
+ *     type-specific functions for this block.
+ * @return {!Blockly.Block} The created block.
+ * @deprecated December 2015
+ */
+Blockly.Block.obtain = function(workspace, prototypeName) {
+  console.warn('Deprecated call to Blockly.Block.obtain, ' +
+               'use workspace.newBlock instead.');
+  return workspace.newBlock(prototypeName);
+};
+
+/**
+ * Optional text data that round-trips beween blocks and XML.
+ * Has no effect. May be used by 3rd parties for meta information.
+ * @type {?string}
+ */
+Blockly.Block.prototype.data = null;
+
+/**
+ * Colour of the block in '#RRGGBB' format.
+ * @type {string}
+ * @private
+ */
+Blockly.Block.prototype.colour_ = '#000000';
+
+/**
+ * Dispose of this block.
+ * @param {boolean} healStack If true, then try to heal any gap by connecting
+ *     the next statement with the previous statement.  Otherwise, dispose of
+ *     all children of this block.
+ */
+Blockly.Block.prototype.dispose = function(healStack) {
+  if (!this.workspace) {
+    // Already deleted.
+    return;
+  }
+  // Terminate onchange event calls.
+  if (this.onchangeWrapper_) {
+    this.workspace.removeChangeListener(this.onchangeWrapper_);
+  }
+  this.unplug(healStack);
+  if (Blockly.Events.isEnabled()) {
+    Blockly.Events.fire(new Blockly.Events.Delete(this));
+  }
+  Blockly.Events.disable();
+
+  try {
+    // This block is now at the top of the workspace.
+    // Remove this block from the workspace's list of top-most blocks.
+    if (this.workspace) {
+      this.workspace.removeTopBlock(this);
+      // Remove from block database.
+      delete this.workspace.blockDB_[this.id];
+      this.workspace = null;
+    }
+
+    // Just deleting this block from the DOM would result in a memory leak as
+    // well as corruption of the connection database.  Therefore we must
+    // methodically step through the blocks and carefully disassemble them.
+
+    // First, dispose of all my children.
+    for (var i = this.childBlocks_.length - 1; i >= 0; i--) {
+      this.childBlocks_[i].dispose(false);
+    }
+    // Then dispose of myself.
+    // Dispose of all inputs and their fields.
+    for (var i = 0, input; input = this.inputList[i]; i++) {
+      input.dispose();
+    }
+    this.inputList.length = 0;
+    // Dispose of any remaining connections (next/previous/output).
+    var connections = this.getConnections_(true);
+    for (var i = 0; i < connections.length; i++) {
+      var connection = connections[i];
+      if (connection.isConnected()) {
+        connection.disconnect();
+      }
+      connections[i].dispose();
+    }
+  } finally {
+    Blockly.Events.enable();
+  }
+};
+
+/**
+ * Unplug this block from its superior block.  If this block is a statement,
+ * optionally reconnect the block underneath with the block on top.
+ * @param {boolean} opt_healStack Disconnect child statement and reconnect
+ *   stack.  Defaults to false.
+ */
+Blockly.Block.prototype.unplug = function(opt_healStack) {
+  if (this.outputConnection) {
+    if (this.outputConnection.isConnected()) {
+      // Disconnect from any superior block.
+      this.outputConnection.disconnect();
+    }
+  } else if (this.previousConnection) {
+    var previousTarget = null;
+    if (this.previousConnection.isConnected()) {
+      // Remember the connection that any next statements need to connect to.
+      previousTarget = this.previousConnection.targetConnection;
+      // Detach this block from the parent's tree.
+      this.previousConnection.disconnect();
+    }
+    var nextBlock = this.getNextBlock();
+    if (opt_healStack && nextBlock) {
+      // Disconnect the next statement.
+      var nextTarget = this.nextConnection.targetConnection;
+      nextTarget.disconnect();
+      if (previousTarget && previousTarget.checkType_(nextTarget)) {
+        // Attach the next statement to the previous statement.
+        previousTarget.connect(nextTarget);
+      }
+    }
+  }
+};
+
+/**
+ * Returns all connections originating from this block.
+ * @return {!Array.<!Blockly.Connection>} Array of connections.
+ * @private
+ */
+Blockly.Block.prototype.getConnections_ = function() {
+  var myConnections = [];
+  if (this.outputConnection) {
+    myConnections.push(this.outputConnection);
+  }
+  if (this.previousConnection) {
+    myConnections.push(this.previousConnection);
+  }
+  if (this.nextConnection) {
+    myConnections.push(this.nextConnection);
+  }
+  for (var i = 0, input; input = this.inputList[i]; i++) {
+    if (input.connection) {
+      myConnections.push(input.connection);
+    }
+  }
+  return myConnections;
+};
+
+/**
+ * Walks down a stack of blocks and finds the last next connection on the stack.
+ * @return {Blockly.Connection} The last next connection on the stack, or null.
+ * @private
+ */
+Blockly.Block.prototype.lastConnectionInStack_ = function() {
+  var nextConnection = this.nextConnection;
+  while (nextConnection) {
+    var nextBlock = nextConnection.targetBlock();
+    if (!nextBlock) {
+      // Found a next connection with nothing on the other side.
+      return nextConnection;
+    }
+    nextConnection = nextBlock.nextConnection;
+  }
+  // Ran out of next connections.
+  return null;
+};
+
+/**
+ * Bump unconnected blocks out of alignment.  Two blocks which aren't actually
+ * connected should not coincidentally line up on screen.
+ * @private
+ */
+Blockly.Block.prototype.bumpNeighbours_ = function() {
+  if (!this.workspace) {
+    return;  // Deleted block.
+  }
+  if (Blockly.dragMode_ != Blockly.DRAG_NONE) {
+    return;  // Don't bump blocks during a drag.
+  }
+  var rootBlock = this.getRootBlock();
+  if (rootBlock.isInFlyout) {
+    return;  // Don't move blocks around in a flyout.
+  }
+  // Loop though every connection on this block.
+  var myConnections = this.getConnections_(false);
+  for (var i = 0, connection; connection = myConnections[i]; i++) {
+    // Spider down from this block bumping all sub-blocks.
+    if (connection.isConnected() && connection.isSuperior()) {
+      connection.targetBlock().bumpNeighbours_();
+    }
+
+    var neighbours = connection.neighbours_(Blockly.SNAP_RADIUS);
+    for (var j = 0, otherConnection; otherConnection = neighbours[j]; j++) {
+      // If both connections are connected, that's probably fine.  But if
+      // either one of them is unconnected, then there could be confusion.
+      if (!connection.isConnected() || !otherConnection.isConnected()) {
+        // Only bump blocks if they are from different tree structures.
+        if (otherConnection.getSourceBlock().getRootBlock() != rootBlock) {
+          // Always bump the inferior block.
+          if (connection.isSuperior()) {
+            otherConnection.bumpAwayFrom_(connection);
+          } else {
+            connection.bumpAwayFrom_(otherConnection);
+          }
+        }
+      }
+    }
+  }
+};
+
+/**
+ * Return the parent block or null if this block is at the top level.
+ * @return {Blockly.Block} The block that holds the current block.
+ */
+Blockly.Block.prototype.getParent = function() {
+  // Look at the DOM to see if we are nested in another block.
+  return this.parentBlock_;
+};
+
+/**
+ * Return the input that connects to the specified block.
+ * @param {!Blockly.Block} block A block connected to an input on this block.
+ * @return {Blockly.Input} The input that connects to the specified block.
+ */
+Blockly.Block.prototype.getInputWithBlock = function(block) {
+  for (var i = 0, input; input = this.inputList[i]; i++) {
+    if (input.connection && input.connection.targetBlock() == block) {
+      return input;
+    }
+  }
+  return null;
+};
+
+/**
+ * Return the parent block that surrounds the current block, or null if this
+ * block has no surrounding block.  A parent block might just be the previous
+ * statement, whereas the surrounding block is an if statement, while loop, etc.
+ * @return {Blockly.Block} The block that surrounds the current block.
+ */
+Blockly.Block.prototype.getSurroundParent = function() {
+  var block = this;
+  do {
+    var prevBlock = block;
+    block = block.getParent();
+    if (!block) {
+      // Ran off the top.
+      return null;
+    }
+  } while (block.getNextBlock() == prevBlock);
+  // This block is an enclosing parent, not just a statement in a stack.
+  return block;
+};
+
+/**
+ * Return the next statement block directly connected to this block.
+ * @return {Blockly.Block} The next statement block or null.
+ */
+Blockly.Block.prototype.getNextBlock = function() {
+  return this.nextConnection && this.nextConnection.targetBlock();
+};
+
+/**
+ * Return the top-most block in this block's tree.
+ * This will return itself if this block is at the top level.
+ * @return {!Blockly.Block} The root block.
+ */
+Blockly.Block.prototype.getRootBlock = function() {
+  var rootBlock;
+  var block = this;
+  do {
+    rootBlock = block;
+    block = rootBlock.parentBlock_;
+  } while (block);
+  return rootBlock;
+};
+
+/**
+ * Find all the blocks that are directly nested inside this one.
+ * Includes value and block inputs, as well as any following statement.
+ * Excludes any connection on an output tab or any preceding statement.
+ * @return {!Array.<!Blockly.Block>} Array of blocks.
+ */
+Blockly.Block.prototype.getChildren = function() {
+  return this.childBlocks_;
+};
+
+/**
+ * Set parent of this block to be a new block or null.
+ * @param {Blockly.Block} newParent New parent block.
+ */
+Blockly.Block.prototype.setParent = function(newParent) {
+  if (newParent == this.parentBlock_) {
+    return;
+  }
+  if (this.parentBlock_) {
+    // Remove this block from the old parent's child list.
+    var children = this.parentBlock_.childBlocks_;
+    for (var child, x = 0; child = children[x]; x++) {
+      if (child == this) {
+        children.splice(x, 1);
+        break;
+      }
+    }
+
+    // Disconnect from superior blocks.
+    if (this.previousConnection && this.previousConnection.isConnected()) {
+      throw 'Still connected to previous block.';
+    }
+    if (this.outputConnection && this.outputConnection.isConnected()) {
+      throw 'Still connected to parent block.';
+    }
+    this.parentBlock_ = null;
+    // This block hasn't actually moved on-screen, so there's no need to update
+    // its connection locations.
+  } else {
+    // Remove this block from the workspace's list of top-most blocks.
+    this.workspace.removeTopBlock(this);
+  }
+
+  this.parentBlock_ = newParent;
+  if (newParent) {
+    // Add this block to the new parent's child list.
+    newParent.childBlocks_.push(this);
+  } else {
+    this.workspace.addTopBlock(this);
+  }
+};
+
+/**
+ * Find all the blocks that are directly or indirectly nested inside this one.
+ * Includes this block in the list.
+ * Includes value and block inputs, as well as any following statements.
+ * Excludes any connection on an output tab or any preceding statements.
+ * @return {!Array.<!Blockly.Block>} Flattened array of blocks.
+ */
+Blockly.Block.prototype.getDescendants = function() {
+  var blocks = [this];
+  for (var child, x = 0; child = this.childBlocks_[x]; x++) {
+    blocks.push.apply(blocks, child.getDescendants());
+  }
+  return blocks;
+};
+
+/**
+ * Get whether this block is deletable or not.
+ * @return {boolean} True if deletable.
+ */
+Blockly.Block.prototype.isDeletable = function() {
+  return this.deletable_ && !this.isShadow_ &&
+      !(this.workspace && this.workspace.options.readOnly);
+};
+
+/**
+ * Set whether this block is deletable or not.
+ * @param {boolean} deletable True if deletable.
+ */
+Blockly.Block.prototype.setDeletable = function(deletable) {
+  this.deletable_ = deletable;
+};
+
+/**
+ * Get whether this block is movable or not.
+ * @return {boolean} True if movable.
+ */
+Blockly.Block.prototype.isMovable = function() {
+  return this.movable_ && !this.isShadow_ &&
+      !(this.workspace && this.workspace.options.readOnly);
+};
+
+/**
+ * Set whether this block is movable or not.
+ * @param {boolean} movable True if movable.
+ */
+Blockly.Block.prototype.setMovable = function(movable) {
+  this.movable_ = movable;
+};
+
+/**
+ * Get whether this block is a shadow block or not.
+ * @return {boolean} True if a shadow.
+ */
+Blockly.Block.prototype.isShadow = function() {
+  return this.isShadow_;
+};
+
+/**
+ * Set whether this block is a shadow block or not.
+ * @param {boolean} shadow True if a shadow.
+ */
+Blockly.Block.prototype.setShadow = function(shadow) {
+  this.isShadow_ = shadow;
+};
+
+/**
+ * Get whether this block is editable or not.
+ * @return {boolean} True if editable.
+ */
+Blockly.Block.prototype.isEditable = function() {
+  return this.editable_ && !(this.workspace && this.workspace.options.readOnly);
+};
+
+/**
+ * Set whether this block is editable or not.
+ * @param {boolean} editable True if editable.
+ */
+Blockly.Block.prototype.setEditable = function(editable) {
+  this.editable_ = editable;
+  for (var i = 0, input; input = this.inputList[i]; i++) {
+    for (var j = 0, field; field = input.fieldRow[j]; j++) {
+      field.updateEditable();
+    }
+  }
+};
+
+/**
+ * Set whether the connections are hidden (not tracked in a database) or not.
+ * Recursively walk down all child blocks (except collapsed blocks).
+ * @param {boolean} hidden True if connections are hidden.
+ */
+Blockly.Block.prototype.setConnectionsHidden = function(hidden) {
+  if (!hidden && this.isCollapsed()) {
+    if (this.outputConnection) {
+      this.outputConnection.setHidden(hidden);
+    }
+    if (this.previousConnection) {
+      this.previousConnection.setHidden(hidden);
+    }
+    if (this.nextConnection) {
+      this.nextConnection.setHidden(hidden);
+      var child = this.nextConnection.targetBlock();
+      if (child) {
+        child.setConnectionsHidden(hidden);
+      }
+    }
+  } else {
+    var myConnections = this.getConnections_(true);
+    for (var i = 0, connection; connection = myConnections[i]; i++) {
+      connection.setHidden(hidden);
+      if (connection.isSuperior()) {
+        var child = connection.targetBlock();
+        if (child) {
+          child.setConnectionsHidden(hidden);
+        }
+      }
+    }
+  }
+};
+
+/**
+ * Set the URL of this block's help page.
+ * @param {string|Function} url URL string for block help, or function that
+ *     returns a URL.  Null for no help.
+ */
+Blockly.Block.prototype.setHelpUrl = function(url) {
+  this.helpUrl = url;
+};
+
+/**
+ * Change the tooltip text for a block.
+ * @param {string|!Function} newTip Text for tooltip or a parent element to
+ *     link to for its tooltip.  May be a function that returns a string.
+ */
+Blockly.Block.prototype.setTooltip = function(newTip) {
+  this.tooltip = newTip;
+};
+
+/**
+ * Get the colour of a block.
+ * @return {string} #RRGGBB string.
+ */
+Blockly.Block.prototype.getColour = function() {
+  return this.colour_;
+};
+
+/**
+ * Change the colour of a block.
+ * @param {number|string} colour HSV hue value, or #RRGGBB string.
+ */
+Blockly.Block.prototype.setColour = function(colour) {
+  var hue = parseFloat(colour);
+  if (!isNaN(hue)) {
+    this.colour_ = Blockly.hueToRgb(hue);
+  } else if (goog.isString(colour) && colour.match(/^#[0-9a-fA-F]{6}$/)) {
+    this.colour_ = colour;
+  } else {
+    throw 'Invalid colour: ' + colour;
+  }
+};
+
+/**
+ * Returns the named field from a block.
+ * @param {string} name The name of the field.
+ * @return {Blockly.Field} Named field, or null if field does not exist.
+ */
+Blockly.Block.prototype.getField = function(name) {
+  for (var i = 0, input; input = this.inputList[i]; i++) {
+    for (var j = 0, field; field = input.fieldRow[j]; j++) {
+      if (field.name === name) {
+        return field;
+      }
+    }
+  }
+  return null;
+};
+
+/**
+ * Return all variables referenced by this block.
+ * @return {!Array.<string>} List of variable names.
+ */
+Blockly.Block.prototype.getVars = function() {
+  var vars = [];
+  for (var i = 0, input; input = this.inputList[i]; i++) {
+    for (var j = 0, field; field = input.fieldRow[j]; j++) {
+      if (field instanceof Blockly.FieldVariable) {
+        vars.push(field.getValue());
+      }
+    }
+  }
+  return vars;
+};
+
+/**
+ * Notification that a variable is renaming.
+ * If the name matches one of this block's variables, rename it.
+ * @param {string} oldName Previous name of variable.
+ * @param {string} newName Renamed variable.
+ */
+Blockly.Block.prototype.renameVar = function(oldName, newName) {
+  for (var i = 0, input; input = this.inputList[i]; i++) {
+    for (var j = 0, field; field = input.fieldRow[j]; j++) {
+      if (field instanceof Blockly.FieldVariable &&
+          Blockly.Names.equals(oldName, field.getValue())) {
+        field.setValue(newName);
+      }
+    }
+  }
+};
+
+/**
+ * Returns the language-neutral value from the field of a block.
+ * @param {string} name The name of the field.
+ * @return {?string} Value from the field or null if field does not exist.
+ */
+Blockly.Block.prototype.getFieldValue = function(name) {
+  var field = this.getField(name);
+  if (field) {
+    return field.getValue();
+  }
+  return null;
+};
+
+/**
+ * Returns the language-neutral value from the field of a block.
+ * @param {string} name The name of the field.
+ * @return {?string} Value from the field or null if field does not exist.
+ * @deprecated December 2013
+ */
+Blockly.Block.prototype.getTitleValue = function(name) {
+  console.warn('Deprecated call to getTitleValue, use getFieldValue instead.');
+  return this.getFieldValue(name);
+};
+
+/**
+ * Change the field value for a block (e.g. 'CHOOSE' or 'REMOVE').
+ * @param {string} newValue Value to be the new field.
+ * @param {string} name The name of the field.
+ */
+Blockly.Block.prototype.setFieldValue = function(newValue, name) {
+  var field = this.getField(name);
+  goog.asserts.assertObject(field, 'Field "%s" not found.', name);
+  field.setValue(newValue);
+};
+
+/**
+ * Change the field value for a block (e.g. 'CHOOSE' or 'REMOVE').
+ * @param {string} newValue Value to be the new field.
+ * @param {string} name The name of the field.
+ * @deprecated December 2013
+ */
+Blockly.Block.prototype.setTitleValue = function(newValue, name) {
+  console.warn('Deprecated call to setTitleValue, use setFieldValue instead.');
+  this.setFieldValue(newValue, name);
+};
+
+/**
+ * Set whether this block can chain onto the bottom of another block.
+ * @param {boolean} newBoolean True if there can be a previous statement.
+ * @param {string|Array.<string>|null|undefined} opt_check Statement type or
+ *     list of statement types.  Null/undefined if any type could be connected.
+ */
+Blockly.Block.prototype.setPreviousStatement = function(newBoolean, opt_check) {
+  if (newBoolean) {
+    if (opt_check === undefined) {
+      opt_check = null;
+    }
+    if (!this.previousConnection) {
+      goog.asserts.assert(!this.outputConnection,
+          'Remove output connection prior to adding previous connection.');
+      this.previousConnection =
+          this.makeConnection_(Blockly.PREVIOUS_STATEMENT);
+    }
+    this.previousConnection.setCheck(opt_check);
+  } else {
+    if (this.previousConnection) {
+      goog.asserts.assert(!this.previousConnection.isConnected(),
+          'Must disconnect previous statement before removing connection.');
+      this.previousConnection.dispose();
+      this.previousConnection = null;
+    }
+  }
+};
+
+/**
+ * Set whether another block can chain onto the bottom of this block.
+ * @param {boolean} newBoolean True if there can be a next statement.
+ * @param {string|Array.<string>|null|undefined} opt_check Statement type or
+ *     list of statement types.  Null/undefined if any type could be connected.
+ */
+Blockly.Block.prototype.setNextStatement = function(newBoolean, opt_check) {
+  if (newBoolean) {
+    if (opt_check === undefined) {
+      opt_check = null;
+    }
+    if (!this.nextConnection) {
+      this.nextConnection = this.makeConnection_(Blockly.NEXT_STATEMENT);
+    }
+    this.nextConnection.setCheck(opt_check);
+  } else {
+    if (this.nextConnection) {
+      goog.asserts.assert(!this.nextConnection.isConnected(),
+          'Must disconnect next statement before removing connection.');
+      this.nextConnection.dispose();
+      this.nextConnection = null;
+    }
+  }
+};
+
+/**
+ * Set whether this block returns a value.
+ * @param {boolean} newBoolean True if there is an output.
+ * @param {string|Array.<string>|null|undefined} opt_check Returned type or list
+ *     of returned types.  Null or undefined if any type could be returned
+ *     (e.g. variable get).
+ */
+Blockly.Block.prototype.setOutput = function(newBoolean, opt_check) {
+  if (newBoolean) {
+    if (opt_check === undefined) {
+      opt_check = null;
+    }
+    if (!this.outputConnection) {
+      goog.asserts.assert(!this.previousConnection,
+          'Remove previous connection prior to adding output connection.');
+      this.outputConnection = this.makeConnection_(Blockly.OUTPUT_VALUE);
+    }
+    this.outputConnection.setCheck(opt_check);
+  } else {
+    if (this.outputConnection) {
+      goog.asserts.assert(!this.outputConnection.isConnected(),
+          'Must disconnect output value before removing connection.');
+      this.outputConnection.dispose();
+      this.outputConnection = null;
+    }
+  }
+};
+
+/**
+ * Set whether value inputs are arranged horizontally or vertically.
+ * @param {boolean} newBoolean True if inputs are horizontal.
+ */
+Blockly.Block.prototype.setInputsInline = function(newBoolean) {
+  if (this.inputsInline != newBoolean) {
+    Blockly.Events.fire(new Blockly.Events.Change(
+        this, 'inline', null, this.inputsInline, newBoolean));
+    this.inputsInline = newBoolean;
+  }
+};
+
+/**
+ * Get whether value inputs are arranged horizontally or vertically.
+ * @return {boolean} True if inputs are horizontal.
+ */
+Blockly.Block.prototype.getInputsInline = function() {
+  if (this.inputsInline != undefined) {
+    // Set explicitly.
+    return this.inputsInline;
+  }
+  // Not defined explicitly.  Figure out what would look best.
+  for (var i = 1; i < this.inputList.length; i++) {
+    if (this.inputList[i - 1].type == Blockly.DUMMY_INPUT &&
+        this.inputList[i].type == Blockly.DUMMY_INPUT) {
+      // Two dummy inputs in a row.  Don't inline them.
+      return false;
+    }
+  }
+  for (var i = 1; i < this.inputList.length; i++) {
+    if (this.inputList[i - 1].type == Blockly.INPUT_VALUE &&
+        this.inputList[i].type == Blockly.DUMMY_INPUT) {
+      // Dummy input after a value input.  Inline them.
+      return true;
+    }
+  }
+  return false;
+};
+
+/**
+ * Set whether the block is disabled or not.
+ * @param {boolean} disabled True if disabled.
+ */
+Blockly.Block.prototype.setDisabled = function(disabled) {
+  if (this.disabled != disabled) {
+    Blockly.Events.fire(new Blockly.Events.Change(
+        this, 'disabled', null, this.disabled, disabled));
+    this.disabled = disabled;
+  }
+};
+
+/**
+ * Get whether the block is disabled or not due to parents.
+ * The block's own disabled property is not considered.
+ * @return {boolean} True if disabled.
+ */
+Blockly.Block.prototype.getInheritedDisabled = function() {
+  var block = this;
+  while (true) {
+    block = block.getSurroundParent();
+    if (!block) {
+      // Ran off the top.
+      return false;
+    } else if (block.disabled) {
+      return true;
+    }
+  }
+};
+
+/**
+ * Get whether the block is collapsed or not.
+ * @return {boolean} True if collapsed.
+ */
+Blockly.Block.prototype.isCollapsed = function() {
+  return this.collapsed_;
+};
+
+/**
+ * Set whether the block is collapsed or not.
+ * @param {boolean} collapsed True if collapsed.
+ */
+Blockly.Block.prototype.setCollapsed = function(collapsed) {
+  if (this.collapsed_ != collapsed) {
+    Blockly.Events.fire(new Blockly.Events.Change(
+        this, 'collapsed', null, this.collapsed_, collapsed));
+    this.collapsed_ = collapsed;
+  }
+};
+
+/**
+ * Create a human-readable text representation of this block and any children.
+ * @param {number=} opt_maxLength Truncate the string to this length.
+ * @param {string=} opt_emptyToken The placeholder string used to denote an
+ *     empty field. If not specified, '?' is used.
+ * @return {string} Text of block.
+ */
+Blockly.Block.prototype.toString = function(opt_maxLength, opt_emptyToken) {
+  var text = [];
+  var emptyFieldPlaceholder = opt_emptyToken || '?';
+  if (this.collapsed_) {
+    text.push(this.getInput('_TEMP_COLLAPSED_INPUT').fieldRow[0].text_);
+  } else {
+    for (var i = 0, input; input = this.inputList[i]; i++) {
+      for (var j = 0, field; field = input.fieldRow[j]; j++) {
+        text.push(field.getText());
+      }
+      if (input.connection) {
+        var child = input.connection.targetBlock();
+        if (child) {
+          text.push(child.toString(undefined, opt_emptyToken));
+        } else {
+          text.push(emptyFieldPlaceholder);
+        }
+      }
+    }
+  }
+  text = goog.string.trim(text.join(' ')) || '???';
+  if (opt_maxLength) {
+    // TODO: Improve truncation so that text from this block is given priority.
+    // E.g. "1+2+3+4+5+6+7+8+9=0" should be "...6+7+8+9=0", not "1+2+3+4+5...".
+    // E.g. "1+2+3+4+5=6+7+8+9+0" should be "...4+5=6+7...".
+    text = goog.string.truncate(text, opt_maxLength);
+  }
+  return text;
+};
+
+/**
+ * Shortcut for appending a value input row.
+ * @param {string} name Language-neutral identifier which may used to find this
+ *     input again.  Should be unique to this block.
+ * @return {!Blockly.Input} The input object created.
+ */
+Blockly.Block.prototype.appendValueInput = function(name) {
+  return this.appendInput_(Blockly.INPUT_VALUE, name);
+};
+
+/**
+ * Shortcut for appending a statement input row.
+ * @param {string} name Language-neutral identifier which may used to find this
+ *     input again.  Should be unique to this block.
+ * @return {!Blockly.Input} The input object created.
+ */
+Blockly.Block.prototype.appendStatementInput = function(name) {
+  return this.appendInput_(Blockly.NEXT_STATEMENT, name);
+};
+
+/**
+ * Shortcut for appending a dummy input row.
+ * @param {string=} opt_name Language-neutral identifier which may used to find
+ *     this input again.  Should be unique to this block.
+ * @return {!Blockly.Input} The input object created.
+ */
+Blockly.Block.prototype.appendDummyInput = function(opt_name) {
+  return this.appendInput_(Blockly.DUMMY_INPUT, opt_name || '');
+};
+
+/**
+ * Initialize this block using a cross-platform, internationalization-friendly
+ * JSON description.
+ * @param {!Object} json Structured data describing the block.
+ */
+Blockly.Block.prototype.jsonInit = function(json) {
+  // Validate inputs.
+  goog.asserts.assert(json['output'] == undefined ||
+      json['previousStatement'] == undefined,
+      'Must not have both an output and a previousStatement.');
+
+  // Set basic properties of block.
+  if (json['colour'] !== undefined) {
+    this.setColour(json['colour']);
+  }
+
+  // Interpolate the message blocks.
+  var i = 0;
+  while (json['message' + i] !== undefined) {
+    this.interpolate_(json['message' + i], json['args' + i] || [],
+        json['lastDummyAlign' + i]);
+    i++;
+  }
+
+  if (json['inputsInline'] !== undefined) {
+    this.setInputsInline(json['inputsInline']);
+  }
+  // Set output and previous/next connections.
+  if (json['output'] !== undefined) {
+    this.setOutput(true, json['output']);
+  }
+  if (json['previousStatement'] !== undefined) {
+    this.setPreviousStatement(true, json['previousStatement']);
+  }
+  if (json['nextStatement'] !== undefined) {
+    this.setNextStatement(true, json['nextStatement']);
+  }
+  if (json['tooltip'] !== undefined) {
+    this.setTooltip(json['tooltip']);
+  }
+  if (json['helpUrl'] !== undefined) {
+    this.setHelpUrl(json['helpUrl']);
+  }
+};
+
+/**
+ * Interpolate a message description onto the block.
+ * @param {string} message Text contains interpolation tokens (%1, %2, ...)
+ *     that match with fields or inputs defined in the args array.
+ * @param {!Array} args Array of arguments to be interpolated.
+ * @param {=string} lastDummyAlign If a dummy input is added at the end,
+ *     how should it be aligned?
+ * @private
+ */
+Blockly.Block.prototype.interpolate_ = function(message, args, lastDummyAlign) {
+  var tokens = Blockly.utils.tokenizeInterpolation(message);
+  // Interpolate the arguments.  Build a list of elements.
+  var indexDup = [];
+  var indexCount = 0;
+  var elements = [];
+  for (var i = 0; i < tokens.length; i++) {
+    var token = tokens[i];
+    if (typeof token == 'number') {
+      goog.asserts.assert(token > 0 && token <= args.length,
+          'Message index "%s" out of range.', token);
+      goog.asserts.assert(!indexDup[token],
+          'Message index "%s" duplicated.', token);
+      indexDup[token] = true;
+      indexCount++;
+      elements.push(args[token - 1]);
+    } else {
+      token = token.trim();
+      if (token) {
+        elements.push(token);
+      }
+    }
+  }
+  goog.asserts.assert(indexCount == args.length,
+      'Message does not reference all %s arg(s).', args.length);
+  // Add last dummy input if needed.
+  if (elements.length && (typeof elements[elements.length - 1] == 'string' ||
+      elements[elements.length - 1]['type'].indexOf('field_') == 0)) {
+    var dummyInput = {type: 'input_dummy'};
+    if (lastDummyAlign) {
+      dummyInput['align'] = lastDummyAlign;
+    }
+    elements.push(dummyInput);
+  }
+  // Lookup of alignment constants.
+  var alignmentLookup = {
+    'LEFT': Blockly.ALIGN_LEFT,
+    'RIGHT': Blockly.ALIGN_RIGHT,
+    'CENTRE': Blockly.ALIGN_CENTRE
+  };
+  // Populate block with inputs and fields.
+  var fieldStack = [];
+  for (var i = 0; i < elements.length; i++) {
+    var element = elements[i];
+    if (typeof element == 'string') {
+      fieldStack.push([element, undefined]);
+    } else {
+      var field = null;
+      var input = null;
+      do {
+        var altRepeat = false;
+        if (typeof element == 'string') {
+          field = new Blockly.FieldLabel(element);
+        } else {
+          switch (element['type']) {
+            case 'input_value':
+              input = this.appendValueInput(element['name']);
+              break;
+            case 'input_statement':
+              input = this.appendStatementInput(element['name']);
+              break;
+            case 'input_dummy':
+              input = this.appendDummyInput(element['name']);
+              break;
+            case 'field_label':
+              field = new Blockly.FieldLabel(element['text'], element['class']);
+              break;
+            case 'field_input':
+              field = new Blockly.FieldTextInput(element['text']);
+              if (typeof element['spellcheck'] == 'boolean') {
+                field.setSpellcheck(element['spellcheck']);
+              }
+              break;
+            case 'field_angle':
+              field = new Blockly.FieldAngle(element['angle']);
+              break;
+            case 'field_checkbox':
+              field = new Blockly.FieldCheckbox(
+                  element['checked'] ? 'TRUE' : 'FALSE');
+              break;
+            case 'field_colour':
+              field = new Blockly.FieldColour(element['colour']);
+              break;
+            case 'field_variable':
+              field = new Blockly.FieldVariable(element['variable']);
+              break;
+            case 'field_dropdown':
+              field = new Blockly.FieldDropdown(element['options']);
+              break;
+            case 'field_image':
+              field = new Blockly.FieldImage(element['src'],
+                  element['width'], element['height'], element['alt']);
+              break;
+            case 'field_number':
+              field = new Blockly.FieldNumber(element['value'],
+                  element['min'], element['max'], element['precision']);
+              break;
+            case 'field_date':
+              if (Blockly.FieldDate) {
+                field = new Blockly.FieldDate(element['date']);
+                break;
+              }
+              // Fall through if FieldDate is not compiled in.
+            default:
+              // Unknown field.
+              if (element['alt']) {
+                element = element['alt'];
+                altRepeat = true;
+              }
+          }
+        }
+      } while (altRepeat);
+      if (field) {
+        fieldStack.push([field, element['name']]);
+      } else if (input) {
+        if (element['check']) {
+          input.setCheck(element['check']);
+        }
+        if (element['align']) {
+          input.setAlign(alignmentLookup[element['align']]);
+        }
+        for (var j = 0; j < fieldStack.length; j++) {
+          input.appendField(fieldStack[j][0], fieldStack[j][1]);
+        }
+        fieldStack.length = 0;
+      }
+    }
+  }
+};
+
+/**
+ * Add a value input, statement input or local variable to this block.
+ * @param {number} type Either Blockly.INPUT_VALUE or Blockly.NEXT_STATEMENT or
+ *     Blockly.DUMMY_INPUT.
+ * @param {string} name Language-neutral identifier which may used to find this
+ *     input again.  Should be unique to this block.
+ * @return {!Blockly.Input} The input object created.
+ * @private
+ */
+Blockly.Block.prototype.appendInput_ = function(type, name) {
+  var connection = null;
+  if (type == Blockly.INPUT_VALUE || type == Blockly.NEXT_STATEMENT) {
+    connection = this.makeConnection_(type);
+  }
+  var input = new Blockly.Input(type, name, this, connection);
+  // Append input to list.
+  this.inputList.push(input);
+  return input;
+};
+
+/**
+ * Move a named input to a different location on this block.
+ * @param {string} name The name of the input to move.
+ * @param {?string} refName Name of input that should be after the moved input,
+ *   or null to be the input at the end.
+ */
+Blockly.Block.prototype.moveInputBefore = function(name, refName) {
+  if (name == refName) {
+    return;
+  }
+  // Find both inputs.
+  var inputIndex = -1;
+  var refIndex = refName ? -1 : this.inputList.length;
+  for (var i = 0, input; input = this.inputList[i]; i++) {
+    if (input.name == name) {
+      inputIndex = i;
+      if (refIndex != -1) {
+        break;
+      }
+    } else if (refName && input.name == refName) {
+      refIndex = i;
+      if (inputIndex != -1) {
+        break;
+      }
+    }
+  }
+  goog.asserts.assert(inputIndex != -1, 'Named input "%s" not found.', name);
+  goog.asserts.assert(refIndex != -1, 'Reference input "%s" not found.',
+                      refName);
+  this.moveNumberedInputBefore(inputIndex, refIndex);
+};
+
+/**
+ * Move a numbered input to a different location on this block.
+ * @param {number} inputIndex Index of the input to move.
+ * @param {number} refIndex Index of input that should be after the moved input.
+ */
+Blockly.Block.prototype.moveNumberedInputBefore = function(
+    inputIndex, refIndex) {
+  // Validate arguments.
+  goog.asserts.assert(inputIndex != refIndex, 'Can\'t move input to itself.');
+  goog.asserts.assert(inputIndex < this.inputList.length,
+                      'Input index ' + inputIndex + ' out of bounds.');
+  goog.asserts.assert(refIndex <= this.inputList.length,
+                      'Reference input ' + refIndex + ' out of bounds.');
+  // Remove input.
+  var input = this.inputList[inputIndex];
+  this.inputList.splice(inputIndex, 1);
+  if (inputIndex < refIndex) {
+    refIndex--;
+  }
+  // Reinsert input.
+  this.inputList.splice(refIndex, 0, input);
+};
+
+/**
+ * Remove an input from this block.
+ * @param {string} name The name of the input.
+ * @param {boolean=} opt_quiet True to prevent error if input is not present.
+ * @throws {goog.asserts.AssertionError} if the input is not present and
+ *     opt_quiet is not true.
+ */
+Blockly.Block.prototype.removeInput = function(name, opt_quiet) {
+  for (var i = 0, input; input = this.inputList[i]; i++) {
+    if (input.name == name) {
+      if (input.connection && input.connection.isConnected()) {
+        input.connection.setShadowDom(null);
+        var block = input.connection.targetBlock();
+        if (block.isShadow()) {
+          // Destroy any attached shadow block.
+          block.dispose();
+        } else {
+          // Disconnect any attached normal block.
+          block.unplug();
+        }
+      }
+      input.dispose();
+      this.inputList.splice(i, 1);
+      return;
+    }
+  }
+  if (!opt_quiet) {
+    goog.asserts.fail('Input "%s" not found.', name);
+  }
+};
+
+/**
+ * Fetches the named input object.
+ * @param {string} name The name of the input.
+ * @return {Blockly.Input} The input object, or null if input does not exist.
+ */
+Blockly.Block.prototype.getInput = function(name) {
+  for (var i = 0, input; input = this.inputList[i]; i++) {
+    if (input.name == name) {
+      return input;
+    }
+  }
+  // This input does not exist.
+  return null;
+};
+
+/**
+ * Fetches the block attached to the named input.
+ * @param {string} name The name of the input.
+ * @return {Blockly.Block} The attached value block, or null if the input is
+ *     either disconnected or if the input does not exist.
+ */
+Blockly.Block.prototype.getInputTargetBlock = function(name) {
+  var input = this.getInput(name);
+  return input && input.connection && input.connection.targetBlock();
+};
+
+/**
+ * Returns the comment on this block (or '' if none).
+ * @return {string} Block's comment.
+ */
+Blockly.Block.prototype.getCommentText = function() {
+  return this.comment || '';
+};
+
+/**
+ * Set this block's comment text.
+ * @param {?string} text The text, or null to delete.
+ */
+Blockly.Block.prototype.setCommentText = function(text) {
+  if (this.comment != text) {
+    Blockly.Events.fire(new Blockly.Events.Change(
+        this, 'comment', null, this.comment, text || ''));
+    this.comment = text;
+  }
+};
+
+/**
+ * Set this block's warning text.
+ * @param {?string} text The text, or null to delete.
+ */
+Blockly.Block.prototype.setWarningText = function(text) {
+  // NOP.
+};
+
+/**
+ * Give this block a mutator dialog.
+ * @param {Blockly.Mutator} mutator A mutator dialog instance or null to remove.
+ */
+Blockly.Block.prototype.setMutator = function(mutator) {
+  // NOP.
+};
+
+/**
+ * Return the coordinates of the top-left corner of this block relative to the
+ * drawing surface's origin (0,0).
+ * @return {!goog.math.Coordinate} Object with .x and .y properties.
+ */
+Blockly.Block.prototype.getRelativeToSurfaceXY = function() {
+  return this.xy_;
+};
+
+/**
+ * Move a block by a relative offset.
+ * @param {number} dx Horizontal offset.
+ * @param {number} dy Vertical offset.
+ */
+Blockly.Block.prototype.moveBy = function(dx, dy) {
+  goog.asserts.assert(!this.parentBlock_, 'Block has parent.');
+  var event = new Blockly.Events.Move(this);
+  this.xy_.translate(dx, dy);
+  event.recordNew();
+  Blockly.Events.fire(event);
+};
+
+/**
+ * Create a connection of the specified type.
+ * @param {number} type The type of the connection to create.
+ * @return {!Blockly.Connection} A new connection of the specified type.
+ * @private
+ */
+Blockly.Block.prototype.makeConnection_ = function(type) {
+  return new Blockly.Connection(this, type);
+};
diff --git a/blockly/core/block_render_svg.js b/blockly/core/block_render_svg.js
new file mode 100644
index 0000000..14c42b0
--- /dev/null
+++ b/blockly/core/block_render_svg.js
@@ -0,0 +1,969 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2016 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Methods for graphically rendering a block as SVG.
+ * @author fenichel@google.com (Rachel Fenichel)
+ */
+
+'use strict';
+
+goog.provide('Blockly.BlockSvg.render');
+
+goog.require('Blockly.BlockSvg');
+
+
+// UI constants for rendering blocks.
+/**
+ * Horizontal space between elements.
+ * @const
+ */
+Blockly.BlockSvg.SEP_SPACE_X = 10;
+/**
+ * Vertical space between elements.
+ * @const
+ */
+Blockly.BlockSvg.SEP_SPACE_Y = 10;
+/**
+ * Vertical padding around inline elements.
+ * @const
+ */
+Blockly.BlockSvg.INLINE_PADDING_Y = 5;
+/**
+ * Minimum height of a block.
+ * @const
+ */
+Blockly.BlockSvg.MIN_BLOCK_Y = 25;
+/**
+ * Height of horizontal puzzle tab.
+ * @const
+ */
+Blockly.BlockSvg.TAB_HEIGHT = 20;
+/**
+ * Width of horizontal puzzle tab.
+ * @const
+ */
+Blockly.BlockSvg.TAB_WIDTH = 8;
+/**
+ * Width of vertical tab (inc left margin).
+ * @const
+ */
+Blockly.BlockSvg.NOTCH_WIDTH = 30;
+/**
+ * Rounded corner radius.
+ * @const
+ */
+Blockly.BlockSvg.CORNER_RADIUS = 8;
+/**
+ * Do blocks with no previous or output connections have a 'hat' on top?
+ * @const
+ */
+Blockly.BlockSvg.START_HAT = false;
+/**
+ * Height of the top hat.
+ * @const
+ */
+Blockly.BlockSvg.START_HAT_HEIGHT = 15;
+/**
+ * Path of the top hat's curve.
+ * @const
+ */
+Blockly.BlockSvg.START_HAT_PATH = 'c 30,-' +
+    Blockly.BlockSvg.START_HAT_HEIGHT + ' 70,-' +
+    Blockly.BlockSvg.START_HAT_HEIGHT + ' 100,0';
+/**
+ * Path of the top hat's curve's highlight in LTR.
+ * @const
+ */
+Blockly.BlockSvg.START_HAT_HIGHLIGHT_LTR =
+    'c 17.8,-9.2 45.3,-14.9 75,-8.7 M 100.5,0.5';
+/**
+ * Path of the top hat's curve's highlight in RTL.
+ * @const
+ */
+Blockly.BlockSvg.START_HAT_HIGHLIGHT_RTL =
+    'm 25,-8.7 c 29.7,-6.2 57.2,-0.5 75,8.7';
+/**
+ * Distance from shape edge to intersect with a curved corner at 45 degrees.
+ * Applies to highlighting on around the inside of a curve.
+ * @const
+ */
+Blockly.BlockSvg.DISTANCE_45_INSIDE = (1 - Math.SQRT1_2) *
+    (Blockly.BlockSvg.CORNER_RADIUS - 0.5) + 0.5;
+/**
+ * Distance from shape edge to intersect with a curved corner at 45 degrees.
+ * Applies to highlighting on around the outside of a curve.
+ * @const
+ */
+Blockly.BlockSvg.DISTANCE_45_OUTSIDE = (1 - Math.SQRT1_2) *
+    (Blockly.BlockSvg.CORNER_RADIUS + 0.5) - 0.5;
+/**
+ * SVG path for drawing next/previous notch from left to right.
+ * @const
+ */
+Blockly.BlockSvg.NOTCH_PATH_LEFT = 'l 6,4 3,0 6,-4';
+/**
+ * SVG path for drawing next/previous notch from left to right with
+ * highlighting.
+ * @const
+ */
+Blockly.BlockSvg.NOTCH_PATH_LEFT_HIGHLIGHT = 'l 6,4 3,0 6,-4';
+/**
+ * SVG path for drawing next/previous notch from right to left.
+ * @const
+ */
+Blockly.BlockSvg.NOTCH_PATH_RIGHT = 'l -6,4 -3,0 -6,-4';
+/**
+ * SVG path for drawing jagged teeth at the end of collapsed blocks.
+ * @const
+ */
+Blockly.BlockSvg.JAGGED_TEETH = 'l 8,0 0,4 8,4 -16,8 8,4';
+/**
+ * Height of SVG path for jagged teeth at the end of collapsed blocks.
+ * @const
+ */
+Blockly.BlockSvg.JAGGED_TEETH_HEIGHT = 20;
+/**
+ * Width of SVG path for jagged teeth at the end of collapsed blocks.
+ * @const
+ */
+Blockly.BlockSvg.JAGGED_TEETH_WIDTH = 15;
+/**
+ * SVG path for drawing a horizontal puzzle tab from top to bottom.
+ * @const
+ */
+Blockly.BlockSvg.TAB_PATH_DOWN = 'v 5 c 0,10 -' + Blockly.BlockSvg.TAB_WIDTH +
+    ',-8 -' + Blockly.BlockSvg.TAB_WIDTH + ',7.5 s ' +
+    Blockly.BlockSvg.TAB_WIDTH + ',-2.5 ' + Blockly.BlockSvg.TAB_WIDTH + ',7.5';
+/**
+ * SVG path for drawing a horizontal puzzle tab from top to bottom with
+ * highlighting from the upper-right.
+ * @const
+ */
+Blockly.BlockSvg.TAB_PATH_DOWN_HIGHLIGHT_RTL = 'v 6.5 m -' +
+    (Blockly.BlockSvg.TAB_WIDTH * 0.97) + ',3 q -' +
+    (Blockly.BlockSvg.TAB_WIDTH * 0.05) + ',10 ' +
+    (Blockly.BlockSvg.TAB_WIDTH * 0.3) + ',9.5 m ' +
+    (Blockly.BlockSvg.TAB_WIDTH * 0.67) + ',-1.9 v 1.4';
+
+/**
+ * SVG start point for drawing the top-left corner.
+ * @const
+ */
+Blockly.BlockSvg.TOP_LEFT_CORNER_START =
+    'm 0,' + Blockly.BlockSvg.CORNER_RADIUS;
+/**
+ * SVG start point for drawing the top-left corner's highlight in RTL.
+ * @const
+ */
+Blockly.BlockSvg.TOP_LEFT_CORNER_START_HIGHLIGHT_RTL =
+    'm ' + Blockly.BlockSvg.DISTANCE_45_INSIDE + ',' +
+    Blockly.BlockSvg.DISTANCE_45_INSIDE;
+/**
+ * SVG start point for drawing the top-left corner's highlight in LTR.
+ * @const
+ */
+Blockly.BlockSvg.TOP_LEFT_CORNER_START_HIGHLIGHT_LTR =
+    'm 0.5,' + (Blockly.BlockSvg.CORNER_RADIUS - 0.5);
+/**
+ * SVG path for drawing the rounded top-left corner.
+ * @const
+ */
+Blockly.BlockSvg.TOP_LEFT_CORNER =
+    'A ' + Blockly.BlockSvg.CORNER_RADIUS + ',' +
+    Blockly.BlockSvg.CORNER_RADIUS + ' 0 0,1 ' +
+    Blockly.BlockSvg.CORNER_RADIUS + ',0';
+/**
+ * SVG path for drawing the highlight on the rounded top-left corner.
+ * @const
+ */
+Blockly.BlockSvg.TOP_LEFT_CORNER_HIGHLIGHT =
+    'A ' + (Blockly.BlockSvg.CORNER_RADIUS - 0.5) + ',' +
+    (Blockly.BlockSvg.CORNER_RADIUS - 0.5) + ' 0 0,1 ' +
+    Blockly.BlockSvg.CORNER_RADIUS + ',0.5';
+/**
+ * SVG path for drawing the top-left corner of a statement input.
+ * Includes the top notch, a horizontal space, and the rounded inside corner.
+ * @const
+ */
+Blockly.BlockSvg.INNER_TOP_LEFT_CORNER =
+    Blockly.BlockSvg.NOTCH_PATH_RIGHT + ' h -' +
+    (Blockly.BlockSvg.NOTCH_WIDTH - 15 - Blockly.BlockSvg.CORNER_RADIUS) +
+    ' a ' + Blockly.BlockSvg.CORNER_RADIUS + ',' +
+    Blockly.BlockSvg.CORNER_RADIUS + ' 0 0,0 -' +
+    Blockly.BlockSvg.CORNER_RADIUS + ',' +
+    Blockly.BlockSvg.CORNER_RADIUS;
+/**
+ * SVG path for drawing the bottom-left corner of a statement input.
+ * Includes the rounded inside corner.
+ * @const
+ */
+Blockly.BlockSvg.INNER_BOTTOM_LEFT_CORNER =
+    'a ' + Blockly.BlockSvg.CORNER_RADIUS + ',' +
+    Blockly.BlockSvg.CORNER_RADIUS + ' 0 0,0 ' +
+    Blockly.BlockSvg.CORNER_RADIUS + ',' +
+    Blockly.BlockSvg.CORNER_RADIUS;
+/**
+ * SVG path for drawing highlight on the top-left corner of a statement
+ * input in RTL.
+ * @const
+ */
+Blockly.BlockSvg.INNER_TOP_LEFT_CORNER_HIGHLIGHT_RTL =
+    'a ' + Blockly.BlockSvg.CORNER_RADIUS + ',' +
+    Blockly.BlockSvg.CORNER_RADIUS + ' 0 0,0 ' +
+    (-Blockly.BlockSvg.DISTANCE_45_OUTSIDE - 0.5) + ',' +
+    (Blockly.BlockSvg.CORNER_RADIUS -
+    Blockly.BlockSvg.DISTANCE_45_OUTSIDE);
+/**
+ * SVG path for drawing highlight on the bottom-left corner of a statement
+ * input in RTL.
+ * @const
+ */
+Blockly.BlockSvg.INNER_BOTTOM_LEFT_CORNER_HIGHLIGHT_RTL =
+    'a ' + (Blockly.BlockSvg.CORNER_RADIUS + 0.5) + ',' +
+    (Blockly.BlockSvg.CORNER_RADIUS + 0.5) + ' 0 0,0 ' +
+    (Blockly.BlockSvg.CORNER_RADIUS + 0.5) + ',' +
+    (Blockly.BlockSvg.CORNER_RADIUS + 0.5);
+/**
+ * SVG path for drawing highlight on the bottom-left corner of a statement
+ * input in LTR.
+ * @const
+ */
+Blockly.BlockSvg.INNER_BOTTOM_LEFT_CORNER_HIGHLIGHT_LTR =
+    'a ' + (Blockly.BlockSvg.CORNER_RADIUS + 0.5) + ',' +
+    (Blockly.BlockSvg.CORNER_RADIUS + 0.5) + ' 0 0,0 ' +
+    (Blockly.BlockSvg.CORNER_RADIUS -
+    Blockly.BlockSvg.DISTANCE_45_OUTSIDE) + ',' +
+    (Blockly.BlockSvg.DISTANCE_45_OUTSIDE + 0.5);
+
+/**
+ * Render the block.
+ * Lays out and reflows a block based on its contents and settings.
+ * @param {boolean=} opt_bubble If false, just render this block.
+ *   If true, also render block's parent, grandparent, etc.  Defaults to true.
+ */
+Blockly.BlockSvg.prototype.render = function(opt_bubble) {
+  Blockly.Field.startCache();
+  this.rendered = true;
+
+  var cursorX = Blockly.BlockSvg.SEP_SPACE_X;
+  if (this.RTL) {
+    cursorX = -cursorX;
+  }
+  // Move the icons into position.
+  var icons = this.getIcons();
+  for (var i = 0; i < icons.length; i++) {
+    cursorX = icons[i].renderIcon(cursorX);
+  }
+  cursorX += this.RTL ?
+      Blockly.BlockSvg.SEP_SPACE_X : -Blockly.BlockSvg.SEP_SPACE_X;
+  // If there are no icons, cursorX will be 0, otherwise it will be the
+  // width that the first label needs to move over by.
+
+  var inputRows = this.renderCompute_(cursorX);
+  this.renderDraw_(cursorX, inputRows);
+  this.renderMoveConnections_();
+
+  if (opt_bubble !== false) {
+    // Render all blocks above this one (propagate a reflow).
+    var parentBlock = this.getParent();
+    if (parentBlock) {
+      parentBlock.render(true);
+    } else {
+      // Top-most block.  Fire an event to allow scrollbars to resize.
+      this.workspace.resizeContents();
+    }
+  }
+  Blockly.Field.stopCache();
+};
+
+/**
+ * Render a list of fields starting at the specified location.
+ * @param {!Array.<!Blockly.Field>} fieldList List of fields.
+ * @param {number} cursorX X-coordinate to start the fields.
+ * @param {number} cursorY Y-coordinate to start the fields.
+ * @return {number} X-coordinate of the end of the field row (plus a gap).
+ * @private
+ */
+Blockly.BlockSvg.prototype.renderFields_ =
+    function(fieldList, cursorX, cursorY) {
+  /* eslint-disable indent */
+  cursorY += Blockly.BlockSvg.INLINE_PADDING_Y;
+  if (this.RTL) {
+    cursorX = -cursorX;
+  }
+  for (var t = 0, field; field = fieldList[t]; t++) {
+    var root = field.getSvgRoot();
+    if (!root) {
+      continue;
+    }
+    if (this.RTL) {
+      cursorX -= field.renderSep + field.renderWidth;
+      root.setAttribute('transform',
+          'translate(' + cursorX + ',' + cursorY + ')');
+      if (field.renderWidth) {
+        cursorX -= Blockly.BlockSvg.SEP_SPACE_X;
+      }
+    } else {
+      root.setAttribute('transform',
+          'translate(' + (cursorX + field.renderSep) + ',' + cursorY + ')');
+      if (field.renderWidth) {
+        cursorX += field.renderSep + field.renderWidth +
+            Blockly.BlockSvg.SEP_SPACE_X;
+      }
+    }
+  }
+  return this.RTL ? -cursorX : cursorX;
+};  /* eslint-enable indent */
+
+/**
+ * Computes the height and widths for each row and field.
+ * @param {number} iconWidth Offset of first row due to icons.
+ * @return {!Array.<!Array.<!Object>>} 2D array of objects, each containing
+ *     position information.
+ * @private
+ */
+Blockly.BlockSvg.prototype.renderCompute_ = function(iconWidth) {
+  var inputList = this.inputList;
+  var inputRows = [];
+  inputRows.rightEdge = iconWidth + Blockly.BlockSvg.SEP_SPACE_X * 2;
+  if (this.previousConnection || this.nextConnection) {
+    inputRows.rightEdge = Math.max(inputRows.rightEdge,
+        Blockly.BlockSvg.NOTCH_WIDTH + Blockly.BlockSvg.SEP_SPACE_X);
+  }
+  var fieldValueWidth = 0;  // Width of longest external value field.
+  var fieldStatementWidth = 0;  // Width of longest statement field.
+  var hasValue = false;
+  var hasStatement = false;
+  var hasDummy = false;
+  var lastType = undefined;
+  var isInline = this.getInputsInline() && !this.isCollapsed();
+  for (var i = 0, input; input = inputList[i]; i++) {
+    if (!input.isVisible()) {
+      continue;
+    }
+    var row;
+    if (!isInline || !lastType ||
+        lastType == Blockly.NEXT_STATEMENT ||
+        input.type == Blockly.NEXT_STATEMENT) {
+      // Create new row.
+      lastType = input.type;
+      row = [];
+      if (isInline && input.type != Blockly.NEXT_STATEMENT) {
+        row.type = Blockly.BlockSvg.INLINE;
+      } else {
+        row.type = input.type;
+      }
+      row.height = 0;
+      inputRows.push(row);
+    } else {
+      row = inputRows[inputRows.length - 1];
+    }
+    row.push(input);
+
+    // Compute minimum input size.
+    input.renderHeight = Blockly.BlockSvg.MIN_BLOCK_Y;
+    // The width is currently only needed for inline value inputs.
+    if (isInline && input.type == Blockly.INPUT_VALUE) {
+      input.renderWidth = Blockly.BlockSvg.TAB_WIDTH +
+          Blockly.BlockSvg.SEP_SPACE_X * 1.25;
+    } else {
+      input.renderWidth = 0;
+    }
+    // Expand input size if there is a connection.
+    if (input.connection && input.connection.isConnected()) {
+      var linkedBlock = input.connection.targetBlock();
+      var bBox = linkedBlock.getHeightWidth();
+      input.renderHeight = Math.max(input.renderHeight, bBox.height);
+      input.renderWidth = Math.max(input.renderWidth, bBox.width);
+    }
+    // Blocks have a one pixel shadow that should sometimes overhang.
+    if (!isInline && i == inputList.length - 1) {
+      // Last value input should overhang.
+      input.renderHeight--;
+    } else if (!isInline && input.type == Blockly.INPUT_VALUE &&
+        inputList[i + 1] && inputList[i + 1].type == Blockly.NEXT_STATEMENT) {
+      // Value input above statement input should overhang.
+      input.renderHeight--;
+    }
+
+    row.height = Math.max(row.height, input.renderHeight);
+    input.fieldWidth = 0;
+    if (inputRows.length == 1) {
+      // The first row gets shifted to accommodate any icons.
+      input.fieldWidth += this.RTL ? -iconWidth : iconWidth;
+    }
+    var previousFieldEditable = false;
+    for (var j = 0, field; field = input.fieldRow[j]; j++) {
+      if (j != 0) {
+        input.fieldWidth += Blockly.BlockSvg.SEP_SPACE_X;
+      }
+      // Get the dimensions of the field.
+      var fieldSize = field.getSize();
+      field.renderWidth = fieldSize.width;
+      field.renderSep = (previousFieldEditable && field.EDITABLE) ?
+          Blockly.BlockSvg.SEP_SPACE_X : 0;
+      input.fieldWidth += field.renderWidth + field.renderSep;
+      row.height = Math.max(row.height, fieldSize.height);
+      previousFieldEditable = field.EDITABLE;
+    }
+
+    if (row.type != Blockly.BlockSvg.INLINE) {
+      if (row.type == Blockly.NEXT_STATEMENT) {
+        hasStatement = true;
+        fieldStatementWidth = Math.max(fieldStatementWidth, input.fieldWidth);
+      } else {
+        if (row.type == Blockly.INPUT_VALUE) {
+          hasValue = true;
+        } else if (row.type == Blockly.DUMMY_INPUT) {
+          hasDummy = true;
+        }
+        fieldValueWidth = Math.max(fieldValueWidth, input.fieldWidth);
+      }
+    }
+  }
+
+  // Make inline rows a bit thicker in order to enclose the values.
+  for (var y = 0, row; row = inputRows[y]; y++) {
+    row.thicker = false;
+    if (row.type == Blockly.BlockSvg.INLINE) {
+      for (var z = 0, input; input = row[z]; z++) {
+        if (input.type == Blockly.INPUT_VALUE) {
+          row.height += 2 * Blockly.BlockSvg.INLINE_PADDING_Y;
+          row.thicker = true;
+          break;
+        }
+      }
+    }
+  }
+
+  // Compute the statement edge.
+  // This is the width of a block where statements are nested.
+  inputRows.statementEdge = 2 * Blockly.BlockSvg.SEP_SPACE_X +
+      fieldStatementWidth;
+  // Compute the preferred right edge.  Inline blocks may extend beyond.
+  // This is the width of the block where external inputs connect.
+  if (hasStatement) {
+    inputRows.rightEdge = Math.max(inputRows.rightEdge,
+        inputRows.statementEdge + Blockly.BlockSvg.NOTCH_WIDTH);
+  }
+  if (hasValue) {
+    inputRows.rightEdge = Math.max(inputRows.rightEdge, fieldValueWidth +
+        Blockly.BlockSvg.SEP_SPACE_X * 2 + Blockly.BlockSvg.TAB_WIDTH);
+  } else if (hasDummy) {
+    inputRows.rightEdge = Math.max(inputRows.rightEdge, fieldValueWidth +
+        Blockly.BlockSvg.SEP_SPACE_X * 2);
+  }
+
+  inputRows.hasValue = hasValue;
+  inputRows.hasStatement = hasStatement;
+  inputRows.hasDummy = hasDummy;
+  return inputRows;
+};
+
+
+/**
+ * Draw the path of the block.
+ * Move the fields to the correct locations.
+ * @param {number} iconWidth Offset of first row due to icons.
+ * @param {!Array.<!Array.<!Object>>} inputRows 2D array of objects, each
+ *     containing position information.
+ * @private
+ */
+Blockly.BlockSvg.prototype.renderDraw_ = function(iconWidth, inputRows) {
+  this.startHat_ = false;
+  // Reset the height to zero and let the rendering process add in
+  // portions of the block height as it goes. (e.g. hats, inputs, etc.)
+  this.height = 0;
+  // Should the top and bottom left corners be rounded or square?
+  if (this.outputConnection) {
+    this.squareTopLeftCorner_ = true;
+    this.squareBottomLeftCorner_ = true;
+  } else {
+    this.squareTopLeftCorner_ = false;
+    this.squareBottomLeftCorner_ = false;
+    // If this block is in the middle of a stack, square the corners.
+    if (this.previousConnection) {
+      var prevBlock = this.previousConnection.targetBlock();
+      if (prevBlock && prevBlock.getNextBlock() == this) {
+        this.squareTopLeftCorner_ = true;
+      }
+    } else if (Blockly.BlockSvg.START_HAT) {
+      // No output or previous connection.
+      this.squareTopLeftCorner_ = true;
+      this.startHat_ = true;
+      this.height += Blockly.BlockSvg.START_HAT_HEIGHT;
+      inputRows.rightEdge = Math.max(inputRows.rightEdge, 100);
+    }
+    var nextBlock = this.getNextBlock();
+    if (nextBlock) {
+      this.squareBottomLeftCorner_ = true;
+    }
+  }
+
+  // Assemble the block's path.
+  var steps = [];
+  var inlineSteps = [];
+  // The highlighting applies to edges facing the upper-left corner.
+  // Since highlighting is a two-pixel wide border, it would normally overhang
+  // the edge of the block by a pixel. So undersize all measurements by a pixel.
+  var highlightSteps = [];
+  var highlightInlineSteps = [];
+
+  this.renderDrawTop_(steps, highlightSteps, inputRows.rightEdge);
+  var cursorY = this.renderDrawRight_(steps, highlightSteps, inlineSteps,
+      highlightInlineSteps, inputRows, iconWidth);
+  this.renderDrawBottom_(steps, highlightSteps, cursorY);
+  this.renderDrawLeft_(steps, highlightSteps);
+
+  var pathString = steps.join(' ') + '\n' + inlineSteps.join(' ');
+  this.svgPath_.setAttribute('d', pathString);
+  this.svgPathDark_.setAttribute('d', pathString);
+  pathString = highlightSteps.join(' ') + '\n' + highlightInlineSteps.join(' ');
+  this.svgPathLight_.setAttribute('d', pathString);
+  if (this.RTL) {
+    // Mirror the block's path.
+    this.svgPath_.setAttribute('transform', 'scale(-1 1)');
+    this.svgPathLight_.setAttribute('transform', 'scale(-1 1)');
+    this.svgPathDark_.setAttribute('transform', 'translate(1,1) scale(-1 1)');
+  }
+};
+
+/**
+ * Update all of the connections on this block with the new locations calculated
+ * in renderCompute.  Also move all of the connected blocks based on the new
+ * connection locations.
+ * @private
+ */
+Blockly.BlockSvg.prototype.renderMoveConnections_ = function() {
+  var blockTL = this.getRelativeToSurfaceXY();
+  // Don't tighten previous or output connecitons because they are inferior
+  // connections.
+  if (this.previousConnection) {
+    this.previousConnection.moveToOffset(blockTL);
+  }
+  if (this.outputConnection) {
+    this.outputConnection.moveToOffset(blockTL);
+  }
+
+  for (var i = 0; i < this.inputList.length; i++) {
+    var conn = this.inputList[i].connection;
+    if (conn) {
+      conn.moveToOffset(blockTL);
+      if (conn.isConnected()) {
+        conn.tighten_();
+      }
+    }
+  }
+
+  if (this.nextConnection) {
+    this.nextConnection.moveToOffset(blockTL);
+    if (this.nextConnection.isConnected()) {
+      this.nextConnection.tighten_();
+    }
+  }
+
+};
+
+/**
+ * Render the top edge of the block.
+ * @param {!Array.<string>} steps Path of block outline.
+ * @param {!Array.<string>} highlightSteps Path of block highlights.
+ * @param {number} rightEdge Minimum width of block.
+ * @private
+ */
+Blockly.BlockSvg.prototype.renderDrawTop_ =
+    function(steps, highlightSteps, rightEdge) {
+  /* eslint-disable indent */
+  // Position the cursor at the top-left starting point.
+  if (this.squareTopLeftCorner_) {
+    steps.push('m 0,0');
+    highlightSteps.push('m 0.5,0.5');
+    if (this.startHat_) {
+      steps.push(Blockly.BlockSvg.START_HAT_PATH);
+      highlightSteps.push(this.RTL ?
+          Blockly.BlockSvg.START_HAT_HIGHLIGHT_RTL :
+          Blockly.BlockSvg.START_HAT_HIGHLIGHT_LTR);
+    }
+  } else {
+    steps.push(Blockly.BlockSvg.TOP_LEFT_CORNER_START);
+    highlightSteps.push(this.RTL ?
+        Blockly.BlockSvg.TOP_LEFT_CORNER_START_HIGHLIGHT_RTL :
+        Blockly.BlockSvg.TOP_LEFT_CORNER_START_HIGHLIGHT_LTR);
+    // Top-left rounded corner.
+    steps.push(Blockly.BlockSvg.TOP_LEFT_CORNER);
+    highlightSteps.push(Blockly.BlockSvg.TOP_LEFT_CORNER_HIGHLIGHT);
+  }
+
+  // Top edge.
+  if (this.previousConnection) {
+    steps.push('H', Blockly.BlockSvg.NOTCH_WIDTH - 15);
+    highlightSteps.push('H', Blockly.BlockSvg.NOTCH_WIDTH - 15);
+    steps.push(Blockly.BlockSvg.NOTCH_PATH_LEFT);
+    highlightSteps.push(Blockly.BlockSvg.NOTCH_PATH_LEFT_HIGHLIGHT);
+
+    var connectionX = (this.RTL ?
+        -Blockly.BlockSvg.NOTCH_WIDTH : Blockly.BlockSvg.NOTCH_WIDTH);
+    this.previousConnection.setOffsetInBlock(connectionX, 0);
+  }
+  steps.push('H', rightEdge);
+  highlightSteps.push('H', rightEdge - 0.5);
+  this.width = rightEdge;
+};  /* eslint-enable indent */
+
+/**
+ * Render the right edge of the block.
+ * @param {!Array.<string>} steps Path of block outline.
+ * @param {!Array.<string>} highlightSteps Path of block highlights.
+ * @param {!Array.<string>} inlineSteps Inline block outlines.
+ * @param {!Array.<string>} highlightInlineSteps Inline block highlights.
+ * @param {!Array.<!Array.<!Object>>} inputRows 2D array of objects, each
+ *     containing position information.
+ * @param {number} iconWidth Offset of first row due to icons.
+ * @return {number} Height of block.
+ * @private
+ */
+Blockly.BlockSvg.prototype.renderDrawRight_ = function(steps, highlightSteps,
+    inlineSteps, highlightInlineSteps, inputRows, iconWidth) {
+  var cursorX;
+  var cursorY = 0;
+  var connectionX, connectionY;
+  for (var y = 0, row; row = inputRows[y]; y++) {
+    cursorX = Blockly.BlockSvg.SEP_SPACE_X;
+    if (y == 0) {
+      cursorX += this.RTL ? -iconWidth : iconWidth;
+    }
+    highlightSteps.push('M', (inputRows.rightEdge - 0.5) + ',' +
+        (cursorY + 0.5));
+    if (this.isCollapsed()) {
+      // Jagged right edge.
+      var input = row[0];
+      var fieldX = cursorX;
+      var fieldY = cursorY;
+      this.renderFields_(input.fieldRow, fieldX, fieldY);
+      steps.push(Blockly.BlockSvg.JAGGED_TEETH);
+      highlightSteps.push('h 8');
+      var remainder = row.height - Blockly.BlockSvg.JAGGED_TEETH_HEIGHT;
+      steps.push('v', remainder);
+      if (this.RTL) {
+        highlightSteps.push('v 3.9 l 7.2,3.4 m -14.5,8.9 l 7.3,3.5');
+        highlightSteps.push('v', remainder - 0.7);
+      }
+      this.width += Blockly.BlockSvg.JAGGED_TEETH_WIDTH;
+    } else if (row.type == Blockly.BlockSvg.INLINE) {
+      // Inline inputs.
+      for (var x = 0, input; input = row[x]; x++) {
+        var fieldX = cursorX;
+        var fieldY = cursorY;
+        if (row.thicker) {
+          // Lower the field slightly.
+          fieldY += Blockly.BlockSvg.INLINE_PADDING_Y;
+        }
+        // TODO: Align inline field rows (left/right/centre).
+        cursorX = this.renderFields_(input.fieldRow, fieldX, fieldY);
+        if (input.type != Blockly.DUMMY_INPUT) {
+          cursorX += input.renderWidth + Blockly.BlockSvg.SEP_SPACE_X;
+        }
+        if (input.type == Blockly.INPUT_VALUE) {
+          inlineSteps.push('M', (cursorX - Blockly.BlockSvg.SEP_SPACE_X) +
+                           ',' + (cursorY + Blockly.BlockSvg.INLINE_PADDING_Y));
+          inlineSteps.push('h', Blockly.BlockSvg.TAB_WIDTH - 2 -
+                           input.renderWidth);
+          inlineSteps.push(Blockly.BlockSvg.TAB_PATH_DOWN);
+          inlineSteps.push('v', input.renderHeight + 1 -
+                                Blockly.BlockSvg.TAB_HEIGHT);
+          inlineSteps.push('h', input.renderWidth + 2 -
+                           Blockly.BlockSvg.TAB_WIDTH);
+          inlineSteps.push('z');
+          if (this.RTL) {
+            // Highlight right edge, around back of tab, and bottom.
+            highlightInlineSteps.push('M',
+                (cursorX - Blockly.BlockSvg.SEP_SPACE_X - 2.5 +
+                 Blockly.BlockSvg.TAB_WIDTH - input.renderWidth) + ',' +
+                (cursorY + Blockly.BlockSvg.INLINE_PADDING_Y + 0.5));
+            highlightInlineSteps.push(
+                Blockly.BlockSvg.TAB_PATH_DOWN_HIGHLIGHT_RTL);
+            highlightInlineSteps.push('v',
+                input.renderHeight - Blockly.BlockSvg.TAB_HEIGHT + 2.5);
+            highlightInlineSteps.push('h',
+                input.renderWidth - Blockly.BlockSvg.TAB_WIDTH + 2);
+          } else {
+            // Highlight right edge, bottom.
+            highlightInlineSteps.push('M',
+                (cursorX - Blockly.BlockSvg.SEP_SPACE_X + 0.5) + ',' +
+                (cursorY + Blockly.BlockSvg.INLINE_PADDING_Y + 0.5));
+            highlightInlineSteps.push('v', input.renderHeight + 1);
+            highlightInlineSteps.push('h', Blockly.BlockSvg.TAB_WIDTH - 2 -
+                                           input.renderWidth);
+            // Short highlight glint at bottom of tab.
+            highlightInlineSteps.push('M',
+                (cursorX - input.renderWidth - Blockly.BlockSvg.SEP_SPACE_X +
+                 0.9) + ',' + (cursorY + Blockly.BlockSvg.INLINE_PADDING_Y +
+                 Blockly.BlockSvg.TAB_HEIGHT - 0.7));
+            highlightInlineSteps.push('l',
+                (Blockly.BlockSvg.TAB_WIDTH * 0.46) + ',-2.1');
+          }
+          // Create inline input connection.
+          if (this.RTL) {
+            connectionX = -cursorX -
+                Blockly.BlockSvg.TAB_WIDTH + Blockly.BlockSvg.SEP_SPACE_X +
+                input.renderWidth + 1;
+          } else {
+            connectionX = cursorX +
+                Blockly.BlockSvg.TAB_WIDTH - Blockly.BlockSvg.SEP_SPACE_X -
+                input.renderWidth - 1;
+          }
+          connectionY = cursorY + Blockly.BlockSvg.INLINE_PADDING_Y + 1;
+          input.connection.setOffsetInBlock(connectionX, connectionY);
+        }
+      }
+
+      cursorX = Math.max(cursorX, inputRows.rightEdge);
+      this.width = Math.max(this.width, cursorX);
+      steps.push('H', cursorX);
+      highlightSteps.push('H', cursorX - 0.5);
+      steps.push('v', row.height);
+      if (this.RTL) {
+        highlightSteps.push('v', row.height - 1);
+      }
+    } else if (row.type == Blockly.INPUT_VALUE) {
+      // External input.
+      var input = row[0];
+      var fieldX = cursorX;
+      var fieldY = cursorY;
+      if (input.align != Blockly.ALIGN_LEFT) {
+        var fieldRightX = inputRows.rightEdge - input.fieldWidth -
+            Blockly.BlockSvg.TAB_WIDTH - 2 * Blockly.BlockSvg.SEP_SPACE_X;
+        if (input.align == Blockly.ALIGN_RIGHT) {
+          fieldX += fieldRightX;
+        } else if (input.align == Blockly.ALIGN_CENTRE) {
+          fieldX += fieldRightX / 2;
+        }
+      }
+      this.renderFields_(input.fieldRow, fieldX, fieldY);
+      steps.push(Blockly.BlockSvg.TAB_PATH_DOWN);
+      var v = row.height - Blockly.BlockSvg.TAB_HEIGHT;
+      steps.push('v', v);
+      if (this.RTL) {
+        // Highlight around back of tab.
+        highlightSteps.push(Blockly.BlockSvg.TAB_PATH_DOWN_HIGHLIGHT_RTL);
+        highlightSteps.push('v', v + 0.5);
+      } else {
+        // Short highlight glint at bottom of tab.
+        highlightSteps.push('M', (inputRows.rightEdge - 5) + ',' +
+            (cursorY + Blockly.BlockSvg.TAB_HEIGHT - 0.7));
+        highlightSteps.push('l', (Blockly.BlockSvg.TAB_WIDTH * 0.46) +
+            ',-2.1');
+      }
+      // Create external input connection.
+      connectionX = this.RTL ? -inputRows.rightEdge - 1 :
+          inputRows.rightEdge + 1;
+      input.connection.setOffsetInBlock(connectionX, cursorY);
+      if (input.connection.isConnected()) {
+        this.width = Math.max(this.width, inputRows.rightEdge +
+            input.connection.targetBlock().getHeightWidth().width -
+            Blockly.BlockSvg.TAB_WIDTH + 1);
+      }
+    } else if (row.type == Blockly.DUMMY_INPUT) {
+      // External naked field.
+      var input = row[0];
+      var fieldX = cursorX;
+      var fieldY = cursorY;
+      if (input.align != Blockly.ALIGN_LEFT) {
+        var fieldRightX = inputRows.rightEdge - input.fieldWidth -
+            2 * Blockly.BlockSvg.SEP_SPACE_X;
+        if (inputRows.hasValue) {
+          fieldRightX -= Blockly.BlockSvg.TAB_WIDTH;
+        }
+        if (input.align == Blockly.ALIGN_RIGHT) {
+          fieldX += fieldRightX;
+        } else if (input.align == Blockly.ALIGN_CENTRE) {
+          fieldX += fieldRightX / 2;
+        }
+      }
+      this.renderFields_(input.fieldRow, fieldX, fieldY);
+      steps.push('v', row.height);
+      if (this.RTL) {
+        highlightSteps.push('v', row.height - 1);
+      }
+    } else if (row.type == Blockly.NEXT_STATEMENT) {
+      // Nested statement.
+      var input = row[0];
+      if (y == 0) {
+        // If the first input is a statement stack, add a small row on top.
+        steps.push('v', Blockly.BlockSvg.SEP_SPACE_Y);
+        if (this.RTL) {
+          highlightSteps.push('v', Blockly.BlockSvg.SEP_SPACE_Y - 1);
+        }
+        cursorY += Blockly.BlockSvg.SEP_SPACE_Y;
+      }
+      var fieldX = cursorX;
+      var fieldY = cursorY;
+      if (input.align != Blockly.ALIGN_LEFT) {
+        var fieldRightX = inputRows.statementEdge - input.fieldWidth -
+            2 * Blockly.BlockSvg.SEP_SPACE_X;
+        if (input.align == Blockly.ALIGN_RIGHT) {
+          fieldX += fieldRightX;
+        } else if (input.align == Blockly.ALIGN_CENTRE) {
+          fieldX += fieldRightX / 2;
+        }
+      }
+      this.renderFields_(input.fieldRow, fieldX, fieldY);
+      cursorX = inputRows.statementEdge + Blockly.BlockSvg.NOTCH_WIDTH;
+      steps.push('H', cursorX);
+      steps.push(Blockly.BlockSvg.INNER_TOP_LEFT_CORNER);
+      steps.push('v', row.height - 2 * Blockly.BlockSvg.CORNER_RADIUS);
+      steps.push(Blockly.BlockSvg.INNER_BOTTOM_LEFT_CORNER);
+      steps.push('H', inputRows.rightEdge);
+      if (this.RTL) {
+        highlightSteps.push('M',
+            (cursorX - Blockly.BlockSvg.NOTCH_WIDTH +
+             Blockly.BlockSvg.DISTANCE_45_OUTSIDE) +
+            ',' + (cursorY + Blockly.BlockSvg.DISTANCE_45_OUTSIDE));
+        highlightSteps.push(
+            Blockly.BlockSvg.INNER_TOP_LEFT_CORNER_HIGHLIGHT_RTL);
+        highlightSteps.push('v',
+            row.height - 2 * Blockly.BlockSvg.CORNER_RADIUS);
+        highlightSteps.push(
+            Blockly.BlockSvg.INNER_BOTTOM_LEFT_CORNER_HIGHLIGHT_RTL);
+        highlightSteps.push('H', inputRows.rightEdge - 0.5);
+      } else {
+        highlightSteps.push('M',
+            (cursorX - Blockly.BlockSvg.NOTCH_WIDTH +
+             Blockly.BlockSvg.DISTANCE_45_OUTSIDE) + ',' +
+            (cursorY + row.height - Blockly.BlockSvg.DISTANCE_45_OUTSIDE));
+        highlightSteps.push(
+            Blockly.BlockSvg.INNER_BOTTOM_LEFT_CORNER_HIGHLIGHT_LTR);
+        highlightSteps.push('H', inputRows.rightEdge - 0.5);
+      }
+      // Create statement connection.
+      connectionX = this.RTL ? -cursorX : cursorX + 1;
+      input.connection.setOffsetInBlock(connectionX, cursorY + 1);
+
+      if (input.connection.isConnected()) {
+        this.width = Math.max(this.width, inputRows.statementEdge +
+            input.connection.targetBlock().getHeightWidth().width);
+      }
+      if (y == inputRows.length - 1 ||
+          inputRows[y + 1].type == Blockly.NEXT_STATEMENT) {
+        // If the final input is a statement stack, add a small row underneath.
+        // Consecutive statement stacks are also separated by a small divider.
+        steps.push('v', Blockly.BlockSvg.SEP_SPACE_Y);
+        if (this.RTL) {
+          highlightSteps.push('v', Blockly.BlockSvg.SEP_SPACE_Y - 1);
+        }
+        cursorY += Blockly.BlockSvg.SEP_SPACE_Y;
+      }
+    }
+    cursorY += row.height;
+  }
+  if (!inputRows.length) {
+    cursorY = Blockly.BlockSvg.MIN_BLOCK_Y;
+    steps.push('V', cursorY);
+    if (this.RTL) {
+      highlightSteps.push('V', cursorY - 1);
+    }
+  }
+  return cursorY;
+};
+
+/**
+ * Render the bottom edge of the block.
+ * @param {!Array.<string>} steps Path of block outline.
+ * @param {!Array.<string>} highlightSteps Path of block highlights.
+ * @param {number} cursorY Height of block.
+ * @private
+ */
+Blockly.BlockSvg.prototype.renderDrawBottom_ =
+    function(steps, highlightSteps, cursorY) {
+  /* eslint-disable indent */
+  this.height += cursorY + 1;  // Add one for the shadow.
+  if (this.nextConnection) {
+    steps.push('H', (Blockly.BlockSvg.NOTCH_WIDTH + (this.RTL ? 0.5 : - 0.5)) +
+        ' ' + Blockly.BlockSvg.NOTCH_PATH_RIGHT);
+    // Create next block connection.
+    var connectionX;
+    if (this.RTL) {
+      connectionX = -Blockly.BlockSvg.NOTCH_WIDTH;
+    } else {
+      connectionX = Blockly.BlockSvg.NOTCH_WIDTH;
+    }
+    this.nextConnection.setOffsetInBlock(connectionX, cursorY + 1);
+    this.height += 4;  // Height of tab.
+  }
+
+  // Should the bottom-left corner be rounded or square?
+  if (this.squareBottomLeftCorner_) {
+    steps.push('H 0');
+    if (!this.RTL) {
+      highlightSteps.push('M', '0.5,' + (cursorY - 0.5));
+    }
+  } else {
+    steps.push('H', Blockly.BlockSvg.CORNER_RADIUS);
+    steps.push('a', Blockly.BlockSvg.CORNER_RADIUS + ',' +
+               Blockly.BlockSvg.CORNER_RADIUS + ' 0 0,1 -' +
+               Blockly.BlockSvg.CORNER_RADIUS + ',-' +
+               Blockly.BlockSvg.CORNER_RADIUS);
+    if (!this.RTL) {
+      highlightSteps.push('M', Blockly.BlockSvg.DISTANCE_45_INSIDE + ',' +
+          (cursorY - Blockly.BlockSvg.DISTANCE_45_INSIDE));
+      highlightSteps.push('A', (Blockly.BlockSvg.CORNER_RADIUS - 0.5) + ',' +
+          (Blockly.BlockSvg.CORNER_RADIUS - 0.5) + ' 0 0,1 ' +
+          '0.5,' + (cursorY - Blockly.BlockSvg.CORNER_RADIUS));
+    }
+  }
+};  /* eslint-enable indent */
+
+/**
+ * Render the left edge of the block.
+ * @param {!Array.<string>} steps Path of block outline.
+ * @param {!Array.<string>} highlightSteps Path of block highlights.
+ * @private
+ */
+Blockly.BlockSvg.prototype.renderDrawLeft_ = function(steps, highlightSteps) {
+  if (this.outputConnection) {
+    // Create output connection.
+    this.outputConnection.setOffsetInBlock(0, 0);
+    steps.push('V', Blockly.BlockSvg.TAB_HEIGHT);
+    steps.push('c 0,-10 -' + Blockly.BlockSvg.TAB_WIDTH + ',8 -' +
+        Blockly.BlockSvg.TAB_WIDTH + ',-7.5 s ' + Blockly.BlockSvg.TAB_WIDTH +
+        ',2.5 ' + Blockly.BlockSvg.TAB_WIDTH + ',-7.5');
+    if (this.RTL) {
+      highlightSteps.push('M', (Blockly.BlockSvg.TAB_WIDTH * -0.25) + ',8.4');
+      highlightSteps.push('l', (Blockly.BlockSvg.TAB_WIDTH * -0.45) + ',-2.1');
+    } else {
+      highlightSteps.push('V', Blockly.BlockSvg.TAB_HEIGHT - 1.5);
+      highlightSteps.push('m', (Blockly.BlockSvg.TAB_WIDTH * -0.92) +
+                          ',-0.5 q ' + (Blockly.BlockSvg.TAB_WIDTH * -0.19) +
+                          ',-5.5 0,-11');
+      highlightSteps.push('m', (Blockly.BlockSvg.TAB_WIDTH * 0.92) +
+                          ',1 V 0.5 H 1');
+    }
+    this.width += Blockly.BlockSvg.TAB_WIDTH;
+  } else if (!this.RTL) {
+    if (this.squareTopLeftCorner_) {
+      // Statement block in a stack.
+      highlightSteps.push('V', 0.5);
+    } else {
+      highlightSteps.push('V', Blockly.BlockSvg.CORNER_RADIUS);
+    }
+  }
+  steps.push('z');
+};
diff --git a/blockly/core/block_svg.js b/blockly/core/block_svg.js
new file mode 100644
index 0000000..4d4a729
--- /dev/null
+++ b/blockly/core/block_svg.js
@@ -0,0 +1,1629 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2012 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Methods for graphically rendering a block as SVG.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.BlockSvg');
+
+goog.require('Blockly.Block');
+goog.require('Blockly.ContextMenu');
+goog.require('Blockly.RenderedConnection');
+goog.require('goog.Timer');
+goog.require('goog.asserts');
+goog.require('goog.dom');
+goog.require('goog.math.Coordinate');
+goog.require('goog.userAgent');
+
+
+/**
+ * Class for a block's SVG representation.
+ * Not normally called directly, workspace.newBlock() is preferred.
+ * @param {!Blockly.Workspace} workspace The block's workspace.
+ * @param {?string} prototypeName Name of the language object containing
+ *     type-specific functions for this block.
+ * @param {=string} opt_id Optional ID.  Use this ID if provided, otherwise
+ *     create a new id.
+ * @extends {Blockly.Block}
+ * @constructor
+ */
+Blockly.BlockSvg = function(workspace, prototypeName, opt_id) {
+  // Create core elements for the block.
+  /**
+   * @type {SVGElement}
+   * @private
+   */
+  this.svgGroup_ = Blockly.createSvgElement('g', {}, null);
+
+  /**
+   * @type {SVGElement}
+   * @private
+   */
+  this.svgPathDark_ = Blockly.createSvgElement('path',
+      {'class': 'blocklyPathDark', 'transform': 'translate(1,1)'},
+      this.svgGroup_);
+
+  /**
+   * @type {SVGElement}
+   * @private
+   */
+  this.svgPath_ = Blockly.createSvgElement('path', {'class': 'blocklyPath'},
+      this.svgGroup_);
+
+  /**
+   * @type {SVGElement}
+   * @private
+   */
+  this.svgPathLight_ = Blockly.createSvgElement('path',
+      {'class': 'blocklyPathLight'}, this.svgGroup_);
+  this.svgPath_.tooltip = this;
+
+  /** @type {boolean} */
+  this.rendered = false;
+
+  Blockly.Tooltip.bindMouseEvents(this.svgPath_);
+  Blockly.BlockSvg.superClass_.constructor.call(this,
+      workspace, prototypeName, opt_id);
+};
+goog.inherits(Blockly.BlockSvg, Blockly.Block);
+
+/**
+ * Height of this block, not including any statement blocks above or below.
+ */
+Blockly.BlockSvg.prototype.height = 0;
+/**
+ * Width of this block, including any connected value blocks.
+ */
+Blockly.BlockSvg.prototype.width = 0;
+
+/**
+ * Original location of block being dragged.
+ * @type {goog.math.Coordinate}
+ * @private
+ */
+Blockly.BlockSvg.prototype.dragStartXY_ = null;
+
+/**
+ * Constant for identifying rows that are to be rendered inline.
+ * Don't collide with Blockly.INPUT_VALUE and friends.
+ * @const
+ */
+Blockly.BlockSvg.INLINE = -1;
+
+/**
+ * Create and initialize the SVG representation of the block.
+ * May be called more than once.
+ */
+Blockly.BlockSvg.prototype.initSvg = function() {
+  goog.asserts.assert(this.workspace.rendered, 'Workspace is headless.');
+  for (var i = 0, input; input = this.inputList[i]; i++) {
+    input.init();
+  }
+  var icons = this.getIcons();
+  for (var i = 0; i < icons.length; i++) {
+    icons[i].createIcon();
+  }
+  this.updateColour();
+  this.updateMovable();
+  if (!this.workspace.options.readOnly && !this.eventsInit_) {
+    Blockly.bindEvent_(this.getSvgRoot(), 'mousedown', this,
+                       this.onMouseDown_);
+    var thisBlock = this;
+    Blockly.bindEvent_(this.getSvgRoot(), 'touchstart', null,
+                       function(e) {Blockly.longStart_(e, thisBlock);});
+  }
+  this.eventsInit_ = true;
+
+  if (!this.getSvgRoot().parentNode) {
+    this.workspace.getCanvas().appendChild(this.getSvgRoot());
+  }
+};
+
+/**
+ * Select this block.  Highlight it visually.
+ */
+Blockly.BlockSvg.prototype.select = function() {
+  if (this.isShadow() && this.getParent()) {
+    // Shadow blocks should not be selected.
+    this.getParent().select();
+    return;
+  }
+  if (Blockly.selected == this) {
+    return;
+  }
+  var oldId = null;
+  if (Blockly.selected) {
+    oldId = Blockly.selected.id;
+    // Unselect any previously selected block.
+    Blockly.Events.disable();
+    try {
+      Blockly.selected.unselect();
+    } finally {
+      Blockly.Events.enable();
+    }
+  }
+  var event = new Blockly.Events.Ui(null, 'selected', oldId, this.id);
+  event.workspaceId = this.workspace.id;
+  Blockly.Events.fire(event);
+  Blockly.selected = this;
+  this.addSelect();
+};
+
+/**
+ * Unselect this block.  Remove its highlighting.
+ */
+Blockly.BlockSvg.prototype.unselect = function() {
+  if (Blockly.selected != this) {
+    return;
+  }
+  var event = new Blockly.Events.Ui(null, 'selected', this.id, null);
+  event.workspaceId = this.workspace.id;
+  Blockly.Events.fire(event);
+  Blockly.selected = null;
+  this.removeSelect();
+};
+
+/**
+ * Block's mutator icon (if any).
+ * @type {Blockly.Mutator}
+ */
+Blockly.BlockSvg.prototype.mutator = null;
+
+/**
+ * Block's comment icon (if any).
+ * @type {Blockly.Comment}
+ */
+Blockly.BlockSvg.prototype.comment = null;
+
+/**
+ * Block's warning icon (if any).
+ * @type {Blockly.Warning}
+ */
+Blockly.BlockSvg.prototype.warning = null;
+
+/**
+ * Returns a list of mutator, comment, and warning icons.
+ * @return {!Array} List of icons.
+ */
+Blockly.BlockSvg.prototype.getIcons = function() {
+  var icons = [];
+  if (this.mutator) {
+    icons.push(this.mutator);
+  }
+  if (this.comment) {
+    icons.push(this.comment);
+  }
+  if (this.warning) {
+    icons.push(this.warning);
+  }
+  return icons;
+};
+
+/**
+ * Wrapper function called when a mouseUp occurs during a drag operation.
+ * @type {Array.<!Array>}
+ * @private
+ */
+Blockly.BlockSvg.onMouseUpWrapper_ = null;
+
+/**
+ * Wrapper function called when a mouseMove occurs during a drag operation.
+ * @type {Array.<!Array>}
+ * @private
+ */
+Blockly.BlockSvg.onMouseMoveWrapper_ = null;
+
+/**
+ * Stop binding to the global mouseup and mousemove events.
+ * @package
+ */
+Blockly.BlockSvg.terminateDrag = function() {
+  Blockly.BlockSvg.disconnectUiStop_();
+  if (Blockly.BlockSvg.onMouseUpWrapper_) {
+    Blockly.unbindEvent_(Blockly.BlockSvg.onMouseUpWrapper_);
+    Blockly.BlockSvg.onMouseUpWrapper_ = null;
+  }
+  if (Blockly.BlockSvg.onMouseMoveWrapper_) {
+    Blockly.unbindEvent_(Blockly.BlockSvg.onMouseMoveWrapper_);
+    Blockly.BlockSvg.onMouseMoveWrapper_ = null;
+  }
+  var selected = Blockly.selected;
+  if (Blockly.dragMode_ == Blockly.DRAG_FREE) {
+    // Terminate a drag operation.
+    if (selected) {
+      // Update the connection locations.
+      var xy = selected.getRelativeToSurfaceXY();
+      var dxy = goog.math.Coordinate.difference(xy, selected.dragStartXY_);
+      var event = new Blockly.Events.Move(selected);
+      event.oldCoordinate = selected.dragStartXY_;
+      event.recordNew();
+      Blockly.Events.fire(event);
+
+      selected.moveConnections_(dxy.x, dxy.y);
+      delete selected.draggedBubbles_;
+      selected.setDragging_(false);
+      selected.render();
+      // Ensure that any stap and bump are part of this move's event group.
+      var group = Blockly.Events.getGroup();
+      setTimeout(function() {
+        Blockly.Events.setGroup(group);
+        selected.snapToGrid();
+        Blockly.Events.setGroup(false);
+      }, Blockly.BUMP_DELAY / 2);
+      setTimeout(function() {
+        Blockly.Events.setGroup(group);
+        selected.bumpNeighbours_();
+        Blockly.Events.setGroup(false);
+      }, Blockly.BUMP_DELAY);
+      // Fire an event to allow scrollbars to resize.
+      selected.workspace.resizeContents();
+    }
+  }
+  Blockly.dragMode_ = Blockly.DRAG_NONE;
+  Blockly.Css.setCursor(Blockly.Css.Cursor.OPEN);
+};
+
+/**
+ * Set parent of this block to be a new block or null.
+ * @param {Blockly.BlockSvg} newParent New parent block.
+ */
+Blockly.BlockSvg.prototype.setParent = function(newParent) {
+  if (newParent == this.parentBlock_) {
+    return;
+  }
+  var svgRoot = this.getSvgRoot();
+  if (this.parentBlock_ && svgRoot) {
+    // Move this block up the DOM.  Keep track of x/y translations.
+    var xy = this.getRelativeToSurfaceXY();
+    this.workspace.getCanvas().appendChild(svgRoot);
+    svgRoot.setAttribute('transform', 'translate(' + xy.x + ',' + xy.y + ')');
+  }
+
+  Blockly.Field.startCache();
+  Blockly.BlockSvg.superClass_.setParent.call(this, newParent);
+  Blockly.Field.stopCache();
+
+  if (newParent) {
+    var oldXY = this.getRelativeToSurfaceXY();
+    newParent.getSvgRoot().appendChild(svgRoot);
+    var newXY = this.getRelativeToSurfaceXY();
+    // Move the connections to match the child's new position.
+    this.moveConnections_(newXY.x - oldXY.x, newXY.y - oldXY.y);
+  }
+};
+
+/**
+ * Return the coordinates of the top-left corner of this block relative to the
+ * drawing surface's origin (0,0).
+ * @return {!goog.math.Coordinate} Object with .x and .y properties.
+ */
+Blockly.BlockSvg.prototype.getRelativeToSurfaceXY = function() {
+  var x = 0;
+  var y = 0;
+  var element = this.getSvgRoot();
+  if (element) {
+    do {
+      // Loop through this block and every parent.
+      var xy = Blockly.getRelativeXY_(element);
+      x += xy.x;
+      y += xy.y;
+      element = element.parentNode;
+    } while (element && element != this.workspace.getCanvas());
+  }
+  return new goog.math.Coordinate(x, y);
+};
+
+/**
+ * Move a block by a relative offset.
+ * @param {number} dx Horizontal offset.
+ * @param {number} dy Vertical offset.
+ */
+Blockly.BlockSvg.prototype.moveBy = function(dx, dy) {
+  goog.asserts.assert(!this.parentBlock_, 'Block has parent.');
+  var event = new Blockly.Events.Move(this);
+  var xy = this.getRelativeToSurfaceXY();
+  this.getSvgRoot().setAttribute('transform',
+      'translate(' + (xy.x + dx) + ',' + (xy.y + dy) + ')');
+  this.moveConnections_(dx, dy);
+  event.recordNew();
+  this.workspace.resizeContents();
+  Blockly.Events.fire(event);
+};
+
+/**
+ * Snap this block to the nearest grid point.
+ */
+Blockly.BlockSvg.prototype.snapToGrid = function() {
+  if (!this.workspace) {
+    return;  // Deleted block.
+  }
+  if (Blockly.dragMode_ != Blockly.DRAG_NONE) {
+    return;  // Don't bump blocks during a drag.
+  }
+  if (this.getParent()) {
+    return;  // Only snap top-level blocks.
+  }
+  if (this.isInFlyout) {
+    return;  // Don't move blocks around in a flyout.
+  }
+  if (!this.workspace.options.gridOptions ||
+      !this.workspace.options.gridOptions['snap']) {
+    return;  // Config says no snapping.
+  }
+  var spacing = this.workspace.options.gridOptions['spacing'];
+  var half = spacing / 2;
+  var xy = this.getRelativeToSurfaceXY();
+  var dx = Math.round((xy.x - half) / spacing) * spacing + half - xy.x;
+  var dy = Math.round((xy.y - half) / spacing) * spacing + half - xy.y;
+  dx = Math.round(dx);
+  dy = Math.round(dy);
+  if (dx != 0 || dy != 0) {
+    this.moveBy(dx, dy);
+  }
+};
+
+/**
+ * Returns a bounding box describing the dimensions of this block
+ * and any blocks stacked below it.
+ * @return {!{height: number, width: number}} Object with height and width
+ *    properties.
+ */
+Blockly.BlockSvg.prototype.getHeightWidth = function() {
+  var height = this.height;
+  var width = this.width;
+  // Recursively add size of subsequent blocks.
+  var nextBlock = this.getNextBlock();
+  if (nextBlock) {
+    var nextHeightWidth = nextBlock.getHeightWidth();
+    height += nextHeightWidth.height - 4;  // Height of tab.
+    width = Math.max(width, nextHeightWidth.width);
+  } else if (!this.nextConnection && !this.outputConnection) {
+    // Add a bit of margin under blocks with no bottom tab.
+    height += 2;
+  }
+  return {height: height, width: width};
+};
+
+/**
+ * Returns the coordinates of a bounding box describing the dimensions of this
+ * block and any blocks stacked below it.
+ * @return {!{topLeft: goog.math.Coordinate, bottomRight: goog.math.Coordinate}}
+ *    Object with top left and bottom right coordinates of the bounding box.
+ */
+Blockly.BlockSvg.prototype.getBoundingRectangle = function() {
+  var blockXY = this.getRelativeToSurfaceXY(this);
+  var tab = this.outputConnection ? Blockly.BlockSvg.TAB_WIDTH : 0;
+  var blockBounds = this.getHeightWidth();
+  var topLeft;
+  var bottomRight;
+  if (this.RTL) {
+    // Width has the tab built into it already so subtract it here.
+    topLeft = new goog.math.Coordinate(blockXY.x - (blockBounds.width - tab),
+        blockXY.y);
+    // Add the width of the tab/puzzle piece knob to the x coordinate
+    // since X is the corner of the rectangle, not the whole puzzle piece.
+    bottomRight = new goog.math.Coordinate(blockXY.x + tab,
+        blockXY.y + blockBounds.height);
+  } else {
+    // Subtract the width of the tab/puzzle piece knob to the x coordinate
+    // since X is the corner of the rectangle, not the whole puzzle piece.
+    topLeft = new goog.math.Coordinate(blockXY.x - tab, blockXY.y);
+    // Width has the tab built into it already so subtract it here.
+    bottomRight = new goog.math.Coordinate(blockXY.x + blockBounds.width - tab,
+        blockXY.y + blockBounds.height);
+  }
+  return {topLeft: topLeft, bottomRight: bottomRight};
+};
+
+/**
+ * Set whether the block is collapsed or not.
+ * @param {boolean} collapsed True if collapsed.
+ */
+Blockly.BlockSvg.prototype.setCollapsed = function(collapsed) {
+  if (this.collapsed_ == collapsed) {
+    return;
+  }
+  var renderList = [];
+  // Show/hide the inputs.
+  for (var i = 0, input; input = this.inputList[i]; i++) {
+    renderList.push.apply(renderList, input.setVisible(!collapsed));
+  }
+
+  var COLLAPSED_INPUT_NAME = '_TEMP_COLLAPSED_INPUT';
+  if (collapsed) {
+    var icons = this.getIcons();
+    for (var i = 0; i < icons.length; i++) {
+      icons[i].setVisible(false);
+    }
+    var text = this.toString(Blockly.COLLAPSE_CHARS);
+    this.appendDummyInput(COLLAPSED_INPUT_NAME).appendField(text).init();
+  } else {
+    this.removeInput(COLLAPSED_INPUT_NAME);
+    // Clear any warnings inherited from enclosed blocks.
+    this.setWarningText(null);
+  }
+  Blockly.BlockSvg.superClass_.setCollapsed.call(this, collapsed);
+
+  if (!renderList.length) {
+    // No child blocks, just render this block.
+    renderList[0] = this;
+  }
+  if (this.rendered) {
+    for (var i = 0, block; block = renderList[i]; i++) {
+      block.render();
+    }
+    // Don't bump neighbours.
+    // Although bumping neighbours would make sense, users often collapse
+    // all their functions and store them next to each other.  Expanding and
+    // bumping causes all their definitions to go out of alignment.
+  }
+};
+
+/**
+ * Open the next (or previous) FieldTextInput.
+ * @param {Blockly.Field|Blockly.Block} start Current location.
+ * @param {boolean} forward If true go forward, otherwise backward.
+ */
+Blockly.BlockSvg.prototype.tab = function(start, forward) {
+  // This function need not be efficient since it runs once on a keypress.
+  // Create an ordered list of all text fields and connected inputs.
+  var list = [];
+  for (var i = 0, input; input = this.inputList[i]; i++) {
+    for (var j = 0, field; field = input.fieldRow[j]; j++) {
+      if (field instanceof Blockly.FieldTextInput) {
+        // TODO: Also support dropdown fields.
+        list.push(field);
+      }
+    }
+    if (input.connection) {
+      var block = input.connection.targetBlock();
+      if (block) {
+        list.push(block);
+      }
+    }
+  }
+  var i = list.indexOf(start);
+  if (i == -1) {
+    // No start location, start at the beginning or end.
+    i = forward ? -1 : list.length;
+  }
+  var target = list[forward ? i + 1 : i - 1];
+  if (!target) {
+    // Ran off of list.
+    var parent = this.getParent();
+    if (parent) {
+      parent.tab(this, forward);
+    }
+  } else if (target instanceof Blockly.Field) {
+    target.showEditor_();
+  } else {
+    target.tab(null, forward);
+  }
+};
+
+/**
+ * Handle a mouse-down on an SVG block.
+ * @param {!Event} e Mouse down event.
+ * @private
+ */
+Blockly.BlockSvg.prototype.onMouseDown_ = function(e) {
+  if (this.workspace.options.readOnly) {
+    return;
+  }
+  if (this.isInFlyout) {
+    return;
+  }
+  if (this.isInMutator) {
+    // Mutator's coordinate system could be out of date because the bubble was
+    // dragged, the block was moved, the parent workspace zoomed, etc.
+    this.workspace.resize();
+  }
+
+  this.workspace.updateScreenCalculationsIfScrolled();
+  this.workspace.markFocused();
+  Blockly.terminateDrag_();
+  this.select();
+  Blockly.hideChaff();
+  if (Blockly.isRightButton(e)) {
+    // Right-click.
+    this.showContextMenu_(e);
+  } else if (!this.isMovable()) {
+    // Allow immovable blocks to be selected and context menued, but not
+    // dragged.  Let this event bubble up to document, so the workspace may be
+    // dragged instead.
+    return;
+  } else {
+    if (!Blockly.Events.getGroup()) {
+      Blockly.Events.setGroup(true);
+    }
+    // Left-click (or middle click)
+    Blockly.Css.setCursor(Blockly.Css.Cursor.CLOSED);
+
+    this.dragStartXY_ = this.getRelativeToSurfaceXY();
+    this.workspace.startDrag(e, this.dragStartXY_);
+
+    Blockly.dragMode_ = Blockly.DRAG_STICKY;
+    Blockly.BlockSvg.onMouseUpWrapper_ = Blockly.bindEvent_(document,
+        'mouseup', this, this.onMouseUp_);
+    Blockly.BlockSvg.onMouseMoveWrapper_ = Blockly.bindEvent_(document,
+        'mousemove', this, this.onMouseMove_);
+    // Build a list of bubbles that need to be moved and where they started.
+    this.draggedBubbles_ = [];
+    var descendants = this.getDescendants();
+    for (var i = 0, descendant; descendant = descendants[i]; i++) {
+      var icons = descendant.getIcons();
+      for (var j = 0; j < icons.length; j++) {
+        var data = icons[j].getIconLocation();
+        data.bubble = icons[j];
+        this.draggedBubbles_.push(data);
+      }
+    }
+  }
+  // This event has been handled.  No need to bubble up to the document.
+  e.stopPropagation();
+  e.preventDefault();
+};
+
+/**
+ * Handle a mouse-up anywhere in the SVG pane.  Is only registered when a
+ * block is clicked.  We can't use mouseUp on the block since a fast-moving
+ * cursor can briefly escape the block before it catches up.
+ * @param {!Event} e Mouse up event.
+ * @private
+ */
+Blockly.BlockSvg.prototype.onMouseUp_ = function(e) {
+  if (Blockly.dragMode_ != Blockly.DRAG_FREE &&
+      !Blockly.WidgetDiv.isVisible()) {
+    Blockly.Events.fire(
+        new Blockly.Events.Ui(this, 'click', undefined, undefined));
+  }
+  Blockly.terminateDrag_();
+  if (Blockly.selected && Blockly.highlightedConnection_) {
+    // Connect two blocks together.
+    Blockly.localConnection_.connect(Blockly.highlightedConnection_);
+    if (this.rendered) {
+      // Trigger a connection animation.
+      // Determine which connection is inferior (lower in the source stack).
+      var inferiorConnection = Blockly.localConnection_.isSuperior() ?
+          Blockly.highlightedConnection_ : Blockly.localConnection_;
+      inferiorConnection.getSourceBlock().connectionUiEffect();
+    }
+    if (this.workspace.trashcan) {
+      // Don't throw an object in the trash can if it just got connected.
+      this.workspace.trashcan.close();
+    }
+  } else if (!this.getParent() && Blockly.selected.isDeletable() &&
+      this.workspace.isDeleteArea(e)) {
+    var trashcan = this.workspace.trashcan;
+    if (trashcan) {
+      goog.Timer.callOnce(trashcan.close, 100, trashcan);
+    }
+    Blockly.selected.dispose(false, true);
+  }
+  if (Blockly.highlightedConnection_) {
+    Blockly.highlightedConnection_.unhighlight();
+    Blockly.highlightedConnection_ = null;
+  }
+  Blockly.Css.setCursor(Blockly.Css.Cursor.OPEN);
+  if (!Blockly.WidgetDiv.isVisible()) {
+    Blockly.Events.setGroup(false);
+  }
+};
+
+/**
+ * Load the block's help page in a new window.
+ * @private
+ */
+Blockly.BlockSvg.prototype.showHelp_ = function() {
+  var url = goog.isFunction(this.helpUrl) ? this.helpUrl() : this.helpUrl;
+  if (url) {
+    window.open(url);
+  }
+};
+
+/**
+ * Show the context menu for this block.
+ * @param {!Event} e Mouse event.
+ * @private
+ */
+Blockly.BlockSvg.prototype.showContextMenu_ = function(e) {
+  if (this.workspace.options.readOnly || !this.contextMenu) {
+    return;
+  }
+  // Save the current block in a variable for use in closures.
+  var block = this;
+  var menuOptions = [];
+
+  if (this.isDeletable() && this.isMovable() && !block.isInFlyout) {
+    // Option to duplicate this block.
+    var duplicateOption = {
+      text: Blockly.Msg.DUPLICATE_BLOCK,
+      enabled: true,
+      callback: function() {
+        Blockly.duplicate_(block);
+      }
+    };
+    if (this.getDescendants().length > this.workspace.remainingCapacity()) {
+      duplicateOption.enabled = false;
+    }
+    menuOptions.push(duplicateOption);
+
+    if (this.isEditable() && !this.collapsed_ &&
+        this.workspace.options.comments) {
+      // Option to add/remove a comment.
+      var commentOption = {enabled: !goog.userAgent.IE};
+      if (this.comment) {
+        commentOption.text = Blockly.Msg.REMOVE_COMMENT;
+        commentOption.callback = function() {
+          block.setCommentText(null);
+        };
+      } else {
+        commentOption.text = Blockly.Msg.ADD_COMMENT;
+        commentOption.callback = function() {
+          block.setCommentText('');
+        };
+      }
+      menuOptions.push(commentOption);
+    }
+
+    // Option to make block inline.
+    if (!this.collapsed_) {
+      for (var i = 1; i < this.inputList.length; i++) {
+        if (this.inputList[i - 1].type != Blockly.NEXT_STATEMENT &&
+            this.inputList[i].type != Blockly.NEXT_STATEMENT) {
+          // Only display this option if there are two value or dummy inputs
+          // next to each other.
+          var inlineOption = {enabled: true};
+          var isInline = this.getInputsInline();
+          inlineOption.text = isInline ?
+              Blockly.Msg.EXTERNAL_INPUTS : Blockly.Msg.INLINE_INPUTS;
+          inlineOption.callback = function() {
+            block.setInputsInline(!isInline);
+          };
+          menuOptions.push(inlineOption);
+          break;
+        }
+      }
+    }
+
+    if (this.workspace.options.collapse) {
+      // Option to collapse/expand block.
+      if (this.collapsed_) {
+        var expandOption = {enabled: true};
+        expandOption.text = Blockly.Msg.EXPAND_BLOCK;
+        expandOption.callback = function() {
+          block.setCollapsed(false);
+        };
+        menuOptions.push(expandOption);
+      } else {
+        var collapseOption = {enabled: true};
+        collapseOption.text = Blockly.Msg.COLLAPSE_BLOCK;
+        collapseOption.callback = function() {
+          block.setCollapsed(true);
+        };
+        menuOptions.push(collapseOption);
+      }
+    }
+
+    if (this.workspace.options.disable) {
+      // Option to disable/enable block.
+      var disableOption = {
+        text: this.disabled ?
+            Blockly.Msg.ENABLE_BLOCK : Blockly.Msg.DISABLE_BLOCK,
+        enabled: !this.getInheritedDisabled(),
+        callback: function() {
+          block.setDisabled(!block.disabled);
+        }
+      };
+      menuOptions.push(disableOption);
+    }
+
+    // Option to delete this block.
+    // Count the number of blocks that are nested in this block.
+    var descendantCount = this.getDescendants().length;
+    var nextBlock = this.getNextBlock();
+    if (nextBlock) {
+      // Blocks in the current stack would survive this block's deletion.
+      descendantCount -= nextBlock.getDescendants().length;
+    }
+    var deleteOption = {
+      text: descendantCount == 1 ? Blockly.Msg.DELETE_BLOCK :
+          Blockly.Msg.DELETE_X_BLOCKS.replace('%1', String(descendantCount)),
+      enabled: true,
+      callback: function() {
+        Blockly.Events.setGroup(true);
+        block.dispose(true, true);
+        Blockly.Events.setGroup(false);
+      }
+    };
+    menuOptions.push(deleteOption);
+  }
+
+  // Option to get help.
+  var url = goog.isFunction(this.helpUrl) ? this.helpUrl() : this.helpUrl;
+  var helpOption = {enabled: !!url};
+  helpOption.text = Blockly.Msg.HELP;
+  helpOption.callback = function() {
+    block.showHelp_();
+  };
+  menuOptions.push(helpOption);
+
+  // Allow the block to add or modify menuOptions.
+  if (this.customContextMenu && !block.isInFlyout) {
+    this.customContextMenu(menuOptions);
+  }
+
+  Blockly.ContextMenu.show(e, menuOptions, this.RTL);
+  Blockly.ContextMenu.currentBlock = this;
+};
+
+/**
+ * Move the connections for this block and all blocks attached under it.
+ * Also update any attached bubbles.
+ * @param {number} dx Horizontal offset from current location.
+ * @param {number} dy Vertical offset from current location.
+ * @private
+ */
+Blockly.BlockSvg.prototype.moveConnections_ = function(dx, dy) {
+  if (!this.rendered) {
+    // Rendering is required to lay out the blocks.
+    // This is probably an invisible block attached to a collapsed block.
+    return;
+  }
+  var myConnections = this.getConnections_(false);
+  for (var i = 0; i < myConnections.length; i++) {
+    myConnections[i].moveBy(dx, dy);
+  }
+  var icons = this.getIcons();
+  for (var i = 0; i < icons.length; i++) {
+    icons[i].computeIconLocation();
+  }
+
+  // Recurse through all blocks attached under this one.
+  for (var i = 0; i < this.childBlocks_.length; i++) {
+    this.childBlocks_[i].moveConnections_(dx, dy);
+  }
+};
+
+/**
+ * Recursively adds or removes the dragging class to this node and its children.
+ * @param {boolean} adding True if adding, false if removing.
+ * @private
+ */
+Blockly.BlockSvg.prototype.setDragging_ = function(adding) {
+  if (adding) {
+    var group = this.getSvgRoot();
+    group.translate_ = '';
+    group.skew_ = '';
+    this.addDragging();
+    Blockly.draggingConnections_ =
+        Blockly.draggingConnections_.concat(this.getConnections_(true));
+  } else {
+    this.removeDragging();
+    Blockly.draggingConnections_ = [];
+  }
+  // Recurse through all blocks attached under this one.
+  for (var i = 0; i < this.childBlocks_.length; i++) {
+    this.childBlocks_[i].setDragging_(adding);
+  }
+};
+
+/**
+ * Drag this block to follow the mouse.
+ * @param {!Event} e Mouse move event.
+ * @private
+ */
+Blockly.BlockSvg.prototype.onMouseMove_ = function(e) {
+  if (e.type == 'mousemove' && e.clientX <= 1 && e.clientY == 0 &&
+      e.button == 0) {
+    /* HACK:
+     Safari Mobile 6.0 and Chrome for Android 18.0 fire rogue mousemove
+     events on certain touch actions. Ignore events with these signatures.
+     This may result in a one-pixel blind spot in other browsers,
+     but this shouldn't be noticeable. */
+    e.stopPropagation();
+    return;
+  }
+
+  var oldXY = this.getRelativeToSurfaceXY();
+  var newXY = this.workspace.moveDrag(e);
+
+  if (Blockly.dragMode_ == Blockly.DRAG_STICKY) {
+    // Still dragging within the sticky DRAG_RADIUS.
+    var dr = goog.math.Coordinate.distance(oldXY, newXY) * this.workspace.scale;
+    if (dr > Blockly.DRAG_RADIUS) {
+      // Switch to unrestricted dragging.
+      Blockly.dragMode_ = Blockly.DRAG_FREE;
+      Blockly.longStop_();
+      if (this.parentBlock_) {
+        // Push this block to the very top of the stack.
+        this.unplug();
+        var group = this.getSvgRoot();
+        group.translate_ = 'translate(' + newXY.x + ',' + newXY.y + ')';
+        this.disconnectUiEffect();
+      }
+      this.setDragging_(true);
+    }
+  }
+  if (Blockly.dragMode_ == Blockly.DRAG_FREE) {
+    // Unrestricted dragging.
+    var dxy = goog.math.Coordinate.difference(oldXY, this.dragStartXY_);
+    var group = this.getSvgRoot();
+    group.translate_ = 'translate(' + newXY.x + ',' + newXY.y + ')';
+    group.setAttribute('transform', group.translate_ + group.skew_);
+    // Drag all the nested bubbles.
+    for (var i = 0; i < this.draggedBubbles_.length; i++) {
+      var commentData = this.draggedBubbles_[i];
+      commentData.bubble.setIconLocation(
+          goog.math.Coordinate.sum(commentData, dxy));
+    }
+
+    // Check to see if any of this block's connections are within range of
+    // another block's connection.
+    var myConnections = this.getConnections_(false);
+    // Also check the last connection on this stack
+    var lastOnStack = this.lastConnectionInStack_();
+    if (lastOnStack && lastOnStack != this.nextConnection) {
+      myConnections.push(lastOnStack);
+    }
+    var closestConnection = null;
+    var localConnection = null;
+    var radiusConnection = Blockly.SNAP_RADIUS;
+    for (var i = 0; i < myConnections.length; i++) {
+      var myConnection = myConnections[i];
+      var neighbour = myConnection.closest(radiusConnection, dxy);
+      if (neighbour.connection) {
+        closestConnection = neighbour.connection;
+        localConnection = myConnection;
+        radiusConnection = neighbour.radius;
+      }
+    }
+
+    // Remove connection highlighting if needed.
+    if (Blockly.highlightedConnection_ &&
+        Blockly.highlightedConnection_ != closestConnection) {
+      Blockly.highlightedConnection_.unhighlight();
+      Blockly.highlightedConnection_ = null;
+      Blockly.localConnection_ = null;
+    }
+    // Add connection highlighting if needed.
+    if (closestConnection &&
+        closestConnection != Blockly.highlightedConnection_) {
+      closestConnection.highlight();
+      Blockly.highlightedConnection_ = closestConnection;
+      Blockly.localConnection_ = localConnection;
+    }
+    // Provide visual indication of whether the block will be deleted if
+    // dropped here.
+    if (this.isDeletable()) {
+      this.workspace.isDeleteArea(e);
+    }
+  }
+  // This event has been handled.  No need to bubble up to the document.
+  e.stopPropagation();
+  e.preventDefault();
+};
+
+/**
+ * Add or remove the UI indicating if this block is movable or not.
+ */
+Blockly.BlockSvg.prototype.updateMovable = function() {
+  if (this.isMovable()) {
+    Blockly.addClass_(/** @type {!Element} */ (this.svgGroup_),
+                      'blocklyDraggable');
+  } else {
+    Blockly.removeClass_(/** @type {!Element} */ (this.svgGroup_),
+                         'blocklyDraggable');
+  }
+};
+
+/**
+ * Set whether this block is movable or not.
+ * @param {boolean} movable True if movable.
+ */
+Blockly.BlockSvg.prototype.setMovable = function(movable) {
+  Blockly.BlockSvg.superClass_.setMovable.call(this, movable);
+  this.updateMovable();
+};
+
+/**
+ * Set whether this block is editable or not.
+ * @param {boolean} editable True if editable.
+ */
+Blockly.BlockSvg.prototype.setEditable = function(editable) {
+  Blockly.BlockSvg.superClass_.setEditable.call(this, editable);
+  var icons = this.getIcons();
+  for (var i = 0; i < icons.length; i++) {
+    icons[i].updateEditable();
+  }
+};
+
+/**
+ * Set whether this block is a shadow block or not.
+ * @param {boolean} shadow True if a shadow.
+ */
+Blockly.BlockSvg.prototype.setShadow = function(shadow) {
+  Blockly.BlockSvg.superClass_.setShadow.call(this, shadow);
+  this.updateColour();
+};
+
+/**
+ * Return the root node of the SVG or null if none exists.
+ * @return {Element} The root SVG node (probably a group).
+ */
+Blockly.BlockSvg.prototype.getSvgRoot = function() {
+  return this.svgGroup_;
+};
+
+/**
+ * Dispose of this block.
+ * @param {boolean} healStack If true, then try to heal any gap by connecting
+ *     the next statement with the previous statement.  Otherwise, dispose of
+ *     all children of this block.
+ * @param {boolean} animate If true, show a disposal animation and sound.
+ */
+Blockly.BlockSvg.prototype.dispose = function(healStack, animate) {
+  if (!this.workspace) {
+    // The block has already been deleted.
+    return;
+  }
+  Blockly.Tooltip.hide();
+  Blockly.Field.startCache();
+  // Save the block's workspace temporarily so we can resize the
+  // contents once the block is disposed.
+  var blockWorkspace = this.workspace;
+  // If this block is being dragged, unlink the mouse events.
+  if (Blockly.selected == this) {
+    this.unselect();
+    Blockly.terminateDrag_();
+  }
+  // If this block has a context menu open, close it.
+  if (Blockly.ContextMenu.currentBlock == this) {
+    Blockly.ContextMenu.hide();
+  }
+
+  if (animate && this.rendered) {
+    this.unplug(healStack);
+    this.disposeUiEffect();
+  }
+  // Stop rerendering.
+  this.rendered = false;
+
+  Blockly.Events.disable();
+  try {
+    var icons = this.getIcons();
+    for (var i = 0; i < icons.length; i++) {
+      icons[i].dispose();
+    }
+  } finally {
+    Blockly.Events.enable();
+  }
+  Blockly.BlockSvg.superClass_.dispose.call(this, healStack);
+
+  goog.dom.removeNode(this.svgGroup_);
+  blockWorkspace.resizeContents();
+  // Sever JavaScript to DOM connections.
+  this.svgGroup_ = null;
+  this.svgPath_ = null;
+  this.svgPathLight_ = null;
+  this.svgPathDark_ = null;
+  Blockly.Field.stopCache();
+};
+
+/**
+ * Play some UI effects (sound, animation) when disposing of a block.
+ */
+Blockly.BlockSvg.prototype.disposeUiEffect = function() {
+  this.workspace.playAudio('delete');
+
+  var xy = Blockly.getSvgXY_(/** @type {!Element} */ (this.svgGroup_),
+                             this.workspace);
+  // Deeply clone the current block.
+  var clone = this.svgGroup_.cloneNode(true);
+  clone.translateX_ = xy.x;
+  clone.translateY_ = xy.y;
+  clone.setAttribute('transform',
+      'translate(' + clone.translateX_ + ',' + clone.translateY_ + ')');
+  this.workspace.getParentSvg().appendChild(clone);
+  clone.bBox_ = clone.getBBox();
+  // Start the animation.
+  Blockly.BlockSvg.disposeUiStep_(clone, this.RTL, new Date,
+      this.workspace.scale);
+};
+
+/**
+ * Animate a cloned block and eventually dispose of it.
+ * This is a class method, not an instace method since the original block has
+ * been destroyed and is no longer accessible.
+ * @param {!Element} clone SVG element to animate and dispose of.
+ * @param {boolean} rtl True if RTL, false if LTR.
+ * @param {!Date} start Date of animation's start.
+ * @param {number} workspaceScale Scale of workspace.
+ * @private
+ */
+Blockly.BlockSvg.disposeUiStep_ = function(clone, rtl, start, workspaceScale) {
+  var ms = new Date - start;
+  var percent = ms / 150;
+  if (percent > 1) {
+    goog.dom.removeNode(clone);
+  } else {
+    var x = clone.translateX_ +
+        (rtl ? -1 : 1) * clone.bBox_.width * workspaceScale / 2 * percent;
+    var y = clone.translateY_ + clone.bBox_.height * workspaceScale * percent;
+    var scale = (1 - percent) * workspaceScale;
+    clone.setAttribute('transform', 'translate(' + x + ',' + y + ')' +
+        ' scale(' + scale + ')');
+    var closure = function() {
+      Blockly.BlockSvg.disposeUiStep_(clone, rtl, start, workspaceScale);
+    };
+    setTimeout(closure, 10);
+  }
+};
+
+/**
+ * Play some UI effects (sound, ripple) after a connection has been established.
+ */
+Blockly.BlockSvg.prototype.connectionUiEffect = function() {
+  this.workspace.playAudio('click');
+  if (this.workspace.scale < 1) {
+    return;  // Too small to care about visual effects.
+  }
+  // Determine the absolute coordinates of the inferior block.
+  var xy = Blockly.getSvgXY_(/** @type {!Element} */ (this.svgGroup_),
+                             this.workspace);
+  // Offset the coordinates based on the two connection types, fix scale.
+  if (this.outputConnection) {
+    xy.x += (this.RTL ? 3 : -3) * this.workspace.scale;
+    xy.y += 13 * this.workspace.scale;
+  } else if (this.previousConnection) {
+    xy.x += (this.RTL ? -23 : 23) * this.workspace.scale;
+    xy.y += 3 * this.workspace.scale;
+  }
+  var ripple = Blockly.createSvgElement('circle',
+      {'cx': xy.x, 'cy': xy.y, 'r': 0, 'fill': 'none',
+       'stroke': '#888', 'stroke-width': 10},
+      this.workspace.getParentSvg());
+  // Start the animation.
+  Blockly.BlockSvg.connectionUiStep_(ripple, new Date, this.workspace.scale);
+};
+
+/**
+ * Expand a ripple around a connection.
+ * @param {!Element} ripple Element to animate.
+ * @param {!Date} start Date of animation's start.
+ * @param {number} workspaceScale Scale of workspace.
+ * @private
+ */
+Blockly.BlockSvg.connectionUiStep_ = function(ripple, start, workspaceScale) {
+  var ms = new Date - start;
+  var percent = ms / 150;
+  if (percent > 1) {
+    goog.dom.removeNode(ripple);
+  } else {
+    ripple.setAttribute('r', percent * 25 * workspaceScale);
+    ripple.style.opacity = 1 - percent;
+    var closure = function() {
+      Blockly.BlockSvg.connectionUiStep_(ripple, start, workspaceScale);
+    };
+    Blockly.BlockSvg.disconnectUiStop_.pid_ = setTimeout(closure, 10);
+  }
+};
+
+/**
+ * Play some UI effects (sound, animation) when disconnecting a block.
+ */
+Blockly.BlockSvg.prototype.disconnectUiEffect = function() {
+  this.workspace.playAudio('disconnect');
+  if (this.workspace.scale < 1) {
+    return;  // Too small to care about visual effects.
+  }
+  // Horizontal distance for bottom of block to wiggle.
+  var DISPLACEMENT = 10;
+  // Scale magnitude of skew to height of block.
+  var height = this.getHeightWidth().height;
+  var magnitude = Math.atan(DISPLACEMENT / height) / Math.PI * 180;
+  if (!this.RTL) {
+    magnitude *= -1;
+  }
+  // Start the animation.
+  Blockly.BlockSvg.disconnectUiStep_(this.svgGroup_, magnitude, new Date);
+};
+
+/**
+ * Animate a brief wiggle of a disconnected block.
+ * @param {!Element} group SVG element to animate.
+ * @param {number} magnitude Maximum degrees skew (reversed for RTL).
+ * @param {!Date} start Date of animation's start.
+ * @private
+ */
+Blockly.BlockSvg.disconnectUiStep_ = function(group, magnitude, start) {
+  var DURATION = 200;  // Milliseconds.
+  var WIGGLES = 3;  // Half oscillations.
+
+  var ms = new Date - start;
+  var percent = ms / DURATION;
+
+  if (percent > 1) {
+    group.skew_ = '';
+  } else {
+    var skew = Math.round(Math.sin(percent * Math.PI * WIGGLES) *
+        (1 - percent) * magnitude);
+    group.skew_ = 'skewX(' + skew + ')';
+    var closure = function() {
+      Blockly.BlockSvg.disconnectUiStep_(group, magnitude, start);
+    };
+    Blockly.BlockSvg.disconnectUiStop_.group = group;
+    Blockly.BlockSvg.disconnectUiStop_.pid = setTimeout(closure, 10);
+  }
+  group.setAttribute('transform', group.translate_ + group.skew_);
+};
+
+/**
+ * Stop the disconnect UI animation immediately.
+ * @private
+ */
+Blockly.BlockSvg.disconnectUiStop_ = function() {
+  if (Blockly.BlockSvg.disconnectUiStop_.group) {
+    clearTimeout(Blockly.BlockSvg.disconnectUiStop_.pid);
+    var group = Blockly.BlockSvg.disconnectUiStop_.group;
+    group.skew_ = '';
+    group.setAttribute('transform', group.translate_);
+    Blockly.BlockSvg.disconnectUiStop_.group = null;
+  }
+};
+
+/**
+ * PID of disconnect UI animation.  There can only be one at a time.
+ * @type {number}
+ */
+Blockly.BlockSvg.disconnectUiStop_.pid = 0;
+
+/**
+ * SVG group of wobbling block.  There can only be one at a time.
+ * @type {Element}
+ */
+Blockly.BlockSvg.disconnectUiStop_.group = null;
+
+/**
+ * Change the colour of a block.
+ */
+Blockly.BlockSvg.prototype.updateColour = function() {
+  if (this.disabled) {
+    // Disabled blocks don't have colour.
+    return;
+  }
+  var hexColour = this.getColour();
+  var rgb = goog.color.hexToRgb(hexColour);
+  if (this.isShadow()) {
+    rgb = goog.color.lighten(rgb, 0.6);
+    hexColour = goog.color.rgbArrayToHex(rgb);
+    this.svgPathLight_.style.display = 'none';
+    this.svgPathDark_.setAttribute('fill', hexColour);
+  } else {
+    this.svgPathLight_.style.display = '';
+    var hexLight = goog.color.rgbArrayToHex(goog.color.lighten(rgb, 0.3));
+    var hexDark = goog.color.rgbArrayToHex(goog.color.darken(rgb, 0.2));
+    this.svgPathLight_.setAttribute('stroke', hexLight);
+    this.svgPathDark_.setAttribute('fill', hexDark);
+  }
+  this.svgPath_.setAttribute('fill', hexColour);
+
+  var icons = this.getIcons();
+  for (var i = 0; i < icons.length; i++) {
+    icons[i].updateColour();
+  }
+
+  // Bump every dropdown to change its colour.
+  for (var x = 0, input; input = this.inputList[x]; x++) {
+    for (var y = 0, field; field = input.fieldRow[y]; y++) {
+      field.setText(null);
+    }
+  }
+};
+
+/**
+ * Enable or disable a block.
+ */
+Blockly.BlockSvg.prototype.updateDisabled = function() {
+  var hasClass = Blockly.hasClass_(/** @type {!Element} */ (this.svgGroup_),
+                                   'blocklyDisabled');
+  if (this.disabled || this.getInheritedDisabled()) {
+    if (!hasClass) {
+      Blockly.addClass_(/** @type {!Element} */ (this.svgGroup_),
+                        'blocklyDisabled');
+      this.svgPath_.setAttribute('fill',
+          'url(#' + this.workspace.options.disabledPatternId + ')');
+    }
+  } else {
+    if (hasClass) {
+      Blockly.removeClass_(/** @type {!Element} */ (this.svgGroup_),
+                           'blocklyDisabled');
+      this.updateColour();
+    }
+  }
+  var children = this.getChildren();
+  for (var i = 0, child; child = children[i]; i++) {
+    child.updateDisabled();
+  }
+};
+
+/**
+ * Returns the comment on this block (or '' if none).
+ * @return {string} Block's comment.
+ */
+Blockly.BlockSvg.prototype.getCommentText = function() {
+  if (this.comment) {
+    var comment = this.comment.getText();
+    // Trim off trailing whitespace.
+    return comment.replace(/\s+$/, '').replace(/ +\n/g, '\n');
+  }
+  return '';
+};
+
+/**
+ * Set this block's comment text.
+ * @param {?string} text The text, or null to delete.
+ */
+Blockly.BlockSvg.prototype.setCommentText = function(text) {
+  var changedState = false;
+  if (goog.isString(text)) {
+    if (!this.comment) {
+      this.comment = new Blockly.Comment(this);
+      changedState = true;
+    }
+    this.comment.setText(/** @type {string} */ (text));
+  } else {
+    if (this.comment) {
+      this.comment.dispose();
+      changedState = true;
+    }
+  }
+  if (changedState && this.rendered) {
+    this.render();
+    // Adding or removing a comment icon will cause the block to change shape.
+    this.bumpNeighbours_();
+  }
+};
+
+/**
+ * Set this block's warning text.
+ * @param {?string} text The text, or null to delete.
+ * @param {string=} opt_id An optional ID for the warning text to be able to
+ *     maintain multiple warnings.
+ */
+Blockly.BlockSvg.prototype.setWarningText = function(text, opt_id) {
+  if (!this.setWarningText.pid_) {
+    // Create a database of warning PIDs.
+    // Only runs once per block (and only those with warnings).
+    this.setWarningText.pid_ = Object.create(null);
+  }
+  var id = opt_id || '';
+  if (!id) {
+    // Kill all previous pending processes, this edit supercedes them all.
+    for (var n in this.setWarningText.pid_) {
+      clearTimeout(this.setWarningText.pid_[n]);
+      delete this.setWarningText.pid_[n];
+    }
+  } else if (this.setWarningText.pid_[id]) {
+    // Only queue up the latest change.  Kill any earlier pending process.
+    clearTimeout(this.setWarningText.pid_[id]);
+    delete this.setWarningText.pid_[id];
+  }
+  if (Blockly.dragMode_ == Blockly.DRAG_FREE) {
+    // Don't change the warning text during a drag.
+    // Wait until the drag finishes.
+    var thisBlock = this;
+    this.setWarningText.pid_[id] = setTimeout(function() {
+      if (thisBlock.workspace) {  // Check block wasn't deleted.
+        delete thisBlock.setWarningText.pid_[id];
+        thisBlock.setWarningText(text, id);
+      }
+    }, 100);
+    return;
+  }
+  if (this.isInFlyout) {
+    text = null;
+  }
+
+  // Bubble up to add a warning on top-most collapsed block.
+  var parent = this.getSurroundParent();
+  var collapsedParent = null;
+  while (parent) {
+    if (parent.isCollapsed()) {
+      collapsedParent = parent;
+    }
+    parent = parent.getSurroundParent();
+  }
+  if (collapsedParent) {
+    collapsedParent.setWarningText(text, 'collapsed ' + this.id + ' ' + id);
+  }
+
+  var changedState = false;
+  if (goog.isString(text)) {
+    if (!this.warning) {
+      this.warning = new Blockly.Warning(this);
+      changedState = true;
+    }
+    this.warning.setText(/** @type {string} */ (text), id);
+  } else {
+    // Dispose all warnings if no id is given.
+    if (this.warning && !id) {
+      this.warning.dispose();
+      changedState = true;
+    } else if (this.warning) {
+      var oldText = this.warning.getText();
+      this.warning.setText('', id);
+      var newText = this.warning.getText();
+      if (!newText) {
+        this.warning.dispose();
+      }
+      changedState = oldText == newText;
+    }
+  }
+  if (changedState && this.rendered) {
+    this.render();
+    // Adding or removing a warning icon will cause the block to change shape.
+    this.bumpNeighbours_();
+  }
+};
+
+/**
+ * Give this block a mutator dialog.
+ * @param {Blockly.Mutator} mutator A mutator dialog instance or null to remove.
+ */
+Blockly.BlockSvg.prototype.setMutator = function(mutator) {
+  if (this.mutator && this.mutator !== mutator) {
+    this.mutator.dispose();
+  }
+  if (mutator) {
+    mutator.block_ = this;
+    this.mutator = mutator;
+    mutator.createIcon();
+  }
+};
+
+/**
+ * Set whether the block is disabled or not.
+ * @param {boolean} disabled True if disabled.
+ */
+Blockly.BlockSvg.prototype.setDisabled = function(disabled) {
+  if (this.disabled != disabled) {
+    Blockly.BlockSvg.superClass_.setDisabled.call(this, disabled);
+    if (this.rendered) {
+      this.updateDisabled();
+    }
+  }
+};
+
+/**
+ * Select this block.  Highlight it visually.
+ */
+Blockly.BlockSvg.prototype.addSelect = function() {
+  Blockly.addClass_(/** @type {!Element} */ (this.svgGroup_),
+                    'blocklySelected');
+  // Move the selected block to the top of the stack.
+  var block = this;
+  do {
+    var root = block.getSvgRoot();
+    root.parentNode.appendChild(root);
+    block = block.getParent();
+  } while (block);
+};
+
+/**
+ * Unselect this block.  Remove its highlighting.
+ */
+Blockly.BlockSvg.prototype.removeSelect = function() {
+  Blockly.removeClass_(/** @type {!Element} */ (this.svgGroup_),
+                       'blocklySelected');
+};
+
+/**
+ * Adds the dragging class to this block.
+ * Also disables the highlights/shadows to improve performance.
+ */
+Blockly.BlockSvg.prototype.addDragging = function() {
+  Blockly.addClass_(/** @type {!Element} */ (this.svgGroup_),
+                    'blocklyDragging');
+};
+
+/**
+ * Removes the dragging class from this block.
+ */
+Blockly.BlockSvg.prototype.removeDragging = function() {
+  Blockly.removeClass_(/** @type {!Element} */ (this.svgGroup_),
+                       'blocklyDragging');
+};
+
+// Overrides of functions on Blockly.Block that take into account whether the
+// block has been rendered.
+
+/**
+ * Change the colour of a block.
+ * @param {number|string} colour HSV hue value, or #RRGGBB string.
+ */
+Blockly.BlockSvg.prototype.setColour = function(colour) {
+  Blockly.BlockSvg.superClass_.setColour.call(this, colour);
+
+  if (this.rendered) {
+    this.updateColour();
+  }
+};
+
+/**
+ * Set whether this block can chain onto the bottom of another block.
+ * @param {boolean} newBoolean True if there can be a previous statement.
+ * @param {string|Array.<string>|null|undefined} opt_check Statement type or
+ *     list of statement types.  Null/undefined if any type could be connected.
+ */
+Blockly.BlockSvg.prototype.setPreviousStatement =
+    function(newBoolean, opt_check) {
+  /* eslint-disable indent */
+  Blockly.BlockSvg.superClass_.setPreviousStatement.call(this, newBoolean,
+      opt_check);
+
+  if (this.rendered) {
+    this.render();
+    this.bumpNeighbours_();
+  }
+};  /* eslint-enable indent */
+
+/**
+ * Set whether another block can chain onto the bottom of this block.
+ * @param {boolean} newBoolean True if there can be a next statement.
+ * @param {string|Array.<string>|null|undefined} opt_check Statement type or
+ *     list of statement types.  Null/undefined if any type could be connected.
+ */
+Blockly.BlockSvg.prototype.setNextStatement = function(newBoolean, opt_check) {
+  Blockly.BlockSvg.superClass_.setNextStatement.call(this, newBoolean,
+      opt_check);
+
+  if (this.rendered) {
+    this.render();
+    this.bumpNeighbours_();
+  }
+};
+
+/**
+ * Set whether this block returns a value.
+ * @param {boolean} newBoolean True if there is an output.
+ * @param {string|Array.<string>|null|undefined} opt_check Returned type or list
+ *     of returned types.  Null or undefined if any type could be returned
+ *     (e.g. variable get).
+ */
+Blockly.BlockSvg.prototype.setOutput = function(newBoolean, opt_check) {
+  Blockly.BlockSvg.superClass_.setOutput.call(this, newBoolean, opt_check);
+
+  if (this.rendered) {
+    this.render();
+    this.bumpNeighbours_();
+  }
+};
+
+/**
+ * Set whether value inputs are arranged horizontally or vertically.
+ * @param {boolean} newBoolean True if inputs are horizontal.
+ */
+Blockly.BlockSvg.prototype.setInputsInline = function(newBoolean) {
+  Blockly.BlockSvg.superClass_.setInputsInline.call(this, newBoolean);
+
+  if (this.rendered) {
+    this.render();
+    this.bumpNeighbours_();
+  }
+};
+
+/**
+ * Remove an input from this block.
+ * @param {string} name The name of the input.
+ * @param {boolean=} opt_quiet True to prevent error if input is not present.
+ * @throws {goog.asserts.AssertionError} if the input is not present and
+ *     opt_quiet is not true.
+ */
+Blockly.BlockSvg.prototype.removeInput = function(name, opt_quiet) {
+  Blockly.BlockSvg.superClass_.removeInput.call(this, name, opt_quiet);
+
+  if (this.rendered) {
+    this.render();
+    // Removing an input will cause the block to change shape.
+    this.bumpNeighbours_();
+  }
+};
+
+/**
+ * Move a numbered input to a different location on this block.
+ * @param {number} inputIndex Index of the input to move.
+ * @param {number} refIndex Index of input that should be after the moved input.
+ */
+Blockly.BlockSvg.prototype.moveNumberedInputBefore = function(
+    inputIndex, refIndex) {
+  Blockly.BlockSvg.superClass_.moveNumberedInputBefore.call(this, inputIndex,
+      refIndex);
+
+  if (this.rendered) {
+    this.render();
+    // Moving an input will cause the block to change shape.
+    this.bumpNeighbours_();
+  }
+};
+
+/**
+ * Add a value input, statement input or local variable to this block.
+ * @param {number} type Either Blockly.INPUT_VALUE or Blockly.NEXT_STATEMENT or
+ *     Blockly.DUMMY_INPUT.
+ * @param {string} name Language-neutral identifier which may used to find this
+ *     input again.  Should be unique to this block.
+ * @return {!Blockly.Input} The input object created.
+ * @private
+ */
+Blockly.BlockSvg.prototype.appendInput_ = function(type, name) {
+  var input = Blockly.BlockSvg.superClass_.appendInput_.call(this, type, name);
+
+  if (this.rendered) {
+    this.render();
+    // Adding an input will cause the block to change shape.
+    this.bumpNeighbours_();
+  }
+  return input;
+};
+
+/**
+ * Returns connections originating from this block.
+ * @param {boolean} all If true, return all connections even hidden ones.
+ *     Otherwise, for a non-rendered block return an empty list, and for a
+ *     collapsed block don't return inputs connections.
+ * @return {!Array.<!Blockly.Connection>} Array of connections.
+ * @private
+ */
+Blockly.BlockSvg.prototype.getConnections_ = function(all) {
+  var myConnections = [];
+  if (all || this.rendered) {
+    if (this.outputConnection) {
+      myConnections.push(this.outputConnection);
+    }
+    if (this.previousConnection) {
+      myConnections.push(this.previousConnection);
+    }
+    if (this.nextConnection) {
+      myConnections.push(this.nextConnection);
+    }
+    if (all || !this.collapsed_) {
+      for (var i = 0, input; input = this.inputList[i]; i++) {
+        if (input.connection) {
+          myConnections.push(input.connection);
+        }
+      }
+    }
+  }
+  return myConnections;
+};
+
+/**
+ * Create a connection of the specified type.
+ * @param {number} type The type of the connection to create.
+ * @return {!Blockly.RenderedConnection} A new connection of the specified type.
+ * @private
+ */
+Blockly.BlockSvg.prototype.makeConnection_ = function(type) {
+  return new Blockly.RenderedConnection(this, type);
+};
diff --git a/blockly/core/blockly.js b/blockly/core/blockly.js
new file mode 100644
index 0000000..fb6562e
--- /dev/null
+++ b/blockly/core/blockly.js
@@ -0,0 +1,453 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2011 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Core JavaScript library for Blockly.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+// Top level object for Blockly.
+goog.provide('Blockly');
+
+goog.require('Blockly.BlockSvg.render');
+goog.require('Blockly.Events');
+goog.require('Blockly.FieldAngle');
+goog.require('Blockly.FieldCheckbox');
+goog.require('Blockly.FieldColour');
+// Date picker commented out since it increases footprint by 60%.
+// Add it only if you need it.
+//goog.require('Blockly.FieldDate');
+goog.require('Blockly.FieldDropdown');
+goog.require('Blockly.FieldImage');
+goog.require('Blockly.FieldTextInput');
+goog.require('Blockly.FieldNumber');
+goog.require('Blockly.FieldVariable');
+goog.require('Blockly.Generator');
+goog.require('Blockly.Msg');
+goog.require('Blockly.Procedures');
+goog.require('Blockly.Toolbox');
+goog.require('Blockly.WidgetDiv');
+goog.require('Blockly.WorkspaceSvg');
+goog.require('Blockly.constants');
+goog.require('Blockly.inject');
+goog.require('Blockly.utils');
+goog.require('goog.color');
+goog.require('goog.userAgent');
+
+
+// Turn off debugging when compiled.
+var CLOSURE_DEFINES = {'goog.DEBUG': false};
+
+/**
+ * The main workspace most recently used.
+ * Set by Blockly.WorkspaceSvg.prototype.markFocused
+ * @type {Blockly.Workspace}
+ */
+Blockly.mainWorkspace = null;
+
+/**
+ * Currently selected block.
+ * @type {Blockly.Block}
+ */
+Blockly.selected = null;
+
+/**
+ * Currently highlighted connection (during a drag).
+ * @type {Blockly.Connection}
+ * @private
+ */
+Blockly.highlightedConnection_ = null;
+
+/**
+ * Connection on dragged block that matches the highlighted connection.
+ * @type {Blockly.Connection}
+ * @private
+ */
+Blockly.localConnection_ = null;
+
+/**
+ * All of the connections on blocks that are currently being dragged.
+ * @type {!Array.<!Blockly.Connection>}
+ * @private
+ */
+Blockly.draggingConnections_ = [];
+
+/**
+ * Contents of the local clipboard.
+ * @type {Element}
+ * @private
+ */
+Blockly.clipboardXml_ = null;
+
+/**
+ * Source of the local clipboard.
+ * @type {Blockly.WorkspaceSvg}
+ * @private
+ */
+Blockly.clipboardSource_ = null;
+
+/**
+ * Is the mouse dragging a block?
+ * DRAG_NONE - No drag operation.
+ * DRAG_STICKY - Still inside the sticky DRAG_RADIUS.
+ * DRAG_FREE - Freely draggable.
+ * @private
+ */
+Blockly.dragMode_ = Blockly.DRAG_NONE;
+
+/**
+ * Wrapper function called when a touch mouseUp occurs during a drag operation.
+ * @type {Array.<!Array>}
+ * @private
+ */
+Blockly.onTouchUpWrapper_ = null;
+
+/**
+ * Convert a hue (HSV model) into an RGB hex triplet.
+ * @param {number} hue Hue on a colour wheel (0-360).
+ * @return {string} RGB code, e.g. '#5ba65b'.
+ */
+Blockly.hueToRgb = function(hue) {
+  return goog.color.hsvToHex(hue, Blockly.HSV_SATURATION,
+      Blockly.HSV_VALUE * 255);
+};
+
+/**
+ * Returns the dimensions of the specified SVG image.
+ * @param {!Element} svg SVG image.
+ * @return {!Object} Contains width and height properties.
+ */
+Blockly.svgSize = function(svg) {
+  return {width: svg.cachedWidth_,
+          height: svg.cachedHeight_};
+};
+
+/**
+ * Size the workspace when the contents change.  This also updates
+ * scrollbars accordingly.
+ * @param {!Blockly.WorkspaceSvg} workspace The workspace to resize.
+ */
+Blockly.resizeSvgContents = function(workspace) {
+  workspace.resizeContents();
+};
+
+/**
+ * Size the SVG image to completely fill its container. Call this when the view
+ * actually changes sizes (e.g. on a window resize/device orientation change).
+ * See Blockly.resizeSvgContents to resize the workspace when the contents
+ * change (e.g. when a block is added or removed).
+ * Record the height/width of the SVG image.
+ * @param {!Blockly.WorkspaceSvg} workspace Any workspace in the SVG.
+ */
+Blockly.svgResize = function(workspace) {
+  var mainWorkspace = workspace;
+  while (mainWorkspace.options.parentWorkspace) {
+    mainWorkspace = mainWorkspace.options.parentWorkspace;
+  }
+  var svg = mainWorkspace.getParentSvg();
+  var div = svg.parentNode;
+  if (!div) {
+    // Workspace deleted, or something.
+    return;
+  }
+  var width = div.offsetWidth;
+  var height = div.offsetHeight;
+  if (svg.cachedWidth_ != width) {
+    svg.setAttribute('width', width + 'px');
+    svg.cachedWidth_ = width;
+  }
+  if (svg.cachedHeight_ != height) {
+    svg.setAttribute('height', height + 'px');
+    svg.cachedHeight_ = height;
+  }
+  mainWorkspace.resize();
+};
+
+/**
+ * Handle a mouse-up anywhere on the page.
+ * @param {!Event} e Mouse up event.
+ * @private
+ */
+Blockly.onMouseUp_ = function(e) {
+  var workspace = Blockly.getMainWorkspace();
+  Blockly.Css.setCursor(Blockly.Css.Cursor.OPEN);
+  workspace.dragMode_ = Blockly.DRAG_NONE;
+  // Unbind the touch event if it exists.
+  if (Blockly.onTouchUpWrapper_) {
+    Blockly.unbindEvent_(Blockly.onTouchUpWrapper_);
+    Blockly.onTouchUpWrapper_ = null;
+  }
+  if (Blockly.onMouseMoveWrapper_) {
+    Blockly.unbindEvent_(Blockly.onMouseMoveWrapper_);
+    Blockly.onMouseMoveWrapper_ = null;
+  }
+};
+
+/**
+ * Handle a mouse-move on SVG drawing surface.
+ * @param {!Event} e Mouse move event.
+ * @private
+ */
+Blockly.onMouseMove_ = function(e) {
+  if (e.touches && e.touches.length >= 2) {
+    return;  // Multi-touch gestures won't have e.clientX.
+  }
+  var workspace = Blockly.getMainWorkspace();
+  if (workspace.dragMode_ != Blockly.DRAG_NONE) {
+    var dx = e.clientX - workspace.startDragMouseX;
+    var dy = e.clientY - workspace.startDragMouseY;
+    var metrics = workspace.startDragMetrics;
+    var x = workspace.startScrollX + dx;
+    var y = workspace.startScrollY + dy;
+    x = Math.min(x, -metrics.contentLeft);
+    y = Math.min(y, -metrics.contentTop);
+    x = Math.max(x, metrics.viewWidth - metrics.contentLeft -
+                 metrics.contentWidth);
+    y = Math.max(y, metrics.viewHeight - metrics.contentTop -
+                 metrics.contentHeight);
+
+    // Move the scrollbars and the page will scroll automatically.
+    workspace.scrollbar.set(-x - metrics.contentLeft,
+                            -y - metrics.contentTop);
+    // Cancel the long-press if the drag has moved too far.
+    if (Math.sqrt(dx * dx + dy * dy) > Blockly.DRAG_RADIUS) {
+      Blockly.longStop_();
+      workspace.dragMode_ = Blockly.DRAG_FREE;
+    }
+    e.stopPropagation();
+    e.preventDefault();
+  }
+};
+
+/**
+ * Handle a key-down on SVG drawing surface.
+ * @param {!Event} e Key down event.
+ * @private
+ */
+Blockly.onKeyDown_ = function(e) {
+  if (Blockly.mainWorkspace.options.readOnly || Blockly.isTargetInput_(e)) {
+    // No key actions on readonly workspaces.
+    // When focused on an HTML text input widget, don't trap any keys.
+    return;
+  }
+  var deleteBlock = false;
+  if (e.keyCode == 27) {
+    // Pressing esc closes the context menu.
+    Blockly.hideChaff();
+  } else if (e.keyCode == 8 || e.keyCode == 46) {
+    // Delete or backspace.
+    // Stop the browser from going back to the previous page.
+    // Do this first to prevent an error in the delete code from resulting in
+    // data loss.
+    e.preventDefault();
+    if (Blockly.selected && Blockly.selected.isDeletable()) {
+      deleteBlock = true;
+    }
+  } else if (e.altKey || e.ctrlKey || e.metaKey) {
+    if (Blockly.selected &&
+        Blockly.selected.isDeletable() && Blockly.selected.isMovable()) {
+      if (e.keyCode == 67) {
+        // 'c' for copy.
+        Blockly.hideChaff();
+        Blockly.copy_(Blockly.selected);
+      } else if (e.keyCode == 88) {
+        // 'x' for cut.
+        Blockly.copy_(Blockly.selected);
+        deleteBlock = true;
+      }
+    }
+    if (e.keyCode == 86) {
+      // 'v' for paste.
+      if (Blockly.clipboardXml_) {
+        Blockly.Events.setGroup(true);
+        Blockly.clipboardSource_.paste(Blockly.clipboardXml_);
+        Blockly.Events.setGroup(false);
+      }
+    } else if (e.keyCode == 90) {
+      // 'z' for undo 'Z' is for redo.
+      Blockly.hideChaff();
+      Blockly.mainWorkspace.undo(e.shiftKey);
+    }
+  }
+  if (deleteBlock) {
+    // Common code for delete and cut.
+    Blockly.Events.setGroup(true);
+    Blockly.hideChaff();
+    var heal = Blockly.dragMode_ != Blockly.DRAG_FREE;
+    Blockly.selected.dispose(heal, true);
+    if (Blockly.highlightedConnection_) {
+      Blockly.highlightedConnection_.unhighlight();
+      Blockly.highlightedConnection_ = null;
+    }
+    Blockly.Events.setGroup(false);
+  }
+};
+
+/**
+ * Stop binding to the global mouseup and mousemove events.
+ * @private
+ */
+Blockly.terminateDrag_ = function() {
+  Blockly.BlockSvg.terminateDrag();
+  Blockly.Flyout.terminateDrag_();
+};
+
+/**
+ * PID of queued long-press task.
+ * @private
+ */
+Blockly.longPid_ = 0;
+
+/**
+ * Context menus on touch devices are activated using a long-press.
+ * Unfortunately the contextmenu touch event is currently (2015) only suported
+ * by Chrome.  This function is fired on any touchstart event, queues a task,
+ * which after about a second opens the context menu.  The tasks is killed
+ * if the touch event terminates early.
+ * @param {!Event} e Touch start event.
+ * @param {!Blockly.Block|!Blockly.WorkspaceSvg} uiObject The block or workspace
+ *   under the touchstart event.
+ * @private
+ */
+Blockly.longStart_ = function(e, uiObject) {
+  Blockly.longStop_();
+  Blockly.longPid_ = setTimeout(function() {
+    e.button = 2;  // Simulate a right button click.
+    uiObject.onMouseDown_(e);
+  }, Blockly.LONGPRESS);
+};
+
+/**
+ * Nope, that's not a long-press.  Either touchend or touchcancel was fired,
+ * or a drag hath begun.  Kill the queued long-press task.
+ * @private
+ */
+Blockly.longStop_ = function() {
+  if (Blockly.longPid_) {
+    clearTimeout(Blockly.longPid_);
+    Blockly.longPid_ = 0;
+  }
+};
+
+/**
+ * Copy a block onto the local clipboard.
+ * @param {!Blockly.Block} block Block to be copied.
+ * @private
+ */
+Blockly.copy_ = function(block) {
+  var xmlBlock = Blockly.Xml.blockToDom(block);
+  if (Blockly.dragMode_ != Blockly.DRAG_FREE) {
+    Blockly.Xml.deleteNext(xmlBlock);
+  }
+  // Encode start position in XML.
+  var xy = block.getRelativeToSurfaceXY();
+  xmlBlock.setAttribute('x', block.RTL ? -xy.x : xy.x);
+  xmlBlock.setAttribute('y', xy.y);
+  Blockly.clipboardXml_ = xmlBlock;
+  Blockly.clipboardSource_ = block.workspace;
+};
+
+/**
+ * Duplicate this block and its children.
+ * @param {!Blockly.Block} block Block to be copied.
+ * @private
+ */
+Blockly.duplicate_ = function(block) {
+  // Save the clipboard.
+  var clipboardXml = Blockly.clipboardXml_;
+  var clipboardSource = Blockly.clipboardSource_;
+
+  // Create a duplicate via a copy/paste operation.
+  Blockly.copy_(block);
+  block.workspace.paste(Blockly.clipboardXml_);
+
+  // Restore the clipboard.
+  Blockly.clipboardXml_ = clipboardXml;
+  Blockly.clipboardSource_ = clipboardSource;
+};
+
+/**
+ * Cancel the native context menu, unless the focus is on an HTML input widget.
+ * @param {!Event} e Mouse down event.
+ * @private
+ */
+Blockly.onContextMenu_ = function(e) {
+  if (!Blockly.isTargetInput_(e)) {
+    // When focused on an HTML text input widget, don't cancel the context menu.
+    e.preventDefault();
+  }
+};
+
+/**
+ * Close tooltips, context menus, dropdown selections, etc.
+ * @param {boolean=} opt_allowToolbox If true, don't close the toolbox.
+ */
+Blockly.hideChaff = function(opt_allowToolbox) {
+  Blockly.Tooltip.hide();
+  Blockly.WidgetDiv.hide();
+  if (!opt_allowToolbox) {
+    var workspace = Blockly.getMainWorkspace();
+    if (workspace.toolbox_ &&
+        workspace.toolbox_.flyout_ &&
+        workspace.toolbox_.flyout_.autoClose) {
+      workspace.toolbox_.clearSelection();
+    }
+  }
+};
+
+/**
+ * When something in Blockly's workspace changes, call a function.
+ * @param {!Function} func Function to call.
+ * @return {!Array.<!Array>} Opaque data that can be passed to
+ *     removeChangeListener.
+ * @deprecated April 2015
+ */
+Blockly.addChangeListener = function(func) {
+  // Backwards compatability from before there could be multiple workspaces.
+  console.warn('Deprecated call to Blockly.addChangeListener, ' +
+               'use workspace.addChangeListener instead.');
+  return Blockly.getMainWorkspace().addChangeListener(func);
+};
+
+/**
+ * Returns the main workspace.  Returns the last used main workspace (based on
+ * focus).  Try not to use this function, particularly if there are multiple
+ * Blockly instances on a page.
+ * @return {!Blockly.Workspace} The main workspace.
+ */
+Blockly.getMainWorkspace = function() {
+  return Blockly.mainWorkspace;
+};
+
+// IE9 does not have a console.  Create a stub to stop errors.
+if (!goog.global['console']) {
+  goog.global['console'] = {
+    'log': function() {},
+    'warn': function() {}
+  };
+}
+
+// Export symbols that would otherwise be renamed by Closure compiler.
+if (!goog.global['Blockly']) {
+  goog.global['Blockly'] = {};
+}
+goog.global['Blockly']['getMainWorkspace'] = Blockly.getMainWorkspace;
+goog.global['Blockly']['addChangeListener'] = Blockly.addChangeListener;
diff --git a/blockly/core/blocks.js b/blockly/core/blocks.js
new file mode 100644
index 0000000..d6932ce
--- /dev/null
+++ b/blockly/core/blocks.js
@@ -0,0 +1,33 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2013 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Empty name space for the Blocks singleton.
+ * @author spertus@google.com (Ellen Spertus)
+ */
+'use strict';
+
+goog.provide('Blockly.Blocks');
+
+/**
+ * Allow for switching between one and zero based indexing for lists and text,
+ * one based by default.
+ */
+Blockly.Blocks.ONE_BASED_INDEXING = true;
diff --git a/blockly/core/bubble.js b/blockly/core/bubble.js
new file mode 100644
index 0000000..d4c1e27
--- /dev/null
+++ b/blockly/core/bubble.js
@@ -0,0 +1,579 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2012 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Object representing a UI bubble.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.Bubble');
+
+goog.require('Blockly.Workspace');
+goog.require('goog.dom');
+goog.require('goog.math');
+goog.require('goog.math.Coordinate');
+goog.require('goog.userAgent');
+
+
+/**
+ * Class for UI bubble.
+ * @param {!Blockly.WorkspaceSvg} workspace The workspace on which to draw the
+ *     bubble.
+ * @param {!Element} content SVG content for the bubble.
+ * @param {Element} shape SVG element to avoid eclipsing.
+ * @param {!goog.math.Coodinate} anchorXY Absolute position of bubble's anchor
+ *     point.
+ * @param {?number} bubbleWidth Width of bubble, or null if not resizable.
+ * @param {?number} bubbleHeight Height of bubble, or null if not resizable.
+ * @constructor
+ */
+Blockly.Bubble = function(workspace, content, shape, anchorXY,
+                          bubbleWidth, bubbleHeight) {
+  this.workspace_ = workspace;
+  this.content_ = content;
+  this.shape_ = shape;
+
+  var angle = Blockly.Bubble.ARROW_ANGLE;
+  if (this.workspace_.RTL) {
+    angle = -angle;
+  }
+  this.arrow_radians_ = goog.math.toRadians(angle);
+
+  var canvas = workspace.getBubbleCanvas();
+  canvas.appendChild(this.createDom_(content, !!(bubbleWidth && bubbleHeight)));
+
+  this.setAnchorLocation(anchorXY);
+  if (!bubbleWidth || !bubbleHeight) {
+    var bBox = /** @type {SVGLocatable} */ (this.content_).getBBox();
+    bubbleWidth = bBox.width + 2 * Blockly.Bubble.BORDER_WIDTH;
+    bubbleHeight = bBox.height + 2 * Blockly.Bubble.BORDER_WIDTH;
+  }
+  this.setBubbleSize(bubbleWidth, bubbleHeight);
+
+  // Render the bubble.
+  this.positionBubble_();
+  this.renderArrow_();
+  this.rendered_ = true;
+
+  if (!workspace.options.readOnly) {
+    Blockly.bindEvent_(this.bubbleBack_, 'mousedown', this,
+                       this.bubbleMouseDown_);
+    if (this.resizeGroup_) {
+      Blockly.bindEvent_(this.resizeGroup_, 'mousedown', this,
+                         this.resizeMouseDown_);
+    }
+  }
+};
+
+/**
+ * Width of the border around the bubble.
+ */
+Blockly.Bubble.BORDER_WIDTH = 6;
+
+/**
+ * Determines the thickness of the base of the arrow in relation to the size
+ * of the bubble.  Higher numbers result in thinner arrows.
+ */
+Blockly.Bubble.ARROW_THICKNESS = 10;
+
+/**
+ * The number of degrees that the arrow bends counter-clockwise.
+ */
+Blockly.Bubble.ARROW_ANGLE = 20;
+
+/**
+ * The sharpness of the arrow's bend.  Higher numbers result in smoother arrows.
+ */
+Blockly.Bubble.ARROW_BEND = 4;
+
+/**
+ * Distance between arrow point and anchor point.
+ */
+Blockly.Bubble.ANCHOR_RADIUS = 8;
+
+/**
+ * Wrapper function called when a mouseUp occurs during a drag operation.
+ * @type {Array.<!Array>}
+ * @private
+ */
+Blockly.Bubble.onMouseUpWrapper_ = null;
+
+/**
+ * Wrapper function called when a mouseMove occurs during a drag operation.
+ * @type {Array.<!Array>}
+ * @private
+ */
+Blockly.Bubble.onMouseMoveWrapper_ = null;
+
+/**
+ * Function to call on resize of bubble.
+ * @type {Function}
+ */
+Blockly.Bubble.prototype.resizeCallback_ = null;
+
+/**
+ * Stop binding to the global mouseup and mousemove events.
+ * @private
+ */
+Blockly.Bubble.unbindDragEvents_ = function() {
+  if (Blockly.Bubble.onMouseUpWrapper_) {
+    Blockly.unbindEvent_(Blockly.Bubble.onMouseUpWrapper_);
+    Blockly.Bubble.onMouseUpWrapper_ = null;
+  }
+  if (Blockly.Bubble.onMouseMoveWrapper_) {
+    Blockly.unbindEvent_(Blockly.Bubble.onMouseMoveWrapper_);
+    Blockly.Bubble.onMouseMoveWrapper_ = null;
+  }
+};
+
+/**
+ * Flag to stop incremental rendering during construction.
+ * @private
+ */
+Blockly.Bubble.prototype.rendered_ = false;
+
+/**
+ * Absolute coordinate of anchor point.
+ * @type {goog.math.Coordinate}
+ * @private
+ */
+Blockly.Bubble.prototype.anchorXY_ = null;
+
+/**
+ * Relative X coordinate of bubble with respect to the anchor's centre.
+ * In RTL mode the initial value is negated.
+ * @private
+ */
+Blockly.Bubble.prototype.relativeLeft_ = 0;
+
+/**
+ * Relative Y coordinate of bubble with respect to the anchor's centre.
+ * @private
+ */
+Blockly.Bubble.prototype.relativeTop_ = 0;
+
+/**
+ * Width of bubble.
+ * @private
+ */
+Blockly.Bubble.prototype.width_ = 0;
+
+/**
+ * Height of bubble.
+ * @private
+ */
+Blockly.Bubble.prototype.height_ = 0;
+
+/**
+ * Automatically position and reposition the bubble.
+ * @private
+ */
+Blockly.Bubble.prototype.autoLayout_ = true;
+
+/**
+ * Create the bubble's DOM.
+ * @param {!Element} content SVG content for the bubble.
+ * @param {boolean} hasResize Add diagonal resize gripper if true.
+ * @return {!Element} The bubble's SVG group.
+ * @private
+ */
+Blockly.Bubble.prototype.createDom_ = function(content, hasResize) {
+  /* Create the bubble.  Here's the markup that will be generated:
+  <g>
+    <g filter="url(#blocklyEmbossFilter837493)">
+      <path d="... Z" />
+      <rect class="blocklyDraggable" rx="8" ry="8" width="180" height="180"/>
+    </g>
+    <g transform="translate(165, 165)" class="blocklyResizeSE">
+      <polygon points="0,15 15,15 15,0"/>
+      <line class="blocklyResizeLine" x1="5" y1="14" x2="14" y2="5"/>
+      <line class="blocklyResizeLine" x1="10" y1="14" x2="14" y2="10"/>
+    </g>
+    [...content goes here...]
+  </g>
+  */
+  this.bubbleGroup_ = Blockly.createSvgElement('g', {}, null);
+  var filter =
+      {'filter': 'url(#' + this.workspace_.options.embossFilterId + ')'};
+  if (goog.userAgent.getUserAgentString().indexOf('JavaFX') != -1) {
+    // Multiple reports that JavaFX can't handle filters.  UserAgent:
+    // Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.44
+    //     (KHTML, like Gecko) JavaFX/8.0 Safari/537.44
+    // https://github.com/google/blockly/issues/99
+    filter = {};
+  }
+  var bubbleEmboss = Blockly.createSvgElement('g',
+      filter, this.bubbleGroup_);
+  this.bubbleArrow_ = Blockly.createSvgElement('path', {}, bubbleEmboss);
+  this.bubbleBack_ = Blockly.createSvgElement('rect',
+      {'class': 'blocklyDraggable', 'x': 0, 'y': 0,
+      'rx': Blockly.Bubble.BORDER_WIDTH, 'ry': Blockly.Bubble.BORDER_WIDTH},
+      bubbleEmboss);
+  if (hasResize) {
+    this.resizeGroup_ = Blockly.createSvgElement('g',
+        {'class': this.workspace_.RTL ?
+                  'blocklyResizeSW' : 'blocklyResizeSE'},
+        this.bubbleGroup_);
+    var resizeSize = 2 * Blockly.Bubble.BORDER_WIDTH;
+    Blockly.createSvgElement('polygon',
+        {'points': '0,x x,x x,0'.replace(/x/g, resizeSize.toString())},
+        this.resizeGroup_);
+    Blockly.createSvgElement('line',
+        {'class': 'blocklyResizeLine',
+        'x1': resizeSize / 3, 'y1': resizeSize - 1,
+        'x2': resizeSize - 1, 'y2': resizeSize / 3}, this.resizeGroup_);
+    Blockly.createSvgElement('line',
+        {'class': 'blocklyResizeLine',
+        'x1': resizeSize * 2 / 3, 'y1': resizeSize - 1,
+        'x2': resizeSize - 1, 'y2': resizeSize * 2 / 3}, this.resizeGroup_);
+  } else {
+    this.resizeGroup_ = null;
+  }
+  this.bubbleGroup_.appendChild(content);
+  return this.bubbleGroup_;
+};
+
+/**
+ * Handle a mouse-down on bubble's border.
+ * @param {!Event} e Mouse down event.
+ * @private
+ */
+Blockly.Bubble.prototype.bubbleMouseDown_ = function(e) {
+  this.promote_();
+  Blockly.Bubble.unbindDragEvents_();
+  if (Blockly.isRightButton(e)) {
+    // No right-click.
+    e.stopPropagation();
+    return;
+  } else if (Blockly.isTargetInput_(e)) {
+    // When focused on an HTML text input widget, don't trap any events.
+    return;
+  }
+  // Left-click (or middle click)
+  Blockly.Css.setCursor(Blockly.Css.Cursor.CLOSED);
+
+  this.workspace_.startDrag(e, new goog.math.Coordinate(
+      this.workspace_.RTL ? -this.relativeLeft_ : this.relativeLeft_,
+      this.relativeTop_));
+
+  Blockly.Bubble.onMouseUpWrapper_ = Blockly.bindEvent_(document,
+      'mouseup', this, Blockly.Bubble.unbindDragEvents_);
+  Blockly.Bubble.onMouseMoveWrapper_ = Blockly.bindEvent_(document,
+      'mousemove', this, this.bubbleMouseMove_);
+  Blockly.hideChaff();
+  // This event has been handled.  No need to bubble up to the document.
+  e.stopPropagation();
+};
+
+/**
+ * Drag this bubble to follow the mouse.
+ * @param {!Event} e Mouse move event.
+ * @private
+ */
+Blockly.Bubble.prototype.bubbleMouseMove_ = function(e) {
+  this.autoLayout_ = false;
+  var newXY = this.workspace_.moveDrag(e);
+  this.relativeLeft_ = this.workspace_.RTL ? -newXY.x : newXY.x;
+  this.relativeTop_ = newXY.y;
+  this.positionBubble_();
+  this.renderArrow_();
+};
+
+/**
+ * Handle a mouse-down on bubble's resize corner.
+ * @param {!Event} e Mouse down event.
+ * @private
+ */
+Blockly.Bubble.prototype.resizeMouseDown_ = function(e) {
+  this.promote_();
+  Blockly.Bubble.unbindDragEvents_();
+  if (Blockly.isRightButton(e)) {
+    // No right-click.
+    e.stopPropagation();
+    return;
+  }
+  // Left-click (or middle click)
+  Blockly.Css.setCursor(Blockly.Css.Cursor.CLOSED);
+
+  this.workspace_.startDrag(e, new goog.math.Coordinate(
+      this.workspace_.RTL ? -this.width_ : this.width_, this.height_));
+
+  Blockly.Bubble.onMouseUpWrapper_ = Blockly.bindEvent_(document,
+      'mouseup', this, Blockly.Bubble.unbindDragEvents_);
+  Blockly.Bubble.onMouseMoveWrapper_ = Blockly.bindEvent_(document,
+      'mousemove', this, this.resizeMouseMove_);
+  Blockly.hideChaff();
+  // This event has been handled.  No need to bubble up to the document.
+  e.stopPropagation();
+};
+
+/**
+ * Resize this bubble to follow the mouse.
+ * @param {!Event} e Mouse move event.
+ * @private
+ */
+Blockly.Bubble.prototype.resizeMouseMove_ = function(e) {
+  this.autoLayout_ = false;
+  var newXY = this.workspace_.moveDrag(e);
+  this.setBubbleSize(this.workspace_.RTL ? -newXY.x : newXY.x, newXY.y);
+  if (this.workspace_.RTL) {
+    // RTL requires the bubble to move its left edge.
+    this.positionBubble_();
+  }
+};
+
+/**
+ * Register a function as a callback event for when the bubble is resized.
+ * @param {!Function} callback The function to call on resize.
+ */
+Blockly.Bubble.prototype.registerResizeEvent = function(callback) {
+  this.resizeCallback_ = callback;
+};
+
+/**
+ * Move this bubble to the top of the stack.
+ * @private
+ */
+Blockly.Bubble.prototype.promote_ = function() {
+  var svgGroup = this.bubbleGroup_.parentNode;
+  svgGroup.appendChild(this.bubbleGroup_);
+};
+
+/**
+ * Notification that the anchor has moved.
+ * Update the arrow and bubble accordingly.
+ * @param {!goog.math.Coordinate} xy Absolute location.
+ */
+Blockly.Bubble.prototype.setAnchorLocation = function(xy) {
+  this.anchorXY_ = xy;
+  if (this.rendered_) {
+    this.positionBubble_();
+  }
+};
+
+/**
+ * Position the bubble so that it does not fall off-screen.
+ * @private
+ */
+Blockly.Bubble.prototype.layoutBubble_ = function() {
+  // Compute the preferred bubble location.
+  var relativeLeft = -this.width_ / 4;
+  var relativeTop = -this.height_ - Blockly.BlockSvg.MIN_BLOCK_Y;
+  // Prevent the bubble from being off-screen.
+  var metrics = this.workspace_.getMetrics();
+  metrics.viewWidth /= this.workspace_.scale;
+  metrics.viewLeft /= this.workspace_.scale;
+  var anchorX = this.anchorXY_.x;
+  if (this.workspace_.RTL) {
+    if (anchorX - metrics.viewLeft - relativeLeft - this.width_ <
+        Blockly.Scrollbar.scrollbarThickness) {
+      // Slide the bubble right until it is onscreen.
+      relativeLeft = anchorX - metrics.viewLeft - this.width_ -
+        Blockly.Scrollbar.scrollbarThickness;
+    } else if (anchorX - metrics.viewLeft - relativeLeft >
+               metrics.viewWidth) {
+      // Slide the bubble left until it is onscreen.
+      relativeLeft = anchorX - metrics.viewLeft - metrics.viewWidth;
+    }
+  } else {
+    if (anchorX + relativeLeft < metrics.viewLeft) {
+      // Slide the bubble right until it is onscreen.
+      relativeLeft = metrics.viewLeft - anchorX;
+    } else if (metrics.viewLeft + metrics.viewWidth <
+        anchorX + relativeLeft + this.width_ +
+        Blockly.BlockSvg.SEP_SPACE_X +
+        Blockly.Scrollbar.scrollbarThickness) {
+      // Slide the bubble left until it is onscreen.
+      relativeLeft = metrics.viewLeft + metrics.viewWidth - anchorX -
+          this.width_ - Blockly.Scrollbar.scrollbarThickness;
+    }
+  }
+  if (this.anchorXY_.y + relativeTop < metrics.viewTop) {
+    // Slide the bubble below the block.
+    var bBox = /** @type {SVGLocatable} */ (this.shape_).getBBox();
+    relativeTop = bBox.height;
+  }
+  this.relativeLeft_ = relativeLeft;
+  this.relativeTop_ = relativeTop;
+};
+
+/**
+ * Move the bubble to a location relative to the anchor's centre.
+ * @private
+ */
+Blockly.Bubble.prototype.positionBubble_ = function() {
+  var left = this.anchorXY_.x;
+  if (this.workspace_.RTL) {
+    left -= this.relativeLeft_ + this.width_;
+  } else {
+    left += this.relativeLeft_;
+  }
+  var top = this.relativeTop_ + this.anchorXY_.y;
+  this.bubbleGroup_.setAttribute('transform',
+      'translate(' + left + ',' + top + ')');
+};
+
+/**
+ * Get the dimensions of this bubble.
+ * @return {!Object} Object with width and height properties.
+ */
+Blockly.Bubble.prototype.getBubbleSize = function() {
+  return {width: this.width_, height: this.height_};
+};
+
+/**
+ * Size this bubble.
+ * @param {number} width Width of the bubble.
+ * @param {number} height Height of the bubble.
+ */
+Blockly.Bubble.prototype.setBubbleSize = function(width, height) {
+  var doubleBorderWidth = 2 * Blockly.Bubble.BORDER_WIDTH;
+  // Minimum size of a bubble.
+  width = Math.max(width, doubleBorderWidth + 45);
+  height = Math.max(height, doubleBorderWidth + 20);
+  this.width_ = width;
+  this.height_ = height;
+  this.bubbleBack_.setAttribute('width', width);
+  this.bubbleBack_.setAttribute('height', height);
+  if (this.resizeGroup_) {
+    if (this.workspace_.RTL) {
+      // Mirror the resize group.
+      var resizeSize = 2 * Blockly.Bubble.BORDER_WIDTH;
+      this.resizeGroup_.setAttribute('transform', 'translate(' +
+          resizeSize + ',' + (height - doubleBorderWidth) + ') scale(-1 1)');
+    } else {
+      this.resizeGroup_.setAttribute('transform', 'translate(' +
+          (width - doubleBorderWidth) + ',' +
+          (height - doubleBorderWidth) + ')');
+    }
+  }
+  if (this.rendered_) {
+    if (this.autoLayout_) {
+      this.layoutBubble_();
+    }
+    this.positionBubble_();
+    this.renderArrow_();
+  }
+  // Allow the contents to resize.
+  if (this.resizeCallback_) {
+    this.resizeCallback_();
+  }
+};
+
+/**
+ * Draw the arrow between the bubble and the origin.
+ * @private
+ */
+Blockly.Bubble.prototype.renderArrow_ = function() {
+  var steps = [];
+  // Find the relative coordinates of the center of the bubble.
+  var relBubbleX = this.width_ / 2;
+  var relBubbleY = this.height_ / 2;
+  // Find the relative coordinates of the center of the anchor.
+  var relAnchorX = -this.relativeLeft_;
+  var relAnchorY = -this.relativeTop_;
+  if (relBubbleX == relAnchorX && relBubbleY == relAnchorY) {
+    // Null case.  Bubble is directly on top of the anchor.
+    // Short circuit this rather than wade through divide by zeros.
+    steps.push('M ' + relBubbleX + ',' + relBubbleY);
+  } else {
+    // Compute the angle of the arrow's line.
+    var rise = relAnchorY - relBubbleY;
+    var run = relAnchorX - relBubbleX;
+    if (this.workspace_.RTL) {
+      run *= -1;
+    }
+    var hypotenuse = Math.sqrt(rise * rise + run * run);
+    var angle = Math.acos(run / hypotenuse);
+    if (rise < 0) {
+      angle = 2 * Math.PI - angle;
+    }
+    // Compute a line perpendicular to the arrow.
+    var rightAngle = angle + Math.PI / 2;
+    if (rightAngle > Math.PI * 2) {
+      rightAngle -= Math.PI * 2;
+    }
+    var rightRise = Math.sin(rightAngle);
+    var rightRun = Math.cos(rightAngle);
+
+    // Calculate the thickness of the base of the arrow.
+    var bubbleSize = this.getBubbleSize();
+    var thickness = (bubbleSize.width + bubbleSize.height) /
+                    Blockly.Bubble.ARROW_THICKNESS;
+    thickness = Math.min(thickness, bubbleSize.width, bubbleSize.height) / 2;
+
+    // Back the tip of the arrow off of the anchor.
+    var backoffRatio = 1 - Blockly.Bubble.ANCHOR_RADIUS / hypotenuse;
+    relAnchorX = relBubbleX + backoffRatio * run;
+    relAnchorY = relBubbleY + backoffRatio * rise;
+
+    // Coordinates for the base of the arrow.
+    var baseX1 = relBubbleX + thickness * rightRun;
+    var baseY1 = relBubbleY + thickness * rightRise;
+    var baseX2 = relBubbleX - thickness * rightRun;
+    var baseY2 = relBubbleY - thickness * rightRise;
+
+    // Distortion to curve the arrow.
+    var swirlAngle = angle + this.arrow_radians_;
+    if (swirlAngle > Math.PI * 2) {
+      swirlAngle -= Math.PI * 2;
+    }
+    var swirlRise = Math.sin(swirlAngle) *
+        hypotenuse / Blockly.Bubble.ARROW_BEND;
+    var swirlRun = Math.cos(swirlAngle) *
+        hypotenuse / Blockly.Bubble.ARROW_BEND;
+
+    steps.push('M' + baseX1 + ',' + baseY1);
+    steps.push('C' + (baseX1 + swirlRun) + ',' + (baseY1 + swirlRise) +
+               ' ' + relAnchorX + ',' + relAnchorY +
+               ' ' + relAnchorX + ',' + relAnchorY);
+    steps.push('C' + relAnchorX + ',' + relAnchorY +
+               ' ' + (baseX2 + swirlRun) + ',' + (baseY2 + swirlRise) +
+               ' ' + baseX2 + ',' + baseY2);
+  }
+  steps.push('z');
+  this.bubbleArrow_.setAttribute('d', steps.join(' '));
+};
+
+/**
+ * Change the colour of a bubble.
+ * @param {string} hexColour Hex code of colour.
+ */
+Blockly.Bubble.prototype.setColour = function(hexColour) {
+  this.bubbleBack_.setAttribute('fill', hexColour);
+  this.bubbleArrow_.setAttribute('fill', hexColour);
+};
+
+/**
+ * Dispose of this bubble.
+ */
+Blockly.Bubble.prototype.dispose = function() {
+  Blockly.Bubble.unbindDragEvents_();
+  // Dispose of and unlink the bubble.
+  goog.dom.removeNode(this.bubbleGroup_);
+  this.bubbleGroup_ = null;
+  this.bubbleArrow_ = null;
+  this.bubbleBack_ = null;
+  this.resizeGroup_ = null;
+  this.workspace_ = null;
+  this.content_ = null;
+  this.shape_ = null;
+};
diff --git a/blockly/core/comment.js b/blockly/core/comment.js
new file mode 100644
index 0000000..2121530
--- /dev/null
+++ b/blockly/core/comment.js
@@ -0,0 +1,278 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2011 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Object representing a code comment.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.Comment');
+
+goog.require('Blockly.Bubble');
+goog.require('Blockly.Icon');
+goog.require('goog.userAgent');
+
+
+/**
+ * Class for a comment.
+ * @param {!Blockly.Block} block The block associated with this comment.
+ * @extends {Blockly.Icon}
+ * @constructor
+ */
+Blockly.Comment = function(block) {
+  Blockly.Comment.superClass_.constructor.call(this, block);
+  this.createIcon();
+};
+goog.inherits(Blockly.Comment, Blockly.Icon);
+
+/**
+ * Comment text (if bubble is not visible).
+ * @private
+ */
+Blockly.Comment.prototype.text_ = '';
+
+/**
+ * Width of bubble.
+ * @private
+ */
+Blockly.Comment.prototype.width_ = 160;
+
+/**
+ * Height of bubble.
+ * @private
+ */
+Blockly.Comment.prototype.height_ = 80;
+
+/**
+ * Draw the comment icon.
+ * @param {!Element} group The icon group.
+ * @private
+ */
+Blockly.Comment.prototype.drawIcon_ = function(group) {
+  // Circle.
+  Blockly.createSvgElement('circle',
+      {'class': 'blocklyIconShape', 'r': '8', 'cx': '8', 'cy': '8'},
+       group);
+  // Can't use a real '?' text character since different browsers and operating
+  // systems render it differently.
+  // Body of question mark.
+  Blockly.createSvgElement('path',
+      {'class': 'blocklyIconSymbol',
+       'd': 'm6.8,10h2c0.003,-0.617 0.271,-0.962 0.633,-1.266 2.875,-2.405 0.607,-5.534 -3.765,-3.874v1.7c3.12,-1.657 3.698,0.118 2.336,1.25 -1.201,0.998 -1.201,1.528 -1.204,2.19z'},
+       group);
+  // Dot of question point.
+  Blockly.createSvgElement('rect',
+      {'class': 'blocklyIconSymbol',
+       'x': '6.8', 'y': '10.78', 'height': '2', 'width': '2'},
+       group);
+};
+
+/**
+ * Create the editor for the comment's bubble.
+ * @return {!Element} The top-level node of the editor.
+ * @private
+ */
+Blockly.Comment.prototype.createEditor_ = function() {
+  /* Create the editor.  Here's the markup that will be generated:
+    <foreignObject x="8" y="8" width="164" height="164">
+      <body xmlns="http://www.w3.org/1999/xhtml" class="blocklyMinimalBody">
+        <textarea xmlns="http://www.w3.org/1999/xhtml"
+            class="blocklyCommentTextarea"
+            style="height: 164px; width: 164px;"></textarea>
+      </body>
+    </foreignObject>
+  */
+  this.foreignObject_ = Blockly.createSvgElement('foreignObject',
+      {'x': Blockly.Bubble.BORDER_WIDTH, 'y': Blockly.Bubble.BORDER_WIDTH},
+      null);
+  var body = document.createElementNS(Blockly.HTML_NS, 'body');
+  body.setAttribute('xmlns', Blockly.HTML_NS);
+  body.className = 'blocklyMinimalBody';
+  var textarea = document.createElementNS(Blockly.HTML_NS, 'textarea');
+  textarea.className = 'blocklyCommentTextarea';
+  textarea.setAttribute('dir', this.block_.RTL ? 'RTL' : 'LTR');
+  body.appendChild(textarea);
+  this.textarea_ = textarea;
+  this.foreignObject_.appendChild(body);
+  Blockly.bindEvent_(textarea, 'mouseup', this, this.textareaFocus_);
+  // Don't zoom with mousewheel.
+  Blockly.bindEvent_(textarea, 'wheel', this, function(e) {
+    e.stopPropagation();
+  });
+  Blockly.bindEvent_(textarea, 'change', this, function(e) {
+    if (this.text_ != textarea.value) {
+      Blockly.Events.fire(new Blockly.Events.Change(
+        this.block_, 'comment', null, this.text_, textarea.value));
+      this.text_ = textarea.value;
+    }
+  });
+  setTimeout(function() {
+    textarea.focus();
+  }, 0);
+  return this.foreignObject_;
+};
+
+/**
+ * Add or remove editability of the comment.
+ * @override
+ */
+Blockly.Comment.prototype.updateEditable = function() {
+  if (this.isVisible()) {
+    // Toggling visibility will force a rerendering.
+    this.setVisible(false);
+    this.setVisible(true);
+  }
+  // Allow the icon to update.
+  Blockly.Icon.prototype.updateEditable.call(this);
+};
+
+/**
+ * Callback function triggered when the bubble has resized.
+ * Resize the text area accordingly.
+ * @private
+ */
+Blockly.Comment.prototype.resizeBubble_ = function() {
+  if (this.isVisible()) {
+    var size = this.bubble_.getBubbleSize();
+    var doubleBorderWidth = 2 * Blockly.Bubble.BORDER_WIDTH;
+    this.foreignObject_.setAttribute('width', size.width - doubleBorderWidth);
+    this.foreignObject_.setAttribute('height', size.height - doubleBorderWidth);
+    this.textarea_.style.width = (size.width - doubleBorderWidth - 4) + 'px';
+    this.textarea_.style.height = (size.height - doubleBorderWidth - 4) + 'px';
+  }
+};
+
+/**
+ * Show or hide the comment bubble.
+ * @param {boolean} visible True if the bubble should be visible.
+ */
+Blockly.Comment.prototype.setVisible = function(visible) {
+  if (visible == this.isVisible()) {
+    // No change.
+    return;
+  }
+  Blockly.Events.fire(
+      new Blockly.Events.Ui(this.block_, 'commentOpen', !visible, visible));
+  if ((!this.block_.isEditable() && !this.textarea_) || goog.userAgent.IE) {
+    // Steal the code from warnings to make an uneditable text bubble.
+    // MSIE does not support foreignobject; textareas are impossible.
+    // http://msdn.microsoft.com/en-us/library/hh834675%28v=vs.85%29.aspx
+    // Always treat comments in IE as uneditable.
+    Blockly.Warning.prototype.setVisible.call(this, visible);
+    return;
+  }
+  // Save the bubble stats before the visibility switch.
+  var text = this.getText();
+  var size = this.getBubbleSize();
+  if (visible) {
+    // Create the bubble.
+    this.bubble_ = new Blockly.Bubble(
+        /** @type {!Blockly.WorkspaceSvg} */ (this.block_.workspace),
+        this.createEditor_(), this.block_.svgPath_,
+        this.iconXY_, this.width_, this.height_);
+    this.bubble_.registerResizeEvent(this.resizeBubble_.bind(this));
+    this.updateColour();
+  } else {
+    // Dispose of the bubble.
+    this.bubble_.dispose();
+    this.bubble_ = null;
+    this.textarea_ = null;
+    this.foreignObject_ = null;
+  }
+  // Restore the bubble stats after the visibility switch.
+  this.setText(text);
+  this.setBubbleSize(size.width, size.height);
+};
+
+/**
+ * Bring the comment to the top of the stack when clicked on.
+ * @param {!Event} e Mouse up event.
+ * @private
+ */
+Blockly.Comment.prototype.textareaFocus_ = function(e) {
+  // Ideally this would be hooked to the focus event for the comment.
+  // However doing so in Firefox swallows the cursor for unknown reasons.
+  // So this is hooked to mouseup instead.  No big deal.
+  this.bubble_.promote_();
+  // Since the act of moving this node within the DOM causes a loss of focus,
+  // we need to reapply the focus.
+  this.textarea_.focus();
+};
+
+/**
+ * Get the dimensions of this comment's bubble.
+ * @return {!Object} Object with width and height properties.
+ */
+Blockly.Comment.prototype.getBubbleSize = function() {
+  if (this.isVisible()) {
+    return this.bubble_.getBubbleSize();
+  } else {
+    return {width: this.width_, height: this.height_};
+  }
+};
+
+/**
+ * Size this comment's bubble.
+ * @param {number} width Width of the bubble.
+ * @param {number} height Height of the bubble.
+ */
+Blockly.Comment.prototype.setBubbleSize = function(width, height) {
+  if (this.textarea_) {
+    this.bubble_.setBubbleSize(width, height);
+  } else {
+    this.width_ = width;
+    this.height_ = height;
+  }
+};
+
+/**
+ * Returns this comment's text.
+ * @return {string} Comment text.
+ */
+Blockly.Comment.prototype.getText = function() {
+  return this.textarea_ ? this.textarea_.value : this.text_;
+};
+
+/**
+ * Set this comment's text.
+ * @param {string} text Comment text.
+ */
+Blockly.Comment.prototype.setText = function(text) {
+  if (this.text_ != text) {
+    Blockly.Events.fire(new Blockly.Events.Change(
+      this.block_, 'comment', null, this.text_, text));
+    this.text_ = text;
+  }
+  if (this.textarea_) {
+    this.textarea_.value = text;
+  }
+};
+
+/**
+ * Dispose of this comment.
+ */
+Blockly.Comment.prototype.dispose = function() {
+  if (Blockly.Events.isEnabled()) {
+    this.setText('');  // Fire event to delete comment.
+  }
+  this.block_.comment = null;
+  Blockly.Icon.prototype.dispose.call(this);
+};
diff --git a/blockly/core/connection.js b/blockly/core/connection.js
new file mode 100644
index 0000000..3b8c82a
--- /dev/null
+++ b/blockly/core/connection.js
@@ -0,0 +1,615 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2011 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Components for creating connections between blocks.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.Connection');
+
+goog.require('goog.asserts');
+goog.require('goog.dom');
+
+
+/**
+ * Class for a connection between blocks.
+ * @param {!Blockly.Block} source The block establishing this connection.
+ * @param {number} type The type of the connection.
+ * @constructor
+ */
+Blockly.Connection = function(source, type) {
+  /**
+   * @type {!Blockly.Block}
+   * @private
+   */
+  this.sourceBlock_ = source;
+  /** @type {number} */
+  this.type = type;
+  // Shortcut for the databases for this connection's workspace.
+  if (source.workspace.connectionDBList) {
+    this.db_ = source.workspace.connectionDBList[type];
+    this.dbOpposite_ =
+        source.workspace.connectionDBList[Blockly.OPPOSITE_TYPE[type]];
+    this.hidden_ = !this.db_;
+  }
+};
+
+/**
+ * Constants for checking whether two connections are compatible.
+ */
+Blockly.Connection.CAN_CONNECT = 0;
+Blockly.Connection.REASON_SELF_CONNECTION = 1;
+Blockly.Connection.REASON_WRONG_TYPE = 2;
+Blockly.Connection.REASON_TARGET_NULL = 3;
+Blockly.Connection.REASON_CHECKS_FAILED = 4;
+Blockly.Connection.REASON_DIFFERENT_WORKSPACES = 5;
+Blockly.Connection.REASON_SHADOW_PARENT = 6;
+
+/**
+ * Connection this connection connects to.  Null if not connected.
+ * @type {Blockly.Connection}
+ */
+Blockly.Connection.prototype.targetConnection = null;
+
+/**
+ * List of compatible value types.  Null if all types are compatible.
+ * @type {Array}
+ * @private
+ */
+Blockly.Connection.prototype.check_ = null;
+
+/**
+ * DOM representation of a shadow block, or null if none.
+ * @type {Element}
+ * @private
+ */
+Blockly.Connection.prototype.shadowDom_ = null;
+
+/**
+ * Horizontal location of this connection.
+ * @type {number}
+ * @private
+ */
+Blockly.Connection.prototype.x_ = 0;
+
+/**
+ * Vertical location of this connection.
+ * @type {number}
+ * @private
+ */
+Blockly.Connection.prototype.y_ = 0;
+
+/**
+ * Has this connection been added to the connection database?
+ * @type {boolean}
+ * @private
+ */
+Blockly.Connection.prototype.inDB_ = false;
+
+/**
+ * Connection database for connections of this type on the current workspace.
+ * @type {Blockly.ConnectionDB}
+ * @private
+ */
+Blockly.Connection.prototype.db_ = null;
+
+/**
+ * Connection database for connections compatible with this type on the
+ * current workspace.
+ * @type {Blockly.ConnectionDB}
+ * @private
+ */
+Blockly.Connection.prototype.dbOpposite_ = null;
+
+/**
+ * Whether this connections is hidden (not tracked in a database) or not.
+ * @type {boolean}
+ * @private
+ */
+Blockly.Connection.prototype.hidden_ = null;
+
+/**
+ * Connect two connections together.  This is the connection on the superior
+ * block.
+ * @param {!Blockly.Connection} childConnection Connection on inferior block.
+ * @private
+ */
+Blockly.Connection.prototype.connect_ = function(childConnection) {
+  var parentConnection = this;
+  var parentBlock = parentConnection.getSourceBlock();
+  var childBlock = childConnection.getSourceBlock();
+  // Disconnect any existing parent on the child connection.
+  if (childConnection.isConnected()) {
+    childConnection.disconnect();
+  }
+  if (parentConnection.isConnected()) {
+    // Other connection is already connected to something.
+    // Disconnect it and reattach it or bump it as needed.
+    var orphanBlock = parentConnection.targetBlock();
+    var shadowDom = parentConnection.getShadowDom();
+    // Temporarily set the shadow DOM to null so it does not respawn.
+    parentConnection.setShadowDom(null);
+    // Displaced shadow blocks dissolve rather than reattaching or bumping.
+    if (orphanBlock.isShadow()) {
+      // Save the shadow block so that field values are preserved.
+      shadowDom = Blockly.Xml.blockToDom(orphanBlock);
+      orphanBlock.dispose();
+      orphanBlock = null;
+    } else if (parentConnection.type == Blockly.INPUT_VALUE) {
+      // Value connections.
+      // If female block is already connected, disconnect and bump the male.
+      if (!orphanBlock.outputConnection) {
+        throw 'Orphan block does not have an output connection.';
+      }
+      // Attempt to reattach the orphan at the end of the newly inserted
+      // block.  Since this block may be a row, walk down to the end
+      // or to the first (and only) shadow block.
+      var connection = Blockly.Connection.lastConnectionInRow_(
+          childBlock, orphanBlock);
+      if (connection) {
+        orphanBlock.outputConnection.connect(connection);
+        orphanBlock = null;
+      }
+    } else if (parentConnection.type == Blockly.NEXT_STATEMENT) {
+      // Statement connections.
+      // Statement blocks may be inserted into the middle of a stack.
+      // Split the stack.
+      if (!orphanBlock.previousConnection) {
+        throw 'Orphan block does not have a previous connection.';
+      }
+      // Attempt to reattach the orphan at the bottom of the newly inserted
+      // block.  Since this block may be a stack, walk down to the end.
+      var newBlock = childBlock;
+      while (newBlock.nextConnection) {
+        var nextBlock = newBlock.getNextBlock();
+        if (nextBlock && !nextBlock.isShadow()) {
+          newBlock = nextBlock;
+        } else {
+          if (orphanBlock.previousConnection.checkType_(
+              newBlock.nextConnection)) {
+            newBlock.nextConnection.connect(orphanBlock.previousConnection);
+            orphanBlock = null;
+          }
+          break;
+        }
+      }
+    }
+    if (orphanBlock) {
+      // Unable to reattach orphan.
+      parentConnection.disconnect();
+      if (Blockly.Events.recordUndo) {
+        // Bump it off to the side after a moment.
+        var group = Blockly.Events.getGroup();
+        setTimeout(function() {
+          // Verify orphan hasn't been deleted or reconnected (user on meth).
+          if (orphanBlock.workspace && !orphanBlock.getParent()) {
+            Blockly.Events.setGroup(group);
+            if (orphanBlock.outputConnection) {
+              orphanBlock.outputConnection.bumpAwayFrom_(parentConnection);
+            } else if (orphanBlock.previousConnection) {
+              orphanBlock.previousConnection.bumpAwayFrom_(parentConnection);
+            }
+            Blockly.Events.setGroup(false);
+          }
+        }, Blockly.BUMP_DELAY);
+      }
+    }
+    // Restore the shadow DOM.
+    parentConnection.setShadowDom(shadowDom);
+  }
+
+  var event;
+  if (Blockly.Events.isEnabled()) {
+    event = new Blockly.Events.Move(childBlock);
+  }
+  // Establish the connections.
+  Blockly.Connection.connectReciprocally_(parentConnection, childConnection);
+  // Demote the inferior block so that one is a child of the superior one.
+  childBlock.setParent(parentBlock);
+  if (event) {
+    event.recordNew();
+    Blockly.Events.fire(event);
+  }
+};
+
+/**
+ * Sever all links to this connection (not including from the source object).
+ */
+Blockly.Connection.prototype.dispose = function() {
+  if (this.isConnected()) {
+    throw 'Disconnect connection before disposing of it.';
+  }
+  if (this.inDB_) {
+    this.db_.removeConnection_(this);
+  }
+  if (Blockly.highlightedConnection_ == this) {
+    Blockly.highlightedConnection_ = null;
+  }
+  if (Blockly.localConnection_ == this) {
+    Blockly.localConnection_ = null;
+  }
+  this.db_ = null;
+  this.dbOpposite_ = null;
+};
+
+/**
+ * Get the source block for this connection.
+ * @return {Blockly.Block} The source block, or null if there is none.
+ */
+Blockly.Connection.prototype.getSourceBlock = function() {
+  return this.sourceBlock_;
+};
+
+/**
+ * Does the connection belong to a superior block (higher in the source stack)?
+ * @return {boolean} True if connection faces down or right.
+ */
+Blockly.Connection.prototype.isSuperior = function() {
+  return this.type == Blockly.INPUT_VALUE ||
+      this.type == Blockly.NEXT_STATEMENT;
+};
+
+/**
+ * Is the connection connected?
+ * @return {boolean} True if connection is connected to another connection.
+ */
+Blockly.Connection.prototype.isConnected = function() {
+  return !!this.targetConnection;
+};
+
+/**
+ * Checks whether the current connection can connect with the target
+ * connection.
+ * @param {Blockly.Connection} target Connection to check compatibility with.
+ * @return {number} Blockly.Connection.CAN_CONNECT if the connection is legal,
+ *    an error code otherwise.
+ * @private
+ */
+Blockly.Connection.prototype.canConnectWithReason_ = function(target) {
+  if (!target) {
+    return Blockly.Connection.REASON_TARGET_NULL;
+  }
+  if (this.isSuperior()) {
+    var blockA = this.sourceBlock_;
+    var blockB = target.getSourceBlock();
+  } else {
+    var blockB = this.sourceBlock_;
+    var blockA = target.getSourceBlock();
+  }
+  if (blockA && blockA == blockB) {
+    return Blockly.Connection.REASON_SELF_CONNECTION;
+  } else if (target.type != Blockly.OPPOSITE_TYPE[this.type]) {
+    return Blockly.Connection.REASON_WRONG_TYPE;
+  } else if (blockA && blockB && blockA.workspace !== blockB.workspace) {
+    return Blockly.Connection.REASON_DIFFERENT_WORKSPACES;
+  } else if (!this.checkType_(target)) {
+    return Blockly.Connection.REASON_CHECKS_FAILED;
+  } else if (blockA.isShadow() && !blockB.isShadow()) {
+    return Blockly.Connection.REASON_SHADOW_PARENT;
+  }
+  return Blockly.Connection.CAN_CONNECT;
+};
+
+/**
+ * Checks whether the current connection and target connection are compatible
+ * and throws an exception if they are not.
+ * @param {Blockly.Connection} target The connection to check compatibility
+ *    with.
+ * @private
+ */
+Blockly.Connection.prototype.checkConnection_ = function(target) {
+  switch (this.canConnectWithReason_(target)) {
+    case Blockly.Connection.CAN_CONNECT:
+      break;
+    case Blockly.Connection.REASON_SELF_CONNECTION:
+      throw 'Attempted to connect a block to itself.';
+    case Blockly.Connection.REASON_DIFFERENT_WORKSPACES:
+      // Usually this means one block has been deleted.
+      throw 'Blocks not on same workspace.';
+    case Blockly.Connection.REASON_WRONG_TYPE:
+      throw 'Attempt to connect incompatible types.';
+    case Blockly.Connection.REASON_TARGET_NULL:
+      throw 'Target connection is null.';
+    case Blockly.Connection.REASON_CHECKS_FAILED:
+      throw 'Connection checks failed.';
+    case Blockly.Connection.REASON_SHADOW_PARENT:
+      throw 'Connecting non-shadow to shadow block.';
+    default:
+      throw 'Unknown connection failure: this should never happen!';
+  }
+};
+
+/**
+ * Check if the two connections can be dragged to connect to each other.
+ * @param {!Blockly.Connection} candidate A nearby connection to check.
+ * @return {boolean} True if the connection is allowed, false otherwise.
+ */
+Blockly.Connection.prototype.isConnectionAllowed = function(candidate) {
+  // Type checking.
+  var canConnect = this.canConnectWithReason_(candidate);
+  if (canConnect != Blockly.Connection.CAN_CONNECT) {
+    return false;
+  }
+
+  // Don't offer to connect an already connected left (male) value plug to
+  // an available right (female) value plug.  Don't offer to connect the
+  // bottom of a statement block to one that's already connected.
+  if (candidate.type == Blockly.OUTPUT_VALUE ||
+      candidate.type == Blockly.PREVIOUS_STATEMENT) {
+    if (candidate.isConnected() || this.isConnected()) {
+      return false;
+    }
+  }
+
+  // Offering to connect the left (male) of a value block to an already
+  // connected value pair is ok, we'll splice it in.
+  // However, don't offer to splice into an immovable block.
+  if (candidate.type == Blockly.INPUT_VALUE && candidate.isConnected() &&
+      !candidate.targetBlock().isMovable() &&
+      !candidate.targetBlock().isShadow()) {
+    return false;
+  }
+
+  // Don't let a block with no next connection bump other blocks out of the
+  // stack.  But covering up a shadow block or stack of shadow blocks is fine.
+  // Similarly, replacing a terminal statement with another terminal statement
+  // is allowed.
+  if (this.type == Blockly.PREVIOUS_STATEMENT &&
+      candidate.isConnected() &&
+      !this.sourceBlock_.nextConnection &&
+      !candidate.targetBlock().isShadow() &&
+      candidate.targetBlock().nextConnection) {
+    return false;
+  }
+
+  // Don't let blocks try to connect to themselves or ones they nest.
+  if (Blockly.draggingConnections_.indexOf(candidate) != -1) {
+    return false;
+  }
+
+  return true;
+};
+
+/**
+ * Connect this connection to another connection.
+ * @param {!Blockly.Connection} otherConnection Connection to connect to.
+ */
+Blockly.Connection.prototype.connect = function(otherConnection) {
+  if (this.targetConnection == otherConnection) {
+    // Already connected together.  NOP.
+    return;
+  }
+  this.checkConnection_(otherConnection);
+  // Determine which block is superior (higher in the source stack).
+  if (this.isSuperior()) {
+    // Superior block.
+    this.connect_(otherConnection);
+  } else {
+    // Inferior block.
+    otherConnection.connect_(this);
+  }
+};
+
+/**
+ * Update two connections to target each other.
+ * @param {Blockly.Connection} first The first connection to update.
+ * @param {Blockly.Connection} second The second conneciton to update.
+ * @private
+ */
+Blockly.Connection.connectReciprocally_ = function(first, second) {
+  goog.asserts.assert(first && second, 'Cannot connect null connections.');
+  first.targetConnection = second;
+  second.targetConnection = first;
+};
+
+/**
+ * Does the given block have one and only one connection point that will accept
+ * an orphaned block?
+ * @param {!Blockly.Block} block The superior block.
+ * @param {!Blockly.Block} orphanBlock The inferior block.
+ * @return {Blockly.Connection} The suitable connection point on 'block',
+ *     or null.
+ * @private
+ */
+Blockly.Connection.singleConnection_ = function(block, orphanBlock) {
+  var connection = false;
+  for (var i = 0; i < block.inputList.length; i++) {
+    var thisConnection = block.inputList[i].connection;
+    if (thisConnection && thisConnection.type == Blockly.INPUT_VALUE &&
+        orphanBlock.outputConnection.checkType_(thisConnection)) {
+      if (connection) {
+        return null;  // More than one connection.
+      }
+      connection = thisConnection;
+    }
+  }
+  return connection;
+};
+
+/**
+ * Walks down a row a blocks, at each stage checking if there are any
+ * connections that will accept the orphaned block.  If at any point there
+ * are zero or multiple eligible connections, returns null.  Otherwise
+ * returns the only input on the last block in the chain.
+ * Terminates early for shadow blocks.
+ * @param {!Blockly.Block} startBlock The block on which to start the search.
+ * @param {!Blockly.Block} orphanBlock The block that is looking for a home.
+ * @return {Blockly.Connection} The suitable connection point on the chain
+ *    of blocks, or null.
+ * @private
+ */
+Blockly.Connection.lastConnectionInRow_ = function(startBlock, orphanBlock) {
+  var newBlock = startBlock;
+  var connection;
+  while (connection = Blockly.Connection.singleConnection_(
+      /** @type {!Blockly.Block} */ (newBlock), orphanBlock)) {
+    // '=' is intentional in line above.
+    newBlock = connection.targetBlock();
+    if (!newBlock || newBlock.isShadow()) {
+      return connection;
+    }
+  }
+  return null;
+};
+
+/**
+ * Disconnect this connection.
+ */
+Blockly.Connection.prototype.disconnect = function() {
+  var otherConnection = this.targetConnection;
+  goog.asserts.assert(otherConnection, 'Source connection not connected.');
+  goog.asserts.assert(otherConnection.targetConnection == this,
+      'Target connection not connected to source connection.');
+
+  var parentBlock, childBlock, parentConnection;
+  if (this.isSuperior()) {
+    // Superior block.
+    parentBlock = this.sourceBlock_;
+    childBlock = otherConnection.getSourceBlock();
+    parentConnection = this;
+  } else {
+    // Inferior block.
+    parentBlock = otherConnection.getSourceBlock();
+    childBlock = this.sourceBlock_;
+    parentConnection = otherConnection;
+  }
+  this.disconnectInternal_(parentBlock, childBlock);
+  parentConnection.respawnShadow_();
+};
+
+/**
+ * Disconnect two blocks that are connected by this connection.
+ * @param {!Blockly.Block} parentBlock The superior block.
+ * @param {!Blockly.Block} childBlock The inferior block.
+ * @private
+ */
+Blockly.Connection.prototype.disconnectInternal_ = function(parentBlock,
+    childBlock) {
+  var event;
+  if (Blockly.Events.isEnabled()) {
+    event = new Blockly.Events.Move(childBlock);
+  }
+  var otherConnection = this.targetConnection;
+  otherConnection.targetConnection = null;
+  this.targetConnection = null;
+  childBlock.setParent(null);
+  if (event) {
+    event.recordNew();
+    Blockly.Events.fire(event);
+  }
+};
+
+/**
+ * Respawn the shadow block if there was one connected to the this connection.
+ * @private
+ */
+Blockly.Connection.prototype.respawnShadow_ = function() {
+  var parentBlock = this.getSourceBlock();
+  var shadow = this.getShadowDom();
+  if (parentBlock.workspace && shadow && Blockly.Events.recordUndo) {
+    var blockShadow =
+        Blockly.Xml.domToBlock(shadow, parentBlock.workspace);
+    if (blockShadow.outputConnection) {
+      this.connect(blockShadow.outputConnection);
+    } else if (blockShadow.previousConnection) {
+      this.connect(blockShadow.previousConnection);
+    } else {
+      throw 'Child block does not have output or previous statement.';
+    }
+  }
+};
+
+/**
+ * Returns the block that this connection connects to.
+ * @return {Blockly.Block} The connected block or null if none is connected.
+ */
+Blockly.Connection.prototype.targetBlock = function() {
+  if (this.isConnected()) {
+    return this.targetConnection.getSourceBlock();
+  }
+  return null;
+};
+
+/**
+ * Is this connection compatible with another connection with respect to the
+ * value type system.  E.g. square_root("Hello") is not compatible.
+ * @param {!Blockly.Connection} otherConnection Connection to compare against.
+ * @return {boolean} True if the connections share a type.
+ * @private
+ */
+Blockly.Connection.prototype.checkType_ = function(otherConnection) {
+  if (!this.check_ || !otherConnection.check_) {
+    // One or both sides are promiscuous enough that anything will fit.
+    return true;
+  }
+  // Find any intersection in the check lists.
+  for (var i = 0; i < this.check_.length; i++) {
+    if (otherConnection.check_.indexOf(this.check_[i]) != -1) {
+      return true;
+    }
+  }
+  // No intersection.
+  return false;
+};
+
+/**
+ * Change a connection's compatibility.
+ * @param {*} check Compatible value type or list of value types.
+ *     Null if all types are compatible.
+ * @return {!Blockly.Connection} The connection being modified
+ *     (to allow chaining).
+ */
+Blockly.Connection.prototype.setCheck = function(check) {
+  if (check) {
+    // Ensure that check is in an array.
+    if (!goog.isArray(check)) {
+      check = [check];
+    }
+    this.check_ = check;
+    // The new value type may not be compatible with the existing connection.
+    if (this.isConnected() && !this.checkType_(this.targetConnection)) {
+      var child = this.isSuperior() ? this.targetBlock() : this.sourceBlock_;
+      child.unplug();
+      // Bump away.
+      this.sourceBlock_.bumpNeighbours_();
+    }
+  } else {
+    this.check_ = null;
+  }
+  return this;
+};
+
+/**
+ * Change a connection's shadow block.
+ * @param {Element} shadow DOM representation of a block or null.
+ */
+Blockly.Connection.prototype.setShadowDom = function(shadow) {
+  this.shadowDom_ = shadow;
+};
+
+/**
+ * Return a connection's shadow block.
+ * @return {Element} shadow DOM representation of a block or null.
+ */
+Blockly.Connection.prototype.getShadowDom = function() {
+  return this.shadowDom_;
+};
diff --git a/blockly/core/connection_db.js b/blockly/core/connection_db.js
new file mode 100644
index 0000000..8b3c300
--- /dev/null
+++ b/blockly/core/connection_db.js
@@ -0,0 +1,301 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2011 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Components for managing connections between blocks.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.ConnectionDB');
+
+goog.require('Blockly.Connection');
+
+
+/**
+ * Database of connections.
+ * Connections are stored in order of their vertical component.  This way
+ * connections in an area may be looked up quickly using a binary search.
+ * @constructor
+ */
+Blockly.ConnectionDB = function() {
+};
+
+Blockly.ConnectionDB.prototype = new Array();
+/**
+ * Don't inherit the constructor from Array.
+ * @type {!Function}
+ */
+Blockly.ConnectionDB.constructor = Blockly.ConnectionDB;
+
+/**
+ * Add a connection to the database.  Must not already exist in DB.
+ * @param {!Blockly.Connection} connection The connection to be added.
+ */
+Blockly.ConnectionDB.prototype.addConnection = function(connection) {
+  if (connection.inDB_) {
+    throw 'Connection already in database.';
+  }
+  if (connection.getSourceBlock().isInFlyout) {
+    // Don't bother maintaining a database of connections in a flyout.
+    return;
+  }
+  var position = this.findPositionForConnection_(connection);
+  this.splice(position, 0, connection);
+  connection.inDB_ = true;
+};
+
+/**
+ * Find the given connection.
+ * Starts by doing a binary search to find the approximate location, then
+ *     linearly searches nearby for the exact connection.
+ * @param {!Blockly.Connection} conn The connection to find.
+ * @return {number} The index of the connection, or -1 if the connection was
+ *     not found.
+ */
+Blockly.ConnectionDB.prototype.findConnection = function(conn) {
+  if (!this.length) {
+    return -1;
+  }
+
+  var bestGuess = this.findPositionForConnection_(conn);
+  if (bestGuess >= this.length) {
+    // Not in list
+    return -1;
+  }
+
+  var yPos = conn.y_;
+  // Walk forward and back on the y axis looking for the connection.
+  var pointerMin = bestGuess;
+  var pointerMax = bestGuess;
+  while (pointerMin >= 0 && this[pointerMin].y_ == yPos) {
+    if (this[pointerMin] == conn) {
+      return pointerMin;
+    }
+    pointerMin--;
+  }
+
+  while (pointerMax < this.length && this[pointerMax].y_ == yPos) {
+    if (this[pointerMax] == conn) {
+      return pointerMax;
+    }
+    pointerMax++;
+  }
+  return -1;
+};
+
+/**
+ * Finds a candidate position for inserting this connection into the list.
+ * This will be in the correct y order but makes no guarantees about ordering in
+ *     the x axis.
+ * @param {!Blockly.Connection} connection The connection to insert.
+ * @return {number} The candidate index.
+ * @private
+ */
+Blockly.ConnectionDB.prototype.findPositionForConnection_ =
+    function(connection) {
+  /* eslint-disable indent */
+  if (!this.length) {
+    return 0;
+  }
+  var pointerMin = 0;
+  var pointerMax = this.length;
+  while (pointerMin < pointerMax) {
+    var pointerMid = Math.floor((pointerMin + pointerMax) / 2);
+    if (this[pointerMid].y_ < connection.y_) {
+      pointerMin = pointerMid + 1;
+    } else if (this[pointerMid].y_ > connection.y_) {
+      pointerMax = pointerMid;
+    } else {
+      pointerMin = pointerMid;
+      break;
+    }
+  }
+  return pointerMin;
+};  /* eslint-enable indent */
+
+/**
+ * Remove a connection from the database.  Must already exist in DB.
+ * @param {!Blockly.Connection} connection The connection to be removed.
+ * @private
+ */
+Blockly.ConnectionDB.prototype.removeConnection_ = function(connection) {
+  if (!connection.inDB_) {
+    throw 'Connection not in database.';
+  }
+  var removalIndex = this.findConnection(connection);
+  if (removalIndex == -1) {
+    throw 'Unable to find connection in connectionDB.';
+  }
+  connection.inDB_ = false;
+  this.splice(removalIndex, 1);
+};
+
+/**
+ * Find all nearby connections to the given connection.
+ * Type checking does not apply, since this function is used for bumping.
+ * @param {!Blockly.Connection} connection The connection whose neighbours
+ *     should be returned.
+ * @param {number} maxRadius The maximum radius to another connection.
+ * @return {!Array.<Blockly.Connection>} List of connections.
+ */
+Blockly.ConnectionDB.prototype.getNeighbours = function(connection, maxRadius) {
+  var db = this;
+  var currentX = connection.x_;
+  var currentY = connection.y_;
+
+  // Binary search to find the closest y location.
+  var pointerMin = 0;
+  var pointerMax = db.length - 2;
+  var pointerMid = pointerMax;
+  while (pointerMin < pointerMid) {
+    if (db[pointerMid].y_ < currentY) {
+      pointerMin = pointerMid;
+    } else {
+      pointerMax = pointerMid;
+    }
+    pointerMid = Math.floor((pointerMin + pointerMax) / 2);
+  }
+
+  var neighbours = [];
+  /**
+   * Computes if the current connection is within the allowed radius of another
+   * connection.
+   * This function is a closure and has access to outside variables.
+   * @param {number} yIndex The other connection's index in the database.
+   * @return {boolean} True if the current connection's vertical distance from
+   *     the other connection is less than the allowed radius.
+   */
+  function checkConnection_(yIndex) {
+    var dx = currentX - db[yIndex].x_;
+    var dy = currentY - db[yIndex].y_;
+    var r = Math.sqrt(dx * dx + dy * dy);
+    if (r <= maxRadius) {
+      neighbours.push(db[yIndex]);
+    }
+    return dy < maxRadius;
+  }
+
+  // Walk forward and back on the y axis looking for the closest x,y point.
+  pointerMin = pointerMid;
+  pointerMax = pointerMid;
+  if (db.length) {
+    while (pointerMin >= 0 && checkConnection_(pointerMin)) {
+      pointerMin--;
+    }
+    do {
+      pointerMax++;
+    } while (pointerMax < db.length && checkConnection_(pointerMax));
+  }
+
+  return neighbours;
+};
+
+
+/**
+ * Is the candidate connection close to the reference connection.
+ * Extremely fast; only looks at Y distance.
+ * @param {number} index Index in database of candidate connection.
+ * @param {number} baseY Reference connection's Y value.
+ * @param {number} maxRadius The maximum radius to another connection.
+ * @return {boolean} True if connection is in range.
+ * @private
+ */
+Blockly.ConnectionDB.prototype.isInYRange_ = function(index, baseY, maxRadius) {
+  return (Math.abs(this[index].y_ - baseY) <= maxRadius);
+};
+
+/**
+ * Find the closest compatible connection to this connection.
+ * @param {!Blockly.Connection} conn The connection searching for a compatible
+ *     mate.
+ * @param {number} maxRadius The maximum radius to another connection.
+ * @param {!goog.math.Coordinate} dxy Offset between this connection's location
+ *     in the database and the current location (as a result of dragging).
+ * @return {!{connection: ?Blockly.Connection, radius: number}} Contains two
+ *     properties:' connection' which is either another connection or null,
+ *     and 'radius' which is the distance.
+ */
+Blockly.ConnectionDB.prototype.searchForClosest = function(conn, maxRadius,
+    dxy) {
+  // Don't bother.
+  if (!this.length) {
+    return {connection: null, radius: maxRadius};
+  }
+
+  // Stash the values of x and y from before the drag.
+  var baseY = conn.y_;
+  var baseX = conn.x_;
+
+  conn.x_ = baseX + dxy.x;
+  conn.y_ = baseY + dxy.y;
+
+  // findPositionForConnection finds an index for insertion, which is always
+  // after any block with the same y index.  We want to search both forward
+  // and back, so search on both sides of the index.
+  var closestIndex = this.findPositionForConnection_(conn);
+
+  var bestConnection = null;
+  var bestRadius = maxRadius;
+  var temp;
+
+  // Walk forward and back on the y axis looking for the closest x,y point.
+  var pointerMin = closestIndex - 1;
+  while (pointerMin >= 0 && this.isInYRange_(pointerMin, conn.y_, maxRadius)) {
+    temp = this[pointerMin];
+    if (conn.isConnectionAllowed(temp, bestRadius)) {
+      bestConnection = temp;
+      bestRadius = temp.distanceFrom(conn);
+    }
+    pointerMin--;
+  }
+
+  var pointerMax = closestIndex;
+  while (pointerMax < this.length && this.isInYRange_(pointerMax, conn.y_,
+      maxRadius)) {
+    temp = this[pointerMax];
+    if (conn.isConnectionAllowed(temp, bestRadius)) {
+      bestConnection = temp;
+      bestRadius = temp.distanceFrom(conn);
+    }
+    pointerMax++;
+  }
+
+  // Reset the values of x and y.
+  conn.x_ = baseX;
+  conn.y_ = baseY;
+
+  // If there were no valid connections, bestConnection will be null.
+  return {connection: bestConnection, radius: bestRadius};
+};
+
+/**
+ * Initialize a set of connection DBs for a specified workspace.
+ * @param {!Blockly.Workspace} workspace The workspace this DB is for.
+ */
+Blockly.ConnectionDB.init = function(workspace) {
+  // Create four databases, one for each connection type.
+  var dbList = [];
+  dbList[Blockly.INPUT_VALUE] = new Blockly.ConnectionDB();
+  dbList[Blockly.OUTPUT_VALUE] = new Blockly.ConnectionDB();
+  dbList[Blockly.NEXT_STATEMENT] = new Blockly.ConnectionDB();
+  dbList[Blockly.PREVIOUS_STATEMENT] = new Blockly.ConnectionDB();
+  workspace.connectionDBList = dbList;
+};
diff --git a/blockly/core/constants.js b/blockly/core/constants.js
new file mode 100644
index 0000000..0f327e2
--- /dev/null
+++ b/blockly/core/constants.js
@@ -0,0 +1,202 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2016 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Blockly constants.
+ * @author fenichel@google.com (Rachel Fenichel)
+ */
+'use strict';
+
+goog.provide('Blockly.constants');
+
+
+/**
+ * Number of pixels the mouse must move before a drag starts.
+ */
+Blockly.DRAG_RADIUS = 5;
+
+/**
+ * Maximum misalignment between connections for them to snap together.
+ */
+Blockly.SNAP_RADIUS = 20;
+
+/**
+ * Delay in ms between trigger and bumping unconnected block out of alignment.
+ */
+Blockly.BUMP_DELAY = 250;
+
+/**
+ * Number of characters to truncate a collapsed block to.
+ */
+Blockly.COLLAPSE_CHARS = 30;
+
+/**
+ * Length in ms for a touch to become a long press.
+ */
+Blockly.LONGPRESS = 750;
+
+/**
+ * Prevent a sound from playing if another sound preceded it within this many
+ * miliseconds.
+ */
+Blockly.SOUND_LIMIT = 100;
+
+/**
+ * The richness of block colours, regardless of the hue.
+ * Must be in the range of 0 (inclusive) to 1 (exclusive).
+ */
+Blockly.HSV_SATURATION = 0.45;
+
+/**
+ * The intensity of block colours, regardless of the hue.
+ * Must be in the range of 0 (inclusive) to 1 (exclusive).
+ */
+Blockly.HSV_VALUE = 0.65;
+
+/**
+ * Sprited icons and images.
+ */
+Blockly.SPRITE = {
+  width: 96,
+  height: 124,
+  url: 'sprites.png'
+};
+
+// Constants below this point are not intended to be changed.
+
+/**
+ * Required name space for SVG elements.
+ * @const
+ */
+Blockly.SVG_NS = 'http://www.w3.org/2000/svg';
+
+/**
+ * Required name space for HTML elements.
+ * @const
+ */
+Blockly.HTML_NS = 'http://www.w3.org/1999/xhtml';
+
+/**
+ * ENUM for a right-facing value input.  E.g. 'set item to' or 'return'.
+ * @const
+ */
+Blockly.INPUT_VALUE = 1;
+
+/**
+ * ENUM for a left-facing value output.  E.g. 'random fraction'.
+ * @const
+ */
+Blockly.OUTPUT_VALUE = 2;
+
+/**
+ * ENUM for a down-facing block stack.  E.g. 'if-do' or 'else'.
+ * @const
+ */
+Blockly.NEXT_STATEMENT = 3;
+
+/**
+ * ENUM for an up-facing block stack.  E.g. 'break out of loop'.
+ * @const
+ */
+Blockly.PREVIOUS_STATEMENT = 4;
+
+/**
+ * ENUM for an dummy input.  Used to add field(s) with no input.
+ * @const
+ */
+Blockly.DUMMY_INPUT = 5;
+
+/**
+ * ENUM for left alignment.
+ * @const
+ */
+Blockly.ALIGN_LEFT = -1;
+
+/**
+ * ENUM for centre alignment.
+ * @const
+ */
+Blockly.ALIGN_CENTRE = 0;
+
+/**
+ * ENUM for right alignment.
+ * @const
+ */
+Blockly.ALIGN_RIGHT = 1;
+
+/**
+ * ENUM for no drag operation.
+ * @const
+ */
+Blockly.DRAG_NONE = 0;
+
+/**
+ * ENUM for inside the sticky DRAG_RADIUS.
+ * @const
+ */
+Blockly.DRAG_STICKY = 1;
+
+/**
+ * ENUM for inside the non-sticky DRAG_RADIUS, for differentiating between
+ * clicks and drags.
+ * @const
+ */
+Blockly.DRAG_BEGIN = 1;
+
+/**
+ * ENUM for freely draggable (outside the DRAG_RADIUS, if one applies).
+ * @const
+ */
+Blockly.DRAG_FREE = 2;
+
+/**
+ * Lookup table for determining the opposite type of a connection.
+ * @const
+ */
+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;
+
+
+/**
+ * ENUM for toolbox and flyout at top of screen.
+ * @const
+ */
+Blockly.TOOLBOX_AT_TOP = 0;
+
+/**
+ * ENUM for toolbox and flyout at bottom of screen.
+ * @const
+ */
+Blockly.TOOLBOX_AT_BOTTOM = 1;
+
+/**
+ * ENUM for toolbox and flyout at left of screen.
+ * @const
+ */
+Blockly.TOOLBOX_AT_LEFT = 2;
+
+/**
+ * ENUM for toolbox and flyout at right of screen.
+ * @const
+ */
+Blockly.TOOLBOX_AT_RIGHT = 3;
diff --git a/blockly/core/contextmenu.js b/blockly/core/contextmenu.js
new file mode 100644
index 0000000..462ad0b
--- /dev/null
+++ b/blockly/core/contextmenu.js
@@ -0,0 +1,148 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2011 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Functionality for the right-click context menus.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.ContextMenu');
+
+goog.require('goog.dom');
+goog.require('goog.events');
+goog.require('goog.style');
+goog.require('goog.ui.Menu');
+goog.require('goog.ui.MenuItem');
+
+
+/**
+ * Which block is the context menu attached to?
+ * @type {Blockly.Block}
+ */
+Blockly.ContextMenu.currentBlock = null;
+
+/**
+ * Construct the menu based on the list of options and show the menu.
+ * @param {!Event} e Mouse event.
+ * @param {!Array.<!Object>} options Array of menu options.
+ * @param {boolean} rtl True if RTL, false if LTR.
+ */
+Blockly.ContextMenu.show = function(e, options, rtl) {
+  Blockly.WidgetDiv.show(Blockly.ContextMenu, rtl, null);
+  if (!options.length) {
+    Blockly.ContextMenu.hide();
+    return;
+  }
+  /* Here's what one option object looks like:
+    {text: 'Make It So',
+     enabled: true,
+     callback: Blockly.MakeItSo}
+  */
+  var menu = new goog.ui.Menu();
+  menu.setRightToLeft(rtl);
+  for (var i = 0, option; option = options[i]; i++) {
+    var menuItem = new goog.ui.MenuItem(option.text);
+    menuItem.setRightToLeft(rtl);
+    menu.addChild(menuItem, true);
+    menuItem.setEnabled(option.enabled);
+    if (option.enabled) {
+      goog.events.listen(menuItem, goog.ui.Component.EventType.ACTION,
+                         option.callback);
+    }
+  }
+  goog.events.listen(menu, goog.ui.Component.EventType.ACTION,
+                     Blockly.ContextMenu.hide);
+  // Record windowSize and scrollOffset before adding menu.
+  var windowSize = goog.dom.getViewportSize();
+  var scrollOffset = goog.style.getViewportPageOffset(document);
+  var div = Blockly.WidgetDiv.DIV;
+  menu.render(div);
+  var menuDom = menu.getElement();
+  Blockly.addClass_(menuDom, 'blocklyContextMenu');
+  // Prevent system context menu when right-clicking a Blockly context menu.
+  Blockly.bindEvent_(menuDom, 'contextmenu', null, Blockly.noEvent);
+  // Record menuSize after adding menu.
+  var menuSize = goog.style.getSize(menuDom);
+
+  // Position the menu.
+  var x = e.clientX + scrollOffset.x;
+  var y = e.clientY + scrollOffset.y;
+  // Flip menu vertically if off the bottom.
+  if (e.clientY + menuSize.height >= windowSize.height) {
+    y -= menuSize.height;
+  }
+  // Flip menu horizontally if off the edge.
+  if (rtl) {
+    if (menuSize.width >= e.clientX) {
+      x += menuSize.width;
+    }
+  } else {
+    if (e.clientX + menuSize.width >= windowSize.width) {
+      x -= menuSize.width;
+    }
+  }
+  Blockly.WidgetDiv.position(x, y, windowSize, scrollOffset, rtl);
+
+  menu.setAllowAutoFocus(true);
+  // 1ms delay is required for focusing on context menus because some other
+  // mouse event is still waiting in the queue and clears focus.
+  setTimeout(function() {menuDom.focus();}, 1);
+  Blockly.ContextMenu.currentBlock = null;  // May be set by Blockly.Block.
+};
+
+/**
+ * Hide the context menu.
+ */
+Blockly.ContextMenu.hide = function() {
+  Blockly.WidgetDiv.hideIfOwner(Blockly.ContextMenu);
+  Blockly.ContextMenu.currentBlock = null;
+};
+
+/**
+ * Create a callback function that creates and configures a block,
+ *   then places the new block next to the original.
+ * @param {!Blockly.Block} block Original block.
+ * @param {!Element} xml XML representation of new block.
+ * @return {!Function} Function that creates a block.
+ */
+Blockly.ContextMenu.callbackFactory = function(block, xml) {
+  return function() {
+    Blockly.Events.disable();
+    try {
+      var newBlock = Blockly.Xml.domToBlock(xml, block.workspace);
+      // Move the new block next to the old block.
+      var xy = block.getRelativeToSurfaceXY();
+      if (block.RTL) {
+        xy.x -= Blockly.SNAP_RADIUS;
+      } else {
+        xy.x += Blockly.SNAP_RADIUS;
+      }
+      xy.y += Blockly.SNAP_RADIUS * 2;
+      newBlock.moveBy(xy.x, xy.y);
+    } finally {
+      Blockly.Events.enable();
+    }
+    if (Blockly.Events.isEnabled() && !newBlock.isShadow()) {
+      Blockly.Events.fire(new Blockly.Events.Create(newBlock));
+    }
+    newBlock.select();
+  };
+};
diff --git a/blockly/core/css.js b/blockly/core/css.js
new file mode 100644
index 0000000..c45ccc9
--- /dev/null
+++ b/blockly/core/css.js
@@ -0,0 +1,782 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2013 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Inject Blockly's CSS synchronously.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.Css');
+
+
+/**
+ * List of cursors.
+ * @enum {string}
+ */
+Blockly.Css.Cursor = {
+  OPEN: 'handopen',
+  CLOSED: 'handclosed',
+  DELETE: 'handdelete'
+};
+
+/**
+ * Current cursor (cached value).
+ * @type {string}
+ * @private
+ */
+Blockly.Css.currentCursor_ = '';
+
+/**
+ * Large stylesheet added by Blockly.Css.inject.
+ * @type {Element}
+ * @private
+ */
+Blockly.Css.styleSheet_ = null;
+
+/**
+ * Path to media directory, with any trailing slash removed.
+ * @type {string}
+ * @private
+ */
+Blockly.Css.mediaPath_ = '';
+
+/**
+ * Inject the CSS into the DOM.  This is preferable over using a regular CSS
+ * file since:
+ * a) It loads synchronously and doesn't force a redraw later.
+ * b) It speeds up loading by not blocking on a separate HTTP transfer.
+ * c) The CSS content may be made dynamic depending on init options.
+ * @param {boolean} hasCss If false, don't inject CSS
+ *     (providing CSS becomes the document's responsibility).
+ * @param {string} pathToMedia Path from page to the Blockly media directory.
+ */
+Blockly.Css.inject = function(hasCss, pathToMedia) {
+  // Only inject the CSS once.
+  if (Blockly.Css.styleSheet_) {
+    return;
+  }
+  // Placeholder for cursor rule.  Must be first rule (index 0).
+  var text = '.blocklyDraggable {}\n';
+  if (hasCss) {
+    text += Blockly.Css.CONTENT.join('\n');
+    if (Blockly.FieldDate) {
+      text += Blockly.FieldDate.CSS.join('\n');
+    }
+  }
+  // Strip off any trailing slash (either Unix or Windows).
+  Blockly.Css.mediaPath_ = pathToMedia.replace(/[\\\/]$/, '');
+  text = text.replace(/<<<PATH>>>/g, Blockly.Css.mediaPath_);
+  // Inject CSS tag.
+  var cssNode = document.createElement('style');
+  document.head.appendChild(cssNode);
+  var cssTextNode = document.createTextNode(text);
+  cssNode.appendChild(cssTextNode);
+  Blockly.Css.styleSheet_ = cssNode.sheet;
+  Blockly.Css.setCursor(Blockly.Css.Cursor.OPEN);
+};
+
+/**
+ * Set the cursor to be displayed when over something draggable.
+ * @param {Blockly.Css.Cursor} cursor Enum.
+ */
+Blockly.Css.setCursor = function(cursor) {
+  if (Blockly.Css.currentCursor_ == cursor) {
+    return;
+  }
+  Blockly.Css.currentCursor_ = cursor;
+  var url = 'url(' + Blockly.Css.mediaPath_ + '/' + cursor + '.cur), auto';
+  // There are potentially hundreds of draggable objects.  Changing their style
+  // properties individually is too slow, so change the CSS rule instead.
+  var rule = '.blocklyDraggable {\n  cursor: ' + url + ';\n}\n';
+  Blockly.Css.styleSheet_.deleteRule(0);
+  Blockly.Css.styleSheet_.insertRule(rule, 0);
+  // There is probably only one toolbox, so just change its style property.
+  var toolboxen = document.getElementsByClassName('blocklyToolboxDiv');
+  for (var i = 0, toolbox; toolbox = toolboxen[i]; i++) {
+    if (cursor == Blockly.Css.Cursor.DELETE) {
+      toolbox.style.cursor = url;
+    } else {
+      toolbox.style.cursor = '';
+    }
+  }
+  // Set cursor on the whole document, so that rapid movements
+  // don't result in cursor changing to an arrow momentarily.
+  var html = document.body.parentNode;
+  if (cursor == Blockly.Css.Cursor.OPEN) {
+    html.style.cursor = '';
+  } else {
+    html.style.cursor = url;
+  }
+};
+
+/**
+ * Array making up the CSS content for Blockly.
+ */
+Blockly.Css.CONTENT = [
+  '.blocklySvg {',
+    'background-color: #fff;',
+    'outline: none;',
+    'overflow: hidden;',  /* IE overflows by default. */
+    'display: block;', 
+  '}',
+
+  '.blocklyWidgetDiv {',
+    'display: none;',
+    'position: absolute;',
+    'z-index: 99999;', /* big value for bootstrap3 compatibility */
+  '}',
+
+  '.injectionDiv {',
+    'height: 100%;',
+    'position: relative;',
+  '}',
+
+  '.blocklyNonSelectable {',
+    'user-select: none;',
+    '-moz-user-select: none;',
+    '-webkit-user-select: none;',
+    '-ms-user-select: none;',
+  '}',
+
+  '.blocklyTooltipDiv {',
+    'background-color: #ffffc7;',
+    'border: 1px solid #ddc;',
+    'box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);',
+    'color: #000;',
+    'display: none;',
+    'font-family: sans-serif;',
+    'font-size: 9pt;',
+    'opacity: 0.9;',
+    'padding: 2px;',
+    'position: absolute;',
+    'z-index: 100000;', /* big value for bootstrap3 compatibility */
+  '}',
+
+  '.blocklyResizeSE {',
+    'cursor: se-resize;',
+    'fill: #aaa;',
+  '}',
+
+  '.blocklyResizeSW {',
+    'cursor: sw-resize;',
+    'fill: #aaa;',
+  '}',
+
+  '.blocklyResizeLine {',
+    'stroke: #888;',
+    'stroke-width: 1;',
+  '}',
+
+  '.blocklyHighlightedConnectionPath {',
+    'fill: none;',
+    'stroke: #fc3;',
+    'stroke-width: 4px;',
+  '}',
+
+  '.blocklyPathLight {',
+    'fill: none;',
+    'stroke-linecap: round;',
+    'stroke-width: 1;',
+  '}',
+
+  '.blocklySelected>.blocklyPath {',
+    'stroke: #fc3;',
+    'stroke-width: 3px;',
+  '}',
+
+  '.blocklySelected>.blocklyPathLight {',
+    'display: none;',
+  '}',
+
+  '.blocklyDragging>.blocklyPath,',
+  '.blocklyDragging>.blocklyPathLight {',
+    'fill-opacity: .8;',
+    'stroke-opacity: .8;',
+  '}',
+
+  '.blocklyDragging>.blocklyPathDark {',
+    'display: none;',
+  '}',
+
+  '.blocklyDisabled>.blocklyPath {',
+    'fill-opacity: .5;',
+    'stroke-opacity: .5;',
+  '}',
+
+  '.blocklyDisabled>.blocklyPathLight,',
+  '.blocklyDisabled>.blocklyPathDark {',
+    'display: none;',
+  '}',
+
+  '.blocklyText {',
+    'cursor: default;',
+    'fill: #fff;',
+    'font-family: sans-serif;',
+    'font-size: 11pt;',
+  '}',
+
+  '.blocklyNonEditableText>text {',
+    'pointer-events: none;',
+  '}',
+
+  '.blocklyNonEditableText>rect,',
+  '.blocklyEditableText>rect {',
+    'fill: #fff;',
+    'fill-opacity: .6;',
+  '}',
+
+  '.blocklyNonEditableText>text,',
+  '.blocklyEditableText>text {',
+    'fill: #000;',
+  '}',
+
+  '.blocklyEditableText:hover>rect {',
+    'stroke: #fff;',
+    'stroke-width: 2;',
+  '}',
+
+  '.blocklyBubbleText {',
+    'fill: #000;',
+  '}',
+
+  '.blocklyFlyoutButton {',
+    'fill: #888;',
+    'cursor: default',
+  '}',
+
+  '.blocklyFlyoutButton:hover {',
+    'fill: #ccc;',
+  '}',
+
+  /*
+    Don't allow users to select text.  It gets annoying when trying to
+    drag a block and selected text moves instead.
+  */
+  '.blocklySvg text {',
+    'user-select: none;',
+    '-moz-user-select: none;',
+    '-webkit-user-select: none;',
+    'cursor: inherit;',
+  '}',
+
+  '.blocklyHidden {',
+    'display: none;',
+  '}',
+
+  '.blocklyFieldDropdown:not(.blocklyHidden) {',
+    'display: block;',
+  '}',
+
+  '.blocklyIconGroup {',
+    'cursor: default;',
+  '}',
+
+  '.blocklyIconGroup:not(:hover),',
+  '.blocklyIconGroupReadonly {',
+    'opacity: .6;',
+  '}',
+
+  '.blocklyIconShape {',
+    'fill: #00f;',
+    'stroke: #fff;',
+    'stroke-width: 1px;',
+  '}',
+
+  '.blocklyIconSymbol {',
+    'fill: #fff;',
+  '}',
+
+  '.blocklyMinimalBody {',
+    'margin: 0;',
+    'padding: 0;',
+  '}',
+
+  '.blocklyCommentTextarea {',
+    'background-color: #ffc;',
+    'border: 0;',
+    'margin: 0;',
+    'padding: 2px;',
+    'resize: none;',
+  '}',
+
+  '.blocklyHtmlInput {',
+    'border: none;',
+    'border-radius: 4px;',
+    'font-family: sans-serif;',
+    'height: 100%;',
+    'margin: 0;',
+    'outline: none;',
+    'padding: 0 1px;',
+    'width: 100%',
+  '}',
+
+  '.blocklyMainBackground {',
+    'stroke-width: 1;',
+    'stroke: #c6c6c6;',  /* Equates to #ddd due to border being off-pixel. */
+  '}',
+
+  '.blocklyMutatorBackground {',
+    'fill: #fff;',
+    'stroke: #ddd;',
+    'stroke-width: 1;',
+  '}',
+
+  '.blocklyFlyoutBackground {',
+    'fill: #ddd;',
+    'fill-opacity: .8;',
+  '}',
+
+  '.blocklyScrollbarBackground {',
+    'opacity: 0;',
+  '}',
+
+  '.blocklyScrollbarHandle {',
+    'fill: #ccc;',
+  '}',
+
+  '.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,',
+  '.blocklyScrollbarHandle:hover {',
+    'fill: #bbb;',
+  '}',
+
+  '.blocklyZoom>image {',
+    'opacity: .4;',
+  '}',
+
+  '.blocklyZoom>image:hover {',
+    'opacity: .6;',
+  '}',
+
+  '.blocklyZoom>image:active {',
+    'opacity: .8;',
+  '}',
+
+  /* Darken flyout scrollbars due to being on a grey background. */
+  /* By contrast, workspace scrollbars are on a white background. */
+  '.blocklyFlyout .blocklyScrollbarHandle {',
+    'fill: #bbb;',
+  '}',
+
+  '.blocklyFlyout .blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,',
+  '.blocklyFlyout .blocklyScrollbarHandle:hover {',
+    'fill: #aaa;',
+  '}',
+
+  '.blocklyInvalidInput {',
+    'background: #faa;',
+  '}',
+
+  '.blocklyAngleCircle {',
+    'stroke: #444;',
+    'stroke-width: 1;',
+    'fill: #ddd;',
+    'fill-opacity: .8;',
+  '}',
+
+  '.blocklyAngleMarks {',
+    'stroke: #444;',
+    'stroke-width: 1;',
+  '}',
+
+  '.blocklyAngleGauge {',
+    'fill: #f88;',
+    'fill-opacity: .8;',
+  '}',
+
+  '.blocklyAngleLine {',
+    'stroke: #f00;',
+    'stroke-width: 2;',
+    'stroke-linecap: round;',
+  '}',
+
+  '.blocklyContextMenu {',
+    'border-radius: 4px;',
+  '}',
+
+  '.blocklyDropdownMenu {',
+    'padding: 0 !important;',
+  '}',
+
+  /* Override the default Closure URL. */
+  '.blocklyWidgetDiv .goog-option-selected .goog-menuitem-checkbox,',
+  '.blocklyWidgetDiv .goog-option-selected .goog-menuitem-icon {',
+    'background: url(<<<PATH>>>/sprites.png) no-repeat -48px -16px !important;',
+  '}',
+
+  /* Category tree in Toolbox. */
+  '.blocklyToolboxDiv {',
+    'background-color: #ddd;',
+    'overflow-x: visible;',
+    'overflow-y: auto;',
+    'position: absolute;',
+  '}',
+
+  '.blocklyTreeRoot {',
+    'padding: 4px 0;',
+  '}',
+
+  '.blocklyTreeRoot:focus {',
+    'outline: none;',
+  '}',
+
+  '.blocklyTreeRow {',
+    'height: 22px;',
+    'line-height: 22px;',
+    'margin-bottom: 3px;',
+    'padding-right: 8px;',
+    'white-space: nowrap;',
+  '}',
+
+  '.blocklyHorizontalTree {',
+    'float: left;',
+    'margin: 1px 5px 8px 0;',
+  '}',
+
+  '.blocklyHorizontalTreeRtl {',
+    'float: right;',
+    'margin: 1px 0 8px 5px;',
+  '}',
+
+  '.blocklyToolboxDiv[dir="RTL"] .blocklyTreeRow {',
+    'margin-left: 8px;',
+  '}',
+
+  '.blocklyTreeRow:not(.blocklyTreeSelected):hover {',
+    'background-color: #e4e4e4;',
+  '}',
+
+  '.blocklyTreeSeparator {',
+    'border-bottom: solid #e5e5e5 1px;',
+    'height: 0;',
+    'margin: 5px 0;',
+  '}',
+
+  '.blocklyTreeSeparatorHorizontal {',
+    'border-right: solid #e5e5e5 1px;',
+    'width: 0;',
+    'padding: 5px 0;',
+    'margin: 0 5px;',
+  '}',
+
+
+  '.blocklyTreeIcon {',
+    'background-image: url(<<<PATH>>>/sprites.png);',
+    'height: 16px;',
+    'vertical-align: middle;',
+    'width: 16px;',
+  '}',
+
+  '.blocklyTreeIconClosedLtr {',
+    'background-position: -32px -1px;',
+  '}',
+
+  '.blocklyTreeIconClosedRtl {',
+    'background-position: 0px -1px;',
+  '}',
+
+  '.blocklyTreeIconOpen {',
+    'background-position: -16px -1px;',
+  '}',
+
+  '.blocklyTreeSelected>.blocklyTreeIconClosedLtr {',
+    'background-position: -32px -17px;',
+  '}',
+
+  '.blocklyTreeSelected>.blocklyTreeIconClosedRtl {',
+    'background-position: 0px -17px;',
+  '}',
+
+  '.blocklyTreeSelected>.blocklyTreeIconOpen {',
+    'background-position: -16px -17px;',
+  '}',
+
+  '.blocklyTreeIconNone,',
+  '.blocklyTreeSelected>.blocklyTreeIconNone {',
+    'background-position: -48px -1px;',
+  '}',
+
+  '.blocklyTreeLabel {',
+    'cursor: default;',
+    'font-family: sans-serif;',
+    'font-size: 16px;',
+    'padding: 0 3px;',
+    'vertical-align: middle;',
+  '}',
+
+  '.blocklyTreeSelected .blocklyTreeLabel {',
+    'color: #fff;',
+  '}',
+
+  /* Copied from: goog/css/colorpicker-simplegrid.css */
+  /*
+   * Copyright 2007 The Closure Library Authors. All Rights Reserved.
+   *
+   * Use of this source code is governed by the Apache License, Version 2.0.
+   * See the COPYING file for details.
+   */
+
+  /* Author: pupius@google.com (Daniel Pupius) */
+
+  /*
+    Styles to make the colorpicker look like the old gmail color picker
+    NOTE: without CSS scoping this will override styles defined in palette.css
+  */
+  '.blocklyWidgetDiv .goog-palette {',
+    'outline: none;',
+    'cursor: default;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-palette-table {',
+    'border: 1px solid #666;',
+    'border-collapse: collapse;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-palette-cell {',
+    'height: 13px;',
+    'width: 15px;',
+    'margin: 0;',
+    'border: 0;',
+    'text-align: center;',
+    'vertical-align: middle;',
+    'border-right: 1px solid #666;',
+    'font-size: 1px;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-palette-colorswatch {',
+    'position: relative;',
+    'height: 13px;',
+    'width: 15px;',
+    'border: 1px solid #666;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-palette-cell-hover .goog-palette-colorswatch {',
+    'border: 1px solid #FFF;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-palette-cell-selected .goog-palette-colorswatch {',
+    'border: 1px solid #000;',
+    'color: #fff;',
+  '}',
+
+  /* Copied from: goog/css/menu.css */
+  /*
+   * Copyright 2009 The Closure Library Authors. All Rights Reserved.
+   *
+   * Use of this source code is governed by the Apache License, Version 2.0.
+   * See the COPYING file for details.
+   */
+
+  /**
+   * Standard styling for menus created by goog.ui.MenuRenderer.
+   *
+   * @author attila@google.com (Attila Bodis)
+   */
+
+  '.blocklyWidgetDiv .goog-menu {',
+    'background: #fff;',
+    'border-color: #ccc #666 #666 #ccc;',
+    'border-style: solid;',
+    'border-width: 1px;',
+    'cursor: default;',
+    'font: normal 13px Arial, sans-serif;',
+    'margin: 0;',
+    'outline: none;',
+    'padding: 4px 0;',
+    'position: absolute;',
+    'overflow-y: auto;',
+    'overflow-x: hidden;',
+    'max-height: 100%;',
+    'z-index: 20000;',  /* Arbitrary, but some apps depend on it... */
+  '}',
+
+  /* Copied from: goog/css/menuitem.css */
+  /*
+   * Copyright 2009 The Closure Library Authors. All Rights Reserved.
+   *
+   * Use of this source code is governed by the Apache License, Version 2.0.
+   * See the COPYING file for details.
+   */
+
+  /**
+   * Standard styling for menus created by goog.ui.MenuItemRenderer.
+   *
+   * @author attila@google.com (Attila Bodis)
+   */
+
+  /**
+   * State: resting.
+   *
+   * NOTE(mleibman,chrishenry):
+   * The RTL support in Closure is provided via two mechanisms -- "rtl" CSS
+   * classes and BiDi flipping done by the CSS compiler.  Closure supports RTL
+   * with or without the use of the CSS compiler.  In order for them not
+   * to conflict with each other, the "rtl" CSS classes need to have the #noflip
+   * annotation.  The non-rtl counterparts should ideally have them as well, but,
+   * since .goog-menuitem existed without .goog-menuitem-rtl for so long before
+   * being added, there is a risk of people having templates where they are not
+   * rendering the .goog-menuitem-rtl class when in RTL and instead rely solely
+   * on the BiDi flipping by the CSS compiler.  That's why we're not adding the
+   * #noflip to .goog-menuitem.
+   */
+  '.blocklyWidgetDiv .goog-menuitem {',
+    'color: #000;',
+    'font: normal 13px Arial, sans-serif;',
+    'list-style: none;',
+    'margin: 0;',
+     /* 28px on the left for icon or checkbox; 7em on the right for shortcut. */
+    'padding: 4px 7em 4px 28px;',
+    'white-space: nowrap;',
+  '}',
+
+  /* BiDi override for the resting state. */
+  /* #noflip */
+  '.blocklyWidgetDiv .goog-menuitem.goog-menuitem-rtl {',
+     /* Flip left/right padding for BiDi. */
+    'padding-left: 7em;',
+    'padding-right: 28px;',
+  '}',
+
+  /* If a menu doesn't have checkable items or items with icons, remove padding. */
+  '.blocklyWidgetDiv .goog-menu-nocheckbox .goog-menuitem,',
+  '.blocklyWidgetDiv .goog-menu-noicon .goog-menuitem {',
+    'padding-left: 12px;',
+  '}',
+
+  /*
+   * If a menu doesn't have items with shortcuts, leave just enough room for
+   * submenu arrows, if they are rendered.
+   */
+  '.blocklyWidgetDiv .goog-menu-noaccel .goog-menuitem {',
+    'padding-right: 20px;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-menuitem-content {',
+    'color: #000;',
+    'font: normal 13px Arial, sans-serif;',
+  '}',
+
+  /* State: disabled. */
+  '.blocklyWidgetDiv .goog-menuitem-disabled .goog-menuitem-accel,',
+  '.blocklyWidgetDiv .goog-menuitem-disabled .goog-menuitem-content {',
+    'color: #ccc !important;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-menuitem-disabled .goog-menuitem-icon {',
+    'opacity: 0.3;',
+    '-moz-opacity: 0.3;',
+    'filter: alpha(opacity=30);',
+  '}',
+
+  /* State: hover. */
+  '.blocklyWidgetDiv .goog-menuitem-highlight,',
+  '.blocklyWidgetDiv .goog-menuitem-hover {',
+    'background-color: #d6e9f8;',
+     /* Use an explicit top and bottom border so that the selection is visible',
+      * in high contrast mode. */
+    'border-color: #d6e9f8;',
+    'border-style: dotted;',
+    'border-width: 1px 0;',
+    'padding-bottom: 3px;',
+    'padding-top: 3px;',
+  '}',
+
+  /* State: selected/checked. */
+  '.blocklyWidgetDiv .goog-menuitem-checkbox,',
+  '.blocklyWidgetDiv .goog-menuitem-icon {',
+    'background-repeat: no-repeat;',
+    'height: 16px;',
+    'left: 6px;',
+    'position: absolute;',
+    'right: auto;',
+    'vertical-align: middle;',
+    'width: 16px;',
+  '}',
+
+  /* BiDi override for the selected/checked state. */
+  /* #noflip */
+  '.blocklyWidgetDiv .goog-menuitem-rtl .goog-menuitem-checkbox,',
+  '.blocklyWidgetDiv .goog-menuitem-rtl .goog-menuitem-icon {',
+     /* Flip left/right positioning. */
+    'left: auto;',
+    'right: 6px;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-option-selected .goog-menuitem-checkbox,',
+  '.blocklyWidgetDiv .goog-option-selected .goog-menuitem-icon {',
+     /* Client apps may override the URL at which they serve the sprite. */
+    'background: url(//ssl.gstatic.com/editor/editortoolbar.png) no-repeat -512px 0;',
+  '}',
+
+  /* Keyboard shortcut ("accelerator") style. */
+  '.blocklyWidgetDiv .goog-menuitem-accel {',
+    'color: #999;',
+     /* Keyboard shortcuts are untranslated; always left-to-right. */
+     /* #noflip */
+    'direction: ltr;',
+    'left: auto;',
+    'padding: 0 6px;',
+    'position: absolute;',
+    'right: 0;',
+    'text-align: right;',
+  '}',
+
+  /* BiDi override for shortcut style. */
+  /* #noflip */
+  '.blocklyWidgetDiv .goog-menuitem-rtl .goog-menuitem-accel {',
+     /* Flip left/right positioning and text alignment. */
+    'left: 0;',
+    'right: auto;',
+    'text-align: left;',
+  '}',
+
+  /* Mnemonic styles. */
+  '.blocklyWidgetDiv .goog-menuitem-mnemonic-hint {',
+    'text-decoration: underline;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-menuitem-mnemonic-separator {',
+    'color: #999;',
+    'font-size: 12px;',
+    'padding-left: 4px;',
+  '}',
+
+  /* Copied from: goog/css/menuseparator.css */
+  /*
+   * Copyright 2009 The Closure Library Authors. All Rights Reserved.
+   *
+   * Use of this source code is governed by the Apache License, Version 2.0.
+   * See the COPYING file for details.
+   */
+
+  /**
+   * Standard styling for menus created by goog.ui.MenuSeparatorRenderer.
+   *
+   * @author attila@google.com (Attila Bodis)
+   */
+
+  '.blocklyWidgetDiv .goog-menuseparator {',
+    'border-top: 1px solid #ccc;',
+    'margin: 4px 0;',
+    'padding: 0;',
+  '}',
+
+  ''
+];
diff --git a/blockly/core/events.js b/blockly/core/events.js
new file mode 100644
index 0000000..1d1e2b7
--- /dev/null
+++ b/blockly/core/events.js
@@ -0,0 +1,818 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2016 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Events fired as a result of actions in Blockly's editor.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.Events');
+
+goog.require('goog.math.Coordinate');
+
+
+/**
+ * Group ID for new events.  Grouped events are indivisible.
+ * @type {string}
+ * @private
+ */
+Blockly.Events.group_ = '';
+
+/**
+ * Sets whether events should be added to the undo stack.
+ * @type {boolean}
+ */
+Blockly.Events.recordUndo = true;
+
+/**
+ * Allow change events to be created and fired.
+ * @type {number}
+ * @private
+ */
+Blockly.Events.disabled_ = 0;
+
+/**
+ * Name of event that creates a block.
+ * @const
+ */
+Blockly.Events.CREATE = 'create';
+
+/**
+ * Name of event that deletes a block.
+ * @const
+ */
+Blockly.Events.DELETE = 'delete';
+
+/**
+ * Name of event that changes a block.
+ * @const
+ */
+Blockly.Events.CHANGE = 'change';
+
+/**
+ * Name of event that moves a block.
+ * @const
+ */
+Blockly.Events.MOVE = 'move';
+
+/**
+ * Name of event that records a UI change.
+ * @const
+ */
+Blockly.Events.UI = 'ui';
+
+/**
+ * List of events queued for firing.
+ * @private
+ */
+Blockly.Events.FIRE_QUEUE_ = [];
+
+/**
+ * Create a custom event and fire it.
+ * @param {!Blockly.Events.Abstract} event Custom data for event.
+ */
+Blockly.Events.fire = function(event) {
+  if (!Blockly.Events.isEnabled()) {
+    return;
+  }
+  if (!Blockly.Events.FIRE_QUEUE_.length) {
+    // First event added; schedule a firing of the event queue.
+    setTimeout(Blockly.Events.fireNow_, 0);
+  }
+  Blockly.Events.FIRE_QUEUE_.push(event);
+};
+
+/**
+ * Fire all queued events.
+ * @private
+ */
+Blockly.Events.fireNow_ = function() {
+  var queue = Blockly.Events.filter(Blockly.Events.FIRE_QUEUE_, true);
+  Blockly.Events.FIRE_QUEUE_.length = 0;
+  for (var i = 0, event; event = queue[i]; i++) {
+    var workspace = Blockly.Workspace.getById(event.workspaceId);
+    if (workspace) {
+      workspace.fireChangeListener(event);
+    }
+  }
+};
+
+/**
+ * Filter the queued events and merge duplicates.
+ * @param {!Array.<!Blockly.Events.Abstract>} queueIn Array of events.
+ * @param {boolean} forward True if forward (redo), false if backward (undo).
+ * @return {!Array.<!Blockly.Events.Abstract>} Array of filtered events.
+ */
+Blockly.Events.filter = function(queueIn, forward) {
+  var queue = goog.array.clone(queueIn);
+  if (!forward) {
+    // Undo is merged in reverse order.
+    queue.reverse();
+  }
+  // Merge duplicates.  O(n^2), but n should be very small.
+  for (var i = 0, event1; event1 = queue[i]; i++) {
+    for (var j = i + 1, event2; event2 = queue[j]; j++) {
+      if (event1.type == event2.type &&
+          event1.blockId == event2.blockId &&
+          event1.workspaceId == event2.workspaceId) {
+        if (event1.type == Blockly.Events.MOVE) {
+          // Merge move events.
+          event1.newParentId = event2.newParentId;
+          event1.newInputName = event2.newInputName;
+          event1.newCoordinate = event2.newCoordinate;
+          queue.splice(j, 1);
+          j--;
+        } else if (event1.type == Blockly.Events.CHANGE &&
+            event1.element == event2.element &&
+            event1.name == event2.name) {
+          // Merge change events.
+          event1.newValue = event2.newValue;
+          queue.splice(j, 1);
+          j--;
+        } else if (event1.type == Blockly.Events.UI &&
+            event2.element == 'click' &&
+            (event1.element == 'commentOpen' ||
+             event1.element == 'mutatorOpen' ||
+             event1.element == 'warningOpen')) {
+          // Merge change events.
+          event1.newValue = event2.newValue;
+          queue.splice(j, 1);
+          j--;
+        }
+      }
+    }
+  }
+  // Remove null events.
+  for (var i = queue.length - 1; i >= 0; i--) {
+    if (queue[i].isNull()) {
+      queue.splice(i, 1);
+    }
+  }
+  if (!forward) {
+    // Restore undo order.
+    queue.reverse();
+  }
+  // Move mutation events to the top of the queue.
+  // Intentionally skip first event.
+  for (var i = 1, event; event = queue[i]; i++) {
+    if (event.type == Blockly.Events.CHANGE &&
+        event.element == 'mutation') {
+      queue.unshift(queue.splice(i, 1)[0]);
+    }
+  }
+  return queue;
+};
+
+/**
+ * Modify pending undo events so that when they are fired they don't land
+ * in the undo stack.  Called by Blockly.Workspace.clearUndo.
+ */
+Blockly.Events.clearPendingUndo = function() {
+  for (var i = 0, event; event = Blockly.Events.FIRE_QUEUE_[i]; i++) {
+    event.recordUndo = false;
+  }
+};
+
+/**
+ * Stop sending events.  Every call to this function MUST also call enable.
+ */
+Blockly.Events.disable = function() {
+  Blockly.Events.disabled_++;
+};
+
+/**
+ * Start sending events.  Unless events were already disabled when the
+ * corresponding call to disable was made.
+ */
+Blockly.Events.enable = function() {
+  Blockly.Events.disabled_--;
+};
+
+/**
+ * Returns whether events may be fired or not.
+ * @return {boolean} True if enabled.
+ */
+Blockly.Events.isEnabled = function() {
+  return Blockly.Events.disabled_ == 0;
+};
+
+/**
+ * Current group.
+ * @return {string} ID string.
+ */
+Blockly.Events.getGroup = function() {
+  return Blockly.Events.group_;
+};
+
+/**
+ * Start or stop a group.
+ * @param {boolean|string} state True to start new group, false to end group.
+ *   String to set group explicitly.
+ */
+Blockly.Events.setGroup = function(state) {
+  if (typeof state == 'boolean') {
+    Blockly.Events.group_ = state ? Blockly.genUid() : '';
+  } else {
+    Blockly.Events.group_ = state;
+  }
+};
+
+/**
+ * Compute a list of the IDs of the specified block and all its descendants.
+ * @param {!Blockly.Block} block The root block.
+ * @return {!Array.<string>} List of block IDs.
+ * @private
+ */
+Blockly.Events.getDescendantIds_ = function(block) {
+  var ids = [];
+  var descendants = block.getDescendants();
+  for (var i = 0, descendant; descendant = descendants[i]; i++) {
+    ids[i] = descendant.id;
+  }
+  return ids;
+};
+
+/**
+ * Decode the JSON into an event.
+ * @param {!Object} json JSON representation.
+ * @param {!Blockly.Workspace} workspace Target workspace for event.
+ * @return {!Blockly.Events.Abstract} The event represented by the JSON.
+ */
+Blockly.Events.fromJson = function(json, workspace) {
+  var event;
+  switch (json.type) {
+    case Blockly.Events.CREATE:
+      event = new Blockly.Events.Create(null);
+      break;
+    case Blockly.Events.DELETE:
+      event = new Blockly.Events.Delete(null);
+      break;
+    case Blockly.Events.CHANGE:
+      event = new Blockly.Events.Change(null);
+      break;
+    case Blockly.Events.MOVE:
+      event = new Blockly.Events.Move(null);
+      break;
+    case Blockly.Events.UI:
+      event = new Blockly.Events.Ui(null);
+      break;
+    default:
+      throw 'Unknown event type.';
+  }
+  event.fromJson(json);
+  event.workspaceId = workspace.id;
+  return event;
+};
+
+/**
+ * Abstract class for an event.
+ * @param {Blockly.Block} block The block.
+ * @constructor
+ */
+Blockly.Events.Abstract = function(block) {
+  if (block) {
+    this.blockId = block.id;
+    this.workspaceId = block.workspace.id;
+  }
+  this.group = Blockly.Events.group_;
+  this.recordUndo = Blockly.Events.recordUndo;
+};
+
+/**
+ * Encode the event as JSON.
+ * @return {!Object} JSON representation.
+ */
+Blockly.Events.Abstract.prototype.toJson = function() {
+  var json = {
+    'type': this.type,
+  };
+  if (this.blockId) {
+    json['blockId'] = this.blockId;
+  }
+  if (this.group) {
+    json['group'] = this.group;
+  }
+  return json;
+};
+
+/**
+ * Decode the JSON event.
+ * @param {!Object} json JSON representation.
+ */
+Blockly.Events.Abstract.prototype.fromJson = function(json) {
+  this.blockId = json['blockId'];
+  this.group = json['group'];
+};
+
+/**
+ * Does this event record any change of state?
+ * @return {boolean} True if null, false if something changed.
+ */
+Blockly.Events.Abstract.prototype.isNull = function() {
+  return false;
+};
+
+/**
+ * Run an event.
+ * @param {boolean} forward True if run forward, false if run backward (undo).
+ */
+Blockly.Events.Abstract.prototype.run = function(forward) {
+  // Defined by subclasses.
+};
+
+/**
+ * Class for a block creation event.
+ * @param {Blockly.Block} block The created block.  Null for a blank event.
+ * @extends {Blockly.Events.Abstract}
+ * @constructor
+ */
+Blockly.Events.Create = function(block) {
+  if (!block) {
+    return;  // Blank event to be populated by fromJson.
+  }
+  Blockly.Events.Create.superClass_.constructor.call(this, block);
+  this.xml = Blockly.Xml.blockToDomWithXY(block);
+  this.ids = Blockly.Events.getDescendantIds_(block);
+};
+goog.inherits(Blockly.Events.Create, Blockly.Events.Abstract);
+
+/**
+ * Type of this event.
+ * @type {string}
+ */
+Blockly.Events.Create.prototype.type = Blockly.Events.CREATE;
+
+/**
+ * Encode the event as JSON.
+ * @return {!Object} JSON representation.
+ */
+Blockly.Events.Create.prototype.toJson = function() {
+  var json = Blockly.Events.Create.superClass_.toJson.call(this);
+  json['xml'] = Blockly.Xml.domToText(this.xml);
+  json['ids'] = this.ids;
+  return json;
+};
+
+/**
+ * Decode the JSON event.
+ * @param {!Object} json JSON representation.
+ */
+Blockly.Events.Create.prototype.fromJson = function(json) {
+  Blockly.Events.Create.superClass_.fromJson.call(this, json);
+  this.xml = Blockly.Xml.textToDom('<xml>' + json['xml'] + '</xml>').firstChild;
+  this.ids = json['ids'];
+};
+
+/**
+ * Run a creation event.
+ * @param {boolean} forward True if run forward, false if run backward (undo).
+ */
+Blockly.Events.Create.prototype.run = function(forward) {
+  var workspace = Blockly.Workspace.getById(this.workspaceId);
+  if (forward) {
+    var xml = goog.dom.createDom('xml');
+    xml.appendChild(this.xml);
+    Blockly.Xml.domToWorkspace(xml, workspace);
+  } else {
+    for (var i = 0, id; id = this.ids[i]; i++) {
+      var block = workspace.getBlockById(id);
+      if (block) {
+        block.dispose(false, false);
+      } else if (id == this.blockId) {
+        // Only complain about root-level block.
+        console.warn("Can't uncreate non-existant block: " + id);
+      }
+    }
+  }
+};
+
+/**
+ * Class for a block deletion event.
+ * @param {Blockly.Block} block The deleted block.  Null for a blank event.
+ * @extends {Blockly.Events.Abstract}
+ * @constructor
+ */
+Blockly.Events.Delete = function(block) {
+  if (!block) {
+    return;  // Blank event to be populated by fromJson.
+  }
+  if (block.getParent()) {
+    throw 'Connected blocks cannot be deleted.';
+  }
+  Blockly.Events.Delete.superClass_.constructor.call(this, block);
+  this.oldXml = Blockly.Xml.blockToDomWithXY(block);
+  this.ids = Blockly.Events.getDescendantIds_(block);
+};
+goog.inherits(Blockly.Events.Delete, Blockly.Events.Abstract);
+
+/**
+ * Type of this event.
+ * @type {string}
+ */
+Blockly.Events.Delete.prototype.type = Blockly.Events.DELETE;
+
+/**
+ * Encode the event as JSON.
+ * @return {!Object} JSON representation.
+ */
+Blockly.Events.Delete.prototype.toJson = function() {
+  var json = Blockly.Events.Delete.superClass_.toJson.call(this);
+  json['ids'] = this.ids;
+  return json;
+};
+
+/**
+ * Decode the JSON event.
+ * @param {!Object} json JSON representation.
+ */
+Blockly.Events.Delete.prototype.fromJson = function(json) {
+  Blockly.Events.Delete.superClass_.fromJson.call(this, json);
+  this.ids = json['ids'];
+};
+
+/**
+ * Run a deletion event.
+ * @param {boolean} forward True if run forward, false if run backward (undo).
+ */
+Blockly.Events.Delete.prototype.run = function(forward) {
+  var workspace = Blockly.Workspace.getById(this.workspaceId);
+  if (forward) {
+    for (var i = 0, id; id = this.ids[i]; i++) {
+      var block = workspace.getBlockById(id);
+      if (block) {
+        block.dispose(false, false);
+      } else if (id == this.blockId) {
+        // Only complain about root-level block.
+        console.warn("Can't delete non-existant block: " + id);
+      }
+    }
+  } else {
+    var xml = goog.dom.createDom('xml');
+    xml.appendChild(this.oldXml);
+    Blockly.Xml.domToWorkspace(xml, workspace);
+  }
+};
+
+/**
+ * Class for a block change event.
+ * @param {Blockly.Block} block The changed block.  Null for a blank event.
+ * @param {string} element One of 'field', 'comment', 'disabled', etc.
+ * @param {?string} name Name of input or field affected, or null.
+ * @param {string} oldValue Previous value of element.
+ * @param {string} newValue New value of element.
+ * @extends {Blockly.Events.Abstract}
+ * @constructor
+ */
+Blockly.Events.Change = function(block, element, name, oldValue, newValue) {
+  if (!block) {
+    return;  // Blank event to be populated by fromJson.
+  }
+  Blockly.Events.Change.superClass_.constructor.call(this, block);
+  this.element = element;
+  this.name = name;
+  this.oldValue = oldValue;
+  this.newValue = newValue;
+};
+goog.inherits(Blockly.Events.Change, Blockly.Events.Abstract);
+
+/**
+ * Type of this event.
+ * @type {string}
+ */
+Blockly.Events.Change.prototype.type = Blockly.Events.CHANGE;
+
+/**
+ * Encode the event as JSON.
+ * @return {!Object} JSON representation.
+ */
+Blockly.Events.Change.prototype.toJson = function() {
+  var json = Blockly.Events.Change.superClass_.toJson.call(this);
+  json['element'] = this.element;
+  if (this.name) {
+    json['name'] = this.name;
+  }
+  json['newValue'] = this.newValue;
+  return json;
+};
+
+/**
+ * Decode the JSON event.
+ * @param {!Object} json JSON representation.
+ */
+Blockly.Events.Change.prototype.fromJson = function(json) {
+  Blockly.Events.Change.superClass_.fromJson.call(this, json);
+  this.element = json['element'];
+  this.name = json['name'];
+  this.newValue = json['newValue'];
+};
+
+/**
+ * Does this event record any change of state?
+ * @return {boolean} True if something changed.
+ */
+Blockly.Events.Change.prototype.isNull = function() {
+  return this.oldValue == this.newValue;
+};
+
+/**
+ * Run a change event.
+ * @param {boolean} forward True if run forward, false if run backward (undo).
+ */
+Blockly.Events.Change.prototype.run = function(forward) {
+  var workspace = Blockly.Workspace.getById(this.workspaceId);
+  var block = workspace.getBlockById(this.blockId);
+  if (!block) {
+    console.warn("Can't change non-existant block: " + this.blockId);
+    return;
+  }
+  if (block.mutator) {
+    // Close the mutator (if open) since we don't want to update it.
+    block.mutator.setVisible(false);
+  }
+  var value = forward ? this.newValue : this.oldValue;
+  switch (this.element) {
+    case 'field':
+      var field = block.getField(this.name);
+      if (field) {
+        // Run the validator for any side-effects it may have.
+        // The validator's opinion on validity is ignored.
+        field.callValidator(value);
+        field.setValue(value);
+      } else {
+        console.warn("Can't set non-existant field: " + this.name);
+      }
+      break;
+    case 'comment':
+      block.setCommentText(value || null);
+      break;
+    case 'collapsed':
+      block.setCollapsed(value);
+      break;
+    case 'disabled':
+      block.setDisabled(value);
+      break;
+    case 'inline':
+      block.setInputsInline(value);
+      break;
+    case 'mutation':
+      var oldMutation = '';
+      if (block.mutationToDom) {
+        var oldMutationDom = block.mutationToDom();
+        oldMutation = oldMutationDom && Blockly.Xml.domToText(oldMutationDom);
+      }
+      if (block.domToMutation) {
+        value = value || '<mutation></mutation>';
+        var dom = Blockly.Xml.textToDom('<xml>' + value + '</xml>');
+        block.domToMutation(dom.firstChild);
+      }
+      Blockly.Events.fire(new Blockly.Events.Change(
+          block, 'mutation', null, oldMutation, value));
+      break;
+    default:
+      console.warn('Unknown change type: ' + this.element);
+  }
+};
+
+/**
+ * Class for a block move event.  Created before the move.
+ * @param {Blockly.Block} block The moved block.  Null for a blank event.
+ * @extends {Blockly.Events.Abstract}
+ * @constructor
+ */
+Blockly.Events.Move = function(block) {
+  if (!block) {
+    return;  // Blank event to be populated by fromJson.
+  }
+  Blockly.Events.Move.superClass_.constructor.call(this, block);
+  var location = this.currentLocation_();
+  this.oldParentId = location.parentId;
+  this.oldInputName = location.inputName;
+  this.oldCoordinate = location.coordinate;
+};
+goog.inherits(Blockly.Events.Move, Blockly.Events.Abstract);
+
+/**
+ * Type of this event.
+ * @type {string}
+ */
+Blockly.Events.Move.prototype.type = Blockly.Events.MOVE;
+
+/**
+ * Encode the event as JSON.
+ * @return {!Object} JSON representation.
+ */
+Blockly.Events.Move.prototype.toJson = function() {
+  var json = Blockly.Events.Move.superClass_.toJson.call(this);
+  if (this.newParentId) {
+    json['newParentId'] = this.newParentId;
+  }
+  if (this.newInputName) {
+    json['newInputName'] = this.newInputName;
+  }
+  if (this.newCoordinate) {
+    json['newCoordinate'] = Math.round(this.newCoordinate.x) + ',' +
+        Math.round(this.newCoordinate.y);
+  }
+  return json;
+};
+
+/**
+ * Decode the JSON event.
+ * @param {!Object} json JSON representation.
+ */
+Blockly.Events.Move.prototype.fromJson = function(json) {
+  Blockly.Events.Move.superClass_.fromJson.call(this, json);
+  this.newParentId = json['newParentId'];
+  this.newInputName = json['newInputName'];
+  if (json['newCoordinate']) {
+    var xy = json['newCoordinate'].split(',');
+    this.newCoordinate =
+        new goog.math.Coordinate(parseFloat(xy[0]), parseFloat(xy[1]));
+  }
+};
+
+/**
+ * Record the block's new location.  Called after the move.
+ */
+Blockly.Events.Move.prototype.recordNew = function() {
+  var location = this.currentLocation_();
+  this.newParentId = location.parentId;
+  this.newInputName = location.inputName;
+  this.newCoordinate = location.coordinate;
+};
+
+/**
+ * Returns the parentId and input if the block is connected,
+ *   or the XY location if disconnected.
+ * @return {!Object} Collection of location info.
+ * @private
+ */
+Blockly.Events.Move.prototype.currentLocation_ = function() {
+  var workspace = Blockly.Workspace.getById(this.workspaceId);
+  var block = workspace.getBlockById(this.blockId);
+  var location = {};
+  var parent = block.getParent();
+  if (parent) {
+    location.parentId = parent.id;
+    var input = parent.getInputWithBlock(block);
+    if (input) {
+      location.inputName = input.name;
+    }
+  } else {
+    location.coordinate = block.getRelativeToSurfaceXY();
+  }
+  return location;
+};
+
+/**
+ * Does this event record any change of state?
+ * @return {boolean} True if something changed.
+ */
+Blockly.Events.Move.prototype.isNull = function() {
+  return this.oldParentId == this.newParentId &&
+      this.oldInputName == this.newInputName &&
+      goog.math.Coordinate.equals(this.oldCoordinate, this.newCoordinate);
+};
+
+/**
+ * Run a move event.
+ * @param {boolean} forward True if run forward, false if run backward (undo).
+ */
+Blockly.Events.Move.prototype.run = function(forward) {
+  var workspace = Blockly.Workspace.getById(this.workspaceId);
+  var block = workspace.getBlockById(this.blockId);
+  if (!block) {
+    console.warn("Can't move non-existant block: " + this.blockId);
+    return;
+  }
+  var parentId = forward ? this.newParentId : this.oldParentId;
+  var inputName = forward ? this.newInputName : this.oldInputName;
+  var coordinate = forward ? this.newCoordinate : this.oldCoordinate;
+  var parentBlock = null;
+  if (parentId) {
+    parentBlock = workspace.getBlockById(parentId);
+    if (!parentBlock) {
+      console.warn("Can't connect to non-existant block: " + parentId);
+      return;
+    }
+  }
+  if (block.getParent()) {
+    block.unplug();
+  }
+  if (coordinate) {
+    var xy = block.getRelativeToSurfaceXY();
+    block.moveBy(coordinate.x - xy.x, coordinate.y - xy.y);
+  } else {
+    var blockConnection = block.outputConnection || block.previousConnection;
+    var parentConnection;
+    if (inputName) {
+      var input = parentBlock.getInput(inputName);
+      if (input) {
+        parentConnection = input.connection;
+      }
+    } else if (blockConnection.type == Blockly.PREVIOUS_STATEMENT) {
+      parentConnection = parentBlock.nextConnection;
+    }
+    if (parentConnection) {
+      blockConnection.connect(parentConnection);
+    } else {
+      console.warn("Can't connect to non-existant input: " + inputName);
+    }
+  }
+};
+
+/**
+ * Class for a UI event.
+ * @param {Blockly.Block} block The affected block.
+ * @param {string} element One of 'selected', 'comment', 'mutator', etc.
+ * @param {string} oldValue Previous value of element.
+ * @param {string} newValue New value of element.
+ * @extends {Blockly.Events.Abstract}
+ * @constructor
+ */
+Blockly.Events.Ui = function(block, element, oldValue, newValue) {
+  Blockly.Events.Ui.superClass_.constructor.call(this, block);
+  this.element = element;
+  this.oldValue = oldValue;
+  this.newValue = newValue;
+  this.recordUndo = false;
+};
+goog.inherits(Blockly.Events.Ui, Blockly.Events.Abstract);
+
+/**
+ * Type of this event.
+ * @type {string}
+ */
+Blockly.Events.Ui.prototype.type = Blockly.Events.UI;
+
+/**
+ * Encode the event as JSON.
+ * @return {!Object} JSON representation.
+ */
+Blockly.Events.Ui.prototype.toJson = function() {
+  var json = Blockly.Events.Ui.superClass_.toJson.call(this);
+  json['element'] = this.element;
+  if (this.newValue !== undefined) {
+    json['newValue'] = this.newValue;
+  }
+  return json;
+};
+
+/**
+ * Decode the JSON event.
+ * @param {!Object} json JSON representation.
+ */
+Blockly.Events.Ui.prototype.fromJson = function(json) {
+  Blockly.Events.Ui.superClass_.fromJson.call(this, json);
+  this.element = json['element'];
+  this.newValue = json['newValue'];
+};
+
+/**
+ * Enable/disable a block depending on whether it is properly connected.
+ * Use this on applications where all blocks should be connected to a top block.
+ * Recommend setting the 'disable' option to 'false' in the config so that
+ * users don't try to reenable disabled orphan blocks.
+ * @param {!Blockly.Events.Abstract} event Custom data for event.
+ */
+Blockly.Events.disableOrphans = function(event) {
+  if (event.type == Blockly.Events.MOVE ||
+      event.type == Blockly.Events.CREATE) {
+    Blockly.Events.disable();
+    var workspace = Blockly.Workspace.getById(event.workspaceId);
+    var block = workspace.getBlockById(event.blockId);
+    if (block) {
+      if (block.getParent() && !block.getParent().disabled) {
+        var children = block.getDescendants();
+        for (var i = 0, child; child = children[i]; i++) {
+          child.setDisabled(false);
+        }
+      } else if ((block.outputConnection || block.previousConnection) &&
+                 Blockly.dragMode_ == Blockly.DRAG_NONE) {
+        do {
+          block.setDisabled(true);
+          block = block.getNextBlock();
+        } while (block);
+      }
+    }
+    Blockly.Events.enable();
+  }
+};
diff --git a/blockly/core/field.js b/blockly/core/field.js
new file mode 100644
index 0000000..131a626
--- /dev/null
+++ b/blockly/core/field.js
@@ -0,0 +1,495 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2012 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Field.  Used for editable titles, variables, etc.
+ * This is an abstract class that defines the UI on the block.  Actual
+ * instances would be Blockly.FieldTextInput, Blockly.FieldDropdown, etc.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.Field');
+
+goog.require('goog.asserts');
+goog.require('goog.dom');
+goog.require('goog.math.Size');
+goog.require('goog.style');
+goog.require('goog.userAgent');
+
+
+/**
+ * Abstract class for an editable field.
+ * @param {string} text The initial content of the field.
+ * @param {Function=} opt_validator An optional function that is called
+ *     to validate any constraints on what the user entered.  Takes the new
+ *     text as an argument and returns either the accepted text, a replacement
+ *     text, or null to abort the change.
+ * @constructor
+ */
+Blockly.Field = function(text, opt_validator) {
+  this.size_ = new goog.math.Size(0, 25);
+  this.setValue(text);
+  this.setValidator(opt_validator);
+};
+
+/**
+ * Temporary cache of text widths.
+ * @type {Object}
+ * @private
+ */
+Blockly.Field.cacheWidths_ = null;
+
+/**
+ * Number of current references to cache.
+ * @type {number}
+ * @private
+ */
+Blockly.Field.cacheReference_ = 0;
+
+
+/**
+ * Name of field.  Unique within each block.
+ * Static labels are usually unnamed.
+ * @type {string=}
+ */
+Blockly.Field.prototype.name = undefined;
+
+/**
+ * Maximum characters of text to display before adding an ellipsis.
+ * @type {number}
+ */
+Blockly.Field.prototype.maxDisplayLength = 50;
+
+/**
+ * Visible text to display.
+ * @type {string}
+ * @private
+ */
+Blockly.Field.prototype.text_ = '';
+
+/**
+ * Block this field is attached to.  Starts as null, then in set in init.
+ * @type {Blockly.Block}
+ * @private
+ */
+Blockly.Field.prototype.sourceBlock_ = null;
+
+/**
+ * Is the field visible, or hidden due to the block being collapsed?
+ * @type {boolean}
+ * @private
+ */
+Blockly.Field.prototype.visible_ = true;
+
+/**
+ * Validation function called when user edits an editable field.
+ * @type {Function}
+ * @private
+ */
+Blockly.Field.prototype.validator_ = null;
+
+/**
+ * Non-breaking space.
+ * @const
+ */
+Blockly.Field.NBSP = '\u00A0';
+
+/**
+ * Editable fields are saved by the XML renderer, non-editable fields are not.
+ */
+Blockly.Field.prototype.EDITABLE = true;
+
+/**
+ * Attach this field to a block.
+ * @param {!Blockly.Block} block The block containing this field.
+ */
+Blockly.Field.prototype.setSourceBlock = function(block) {
+  goog.asserts.assert(!this.sourceBlock_, 'Field already bound to a block.');
+  this.sourceBlock_ = block;
+};
+
+/**
+ * Install this field on a block.
+ */
+Blockly.Field.prototype.init = function() {
+  if (this.fieldGroup_) {
+    // Field has already been initialized once.
+    return;
+  }
+  // Build the DOM.
+  this.fieldGroup_ = Blockly.createSvgElement('g', {}, null);
+  if (!this.visible_) {
+    this.fieldGroup_.style.display = 'none';
+  }
+  this.borderRect_ = Blockly.createSvgElement('rect',
+      {'rx': 4,
+       'ry': 4,
+       'x': -Blockly.BlockSvg.SEP_SPACE_X / 2,
+       'y': 0,
+       'height': 16}, this.fieldGroup_, this.sourceBlock_.workspace);
+  /** @type {!Element} */
+  this.textElement_ = Blockly.createSvgElement('text',
+      {'class': 'blocklyText', 'y': this.size_.height - 12.5},
+      this.fieldGroup_);
+
+  this.updateEditable();
+  this.sourceBlock_.getSvgRoot().appendChild(this.fieldGroup_);
+  this.mouseUpWrapper_ =
+      Blockly.bindEvent_(this.fieldGroup_, 'mouseup', this, this.onMouseUp_);
+  // Force a render.
+  this.updateTextNode_();
+};
+
+/**
+ * Dispose of all DOM objects belonging to this editable field.
+ */
+Blockly.Field.prototype.dispose = function() {
+  if (this.mouseUpWrapper_) {
+    Blockly.unbindEvent_(this.mouseUpWrapper_);
+    this.mouseUpWrapper_ = null;
+  }
+  this.sourceBlock_ = null;
+  goog.dom.removeNode(this.fieldGroup_);
+  this.fieldGroup_ = null;
+  this.textElement_ = null;
+  this.borderRect_ = null;
+  this.validator_ = null;
+};
+
+/**
+ * Add or remove the UI indicating if this field is editable or not.
+ */
+Blockly.Field.prototype.updateEditable = function() {
+  var group = this.fieldGroup_;
+  if (!this.EDITABLE || !group) {
+    return;
+  }
+  if (this.sourceBlock_.isEditable()) {
+    Blockly.addClass_(group, 'blocklyEditableText');
+    Blockly.removeClass_(group, 'blocklyNonEditableText');
+    this.fieldGroup_.style.cursor = this.CURSOR;
+  } else {
+    Blockly.addClass_(group, 'blocklyNonEditableText');
+    Blockly.removeClass_(group, 'blocklyEditableText');
+    this.fieldGroup_.style.cursor = '';
+  }
+};
+
+/**
+ * Gets whether this editable field is visible or not.
+ * @return {boolean} True if visible.
+ */
+Blockly.Field.prototype.isVisible = function() {
+  return this.visible_;
+};
+
+/**
+ * Sets whether this editable field is visible or not.
+ * @param {boolean} visible True if visible.
+ */
+Blockly.Field.prototype.setVisible = function(visible) {
+  if (this.visible_ == visible) {
+    return;
+  }
+  this.visible_ = visible;
+  var root = this.getSvgRoot();
+  if (root) {
+    root.style.display = visible ? 'block' : 'none';
+    this.render_();
+  }
+};
+
+/**
+ * Sets a new validation function for editable fields.
+ * @param {Function} handler New validation function, or null.
+ */
+Blockly.Field.prototype.setValidator = function(handler) {
+  this.validator_ = handler;
+};
+
+/**
+ * Gets the validation function for editable fields.
+ * @return {Function} Validation function, or null.
+ */
+Blockly.Field.prototype.getValidator = function() {
+  return this.validator_;
+};
+
+/**
+ * Validates a change.  Does nothing.  Subclasses may override this.
+ * @param {string} text The user's text.
+ * @return {string} No change needed.
+ */
+Blockly.Field.prototype.classValidator = function(text) {
+  return text;
+};
+
+/**
+ * Calls the validation function for this field, as well as all the validation
+ * function for the field's class and its parents.
+ * @param {string} text Proposed text.
+ * @return {?string} Revised text, or null if invalid.
+ */
+Blockly.Field.prototype.callValidator = function(text) {
+  var classResult = this.classValidator(text);
+  if (classResult === null) {
+    // Class validator rejects value.  Game over.
+    return null;
+  } else if (classResult !== undefined) {
+    text = classResult;
+  }
+  var userValidator = this.getValidator();
+  if (userValidator) {
+    var userResult = userValidator.call(this, text);
+    if (userResult === null) {
+      // User validator rejects value.  Game over.
+      return null;
+    } else if (userResult !== undefined) {
+      text = userResult;
+    }
+  }
+  return text;
+};
+
+/**
+ * Gets the group element for this editable field.
+ * Used for measuring the size and for positioning.
+ * @return {!Element} The group element.
+ */
+Blockly.Field.prototype.getSvgRoot = function() {
+  return /** @type {!Element} */ (this.fieldGroup_);
+};
+
+/**
+ * Draws the border with the correct width.
+ * Saves the computed width in a property.
+ * @private
+ */
+Blockly.Field.prototype.render_ = function() {
+  if (this.visible_ && this.textElement_) {
+    var key = this.textElement_.textContent + '\n' +
+        this.textElement_.className.baseVal;
+    if (Blockly.Field.cacheWidths_ && Blockly.Field.cacheWidths_[key]) {
+      var width = Blockly.Field.cacheWidths_[key];
+    } else {
+      try {
+        var width = this.textElement_.getComputedTextLength();
+      } catch (e) {
+        // MSIE 11 is known to throw "Unexpected call to method or property
+        // access." if Blockly is hidden.
+        var width = this.textElement_.textContent.length * 8;
+      }
+      if (Blockly.Field.cacheWidths_) {
+        Blockly.Field.cacheWidths_[key] = width;
+      }
+    }
+    if (this.borderRect_) {
+      this.borderRect_.setAttribute('width',
+          width + Blockly.BlockSvg.SEP_SPACE_X);
+    }
+  } else {
+    var width = 0;
+  }
+  this.size_.width = width;
+};
+
+/**
+ * Start caching field widths.  Every call to this function MUST also call
+ * stopCache.  Caches must not survive between execution threads.
+ */
+Blockly.Field.startCache = function() {
+  Blockly.Field.cacheReference_++;
+  if (!Blockly.Field.cacheWidths_) {
+    Blockly.Field.cacheWidths_ = {};
+  }
+};
+
+/**
+ * Stop caching field widths.  Unless caching was already on when the
+ * corresponding call to startCache was made.
+ */
+Blockly.Field.stopCache = function() {
+  Blockly.Field.cacheReference_--;
+  if (!Blockly.Field.cacheReference_) {
+    Blockly.Field.cacheWidths_ = null;
+  }
+};
+
+/**
+ * Returns the height and width of the field.
+ * @return {!goog.math.Size} Height and width.
+ */
+Blockly.Field.prototype.getSize = function() {
+  if (!this.size_.width) {
+    this.render_();
+  }
+  return this.size_;
+};
+
+/**
+ * Returns the height and width of the field,
+ * accounting for the workspace scaling.
+ * @return {!goog.math.Size} Height and width.
+ * @private
+ */
+Blockly.Field.prototype.getScaledBBox_ = function() {
+  var bBox = this.borderRect_.getBBox();
+  // Create new object, as getBBox can return an uneditable SVGRect in IE.
+  return new goog.math.Size(bBox.width * this.sourceBlock_.workspace.scale,
+                            bBox.height * this.sourceBlock_.workspace.scale);
+};
+
+/**
+ * Get the text from this field.
+ * @return {string} Current text.
+ */
+Blockly.Field.prototype.getText = function() {
+  return this.text_;
+};
+
+/**
+ * Set the text in this field.  Trigger a rerender of the source block.
+ * @param {*} text New text.
+ */
+Blockly.Field.prototype.setText = function(text) {
+  if (text === null) {
+    // No change if null.
+    return;
+  }
+  text = String(text);
+  if (text === this.text_) {
+    // No change.
+    return;
+  }
+  this.text_ = text;
+  this.updateTextNode_();
+
+  if (this.sourceBlock_ && this.sourceBlock_.rendered) {
+    this.sourceBlock_.render();
+    this.sourceBlock_.bumpNeighbours_();
+  }
+};
+
+/**
+ * Update the text node of this field to display the current text.
+ * @private
+ */
+Blockly.Field.prototype.updateTextNode_ = function() {
+  if (!this.textElement_) {
+    // Not rendered yet.
+    return;
+  }
+  var text = this.text_;
+  if (text.length > this.maxDisplayLength) {
+    // Truncate displayed string and add an ellipsis ('...').
+    text = text.substring(0, this.maxDisplayLength - 2) + '\u2026';
+  }
+  // Empty the text element.
+  goog.dom.removeChildren(/** @type {!Element} */ (this.textElement_));
+  // Replace whitespace with non-breaking spaces so the text doesn't collapse.
+  text = text.replace(/\s/g, Blockly.Field.NBSP);
+  if (this.sourceBlock_.RTL && text) {
+    // The SVG is LTR, force text to be RTL.
+    text += '\u200F';
+  }
+  if (!text) {
+    // Prevent the field from disappearing if empty.
+    text = Blockly.Field.NBSP;
+  }
+  var textNode = document.createTextNode(text);
+  this.textElement_.appendChild(textNode);
+
+  // Cached width is obsolete.  Clear it.
+  this.size_.width = 0;
+};
+
+/**
+ * By default there is no difference between the human-readable text and
+ * the language-neutral values.  Subclasses (such as dropdown) may define this.
+ * @return {string} Current text.
+ */
+Blockly.Field.prototype.getValue = function() {
+  return this.getText();
+};
+
+/**
+ * By default there is no difference between the human-readable text and
+ * the language-neutral values.  Subclasses (such as dropdown) may define this.
+ * @param {string} newText New text.
+ */
+Blockly.Field.prototype.setValue = function(newText) {
+  if (newText === null) {
+    // No change if null.
+    return;
+  }
+  var oldText = this.getValue();
+  if (oldText == newText) {
+    return;
+  }
+  if (this.sourceBlock_ && Blockly.Events.isEnabled()) {
+    Blockly.Events.fire(new Blockly.Events.Change(
+        this.sourceBlock_, 'field', this.name, oldText, newText));
+  }
+  this.setText(newText);
+};
+
+/**
+ * Handle a mouse up event on an editable field.
+ * @param {!Event} e Mouse up event.
+ * @private
+ */
+Blockly.Field.prototype.onMouseUp_ = function(e) {
+  if ((goog.userAgent.IPHONE || goog.userAgent.IPAD) &&
+      !goog.userAgent.isVersionOrHigher('537.51.2') &&
+      e.layerX !== 0 && e.layerY !== 0) {
+    // Old iOS spawns a bogus event on the next touch after a 'prompt()' edit.
+    // Unlike the real events, these have a layerX and layerY set.
+    return;
+  } else if (Blockly.isRightButton(e)) {
+    // Right-click.
+    return;
+  } else if (this.sourceBlock_.workspace.isDragging()) {
+    // Drag operation is concluding.  Don't open the editor.
+    return;
+  } else if (this.sourceBlock_.isEditable()) {
+    // Non-abstract sub-classes must define a showEditor_ method.
+    this.showEditor_();
+  }
+};
+
+/**
+ * Change the tooltip text for this field.
+ * @param {string|!Element} newTip Text for tooltip or a parent element to
+ *     link to for its tooltip.
+ */
+Blockly.Field.prototype.setTooltip = function(newTip) {
+  // Non-abstract sub-classes may wish to implement this.  See FieldLabel.
+};
+
+/**
+ * Return the absolute coordinates of the top-left corner of this field.
+ * The origin (0,0) is the top-left corner of the page body.
+ * @return {!goog.math.Coordinate} Object with .x and .y properties.
+ * @private
+ */
+Blockly.Field.prototype.getAbsoluteXY_ = function() {
+  return goog.style.getPageOffset(this.borderRect_);
+};
diff --git a/blockly/core/field_angle.js b/blockly/core/field_angle.js
new file mode 100644
index 0000000..a294948
--- /dev/null
+++ b/blockly/core/field_angle.js
@@ -0,0 +1,294 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2013 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Angle input field.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.FieldAngle');
+
+goog.require('Blockly.FieldTextInput');
+goog.require('goog.math');
+goog.require('goog.userAgent');
+
+
+/**
+ * Class for an editable angle field.
+ * @param {string} text The initial content of the field.
+ * @param {Function=} opt_validator An optional function that is called
+ *     to validate any constraints on what the user entered.  Takes the new
+ *     text as an argument and returns the accepted text or null to abort
+ *     the change.
+ * @extends {Blockly.FieldTextInput}
+ * @constructor
+ */
+Blockly.FieldAngle = function(text, opt_validator) {
+  // Add degree symbol: "360°" (LTR) or "°360" (RTL)
+  this.symbol_ = Blockly.createSvgElement('tspan', {}, null);
+  this.symbol_.appendChild(document.createTextNode('\u00B0'));
+
+  Blockly.FieldAngle.superClass_.constructor.call(this, text, opt_validator);
+};
+goog.inherits(Blockly.FieldAngle, Blockly.FieldTextInput);
+
+/**
+ * Round angles to the nearest 15 degrees when using mouse.
+ * Set to 0 to disable rounding.
+ */
+Blockly.FieldAngle.ROUND = 15;
+
+/**
+ * Half the width of protractor image.
+ */
+Blockly.FieldAngle.HALF = 100 / 2;
+
+/* The following two settings work together to set the behaviour of the angle
+ * picker.  While many combinations are possible, two modes are typical:
+ * Math mode.
+ *   0 deg is right, 90 is up.  This is the style used by protractors.
+ *   Blockly.FieldAngle.CLOCKWISE = false;
+ *   Blockly.FieldAngle.OFFSET = 0;
+ * Compass mode.
+ *   0 deg is up, 90 is right.  This is the style used by maps.
+ *   Blockly.FieldAngle.CLOCKWISE = true;
+ *   Blockly.FieldAngle.OFFSET = 90;
+ */
+
+/**
+ * Angle increases clockwise (true) or counterclockwise (false).
+ */
+Blockly.FieldAngle.CLOCKWISE = false;
+
+/**
+ * Offset the location of 0 degrees (and all angles) by a constant.
+ * Usually either 0 (0 = right) or 90 (0 = up).
+ */
+Blockly.FieldAngle.OFFSET = 0;
+
+/**
+ * Maximum allowed angle before wrapping.
+ * Usually either 360 (for 0 to 359.9) or 180 (for -179.9 to 180).
+ */
+Blockly.FieldAngle.WRAP = 360;
+
+
+/**
+ * Radius of protractor circle.  Slightly smaller than protractor size since
+ * otherwise SVG crops off half the border at the edges.
+ */
+Blockly.FieldAngle.RADIUS = Blockly.FieldAngle.HALF - 1;
+
+/**
+ * Clean up this FieldAngle, as well as the inherited FieldTextInput.
+ * @return {!Function} Closure to call on destruction of the WidgetDiv.
+ * @private
+ */
+Blockly.FieldAngle.prototype.dispose_ = function() {
+  var thisField = this;
+  return function() {
+    Blockly.FieldAngle.superClass_.dispose_.call(thisField)();
+    thisField.gauge_ = null;
+    if (thisField.clickWrapper_) {
+      Blockly.unbindEvent_(thisField.clickWrapper_);
+    }
+    if (thisField.moveWrapper1_) {
+      Blockly.unbindEvent_(thisField.moveWrapper1_);
+    }
+    if (thisField.moveWrapper2_) {
+      Blockly.unbindEvent_(thisField.moveWrapper2_);
+    }
+  };
+};
+
+/**
+ * Show the inline free-text editor on top of the text.
+ * @private
+ */
+Blockly.FieldAngle.prototype.showEditor_ = function() {
+  var noFocus =
+      goog.userAgent.MOBILE || goog.userAgent.ANDROID || goog.userAgent.IPAD;
+  // Mobile browsers have issues with in-line textareas (focus & keyboards).
+  Blockly.FieldAngle.superClass_.showEditor_.call(this, noFocus);
+  var div = Blockly.WidgetDiv.DIV;
+  if (!div.firstChild) {
+    // Mobile interface uses window.prompt.
+    return;
+  }
+  // Build the SVG DOM.
+  var svg = Blockly.createSvgElement('svg', {
+    'xmlns': 'http://www.w3.org/2000/svg',
+    'xmlns:html': 'http://www.w3.org/1999/xhtml',
+    'xmlns:xlink': 'http://www.w3.org/1999/xlink',
+    'version': '1.1',
+    'height': (Blockly.FieldAngle.HALF * 2) + 'px',
+    'width': (Blockly.FieldAngle.HALF * 2) + 'px'
+  }, div);
+  var circle = Blockly.createSvgElement('circle', {
+    'cx': Blockly.FieldAngle.HALF, 'cy': Blockly.FieldAngle.HALF,
+    'r': Blockly.FieldAngle.RADIUS,
+    'class': 'blocklyAngleCircle'
+  }, svg);
+  this.gauge_ = Blockly.createSvgElement('path',
+      {'class': 'blocklyAngleGauge'}, svg);
+  this.line_ = Blockly.createSvgElement('line',
+      {'x1': Blockly.FieldAngle.HALF,
+      'y1': Blockly.FieldAngle.HALF,
+      'class': 'blocklyAngleLine'}, svg);
+  // Draw markers around the edge.
+  for (var angle = 0; angle < 360; angle += 15) {
+    Blockly.createSvgElement('line', {
+      'x1': Blockly.FieldAngle.HALF + Blockly.FieldAngle.RADIUS,
+      'y1': Blockly.FieldAngle.HALF,
+      'x2': Blockly.FieldAngle.HALF + Blockly.FieldAngle.RADIUS -
+          (angle % 45 == 0 ? 10 : 5),
+      'y2': Blockly.FieldAngle.HALF,
+      'class': 'blocklyAngleMarks',
+      'transform': 'rotate(' + angle + ',' +
+          Blockly.FieldAngle.HALF + ',' + Blockly.FieldAngle.HALF + ')'
+    }, svg);
+  }
+  svg.style.marginLeft = (15 - Blockly.FieldAngle.RADIUS) + 'px';
+  this.clickWrapper_ =
+      Blockly.bindEvent_(svg, 'click', this, Blockly.WidgetDiv.hide);
+  this.moveWrapper1_ =
+      Blockly.bindEvent_(circle, 'mousemove', this, this.onMouseMove);
+  this.moveWrapper2_ =
+      Blockly.bindEvent_(this.gauge_, 'mousemove', this, this.onMouseMove);
+  this.updateGraph_();
+};
+
+/**
+ * Set the angle to match the mouse's position.
+ * @param {!Event} e Mouse move event.
+ */
+Blockly.FieldAngle.prototype.onMouseMove = function(e) {
+  var bBox = this.gauge_.ownerSVGElement.getBoundingClientRect();
+  var dx = e.clientX - bBox.left - Blockly.FieldAngle.HALF;
+  var dy = e.clientY - bBox.top - Blockly.FieldAngle.HALF;
+  var angle = Math.atan(-dy / dx);
+  if (isNaN(angle)) {
+    // This shouldn't happen, but let's not let this error propogate further.
+    return;
+  }
+  angle = goog.math.toDegrees(angle);
+  // 0: East, 90: North, 180: West, 270: South.
+  if (dx < 0) {
+    angle += 180;
+  } else if (dy > 0) {
+    angle += 360;
+  }
+  if (Blockly.FieldAngle.CLOCKWISE) {
+    angle = Blockly.FieldAngle.OFFSET + 360 - angle;
+  } else {
+    angle -= Blockly.FieldAngle.OFFSET;
+  }
+  if (Blockly.FieldAngle.ROUND) {
+    angle = Math.round(angle / Blockly.FieldAngle.ROUND) *
+        Blockly.FieldAngle.ROUND;
+  }
+  angle = this.callValidator(angle);
+  Blockly.FieldTextInput.htmlInput_.value = angle;
+  this.setValue(angle);
+  this.validate_();
+  this.resizeEditor_();
+};
+
+/**
+ * Insert a degree symbol.
+ * @param {?string} text New text.
+ */
+Blockly.FieldAngle.prototype.setText = function(text) {
+  Blockly.FieldAngle.superClass_.setText.call(this, text);
+  if (!this.textElement_) {
+    // Not rendered yet.
+    return;
+  }
+  this.updateGraph_();
+  // Insert degree symbol.
+  if (this.sourceBlock_.RTL) {
+    this.textElement_.insertBefore(this.symbol_, this.textElement_.firstChild);
+  } else {
+    this.textElement_.appendChild(this.symbol_);
+  }
+  // Cached width is obsolete.  Clear it.
+  this.size_.width = 0;
+};
+
+/**
+ * Redraw the graph with the current angle.
+ * @private
+ */
+Blockly.FieldAngle.prototype.updateGraph_ = function() {
+  if (!this.gauge_) {
+    return;
+  }
+  var angleDegrees = Number(this.getText()) + Blockly.FieldAngle.OFFSET;
+  var angleRadians = goog.math.toRadians(angleDegrees);
+  var path = ['M ', Blockly.FieldAngle.HALF, ',', Blockly.FieldAngle.HALF];
+  var x2 = Blockly.FieldAngle.HALF;
+  var y2 = Blockly.FieldAngle.HALF;
+  if (!isNaN(angleRadians)) {
+    var angle1 = goog.math.toRadians(Blockly.FieldAngle.OFFSET);
+    var x1 = Math.cos(angle1) * Blockly.FieldAngle.RADIUS;
+    var y1 = Math.sin(angle1) * -Blockly.FieldAngle.RADIUS;
+    if (Blockly.FieldAngle.CLOCKWISE) {
+      angleRadians = 2 * angle1 - angleRadians;
+    }
+    x2 += Math.cos(angleRadians) * Blockly.FieldAngle.RADIUS;
+    y2 -= Math.sin(angleRadians) * Blockly.FieldAngle.RADIUS;
+    // Don't ask how the flag calculations work.  They just do.
+    var largeFlag = Math.abs(Math.floor((angleRadians - angle1) / Math.PI) % 2);
+    if (Blockly.FieldAngle.CLOCKWISE) {
+      largeFlag = 1 - largeFlag;
+    }
+    var sweepFlag = Number(Blockly.FieldAngle.CLOCKWISE);
+    path.push(' l ', x1, ',', y1,
+        ' A ', Blockly.FieldAngle.RADIUS, ',', Blockly.FieldAngle.RADIUS,
+        ' 0 ', largeFlag, ' ', sweepFlag, ' ', x2, ',', y2, ' z');
+  }
+  this.gauge_.setAttribute('d', path.join(''));
+  this.line_.setAttribute('x2', x2);
+  this.line_.setAttribute('y2', y2);
+};
+
+/**
+ * Ensure that only an angle may be entered.
+ * @param {string} text The user's text.
+ * @return {?string} A string representing a valid angle, or null if invalid.
+ */
+Blockly.FieldAngle.prototype.classValidator = function(text) {
+  if (text === null) {
+    return null;
+  }
+  var n = parseFloat(text || 0);
+  if (isNaN(n)) {
+    return null;
+  }
+  n = n % 360;
+  if (n < 0) {
+    n += 360;
+  }
+  if (n > Blockly.FieldAngle.WRAP) {
+    n -= 360;
+  }
+  return String(n);
+};
diff --git a/blockly/core/field_checkbox.js b/blockly/core/field_checkbox.js
new file mode 100644
index 0000000..638aba9
--- /dev/null
+++ b/blockly/core/field_checkbox.js
@@ -0,0 +1,117 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2012 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Checkbox field.  Checked or not checked.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.FieldCheckbox');
+
+goog.require('Blockly.Field');
+
+
+/**
+ * Class for a checkbox field.
+ * @param {string} state The initial state of the field ('TRUE' or 'FALSE').
+ * @param {Function=} opt_validator A function that is executed when a new
+ *     option is selected.  Its sole argument is the new checkbox state.  If
+ *     it returns a value, this becomes the new checkbox state, unless the
+ *     value is null, in which case the change is aborted.
+ * @extends {Blockly.Field}
+ * @constructor
+ */
+Blockly.FieldCheckbox = function(state, opt_validator) {
+  Blockly.FieldCheckbox.superClass_.constructor.call(this, '', opt_validator);
+  // Set the initial state.
+  this.setValue(state);
+};
+goog.inherits(Blockly.FieldCheckbox, Blockly.Field);
+
+/**
+ * Character for the checkmark.
+ */
+Blockly.FieldCheckbox.CHECK_CHAR = '\u2713';
+
+/**
+ * Mouse cursor style when over the hotspot that initiates editability.
+ */
+Blockly.FieldCheckbox.prototype.CURSOR = 'default';
+
+/**
+ * Install this checkbox on a block.
+ */
+Blockly.FieldCheckbox.prototype.init = function() {
+  if (this.fieldGroup_) {
+    // Checkbox has already been initialized once.
+    return;
+  }
+  Blockly.FieldCheckbox.superClass_.init.call(this);
+  // The checkbox doesn't use the inherited text element.
+  // Instead it uses a custom checkmark element that is either visible or not.
+  this.checkElement_ = Blockly.createSvgElement('text',
+      {'class': 'blocklyText blocklyCheckbox', 'x': -3, 'y': 14},
+      this.fieldGroup_);
+  var textNode = document.createTextNode(Blockly.FieldCheckbox.CHECK_CHAR);
+  this.checkElement_.appendChild(textNode);
+  this.checkElement_.style.display = this.state_ ? 'block' : 'none';
+};
+
+/**
+ * Return 'TRUE' if the checkbox is checked, 'FALSE' otherwise.
+ * @return {string} Current state.
+ */
+Blockly.FieldCheckbox.prototype.getValue = function() {
+  return String(this.state_).toUpperCase();
+};
+
+/**
+ * Set the checkbox to be checked if strBool is 'TRUE', unchecks otherwise.
+ * @param {string} strBool New state.
+ */
+Blockly.FieldCheckbox.prototype.setValue = function(strBool) {
+  var newState = (strBool == 'TRUE');
+  if (this.state_ !== newState) {
+    if (this.sourceBlock_ && Blockly.Events.isEnabled()) {
+      Blockly.Events.fire(new Blockly.Events.Change(
+          this.sourceBlock_, 'field', this.name, this.state_, newState));
+    }
+    this.state_ = newState;
+    if (this.checkElement_) {
+      this.checkElement_.style.display = newState ? 'block' : 'none';
+    }
+  }
+};
+
+/**
+ * Toggle the state of the checkbox.
+ * @private
+ */
+Blockly.FieldCheckbox.prototype.showEditor_ = function() {
+  var newState = !this.state_;
+  if (this.sourceBlock_) {
+    // Call any validation function, and allow it to override.
+    newState = this.callValidator(newState);
+  }
+  if (newState !== null) {
+    this.setValue(String(newState).toUpperCase());
+  }
+};
diff --git a/blockly/core/field_colour.js b/blockly/core/field_colour.js
new file mode 100644
index 0000000..30b7dc5
--- /dev/null
+++ b/blockly/core/field_colour.js
@@ -0,0 +1,234 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2012 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Colour input field.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.FieldColour');
+
+goog.require('Blockly.Field');
+goog.require('goog.dom');
+goog.require('goog.events');
+goog.require('goog.style');
+goog.require('goog.ui.ColorPicker');
+
+
+/**
+ * Class for a colour input field.
+ * @param {string} colour The initial colour in '#rrggbb' format.
+ * @param {Function=} opt_validator A function that is executed when a new
+ *     colour is selected.  Its sole argument is the new colour value.  Its
+ *     return value becomes the selected colour, unless it is undefined, in
+ *     which case the new colour stands, or it is null, in which case the change
+ *     is aborted.
+ * @extends {Blockly.Field}
+ * @constructor
+ */
+Blockly.FieldColour = function(colour, opt_validator) {
+  Blockly.FieldColour.superClass_.constructor.call(this, colour, opt_validator);
+  this.setText(Blockly.Field.NBSP + Blockly.Field.NBSP + Blockly.Field.NBSP);
+};
+goog.inherits(Blockly.FieldColour, Blockly.Field);
+
+/**
+ * By default use the global constants for colours.
+ * @type {Array.<string>}
+ * @private
+ */
+Blockly.FieldColour.prototype.colours_ = null;
+
+/**
+ * By default use the global constants for columns.
+ * @type {number}
+ * @private
+ */
+Blockly.FieldColour.prototype.columns_ = 0;
+
+/**
+ * Install this field on a block.
+ */
+Blockly.FieldColour.prototype.init = function() {
+  Blockly.FieldColour.superClass_.init.call(this);
+  this.borderRect_.style['fillOpacity'] = 1;
+  this.setValue(this.getValue());
+};
+
+/**
+ * Mouse cursor style when over the hotspot that initiates the editor.
+ */
+Blockly.FieldColour.prototype.CURSOR = 'default';
+
+/**
+ * Close the colour picker if this input is being deleted.
+ */
+Blockly.FieldColour.prototype.dispose = function() {
+  Blockly.WidgetDiv.hideIfOwner(this);
+  Blockly.FieldColour.superClass_.dispose.call(this);
+};
+
+/**
+ * Return the current colour.
+ * @return {string} Current colour in '#rrggbb' format.
+ */
+Blockly.FieldColour.prototype.getValue = function() {
+  return this.colour_;
+};
+
+/**
+ * Set the colour.
+ * @param {string} colour The new colour in '#rrggbb' format.
+ */
+Blockly.FieldColour.prototype.setValue = function(colour) {
+  if (this.sourceBlock_ && Blockly.Events.isEnabled() &&
+      this.colour_ != colour) {
+    Blockly.Events.fire(new Blockly.Events.Change(
+        this.sourceBlock_, 'field', this.name, this.colour_, colour));
+  }
+  this.colour_ = colour;
+  if (this.borderRect_) {
+    this.borderRect_.style.fill = colour;
+  }
+};
+
+/**
+ * Get the text from this field.  Used when the block is collapsed.
+ * @return {string} Current text.
+ */
+Blockly.FieldColour.prototype.getText = function() {
+  var colour = this.colour_;
+  // Try to use #rgb format if possible, rather than #rrggbb.
+  var m = colour.match(/^#(.)\1(.)\2(.)\3$/);
+  if (m) {
+    colour = '#' + m[1] + m[2] + m[3];
+  }
+  return colour;
+};
+
+/**
+ * An array of colour strings for the palette.
+ * See bottom of this page for the default:
+ * http://docs.closure-library.googlecode.com/git/closure_goog_ui_colorpicker.js.source.html
+ * @type {!Array.<string>}
+ */
+Blockly.FieldColour.COLOURS = goog.ui.ColorPicker.SIMPLE_GRID_COLORS;
+
+/**
+ * Number of columns in the palette.
+ */
+Blockly.FieldColour.COLUMNS = 7;
+
+/**
+ * Set a custom colour grid for this field.
+ * @param {Array.<string>} colours Array of colours for this block,
+ *     or null to use default (Blockly.FieldColour.COLOURS).
+ * @return {!Blockly.FieldColour} Returns itself (for method chaining).
+ */
+Blockly.FieldColour.prototype.setColours = function(colours) {
+  this.colours_ = colours;
+  return this;
+};
+
+/**
+ * Set a custom grid size for this field.
+ * @param {number} columns Number of columns for this block,
+ *     or 0 to use default (Blockly.FieldColour.COLUMNS).
+ * @return {!Blockly.FieldColour} Returns itself (for method chaining).
+ */
+Blockly.FieldColour.prototype.setColumns = function(columns) {
+  this.columns_ = columns;
+  return this;
+};
+
+/**
+ * Create a palette under the colour field.
+ * @private
+ */
+Blockly.FieldColour.prototype.showEditor_ = function() {
+  Blockly.WidgetDiv.show(this, this.sourceBlock_.RTL,
+      Blockly.FieldColour.widgetDispose_);
+  // Create the palette using Closure.
+  var picker = new goog.ui.ColorPicker();
+  picker.setSize(this.columns_ || Blockly.FieldColour.COLUMNS);
+  picker.setColors(this.colours_ || Blockly.FieldColour.COLOURS);
+
+  // Position the palette to line up with the field.
+  // Record windowSize and scrollOffset before adding the palette.
+  var windowSize = goog.dom.getViewportSize();
+  var scrollOffset = goog.style.getViewportPageOffset(document);
+  var xy = this.getAbsoluteXY_();
+  var borderBBox = this.getScaledBBox_();
+  var div = Blockly.WidgetDiv.DIV;
+  picker.render(div);
+  picker.setSelectedColor(this.getValue());
+  // Record paletteSize after adding the palette.
+  var paletteSize = goog.style.getSize(picker.getElement());
+
+  // Flip the palette vertically if off the bottom.
+  if (xy.y + paletteSize.height + borderBBox.height >=
+      windowSize.height + scrollOffset.y) {
+    xy.y -= paletteSize.height - 1;
+  } else {
+    xy.y += borderBBox.height - 1;
+  }
+  if (this.sourceBlock_.RTL) {
+    xy.x += borderBBox.width;
+    xy.x -= paletteSize.width;
+    // Don't go offscreen left.
+    if (xy.x < scrollOffset.x) {
+      xy.x = scrollOffset.x;
+    }
+  } else {
+    // Don't go offscreen right.
+    if (xy.x > windowSize.width + scrollOffset.x - paletteSize.width) {
+      xy.x = windowSize.width + scrollOffset.x - paletteSize.width;
+    }
+  }
+  Blockly.WidgetDiv.position(xy.x, xy.y, windowSize, scrollOffset,
+                             this.sourceBlock_.RTL);
+
+  // Configure event handler.
+  var thisField = this;
+  Blockly.FieldColour.changeEventKey_ = goog.events.listen(picker,
+      goog.ui.ColorPicker.EventType.CHANGE,
+      function(event) {
+        var colour = event.target.getSelectedColor() || '#000000';
+        Blockly.WidgetDiv.hide();
+        if (thisField.sourceBlock_) {
+          // Call any validation function, and allow it to override.
+          colour = thisField.callValidator(colour);
+        }
+        if (colour !== null) {
+          thisField.setValue(colour);
+        }
+      });
+};
+
+/**
+ * Hide the colour palette.
+ * @private
+ */
+Blockly.FieldColour.widgetDispose_ = function() {
+  if (Blockly.FieldColour.changeEventKey_) {
+    goog.events.unlistenByKey(Blockly.FieldColour.changeEventKey_);
+  }
+};
diff --git a/blockly/core/field_date.js b/blockly/core/field_date.js
new file mode 100644
index 0000000..24f3239
--- /dev/null
+++ b/blockly/core/field_date.js
@@ -0,0 +1,346 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2015 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Date input field.
+ * @author pkendall64@gmail.com (Paul Kendall)
+ */
+'use strict';
+
+goog.provide('Blockly.FieldDate');
+
+goog.require('Blockly.Field');
+goog.require('goog.date');
+goog.require('goog.dom');
+goog.require('goog.events');
+goog.require('goog.i18n.DateTimeSymbols');
+goog.require('goog.i18n.DateTimeSymbols_he');
+goog.require('goog.style');
+goog.require('goog.ui.DatePicker');
+
+
+/**
+ * Class for a date input field.
+ * @param {string} date The initial date.
+ * @param {Function=} opt_validator A function that is executed when a new
+ *     date is selected.  Its sole argument is the new date value.  Its
+ *     return value becomes the selected date, unless it is undefined, in
+ *     which case the new date stands, or it is null, in which case the change
+ *     is aborted.
+ * @extends {Blockly.Field}
+ * @constructor
+ */
+Blockly.FieldDate = function(date, opt_validator) {
+  if (!date) {
+    date = new goog.date.Date().toIsoString(true);
+  }
+  Blockly.FieldDate.superClass_.constructor.call(this, date, opt_validator);
+  this.setValue(date);
+};
+goog.inherits(Blockly.FieldDate, Blockly.Field);
+
+/**
+ * Mouse cursor style when over the hotspot that initiates the editor.
+ */
+Blockly.FieldDate.prototype.CURSOR = 'text';
+
+/**
+ * Close the colour picker if this input is being deleted.
+ */
+Blockly.FieldDate.prototype.dispose = function() {
+  Blockly.WidgetDiv.hideIfOwner(this);
+  Blockly.FieldDate.superClass_.dispose.call(this);
+};
+
+/**
+ * Return the current date.
+ * @return {string} Current date.
+ */
+Blockly.FieldDate.prototype.getValue = function() {
+  return this.date_;
+};
+
+/**
+ * Set the date.
+ * @param {string} date The new date.
+ */
+Blockly.FieldDate.prototype.setValue = function(date) {
+  if (this.sourceBlock_) {
+    var validated = this.callValidator(date);
+    // If the new date is invalid, validation returns null.
+    // In this case we still want to display the illegal result.
+    if (validated !== null) {
+      date = validated;
+    }
+  }
+  this.date_ = date;
+  Blockly.Field.prototype.setText.call(this, date);
+};
+
+/**
+ * Create a date picker under the date field.
+ * @private
+ */
+Blockly.FieldDate.prototype.showEditor_ = function() {
+  Blockly.WidgetDiv.show(this, this.sourceBlock_.RTL,
+      Blockly.FieldDate.widgetDispose_);
+  // Create the date picker using Closure.
+  Blockly.FieldDate.loadLanguage_();
+  var picker = new goog.ui.DatePicker();
+  picker.setAllowNone(false);
+  picker.setShowWeekNum(false);
+
+  // Position the picker to line up with the field.
+  // Record windowSize and scrollOffset before adding the picker.
+  var windowSize = goog.dom.getViewportSize();
+  var scrollOffset = goog.style.getViewportPageOffset(document);
+  var xy = this.getAbsoluteXY_();
+  var borderBBox = this.getScaledBBox_();
+  var div = Blockly.WidgetDiv.DIV;
+  picker.render(div);
+  picker.setDate(goog.date.fromIsoString(this.getValue()));
+  // Record pickerSize after adding the date picker.
+  var pickerSize = goog.style.getSize(picker.getElement());
+
+  // Flip the picker vertically if off the bottom.
+  if (xy.y + pickerSize.height + borderBBox.height >=
+      windowSize.height + scrollOffset.y) {
+    xy.y -= pickerSize.height - 1;
+  } else {
+    xy.y += borderBBox.height - 1;
+  }
+  if (this.sourceBlock_.RTL) {
+    xy.x += borderBBox.width;
+    xy.x -= pickerSize.width;
+    // Don't go offscreen left.
+    if (xy.x < scrollOffset.x) {
+      xy.x = scrollOffset.x;
+    }
+  } else {
+    // Don't go offscreen right.
+    if (xy.x > windowSize.width + scrollOffset.x - pickerSize.width) {
+      xy.x = windowSize.width + scrollOffset.x - pickerSize.width;
+    }
+  }
+  Blockly.WidgetDiv.position(xy.x, xy.y, windowSize, scrollOffset,
+                             this.sourceBlock_.RTL);
+
+  // Configure event handler.
+  var thisField = this;
+  Blockly.FieldDate.changeEventKey_ = goog.events.listen(picker,
+      goog.ui.DatePicker.Events.CHANGE,
+      function(event) {
+        var date = event.date ? event.date.toIsoString(true) : '';
+        Blockly.WidgetDiv.hide();
+        if (thisField.sourceBlock_) {
+          // Call any validation function, and allow it to override.
+          date = thisField.callValidator(date);
+        }
+        thisField.setValue(date);
+      });
+};
+
+/**
+ * Hide the date picker.
+ * @private
+ */
+Blockly.FieldDate.widgetDispose_ = function() {
+  if (Blockly.FieldDate.changeEventKey_) {
+    goog.events.unlistenByKey(Blockly.FieldDate.changeEventKey_);
+  }
+};
+
+/**
+ * Load the best language pack by scanning the Blockly.Msg object for a
+ * language that matches the available languages in Closure.
+ * @private
+ */
+Blockly.FieldDate.loadLanguage_ = function() {
+  var reg = /^DateTimeSymbols_(.+)$/;
+  for (var prop in goog.i18n) {
+    var m = prop.match(reg);
+    if (m) {
+      var lang = m[1].toLowerCase().replace('_', '.');  // E.g. 'pt.br'
+      if (goog.getObjectByName(lang, Blockly.Msg)) {
+        goog.i18n.DateTimeSymbols = goog.i18n[prop];
+      }
+    }
+  }
+};
+
+/**
+ * CSS for date picker.  See css.js for use.
+ */
+Blockly.FieldDate.CSS = [
+  /* Copied from: goog/css/datepicker.css */
+  /**
+   * Copyright 2009 The Closure Library Authors. All Rights Reserved.
+   *
+   * Use of this source code is governed by the Apache License, Version 2.0.
+   * See the COPYING file for details.
+   */
+
+  /**
+   * Standard styling for a goog.ui.DatePicker.
+   *
+   * @author arv@google.com (Erik Arvidsson)
+   */
+
+  '.blocklyWidgetDiv .goog-date-picker,',
+  '.blocklyWidgetDiv .goog-date-picker th,',
+  '.blocklyWidgetDiv .goog-date-picker td {',
+  '  font: 13px Arial, sans-serif;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker {',
+  '  -moz-user-focus: normal;',
+  '  -moz-user-select: none;',
+  '  position: relative;',
+  '  border: 1px solid #000;',
+  '  float: left;',
+  '  padding: 2px;',
+  '  color: #000;',
+  '  background: #c3d9ff;',
+  '  cursor: default;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker th {',
+  '  text-align: center;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker td {',
+  '  text-align: center;',
+  '  vertical-align: middle;',
+  '  padding: 1px 3px;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker-menu {',
+  '  position: absolute;',
+  '  background: threedface;',
+  '  border: 1px solid gray;',
+  '  -moz-user-focus: normal;',
+  '  z-index: 1;',
+  '  outline: none;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker-menu ul {',
+  '  list-style: none;',
+  '  margin: 0px;',
+  '  padding: 0px;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker-menu ul li {',
+  '  cursor: default;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker-menu-selected {',
+  '  background: #ccf;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker th {',
+  '  font-size: .9em;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker td div {',
+  '  float: left;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker button {',
+  '  padding: 0px;',
+  '  margin: 1px 0;',
+  '  border: 0;',
+  '  color: #20c;',
+  '  font-weight: bold;',
+  '  background: transparent;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker-date {',
+  '  background: #fff;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker-week,',
+  '.blocklyWidgetDiv .goog-date-picker-wday {',
+  '  padding: 1px 3px;',
+  '  border: 0;',
+  '  border-color: #a2bbdd;',
+  '  border-style: solid;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker-week {',
+  '  border-right-width: 1px;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker-wday {',
+  '  border-bottom-width: 1px;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker-head td {',
+  '  text-align: center;',
+  '}',
+
+  /** Use td.className instead of !important */
+  '.blocklyWidgetDiv td.goog-date-picker-today-cont {',
+  '  text-align: center;',
+  '}',
+
+  /** Use td.className instead of !important */
+  '.blocklyWidgetDiv td.goog-date-picker-none-cont {',
+  '  text-align: center;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker-month {',
+  '  min-width: 11ex;',
+  '  white-space: nowrap;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker-year {',
+  '  min-width: 6ex;',
+  '  white-space: nowrap;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker-monthyear {',
+  '  white-space: nowrap;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker table {',
+  '  border-collapse: collapse;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker-other-month {',
+  '  color: #888;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker-wkend-start,',
+  '.blocklyWidgetDiv .goog-date-picker-wkend-end {',
+  '  background: #eee;',
+  '}',
+
+  /** Use td.className instead of !important */
+  '.blocklyWidgetDiv td.goog-date-picker-selected {',
+  '  background: #c3d9ff;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker-today {',
+  '  background: #9ab;',
+  '  font-weight: bold !important;',
+  '  border-color: #246 #9bd #9bd #246;',
+  '  color: #fff;',
+  '}'
+];
diff --git a/blockly/core/field_dropdown.js b/blockly/core/field_dropdown.js
new file mode 100644
index 0000000..ec3dd4f
--- /dev/null
+++ b/blockly/core/field_dropdown.js
@@ -0,0 +1,320 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2012 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Dropdown input field.  Used for editable titles and variables.
+ * In the interests of a consistent UI, the toolbox shares some functions and
+ * properties with the context menu.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.FieldDropdown');
+
+goog.require('Blockly.Field');
+goog.require('goog.dom');
+goog.require('goog.events');
+goog.require('goog.style');
+goog.require('goog.ui.Menu');
+goog.require('goog.ui.MenuItem');
+goog.require('goog.userAgent');
+
+
+/**
+ * Class for an editable dropdown field.
+ * @param {(!Array.<!Array.<string>>|!Function)} menuGenerator An array of
+ *     options for a dropdown list, or a function which generates these options.
+ * @param {Function=} opt_validator A function that is executed when a new
+ *     option is selected, with the newly selected value as its sole argument.
+ *     If it returns a value, that value (which must be one of the options) will
+ *     become selected in place of the newly selected option, unless the return
+ *     value is null, in which case the change is aborted.
+ * @extends {Blockly.Field}
+ * @constructor
+ */
+Blockly.FieldDropdown = function(menuGenerator, opt_validator) {
+  this.menuGenerator_ = menuGenerator;
+  this.trimOptions_();
+  var firstTuple = this.getOptions_()[0];
+
+  // Call parent's constructor.
+  Blockly.FieldDropdown.superClass_.constructor.call(this, firstTuple[1],
+      opt_validator);
+};
+goog.inherits(Blockly.FieldDropdown, Blockly.Field);
+
+/**
+ * Horizontal distance that a checkmark ovehangs the dropdown.
+ */
+Blockly.FieldDropdown.CHECKMARK_OVERHANG = 25;
+
+/**
+ * Android can't (in 2014) display "▾", so use "▼" instead.
+ */
+Blockly.FieldDropdown.ARROW_CHAR = goog.userAgent.ANDROID ? '\u25BC' : '\u25BE';
+
+/**
+ * Mouse cursor style when over the hotspot that initiates the editor.
+ */
+Blockly.FieldDropdown.prototype.CURSOR = 'default';
+
+/**
+ * Install this dropdown on a block.
+ */
+Blockly.FieldDropdown.prototype.init = function() {
+  if (this.fieldGroup_) {
+    // Dropdown has already been initialized once.
+    return;
+  }
+  // Add dropdown arrow: "option ▾" (LTR) or "▾ אופציה" (RTL)
+  this.arrow_ = Blockly.createSvgElement('tspan', {}, null);
+  this.arrow_.appendChild(document.createTextNode(
+      this.sourceBlock_.RTL ? Blockly.FieldDropdown.ARROW_CHAR + ' ' :
+          ' ' + Blockly.FieldDropdown.ARROW_CHAR));
+
+  Blockly.FieldDropdown.superClass_.init.call(this);
+  // Force a reset of the text to add the arrow.
+  var text = this.text_;
+  this.text_ = null;
+  this.setText(text);
+};
+
+/**
+ * Create a dropdown menu under the text.
+ * @private
+ */
+Blockly.FieldDropdown.prototype.showEditor_ = function() {
+  Blockly.WidgetDiv.show(this, this.sourceBlock_.RTL, null);
+  var thisField = this;
+
+  function callback(e) {
+    var menuItem = e.target;
+    if (menuItem) {
+      var value = menuItem.getValue();
+      if (thisField.sourceBlock_) {
+        // Call any validation function, and allow it to override.
+        value = thisField.callValidator(value);
+      }
+      if (value !== null) {
+        thisField.setValue(value);
+      }
+    }
+    Blockly.WidgetDiv.hideIfOwner(thisField);
+  }
+
+  var menu = new goog.ui.Menu();
+  menu.setRightToLeft(this.sourceBlock_.RTL);
+  var options = this.getOptions_();
+  for (var i = 0; i < options.length; i++) {
+    var text = options[i][0];  // Human-readable text.
+    var value = options[i][1]; // Language-neutral value.
+    var menuItem = new goog.ui.MenuItem(text);
+    menuItem.setRightToLeft(this.sourceBlock_.RTL);
+    menuItem.setValue(value);
+    menuItem.setCheckable(true);
+    menu.addChild(menuItem, true);
+    menuItem.setChecked(value == this.value_);
+  }
+  // Listen for mouse/keyboard events.
+  goog.events.listen(menu, goog.ui.Component.EventType.ACTION, callback);
+  // Listen for touch events (why doesn't Closure handle this already?).
+  function callbackTouchStart(e) {
+    var control = this.getOwnerControl(/** @type {Node} */ (e.target));
+    // Highlight the menu item.
+    control.handleMouseDown(e);
+  }
+  function callbackTouchEnd(e) {
+    var control = this.getOwnerControl(/** @type {Node} */ (e.target));
+    // Activate the menu item.
+    control.performActionInternal(e);
+  }
+  menu.getHandler().listen(menu.getElement(), goog.events.EventType.TOUCHSTART,
+                           callbackTouchStart);
+  menu.getHandler().listen(menu.getElement(), goog.events.EventType.TOUCHEND,
+                           callbackTouchEnd);
+
+  // Record windowSize and scrollOffset before adding menu.
+  var windowSize = goog.dom.getViewportSize();
+  var scrollOffset = goog.style.getViewportPageOffset(document);
+  var xy = this.getAbsoluteXY_();
+  var borderBBox = this.getScaledBBox_();
+  var div = Blockly.WidgetDiv.DIV;
+  menu.render(div);
+  var menuDom = menu.getElement();
+  Blockly.addClass_(menuDom, 'blocklyDropdownMenu');
+  // Record menuSize after adding menu.
+  var menuSize = goog.style.getSize(menuDom);
+  // Recalculate height for the total content, not only box height.
+  menuSize.height = menuDom.scrollHeight;
+
+  // Position the menu.
+  // Flip menu vertically if off the bottom.
+  if (xy.y + menuSize.height + borderBBox.height >=
+      windowSize.height + scrollOffset.y) {
+    xy.y -= menuSize.height + 2;
+  } else {
+    xy.y += borderBBox.height;
+  }
+  if (this.sourceBlock_.RTL) {
+    xy.x += borderBBox.width;
+    xy.x += Blockly.FieldDropdown.CHECKMARK_OVERHANG;
+    // Don't go offscreen left.
+    if (xy.x < scrollOffset.x + menuSize.width) {
+      xy.x = scrollOffset.x + menuSize.width;
+    }
+  } else {
+    xy.x -= Blockly.FieldDropdown.CHECKMARK_OVERHANG;
+    // Don't go offscreen right.
+    if (xy.x > windowSize.width + scrollOffset.x - menuSize.width) {
+      xy.x = windowSize.width + scrollOffset.x - menuSize.width;
+    }
+  }
+  Blockly.WidgetDiv.position(xy.x, xy.y, windowSize, scrollOffset,
+                             this.sourceBlock_.RTL);
+  menu.setAllowAutoFocus(true);
+  menuDom.focus();
+};
+
+/**
+ * Factor out common words in statically defined options.
+ * Create prefix and/or suffix labels.
+ * @private
+ */
+Blockly.FieldDropdown.prototype.trimOptions_ = function() {
+  this.prefixField = null;
+  this.suffixField = null;
+  var options = this.menuGenerator_;
+  if (!goog.isArray(options) || options.length < 2) {
+    return;
+  }
+  var strings = options.map(function(t) {return t[0];});
+  var shortest = Blockly.shortestStringLength(strings);
+  var prefixLength = Blockly.commonWordPrefix(strings, shortest);
+  var suffixLength = Blockly.commonWordSuffix(strings, shortest);
+  if (!prefixLength && !suffixLength) {
+    return;
+  }
+  if (shortest <= prefixLength + suffixLength) {
+    // One or more strings will entirely vanish if we proceed.  Abort.
+    return;
+  }
+  if (prefixLength) {
+    this.prefixField = strings[0].substring(0, prefixLength - 1);
+  }
+  if (suffixLength) {
+    this.suffixField = strings[0].substr(1 - suffixLength);
+  }
+  // Remove the prefix and suffix from the options.
+  var newOptions = [];
+  for (var i = 0; i < options.length; i++) {
+    var text = options[i][0];
+    var value = options[i][1];
+    text = text.substring(prefixLength, text.length - suffixLength);
+    newOptions[i] = [text, value];
+  }
+  this.menuGenerator_ = newOptions;
+};
+
+/**
+ * Return a list of the options for this dropdown.
+ * @return {!Array.<!Array.<string>>} Array of option tuples:
+ *     (human-readable text, language-neutral name).
+ * @private
+ */
+Blockly.FieldDropdown.prototype.getOptions_ = function() {
+  if (goog.isFunction(this.menuGenerator_)) {
+    return this.menuGenerator_.call(this);
+  }
+  return /** @type {!Array.<!Array.<string>>} */ (this.menuGenerator_);
+};
+
+/**
+ * Get the language-neutral value from this dropdown menu.
+ * @return {string} Current text.
+ */
+Blockly.FieldDropdown.prototype.getValue = function() {
+  return this.value_;
+};
+
+/**
+ * Set the language-neutral value for this dropdown menu.
+ * @param {string} newValue New value to set.
+ */
+Blockly.FieldDropdown.prototype.setValue = function(newValue) {
+  if (newValue === null || newValue === this.value_) {
+    return;  // No change if null.
+  }
+  if (this.sourceBlock_ && Blockly.Events.isEnabled()) {
+    Blockly.Events.fire(new Blockly.Events.Change(
+        this.sourceBlock_, 'field', this.name, this.value_, newValue));
+  }
+  this.value_ = newValue;
+  // Look up and display the human-readable text.
+  var options = this.getOptions_();
+  for (var i = 0; i < options.length; i++) {
+    // Options are tuples of human-readable text and language-neutral values.
+    if (options[i][1] == newValue) {
+      this.setText(options[i][0]);
+      return;
+    }
+  }
+  // Value not found.  Add it, maybe it will become valid once set
+  // (like variable names).
+  this.setText(newValue);
+};
+
+/**
+ * Set the text in this field.  Trigger a rerender of the source block.
+ * @param {?string} text New text.
+ */
+Blockly.FieldDropdown.prototype.setText = function(text) {
+  if (this.sourceBlock_ && this.arrow_) {
+    // Update arrow's colour.
+    this.arrow_.style.fill = this.sourceBlock_.getColour();
+  }
+  if (text === null || text === this.text_) {
+    // No change if null.
+    return;
+  }
+  this.text_ = text;
+  this.updateTextNode_();
+
+  if (this.textElement_) {
+    // Insert dropdown arrow.
+    if (this.sourceBlock_.RTL) {
+      this.textElement_.insertBefore(this.arrow_, this.textElement_.firstChild);
+    } else {
+      this.textElement_.appendChild(this.arrow_);
+    }
+  }
+
+  if (this.sourceBlock_ && this.sourceBlock_.rendered) {
+    this.sourceBlock_.render();
+    this.sourceBlock_.bumpNeighbours_();
+  }
+};
+
+/**
+ * Close the dropdown menu if this input is being deleted.
+ */
+Blockly.FieldDropdown.prototype.dispose = function() {
+  Blockly.WidgetDiv.hideIfOwner(this);
+  Blockly.FieldDropdown.superClass_.dispose.call(this);
+};
diff --git a/blockly/core/field_image.js b/blockly/core/field_image.js
new file mode 100644
index 0000000..71d8052
--- /dev/null
+++ b/blockly/core/field_image.js
@@ -0,0 +1,171 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2012 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Image field.  Used for titles, labels, etc.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.FieldImage');
+
+goog.require('Blockly.Field');
+goog.require('goog.dom');
+goog.require('goog.math.Size');
+goog.require('goog.userAgent');
+
+
+/**
+ * Class for an image.
+ * @param {string} src The URL of the image.
+ * @param {number} width Width of the image.
+ * @param {number} height Height of the image.
+ * @param {string=} opt_alt Optional alt text for when block is collapsed.
+ * @extends {Blockly.Field}
+ * @constructor
+ */
+Blockly.FieldImage = function(src, width, height, opt_alt) {
+  this.sourceBlock_ = null;
+  // Ensure height and width are numbers.  Strings are bad at math.
+  this.height_ = Number(height);
+  this.width_ = Number(width);
+  this.size_ = new goog.math.Size(this.width_,
+      this.height_ + 2 * Blockly.BlockSvg.INLINE_PADDING_Y);
+  this.text_ = opt_alt || '';
+  this.setValue(src);
+};
+goog.inherits(Blockly.FieldImage, Blockly.Field);
+
+/**
+ * Rectangular mask used by Firefox.
+ * @type {Element}
+ * @private
+ */
+Blockly.FieldImage.prototype.rectElement_ = null;
+
+/**
+ * Editable fields are saved by the XML renderer, non-editable fields are not.
+ */
+Blockly.FieldImage.prototype.EDITABLE = false;
+
+/**
+ * Install this image on a block.
+ */
+Blockly.FieldImage.prototype.init = function() {
+  if (this.fieldGroup_) {
+    // Image has already been initialized once.
+    return;
+  }
+  // Build the DOM.
+  /** @type {SVGElement} */
+  this.fieldGroup_ = Blockly.createSvgElement('g', {}, null);
+  if (!this.visible_) {
+    this.fieldGroup_.style.display = 'none';
+  }
+  /** @type {SVGElement} */
+  this.imageElement_ = Blockly.createSvgElement('image',
+      {'height': this.height_ + 'px',
+       'width': this.width_ + 'px'}, this.fieldGroup_);
+  this.setValue(this.src_);
+  if (goog.userAgent.GECKO) {
+    /**
+     * Due to a Firefox bug which eats mouse events on image elements,
+     * a transparent rectangle needs to be placed on top of the image.
+     * @type {SVGElement}
+     */
+    this.rectElement_ = Blockly.createSvgElement('rect',
+        {'height': this.height_ + 'px',
+         'width': this.width_ + 'px',
+         'fill-opacity': 0}, this.fieldGroup_);
+  }
+  this.sourceBlock_.getSvgRoot().appendChild(this.fieldGroup_);
+
+  // Configure the field to be transparent with respect to tooltips.
+  var topElement = this.rectElement_ || this.imageElement_;
+  topElement.tooltip = this.sourceBlock_;
+  Blockly.Tooltip.bindMouseEvents(topElement);
+};
+
+/**
+ * Dispose of all DOM objects belonging to this text.
+ */
+Blockly.FieldImage.prototype.dispose = function() {
+  goog.dom.removeNode(this.fieldGroup_);
+  this.fieldGroup_ = null;
+  this.imageElement_ = null;
+  this.rectElement_ = null;
+};
+
+/**
+ * Change the tooltip text for this field.
+ * @param {string|!Element} newTip Text for tooltip or a parent element to
+ *     link to for its tooltip.
+ */
+Blockly.FieldImage.prototype.setTooltip = function(newTip) {
+  var topElement = this.rectElement_ || this.imageElement_;
+  topElement.tooltip = newTip;
+};
+
+/**
+ * Get the source URL of this image.
+ * @return {string} Current text.
+ * @override
+ */
+Blockly.FieldImage.prototype.getValue = function() {
+  return this.src_;
+};
+
+/**
+ * Set the source URL of this image.
+ * @param {?string} src New source.
+ * @override
+ */
+Blockly.FieldImage.prototype.setValue = function(src) {
+  if (src === null) {
+    // No change if null.
+    return;
+  }
+  this.src_ = src;
+  if (this.imageElement_) {
+    this.imageElement_.setAttributeNS('http://www.w3.org/1999/xlink',
+        'xlink:href', goog.isString(src) ? src : '');
+  }
+};
+
+/**
+ * Set the alt text of this image.
+ * @param {?string} alt New alt text.
+ * @override
+ */
+Blockly.FieldImage.prototype.setText = function(alt) {
+  if (alt === null) {
+    // No change if null.
+    return;
+  }
+  this.text_ = alt;
+};
+
+/**
+ * Images are fixed width, no need to render.
+ * @private
+ */
+Blockly.FieldImage.prototype.render_ = function() {
+  // NOP
+};
diff --git a/blockly/core/field_label.js b/blockly/core/field_label.js
new file mode 100644
index 0000000..cb5fa7d
--- /dev/null
+++ b/blockly/core/field_label.js
@@ -0,0 +1,104 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2012 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Non-editable text field.  Used for titles, labels, etc.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.FieldLabel');
+
+goog.require('Blockly.Field');
+goog.require('Blockly.Tooltip');
+goog.require('goog.dom');
+goog.require('goog.math.Size');
+
+
+/**
+ * Class for a non-editable field.
+ * @param {string} text The initial content of the field.
+ * @param {string=} opt_class Optional CSS class for the field's text.
+ * @extends {Blockly.Field}
+ * @constructor
+ */
+Blockly.FieldLabel = function(text, opt_class) {
+  this.size_ = new goog.math.Size(0, 17.5);
+  this.class_ = opt_class;
+  this.setValue(text);
+};
+goog.inherits(Blockly.FieldLabel, Blockly.Field);
+
+/**
+ * Editable fields are saved by the XML renderer, non-editable fields are not.
+ */
+Blockly.FieldLabel.prototype.EDITABLE = false;
+
+/**
+ * Install this text on a block.
+ */
+Blockly.FieldLabel.prototype.init = function() {
+  if (this.textElement_) {
+    // Text has already been initialized once.
+    return;
+  }
+  // Build the DOM.
+  this.textElement_ = Blockly.createSvgElement('text',
+      {'class': 'blocklyText', 'y': this.size_.height - 5}, null);
+  if (this.class_) {
+    Blockly.addClass_(this.textElement_, this.class_);
+  }
+  if (!this.visible_) {
+    this.textElement_.style.display = 'none';
+  }
+  this.sourceBlock_.getSvgRoot().appendChild(this.textElement_);
+
+  // Configure the field to be transparent with respect to tooltips.
+  this.textElement_.tooltip = this.sourceBlock_;
+  Blockly.Tooltip.bindMouseEvents(this.textElement_);
+  // Force a render.
+  this.updateTextNode_();
+};
+
+/**
+ * Dispose of all DOM objects belonging to this text.
+ */
+Blockly.FieldLabel.prototype.dispose = function() {
+  goog.dom.removeNode(this.textElement_);
+  this.textElement_ = null;
+};
+
+/**
+ * Gets the group element for this field.
+ * Used for measuring the size and for positioning.
+ * @return {!Element} The group element.
+ */
+Blockly.FieldLabel.prototype.getSvgRoot = function() {
+  return /** @type {!Element} */ (this.textElement_);
+};
+
+/**
+ * Change the tooltip text for this field.
+ * @param {string|!Element} newTip Text for tooltip or a parent element to
+ *     link to for its tooltip.
+ */
+Blockly.FieldLabel.prototype.setTooltip = function(newTip) {
+  this.textElement_.tooltip = newTip;
+};
diff --git a/blockly/core/field_number.js b/blockly/core/field_number.js
new file mode 100644
index 0000000..f72e7f0
--- /dev/null
+++ b/blockly/core/field_number.js
@@ -0,0 +1,101 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2016 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Number input field
+ * @author fenichel@google.com (Rachel Fenichel)
+ */
+'use strict';
+
+goog.provide('Blockly.FieldNumber');
+
+goog.require('Blockly.FieldTextInput');
+goog.require('goog.math');
+
+/**
+ * Class for an editable number field.
+ * @param {number|string} value The initial content of the field.
+ * @param {number|string|undefined} opt_min Minimum value.
+ * @param {number|string|undefined} opt_max Maximum value.
+ * @param {number|string|undefined} opt_precision Precision for value.
+ * @param {Function=} opt_validator An optional function that is called
+ *     to validate any constraints on what the user entered.  Takes the new
+ *     text as an argument and returns either the accepted text, a replacement
+ *     text, or null to abort the change.
+ * @extends {Blockly.FieldTextInput}
+ * @constructor
+ */
+Blockly.FieldNumber =
+    function(value, opt_min, opt_max, opt_precision, opt_validator) {
+  value = String(value);
+  Blockly.FieldNumber.superClass_.constructor.call(this, value, opt_validator);
+  this.setConstraints(opt_min, opt_max, opt_precision);
+};
+goog.inherits(Blockly.FieldNumber, Blockly.FieldTextInput);
+
+/**
+ * Set the maximum, minimum and precision constraints on this field.
+ * Any of these properties may be undefiend or NaN to be disabled.
+ * Setting precision (usually a power of 10) enforces a minimum step between
+ * values. That is, the user's value will rounded to the closest multiple of
+ * precision. The least significant digit place is inferred from the precision.
+ * Integers values can be enforces by choosing an integer precision.
+ * @param {number|string|undefined} min Minimum value.
+ * @param {number|string|undefined} max Maximum value.
+ * @param {number|string|undefined} precision Precision for value.
+ */
+Blockly.FieldNumber.prototype.setConstraints = function(min, max, precision) {
+  precision = parseFloat(precision);
+  this.precision_ = isNaN(precision) ? 0 : precision;
+  min = parseFloat(min);
+  this.min_ = isNaN(min) ? -Infinity : min;
+  max = parseFloat(max);
+  this.max_ = isNaN(max) ? Infinity : max;
+  this.setValue(this.callValidator(this.getValue()));
+};
+
+/**
+ * Ensure that only a number in the correct range may be entered.
+ * @param {string} text The user's text.
+ * @return {?string} A string representing a valid number, or null if invalid.
+ */
+Blockly.FieldNumber.prototype.classValidator = function(text) {
+  if (text === null) {
+    return null;
+  }
+  text = String(text);
+  // TODO: Handle cases like 'ten', '1.203,14', etc.
+  // 'O' is sometimes mistaken for '0' by inexperienced users.
+  text = text.replace(/O/ig, '0');
+  // Strip out thousands separators.
+  text = text.replace(/,/g, '');
+  var n = parseFloat(text || 0);
+  if (isNaN(n)) {
+    // Invalid number.
+    return null;
+  }
+  // Round to nearest multiple of precision.
+  if (this.precision_ && isFinite(n)) {
+    n = Math.round(n / this.precision_) * this.precision_;
+  }
+  // Get the value in range.
+  n = goog.math.clamp(n, this.min_, this.max_);
+  return String(n);
+};
diff --git a/blockly/core/field_textinput.js b/blockly/core/field_textinput.js
new file mode 100644
index 0000000..5af8bf9
--- /dev/null
+++ b/blockly/core/field_textinput.js
@@ -0,0 +1,327 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2012 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Text input field.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.FieldTextInput');
+
+goog.require('Blockly.Field');
+goog.require('Blockly.Msg');
+goog.require('goog.asserts');
+goog.require('goog.dom');
+goog.require('goog.dom.TagName');
+goog.require('goog.userAgent');
+
+
+/**
+ * Class for an editable text field.
+ * @param {string} text The initial content of the field.
+ * @param {Function=} opt_validator An optional function that is called
+ *     to validate any constraints on what the user entered.  Takes the new
+ *     text as an argument and returns either the accepted text, a replacement
+ *     text, or null to abort the change.
+ * @extends {Blockly.Field}
+ * @constructor
+ */
+Blockly.FieldTextInput = function(text, opt_validator) {
+  Blockly.FieldTextInput.superClass_.constructor.call(this, text,
+      opt_validator);
+};
+goog.inherits(Blockly.FieldTextInput, Blockly.Field);
+
+/**
+ * Point size of text.  Should match blocklyText's font-size in CSS.
+ */
+Blockly.FieldTextInput.FONTSIZE = 11;
+
+/**
+ * Mouse cursor style when over the hotspot that initiates the editor.
+ */
+Blockly.FieldTextInput.prototype.CURSOR = 'text';
+
+/**
+ * Allow browser to spellcheck this field.
+ * @private
+ */
+Blockly.FieldTextInput.prototype.spellcheck_ = true;
+
+/**
+ * Close the input widget if this input is being deleted.
+ */
+Blockly.FieldTextInput.prototype.dispose = function() {
+  Blockly.WidgetDiv.hideIfOwner(this);
+  Blockly.FieldTextInput.superClass_.dispose.call(this);
+};
+
+/**
+ * Set the text in this field.
+ * @param {?string} text New text.
+ * @override
+ */
+Blockly.FieldTextInput.prototype.setValue = function(text) {
+  if (text === null) {
+    return;  // No change if null.
+  }
+  if (this.sourceBlock_) {
+    var validated = this.callValidator(text);
+    // If the new text is invalid, validation returns null.
+    // In this case we still want to display the illegal result.
+    if (validated !== null) {
+      text = validated;
+    }
+  }
+  Blockly.Field.prototype.setValue.call(this, text);
+};
+
+/**
+ * Set whether this field is spellchecked by the browser.
+ * @param {boolean} check True if checked.
+ */
+Blockly.FieldTextInput.prototype.setSpellcheck = function(check) {
+  this.spellcheck_ = check;
+};
+
+/**
+ * Show the inline free-text editor on top of the text.
+ * @param {boolean=} opt_quietInput True if editor should be created without
+ *     focus.  Defaults to false.
+ * @private
+ */
+Blockly.FieldTextInput.prototype.showEditor_ = function(opt_quietInput) {
+  this.workspace_ = this.sourceBlock_.workspace;
+  var quietInput = opt_quietInput || false;
+  if (!quietInput && (goog.userAgent.MOBILE || goog.userAgent.ANDROID ||
+                      goog.userAgent.IPAD)) {
+    // Mobile browsers have issues with in-line textareas (focus & keyboards).
+    var newValue = window.prompt(Blockly.Msg.CHANGE_VALUE_TITLE, this.text_);
+    if (this.sourceBlock_) {
+      newValue = this.callValidator(newValue);
+    }
+    this.setValue(newValue);
+    return;
+  }
+
+  Blockly.WidgetDiv.show(this, this.sourceBlock_.RTL, this.widgetDispose_());
+  var div = Blockly.WidgetDiv.DIV;
+  // Create the input.
+  var htmlInput =
+      goog.dom.createDom(goog.dom.TagName.INPUT, 'blocklyHtmlInput');
+  htmlInput.setAttribute('spellcheck', this.spellcheck_);
+  var fontSize =
+      (Blockly.FieldTextInput.FONTSIZE * this.workspace_.scale) + 'pt';
+  div.style.fontSize = fontSize;
+  htmlInput.style.fontSize = fontSize;
+  /** @type {!HTMLInputElement} */
+  Blockly.FieldTextInput.htmlInput_ = htmlInput;
+  div.appendChild(htmlInput);
+
+  htmlInput.value = htmlInput.defaultValue = this.text_;
+  htmlInput.oldValue_ = null;
+  this.validate_();
+  this.resizeEditor_();
+  if (!quietInput) {
+    htmlInput.focus();
+    htmlInput.select();
+  }
+
+  // Bind to keydown -- trap Enter without IME and Esc to hide.
+  htmlInput.onKeyDownWrapper_ =
+      Blockly.bindEvent_(htmlInput, 'keydown', this, this.onHtmlInputKeyDown_);
+  // Bind to keyup -- trap Enter; resize after every keystroke.
+  htmlInput.onKeyUpWrapper_ =
+      Blockly.bindEvent_(htmlInput, 'keyup', this, this.onHtmlInputChange_);
+  // Bind to keyPress -- repeatedly resize when holding down a key.
+  htmlInput.onKeyPressWrapper_ =
+      Blockly.bindEvent_(htmlInput, 'keypress', this, this.onHtmlInputChange_);
+  htmlInput.onWorkspaceChangeWrapper_ = this.resizeEditor_.bind(this);
+  this.workspace_.addChangeListener(htmlInput.onWorkspaceChangeWrapper_);
+};
+
+/**
+ * Handle key down to the editor.
+ * @param {!Event} e Keyboard event.
+ * @private
+ */
+Blockly.FieldTextInput.prototype.onHtmlInputKeyDown_ = function(e) {
+  var htmlInput = Blockly.FieldTextInput.htmlInput_;
+  var tabKey = 9, enterKey = 13, escKey = 27;
+  if (e.keyCode == enterKey) {
+    Blockly.WidgetDiv.hide();
+  } else if (e.keyCode == escKey) {
+    htmlInput.value = htmlInput.defaultValue;
+    Blockly.WidgetDiv.hide();
+  } else if (e.keyCode == tabKey) {
+    Blockly.WidgetDiv.hide();
+    this.sourceBlock_.tab(this, !e.shiftKey);
+    e.preventDefault();
+  }
+};
+
+/**
+ * Handle a change to the editor.
+ * @param {!Event} e Keyboard event.
+ * @private
+ */
+Blockly.FieldTextInput.prototype.onHtmlInputChange_ = function(e) {
+  var htmlInput = Blockly.FieldTextInput.htmlInput_;
+  // Update source block.
+  var text = htmlInput.value;
+  if (text !== htmlInput.oldValue_) {
+    htmlInput.oldValue_ = text;
+    this.setValue(text);
+    this.validate_();
+  } else if (goog.userAgent.WEBKIT) {
+    // Cursor key.  Render the source block to show the caret moving.
+    // Chrome only (version 26, OS X).
+    this.sourceBlock_.render();
+  }
+  this.resizeEditor_();
+  Blockly.svgResize(this.sourceBlock_.workspace);
+};
+
+/**
+ * Check to see if the contents of the editor validates.
+ * Style the editor accordingly.
+ * @private
+ */
+Blockly.FieldTextInput.prototype.validate_ = function() {
+  var valid = true;
+  goog.asserts.assertObject(Blockly.FieldTextInput.htmlInput_);
+  var htmlInput = Blockly.FieldTextInput.htmlInput_;
+  if (this.sourceBlock_) {
+    valid = this.callValidator(htmlInput.value);
+  }
+  if (valid === null) {
+    Blockly.addClass_(htmlInput, 'blocklyInvalidInput');
+  } else {
+    Blockly.removeClass_(htmlInput, 'blocklyInvalidInput');
+  }
+};
+
+/**
+ * Resize the editor and the underlying block to fit the text.
+ * @private
+ */
+Blockly.FieldTextInput.prototype.resizeEditor_ = function() {
+  var div = Blockly.WidgetDiv.DIV;
+  var bBox = this.fieldGroup_.getBBox();
+  div.style.width = bBox.width * this.workspace_.scale + 'px';
+  div.style.height = bBox.height * this.workspace_.scale + 'px';
+  var xy = this.getAbsoluteXY_();
+  // In RTL mode block fields and LTR input fields the left edge moves,
+  // whereas the right edge is fixed.  Reposition the editor.
+  if (this.sourceBlock_.RTL) {
+    var borderBBox = this.getScaledBBox_();
+    xy.x += borderBBox.width;
+    xy.x -= div.offsetWidth;
+  }
+  // Shift by a few pixels to line up exactly.
+  xy.y += 1;
+  if (goog.userAgent.GECKO && Blockly.WidgetDiv.DIV.style.top) {
+    // Firefox mis-reports the location of the border by a pixel
+    // once the WidgetDiv is moved into position.
+    xy.x -= 1;
+    xy.y -= 1;
+  }
+  if (goog.userAgent.WEBKIT) {
+    xy.y -= 3;
+  }
+  div.style.left = xy.x + 'px';
+  div.style.top = xy.y + 'px';
+};
+
+/**
+ * Close the editor, save the results, and dispose of the editable
+ * text field's elements.
+ * @return {!Function} Closure to call on destruction of the WidgetDiv.
+ * @private
+ */
+Blockly.FieldTextInput.prototype.widgetDispose_ = function() {
+  var thisField = this;
+  return function() {
+    var htmlInput = Blockly.FieldTextInput.htmlInput_;
+    // Save the edit (if it validates).
+    var text = htmlInput.value;
+    if (thisField.sourceBlock_) {
+      var text1 = thisField.callValidator(text);
+      if (text1 === null) {
+        // Invalid edit.
+        text = htmlInput.defaultValue;
+      } else {
+        // Validation function has changed the text.
+        text = text1;
+        if (thisField.onFinishEditing_) {
+          thisField.onFinishEditing_(text);
+        }
+      }
+    }
+    thisField.setValue(text);
+    thisField.sourceBlock_.rendered && thisField.sourceBlock_.render();
+    Blockly.unbindEvent_(htmlInput.onKeyDownWrapper_);
+    Blockly.unbindEvent_(htmlInput.onKeyUpWrapper_);
+    Blockly.unbindEvent_(htmlInput.onKeyPressWrapper_);
+    thisField.workspace_.removeChangeListener(
+        htmlInput.onWorkspaceChangeWrapper_);
+    Blockly.FieldTextInput.htmlInput_ = null;
+    // Delete style properties.
+    var style = Blockly.WidgetDiv.DIV.style;
+    style.width = 'auto';
+    style.height = 'auto';
+    style.fontSize = '';
+  };
+};
+
+/**
+ * Ensure that only a number may be entered.
+ * @param {string} text The user's text.
+ * @return {?string} A string representing a valid number, or null if invalid.
+ */
+Blockly.FieldTextInput.numberValidator = function(text) {
+  console.warn('Blockly.FieldTextInput.numberValidator is deprecated. ' +
+               'Use Blockly.FieldNumber instead.');
+  if (text === null) {
+    return null;
+  }
+  text = String(text);
+  // TODO: Handle cases like 'ten', '1.203,14', etc.
+  // 'O' is sometimes mistaken for '0' by inexperienced users.
+  text = text.replace(/O/ig, '0');
+  // Strip out thousands separators.
+  text = text.replace(/,/g, '');
+  var n = parseFloat(text || 0);
+  return isNaN(n) ? null : String(n);
+};
+
+/**
+ * Ensure that only a nonnegative integer may be entered.
+ * @param {string} text The user's text.
+ * @return {?string} A string representing a valid int, or null if invalid.
+ */
+Blockly.FieldTextInput.nonnegativeIntegerValidator = function(text) {
+  var n = Blockly.FieldTextInput.numberValidator(text);
+  if (n) {
+    n = String(Math.max(0, Math.floor(n)));
+  }
+  return n;
+};
diff --git a/blockly/core/field_variable.js b/blockly/core/field_variable.js
new file mode 100644
index 0000000..f93caa1
--- /dev/null
+++ b/blockly/core/field_variable.js
@@ -0,0 +1,155 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2012 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Variable input field.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.FieldVariable');
+
+goog.require('Blockly.FieldDropdown');
+goog.require('Blockly.Msg');
+goog.require('Blockly.Variables');
+goog.require('goog.string');
+
+
+/**
+ * Class for a variable's dropdown field.
+ * @param {?string} varname The default name for the variable.  If null,
+ *     a unique variable name will be generated.
+ * @param {Function=} opt_validator A function that is executed when a new
+ *     option is selected.  Its sole argument is the new option value.
+ * @extends {Blockly.FieldDropdown}
+ * @constructor
+ */
+Blockly.FieldVariable = function(varname, opt_validator) {
+  Blockly.FieldVariable.superClass_.constructor.call(this,
+      Blockly.FieldVariable.dropdownCreate, opt_validator);
+  this.setValue(varname || '');
+};
+goog.inherits(Blockly.FieldVariable, Blockly.FieldDropdown);
+
+/**
+ * Install this dropdown on a block.
+ */
+Blockly.FieldVariable.prototype.init = function() {
+  if (this.fieldGroup_) {
+    // Dropdown has already been initialized once.
+    return;
+  }
+  Blockly.FieldVariable.superClass_.init.call(this);
+  if (!this.getValue()) {
+    // Variables without names get uniquely named for this workspace.
+    var workspace =
+        this.sourceBlock_.isInFlyout ?
+            this.sourceBlock_.workspace.targetWorkspace :
+            this.sourceBlock_.workspace;
+    this.setValue(Blockly.Variables.generateUniqueName(workspace));
+  }
+  // If the selected variable doesn't exist yet, create it.
+  // For instance, some blocks in the toolbox have variable dropdowns filled
+  // in by default.
+  if (!this.sourceBlock_.isInFlyout) {
+    this.sourceBlock_.workspace.createVariable(this.getValue());
+  }
+};
+
+/**
+ * Get the variable's name (use a variableDB to convert into a real name).
+ * Unline a regular dropdown, variables are literal and have no neutral value.
+ * @return {string} Current text.
+ */
+Blockly.FieldVariable.prototype.getValue = function() {
+  return this.getText();
+};
+
+/**
+ * Set the variable name.
+ * @param {string} newValue New text.
+ */
+Blockly.FieldVariable.prototype.setValue = function(newValue) {
+  if (this.sourceBlock_ && Blockly.Events.isEnabled()) {
+    Blockly.Events.fire(new Blockly.Events.Change(
+        this.sourceBlock_, 'field', this.name, this.value_, newValue));
+  }
+  this.value_ = newValue;
+  this.setText(newValue);
+};
+
+/**
+ * Return a sorted list of variable names for variable dropdown menus.
+ * Include a special option at the end for creating a new variable name.
+ * @return {!Array.<string>} Array of variable names.
+ * @this {!Blockly.FieldVariable}
+ */
+Blockly.FieldVariable.dropdownCreate = function() {
+  if (this.sourceBlock_ && this.sourceBlock_.workspace) {
+    // Get a copy of the list, so that adding rename and new variable options
+    // doesn't modify the workspace's list.
+    var variableList = this.sourceBlock_.workspace.variableList.slice(0);
+  } else {
+    var variableList = [];
+  }
+  // Ensure that the currently selected variable is an option.
+  var name = this.getText();
+  if (name && variableList.indexOf(name) == -1) {
+    variableList.push(name);
+  }
+  variableList.sort(goog.string.caseInsensitiveCompare);
+  variableList.push(Blockly.Msg.RENAME_VARIABLE);
+  variableList.push(Blockly.Msg.DELETE_VARIABLE.replace('%1', name));
+  // Variables are not language-specific, use the name as both the user-facing
+  // text and the internal representation.
+  var options = [];
+  for (var i = 0; i < variableList.length; i++) {
+    options[i] = [variableList[i], variableList[i]];
+  }
+  return options;
+};
+
+/**
+ * Event handler for a change in variable name.
+ * Special case the 'Rename variable...' and 'Delete variable...' options.
+ * In the rename case, prompt the user for a new name.
+ * @param {string} text The selected dropdown menu option.
+ * @return {null|undefined|string} An acceptable new variable name, or null if
+ *     change is to be either aborted (cancel button) or has been already
+ *     handled (rename), or undefined if an existing variable was chosen.
+ */
+Blockly.FieldVariable.prototype.classValidator = function(text) {
+  var workspace = this.sourceBlock_.workspace;
+  if (text == Blockly.Msg.RENAME_VARIABLE) {
+    var oldVar = this.getText();
+    Blockly.hideChaff();
+    text = Blockly.Variables.promptName(
+        Blockly.Msg.RENAME_VARIABLE_TITLE.replace('%1', oldVar), oldVar);
+    if (text) {
+      workspace.renameVariable(oldVar, text);
+    }
+    return null;
+  } else if (text == Blockly.Msg.DELETE_VARIABLE.replace('%1',
+      this.getText())) {
+    workspace.deleteVariable(this.getText());
+    return null;
+  }
+  return undefined;
+};
diff --git a/blockly/core/flyout.js b/blockly/core/flyout.js
new file mode 100644
index 0000000..03ea150
--- /dev/null
+++ b/blockly/core/flyout.js
@@ -0,0 +1,1364 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2011 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Flyout tray containing blocks which may be created.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.Flyout');
+
+goog.require('Blockly.Block');
+goog.require('Blockly.Comment');
+goog.require('Blockly.Events');
+goog.require('Blockly.FlyoutButton');
+goog.require('Blockly.WorkspaceSvg');
+goog.require('goog.dom');
+goog.require('goog.events');
+goog.require('goog.math.Rect');
+goog.require('goog.userAgent');
+
+
+/**
+ * Class for a flyout.
+ * @param {!Object} workspaceOptions Dictionary of options for the workspace.
+ * @constructor
+ */
+Blockly.Flyout = function(workspaceOptions) {
+  workspaceOptions.getMetrics = this.getMetrics_.bind(this);
+  workspaceOptions.setMetrics = this.setMetrics_.bind(this);
+  /**
+   * @type {!Blockly.Workspace}
+   * @private
+   */
+  this.workspace_ = new Blockly.WorkspaceSvg(workspaceOptions);
+  this.workspace_.isFlyout = true;
+
+  /**
+   * Is RTL vs LTR.
+   * @type {boolean}
+   */
+  this.RTL = !!workspaceOptions.RTL;
+
+  /**
+   * Flyout should be laid out horizontally vs vertically.
+   * @type {boolean}
+   * @private
+   */
+  this.horizontalLayout_ = workspaceOptions.horizontalLayout;
+
+  /**
+   * Position of the toolbox and flyout relative to the workspace.
+   * @type {number}
+   * @private
+   */
+  this.toolboxPosition_ = workspaceOptions.toolboxPosition;
+
+  /**
+   * Opaque data that can be passed to Blockly.unbindEvent_.
+   * @type {!Array.<!Array>}
+   * @private
+   */
+  this.eventWrappers_ = [];
+
+  /**
+   * List of background buttons that lurk behind each block to catch clicks
+   * landing in the blocks' lakes and bays.
+   * @type {!Array.<!Element>}
+   * @private
+   */
+  this.backgroundButtons_ = [];
+
+  /**
+   * List of visible buttons.
+   * @type {!Array.<!Blockly.FlyoutButton>}
+   * @private
+   */
+  this.buttons_ = [];
+
+  /**
+   * List of event listeners.
+   * @type {!Array.<!Array>}
+   * @private
+   */
+  this.listeners_ = [];
+
+  /**
+   * List of blocks that should always be disabled.
+   * @type {!Array.<!Blockly.Block>}
+   * @private
+   */
+  this.permanentlyDisabled_ = [];
+
+  /**
+   * y coordinate of mousedown - used to calculate scroll distances.
+   * @private {number}
+   */
+  this.startDragMouseY_ = 0;
+
+  /**
+   * x coordinate of mousedown - used to calculate scroll distances.
+   * @private {number}
+   */
+  this.startDragMouseX_ = 0;
+};
+
+/**
+ * When a flyout drag is in progress, this is a reference to the flyout being
+ * dragged. This is used by Flyout.terminateDrag_ to reset dragMode_.
+ * @private {Blockly.Flyout}
+ */
+Blockly.Flyout.startFlyout_ = null;
+
+/**
+ * Event that started a drag. Used to determine the drag distance/direction and
+ * also passed to BlockSvg.onMouseDown_() after creating a new block.
+ * @private {Event}
+ */
+Blockly.Flyout.startDownEvent_ = null;
+
+/**
+ * Flyout block where the drag/click was initiated. Used to fire click events or
+ * create a new block.
+ * @private {Event}
+ */
+Blockly.Flyout.startBlock_ = null;
+
+/**
+ * Wrapper function called when a mouseup occurs during a background or block
+ * drag operation.
+ * @private {Array.<!Array>}
+ */
+Blockly.Flyout.onMouseUpWrapper_ = null;
+
+/**
+ * Wrapper function called when a mousemove occurs during a background drag.
+ * @private {Array.<!Array>}
+ */
+Blockly.Flyout.onMouseMoveWrapper_ = null;
+
+/**
+ * Wrapper function called when a mousemove occurs during a block drag.
+ * @private {Array.<!Array>}
+ */
+Blockly.Flyout.onMouseMoveBlockWrapper_ = null;
+
+/**
+ * Does the flyout automatically close when a block is created?
+ * @type {boolean}
+ */
+Blockly.Flyout.prototype.autoClose = true;
+
+/**
+ * Corner radius of the flyout background.
+ * @type {number}
+ * @const
+ */
+Blockly.Flyout.prototype.CORNER_RADIUS = 8;
+
+/**
+ * Number of pixels the mouse must move before a drag/scroll starts. Because the
+ * drag-intention is determined when this is reached, it is larger than
+ * Blockly.DRAG_RADIUS so that the drag-direction is clearer.
+ */
+Blockly.Flyout.prototype.DRAG_RADIUS = 10;
+
+/**
+ * Margin around the edges of the blocks in the flyout.
+ * @type {number}
+ * @const
+ */
+Blockly.Flyout.prototype.MARGIN = Blockly.Flyout.prototype.CORNER_RADIUS;
+
+/**
+ * Gap between items in horizontal flyouts. Can be overridden with the "sep"
+ * element.
+ * @const {number}
+ */
+Blockly.Flyout.prototype.GAP_X = Blockly.Flyout.prototype.MARGIN * 3;
+
+/**
+ * Gap between items in vertical flyouts. Can be overridden with the "sep"
+ * element.
+ * @const {number}
+ */
+Blockly.Flyout.prototype.GAP_Y = Blockly.Flyout.prototype.MARGIN * 3;
+
+/**
+ * Top/bottom padding between scrollbar and edge of flyout background.
+ * @type {number}
+ * @const
+ */
+Blockly.Flyout.prototype.SCROLLBAR_PADDING = 2;
+
+/**
+ * Width of flyout.
+ * @type {number}
+ * @private
+ */
+Blockly.Flyout.prototype.width_ = 0;
+
+/**
+ * Height of flyout.
+ * @type {number}
+ * @private
+ */
+Blockly.Flyout.prototype.height_ = 0;
+
+/**
+ * Is the flyout dragging (scrolling)?
+ * DRAG_NONE - no drag is ongoing or state is undetermined.
+ * DRAG_STICKY - still within the sticky drag radius.
+ * DRAG_FREE - in scroll mode (never create a new block).
+ * @private
+ */
+Blockly.Flyout.prototype.dragMode_ = Blockly.DRAG_NONE;
+
+/**
+ * Range of a drag angle from a flyout considered "dragging toward workspace".
+ * Drags that are within the bounds of this many degrees from the orthogonal
+ * line to the flyout edge are considered to be "drags toward the workspace".
+ * Example:
+ * Flyout                                                  Edge   Workspace
+ * [block] /  <-within this angle, drags "toward workspace" |
+ * [block] ---- orthogonal to flyout boundary ----          |
+ * [block] \                                                |
+ * The angle is given in degrees from the orthogonal.
+ *
+ * This is used to know when to create a new block and when to scroll the
+ * flyout. Setting it to 360 means that all drags create a new block.
+ * @type {number}
+ * @private
+*/
+Blockly.Flyout.prototype.dragAngleRange_ = 70;
+
+/**
+ * Creates the flyout's DOM.  Only needs to be called once.
+ * @return {!Element} The flyout's SVG group.
+ */
+Blockly.Flyout.prototype.createDom = function() {
+  /*
+  <g>
+    <path class="blocklyFlyoutBackground"/>
+    <g class="blocklyFlyout"></g>
+  </g>
+  */
+  this.svgGroup_ = Blockly.createSvgElement('g',
+      {'class': 'blocklyFlyout'}, null);
+  this.svgBackground_ = Blockly.createSvgElement('path',
+      {'class': 'blocklyFlyoutBackground'}, this.svgGroup_);
+  this.svgGroup_.appendChild(this.workspace_.createDom());
+  return this.svgGroup_;
+};
+
+/**
+ * Initializes the flyout.
+ * @param {!Blockly.Workspace} targetWorkspace The workspace in which to create
+ *     new blocks.
+ */
+Blockly.Flyout.prototype.init = function(targetWorkspace) {
+  this.targetWorkspace_ = targetWorkspace;
+  this.workspace_.targetWorkspace = targetWorkspace;
+  // Add scrollbar.
+  this.scrollbar_ = new Blockly.Scrollbar(this.workspace_,
+      this.horizontalLayout_, false);
+
+  this.hide();
+
+  Array.prototype.push.apply(this.eventWrappers_,
+      Blockly.bindEvent_(this.svgGroup_, 'wheel', this, this.wheel_));
+  if (!this.autoClose) {
+    this.filterWrapper_ = this.filterForCapacity_.bind(this);
+    this.targetWorkspace_.addChangeListener(this.filterWrapper_);
+  }
+  // Dragging the flyout up and down.
+  Array.prototype.push.apply(this.eventWrappers_,
+      Blockly.bindEvent_(this.svgGroup_, 'mousedown', this, this.onMouseDown_));
+};
+
+/**
+ * Dispose of this flyout.
+ * Unlink from all DOM elements to prevent memory leaks.
+ */
+Blockly.Flyout.prototype.dispose = function() {
+  this.hide();
+  Blockly.unbindEvent_(this.eventWrappers_);
+  if (this.filterWrapper_) {
+    this.targetWorkspace_.removeChangeListener(this.filterWrapper_);
+    this.filterWrapper_ = null;
+  }
+  if (this.scrollbar_) {
+    this.scrollbar_.dispose();
+    this.scrollbar_ = null;
+  }
+  if (this.workspace_) {
+    this.workspace_.targetWorkspace = null;
+    this.workspace_.dispose();
+    this.workspace_ = null;
+  }
+  if (this.svgGroup_) {
+    goog.dom.removeNode(this.svgGroup_);
+    this.svgGroup_ = null;
+  }
+  this.svgBackground_ = null;
+  this.targetWorkspace_ = null;
+};
+
+/**
+ * Get the width of the flyout.
+ * @return {number} The width of the flyout.
+ */
+Blockly.Flyout.prototype.getWidth = function() {
+  return this.width_;
+};
+
+/**
+ * Get the height of the flyout.
+ * @return {number} The width of the flyout.
+ */
+Blockly.Flyout.prototype.getHeight = function() {
+  return this.height_;
+};
+
+/**
+ * Return an object with all the metrics required to size scrollbars for the
+ * flyout.  The following properties are computed:
+ * .viewHeight: Height of the visible rectangle,
+ * .viewWidth: Width of the visible rectangle,
+ * .contentHeight: Height of the contents,
+ * .contentWidth: Width of the contents,
+ * .viewTop: Offset of top edge of visible rectangle from parent,
+ * .contentTop: Offset of the top-most content from the y=0 coordinate,
+ * .absoluteTop: Top-edge of view.
+ * .viewLeft: Offset of the left edge of visible rectangle from parent,
+ * .contentLeft: Offset of the left-most content from the x=0 coordinate,
+ * .absoluteLeft: Left-edge of view.
+ * @return {Object} Contains size and position metrics of the flyout.
+ * @private
+ */
+Blockly.Flyout.prototype.getMetrics_ = function() {
+  if (!this.isVisible()) {
+    // Flyout is hidden.
+    return null;
+  }
+
+  try {
+    var optionBox = this.workspace_.getCanvas().getBBox();
+  } catch (e) {
+    // Firefox has trouble with hidden elements (Bug 528969).
+    var optionBox = {height: 0, y: 0, width: 0, x: 0};
+  }
+
+  var absoluteTop = this.SCROLLBAR_PADDING;
+  var absoluteLeft = this.SCROLLBAR_PADDING;
+  if (this.horizontalLayout_) {
+    if (this.toolboxPosition_ == Blockly.TOOLBOX_AT_BOTTOM) {
+      absoluteTop = 0;
+    }
+    var viewHeight = this.height_;
+    if (this.toolboxPosition_ == Blockly.TOOLBOX_AT_TOP) {
+      viewHeight += this.MARGIN - this.SCROLLBAR_PADDING;
+    }
+    var viewWidth = this.width_ - 2 * this.SCROLLBAR_PADDING;
+  } else {
+    absoluteLeft = 0;
+    var viewHeight = this.height_ - 2 * this.SCROLLBAR_PADDING;
+    var viewWidth = this.width_;
+    if (!this.RTL) {
+      viewWidth -= this.SCROLLBAR_PADDING;
+    }
+  }
+
+  var metrics = {
+    viewHeight: viewHeight,
+    viewWidth: viewWidth,
+    contentHeight: (optionBox.height + 2 * this.MARGIN) * this.workspace_.scale,
+    contentWidth: (optionBox.width + 2 * this.MARGIN) * this.workspace_.scale,
+    viewTop: -this.workspace_.scrollY,
+    viewLeft: -this.workspace_.scrollX,
+    contentTop: optionBox.y,
+    contentLeft: optionBox.x,
+    absoluteTop: absoluteTop,
+    absoluteLeft: absoluteLeft
+  };
+  return metrics;
+};
+
+/**
+ * Sets the translation of the flyout to match the scrollbars.
+ * @param {!Object} xyRatio Contains a y property which is a float
+ *     between 0 and 1 specifying the degree of scrolling and a
+ *     similar x property.
+ * @private
+ */
+Blockly.Flyout.prototype.setMetrics_ = function(xyRatio) {
+  var metrics = this.getMetrics_();
+  // This is a fix to an apparent race condition.
+  if (!metrics) {
+    return;
+  }
+  if (!this.horizontalLayout_ && goog.isNumber(xyRatio.y)) {
+    this.workspace_.scrollY = -metrics.contentHeight * xyRatio.y;
+  } else if (this.horizontalLayout_ && goog.isNumber(xyRatio.x)) {
+    this.workspace_.scrollX = -metrics.contentWidth * xyRatio.x;
+  }
+
+  this.workspace_.translate(this.workspace_.scrollX + metrics.absoluteLeft,
+      this.workspace_.scrollY + metrics.absoluteTop);
+};
+
+/**
+ * Move the flyout to the edge of the workspace.
+ */
+Blockly.Flyout.prototype.position = function() {
+  if (!this.isVisible()) {
+    return;
+  }
+  var targetWorkspaceMetrics = this.targetWorkspace_.getMetrics();
+  if (!targetWorkspaceMetrics) {
+    // Hidden components will return null.
+    return;
+  }
+  var edgeWidth = this.horizontalLayout_ ?
+      targetWorkspaceMetrics.viewWidth : this.width_;
+  edgeWidth -= this.CORNER_RADIUS;
+  if (this.toolboxPosition_ == Blockly.TOOLBOX_AT_RIGHT) {
+    edgeWidth *= -1;
+  }
+
+  this.setBackgroundPath_(edgeWidth,
+      this.horizontalLayout_ ? this.height_ :
+      targetWorkspaceMetrics.viewHeight);
+
+  var x = targetWorkspaceMetrics.absoluteLeft;
+  if (this.toolboxPosition_ == Blockly.TOOLBOX_AT_RIGHT) {
+    x += targetWorkspaceMetrics.viewWidth;
+    x -= this.width_;
+  }
+
+  var y = targetWorkspaceMetrics.absoluteTop;
+  if (this.toolboxPosition_ == Blockly.TOOLBOX_AT_BOTTOM) {
+    y += targetWorkspaceMetrics.viewHeight;
+    y -= this.height_;
+  }
+
+  this.svgGroup_.setAttribute('transform', 'translate(' + x + ',' + y + ')');
+
+  // Record the height for Blockly.Flyout.getMetrics_, or width if the layout is
+  // horizontal.
+  if (this.horizontalLayout_) {
+    this.width_ = targetWorkspaceMetrics.viewWidth;
+  } else {
+    this.height_ = targetWorkspaceMetrics.viewHeight;
+  }
+
+  // Update the scrollbar (if one exists).
+  if (this.scrollbar_) {
+    this.scrollbar_.resize();
+  }
+};
+
+/**
+ * Create and set the path for the visible boundaries of the flyout.
+ * @param {number} width The width of the flyout, not including the
+ *     rounded corners.
+ * @param {number} height The height of the flyout, not including
+ *     rounded corners.
+ * @private
+ */
+Blockly.Flyout.prototype.setBackgroundPath_ = function(width, height) {
+  if (this.horizontalLayout_) {
+    this.setBackgroundPathHorizontal_(width, height);
+  } else {
+    this.setBackgroundPathVertical_(width, height);
+  }
+};
+
+/**
+ * Create and set the path for the visible boundaries of the flyout in vertical
+ * mode.
+ * @param {number} width The width of the flyout, not including the
+ *     rounded corners.
+ * @param {number} height The height of the flyout, not including
+ *     rounded corners.
+ * @private
+ */
+Blockly.Flyout.prototype.setBackgroundPathVertical_ = function(width, height) {
+  var atRight = this.toolboxPosition_ == Blockly.TOOLBOX_AT_RIGHT;
+  // Decide whether to start on the left or right.
+  var path = ['M ' + (atRight ? this.width_ : 0) + ',0'];
+  // Top.
+  path.push('h', width);
+  // Rounded corner.
+  path.push('a', this.CORNER_RADIUS, this.CORNER_RADIUS, 0, 0,
+      atRight ? 0 : 1,
+      atRight ? -this.CORNER_RADIUS : this.CORNER_RADIUS,
+      this.CORNER_RADIUS);
+  // Side closest to workspace.
+  path.push('v', Math.max(0, height - this.CORNER_RADIUS * 2));
+  // Rounded corner.
+  path.push('a', this.CORNER_RADIUS, this.CORNER_RADIUS, 0, 0,
+      atRight ? 0 : 1,
+      atRight ? this.CORNER_RADIUS : -this.CORNER_RADIUS,
+      this.CORNER_RADIUS);
+  // Bottom.
+  path.push('h', -width);
+  path.push('z');
+  this.svgBackground_.setAttribute('d', path.join(' '));
+};
+
+/**
+ * Create and set the path for the visible boundaries of the flyout in
+ * horizontal mode.
+ * @param {number} width The width of the flyout, not including the
+ *     rounded corners.
+ * @param {number} height The height of the flyout, not including
+ *     rounded corners.
+ * @private
+ */
+Blockly.Flyout.prototype.setBackgroundPathHorizontal_ = function(width,
+    height) {
+  var atTop = this.toolboxPosition_ == Blockly.TOOLBOX_AT_TOP;
+  // Start at top left.
+  var path = ['M 0,' + (atTop ? 0 : this.CORNER_RADIUS)];
+
+  if (atTop) {
+    // Top.
+    path.push('h', width + this.CORNER_RADIUS);
+    // Right.
+    path.push('v', height);
+    // Bottom.
+    path.push('a', this.CORNER_RADIUS, this.CORNER_RADIUS, 0, 0, 1,
+        -this.CORNER_RADIUS, this.CORNER_RADIUS);
+    path.push('h', -1 * (width - this.CORNER_RADIUS));
+    // Left.
+    path.push('a', this.CORNER_RADIUS, this.CORNER_RADIUS, 0, 0, 1,
+        -this.CORNER_RADIUS, -this.CORNER_RADIUS);
+    path.push('z');
+  } else {
+    // Top.
+    path.push('a', this.CORNER_RADIUS, this.CORNER_RADIUS, 0, 0, 1,
+        this.CORNER_RADIUS, -this.CORNER_RADIUS);
+    path.push('h', width - this.CORNER_RADIUS);
+     // Right.
+    path.push('a', this.CORNER_RADIUS, this.CORNER_RADIUS, 0, 0, 1,
+        this.CORNER_RADIUS, this.CORNER_RADIUS);
+    path.push('v', height - this.CORNER_RADIUS);
+    // Bottom.
+    path.push('h', -width - this.CORNER_RADIUS);
+    // Left.
+    path.push('z');
+  }
+  this.svgBackground_.setAttribute('d', path.join(' '));
+};
+
+/**
+ * Scroll the flyout to the top.
+ */
+Blockly.Flyout.prototype.scrollToStart = function() {
+  this.scrollbar_.set((this.horizontalLayout_ && this.RTL) ? Infinity : 0);
+};
+
+/**
+ * Scroll the flyout.
+ * @param {!Event} e Mouse wheel scroll event.
+ * @private
+ */
+Blockly.Flyout.prototype.wheel_ = function(e) {
+  var delta = this.horizontalLayout_ ? e.deltaX : e.deltaY;
+
+  if (delta) {
+    if (goog.userAgent.GECKO) {
+      // Firefox's deltas are a tenth that of Chrome/Safari.
+      delta *= 10;
+    }
+    var metrics = this.getMetrics_();
+    var pos = this.horizontalLayout_ ? metrics.viewLeft + delta :
+        metrics.viewTop + delta;
+    var limit = this.horizontalLayout_ ?
+        metrics.contentWidth - metrics.viewWidth :
+        metrics.contentHeight - metrics.viewHeight;
+    pos = Math.min(pos, limit);
+    pos = Math.max(pos, 0);
+    this.scrollbar_.set(pos);
+  }
+
+  // Don't scroll the page.
+  e.preventDefault();
+  // Don't propagate mousewheel event (zooming).
+  e.stopPropagation();
+};
+
+/**
+ * Is the flyout visible?
+ * @return {boolean} True if visible.
+ */
+Blockly.Flyout.prototype.isVisible = function() {
+  return this.svgGroup_ && this.svgGroup_.style.display == 'block';
+};
+
+/**
+ * Hide and empty the flyout.
+ */
+Blockly.Flyout.prototype.hide = function() {
+  if (!this.isVisible()) {
+    return;
+  }
+  this.svgGroup_.style.display = 'none';
+  // Delete all the event listeners.
+  for (var x = 0, listen; listen = this.listeners_[x]; x++) {
+    Blockly.unbindEvent_(listen);
+  }
+  this.listeners_.length = 0;
+  if (this.reflowWrapper_) {
+    this.workspace_.removeChangeListener(this.reflowWrapper_);
+    this.reflowWrapper_ = null;
+  }
+  // Do NOT delete the blocks here.  Wait until Flyout.show.
+  // https://neil.fraser.name/news/2014/08/09/
+};
+
+/**
+ * Show and populate the flyout.
+ * @param {!Array|string} xmlList List of blocks to show.
+ *     Variables and procedures have a custom set of blocks.
+ */
+Blockly.Flyout.prototype.show = function(xmlList) {
+  this.hide();
+  this.clearOldBlocks_();
+
+  if (xmlList == Blockly.Variables.NAME_TYPE) {
+    // Special category for variables.
+    xmlList =
+        Blockly.Variables.flyoutCategory(this.workspace_.targetWorkspace);
+  } else if (xmlList == Blockly.Procedures.NAME_TYPE) {
+    // Special category for procedures.
+    xmlList =
+        Blockly.Procedures.flyoutCategory(this.workspace_.targetWorkspace);
+  }
+
+  this.svgGroup_.style.display = 'block';
+  // Create the blocks to be shown in this flyout.
+  var contents = [];
+  var gaps = [];
+  this.permanentlyDisabled_.length = 0;
+  for (var i = 0, xml; xml = xmlList[i]; i++) {
+    if (xml.tagName) {
+      var tagName = xml.tagName.toUpperCase();
+      var default_gap = this.horizontalLayout_ ? this.GAP_X : this.GAP_Y;
+      if (tagName == 'BLOCK') {
+        var curBlock = Blockly.Xml.domToBlock(xml, this.workspace_);
+        if (curBlock.disabled) {
+          // Record blocks that were initially disabled.
+          // Do not enable these blocks as a result of capacity filtering.
+          this.permanentlyDisabled_.push(curBlock);
+        }
+        contents.push({type: 'block', block: curBlock});
+        var gap = parseInt(xml.getAttribute('gap'), 10);
+        gaps.push(isNaN(gap) ? default_gap : gap);
+      } else if (xml.tagName.toUpperCase() == 'SEP') {
+        // Change the gap between two blocks.
+        // <sep gap="36"></sep>
+        // The default gap is 24, can be set larger or smaller.
+        // This overwrites the gap attribute on the previous block.
+        // Note that a deprecated method is to add a gap to a block.
+        // <block type="math_arithmetic" gap="8"></block>
+        var newGap = parseInt(xml.getAttribute('gap'), 10);
+        // Ignore gaps before the first block.
+        if (!isNaN(newGap) && gaps.length > 0) {
+          gaps[gaps.length - 1] = newGap;
+        } else {
+          gaps.push(default_gap);
+        }
+      } else if (tagName == 'BUTTON') {
+        var label = xml.getAttribute('text');
+        var curButton = new Blockly.FlyoutButton(this.workspace_,
+            this.targetWorkspace_, label);
+        contents.push({type: 'button', button: curButton});
+        gaps.push(default_gap);
+      }
+    }
+  }
+
+  this.layout_(contents, gaps);
+
+  // IE 11 is an incompetent browser that fails to fire mouseout events.
+  // When the mouse is over the background, deselect all blocks.
+  var deselectAll = function() {
+    var topBlocks = this.workspace_.getTopBlocks(false);
+    for (var i = 0, block; block = topBlocks[i]; i++) {
+      block.removeSelect();
+    }
+  };
+
+  this.listeners_.push(Blockly.bindEvent_(this.svgBackground_, 'mouseover',
+      this, deselectAll));
+
+  if (this.horizontalLayout_) {
+    this.height_ = 0;
+  } else {
+    this.width_ = 0;
+  }
+  this.reflow();
+
+  this.filterForCapacity_();
+
+  // Correctly position the flyout's scrollbar when it opens.
+  this.position();
+
+  this.reflowWrapper_ = this.reflow.bind(this);
+  this.workspace_.addChangeListener(this.reflowWrapper_);
+};
+
+/**
+ * Lay out the blocks in the flyout.
+ * @param {!Array.<!Object>} contents The blocks and buttons to lay out.
+ * @param {!Array.<number>} gaps The visible gaps between blocks.
+ * @private
+ */
+Blockly.Flyout.prototype.layout_ = function(contents, gaps) {
+  this.workspace_.scale = this.targetWorkspace_.scale;
+  var margin = this.MARGIN;
+  var cursorX = this.RTL ? margin : margin + Blockly.BlockSvg.TAB_WIDTH;
+  var cursorY = margin;
+  if (this.horizontalLayout_ && this.RTL) {
+    contents = contents.reverse();
+  }
+
+  for (var i = 0, item; item = contents[i]; i++) {
+    if (item.type == 'block') {
+      var block = item.block;
+      var allBlocks = block.getDescendants();
+      for (var j = 0, child; child = allBlocks[j]; j++) {
+        // Mark blocks as being inside a flyout.  This is used to detect and
+        // prevent the closure of the flyout if the user right-clicks on such a
+        // block.
+        child.isInFlyout = true;
+      }
+      block.render();
+      var root = block.getSvgRoot();
+      var blockHW = block.getHeightWidth();
+      var tab = block.outputConnection ? Blockly.BlockSvg.TAB_WIDTH : 0;
+      if (this.horizontalLayout_) {
+        cursorX += tab;
+      }
+      block.moveBy((this.horizontalLayout_ && this.RTL) ?
+          cursorX + blockHW.width - tab : cursorX,
+          cursorY);
+      if (this.horizontalLayout_) {
+        cursorX += (blockHW.width + gaps[i] - tab);
+      } else {
+        cursorY += blockHW.height + gaps[i];
+      }
+
+      // Create an invisible rectangle under the block to act as a button.  Just
+      // using the block as a button is poor, since blocks have holes in them.
+      var rect = Blockly.createSvgElement('rect', {'fill-opacity': 0}, null);
+      rect.tooltip = block;
+      Blockly.Tooltip.bindMouseEvents(rect);
+      // Add the rectangles under the blocks, so that the blocks' tooltips work.
+      this.workspace_.getCanvas().insertBefore(rect, block.getSvgRoot());
+      block.flyoutRect_ = rect;
+      this.backgroundButtons_[i] = rect;
+
+      this.addBlockListeners_(root, block, rect);
+    } else if (item.type == 'button') {
+      var button = item.button;
+      var buttonSvg = button.createDom();
+      button.moveTo(cursorX, cursorY);
+      button.show();
+      Blockly.bindEvent_(buttonSvg, 'mouseup', button, button.onMouseUp);
+
+      this.buttons_.push(button);
+      if (this.horizontalLayout_) {
+        cursorX += (button.width + gaps[i]);
+      } else {
+        cursorY += button.height + gaps[i];
+      }
+    }
+  }
+};
+
+/**
+ * Delete blocks and background buttons from a previous showing of the flyout.
+ * @private
+ */
+Blockly.Flyout.prototype.clearOldBlocks_ = function() {
+  // Delete any blocks from a previous showing.
+  var oldBlocks = this.workspace_.getTopBlocks(false);
+  for (var i = 0, block; block = oldBlocks[i]; i++) {
+    if (block.workspace == this.workspace_) {
+      block.dispose(false, false);
+    }
+  }
+  // Delete any background buttons from a previous showing.
+  for (var j = 0, rect; rect = this.backgroundButtons_[j]; j++) {
+    goog.dom.removeNode(rect);
+  }
+  this.backgroundButtons_.length = 0;
+
+  for (var i = 0, button; button = this.buttons_[i]; i++) {
+    button.dispose();
+  }
+  this.buttons_.length = 0;
+};
+
+/**
+ * Add listeners to a block that has been added to the flyout.
+ * @param {!Element} root The root node of the SVG group the block is in.
+ * @param {!Blockly.Block} block The block to add listeners for.
+ * @param {!Element} rect The invisible rectangle under the block that acts as
+ *     a button for that block.
+ * @private
+ */
+Blockly.Flyout.prototype.addBlockListeners_ = function(root, block, rect) {
+  this.listeners_.push(Blockly.bindEvent_(root, 'mousedown', null,
+      this.blockMouseDown_(block)));
+  this.listeners_.push(Blockly.bindEvent_(rect, 'mousedown', null,
+      this.blockMouseDown_(block)));
+  this.listeners_.push(Blockly.bindEvent_(root, 'mouseover', block,
+      block.addSelect));
+  this.listeners_.push(Blockly.bindEvent_(root, 'mouseout', block,
+      block.removeSelect));
+  this.listeners_.push(Blockly.bindEvent_(rect, 'mouseover', block,
+      block.addSelect));
+  this.listeners_.push(Blockly.bindEvent_(rect, 'mouseout', block,
+      block.removeSelect));
+};
+
+/**
+ * Handle a mouse-down on an SVG block in a non-closing flyout.
+ * @param {!Blockly.Block} block The flyout block to copy.
+ * @return {!Function} Function to call when block is clicked.
+ * @private
+ */
+Blockly.Flyout.prototype.blockMouseDown_ = function(block) {
+  var flyout = this;
+  return function(e) {
+    Blockly.terminateDrag_();
+    Blockly.hideChaff(true);
+    if (Blockly.isRightButton(e)) {
+      // Right-click.
+      block.showContextMenu_(e);
+    } else {
+      // Left-click (or middle click)
+      Blockly.Css.setCursor(Blockly.Css.Cursor.CLOSED);
+      // Record the current mouse position.
+      flyout.startDragMouseY_ = e.clientY;
+      flyout.startDragMouseX_ = e.clientX;
+      Blockly.Flyout.startDownEvent_ = e;
+      Blockly.Flyout.startBlock_ = block;
+      Blockly.Flyout.startFlyout_ = flyout;
+      Blockly.Flyout.onMouseUpWrapper_ = Blockly.bindEvent_(document,
+          'mouseup', flyout, flyout.onMouseUp_);
+      Blockly.Flyout.onMouseMoveBlockWrapper_ = Blockly.bindEvent_(document,
+          'mousemove', flyout, flyout.onMouseMoveBlock_);
+    }
+    // This event has been handled.  No need to bubble up to the document.
+    e.stopPropagation();
+    e.preventDefault();
+  };
+};
+
+/**
+ * Mouse down on the flyout background.  Start a vertical scroll drag.
+ * @param {!Event} e Mouse down event.
+ * @private
+ */
+Blockly.Flyout.prototype.onMouseDown_ = function(e) {
+  if (Blockly.isRightButton(e)) {
+    return;
+  }
+  Blockly.hideChaff(true);
+  this.dragMode_ = Blockly.DRAG_FREE;
+  this.startDragMouseY_ = e.clientY;
+  this.startDragMouseX_ = e.clientX;
+  Blockly.Flyout.startFlyout_ = this;
+  Blockly.Flyout.onMouseMoveWrapper_ = Blockly.bindEvent_(document, 'mousemove',
+      this, this.onMouseMove_);
+  Blockly.Flyout.onMouseUpWrapper_ = Blockly.bindEvent_(document, 'mouseup',
+      this, Blockly.Flyout.terminateDrag_);
+  // This event has been handled.  No need to bubble up to the document.
+  e.preventDefault();
+  e.stopPropagation();
+};
+
+/**
+ * Handle a mouse-up anywhere in the SVG pane.  Is only registered when a
+ * block is clicked.  We can't use mouseUp on the block since a fast-moving
+ * cursor can briefly escape the block before it catches up.
+ * @param {!Event} e Mouse up event.
+ * @private
+ */
+Blockly.Flyout.prototype.onMouseUp_ = function(e) {
+  if (!this.workspace_.isDragging()) {
+    if (this.autoClose) {
+      this.createBlockFunc_(Blockly.Flyout.startBlock_)(
+          Blockly.Flyout.startDownEvent_);
+    } else if (!Blockly.WidgetDiv.isVisible()) {
+      Blockly.Events.fire(
+          new Blockly.Events.Ui(Blockly.Flyout.startBlock_, 'click',
+                                undefined, undefined));
+    }
+  }
+  Blockly.terminateDrag_();
+};
+
+/**
+ * Handle a mouse-move to vertically drag the flyout.
+ * @param {!Event} e Mouse move event.
+ * @private
+ */
+Blockly.Flyout.prototype.onMouseMove_ = function(e) {
+  var metrics = this.getMetrics_();
+  if (this.horizontalLayout_) {
+    if (metrics.contentWidth - metrics.viewWidth < 0) {
+      return;
+    }
+    var dx = e.clientX - this.startDragMouseX_;
+    this.startDragMouseX_ = e.clientX;
+    var x = metrics.viewLeft - dx;
+    x = goog.math.clamp(x, 0, metrics.contentWidth - metrics.viewWidth);
+    this.scrollbar_.set(x);
+  } else {
+    if (metrics.contentHeight - metrics.viewHeight < 0) {
+      return;
+    }
+    var dy = e.clientY - this.startDragMouseY_;
+    this.startDragMouseY_ = e.clientY;
+    var y = metrics.viewTop - dy;
+    y = goog.math.clamp(y, 0, metrics.contentHeight - metrics.viewHeight);
+    this.scrollbar_.set(y);
+  }
+};
+
+/**
+ * Mouse button is down on a block in a non-closing flyout.  Create the block
+ * if the mouse moves beyond a small radius.  This allows one to play with
+ * fields without instantiating blocks that instantly self-destruct.
+ * @param {!Event} e Mouse move event.
+ * @private
+ */
+Blockly.Flyout.prototype.onMouseMoveBlock_ = function(e) {
+  if (e.type == 'mousemove' && e.clientX <= 1 && e.clientY == 0 &&
+      e.button == 0) {
+    /* HACK:
+     Safari Mobile 6.0 and Chrome for Android 18.0 fire rogue mousemove events
+     on certain touch actions. Ignore events with these signatures.
+     This may result in a one-pixel blind spot in other browsers,
+     but this shouldn't be noticeable. */
+    e.stopPropagation();
+    return;
+  }
+  var dx = e.clientX - Blockly.Flyout.startDownEvent_.clientX;
+  var dy = e.clientY - Blockly.Flyout.startDownEvent_.clientY;
+
+  var createBlock = this.determineDragIntention_(dx, dy);
+  if (createBlock) {
+    this.createBlockFunc_(Blockly.Flyout.startBlock_)(
+        Blockly.Flyout.startDownEvent_);
+  } else if (this.dragMode_ == Blockly.DRAG_FREE) {
+    // Do a scroll.
+    this.onMouseMove_(e);
+  }
+  e.stopPropagation();
+};
+
+/**
+ * Determine the intention of a drag.
+ * Updates dragMode_ based on a drag delta and the current mode,
+ * and returns true if we should create a new block.
+ * @param {number} dx X delta of the drag.
+ * @param {number} dy Y delta of the drag.
+ * @return {boolean} True if a new block should be created.
+ * @private
+ */
+Blockly.Flyout.prototype.determineDragIntention_ = function(dx, dy) {
+  if (this.dragMode_ == Blockly.DRAG_FREE) {
+    // Once in free mode, always stay in free mode and never create a block.
+    return false;
+  }
+  var dragDistance = Math.sqrt(dx * dx + dy * dy);
+  if (dragDistance < this.DRAG_RADIUS) {
+    // Still within the sticky drag radius.
+    this.dragMode_ = Blockly.DRAG_STICKY;
+    return false;
+  } else {
+    if (this.isDragTowardWorkspace_(dx, dy) || !this.scrollbar_.isVisible()) {
+      // Immediately create a block.
+      return true;
+    } else {
+      // Immediately move to free mode - the drag is away from the workspace.
+      this.dragMode_ = Blockly.DRAG_FREE;
+      return false;
+    }
+  }
+};
+
+/**
+ * Determine if a drag delta is toward the workspace, based on the position
+ * and orientation of the flyout. This is used in determineDragIntention_ to
+ * determine if a new block should be created or if the flyout should scroll.
+ * @param {number} dx X delta of the drag.
+ * @param {number} dy Y delta of the drag.
+ * @return {boolean} true if the drag is toward the workspace.
+ * @private
+ */
+Blockly.Flyout.prototype.isDragTowardWorkspace_ = function(dx, dy) {
+  // Direction goes from -180 to 180, with 0 toward the right and 90 on top.
+  var dragDirection = Math.atan2(dy, dx) / Math.PI * 180;
+
+  var draggingTowardWorkspace = false;
+  var range = this.dragAngleRange_;
+  if (this.horizontalLayout_) {
+    if (this.toolboxPosition_ == Blockly.TOOLBOX_AT_TOP) {
+      // Horizontal at top.
+      if (dragDirection < 90 + range && dragDirection > 90 - range) {
+        draggingTowardWorkspace = true;
+      }
+    } else {
+      // Horizontal at bottom.
+      if (dragDirection > -90 - range && dragDirection < -90 + range) {
+        draggingTowardWorkspace = true;
+      }
+    }
+  } else {
+    if (this.toolboxPosition_ == Blockly.TOOLBOX_AT_LEFT) {
+      // Vertical at left.
+      if (dragDirection < range && dragDirection > -range) {
+        draggingTowardWorkspace = true;
+      }
+    } else {
+      // Vertical at right.
+      if (dragDirection < -180 + range || dragDirection > 180 - range) {
+        draggingTowardWorkspace = true;
+      }
+    }
+  }
+  return draggingTowardWorkspace;
+};
+
+/**
+ * Create a copy of this block on the workspace.
+ * @param {!Blockly.Block} originBlock The flyout block to copy.
+ * @return {!Function} Function to call when block is clicked.
+ * @private
+ */
+Blockly.Flyout.prototype.createBlockFunc_ = function(originBlock) {
+  var flyout = this;
+  return function(e) {
+    if (Blockly.isRightButton(e)) {
+      // Right-click.  Don't create a block, let the context menu show.
+      return;
+    }
+    if (originBlock.disabled) {
+      // Beyond capacity.
+      return;
+    }
+    Blockly.Events.disable();
+    try {
+      var block = flyout.placeNewBlock_(originBlock);
+    } finally {
+      Blockly.Events.enable();
+    }
+    if (Blockly.Events.isEnabled()) {
+      Blockly.Events.setGroup(true);
+      Blockly.Events.fire(new Blockly.Events.Create(block));
+    }
+    if (flyout.autoClose) {
+      flyout.hide();
+    } else {
+      flyout.filterForCapacity_();
+    }
+    // Start a dragging operation on the new block.
+    block.onMouseDown_(e);
+    Blockly.dragMode_ = Blockly.DRAG_FREE;
+    block.setDragging_(true);
+  };
+};
+
+/**
+ * Copy a block from the flyout to the workspace and position it correctly.
+ * @param {!Blockly.Block} originBlock The flyout block to copy..
+ * @return {!Blockly.Block} The new block in the main workspace.
+ * @private
+ */
+Blockly.Flyout.prototype.placeNewBlock_ = function(originBlock) {
+  var targetWorkspace = this.targetWorkspace_;
+  var svgRootOld = originBlock.getSvgRoot();
+  if (!svgRootOld) {
+    throw 'originBlock is not rendered.';
+  }
+  // Figure out where the original block is on the screen, relative to the upper
+  // left corner of the main workspace.
+  var xyOld = Blockly.getSvgXY_(svgRootOld, targetWorkspace);
+  // Take into account that the flyout might have been scrolled horizontally
+  // (separately from the main workspace).
+  // Generally a no-op in vertical mode but likely to happen in horizontal
+  // mode.
+  var scrollX = this.workspace_.scrollX;
+  var scale = this.workspace_.scale;
+  xyOld.x += scrollX / scale - scrollX;
+  // If the flyout is on the right side, (0, 0) in the flyout is offset to
+  // the right of (0, 0) in the main workspace.  Add an offset to take that
+  // into account.
+  if (this.toolboxPosition_ == Blockly.TOOLBOX_AT_RIGHT) {
+    scrollX = targetWorkspace.getMetrics().viewWidth - this.width_;
+    scale = targetWorkspace.scale;
+    // Scale the scroll (getSvgXY_ did not do this).
+    xyOld.x += scrollX / scale - scrollX;
+  }
+
+  // Take into account that the flyout might have been scrolled vertically
+  // (separately from the main workspace).
+  // Generally a no-op in horizontal mode but likely to happen in vertical
+  // mode.
+  var scrollY = this.workspace_.scrollY;
+  scale = this.workspace_.scale;
+  xyOld.y += scrollY / scale - scrollY;
+  // If the flyout is on the bottom, (0, 0) in the flyout is offset to be below
+  // (0, 0) in the main workspace.  Add an offset to take that into account.
+  if (this.toolboxPosition_ == Blockly.TOOLBOX_AT_BOTTOM) {
+    scrollY = targetWorkspace.getMetrics().viewHeight - this.height_;
+    scale = targetWorkspace.scale;
+    xyOld.y += scrollY / scale - scrollY;
+  }
+
+  // Create the new block by cloning the block in the flyout (via XML).
+  var xml = Blockly.Xml.blockToDom(originBlock);
+  var block = Blockly.Xml.domToBlock(xml, targetWorkspace);
+  var svgRootNew = block.getSvgRoot();
+  if (!svgRootNew) {
+    throw 'block is not rendered.';
+  }
+  // Figure out where the new block got placed on the screen, relative to the
+  // upper left corner of the workspace.  This may not be the same as the
+  // original block because the flyout's origin may not be the same as the
+  // main workspace's origin.
+  var xyNew = Blockly.getSvgXY_(svgRootNew, targetWorkspace);
+  // Scale the scroll (getSvgXY_ did not do this).
+  xyNew.x +=
+      targetWorkspace.scrollX / targetWorkspace.scale - targetWorkspace.scrollX;
+  xyNew.y +=
+      targetWorkspace.scrollY / targetWorkspace.scale - targetWorkspace.scrollY;
+  // If the flyout is collapsible and the workspace can't be scrolled.
+  if (targetWorkspace.toolbox_ && !targetWorkspace.scrollbar) {
+    xyNew.x += targetWorkspace.toolbox_.getWidth() / targetWorkspace.scale;
+    xyNew.y += targetWorkspace.toolbox_.getHeight() / targetWorkspace.scale;
+  }
+
+  // Move the new block to where the old block is.
+  block.moveBy(xyOld.x - xyNew.x, xyOld.y - xyNew.y);
+  return block;
+};
+
+/**
+ * Filter the blocks on the flyout to disable the ones that are above the
+ * capacity limit.
+ * @private
+ */
+Blockly.Flyout.prototype.filterForCapacity_ = function() {
+  var remainingCapacity = this.targetWorkspace_.remainingCapacity();
+  var blocks = this.workspace_.getTopBlocks(false);
+  for (var i = 0, block; block = blocks[i]; i++) {
+    if (this.permanentlyDisabled_.indexOf(block) == -1) {
+      var allBlocks = block.getDescendants();
+      block.setDisabled(allBlocks.length > remainingCapacity);
+    }
+  }
+};
+
+/**
+ * Return the deletion rectangle for this flyout.
+ * @return {goog.math.Rect} Rectangle in which to delete.
+ */
+Blockly.Flyout.prototype.getClientRect = function() {
+  if (!this.svgGroup_) {
+    return null;
+  }
+
+  var flyoutRect = this.svgGroup_.getBoundingClientRect();
+  // BIG_NUM is offscreen padding so that blocks dragged beyond the shown flyout
+  // area are still deleted.  Must be larger than the largest screen size,
+  // but be smaller than half Number.MAX_SAFE_INTEGER (not available on IE).
+  var BIG_NUM = 1000000000;
+  var x = flyoutRect.left;
+  var y = flyoutRect.top;
+  var width = flyoutRect.width;
+  var height = flyoutRect.height;
+
+  if (this.toolboxPosition_ == Blockly.TOOLBOX_AT_TOP) {
+    return new goog.math.Rect(-BIG_NUM, y - BIG_NUM, BIG_NUM * 2,
+        BIG_NUM + height);
+  } else if (this.toolboxPosition_ == Blockly.TOOLBOX_AT_BOTTOM) {
+    return new goog.math.Rect(-BIG_NUM, y, BIG_NUM * 2,
+        BIG_NUM + height);
+  } else if (this.toolboxPosition_ == Blockly.TOOLBOX_AT_LEFT) {
+    return new goog.math.Rect(x - BIG_NUM, -BIG_NUM, BIG_NUM + width,
+        BIG_NUM * 2);
+  } else {  // Right
+    return new goog.math.Rect(x, -BIG_NUM, BIG_NUM + width, BIG_NUM * 2);
+  }
+};
+
+/**
+ * Stop binding to the global mouseup and mousemove events.
+ * @private
+ */
+Blockly.Flyout.terminateDrag_ = function() {
+  if (Blockly.Flyout.startFlyout_) {
+    Blockly.Flyout.startFlyout_.dragMode_ = Blockly.DRAG_NONE;
+  }
+  if (Blockly.Flyout.onMouseUpWrapper_) {
+    Blockly.unbindEvent_(Blockly.Flyout.onMouseUpWrapper_);
+    Blockly.Flyout.onMouseUpWrapper_ = null;
+  }
+  if (Blockly.Flyout.onMouseMoveBlockWrapper_) {
+    Blockly.unbindEvent_(Blockly.Flyout.onMouseMoveBlockWrapper_);
+    Blockly.Flyout.onMouseMoveBlockWrapper_ = null;
+  }
+  if (Blockly.Flyout.onMouseMoveWrapper_) {
+    Blockly.unbindEvent_(Blockly.Flyout.onMouseMoveWrapper_);
+    Blockly.Flyout.onMouseMoveWrapper_ = null;
+  }
+  Blockly.Flyout.startDownEvent_ = null;
+  Blockly.Flyout.startBlock_ = null;
+  Blockly.Flyout.startFlyout_ = null;
+};
+
+/**
+ * Compute height of flyout.  Position button under each block.
+ * For RTL: Lay out the blocks right-aligned.
+ * @param {!Array<!Blockly.Block>} blocks The blocks to reflow.
+ */
+Blockly.Flyout.prototype.reflowHorizontal = function(blocks) {
+  this.workspace_.scale = this.targetWorkspace_.scale;
+  var flyoutHeight = 0;
+  for (var i = 0, block; block = blocks[i]; i++) {
+    flyoutHeight = Math.max(flyoutHeight, block.getHeightWidth().height);
+  }
+  flyoutHeight += this.MARGIN * 1.5;
+  flyoutHeight *= this.workspace_.scale;
+  flyoutHeight += Blockly.Scrollbar.scrollbarThickness;
+  if (this.height_ != flyoutHeight) {
+    for (var i = 0, block; block = blocks[i]; i++) {
+      var blockHW = block.getHeightWidth();
+      if (block.flyoutRect_) {
+        block.flyoutRect_.setAttribute('width', blockHW.width);
+        block.flyoutRect_.setAttribute('height', blockHW.height);
+        // Rectangles behind blocks with output tabs are shifted a bit.
+        var tab = block.outputConnection ? Blockly.BlockSvg.TAB_WIDTH : 0;
+        var blockXY = block.getRelativeToSurfaceXY();
+        block.flyoutRect_.setAttribute('y', blockXY.y);
+        block.flyoutRect_.setAttribute('x',
+            this.RTL ? blockXY.x - blockHW.width + tab : blockXY.x - tab);
+        // For hat blocks we want to shift them down by the hat height
+        // since the y coordinate is the corner, not the top of the hat.
+        var hatOffset =
+            block.startHat_ ? Blockly.BlockSvg.START_HAT_HEIGHT : 0;
+        if (hatOffset) {
+          block.moveBy(0, hatOffset);
+        }
+        block.flyoutRect_.setAttribute('y', blockXY.y);
+      }
+    }
+    // Record the height for .getMetrics_ and .position.
+    this.height_ = flyoutHeight;
+    // Call this since it is possible the trash and zoom buttons need
+    // to move. e.g. on a bottom positioned flyout when zoom is clicked.
+    this.targetWorkspace_.resize();
+  }
+};
+
+/**
+ * Compute width of flyout.  Position button under each block.
+ * For RTL: Lay out the blocks right-aligned.
+ * @param {!Array<!Blockly.Block>} blocks The blocks to reflow.
+ */
+Blockly.Flyout.prototype.reflowVertical = function(blocks) {
+  this.workspace_.scale = this.targetWorkspace_.scale;
+  var flyoutWidth = 0;
+  for (var i = 0, block; block = blocks[i]; i++) {
+    var width = block.getHeightWidth().width;
+    if (block.outputConnection) {
+      width -= Blockly.BlockSvg.TAB_WIDTH;
+    }
+    flyoutWidth = Math.max(flyoutWidth, width);
+  }
+  for (var i = 0, button; button = this.buttons_[i]; i++) {
+    flyoutWidth = Math.max(flyoutWidth, button.width);
+  }
+  flyoutWidth += this.MARGIN * 1.5 + Blockly.BlockSvg.TAB_WIDTH;
+  flyoutWidth *= this.workspace_.scale;
+  flyoutWidth += Blockly.Scrollbar.scrollbarThickness;
+  if (this.width_ != flyoutWidth) {
+    for (var i = 0, block; block = blocks[i]; i++) {
+      var blockHW = block.getHeightWidth();
+      if (this.RTL) {
+        // With the flyoutWidth known, right-align the blocks.
+        var oldX = block.getRelativeToSurfaceXY().x;
+        var newX = flyoutWidth / this.workspace_.scale - this.MARGIN;
+        newX -= Blockly.BlockSvg.TAB_WIDTH;
+        block.moveBy(newX - oldX, 0);
+      }
+      if (block.flyoutRect_) {
+        block.flyoutRect_.setAttribute('width', blockHW.width);
+        block.flyoutRect_.setAttribute('height', blockHW.height);
+        // Blocks with output tabs are shifted a bit.
+        var tab = block.outputConnection ? Blockly.BlockSvg.TAB_WIDTH : 0;
+        var blockXY = block.getRelativeToSurfaceXY();
+        block.flyoutRect_.setAttribute('x',
+            this.RTL ? blockXY.x - blockHW.width + tab : blockXY.x - tab);
+        // For hat blocks we want to shift them down by the hat height
+        // since the y coordinate is the corner, not the top of the hat.
+        var hatOffset =
+            block.startHat_ ? Blockly.BlockSvg.START_HAT_HEIGHT : 0;
+        if (hatOffset) {
+          block.moveBy(0, hatOffset);
+        }
+        block.flyoutRect_.setAttribute('y', blockXY.y);
+      }
+    }
+    // Record the width for .getMetrics_ and .position.
+    this.width_ = flyoutWidth;
+    // Call this since it is possible the trash and zoom buttons need
+    // to move. e.g. on a bottom positioned flyout when zoom is clicked.
+    this.targetWorkspace_.resize();
+  }
+};
+
+/**
+ * Reflow blocks and their buttons.
+ */
+Blockly.Flyout.prototype.reflow = function() {
+  if (this.reflowWrapper_) {
+    this.workspace_.removeChangeListener(this.reflowWrapper_);
+  }
+  var blocks = this.workspace_.getTopBlocks(false);
+  if (this.horizontalLayout_) {
+    this.reflowHorizontal(blocks);
+  } else {
+    this.reflowVertical(blocks);
+  }
+  if (this.reflowWrapper_) {
+    this.workspace_.addChangeListener(this.reflowWrapper_);
+  }
+};
diff --git a/blockly/core/flyout_button.js b/blockly/core/flyout_button.js
new file mode 100644
index 0000000..75b7a83
--- /dev/null
+++ b/blockly/core/flyout_button.js
@@ -0,0 +1,169 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2016 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Class for a button in the flyout.
+ * @author fenichel@google.com (Rachel Fenichel)
+ */
+'use strict';
+
+goog.provide('Blockly.FlyoutButton');
+
+goog.require('goog.dom');
+goog.require('goog.math.Coordinate');
+
+
+/**
+ * Class for a button in the flyout.
+ * @param {!Blockly.Workspace} workspace The workspace in which to place this
+ *     button.
+ * @param {!Blockly.Workspace} targetWorkspace The flyout's target workspace.
+ * @param {string} text The text to display on the button.
+ * @constructor
+ */
+Blockly.FlyoutButton = function(workspace, targetWorkspace, text) {
+  /**
+   * @type {!Blockly.Workspace}
+   * @private
+   */
+  this.workspace_ = workspace;
+
+  /**
+   * @type {!Blockly.Workspace}
+   * @private
+   */
+  this.targetWorkspace_ = targetWorkspace;
+
+  /**
+   * @type {string}
+   * @private
+   */
+  this.text_ = text;
+
+  /**
+   * @type {goog.math.Coordinate}
+   * @private
+   */
+  this.position_ = new goog.math.Coordinate(0, 0);
+};
+
+/**
+ * The margin around the text in the button.
+ */
+Blockly.FlyoutButton.MARGIN = 5;
+
+/**
+ * The width of the button's rect.
+ * @type {number}
+ */
+Blockly.FlyoutButton.prototype.width = 0;
+
+/**
+ * The height of the button's rect.
+ * @type {number}
+ */
+Blockly.FlyoutButton.prototype.height = 0;
+
+/**
+ * Create the button elements.
+ * @return {!Element} The button's SVG group.
+ */
+Blockly.FlyoutButton.prototype.createDom = function() {
+  this.svgGroup_ = Blockly.createSvgElement('g',
+      {'class': 'blocklyFlyoutButton'}, this.workspace_.getCanvas());
+
+  // Rect with rounded corners.
+  var rect = Blockly.createSvgElement('rect',
+      {'rx': 4, 'ry': 4,
+       'height': 0, 'width': 0},
+       this.svgGroup_);
+
+  var svgText = Blockly.createSvgElement('text',
+      {'class': 'blocklyText', 'x': 0, 'y': 0,
+       'text-anchor': 'middle'}, this.svgGroup_);
+  svgText.textContent = this.text_;
+
+  this.width = svgText.getComputedTextLength() +
+      2 * Blockly.FlyoutButton.MARGIN;
+  this.height = 20; // Can't compute it :(
+
+  rect.setAttribute('width', this.width);
+  rect.setAttribute('height', this.height);
+
+  svgText.setAttribute('x', this.width / 2);
+  svgText.setAttribute('y', this.height - Blockly.FlyoutButton.MARGIN);
+
+  this.updateTransform_();
+  return this.svgGroup_;
+};
+
+/**
+ * Correctly position the flyout button and make it visible.
+ */
+Blockly.FlyoutButton.prototype.show = function() {
+  this.updateTransform_();
+  this.svgGroup_.setAttribute('display', 'block');
+};
+
+/**
+ * Update svg attributes to match internal state.
+ */
+Blockly.FlyoutButton.prototype.updateTransform_ = function() {
+  this.svgGroup_.setAttribute('transform', 'translate(' + this.position_.x +
+      ',' + this.position_.y + ')');
+};
+
+/**
+ * Move the button to the given x, y coordinates.
+ * @param {number} x The new x coordinate.
+ * @param {number} y The new y coordinate.
+ */
+Blockly.FlyoutButton.prototype.moveTo = function(x, y) {
+  this.position_.x = x;
+  this.position_.y = y;
+  this.updateTransform_();
+};
+
+/**
+ * Dispose of this button.
+ */
+Blockly.FlyoutButton.prototype.dispose = function() {
+  if (this.svgGroup_) {
+    goog.dom.removeNode(this.svgGroup_);
+    this.svgGroup_ = null;
+  }
+  this.workspace_ = null;
+  this.targetWorkspace_ = null;
+};
+
+/**
+ * Do something when the button is clicked.
+ * @param {!Event} e Mouse up event.
+ */
+Blockly.FlyoutButton.prototype.onMouseUp = function(e) {
+  // Don't scroll the page.
+  e.preventDefault();
+  // Don't propagate mousewheel event (zooming).
+  e.stopPropagation();
+  // Stop binding to mouseup and mousemove events--flyout mouseup would normally
+  // do this, but we're skipping that.
+  Blockly.Flyout.terminateDrag_();
+  Blockly.Variables.createVariable(this.targetWorkspace_);
+};
diff --git a/blockly/core/generator.js b/blockly/core/generator.js
new file mode 100644
index 0000000..fecc355
--- /dev/null
+++ b/blockly/core/generator.js
@@ -0,0 +1,369 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2012 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Utility functions for generating executable code from
+ * Blockly code.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.Generator');
+
+goog.require('Blockly.Block');
+goog.require('goog.asserts');
+
+
+/**
+ * Class for a code generator that translates the blocks into a language.
+ * @param {string} name Language name of this generator.
+ * @constructor
+ */
+Blockly.Generator = function(name) {
+  this.name_ = name;
+  this.FUNCTION_NAME_PLACEHOLDER_REGEXP_ =
+      new RegExp(this.FUNCTION_NAME_PLACEHOLDER_, 'g');
+};
+
+/**
+ * Category to separate generated function names from variables and procedures.
+ */
+Blockly.Generator.NAME_TYPE = 'generated_function';
+
+/**
+ * Arbitrary code to inject into locations that risk causing infinite loops.
+ * Any instances of '%1' will be replaced by the block ID that failed.
+ * E.g. '  checkTimeout(%1);\n'
+ * @type {?string}
+ */
+Blockly.Generator.prototype.INFINITE_LOOP_TRAP = null;
+
+/**
+ * Arbitrary code to inject before every statement.
+ * Any instances of '%1' will be replaced by the block ID of the statement.
+ * E.g. 'highlight(%1);\n'
+ * @type {?string}
+ */
+Blockly.Generator.prototype.STATEMENT_PREFIX = null;
+
+/**
+ * The method of indenting.  Defaults to two spaces, but language generators
+ * may override this to increase indent or change to tabs.
+ * @type {string}
+ */
+Blockly.Generator.prototype.INDENT = '  ';
+
+/**
+ * Maximum length for a comment before wrapping.  Does not account for
+ * indenting level.
+ * @type {number}
+ */
+Blockly.Generator.prototype.COMMENT_WRAP = 60;
+
+/**
+ * List of outer-inner pairings that do NOT require parentheses.
+ * @type {!Array.<!Array.<number>>}
+ */
+Blockly.Generator.prototype.ORDER_OVERRIDES = [];
+
+/**
+ * Generate code for all blocks in the workspace to the specified language.
+ * @param {Blockly.Workspace} workspace Workspace to generate code from.
+ * @return {string} Generated code.
+ */
+Blockly.Generator.prototype.workspaceToCode = function(workspace) {
+  if (!workspace) {
+    // Backwards compatibility from before there could be multiple workspaces.
+    console.warn('No workspace specified in workspaceToCode call.  Guessing.');
+    workspace = Blockly.getMainWorkspace();
+  }
+  var code = [];
+  this.init(workspace);
+  var blocks = workspace.getTopBlocks(true);
+  for (var x = 0, block; block = blocks[x]; x++) {
+    var line = this.blockToCode(block);
+    if (goog.isArray(line)) {
+      // Value blocks return tuples of code and operator order.
+      // Top-level blocks don't care about operator order.
+      line = line[0];
+    }
+    if (line) {
+      if (block.outputConnection && this.scrubNakedValue) {
+        // This block is a naked value.  Ask the language's code generator if
+        // it wants to append a semicolon, or something.
+        line = this.scrubNakedValue(line);
+      }
+      code.push(line);
+    }
+  }
+  code = code.join('\n');  // Blank line between each section.
+  code = this.finish(code);
+  // Final scrubbing of whitespace.
+  code = code.replace(/^\s+\n/, '');
+  code = code.replace(/\n\s+$/, '\n');
+  code = code.replace(/[ \t]+\n/g, '\n');
+  return code;
+};
+
+// The following are some helpful functions which can be used by multiple
+// languages.
+
+/**
+ * Prepend a common prefix onto each line of code.
+ * @param {string} text The lines of code.
+ * @param {string} prefix The common prefix.
+ * @return {string} The prefixed lines of code.
+ */
+Blockly.Generator.prototype.prefixLines = function(text, prefix) {
+  return prefix + text.replace(/(?!\n$)\n/g, '\n' + prefix);
+};
+
+/**
+ * Recursively spider a tree of blocks, returning all their comments.
+ * @param {!Blockly.Block} block The block from which to start spidering.
+ * @return {string} Concatenated list of comments.
+ */
+Blockly.Generator.prototype.allNestedComments = function(block) {
+  var comments = [];
+  var blocks = block.getDescendants();
+  for (var i = 0; i < blocks.length; i++) {
+    var comment = blocks[i].getCommentText();
+    if (comment) {
+      comments.push(comment);
+    }
+  }
+  // Append an empty string to create a trailing line break when joined.
+  if (comments.length) {
+    comments.push('');
+  }
+  return comments.join('\n');
+};
+
+/**
+ * Generate code for the specified block (and attached blocks).
+ * @param {Blockly.Block} block The block to generate code for.
+ * @return {string|!Array} For statement blocks, the generated code.
+ *     For value blocks, an array containing the generated code and an
+ *     operator order value.  Returns '' if block is null.
+ */
+Blockly.Generator.prototype.blockToCode = function(block) {
+  if (!block) {
+    return '';
+  }
+  if (block.disabled) {
+    // Skip past this block if it is disabled.
+    return this.blockToCode(block.getNextBlock());
+  }
+
+  var func = this[block.type];
+  goog.asserts.assertFunction(func,
+      'Language "%s" does not know how to generate code for block type "%s".',
+      this.name_, block.type);
+  // First argument to func.call is the value of 'this' in the generator.
+  // Prior to 24 September 2013 'this' was the only way to access the block.
+  // The current prefered method of accessing the block is through the second
+  // argument to func.call, which becomes the first parameter to the generator.
+  var code = func.call(block, block);
+  if (goog.isArray(code)) {
+    // Value blocks return tuples of code and operator order.
+    goog.asserts.assert(block.outputConnection,
+        'Expecting string from statement block "%s".', block.type);
+    return [this.scrub_(block, code[0]), code[1]];
+  } else if (goog.isString(code)) {
+    if (this.STATEMENT_PREFIX) {
+      code = this.STATEMENT_PREFIX.replace(/%1/g, '\'' + block.id + '\'') +
+          code;
+    }
+    return this.scrub_(block, code);
+  } else if (code === null) {
+    // Block has handled code generation itself.
+    return '';
+  } else {
+    goog.asserts.fail('Invalid code generated: %s', code);
+  }
+};
+
+/**
+ * Generate code representing the specified value input.
+ * @param {!Blockly.Block} block The block containing the input.
+ * @param {string} name The name of the input.
+ * @param {number} outerOrder The maximum binding strength (minimum order value)
+ *     of any operators adjacent to "block".
+ * @return {string} Generated code or '' if no blocks are connected or the
+ *     specified input does not exist.
+ */
+Blockly.Generator.prototype.valueToCode = function(block, name, outerOrder) {
+  if (isNaN(outerOrder)) {
+    goog.asserts.fail('Expecting valid order from block "%s".', block.type);
+  }
+  var targetBlock = block.getInputTargetBlock(name);
+  if (!targetBlock) {
+    return '';
+  }
+  var tuple = this.blockToCode(targetBlock);
+  if (tuple === '') {
+    // Disabled block.
+    return '';
+  }
+  // Value blocks must return code and order of operations info.
+  // Statement blocks must only return code.
+  goog.asserts.assertArray(tuple, 'Expecting tuple from value block "%s".',
+      targetBlock.type);
+  var code = tuple[0];
+  var innerOrder = tuple[1];
+  if (isNaN(innerOrder)) {
+    goog.asserts.fail('Expecting valid order from value block "%s".',
+        targetBlock.type);
+  }
+  if (!code) {
+    return '';
+  }
+
+  // Add parentheses if needed.
+  var parensNeeded = false;
+  var outerOrderClass = Math.floor(outerOrder);
+  var innerOrderClass = Math.floor(innerOrder);
+  if (outerOrderClass <= innerOrderClass) {
+    if (outerOrderClass == innerOrderClass &&
+        (outerOrderClass == 0 || outerOrderClass == 99)) {
+      // Don't generate parens around NONE-NONE and ATOMIC-ATOMIC pairs.
+      // 0 is the atomic order, 99 is the none order.  No parentheses needed.
+      // In all known languages multiple such code blocks are not order
+      // sensitive.  In fact in Python ('a' 'b') 'c' would fail.
+    } else {
+      // The operators outside this code are stonger than the operators
+      // inside this code.  To prevent the code from being pulled apart,
+      // wrap the code in parentheses.
+      parensNeeded = true;
+      // Check for special exceptions.
+      for (var i = 0; i < this.ORDER_OVERRIDES.length; i++) {
+        if (this.ORDER_OVERRIDES[i][0] == outerOrder &&
+            this.ORDER_OVERRIDES[i][1] == innerOrder) {
+          parensNeeded = false;
+          break;
+        }
+      }
+    }
+  }
+  if (parensNeeded) {
+    // Technically, this should be handled on a language-by-language basis.
+    // However all known (sane) languages use parentheses for grouping.
+    code = '(' + code + ')';
+  }
+  return code;
+};
+
+/**
+ * Generate code representing the statement.  Indent the code.
+ * @param {!Blockly.Block} block The block containing the input.
+ * @param {string} name The name of the input.
+ * @return {string} Generated code or '' if no blocks are connected.
+ */
+Blockly.Generator.prototype.statementToCode = function(block, name) {
+  var targetBlock = block.getInputTargetBlock(name);
+  var code = this.blockToCode(targetBlock);
+  // Value blocks must return code and order of operations info.
+  // Statement blocks must only return code.
+  goog.asserts.assertString(code, 'Expecting code from statement block "%s".',
+      targetBlock && targetBlock.type);
+  if (code) {
+    code = this.prefixLines(/** @type {string} */ (code), this.INDENT);
+  }
+  return code;
+};
+
+/**
+ * Add an infinite loop trap to the contents of a loop.
+ * If loop is empty, add a statment prefix for the loop block.
+ * @param {string} branch Code for loop contents.
+ * @param {string} id ID of enclosing block.
+ * @return {string} Loop contents, with infinite loop trap added.
+ */
+Blockly.Generator.prototype.addLoopTrap = function(branch, id) {
+  if (this.INFINITE_LOOP_TRAP) {
+    branch = this.INFINITE_LOOP_TRAP.replace(/%1/g, '\'' + id + '\'') + branch;
+  }
+  if (this.STATEMENT_PREFIX) {
+    branch += this.prefixLines(this.STATEMENT_PREFIX.replace(/%1/g,
+        '\'' + id + '\''), this.INDENT);
+  }
+  return branch;
+};
+
+/**
+ * Comma-separated list of reserved words.
+ * @type {string}
+ * @private
+ */
+Blockly.Generator.prototype.RESERVED_WORDS_ = '';
+
+/**
+ * Add one or more words to the list of reserved words for this language.
+ * @param {string} words Comma-separated list of words to add to the list.
+ *     No spaces.  Duplicates are ok.
+ */
+Blockly.Generator.prototype.addReservedWords = function(words) {
+  this.RESERVED_WORDS_ += words + ',';
+};
+
+/**
+ * This is used as a placeholder in functions defined using
+ * Blockly.Generator.provideFunction_.  It must not be legal code that could
+ * legitimately appear in a function definition (or comment), and it must
+ * not confuse the regular expression parser.
+ * @type {string}
+ * @private
+ */
+Blockly.Generator.prototype.FUNCTION_NAME_PLACEHOLDER_ = '{leCUI8hutHZI4480Dc}';
+
+/**
+ * Define a function to be included in the generated code.
+ * The first time this is called with a given desiredName, the code is
+ * saved and an actual name is generated.  Subsequent calls with the
+ * same desiredName have no effect but have the same return value.
+ *
+ * It is up to the caller to make sure the same desiredName is not
+ * used for different code values.
+ *
+ * The code gets output when Blockly.Generator.finish() is called.
+ *
+ * @param {string} desiredName The desired name of the function (e.g., isPrime).
+ * @param {!Array.<string>} code A list of statements.  Use '  ' for indents.
+ * @return {string} The actual name of the new function.  This may differ
+ *     from desiredName if the former has already been taken by the user.
+ * @private
+ */
+Blockly.Generator.prototype.provideFunction_ = function(desiredName, code) {
+  if (!this.definitions_[desiredName]) {
+    var functionName = this.variableDB_.getDistinctName(desiredName,
+        Blockly.Procedures.NAME_TYPE);
+    this.functionNames_[desiredName] = functionName;
+    var codeText = code.join('\n').replace(
+        this.FUNCTION_NAME_PLACEHOLDER_REGEXP_, functionName);
+    // Change all '  ' indents into the desired indent.
+    var oldCodeText;
+    while (oldCodeText != codeText) {
+      oldCodeText = codeText;
+      codeText = codeText.replace(/^((  )*)  /gm, '$1' + this.INDENT);
+    }
+    this.definitions_[desiredName] = codeText;
+  }
+  return this.functionNames_[desiredName];
+};
diff --git a/blockly/core/icon.js b/blockly/core/icon.js
new file mode 100644
index 0000000..b10e181
--- /dev/null
+++ b/blockly/core/icon.js
@@ -0,0 +1,203 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2013 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Object representing an icon on a block.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.Icon');
+
+goog.require('goog.dom');
+goog.require('goog.math.Coordinate');
+
+
+/**
+ * Class for an icon.
+ * @param {Blockly.Block} block The block associated with this icon.
+ * @constructor
+ */
+Blockly.Icon = function(block) {
+  this.block_ = block;
+};
+
+/**
+ * Does this icon get hidden when the block is collapsed.
+ */
+Blockly.Icon.prototype.collapseHidden = true;
+
+/**
+ * Height and width of icons.
+ */
+Blockly.Icon.prototype.SIZE = 17;
+
+/**
+ * Bubble UI (if visible).
+ * @type {Blockly.Bubble}
+ * @private
+ */
+Blockly.Icon.prototype.bubble_ = null;
+
+/**
+ * Absolute coordinate of icon's center.
+ * @type {goog.math.Coordinate}
+ * @private
+ */
+Blockly.Icon.prototype.iconXY_ = null;
+
+/**
+ * Create the icon on the block.
+ */
+Blockly.Icon.prototype.createIcon = function() {
+  if (this.iconGroup_) {
+    // Icon already exists.
+    return;
+  }
+  /* Here's the markup that will be generated:
+  <g class="blocklyIconGroup">
+    ...
+  </g>
+  */
+  this.iconGroup_ = Blockly.createSvgElement('g',
+      {'class': 'blocklyIconGroup'}, null);
+  if (this.block_.isInFlyout) {
+    Blockly.addClass_(/** @type {!Element} */ (this.iconGroup_),
+                      'blocklyIconGroupReadonly');
+  }
+  this.drawIcon_(this.iconGroup_);
+
+  this.block_.getSvgRoot().appendChild(this.iconGroup_);
+  Blockly.bindEvent_(this.iconGroup_, 'mouseup', this, this.iconClick_);
+  this.updateEditable();
+};
+
+/**
+ * Dispose of this icon.
+ */
+Blockly.Icon.prototype.dispose = function() {
+  // Dispose of and unlink the icon.
+  goog.dom.removeNode(this.iconGroup_);
+  this.iconGroup_ = null;
+  // Dispose of and unlink the bubble.
+  this.setVisible(false);
+  this.block_ = null;
+};
+
+/**
+ * Add or remove the UI indicating if this icon may be clicked or not.
+ */
+Blockly.Icon.prototype.updateEditable = function() {
+};
+
+/**
+ * Is the associated bubble visible?
+ * @return {boolean} True if the bubble is visible.
+ */
+Blockly.Icon.prototype.isVisible = function() {
+  return !!this.bubble_;
+};
+
+/**
+ * Clicking on the icon toggles if the bubble is visible.
+ * @param {!Event} e Mouse click event.
+ * @private
+ */
+Blockly.Icon.prototype.iconClick_ = function(e) {
+  if (this.block_.workspace.isDragging()) {
+    // Drag operation is concluding.  Don't open the editor.
+    return;
+  }
+  if (!this.block_.isInFlyout && !Blockly.isRightButton(e)) {
+    this.setVisible(!this.isVisible());
+  }
+};
+
+/**
+ * Change the colour of the associated bubble to match its block.
+ */
+Blockly.Icon.prototype.updateColour = function() {
+  if (this.isVisible()) {
+    this.bubble_.setColour(this.block_.getColour());
+  }
+};
+
+/**
+ * Render the icon.
+ * @param {number} cursorX Horizontal offset at which to position the icon.
+ * @return {number} Horizontal offset for next item to draw.
+ */
+Blockly.Icon.prototype.renderIcon = function(cursorX) {
+  if (this.collapseHidden && this.block_.isCollapsed()) {
+    this.iconGroup_.setAttribute('display', 'none');
+    return cursorX;
+  }
+  this.iconGroup_.setAttribute('display', 'block');
+
+  var TOP_MARGIN = 5;
+  var width = this.SIZE;
+  if (this.block_.RTL) {
+    cursorX -= width;
+  }
+  this.iconGroup_.setAttribute('transform',
+      'translate(' + cursorX + ',' + TOP_MARGIN + ')');
+  this.computeIconLocation();
+  if (this.block_.RTL) {
+    cursorX -= Blockly.BlockSvg.SEP_SPACE_X;
+  } else {
+    cursorX += width + Blockly.BlockSvg.SEP_SPACE_X;
+  }
+  return cursorX;
+};
+
+/**
+ * Notification that the icon has moved.  Update the arrow accordingly.
+ * @param {!goog.math.Coordinate} xy Absolute location.
+ */
+Blockly.Icon.prototype.setIconLocation = function(xy) {
+  this.iconXY_ = xy;
+  if (this.isVisible()) {
+    this.bubble_.setAnchorLocation(xy);
+  }
+};
+
+/**
+ * Notification that the icon has moved, but we don't really know where.
+ * Recompute the icon's location from scratch.
+ */
+Blockly.Icon.prototype.computeIconLocation = function() {
+  // Find coordinates for the centre of the icon and update the arrow.
+  var blockXY = this.block_.getRelativeToSurfaceXY();
+  var iconXY = Blockly.getRelativeXY_(this.iconGroup_);
+  var newXY = new goog.math.Coordinate(
+      blockXY.x + iconXY.x + this.SIZE / 2,
+      blockXY.y + iconXY.y + this.SIZE / 2);
+  if (!goog.math.Coordinate.equals(this.getIconLocation(), newXY)) {
+    this.setIconLocation(newXY);
+  }
+};
+
+/**
+ * Returns the center of the block's icon relative to the surface.
+ * @return {!goog.math.Coordinate} Object with x and y properties.
+ */
+Blockly.Icon.prototype.getIconLocation = function() {
+  return this.iconXY_;
+};
diff --git a/blockly/core/inject.js b/blockly/core/inject.js
new file mode 100644
index 0000000..57e3e51
--- /dev/null
+++ b/blockly/core/inject.js
@@ -0,0 +1,378 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2011 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Functions for injecting Blockly into a web page.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.inject');
+
+goog.require('Blockly.Css');
+goog.require('Blockly.Options');
+goog.require('Blockly.WorkspaceSvg');
+goog.require('goog.dom');
+goog.require('goog.ui.Component');
+goog.require('goog.userAgent');
+
+
+/**
+ * Inject a Blockly editor into the specified container element (usually a div).
+ * @param {!Element|string} container Containing element, or its ID,
+ *     or a CSS selector.
+ * @param {Object=} opt_options Optional dictionary of options.
+ * @return {!Blockly.Workspace} Newly created main workspace.
+ */
+Blockly.inject = function(container, opt_options) {
+  if (goog.isString(container)) {
+    container = document.getElementById(container) ||
+        document.querySelector(container);
+  }
+  // Verify that the container is in document.
+  if (!goog.dom.contains(document, container)) {
+    throw 'Error: container is not in current document.';
+  }
+  var options = new Blockly.Options(opt_options || {});
+  var subContainer = goog.dom.createDom('div', 'injectionDiv');
+  container.appendChild(subContainer);
+  var svg = Blockly.createDom_(subContainer, options);
+  var workspace = Blockly.createMainWorkspace_(svg, options);
+  Blockly.init_(workspace);
+  workspace.markFocused();
+  Blockly.bindEvent_(svg, 'focus', workspace, workspace.markFocused);
+  Blockly.svgResize(workspace);
+  return workspace;
+};
+
+/**
+ * Create the SVG image.
+ * @param {!Element} container Containing element.
+ * @param {!Blockly.Options} options Dictionary of options.
+ * @return {!Element} Newly created SVG image.
+ * @private
+ */
+Blockly.createDom_ = function(container, options) {
+  // Sadly browsers (Chrome vs Firefox) are currently inconsistent in laying
+  // out content in RTL mode.  Therefore Blockly forces the use of LTR,
+  // then manually positions content in RTL as needed.
+  container.setAttribute('dir', 'LTR');
+  // Closure can be trusted to create HTML widgets with the proper direction.
+  goog.ui.Component.setDefaultRightToLeft(options.RTL);
+
+  // Load CSS.
+  Blockly.Css.inject(options.hasCss, options.pathToMedia);
+
+  // Build the SVG DOM.
+  /*
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:html="http://www.w3.org/1999/xhtml"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    version="1.1"
+    class="blocklySvg">
+    ...
+  </svg>
+  */
+  var svg = Blockly.createSvgElement('svg', {
+    'xmlns': 'http://www.w3.org/2000/svg',
+    'xmlns:html': 'http://www.w3.org/1999/xhtml',
+    'xmlns:xlink': 'http://www.w3.org/1999/xlink',
+    'version': '1.1',
+    'class': 'blocklySvg'
+  }, container);
+  /*
+  <defs>
+    ... filters go here ...
+  </defs>
+  */
+  var defs = Blockly.createSvgElement('defs', {}, svg);
+  var rnd = String(Math.random()).substring(2);
+  /*
+    <filter id="blocklyEmbossFilter837493">
+      <feGaussianBlur in="SourceAlpha" stdDeviation="1" result="blur"/>
+      <feSpecularLighting in="blur" surfaceScale="1" specularConstant="0.5"
+                          specularExponent="10" lighting-color="white"
+                          result="specOut">
+        <fePointLight x="-5000" y="-10000" z="20000"/>
+      </feSpecularLighting>
+      <feComposite in="specOut" in2="SourceAlpha" operator="in"
+                   result="specOut"/>
+      <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic"
+                   k1="0" k2="1" k3="1" k4="0"/>
+    </filter>
+  */
+  var embossFilter = Blockly.createSvgElement('filter',
+      {'id': 'blocklyEmbossFilter' + rnd}, defs);
+  Blockly.createSvgElement('feGaussianBlur',
+      {'in': 'SourceAlpha', 'stdDeviation': 1, 'result': 'blur'}, embossFilter);
+  var feSpecularLighting = Blockly.createSvgElement('feSpecularLighting',
+      {'in': 'blur', 'surfaceScale': 1, 'specularConstant': 0.5,
+       'specularExponent': 10, 'lighting-color': 'white', 'result': 'specOut'},
+      embossFilter);
+  Blockly.createSvgElement('fePointLight',
+      {'x': -5000, 'y': -10000, 'z': 20000}, feSpecularLighting);
+  Blockly.createSvgElement('feComposite',
+      {'in': 'specOut', 'in2': 'SourceAlpha', 'operator': 'in',
+       'result': 'specOut'}, embossFilter);
+  Blockly.createSvgElement('feComposite',
+      {'in': 'SourceGraphic', 'in2': 'specOut', 'operator': 'arithmetic',
+       'k1': 0, 'k2': 1, 'k3': 1, 'k4': 0}, embossFilter);
+  options.embossFilterId = embossFilter.id;
+  /*
+    <pattern id="blocklyDisabledPattern837493" patternUnits="userSpaceOnUse"
+             width="10" height="10">
+      <rect width="10" height="10" fill="#aaa" />
+      <path d="M 0 0 L 10 10 M 10 0 L 0 10" stroke="#cc0" />
+    </pattern>
+  */
+  var disabledPattern = Blockly.createSvgElement('pattern',
+      {'id': 'blocklyDisabledPattern' + rnd,
+       'patternUnits': 'userSpaceOnUse',
+       'width': 10, 'height': 10}, defs);
+  Blockly.createSvgElement('rect',
+      {'width': 10, 'height': 10, 'fill': '#aaa'}, disabledPattern);
+  Blockly.createSvgElement('path',
+      {'d': 'M 0 0 L 10 10 M 10 0 L 0 10', 'stroke': '#cc0'}, disabledPattern);
+  options.disabledPatternId = disabledPattern.id;
+  /*
+    <pattern id="blocklyGridPattern837493" patternUnits="userSpaceOnUse">
+      <rect stroke="#888" />
+      <rect stroke="#888" />
+    </pattern>
+  */
+  var gridPattern = Blockly.createSvgElement('pattern',
+      {'id': 'blocklyGridPattern' + rnd,
+       'patternUnits': 'userSpaceOnUse'}, defs);
+  if (options.gridOptions['length'] > 0 && options.gridOptions['spacing'] > 0) {
+    Blockly.createSvgElement('line',
+        {'stroke': options.gridOptions['colour']},
+        gridPattern);
+    if (options.gridOptions['length'] > 1) {
+      Blockly.createSvgElement('line',
+          {'stroke': options.gridOptions['colour']},
+          gridPattern);
+    }
+    // x1, y1, x1, x2 properties will be set later in updateGridPattern_.
+  }
+  options.gridPattern = gridPattern;
+  return svg;
+};
+
+/**
+ * Create a main workspace and add it to the SVG.
+ * @param {!Element} svg SVG element with pattern defined.
+ * @param {!Blockly.Options} options Dictionary of options.
+ * @return {!Blockly.Workspace} Newly created main workspace.
+ * @private
+ */
+Blockly.createMainWorkspace_ = function(svg, options) {
+  options.parentWorkspace = null;
+  var mainWorkspace = new Blockly.WorkspaceSvg(options);
+  mainWorkspace.scale = options.zoomOptions.startScale;
+  svg.appendChild(mainWorkspace.createDom('blocklyMainBackground'));
+  // A null translation will also apply the correct initial scale.
+  mainWorkspace.translate(0, 0);
+  mainWorkspace.markFocused();
+
+  if (!options.readOnly && !options.hasScrollbars) {
+    var workspaceChanged = function() {
+      if (Blockly.dragMode_ == Blockly.DRAG_NONE) {
+        var metrics = mainWorkspace.getMetrics();
+        var edgeLeft = metrics.viewLeft + metrics.absoluteLeft;
+        var edgeTop = metrics.viewTop + metrics.absoluteTop;
+        if (metrics.contentTop < edgeTop ||
+            metrics.contentTop + metrics.contentHeight >
+            metrics.viewHeight + edgeTop ||
+            metrics.contentLeft <
+                (options.RTL ? metrics.viewLeft : edgeLeft) ||
+            metrics.contentLeft + metrics.contentWidth > (options.RTL ?
+                metrics.viewWidth : metrics.viewWidth + edgeLeft)) {
+          // One or more blocks may be out of bounds.  Bump them back in.
+          var MARGIN = 25;
+          var blocks = mainWorkspace.getTopBlocks(false);
+          for (var b = 0, block; block = blocks[b]; b++) {
+            var blockXY = block.getRelativeToSurfaceXY();
+            var blockHW = block.getHeightWidth();
+            // Bump any block that's above the top back inside.
+            var overflowTop = edgeTop + MARGIN - blockHW.height - blockXY.y;
+            if (overflowTop > 0) {
+              block.moveBy(0, overflowTop);
+            }
+            // Bump any block that's below the bottom back inside.
+            var overflowBottom =
+                edgeTop + metrics.viewHeight - MARGIN - blockXY.y;
+            if (overflowBottom < 0) {
+              block.moveBy(0, overflowBottom);
+            }
+            // Bump any block that's off the left back inside.
+            var overflowLeft = MARGIN + edgeLeft -
+                blockXY.x - (options.RTL ? 0 : blockHW.width);
+            if (overflowLeft > 0) {
+              block.moveBy(overflowLeft, 0);
+            }
+            // Bump any block that's off the right back inside.
+            var overflowRight = edgeLeft + metrics.viewWidth - MARGIN -
+                blockXY.x + (options.RTL ? blockHW.width : 0);
+            if (overflowRight < 0) {
+              block.moveBy(overflowRight, 0);
+            }
+          }
+        }
+      }
+    };
+    mainWorkspace.addChangeListener(workspaceChanged);
+  }
+  // The SVG is now fully assembled.
+  Blockly.svgResize(mainWorkspace);
+  Blockly.WidgetDiv.createDom();
+  Blockly.Tooltip.createDom();
+  return mainWorkspace;
+};
+
+/**
+ * Initialize Blockly with various handlers.
+ * @param {!Blockly.Workspace} mainWorkspace Newly created main workspace.
+ * @private
+ */
+Blockly.init_ = function(mainWorkspace) {
+  var options = mainWorkspace.options;
+  var svg = mainWorkspace.getParentSvg();
+
+  // Supress the browser's context menu.
+  Blockly.bindEvent_(svg, 'contextmenu', null,
+      function(e) {
+        if (!Blockly.isTargetInput_(e)) {
+          e.preventDefault();
+        }
+      });
+
+  var workspaceResizeHandler = Blockly.bindEvent_(window, 'resize', null,
+       function() {
+         Blockly.hideChaff(true);
+         Blockly.svgResize(mainWorkspace);
+       });
+  mainWorkspace.setResizeHandlerWrapper(workspaceResizeHandler);
+
+  Blockly.inject.bindDocumentEvents_();
+
+  if (options.languageTree) {
+    if (mainWorkspace.toolbox_) {
+      mainWorkspace.toolbox_.init(mainWorkspace);
+    } else if (mainWorkspace.flyout_) {
+      // Build a fixed flyout with the root blocks.
+      mainWorkspace.flyout_.init(mainWorkspace);
+      mainWorkspace.flyout_.show(options.languageTree.childNodes);
+      mainWorkspace.flyout_.scrollToStart();
+      // Translate the workspace sideways to avoid the fixed flyout.
+      mainWorkspace.scrollX = mainWorkspace.flyout_.width_;
+      if (options.toolboxPosition == Blockly.TOOLBOX_AT_RIGHT) {
+        mainWorkspace.scrollX *= -1;
+      }
+      mainWorkspace.translate(mainWorkspace.scrollX, 0);
+    }
+  }
+
+  if (options.hasScrollbars) {
+    mainWorkspace.scrollbar = new Blockly.ScrollbarPair(mainWorkspace);
+    mainWorkspace.scrollbar.resize();
+  }
+
+  // Load the sounds.
+  if (options.hasSounds) {
+    Blockly.inject.loadSounds_(options.pathToMedia, mainWorkspace);
+  }
+};
+
+/**
+ * Bind document events, but only once.  Destroying and reinjecting Blockly
+ * should not bind again.
+ * Bind events for scrolling the workspace.
+ * Most of these events should be bound to the SVG's surface.
+ * However, 'mouseup' has to be on the whole document so that a block dragged
+ * out of bounds and released will know that it has been released.
+ * Also, 'keydown' has to be on the whole document since the browser doesn't
+ * understand a concept of focus on the SVG image.
+ * @private
+ */
+Blockly.inject.bindDocumentEvents_ = function() {
+  if (!Blockly.documentEventsBound_) {
+    Blockly.bindEvent_(document, 'keydown', null, Blockly.onKeyDown_);
+    Blockly.bindEvent_(document, 'touchend', null, Blockly.longStop_);
+    Blockly.bindEvent_(document, 'touchcancel', null, Blockly.longStop_);
+    // Don't use bindEvent_ for document's mouseup since that would create a
+    // corresponding touch handler that would squeltch the ability to interact
+    // with non-Blockly elements.
+    document.addEventListener('mouseup', Blockly.onMouseUp_, false);
+    // Some iPad versions don't fire resize after portrait to landscape change.
+    if (goog.userAgent.IPAD) {
+      Blockly.bindEvent_(window, 'orientationchange', document, function() {
+        // TODO(#397): Fix for multiple blockly workspaces.
+        Blockly.svgResize(Blockly.getMainWorkspace());
+      });
+    }
+  }
+  Blockly.documentEventsBound_ = true;
+};
+
+/**
+ * Load sounds for the given workspace.
+ * @param {string} pathToMedia The path to the media directory.
+ * @param {!Blockly.Workspace} workspace The workspace to load sounds for.
+ * @private
+ */
+Blockly.inject.loadSounds_ = function(pathToMedia, workspace) {
+  workspace.loadAudio_(
+      [pathToMedia + 'click.mp3',
+       pathToMedia + 'click.wav',
+       pathToMedia + 'click.ogg'], 'click');
+  workspace.loadAudio_(
+      [pathToMedia + 'disconnect.wav',
+       pathToMedia + 'disconnect.mp3',
+       pathToMedia + 'disconnect.ogg'], 'disconnect');
+  workspace.loadAudio_(
+      [pathToMedia + 'delete.mp3',
+       pathToMedia + 'delete.ogg',
+       pathToMedia + 'delete.wav'], 'delete');
+
+  // Bind temporary hooks that preload the sounds.
+  var soundBinds = [];
+  var unbindSounds = function() {
+    while (soundBinds.length) {
+      Blockly.unbindEvent_(soundBinds.pop());
+    }
+    workspace.preloadAudio_();
+  };
+  // Android ignores any sound not loaded as a result of a user action.
+  soundBinds.push(
+      Blockly.bindEvent_(document, 'mousemove', null, unbindSounds));
+  soundBinds.push(
+      Blockly.bindEvent_(document, 'touchstart', null, unbindSounds));
+};
+
+/**
+ * Modify the block tree on the existing toolbox.
+ * @param {Node|string} tree DOM tree of blocks, or text representation of same.
+ */
+Blockly.updateToolbox = function(tree) {
+  console.warn('Deprecated call to Blockly.updateToolbox, ' +
+               'use workspace.updateToolbox instead.');
+  Blockly.getMainWorkspace().updateToolbox(tree);
+};
diff --git a/blockly/core/input.js b/blockly/core/input.js
new file mode 100644
index 0000000..4b4eb1d
--- /dev/null
+++ b/blockly/core/input.js
@@ -0,0 +1,241 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2012 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Object representing an input (value, statement, or dummy).
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.Input');
+
+goog.require('Blockly.Connection');
+goog.require('Blockly.FieldLabel');
+goog.require('goog.asserts');
+
+
+/**
+ * Class for an input with an optional field.
+ * @param {number} type The type of the input.
+ * @param {string} name Language-neutral identifier which may used to find this
+ *     input again.
+ * @param {!Blockly.Block} block The block containing this input.
+ * @param {Blockly.Connection} connection Optional connection for this input.
+ * @constructor
+ */
+Blockly.Input = function(type, name, block, connection) {
+  /** @type {number} */
+  this.type = type;
+  /** @type {string} */
+  this.name = name;
+  /**
+   * @type {!Blockly.Block}
+   * @private
+   */
+  this.sourceBlock_ = block;
+  /** @type {Blockly.Connection} */
+  this.connection = connection;
+  /** @type {!Array.<!Blockly.Field>} */
+  this.fieldRow = [];
+};
+
+/**
+ * Alignment of input's fields (left, right or centre).
+ * @type {number}
+ */
+Blockly.Input.prototype.align = Blockly.ALIGN_LEFT;
+
+/**
+ * Is the input visible?
+ * @type {boolean}
+ * @private
+ */
+Blockly.Input.prototype.visible_ = true;
+
+/**
+ * Add an item to the end of the input's field row.
+ * @param {string|!Blockly.Field} field Something to add as a field.
+ * @param {string=} opt_name Language-neutral identifier which may used to find
+ *     this field again.  Should be unique to the host block.
+ * @return {!Blockly.Input} The input being append to (to allow chaining).
+ */
+Blockly.Input.prototype.appendField = function(field, opt_name) {
+  // Empty string, Null or undefined generates no field, unless field is named.
+  if (!field && !opt_name) {
+    return this;
+  }
+  // Generate a FieldLabel when given a plain text field.
+  if (goog.isString(field)) {
+    field = new Blockly.FieldLabel(/** @type {string} */ (field));
+  }
+  field.setSourceBlock(this.sourceBlock_);
+  if (this.sourceBlock_.rendered) {
+    field.init();
+  }
+  field.name = opt_name;
+
+  if (field.prefixField) {
+    // Add any prefix.
+    this.appendField(field.prefixField);
+  }
+  // Add the field to the field row.
+  this.fieldRow.push(field);
+  if (field.suffixField) {
+    // Add any suffix.
+    this.appendField(field.suffixField);
+  }
+
+  if (this.sourceBlock_.rendered) {
+    this.sourceBlock_.render();
+    // Adding a field will cause the block to change shape.
+    this.sourceBlock_.bumpNeighbours_();
+  }
+  return this;
+};
+
+/**
+ * Add an item to the end of the input's field row.
+ * @param {*} field Something to add as a field.
+ * @param {string=} opt_name Language-neutral identifier which may used to find
+ *     this field again.  Should be unique to the host block.
+ * @return {!Blockly.Input} The input being append to (to allow chaining).
+ * @deprecated December 2013
+ */
+Blockly.Input.prototype.appendTitle = function(field, opt_name) {
+  console.warn('Deprecated call to appendTitle, use appendField instead.');
+  return this.appendField(field, opt_name);
+};
+
+/**
+ * Remove a field from this input.
+ * @param {string} name The name of the field.
+ * @throws {goog.asserts.AssertionError} if the field is not present.
+ */
+Blockly.Input.prototype.removeField = function(name) {
+  for (var i = 0, field; field = this.fieldRow[i]; i++) {
+    if (field.name === name) {
+      field.dispose();
+      this.fieldRow.splice(i, 1);
+      if (this.sourceBlock_.rendered) {
+        this.sourceBlock_.render();
+        // Removing a field will cause the block to change shape.
+        this.sourceBlock_.bumpNeighbours_();
+      }
+      return;
+    }
+  }
+  goog.asserts.fail('Field "%s" not found.', name);
+};
+
+/**
+ * Gets whether this input is visible or not.
+ * @return {boolean} True if visible.
+ */
+Blockly.Input.prototype.isVisible = function() {
+  return this.visible_;
+};
+
+/**
+ * Sets whether this input is visible or not.
+ * Used to collapse/uncollapse a block.
+ * @param {boolean} visible True if visible.
+ * @return {!Array.<!Blockly.Block>} List of blocks to render.
+ */
+Blockly.Input.prototype.setVisible = function(visible) {
+  var renderList = [];
+  if (this.visible_ == visible) {
+    return renderList;
+  }
+  this.visible_ = visible;
+
+  var display = visible ? 'block' : 'none';
+  for (var y = 0, field; field = this.fieldRow[y]; y++) {
+    field.setVisible(visible);
+  }
+  if (this.connection) {
+    // Has a connection.
+    if (visible) {
+      renderList = this.connection.unhideAll();
+    } else {
+      this.connection.hideAll();
+    }
+    var child = this.connection.targetBlock();
+    if (child) {
+      child.getSvgRoot().style.display = display;
+      if (!visible) {
+        child.rendered = false;
+      }
+    }
+  }
+  return renderList;
+};
+
+/**
+ * Change a connection's compatibility.
+ * @param {string|Array.<string>|null} check Compatible value type or
+ *     list of value types.  Null if all types are compatible.
+ * @return {!Blockly.Input} The input being modified (to allow chaining).
+ */
+Blockly.Input.prototype.setCheck = function(check) {
+  if (!this.connection) {
+    throw 'This input does not have a connection.';
+  }
+  this.connection.setCheck(check);
+  return this;
+};
+
+/**
+ * Change the alignment of the connection's field(s).
+ * @param {number} align One of Blockly.ALIGN_LEFT, ALIGN_CENTRE, ALIGN_RIGHT.
+ *   In RTL mode directions are reversed, and ALIGN_RIGHT aligns to the left.
+ * @return {!Blockly.Input} The input being modified (to allow chaining).
+ */
+Blockly.Input.prototype.setAlign = function(align) {
+  this.align = align;
+  if (this.sourceBlock_.rendered) {
+    this.sourceBlock_.render();
+  }
+  return this;
+};
+
+/**
+ * Initialize the fields on this input.
+ */
+Blockly.Input.prototype.init = function() {
+  if (!this.sourceBlock_.workspace.rendered) {
+    return;  // Headless blocks don't need fields initialized.
+  }
+  for (var i = 0; i < this.fieldRow.length; i++) {
+    this.fieldRow[i].init();
+  }
+};
+
+/**
+ * Sever all links to this input.
+ */
+Blockly.Input.prototype.dispose = function() {
+  for (var i = 0, field; field = this.fieldRow[i]; i++) {
+    field.dispose();
+  }
+  if (this.connection) {
+    this.connection.dispose();
+  }
+  this.sourceBlock_ = null;
+};
diff --git a/blockly/core/msg.js b/blockly/core/msg.js
new file mode 100644
index 0000000..4ebcad1
--- /dev/null
+++ b/blockly/core/msg.js
@@ -0,0 +1,62 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2013 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Empty name space for the Message singleton.
+ * @author scr@google.com (Sheridan Rawlins)
+ */
+'use strict';
+
+/**
+ * Name space for the Msg singleton.
+ * Msg gets populated in the message files.
+ */
+goog.provide('Blockly.Msg');
+
+
+/**
+ * Back up original getMsg function.
+ * @type {!Function}
+ */
+goog.getMsgOrig = goog.getMsg;
+
+/**
+ * Gets a localized message.
+ * Overrides the default Closure function to check for a Blockly.Msg first.
+ * Used infrequently, only known case is TODAY button in date picker.
+ * @param {string} str Translatable string, places holders in the form {$foo}.
+ * @param {Object<string, string>=} opt_values Maps place holder name to value.
+ * @return {string} message with placeholders filled.
+ * @suppress {duplicate}
+ */
+goog.getMsg = function(str, opt_values) {
+  var key = goog.getMsg.blocklyMsgMap[str];
+  if (key) {
+    str = Blockly.Msg[key];
+  }
+  return goog.getMsgOrig(str, opt_values);
+};
+
+/**
+ * Mapping of Closure messages to Blockly.Msg names.
+ */
+goog.getMsg.blocklyMsgMap = {
+  'Today': 'TODAY'
+};
diff --git a/blockly/core/mutator.js b/blockly/core/mutator.js
new file mode 100644
index 0000000..19a0fe8
--- /dev/null
+++ b/blockly/core/mutator.js
@@ -0,0 +1,389 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2012 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Object representing a mutator dialog.  A mutator allows the
+ * user to change the shape of a block using a nested blocks editor.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.Mutator');
+
+goog.require('Blockly.Bubble');
+goog.require('Blockly.Icon');
+goog.require('Blockly.WorkspaceSvg');
+goog.require('goog.Timer');
+goog.require('goog.dom');
+
+
+/**
+ * Class for a mutator dialog.
+ * @param {!Array.<string>} quarkNames List of names of sub-blocks for flyout.
+ * @extends {Blockly.Icon}
+ * @constructor
+ */
+Blockly.Mutator = function(quarkNames) {
+  Blockly.Mutator.superClass_.constructor.call(this, null);
+  this.quarkNames_ = quarkNames;
+};
+goog.inherits(Blockly.Mutator, Blockly.Icon);
+
+/**
+ * Width of workspace.
+ * @private
+ */
+Blockly.Mutator.prototype.workspaceWidth_ = 0;
+
+/**
+ * Height of workspace.
+ * @private
+ */
+Blockly.Mutator.prototype.workspaceHeight_ = 0;
+
+/**
+ * Draw the mutator icon.
+ * @param {!Element} group The icon group.
+ * @private
+ */
+Blockly.Mutator.prototype.drawIcon_ = function(group) {
+  // Square with rounded corners.
+  Blockly.createSvgElement('rect',
+      {'class': 'blocklyIconShape',
+       'rx': '4', 'ry': '4',
+       'height': '16', 'width': '16'},
+       group);
+  // Gear teeth.
+  Blockly.createSvgElement('path',
+      {'class': 'blocklyIconSymbol',
+       'd': 'm4.203,7.296 0,1.368 -0.92,0.677 -0.11,0.41 0.9,1.559 0.41,0.11 1.043,-0.457 1.187,0.683 0.127,1.134 0.3,0.3 1.8,0 0.3,-0.299 0.127,-1.138 1.185,-0.682 1.046,0.458 0.409,-0.11 0.9,-1.559 -0.11,-0.41 -0.92,-0.677 0,-1.366 0.92,-0.677 0.11,-0.41 -0.9,-1.559 -0.409,-0.109 -1.046,0.458 -1.185,-0.682 -0.127,-1.138 -0.3,-0.299 -1.8,0 -0.3,0.3 -0.126,1.135 -1.187,0.682 -1.043,-0.457 -0.41,0.11 -0.899,1.559 0.108,0.409z'},
+       group);
+  // Axle hole.
+  Blockly.createSvgElement('circle',
+      {'class': 'blocklyIconShape', 'r': '2.7', 'cx': '8', 'cy': '8'},
+       group);
+};
+
+/**
+ * Clicking on the icon toggles if the mutator bubble is visible.
+ * Disable if block is uneditable.
+ * @param {!Event} e Mouse click event.
+ * @private
+ * @override
+ */
+Blockly.Mutator.prototype.iconClick_ = function(e) {
+  if (this.block_.isEditable()) {
+    Blockly.Icon.prototype.iconClick_.call(this, e);
+  }
+};
+
+/**
+ * Create the editor for the mutator's bubble.
+ * @return {!Element} The top-level node of the editor.
+ * @private
+ */
+Blockly.Mutator.prototype.createEditor_ = function() {
+  /* Create the editor.  Here's the markup that will be generated:
+  <svg>
+    [Workspace]
+  </svg>
+  */
+  this.svgDialog_ = Blockly.createSvgElement('svg',
+      {'x': Blockly.Bubble.BORDER_WIDTH, 'y': Blockly.Bubble.BORDER_WIDTH},
+      null);
+  // Convert the list of names into a list of XML objects for the flyout.
+  if (this.quarkNames_.length) {
+    var quarkXml = goog.dom.createDom('xml');
+    for (var i = 0, quarkName; quarkName = this.quarkNames_[i]; i++) {
+      quarkXml.appendChild(goog.dom.createDom('block', {'type': quarkName}));
+    }
+  } else {
+    var quarkXml = null;
+  }
+  var workspaceOptions = {
+    languageTree: quarkXml,
+    parentWorkspace: this.block_.workspace,
+    pathToMedia: this.block_.workspace.options.pathToMedia,
+    RTL: this.block_.RTL,
+    toolboxPosition: this.block_.RTL ? Blockly.TOOLBOX_AT_RIGHT :
+        Blockly.TOOLBOX_AT_LEFT,
+    horizontalLayout: false,
+    getMetrics: this.getFlyoutMetrics_.bind(this),
+    setMetrics: null
+  };
+  this.workspace_ = new Blockly.WorkspaceSvg(workspaceOptions);
+  this.workspace_.isMutator = true;
+  this.svgDialog_.appendChild(
+      this.workspace_.createDom('blocklyMutatorBackground'));
+  return this.svgDialog_;
+};
+
+/**
+ * Add or remove the UI indicating if this icon may be clicked or not.
+ */
+Blockly.Mutator.prototype.updateEditable = function() {
+  if (!this.block_.isInFlyout) {
+    if (this.block_.isEditable()) {
+      if (this.iconGroup_) {
+        Blockly.removeClass_(/** @type {!Element} */ (this.iconGroup_),
+                             'blocklyIconGroupReadonly');
+      }
+    } else {
+      // Close any mutator bubble.  Icon is not clickable.
+      this.setVisible(false);
+      if (this.iconGroup_) {
+        Blockly.addClass_(/** @type {!Element} */ (this.iconGroup_),
+                          'blocklyIconGroupReadonly');
+      }
+    }
+  }
+  // Default behaviour for an icon.
+  Blockly.Icon.prototype.updateEditable.call(this);
+};
+
+/**
+ * Callback function triggered when the bubble has resized.
+ * Resize the workspace accordingly.
+ * @private
+ */
+Blockly.Mutator.prototype.resizeBubble_ = function() {
+  var doubleBorderWidth = 2 * Blockly.Bubble.BORDER_WIDTH;
+  var workspaceSize = this.workspace_.getCanvas().getBBox();
+  var width;
+  if (this.block_.RTL) {
+    width = -workspaceSize.x;
+  } else {
+    width = workspaceSize.width + workspaceSize.x;
+  }
+  var height = workspaceSize.height + doubleBorderWidth * 3;
+  if (this.workspace_.flyout_) {
+    var flyoutMetrics = this.workspace_.flyout_.getMetrics_();
+    height = Math.max(height, flyoutMetrics.contentHeight + 20);
+  }
+  width += doubleBorderWidth * 3;
+  // Only resize if the size difference is significant.  Eliminates shuddering.
+  if (Math.abs(this.workspaceWidth_ - width) > doubleBorderWidth ||
+      Math.abs(this.workspaceHeight_ - height) > doubleBorderWidth) {
+    // Record some layout information for getFlyoutMetrics_.
+    this.workspaceWidth_ = width;
+    this.workspaceHeight_ = height;
+    // Resize the bubble.
+    this.bubble_.setBubbleSize(width + doubleBorderWidth,
+                               height + doubleBorderWidth);
+    this.svgDialog_.setAttribute('width', this.workspaceWidth_);
+    this.svgDialog_.setAttribute('height', this.workspaceHeight_);
+  }
+
+  if (this.block_.RTL) {
+    // Scroll the workspace to always left-align.
+    var translation = 'translate(' + this.workspaceWidth_ + ',0)';
+    this.workspace_.getCanvas().setAttribute('transform', translation);
+  }
+  this.workspace_.resize();
+};
+
+/**
+ * Show or hide the mutator bubble.
+ * @param {boolean} visible True if the bubble should be visible.
+ */
+Blockly.Mutator.prototype.setVisible = function(visible) {
+  if (visible == this.isVisible()) {
+    // No change.
+    return;
+  }
+  Blockly.Events.fire(
+      new Blockly.Events.Ui(this.block_, 'mutatorOpen', !visible, visible));
+  if (visible) {
+    // Create the bubble.
+    this.bubble_ = new Blockly.Bubble(
+        /** @type {!Blockly.WorkspaceSvg} */ (this.block_.workspace),
+        this.createEditor_(), this.block_.svgPath_, this.iconXY_, null, null);
+    var tree = this.workspace_.options.languageTree;
+    if (tree) {
+      this.workspace_.flyout_.init(this.workspace_);
+      this.workspace_.flyout_.show(tree.childNodes);
+    }
+
+    this.rootBlock_ = this.block_.decompose(this.workspace_);
+    var blocks = this.rootBlock_.getDescendants();
+    for (var i = 0, child; child = blocks[i]; i++) {
+      child.render();
+    }
+    // The root block should not be dragable or deletable.
+    this.rootBlock_.setMovable(false);
+    this.rootBlock_.setDeletable(false);
+    if (this.workspace_.flyout_) {
+      var margin = this.workspace_.flyout_.CORNER_RADIUS * 2;
+      var x = this.workspace_.flyout_.width_ + margin;
+    } else {
+      var margin = 16;
+      var x = margin;
+    }
+    if (this.block_.RTL) {
+      x = -x;
+    }
+    this.rootBlock_.moveBy(x, margin);
+    // Save the initial connections, then listen for further changes.
+    if (this.block_.saveConnections) {
+      var thisMutator = this;
+      this.block_.saveConnections(this.rootBlock_);
+      this.sourceListener_ = function() {
+        thisMutator.block_.saveConnections(thisMutator.rootBlock_);
+      };
+      this.block_.workspace.addChangeListener(this.sourceListener_);
+    }
+    this.resizeBubble_();
+    // When the mutator's workspace changes, update the source block.
+    this.workspace_.addChangeListener(this.workspaceChanged_.bind(this));
+    this.updateColour();
+  } else {
+    // Dispose of the bubble.
+    this.svgDialog_ = null;
+    this.workspace_.dispose();
+    this.workspace_ = null;
+    this.rootBlock_ = null;
+    this.bubble_.dispose();
+    this.bubble_ = null;
+    this.workspaceWidth_ = 0;
+    this.workspaceHeight_ = 0;
+    if (this.sourceListener_) {
+      this.block_.workspace.removeChangeListener(this.sourceListener_);
+      this.sourceListener_ = null;
+    }
+  }
+};
+
+/**
+ * Update the source block when the mutator's blocks are changed.
+ * Bump down any block that's too high.
+ * Fired whenever a change is made to the mutator's workspace.
+ * @private
+ */
+Blockly.Mutator.prototype.workspaceChanged_ = function() {
+  if (Blockly.dragMode_ == Blockly.DRAG_NONE) {
+    var blocks = this.workspace_.getTopBlocks(false);
+    var MARGIN = 20;
+    for (var b = 0, block; block = blocks[b]; b++) {
+      var blockXY = block.getRelativeToSurfaceXY();
+      var blockHW = block.getHeightWidth();
+      if (blockXY.y + blockHW.height < MARGIN) {
+        // Bump any block that's above the top back inside.
+        block.moveBy(0, MARGIN - blockHW.height - blockXY.y);
+      }
+    }
+  }
+
+  // When the mutator's workspace changes, update the source block.
+  if (this.rootBlock_.workspace == this.workspace_) {
+    Blockly.Events.setGroup(true);
+    var block = this.block_;
+    var oldMutationDom = block.mutationToDom();
+    var oldMutation = oldMutationDom && Blockly.Xml.domToText(oldMutationDom);
+    // Switch off rendering while the source block is rebuilt.
+    var savedRendered = block.rendered;
+    block.rendered = false;
+    // Allow the source block to rebuild itself.
+    block.compose(this.rootBlock_);
+    // Restore rendering and show the changes.
+    block.rendered = savedRendered;
+    // Mutation may have added some elements that need initalizing.
+    block.initSvg();
+    var newMutationDom = block.mutationToDom();
+    var newMutation = newMutationDom && Blockly.Xml.domToText(newMutationDom);
+    if (oldMutation != newMutation) {
+      Blockly.Events.fire(new Blockly.Events.Change(
+          block, 'mutation', null, oldMutation, newMutation));
+      // Ensure that any bump is part of this mutation's event group.
+      var group = Blockly.Events.getGroup();
+      setTimeout(function() {
+        Blockly.Events.setGroup(group);
+        block.bumpNeighbours_();
+        Blockly.Events.setGroup(false);
+      }, Blockly.BUMP_DELAY);
+    }
+    if (block.rendered) {
+      block.render();
+    }
+    this.resizeBubble_();
+    Blockly.Events.setGroup(false);
+  }
+};
+
+/**
+ * Return an object with all the metrics required to size scrollbars for the
+ * mutator flyout.  The following properties are computed:
+ * .viewHeight: Height of the visible rectangle,
+ * .viewWidth: Width of the visible rectangle,
+ * .absoluteTop: Top-edge of view.
+ * .absoluteLeft: Left-edge of view.
+ * @return {!Object} Contains size and position metrics of mutator dialog's
+ *     workspace.
+ * @private
+ */
+Blockly.Mutator.prototype.getFlyoutMetrics_ = function() {
+  return {
+    viewHeight: this.workspaceHeight_,
+    viewWidth: this.workspaceWidth_,
+    absoluteTop: 0,
+    absoluteLeft: 0
+  };
+};
+
+/**
+ * Dispose of this mutator.
+ */
+Blockly.Mutator.prototype.dispose = function() {
+  this.block_.mutator = null;
+  Blockly.Icon.prototype.dispose.call(this);
+};
+
+/**
+ * Reconnect an block to a mutated input.
+ * @param {Blockly.Connection} connectionChild Connection on child block.
+ * @param {!Blockly.Block} block Parent block.
+ * @param {string} inputName Name of input on parent block.
+ * @return {boolean} True iff a reconnection was made, false otherwise.
+ */
+Blockly.Mutator.reconnect = function(connectionChild, block, inputName) {
+  if (!connectionChild || !connectionChild.getSourceBlock().workspace) {
+    return false;  // No connection or block has been deleted.
+  }
+  var connectionParent = block.getInput(inputName).connection;
+  var currentParent = connectionChild.targetBlock();
+  if ((!currentParent || currentParent == block) &&
+      connectionParent.targetConnection != connectionChild) {
+    if (connectionParent.isConnected()) {
+      // There's already something connected here.  Get rid of it.
+      connectionParent.disconnect();
+    }
+    connectionParent.connect(connectionChild);
+    return true;
+  }
+  return false;
+};
+
+// Export symbols that would otherwise be renamed by Closure compiler.
+if (!goog.global['Blockly']) {
+  goog.global['Blockly'] = {};
+}
+if (!goog.global['Blockly']['Mutator']) {
+  goog.global['Blockly']['Mutator'] = {};
+}
+goog.global['Blockly']['Mutator']['reconnect'] = Blockly.Mutator.reconnect;
diff --git a/blockly/core/names.js b/blockly/core/names.js
new file mode 100644
index 0000000..bfe942a
--- /dev/null
+++ b/blockly/core/names.js
@@ -0,0 +1,143 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2012 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Utility functions for handling variables and procedure names.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.Names');
+
+
+/**
+ * Class for a database of entity names (variables, functions, etc).
+ * @param {string} reservedWords A comma-separated string of words that are
+ *     illegal for use as names in a language (e.g. 'new,if,this,...').
+ * @param {string=} opt_variablePrefix Some languages need a '$' or a namespace
+ *     before all variable names.
+ * @constructor
+ */
+Blockly.Names = function(reservedWords, opt_variablePrefix) {
+  this.variablePrefix_ = opt_variablePrefix || '';
+  this.reservedDict_ = Object.create(null);
+  if (reservedWords) {
+    var splitWords = reservedWords.split(',');
+    for (var i = 0; i < splitWords.length; i++) {
+      this.reservedDict_[splitWords[i]] = true;
+    }
+  }
+  this.reset();
+};
+
+/**
+ * When JavaScript (or most other languages) is generated, variable 'foo' and
+ * procedure 'foo' would collide.  However, Blockly has no such problems since
+ * variable get 'foo' and procedure call 'foo' are unambiguous.
+ * Therefore, Blockly keeps a separate type name to disambiguate.
+ * getName('foo', 'variable') -> 'foo'
+ * getName('foo', 'procedure') -> 'foo2'
+ */
+
+/**
+ * Empty the database and start from scratch.  The reserved words are kept.
+ */
+Blockly.Names.prototype.reset = function() {
+  this.db_ = Object.create(null);
+  this.dbReverse_ = Object.create(null);
+};
+
+/**
+ * Convert a Blockly entity name to a legal exportable entity name.
+ * @param {string} name The Blockly entity name (no constraints).
+ * @param {string} type The type of entity in Blockly
+ *     ('VARIABLE', 'PROCEDURE', 'BUILTIN', etc...).
+ * @return {string} An entity name legal for the exported language.
+ */
+Blockly.Names.prototype.getName = function(name, type) {
+  var normalized = name.toLowerCase() + '_' + type;
+  var prefix = (type == Blockly.Variables.NAME_TYPE) ?
+      this.variablePrefix_ : '';
+  if (normalized in this.db_) {
+    return prefix + this.db_[normalized];
+  }
+  var safeName = this.getDistinctName(name, type);
+  this.db_[normalized] = safeName.substr(prefix.length);
+  return safeName;
+};
+
+/**
+ * Convert a Blockly entity name to a legal exportable entity name.
+ * Ensure that this is a new name not overlapping any previously defined name.
+ * Also check against list of reserved words for the current language and
+ * ensure name doesn't collide.
+ * @param {string} name The Blockly entity name (no constraints).
+ * @param {string} type The type of entity in Blockly
+ *     ('VARIABLE', 'PROCEDURE', 'BUILTIN', etc...).
+ * @return {string} An entity name legal for the exported language.
+ */
+Blockly.Names.prototype.getDistinctName = function(name, type) {
+  var safeName = this.safeName_(name);
+  var i = '';
+  while (this.dbReverse_[safeName + i] ||
+         (safeName + i) in this.reservedDict_) {
+    // Collision with existing name.  Create a unique name.
+    i = i ? i + 1 : 2;
+  }
+  safeName += i;
+  this.dbReverse_[safeName] = true;
+  var prefix = (type == Blockly.Variables.NAME_TYPE) ?
+      this.variablePrefix_ : '';
+  return prefix + safeName;
+};
+
+/**
+ * Given a proposed entity name, generate a name that conforms to the
+ * [_A-Za-z][_A-Za-z0-9]* format that most languages consider legal for
+ * variables.
+ * @param {string} name Potentially illegal entity name.
+ * @return {string} Safe entity name.
+ * @private
+ */
+Blockly.Names.prototype.safeName_ = function(name) {
+  if (!name) {
+    name = 'unnamed';
+  } else {
+    // Unfortunately names in non-latin characters will look like
+    // _E9_9F_B3_E4_B9_90 which is pretty meaningless.
+    name = encodeURI(name.replace(/ /g, '_')).replace(/[^\w]/g, '_');
+    // Most languages don't allow names with leading numbers.
+    if ('0123456789'.indexOf(name[0]) != -1) {
+      name = 'my_' + name;
+    }
+  }
+  return name;
+};
+
+/**
+ * Do the given two entity names refer to the same entity?
+ * Blockly names are case-insensitive.
+ * @param {string} name1 First name.
+ * @param {string} name2 Second name.
+ * @return {boolean} True if names are the same.
+ */
+Blockly.Names.equals = function(name1, name2) {
+  return name1.toLowerCase() == name2.toLowerCase();
+};
diff --git a/blockly/core/options.js b/blockly/core/options.js
new file mode 100644
index 0000000..268affa
--- /dev/null
+++ b/blockly/core/options.js
@@ -0,0 +1,231 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2016 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Object that controls settings for the workspace.
+ * @author fenichel@google.com (Rachel Fenichel)
+ */
+'use strict';
+
+goog.provide('Blockly.Options');
+
+
+/**
+ * Parse the user-specified options, using reasonable defaults where behaviour
+ * is unspecified.
+ * @param {!Object} options Dictionary of options.  Specification:
+ *   https://developers.google.com/blockly/guides/get-started/web#configuration
+ * @constructor
+ */
+Blockly.Options = function(options) {
+  var readOnly = !!options['readOnly'];
+  if (readOnly) {
+    var languageTree = null;
+    var hasCategories = false;
+    var hasTrashcan = false;
+    var hasCollapse = false;
+    var hasComments = false;
+    var hasDisable = false;
+    var hasSounds = false;
+  } else {
+    var languageTree = Blockly.Options.parseToolboxTree(options['toolbox']);
+    var hasCategories = Boolean(languageTree &&
+        languageTree.getElementsByTagName('category').length);
+    var hasTrashcan = options['trashcan'];
+    if (hasTrashcan === undefined) {
+      hasTrashcan = hasCategories;
+    }
+    var hasCollapse = options['collapse'];
+    if (hasCollapse === undefined) {
+      hasCollapse = hasCategories;
+    }
+    var hasComments = options['comments'];
+    if (hasComments === undefined) {
+      hasComments = hasCategories;
+    }
+    var hasDisable = options['disable'];
+    if (hasDisable === undefined) {
+      hasDisable = hasCategories;
+    }
+    var hasSounds = options['sounds'];
+    if (hasSounds === undefined) {
+      hasSounds = true;
+    }
+  }
+  var rtl = !!options['rtl'];
+  var horizontalLayout = options['horizontalLayout'];
+  if (horizontalLayout === undefined) {
+    horizontalLayout = false;
+  }
+  var toolboxAtStart = options['toolboxPosition'];
+  if (toolboxAtStart === 'end') {
+    toolboxAtStart = false;
+  } else {
+    toolboxAtStart = true;
+  }
+
+  if (horizontalLayout) {
+    var toolboxPosition = toolboxAtStart ?
+        Blockly.TOOLBOX_AT_TOP : Blockly.TOOLBOX_AT_BOTTOM;
+  } else {
+    var toolboxPosition = (toolboxAtStart == rtl) ?
+        Blockly.TOOLBOX_AT_RIGHT : Blockly.TOOLBOX_AT_LEFT;
+  }
+
+  var hasScrollbars = options['scrollbars'];
+  if (hasScrollbars === undefined) {
+    hasScrollbars = hasCategories;
+  }
+  var hasCss = options['css'];
+  if (hasCss === undefined) {
+    hasCss = true;
+  }
+  var pathToMedia = 'https://blockly-demo.appspot.com/static/media/';
+  if (options['media']) {
+    pathToMedia = options['media'];
+  } else if (options['path']) {
+    // 'path' is a deprecated option which has been replaced by 'media'.
+    pathToMedia = options['path'] + 'media/';
+  }
+
+  this.RTL = rtl;
+  this.collapse = hasCollapse;
+  this.comments = hasComments;
+  this.disable = hasDisable;
+  this.readOnly = readOnly;
+  this.maxBlocks = options['maxBlocks'] || Infinity;
+  this.pathToMedia = pathToMedia;
+  this.hasCategories = hasCategories;
+  this.hasScrollbars = hasScrollbars;
+  this.hasTrashcan = hasTrashcan;
+  this.hasSounds = hasSounds;
+  this.hasCss = hasCss;
+  this.horizontalLayout = horizontalLayout;
+  this.languageTree = languageTree;
+  this.gridOptions = Blockly.Options.parseGridOptions_(options);
+  this.zoomOptions = Blockly.Options.parseZoomOptions_(options);
+  this.toolboxPosition = toolboxPosition;
+};
+
+/**
+ * @type {Blockly.Workspace} the parent of the current workspace, or null if
+ *    there is no parent workspace.
+ **/
+Blockly.Options.prototype.parentWorkspace = null;
+
+/**
+ * If set, sets the translation of the workspace to match the scrollbars.
+ */
+Blockly.Options.prototype.setMetrics = null;
+
+/**
+ * Return an object with the metrics required to size the workspace.
+ * @return {Object} Contains size and position metrics, or null.
+ */
+Blockly.Options.prototype.getMetrics = null;
+
+/**
+ * Parse the user-specified zoom options, using reasonable defaults where
+ * behaviour is unspecified.  See zoom documentation:
+ *   https://developers.google.com/blockly/guides/configure/web/zoom
+ * @param {!Object} options Dictionary of options.
+ * @return {!Object} A dictionary of normalized options.
+ * @private
+ */
+Blockly.Options.parseZoomOptions_ = function(options) {
+  var zoom = options['zoom'] || {};
+  var zoomOptions = {};
+  if (zoom['controls'] === undefined) {
+    zoomOptions.controls = false;
+  } else {
+    zoomOptions.controls = !!zoom['controls'];
+  }
+  if (zoom['wheel'] === undefined) {
+    zoomOptions.wheel = false;
+  } else {
+    zoomOptions.wheel = !!zoom['wheel'];
+  }
+  if (zoom['startScale'] === undefined) {
+    zoomOptions.startScale = 1;
+  } else {
+    zoomOptions.startScale = parseFloat(zoom['startScale']);
+  }
+  if (zoom['maxScale'] === undefined) {
+    zoomOptions.maxScale = 3;
+  } else {
+    zoomOptions.maxScale = parseFloat(zoom['maxScale']);
+  }
+  if (zoom['minScale'] === undefined) {
+    zoomOptions.minScale = 0.3;
+  } else {
+    zoomOptions.minScale = parseFloat(zoom['minScale']);
+  }
+  if (zoom['scaleSpeed'] === undefined) {
+    zoomOptions.scaleSpeed = 1.2;
+  } else {
+    zoomOptions.scaleSpeed = parseFloat(zoom['scaleSpeed']);
+  }
+  return zoomOptions;
+};
+
+/**
+ * Parse the user-specified grid options, using reasonable defaults where
+ * behaviour is unspecified. See grid documentation:
+ *   https://developers.google.com/blockly/guides/configure/web/grid
+ * @param {!Object} options Dictionary of options.
+ * @return {!Object} A dictionary of normalized options.
+ * @private
+ */
+Blockly.Options.parseGridOptions_ = function(options) {
+  var grid = options['grid'] || {};
+  var gridOptions = {};
+  gridOptions.spacing = parseFloat(grid['spacing']) || 0;
+  gridOptions.colour = grid['colour'] || '#888';
+  gridOptions.length = parseFloat(grid['length']) || 1;
+  gridOptions.snap = gridOptions.spacing > 0 && !!grid['snap'];
+  return gridOptions;
+};
+
+/**
+ * Parse the provided toolbox tree into a consistent DOM format.
+ * @param {Node|string} tree DOM tree of blocks, or text representation of same.
+ * @return {Node} DOM tree of blocks, or null.
+ */
+Blockly.Options.parseToolboxTree = function(tree) {
+  if (tree) {
+    if (typeof tree != 'string') {
+      if (typeof XSLTProcessor == 'undefined' && tree.outerHTML) {
+        // In this case the tree will not have been properly built by the
+        // browser. The HTML will be contained in the element, but it will
+        // not have the proper DOM structure since the browser doesn't support
+        // XSLTProcessor (XML -> HTML). This is the case in IE 9+.
+        tree = tree.outerHTML;
+      } else if (!(tree instanceof Element)) {
+        tree = null;
+      }
+    }
+    if (typeof tree == 'string') {
+      tree = Blockly.Xml.textToDom(tree);
+    }
+  } else {
+    tree = null;
+  }
+  return tree;
+};
diff --git a/blockly/core/procedures.js b/blockly/core/procedures.js
new file mode 100644
index 0000000..beb4a17
--- /dev/null
+++ b/blockly/core/procedures.js
@@ -0,0 +1,287 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2012 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Utility functions for handling procedures.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.Procedures');
+
+goog.require('Blockly.Blocks');
+goog.require('Blockly.Field');
+goog.require('Blockly.Names');
+goog.require('Blockly.Workspace');
+
+
+/**
+ * Category to separate procedure names from variables and generated functions.
+ */
+Blockly.Procedures.NAME_TYPE = 'PROCEDURE';
+
+/**
+ * Find all user-created procedure definitions in a workspace.
+ * @param {!Blockly.Workspace} root Root workspace.
+ * @return {!Array.<!Array.<!Array>>} Pair of arrays, the
+ *     first contains procedures without return variables, the second with.
+ *     Each procedure is defined by a three-element list of name, parameter
+ *     list, and return value boolean.
+ */
+Blockly.Procedures.allProcedures = function(root) {
+  var blocks = root.getAllBlocks();
+  var proceduresReturn = [];
+  var proceduresNoReturn = [];
+  for (var i = 0; i < blocks.length; i++) {
+    if (blocks[i].getProcedureDef) {
+      var tuple = blocks[i].getProcedureDef();
+      if (tuple) {
+        if (tuple[2]) {
+          proceduresReturn.push(tuple);
+        } else {
+          proceduresNoReturn.push(tuple);
+        }
+      }
+    }
+  }
+  proceduresNoReturn.sort(Blockly.Procedures.procTupleComparator_);
+  proceduresReturn.sort(Blockly.Procedures.procTupleComparator_);
+  return [proceduresNoReturn, proceduresReturn];
+};
+
+/**
+ * Comparison function for case-insensitive sorting of the first element of
+ * a tuple.
+ * @param {!Array} ta First tuple.
+ * @param {!Array} tb Second tuple.
+ * @return {number} -1, 0, or 1 to signify greater than, equality, or less than.
+ * @private
+ */
+Blockly.Procedures.procTupleComparator_ = function(ta, tb) {
+  return ta[0].toLowerCase().localeCompare(tb[0].toLowerCase());
+};
+
+/**
+ * Ensure two identically-named procedures don't exist.
+ * @param {string} name Proposed procedure name.
+ * @param {!Blockly.Block} block Block to disambiguate.
+ * @return {string} Non-colliding name.
+ */
+Blockly.Procedures.findLegalName = function(name, block) {
+  if (block.isInFlyout) {
+    // Flyouts can have multiple procedures called 'do something'.
+    return name;
+  }
+  while (!Blockly.Procedures.isLegalName_(name, block.workspace, block)) {
+    // Collision with another procedure.
+    var r = name.match(/^(.*?)(\d+)$/);
+    if (!r) {
+      name += '2';
+    } else {
+      name = r[1] + (parseInt(r[2], 10) + 1);
+    }
+  }
+  return name;
+};
+
+/**
+ * Does this procedure have a legal name?  Illegal names include names of
+ * procedures already defined.
+ * @param {string} name The questionable name.
+ * @param {!Blockly.Workspace} workspace The workspace to scan for collisions.
+ * @param {Blockly.Block=} opt_exclude Optional block to exclude from
+ *     comparisons (one doesn't want to collide with oneself).
+ * @return {boolean} True if the name is legal.
+ * @private
+ */
+Blockly.Procedures.isLegalName_ = function(name, workspace, opt_exclude) {
+  var blocks = workspace.getAllBlocks();
+  // Iterate through every block and check the name.
+  for (var i = 0; i < blocks.length; i++) {
+    if (blocks[i] == opt_exclude) {
+      continue;
+    }
+    if (blocks[i].getProcedureDef) {
+      var procName = blocks[i].getProcedureDef();
+      if (Blockly.Names.equals(procName[0], name)) {
+        return false;
+      }
+    }
+  }
+  return true;
+};
+
+/**
+ * Rename a procedure.  Called by the editable field.
+ * @param {string} name The proposed new name.
+ * @return {string} The accepted name.
+ * @this {!Blockly.Field}
+ */
+Blockly.Procedures.rename = function(name) {
+  // Strip leading and trailing whitespace.  Beyond this, all names are legal.
+  name = name.replace(/^[\s\xa0]+|[\s\xa0]+$/g, '');
+
+  // Ensure two identically-named procedures don't exist.
+  var legalName = Blockly.Procedures.findLegalName(name, this.sourceBlock_);
+  var oldName = this.text_;
+  if (oldName != name && oldName != legalName) {
+    // Rename any callers.
+    var blocks = this.sourceBlock_.workspace.getAllBlocks();
+    for (var i = 0; i < blocks.length; i++) {
+      if (blocks[i].renameProcedure) {
+        blocks[i].renameProcedure(oldName, legalName);
+      }
+    }
+  }
+  return legalName;
+};
+
+/**
+ * Construct the blocks required by the flyout for the procedure category.
+ * @param {!Blockly.Workspace} workspace The workspace contianing procedures.
+ * @return {!Array.<!Element>} Array of XML block elements.
+ */
+Blockly.Procedures.flyoutCategory = function(workspace) {
+  var xmlList = [];
+  if (Blockly.Blocks['procedures_defnoreturn']) {
+    // <block type="procedures_defnoreturn" gap="16"></block>
+    var block = goog.dom.createDom('block');
+    block.setAttribute('type', 'procedures_defnoreturn');
+    block.setAttribute('gap', 16);
+    xmlList.push(block);
+  }
+  if (Blockly.Blocks['procedures_defreturn']) {
+    // <block type="procedures_defreturn" gap="16"></block>
+    var block = goog.dom.createDom('block');
+    block.setAttribute('type', 'procedures_defreturn');
+    block.setAttribute('gap', 16);
+    xmlList.push(block);
+  }
+  if (Blockly.Blocks['procedures_ifreturn']) {
+    // <block type="procedures_ifreturn" gap="16"></block>
+    var block = goog.dom.createDom('block');
+    block.setAttribute('type', 'procedures_ifreturn');
+    block.setAttribute('gap', 16);
+    xmlList.push(block);
+  }
+  if (xmlList.length) {
+    // Add slightly larger gap between system blocks and user calls.
+    xmlList[xmlList.length - 1].setAttribute('gap', 24);
+  }
+
+  function populateProcedures(procedureList, templateName) {
+    for (var i = 0; i < procedureList.length; i++) {
+      var name = procedureList[i][0];
+      var args = procedureList[i][1];
+      // <block type="procedures_callnoreturn" gap="16">
+      //   <mutation name="do something">
+      //     <arg name="x"></arg>
+      //   </mutation>
+      // </block>
+      var block = goog.dom.createDom('block');
+      block.setAttribute('type', templateName);
+      block.setAttribute('gap', 16);
+      var mutation = goog.dom.createDom('mutation');
+      mutation.setAttribute('name', name);
+      block.appendChild(mutation);
+      for (var j = 0; j < args.length; j++) {
+        var arg = goog.dom.createDom('arg');
+        arg.setAttribute('name', args[j]);
+        mutation.appendChild(arg);
+      }
+      xmlList.push(block);
+    }
+  }
+
+  var tuple = Blockly.Procedures.allProcedures(workspace);
+  populateProcedures(tuple[0], 'procedures_callnoreturn');
+  populateProcedures(tuple[1], 'procedures_callreturn');
+  return xmlList;
+};
+
+/**
+ * Find all the callers of a named procedure.
+ * @param {string} name Name of procedure.
+ * @param {!Blockly.Workspace} workspace The workspace to find callers in.
+ * @return {!Array.<!Blockly.Block>} Array of caller blocks.
+ */
+Blockly.Procedures.getCallers = function(name, workspace) {
+  var callers = [];
+  var blocks = workspace.getAllBlocks();
+  // Iterate through every block and check the name.
+  for (var i = 0; i < blocks.length; i++) {
+    if (blocks[i].getProcedureCall) {
+      var procName = blocks[i].getProcedureCall();
+      // Procedure name may be null if the block is only half-built.
+      if (procName && Blockly.Names.equals(procName, name)) {
+        callers.push(blocks[i]);
+      }
+    }
+  }
+  return callers;
+};
+
+/**
+ * When a procedure definition changes its parameters, find and edit all its
+ * callers.
+ * @param {!Blockly.Block} defBlock Procedure definition block.
+ */
+Blockly.Procedures.mutateCallers = function(defBlock) {
+  var oldRecordUndo = Blockly.Events.recordUndo;
+  var name = defBlock.getProcedureDef()[0];
+  var xmlElement = defBlock.mutationToDom(true);
+  var callers = Blockly.Procedures.getCallers(name, defBlock.workspace);
+  for (var i = 0, caller; caller = callers[i]; i++) {
+    var oldMutationDom = caller.mutationToDom();
+    var oldMutation = oldMutationDom && Blockly.Xml.domToText(oldMutationDom);
+    caller.domToMutation(xmlElement);
+    var newMutationDom = caller.mutationToDom();
+    var newMutation = newMutationDom && Blockly.Xml.domToText(newMutationDom);
+    if (oldMutation != newMutation) {
+      // Fire a mutation on every caller block.  But don't record this as an
+      // undo action since it is deterministically tied to the procedure's
+      // definition mutation.
+      Blockly.Events.recordUndo = false;
+      Blockly.Events.fire(new Blockly.Events.Change(
+          caller, 'mutation', null, oldMutation, newMutation));
+      Blockly.Events.recordUndo = oldRecordUndo;
+    }
+  }
+};
+
+/**
+ * Find the definition block for the named procedure.
+ * @param {string} name Name of procedure.
+ * @param {!Blockly.Workspace} workspace The workspace to search.
+ * @return {Blockly.Block} The procedure definition block, or null not found.
+ */
+Blockly.Procedures.getDefinition = function(name, workspace) {
+  // Assume that a procedure definition is a top block.
+  var blocks = workspace.getTopBlocks(false);
+  for (var i = 0; i < blocks.length; i++) {
+    if (blocks[i].getProcedureDef) {
+      var tuple = blocks[i].getProcedureDef();
+      if (tuple && Blockly.Names.equals(tuple[0], name)) {
+        return blocks[i];
+      }
+    }
+  }
+  return null;
+};
diff --git a/blockly/core/rendered_connection.js b/blockly/core/rendered_connection.js
new file mode 100644
index 0000000..dcb90f1
--- /dev/null
+++ b/blockly/core/rendered_connection.js
@@ -0,0 +1,395 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2016 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Components for creating connections between blocks.
+ * @author fenichel@google.com (Rachel Fenichel)
+ */
+'use strict';
+
+goog.provide('Blockly.RenderedConnection');
+
+goog.require('Blockly.Connection');
+
+
+/**
+ * Class for a connection between blocks that may be rendered on screen.
+ * @param {!Blockly.Block} source The block establishing this connection.
+ * @param {number} type The type of the connection.
+ * @extends {Blockly.Connection}
+ * @constructor
+ */
+Blockly.RenderedConnection = function(source, type) {
+  Blockly.RenderedConnection.superClass_.constructor.call(this, source, type);
+  this.offsetInBlock_ = new goog.math.Coordinate(0, 0);
+};
+goog.inherits(Blockly.RenderedConnection, Blockly.Connection);
+
+/**
+ * Returns the distance between this connection and another connection.
+ * @param {!Blockly.Connection} otherConnection The other connection to measure
+ *     the distance to.
+ * @return {number} The distance between connections.
+ */
+Blockly.RenderedConnection.prototype.distanceFrom = function(otherConnection) {
+  var xDiff = this.x_ - otherConnection.x_;
+  var yDiff = this.y_ - otherConnection.y_;
+  return Math.sqrt(xDiff * xDiff + yDiff * yDiff);
+};
+
+/**
+ * Move the block(s) belonging to the connection to a point where they don't
+ * visually interfere with the specified connection.
+ * @param {!Blockly.Connection} staticConnection The connection to move away
+ *     from.
+ * @private
+ */
+Blockly.RenderedConnection.prototype.bumpAwayFrom_ = function(staticConnection) {
+  if (Blockly.dragMode_ != Blockly.DRAG_NONE) {
+    // Don't move blocks around while the user is doing the same.
+    return;
+  }
+  // Move the root block.
+  var rootBlock = this.sourceBlock_.getRootBlock();
+  if (rootBlock.isInFlyout) {
+    // Don't move blocks around in a flyout.
+    return;
+  }
+  var reverse = false;
+  if (!rootBlock.isMovable()) {
+    // Can't bump an uneditable block away.
+    // Check to see if the other block is movable.
+    rootBlock = staticConnection.getSourceBlock().getRootBlock();
+    if (!rootBlock.isMovable()) {
+      return;
+    }
+    // Swap the connections and move the 'static' connection instead.
+    staticConnection = this;
+    reverse = true;
+  }
+  // Raise it to the top for extra visibility.
+  var selected = Blockly.selected == rootBlock;
+  selected || rootBlock.addSelect();
+  var dx = (staticConnection.x_ + Blockly.SNAP_RADIUS) - this.x_;
+  var dy = (staticConnection.y_ + Blockly.SNAP_RADIUS) - this.y_;
+  if (reverse) {
+    // When reversing a bump due to an uneditable block, bump up.
+    dy = -dy;
+  }
+  if (rootBlock.RTL) {
+    dx = -dx;
+  }
+  rootBlock.moveBy(dx, dy);
+  selected || rootBlock.removeSelect();
+};
+
+/**
+ * Change the connection's coordinates.
+ * @param {number} x New absolute x coordinate.
+ * @param {number} y New absolute y coordinate.
+ */
+Blockly.RenderedConnection.prototype.moveTo = function(x, y) {
+  // Remove it from its old location in the database (if already present)
+  if (this.inDB_) {
+    this.db_.removeConnection_(this);
+  }
+  this.x_ = x;
+  this.y_ = y;
+  // Insert it into its new location in the database.
+  if (!this.hidden_) {
+    this.db_.addConnection(this);
+  }
+};
+
+/**
+ * Change the connection's coordinates.
+ * @param {number} dx Change to x coordinate.
+ * @param {number} dy Change to y coordinate.
+ */
+Blockly.RenderedConnection.prototype.moveBy = function(dx, dy) {
+  this.moveTo(this.x_ + dx, this.y_ + dy);
+};
+
+/**
+ * Move this connection to the location given by its offset within the block and
+ * the coordinate of the block's top left corner.
+ * @param {!goog.math.Coordinate} blockTL The coordinate of the top left corner
+ *     of the block.
+ */
+Blockly.RenderedConnection.prototype.moveToOffset = function(blockTL) {
+  this.moveTo(blockTL.x + this.offsetInBlock_.x,
+      blockTL.y + this.offsetInBlock_.y);
+};
+
+/**
+ * Set the offset of this connection relative to the top left of its block.
+ * @param {number} x The new relative x.
+ * @param {number} y The new relative y.
+ */
+Blockly.RenderedConnection.prototype.setOffsetInBlock = function(x, y) {
+  this.offsetInBlock_.x = x;
+  this.offsetInBlock_.y = y;
+};
+
+/**
+ * Move the blocks on either side of this connection right next to each other.
+ * @private
+ */
+Blockly.RenderedConnection.prototype.tighten_ = function() {
+  var dx = this.targetConnection.x_ - this.x_;
+  var dy = this.targetConnection.y_ - this.y_;
+  if (dx != 0 || dy != 0) {
+    var block = this.targetBlock();
+    var svgRoot = block.getSvgRoot();
+    if (!svgRoot) {
+      throw 'block is not rendered.';
+    }
+    var xy = Blockly.getRelativeXY_(svgRoot);
+    block.getSvgRoot().setAttribute('transform',
+        'translate(' + (xy.x - dx) + ',' + (xy.y - dy) + ')');
+    block.moveConnections_(-dx, -dy);
+  }
+};
+
+/**
+ * Find the closest compatible connection to this connection.
+ * @param {number} maxLimit The maximum radius to another connection.
+ * @param {number} dx Horizontal offset between this connection's location
+ *     in the database and the current location (as a result of dragging).
+ * @param {number} dy Vertical offset between this connection's location
+ *     in the database and the current location (as a result of dragging).
+ * @return {!{connection: ?Blockly.Connection, radius: number}} Contains two
+ *     properties: 'connection' which is either another connection or null,
+ *     and 'radius' which is the distance.
+ */
+Blockly.RenderedConnection.prototype.closest = function(maxLimit, dx, dy) {
+  return this.dbOpposite_.searchForClosest(this, maxLimit, dx, dy);
+};
+
+/**
+ * Add highlighting around this connection.
+ */
+Blockly.RenderedConnection.prototype.highlight = function() {
+  var steps;
+  if (this.type == Blockly.INPUT_VALUE || this.type == Blockly.OUTPUT_VALUE) {
+    steps = 'm 0,0 ' + Blockly.BlockSvg.TAB_PATH_DOWN + ' v 5';
+  } else {
+    steps = 'm -20,0 h 5 ' + Blockly.BlockSvg.NOTCH_PATH_LEFT + ' h 5';
+  }
+  var xy = this.sourceBlock_.getRelativeToSurfaceXY();
+  var x = this.x_ - xy.x;
+  var y = this.y_ - xy.y;
+  Blockly.Connection.highlightedPath_ = Blockly.createSvgElement('path',
+      {'class': 'blocklyHighlightedConnectionPath',
+       'd': steps,
+       transform: 'translate(' + x + ',' + y + ')' +
+           (this.sourceBlock_.RTL ? ' scale(-1 1)' : '')},
+      this.sourceBlock_.getSvgRoot());
+};
+
+/**
+ * Unhide this connection, as well as all down-stream connections on any block
+ * attached to this connection.  This happens when a block is expanded.
+ * Also unhides down-stream comments.
+ * @return {!Array.<!Blockly.Block>} List of blocks to render.
+ */
+Blockly.RenderedConnection.prototype.unhideAll = function() {
+  this.setHidden(false);
+  // All blocks that need unhiding must be unhidden before any rendering takes
+  // place, since rendering requires knowing the dimensions of lower blocks.
+  // Also, since rendering a block renders all its parents, we only need to
+  // render the leaf nodes.
+  var renderList = [];
+  if (this.type != Blockly.INPUT_VALUE && this.type != Blockly.NEXT_STATEMENT) {
+    // Only spider down.
+    return renderList;
+  }
+  var block = this.targetBlock();
+  if (block) {
+    var connections;
+    if (block.isCollapsed()) {
+      // This block should only be partially revealed since it is collapsed.
+      connections = [];
+      block.outputConnection && connections.push(block.outputConnection);
+      block.nextConnection && connections.push(block.nextConnection);
+      block.previousConnection && connections.push(block.previousConnection);
+    } else {
+      // Show all connections of this block.
+      connections = block.getConnections_(true);
+    }
+    for (var i = 0; i < connections.length; i++) {
+      renderList.push.apply(renderList, connections[i].unhideAll());
+    }
+    if (!renderList.length) {
+      // Leaf block.
+      renderList[0] = block;
+    }
+  }
+  return renderList;
+};
+
+/**
+ * Remove the highlighting around this connection.
+ */
+Blockly.RenderedConnection.prototype.unhighlight = function() {
+  goog.dom.removeNode(Blockly.Connection.highlightedPath_);
+  delete Blockly.Connection.highlightedPath_;
+};
+
+/**
+ * Set whether this connections is hidden (not tracked in a database) or not.
+ * @param {boolean} hidden True if connection is hidden.
+ */
+Blockly.RenderedConnection.prototype.setHidden = function(hidden) {
+  this.hidden_ = hidden;
+  if (hidden && this.inDB_) {
+    this.db_.removeConnection_(this);
+  } else if (!hidden && !this.inDB_) {
+    this.db_.addConnection(this);
+  }
+};
+
+/**
+ * Hide this connection, as well as all down-stream connections on any block
+ * attached to this connection.  This happens when a block is collapsed.
+ * Also hides down-stream comments.
+ */
+Blockly.RenderedConnection.prototype.hideAll = function() {
+  this.setHidden(true);
+  if (this.targetConnection) {
+    var blocks = this.targetBlock().getDescendants();
+    for (var i = 0; i < blocks.length; i++) {
+      var block = blocks[i];
+      // Hide all connections of all children.
+      var connections = block.getConnections_(true);
+      for (var j = 0; j < connections.length; j++) {
+        connections[j].setHidden(true);
+      }
+      // Close all bubbles of all children.
+      var icons = block.getIcons();
+      for (var j = 0; j < icons.length; j++) {
+        icons[j].setVisible(false);
+      }
+    }
+  }
+};
+
+/**
+ * Check if the two connections can be dragged to connect to each other.
+ * @param {!Blockly.Connection} candidate A nearby connection to check.
+ * @param {number} maxRadius The maximum radius allowed for connections.
+ * @return {boolean} True if the connection is allowed, false otherwise.
+ */
+Blockly.RenderedConnection.prototype.isConnectionAllowed = function(candidate,
+    maxRadius) {
+  if (this.distanceFrom(candidate) > maxRadius) {
+    return false;
+  }
+
+  return Blockly.RenderedConnection.superClass_.isConnectionAllowed.call(this,
+      candidate);
+};
+
+/**
+ * Disconnect two blocks that are connected by this connection.
+ * @param {!Blockly.Block} parentBlock The superior block.
+ * @param {!Blockly.Block} childBlock The inferior block.
+ * @private
+ */
+Blockly.RenderedConnection.prototype.disconnectInternal_ = function(parentBlock,
+    childBlock) {
+  Blockly.RenderedConnection.superClass_.disconnectInternal_.call(this,
+      parentBlock, childBlock);
+  // Rerender the parent so that it may reflow.
+  if (parentBlock.rendered) {
+    parentBlock.render();
+  }
+  if (childBlock.rendered) {
+    childBlock.updateDisabled();
+    childBlock.render();
+  }
+};
+
+/**
+ * Respawn the shadow block if there was one connected to the this connection.
+ * Render/rerender blocks as needed.
+ * @private
+ */
+Blockly.RenderedConnection.prototype.respawnShadow_ = function() {
+  var parentBlock = this.getSourceBlock();
+  // Respawn the shadow block if there is one.
+  var shadow = this.getShadowDom();
+  if (parentBlock.workspace && shadow && Blockly.Events.recordUndo) {
+    Blockly.RenderedConnection.superClass_.respawnShadow_.call(this);
+    var blockShadow = this.targetBlock();
+    if (!blockShadow) {
+      throw 'Couldn\'t respawn the shadow block that should exist here.';
+    }
+    blockShadow.initSvg();
+    blockShadow.render(false);
+    if (parentBlock.rendered) {
+      parentBlock.render();
+    }
+  }
+};
+
+/**
+ * Find all nearby compatible connections to this connection.
+ * Type checking does not apply, since this function is used for bumping.
+ * @param {number} maxLimit The maximum radius to another connection.
+ * @return {!Array.<!Blockly.Connection>} List of connections.
+ * @private
+ */
+Blockly.RenderedConnection.prototype.neighbours_ = function(maxLimit) {
+  return this.dbOpposite_.getNeighbours(this, maxLimit);
+};
+
+/**
+ * Connect two connections together.  This is the connection on the superior
+ * block.  Rerender blocks as needed.
+ * @param {!Blockly.Connection} childConnection Connection on inferior block.
+ * @private
+ */
+Blockly.RenderedConnection.prototype.connect_ = function(childConnection) {
+  Blockly.RenderedConnection.superClass_.connect_.call(this, childConnection);
+
+  var parentConnection = this;
+  var parentBlock = parentConnection.getSourceBlock();
+  var childBlock = childConnection.getSourceBlock();
+
+  if (parentBlock.rendered) {
+    parentBlock.updateDisabled();
+  }
+  if (childBlock.rendered) {
+    childBlock.updateDisabled();
+  }
+  if (parentBlock.rendered && childBlock.rendered) {
+    if (parentConnection.type == Blockly.NEXT_STATEMENT ||
+        parentConnection.type == Blockly.PREVIOUS_STATEMENT) {
+      // Child block may need to square off its corners if it is in a stack.
+      // Rendering a child will render its parent.
+      childBlock.render();
+    } else {
+      // Child block does not change shape.  Rendering the parent node will
+      // move its connected children into position.
+      parentBlock.render();
+    }
+  }
+};
diff --git a/blockly/core/scrollbar.js b/blockly/core/scrollbar.js
new file mode 100644
index 0000000..da2dd94
--- /dev/null
+++ b/blockly/core/scrollbar.js
@@ -0,0 +1,750 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2011 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Library for creating scrollbars.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.Scrollbar');
+goog.provide('Blockly.ScrollbarPair');
+
+goog.require('goog.dom');
+goog.require('goog.events');
+
+
+/**
+ * Class for a pair of scrollbars.  Horizontal and vertical.
+ * @param {!Blockly.Workspace} workspace Workspace to bind the scrollbars to.
+ * @constructor
+ */
+Blockly.ScrollbarPair = function(workspace) {
+  this.workspace_ = workspace;
+  this.hScroll = new Blockly.Scrollbar(workspace, true, true);
+  this.vScroll = new Blockly.Scrollbar(workspace, false, true);
+  this.corner_ = Blockly.createSvgElement('rect',
+      {'height': Blockly.Scrollbar.scrollbarThickness,
+      'width': Blockly.Scrollbar.scrollbarThickness,
+      'class': 'blocklyScrollbarBackground'}, null);
+  Blockly.Scrollbar.insertAfter_(this.corner_, workspace.getBubbleCanvas());
+};
+
+/**
+ * Previously recorded metrics from the workspace.
+ * @type {Object}
+ * @private
+ */
+Blockly.ScrollbarPair.prototype.oldHostMetrics_ = null;
+
+/**
+ * Dispose of this pair of scrollbars.
+ * Unlink from all DOM elements to prevent memory leaks.
+ */
+Blockly.ScrollbarPair.prototype.dispose = function() {
+  goog.dom.removeNode(this.corner_);
+  this.corner_ = null;
+  this.workspace_ = null;
+  this.oldHostMetrics_ = null;
+  this.hScroll.dispose();
+  this.hScroll = null;
+  this.vScroll.dispose();
+  this.vScroll = null;
+};
+
+/**
+ * Recalculate both of the scrollbars' locations and lengths.
+ * Also reposition the corner rectangle.
+ */
+Blockly.ScrollbarPair.prototype.resize = function() {
+  // Look up the host metrics once, and use for both scrollbars.
+  var hostMetrics = this.workspace_.getMetrics();
+  if (!hostMetrics) {
+    // Host element is likely not visible.
+    return;
+  }
+
+  // Only change the scrollbars if there has been a change in metrics.
+  var resizeH = false;
+  var resizeV = false;
+  if (!this.oldHostMetrics_ ||
+      this.oldHostMetrics_.viewWidth != hostMetrics.viewWidth ||
+      this.oldHostMetrics_.viewHeight != hostMetrics.viewHeight ||
+      this.oldHostMetrics_.absoluteTop != hostMetrics.absoluteTop ||
+      this.oldHostMetrics_.absoluteLeft != hostMetrics.absoluteLeft) {
+    // The window has been resized or repositioned.
+    resizeH = true;
+    resizeV = true;
+  } else {
+    // Has the content been resized or moved?
+    if (!this.oldHostMetrics_ ||
+        this.oldHostMetrics_.contentWidth != hostMetrics.contentWidth ||
+        this.oldHostMetrics_.viewLeft != hostMetrics.viewLeft ||
+        this.oldHostMetrics_.contentLeft != hostMetrics.contentLeft) {
+      resizeH = true;
+    }
+    if (!this.oldHostMetrics_ ||
+        this.oldHostMetrics_.contentHeight != hostMetrics.contentHeight ||
+        this.oldHostMetrics_.viewTop != hostMetrics.viewTop ||
+        this.oldHostMetrics_.contentTop != hostMetrics.contentTop) {
+      resizeV = true;
+    }
+  }
+  if (resizeH) {
+    this.hScroll.resize(hostMetrics);
+  }
+  if (resizeV) {
+    this.vScroll.resize(hostMetrics);
+  }
+
+  // Reposition the corner square.
+  if (!this.oldHostMetrics_ ||
+      this.oldHostMetrics_.viewWidth != hostMetrics.viewWidth ||
+      this.oldHostMetrics_.absoluteLeft != hostMetrics.absoluteLeft) {
+    this.corner_.setAttribute('x', this.vScroll.position_.x);
+  }
+  if (!this.oldHostMetrics_ ||
+      this.oldHostMetrics_.viewHeight != hostMetrics.viewHeight ||
+      this.oldHostMetrics_.absoluteTop != hostMetrics.absoluteTop) {
+    this.corner_.setAttribute('y', this.hScroll.position_.y);
+  }
+
+  // Cache the current metrics to potentially short-cut the next resize event.
+  this.oldHostMetrics_ = hostMetrics;
+};
+
+/**
+ * Set the sliders of both scrollbars to be at a certain position.
+ * @param {number} x Horizontal scroll value.
+ * @param {number} y Vertical scroll value.
+ */
+Blockly.ScrollbarPair.prototype.set = function(x, y) {
+  // This function is equivalent to:
+  //   this.hScroll.set(x);
+  //   this.vScroll.set(y);
+  // However, that calls setMetrics twice which causes a chain of
+  // getAttribute->setAttribute->getAttribute resulting in an extra layout pass.
+  // Combining them speeds up rendering.
+  var xyRatio = {};
+
+  var hHandlePosition = x * this.hScroll.ratio_;
+  var vHandlePosition = y * this.vScroll.ratio_;
+
+  var hBarLength = this.hScroll.scrollViewSize_;
+  var vBarLength = this.vScroll.scrollViewSize_;
+
+  xyRatio.x = this.getRatio_(hHandlePosition, hBarLength);
+  xyRatio.y = this.getRatio_(vHandlePosition, vBarLength);
+  this.workspace_.setMetrics(xyRatio);
+
+  this.hScroll.setHandlePosition(hHandlePosition);
+  this.vScroll.setHandlePosition(vHandlePosition);
+};
+
+/**
+ * Helper to calculate the ratio of handle position to scrollbar view size.
+ * @param {number} handlePosition The value of the handle.
+ * @param {number} viewSize The total size of the scrollbar's view.
+ * @return {number} Ratio.
+ * @private
+ */
+Blockly.ScrollbarPair.prototype.getRatio_ = function(handlePosition, viewSize) {
+  var ratio = handlePosition / viewSize;
+  if (isNaN(ratio)) {
+    return 0;
+  }
+  return ratio;
+};
+
+// --------------------------------------------------------------------
+
+/**
+ * Class for a pure SVG scrollbar.
+ * This technique offers a scrollbar that is guaranteed to work, but may not
+ * look or behave like the system's scrollbars.
+ * @param {!Blockly.Workspace} workspace Workspace to bind the scrollbar to.
+ * @param {boolean} horizontal True if horizontal, false if vertical.
+ * @param {boolean=} opt_pair True if scrollbar is part of a horiz/vert pair.
+ * @constructor
+ */
+Blockly.Scrollbar = function(workspace, horizontal, opt_pair) {
+  this.workspace_ = workspace;
+  this.pair_ = opt_pair || false;
+  this.horizontal_ = horizontal;
+  this.oldHostMetrics_ = null;
+
+  this.createDom_();
+
+  /**
+   * The upper left corner of the scrollbar's svg group.
+   * @type {goog.math.Coordinate}
+   * @private
+   */
+  this.position_ = new goog.math.Coordinate(0, 0);
+
+  if (horizontal) {
+    this.svgBackground_.setAttribute('height',
+        Blockly.Scrollbar.scrollbarThickness);
+    this.svgHandle_.setAttribute('height',
+        Blockly.Scrollbar.scrollbarThickness - 5);
+    this.svgHandle_.setAttribute('y', 2.5);
+
+    this.lengthAttribute_ = 'width';
+    this.positionAttribute_ = 'x';
+  } else {
+    this.svgBackground_.setAttribute('width',
+        Blockly.Scrollbar.scrollbarThickness);
+    this.svgHandle_.setAttribute('width',
+        Blockly.Scrollbar.scrollbarThickness - 5);
+    this.svgHandle_.setAttribute('x', 2.5);
+
+    this.lengthAttribute_ = 'height';
+    this.positionAttribute_ = 'y';
+  }
+  var scrollbar = this;
+  this.onMouseDownBarWrapper_ = Blockly.bindEvent_(this.svgBackground_,
+      'mousedown', scrollbar, scrollbar.onMouseDownBar_);
+  this.onMouseDownHandleWrapper_ = Blockly.bindEvent_(this.svgHandle_,
+      'mousedown', scrollbar, scrollbar.onMouseDownHandle_);
+};
+
+/**
+ * The size of the area within which the scrollbar handle can move.
+ * @type {number}
+ * @private
+ */
+Blockly.Scrollbar.prototype.scrollViewSize_ = 0;
+
+/**
+ * The length of the scrollbar handle.
+ * @type {number}
+ * @private
+ */
+Blockly.Scrollbar.prototype.handleLength_ = 0;
+
+/**
+ * The offset of the start of the handle from the start of the scrollbar range.
+ * @type {number}
+ * @private
+ */
+Blockly.Scrollbar.prototype.handlePosition_ = 0;
+
+/**
+ * Whether the scrollbar handle is visible.
+ * @type {boolean}
+ * @private
+ */
+Blockly.Scrollbar.prototype.isVisible_ = true;
+
+/**
+ * Width of vertical scrollbar or height of horizontal scrollbar.
+ * Increase the size of scrollbars on touch devices.
+ * Don't define if there is no document object (e.g. node.js).
+ */
+Blockly.Scrollbar.scrollbarThickness = 15;
+if (goog.events.BrowserFeature.TOUCH_ENABLED) {
+  Blockly.Scrollbar.scrollbarThickness = 25;
+}
+
+/**
+ * @param {!Object} first An object containing computed measurements of a
+ *    workspace.
+ * @param {!Object} second Another object containing computed measurements of a
+ *    workspace.
+ * @return {boolean} Whether the two sets of metrics are equivalent.
+ * @private
+ */
+Blockly.Scrollbar.metricsAreEquivalent_ = function(first, second) {
+  if (!(first && second)) {
+    return false;
+  }
+
+  if (first.viewWidth != second.viewWidth ||
+      first.viewHeight != second.viewHeight ||
+      first.viewLeft != second.viewLeft ||
+      first.viewTop != second.viewTop ||
+      first.absoluteTop != second.absoluteTop ||
+      first.absoluteLeft != second.absoluteLeft ||
+      first.contentWidth != second.contentWidth ||
+      first.contentHeight != second.contentHeight ||
+      first.contentLeft != second.contentLeft ||
+      first.contentTop != second.contentTop) {
+    return false;
+  }
+
+  return true;
+};
+
+/**
+ * Dispose of this scrollbar.
+ * Unlink from all DOM elements to prevent memory leaks.
+ */
+Blockly.Scrollbar.prototype.dispose = function() {
+  this.onMouseUpHandle_();
+  Blockly.unbindEvent_(this.onMouseDownBarWrapper_);
+  this.onMouseDownBarWrapper_ = null;
+  Blockly.unbindEvent_(this.onMouseDownHandleWrapper_);
+  this.onMouseDownHandleWrapper_ = null;
+
+  goog.dom.removeNode(this.svgGroup_);
+  this.svgGroup_ = null;
+  this.svgBackground_ = null;
+  this.svgHandle_ = null;
+  this.workspace_ = null;
+};
+
+/**
+ * Set the length of the scrollbar's handle and change the SVG attribute
+ * accordingly.
+ * @param {number} newLength The new scrollbar handle length.
+ */
+Blockly.Scrollbar.prototype.setHandleLength_ = function(newLength) {
+  this.handleLength_ = newLength;
+  this.svgHandle_.setAttribute(this.lengthAttribute_, this.handleLength_);
+};
+
+/**
+ * Set the offset of the scrollbar's handle and change the SVG attribute
+ * accordingly.
+ * @param {number} newPosition The new scrollbar handle offset.
+ */
+Blockly.Scrollbar.prototype.setHandlePosition = function(newPosition) {
+  this.handlePosition_ = newPosition;
+  this.svgHandle_.setAttribute(this.positionAttribute_, this.handlePosition_);
+};
+
+/**
+ * Set the size of the scrollbar's background and change the SVG attribute
+ * accordingly.
+ * @param {number} newSize The new scrollbar background length.
+ * @private
+ */
+Blockly.Scrollbar.prototype.setScrollViewSize_ = function(newSize) {
+  this.scrollViewSize_ = newSize;
+  this.svgBackground_.setAttribute(this.lengthAttribute_, this.scrollViewSize_);
+};
+
+/**
+ * Set the position of the scrollbar's svg group.
+ * @param {number} x The new x coordinate.
+ * @param {number} y The new y coordinate.
+ */
+Blockly.Scrollbar.prototype.setPosition = function(x, y) {
+  this.position_.x = x;
+  this.position_.y = y;
+
+  this.svgGroup_.setAttribute('transform',
+      'translate(' + this.position_.x + ',' + this.position_.y + ')');
+};
+
+/**
+ * Recalculate the scrollbar's location and its length.
+ * @param {Object=} opt_metrics A data structure of from the describing all the
+ * required dimensions.  If not provided, it will be fetched from the host
+ * object.
+ */
+Blockly.Scrollbar.prototype.resize = function(opt_metrics) {
+  // Determine the location, height and width of the host element.
+  var hostMetrics = opt_metrics;
+  if (!hostMetrics) {
+    hostMetrics = this.workspace_.getMetrics();
+    if (!hostMetrics) {
+      // Host element is likely not visible.
+      return;
+    }
+  }
+
+  if (Blockly.Scrollbar.metricsAreEquivalent_(hostMetrics,
+      this.oldHostMetrics_)) {
+    return;
+  }
+  this.oldHostMetrics_ = hostMetrics;
+
+  /* hostMetrics is an object with the following properties.
+   * .viewHeight: Height of the visible rectangle,
+   * .viewWidth: Width of the visible rectangle,
+   * .contentHeight: Height of the contents,
+   * .contentWidth: Width of the content,
+   * .viewTop: Offset of top edge of visible rectangle from parent,
+   * .viewLeft: Offset of left edge of visible rectangle from parent,
+   * .contentTop: Offset of the top-most content from the y=0 coordinate,
+   * .contentLeft: Offset of the left-most content from the x=0 coordinate,
+   * .absoluteTop: Top-edge of view.
+   * .absoluteLeft: Left-edge of view.
+   */
+  if (this.horizontal_) {
+    this.resizeHorizontal_(hostMetrics);
+  } else {
+    this.resizeVertical_(hostMetrics);
+  }
+  // Resizing may have caused some scrolling.
+  this.onScroll_();
+};
+
+/**
+ * Recalculate a horizontal scrollbar's location and length.
+ * @param {!Object} hostMetrics A data structure describing all the
+ *     required dimensions, possibly fetched from the host object.
+ * @private
+ */
+Blockly.Scrollbar.prototype.resizeHorizontal_ = function(hostMetrics) {
+  // TODO: Inspect metrics to determine if we can get away with just a content
+  // resize.
+  this.resizeViewHorizontal(hostMetrics);
+};
+
+/**
+ * Recalculate a horizontal scrollbar's location on the screen and path length.
+ * This should be called when the layout or size of the window has changed.
+ * @param {!Object} hostMetrics A data structure describing all the
+ *     required dimensions, possibly fetched from the host object.
+ */
+Blockly.Scrollbar.prototype.resizeViewHorizontal = function(hostMetrics) {
+  var viewSize = hostMetrics.viewWidth - 1;
+  if (this.pair_) {
+    // Shorten the scrollbar to make room for the corner square.
+    viewSize -= Blockly.Scrollbar.scrollbarThickness;
+  }
+  this.setScrollViewSize_(Math.max(0, viewSize));
+
+  var xCoordinate = hostMetrics.absoluteLeft + 0.5;
+  if (this.pair_ && this.workspace_.RTL) {
+    xCoordinate += Blockly.Scrollbar.scrollbarThickness;
+  }
+
+  // Horizontal toolbar should always be just above the bottom of the workspace.
+  var yCoordinate = hostMetrics.absoluteTop + hostMetrics.viewHeight -
+      Blockly.Scrollbar.scrollbarThickness - 0.5;
+  this.setPosition(xCoordinate, yCoordinate);
+
+  // If the view has been resized, a content resize will also be necessary.  The
+  // reverse is not true.
+  this.resizeContentHorizontal(hostMetrics);
+};
+
+/**
+ * Recalculate a horizontal scrollbar's location within its path and length.
+ * This should be called when the contents of the workspace have changed.
+ * @param {!Object} hostMetrics A data structure describing all the
+ *     required dimensions, possibly fetched from the host object.
+ */
+Blockly.Scrollbar.prototype.resizeContentHorizontal = function(hostMetrics) {
+  if (!this.pair_) {
+    // Only show the scrollbar if needed.
+    // Ideally this would also apply to scrollbar pairs, but that's a bigger
+    // headache (due to interactions with the corner square).
+    this.setVisible(this.scrollViewSize_ < hostMetrics.contentWidth);
+  }
+
+  this.ratio_ = this.scrollViewSize_ / hostMetrics.contentWidth;
+  if (this.ratio_ == -Infinity || this.ratio_ == Infinity ||
+      isNaN(this.ratio_)) {
+    this.ratio_ = 0;
+  }
+
+  var handleLength = hostMetrics.viewWidth * this.ratio_;
+  this.setHandleLength_(Math.max(0, handleLength));
+
+  var handlePosition = (hostMetrics.viewLeft - hostMetrics.contentLeft) *
+      this.ratio_;
+  this.setHandlePosition(this.constrainHandle_(handlePosition));
+};
+
+/**
+ * Recalculate a vertical scrollbar's location and length.
+ * @param {!Object} hostMetrics A data structure describing all the
+ *     required dimensions, possibly fetched from the host object.
+ * @private
+ */
+Blockly.Scrollbar.prototype.resizeVertical_ = function(hostMetrics) {
+  // TODO: Inspect metrics to determine if we can get away with just a content
+  // resize.
+  this.resizeViewVertical(hostMetrics);
+};
+
+/**
+ * Recalculate a vertical scrollbar's location on the screen and path length.
+ * This should be called when the layout or size of the window has changed.
+ * @param {!Object} hostMetrics A data structure describing all the
+ *     required dimensions, possibly fetched from the host object.
+ */
+Blockly.Scrollbar.prototype.resizeViewVertical = function(hostMetrics) {
+  var viewSize = hostMetrics.viewHeight - 1;
+  if (this.pair_) {
+    // Shorten the scrollbar to make room for the corner square.
+    viewSize -= Blockly.Scrollbar.scrollbarThickness;
+  }
+  this.setScrollViewSize_(Math.max(0, viewSize));
+
+  var xCoordinate = hostMetrics.absoluteLeft + 0.5;
+  if (!this.workspace_.RTL) {
+    xCoordinate += hostMetrics.viewWidth -
+        Blockly.Scrollbar.scrollbarThickness - 1;
+  }
+  var yCoordinate = hostMetrics.absoluteTop + 0.5;
+  this.setPosition(xCoordinate, yCoordinate);
+
+  // If the view has been resized, a content resize will also be necessary.  The
+  // reverse is not true.
+  this.resizeContentVertical(hostMetrics);
+};
+
+/**
+ * Recalculate a vertical scrollbar's location within its path and length.
+ * This should be called when the contents of the workspace have changed.
+ * @param {!Object} hostMetrics A data structure describing all the
+ *     required dimensions, possibly fetched from the host object.
+ */
+Blockly.Scrollbar.prototype.resizeContentVertical = function(hostMetrics) {
+  if (!this.pair_) {
+    // Only show the scrollbar if needed.
+    this.setVisible(this.scrollViewSize_ < hostMetrics.contentHeight);
+  }
+
+  this.ratio_ = this.scrollViewSize_ / hostMetrics.contentHeight;
+  if (this.ratio_ == -Infinity || this.ratio_ == Infinity ||
+      isNaN(this.ratio_)) {
+    this.ratio_ = 0;
+  }
+
+  var handleLength = hostMetrics.viewHeight * this.ratio_;
+  this.setHandleLength_(Math.max(0, handleLength));
+
+  var handlePosition = (hostMetrics.viewTop - hostMetrics.contentTop) *
+      this.ratio_;
+  this.setHandlePosition(this.constrainHandle_(handlePosition));
+};
+
+/**
+ * Create all the DOM elements required for a scrollbar.
+ * The resulting widget is not sized.
+ * @private
+ */
+Blockly.Scrollbar.prototype.createDom_ = function() {
+  /* Create the following DOM:
+  <g class="blocklyScrollbarHorizontal">
+    <rect class="blocklyScrollbarBackground" />
+    <rect class="blocklyScrollbarHandle" rx="8" ry="8" />
+  </g>
+  */
+  var className = 'blocklyScrollbar' +
+      (this.horizontal_ ? 'Horizontal' : 'Vertical');
+  this.svgGroup_ = Blockly.createSvgElement('g', {'class': className}, null);
+  this.svgBackground_ = Blockly.createSvgElement('rect',
+      {'class': 'blocklyScrollbarBackground'}, this.svgGroup_);
+  var radius = Math.floor((Blockly.Scrollbar.scrollbarThickness - 5) / 2);
+  this.svgHandle_ = Blockly.createSvgElement('rect',
+      {'class': 'blocklyScrollbarHandle', 'rx': radius, 'ry': radius},
+      this.svgGroup_);
+  Blockly.Scrollbar.insertAfter_(this.svgGroup_,
+                                 this.workspace_.getBubbleCanvas());
+};
+
+/**
+ * Is the scrollbar visible.  Non-paired scrollbars disappear when they aren't
+ * needed.
+ * @return {boolean} True if visible.
+ */
+Blockly.Scrollbar.prototype.isVisible = function() {
+  return this.isVisible_;
+};
+
+/**
+ * Set whether the scrollbar is visible.
+ * Only applies to non-paired scrollbars.
+ * @param {boolean} visible True if visible.
+ */
+Blockly.Scrollbar.prototype.setVisible = function(visible) {
+  if (visible == this.isVisible()) {
+    return;
+  }
+  // Ideally this would also apply to scrollbar pairs, but that's a bigger
+  // headache (due to interactions with the corner square).
+  if (this.pair_) {
+    throw 'Unable to toggle visibility of paired scrollbars.';
+  }
+
+  this.isVisible_ = visible;
+
+  if (visible) {
+    this.svgGroup_.setAttribute('display', 'block');
+  } else {
+    // Hide the scrollbar.
+    this.workspace_.setMetrics({x: 0, y: 0});
+    this.svgGroup_.setAttribute('display', 'none');
+  }
+};
+
+/**
+ * Scroll by one pageful.
+ * Called when scrollbar background is clicked.
+ * @param {!Event} e Mouse down event.
+ * @private
+ */
+Blockly.Scrollbar.prototype.onMouseDownBar_ = function(e) {
+  this.onMouseUpHandle_();
+  if (Blockly.isRightButton(e)) {
+    // Right-click.
+    // Scrollbars have no context menu.
+    e.stopPropagation();
+    return;
+  }
+  var mouseXY = Blockly.mouseToSvg(e, this.workspace_.getParentSvg(),
+      this.workspace_.getInverseScreenCTM());
+  var mouseLocation = this.horizontal_ ? mouseXY.x : mouseXY.y;
+
+  var handleXY = Blockly.getSvgXY_(this.svgHandle_, this.workspace_);
+  var handleStart = this.horizontal_ ? handleXY.x : handleXY.y;
+  var handlePosition = this.handlePosition_;
+
+  var pageLength = this.handleLength_ * 0.95;
+  if (mouseLocation <= handleStart) {
+    // Decrease the scrollbar's value by a page.
+    handlePosition -= pageLength;
+  } else if (mouseLocation >= handleStart + this.handleLength_) {
+    // Increase the scrollbar's value by a page.
+    handlePosition += pageLength;
+  }
+
+  this.setHandlePosition(this.constrainHandle_(handlePosition));
+
+  this.onScroll_();
+  e.stopPropagation();
+  e.preventDefault();
+};
+
+/**
+ * Start a dragging operation.
+ * Called when scrollbar handle is clicked.
+ * @param {!Event} e Mouse down event.
+ * @private
+ */
+Blockly.Scrollbar.prototype.onMouseDownHandle_ = function(e) {
+  this.onMouseUpHandle_();
+  if (Blockly.isRightButton(e)) {
+    // Right-click.
+    // Scrollbars have no context menu.
+    e.stopPropagation();
+    return;
+  }
+  // Look up the current translation and record it.
+  this.startDragHandle = this.handlePosition_;
+  // Record the current mouse position.
+  this.startDragMouse = this.horizontal_ ? e.clientX : e.clientY;
+  Blockly.Scrollbar.onMouseUpWrapper_ = Blockly.bindEvent_(document,
+      'mouseup', this, this.onMouseUpHandle_);
+  Blockly.Scrollbar.onMouseMoveWrapper_ = Blockly.bindEvent_(document,
+      'mousemove', this, this.onMouseMoveHandle_);
+  e.stopPropagation();
+  e.preventDefault();
+};
+
+/**
+ * Drag the scrollbar's handle.
+ * @param {!Event} e Mouse up event.
+ * @private
+ */
+Blockly.Scrollbar.prototype.onMouseMoveHandle_ = function(e) {
+  var currentMouse = this.horizontal_ ? e.clientX : e.clientY;
+  var mouseDelta = currentMouse - this.startDragMouse;
+  var handlePosition = this.startDragHandle + mouseDelta;
+  // Position the bar.
+  this.setHandlePosition(this.constrainHandle_(handlePosition));
+  this.onScroll_();
+};
+
+/**
+ * Stop binding to the global mouseup and mousemove events.
+ * @private
+ */
+Blockly.Scrollbar.prototype.onMouseUpHandle_ = function() {
+  Blockly.hideChaff(true);
+  if (Blockly.Scrollbar.onMouseUpWrapper_) {
+    Blockly.unbindEvent_(Blockly.Scrollbar.onMouseUpWrapper_);
+    Blockly.Scrollbar.onMouseUpWrapper_ = null;
+  }
+  if (Blockly.Scrollbar.onMouseMoveWrapper_) {
+    Blockly.unbindEvent_(Blockly.Scrollbar.onMouseMoveWrapper_);
+    Blockly.Scrollbar.onMouseMoveWrapper_ = null;
+  }
+};
+
+/**
+ * Constrain the handle's position within the minimum (0) and maximum
+ * (length of scrollbar) values allowed for the scrollbar.
+ * @param {number} value Value that is potentially out of bounds.
+ * @return {number} Constrained value.
+ * @private
+ */
+Blockly.Scrollbar.prototype.constrainHandle_ = function(value) {
+  if (value <= 0 || isNaN(value) || this.scrollViewSize_ < this.handleLength_) {
+    value = 0;
+  } else {
+    value = Math.min(value, this.scrollViewSize_ - this.handleLength_);
+  }
+  return value;
+};
+
+/**
+ * Called when scrollbar is moved.
+ * @private
+ */
+Blockly.Scrollbar.prototype.onScroll_ = function() {
+  var ratio = this.handlePosition_ / this.scrollViewSize_;
+  if (isNaN(ratio)) {
+    ratio = 0;
+  }
+  var xyRatio = {};
+  if (this.horizontal_) {
+    xyRatio.x = ratio;
+  } else {
+    xyRatio.y = ratio;
+  }
+  this.workspace_.setMetrics(xyRatio);
+};
+
+/**
+ * Set the scrollbar slider's position.
+ * @param {number} value The distance from the top/left end of the bar.
+ */
+Blockly.Scrollbar.prototype.set = function(value) {
+  this.setHandlePosition(this.constrainHandle_(value * this.ratio_));
+  this.onScroll_();
+};
+
+/**
+ * Insert a node after a reference node.
+ * Contrast with node.insertBefore function.
+ * @param {!Element} newNode New element to insert.
+ * @param {!Element} refNode Existing element to precede new node.
+ * @private
+ */
+Blockly.Scrollbar.insertAfter_ = function(newNode, refNode) {
+  var siblingNode = refNode.nextSibling;
+  var parentNode = refNode.parentNode;
+  if (!parentNode) {
+    throw 'Reference node has no parent.';
+  }
+  if (siblingNode) {
+    parentNode.insertBefore(newNode, siblingNode);
+  } else {
+    parentNode.appendChild(newNode);
+  }
+};
diff --git a/blockly/core/toolbox.js b/blockly/core/toolbox.js
new file mode 100644
index 0000000..5a5096c
--- /dev/null
+++ b/blockly/core/toolbox.js
@@ -0,0 +1,650 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2011 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Toolbox from whence to create blocks.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.Toolbox');
+
+goog.require('Blockly.Flyout');
+goog.require('goog.dom');
+goog.require('goog.dom.TagName');
+goog.require('goog.events');
+goog.require('goog.events.BrowserFeature');
+goog.require('goog.html.SafeHtml');
+goog.require('goog.html.SafeStyle');
+goog.require('goog.math.Rect');
+goog.require('goog.style');
+goog.require('goog.ui.tree.TreeControl');
+goog.require('goog.ui.tree.TreeNode');
+
+
+/**
+ * Class for a Toolbox.
+ * Creates the toolbox's DOM.
+ * @param {!Blockly.Workspace} workspace The workspace in which to create new
+ *     blocks.
+ * @constructor
+ */
+Blockly.Toolbox = function(workspace) {
+  /**
+   * @type {!Blockly.Workspace}
+   * @private
+   */
+  this.workspace_ = workspace;
+
+  /**
+   * Is RTL vs LTR.
+   * @type {boolean}
+   */
+  this.RTL = workspace.options.RTL;
+
+  /**
+   * Whether the toolbox should be laid out horizontally.
+   * @type {boolean}
+   * @private
+   */
+  this.horizontalLayout_ = workspace.options.horizontalLayout;
+
+  /**
+   * Position of the toolbox and flyout relative to the workspace.
+   * @type {number}
+   */
+  this.toolboxPosition = workspace.options.toolboxPosition;
+
+  /**
+   * Configuration constants for Closure's tree UI.
+   * @type {Object.<string,*>}
+   * @private
+   */
+  this.config_ = {
+    indentWidth: 19,
+    cssRoot: 'blocklyTreeRoot',
+    cssHideRoot: 'blocklyHidden',
+    cssItem: '',
+    cssTreeRow: 'blocklyTreeRow',
+    cssItemLabel: 'blocklyTreeLabel',
+    cssTreeIcon: 'blocklyTreeIcon',
+    cssExpandedFolderIcon: 'blocklyTreeIconOpen',
+    cssFileIcon: 'blocklyTreeIconNone',
+    cssSelectedRow: 'blocklyTreeSelected'
+  };
+
+
+  /**
+   * Configuration constants for tree separator.
+   * @type {Object.<string,*>}
+   * @private
+   */
+  this.treeSeparatorConfig_ = {
+    cssTreeRow: 'blocklyTreeSeparator'
+  };
+
+  if (this.horizontalLayout_) {
+    this.config_['cssTreeRow'] =
+        this.config_['cssTreeRow'] +
+        (workspace.RTL ?
+        ' blocklyHorizontalTreeRtl' : ' blocklyHorizontalTree');
+
+    this.treeSeparatorConfig_['cssTreeRow'] =
+        'blocklyTreeSeparatorHorizontal ' +
+        (workspace.RTL ?
+        'blocklyHorizontalTreeRtl' : 'blocklyHorizontalTree');
+    this.config_['cssTreeIcon'] = '';
+  }
+};
+
+/**
+ * Width of the toolbox, which changes only in vertical layout.
+ * @type {number}
+ */
+Blockly.Toolbox.prototype.width = 0;
+
+/**
+ * Height of the toolbox, which changes only in horizontal layout.
+ * @type {number}
+ */
+Blockly.Toolbox.prototype.height = 0;
+
+/**
+ * The SVG group currently selected.
+ * @type {SVGGElement}
+ * @private
+ */
+Blockly.Toolbox.prototype.selectedOption_ = null;
+
+/**
+ * The tree node most recently selected.
+ * @type {goog.ui.tree.BaseNode}
+ * @private
+ */
+Blockly.Toolbox.prototype.lastCategory_ = null;
+
+/**
+ * Initializes the toolbox.
+ */
+Blockly.Toolbox.prototype.init = function() {
+  var workspace = this.workspace_;
+  var svg = this.workspace_.getParentSvg();
+
+  // Create an HTML container for the Toolbox menu.
+  this.HtmlDiv =
+      goog.dom.createDom(goog.dom.TagName.DIV, 'blocklyToolboxDiv');
+  this.HtmlDiv.setAttribute('dir', workspace.RTL ? 'RTL' : 'LTR');
+  svg.parentNode.insertBefore(this.HtmlDiv, svg);
+
+  // Clicking on toolbox closes popups.
+  Blockly.bindEvent_(this.HtmlDiv, 'mousedown', this,
+      function(e) {
+        if (Blockly.isRightButton(e) || e.target == this.HtmlDiv) {
+          // Close flyout.
+          Blockly.hideChaff(false);
+        } else {
+          // Just close popups.
+          Blockly.hideChaff(true);
+        }
+      });
+  var workspaceOptions = {
+    disabledPatternId: workspace.options.disabledPatternId,
+    parentWorkspace: workspace,
+    RTL: workspace.RTL,
+    horizontalLayout: workspace.horizontalLayout,
+    toolboxPosition: workspace.options.toolboxPosition
+  };
+  /**
+   * @type {!Blockly.Flyout}
+   * @private
+   */
+  this.flyout_ = new Blockly.Flyout(workspaceOptions);
+  goog.dom.insertSiblingAfter(this.flyout_.createDom(), workspace.svgGroup_);
+  this.flyout_.init(workspace);
+
+  this.config_['cleardotPath'] = workspace.options.pathToMedia + '1x1.gif';
+  this.config_['cssCollapsedFolderIcon'] =
+      'blocklyTreeIconClosed' + (workspace.RTL ? 'Rtl' : 'Ltr');
+  var tree = new Blockly.Toolbox.TreeControl(this, this.config_);
+  this.tree_ = tree;
+  tree.setShowRootNode(false);
+  tree.setShowLines(false);
+  tree.setShowExpandIcons(false);
+  tree.setSelectedItem(null);
+  var openNode = this.populate_(workspace.options.languageTree);
+  tree.render(this.HtmlDiv);
+  if (openNode) {
+    tree.setSelectedItem(openNode);
+  }
+  this.addColour_();
+  this.position();
+};
+
+/**
+ * Dispose of this toolbox.
+ */
+Blockly.Toolbox.prototype.dispose = function() {
+  this.flyout_.dispose();
+  this.tree_.dispose();
+  goog.dom.removeNode(this.HtmlDiv);
+  this.workspace_ = null;
+  this.lastCategory_ = null;
+};
+
+/**
+ * Get the width of the toolbox.
+ * @return {number} The width of the toolbox.
+ */
+Blockly.Toolbox.prototype.getWidth = function() {
+  return this.width;
+};
+
+/**
+ * Get the height of the toolbox.
+ * @return {number} The width of the toolbox.
+ */
+Blockly.Toolbox.prototype.getHeight = function() {
+  return this.height;
+};
+
+/**
+ * Move the toolbox to the edge.
+ */
+Blockly.Toolbox.prototype.position = function() {
+  var treeDiv = this.HtmlDiv;
+  if (!treeDiv) {
+    // Not initialized yet.
+    return;
+  }
+  var svg = this.workspace_.getParentSvg();
+  var svgPosition = goog.style.getPageOffset(svg);
+  var svgSize = Blockly.svgSize(svg);
+  if (this.horizontalLayout_) {
+    treeDiv.style.left = '0';
+    treeDiv.style.height = 'auto';
+    treeDiv.style.width = svgSize.width + 'px';
+    this.height = treeDiv.offsetHeight;
+    if (this.toolboxPosition == Blockly.TOOLBOX_AT_TOP) {  // Top
+      treeDiv.style.top = '0';
+    } else {  // Bottom
+      treeDiv.style.bottom = '0';
+    }
+  } else {
+    if (this.toolboxPosition == Blockly.TOOLBOX_AT_RIGHT) {  // Right
+      treeDiv.style.right = '0';
+    } else {  // Left
+      treeDiv.style.left = '0';
+    }
+    treeDiv.style.height = svgSize.height + 'px';
+    this.width = treeDiv.offsetWidth;
+  }
+  this.flyout_.position();
+};
+
+/**
+ * Fill the toolbox with categories and blocks.
+ * @param {!Node} newTree DOM tree of blocks.
+ * @return {Node} Tree node to open at startup (or null).
+ * @private
+ */
+Blockly.Toolbox.prototype.populate_ = function(newTree) {
+  this.tree_.removeChildren();  // Delete any existing content.
+  this.tree_.blocks = [];
+  this.hasColours_ = false;
+  var openNode =
+    this.syncTrees_(newTree, this.tree_, this.workspace_.options.pathToMedia);
+
+  if (this.tree_.blocks.length) {
+    throw 'Toolbox cannot have both blocks and categories in the root level.';
+  }
+
+  // Fire a resize event since the toolbox may have changed width and height.
+  this.workspace_.resizeContents();
+  return openNode;
+};
+
+/**
+ * Sync trees of the toolbox.
+ * @param {!Node} treeIn DOM tree of blocks.
+ * @param {!Blockly.Toolbox.TreeControl} treeOut
+ * @param {string} pathToMedia
+ * @return {Node} Tree node to open at startup (or null).
+ * @private
+ */
+Blockly.Toolbox.prototype.syncTrees_ = function(treeIn, treeOut, pathToMedia) {
+  var openNode = null;
+  var lastElement = null;
+  for (var i = 0, childIn; childIn = treeIn.childNodes[i]; i++) {
+    if (!childIn.tagName) {
+      // Skip over text.
+      continue;
+    }
+    switch (childIn.tagName.toUpperCase()) {
+      case 'CATEGORY':
+        var childOut = this.tree_.createNode(childIn.getAttribute('name'));
+        childOut.blocks = [];
+        treeOut.add(childOut);
+        var custom = childIn.getAttribute('custom');
+        if (custom) {
+          // Variables and procedures are special dynamic categories.
+          childOut.blocks = custom;
+        } else {
+          var newOpenNode = this.syncTrees_(childIn, childOut, pathToMedia);
+          if (newOpenNode) {
+            openNode = newOpenNode;
+          }
+        }
+        var colour = childIn.getAttribute('colour');
+        if (goog.isString(colour)) {
+          if (colour.match(/^#[0-9a-fA-F]{6}$/)) {
+            childOut.hexColour = colour;
+          } else {
+            childOut.hexColour = Blockly.hueToRgb(colour);
+          }
+          this.hasColours_ = true;
+        } else {
+          childOut.hexColour = '';
+        }
+        if (childIn.getAttribute('expanded') == 'true') {
+          if (childOut.blocks.length) {
+            // This is a category that directly contians blocks.
+            // After the tree is rendered, open this category and show flyout.
+            openNode = childOut;
+          }
+          childOut.setExpanded(true);
+        } else {
+          childOut.setExpanded(false);
+        }
+        lastElement = childIn;
+        break;
+      case 'SEP':
+        if (lastElement) {
+          if (lastElement.tagName.toUpperCase() == 'CATEGORY') {
+            // Separator between two categories.
+            // <sep></sep>
+            treeOut.add(new Blockly.Toolbox.TreeSeparator(
+                this.treeSeparatorConfig_));
+          } else {
+            // Change the gap between two blocks.
+            // <sep gap="36"></sep>
+            // The default gap is 24, can be set larger or smaller.
+            // Note that a deprecated method is to add a gap to a block.
+            // <block type="math_arithmetic" gap="8"></block>
+            var newGap = parseFloat(childIn.getAttribute('gap'));
+            if (!isNaN(newGap) && lastElement) {
+              lastElement.setAttribute('gap', newGap);
+            }
+          }
+        }
+        break;
+      case 'BLOCK':
+      case 'SHADOW':
+        treeOut.blocks.push(childIn);
+        lastElement = childIn;
+        break;
+    }
+  }
+  return openNode;
+};
+
+/**
+ * Recursively add colours to this toolbox.
+ * @param {Blockly.Toolbox.TreeNode} opt_tree Starting point of tree.
+ *     Defaults to the root node.
+ * @private
+ */
+Blockly.Toolbox.prototype.addColour_ = function(opt_tree) {
+  var tree = opt_tree || this.tree_;
+  var children = tree.getChildren();
+  for (var i = 0, child; child = children[i]; i++) {
+    var element = child.getRowElement();
+    if (element) {
+      if (this.hasColours_) {
+        var border = '8px solid ' + (child.hexColour || '#ddd');
+      } else {
+        var border = 'none';
+      }
+      if (this.workspace_.RTL) {
+        element.style.borderRight = border;
+      } else {
+        element.style.borderLeft = border;
+      }
+    }
+    this.addColour_(child);
+  }
+};
+
+/**
+ * Unhighlight any previously specified option.
+ */
+Blockly.Toolbox.prototype.clearSelection = function() {
+  this.tree_.setSelectedItem(null);
+};
+
+/**
+ * Return the deletion rectangle for this toolbox.
+ * @return {goog.math.Rect} Rectangle in which to delete.
+ */
+Blockly.Toolbox.prototype.getClientRect = function() {
+  if (!this.HtmlDiv) {
+    return null;
+  }
+
+  // BIG_NUM is offscreen padding so that blocks dragged beyond the toolbox
+  // area are still deleted.  Must be smaller than Infinity, but larger than
+  // the largest screen size.
+  var BIG_NUM = 10000000;
+  var toolboxRect = this.HtmlDiv.getBoundingClientRect();
+
+  var x = toolboxRect.left;
+  var y = toolboxRect.top;
+  var width = toolboxRect.width;
+  var height = toolboxRect.height;
+
+  // Assumes that the toolbox is on the SVG edge.  If this changes
+  // (e.g. toolboxes in mutators) then this code will need to be more complex.
+  if (this.toolboxPosition == Blockly.TOOLBOX_AT_LEFT) {
+    return new goog.math.Rect(-BIG_NUM, -BIG_NUM, BIG_NUM + x + width,
+        2 * BIG_NUM);
+  } else if (this.toolboxPosition == Blockly.TOOLBOX_AT_RIGHT) {
+    return new goog.math.Rect(x, -BIG_NUM, BIG_NUM + width, 2 * BIG_NUM);
+  } else if (this.toolboxPosition == Blockly.TOOLBOX_AT_TOP) {
+    return new goog.math.Rect(-BIG_NUM, -BIG_NUM, 2 * BIG_NUM,
+        BIG_NUM + y + height);
+  } else {  // Bottom
+    return new goog.math.Rect(0, y, 2 * BIG_NUM, BIG_NUM + width);
+  }
+};
+
+/**
+ * Update the flyout's contents without closing it.  Should be used in response
+ * to a change in one of the dynamic categories, such as variables or
+ * procedures.
+ */
+Blockly.Toolbox.prototype.refreshSelection = function() {
+  var selectedItem = this.tree_.getSelectedItem();
+  if (selectedItem && selectedItem.blocks) {
+    this.flyout_.show(selectedItem.blocks);
+  }
+};
+
+// Extending Closure's Tree UI.
+
+/**
+ * Extention of a TreeControl object that uses a custom tree node.
+ * @param {Blockly.Toolbox} toolbox The parent toolbox for this tree.
+ * @param {Object} config The configuration for the tree. See
+ *    goog.ui.tree.TreeControl.DefaultConfig.
+ * @constructor
+ * @extends {goog.ui.tree.TreeControl}
+ */
+Blockly.Toolbox.TreeControl = function(toolbox, config) {
+  this.toolbox_ = toolbox;
+  goog.ui.tree.TreeControl.call(this, goog.html.SafeHtml.EMPTY, config);
+};
+goog.inherits(Blockly.Toolbox.TreeControl, goog.ui.tree.TreeControl);
+
+/**
+ * Adds touch handling to TreeControl.
+ * @override
+ */
+Blockly.Toolbox.TreeControl.prototype.enterDocument = function() {
+  Blockly.Toolbox.TreeControl.superClass_.enterDocument.call(this);
+
+  // Add touch handler.
+  if (goog.events.BrowserFeature.TOUCH_ENABLED) {
+    var el = this.getElement();
+    Blockly.bindEvent_(el, goog.events.EventType.TOUCHSTART, this,
+        this.handleTouchEvent_);
+  }
+};
+
+/**
+ * Handles touch events.
+ * @param {!goog.events.BrowserEvent} e The browser event.
+ * @private
+ */
+Blockly.Toolbox.TreeControl.prototype.handleTouchEvent_ = function(e) {
+  e.preventDefault();
+  var node = this.getNodeFromEvent_(e);
+  if (node && e.type === goog.events.EventType.TOUCHSTART) {
+    // Fire asynchronously since onMouseDown takes long enough that the browser
+    // would fire the default mouse event before this method returns.
+    setTimeout(function() {
+      node.onMouseDown(e);  // Same behaviour for click and touch.
+    }, 1);
+  }
+};
+
+/**
+ * Creates a new tree node using a custom tree node.
+ * @param {string=} opt_html The HTML content of the node label.
+ * @return {!goog.ui.tree.TreeNode} The new item.
+ * @override
+ */
+Blockly.Toolbox.TreeControl.prototype.createNode = function(opt_html) {
+  return new Blockly.Toolbox.TreeNode(this.toolbox_, opt_html ?
+      goog.html.SafeHtml.htmlEscape(opt_html) : goog.html.SafeHtml.EMPTY,
+      this.getConfig(), this.getDomHelper());
+};
+
+/**
+ * Display/hide the flyout when an item is selected.
+ * @param {goog.ui.tree.BaseNode} node The item to select.
+ * @override
+ */
+Blockly.Toolbox.TreeControl.prototype.setSelectedItem = function(node) {
+  var toolbox = this.toolbox_;
+  if (node == this.selectedItem_ || node == toolbox.tree_) {
+    return;
+  }
+  if (toolbox.lastCategory_) {
+    toolbox.lastCategory_.getRowElement().style.backgroundColor = '';
+  }
+  if (node) {
+    var hexColour = node.hexColour || '#57e';
+    node.getRowElement().style.backgroundColor = hexColour;
+    // Add colours to child nodes which may have been collapsed and thus
+    // not rendered.
+    toolbox.addColour_(node);
+  }
+  var oldNode = this.getSelectedItem();
+  goog.ui.tree.TreeControl.prototype.setSelectedItem.call(this, node);
+  if (node && node.blocks && node.blocks.length) {
+    toolbox.flyout_.show(node.blocks);
+    // Scroll the flyout to the top if the category has changed.
+    if (toolbox.lastCategory_ != node) {
+      toolbox.flyout_.scrollToStart();
+    }
+  } else {
+    // Hide the flyout.
+    toolbox.flyout_.hide();
+  }
+  if (oldNode != node && oldNode != this) {
+    var event = new Blockly.Events.Ui(null, 'category',
+        oldNode && oldNode.getHtml(), node && node.getHtml());
+    event.workspaceId = toolbox.workspace_.id;
+    Blockly.Events.fire(event);
+  }
+  if (node) {
+    toolbox.lastCategory_ = node;
+  }
+};
+
+/**
+ * A single node in the tree, customized for Blockly's UI.
+ * @param {Blockly.Toolbox} toolbox The parent toolbox for this tree.
+ * @param {!goog.html.SafeHtml} html The HTML content of the node label.
+ * @param {Object=} opt_config The configuration for the tree. See
+ *    goog.ui.tree.TreeControl.DefaultConfig. If not specified, a default config
+ *    will be used.
+ * @param {goog.dom.DomHelper=} opt_domHelper Optional DOM helper.
+ * @constructor
+ * @extends {goog.ui.tree.TreeNode}
+ */
+Blockly.Toolbox.TreeNode = function(toolbox, html, opt_config, opt_domHelper) {
+  goog.ui.tree.TreeNode.call(this, html, opt_config, opt_domHelper);
+  if (toolbox) {
+    this.horizontalLayout_ = toolbox.horizontalLayout_;
+    var resize = function() {
+      // Even though the div hasn't changed size, the visible workspace
+      // surface of the workspace has, so we may need to reposition everything.
+      Blockly.svgResize(toolbox.workspace_);
+    };
+    // Fire a resize event since the toolbox may have changed width.
+    goog.events.listen(toolbox.tree_,
+        goog.ui.tree.BaseNode.EventType.EXPAND, resize);
+    goog.events.listen(toolbox.tree_,
+        goog.ui.tree.BaseNode.EventType.COLLAPSE, resize);
+  }
+};
+goog.inherits(Blockly.Toolbox.TreeNode, goog.ui.tree.TreeNode);
+
+/**
+ * Supress population of the +/- icon.
+ * @return {!goog.html.SafeHtml} The source for the icon.
+ * @override
+ */
+Blockly.Toolbox.TreeNode.prototype.getExpandIconSafeHtml = function() {
+  return goog.html.SafeHtml.create('span');
+};
+
+/**
+ * Expand or collapse the node on mouse click.
+ * @param {!goog.events.BrowserEvent} e The browser event.
+ * @override
+ */
+Blockly.Toolbox.TreeNode.prototype.onMouseDown = function(e) {
+  // Expand icon.
+  if (this.hasChildren() && this.isUserCollapsible_) {
+    this.toggle();
+    this.select();
+  } else if (this.isSelected()) {
+    this.getTree().setSelectedItem(null);
+  } else {
+    this.select();
+  }
+  this.updateRow();
+};
+
+/**
+ * Supress the inherited double-click behaviour.
+ * @param {!goog.events.BrowserEvent} e The browser event.
+ * @override
+ * @private
+ */
+Blockly.Toolbox.TreeNode.prototype.onDoubleClick_ = function(e) {
+  // NOP.
+};
+
+/**
+ * Remap event.keyCode in horizontalLayout so that arrow
+ * keys work properly and call original onKeyDown handler.
+ * @param {!goog.events.BrowserEvent} e The browser event.
+ * @return {boolean} The handled value.
+ * @override
+ * @private
+ */
+Blockly.Toolbox.TreeNode.prototype.onKeyDown = function(e) {
+  if (this.horizontalLayout_) {
+    var map = {};
+    map[goog.events.KeyCodes.RIGHT] = goog.events.KeyCodes.DOWN;
+    map[goog.events.KeyCodes.LEFT] = goog.events.KeyCodes.UP;
+    map[goog.events.KeyCodes.UP] = goog.events.KeyCodes.LEFT;
+    map[goog.events.KeyCodes.DOWN] = goog.events.KeyCodes.RIGHT;
+
+    var newKeyCode = map[e.keyCode];
+    e.keyCode = newKeyCode || e.keyCode;
+  }
+  return Blockly.Toolbox.TreeNode.superClass_.onKeyDown.call(this, e);
+};
+
+/**
+ * A blank separator node in the tree.
+ * @param {Object=} config The configuration for the tree. See
+ *    goog.ui.tree.TreeControl.DefaultConfig. If not specified, a default config
+ *    will be used.
+ * @constructor
+ * @extends {Blockly.Toolbox.TreeNode}
+ */
+Blockly.Toolbox.TreeSeparator = function(config) {
+  Blockly.Toolbox.TreeNode.call(this, null, '', config);
+};
+goog.inherits(Blockly.Toolbox.TreeSeparator, Blockly.Toolbox.TreeNode);
diff --git a/blockly/core/tooltip.js b/blockly/core/tooltip.js
new file mode 100644
index 0000000..2ff612b
--- /dev/null
+++ b/blockly/core/tooltip.js
@@ -0,0 +1,286 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2011 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Library to create tooltips for Blockly.
+ * First, call Blockly.Tooltip.init() after onload.
+ * Second, set the 'tooltip' property on any SVG element that needs a tooltip.
+ * If the tooltip is a string, then that message will be displayed.
+ * If the tooltip is an SVG element, then that object's tooltip will be used.
+ * Third, call Blockly.Tooltip.bindMouseEvents(e) passing the SVG element.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.Tooltip');
+
+goog.require('goog.dom');
+goog.require('goog.dom.TagName');
+
+
+/**
+ * Is a tooltip currently showing?
+ */
+Blockly.Tooltip.visible = false;
+
+/**
+ * Maximum width (in characters) of a tooltip.
+ */
+Blockly.Tooltip.LIMIT = 50;
+
+/**
+ * PID of suspended thread to clear tooltip on mouse out.
+ * @private
+ */
+Blockly.Tooltip.mouseOutPid_ = 0;
+
+/**
+ * PID of suspended thread to show the tooltip.
+ * @private
+ */
+Blockly.Tooltip.showPid_ = 0;
+
+/**
+ * Last observed X location of the mouse pointer (freezes when tooltip appears).
+ * @private
+ */
+Blockly.Tooltip.lastX_ = 0;
+
+/**
+ * Last observed Y location of the mouse pointer (freezes when tooltip appears).
+ * @private
+ */
+Blockly.Tooltip.lastY_ = 0;
+
+/**
+ * Current element being pointed at.
+ * @private
+ */
+Blockly.Tooltip.element_ = null;
+
+/**
+ * Once a tooltip has opened for an element, that element is 'poisoned' and
+ * cannot respawn a tooltip until the pointer moves over a different element.
+ * @private
+ */
+Blockly.Tooltip.poisonedElement_ = null;
+
+/**
+ * Horizontal offset between mouse cursor and tooltip.
+ */
+Blockly.Tooltip.OFFSET_X = 0;
+
+/**
+ * Vertical offset between mouse cursor and tooltip.
+ */
+Blockly.Tooltip.OFFSET_Y = 10;
+
+/**
+ * Radius mouse can move before killing tooltip.
+ */
+Blockly.Tooltip.RADIUS_OK = 10;
+
+/**
+ * Delay before tooltip appears.
+ */
+Blockly.Tooltip.HOVER_MS = 750;
+
+/**
+ * Horizontal padding between tooltip and screen edge.
+ */
+Blockly.Tooltip.MARGINS = 5;
+
+/**
+ * The HTML container.  Set once by Blockly.Tooltip.createDom.
+ * @type {Element}
+ */
+Blockly.Tooltip.DIV = null;
+
+/**
+ * Create the tooltip div and inject it onto the page.
+ */
+Blockly.Tooltip.createDom = function() {
+  if (Blockly.Tooltip.DIV) {
+    return;  // Already created.
+  }
+  // Create an HTML container for popup overlays (e.g. editor widgets).
+  Blockly.Tooltip.DIV =
+      goog.dom.createDom(goog.dom.TagName.DIV, 'blocklyTooltipDiv');
+  document.body.appendChild(Blockly.Tooltip.DIV);
+};
+
+/**
+ * Binds the required mouse events onto an SVG element.
+ * @param {!Element} element SVG element onto which tooltip is to be bound.
+ */
+Blockly.Tooltip.bindMouseEvents = function(element) {
+  Blockly.bindEvent_(element, 'mouseover', null, Blockly.Tooltip.onMouseOver_);
+  Blockly.bindEvent_(element, 'mouseout', null, Blockly.Tooltip.onMouseOut_);
+  Blockly.bindEvent_(element, 'mousemove', null, Blockly.Tooltip.onMouseMove_);
+};
+
+/**
+ * Hide the tooltip if the mouse is over a different object.
+ * Initialize the tooltip to potentially appear for this object.
+ * @param {!Event} e Mouse event.
+ * @private
+ */
+Blockly.Tooltip.onMouseOver_ = function(e) {
+  // If the tooltip is an object, treat it as a pointer to the next object in
+  // the chain to look at.  Terminate when a string or function is found.
+  var element = e.target;
+  while (!goog.isString(element.tooltip) && !goog.isFunction(element.tooltip)) {
+    element = element.tooltip;
+  }
+  if (Blockly.Tooltip.element_ != element) {
+    Blockly.Tooltip.hide();
+    Blockly.Tooltip.poisonedElement_ = null;
+    Blockly.Tooltip.element_ = element;
+  }
+  // Forget about any immediately preceeding mouseOut event.
+  clearTimeout(Blockly.Tooltip.mouseOutPid_);
+};
+
+/**
+ * Hide the tooltip if the mouse leaves the object and enters the workspace.
+ * @param {!Event} e Mouse event.
+ * @private
+ */
+Blockly.Tooltip.onMouseOut_ = function(e) {
+  // Moving from one element to another (overlapping or with no gap) generates
+  // a mouseOut followed instantly by a mouseOver.  Fork off the mouseOut
+  // event and kill it if a mouseOver is received immediately.
+  // This way the task only fully executes if mousing into the void.
+  Blockly.Tooltip.mouseOutPid_ = setTimeout(function() {
+    Blockly.Tooltip.element_ = null;
+    Blockly.Tooltip.poisonedElement_ = null;
+    Blockly.Tooltip.hide();
+  }, 1);
+  clearTimeout(Blockly.Tooltip.showPid_);
+};
+
+/**
+ * When hovering over an element, schedule a tooltip to be shown.  If a tooltip
+ * is already visible, hide it if the mouse strays out of a certain radius.
+ * @param {!Event} e Mouse event.
+ * @private
+ */
+Blockly.Tooltip.onMouseMove_ = function(e) {
+  if (!Blockly.Tooltip.element_ || !Blockly.Tooltip.element_.tooltip) {
+    // No tooltip here to show.
+    return;
+  } else if (Blockly.dragMode_ != Blockly.DRAG_NONE) {
+    // Don't display a tooltip during a drag.
+    return;
+  } else if (Blockly.WidgetDiv.isVisible()) {
+    // Don't display a tooltip if a widget is open (tooltip would be under it).
+    return;
+  }
+  if (Blockly.Tooltip.visible) {
+    // Compute the distance between the mouse position when the tooltip was
+    // shown and the current mouse position.  Pythagorean theorem.
+    var dx = Blockly.Tooltip.lastX_ - e.pageX;
+    var dy = Blockly.Tooltip.lastY_ - e.pageY;
+    if (Math.sqrt(dx * dx + dy * dy) > Blockly.Tooltip.RADIUS_OK) {
+      Blockly.Tooltip.hide();
+    }
+  } else if (Blockly.Tooltip.poisonedElement_ != Blockly.Tooltip.element_) {
+    // The mouse moved, clear any previously scheduled tooltip.
+    clearTimeout(Blockly.Tooltip.showPid_);
+    // Maybe this time the mouse will stay put.  Schedule showing of tooltip.
+    Blockly.Tooltip.lastX_ = e.pageX;
+    Blockly.Tooltip.lastY_ = e.pageY;
+    Blockly.Tooltip.showPid_ =
+        setTimeout(Blockly.Tooltip.show_, Blockly.Tooltip.HOVER_MS);
+  }
+};
+
+/**
+ * Hide the tooltip.
+ */
+Blockly.Tooltip.hide = function() {
+  if (Blockly.Tooltip.visible) {
+    Blockly.Tooltip.visible = false;
+    if (Blockly.Tooltip.DIV) {
+      Blockly.Tooltip.DIV.style.display = 'none';
+    }
+  }
+  clearTimeout(Blockly.Tooltip.showPid_);
+};
+
+/**
+ * Create the tooltip and show it.
+ * @private
+ */
+Blockly.Tooltip.show_ = function() {
+  Blockly.Tooltip.poisonedElement_ = Blockly.Tooltip.element_;
+  if (!Blockly.Tooltip.DIV) {
+    return;
+  }
+  // Erase all existing text.
+  goog.dom.removeChildren(/** @type {!Element} */ (Blockly.Tooltip.DIV));
+  // Get the new text.
+  var tip = Blockly.Tooltip.element_.tooltip;
+  while (goog.isFunction(tip)) {
+    tip = tip();
+  }
+  tip = Blockly.utils.wrap(tip, Blockly.Tooltip.LIMIT);
+  // Create new text, line by line.
+  var lines = tip.split('\n');
+  for (var i = 0; i < lines.length; i++) {
+    var div = document.createElement('div');
+    div.appendChild(document.createTextNode(lines[i]));
+    Blockly.Tooltip.DIV.appendChild(div);
+  }
+  var rtl = Blockly.Tooltip.element_.RTL;
+  var windowSize = goog.dom.getViewportSize();
+  // Display the tooltip.
+  Blockly.Tooltip.DIV.style.direction = rtl ? 'rtl' : 'ltr';
+  Blockly.Tooltip.DIV.style.display = 'block';
+  Blockly.Tooltip.visible = true;
+  // Move the tooltip to just below the cursor.
+  var anchorX = Blockly.Tooltip.lastX_;
+  if (rtl) {
+    anchorX -= Blockly.Tooltip.OFFSET_X + Blockly.Tooltip.DIV.offsetWidth;
+  } else {
+    anchorX += Blockly.Tooltip.OFFSET_X;
+  }
+  var anchorY = Blockly.Tooltip.lastY_ + Blockly.Tooltip.OFFSET_Y;
+
+  if (anchorY + Blockly.Tooltip.DIV.offsetHeight >
+      windowSize.height + window.scrollY) {
+    // Falling off the bottom of the screen; shift the tooltip up.
+    anchorY -= Blockly.Tooltip.DIV.offsetHeight + 2 * Blockly.Tooltip.OFFSET_Y;
+  }
+  if (rtl) {
+    // Prevent falling off left edge in RTL mode.
+    anchorX = Math.max(Blockly.Tooltip.MARGINS - window.scrollX, anchorX);
+  } else {
+    if (anchorX + Blockly.Tooltip.DIV.offsetWidth >
+        windowSize.width + window.scrollX - 2 * Blockly.Tooltip.MARGINS) {
+      // Falling off the right edge of the screen;
+      // clamp the tooltip on the edge.
+      anchorX = windowSize.width - Blockly.Tooltip.DIV.offsetWidth -
+          2 * Blockly.Tooltip.MARGINS;
+    }
+  }
+  Blockly.Tooltip.DIV.style.top = anchorY + 'px';
+  Blockly.Tooltip.DIV.style.left = anchorX + 'px';
+};
diff --git a/blockly/core/trashcan.js b/blockly/core/trashcan.js
new file mode 100644
index 0000000..28baa0f
--- /dev/null
+++ b/blockly/core/trashcan.js
@@ -0,0 +1,332 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2011 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Object representing a trash can icon.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.Trashcan');
+
+goog.require('goog.Timer');
+goog.require('goog.dom');
+goog.require('goog.math');
+goog.require('goog.math.Rect');
+
+
+/**
+ * Class for a trash can.
+ * @param {!Blockly.Workspace} workspace The workspace to sit in.
+ * @constructor
+ */
+Blockly.Trashcan = function(workspace) {
+  this.workspace_ = workspace;
+};
+
+/**
+ * Width of both the trash can and lid images.
+ * @type {number}
+ * @private
+ */
+Blockly.Trashcan.prototype.WIDTH_ = 47;
+
+/**
+ * Height of the trashcan image (minus lid).
+ * @type {number}
+ * @private
+ */
+Blockly.Trashcan.prototype.BODY_HEIGHT_ = 44;
+
+/**
+ * Height of the lid image.
+ * @type {number}
+ * @private
+ */
+Blockly.Trashcan.prototype.LID_HEIGHT_ = 16;
+
+/**
+ * Distance between trashcan and bottom edge of workspace.
+ * @type {number}
+ * @private
+ */
+Blockly.Trashcan.prototype.MARGIN_BOTTOM_ = 20;
+
+/**
+ * Distance between trashcan and right edge of workspace.
+ * @type {number}
+ * @private
+ */
+Blockly.Trashcan.prototype.MARGIN_SIDE_ = 20;
+
+/**
+ * Extent of hotspot on all sides beyond the size of the image.
+ * @type {number}
+ * @private
+ */
+Blockly.Trashcan.prototype.MARGIN_HOTSPOT_ = 10;
+
+/**
+ * Location of trashcan in sprite image.
+ * @type {number}
+ * @private
+ */
+Blockly.Trashcan.prototype.SPRITE_LEFT_ = 0;
+
+/**
+ * Location of trashcan in sprite image.
+ * @type {number}
+ * @private
+ */
+Blockly.Trashcan.prototype.SPRITE_TOP_ = 32;
+
+/**
+ * Current open/close state of the lid.
+ * @type {boolean}
+ */
+Blockly.Trashcan.prototype.isOpen = false;
+
+/**
+ * The SVG group containing the trash can.
+ * @type {Element}
+ * @private
+ */
+Blockly.Trashcan.prototype.svgGroup_ = null;
+
+/**
+ * The SVG image element of the trash can lid.
+ * @type {Element}
+ * @private
+ */
+Blockly.Trashcan.prototype.svgLid_ = null;
+
+/**
+ * Task ID of opening/closing animation.
+ * @type {number}
+ * @private
+ */
+Blockly.Trashcan.prototype.lidTask_ = 0;
+
+/**
+ * Current state of lid opening (0.0 = closed, 1.0 = open).
+ * @type {number}
+ * @private
+ */
+Blockly.Trashcan.prototype.lidOpen_ = 0;
+
+/**
+ * Left coordinate of the trash can.
+ * @type {number}
+ * @private
+ */
+Blockly.Trashcan.prototype.left_ = 0;
+
+/**
+ * Top coordinate of the trash can.
+ * @type {number}
+ * @private
+ */
+Blockly.Trashcan.prototype.top_ = 0;
+
+/**
+ * Create the trash can elements.
+ * @return {!Element} The trash can's SVG group.
+ */
+Blockly.Trashcan.prototype.createDom = function() {
+  /* Here's the markup that will be generated:
+  <g class="blocklyTrash">
+    <clippath id="blocklyTrashBodyClipPath837493">
+      <rect width="47" height="45" y="15"></rect>
+    </clippath>
+    <image width="64" height="92" y="-32" xlink:href="media/sprites.png"
+        clip-path="url(#blocklyTrashBodyClipPath837493)"></image>
+    <clippath id="blocklyTrashLidClipPath837493">
+      <rect width="47" height="15"></rect>
+    </clippath>
+    <image width="84" height="92" y="-32" xlink:href="media/sprites.png"
+        clip-path="url(#blocklyTrashLidClipPath837493)"></image>
+  </g>
+  */
+  this.svgGroup_ = Blockly.createSvgElement('g',
+      {'class': 'blocklyTrash'}, null);
+  var rnd = String(Math.random()).substring(2);
+  var clip = Blockly.createSvgElement('clipPath',
+      {'id': 'blocklyTrashBodyClipPath' + rnd},
+      this.svgGroup_);
+  Blockly.createSvgElement('rect',
+      {'width': this.WIDTH_, 'height': this.BODY_HEIGHT_,
+       'y': this.LID_HEIGHT_},
+      clip);
+  var body = Blockly.createSvgElement('image',
+      {'width': Blockly.SPRITE.width, 'x': -this.SPRITE_LEFT_,
+       'height': Blockly.SPRITE.height, 'y': -this.SPRITE_TOP_,
+       'clip-path': 'url(#blocklyTrashBodyClipPath' + rnd + ')'},
+      this.svgGroup_);
+  body.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href',
+      this.workspace_.options.pathToMedia + Blockly.SPRITE.url);
+
+  var clip = Blockly.createSvgElement('clipPath',
+      {'id': 'blocklyTrashLidClipPath' + rnd},
+      this.svgGroup_);
+  Blockly.createSvgElement('rect',
+      {'width': this.WIDTH_, 'height': this.LID_HEIGHT_}, clip);
+  this.svgLid_ = Blockly.createSvgElement('image',
+      {'width': Blockly.SPRITE.width, 'x': -this.SPRITE_LEFT_,
+       'height': Blockly.SPRITE.height, 'y': -this.SPRITE_TOP_,
+       'clip-path': 'url(#blocklyTrashLidClipPath' + rnd + ')'},
+      this.svgGroup_);
+  this.svgLid_.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href',
+      this.workspace_.options.pathToMedia + Blockly.SPRITE.url);
+
+  Blockly.bindEvent_(this.svgGroup_, 'mouseup', this, this.click);
+  this.animateLid_();
+  return this.svgGroup_;
+};
+
+/**
+ * Initialize the trash can.
+ * @param {number} bottom Distance from workspace bottom to bottom of trashcan.
+ * @return {number} Distance from workspace bottom to the top of trashcan.
+ */
+Blockly.Trashcan.prototype.init = function(bottom) {
+  this.bottom_ = this.MARGIN_BOTTOM_ + bottom;
+  this.setOpen_(false);
+  return this.bottom_ + this.BODY_HEIGHT_ + this.LID_HEIGHT_;
+};
+
+/**
+ * Dispose of this trash can.
+ * Unlink from all DOM elements to prevent memory leaks.
+ */
+Blockly.Trashcan.prototype.dispose = function() {
+  if (this.svgGroup_) {
+    goog.dom.removeNode(this.svgGroup_);
+    this.svgGroup_ = null;
+  }
+  this.svgLid_ = null;
+  this.workspace_ = null;
+  goog.Timer.clear(this.lidTask_);
+};
+
+/**
+ * Move the trash can to the bottom-right corner.
+ */
+Blockly.Trashcan.prototype.position = function() {
+  var metrics = this.workspace_.getMetrics();
+  if (!metrics) {
+    // There are no metrics available (workspace is probably not visible).
+    return;
+  }
+  if (this.workspace_.RTL) {
+    this.left_ = this.MARGIN_SIDE_ + Blockly.Scrollbar.scrollbarThickness;
+    if (metrics.toolboxPosition == Blockly.TOOLBOX_AT_LEFT) {
+      this.left_ += metrics.flyoutWidth;
+      if (this.workspace_.toolbox_) {
+        this.left_ += metrics.absoluteLeft;
+      }
+    }
+  } else {
+    this.left_ = metrics.viewWidth + metrics.absoluteLeft -
+        this.WIDTH_ - this.MARGIN_SIDE_ - Blockly.Scrollbar.scrollbarThickness;
+
+    if (metrics.toolboxPosition == Blockly.TOOLBOX_AT_RIGHT) {
+      this.left_ -= metrics.flyoutWidth;
+    }
+  }
+  this.top_ = metrics.viewHeight + metrics.absoluteTop -
+      (this.BODY_HEIGHT_ + this.LID_HEIGHT_) - this.bottom_;
+
+  if (metrics.toolboxPosition == Blockly.TOOLBOX_AT_BOTTOM) {
+    this.top_ -= metrics.flyoutHeight;
+  }
+  this.svgGroup_.setAttribute('transform',
+      'translate(' + this.left_ + ',' + this.top_ + ')');
+};
+
+/**
+ * Return the deletion rectangle for this trash can.
+ * @return {goog.math.Rect} Rectangle in which to delete.
+ */
+Blockly.Trashcan.prototype.getClientRect = function() {
+  if (!this.svgGroup_) {
+    return null;
+  }
+
+  var trashRect = this.svgGroup_.getBoundingClientRect();
+  var left = trashRect.left + this.SPRITE_LEFT_ - this.MARGIN_HOTSPOT_;
+  var top = trashRect.top + this.SPRITE_TOP_ - this.MARGIN_HOTSPOT_;
+  var width = this.WIDTH_ + 2 * this.MARGIN_HOTSPOT_;
+  var height = this.LID_HEIGHT_ + this.BODY_HEIGHT_ + 2 * this.MARGIN_HOTSPOT_;
+  return new goog.math.Rect(left, top, width, height);
+
+};
+
+/**
+ * Flip the lid open or shut.
+ * @param {boolean} state True if open.
+ * @private
+ */
+Blockly.Trashcan.prototype.setOpen_ = function(state) {
+  if (this.isOpen == state) {
+    return;
+  }
+  goog.Timer.clear(this.lidTask_);
+  this.isOpen = state;
+  this.animateLid_();
+};
+
+/**
+ * Rotate the lid open or closed by one step.  Then wait and recurse.
+ * @private
+ */
+Blockly.Trashcan.prototype.animateLid_ = function() {
+  this.lidOpen_ += this.isOpen ? 0.2 : -0.2;
+  this.lidOpen_ = goog.math.clamp(this.lidOpen_, 0, 1);
+  var lidAngle = this.lidOpen_ * 45;
+  this.svgLid_.setAttribute('transform', 'rotate(' +
+      (this.workspace_.RTL ? -lidAngle : lidAngle) + ',' +
+      (this.workspace_.RTL ? 4 : this.WIDTH_ - 4) + ',' +
+      (this.LID_HEIGHT_ - 2) + ')');
+  var opacity = goog.math.lerp(0.4, 0.8, this.lidOpen_);
+  this.svgGroup_.style.opacity = opacity;
+  if (this.lidOpen_ > 0 && this.lidOpen_ < 1) {
+    this.lidTask_ = goog.Timer.callOnce(this.animateLid_, 20, this);
+  }
+};
+
+/**
+ * Flip the lid shut.
+ * Called externally after a drag.
+ */
+Blockly.Trashcan.prototype.close = function() {
+  this.setOpen_(false);
+};
+
+/**
+ * Inspect the contents of the trash.
+ */
+Blockly.Trashcan.prototype.click = function() {
+  var dx = this.workspace_.startScrollX - this.workspace_.scrollX;
+  var dy = this.workspace_.startScrollY - this.workspace_.scrollY;
+  if (Math.sqrt(dx * dx + dy * dy) > Blockly.DRAG_RADIUS) {
+    return;
+  }
+  console.log('TODO: Inspect trash.');
+};
diff --git a/blockly/core/utils.js b/blockly/core/utils.js
new file mode 100644
index 0000000..fe13572
--- /dev/null
+++ b/blockly/core/utils.js
@@ -0,0 +1,668 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2012 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Utility methods.
+ * These methods are not specific to Blockly, and could be factored out into
+ * a JavaScript framework such as Closure.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.utils');
+
+goog.require('goog.dom');
+goog.require('goog.events.BrowserFeature');
+goog.require('goog.math.Coordinate');
+goog.require('goog.userAgent');
+
+
+/**
+ * Add a CSS class to a element.
+ * Similar to Closure's goog.dom.classes.add, except it handles SVG elements.
+ * @param {!Element} element DOM element to add class to.
+ * @param {string} className Name of class to add.
+ * @private
+ */
+Blockly.addClass_ = function(element, className) {
+  var classes = element.getAttribute('class') || '';
+  if ((' ' + classes + ' ').indexOf(' ' + className + ' ') == -1) {
+    if (classes) {
+      classes += ' ';
+    }
+    element.setAttribute('class', classes + className);
+  }
+};
+
+/**
+ * Remove a CSS class from a element.
+ * Similar to Closure's goog.dom.classes.remove, except it handles SVG elements.
+ * @param {!Element} element DOM element to remove class from.
+ * @param {string} className Name of class to remove.
+ * @private
+ */
+Blockly.removeClass_ = function(element, className) {
+  var classes = element.getAttribute('class');
+  if ((' ' + classes + ' ').indexOf(' ' + className + ' ') != -1) {
+    var classList = classes.split(/\s+/);
+    for (var i = 0; i < classList.length; i++) {
+      if (!classList[i] || classList[i] == className) {
+        classList.splice(i, 1);
+        i--;
+      }
+    }
+    if (classList.length) {
+      element.setAttribute('class', classList.join(' '));
+    } else {
+      element.removeAttribute('class');
+    }
+  }
+};
+
+/**
+ * Checks if an element has the specified CSS class.
+ * Similar to Closure's goog.dom.classes.has, except it handles SVG elements.
+ * @param {!Element} element DOM element to check.
+ * @param {string} className Name of class to check.
+ * @return {boolean} True if class exists, false otherwise.
+ * @private
+ */
+Blockly.hasClass_ = function(element, className) {
+  var classes = element.getAttribute('class');
+  return (' ' + classes + ' ').indexOf(' ' + className + ' ') != -1;
+};
+
+/**
+ * Bind an event to a function call.
+ * @param {!Node} node Node upon which to listen.
+ * @param {string} name Event name to listen to (e.g. 'mousedown').
+ * @param {Object} thisObject The value of 'this' in the function.
+ * @param {!Function} func Function to call when event is triggered.
+ * @return {!Array.<!Array>} Opaque data that can be passed to unbindEvent_.
+ * @private
+ */
+Blockly.bindEvent_ = function(node, name, thisObject, func) {
+  if (thisObject) {
+    var wrapFunc = function(e) {
+      func.call(thisObject, e);
+    };
+  } else {
+    var wrapFunc = func;
+  }
+  node.addEventListener(name, wrapFunc, false);
+  var bindData = [[node, name, wrapFunc]];
+  // Add equivalent touch event.
+  if (name in Blockly.bindEvent_.TOUCH_MAP) {
+    wrapFunc = function(e) {
+      // Punt on multitouch events.
+      if (e.changedTouches.length == 1) {
+        // Map the touch event's properties to the event.
+        var touchPoint = e.changedTouches[0];
+        e.clientX = touchPoint.clientX;
+        e.clientY = touchPoint.clientY;
+      }
+      func.call(thisObject, e);
+      // Stop the browser from scrolling/zooming the page.
+      e.preventDefault();
+    };
+    for (var i = 0, eventName;
+         eventName = Blockly.bindEvent_.TOUCH_MAP[name][i]; i++) {
+      node.addEventListener(eventName, wrapFunc, false);
+      bindData.push([node, eventName, wrapFunc]);
+    }
+  }
+  return bindData;
+};
+
+/**
+ * The TOUCH_MAP lookup dictionary specifies additional touch events to fire,
+ * in conjunction with mouse events.
+ * @type {Object}
+ */
+Blockly.bindEvent_.TOUCH_MAP = {};
+if (goog.events.BrowserFeature.TOUCH_ENABLED) {
+  Blockly.bindEvent_.TOUCH_MAP = {
+    'mousedown': ['touchstart'],
+    'mousemove': ['touchmove'],
+    'mouseup': ['touchend', 'touchcancel']
+  };
+}
+
+/**
+ * Unbind one or more events event from a function call.
+ * @param {!Array.<!Array>} bindData Opaque data from bindEvent_.  This list is
+ *     emptied during the course of calling this function.
+ * @return {!Function} The function call.
+ * @private
+ */
+Blockly.unbindEvent_ = function(bindData) {
+  while (bindData.length) {
+    var bindDatum = bindData.pop();
+    var node = bindDatum[0];
+    var name = bindDatum[1];
+    var func = bindDatum[2];
+    node.removeEventListener(name, func, false);
+  }
+  return func;
+};
+
+/**
+ * Don't do anything for this event, just halt propagation.
+ * @param {!Event} e An event.
+ */
+Blockly.noEvent = function(e) {
+  // This event has been handled.  No need to bubble up to the document.
+  e.preventDefault();
+  e.stopPropagation();
+};
+
+/**
+ * Is this event targeting a text input widget?
+ * @param {!Event} e An event.
+ * @return {boolean} True if text input.
+ * @private
+ */
+Blockly.isTargetInput_ = function(e) {
+  return e.target.type == 'textarea' || e.target.type == 'text' ||
+         e.target.type == 'number' || e.target.type == 'email' ||
+         e.target.type == 'password' || e.target.type == 'search' ||
+         e.target.type == 'tel' || e.target.type == 'url' ||
+         e.target.isContentEditable;
+};
+
+/**
+ * Return the coordinates of the top-left corner of this element relative to
+ * its parent.  Only for SVG elements and children (e.g. rect, g, path).
+ * @param {!Element} element SVG element to find the coordinates of.
+ * @return {!goog.math.Coordinate} Object with .x and .y properties.
+ * @private
+ */
+Blockly.getRelativeXY_ = function(element) {
+  var xy = new goog.math.Coordinate(0, 0);
+  // First, check for x and y attributes.
+  var x = element.getAttribute('x');
+  if (x) {
+    xy.x = parseInt(x, 10);
+  }
+  var y = element.getAttribute('y');
+  if (y) {
+    xy.y = parseInt(y, 10);
+  }
+  // Second, check for transform="translate(...)" attribute.
+  var transform = element.getAttribute('transform');
+  var r = transform && transform.match(Blockly.getRelativeXY_.XY_REGEXP_);
+  if (r) {
+    xy.x += parseFloat(r[1]);
+    if (r[3]) {
+      xy.y += parseFloat(r[3]);
+    }
+  }
+  return xy;
+};
+
+/**
+ * Static regex to pull the x,y values out of an SVG translate() directive.
+ * Note that Firefox and IE (9,10) return 'translate(12)' instead of
+ * 'translate(12, 0)'.
+ * Note that IE (9,10) returns 'translate(16 8)' instead of 'translate(16, 8)'.
+ * Note that IE has been reported to return scientific notation (0.123456e-42).
+ * @type {!RegExp}
+ * @private
+ */
+Blockly.getRelativeXY_.XY_REGEXP_ =
+    /translate\(\s*([-+\d.e]+)([ ,]\s*([-+\d.e]+)\s*\))?/;
+
+/**
+ * Return the absolute coordinates of the top-left corner of this element,
+ * scales that after canvas SVG element, if it's a descendant.
+ * The origin (0,0) is the top-left corner of the Blockly SVG.
+ * @param {!Element} element Element to find the coordinates of.
+ * @param {!Blockly.Workspace} workspace Element must be in this workspace.
+ * @return {!goog.math.Coordinate} Object with .x and .y properties.
+ * @private
+ */
+Blockly.getSvgXY_ = function(element, workspace) {
+  var x = 0;
+  var y = 0;
+  var scale = 1;
+  if (goog.dom.contains(workspace.getCanvas(), element) ||
+      goog.dom.contains(workspace.getBubbleCanvas(), element)) {
+    // Before the SVG canvas, scale the coordinates.
+    scale = workspace.scale;
+  }
+  do {
+    // Loop through this block and every parent.
+    var xy = Blockly.getRelativeXY_(element);
+    if (element == workspace.getCanvas() ||
+        element == workspace.getBubbleCanvas()) {
+      // After the SVG canvas, don't scale the coordinates.
+      scale = 1;
+    }
+    x += xy.x * scale;
+    y += xy.y * scale;
+    element = element.parentNode;
+  } while (element && element != workspace.getParentSvg());
+  return new goog.math.Coordinate(x, y);
+};
+
+/**
+ * Helper method for creating SVG elements.
+ * @param {string} name Element's tag name.
+ * @param {!Object} attrs Dictionary of attribute names and values.
+ * @param {Element} parent Optional parent on which to append the element.
+ * @param {Blockly.Workspace=} opt_workspace Optional workspace for access to
+ *     context (scale...).
+ * @return {!SVGElement} Newly created SVG element.
+ */
+Blockly.createSvgElement = function(name, attrs, parent, opt_workspace) {
+  var e = /** @type {!SVGElement} */ (
+      document.createElementNS(Blockly.SVG_NS, name));
+  for (var key in attrs) {
+    e.setAttribute(key, attrs[key]);
+  }
+  // IE defines a unique attribute "runtimeStyle", it is NOT applied to
+  // elements created with createElementNS. However, Closure checks for IE
+  // and assumes the presence of the attribute and crashes.
+  if (document.body.runtimeStyle) {  // Indicates presence of IE-only attr.
+    e.runtimeStyle = e.currentStyle = e.style;
+  }
+  if (parent) {
+    parent.appendChild(e);
+  }
+  return e;
+};
+
+/**
+ * Is this event a right-click?
+ * @param {!Event} e Mouse event.
+ * @return {boolean} True if right-click.
+ */
+Blockly.isRightButton = function(e) {
+  if (e.ctrlKey && goog.userAgent.MAC) {
+    // Control-clicking on Mac OS X is treated as a right-click.
+    // WebKit on Mac OS X fails to change button to 2 (but Gecko does).
+    return true;
+  }
+  return e.button == 2;
+};
+
+/**
+ * Return the converted coordinates of the given mouse event.
+ * The origin (0,0) is the top-left corner of the Blockly svg.
+ * @param {!Event} e Mouse event.
+ * @param {!Element} svg SVG element.
+ * @param {SVGMatrix} matrix Inverted screen CTM to use.
+ * @return {!Object} Object with .x and .y properties.
+ */
+Blockly.mouseToSvg = function(e, svg, matrix) {
+  var svgPoint = svg.createSVGPoint();
+  svgPoint.x = e.clientX;
+  svgPoint.y = e.clientY;
+
+  if (!matrix) {
+    matrix = svg.getScreenCTM().inverse();
+  }
+  return svgPoint.matrixTransform(matrix);
+};
+
+/**
+ * Given an array of strings, return the length of the shortest one.
+ * @param {!Array.<string>} array Array of strings.
+ * @return {number} Length of shortest string.
+ */
+Blockly.shortestStringLength = function(array) {
+  if (!array.length) {
+    return 0;
+  }
+  var len = array[0].length;
+  for (var i = 1; i < array.length; i++) {
+    len = Math.min(len, array[i].length);
+  }
+  return len;
+};
+
+/**
+ * Given an array of strings, return the length of the common prefix.
+ * Words may not be split.  Any space after a word is included in the length.
+ * @param {!Array.<string>} array Array of strings.
+ * @param {number=} opt_shortest Length of shortest string.
+ * @return {number} Length of common prefix.
+ */
+Blockly.commonWordPrefix = function(array, opt_shortest) {
+  if (!array.length) {
+    return 0;
+  } else if (array.length == 1) {
+    return array[0].length;
+  }
+  var wordPrefix = 0;
+  var max = opt_shortest || Blockly.shortestStringLength(array);
+  for (var len = 0; len < max; len++) {
+    var letter = array[0][len];
+    for (var i = 1; i < array.length; i++) {
+      if (letter != array[i][len]) {
+        return wordPrefix;
+      }
+    }
+    if (letter == ' ') {
+      wordPrefix = len + 1;
+    }
+  }
+  for (var i = 1; i < array.length; i++) {
+    var letter = array[i][len];
+    if (letter && letter != ' ') {
+      return wordPrefix;
+    }
+  }
+  return max;
+};
+
+/**
+ * Given an array of strings, return the length of the common suffix.
+ * Words may not be split.  Any space after a word is included in the length.
+ * @param {!Array.<string>} array Array of strings.
+ * @param {number=} opt_shortest Length of shortest string.
+ * @return {number} Length of common suffix.
+ */
+Blockly.commonWordSuffix = function(array, opt_shortest) {
+  if (!array.length) {
+    return 0;
+  } else if (array.length == 1) {
+    return array[0].length;
+  }
+  var wordPrefix = 0;
+  var max = opt_shortest || Blockly.shortestStringLength(array);
+  for (var len = 0; len < max; len++) {
+    var letter = array[0].substr(-len - 1, 1);
+    for (var i = 1; i < array.length; i++) {
+      if (letter != array[i].substr(-len - 1, 1)) {
+        return wordPrefix;
+      }
+    }
+    if (letter == ' ') {
+      wordPrefix = len + 1;
+    }
+  }
+  for (var i = 1; i < array.length; i++) {
+    var letter = array[i].charAt(array[i].length - len - 1);
+    if (letter && letter != ' ') {
+      return wordPrefix;
+    }
+  }
+  return max;
+};
+
+/**
+ * Is the given string a number (includes negative and decimals).
+ * @param {string} str Input string.
+ * @return {boolean} True if number, false otherwise.
+ */
+Blockly.isNumber = function(str) {
+  return !!str.match(/^\s*-?\d+(\.\d+)?\s*$/);
+};
+
+/**
+ * Parse a string with any number of interpolation tokens (%1, %2, ...).
+ * '%' characters may be self-escaped (%%).
+ * @param {string} message Text containing interpolation tokens.
+ * @return {!Array.<string|number>} Array of strings and numbers.
+ */
+Blockly.utils.tokenizeInterpolation = function(message) {
+  var tokens = [];
+  var chars = message.split('');
+  chars.push('');  // End marker.
+  // Parse the message with a finite state machine.
+  // 0 - Base case.
+  // 1 - % found.
+  // 2 - Digit found.
+  var state = 0;
+  var buffer = [];
+  var number = null;
+  for (var i = 0; i < chars.length; i++) {
+    var c = chars[i];
+    if (state == 0) {
+      if (c == '%') {
+        state = 1;  // Start escape.
+      } else {
+        buffer.push(c);  // Regular char.
+      }
+    } else if (state == 1) {
+      if (c == '%') {
+        buffer.push(c);  // Escaped %: %%
+        state = 0;
+      } else if ('0' <= c && c <= '9') {
+        state = 2;
+        number = c;
+        var text = buffer.join('');
+        if (text) {
+          tokens.push(text);
+        }
+        buffer.length = 0;
+      } else {
+        buffer.push('%', c);  // Not an escape: %a
+        state = 0;
+      }
+    } else if (state == 2) {
+      if ('0' <= c && c <= '9') {
+        number += c;  // Multi-digit number.
+      } else {
+        tokens.push(parseInt(number, 10));
+        i--;  // Parse this char again.
+        state = 0;
+      }
+    }
+  }
+  var text = buffer.join('');
+  if (text) {
+    tokens.push(text);
+  }
+  return tokens;
+};
+
+/**
+ * Generate a unique ID.  This should be globally unique.
+ * 87 characters ^ 20 length > 128 bits (better than a UUID).
+ * @return {string} A globally unique ID string.
+ */
+Blockly.genUid = function() {
+  var length = 20;
+  var soupLength = Blockly.genUid.soup_.length;
+  var id = [];
+  for (var i = 0; i < length; i++) {
+    id[i] = Blockly.genUid.soup_.charAt(Math.random() * soupLength);
+  }
+  return id.join('');
+};
+
+/**
+ * Legal characters for the unique ID.
+ * Should be all on a US keyboard.  No XML special characters or control codes.
+ * Removed $ due to issue 251.
+ * @private
+ */
+Blockly.genUid.soup_ = '!#%()*+,-./:;=?@[]^_`{|}~' +
+    'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+
+/**
+ * Wrap text to the specified width.
+ * @param {string} text Text to wrap.
+ * @param {number} limit Width to wrap each line.
+ * @return {string} Wrapped text.
+ */
+Blockly.utils.wrap = function(text, limit) {
+  var lines = text.split('\n');
+  for (var i = 0; i < lines.length; i++) {
+    lines[i] = Blockly.utils.wrap_line_(lines[i], limit);
+  }
+  return lines.join('\n');
+};
+
+/**
+ * Wrap single line of text to the specified width.
+ * @param {string} text Text to wrap.
+ * @param {number} limit Width to wrap each line.
+ * @return {string} Wrapped text.
+ * @private
+ */
+Blockly.utils.wrap_line_ = function(text, limit) {
+  if (text.length <= limit) {
+    // Short text, no need to wrap.
+    return text;
+  }
+  // Split the text into words.
+  var words = text.trim().split(/\s+/);
+  // Set limit to be the length of the largest word.
+  for (var i = 0; i < words.length; i++) {
+    if (words[i].length > limit) {
+      limit = words[i].length;
+    }
+  }
+
+  var lastScore;
+  var score = -Infinity;
+  var lastText;
+  var lineCount = 1;
+  do {
+    lastScore = score;
+    lastText = text;
+    // Create a list of booleans representing if a space (false) or
+    // a break (true) appears after each word.
+    var wordBreaks = [];
+    // Seed the list with evenly spaced linebreaks.
+    var steps = words.length / lineCount;
+    var insertedBreaks = 1;
+    for (var i = 0; i < words.length - 1; i++) {
+      if (insertedBreaks < (i + 1.5) / steps) {
+        insertedBreaks++;
+        wordBreaks[i] = true;
+      } else {
+        wordBreaks[i] = false;
+      }
+    }
+    wordBreaks = Blockly.utils.wrapMutate_(words, wordBreaks, limit);
+    score = Blockly.utils.wrapScore_(words, wordBreaks, limit);
+    text = Blockly.utils.wrapToText_(words, wordBreaks);
+    lineCount++;
+  } while (score > lastScore);
+  return lastText;
+};
+
+/**
+ * Compute a score for how good the wrapping is.
+ * @param {!Array.<string>} words Array of each word.
+ * @param {!Array.<boolean>} wordBreaks Array of line breaks.
+ * @param {number} limit Width to wrap each line.
+ * @return {number} Larger the better.
+ * @private
+ */
+Blockly.utils.wrapScore_ = function(words, wordBreaks, limit) {
+  // If this function becomes a performance liability, add caching.
+  // Compute the length of each line.
+  var lineLengths = [0];
+  var linePunctuation = [];
+  for (var i = 0; i < words.length; i++) {
+    lineLengths[lineLengths.length - 1] += words[i].length;
+    if (wordBreaks[i] === true) {
+      lineLengths.push(0);
+      linePunctuation.push(words[i].charAt(words[i].length - 1));
+    } else if (wordBreaks[i] === false) {
+      lineLengths[lineLengths.length - 1]++;
+    }
+  }
+  var maxLength = Math.max.apply(Math, lineLengths);
+
+  var score = 0;
+  for (var i = 0; i < lineLengths.length; i++) {
+    // Optimize for width.
+    // -2 points per char over limit (scaled to the power of 1.5).
+    score -= Math.pow(Math.abs(limit - lineLengths[i]), 1.5) * 2;
+    // Optimize for even lines.
+    // -1 point per char smaller than max (scaled to the power of 1.5).
+    score -= Math.pow(maxLength - lineLengths[i], 1.5);
+    // Optimize for structure.
+    // Add score to line endings after punctuation.
+    if ('.?!'.indexOf(linePunctuation[i]) != -1) {
+      score += limit / 3;
+    } else if (',;)]}'.indexOf(linePunctuation[i]) != -1) {
+      score += limit / 4;
+    }
+  }
+  // All else being equal, the last line should not be longer than the
+  // previous line.  For example, this looks wrong:
+  // aaa bbb
+  // ccc ddd eee
+  if (lineLengths.length > 1 && lineLengths[lineLengths.length - 1] <=
+      lineLengths[lineLengths.length - 2]) {
+    score += 0.5;
+  }
+  return score;
+};
+
+/**
+ * Mutate the array of line break locations until an optimal solution is found.
+ * No line breaks are added or deleted, they are simply moved around.
+ * @param {!Array.<string>} words Array of each word.
+ * @param {!Array.<boolean>} wordBreaks Array of line breaks.
+ * @param {number} limit Width to wrap each line.
+ * @return {!Array.<boolean>} New array of optimal line breaks.
+ * @private
+ */
+Blockly.utils.wrapMutate_ = function(words, wordBreaks, limit) {
+  var bestScore = Blockly.utils.wrapScore_(words, wordBreaks, limit);
+  var bestBreaks;
+  // Try shifting every line break forward or backward.
+  for (var i = 0; i < wordBreaks.length - 1; i++) {
+    if (wordBreaks[i] == wordBreaks[i + 1]) {
+      continue;
+    }
+    var mutatedWordBreaks = [].concat(wordBreaks);
+    mutatedWordBreaks[i] = !mutatedWordBreaks[i];
+    mutatedWordBreaks[i + 1] = !mutatedWordBreaks[i + 1];
+    var mutatedScore =
+        Blockly.utils.wrapScore_(words, mutatedWordBreaks, limit);
+    if (mutatedScore > bestScore) {
+      bestScore = mutatedScore;
+      bestBreaks = mutatedWordBreaks;
+    }
+  }
+  if (bestBreaks) {
+    // Found an improvement.  See if it may be improved further.
+    return Blockly.utils.wrapMutate_(words, bestBreaks, limit);
+  }
+  // No improvements found.  Done.
+  return wordBreaks;
+};
+
+/**
+ * Reassemble the array of words into text, with the specified line breaks.
+ * @param {!Array.<string>} words Array of each word.
+ * @param {!Array.<boolean>} wordBreaks Array of line breaks.
+ * @return {string} Plain text.
+ * @private
+ */
+Blockly.utils.wrapToText_ = function(words, wordBreaks) {
+  var text = [];
+  for (var i = 0; i < words.length; i++) {
+    text.push(words[i]);
+    if (wordBreaks[i] !== undefined) {
+      text.push(wordBreaks[i] ? '\n' : ' ');
+    }
+  }
+  return text.join('');
+};
diff --git a/blockly/core/variables.js b/blockly/core/variables.js
new file mode 100644
index 0000000..00c38ad
--- /dev/null
+++ b/blockly/core/variables.js
@@ -0,0 +1,273 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2012 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Utility functions for handling variables.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.Variables');
+
+goog.require('Blockly.Blocks');
+goog.require('Blockly.Workspace');
+goog.require('goog.string');
+
+
+/**
+ * Category to separate variable names from procedures and generated functions.
+ */
+Blockly.Variables.NAME_TYPE = 'VARIABLE';
+
+/**
+ * Find all user-created variables that are in use in the workspace.
+ * For use by generators.
+ * @param {!Blockly.Block|!Blockly.Workspace} root Root block or workspace.
+ * @return {!Array.<string>} Array of variable names.
+ */
+Blockly.Variables.allUsedVariables = function(root) {
+  var blocks;
+  if (root instanceof Blockly.Block) {
+    // Root is Block.
+    blocks = root.getDescendants();
+  } else if (root.getAllBlocks) {
+    // Root is Workspace.
+    blocks = root.getAllBlocks();
+  } else {
+    throw 'Not Block or Workspace: ' + root;
+  }
+  var variableHash = Object.create(null);
+  // Iterate through every block and add each variable to the hash.
+  for (var x = 0; x < blocks.length; x++) {
+    var blockVariables = blocks[x].getVars();
+    if (blockVariables) {
+      for (var y = 0; y < blockVariables.length; y++) {
+        var varName = blockVariables[y];
+        // Variable name may be null if the block is only half-built.
+        if (varName) {
+          variableHash[varName.toLowerCase()] = varName;
+        }
+      }
+    }
+  }
+  // Flatten the hash into a list.
+  var variableList = [];
+  for (var name in variableHash) {
+    variableList.push(variableHash[name]);
+  }
+  return variableList;
+};
+
+/**
+ * Find all variables that the user has created through the workspace or
+ * toolbox.  For use by generators.
+ * @param {!Blockly.Workspace} root The workspace to inspect.
+ * @return {!Array.<string>} Array of variable names.
+ */
+Blockly.Variables.allVariables = function(root) {
+  if (root instanceof Blockly.Block) {
+    // Root is Block.
+    console.warn('Deprecated call to Blockly.Variables.allVariables ' +
+                 'with a block instead of a workspace.  You may want ' +
+                 'Blockly.Variables.allUsedVariables');
+  }
+  return root.variableList;
+};
+
+/**
+ * Construct the blocks required by the flyout for the variable category.
+ * @param {!Blockly.Workspace} workspace The workspace contianing variables.
+ * @return {!Array.<!Element>} Array of XML block elements.
+ */
+Blockly.Variables.flyoutCategory = function(workspace) {
+  var variableList = workspace.variableList;
+  variableList.sort(goog.string.caseInsensitiveCompare);
+
+  var xmlList = [];
+  var button = goog.dom.createDom('button');
+  button.setAttribute('text', Blockly.Msg.NEW_VARIABLE);
+  xmlList.push(button);
+
+  if (variableList.length > 0) {
+    if (Blockly.Blocks['variables_set']) {
+      // <block type="variables_set" gap="20">
+      //   <field name="VAR">item</field>
+      // </block>
+      var block = goog.dom.createDom('block');
+      block.setAttribute('type', 'variables_set');
+      if (Blockly.Blocks['math_change']) {
+        block.setAttribute('gap', 8);
+      } else {
+        block.setAttribute('gap', 24);
+      }
+      var field = goog.dom.createDom('field', null, variableList[0]);
+      field.setAttribute('name', 'VAR');
+      block.appendChild(field);
+      xmlList.push(block);
+    }
+    if (Blockly.Blocks['math_change']) {
+      // <block type="math_change">
+      //   <value name="DELTA">
+      //     <shadow type="math_number">
+      //       <field name="NUM">1</field>
+      //     </shadow>
+      //   </value>
+      // </block>
+      var block = goog.dom.createDom('block');
+      block.setAttribute('type', 'math_change');
+      if (Blockly.Blocks['variables_get']) {
+        block.setAttribute('gap', 20);
+      }
+      var value = goog.dom.createDom('value');
+      value.setAttribute('name', 'DELTA');
+      block.appendChild(value);
+
+      var field = goog.dom.createDom('field', null, variableList[0]);
+      field.setAttribute('name', 'VAR');
+      block.appendChild(field);
+
+      var shadowBlock = goog.dom.createDom('shadow');
+      shadowBlock.setAttribute('type', 'math_number');
+      value.appendChild(shadowBlock);
+
+      var numberField = goog.dom.createDom('field', null, '1');
+      numberField.setAttribute('name', 'NUM');
+      shadowBlock.appendChild(numberField);
+
+      xmlList.push(block);
+    }
+
+    for (var i = 0; i < variableList.length; i++) {
+      if (Blockly.Blocks['variables_get']) {
+        // <block type="variables_get" gap="8">
+        //   <field name="VAR">item</field>
+        // </block>
+        var block = goog.dom.createDom('block');
+        block.setAttribute('type', 'variables_get');
+        if (Blockly.Blocks['variables_set']) {
+          block.setAttribute('gap', 8);
+        }
+        var field = goog.dom.createDom('field', null, variableList[i]);
+        field.setAttribute('name', 'VAR');
+        block.appendChild(field);
+        xmlList.push(block);
+      }
+    }
+  }
+  return xmlList;
+};
+
+/**
+* Return a new variable name that is not yet being used. This will try to
+* generate single letter variable names in the range 'i' to 'z' to start with.
+* If no unique name is located it will try 'i' to 'z', 'a' to 'h',
+* then 'i2' to 'z2' etc.  Skip 'l'.
+ * @param {!Blockly.Workspace} workspace The workspace to be unique in.
+* @return {string} New variable name.
+*/
+Blockly.Variables.generateUniqueName = function(workspace) {
+  var variableList = workspace.variableList;
+  var newName = '';
+  if (variableList.length) {
+    var nameSuffix = 1;
+    var letters = 'ijkmnopqrstuvwxyzabcdefgh';  // No 'l'.
+    var letterIndex = 0;
+    var potName = letters.charAt(letterIndex);
+    while (!newName) {
+      var inUse = false;
+      for (var i = 0; i < variableList.length; i++) {
+        if (variableList[i].toLowerCase() == potName) {
+          // This potential name is already used.
+          inUse = true;
+          break;
+        }
+      }
+      if (inUse) {
+        // Try the next potential name.
+        letterIndex++;
+        if (letterIndex == letters.length) {
+          // Reached the end of the character sequence so back to 'i'.
+          // a new suffix.
+          letterIndex = 0;
+          nameSuffix++;
+        }
+        potName = letters.charAt(letterIndex);
+        if (nameSuffix > 1) {
+          potName += nameSuffix;
+        }
+      } else {
+        // We can use the current potential name.
+        newName = potName;
+      }
+    }
+  } else {
+    newName = 'i';
+  }
+  return newName;
+};
+
+/**
+ * Create a new variable on the given workspace.
+ * @param {!Blockly.Workspace} workspace The workspace on which to create the
+ *     variable.
+ * @return {null|undefined|string} An acceptable new variable name, or null if
+ *     change is to be aborted (cancel button), or undefined if an existing
+ *     variable was chosen.
+ */
+Blockly.Variables.createVariable = function(workspace) {
+  while (true) {
+    var text = Blockly.Variables.promptName(Blockly.Msg.NEW_VARIABLE_TITLE, '');
+    if (text) {
+      if (workspace.variableIndexOf(text) != -1) {
+        window.alert(Blockly.Msg.VARIABLE_ALREADY_EXISTS.replace('%1',
+            text.toLowerCase()));
+      } else {
+        workspace.createVariable(text);
+        break;
+      }
+    } else {
+      text = null;
+      break;
+    }
+  }
+  return text;
+};
+
+/**
+ * Prompt the user for a new variable name.
+ * @param {string} promptText The string of the prompt.
+ * @param {string} defaultText The default value to show in the prompt's field.
+ * @return {?string} The new variable name, or null if the user picked
+ *     something illegal.
+ */
+Blockly.Variables.promptName = function(promptText, defaultText) {
+  var newVar = window.prompt(promptText, defaultText);
+  // Merge runs of whitespace.  Strip leading and trailing whitespace.
+  // Beyond this, all names are legal.
+  if (newVar) {
+    newVar = newVar.replace(/[\s\xa0]+/g, ' ').replace(/^ | $/g, '');
+    if (newVar == Blockly.Msg.RENAME_VARIABLE ||
+        newVar == Blockly.Msg.NEW_VARIABLE) {
+      // Ok, not ALL names are legal...
+      newVar = null;
+    }
+  }
+  return newVar;
+};
diff --git a/blockly/core/warning.js b/blockly/core/warning.js
new file mode 100644
index 0000000..bffbf06
--- /dev/null
+++ b/blockly/core/warning.js
@@ -0,0 +1,185 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2012 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Object representing a warning.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.Warning');
+
+goog.require('Blockly.Bubble');
+goog.require('Blockly.Icon');
+
+
+/**
+ * Class for a warning.
+ * @param {!Blockly.Block} block The block associated with this warning.
+ * @extends {Blockly.Icon}
+ * @constructor
+ */
+Blockly.Warning = function(block) {
+  Blockly.Warning.superClass_.constructor.call(this, block);
+  this.createIcon();
+  // The text_ object can contain multiple warnings.
+  this.text_ = {};
+};
+goog.inherits(Blockly.Warning, Blockly.Icon);
+
+/**
+ * Does this icon get hidden when the block is collapsed.
+ */
+Blockly.Warning.prototype.collapseHidden = false;
+
+/**
+ * Draw the warning icon.
+ * @param {!Element} group The icon group.
+ * @private
+ */
+Blockly.Warning.prototype.drawIcon_ = function(group) {
+  // Triangle with rounded corners.
+  Blockly.createSvgElement('path',
+      {'class': 'blocklyIconShape',
+       'd': 'M2,15Q-1,15 0.5,12L6.5,1.7Q8,-1 9.5,1.7L15.5,12Q17,15 14,15z'},
+       group);
+  // Can't use a real '!' text character since different browsers and operating
+  // systems render it differently.
+  // Body of exclamation point.
+  Blockly.createSvgElement('path',
+      {'class': 'blocklyIconSymbol',
+       'd': 'm7,4.8v3.16l0.27,2.27h1.46l0.27,-2.27v-3.16z'},
+       group);
+  // Dot of exclamation point.
+  Blockly.createSvgElement('rect',
+      {'class': 'blocklyIconSymbol',
+       'x': '7', 'y': '11', 'height': '2', 'width': '2'},
+       group);
+};
+
+/**
+ * Create the text for the warning's bubble.
+ * @param {string} text The text to display.
+ * @return {!SVGTextElement} The top-level node of the text.
+ * @private
+ */
+Blockly.Warning.textToDom_ = function(text) {
+  var paragraph = /** @type {!SVGTextElement} */ (
+      Blockly.createSvgElement('text',
+          {'class': 'blocklyText blocklyBubbleText',
+           'y': Blockly.Bubble.BORDER_WIDTH},
+          null));
+  var lines = text.split('\n');
+  for (var i = 0; i < lines.length; i++) {
+    var tspanElement = Blockly.createSvgElement('tspan',
+        {'dy': '1em', 'x': Blockly.Bubble.BORDER_WIDTH}, paragraph);
+    var textNode = document.createTextNode(lines[i]);
+    tspanElement.appendChild(textNode);
+  }
+  return paragraph;
+};
+
+/**
+ * Show or hide the warning bubble.
+ * @param {boolean} visible True if the bubble should be visible.
+ */
+Blockly.Warning.prototype.setVisible = function(visible) {
+  if (visible == this.isVisible()) {
+    // No change.
+    return;
+  }
+  Blockly.Events.fire(
+      new Blockly.Events.Ui(this.block_, 'warningOpen', !visible, visible));
+  if (visible) {
+    // Create the bubble to display all warnings.
+    var paragraph = Blockly.Warning.textToDom_(this.getText());
+    this.bubble_ = new Blockly.Bubble(
+        /** @type {!Blockly.WorkspaceSvg} */ (this.block_.workspace),
+        paragraph, this.block_.svgPath_, this.iconXY_, null, null);
+    if (this.block_.RTL) {
+      // Right-align the paragraph.
+      // This cannot be done until the bubble is rendered on screen.
+      var maxWidth = paragraph.getBBox().width;
+      for (var i = 0, textElement; textElement = paragraph.childNodes[i]; i++) {
+        textElement.setAttribute('text-anchor', 'end');
+        textElement.setAttribute('x', maxWidth + Blockly.Bubble.BORDER_WIDTH);
+      }
+    }
+    this.updateColour();
+    // Bump the warning into the right location.
+    var size = this.bubble_.getBubbleSize();
+    this.bubble_.setBubbleSize(size.width, size.height);
+  } else {
+    // Dispose of the bubble.
+    this.bubble_.dispose();
+    this.bubble_ = null;
+    this.body_ = null;
+  }
+};
+
+/**
+ * Bring the warning to the top of the stack when clicked on.
+ * @param {!Event} e Mouse up event.
+ * @private
+ */
+Blockly.Warning.prototype.bodyFocus_ = function(e) {
+  this.bubble_.promote_();
+};
+
+/**
+ * Set this warning's text.
+ * @param {string} text Warning text (or '' to delete).
+ * @param {string} id An ID for this text entry to be able to maintain
+ *     multiple warnings.
+ */
+Blockly.Warning.prototype.setText = function(text, id) {
+  if (this.text_[id] == text) {
+    return;
+  }
+  if (text) {
+    this.text_[id] = text;
+  } else {
+    delete this.text_[id];
+  }
+  if (this.isVisible()) {
+    this.setVisible(false);
+    this.setVisible(true);
+  }
+};
+
+/**
+ * Get this warning's texts.
+ * @return {string} All texts concatenated into one string.
+ */
+Blockly.Warning.prototype.getText = function() {
+  var allWarnings = [];
+  for (var id in this.text_) {
+    allWarnings.push(this.text_[id]);
+  }
+  return allWarnings.join('\n');
+};
+
+/**
+ * Dispose of this warning.
+ */
+Blockly.Warning.prototype.dispose = function() {
+  this.block_.warning = null;
+  Blockly.Icon.prototype.dispose.call(this);
+};
diff --git a/blockly/core/widgetdiv.js b/blockly/core/widgetdiv.js
new file mode 100644
index 0000000..a811339
--- /dev/null
+++ b/blockly/core/widgetdiv.js
@@ -0,0 +1,152 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2013 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview A div that floats on top of Blockly.  This singleton contains
+ *     temporary HTML UI widgets that the user is currently interacting with.
+ *     E.g. text input areas, colour pickers, context menus.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.WidgetDiv');
+
+goog.require('Blockly.Css');
+goog.require('goog.dom');
+goog.require('goog.dom.TagName');
+goog.require('goog.style');
+
+
+/**
+ * The HTML container.  Set once by Blockly.WidgetDiv.createDom.
+ * @type {Element}
+ */
+Blockly.WidgetDiv.DIV = null;
+
+/**
+ * The object currently using this container.
+ * @type {Object}
+ * @private
+ */
+Blockly.WidgetDiv.owner_ = null;
+
+/**
+ * Optional cleanup function set by whichever object uses the widget.
+ * @type {Function}
+ * @private
+ */
+Blockly.WidgetDiv.dispose_ = null;
+
+/**
+ * Create the widget div and inject it onto the page.
+ */
+Blockly.WidgetDiv.createDom = function() {
+  if (Blockly.WidgetDiv.DIV) {
+    return;  // Already created.
+  }
+  // Create an HTML container for popup overlays (e.g. editor widgets).
+  Blockly.WidgetDiv.DIV =
+      goog.dom.createDom(goog.dom.TagName.DIV, 'blocklyWidgetDiv');
+  document.body.appendChild(Blockly.WidgetDiv.DIV);
+};
+
+/**
+ * Initialize and display the widget div.  Close the old one if needed.
+ * @param {!Object} newOwner The object that will be using this container.
+ * @param {boolean} rtl Right-to-left (true) or left-to-right (false).
+ * @param {Function} dispose Optional cleanup function to be run when the widget
+ *   is closed.
+ */
+Blockly.WidgetDiv.show = function(newOwner, rtl, dispose) {
+  Blockly.WidgetDiv.hide();
+  Blockly.WidgetDiv.owner_ = newOwner;
+  Blockly.WidgetDiv.dispose_ = dispose;
+  // Temporarily move the widget to the top of the screen so that it does not
+  // cause a scrollbar jump in Firefox when displayed.
+  var xy = goog.style.getViewportPageOffset(document);
+  Blockly.WidgetDiv.DIV.style.top = xy.y + 'px';
+  Blockly.WidgetDiv.DIV.style.direction = rtl ? 'rtl' : 'ltr';
+  Blockly.WidgetDiv.DIV.style.display = 'block';
+};
+
+/**
+ * Destroy the widget and hide the div.
+ */
+Blockly.WidgetDiv.hide = function() {
+  if (Blockly.WidgetDiv.owner_) {
+    Blockly.WidgetDiv.owner_ = null;
+    Blockly.WidgetDiv.DIV.style.display = 'none';
+    Blockly.WidgetDiv.DIV.style.left = '';
+    Blockly.WidgetDiv.DIV.style.top = '';
+    Blockly.WidgetDiv.dispose_ && Blockly.WidgetDiv.dispose_();
+    Blockly.WidgetDiv.dispose_ = null;
+    goog.dom.removeChildren(Blockly.WidgetDiv.DIV);
+  }
+};
+
+/**
+ * Is the container visible?
+ * @return {boolean} True if visible.
+ */
+Blockly.WidgetDiv.isVisible = function() {
+  return !!Blockly.WidgetDiv.owner_;
+};
+
+/**
+ * Destroy the widget and hide the div if it is being used by the specified
+ *   object.
+ * @param {!Object} oldOwner The object that was using this container.
+ */
+Blockly.WidgetDiv.hideIfOwner = function(oldOwner) {
+  if (Blockly.WidgetDiv.owner_ == oldOwner) {
+    Blockly.WidgetDiv.hide();
+  }
+};
+
+/**
+ * Position the widget at a given location.  Prevent the widget from going
+ * offscreen top or left (right in RTL).
+ * @param {number} anchorX Horizontal location (window coorditates, not body).
+ * @param {number} anchorY Vertical location (window coorditates, not body).
+ * @param {!goog.math.Size} windowSize Height/width of window.
+ * @param {!goog.math.Coordinate} scrollOffset X/y of window scrollbars.
+ * @param {boolean} rtl True if RTL, false if LTR.
+ */
+Blockly.WidgetDiv.position = function(anchorX, anchorY, windowSize,
+                                      scrollOffset, rtl) {
+  // Don't let the widget go above the top edge of the window.
+  if (anchorY < scrollOffset.y) {
+    anchorY = scrollOffset.y;
+  }
+  if (rtl) {
+    // Don't let the widget go right of the right edge of the window.
+    if (anchorX > windowSize.width + scrollOffset.x) {
+      anchorX = windowSize.width + scrollOffset.x;
+    }
+  } else {
+    // Don't let the widget go left of the left edge of the window.
+    if (anchorX < scrollOffset.x) {
+      anchorX = scrollOffset.x;
+    }
+  }
+  Blockly.WidgetDiv.DIV.style.left = anchorX + 'px';
+  Blockly.WidgetDiv.DIV.style.top = anchorY + 'px';
+  Blockly.WidgetDiv.DIV.style.height = windowSize.height + 'px';
+};
diff --git a/blockly/core/workspace.js b/blockly/core/workspace.js
new file mode 100644
index 0000000..a8e97c0
--- /dev/null
+++ b/blockly/core/workspace.js
@@ -0,0 +1,501 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2012 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Object representing a workspace.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.Workspace');
+
+goog.require('goog.math');
+
+
+/**
+ * Class for a workspace.  This is a data structure that contains blocks.
+ * There is no UI, and can be created headlessly.
+ * @param {Blockly.Options} opt_options Dictionary of options.
+ * @constructor
+ */
+Blockly.Workspace = function(opt_options) {
+  /** @type {string} */
+  this.id = Blockly.genUid();
+  Blockly.Workspace.WorkspaceDB_[this.id] = this;
+  /** @type {!Blockly.Options} */
+  this.options = opt_options || {};
+  /** @type {boolean} */
+  this.RTL = !!this.options.RTL;
+  /** @type {boolean} */
+  this.horizontalLayout = !!this.options.horizontalLayout;
+  /** @type {number} */
+  this.toolboxPosition = this.options.toolboxPosition;
+
+  /**
+   * @type {!Array.<!Blockly.Block>}
+   * @private
+   */
+  this.topBlocks_ = [];
+  /**
+   * @type {!Array.<!Function>}
+   * @private
+   */
+  this.listeners_ = [];
+  /**
+   * @type {!Array.<!Blockly.Events.Abstract>}
+   * @private
+   */
+  this.undoStack_ = [];
+  /**
+   * @type {!Array.<!Blockly.Events.Abstract>}
+   * @private
+   */
+  this.redoStack_ = [];
+  /**
+   * @type {!Object}
+   * @private
+   */
+  this.blockDB_ = Object.create(null);
+  /*
+   * @type {!Array.<!string>}
+   * A list of all of the named variables in the workspace, including variables
+   * that are not currently in use.
+   */
+  this.variableList = [];
+};
+
+/**
+ * Workspaces may be headless.
+ * @type {boolean} True if visible.  False if headless.
+ */
+Blockly.Workspace.prototype.rendered = false;
+
+/**
+ * Maximum number of undo events in stack.
+ * @type {number} 0 to turn off undo, Infinity for unlimited.
+ */
+Blockly.Workspace.prototype.MAX_UNDO = 1024;
+
+/**
+ * Dispose of this workspace.
+ * Unlink from all DOM elements to prevent memory leaks.
+ */
+Blockly.Workspace.prototype.dispose = function() {
+  this.listeners_.length = 0;
+  this.clear();
+  // Remove from workspace database.
+  delete Blockly.Workspace.WorkspaceDB_[this.id];
+};
+
+/**
+ * Angle away from the horizontal to sweep for blocks.  Order of execution is
+ * generally top to bottom, but a small angle changes the scan to give a bit of
+ * a left to right bias (reversed in RTL).  Units are in degrees.
+ * See: http://tvtropes.org/pmwiki/pmwiki.php/Main/DiagonalBilling.
+ */
+Blockly.Workspace.SCAN_ANGLE = 3;
+
+/**
+ * Add a block to the list of top blocks.
+ * @param {!Blockly.Block} block Block to remove.
+ */
+Blockly.Workspace.prototype.addTopBlock = function(block) {
+  this.topBlocks_.push(block);
+  if (this.isFlyout) {
+    // This is for the (unlikely) case where you have a variable in a block in
+    // an always-open flyout.  It needs to be possible to edit the block in the
+    // flyout, so the contents of the dropdown need to be correct.
+    var variables = Blockly.Variables.allUsedVariables(block);
+    for (var i = 0; i < variables.length; i++) {
+      if (this.variableList.indexOf(variables[i]) == -1) {
+        this.variableList.push(variables[i]);
+      }
+    }
+  }
+};
+
+/**
+ * Remove a block from the list of top blocks.
+ * @param {!Blockly.Block} block Block to remove.
+ */
+Blockly.Workspace.prototype.removeTopBlock = function(block) {
+  var found = false;
+  for (var child, i = 0; child = this.topBlocks_[i]; i++) {
+    if (child == block) {
+      this.topBlocks_.splice(i, 1);
+      found = true;
+      break;
+    }
+  }
+  if (!found) {
+    throw 'Block not present in workspace\'s list of top-most blocks.';
+  }
+};
+
+/**
+ * Finds the top-level blocks and returns them.  Blocks are optionally sorted
+ * by position; top to bottom (with slight LTR or RTL bias).
+ * @param {boolean} ordered Sort the list if true.
+ * @return {!Array.<!Blockly.Block>} The top-level block objects.
+ */
+Blockly.Workspace.prototype.getTopBlocks = function(ordered) {
+  // Copy the topBlocks_ list.
+  var blocks = [].concat(this.topBlocks_);
+  if (ordered && blocks.length > 1) {
+    var offset = Math.sin(goog.math.toRadians(Blockly.Workspace.SCAN_ANGLE));
+    if (this.RTL) {
+      offset *= -1;
+    }
+    blocks.sort(function(a, b) {
+      var aXY = a.getRelativeToSurfaceXY();
+      var bXY = b.getRelativeToSurfaceXY();
+      return (aXY.y + offset * aXY.x) - (bXY.y + offset * bXY.x);
+    });
+  }
+  return blocks;
+};
+
+/**
+ * Find all blocks in workspace.  No particular order.
+ * @return {!Array.<!Blockly.Block>} Array of blocks.
+ */
+Blockly.Workspace.prototype.getAllBlocks = function() {
+  var blocks = this.getTopBlocks(false);
+  for (var i = 0; i < blocks.length; i++) {
+    blocks.push.apply(blocks, blocks[i].getChildren());
+  }
+  return blocks;
+};
+
+/**
+ * Dispose of all blocks in workspace.
+ */
+Blockly.Workspace.prototype.clear = function() {
+  var existingGroup = Blockly.Events.getGroup();
+  if (!existingGroup) {
+    Blockly.Events.setGroup(true);
+  }
+  while (this.topBlocks_.length) {
+    this.topBlocks_[0].dispose();
+  }
+  if (!existingGroup) {
+    Blockly.Events.setGroup(false);
+  }
+
+  this.variableList.length = 0;
+};
+
+/**
+ * Walk the workspace and update the list of variables to only contain ones in
+ * use on the workspace.  Use when loading new workspaces from disk.
+ * @param {boolean} clearList True if the old variable list should be cleared.
+ */
+Blockly.Workspace.prototype.updateVariableList = function(clearList) {
+  // TODO: Sort
+  if (!this.isFlyout) {
+    // Update the list in place so that the flyout's references stay correct.
+    if (clearList) {
+      this.variableList.length = 0;
+    }
+    var allVariables = Blockly.Variables.allUsedVariables(this);
+    for (var i = 0; i < allVariables.length; i++) {
+      this.createVariable(allVariables[i]);
+    }
+  }
+};
+
+/**
+ * Rename a variable by updating its name in the variable list.
+ * TODO: #468
+ * @param {string} oldName Variable to rename.
+ * @param {string} newName New variable name.
+ */
+Blockly.Workspace.prototype.renameVariable = function(oldName, newName) {
+  // Find the old name in the list.
+  var variableIndex = this.variableIndexOf(oldName);
+  var newVariableIndex = this.variableIndexOf(newName);
+
+  // We might be renaming to an existing name but with different case.  If so,
+  // we will also update all of the blocks using the new name to have the
+  // correct case.
+  if (newVariableIndex != -1 &&
+      this.variableList[newVariableIndex] != newName) {
+    var oldCase = this.variableList[newVariableIndex];
+  }
+
+  Blockly.Events.setGroup(true);
+  var blocks = this.getAllBlocks();
+  // Iterate through every block.
+  for (var i = 0; i < blocks.length; i++) {
+    blocks[i].renameVar(oldName, newName);
+    if (oldCase) {
+      blocks[i].renameVar(oldCase, newName);
+    }
+  }
+  Blockly.Events.setGroup(false);
+
+
+  if (variableIndex == newVariableIndex ||
+      variableIndex != -1 && newVariableIndex == -1) {
+    // Only changing case, or renaming to a completely novel name.
+    this.variableList[variableIndex] = newName;
+  } else if (variableIndex != -1 && newVariableIndex != -1) {
+    // Renaming one existing variable to another existing variable.
+    this.variableList.splice(variableIndex, 1);
+    // The case might have changed.
+    this.variableList[newVariableIndex] = newName;
+  } else {
+    this.variableList.push(newName);
+    console.log('Tried to rename an non-existent variable.');
+  }
+};
+
+/**
+ * Create a variable with the given name.
+ * TODO: #468
+ * @param {string} name The new variable's name.
+ */
+Blockly.Workspace.prototype.createVariable = function(name) {
+  var index = this.variableIndexOf(name);
+  if (index == -1) {
+    this.variableList.push(name);
+  }
+};
+
+/**
+ * Find all the uses of a named variable.
+ * @param {string} name Name of variable.
+ * @return {!Array.<!Blockly.Block>} Array of block usages.
+ */
+Blockly.Workspace.prototype.getVariableUses = function(name) {
+  var uses = [];
+  var blocks = this.getAllBlocks();
+  // Iterate through every block and check the name.
+  for (var i = 0; i < blocks.length; i++) {
+    var blockVariables = blocks[i].getVars();
+    if (blockVariables) {
+      for (var j = 0; j < blockVariables.length; j++) {
+        var varName = blockVariables[j];
+        // Variable name may be null if the block is only half-built.
+        if (varName && Blockly.Names.equals(varName, name)) {
+          uses.push(blocks[i]);
+        }
+      }
+    }
+  }
+  return uses;
+};
+
+/**
+ * Delete a variables and all of its uses from this workspace.
+ * @param {string} name Name of variable to delete.
+ */
+Blockly.Workspace.prototype.deleteVariable = function(name) {
+  var variableIndex = this.variableIndexOf(name);
+  if (variableIndex != -1) {
+    var uses = this.getVariableUses(name);
+    if (uses.length > 1) {
+      for (var i = 0, block; block = uses[i]; i++) {
+        if (block.type == 'procedures_defnoreturn' ||
+          block.type == 'procedures_defreturn') {
+          var procedureName = block.getFieldValue('NAME');
+          window.alert(
+              Blockly.Msg.CANNOT_DELETE_VARIABLE_PROCEDURE.replace('%1', name).
+              replace('%2', procedureName));
+          return;
+        }
+      }
+      var ok = window.confirm(
+          Blockly.Msg.DELETE_VARIABLE_CONFIRMATION.replace('%1', uses.length).
+          replace('%2', name));
+      if (!ok) {
+        return;
+      }
+    }
+
+    Blockly.Events.setGroup(true);
+    for (var i = 0; i < uses.length; i++) {
+      uses[i].dispose(true, false);
+    }
+    Blockly.Events.setGroup(false);
+    this.variableList.splice(variableIndex, 1);
+  }
+};
+
+/**
+ * Check whether a variable exists with the given name.  The check is
+ * case-insensitive.
+ * @param {string} name The name to check for.
+ * @return {number} The index of the name in the variable list, or -1 if it is
+ *     not present.
+ */
+Blockly.Workspace.prototype.variableIndexOf = function(name) {
+  for (var i = 0, varname; varname = this.variableList[i]; i++) {
+    if (Blockly.Names.equals(varname, name)) {
+      return i;
+    }
+  }
+  return -1;
+};
+
+/**
+ * Returns the horizontal offset of the workspace.
+ * Intended for LTR/RTL compatibility in XML.
+ * Not relevant for a headless workspace.
+ * @return {number} Width.
+ */
+Blockly.Workspace.prototype.getWidth = function() {
+  return 0;
+};
+
+/**
+ * Obtain a newly created block.
+ * @param {?string} prototypeName Name of the language object containing
+ *     type-specific functions for this block.
+ * @param {=string} opt_id Optional ID.  Use this ID if provided, otherwise
+ *     create a new id.
+ * @return {!Blockly.Block} The created block.
+ */
+Blockly.Workspace.prototype.newBlock = function(prototypeName, opt_id) {
+  return new Blockly.Block(this, prototypeName, opt_id);
+};
+
+/**
+ * The number of blocks that may be added to the workspace before reaching
+ *     the maxBlocks.
+ * @return {number} Number of blocks left.
+ */
+Blockly.Workspace.prototype.remainingCapacity = function() {
+  if (isNaN(this.options.maxBlocks)) {
+    return Infinity;
+  }
+  return this.options.maxBlocks - this.getAllBlocks().length;
+};
+
+/**
+ * Undo or redo the previous action.
+ * @param {boolean} redo False if undo, true if redo.
+ */
+Blockly.Workspace.prototype.undo = function(redo) {
+  var inputStack = redo ? this.redoStack_ : this.undoStack_;
+  var outputStack = redo ? this.undoStack_ : this.redoStack_;
+  var inputEvent = inputStack.pop();
+  if (!inputEvent) {
+    return;
+  }
+  var events = [inputEvent];
+  // Do another undo/redo if the next one is of the same group.
+  while (inputStack.length && inputEvent.group &&
+      inputEvent.group == inputStack[inputStack.length - 1].group) {
+    events.push(inputStack.pop());
+  }
+  // Push these popped events on the opposite stack.
+  for (var i = 0, event; event = events[i]; i++) {
+    outputStack.push(event);
+  }
+  events = Blockly.Events.filter(events, redo);
+  Blockly.Events.recordUndo = false;
+  for (var i = 0, event; event = events[i]; i++) {
+    event.run(redo);
+  }
+  Blockly.Events.recordUndo = true;
+};
+
+/**
+ * Clear the undo/redo stacks.
+ */
+Blockly.Workspace.prototype.clearUndo = function() {
+  this.undoStack_.length = 0;
+  this.redoStack_.length = 0;
+  // Stop any events already in the firing queue from being undoable.
+  Blockly.Events.clearPendingUndo();
+};
+
+/**
+ * When something in this workspace changes, call a function.
+ * @param {!Function} func Function to call.
+ * @return {!Function} Function that can be passed to
+ *     removeChangeListener.
+ */
+Blockly.Workspace.prototype.addChangeListener = function(func) {
+  this.listeners_.push(func);
+  return func;
+};
+
+/**
+ * Stop listening for this workspace's changes.
+ * @param {Function} func Function to stop calling.
+ */
+Blockly.Workspace.prototype.removeChangeListener = function(func) {
+  var i = this.listeners_.indexOf(func);
+  if (i != -1) {
+    this.listeners_.splice(i, 1);
+  }
+};
+
+/**
+ * Fire a change event.
+ * @param {!Blockly.Events.Abstract} event Event to fire.
+ */
+Blockly.Workspace.prototype.fireChangeListener = function(event) {
+  if (event.recordUndo) {
+    this.undoStack_.push(event);
+    this.redoStack_.length = 0;
+    if (this.undoStack_.length > this.MAX_UNDO) {
+      this.undoStack_.unshift();
+    }
+  }
+  for (var i = 0, func; func = this.listeners_[i]; i++) {
+    func(event);
+  }
+};
+
+/**
+ * Find the block on this workspace with the specified ID.
+ * @param {string} id ID of block to find.
+ * @return {Blockly.Block} The sought after block or null if not found.
+ */
+Blockly.Workspace.prototype.getBlockById = function(id) {
+  return this.blockDB_[id] || null;
+};
+
+/**
+ * Database of all workspaces.
+ * @private
+ */
+Blockly.Workspace.WorkspaceDB_ = Object.create(null);
+
+/**
+ * Find the workspace with the specified ID.
+ * @param {string} id ID of workspace to find.
+ * @return {Blockly.Workspace} The sought after workspace or null if not found.
+ */
+Blockly.Workspace.getById = function(id) {
+  return Blockly.Workspace.WorkspaceDB_[id] || null;
+};
+
+// Export symbols that would otherwise be renamed by Closure compiler.
+Blockly.Workspace.prototype['clear'] = Blockly.Workspace.prototype.clear;
+Blockly.Workspace.prototype['clearUndo'] =
+    Blockly.Workspace.prototype.clearUndo;
+Blockly.Workspace.prototype['addChangeListener'] =
+    Blockly.Workspace.prototype.addChangeListener;
+Blockly.Workspace.prototype['removeChangeListener'] =
+    Blockly.Workspace.prototype.removeChangeListener;
diff --git a/blockly/core/workspace_svg.js b/blockly/core/workspace_svg.js
new file mode 100644
index 0000000..a3c0b53
--- /dev/null
+++ b/blockly/core/workspace_svg.js
@@ -0,0 +1,1401 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2014 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Object representing a workspace rendered as SVG.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.WorkspaceSvg');
+
+// TODO(scr): Fix circular dependencies
+//goog.require('Blockly.BlockSvg');
+goog.require('Blockly.ConnectionDB');
+goog.require('Blockly.constants');
+goog.require('Blockly.Options');
+goog.require('Blockly.ScrollbarPair');
+goog.require('Blockly.Trashcan');
+goog.require('Blockly.Workspace');
+goog.require('Blockly.Xml');
+goog.require('Blockly.ZoomControls');
+
+goog.require('goog.dom');
+goog.require('goog.math.Coordinate');
+goog.require('goog.userAgent');
+
+
+/**
+ * Class for a workspace.  This is an onscreen area with optional trashcan,
+ * scrollbars, bubbles, and dragging.
+ * @param {!Blockly.Options} options Dictionary of options.
+ * @extends {Blockly.Workspace}
+ * @constructor
+ */
+Blockly.WorkspaceSvg = function(options) {
+  Blockly.WorkspaceSvg.superClass_.constructor.call(this, options);
+  this.getMetrics =
+      options.getMetrics || Blockly.WorkspaceSvg.getTopLevelWorkspaceMetrics_;
+  this.setMetrics =
+      options.setMetrics || Blockly.WorkspaceSvg.setTopLevelWorkspaceMetrics_;
+
+  Blockly.ConnectionDB.init(this);
+
+  /**
+   * Database of pre-loaded sounds.
+   * @private
+   * @const
+   */
+  this.SOUNDS_ = Object.create(null);
+};
+goog.inherits(Blockly.WorkspaceSvg, Blockly.Workspace);
+
+/**
+ * Wrapper function called when a resize event occurs.
+ * @type {Array.<!Array>} Data that can be passed to unbindEvent_
+ */
+Blockly.WorkspaceSvg.prototype.resizeHandlerWrapper_ = null;
+
+/**
+ * Svg workspaces are user-visible (as opposed to a headless workspace).
+ * @type {boolean} True if visible.  False if headless.
+ */
+Blockly.WorkspaceSvg.prototype.rendered = true;
+
+/**
+ * Is this workspace the surface for a flyout?
+ * @type {boolean}
+ */
+Blockly.WorkspaceSvg.prototype.isFlyout = false;
+
+/**
+ * Is this workspace the surface for a mutator?
+ * @type {boolean}
+ * @package
+ */
+Blockly.WorkspaceSvg.prototype.isMutator = false;
+
+/**
+ * Is this workspace currently being dragged around?
+ * DRAG_NONE - No drag operation.
+ * DRAG_BEGIN - Still inside the initial DRAG_RADIUS.
+ * DRAG_FREE - Workspace has been dragged further than DRAG_RADIUS.
+ * @private
+ */
+Blockly.WorkspaceSvg.prototype.dragMode_ = Blockly.DRAG_NONE;
+
+/**
+ * Current horizontal scrolling offset.
+ * @type {number}
+ */
+Blockly.WorkspaceSvg.prototype.scrollX = 0;
+
+/**
+ * Current vertical scrolling offset.
+ * @type {number}
+ */
+Blockly.WorkspaceSvg.prototype.scrollY = 0;
+
+/**
+ * Horizontal scroll value when scrolling started.
+ * @type {number}
+ */
+Blockly.WorkspaceSvg.prototype.startScrollX = 0;
+
+/**
+ * Vertical scroll value when scrolling started.
+ * @type {number}
+ */
+Blockly.WorkspaceSvg.prototype.startScrollY = 0;
+
+/**
+ * Distance from mouse to object being dragged.
+ * @type {goog.math.Coordinate}
+ * @private
+ */
+Blockly.WorkspaceSvg.prototype.dragDeltaXY_ = null;
+
+/**
+ * Current scale.
+ * @type {number}
+ */
+Blockly.WorkspaceSvg.prototype.scale = 1;
+
+/**
+ * The workspace's trashcan (if any).
+ * @type {Blockly.Trashcan}
+ */
+Blockly.WorkspaceSvg.prototype.trashcan = null;
+
+/**
+ * This workspace's scrollbars, if they exist.
+ * @type {Blockly.ScrollbarPair}
+ */
+Blockly.WorkspaceSvg.prototype.scrollbar = null;
+
+/**
+ * Time that the last sound was played.
+ * @type {Date}
+ * @private
+ */
+Blockly.WorkspaceSvg.prototype.lastSound_ = null;
+
+/**
+ * Last known position of the page scroll.
+ * This is used to determine whether we have recalculated screen coordinate
+ * stuff since the page scrolled.
+ * @type {!goog.math.Coordinate}
+ * @private
+ */
+Blockly.WorkspaceSvg.prototype.lastRecordedPageScroll_ = null;
+
+/**
+ * Inverted screen CTM, for use in mouseToSvg.
+ * @type {SVGMatrix}
+ * @private
+ */
+Blockly.WorkspaceSvg.prototype.inverseScreenCTM_ = null;
+
+/**
+ * Getter for the inverted screen CTM.
+ * @return {SVGMatrix} The matrix to use in mouseToSvg
+ */
+Blockly.WorkspaceSvg.prototype.getInverseScreenCTM = function() {
+  return this.inverseScreenCTM_;
+};
+
+/**
+ * Update the inverted screen CTM.
+ */
+Blockly.WorkspaceSvg.prototype.updateInverseScreenCTM = function() {
+  this.inverseScreenCTM_ = this.getParentSvg().getScreenCTM().inverse();
+};
+
+/**
+ * Save resize handler data so we can delete it later in dispose.
+ * @param {!Array.<!Array>} handler Data that can be passed to unbindEvent_.
+ */
+Blockly.WorkspaceSvg.prototype.setResizeHandlerWrapper = function(handler) {
+  this.resizeHandlerWrapper_ = handler;
+};
+
+/**
+ * Create the workspace DOM elements.
+ * @param {string=} opt_backgroundClass Either 'blocklyMainBackground' or
+ *     'blocklyMutatorBackground'.
+ * @return {!Element} The workspace's SVG group.
+ */
+Blockly.WorkspaceSvg.prototype.createDom = function(opt_backgroundClass) {
+  /**
+   * <g class="blocklyWorkspace">
+   *   <rect class="blocklyMainBackground" height="100%" width="100%"></rect>
+   *   [Trashcan and/or flyout may go here]
+   *   <g class="blocklyBlockCanvas"></g>
+   *   <g class="blocklyBubbleCanvas"></g>
+   *   [Scrollbars may go here]
+   * </g>
+   * @type {SVGElement}
+   */
+  this.svgGroup_ = Blockly.createSvgElement('g',
+      {'class': 'blocklyWorkspace'}, null);
+  if (opt_backgroundClass) {
+    /** @type {SVGElement} */
+    this.svgBackground_ = Blockly.createSvgElement('rect',
+        {'height': '100%', 'width': '100%', 'class': opt_backgroundClass},
+        this.svgGroup_);
+    if (opt_backgroundClass == 'blocklyMainBackground') {
+      this.svgBackground_.style.fill =
+          'url(#' + this.options.gridPattern.id + ')';
+    }
+  }
+  /** @type {SVGElement} */
+  this.svgBlockCanvas_ = Blockly.createSvgElement('g',
+      {'class': 'blocklyBlockCanvas'}, this.svgGroup_, this);
+  /** @type {SVGElement} */
+  this.svgBubbleCanvas_ = Blockly.createSvgElement('g',
+      {'class': 'blocklyBubbleCanvas'}, this.svgGroup_, this);
+  var bottom = Blockly.Scrollbar.scrollbarThickness;
+  if (this.options.hasTrashcan) {
+    bottom = this.addTrashcan_(bottom);
+  }
+  if (this.options.zoomOptions && this.options.zoomOptions.controls) {
+    bottom = this.addZoomControls_(bottom);
+  }
+
+  if (!this.isFlyout) {
+    Blockly.bindEvent_(this.svgGroup_, 'mousedown', this, this.onMouseDown_);
+    var thisWorkspace = this;
+    Blockly.bindEvent_(this.svgGroup_, 'touchstart', null,
+                       function(e) {Blockly.longStart_(e, thisWorkspace);});
+    if (this.options.zoomOptions && this.options.zoomOptions.wheel) {
+      // Mouse-wheel.
+      Blockly.bindEvent_(this.svgGroup_, 'wheel', this, this.onMouseWheel_);
+    }
+  }
+
+  // Determine if there needs to be a category tree, or a simple list of
+  // blocks.  This cannot be changed later, since the UI is very different.
+  if (this.options.hasCategories) {
+    this.toolbox_ = new Blockly.Toolbox(this);
+  } else if (this.options.languageTree) {
+    this.addFlyout_();
+  }
+  this.updateGridPattern_();
+  this.recordDeleteAreas();
+  return this.svgGroup_;
+};
+
+/**
+ * Dispose of this workspace.
+ * Unlink from all DOM elements to prevent memory leaks.
+ */
+Blockly.WorkspaceSvg.prototype.dispose = function() {
+  // Stop rerendering.
+  this.rendered = false;
+  Blockly.WorkspaceSvg.superClass_.dispose.call(this);
+  if (this.svgGroup_) {
+    goog.dom.removeNode(this.svgGroup_);
+    this.svgGroup_ = null;
+  }
+  this.svgBlockCanvas_ = null;
+  this.svgBubbleCanvas_ = null;
+  if (this.toolbox_) {
+    this.toolbox_.dispose();
+    this.toolbox_ = null;
+  }
+  if (this.flyout_) {
+    this.flyout_.dispose();
+    this.flyout_ = null;
+  }
+  if (this.trashcan) {
+    this.trashcan.dispose();
+    this.trashcan = null;
+  }
+  if (this.scrollbar) {
+    this.scrollbar.dispose();
+    this.scrollbar = null;
+  }
+  if (this.zoomControls_) {
+    this.zoomControls_.dispose();
+    this.zoomControls_ = null;
+  }
+  if (!this.options.parentWorkspace) {
+    // Top-most workspace.  Dispose of the div that the
+    // svg is injected into (i.e. injectionDiv).
+    goog.dom.removeNode(this.getParentSvg().parentNode);
+  }
+  if (this.resizeHandlerWrapper_) {
+    Blockly.unbindEvent_(this.resizeHandlerWrapper_);
+    this.resizeHandlerWrapper_ = null;
+  }
+};
+
+/**
+ * Obtain a newly created block.
+ * @param {?string} prototypeName Name of the language object containing
+ *     type-specific functions for this block.
+ * @param {=string} opt_id Optional ID.  Use this ID if provided, otherwise
+ *     create a new id.
+ * @return {!Blockly.BlockSvg} The created block.
+ */
+Blockly.WorkspaceSvg.prototype.newBlock = function(prototypeName, opt_id) {
+  return new Blockly.BlockSvg(this, prototypeName, opt_id);
+};
+
+/**
+ * Add a trashcan.
+ * @param {number} bottom Distance from workspace bottom to bottom of trashcan.
+ * @return {number} Distance from workspace bottom to the top of trashcan.
+ * @private
+ */
+Blockly.WorkspaceSvg.prototype.addTrashcan_ = function(bottom) {
+  /** @type {Blockly.Trashcan} */
+  this.trashcan = new Blockly.Trashcan(this);
+  var svgTrashcan = this.trashcan.createDom();
+  this.svgGroup_.insertBefore(svgTrashcan, this.svgBlockCanvas_);
+  return this.trashcan.init(bottom);
+};
+
+/**
+ * Add zoom controls.
+ * @param {number} bottom Distance from workspace bottom to bottom of controls.
+ * @return {number} Distance from workspace bottom to the top of controls.
+ * @private
+ */
+Blockly.WorkspaceSvg.prototype.addZoomControls_ = function(bottom) {
+  /** @type {Blockly.ZoomControls} */
+  this.zoomControls_ = new Blockly.ZoomControls(this);
+  var svgZoomControls = this.zoomControls_.createDom();
+  this.svgGroup_.appendChild(svgZoomControls);
+  return this.zoomControls_.init(bottom);
+};
+
+/**
+ * Add a flyout.
+ * @private
+ */
+Blockly.WorkspaceSvg.prototype.addFlyout_ = function() {
+  var workspaceOptions = {
+    disabledPatternId: this.options.disabledPatternId,
+    parentWorkspace: this,
+    RTL: this.RTL,
+    horizontalLayout: this.horizontalLayout,
+    toolboxPosition: this.options.toolboxPosition
+  };
+  /** @type {Blockly.Flyout} */
+  this.flyout_ = new Blockly.Flyout(workspaceOptions);
+  this.flyout_.autoClose = false;
+  var svgFlyout = this.flyout_.createDom();
+  this.svgGroup_.insertBefore(svgFlyout, this.svgBlockCanvas_);
+};
+
+/**
+ * Update items that use screen coordinate calculations
+ * because something has changed (e.g. scroll position, window size).
+ * @private
+ */
+Blockly.WorkspaceSvg.prototype.updateScreenCalculations_ = function() {
+  this.updateInverseScreenCTM();
+  this.recordDeleteAreas();
+};
+
+/**
+ * Resize the parts of the workspace that change when the workspace
+ * contents (e.g. block positions) change.  This will also scroll the
+ * workspace contents if needed.
+ * @package
+ */
+Blockly.WorkspaceSvg.prototype.resizeContents = function() {
+  if (this.scrollbar) {
+    // TODO(picklesrus): Once rachel-fenichel's scrollbar refactoring
+    // is complete, call the method that only resizes scrollbar
+    // based on contents.
+    this.scrollbar.resize();
+  }
+  this.updateInverseScreenCTM();
+};
+
+/**
+ * Resize and reposition all of the workspace chrome (toolbox,
+ * trash, scrollbars etc.)
+ * This should be called when something changes that
+ * requires recalculating dimensions and positions of the
+ * trash, zoom, toolbox, etc. (e.g. window resize).
+ */
+Blockly.WorkspaceSvg.prototype.resize = function() {
+  if (this.toolbox_) {
+    this.toolbox_.position();
+  }
+  if (this.flyout_) {
+    this.flyout_.position();
+  }
+  if (this.trashcan) {
+    this.trashcan.position();
+  }
+  if (this.zoomControls_) {
+    this.zoomControls_.position();
+  }
+  if (this.scrollbar) {
+    this.scrollbar.resize();
+  }
+  this.updateScreenCalculations_();
+};
+
+/**
+ * Resizes and repositions workspace chrome if the page has a new
+ * scroll position.
+ * @package
+ */
+Blockly.WorkspaceSvg.prototype.updateScreenCalculationsIfScrolled
+    = function() {
+  /* eslint-disable indent */
+  var currScroll = goog.dom.getDocumentScroll();
+  if (!goog.math.Coordinate.equals(this.lastRecordedPageScroll_,
+     currScroll)) {
+    this.lastRecordedPageScroll_ = currScroll;
+    this.updateScreenCalculations_();
+  }
+}; /* eslint-enable indent */
+
+/**
+ * Get the SVG element that forms the drawing surface.
+ * @return {!Element} SVG element.
+ */
+Blockly.WorkspaceSvg.prototype.getCanvas = function() {
+  return this.svgBlockCanvas_;
+};
+
+/**
+ * Get the SVG element that forms the bubble surface.
+ * @return {!SVGGElement} SVG element.
+ */
+Blockly.WorkspaceSvg.prototype.getBubbleCanvas = function() {
+  return this.svgBubbleCanvas_;
+};
+
+/**
+ * Get the SVG element that contains this workspace.
+ * @return {!Element} SVG element.
+ */
+Blockly.WorkspaceSvg.prototype.getParentSvg = function() {
+  if (this.cachedParentSvg_) {
+    return this.cachedParentSvg_;
+  }
+  var element = this.svgGroup_;
+  while (element) {
+    if (element.tagName == 'svg') {
+      this.cachedParentSvg_ = element;
+      return element;
+    }
+    element = element.parentNode;
+  }
+  return null;
+};
+
+/**
+ * Translate this workspace to new coordinates.
+ * @param {number} x Horizontal translation.
+ * @param {number} y Vertical translation.
+ */
+Blockly.WorkspaceSvg.prototype.translate = function(x, y) {
+  var translation = 'translate(' + x + ',' + y + ') ' +
+      'scale(' + this.scale + ')';
+  this.svgBlockCanvas_.setAttribute('transform', translation);
+  this.svgBubbleCanvas_.setAttribute('transform', translation);
+};
+
+/**
+ * Returns the horizontal offset of the workspace.
+ * Intended for LTR/RTL compatibility in XML.
+ * @return {number} Width.
+ */
+Blockly.WorkspaceSvg.prototype.getWidth = function() {
+  var metrics = this.getMetrics();
+  return metrics ? metrics.viewWidth / this.scale : 0;
+};
+
+/**
+ * Toggles the visibility of the workspace.
+ * Currently only intended for main workspace.
+ * @param {boolean} isVisible True if workspace should be visible.
+ */
+Blockly.WorkspaceSvg.prototype.setVisible = function(isVisible) {
+  this.getParentSvg().style.display = isVisible ? 'block' : 'none';
+  if (this.toolbox_) {
+    // Currently does not support toolboxes in mutators.
+    this.toolbox_.HtmlDiv.style.display = isVisible ? 'block' : 'none';
+  }
+  if (isVisible) {
+    this.render();
+    if (this.toolbox_) {
+      this.toolbox_.position();
+    }
+  } else {
+    Blockly.hideChaff(true);
+  }
+};
+
+/**
+ * Render all blocks in workspace.
+ */
+Blockly.WorkspaceSvg.prototype.render = function() {
+  // Generate list of all blocks.
+  var blocks = this.getAllBlocks();
+  // Render each block.
+  for (var i = blocks.length - 1; i >= 0; i--) {
+    blocks[i].render(false);
+  }
+};
+
+/**
+ * Turn the visual trace functionality on or off.
+ * @param {boolean} armed True if the trace should be on.
+ */
+Blockly.WorkspaceSvg.prototype.traceOn = function(armed) {
+  this.traceOn_ = armed;
+  if (this.traceWrapper_) {
+    Blockly.unbindEvent_(this.traceWrapper_);
+    this.traceWrapper_ = null;
+  }
+  if (armed) {
+    this.traceWrapper_ = Blockly.bindEvent_(this.svgBlockCanvas_,
+        'blocklySelectChange', this, function() {this.traceOn_ = false;});
+  }
+};
+
+/**
+ * Highlight a block in the workspace.
+ * @param {?string} id ID of block to find.
+ */
+Blockly.WorkspaceSvg.prototype.highlightBlock = function(id) {
+  if (this.traceOn_ && Blockly.dragMode_ != Blockly.DRAG_NONE) {
+    // The blocklySelectChange event normally prevents this, but sometimes
+    // there is a race condition on fast-executing apps.
+    this.traceOn(false);
+  }
+  if (!this.traceOn_) {
+    return;
+  }
+  var block = null;
+  if (id) {
+    block = this.getBlockById(id);
+    if (!block) {
+      return;
+    }
+  }
+  // Temporary turn off the listener for selection changes, so that we don't
+  // trip the monitor for detecting user activity.
+  this.traceOn(false);
+  // Select the current block.
+  if (block) {
+    block.select();
+  } else if (Blockly.selected) {
+    Blockly.selected.unselect();
+  }
+  // Restore the monitor for user activity after the selection event has fired.
+  var thisWorkspace = this;
+  setTimeout(function() {thisWorkspace.traceOn(true);}, 1);
+};
+
+/**
+ * Paste the provided block onto the workspace.
+ * @param {!Element} xmlBlock XML block element.
+ */
+Blockly.WorkspaceSvg.prototype.paste = function(xmlBlock) {
+  if (!this.rendered || xmlBlock.getElementsByTagName('block').length >=
+      this.remainingCapacity()) {
+    return;
+  }
+  Blockly.terminateDrag_();  // Dragging while pasting?  No.
+  Blockly.Events.disable();
+  try {
+    var block = Blockly.Xml.domToBlock(xmlBlock, this);
+    // Move the duplicate to original position.
+    var blockX = parseInt(xmlBlock.getAttribute('x'), 10);
+    var blockY = parseInt(xmlBlock.getAttribute('y'), 10);
+    if (!isNaN(blockX) && !isNaN(blockY)) {
+      if (this.RTL) {
+        blockX = -blockX;
+      }
+      // Offset block until not clobbering another block and not in connection
+      // distance with neighbouring blocks.
+      do {
+        var collide = false;
+        var allBlocks = this.getAllBlocks();
+        for (var i = 0, otherBlock; otherBlock = allBlocks[i]; i++) {
+          var otherXY = otherBlock.getRelativeToSurfaceXY();
+          if (Math.abs(blockX - otherXY.x) <= 1 &&
+              Math.abs(blockY - otherXY.y) <= 1) {
+            collide = true;
+            break;
+          }
+        }
+        if (!collide) {
+          // Check for blocks in snap range to any of its connections.
+          var connections = block.getConnections_(false);
+          for (var i = 0, connection; connection = connections[i]; i++) {
+            var neighbour = connection.closest(Blockly.SNAP_RADIUS,
+                new goog.math.Coordinate(blockX, blockY));
+            if (neighbour.connection) {
+              collide = true;
+              break;
+            }
+          }
+        }
+        if (collide) {
+          if (this.RTL) {
+            blockX -= Blockly.SNAP_RADIUS;
+          } else {
+            blockX += Blockly.SNAP_RADIUS;
+          }
+          blockY += Blockly.SNAP_RADIUS * 2;
+        }
+      } while (collide);
+      block.moveBy(blockX, blockY);
+    }
+  } finally {
+    Blockly.Events.enable();
+  }
+  if (Blockly.Events.isEnabled() && !block.isShadow()) {
+    Blockly.Events.fire(new Blockly.Events.Create(block));
+  }
+  block.select();
+};
+
+/**
+ * Create a new variable with the given name.  Update the flyout to show the new
+ *     variable immediately.
+ * TODO: #468
+ * @param {string} name The new variable's name.
+ */
+Blockly.WorkspaceSvg.prototype.createVariable = function(name) {
+  Blockly.WorkspaceSvg.superClass_.createVariable.call(this, name);
+  if (this.toolbox_ && this.toolbox_.flyout_) {
+    this.toolbox_.refreshSelection();
+  }
+};
+
+/**
+ * Make a list of all the delete areas for this workspace.
+ */
+Blockly.WorkspaceSvg.prototype.recordDeleteAreas = function() {
+  if (this.trashcan) {
+    this.deleteAreaTrash_ = this.trashcan.getClientRect();
+  } else {
+    this.deleteAreaTrash_ = null;
+  }
+  if (this.flyout_) {
+    this.deleteAreaToolbox_ = this.flyout_.getClientRect();
+  } else if (this.toolbox_) {
+    this.deleteAreaToolbox_ = this.toolbox_.getClientRect();
+  } else {
+    this.deleteAreaToolbox_ = null;
+  }
+};
+
+/**
+ * Is the mouse event over a delete area (toolbox or non-closing flyout)?
+ * Opens or closes the trashcan and sets the cursor as a side effect.
+ * @param {!Event} e Mouse move event.
+ * @return {boolean} True if event is in a delete area.
+ */
+Blockly.WorkspaceSvg.prototype.isDeleteArea = function(e) {
+  var xy = new goog.math.Coordinate(e.clientX, e.clientY);
+  if (this.deleteAreaTrash_) {
+    if (this.deleteAreaTrash_.contains(xy)) {
+      this.trashcan.setOpen_(true);
+      Blockly.Css.setCursor(Blockly.Css.Cursor.DELETE);
+      return true;
+    }
+    this.trashcan.setOpen_(false);
+  }
+  if (this.deleteAreaToolbox_) {
+    if (this.deleteAreaToolbox_.contains(xy)) {
+      Blockly.Css.setCursor(Blockly.Css.Cursor.DELETE);
+      return true;
+    }
+  }
+  Blockly.Css.setCursor(Blockly.Css.Cursor.CLOSED);
+  return false;
+};
+
+/**
+ * Handle a mouse-down on SVG drawing surface.
+ * @param {!Event} e Mouse down event.
+ * @private
+ */
+Blockly.WorkspaceSvg.prototype.onMouseDown_ = function(e) {
+  this.markFocused();
+  if (Blockly.isTargetInput_(e)) {
+    return;
+  }
+  Blockly.terminateDrag_();  // In case mouse-up event was lost.
+  Blockly.hideChaff();
+  var isTargetWorkspace = e.target && e.target.nodeName &&
+      (e.target.nodeName.toLowerCase() == 'svg' ||
+       e.target == this.svgBackground_);
+  if (isTargetWorkspace && Blockly.selected && !this.options.readOnly) {
+    // Clicking on the document clears the selection.
+    Blockly.selected.unselect();
+  }
+  if (Blockly.isRightButton(e)) {
+    // Right-click.
+    this.showContextMenu_(e);
+  } else if (this.scrollbar) {
+    this.dragMode_ = Blockly.DRAG_BEGIN;
+    // Record the current mouse position.
+    this.startDragMouseX = e.clientX;
+    this.startDragMouseY = e.clientY;
+    this.startDragMetrics = this.getMetrics();
+    this.startScrollX = this.scrollX;
+    this.startScrollY = this.scrollY;
+
+    // If this is a touch event then bind to the mouseup so workspace drag mode
+    // is turned off and double move events are not performed on a block.
+    // See comment in inject.js Blockly.init_ as to why mouseup events are
+    // bound to the document instead of the SVG's surface.
+    if ('mouseup' in Blockly.bindEvent_.TOUCH_MAP) {
+      Blockly.onTouchUpWrapper_ = Blockly.onTouchUpWrapper_ || [];
+      Blockly.onTouchUpWrapper_ = Blockly.onTouchUpWrapper_.concat(
+          Blockly.bindEvent_(document, 'mouseup', null, Blockly.onMouseUp_));
+    }
+    Blockly.onMouseMoveWrapper_ = Blockly.onMouseMoveWrapper_ || [];
+    Blockly.onMouseMoveWrapper_ = Blockly.onMouseMoveWrapper_.concat(
+        Blockly.bindEvent_(document, 'mousemove', null, Blockly.onMouseMove_));
+  }
+  // This event has been handled.  No need to bubble up to the document.
+  e.stopPropagation();
+  e.preventDefault();
+};
+
+/**
+ * Start tracking a drag of an object on this workspace.
+ * @param {!Event} e Mouse down event.
+ * @param {!goog.math.Coordinate} xy Starting location of object.
+ */
+Blockly.WorkspaceSvg.prototype.startDrag = function(e, xy) {
+  // Record the starting offset between the bubble's location and the mouse.
+  var point = Blockly.mouseToSvg(e, this.getParentSvg(),
+      this.getInverseScreenCTM());
+  // Fix scale of mouse event.
+  point.x /= this.scale;
+  point.y /= this.scale;
+  this.dragDeltaXY_ = goog.math.Coordinate.difference(xy, point);
+};
+
+/**
+ * Track a drag of an object on this workspace.
+ * @param {!Event} e Mouse move event.
+ * @return {!goog.math.Coordinate} New location of object.
+ */
+Blockly.WorkspaceSvg.prototype.moveDrag = function(e) {
+  var point = Blockly.mouseToSvg(e, this.getParentSvg(),
+      this.getInverseScreenCTM());
+  // Fix scale of mouse event.
+  point.x /= this.scale;
+  point.y /= this.scale;
+  return goog.math.Coordinate.sum(this.dragDeltaXY_, point);
+};
+
+/**
+ * Is the user currently dragging a block or scrolling the flyout/workspace?
+ * @return {boolean} True if currently dragging or scrolling.
+ */
+Blockly.WorkspaceSvg.prototype.isDragging = function() {
+  return Blockly.dragMode_ == Blockly.DRAG_FREE ||
+      (Blockly.Flyout.startFlyout_ &&
+          Blockly.Flyout.startFlyout_.dragMode_ == Blockly.DRAG_FREE) ||
+      this.dragMode_ == Blockly.DRAG_FREE;
+};
+
+/**
+ * Handle a mouse-wheel on SVG drawing surface.
+ * @param {!Event} e Mouse wheel event.
+ * @private
+ */
+Blockly.WorkspaceSvg.prototype.onMouseWheel_ = function(e) {
+  // TODO: Remove terminateDrag and compensate for coordinate skew during zoom.
+  Blockly.terminateDrag_();
+  var delta = e.deltaY > 0 ? -1 : 1;
+  var position = Blockly.mouseToSvg(e, this.getParentSvg(),
+      this.getInverseScreenCTM());
+  this.zoom(position.x, position.y, delta);
+  e.preventDefault();
+};
+
+/**
+ * Calculate the bounding box for the blocks on the workspace.
+ *
+ * @return {Object} Contains the position and size of the bounding box
+ *   containing the blocks on the workspace.
+ */
+Blockly.WorkspaceSvg.prototype.getBlocksBoundingBox = function() {
+  var topBlocks = this.getTopBlocks(false);
+  // There are no blocks, return empty rectangle.
+  if (!topBlocks.length) {
+    return {x: 0, y: 0, width: 0, height: 0};
+  }
+
+  // Initialize boundary using the first block.
+  var boundary = topBlocks[0].getBoundingRectangle();
+
+  // Start at 1 since the 0th block was used for initialization
+  for (var i = 1; i < topBlocks.length; i++) {
+    var blockBoundary = topBlocks[i].getBoundingRectangle();
+    if (blockBoundary.topLeft.x < boundary.topLeft.x) {
+      boundary.topLeft.x = blockBoundary.topLeft.x;
+    }
+    if (blockBoundary.bottomRight.x > boundary.bottomRight.x) {
+      boundary.bottomRight.x = blockBoundary.bottomRight.x;
+    }
+    if (blockBoundary.topLeft.y < boundary.topLeft.y) {
+      boundary.topLeft.y = blockBoundary.topLeft.y;
+    }
+    if (blockBoundary.bottomRight.y > boundary.bottomRight.y) {
+      boundary.bottomRight.y = blockBoundary.bottomRight.y;
+    }
+  }
+  return {
+    x: boundary.topLeft.x,
+    y: boundary.topLeft.y,
+    width: boundary.bottomRight.x - boundary.topLeft.x,
+    height: boundary.bottomRight.y - boundary.topLeft.y
+  };
+};
+
+/**
+ * Clean up the workspace by ordering all the blocks in a column.
+ */
+Blockly.WorkspaceSvg.prototype.cleanUp = function() {
+  Blockly.Events.setGroup(true);
+  var topBlocks = this.getTopBlocks(true);
+  var cursorY = 0;
+  for (var i = 0, block; block = topBlocks[i]; i++) {
+    var xy = block.getRelativeToSurfaceXY();
+    block.moveBy(-xy.x, cursorY - xy.y);
+    block.snapToGrid();
+    cursorY = block.getRelativeToSurfaceXY().y +
+        block.getHeightWidth().height + Blockly.BlockSvg.MIN_BLOCK_Y;
+  }
+  Blockly.Events.setGroup(false);
+  // Fire an event to allow scrollbars to resize.
+  this.resizeContents();
+};
+
+/**
+ * Show the context menu for the workspace.
+ * @param {!Event} e Mouse event.
+ * @private
+ */
+Blockly.WorkspaceSvg.prototype.showContextMenu_ = function(e) {
+  if (this.options.readOnly || this.isFlyout) {
+    return;
+  }
+  var menuOptions = [];
+  var topBlocks = this.getTopBlocks(true);
+  var eventGroup = Blockly.genUid();
+
+  // Options to undo/redo previous action.
+  var undoOption = {};
+  undoOption.text = Blockly.Msg.UNDO;
+  undoOption.enabled = this.undoStack_.length > 0;
+  undoOption.callback = this.undo.bind(this, false);
+  menuOptions.push(undoOption);
+  var redoOption = {};
+  redoOption.text = Blockly.Msg.REDO;
+  redoOption.enabled = this.redoStack_.length > 0;
+  redoOption.callback = this.undo.bind(this, true);
+  menuOptions.push(redoOption);
+
+  // Option to clean up blocks.
+  if (this.scrollbar) {
+    var cleanOption = {};
+    cleanOption.text = Blockly.Msg.CLEAN_UP;
+    cleanOption.enabled = topBlocks.length > 1;
+    cleanOption.callback = this.cleanUp.bind(this);
+    menuOptions.push(cleanOption);
+  }
+
+  // Add a little animation to collapsing and expanding.
+  var DELAY = 10;
+  if (this.options.collapse) {
+    var hasCollapsedBlocks = false;
+    var hasExpandedBlocks = false;
+    for (var i = 0; i < topBlocks.length; i++) {
+      var block = topBlocks[i];
+      while (block) {
+        if (block.isCollapsed()) {
+          hasCollapsedBlocks = true;
+        } else {
+          hasExpandedBlocks = true;
+        }
+        block = block.getNextBlock();
+      }
+    }
+
+    /**
+     * Option to collapse or expand top blocks.
+     * @param {boolean} shouldCollapse Whether a block should collapse.
+     * @private
+     */
+    var toggleOption = function(shouldCollapse) {
+      var ms = 0;
+      for (var i = 0; i < topBlocks.length; i++) {
+        var block = topBlocks[i];
+        while (block) {
+          setTimeout(block.setCollapsed.bind(block, shouldCollapse), ms);
+          block = block.getNextBlock();
+          ms += DELAY;
+        }
+      }
+    };
+
+    // Option to collapse top blocks.
+    var collapseOption = {enabled: hasExpandedBlocks};
+    collapseOption.text = Blockly.Msg.COLLAPSE_ALL;
+    collapseOption.callback = function() {
+      toggleOption(true);
+    };
+    menuOptions.push(collapseOption);
+
+    // Option to expand top blocks.
+    var expandOption = {enabled: hasCollapsedBlocks};
+    expandOption.text = Blockly.Msg.EXPAND_ALL;
+    expandOption.callback = function() {
+      toggleOption(false);
+    };
+    menuOptions.push(expandOption);
+  }
+
+  // Option to delete all blocks.
+  // Count the number of blocks that are deletable.
+  var deleteList = [];
+  function addDeletableBlocks(block) {
+    if (block.isDeletable()) {
+      deleteList = deleteList.concat(block.getDescendants());
+    } else {
+      var children = block.getChildren();
+      for (var i = 0; i < children.length; i++) {
+        addDeletableBlocks(children[i]);
+      }
+    }
+  }
+  for (var i = 0; i < topBlocks.length; i++) {
+    addDeletableBlocks(topBlocks[i]);
+  }
+
+  function deleteNext() {
+    Blockly.Events.setGroup(eventGroup);
+    var block = deleteList.shift();
+    if (block) {
+      if (block.workspace) {
+        block.dispose(false, true);
+        setTimeout(deleteNext, DELAY);
+      } else {
+        deleteNext();
+      }
+    }
+    Blockly.Events.setGroup(false);
+  }
+
+  var deleteOption = {
+    text: deleteList.length == 1 ? Blockly.Msg.DELETE_BLOCK :
+        Blockly.Msg.DELETE_X_BLOCKS.replace('%1', String(deleteList.length)),
+    enabled: deleteList.length > 0,
+    callback: function() {
+      if (deleteList.length < 2 ||
+          window.confirm(Blockly.Msg.DELETE_ALL_BLOCKS.replace('%1',
+          String(deleteList.length)))) {
+        deleteNext();
+      }
+    }
+  };
+  menuOptions.push(deleteOption);
+
+  Blockly.ContextMenu.show(e, menuOptions, this.RTL);
+};
+
+/**
+ * Load an audio file.  Cache it, ready for instantaneous playing.
+ * @param {!Array.<string>} filenames List of file types in decreasing order of
+ *   preference (i.e. increasing size).  E.g. ['media/go.mp3', 'media/go.wav']
+ *   Filenames include path from Blockly's root.  File extensions matter.
+ * @param {string} name Name of sound.
+ * @private
+ */
+Blockly.WorkspaceSvg.prototype.loadAudio_ = function(filenames, name) {
+  if (!filenames.length) {
+    return;
+  }
+  try {
+    var audioTest = new window['Audio']();
+  } catch (e) {
+    // No browser support for Audio.
+    // IE can throw an error even if the Audio object exists.
+    return;
+  }
+  var sound;
+  for (var i = 0; i < filenames.length; i++) {
+    var filename = filenames[i];
+    var ext = filename.match(/\.(\w+)$/);
+    if (ext && audioTest.canPlayType('audio/' + ext[1])) {
+      // Found an audio format we can play.
+      sound = new window['Audio'](filename);
+      break;
+    }
+  }
+  if (sound && sound.play) {
+    this.SOUNDS_[name] = sound;
+  }
+};
+
+/**
+ * Preload all the audio files so that they play quickly when asked for.
+ * @private
+ */
+Blockly.WorkspaceSvg.prototype.preloadAudio_ = function() {
+  for (var name in this.SOUNDS_) {
+    var sound = this.SOUNDS_[name];
+    sound.volume = .01;
+    sound.play();
+    sound.pause();
+    // iOS can only process one sound at a time.  Trying to load more than one
+    // corrupts the earlier ones.  Just load one and leave the others uncached.
+    if (goog.userAgent.IPAD || goog.userAgent.IPHONE) {
+      break;
+    }
+  }
+};
+
+/**
+ * Play a named sound at specified volume.  If volume is not specified,
+ * use full volume (1).
+ * @param {string} name Name of sound.
+ * @param {number=} opt_volume Volume of sound (0-1).
+ */
+Blockly.WorkspaceSvg.prototype.playAudio = function(name, opt_volume) {
+  var sound = this.SOUNDS_[name];
+  if (sound) {
+    // Don't play one sound on top of another.
+    var now = new Date;
+    if (now - this.lastSound_ < Blockly.SOUND_LIMIT) {
+      return;
+    }
+    this.lastSound_ = now;
+    var mySound;
+    var ie9 = goog.userAgent.DOCUMENT_MODE &&
+              goog.userAgent.DOCUMENT_MODE === 9;
+    if (ie9 || goog.userAgent.IPAD || goog.userAgent.ANDROID) {
+      // Creating a new audio node causes lag in IE9, Android and iPad. Android
+      // and IE9 refetch the file from the server, iPad uses a singleton audio
+      // node which must be deleted and recreated for each new audio tag.
+      mySound = sound;
+    } else {
+      mySound = sound.cloneNode();
+    }
+    mySound.volume = (opt_volume === undefined ? 1 : opt_volume);
+    mySound.play();
+  } else if (this.options.parentWorkspace) {
+    // Maybe a workspace on a lower level knows about this sound.
+    this.options.parentWorkspace.playAudio(name, opt_volume);
+  }
+};
+
+/**
+ * Modify the block tree on the existing toolbox.
+ * @param {Node|string} tree DOM tree of blocks, or text representation of same.
+ */
+Blockly.WorkspaceSvg.prototype.updateToolbox = function(tree) {
+  tree = Blockly.Options.parseToolboxTree(tree);
+  if (!tree) {
+    if (this.options.languageTree) {
+      throw 'Can\'t nullify an existing toolbox.';
+    }
+    return;  // No change (null to null).
+  }
+  if (!this.options.languageTree) {
+    throw 'Existing toolbox is null.  Can\'t create new toolbox.';
+  }
+  if (tree.getElementsByTagName('category').length) {
+    if (!this.toolbox_) {
+      throw 'Existing toolbox has no categories.  Can\'t change mode.';
+    }
+    this.options.languageTree = tree;
+    this.toolbox_.populate_(tree);
+    this.toolbox_.addColour_();
+  } else {
+    if (!this.flyout_) {
+      throw 'Existing toolbox has categories.  Can\'t change mode.';
+    }
+    this.options.languageTree = tree;
+    this.flyout_.show(tree.childNodes);
+  }
+};
+
+/**
+ * Mark this workspace as the currently focused main workspace.
+ */
+Blockly.WorkspaceSvg.prototype.markFocused = function() {
+  if (this.options.parentWorkspace) {
+    this.options.parentWorkspace.markFocused();
+  } else {
+    Blockly.mainWorkspace = this;
+  }
+};
+
+/**
+ * Zooming the blocks centered in (x, y) coordinate with zooming in or out.
+ * @param {number} x X coordinate of center.
+ * @param {number} y Y coordinate of center.
+ * @param {number} type Type of zooming (-1 zooming out and 1 zooming in).
+ */
+Blockly.WorkspaceSvg.prototype.zoom = function(x, y, type) {
+  var speed = this.options.zoomOptions.scaleSpeed;
+  var metrics = this.getMetrics();
+  var center = this.getParentSvg().createSVGPoint();
+  center.x = x;
+  center.y = y;
+  center = center.matrixTransform(this.getCanvas().getCTM().inverse());
+  x = center.x;
+  y = center.y;
+  var canvas = this.getCanvas();
+  // Scale factor.
+  var scaleChange = (type == 1) ? speed : 1 / speed;
+  // Clamp scale within valid range.
+  var newScale = this.scale * scaleChange;
+  if (newScale > this.options.zoomOptions.maxScale) {
+    scaleChange = this.options.zoomOptions.maxScale / this.scale;
+  } else if (newScale < this.options.zoomOptions.minScale) {
+    scaleChange = this.options.zoomOptions.minScale / this.scale;
+  }
+  if (this.scale == newScale) {
+    return;  // No change in zoom.
+  }
+  if (this.scrollbar) {
+    var matrix = canvas.getCTM()
+        .translate(x * (1 - scaleChange), y * (1 - scaleChange))
+        .scale(scaleChange);
+    // newScale and matrix.a should be identical (within a rounding error).
+    this.scrollX = matrix.e - metrics.absoluteLeft;
+    this.scrollY = matrix.f - metrics.absoluteTop;
+  }
+  this.setScale(newScale);
+};
+
+/**
+ * Zooming the blocks centered in the center of view with zooming in or out.
+ * @param {number} type Type of zooming (-1 zooming out and 1 zooming in).
+ */
+Blockly.WorkspaceSvg.prototype.zoomCenter = function(type) {
+  var metrics = this.getMetrics();
+  var x = metrics.viewWidth / 2;
+  var y = metrics.viewHeight / 2;
+  this.zoom(x, y, type);
+};
+
+/**
+ * Zoom the blocks to fit in the workspace if possible.
+ */
+Blockly.WorkspaceSvg.prototype.zoomToFit = function() {
+  var metrics = this.getMetrics();
+  var blocksBox = this.getBlocksBoundingBox();
+  var blocksWidth = blocksBox.width;
+  var blocksHeight = blocksBox.height;
+  if (!blocksWidth) {
+    return;  // Prevents zooming to infinity.
+  }
+  var workspaceWidth = metrics.viewWidth;
+  var workspaceHeight = metrics.viewHeight;
+  if (this.flyout_) {
+    workspaceWidth -= this.flyout_.width_;
+  }
+  if (!this.scrollbar) {
+    // Orgin point of 0,0 is fixed, blocks will not scroll to center.
+    blocksWidth += metrics.contentLeft;
+    blocksHeight += metrics.contentTop;
+  }
+  var ratioX = workspaceWidth / blocksWidth;
+  var ratioY = workspaceHeight / blocksHeight;
+  this.setScale(Math.min(ratioX, ratioY));
+  this.scrollCenter();
+};
+
+/**
+ * Center the workspace.
+ */
+Blockly.WorkspaceSvg.prototype.scrollCenter = function() {
+  if (!this.scrollbar) {
+    // Can't center a non-scrolling workspace.
+    return;
+  }
+  var metrics = this.getMetrics();
+  var x = (metrics.contentWidth - metrics.viewWidth) / 2;
+  if (this.flyout_) {
+    x -= this.flyout_.width_ / 2;
+  }
+  var y = (metrics.contentHeight - metrics.viewHeight) / 2;
+  this.scrollbar.set(x, y);
+};
+
+/**
+ * Set the workspace's zoom factor.
+ * @param {number} newScale Zoom factor.
+ */
+Blockly.WorkspaceSvg.prototype.setScale = function(newScale) {
+  if (this.options.zoomOptions.maxScale &&
+      newScale > this.options.zoomOptions.maxScale) {
+    newScale = this.options.zoomOptions.maxScale;
+  } else if (this.options.zoomOptions.minScale &&
+      newScale < this.options.zoomOptions.minScale) {
+    newScale = this.options.zoomOptions.minScale;
+  }
+  this.scale = newScale;
+  this.updateGridPattern_();
+  if (this.scrollbar) {
+    this.scrollbar.resize();
+  } else {
+    this.translate(this.scrollX, this.scrollY);
+  }
+  Blockly.hideChaff(false);
+  if (this.flyout_) {
+    // No toolbox, resize flyout.
+    this.flyout_.reflow();
+  }
+};
+
+/**
+ * Updates the grid pattern.
+ * @private
+ */
+Blockly.WorkspaceSvg.prototype.updateGridPattern_ = function() {
+  if (!this.options.gridPattern) {
+    return;  // No grid.
+  }
+  // MSIE freaks if it sees a 0x0 pattern, so set empty patterns to 100x100.
+  var safeSpacing = (this.options.gridOptions['spacing'] * this.scale) || 100;
+  this.options.gridPattern.setAttribute('width', safeSpacing);
+  this.options.gridPattern.setAttribute('height', safeSpacing);
+  var half = Math.floor(this.options.gridOptions['spacing'] / 2) + 0.5;
+  var start = half - this.options.gridOptions['length'] / 2;
+  var end = half + this.options.gridOptions['length'] / 2;
+  var line1 = this.options.gridPattern.firstChild;
+  var line2 = line1 && line1.nextSibling;
+  half *= this.scale;
+  start *= this.scale;
+  end *= this.scale;
+  if (line1) {
+    line1.setAttribute('stroke-width', this.scale);
+    line1.setAttribute('x1', start);
+    line1.setAttribute('y1', half);
+    line1.setAttribute('x2', end);
+    line1.setAttribute('y2', half);
+  }
+  if (line2) {
+    line2.setAttribute('stroke-width', this.scale);
+    line2.setAttribute('x1', half);
+    line2.setAttribute('y1', start);
+    line2.setAttribute('x2', half);
+    line2.setAttribute('y2', end);
+  }
+};
+
+
+/**
+ * Return an object with all the metrics required to size scrollbars for a
+ * top level workspace.  The following properties are computed:
+ * .viewHeight: Height of the visible rectangle,
+ * .viewWidth: Width of the visible rectangle,
+ * .contentHeight: Height of the contents,
+ * .contentWidth: Width of the content,
+ * .viewTop: Offset of top edge of visible rectangle from parent,
+ * .viewLeft: Offset of left edge of visible rectangle from parent,
+ * .contentTop: Offset of the top-most content from the y=0 coordinate,
+ * .contentLeft: Offset of the left-most content from the x=0 coordinate.
+ * .absoluteTop: Top-edge of view.
+ * .absoluteLeft: Left-edge of view.
+ * .toolboxWidth: Width of toolbox, if it exists.  Otherwise zero.
+ * .toolboxHeight: Height of toolbox, if it exists.  Otherwise zero.
+ * .flyoutWidth: Width of the flyout if it is always open.  Otherwise zero.
+ * .flyoutHeight: Height of flyout if it is always open.  Otherwise zero.
+ * .toolboxPosition: Top, bottom, left or right.
+ * @return {Object} Contains size and position metrics of a top level workspace.
+ * @private
+ */
+Blockly.WorkspaceSvg.getTopLevelWorkspaceMetrics_ = function() {
+  var svgSize = Blockly.svgSize(this.getParentSvg());
+  if (this.toolbox_) {
+    if (this.toolboxPosition == Blockly.TOOLBOX_AT_TOP ||
+        this.toolboxPosition == Blockly.TOOLBOX_AT_BOTTOM) {
+      svgSize.height -= this.toolbox_.getHeight();
+    } else if (this.toolboxPosition == Blockly.TOOLBOX_AT_LEFT ||
+        this.toolboxPosition == Blockly.TOOLBOX_AT_RIGHT) {
+      svgSize.width -= this.toolbox_.getWidth();
+    }
+  }
+  // Set the margin to match the flyout's margin so that the workspace does
+  // not jump as blocks are added.
+  var MARGIN = Blockly.Flyout.prototype.CORNER_RADIUS - 1;
+  var viewWidth = svgSize.width - MARGIN;
+  var viewHeight = svgSize.height - MARGIN;
+  var blockBox = this.getBlocksBoundingBox();
+
+  // Fix scale.
+  var contentWidth = blockBox.width * this.scale;
+  var contentHeight = blockBox.height * this.scale;
+  var contentX = blockBox.x * this.scale;
+  var contentY = blockBox.y * this.scale;
+  if (this.scrollbar) {
+    // Add a border around the content that is at least half a screenful wide.
+    // Ensure border is wide enough that blocks can scroll over entire screen.
+    var leftEdge = Math.min(contentX - viewWidth / 2,
+                            contentX + contentWidth - viewWidth);
+    var rightEdge = Math.max(contentX + contentWidth + viewWidth / 2,
+                             contentX + viewWidth);
+    var topEdge = Math.min(contentY - viewHeight / 2,
+                           contentY + contentHeight - viewHeight);
+    var bottomEdge = Math.max(contentY + contentHeight + viewHeight / 2,
+                              contentY + viewHeight);
+  } else {
+    var leftEdge = blockBox.x;
+    var rightEdge = leftEdge + blockBox.width;
+    var topEdge = blockBox.y;
+    var bottomEdge = topEdge + blockBox.height;
+  }
+  var absoluteLeft = 0;
+  if (this.toolbox_ && this.toolboxPosition == Blockly.TOOLBOX_AT_LEFT) {
+    absoluteLeft = this.toolbox_.getWidth();
+  }
+  var absoluteTop = 0;
+  if (this.toolbox_ && this.toolboxPosition == Blockly.TOOLBOX_AT_TOP) {
+    absoluteTop = this.toolbox_.getHeight();
+  }
+
+  var metrics = {
+    viewHeight: svgSize.height,
+    viewWidth: svgSize.width,
+    contentHeight: bottomEdge - topEdge,
+    contentWidth: rightEdge - leftEdge,
+    viewTop: -this.scrollY,
+    viewLeft: -this.scrollX,
+    contentTop: topEdge,
+    contentLeft: leftEdge,
+    absoluteTop: absoluteTop,
+    absoluteLeft: absoluteLeft,
+    toolboxWidth: this.toolbox_ ? this.toolbox_.getWidth() : 0,
+    toolboxHeight: this.toolbox_ ? this.toolbox_.getHeight() : 0,
+    flyoutWidth: this.flyout_ ? this.flyout_.getWidth() : 0,
+    flyoutHeight: this.flyout_ ? this.flyout_.getHeight() : 0,
+    toolboxPosition: this.toolboxPosition
+  };
+  return metrics;
+};
+
+/**
+ * Sets the X/Y translations of a top level workspace to match the scrollbars.
+ * @param {!Object} xyRatio Contains an x and/or y property which is a float
+ *     between 0 and 1 specifying the degree of scrolling.
+ * @private
+ */
+Blockly.WorkspaceSvg.setTopLevelWorkspaceMetrics_ = function(xyRatio) {
+  if (!this.scrollbar) {
+    throw 'Attempt to set top level workspace scroll without scrollbars.';
+  }
+  var metrics = this.getMetrics();
+  if (goog.isNumber(xyRatio.x)) {
+    this.scrollX = -metrics.contentWidth * xyRatio.x - metrics.contentLeft;
+  }
+  if (goog.isNumber(xyRatio.y)) {
+    this.scrollY = -metrics.contentHeight * xyRatio.y - metrics.contentTop;
+  }
+  var x = this.scrollX + metrics.absoluteLeft;
+  var y = this.scrollY + metrics.absoluteTop;
+  this.translate(x, y);
+  if (this.options.gridPattern) {
+    this.options.gridPattern.setAttribute('x', x);
+    this.options.gridPattern.setAttribute('y', y);
+    if (goog.userAgent.IE) {
+      // IE doesn't notice that the x/y offsets have changed.  Force an update.
+      this.updateGridPattern_();
+    }
+  }
+};
+// Export symbols that would otherwise be renamed by Closure compiler.
+Blockly.WorkspaceSvg.prototype['setVisible'] =
+    Blockly.WorkspaceSvg.prototype.setVisible;
diff --git a/blockly/core/xml.js b/blockly/core/xml.js
new file mode 100644
index 0000000..2567560
--- /dev/null
+++ b/blockly/core/xml.js
@@ -0,0 +1,566 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2012 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview XML reader and writer.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.Xml');
+
+goog.require('goog.asserts');
+goog.require('goog.dom');
+
+
+/**
+ * Encode a block tree as XML.
+ * @param {!Blockly.Workspace} workspace The workspace containing blocks.
+ * @return {!Element} XML document.
+ */
+Blockly.Xml.workspaceToDom = function(workspace) {
+  var xml = goog.dom.createDom('xml');
+  var blocks = workspace.getTopBlocks(true);
+  for (var i = 0, block; block = blocks[i]; i++) {
+    xml.appendChild(Blockly.Xml.blockToDomWithXY(block));
+  }
+  return xml;
+};
+
+/**
+ * Encode a block subtree as XML with XY coordinates.
+ * @param {!Blockly.Block} block The root block to encode.
+ * @return {!Element} Tree of XML elements.
+ */
+Blockly.Xml.blockToDomWithXY = function(block) {
+  var width;  // Not used in LTR.
+  if (block.workspace.RTL) {
+    width = block.workspace.getWidth();
+  }
+  var element = Blockly.Xml.blockToDom(block);
+  var xy = block.getRelativeToSurfaceXY();
+  element.setAttribute('x',
+      Math.round(block.workspace.RTL ? width - xy.x : xy.x));
+  element.setAttribute('y', Math.round(xy.y));
+  return element;
+};
+
+/**
+ * Encode a block subtree as XML.
+ * @param {!Blockly.Block} block The root block to encode.
+ * @return {!Element} Tree of XML elements.
+ */
+Blockly.Xml.blockToDom = function(block) {
+  var element = goog.dom.createDom(block.isShadow() ? 'shadow' : 'block');
+  element.setAttribute('type', block.type);
+  element.setAttribute('id', block.id);
+  if (block.mutationToDom) {
+    // Custom data for an advanced block.
+    var mutation = block.mutationToDom();
+    if (mutation && (mutation.hasChildNodes() || mutation.hasAttributes())) {
+      element.appendChild(mutation);
+    }
+  }
+  function fieldToDom(field) {
+    if (field.name && field.EDITABLE) {
+      var container = goog.dom.createDom('field', null, field.getValue());
+      container.setAttribute('name', field.name);
+      element.appendChild(container);
+    }
+  }
+  for (var i = 0, input; input = block.inputList[i]; i++) {
+    for (var j = 0, field; field = input.fieldRow[j]; j++) {
+      fieldToDom(field);
+    }
+  }
+
+  var commentText = block.getCommentText();
+  if (commentText) {
+    var commentElement = goog.dom.createDom('comment', null, commentText);
+    if (typeof block.comment == 'object') {
+      commentElement.setAttribute('pinned', block.comment.isVisible());
+      var hw = block.comment.getBubbleSize();
+      commentElement.setAttribute('h', hw.height);
+      commentElement.setAttribute('w', hw.width);
+    }
+    element.appendChild(commentElement);
+  }
+
+  if (block.data) {
+    var dataElement = goog.dom.createDom('data', null, block.data);
+    element.appendChild(dataElement);
+  }
+
+  for (var i = 0, input; input = block.inputList[i]; i++) {
+    var container;
+    var empty = true;
+    if (input.type == Blockly.DUMMY_INPUT) {
+      continue;
+    } else {
+      var childBlock = input.connection.targetBlock();
+      if (input.type == Blockly.INPUT_VALUE) {
+        container = goog.dom.createDom('value');
+      } else if (input.type == Blockly.NEXT_STATEMENT) {
+        container = goog.dom.createDom('statement');
+      }
+      var shadow = input.connection.getShadowDom();
+      if (shadow && (!childBlock || !childBlock.isShadow())) {
+        container.appendChild(Blockly.Xml.cloneShadow_(shadow));
+      }
+      if (childBlock) {
+        container.appendChild(Blockly.Xml.blockToDom(childBlock));
+        empty = false;
+      }
+    }
+    container.setAttribute('name', input.name);
+    if (!empty) {
+      element.appendChild(container);
+    }
+  }
+  if (block.inputsInlineDefault != block.inputsInline) {
+    element.setAttribute('inline', block.inputsInline);
+  }
+  if (block.isCollapsed()) {
+    element.setAttribute('collapsed', true);
+  }
+  if (block.disabled) {
+    element.setAttribute('disabled', true);
+  }
+  if (!block.isDeletable() && !block.isShadow()) {
+    element.setAttribute('deletable', false);
+  }
+  if (!block.isMovable() && !block.isShadow()) {
+    element.setAttribute('movable', false);
+  }
+  if (!block.isEditable()) {
+    element.setAttribute('editable', false);
+  }
+
+  var nextBlock = block.getNextBlock();
+  if (nextBlock) {
+    var container = goog.dom.createDom('next', null,
+        Blockly.Xml.blockToDom(nextBlock));
+    element.appendChild(container);
+  }
+  var shadow = block.nextConnection && block.nextConnection.getShadowDom();
+  if (shadow && (!nextBlock || !nextBlock.isShadow())) {
+    container.appendChild(Blockly.Xml.cloneShadow_(shadow));
+  }
+
+  return element;
+};
+
+/**
+ * Deeply clone the shadow's DOM so that changes don't back-wash to the block.
+ * @param {!Element} shadow A tree of XML elements.
+ * @return {!Element} A tree of XML elements.
+ * @private
+ */
+Blockly.Xml.cloneShadow_ = function(shadow) {
+  shadow = shadow.cloneNode(true);
+  // Walk the tree looking for whitespace.  Don't prune whitespace in a tag.
+  var node = shadow;
+  var textNode;
+  while (node) {
+    if (node.firstChild) {
+      node = node.firstChild;
+    } else {
+      while (node && !node.nextSibling) {
+        textNode = node;
+        node = node.parentNode;
+        if (textNode.nodeType == 3 && textNode.data.trim() == '' &&
+            node.firstChild != textNode) {
+          // Prune whitespace after a tag.
+          goog.dom.removeNode(textNode);
+        }
+      }
+      if (node) {
+        textNode = node;
+        node = node.nextSibling;
+        if (textNode.nodeType == 3 && textNode.data.trim() == '') {
+          // Prune whitespace before a tag.
+          goog.dom.removeNode(textNode);
+        }
+      }
+    }
+  }
+  return shadow;
+};
+
+/**
+ * Converts a DOM structure into plain text.
+ * Currently the text format is fairly ugly: all one line with no whitespace.
+ * @param {!Element} dom A tree of XML elements.
+ * @return {string} Text representation.
+ */
+Blockly.Xml.domToText = function(dom) {
+  var oSerializer = new XMLSerializer();
+  return oSerializer.serializeToString(dom);
+};
+
+/**
+ * Converts a DOM structure into properly indented text.
+ * @param {!Element} dom A tree of XML elements.
+ * @return {string} Text representation.
+ */
+Blockly.Xml.domToPrettyText = function(dom) {
+  // This function is not guaranteed to be correct for all XML.
+  // But it handles the XML that Blockly generates.
+  var blob = Blockly.Xml.domToText(dom);
+  // Place every open and close tag on its own line.
+  var lines = blob.split('<');
+  // Indent every line.
+  var indent = '';
+  for (var i = 1; i < lines.length; i++) {
+    var line = lines[i];
+    if (line[0] == '/') {
+      indent = indent.substring(2);
+    }
+    lines[i] = indent + '<' + line;
+    if (line[0] != '/' && line.slice(-2) != '/>') {
+      indent += '  ';
+    }
+  }
+  // Pull simple tags back together.
+  // E.g. <foo></foo>
+  var text = lines.join('\n');
+  text = text.replace(/(<(\w+)\b[^>]*>[^\n]*)\n *<\/\2>/g, '$1</$2>');
+  // Trim leading blank line.
+  return text.replace(/^\n/, '');
+};
+
+/**
+ * Converts plain text into a DOM structure.
+ * Throws an error if XML doesn't parse.
+ * @param {string} text Text representation.
+ * @return {!Element} A tree of XML elements.
+ */
+Blockly.Xml.textToDom = function(text) {
+  var oParser = new DOMParser();
+  var dom = oParser.parseFromString(text, 'text/xml');
+  // The DOM should have one and only one top-level node, an XML tag.
+  if (!dom || !dom.firstChild ||
+      dom.firstChild.nodeName.toLowerCase() != 'xml' ||
+      dom.firstChild !== dom.lastChild) {
+    // Whatever we got back from the parser is not XML.
+    goog.asserts.fail('Blockly.Xml.textToDom did not obtain a valid XML tree.');
+  }
+  return dom.firstChild;
+};
+
+/**
+ * Decode an XML DOM and create blocks on the workspace.
+ * @param {!Element} xml XML DOM.
+ * @param {!Blockly.Workspace} workspace The workspace.
+ */
+Blockly.Xml.domToWorkspace = function(xml, workspace) {
+  if (xml instanceof Blockly.Workspace) {
+    var swap = xml;
+    xml = workspace;
+    workspace = swap;
+    console.warn('Deprecated call to Blockly.Xml.domToWorkspace, ' +
+                 'swap the arguments.');
+  }
+  var width;  // Not used in LTR.
+  if (workspace.RTL) {
+    width = workspace.getWidth();
+  }
+  Blockly.Field.startCache();
+  // Safari 7.1.3 is known to provide node lists with extra references to
+  // children beyond the lists' length.  Trust the length, do not use the
+  // looping pattern of checking the index for an object.
+  var childCount = xml.childNodes.length;
+  var existingGroup = Blockly.Events.getGroup();
+  if (!existingGroup) {
+    Blockly.Events.setGroup(true);
+  }
+  for (var i = 0; i < childCount; i++) {
+    var xmlChild = xml.childNodes[i];
+    var name = xmlChild.nodeName.toLowerCase();
+    if (name == 'block' ||
+        (name == 'shadow' && !Blockly.Events.recordUndo)) {
+      // Allow top-level shadow blocks if recordUndo is disabled since
+      // that means an undo is in progress.  Such a block is expected
+      // to be moved to a nested destination in the next operation.
+      var block = Blockly.Xml.domToBlock(xmlChild, workspace);
+      var blockX = parseInt(xmlChild.getAttribute('x'), 10);
+      var blockY = parseInt(xmlChild.getAttribute('y'), 10);
+      if (!isNaN(blockX) && !isNaN(blockY)) {
+        block.moveBy(workspace.RTL ? width - blockX : blockX, blockY);
+      }
+    } else if (name == 'shadow') {
+      goog.asserts.fail('Shadow block cannot be a top-level block.');
+    }
+  }
+  if (!existingGroup) {
+    Blockly.Events.setGroup(false);
+  }
+  Blockly.Field.stopCache();
+
+  workspace.updateVariableList(false);
+};
+
+/**
+ * Decode an XML block tag and create a block (and possibly sub blocks) on the
+ * workspace.
+ * @param {!Element} xmlBlock XML block element.
+ * @param {!Blockly.Workspace} workspace The workspace.
+ * @return {!Blockly.Block} The root block created.
+ */
+Blockly.Xml.domToBlock = function(xmlBlock, workspace) {
+  if (xmlBlock instanceof Blockly.Workspace) {
+    var swap = xmlBlock;
+    xmlBlock = workspace;
+    workspace = swap;
+    console.warn('Deprecated call to Blockly.Xml.domToBlock, ' +
+                 'swap the arguments.');
+  }
+  // Create top-level block.
+  Blockly.Events.disable();
+  try {
+    var topBlock = Blockly.Xml.domToBlockHeadless_(xmlBlock, workspace);
+    if (workspace.rendered) {
+      // Hide connections to speed up assembly.
+      topBlock.setConnectionsHidden(true);
+      // Generate list of all blocks.
+      var blocks = topBlock.getDescendants();
+      // Render each block.
+      for (var i = blocks.length - 1; i >= 0; i--) {
+        blocks[i].initSvg();
+      }
+      for (var i = blocks.length - 1; i >= 0; i--) {
+        blocks[i].render(false);
+      }
+      // Populating the connection database may be defered until after the
+      // blocks have rendered.
+      setTimeout(function() {
+        if (topBlock.workspace) {  // Check that the block hasn't been deleted.
+          topBlock.setConnectionsHidden(false);
+        }
+      }, 1);
+      topBlock.updateDisabled();
+      // Allow the scrollbars to resize and move based on the new contents.
+      // TODO(@picklesrus): #387. Remove when domToBlock avoids resizing.
+      workspace.resizeContents();
+    }
+  } finally {
+    Blockly.Events.enable();
+  }
+  if (Blockly.Events.isEnabled()) {
+    Blockly.Events.fire(new Blockly.Events.Create(topBlock));
+  }
+  return topBlock;
+};
+
+/**
+ * Decode an XML block tag and create a block (and possibly sub blocks) on the
+ * workspace.
+ * @param {!Element} xmlBlock XML block element.
+ * @param {!Blockly.Workspace} workspace The workspace.
+ * @return {!Blockly.Block} The root block created.
+ * @private
+ */
+Blockly.Xml.domToBlockHeadless_ = function(xmlBlock, workspace) {
+  var block = null;
+  var prototypeName = xmlBlock.getAttribute('type');
+  goog.asserts.assert(prototypeName, 'Block type unspecified: %s',
+                      xmlBlock.outerHTML);
+  var id = xmlBlock.getAttribute('id');
+  block = workspace.newBlock(prototypeName, id);
+
+  var blockChild = null;
+  for (var i = 0, xmlChild; xmlChild = xmlBlock.childNodes[i]; i++) {
+    if (xmlChild.nodeType == 3) {
+      // Ignore any text at the <block> level.  It's all whitespace anyway.
+      continue;
+    }
+    var input;
+
+    // Find any enclosed blocks or shadows in this tag.
+    var childBlockNode = null;
+    var childShadowNode = null;
+    for (var j = 0, grandchildNode; grandchildNode = xmlChild.childNodes[j];
+         j++) {
+      if (grandchildNode.nodeType == 1) {
+        if (grandchildNode.nodeName.toLowerCase() == 'block') {
+          childBlockNode = grandchildNode;
+        } else if (grandchildNode.nodeName.toLowerCase() == 'shadow') {
+          childShadowNode = grandchildNode;
+        }
+      }
+    }
+    // Use the shadow block if there is no child block.
+    if (!childBlockNode && childShadowNode) {
+      childBlockNode = childShadowNode;
+    }
+
+    var name = xmlChild.getAttribute('name');
+    switch (xmlChild.nodeName.toLowerCase()) {
+      case 'mutation':
+        // Custom data for an advanced block.
+        if (block.domToMutation) {
+          block.domToMutation(xmlChild);
+          if (block.initSvg) {
+            // Mutation may have added some elements that need initalizing.
+            block.initSvg();
+          }
+        }
+        break;
+      case 'comment':
+        block.setCommentText(xmlChild.textContent);
+        var visible = xmlChild.getAttribute('pinned');
+        if (visible && !block.isInFlyout) {
+          // Give the renderer a millisecond to render and position the block
+          // before positioning the comment bubble.
+          setTimeout(function() {
+            if (block.comment && block.comment.setVisible) {
+              block.comment.setVisible(visible == 'true');
+            }
+          }, 1);
+        }
+        var bubbleW = parseInt(xmlChild.getAttribute('w'), 10);
+        var bubbleH = parseInt(xmlChild.getAttribute('h'), 10);
+        if (!isNaN(bubbleW) && !isNaN(bubbleH) &&
+            block.comment && block.comment.setVisible) {
+          block.comment.setBubbleSize(bubbleW, bubbleH);
+        }
+        break;
+      case 'data':
+        block.data = xmlChild.textContent;
+        break;
+      case 'title':
+        // Titles were renamed to field in December 2013.
+        // Fall through.
+      case 'field':
+        var field = block.getField(name);
+        if (!field) {
+          console.warn('Ignoring non-existent field ' + name + ' in block ' +
+                       prototypeName);
+          break;
+        }
+        field.setValue(xmlChild.textContent);
+        break;
+      case 'value':
+      case 'statement':
+        input = block.getInput(name);
+        if (!input) {
+          console.warn('Ignoring non-existent input ' + name + ' in block ' +
+                       prototypeName);
+          break;
+        }
+        if (childShadowNode) {
+          input.connection.setShadowDom(childShadowNode);
+        }
+        if (childBlockNode) {
+          blockChild = Blockly.Xml.domToBlockHeadless_(childBlockNode,
+              workspace);
+          if (blockChild.outputConnection) {
+            input.connection.connect(blockChild.outputConnection);
+          } else if (blockChild.previousConnection) {
+            input.connection.connect(blockChild.previousConnection);
+          } else {
+            goog.asserts.fail(
+                'Child block does not have output or previous statement.');
+          }
+        }
+        break;
+      case 'next':
+        if (childShadowNode && block.nextConnection) {
+          block.nextConnection.setShadowDom(childShadowNode);
+        }
+        if (childBlockNode) {
+          goog.asserts.assert(block.nextConnection,
+              'Next statement does not exist.');
+          // If there is more than one XML 'next' tag.
+          goog.asserts.assert(!block.nextConnection.isConnected(),
+              'Next statement is already connected.');
+          blockChild = Blockly.Xml.domToBlockHeadless_(childBlockNode,
+              workspace);
+          goog.asserts.assert(blockChild.previousConnection,
+              'Next block does not have previous statement.');
+          block.nextConnection.connect(blockChild.previousConnection);
+        }
+        break;
+      default:
+        // Unknown tag; ignore.  Same principle as HTML parsers.
+        console.warn('Ignoring unknown tag: ' + xmlChild.nodeName);
+    }
+  }
+
+  var inline = xmlBlock.getAttribute('inline');
+  if (inline) {
+    block.setInputsInline(inline == 'true');
+  }
+  var disabled = xmlBlock.getAttribute('disabled');
+  if (disabled) {
+    block.setDisabled(disabled == 'true');
+  }
+  var deletable = xmlBlock.getAttribute('deletable');
+  if (deletable) {
+    block.setDeletable(deletable == 'true');
+  }
+  var movable = xmlBlock.getAttribute('movable');
+  if (movable) {
+    block.setMovable(movable == 'true');
+  }
+  var editable = xmlBlock.getAttribute('editable');
+  if (editable) {
+    block.setEditable(editable == 'true');
+  }
+  var collapsed = xmlBlock.getAttribute('collapsed');
+  if (collapsed) {
+    block.setCollapsed(collapsed == 'true');
+  }
+  if (xmlBlock.nodeName.toLowerCase() == 'shadow') {
+    // Ensure all children are also shadows.
+    var children = block.getChildren();
+    for (var i = 0, child; child = children[i]; i++) {
+      goog.asserts.assert(child.isShadow(),
+                          'Shadow block not allowed non-shadow child.');
+    }
+    block.setShadow(true);
+  }
+  return block;
+};
+
+/**
+ * Remove any 'next' block (statements in a stack).
+ * @param {!Element} xmlBlock XML block element.
+ */
+Blockly.Xml.deleteNext = function(xmlBlock) {
+  for (var i = 0, child; child = xmlBlock.childNodes[i]; i++) {
+    if (child.nodeName.toLowerCase() == 'next') {
+      xmlBlock.removeChild(child);
+      break;
+    }
+  }
+};
+
+// Export symbols that would otherwise be renamed by Closure compiler.
+if (!goog.global['Blockly']) {
+  goog.global['Blockly'] = {};
+}
+if (!goog.global['Blockly']['Xml']) {
+  goog.global['Blockly']['Xml'] = {};
+}
+goog.global['Blockly']['Xml']['domToText'] = Blockly.Xml.domToText;
+goog.global['Blockly']['Xml']['domToWorkspace'] = Blockly.Xml.domToWorkspace;
+goog.global['Blockly']['Xml']['textToDom'] = Blockly.Xml.textToDom;
+goog.global['Blockly']['Xml']['workspaceToDom'] = Blockly.Xml.workspaceToDom;
diff --git a/blockly/core/zoom_controls.js b/blockly/core/zoom_controls.js
new file mode 100644
index 0000000..48d8ce5
--- /dev/null
+++ b/blockly/core/zoom_controls.js
@@ -0,0 +1,239 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2015 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Object representing a zoom icons.
+ * @author carloslfu@gmail.com (Carlos Galarza)
+ */
+'use strict';
+
+goog.provide('Blockly.ZoomControls');
+
+goog.require('goog.dom');
+
+
+/**
+ * Class for a zoom controls.
+ * @param {!Blockly.Workspace} workspace The workspace to sit in.
+ * @constructor
+ */
+Blockly.ZoomControls = function(workspace) {
+  this.workspace_ = workspace;
+};
+
+/**
+ * Width of the zoom controls.
+ * @type {number}
+ * @private
+ */
+Blockly.ZoomControls.prototype.WIDTH_ = 32;
+
+/**
+ * Height of the zoom controls.
+ * @type {number}
+ * @private
+ */
+Blockly.ZoomControls.prototype.HEIGHT_ = 110;
+
+/**
+ * Distance between zoom controls and bottom edge of workspace.
+ * @type {number}
+ * @private
+ */
+Blockly.ZoomControls.prototype.MARGIN_BOTTOM_ = 20;
+
+/**
+ * Distance between zoom controls and right edge of workspace.
+ * @type {number}
+ * @private
+ */
+Blockly.ZoomControls.prototype.MARGIN_SIDE_ = 20;
+
+/**
+ * The SVG group containing the zoom controls.
+ * @type {Element}
+ * @private
+ */
+Blockly.ZoomControls.prototype.svgGroup_ = null;
+
+/**
+ * Left coordinate of the zoom controls.
+ * @type {number}
+ * @private
+ */
+Blockly.ZoomControls.prototype.left_ = 0;
+
+/**
+ * Top coordinate of the zoom controls.
+ * @type {number}
+ * @private
+ */
+Blockly.ZoomControls.prototype.top_ = 0;
+
+/**
+ * Create the zoom controls.
+ * @return {!Element} The zoom controls SVG group.
+ */
+Blockly.ZoomControls.prototype.createDom = function() {
+  var workspace = this.workspace_;
+  /* Here's the markup that will be generated:
+  <g class="blocklyZoom">
+    <clippath id="blocklyZoomoutClipPath837493">
+      <rect width="32" height="32" y="77"></rect>
+    </clippath>
+    <image width="96" height="124" x="-64" y="-15" xlink:href="media/sprites.png"
+        clip-path="url(#blocklyZoomoutClipPath837493)"></image>
+    <clippath id="blocklyZoominClipPath837493">
+      <rect width="32" height="32" y="43"></rect>
+    </clippath>
+    <image width="96" height="124" x="-32" y="-49" xlink:href="media/sprites.png"
+        clip-path="url(#blocklyZoominClipPath837493)"></image>
+    <clippath id="blocklyZoomresetClipPath837493">
+      <rect width="32" height="32"></rect>
+    </clippath>
+    <image width="96" height="124" y="-92" xlink:href="media/sprites.png"
+        clip-path="url(#blocklyZoomresetClipPath837493)"></image>
+  </g>
+  */
+  this.svgGroup_ = Blockly.createSvgElement('g',
+      {'class': 'blocklyZoom'}, null);
+  var rnd = String(Math.random()).substring(2);
+
+  var clip = Blockly.createSvgElement('clipPath',
+      {'id': 'blocklyZoomoutClipPath' + rnd},
+      this.svgGroup_);
+  Blockly.createSvgElement('rect',
+      {'width': 32, 'height': 32, 'y': 77},
+      clip);
+  var zoomoutSvg = Blockly.createSvgElement('image',
+      {'width': Blockly.SPRITE.width,
+       'height': Blockly.SPRITE.height, 'x': -64,
+       'y': -15,
+       'clip-path': 'url(#blocklyZoomoutClipPath' + rnd + ')'},
+      this.svgGroup_);
+  zoomoutSvg.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href',
+      workspace.options.pathToMedia + Blockly.SPRITE.url);
+
+  var clip = Blockly.createSvgElement('clipPath',
+      {'id': 'blocklyZoominClipPath' + rnd},
+      this.svgGroup_);
+  Blockly.createSvgElement('rect',
+      {'width': 32, 'height': 32, 'y': 43},
+      clip);
+  var zoominSvg = Blockly.createSvgElement('image',
+      {'width': Blockly.SPRITE.width,
+       'height': Blockly.SPRITE.height,
+       'x': -32,
+       'y': -49,
+       'clip-path': 'url(#blocklyZoominClipPath' + rnd + ')'},
+      this.svgGroup_);
+  zoominSvg.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href',
+      workspace.options.pathToMedia + Blockly.SPRITE.url);
+
+  var clip = Blockly.createSvgElement('clipPath',
+      {'id': 'blocklyZoomresetClipPath' + rnd},
+      this.svgGroup_);
+  Blockly.createSvgElement('rect',
+      {'width': 32, 'height': 32},
+      clip);
+  var zoomresetSvg = Blockly.createSvgElement('image',
+      {'width': Blockly.SPRITE.width,
+       'height': Blockly.SPRITE.height, 'y': -92,
+       'clip-path': 'url(#blocklyZoomresetClipPath' + rnd + ')'},
+      this.svgGroup_);
+  zoomresetSvg.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href',
+      workspace.options.pathToMedia + Blockly.SPRITE.url);
+
+  // Attach event listeners.
+  Blockly.bindEvent_(zoomresetSvg, 'mousedown', null, function(e) {
+    workspace.setScale(1);
+    workspace.scrollCenter();
+    e.stopPropagation();  // Don't start a workspace scroll.
+    e.preventDefault();  // Stop double-clicking from selecting text.
+  });
+  Blockly.bindEvent_(zoominSvg, 'mousedown', null, function(e) {
+    workspace.zoomCenter(1);
+    e.stopPropagation();  // Don't start a workspace scroll.
+    e.preventDefault();  // Stop double-clicking from selecting text.
+  });
+  Blockly.bindEvent_(zoomoutSvg, 'mousedown', null, function(e) {
+    workspace.zoomCenter(-1);
+    e.stopPropagation();  // Don't start a workspace scroll.
+    e.preventDefault();  // Stop double-clicking from selecting text.
+  });
+
+  return this.svgGroup_;
+};
+
+/**
+ * Initialize the zoom controls.
+ * @param {number} bottom Distance from workspace bottom to bottom of controls.
+ * @return {number} Distance from workspace bottom to the top of controls.
+ */
+Blockly.ZoomControls.prototype.init = function(bottom) {
+  this.bottom_ = this.MARGIN_BOTTOM_ + bottom;
+  return this.bottom_ + this.HEIGHT_;
+};
+
+/**
+ * Dispose of this zoom controls.
+ * Unlink from all DOM elements to prevent memory leaks.
+ */
+Blockly.ZoomControls.prototype.dispose = function() {
+  if (this.svgGroup_) {
+    goog.dom.removeNode(this.svgGroup_);
+    this.svgGroup_ = null;
+  }
+  this.workspace_ = null;
+};
+
+/**
+ * Move the zoom controls to the bottom-right corner.
+ */
+Blockly.ZoomControls.prototype.position = function() {
+  var metrics = this.workspace_.getMetrics();
+  if (!metrics) {
+    // There are no metrics available (workspace is probably not visible).
+    return;
+  }
+  if (this.workspace_.RTL) {
+    this.left_ = this.MARGIN_SIDE_ + Blockly.Scrollbar.scrollbarThickness;
+    if (metrics.toolboxPosition == Blockly.TOOLBOX_AT_LEFT) {
+      this.left_ += metrics.flyoutWidth;
+      if (this.workspace_.toolbox_) {
+        this.left_ += metrics.absoluteLeft;
+      }
+    }
+  } else {
+    this.left_ = metrics.viewWidth + metrics.absoluteLeft -
+        this.WIDTH_ - this.MARGIN_SIDE_ - Blockly.Scrollbar.scrollbarThickness;
+
+    if (metrics.toolboxPosition == Blockly.TOOLBOX_AT_RIGHT) {
+      this.left_ -= metrics.flyoutWidth;
+    }
+  }
+  this.top_ = metrics.viewHeight + metrics.absoluteTop -
+      this.HEIGHT_ - this.bottom_;
+  if (metrics.toolboxPosition == Blockly.TOOLBOX_AT_BOTTOM) {
+    this.top_ -= metrics.flyoutHeight;
+  }
+  this.svgGroup_.setAttribute('transform',
+      'translate(' + this.left_ + ',' + this.top_ + ')');
+};