Merge branch 'develop' into feature/simple_multitouch

accessible/README

@@ -5,10 +5,8 @@ Google's Blockly is a web-based, visual programming editor that is accessible
 to blind users.
 
 The code in this directory renders a version of the Blockly toolbox and
-workspace that is fully keyboard-navigable, and compatible with JAWS/NVDA
+workspace that is fully keyboard-navigable, and compatible with most screen
-screen readers on Firefox for Windows. (We chose this combination because JAWS
+readers.
-and NVDA are the most robust screen readers, and are compatible with many more
-aria tags than other screen readers.)
 
 In the future, Accessible Blockly may be modified to suit accessibility needs
 other than visual impairments. Note that deaf users are expected to continue
@@ -27,15 +25,16 @@ the main component to be loaded. This will usually be blocklyApp.AppView, but
 if you have another component that wraps it, use that one instead.
 
 
-Customizing the Toolbar
+Customizing the Toolbar and Audio
------------------------
+---------------------------------
 The Accessible Blockly workspace comes with a customizable toolbar.
 
 To customize the toolbar, you will need to declare an ACCESSIBLE_GLOBALS object
 in the global scope that looks like this:
 
     var ACCESSIBLE_GLOBALS = {
-      toolbarButtonConfig: []
+      toolbarButtonConfig: [],
+      mediaPathPrefix: null
     };
 
 The value corresponding to 'toolbarButtonConfig' can be modified by adding
@@ -45,6 +44,9 @@ two keys:
   - 'text' (the text to display on the button)
   - 'action' (the function that gets run when the button is clicked)
 
+In addition, if you want audio to be played, set mediaPathPrefix to the
+location of the accessible/media folder.
+
 
 Limitations
 -----------

accessible/app.component.js

@@ -29,6 +29,9 @@ blocklyApp.AppView = ng.core
   .Component({
     selector: 'blockly-app',
     template: `
+    <div aria-hidden="true">
+      Status: <span aria-live="polite" role="status">{{getStatusMessage()}}</span>
+    </div>
     <table>
       <tr>
         <td class="blocklyTable">
@@ -46,19 +49,29 @@ blocklyApp.AppView = ng.core
     <label aria-hidden="true" hidden id="blockly-argument-text">{{'TEXT'|translate}}</label>
     <label aria-hidden="true" hidden id="blockly-block-menu">{{'BLOCK_ACTION_LIST'|translate}}</label>
     <label aria-hidden="true" hidden id="blockly-block-summary">{{'BLOCK_SUMMARY'|translate}}</label>
+    <label aria-hidden="true" hidden id="blockly-more-options">{{'MORE_OPTIONS'|translate}}</label>
+    <label aria-hidden="true" hidden id="blockly-submenu-indicator">{{'SUBMENU_INDICATOR'|translate}}</label>
+    <label aria-hidden="true" hidden id="blockly-toolbox-block">{{'TOOLBOX_BLOCK'|translate}} {{'SUBMENU_INDICATOR'|translate}}</label>
+    <label aria-hidden="true" hidden id="blockly-workspace-block">{{'WORKSPACE_BLOCK'|translate}} {{'SUBMENU_INDICATOR'|translate}}</label>
     <label aria-hidden="true" hidden id="blockly-button">{{'BUTTON'|translate}}</label>
-    <label aria-hidden="true" hidden id="blockly-disabled">{{'UNAVAILABLE'|translate}}</label>
+    <label aria-hidden="true" hidden id="blockly-disabled">{{'DISABLED'|translate}}</label>
     <label aria-hidden="true" hidden id="blockly-menu">{{'OPTION_LIST'|translate}}</label>
     `,
     directives: [blocklyApp.ToolboxComponent, blocklyApp.WorkspaceComponent],
     pipes: [blocklyApp.TranslatePipe],
-    // The clipboard, tree and utils services are declared here, so that all
+    // All services are declared here, so that all components in the
-    // components in the application use the same instance of the service.
+    // application use the same instance of the service.
     // https://www.sitepoint.com/angular-2-components-providers-classes-factories-values/
     providers: [
-        blocklyApp.ClipboardService, blocklyApp.TreeService,
+        blocklyApp.ClipboardService, blocklyApp.NotificationsService,
-        blocklyApp.UtilsService]
+        blocklyApp.TreeService, blocklyApp.UtilsService,
+        blocklyApp.AudioService]
   })
   .Class({
-    constructor: [function() {}]
+    constructor: [blocklyApp.NotificationsService, function(_notificationsService) {
+      this.notificationsService = _notificationsService;
+    }],
+    getStatusMessage: function() {
+      return this.notificationsService.getStatusMessage();
+    }
   });

accessible/audio.service.js

@@ -0,0 +1,57 @@
+/**
+ * AccessibleBlockly
+ *
+ * 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 Angular2 Service that plays audio files.
+ * @author sll@google.com (Sean Lip)
+ */
+
+blocklyApp.AudioService = ng.core
+  .Class({
+    constructor: [function() {
+      // We do not play any audio unless a media path prefix is specified.
+      this.canPlayAudio = false;
+      if (ACCESSIBLE_GLOBALS.hasOwnProperty('mediaPathPrefix')) {
+        this.canPlayAudio = true;
+        var mediaPathPrefix = ACCESSIBLE_GLOBALS['mediaPathPrefix'];
+        this.AUDIO_PATHS_ = {
+          'connect': mediaPathPrefix + 'click.mp3',
+          'delete': mediaPathPrefix + 'delete.mp3'
+        };
+      }
+
+      // TODO(sll): Add ogg and mp3 fallbacks.
+      this.cachedAudioFiles_ = {};
+    }],
+    play_: function(audioId) {
+      if (this.canPlayAudio) {
+        if (!this.cachedAudioFiles_.hasOwnProperty(audioId)) {
+          this.cachedAudioFiles_[audioId] = new Audio(
+              this.AUDIO_PATHS_[audioId]);
+        }
+        this.cachedAudioFiles_[audioId].play();
+      }
+    },
+    playConnectSound: function() {
+      this.play_('connect');
+    },
+    playDeleteSound: function() {
+      this.play_('delete');
+    }
+  });

accessible/clipboard.service.js

@@ -24,12 +24,19 @@
 
 blocklyApp.ClipboardService = ng.core
   .Class({
-    constructor: function() {
+    constructor: [
+        blocklyApp.NotificationsService, blocklyApp.UtilsService,
+        blocklyApp.AudioService,
+        function(_notificationsService, _utilsService, _audioService) {
       this.clipboardBlockXml_ = null;
-      this.clipboardBlockSuperiorConnection_ = null;
+      this.clipboardBlockPreviousConnection_ = null;
       this.clipboardBlockNextConnection_ = null;
+      this.clipboardBlockOutputConnection_ = null;
       this.markedConnection_ = null;
-    },
+      this.notificationsService = _notificationsService;
+      this.utilsService = _utilsService;
+      this.audioService = _audioService;
+    }],
     areConnectionsCompatible_: function(blockConnection, connection) {
       // Check that both connections exist, that it's the right kind of
       // connection, and that the types match.
@@ -39,11 +46,20 @@ blocklyApp.ClipboardService = ng.core
           connection.checkType_(blockConnection));
     },
     isCompatibleWithClipboard: function(connection) {
-      var superiorConnection = this.clipboardBlockSuperiorConnection_;
+      var previousConnection = this.clipboardBlockPreviousConnection_;
       var nextConnection = this.clipboardBlockNextConnection_;
+      var outputConnection = this.clipboardBlockOutputConnection_;
       return Boolean(
-          this.areConnectionsCompatible_(connection, superiorConnection) ||
+          this.areConnectionsCompatible_(connection, previousConnection) ||
-          this.areConnectionsCompatible_(connection, nextConnection));
+          this.areConnectionsCompatible_(connection, nextConnection) ||
+          this.areConnectionsCompatible_(connection, outputConnection));
+    },
+    getMarkedConnectionBlock: function() {
+      if (!this.markedConnection_) {
+        return null;
+      } else {
+        return this.markedConnection_.getSourceBlock();
+      }
     },
     isMovableToMarkedConnection: function(block) {
       // It should not be possible to move any ancestor of the block containing
@@ -52,7 +68,7 @@ blocklyApp.ClipboardService = ng.core
         return false;
       }
 
-      var markedSpotAncestorBlock = this.markedConnection_.getSourceBlock();
+      var markedSpotAncestorBlock = this.getMarkedConnectionBlock();
       while (markedSpotAncestorBlock) {
         if (markedSpotAncestorBlock.id == block.id) {
           return false;
@@ -82,24 +98,28 @@ blocklyApp.ClipboardService = ng.core
     },
     markConnection: function(connection) {
       this.markedConnection_ = connection;
-      alert(Blockly.Msg.MARKED_SPOT_MSG);
+      this.notificationsService.setStatusMessage(Blockly.Msg.MARKED_SPOT_MSG);
     },
     cut: function(block) {
-      var blockSummary = block.toString();
+      this.copy(block);
-      this.copy(block, false);
       block.dispose(true);
-      alert(Blockly.Msg.CUT_BLOCK_MSG + blockSummary);
     },
-    copy: function(block, announce) {
+    copy: function(block) {
       this.clipboardBlockXml_ = Blockly.Xml.blockToDom(block);
-      this.clipboardBlockSuperiorConnection_ = block.outputConnection ||
+      this.clipboardBlockPreviousConnection_ = block.previousConnection;
-          block.previousConnection;
       this.clipboardBlockNextConnection_ = block.nextConnection;
-      if (announce) {
+      this.clipboardBlockOutputConnection_ = block.outputConnection;
-        alert(Blockly.Msg.COPIED_BLOCK_MSG + block.toString());
-      }
     },
-    pasteFromClipboard: function(connection) {
+    pasteFromClipboard: function(inputConnection) {
+      var connection = inputConnection;
+      // If the connection is a 'previousConnection' and that connection is
+      // already joined to something, use the 'nextConnection' of the
+      // previous block instead in order to do an insertion.
+      if (inputConnection.type == Blockly.PREVIOUS_STATEMENT &&
+          inputConnection.isConnected()) {
+        connection = inputConnection.targetConnection;
+      }
+
       var reconstitutedBlock = Blockly.Xml.domToBlock(blocklyApp.workspace,
           this.clipboardBlockXml_);
       switch (connection.type) {
@@ -112,11 +132,13 @@ blocklyApp.ClipboardService = ng.core
         default:
           connection.connect(reconstitutedBlock.outputConnection);
       }
-      alert(
+      this.audioService.playConnectSound();
-          Blockly.Msg.PASTED_BLOCK_FROM_CLIPBOARD_MSG +
+      this.notificationsService.setStatusMessage(
-          reconstitutedBlock.toString());
+          this.utilsService.getBlockDescription(reconstitutedBlock) + ' ' +
+          Blockly.Msg.PASTED_BLOCK_FROM_CLIPBOARD_MSG);
+      return reconstitutedBlock.id;
     },
-    pasteToMarkedConnection: function(block, announce) {
+    pasteToMarkedConnection: function(block) {
       var xml = Blockly.Xml.blockToDom(block);
       var reconstitutedBlock = Blockly.Xml.domToBlock(
           blocklyApp.workspace, xml);
@@ -132,6 +154,7 @@ blocklyApp.ClipboardService = ng.core
         if (this.areConnectionsCompatible_(
             this.markedConnection_, potentialConnections[i])) {
           this.markedConnection_.connect(potentialConnections[i]);
+          this.audioService.playConnectSound();
           connectionSuccessful = true;
           break;
         }
@@ -142,12 +165,8 @@ blocklyApp.ClipboardService = ng.core
         return;
       }
 
-      if (announce) {
-        alert(
-            Blockly.Msg.PASTED_BLOCK_TO_MARKED_SPOT_MSG +
-            reconstitutedBlock.toString());
-      }
-
       this.markedConnection_ = null;
+
+      return reconstitutedBlock.id;
     }
   });

accessible/field.component.js

@@ -28,40 +28,41 @@ blocklyApp.FieldComponent = ng.core
   .Component({
     selector: 'blockly-field',
     template: `
-    <li [id]="idMap['listItem']" role="treeitem" *ngIf="isTextInput()"
+    <input *ngIf="isTextInput()" [id]="mainFieldId" type="text" [disabled]="disabled"
-        [attr.aria-labelledBy]="generateAriaLabelledByAttr('blockly-argument-input', idMap['input'])"
+           [ngModel]="field.getValue()" (ngModelChange)="field.setValue($event)"
-        [attr.aria-level]="level" aria-selected=false>
+           [attr.aria-label]="disabled ? 'Disabled text field' : 'Press Enter to edit text'"
-      <input [id]="idMap['input']" [ngModel]="field.getValue()" (ngModelChange)="field.setValue($event)"
+           tabindex="-1">
-             [disabled]="disabled">
+
-    </li>
+    <input *ngIf="isNumberInput()" [id]="mainFieldId" type="number" [disabled]="disabled"
-    <li [id]="idMap['listItem']" role="treeitem" *ngIf="isDropdown()"
+           [ngModel]="field.getValue()" (ngModelChange)="field.setValue($event)"
-        [attr.aria-labelledBy]="generateAriaLabelledByAttr('blockly-argument-menu', idMap['label'])"
+           [attr.aria-label]="disabled ? 'Disabled number field' : 'Press Enter to edit number'"
-        [attr.aria-level]="level" aria-selected=false>
+           tabindex="-1">
-      <label [id]="idMap['label']">{{'CURRENT_ARGUMENT_VALUE'|translate}} {{field.getText()}}</label>
+
-      <ol role="group" [attr.aria-level]="level+1">
+    <div *ngIf="isDropdown()">
+      <label [id]="mainFieldId" [attr.aria-label]="('CURRENT_ARGUMENT_VALUE'|translate) + ' ' + field.getText() + ' Move right to view submenu'">
+        {{'CURRENT_ARGUMENT_VALUE'|translate}} {{field.getText()}}
+      </label>
+      <ol role="group">
         <li [id]="idMap[optionValue]" role="treeitem" *ngFor="#optionValue of getOptions()"
-            [attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap[optionValue + 'Button'], 'blockly-button')"
+            [attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap[optionValue + 'Button'], 'blockly-button')">
-            [attr.aria-level]="level+1" aria-selected=false>
           <button [id]="idMap[optionValue + 'Button']" (click)="handleDropdownChange(field, optionValue)"
-                  [disabled]="disabled">
+                  [disabled]="disabled" tabindex="-1"
+                  [attr.aria-label]="optionText[optionValue] + ' Press Enter to select this value'">
             {{optionText[optionValue]}}
           </button>
         </li>
       </ol>
-    </li>
+    </div>
-    <li [id]="idMap['listItem']" role="treeitem" *ngIf="isCheckbox()"
+
-        [attr.aria-level]="level" aria-selected=false>
+    <div *ngIf="isCheckbox()">
       // Checkboxes are not currently supported.
-    </li>
+    </div>
-    <li [id]="idMap['listItem']" role="treeitem" *ngIf="isTextField() && hasVisibleText()"
+
-        [attr.aria-labelledBy]="utilsService.generateAriaLabelledByAttr('blockly-argument-text', idMap['label'])"
+    <label [id]="mainFieldId" *ngIf="isTextField() && hasVisibleText()">
-        [attr.aria-level]="level" aria-selected=false>
+      {{field.getText()}}
-      <label [id]="idMap['label']">
+    </label>
-        {{field.getText()}}
-      </label>
-    </li>
     `,
-    inputs: ['field', 'level', 'index', 'parentId', 'disabled'],
+    inputs: ['field', 'index', 'parentId', 'disabled', 'mainFieldId'],
     pipes: [blocklyApp.TranslatePipe]
   })
   .Class({
@@ -81,22 +82,21 @@ blocklyApp.FieldComponent = ng.core
       return mainLabel + ' ' + secondLabel;
     },
     generateElementNames: function() {
-      var elementNames = ['listItem'];
+      var elementNames = [];
-      if (this.isTextInput()) {
+      if (this.isDropdown()) {
-        elementNames.push('input');
-      } else if (this.isDropdown()) {
-        elementNames.push('label');
         var keys = this.getOptions();
         for (var i = 0; i < keys.length; i++){
           elementNames.push(keys[i], keys[i] + 'Button');
         }
-      } else if (this.isTextField() && this.hasVisibleText()) {
-        elementNames.push('label');
       }
       return elementNames;
     },
+    isNumberInput: function() {
+      return this.field instanceof Blockly.FieldNumber;
+    },
     isTextInput: function() {
-      return this.field instanceof Blockly.FieldTextInput;
+      return this.field instanceof Blockly.FieldTextInput &&
+          !(this.field instanceof Blockly.FieldNumber);
     },
     isDropdown: function() {
       return this.field instanceof Blockly.FieldDropdown;

accessible/media/accessible.css

@@ -4,6 +4,9 @@
 .blocklyTree .blocklyActiveDescendant > label,
 .blocklyTree .blocklyActiveDescendant > div > label,
 .blocklyActiveDescendant > button,
-.blocklyActiveDescendant > input {
+.blocklyActiveDescendant > input,
+.blocklyActiveDescendant > blockly-field > label,
+.blocklyActiveDescendant > blockly-field > input,
+.blocklyActiveDescendant > blockly-field > div > label {
   outline: 2px dotted #00f;
 }

accessible/messages.js

@@ -33,10 +33,10 @@ Blockly.Msg.CLEAR_WORKSPACE = 'Clear Workspace';
 Blockly.Msg.BLOCK_ACTION_LIST = 'block action list';
 Blockly.Msg.CUT_BLOCK = 'cut block';
 Blockly.Msg.COPY_BLOCK = 'copy block';
-Blockly.Msg.PASTE_BELOW = 'paste below';
+Blockly.Msg.PASTE_BEFORE = 'paste before';
-Blockly.Msg.PASTE_ABOVE = 'paste above';
+Blockly.Msg.PASTE_AFTER = 'paste after';
-Blockly.Msg.MARK_SPOT_BELOW = 'mark spot below';
+Blockly.Msg.MARK_SPOT_BEFORE = 'mark spot before';
-Blockly.Msg.MARK_SPOT_ABOVE = 'mark spot above';
+Blockly.Msg.MARK_SPOT_AFTER = 'mark spot after';
 Blockly.Msg.MOVE_TO_MARKED_SPOT = 'move to marked spot';
 Blockly.Msg.DELETE = 'delete';
 Blockly.Msg.MARK_THIS_SPOT = 'mark this spot';
@@ -50,19 +50,24 @@ Blockly.Msg.ARGUMENT_INPUT = 'argument input';
 Blockly.Msg.ARGUMENT_BLOCK_ACTION_LIST = 'argument block action list';
 Blockly.Msg.TEXT = 'text';
 Blockly.Msg.BUTTON = 'button';
-Blockly.Msg.UNAVAILABLE = 'unavailable';
+Blockly.Msg.DISABLED = 'disabled';
 Blockly.Msg.CURRENT_ARGUMENT_VALUE = 'current argument value:';
-Blockly.Msg.COPY_TO_WORKSPACE = 'copy to workspace';
+Blockly.Msg.COPY_TO_WORKSPACE = 'create new group with this block';
 Blockly.Msg.COPY_TO_CLIPBOARD = 'copy to clipboard';
 Blockly.Msg.COPY_TO_MARKED_SPOT = 'copy to marked spot';
 Blockly.Msg.TOOLBOX = 'Toolbox';
 Blockly.Msg.WORKSPACE = 'Workspace';
 Blockly.Msg.ANY = 'any';
+Blockly.Msg.FOR = 'for';
 Blockly.Msg.STATEMENT = 'statement';
 Blockly.Msg.VALUE = 'value';
 Blockly.Msg.CUT_BLOCK_MSG = 'Cut block: ';
-Blockly.Msg.COPIED_BLOCK_MSG = 'Copied block to clipboard: ';
+Blockly.Msg.COPIED_BLOCK_MSG = 'copied';
-Blockly.Msg.PASTED_BLOCK_FROM_CLIPBOARD_MSG = 'Pasted block from clipboard: ';
+Blockly.Msg.PASTED_BLOCK_FROM_CLIPBOARD_MSG = 'pasted';
-Blockly.Msg.PASTED_BLOCK_TO_MARKED_SPOT_MSG = 'Pasted block to marked spot: ';
+Blockly.Msg.PASTED_BLOCK_TO_MARKED_SPOT_MSG = 'moved to marked spot';
 Blockly.Msg.MARKED_SPOT_MSG = 'Marked spot';
 Blockly.Msg.BLOCK_MOVED_TO_MARKED_SPOT_MSB = 'Block moved to marked spot: ';
+Blockly.Msg.TOOLBOX_BLOCK = 'toolbox block';
+Blockly.Msg.WORKSPACE_BLOCK = 'workspace block';
+Blockly.Msg.SUBMENU_INDICATOR = 'move right to view submenu';
+Blockly.Msg.MORE_OPTIONS = 'More options';

accessible/notifications.service.js

@@ -0,0 +1,46 @@
+/**
+ * AccessibleBlockly
+ *
+ * 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 Angular2 Service that notifies the user about actions that
+ * they have taken, by updating an ARIA live region.
+ * @author sll@google.com (Sean Lip)
+ */
+
+blocklyApp.NotificationsService = ng.core
+  .Class({
+    constructor: [function() {
+      this.statusMessage_ = '';
+    }],
+    getStatusMessage: function() {
+      return this.statusMessage_;
+    },
+    setStatusMessage: function(newMessage) {
+      // Introduce a temporary status message, so that if, e.g., two "copy"
+      // operations are done in succession, both messages will be read.
+      this.statusMessage_ = '';
+
+      // We need a non-zero timeout here, otherwise NVDA does not read the
+      // notification messages properly.
+      var that = this;
+      setTimeout(function() {
+        that.statusMessage_ = newMessage;
+      }, 20);
+    }
+  });

accessible/toolbox-tree.component.js

@@ -29,70 +29,36 @@ blocklyApp.ToolboxTreeComponent = ng.core
     selector: 'blockly-toolbox-tree',
     template: `
     <li #parentList [id]="idMap['parentList']" role="treeitem"
-        [ngClass]="{blocklyHasChildren: displayBlockMenu || block.inputList.length > 0, blocklyActiveDescendant: index == 0 && noCategories}"
+        [ngClass]="{blocklyHasChildren: displayBlockMenu, blocklyActiveDescendant: index == 0 && noCategories}"
-        [attr.aria-labelledBy]="generateAriaLabelledByAttr('blockly-block-summary', idMap['blockSummaryLabel'])"
+        [attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['blockSummaryLabel'], 'blockly-toolbox-block')"
-        [attr.aria-selected]="index == 0 && tree.getAttribute('aria-activedescendant') == 'blockly-toolbox-tree-node0'"
         [attr.aria-level]="level">
-      <label #blockSummaryLabel [id]="idMap['blockSummaryLabel']">{{block.toString()}}</label>
+      <label #blockSummaryLabel [id]="idMap['blockSummaryLabel']">{{getBlockDescription()}}</label>
-      <ol role="group" *ngIf="displayBlockMenu || block.inputList.length > 0"
+      <ol role="group" *ngIf="displayBlockMenu">
-          [attr.aria-level]="level+1">
+        <li [id]="idMap['workspaceCopy']" role="treeitem"
-        <li #listItem class="blocklyHasChildren" [id]="idMap['listItem']"
+            [attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['workspaceCopyButton'], 'blockly-button')"
-            [attr.aria-labelledBy]="generateAriaLabelledByAttr('blockly-block-menu', idMap['blockSummaryLabel'])"
+            [attr.aria-level]="level + 2">
-            *ngIf="displayBlockMenu" role="treeitem"
+          <button [id]="idMap['workspaceCopyButton']" (click)="copyToWorkspace()" tabindex="-1">
-            aria-selected=false [attr.aria-level]="level+1">
+            {{'COPY_TO_WORKSPACE'|translate}}
-          <label #label [id]="idMap['label']">{{'BLOCK_ACTION_LIST'|translate}}</label>
+          </button>
-          <ol role="group" *ngIf="displayBlockMenu"  [attr.aria-level]="level+2">
+        </li>
-            <li #workspaceCopy [id]="idMap['workspaceCopy']" role="treeitem"
+        <li [id]="idMap['blockCopy']" role="treeitem"
-                [attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['workspaceCopyButton'], 'blockly-button')"
+            [attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['blockCopyButton'], 'blockly-button')"
-                [attr.aria-level]="level+2" aria-selected=false>
+            [attr.aria-level]="level + 2">
-              <button #workspaceCopyButton [id]="idMap['workspaceCopyButton']"
+          <button [id]="idMap['blockCopyButton']" (click)="copyToClipboard()" tabindex="-1">
-                      (click)="copyToWorkspace(block)">
+            {{'COPY_TO_CLIPBOARD'|translate}}
-                {{'COPY_TO_WORKSPACE'|translate}}
+          </button>
-              </button>
+        </li>
-            </li>
+        <li [id]="idMap['sendToSelected']" role="treeitem"
-            <li #blockCopy [id]="idMap['blockCopy']" role="treeitem"
+            [attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['sendToSelectedButton'], 'blockly-button', !canBeCopiedToMarkedConnection())"
-                [attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['blockCopyButton'], 'blockly-button')"
+            [attr.aria-level]="level + 2">
-                [attr.aria-level]="level+2" aria-selected=false>
+          <button [id]="idMap['sendToSelectedButton']" (click)="copyToMarkedSpot()"
-              <button #blockCopyButton [id]="idMap['blockCopyButton']"
+                  [disabled]="!canBeCopiedToMarkedConnection()" tabindex="-1">
-                      (click)="clipboardService.copy(block, true)">
+            {{'COPY_TO_MARKED_SPOT'|translate}}
-                {{'COPY_TO_CLIPBOARD'|translate}}
+          </button>
-              </button>
-            </li>
-            <li #sendToSelected [id]="idMap['sendToSelected']" role="treeitem"
-                [attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['sendToSelectedButton'], 'blockly-button', !canBeCopiedToMarkedConnection(block))"
-                [attr.aria-level]="level+2" aria-selected=false>
-              <button #sendToSelectedButton
-                      [id]="idMap['sendToSelectedButton']"
-                      (click)="copyToMarked(block)"
-                      [disabled]="!canBeCopiedToMarkedConnection(block)">
-                {{'COPY_TO_MARKED_SPOT'|translate}}
-              </button>
-            </li>
-          </ol>
         </li>
-        <div *ngFor="#inputBlock of block.inputList; #i=index">
-          <blockly-field *ngFor="#field of inputBlock.fieldRow; #j=index"
-                         [attr.aria-level]="level+1" [field]="field"
-                         [level]="level+1" [disabled]="true">
-          </blockly-field>
-          <blockly-toolbox-tree *ngIf="inputBlock.connection && inputBlock.connection.targetBlock()"
-                                [block]="inputBlock.connection.targetBlock()"
-                                [displayBlockMenu]="false"
-                                [level]="level+1">
-          </blockly-toolbox-tree>
-          <li #listItem1 [id]="idMap['listItem' + i]" role="treeitem"
-              *ngIf="inputBlock.connection && !inputBlock.connection.targetBlock()"
-              [attr.aria-labelledBy]="generateAriaLabelledByAttr('blockly-argument-text', idMap['listItem' + i + 'Label'])"
-              [attr.aria-level]="level+1" aria-selected=false>
-            <!--TODO(madeeha): i18n here will need to happen in a different way due to the way grammar changes based on language.-->
-            <label #label [id]="idMap['listItem' + i + 'Label']">
-              {{utilsService.getInputTypeLabel(inputBlock.connection)}}
-              {{utilsService.getBlockTypeLabel(inputBlock)}} needed:
-            </label>
-          </li>
-        </div>
       </ol>
     </li>
+
     <blockly-toolbox-tree *ngIf= "block.nextConnection && block.nextConnection.targetBlock()"
                           [level]="level"
                           [block]="block.nextConnection.targetBlock()"
@@ -108,25 +74,23 @@ blocklyApp.ToolboxTreeComponent = ng.core
   })
   .Class({
     constructor: [
-        blocklyApp.ClipboardService, blocklyApp.TreeService, blocklyApp.UtilsService,
+        blocklyApp.ClipboardService, blocklyApp.NotificationsService,
-        function(_clipboardService, _treeService, _utilsService) {
+        blocklyApp.TreeService, blocklyApp.UtilsService,
-      // ClipboardService and UtilsService are app-wide singleton services.
+        function(
-      // TreeService is from the parent ToolboxComponent.
+            _clipboardService, _notificationsService,
-      this.infoBlocks = Object.create(null);
+            _treeService, _utilsService) {
       this.clipboardService = _clipboardService;
+      this.notificationsService = _notificationsService;
       this.treeService = _treeService;
       this.utilsService = _utilsService;
     }],
     ngOnInit: function() {
       var elementsNeedingIds = ['blockSummaryLabel'];
-      if (this.displayBlockMenu || this.block.inputList.length){
+      if (this.displayBlockMenu) {
-        elementsNeedingIds = elementsNeedingIds.concat(['listItem', 'label',
+        elementsNeedingIds = elementsNeedingIds.concat(['blockSummarylabel',
             'workspaceCopy', 'workspaceCopyButton', 'blockCopy',
             'blockCopyButton', 'sendToSelected', 'sendToSelectedButton']);
       }
-      for (var i = 0; i < this.block.inputList.length; i++){
-        elementsNeedingIds.push('listItem' + i, 'listItem' + i + 'Label')
-      }
       this.idMap = this.utilsService.generateIds(elementsNeedingIds);
       if (this.isTopLevel) {
         this.idMap['parentList'] = 'blockly-toolbox-tree-node0';
@@ -134,26 +98,62 @@ blocklyApp.ToolboxTreeComponent = ng.core
         this.idMap['parentList'] = this.utilsService.generateUniqueId();
       }
     },
+    getBlockDescription: function() {
+      return this.utilsService.getBlockDescription(this.block);
+    },
     generateAriaLabelledByAttr: function(mainLabel, secondLabel, isDisabled) {
       return this.utilsService.generateAriaLabelledByAttr(
           mainLabel, secondLabel, isDisabled);
     },
-    canBeCopiedToMarkedConnection: function(block) {
+    canBeCopiedToMarkedConnection: function() {
-      return this.clipboardService.canBeCopiedToMarkedConnection(block);
+      return this.clipboardService.canBeCopiedToMarkedConnection(this.block);
     },
-    copyToWorkspace: function(block) {
+    copyToWorkspace: function() {
-      var xml = Blockly.Xml.blockToDom(block);
+      var blockDescription = this.getBlockDescription();
-      Blockly.Xml.domToBlock(blocklyApp.workspace, xml);
+      var xml = Blockly.Xml.blockToDom(this.block);
-      alert('Added block to workspace: ' + block.toString());
+      var newBlockId = Blockly.Xml.domToBlock(blocklyApp.workspace, xml).id;
+
+      var that = this;
+      setTimeout(function() {
+        that.treeService.focusOnBlock(newBlockId);
+        that.notificationsService.setStatusMessage(
+            blockDescription + ' copied to workspace. ' +
+            'Now on copied block in workspace.');
+      });
     },
-    copyToClipboard: function(block) {
+    copyToClipboard: function() {
-      if (this.clipboardService) {
+      this.clipboardService.copy(this.block);
-        this.clipboardService.copy(block, true);
+      this.notificationsService.setStatusMessage(
-      }
+          this.getBlockDescription() + ' ' + Blockly.Msg.COPIED_BLOCK_MSG);
     },
-    copyToMarked: function(block) {
+    copyToMarkedSpot: function() {
-      if (this.clipboardService) {
+      var blockDescription = this.getBlockDescription();
-        this.clipboardService.pasteToMarkedConnection(block);
+      // Clean up the active desc for the destination tree.
-      }
+      var oldDestinationTreeId = this.treeService.getTreeIdForBlock(
+          this.clipboardService.getMarkedConnectionBlock().id);
+      this.treeService.clearActiveDesc(oldDestinationTreeId);
+
+      var newBlockId = this.clipboardService.pasteToMarkedConnection(
+          this.block);
+
+      // Invoke a digest cycle, so that the DOM settles.
+      var that = this;
+      setTimeout(function() {
+        that.treeService.focusOnBlock(newBlockId);
+
+        var newDestinationTreeId = that.treeService.getTreeIdForBlock(
+            newBlockId);
+        if (newDestinationTreeId != oldDestinationTreeId) {
+          // It is possible for the tree ID for the pasted block to change
+          // after the paste operation, e.g. when inserting a block between two
+          // existing blocks that are joined together. In this case, we need to
+          // also reset the active desc for the old destination tree.
+          that.treeService.initActiveDesc(oldDestinationTreeId);
+        }
+
+        that.notificationsService.setStatusMessage(
+            blockDescription + ' copied to marked spot. ' +
+            'Now on copied block in workspace.');
+      });
     }
   });

accessible/toolbox.component.js

@@ -30,7 +30,7 @@ blocklyApp.ToolboxComponent = ng.core
       <h3 #toolboxTitle id="blockly-toolbox-title">Toolbox</h3>
       <ol #tree
           id="blockly-toolbox-tree" role="tree" class="blocklyTree"
-          *ngIf="toolboxCategories && toolboxCategories.length > 0" tabIndex="0"
+          *ngIf="toolboxCategories && toolboxCategories.length > 0" tabindex="0"
           [attr.aria-labelledby]="toolboxTitle.id"
           [attr.aria-activedescendant]="getActiveDescId()"
           (keydown)="treeService.onKeypress($event, tree)">
@@ -39,15 +39,15 @@ blocklyApp.ToolboxComponent = ng.core
               [id]="idMap['Parent' + i]" role="treeitem"
               [ngClass]="{blocklyHasChildren: true, blocklyActiveDescendant: tree.getAttribute('aria-activedescendant') == idMap['Parent' + i]}"
               *ngFor="#category of toolboxCategories; #i=index"
-              aria-level="1" aria-selected=false
+              aria-level="1"
-              [attr.aria-label]="category.attributes.name.value">
+              [attr.aria-label]="getCategoryAriaLabel(category)">
             <div *ngIf="category && category.attributes">
               <label [id]="idMap['Label' + i]" #name>
                 {{category.attributes.name.value}}
               </label>
               <ol role="group" *ngIf="getToolboxWorkspace(category).topBlocks_.length > 0">
                 <blockly-toolbox-tree *ngFor="#block of getToolboxWorkspace(category).topBlocks_"
-                                      [level]=2 [block]="block"
+                                      [level]="2" [block]="block"
                                       [displayBlockMenu]="true"
                                       [tree]="tree">
                 </blockly-toolbox-tree>
@@ -57,7 +57,7 @@ blocklyApp.ToolboxComponent = ng.core
         </template>
         <div *ngIf="!xmlHasCategories">
           <blockly-toolbox-tree *ngFor="#block of getToolboxWorkspace(toolboxCategories[0]).topBlocks_; #i=index"
-                                [level]=1 [block]="block"
+                                [level]="1" [block]="block"
                                 [displayBlockMenu]="true"
                                 [index]="i" [tree]="tree"
                                 [noCategories]="true"
@@ -119,6 +119,11 @@ blocklyApp.ToolboxComponent = ng.core
     getActiveDescId: function() {
       return this.treeService.getActiveDescId('blockly-toolbox-tree');
     },
+    getCategoryAriaLabel: function(category) {
+      var numBlocks = this.getToolboxWorkspace(category).topBlocks_.length;
+      return category.attributes.name.value + ' category. ' +
+          'Move right to access ' + numBlocks + ' blocks in this category.';
+    },
     getToolboxWorkspace: function(categoryNode) {
       if (categoryNode.attributes && categoryNode.attributes.name) {
         var categoryName = categoryNode.attributes.name.value;

accessible/tree.service.js

@@ -26,10 +26,12 @@
 
 blocklyApp.TreeService = ng.core
   .Class({
-    constructor: function() {
+    constructor: [
+        blocklyApp.NotificationsService, function(_notificationsService) {
       // Stores active descendant ids for each tree in the page.
       this.activeDescendantIds_ = {};
-    },
+      this.notificationsService = _notificationsService;
+    }],
     getToolboxTreeNode_: function() {
       return document.getElementById('blockly-toolbox-tree');
     },
@@ -75,30 +77,28 @@ blocklyApp.TreeService = ng.core
       for (var i = 0; i < trees.length; i++) {
         if (trees[i].id == treeId) {
           trees[i].focus();
-          return true;
+          return trees[i].id;
         }
       }
-      return false;
+      return null;
     },
-    focusOnNextTree_: function(treeId) {
+    getIdOfNextTree_: function(treeId) {
       var trees = this.getAllTreeNodes_();
       for (var i = 0; i < trees.length - 1; i++) {
         if (trees[i].id == treeId) {
-          trees[i + 1].focus();
+          return trees[i + 1].id;
-          return true;
         }
       }
-      return false;
+      return null;
     },
-    focusOnPreviousTree_: function(treeId) {
+    getIdOfPreviousTree_: function(treeId) {
       var trees = this.getAllTreeNodes_();
       for (var i = trees.length - 1; i > 0; i--) {
         if (trees[i].id == treeId) {
-          trees[i - 1].focus();
+          return trees[i - 1].id;
-          return true;
         }
       }
-      return false;
+      return null;
     },
     getActiveDescId: function(treeId) {
       return this.activeDescendantIds_[treeId] || '';
@@ -107,13 +107,11 @@ blocklyApp.TreeService = ng.core
       var activeDesc = document.getElementById(activeDescId);
       if (activeDesc) {
         activeDesc.classList.remove('blocklyActiveDescendant');
-        activeDesc.setAttribute('aria-selected', 'false');
       }
     },
     markActiveDesc_: function(activeDescId) {
       var newActiveDesc = document.getElementById(activeDescId);
       newActiveDesc.classList.add('blocklyActiveDescendant');
-      newActiveDesc.setAttribute('aria-selected', 'true');
     },
     // Runs the given function while preserving the focus and active descendant
     // for the given tree.
@@ -133,22 +131,68 @@ blocklyApp.TreeService = ng.core
         document.getElementById(treeId).focus();
       }, 0);
     },
+    // This clears the active descendant of the given tree. It is used just
+    // before the tree is deleted.
+    clearActiveDesc: function(treeId) {
+      this.unmarkActiveDesc_(this.getActiveDescId(treeId));
+      delete this.activeDescendantIds_[treeId];
+    },
     // Make a given node the active descendant of a given tree.
     setActiveDesc: function(newActiveDescId, treeId) {
       this.unmarkActiveDesc_(this.getActiveDescId(treeId));
       this.markActiveDesc_(newActiveDescId);
       this.activeDescendantIds_[treeId] = newActiveDescId;
+
+      // Scroll the new active desc into view, if needed. This has no effect
+      // for blind users, but is helpful for sighted onlookers.
+      var activeDescNode = document.getElementById(newActiveDescId);
+      var documentNode = document.body || document.documentElement;
+      if (activeDescNode.offsetTop < documentNode.scrollTop ||
+          activeDescNode.offsetTop >
+              documentNode.scrollTop + window.innerHeight) {
+        window.scrollTo(0, activeDescNode.offsetTop);
+      }
+    },
+    initActiveDesc: function(treeId) {
+      // Set the active desc to the first child in this tree.
+      var tree = document.getElementById(treeId);
+      this.setActiveDesc(this.getFirstChild(tree).id, treeId);
+    },
+    getTreeIdForBlock: function(blockId) {
+      // Walk up the DOM until we get to the root node of the tree.
+      var domNode = document.getElementById(blockId + 'blockRoot');
+      while (!domNode.classList.contains('blocklyTree')) {
+        domNode = domNode.parentNode;
+      }
+      return domNode.id;
+    },
+    focusOnBlock: function(blockId) {
+      // Set focus to the tree containing the given block, and set the active
+      // desc for this tree to the given block.
+      var domNode = document.getElementById(blockId + 'blockRoot');
+      // Walk up the DOM until we get to the root node of the tree.
+      while (!domNode.classList.contains('blocklyTree')) {
+        domNode = domNode.parentNode;
+      }
+      domNode.focus();
+
+      // We need to wait a while to set the active desc, because domNode takes
+      // a while to be given an ID if a new tree has just been created.
+      // TODO(sll): Make this more deterministic.
+      var that = this;
+      setTimeout(function() {
+        that.setActiveDesc(blockId + 'blockRoot', domNode.id);
+      }, 100);
     },
     onWorkspaceToolbarKeypress: function(e, treeId) {
       if (e.keyCode == 9) {
         // Tab key.
-        if (e.shiftKey) {
+        var destinationTreeId =
-          this.focusOnPreviousTree_(treeId);
+            e.shiftKey ? this.getIdOfPreviousTree_(treeId) :
-        } else {
+            this.getIdOfNextTree_(treeId);
-          this.focusOnNextTree_(treeId);
+        if (destinationTreeId) {
+          this.notifyUserAboutCurrentTree_(destinationTreeId);
         }
-        e.preventDefault();
-        e.stopPropagation();
       }
     },
     isButtonOrFieldNode_: function(node) {
@@ -181,42 +225,52 @@ blocklyApp.TreeService = ng.core
       // in the first place.
       console.error('Could not handle deletion of block.' + blockRootNode);
     },
+    notifyUserAboutCurrentTree_: function(treeId) {
+      if (this.getToolboxTreeNode_().id == treeId) {
+        this.notificationsService.setStatusMessage('Now in toolbox.');
+      } else {
+        var workspaceTreeNodes = this.getWorkspaceTreeNodes_();
+        for (var i = 0; i < workspaceTreeNodes.length; i++) {
+          if (workspaceTreeNodes[i].id == treeId) {
+            this.notificationsService.setStatusMessage(
+                'Now in workspace group ' + (i + 1) + ' of ' +
+                workspaceTreeNodes.length);
+          }
+        }
+      }
+    },
     onKeypress: function(e, tree) {
       var treeId = tree.id;
       var activeDesc = document.getElementById(this.getActiveDescId(treeId));
       if (!activeDesc) {
         console.error('ERROR: no active descendant for current tree.');
-
+        this.initActiveDesc(treeId);
-        // TODO(sll): Generalize this to other trees (outside the workspace).
-        var workspaceTreeNodes = this.getWorkspaceTreeNodes_();
-        for (var i = 0; i < workspaceTreeNodes.length; i++) {
-          if (workspaceTreeNodes[i].id == treeId) {
-            // Set the active desc to the first child in this tree.
-            this.setActiveDesc(
-                this.getFirstChild(workspaceTreeNodes[i]).id, treeId);
-            break;
-          }
-        }
         return;
       }
 
-      if (document.activeElement.tagName == 'INPUT') {
+      if (e.altKey || e.ctrlKey) {
+        // Do not intercept combinations such as Alt+Home.
+        return;
+      } else if (document.activeElement.tagName == 'INPUT') {
         // For input fields, only Esc and Tab keystrokes are handled specially.
         if (e.keyCode == 27 || e.keyCode == 9) {
           // For Esc and Tab keys, the focus is removed from the input field.
           this.focusOnCurrentTree_(treeId);
 
-          // In addition, for Tab keys, the user tabs to the previous/next tree.
           if (e.keyCode == 9) {
-            if (e.shiftKey) {
+            var destinationTreeId =
-              this.focusOnPreviousTree_(treeId);
+                e.shiftKey ? this.getIdOfPreviousTree_(treeId) :
-            } else {
+                this.getIdOfNextTree_(treeId);
-              this.focusOnNextTree_(treeId);
+            if (destinationTreeId) {
+              this.notifyUserAboutCurrentTree_(destinationTreeId);
             }
           }
 
-          e.preventDefault();
+          // Allow Tab keypresses to go through.
-          e.stopPropagation();
+          if (e.keyCode == 27) {
+            e.preventDefault();
+            e.stopPropagation();
+          }
         }
       } else {
         // Outside an input field, Enter, Tab and navigation keys are all
@@ -224,23 +278,41 @@ blocklyApp.TreeService = ng.core
         if (e.keyCode == 13) {
           // Enter key. The user wants to interact with a button or an input
           // field.
-          if (activeDesc.children.length == 1) {
+          // Algorithm to find the field: do a DFS through the children until
-            var child = activeDesc.children[0];
+          // we find an INPUT or BUTTON element (in which case we use it).
-            if (child.tagName == 'BUTTON') {
+          // Truncate the search at child LI elements.
-              child.click();
+          var dfsStack = Array.from(activeDesc.children);
-            } else if (child.tagName == 'INPUT') {
+          while (dfsStack.length) {
-              child.focus();
+            var currentNode = dfsStack.shift();
+            if (currentNode.tagName == 'BUTTON') {
+              this.moveActiveDescToParent(treeId);
+              currentNode.click();
+              break;
+            } else if (currentNode.tagName == 'INPUT') {
+              currentNode.focus();
+              this.notificationsService.setStatusMessage(
+                'Type a value, then press Escape to exit');
+              break;
+            } else if (currentNode.tagName == 'LI') {
+              continue;
+            }
+
+            if (currentNode.children) {
+              var reversedChildren = Array.from(currentNode.children).reverse();
+              reversedChildren.forEach(function(childNode) {
+                dfsStack.unshift(childNode);
+              });
             }
           }
         } else if (e.keyCode == 9) {
-          // Tab key.
+          // Tab key. Note that allowing the event to propagate through is
-          if (e.shiftKey) {
+          // intentional.
-            this.focusOnPreviousTree_(treeId);
+          var destinationTreeId =
-          } else {
+              e.shiftKey ? this.getIdOfPreviousTree_(treeId) :
-            this.focusOnNextTree_(treeId);
+              this.getIdOfNextTree_(treeId);
+          if (destinationTreeId) {
+            this.notifyUserAboutCurrentTree_(destinationTreeId);
           }
-          e.preventDefault();
-          e.stopPropagation();
         } else if (e.keyCode >= 35 && e.keyCode <= 40) {
           // End, home, and arrow keys.
           if (e.keyCode == 35) {
@@ -257,21 +329,15 @@ blocklyApp.TreeService = ng.core
             }
           } else if (e.keyCode == 37) {
             // Left arrow key. Go up a level, if possible.
-            var nextNode = activeDesc.parentNode;
+            this.moveActiveDescToParent(treeId);
-            if (this.isButtonOrFieldNode_(activeDesc)) {
-              nextNode = nextNode.parentNode;
-            }
-            while (nextNode && nextNode.tagName != 'LI') {
-              nextNode = nextNode.parentNode;
-            }
-            if (nextNode) {
-              this.setActiveDesc(nextNode.id, treeId);
-            }
           } else if (e.keyCode == 38) {
             // Up arrow key. Go to the previous sibling, if possible.
             var prevSibling = this.getPreviousSibling(activeDesc);
             if (prevSibling) {
               this.setActiveDesc(prevSibling.id, treeId);
+            } else {
+              this.notificationsService.setStatusMessage(
+                  'Reached top of list');
             }
           } else if (e.keyCode == 39) {
             // Right arrow key. Go down a level, if possible.
@@ -284,6 +350,9 @@ blocklyApp.TreeService = ng.core
             var nextSibling = this.getNextSibling(activeDesc);
             if (nextSibling) {
               this.setActiveDesc(nextSibling.id, treeId);
+            } else {
+              this.notificationsService.setStatusMessage(
+                  'Reached bottom of list');
             }
           }
 
@@ -292,6 +361,19 @@ blocklyApp.TreeService = ng.core
         }
       }
     },
+    moveActiveDescToParent: function(treeId) {
+      var activeDesc = document.getElementById(this.getActiveDescId(treeId));
+      var nextNode = activeDesc.parentNode;
+      if (this.isButtonOrFieldNode_(activeDesc)) {
+        nextNode = nextNode.parentNode;
+      }
+      while (nextNode && nextNode.tagName != 'LI') {
+        nextNode = nextNode.parentNode;
+      }
+      if (nextNode) {
+        this.setActiveDesc(nextNode.id, treeId);
+      }
+    },
     getFirstChild: function(element) {
       if (!element) {
         return element;

accessible/utils.service.js

@@ -41,20 +41,17 @@ blocklyApp.UtilsService = ng.core
       return idMap;
     },
     generateAriaLabelledByAttr: function(mainLabel, secondLabel, isDisabled) {
-      var attrValue = mainLabel + ' ' + secondLabel;
+      var attrValue = mainLabel + (secondLabel ? ' ' + secondLabel : '');
       if (isDisabled) {
         attrValue += ' blockly-disabled';
       }
       return attrValue;
     },
     getInputTypeLabel: function(connection) {
-      // Returns an upper case string in the case of official input type names.
+      // Returns the input type name, or 'any' if any official input type
-      // Returns the lower case string 'any' if any official input type qualifies.
+      // qualifies.
-      // The differentiation between upper and lower case signifies the difference
-      // between an input type (BOOLEAN, LIST, etc) and the colloquial english term
-      // 'any'.
       if (connection.check_) {
-        return connection.check_.join(', ').toUpperCase();
+        return connection.check_.join(', ');
       } else {
         return Blockly.Msg.ANY;
       }
@@ -65,5 +62,13 @@ blocklyApp.UtilsService = ng.core
       } else {
         return Blockly.Msg.VALUE;
       }
+    },
+    getBlockDescription: function(block) {
+      // We use 'BLANK' instead of the default '?' so that the string is read
+      // out. (By default, screen readers tend to ignore punctuation.)
+      return block.toString(undefined, 'BLANK');
+    },
+    isWorkspaceEmpty: function() {
+      return !blocklyApp.workspace.topBlocks_.length;
     }
   });

accessible/workspace-tree.component.js

@@ -29,56 +29,61 @@ blocklyApp.WorkspaceTreeComponent = ng.core
     selector: 'blockly-workspace-tree',
     template: `
     <li [id]="idMap['blockRoot']" role="treeitem" class="blocklyHasChildren"
-        [attr.aria-labelledBy]="generateAriaLabelledByAttr('blockly-block-summary', idMap['blockSummary'])"
+        [attr.aria-label]="getBlockDescription() + ' ' + ('WORKSPACE_BLOCK'|translate) + ' ' + ('SUBMENU_INDICATOR'|translate)"
-        [attr.aria-level]="level" aria-selected="false">
+        [attr.aria-level]="level">
-      <label [id]="idMap['blockSummary']">{{block.toString()}}</label>
+      <label [id]="idMap['blockSummary']">{{getBlockDescription()}}</label>
+
+      <ol role="group">
+        <template ngFor #inputBlock [ngForOf]="block.inputList" #i="index">
+          <li role="treeitem" [id]="idMap['listItem' + i]" [attr.aria-level]="level + 1" *ngIf="inputBlock.fieldRow.length"
+              [attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['fieldLabel' + i])">
+            <blockly-field *ngFor="#field of inputBlock.fieldRow" [field]="field" [mainFieldId]="idMap['fieldLabel' + i]">
+            </blockly-field>
+          </li>
+
+          <blockly-workspace-tree *ngIf="inputBlock.connection && inputBlock.connection.targetBlock()"
+                                  [block]="inputBlock.connection.targetBlock()" [level]="level + 1"
+                                  [tree]="tree">
+          </blockly-workspace-tree>
+          <li #inputList [id]="idMap['inputList' + i]" role="treeitem"
+              *ngIf="inputBlock.connection && !inputBlock.connection.targetBlock()"
+              [attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['inputMenuLabel' + i], 'blockly-submenu-indicator')"
+              [attr.aria-level]="level + 1"
+              (keydown)="treeService.onKeypress($event, tree)">
+            <label [id]="idMap['inputMenuLabel' + i]">
+              {{utilsService.getInputTypeLabel(inputBlock.connection)}} {{utilsService.getBlockTypeLabel(inputBlock)}} needed:
+            </label>
+            <ol role="group">
+              <li *ngFor="#fieldButtonInfo of fieldButtonsInfo"
+                  [id]="idMap[fieldButtonInfo.baseIdKey + i]" role="treeitem"
+                  [attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap[fieldButtonInfo.baseIdKey + 'Button' + i], 'blockly-button', fieldButtonInfo.isDisabled(inputBlock.connection))"
+                  [attr.aria-level]="level + 2">
+                <button [id]="idMap[fieldButtonInfo.baseIdKey + 'Button' + i]"
+                        (click)="fieldButtonInfo.action(inputBlock.connection)"
+                        [disabled]="fieldButtonInfo.isDisabled(inputBlock.connection)" tabindex="-1">
+                  {{fieldButtonInfo.translationIdForText|translate}}
+                </button>
+              </li>
+            </ol>
+          </li>
+        </template>
 
-      <ol role="group"  [attr.aria-level]="level + 1">
         <li [id]="idMap['listItem']" class="blocklyHasChildren" role="treeitem"
-            [attr.aria-labelledBy]="generateAriaLabelledByAttr('blockly-block-menu', idMap['blockSummary'])"
+            [attr.aria-labelledBy]="generateAriaLabelledByAttr('blockly-more-options', 'blockly-submenu-indicator')"
-            [attr.aria-level]="level+1" aria-selected="false">
+            [attr.aria-level]="level + 1">
-          <label [id]="idMap['label']">{{'BLOCK_ACTION_LIST'|translate}}</label>
+          <label [id]="idMap['label']">{{'MORE_OPTIONS'|translate}}</label>
-          <ol role="group"  [attr.aria-level]="level + 2">
+          <ol role="group">
             <li *ngFor="#buttonInfo of actionButtonsInfo"
                 [id]="idMap[buttonInfo.baseIdKey]" role="treeitem"
                 [attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap[buttonInfo.baseIdKey + 'Button'], 'blockly-button', buttonInfo.isDisabled())"
-                [attr.aria-level]="level + 2" aria-selected="false">
+                [attr.aria-level]="level + 2">
               <button [id]="idMap[buttonInfo.baseIdKey + 'Button']" (click)="buttonInfo.action()"
-                      [disabled]="buttonInfo.isDisabled()">
+                      [disabled]="buttonInfo.isDisabled()" tabindex="-1">
                 {{buttonInfo.translationIdForText|translate}}
               </button>
             </li>
           </ol>
         </li>
-
-        <div *ngFor="#inputBlock of block.inputList; #i = index">
-          <blockly-field *ngFor="#field of inputBlock.fieldRow" [field]="field"></blockly-field>
-          <blockly-workspace-tree *ngIf="inputBlock.connection && inputBlock.connection.targetBlock()"
-                                  [block]="inputBlock.connection.targetBlock()" [level]="level"
-                                  [tree]="tree">
-          </blockly-workspace-tree>
-          <li #inputList [attr.aria-level]="level + 1" [id]="idMap['inputList' + i]"
-              [attr.aria-labelledBy]="generateAriaLabelledByAttr('blockly-menu', idMap['inputMenuLabel' + i])"
-              *ngIf="inputBlock.connection && !inputBlock.connection.targetBlock()" (keydown)="treeService.onKeypress($event, tree)">
-            <!-- TODO(madeeha): i18n here will need to happen in a different way due to the way grammar changes based on language. -->
-            <label [id]="idMap['inputMenuLabel' + i]"> {{utilsService.getInputTypeLabel(inputBlock.connection)}} {{utilsService.getBlockTypeLabel(inputBlock)}} needed: </label>
-            <ol role="group"  [attr.aria-level]="level + 2">
-              <li [id]="idMap['markSpot' + i]" role="treeitem"
-                  [attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['markButton' + i], 'blockly-button')"
-                  [attr.aria-level]="level + 2" aria-selected=false>
-                <button [id]="idMap['markSpotButton + i']" (click)="clipboardService.markConnection(inputBlock.connection)">{{'MARK_THIS_SPOT'|translate}}</button>
-              </li>
-              <li [id]="idMap['paste' + i]" role="treeitem"
-                  [attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['pasteButton' + i], 'blockly-button', !isCompatibleWithClipboard(inputBlock.connection))"
-                  [attr.aria-level]="level+2" aria-selected=false>
-                <button [id]="idMap['pasteButton' + i]" (click)="clipboardService.pasteFromClipboard(inputBlock.connection)"
-                        [disabled]="!isCompatibleWithClipboard(inputBlock.connection)">
-                  {{'PASTE'|translate}}
-                </button>
-              </li>
-            </ol>
-          </li>
-        </div>
       </ol>
     </li>
 
@@ -95,23 +100,31 @@ blocklyApp.WorkspaceTreeComponent = ng.core
   })
   .Class({
     constructor: [
-        blocklyApp.ClipboardService, blocklyApp.TreeService,
+        blocklyApp.ClipboardService, blocklyApp.NotificationsService,
-        blocklyApp.UtilsService,
+        blocklyApp.TreeService, blocklyApp.UtilsService,
-        function(_clipboardService, _treeService, _utilsService) {
+        blocklyApp.AudioService,
-      this.infoBlocks = Object.create(null);
+        function(
+            _clipboardService, _notificationsService, _treeService,
+            _utilsService, _audioService) {
       this.clipboardService = _clipboardService;
+      this.notificationsService = _notificationsService;
       this.treeService = _treeService;
       this.utilsService = _utilsService;
+      this.audioService = _audioService;
     }],
+    getBlockDescription: function() {
+      return this.utilsService.getBlockDescription(this.block);
+    },
     isIsolatedTopLevelBlock_: function(block) {
       // Returns whether the given block is at the top level, and has no
       // siblings.
-      return Boolean(
+      var blockIsAtTopLevel = !block.getParent();
-          !block.nextConnection.targetConnection &&
+      var blockHasNoSiblings = (
-          !block.previousConnection.targetConnection &&
+          (!block.nextConnection ||
-          blocklyApp.workspace.topBlocks_.some(function(topBlock) {
+           !block.nextConnection.targetConnection) &&
-            return topBlock.id == block.id;
+          (!block.previousConnection ||
-          }));
+           !block.previousConnection.targetConnection));
+      return blockIsAtTopLevel && blockHasNoSiblings;
     },
     removeBlockAndSetFocus_: function(block, deleteBlockFunc) {
       // This method runs the given function and then does one of two things:
@@ -121,8 +134,13 @@ blocklyApp.WorkspaceTreeComponent = ng.core
       if (this.isIsolatedTopLevelBlock_(block)) {
         var nextNodeToFocusOn =
             this.treeService.getNodeToFocusOnWhenTreeIsDeleted(this.tree.id);
+
+        this.treeService.clearActiveDesc(this.tree.id);
         deleteBlockFunc();
-        nextNodeToFocusOn.focus();
+        // Invoke a digest cycle, so that the DOM settles.
+        setTimeout(function() {
+          nextNodeToFocusOn.focus();
+        });
       } else {
         var blockRootNode = document.getElementById(this.idMap['blockRoot']);
         var nextActiveDesc =
@@ -133,41 +151,105 @@ blocklyApp.WorkspaceTreeComponent = ng.core
       }
     },
     cutBlock_: function() {
+      var blockDescription = this.getBlockDescription();
+
       var that = this;
       this.removeBlockAndSetFocus_(this.block, function() {
         that.clipboardService.cut(that.block);
       });
+
+      setTimeout(function() {
+        if (that.utilsService.isWorkspaceEmpty()) {
+          that.notificationsService.setStatusMessage(
+              blockDescription + ' cut. Workspace is empty.');
+        } else {
+          that.notificationsService.setStatusMessage(
+              blockDescription + ' cut. Now on workspace.');
+        }
+      });
     },
     deleteBlock_: function() {
+      var blockDescription = this.getBlockDescription();
+
       var that = this;
       this.removeBlockAndSetFocus_(this.block, function() {
         that.block.dispose(true);
+        that.audioService.playDeleteSound();
+      });
+
+      setTimeout(function() {
+        if (that.utilsService.isWorkspaceEmpty()) {
+          that.notificationsService.setStatusMessage(
+              blockDescription + ' deleted. Workspace is empty.');
+        } else {
+          that.notificationsService.setStatusMessage(
+              blockDescription + ' deleted. Now on workspace.');
+        }
       });
     },
     pasteToConnection_: function(connection) {
+      var destinationTreeId = this.treeService.getTreeIdForBlock(
+          connection.getSourceBlock().id);
+      this.treeService.clearActiveDesc(destinationTreeId);
+
+      var newBlockId = this.clipboardService.pasteFromClipboard(connection);
+
+      // Invoke a digest cycle, so that the DOM settles.
       var that = this;
-      this.treeService.runWhilePreservingFocus(function() {
+      setTimeout(function() {
-        // If the connection is a 'previousConnection' and that connection is
+        that.treeService.focusOnBlock(newBlockId);
-        // already joined to something, use the 'nextConnection' of the
+      });
-        // previous block instead in order to do an insertion.
-        if (connection.type == Blockly.PREVIOUS_STATEMENT &&
-            connection.isConnected()) {
-          that.clipboardService.pasteFromClipboard(
-              connection.targetConnection);
-        } else {
-          that.clipboardService.pasteFromClipboard(connection);
-        }
-      }, this.tree.id);
     },
-    sendToMarkedSpot_: function() {
+    moveToMarkedSpot_: function() {
-      this.clipboardService.pasteToMarkedConnection(this.block, false);
+      var blockDescription = this.getBlockDescription();
+      var oldDestinationTreeId = this.treeService.getTreeIdForBlock(
+          this.clipboardService.getMarkedConnectionBlock().id);
+      this.treeService.clearActiveDesc(oldDestinationTreeId);
+
+      var newBlockId = this.clipboardService.pasteToMarkedConnection(
+          this.block);
 
       var that = this;
       this.removeBlockAndSetFocus_(this.block, function() {
         that.block.dispose(true);
       });
 
-      alert('Block moved to marked spot: ' + this.block.toString());
+      // Invoke a digest cycle, so that the DOM settles.
+      setTimeout(function() {
+        that.treeService.focusOnBlock(newBlockId);
+
+        var newDestinationTreeId = that.treeService.getTreeIdForBlock(
+            newBlockId);
+        if (newDestinationTreeId != oldDestinationTreeId) {
+          // It is possible for the tree ID for the pasted block to change
+          // after the paste operation, e.g. when inserting a block between two
+          // existing blocks that are joined together. In this case, we need to
+          // also reset the active desc for the old destination tree.
+          that.treeService.initActiveDesc(oldDestinationTreeId);
+        }
+
+        that.notificationsService.setStatusMessage(
+            blockDescription + ' ' +
+            Blockly.Msg.PASTED_BLOCK_TO_MARKED_SPOT_MSG +
+            '. Now on moved block in workspace.');
+      });
+    },
+    copyBlock_: function() {
+      this.clipboardService.copy(this.block);
+      this.notificationsService.setStatusMessage(
+          this.getBlockDescription() + ' ' + Blockly.Msg.COPIED_BLOCK_MSG);
+    },
+    markSpotBefore_: function() {
+      this.clipboardService.markConnection(this.block.previousConnection);
+    },
+    markSpotAfter_: function() {
+      this.clipboardService.markConnection(this.block.nextConnection);
+    },
+    pasteToNextConnection_: function() {
+      this.pasteToConnection_(this.block.nextConnection);
+    },
+    pasteToPreviousConnection_: function() {
+      this.pasteToConnection_(this.block.previousConnection);
     },
     ngOnInit: function() {
       var that = this;
@@ -183,50 +265,46 @@ blocklyApp.WorkspaceTreeComponent = ng.core
       }, {
         baseIdKey: 'copy',
         translationIdForText: 'COPY_BLOCK',
-        action: that.clipboardService.copy.bind(
+        action: that.copyBlock_.bind(that),
-            that.clipboardService, that.block, true),
         isDisabled: function() {
           return false;
         }
       }, {
-        baseIdKey: 'pasteBelow',
+        baseIdKey: 'pasteBefore',
-        translationIdForText: 'PASTE_BELOW',
+        translationIdForText: 'PASTE_BEFORE',
-        action: that.pasteToConnection_.bind(that, that.block.nextConnection),
+        action: that.pasteToPreviousConnection_.bind(that),
-        isDisabled: function() {
-          return Boolean(
-              !that.block.nextConnection ||
-              !that.isCompatibleWithClipboard(that.block.nextConnection));
-        }
-      }, {
-        baseIdKey: 'pasteAbove',
-        translationIdForText: 'PASTE_ABOVE',
-        action: that.pasteToConnection_.bind(
-            that, that.block.previousConnection),
         isDisabled: function() {
           return Boolean(
               !that.block.previousConnection ||
               !that.isCompatibleWithClipboard(that.block.previousConnection));
         }
       }, {
-        baseIdKey: 'markBelow',
+        baseIdKey: 'pasteAfter',
-        translationIdForText: 'MARK_SPOT_BELOW',
+        translationIdForText: 'PASTE_AFTER',
-        action: that.clipboardService.markConnection.bind(
+        action: that.pasteToNextConnection_.bind(that),
-            that.clipboardService, that.block.nextConnection),
         isDisabled: function() {
-          return !that.block.nextConnection;
+          return Boolean(
+              !that.block.nextConnection ||
+              !that.isCompatibleWithClipboard(that.block.nextConnection));
         }
       }, {
-        baseIdKey: 'markAbove',
+        baseIdKey: 'markBefore',
-        translationIdForText: 'MARK_SPOT_ABOVE',
+        translationIdForText: 'MARK_SPOT_BEFORE',
-        action: that.clipboardService.markConnection.bind(
+        action: that.markSpotBefore_.bind(that),
-            that.clipboardService, that.block.previousConnection),
         isDisabled: function() {
           return !that.block.previousConnection;
         }
       }, {
-        baseIdKey: 'sendToMarkedSpot',
+        baseIdKey: 'markAfter',
+        translationIdForText: 'MARK_SPOT_AFTER',
+        action: that.markSpotAfter_.bind(that),
+        isDisabled: function() {
+          return !that.block.nextConnection;
+        }
+      }, {
+        baseIdKey: 'moveToMarkedSpot',
         translationIdForText: 'MOVE_TO_MARKED_SPOT',
-        action: that.sendToMarkedSpot_.bind(that),
+        action: that.moveToMarkedSpot_.bind(that),
         isDisabled: function() {
           return !that.clipboardService.isMovableToMarkedConnection(
               that.block);
@@ -240,18 +318,43 @@ blocklyApp.WorkspaceTreeComponent = ng.core
         }
       }];
 
+      // Generate a list of action buttons.
+      this.fieldButtonsInfo = [{
+        baseIdKey: 'markSpot',
+        translationIdForText: 'MARK_THIS_SPOT',
+        action: function(connection) {
+          that.clipboardService.markConnection(connection);
+        },
+        isDisabled: function() {
+          return false;
+        }
+      }, {
+        baseIdKey: 'paste',
+        translationIdForText: 'PASTE',
+        action: function(connection) {
+          that.pasteToConnection_(connection);
+        },
+        isDisabled: function(connection) {
+          return !that.isCompatibleWithClipboard(connection);
+        }
+      }];
+
       // Make a list of all the id keys.
       this.idKeys = ['blockRoot', 'blockSummary', 'listItem', 'label'];
       this.actionButtonsInfo.forEach(function(buttonInfo) {
         that.idKeys.push(buttonInfo.baseIdKey, buttonInfo.baseIdKey + 'Button');
       });
+      this.fieldButtonsInfo.forEach(function(buttonInfo) {
+        for (var i = 0; i < that.block.inputList.length; i++) {
+          that.idKeys.push(
+              buttonInfo.baseIdKey + i, buttonInfo.baseIdKey + 'Button' + i);
+        }
+      });
       for (var i = 0; i < this.block.inputList.length; i++) {
         var inputBlock = this.block.inputList[i];
-        if (inputBlock.connection && !inputBlock.connection.targetBlock()) {
+        that.idKeys.push(
-          that.idKeys.push(
+            'inputList' + i, 'inputMenuLabel' + i, 'listItem' + i,
-              'inputList' + i, 'inputMenuLabel' + i, 'markSpot' + i,
+            'fieldLabel' + i);
-              'markSpotButton' + i, 'paste' + i, 'pasteButton' + i);
-        }
       }
     },
     ngDoCheck: function() {

accessible/workspace.component.js

@@ -47,7 +47,7 @@ blocklyApp.WorkspaceComponent = ng.core
 
     <div *ngIf="workspace">
       <ol #tree *ngFor="#block of workspace.topBlocks_; #i = index"
-          tabIndex="0" role="tree" class="blocklyTree blocklyWorkspaceTree"
+          tabindex="0" role="tree" class="blocklyTree blocklyWorkspaceTree"
           [attr.aria-activedescendant]="getActiveDescId(tree.id)"
           [attr.aria-labelledby]="workspaceTitle.id"
           (keydown)="onKeypress($event, tree)">
@@ -60,7 +60,9 @@ blocklyApp.WorkspaceComponent = ng.core
     pipes: [blocklyApp.TranslatePipe]
   })
   .Class({
-    constructor: [blocklyApp.TreeService, function(_treeService) {
+    constructor: [
+        blocklyApp.TreeService, blocklyApp.UtilsService,
+        function(_treeService, _utilsService) {
       // ACCESSIBLE_GLOBALS is a global variable defined by the containing
       // page. It should contain a key, toolbarButtonConfig, whose
       // corresponding value is an Array with two keys: 'text' and 'action'.
@@ -71,6 +73,7 @@ blocklyApp.WorkspaceComponent = ng.core
           ACCESSIBLE_GLOBALS.toolbarButtonConfig : [];
       this.workspace = blocklyApp.workspace;
       this.treeService = _treeService;
+      this.utilsService = _utilsService;
     }],
     clearWorkspace: function() {
       this.workspace.clear();
@@ -86,6 +89,6 @@ blocklyApp.WorkspaceComponent = ng.core
       this.treeService.onKeypress(e, tree);
     },
     isWorkspaceEmpty: function() {
-      return !this.workspace.topBlocks_.length;
+      return this.utilsService.isWorkspaceEmpty();
     }
   });

blockly_compressed.js

@@ -11,22 +11,23 @@ goog.setTestOnly=function(a){if(goog.DISALLOW_TEST_ONLY_CODE)throw a=a||"",Error
 goog.getObjectByName=function(a,b){for(var c=a.split("."),d=b||goog.global,e;e=c.shift();)if(goog.isDefAndNotNull(d[e]))d=d[e];else return null;return d};goog.globalize=function(a,b){var c=b||goog.global,d;for(d in a)c[d]=a[d]};
 goog.addDependency=function(a,b,c,d){if(goog.DEPENDENCIES_ENABLED){var e;a=a.replace(/\\/g,"/");var f=goog.dependencies_;d&&"boolean"!==typeof d||(d=d?{module:"goog"}:{});for(var g=0;e=b[g];g++)f.nameToPath[e]=a,f.loadFlags[a]=d;for(d=0;b=c[d];d++)a in f.requires||(f.requires[a]={}),f.requires[a][b]=!0}};goog.ENABLE_DEBUG_LOADER=!0;goog.logToConsole_=function(a){goog.global.console&&goog.global.console.error(a)};
 goog.require=function(a){if(!COMPILED){goog.ENABLE_DEBUG_LOADER&&goog.IS_OLD_IE_&&goog.maybeProcessDeferredDep_(a);if(goog.isProvided_(a))return goog.isInModuleLoader_()?goog.module.getInternal_(a):null;if(goog.ENABLE_DEBUG_LOADER){var b=goog.getPathFromDeps_(a);if(b)return goog.writeScripts_(b),null}a="goog.require could not find: "+a;goog.logToConsole_(a);throw Error(a);}};goog.basePath="";goog.nullFunction=function(){};
-goog.abstractMethod=function(){throw Error("unimplemented abstract method");};goog.addSingletonGetter=function(a){a.getInstance=function(){if(a.instance_)return a.instance_;goog.DEBUG&&(goog.instantiatedSingletons_[goog.instantiatedSingletons_.length]=a);return a.instance_=new a}};goog.instantiatedSingletons_=[];goog.LOAD_MODULE_USING_EVAL=!0;goog.SEAL_MODULE_EXPORTS=goog.DEBUG;goog.loadedModules_={};goog.DEPENDENCIES_ENABLED=!COMPILED&&goog.ENABLE_DEBUG_LOADER;goog.ALWAYS_TRANSPILE=!1;
+goog.abstractMethod=function(){throw Error("unimplemented abstract method");};goog.addSingletonGetter=function(a){a.getInstance=function(){if(a.instance_)return a.instance_;goog.DEBUG&&(goog.instantiatedSingletons_[goog.instantiatedSingletons_.length]=a);return a.instance_=new a}};goog.instantiatedSingletons_=[];goog.LOAD_MODULE_USING_EVAL=!0;goog.SEAL_MODULE_EXPORTS=goog.DEBUG;goog.loadedModules_={};goog.DEPENDENCIES_ENABLED=!COMPILED&&goog.ENABLE_DEBUG_LOADER;goog.TRANSPILE="detect";
-goog.NEVER_TRANSPILE=!1;
+goog.TRANSPILER="transpile.js";
 goog.DEPENDENCIES_ENABLED&&(goog.dependencies_={loadFlags:{},nameToPath:{},requires:{},visited:{},written:{},deferred:{}},goog.inHtmlDocument_=function(){var a=goog.global.document;return null!=a&&"write"in a},goog.findBasePath_=function(){if(goog.isDef(goog.global.CLOSURE_BASE_PATH))goog.basePath=goog.global.CLOSURE_BASE_PATH;else if(goog.inHtmlDocument_())for(var a=goog.global.document.getElementsByTagName("SCRIPT"),b=a.length-1;0<=b;--b){var c=a[b].src,d=c.lastIndexOf("?"),d=-1==d?c.length:d;if("base.js"==
 c.substr(d-7,7)){goog.basePath=c.substr(0,d-7);break}}},goog.importScript_=function(a,b){(goog.global.CLOSURE_IMPORT_SCRIPT||goog.writeScriptTag_)(a,b)&&(goog.dependencies_.written[a]=!0)},goog.IS_OLD_IE_=!(goog.global.atob||!goog.global.document||!goog.global.document.all),goog.importProcessedScript_=function(a,b,c){goog.importScript_("",'goog.retrieveAndExec_("'+a+'", '+b+", "+c+");")},goog.queuedModules_=[],goog.wrapModule_=function(a,b){return goog.LOAD_MODULE_USING_EVAL&&goog.isDef(goog.global.JSON)?
 "goog.loadModule("+goog.global.JSON.stringify(b+"\n//# sourceURL="+a+"\n")+");":'goog.loadModule(function(exports) {"use strict";'+b+"\n;return exports});\n//# sourceURL="+a+"\n"},goog.loadQueuedModules_=function(){var a=goog.queuedModules_.length;if(0<a){var b=goog.queuedModules_;goog.queuedModules_=[];for(var c=0;c<a;c++)goog.maybeProcessDeferredPath_(b[c])}},goog.maybeProcessDeferredDep_=function(a){goog.isDeferredModule_(a)&&goog.allDepsAreAvailable_(a)&&(a=goog.getPathFromDeps_(a),goog.maybeProcessDeferredPath_(goog.basePath+
 a))},goog.isDeferredModule_=function(a){var b=(a=goog.getPathFromDeps_(a))&&goog.dependencies_.loadFlags[a]||{};return a&&("goog"==b.module||goog.needsTranspile_(b.lang))?goog.basePath+a in goog.dependencies_.deferred:!1},goog.allDepsAreAvailable_=function(a){if((a=goog.getPathFromDeps_(a))&&a in goog.dependencies_.requires)for(var b in goog.dependencies_.requires[a])if(!goog.isProvided_(b)&&!goog.isDeferredModule_(b))return!1;return!0},goog.maybeProcessDeferredPath_=function(a){if(a in goog.dependencies_.deferred){var b=
-goog.dependencies_.deferred[a];delete goog.dependencies_.deferred[a];goog.globalEval(b)}},goog.loadModuleFromUrl=function(a){goog.retrieveAndExec_(a,!0,!1)},goog.loadModule=function(a){var b=goog.moduleLoaderState_;try{goog.moduleLoaderState_={moduleName:void 0,declareLegacyNamespace:!1};var c;if(goog.isFunction(a))c=a.call(goog.global,{});else if(goog.isString(a))c=goog.loadModuleFromSource_.call(goog.global,a);else throw Error("Invalid module definition");var d=goog.moduleLoaderState_.moduleName;
+goog.dependencies_.deferred[a];delete goog.dependencies_.deferred[a];goog.globalEval(b)}},goog.loadModuleFromUrl=function(a){goog.retrieveAndExec_(a,!0,!1)},goog.writeScriptSrcNode_=function(a){goog.global.document.write('<script type="text/javascript" src="'+a+'">\x3c/script>')},goog.appendScriptSrcNode_=function(a){var b=goog.global.document,c=b.createElement("script");c.type="text/javascript";c.src=a;c.defer=!1;c.async=!1;b.head.appendChild(c)},goog.writeScriptTag_=function(a,b){if(goog.inHtmlDocument_()){var c=
-if(!goog.isString(d)||!d)throw Error('Invalid module name "'+d+'"');goog.moduleLoaderState_.declareLegacyNamespace?goog.constructNamespace_(d,c):goog.SEAL_MODULE_EXPORTS&&Object.seal&&Object.seal(c);goog.loadedModules_[d]=c}finally{goog.moduleLoaderState_=b}},goog.loadModuleFromSource_=function(a){eval(a);return{}},goog.writeScriptSrcNode_=function(a){goog.global.document.write('<script type="text/javascript" src="'+a+'">\x3c/script>')},goog.appendScriptSrcNode_=function(a){var b=goog.global.document,
+goog.global.document;if(!goog.ENABLE_CHROME_APP_SAFE_SCRIPT_LOADING&&"complete"==c.readyState){if(/\bdeps.js$/.test(a))return!1;throw Error('Cannot write "'+a+'" after document load');}if(void 0===b)if(goog.IS_OLD_IE_){var d=" onreadystatechange='goog.onScriptLoad_(this, "+ ++goog.lastNonModuleScriptIndex_+")' ";c.write('<script type="text/javascript" src="'+a+'"'+d+">\x3c/script>")}else goog.ENABLE_CHROME_APP_SAFE_SCRIPT_LOADING?goog.appendScriptSrcNode_(a):goog.writeScriptSrcNode_(a);else c.write('<script type="text/javascript">'+
-c=b.createElement("script");c.type="text/javascript";c.src=a;c.defer=!1;c.async=!1;b.head.appendChild(c)},goog.writeScriptTag_=function(a,b){if(goog.inHtmlDocument_()){var c=goog.global.document;if(!goog.ENABLE_CHROME_APP_SAFE_SCRIPT_LOADING&&"complete"==c.readyState){if(/\bdeps.js$/.test(a))return!1;throw Error('Cannot write "'+a+'" after document load');}if(void 0===b)if(goog.IS_OLD_IE_){var d=" onreadystatechange='goog.onScriptLoad_(this, "+ ++goog.lastNonModuleScriptIndex_+")' ";c.write('<script type="text/javascript" src="'+
+b+"\x3c/script>");return!0}return!1},goog.needsTranspile_=function(a){if("always"==goog.TRANSPILE)return!0;if("never"==goog.TRANSPILE)return!1;if(!goog.transpiledLanguages_){goog.transpiledLanguages_={es5:!0,es6:!0,"es6-impl":!0};try{goog.transpiledLanguages_.es5=eval("[1,].length!=1"),eval('(()=>{"use strict";let a={};const X=class{constructor(){}x(z){return new Map([...arguments]).get(z[0])==3}};return new X().x([a,3])})()')&&(goog.transpiledLanguages_["es6-impl"]=!1),eval('(()=>{"use strict";class X{constructor(){if(new.target!=String)throw 1;this.x=42}}let q=Reflect.construct(X,[],String);if(q.x!=42||!(q instanceof String))throw 1;for(const a of[2,3]){if(a==2)continue;function f(z={a}){let a=0;return z.a}{function f(){return 0;}}return f()==3}})()')&&
-a+'"'+d+">\x3c/script>")}else goog.ENABLE_CHROME_APP_SAFE_SCRIPT_LOADING?goog.appendScriptSrcNode_(a):goog.writeScriptSrcNode_(a);else c.write('<script type="text/javascript">'+b+"\x3c/script>");return!0}return!1},goog.needsTranspile_=function(a){if(goog.ALWAYS_TRANSPILE)return!0;if(goog.NEVER_TRANSPILE)return!1;if(!goog.transpiledLanguages_){goog.transpiledLanguages_={es5:!0,es6:!0,"es6-impl":!0};try{goog.transpiledLanguages_.es5=eval("[1,].length!=1"),eval('(()=>{"use strict";let a={};const X=class{constructor(){}x(z){return new Map([...arguments]).get(z[0])==3}};return new X().x([a,3])})()')&&
+(goog.transpiledLanguages_.es6=!1)}catch(b){}}return!!goog.transpiledLanguages_[a]},goog.transpiledLanguages_=null,goog.lastNonModuleScriptIndex_=0,goog.onScriptLoad_=function(a,b){"complete"==a.readyState&&goog.lastNonModuleScriptIndex_==b&&goog.loadQueuedModules_();return!0},goog.writeScripts_=function(a){function b(a){if(!(a in e.written||a in e.visited)){e.visited[a]=!0;if(a in e.requires)for(var f in e.requires[a])if(!goog.isProvided_(f))if(f in e.nameToPath)b(e.nameToPath[f]);else throw Error("Undefined nameToPath for "+
-(goog.transpiledLanguages_["es6-impl"]=!1),eval('(()=>{"use strict";class X{constructor(){if(new.target!=String)throw 1;this.x=42}}let q=Reflect.construct(X,[],String);if(q.x!=42||!(q instanceof String))throw 1;for(const a of[2,3]){if(a==2)continue;function f(z={a}){let a=0;return z.a}{function f(){return 0;}}return f()==3}})()')&&(goog.transpiledLanguages_.es6=!1)}catch(b){}}return!!goog.transpiledLanguages_[a]},goog.transpiledLanguages_=null,goog.lastNonModuleScriptIndex_=0,goog.onScriptLoad_=function(a,
+f);a in d||(d[a]=!0,c.push(a))}}var c=[],d={},e=goog.dependencies_;b(a);for(a=0;a<c.length;a++){var f=c[a];goog.dependencies_.written[f]=!0}var g=goog.moduleLoaderState_;goog.moduleLoaderState_=null;for(a=0;a<c.length;a++)if(f=c[a]){var h=e.loadFlags[f]||{},k=goog.needsTranspile_(h.lang);"goog"==h.module||k?goog.importProcessedScript_(goog.basePath+f,"goog"==h.module,k):goog.importScript_(goog.basePath+f)}else throw goog.moduleLoaderState_=g,Error("Undefined script input");goog.moduleLoaderState_=
-b){"complete"==a.readyState&&goog.lastNonModuleScriptIndex_==b&&goog.loadQueuedModules_();return!0},goog.writeScripts_=function(a){function b(a){if(!(a in e.written||a in e.visited)){e.visited[a]=!0;if(a in e.requires)for(var f in e.requires[a])if(!goog.isProvided_(f))if(f in e.nameToPath)b(e.nameToPath[f]);else throw Error("Undefined nameToPath for "+f);a in d||(d[a]=!0,c.push(a))}}var c=[],d={},e=goog.dependencies_;b(a);for(a=0;a<c.length;a++){var f=c[a];goog.dependencies_.written[f]=!0}var g=goog.moduleLoaderState_;
+g},goog.getPathFromDeps_=function(a){return a in goog.dependencies_.nameToPath?goog.dependencies_.nameToPath[a]:null},goog.findBasePath_(),goog.global.CLOSURE_NO_DEPS||goog.importScript_(goog.basePath+"deps.js"));
-goog.moduleLoaderState_=null;for(a=0;a<c.length;a++)if(f=c[a]){var h=e.loadFlags[f]||{},k=goog.needsTranspile_(h.lang);"goog"==h.module||k?goog.importProcessedScript_(goog.basePath+f,"goog"==h.module,k):goog.importScript_(goog.basePath+f)}else throw goog.moduleLoaderState_=g,Error("Undefined script input");goog.moduleLoaderState_=g},goog.getPathFromDeps_=function(a){return a in goog.dependencies_.nameToPath?goog.dependencies_.nameToPath[a]:null},goog.findBasePath_(),goog.global.CLOSURE_NO_DEPS||goog.importScript_(goog.basePath+
+goog.loadModule=function(a){var b=goog.moduleLoaderState_;try{goog.moduleLoaderState_={moduleName:void 0,declareLegacyNamespace:!1};var c;if(goog.isFunction(a))c=a.call(void 0,{});else if(goog.isString(a))c=goog.loadModuleFromSource_.call(void 0,a);else throw Error("Invalid module definition");var d=goog.moduleLoaderState_.moduleName;if(!goog.isString(d)||!d)throw Error('Invalid module name "'+d+'"');goog.moduleLoaderState_.declareLegacyNamespace?goog.constructNamespace_(d,c):goog.SEAL_MODULE_EXPORTS&&
-"deps.js"));goog.normalizePath_=function(a){a=a.split("/");for(var b=0;b<a.length;)"."==a[b]?a.splice(b,1):b&&".."==a[b]&&a[b-1]&&".."!=a[b-1]?a.splice(--b,2):b++;return a.join("/")};goog.loadFileSync_=function(a){if(goog.global.CLOSURE_LOAD_FILE_SYNC)return goog.global.CLOSURE_LOAD_FILE_SYNC(a);var b=new goog.global.XMLHttpRequest;b.open("get",a,!1);b.send();return 200==b.status?b.responseText:null};
+Object.seal&&Object.seal(c);goog.loadedModules_[d]=c}finally{goog.moduleLoaderState_=b}};goog.loadModuleFromSource_=function(a){eval(a);return{}};goog.normalizePath_=function(a){a=a.split("/");for(var b=0;b<a.length;)"."==a[b]?a.splice(b,1):b&&".."==a[b]&&a[b-1]&&".."!=a[b-1]?a.splice(--b,2):b++;return a.join("/")};
+goog.loadFileSync_=function(a){if(goog.global.CLOSURE_LOAD_FILE_SYNC)return goog.global.CLOSURE_LOAD_FILE_SYNC(a);try{var b=new goog.global.XMLHttpRequest;b.open("get",a,!1);b.send();return 0==b.status||200==b.status?b.responseText:null}catch(c){return null}};
 goog.retrieveAndExec_=function(a,b,c){if(!COMPILED){var d=a;a=goog.normalizePath_(a);var e=goog.global.CLOSURE_IMPORT_SCRIPT||goog.writeScriptTag_,f=goog.loadFileSync_(a);if(null==f)throw Error('Load of "'+a+'" failed');c&&(f=goog.transpile_.call(goog.global,f,a));f=b?goog.wrapModule_(a,f):f+("\n//# sourceURL="+a);goog.IS_OLD_IE_?(goog.dependencies_.deferred[d]=f,goog.queuedModules_.push(d)):e(a,f)}};
-goog.transpile_=function(a,b){var c=goog.global.$jscomp;c||(goog.global.$jscomp=c={});var d=c.transpile;if(!d){var e=goog.basePath+"transpile.js",f=goog.loadFileSync_(e);f&&(eval(f+"\n//# sourceURL="+e),c=goog.global.$jscomp,d=c.transpile)}d||(d=c.transpile=function(a,b){goog.logToConsole_(b+" requires transpilation but no transpiler was found.");return a});return d(a,b)};
+goog.transpile_=function(a,b){var c=goog.global.$jscomp;c||(goog.global.$jscomp=c={});var d=c.transpile;if(!d){var e=goog.basePath+goog.TRANSPILER,f=goog.loadFileSync_(e);f&&(eval(f+"\n//# sourceURL="+e),c=goog.global.$jscomp,d=c.transpile)}d||(d=c.transpile=function(a,b){goog.logToConsole_(b+" requires transpilation but no transpiler was found.");return a});return d(a,b)};
 goog.typeOf=function(a){var b=typeof a;if("object"==b)if(a){if(a instanceof Array)return"array";if(a instanceof Object)return b;var c=Object.prototype.toString.call(a);if("[object Window]"==c)return"object";if("[object Array]"==c||"number"==typeof a.length&&"undefined"!=typeof a.splice&&"undefined"!=typeof a.propertyIsEnumerable&&!a.propertyIsEnumerable("splice"))return"array";if("[object Function]"==c||"undefined"!=typeof a.call&&"undefined"!=typeof a.propertyIsEnumerable&&!a.propertyIsEnumerable("call"))return"function"}else return"null";
 else if("function"==b&&"undefined"==typeof a.call)return"object";return b};goog.isNull=function(a){return null===a};goog.isDefAndNotNull=function(a){return null!=a};goog.isArray=function(a){return"array"==goog.typeOf(a)};goog.isArrayLike=function(a){var b=goog.typeOf(a);return"array"==b||"object"==b&&"number"==typeof a.length};goog.isDateLike=function(a){return goog.isObject(a)&&"function"==typeof a.getFullYear};goog.isString=function(a){return"string"==typeof a};
 goog.isBoolean=function(a){return"boolean"==typeof a};goog.isNumber=function(a){return"number"==typeof a};goog.isFunction=function(a){return"function"==goog.typeOf(a)};goog.isObject=function(a){var b=typeof a;return"object"==b&&null!=a||"function"==b};goog.getUid=function(a){return a[goog.UID_PROPERTY_]||(a[goog.UID_PROPERTY_]=++goog.uidCounter_)};goog.hasUid=function(a){return!!a[goog.UID_PROPERTY_]};
@@ -191,8 +192,8 @@ goog.html.SafeHtml.unwrap=function(a){if(a instanceof goog.html.SafeHtml&&a.cons
 goog.html.SafeHtml.htmlEscape=function(a){if(a instanceof goog.html.SafeHtml)return a;var b=null;a.implementsGoogI18nBidiDirectionalString&&(b=a.getDirection());a=a.implementsGoogStringTypedString?a.getTypedStringValue():String(a);return goog.html.SafeHtml.createSafeHtmlSecurityPrivateDoNotAccessOrElse(goog.string.htmlEscape(a),b)};
 goog.html.SafeHtml.htmlEscapePreservingNewlines=function(a){if(a instanceof goog.html.SafeHtml)return a;a=goog.html.SafeHtml.htmlEscape(a);return goog.html.SafeHtml.createSafeHtmlSecurityPrivateDoNotAccessOrElse(goog.string.newLineToBr(goog.html.SafeHtml.unwrap(a)),a.getDirection())};
 goog.html.SafeHtml.htmlEscapePreservingNewlinesAndSpaces=function(a){if(a instanceof goog.html.SafeHtml)return a;a=goog.html.SafeHtml.htmlEscape(a);return goog.html.SafeHtml.createSafeHtmlSecurityPrivateDoNotAccessOrElse(goog.string.whitespaceEscape(goog.html.SafeHtml.unwrap(a)),a.getDirection())};goog.html.SafeHtml.from=goog.html.SafeHtml.htmlEscape;goog.html.SafeHtml.VALID_NAMES_IN_TAG_=/^[a-zA-Z0-9-]+$/;
-goog.html.SafeHtml.URL_ATTRIBUTES_={action:!0,cite:!0,data:!0,formaction:!0,href:!0,manifest:!0,poster:!0,src:!0};goog.html.SafeHtml.NOT_ALLOWED_TAG_NAMES_=goog.object.createSet(goog.dom.TagName.APPLET,goog.dom.TagName.BASE,goog.dom.TagName.EMBED,goog.dom.TagName.IFRAME,goog.dom.TagName.LINK,goog.dom.TagName.MATH,goog.dom.TagName.META,goog.dom.TagName.OBJECT,goog.dom.TagName.SCRIPT,goog.dom.TagName.STYLE,goog.dom.TagName.SVG,goog.dom.TagName.TEMPLATE);
+goog.html.SafeHtml.URL_ATTRIBUTES_={action:!0,cite:!0,data:!0,formaction:!0,href:!0,manifest:!0,poster:!0,src:!0};goog.html.SafeHtml.NOT_ALLOWED_TAG_NAMES_={APPLET:!0,BASE:!0,EMBED:!0,IFRAME:!0,LINK:!0,MATH:!0,META:!0,OBJECT:!0,SCRIPT:!0,STYLE:!0,SVG:!0,TEMPLATE:!0};goog.html.SafeHtml.create=function(a,b,c){goog.html.SafeHtml.verifyTagName(a);return goog.html.SafeHtml.createSafeHtmlTagSecurityPrivateDoNotAccessOrElse(a,b,c)};
-goog.html.SafeHtml.create=function(a,b,c){goog.html.SafeHtml.verifyTagName(a);return goog.html.SafeHtml.createSafeHtmlTagSecurityPrivateDoNotAccessOrElse(a,b,c)};goog.html.SafeHtml.verifyTagName=function(a){if(!goog.html.SafeHtml.VALID_NAMES_IN_TAG_.test(a))throw Error("Invalid tag name <"+a+">.");if(a.toUpperCase()in goog.html.SafeHtml.NOT_ALLOWED_TAG_NAMES_)throw Error("Tag name <"+a+"> is not allowed for SafeHtml.");};
+goog.html.SafeHtml.verifyTagName=function(a){if(!goog.html.SafeHtml.VALID_NAMES_IN_TAG_.test(a))throw Error("Invalid tag name <"+a+">.");if(a.toUpperCase()in goog.html.SafeHtml.NOT_ALLOWED_TAG_NAMES_)throw Error("Tag name <"+a+"> is not allowed for SafeHtml.");};
 goog.html.SafeHtml.createIframe=function(a,b,c,d){a&&goog.html.TrustedResourceUrl.unwrap(a);var e={};e.src=a||null;e.srcdoc=b&&goog.html.SafeHtml.unwrap(b);a=goog.html.SafeHtml.combineAttributes(e,{sandbox:""},c);return goog.html.SafeHtml.createSafeHtmlTagSecurityPrivateDoNotAccessOrElse("iframe",a,d)};
 goog.html.SafeHtml.createSandboxIframe=function(a,b,c,d){if(!goog.html.SafeHtml.canUseSandboxIframe())throw Error("The browser does not support sandboxed iframes.");var e={};e.src=a?goog.html.SafeUrl.unwrap(goog.html.SafeUrl.sanitize(a)):null;e.srcdoc=b||null;e.sandbox="";a=goog.html.SafeHtml.combineAttributes(e,{},c);return goog.html.SafeHtml.createSafeHtmlTagSecurityPrivateDoNotAccessOrElse("iframe",a,d)};
 goog.html.SafeHtml.canUseSandboxIframe=function(){return goog.global.HTMLIFrameElement&&"sandbox"in goog.global.HTMLIFrameElement.prototype};goog.html.SafeHtml.createScriptSrc=function(a,b){goog.html.TrustedResourceUrl.unwrap(a);var c=goog.html.SafeHtml.combineAttributes({src:a},{},b);return goog.html.SafeHtml.createSafeHtmlTagSecurityPrivateDoNotAccessOrElse("script",c)};
@@ -211,7 +212,15 @@ goog.dom.safe.setAnchorHref=function(a,b){var c;c=b instanceof goog.html.SafeUrl
 goog.dom.safe.setIframeSrc=function(a,b){a.src=goog.html.TrustedResourceUrl.unwrap(b)};
 goog.dom.safe.setLinkHrefAndRel=function(a,b,c){a.rel=c;goog.string.caseInsensitiveContains(c,"stylesheet")?(goog.asserts.assert(b instanceof goog.html.TrustedResourceUrl,'URL must be TrustedResourceUrl because "rel" contains "stylesheet"'),a.href=goog.html.TrustedResourceUrl.unwrap(b)):a.href=b instanceof goog.html.TrustedResourceUrl?goog.html.TrustedResourceUrl.unwrap(b):b instanceof goog.html.SafeUrl?goog.html.SafeUrl.unwrap(b):goog.html.SafeUrl.sanitize(b).getTypedStringValue()};
 goog.dom.safe.setObjectData=function(a,b){a.data=goog.html.TrustedResourceUrl.unwrap(b)};goog.dom.safe.setScriptSrc=function(a,b){a.src=goog.html.TrustedResourceUrl.unwrap(b)};goog.dom.safe.setLocationHref=function(a,b){var c;c=b instanceof goog.html.SafeUrl?b:goog.html.SafeUrl.sanitize(b);a.href=goog.html.SafeUrl.unwrap(c)};
-goog.dom.safe.openInWindow=function(a,b,c,d,e){a=a instanceof goog.html.SafeUrl?a:goog.html.SafeUrl.sanitize(a);return(b||window).open(goog.html.SafeUrl.unwrap(a),c?goog.string.Const.unwrap(c):"",d,e)};goog.math.Coordinate=function(a,b){this.x=goog.isDef(a)?a:0;this.y=goog.isDef(b)?b:0};goog.math.Coordinate.prototype.clone=function(){return new goog.math.Coordinate(this.x,this.y)};goog.DEBUG&&(goog.math.Coordinate.prototype.toString=function(){return"("+this.x+", "+this.y+")"});goog.math.Coordinate.equals=function(a,b){return a==b?!0:a&&b?a.x==b.x&&a.y==b.y:!1};goog.math.Coordinate.distance=function(a,b){var c=a.x-b.x,d=a.y-b.y;return Math.sqrt(c*c+d*d)};
+goog.dom.safe.openInWindow=function(a,b,c,d,e){a=a instanceof goog.html.SafeUrl?a:goog.html.SafeUrl.sanitize(a);return(b||window).open(goog.html.SafeUrl.unwrap(a),c?goog.string.Const.unwrap(c):"",d,e)};goog.html.SafeScript=function(){this.privateDoNotAccessOrElseSafeScriptWrappedValue_="";this.SAFE_SCRIPT_TYPE_MARKER_GOOG_HTML_SECURITY_PRIVATE_=goog.html.SafeScript.TYPE_MARKER_GOOG_HTML_SECURITY_PRIVATE_};goog.html.SafeScript.prototype.implementsGoogStringTypedString=!0;goog.html.SafeScript.TYPE_MARKER_GOOG_HTML_SECURITY_PRIVATE_={};goog.html.SafeScript.fromConstant=function(a){a=goog.string.Const.unwrap(a);return 0===a.length?goog.html.SafeScript.EMPTY:goog.html.SafeScript.createSafeScriptSecurityPrivateDoNotAccessOrElse(a)};
+goog.html.SafeScript.prototype.getTypedStringValue=function(){return this.privateDoNotAccessOrElseSafeScriptWrappedValue_};goog.DEBUG&&(goog.html.SafeScript.prototype.toString=function(){return"SafeScript{"+this.privateDoNotAccessOrElseSafeScriptWrappedValue_+"}"});
+goog.html.SafeScript.unwrap=function(a){if(a instanceof goog.html.SafeScript&&a.constructor===goog.html.SafeScript&&a.SAFE_SCRIPT_TYPE_MARKER_GOOG_HTML_SECURITY_PRIVATE_===goog.html.SafeScript.TYPE_MARKER_GOOG_HTML_SECURITY_PRIVATE_)return a.privateDoNotAccessOrElseSafeScriptWrappedValue_;goog.asserts.fail("expected object of type SafeScript, got '"+a+"' of type "+goog.typeOf(a));return"type_error:SafeScript"};goog.html.SafeScript.createSafeScriptSecurityPrivateDoNotAccessOrElse=function(a){return(new goog.html.SafeScript).initSecurityPrivateDoNotAccessOrElse_(a)};
+goog.html.SafeScript.prototype.initSecurityPrivateDoNotAccessOrElse_=function(a){this.privateDoNotAccessOrElseSafeScriptWrappedValue_=a;return this};goog.html.SafeScript.EMPTY=goog.html.SafeScript.createSafeScriptSecurityPrivateDoNotAccessOrElse("");goog.html.uncheckedconversions={};goog.html.uncheckedconversions.safeHtmlFromStringKnownToSatisfyTypeContract=function(a,b,c){goog.asserts.assertString(goog.string.Const.unwrap(a),"must provide justification");goog.asserts.assert(!goog.string.isEmptyOrWhitespace(goog.string.Const.unwrap(a)),"must provide non-empty justification");return goog.html.SafeHtml.createSafeHtmlSecurityPrivateDoNotAccessOrElse(b,c||null)};
+goog.html.uncheckedconversions.safeScriptFromStringKnownToSatisfyTypeContract=function(a,b){goog.asserts.assertString(goog.string.Const.unwrap(a),"must provide justification");goog.asserts.assert(!goog.string.isEmpty(goog.string.Const.unwrap(a)),"must provide non-empty justification");return goog.html.SafeScript.createSafeScriptSecurityPrivateDoNotAccessOrElse(b)};
+goog.html.uncheckedconversions.safeStyleFromStringKnownToSatisfyTypeContract=function(a,b){goog.asserts.assertString(goog.string.Const.unwrap(a),"must provide justification");goog.asserts.assert(!goog.string.isEmptyOrWhitespace(goog.string.Const.unwrap(a)),"must provide non-empty justification");return goog.html.SafeStyle.createSafeStyleSecurityPrivateDoNotAccessOrElse(b)};
+goog.html.uncheckedconversions.safeStyleSheetFromStringKnownToSatisfyTypeContract=function(a,b){goog.asserts.assertString(goog.string.Const.unwrap(a),"must provide justification");goog.asserts.assert(!goog.string.isEmptyOrWhitespace(goog.string.Const.unwrap(a)),"must provide non-empty justification");return goog.html.SafeStyleSheet.createSafeStyleSheetSecurityPrivateDoNotAccessOrElse(b)};
+goog.html.uncheckedconversions.safeUrlFromStringKnownToSatisfyTypeContract=function(a,b){goog.asserts.assertString(goog.string.Const.unwrap(a),"must provide justification");goog.asserts.assert(!goog.string.isEmptyOrWhitespace(goog.string.Const.unwrap(a)),"must provide non-empty justification");return goog.html.SafeUrl.createSafeUrlSecurityPrivateDoNotAccessOrElse(b)};
+goog.html.uncheckedconversions.trustedResourceUrlFromStringKnownToSatisfyTypeContract=function(a,b){goog.asserts.assertString(goog.string.Const.unwrap(a),"must provide justification");goog.asserts.assert(!goog.string.isEmptyOrWhitespace(goog.string.Const.unwrap(a)),"must provide non-empty justification");return goog.html.TrustedResourceUrl.createTrustedResourceUrlSecurityPrivateDoNotAccessOrElse(b)};goog.math.Coordinate=function(a,b){this.x=goog.isDef(a)?a:0;this.y=goog.isDef(b)?b:0};goog.math.Coordinate.prototype.clone=function(){return new goog.math.Coordinate(this.x,this.y)};goog.DEBUG&&(goog.math.Coordinate.prototype.toString=function(){return"("+this.x+", "+this.y+")"});goog.math.Coordinate.equals=function(a,b){return a==b?!0:a&&b?a.x==b.x&&a.y==b.y:!1};goog.math.Coordinate.distance=function(a,b){var c=a.x-b.x,d=a.y-b.y;return Math.sqrt(c*c+d*d)};
 goog.math.Coordinate.magnitude=function(a){return Math.sqrt(a.x*a.x+a.y*a.y)};goog.math.Coordinate.azimuth=function(a){return goog.math.angle(0,0,a.x,a.y)};goog.math.Coordinate.squaredDistance=function(a,b){var c=a.x-b.x,d=a.y-b.y;return c*c+d*d};goog.math.Coordinate.difference=function(a,b){return new goog.math.Coordinate(a.x-b.x,a.y-b.y)};goog.math.Coordinate.sum=function(a,b){return new goog.math.Coordinate(a.x+b.x,a.y+b.y)};
 goog.math.Coordinate.prototype.ceil=function(){this.x=Math.ceil(this.x);this.y=Math.ceil(this.y);return this};goog.math.Coordinate.prototype.floor=function(){this.x=Math.floor(this.x);this.y=Math.floor(this.y);return this};goog.math.Coordinate.prototype.round=function(){this.x=Math.round(this.x);this.y=Math.round(this.y);return this};
 goog.math.Coordinate.prototype.translate=function(a,b){a instanceof goog.math.Coordinate?(this.x+=a.x,this.y+=a.y):(this.x+=Number(a),goog.isNumber(b)&&(this.y+=b));return this};goog.math.Coordinate.prototype.scale=function(a,b){var c=goog.isNumber(b)?b:a;this.x*=a;this.y*=c;return this};goog.math.Coordinate.prototype.rotateRadians=function(a,b){var c=b||new goog.math.Coordinate(0,0),d=this.x,e=this.y,f=Math.cos(a),g=Math.sin(a);this.x=(d-c.x)*f-(e-c.y)*g+c.x;this.y=(d-c.x)*g+(e-c.y)*f+c.y};
@@ -228,12 +237,13 @@ goog.dom.DIRECT_ATTRIBUTE_MAP_={cellpadding:"cellPadding",cellspacing:"cellSpaci
 goog.dom.getDocumentHeight=function(){return goog.dom.getDocumentHeight_(window)};goog.dom.getDocumentHeightForWindow=function(a){return goog.dom.getDocumentHeight_(a)};
 goog.dom.getDocumentHeight_=function(a){var b=a.document,c=0;if(b){var c=b.body,d=b.documentElement;if(!d||!c)return 0;a=goog.dom.getViewportSize_(a).height;if(goog.dom.isCss1CompatMode_(b)&&d.scrollHeight)c=d.scrollHeight!=a?d.scrollHeight:d.offsetHeight;else{var b=d.scrollHeight,e=d.offsetHeight;d.clientHeight!=e&&(b=c.scrollHeight,e=c.offsetHeight);c=b>a?b>e?b:e:b<e?b:e}}return c};goog.dom.getPageScroll=function(a){return goog.dom.getDomHelper((a||goog.global||window).document).getDocumentScroll()};
 goog.dom.getDocumentScroll=function(){return goog.dom.getDocumentScroll_(document)};goog.dom.getDocumentScroll_=function(a){var b=goog.dom.getDocumentScrollElement_(a);a=goog.dom.getWindow_(a);return goog.userAgent.IE&&goog.userAgent.isVersionOrHigher("10")&&a.pageYOffset!=b.scrollTop?new goog.math.Coordinate(b.scrollLeft,b.scrollTop):new goog.math.Coordinate(a.pageXOffset||b.scrollLeft,a.pageYOffset||b.scrollTop)};goog.dom.getDocumentScrollElement=function(){return goog.dom.getDocumentScrollElement_(document)};
-goog.dom.getDocumentScrollElement_=function(a){return a.scrollingElement?a.scrollingElement:!goog.userAgent.WEBKIT&&goog.dom.isCss1CompatMode_(a)?a.documentElement:a.body||a.documentElement};goog.dom.getWindow=function(a){return a?goog.dom.getWindow_(a):window};goog.dom.getWindow_=function(a){return a.parentWindow||a.defaultView};goog.dom.createDom=function(a,b,c){return goog.dom.createDom_(document,arguments)};
+goog.dom.getDocumentScrollElement_=function(a){return a.scrollingElement?a.scrollingElement:!goog.userAgent.WEBKIT&&goog.dom.isCss1CompatMode_(a)?a.documentElement:a.body||a.documentElement};goog.dom.getWindow=function(a){return a?goog.dom.getWindow_(a):window};goog.dom.getWindow_=function(a){return a.parentWindow||a.defaultView};goog.dom.createDom=function(a,b,c){return goog.dom.createDom_(document,arguments)};goog.dom.createUntypedDom=function(a,b,c){return goog.dom.createDom_(document,arguments)};
-goog.dom.createDom_=function(a,b){var c=b[0],d=b[1];if(!goog.dom.BrowserFeature.CAN_ADD_NAME_OR_TYPE_ATTRIBUTES&&d&&(d.name||d.type)){c=["<",c];d.name&&c.push(' name="',goog.string.htmlEscape(d.name),'"');if(d.type){c.push(' type="',goog.string.htmlEscape(d.type),'"');var e={};goog.object.extend(e,d);delete e.type;d=e}c.push(">");c=c.join("")}c=a.createElement(c);d&&(goog.isString(d)?c.className=d:goog.isArray(d)?c.className=d.join(" "):goog.dom.setProperties(c,d));2<b.length&&goog.dom.append_(a,
+goog.dom.createDom_=function(a,b){var c=String(b[0]),d=b[1];if(!goog.dom.BrowserFeature.CAN_ADD_NAME_OR_TYPE_ATTRIBUTES&&d&&(d.name||d.type)){c=["<",c];d.name&&c.push(' name="',goog.string.htmlEscape(d.name),'"');if(d.type){c.push(' type="',goog.string.htmlEscape(d.type),'"');var e={};goog.object.extend(e,d);delete e.type;d=e}c.push(">");c=c.join("")}c=a.createElement(c);d&&(goog.isString(d)?c.className=d:goog.isArray(d)?c.className=d.join(" "):goog.dom.setProperties(c,d));2<b.length&&goog.dom.append_(a,
-c,b,2);return c};goog.dom.append_=function(a,b,c,d){function e(c){c&&b.appendChild(goog.isString(c)?a.createTextNode(c):c)}for(;d<c.length;d++){var f=c[d];goog.isArrayLike(f)&&!goog.dom.isNodeLike(f)?goog.array.forEach(goog.dom.isNodeList(f)?goog.array.toArray(f):f,e):e(f)}};goog.dom.$dom=goog.dom.createDom;goog.dom.createElement=function(a){return document.createElement(a)};goog.dom.createTextNode=function(a){return document.createTextNode(String(a))};
+c,b,2);return c};goog.dom.append_=function(a,b,c,d){function e(c){c&&b.appendChild(goog.isString(c)?a.createTextNode(c):c)}for(;d<c.length;d++){var f=c[d];goog.isArrayLike(f)&&!goog.dom.isNodeLike(f)?goog.array.forEach(goog.dom.isNodeList(f)?goog.array.toArray(f):f,e):e(f)}};goog.dom.$dom=goog.dom.createDom;goog.dom.createElement=function(a){return document.createElement(String(a))};goog.dom.createTextNode=function(a){return document.createTextNode(String(a))};
-goog.dom.createTable=function(a,b,c){return goog.dom.createTable_(document,a,b,!!c)};goog.dom.createTable_=function(a,b,c,d){for(var e=a.createElement(goog.dom.TagName.TABLE),f=e.appendChild(a.createElement(goog.dom.TagName.TBODY)),g=0;g<b;g++){for(var h=a.createElement(goog.dom.TagName.TR),k=0;k<c;k++){var m=a.createElement(goog.dom.TagName.TD);d&&goog.dom.setTextContent(m,goog.string.Unicode.NBSP);h.appendChild(m)}f.appendChild(h)}return e};
+goog.dom.createTable=function(a,b,c){return goog.dom.createTable_(document,a,b,!!c)};goog.dom.createTable_=function(a,b,c,d){for(var e=a.createElement("TABLE"),f=e.appendChild(a.createElement("TBODY")),g=0;g<b;g++){for(var h=a.createElement("TR"),k=0;k<c;k++){var m=a.createElement("TD");d&&goog.dom.setTextContent(m,goog.string.Unicode.NBSP);h.appendChild(m)}f.appendChild(h)}return e};
-goog.dom.safeHtmlToNode=function(a){return goog.dom.safeHtmlToNode_(document,a)};goog.dom.safeHtmlToNode_=function(a,b){var c=a.createElement(goog.dom.TagName.DIV);goog.dom.BrowserFeature.INNER_HTML_NEEDS_SCOPED_ELEMENT?(goog.dom.safe.setInnerHtml(c,goog.html.SafeHtml.concat(goog.html.SafeHtml.BR,b)),c.removeChild(c.firstChild)):goog.dom.safe.setInnerHtml(c,b);return goog.dom.childrenToNode_(a,c)};
+goog.dom.constHtmlToNode=function(a){var b=goog.array.map(arguments,goog.string.Const.unwrap),b=goog.html.uncheckedconversions.safeHtmlFromStringKnownToSatisfyTypeContract(goog.string.Const.from("Constant HTML string, that gets turned into a Node later, so it will be automatically balanced."),b.join(""));return goog.dom.safeHtmlToNode(b)};goog.dom.safeHtmlToNode=function(a){return goog.dom.safeHtmlToNode_(document,a)};
-goog.dom.childrenToNode_=function(a,b){if(1==b.childNodes.length)return b.removeChild(b.firstChild);for(var c=a.createDocumentFragment();b.firstChild;)c.appendChild(b.firstChild);return c};goog.dom.isCss1CompatMode=function(){return goog.dom.isCss1CompatMode_(document)};goog.dom.isCss1CompatMode_=function(a){return goog.dom.COMPAT_MODE_KNOWN_?goog.dom.ASSUME_STANDARDS_MODE:"CSS1Compat"==a.compatMode};goog.dom.canHaveChildren=function(a){if(a.nodeType!=goog.dom.NodeType.ELEMENT)return!1;switch(a.tagName){case goog.dom.TagName.APPLET:case goog.dom.TagName.AREA:case goog.dom.TagName.BASE:case goog.dom.TagName.BR:case goog.dom.TagName.COL:case goog.dom.TagName.COMMAND:case goog.dom.TagName.EMBED:case goog.dom.TagName.FRAME:case goog.dom.TagName.HR:case goog.dom.TagName.IMG:case goog.dom.TagName.INPUT:case goog.dom.TagName.IFRAME:case goog.dom.TagName.ISINDEX:case goog.dom.TagName.KEYGEN:case goog.dom.TagName.LINK:case goog.dom.TagName.NOFRAMES:case goog.dom.TagName.NOSCRIPT:case goog.dom.TagName.META:case goog.dom.TagName.OBJECT:case goog.dom.TagName.PARAM:case goog.dom.TagName.SCRIPT:case goog.dom.TagName.SOURCE:case goog.dom.TagName.STYLE:case goog.dom.TagName.TRACK:case goog.dom.TagName.WBR:return!1}return!0};
+goog.dom.safeHtmlToNode_=function(a,b){var c=a.createElement("DIV");goog.dom.BrowserFeature.INNER_HTML_NEEDS_SCOPED_ELEMENT?(goog.dom.safe.setInnerHtml(c,goog.html.SafeHtml.concat(goog.html.SafeHtml.BR,b)),c.removeChild(c.firstChild)):goog.dom.safe.setInnerHtml(c,b);return goog.dom.childrenToNode_(a,c)};goog.dom.childrenToNode_=function(a,b){if(1==b.childNodes.length)return b.removeChild(b.firstChild);for(var c=a.createDocumentFragment();b.firstChild;)c.appendChild(b.firstChild);return c};
+goog.dom.isCss1CompatMode=function(){return goog.dom.isCss1CompatMode_(document)};goog.dom.isCss1CompatMode_=function(a){return goog.dom.COMPAT_MODE_KNOWN_?goog.dom.ASSUME_STANDARDS_MODE:"CSS1Compat"==a.compatMode};goog.dom.canHaveChildren=function(a){if(a.nodeType!=goog.dom.NodeType.ELEMENT)return!1;switch(a.tagName){case "APPLET":case "AREA":case "BASE":case "BR":case "COL":case "COMMAND":case "EMBED":case "FRAME":case "HR":case "IMG":case "INPUT":case "IFRAME":case "ISINDEX":case "KEYGEN":case "LINK":case "NOFRAMES":case "NOSCRIPT":case "META":case "OBJECT":case "PARAM":case "SCRIPT":case "SOURCE":case "STYLE":case "TRACK":case "WBR":return!1}return!0};
 goog.dom.appendChild=function(a,b){a.appendChild(b)};goog.dom.append=function(a,b){goog.dom.append_(goog.dom.getOwnerDocument(a),a,arguments,1)};goog.dom.removeChildren=function(a){for(var b;b=a.firstChild;)a.removeChild(b)};goog.dom.insertSiblingBefore=function(a,b){b.parentNode&&b.parentNode.insertBefore(a,b)};goog.dom.insertSiblingAfter=function(a,b){b.parentNode&&b.parentNode.insertBefore(a,b.nextSibling)};goog.dom.insertChildAt=function(a,b,c){a.insertBefore(b,a.childNodes[c]||null)};
 goog.dom.removeNode=function(a){return a&&a.parentNode?a.parentNode.removeChild(a):null};goog.dom.replaceNode=function(a,b){var c=b.parentNode;c&&c.replaceChild(a,b)};goog.dom.flattenElement=function(a){var b,c=a.parentNode;if(c&&c.nodeType!=goog.dom.NodeType.DOCUMENT_FRAGMENT){if(a.removeNode)return a.removeNode(!1);for(;b=a.firstChild;)c.insertBefore(b,a);return goog.dom.removeNode(a)}};
 goog.dom.getChildren=function(a){return goog.dom.BrowserFeature.CAN_USE_CHILDREN_ATTRIBUTE&&void 0!=a.children?a.children:goog.array.filter(a.childNodes,function(a){return a.nodeType==goog.dom.NodeType.ELEMENT})};goog.dom.getFirstElementChild=function(a){return goog.isDef(a.firstElementChild)?a.firstElementChild:goog.dom.getNextElementNode_(a.firstChild,!0)};goog.dom.getLastElementChild=function(a){return goog.isDef(a.lastElementChild)?a.lastElementChild:goog.dom.getNextElementNode_(a.lastChild,!1)};
@@ -247,10 +257,10 @@ goog.dom.compareParentsDescendantNodeIe_=function(a,b){var c=a.parentNode;if(c==
 goog.dom.findCommonAncestor=function(a){var b,c=arguments.length;if(!c)return null;if(1==c)return arguments[0];var d=[],e=Infinity;for(b=0;b<c;b++){for(var f=[],g=arguments[b];g;)f.unshift(g),g=g.parentNode;d.push(f);e=Math.min(e,f.length)}f=null;for(b=0;b<e;b++){for(var g=d[0][b],h=1;h<c;h++)if(g!=d[h][b])return f;f=g}return f};goog.dom.getOwnerDocument=function(a){goog.asserts.assert(a,"Node cannot be null or undefined.");return a.nodeType==goog.dom.NodeType.DOCUMENT?a:a.ownerDocument||a.document};
 goog.dom.getFrameContentDocument=function(a){return a.contentDocument||a.contentWindow.document};goog.dom.getFrameContentWindow=function(a){try{return a.contentWindow||(a.contentDocument?goog.dom.getWindow(a.contentDocument):null)}catch(b){}return null};
 goog.dom.setTextContent=function(a,b){goog.asserts.assert(null!=a,"goog.dom.setTextContent expects a non-null value for node");if("textContent"in a)a.textContent=b;else if(a.nodeType==goog.dom.NodeType.TEXT)a.data=b;else if(a.firstChild&&a.firstChild.nodeType==goog.dom.NodeType.TEXT){for(;a.lastChild!=a.firstChild;)a.removeChild(a.lastChild);a.firstChild.data=b}else{goog.dom.removeChildren(a);var c=goog.dom.getOwnerDocument(a);a.appendChild(c.createTextNode(String(b)))}};
-goog.dom.getOuterHtml=function(a){goog.asserts.assert(null!==a,"goog.dom.getOuterHtml expects a non-null value for element");if("outerHTML"in a)return a.outerHTML;var b=goog.dom.getOwnerDocument(a).createElement(goog.dom.TagName.DIV);b.appendChild(a.cloneNode(!0));return b.innerHTML};goog.dom.findNode=function(a,b){var c=[];return goog.dom.findNodes_(a,b,c,!0)?c[0]:void 0};goog.dom.findNodes=function(a,b){var c=[];goog.dom.findNodes_(a,b,c,!1);return c};
+goog.dom.getOuterHtml=function(a){goog.asserts.assert(null!==a,"goog.dom.getOuterHtml expects a non-null value for element");if("outerHTML"in a)return a.outerHTML;var b=goog.dom.getOwnerDocument(a).createElement("DIV");b.appendChild(a.cloneNode(!0));return b.innerHTML};goog.dom.findNode=function(a,b){var c=[];return goog.dom.findNodes_(a,b,c,!0)?c[0]:void 0};goog.dom.findNodes=function(a,b){var c=[];goog.dom.findNodes_(a,b,c,!1);return c};
 goog.dom.findNodes_=function(a,b,c,d){if(null!=a)for(a=a.firstChild;a;){if(b(a)&&(c.push(a),d)||goog.dom.findNodes_(a,b,c,d))return!0;a=a.nextSibling}return!1};goog.dom.TAGS_TO_IGNORE_={SCRIPT:1,STYLE:1,HEAD:1,IFRAME:1,OBJECT:1};goog.dom.PREDEFINED_TAG_VALUES_={IMG:" ",BR:"\n"};goog.dom.isFocusableTabIndex=function(a){return goog.dom.hasSpecifiedTabIndex_(a)&&goog.dom.isTabIndexFocusable_(a)};goog.dom.setFocusableTabIndex=function(a,b){b?a.tabIndex=0:(a.tabIndex=-1,a.removeAttribute("tabIndex"))};
 goog.dom.isFocusable=function(a){var b;return(b=goog.dom.nativelySupportsFocus_(a)?!a.disabled&&(!goog.dom.hasSpecifiedTabIndex_(a)||goog.dom.isTabIndexFocusable_(a)):goog.dom.isFocusableTabIndex(a))&&goog.userAgent.IE?goog.dom.hasNonZeroBoundingRect_(a):b};goog.dom.hasSpecifiedTabIndex_=function(a){a=a.getAttributeNode("tabindex");return goog.isDefAndNotNull(a)&&a.specified};goog.dom.isTabIndexFocusable_=function(a){a=a.tabIndex;return goog.isNumber(a)&&0<=a&&32768>a};
-goog.dom.nativelySupportsFocus_=function(a){return a.tagName==goog.dom.TagName.A||a.tagName==goog.dom.TagName.INPUT||a.tagName==goog.dom.TagName.TEXTAREA||a.tagName==goog.dom.TagName.SELECT||a.tagName==goog.dom.TagName.BUTTON};goog.dom.hasNonZeroBoundingRect_=function(a){a=!goog.isFunction(a.getBoundingClientRect)||goog.userAgent.IE&&null==a.parentElement?{height:a.offsetHeight,width:a.offsetWidth}:a.getBoundingClientRect();return goog.isDefAndNotNull(a)&&0<a.height&&0<a.width};
+goog.dom.nativelySupportsFocus_=function(a){return"A"==a.tagName||"INPUT"==a.tagName||"TEXTAREA"==a.tagName||"SELECT"==a.tagName||"BUTTON"==a.tagName};goog.dom.hasNonZeroBoundingRect_=function(a){a=!goog.isFunction(a.getBoundingClientRect)||goog.userAgent.IE&&null==a.parentElement?{height:a.offsetHeight,width:a.offsetWidth}:a.getBoundingClientRect();return goog.isDefAndNotNull(a)&&0<a.height&&0<a.width};
 goog.dom.getTextContent=function(a){if(goog.dom.BrowserFeature.CAN_USE_INNER_TEXT&&null!==a&&"innerText"in a)a=goog.string.canonicalizeNewlines(a.innerText);else{var b=[];goog.dom.getTextContent_(a,b,!0);a=b.join("")}a=a.replace(/ \xAD /g," ").replace(/\xAD/g,"");a=a.replace(/\u200B/g,"");goog.dom.BrowserFeature.CAN_USE_INNER_TEXT||(a=a.replace(/ +/g," "));" "!=a&&(a=a.replace(/^\s*/,""));return a};goog.dom.getRawTextContent=function(a){var b=[];goog.dom.getTextContent_(a,b,!1);return b.join("")};
 goog.dom.getTextContent_=function(a,b,c){if(!(a.nodeName in goog.dom.TAGS_TO_IGNORE_))if(a.nodeType==goog.dom.NodeType.TEXT)c?b.push(String(a.nodeValue).replace(/(\r\n|\r|\n)/g,"")):b.push(a.nodeValue);else if(a.nodeName in goog.dom.PREDEFINED_TAG_VALUES_)b.push(goog.dom.PREDEFINED_TAG_VALUES_[a.nodeName]);else for(a=a.firstChild;a;)goog.dom.getTextContent_(a,b,c),a=a.nextSibling};goog.dom.getNodeTextLength=function(a){return goog.dom.getTextContent(a).length};
 goog.dom.getNodeTextOffset=function(a,b){for(var c=b||goog.dom.getOwnerDocument(a).body,d=[];a&&a!=c;){for(var e=a;e=e.previousSibling;)d.unshift(goog.dom.getTextContent(e));a=a.parentNode}return goog.string.trimLeft(d.join("")).replace(/ +/g," ").length};
@@ -261,15 +271,15 @@ goog.dom.getPixelRatio=function(){var a=goog.dom.getWindow();return goog.isDef(a
 goog.dom.DomHelper=function(a){this.document_=a||goog.global.document||document};goog.dom.DomHelper.prototype.getDomHelper=goog.dom.getDomHelper;goog.dom.DomHelper.prototype.setDocument=function(a){this.document_=a};goog.dom.DomHelper.prototype.getDocument=function(){return this.document_};goog.dom.DomHelper.prototype.getElement=function(a){return goog.dom.getElementHelper_(this.document_,a)};
 goog.dom.DomHelper.prototype.getRequiredElement=function(a){return goog.dom.getRequiredElementHelper_(this.document_,a)};goog.dom.DomHelper.prototype.$=goog.dom.DomHelper.prototype.getElement;goog.dom.DomHelper.prototype.getElementsByTagNameAndClass=function(a,b,c){return goog.dom.getElementsByTagNameAndClass_(this.document_,a,b,c)};goog.dom.DomHelper.prototype.getElementsByClass=function(a,b){return goog.dom.getElementsByClass(a,b||this.document_)};
 goog.dom.DomHelper.prototype.getElementByClass=function(a,b){return goog.dom.getElementByClass(a,b||this.document_)};goog.dom.DomHelper.prototype.getRequiredElementByClass=function(a,b){return goog.dom.getRequiredElementByClass(a,b||this.document_)};goog.dom.DomHelper.prototype.$$=goog.dom.DomHelper.prototype.getElementsByTagNameAndClass;goog.dom.DomHelper.prototype.setProperties=goog.dom.setProperties;goog.dom.DomHelper.prototype.getViewportSize=function(a){return goog.dom.getViewportSize(a||this.getWindow())};
-goog.dom.DomHelper.prototype.getDocumentHeight=function(){return goog.dom.getDocumentHeight_(this.getWindow())};goog.dom.DomHelper.prototype.createDom=function(a,b,c){return goog.dom.createDom_(this.document_,arguments)};goog.dom.DomHelper.prototype.$dom=goog.dom.DomHelper.prototype.createDom;goog.dom.DomHelper.prototype.createElement=function(a){return this.document_.createElement(a)};goog.dom.DomHelper.prototype.createTextNode=function(a){return this.document_.createTextNode(String(a))};
+goog.dom.DomHelper.prototype.getDocumentHeight=function(){return goog.dom.getDocumentHeight_(this.getWindow())};goog.dom.DomHelper.prototype.createDom=function(a,b,c){return goog.dom.createDom_(this.document_,arguments)};goog.dom.DomHelper.prototype.createUntypedDom=function(a,b,c){return goog.dom.createDom_(this.document_,arguments)};goog.dom.DomHelper.prototype.$dom=goog.dom.DomHelper.prototype.createDom;goog.dom.DomHelper.prototype.createElement=function(a){return this.document_.createElement(String(a))};
-goog.dom.DomHelper.prototype.createTable=function(a,b,c){return goog.dom.createTable_(this.document_,a,b,!!c)};goog.dom.DomHelper.prototype.safeHtmlToNode=function(a){return goog.dom.safeHtmlToNode_(this.document_,a)};goog.dom.DomHelper.prototype.isCss1CompatMode=function(){return goog.dom.isCss1CompatMode_(this.document_)};goog.dom.DomHelper.prototype.getWindow=function(){return goog.dom.getWindow_(this.document_)};goog.dom.DomHelper.prototype.getDocumentScrollElement=function(){return goog.dom.getDocumentScrollElement_(this.document_)};
+goog.dom.DomHelper.prototype.createTextNode=function(a){return this.document_.createTextNode(String(a))};goog.dom.DomHelper.prototype.createTable=function(a,b,c){return goog.dom.createTable_(this.document_,a,b,!!c)};goog.dom.DomHelper.prototype.safeHtmlToNode=function(a){return goog.dom.safeHtmlToNode_(this.document_,a)};goog.dom.DomHelper.prototype.isCss1CompatMode=function(){return goog.dom.isCss1CompatMode_(this.document_)};goog.dom.DomHelper.prototype.getWindow=function(){return goog.dom.getWindow_(this.document_)};
-goog.dom.DomHelper.prototype.getDocumentScroll=function(){return goog.dom.getDocumentScroll_(this.document_)};goog.dom.DomHelper.prototype.getActiveElement=function(a){return goog.dom.getActiveElement(a||this.document_)};goog.dom.DomHelper.prototype.appendChild=goog.dom.appendChild;goog.dom.DomHelper.prototype.append=goog.dom.append;goog.dom.DomHelper.prototype.canHaveChildren=goog.dom.canHaveChildren;goog.dom.DomHelper.prototype.removeChildren=goog.dom.removeChildren;
+goog.dom.DomHelper.prototype.getDocumentScrollElement=function(){return goog.dom.getDocumentScrollElement_(this.document_)};goog.dom.DomHelper.prototype.getDocumentScroll=function(){return goog.dom.getDocumentScroll_(this.document_)};goog.dom.DomHelper.prototype.getActiveElement=function(a){return goog.dom.getActiveElement(a||this.document_)};goog.dom.DomHelper.prototype.appendChild=goog.dom.appendChild;goog.dom.DomHelper.prototype.append=goog.dom.append;
-goog.dom.DomHelper.prototype.insertSiblingBefore=goog.dom.insertSiblingBefore;goog.dom.DomHelper.prototype.insertSiblingAfter=goog.dom.insertSiblingAfter;goog.dom.DomHelper.prototype.insertChildAt=goog.dom.insertChildAt;goog.dom.DomHelper.prototype.removeNode=goog.dom.removeNode;goog.dom.DomHelper.prototype.replaceNode=goog.dom.replaceNode;goog.dom.DomHelper.prototype.flattenElement=goog.dom.flattenElement;goog.dom.DomHelper.prototype.getChildren=goog.dom.getChildren;
+goog.dom.DomHelper.prototype.canHaveChildren=goog.dom.canHaveChildren;goog.dom.DomHelper.prototype.removeChildren=goog.dom.removeChildren;goog.dom.DomHelper.prototype.insertSiblingBefore=goog.dom.insertSiblingBefore;goog.dom.DomHelper.prototype.insertSiblingAfter=goog.dom.insertSiblingAfter;goog.dom.DomHelper.prototype.insertChildAt=goog.dom.insertChildAt;goog.dom.DomHelper.prototype.removeNode=goog.dom.removeNode;goog.dom.DomHelper.prototype.replaceNode=goog.dom.replaceNode;
-goog.dom.DomHelper.prototype.getFirstElementChild=goog.dom.getFirstElementChild;goog.dom.DomHelper.prototype.getLastElementChild=goog.dom.getLastElementChild;goog.dom.DomHelper.prototype.getNextElementSibling=goog.dom.getNextElementSibling;goog.dom.DomHelper.prototype.getPreviousElementSibling=goog.dom.getPreviousElementSibling;goog.dom.DomHelper.prototype.getNextNode=goog.dom.getNextNode;goog.dom.DomHelper.prototype.getPreviousNode=goog.dom.getPreviousNode;
+goog.dom.DomHelper.prototype.flattenElement=goog.dom.flattenElement;goog.dom.DomHelper.prototype.getChildren=goog.dom.getChildren;goog.dom.DomHelper.prototype.getFirstElementChild=goog.dom.getFirstElementChild;goog.dom.DomHelper.prototype.getLastElementChild=goog.dom.getLastElementChild;goog.dom.DomHelper.prototype.getNextElementSibling=goog.dom.getNextElementSibling;goog.dom.DomHelper.prototype.getPreviousElementSibling=goog.dom.getPreviousElementSibling;
-goog.dom.DomHelper.prototype.isNodeLike=goog.dom.isNodeLike;goog.dom.DomHelper.prototype.isElement=goog.dom.isElement;goog.dom.DomHelper.prototype.isWindow=goog.dom.isWindow;goog.dom.DomHelper.prototype.getParentElement=goog.dom.getParentElement;goog.dom.DomHelper.prototype.contains=goog.dom.contains;goog.dom.DomHelper.prototype.compareNodeOrder=goog.dom.compareNodeOrder;goog.dom.DomHelper.prototype.findCommonAncestor=goog.dom.findCommonAncestor;goog.dom.DomHelper.prototype.getOwnerDocument=goog.dom.getOwnerDocument;
+goog.dom.DomHelper.prototype.getNextNode=goog.dom.getNextNode;goog.dom.DomHelper.prototype.getPreviousNode=goog.dom.getPreviousNode;goog.dom.DomHelper.prototype.isNodeLike=goog.dom.isNodeLike;goog.dom.DomHelper.prototype.isElement=goog.dom.isElement;goog.dom.DomHelper.prototype.isWindow=goog.dom.isWindow;goog.dom.DomHelper.prototype.getParentElement=goog.dom.getParentElement;goog.dom.DomHelper.prototype.contains=goog.dom.contains;goog.dom.DomHelper.prototype.compareNodeOrder=goog.dom.compareNodeOrder;
-goog.dom.DomHelper.prototype.getFrameContentDocument=goog.dom.getFrameContentDocument;goog.dom.DomHelper.prototype.getFrameContentWindow=goog.dom.getFrameContentWindow;goog.dom.DomHelper.prototype.setTextContent=goog.dom.setTextContent;goog.dom.DomHelper.prototype.getOuterHtml=goog.dom.getOuterHtml;goog.dom.DomHelper.prototype.findNode=goog.dom.findNode;goog.dom.DomHelper.prototype.findNodes=goog.dom.findNodes;goog.dom.DomHelper.prototype.isFocusableTabIndex=goog.dom.isFocusableTabIndex;
+goog.dom.DomHelper.prototype.findCommonAncestor=goog.dom.findCommonAncestor;goog.dom.DomHelper.prototype.getOwnerDocument=goog.dom.getOwnerDocument;goog.dom.DomHelper.prototype.getFrameContentDocument=goog.dom.getFrameContentDocument;goog.dom.DomHelper.prototype.getFrameContentWindow=goog.dom.getFrameContentWindow;goog.dom.DomHelper.prototype.setTextContent=goog.dom.setTextContent;goog.dom.DomHelper.prototype.getOuterHtml=goog.dom.getOuterHtml;goog.dom.DomHelper.prototype.findNode=goog.dom.findNode;
-goog.dom.DomHelper.prototype.setFocusableTabIndex=goog.dom.setFocusableTabIndex;goog.dom.DomHelper.prototype.isFocusable=goog.dom.isFocusable;goog.dom.DomHelper.prototype.getTextContent=goog.dom.getTextContent;goog.dom.DomHelper.prototype.getNodeTextLength=goog.dom.getNodeTextLength;goog.dom.DomHelper.prototype.getNodeTextOffset=goog.dom.getNodeTextOffset;goog.dom.DomHelper.prototype.getNodeAtOffset=goog.dom.getNodeAtOffset;goog.dom.DomHelper.prototype.isNodeList=goog.dom.isNodeList;
+goog.dom.DomHelper.prototype.findNodes=goog.dom.findNodes;goog.dom.DomHelper.prototype.isFocusableTabIndex=goog.dom.isFocusableTabIndex;goog.dom.DomHelper.prototype.setFocusableTabIndex=goog.dom.setFocusableTabIndex;goog.dom.DomHelper.prototype.isFocusable=goog.dom.isFocusable;goog.dom.DomHelper.prototype.getTextContent=goog.dom.getTextContent;goog.dom.DomHelper.prototype.getNodeTextLength=goog.dom.getNodeTextLength;goog.dom.DomHelper.prototype.getNodeTextOffset=goog.dom.getNodeTextOffset;
-goog.dom.DomHelper.prototype.getAncestorByTagNameAndClass=goog.dom.getAncestorByTagNameAndClass;goog.dom.DomHelper.prototype.getAncestorByClass=goog.dom.getAncestorByClass;goog.dom.DomHelper.prototype.getAncestor=goog.dom.getAncestor;goog.dom.vendor={};goog.dom.vendor.getVendorJsPrefix=function(){return goog.userAgent.WEBKIT?"Webkit":goog.userAgent.GECKO?"Moz":goog.userAgent.IE?"ms":goog.userAgent.OPERA?"O":null};goog.dom.vendor.getVendorPrefix=function(){return goog.userAgent.WEBKIT?"-webkit":goog.userAgent.GECKO?"-moz":goog.userAgent.IE?"-ms":goog.userAgent.OPERA?"-o":null};
+goog.dom.DomHelper.prototype.getNodeAtOffset=goog.dom.getNodeAtOffset;goog.dom.DomHelper.prototype.isNodeList=goog.dom.isNodeList;goog.dom.DomHelper.prototype.getAncestorByTagNameAndClass=goog.dom.getAncestorByTagNameAndClass;goog.dom.DomHelper.prototype.getAncestorByClass=goog.dom.getAncestorByClass;goog.dom.DomHelper.prototype.getAncestor=goog.dom.getAncestor;goog.dom.vendor={};goog.dom.vendor.getVendorJsPrefix=function(){return goog.userAgent.WEBKIT?"Webkit":goog.userAgent.GECKO?"Moz":goog.userAgent.IE?"ms":goog.userAgent.OPERA?"O":null};goog.dom.vendor.getVendorPrefix=function(){return goog.userAgent.WEBKIT?"-webkit":goog.userAgent.GECKO?"-moz":goog.userAgent.IE?"-ms":goog.userAgent.OPERA?"-o":null};
 goog.dom.vendor.getPrefixedPropertyName=function(a,b){if(b&&a in b)return a;var c=goog.dom.vendor.getVendorJsPrefix();return c?(c=c.toLowerCase(),c+=goog.string.toTitleCase(a),!goog.isDef(b)||c in b?c:null):null};goog.dom.vendor.getPrefixedEventType=function(a){return((goog.dom.vendor.getVendorJsPrefix()||"")+a).toLowerCase()};goog.html.legacyconversions={};goog.html.legacyconversions.safeHtmlFromString=function(a){goog.html.legacyconversions.reportCallback_();return goog.html.SafeHtml.createSafeHtmlSecurityPrivateDoNotAccessOrElse(a,null)};goog.html.legacyconversions.safeStyleFromString=function(a){goog.html.legacyconversions.reportCallback_();return goog.html.SafeStyle.createSafeStyleSecurityPrivateDoNotAccessOrElse(a)};
 goog.html.legacyconversions.safeStyleSheetFromString=function(a){goog.html.legacyconversions.reportCallback_();return goog.html.SafeStyleSheet.createSafeStyleSheetSecurityPrivateDoNotAccessOrElse(a)};goog.html.legacyconversions.safeUrlFromString=function(a){goog.html.legacyconversions.reportCallback_();return goog.html.SafeUrl.createSafeUrlSecurityPrivateDoNotAccessOrElse(a)};goog.html.legacyconversions.trustedResourceUrlFromString=function(a){goog.html.legacyconversions.reportCallback_();return goog.html.TrustedResourceUrl.createTrustedResourceUrlSecurityPrivateDoNotAccessOrElse(a)};
 goog.html.legacyconversions.reportCallback_=goog.nullFunction;goog.html.legacyconversions.setReportCallback=function(a){goog.html.legacyconversions.reportCallback_=a};goog.math.Box=function(a,b,c,d){this.top=a;this.right=b;this.bottom=c;this.left=d};goog.math.Box.boundingBox=function(a){for(var b=new goog.math.Box(arguments[0].y,arguments[0].x,arguments[0].y,arguments[0].x),c=1;c<arguments.length;c++)b.expandToIncludeCoordinate(arguments[c]);return b};goog.math.Box.prototype.getWidth=function(){return this.right-this.left};goog.math.Box.prototype.getHeight=function(){return this.bottom-this.top};
@@ -280,17 +290,17 @@ goog.math.Box.contains=function(a,b){return a&&b?b instanceof goog.math.Box?b.le
 goog.math.Box.distance=function(a,b){var c=goog.math.Box.relativePositionX(a,b),d=goog.math.Box.relativePositionY(a,b);return Math.sqrt(c*c+d*d)};goog.math.Box.intersects=function(a,b){return a.left<=b.right&&b.left<=a.right&&a.top<=b.bottom&&b.top<=a.bottom};goog.math.Box.intersectsWithPadding=function(a,b,c){return a.left<=b.right+c&&b.left<=a.right+c&&a.top<=b.bottom+c&&b.top<=a.bottom+c};
 goog.math.Box.prototype.ceil=function(){this.top=Math.ceil(this.top);this.right=Math.ceil(this.right);this.bottom=Math.ceil(this.bottom);this.left=Math.ceil(this.left);return this};goog.math.Box.prototype.floor=function(){this.top=Math.floor(this.top);this.right=Math.floor(this.right);this.bottom=Math.floor(this.bottom);this.left=Math.floor(this.left);return this};
 goog.math.Box.prototype.round=function(){this.top=Math.round(this.top);this.right=Math.round(this.right);this.bottom=Math.round(this.bottom);this.left=Math.round(this.left);return this};goog.math.Box.prototype.translate=function(a,b){a instanceof goog.math.Coordinate?(this.left+=a.x,this.right+=a.x,this.top+=a.y,this.bottom+=a.y):(goog.asserts.assertNumber(a),this.left+=a,this.right+=a,goog.isNumber(b)&&(this.top+=b,this.bottom+=b));return this};
-goog.math.Box.prototype.scale=function(a,b){var c=goog.isNumber(b)?b:a;this.left*=a;this.right*=a;this.top*=c;this.bottom*=c;return this};goog.math.Rect=function(a,b,c,d){this.left=a;this.top=b;this.width=c;this.height=d};goog.math.Rect.prototype.clone=function(){return new goog.math.Rect(this.left,this.top,this.width,this.height)};goog.math.Rect.prototype.toBox=function(){return new goog.math.Box(this.top,this.left+this.width,this.top+this.height,this.left)};goog.math.Rect.createFromPositionAndSize=function(a,b){return new goog.math.Rect(a.x,a.y,b.width,b.height)};
+goog.math.Box.prototype.scale=function(a,b){var c=goog.isNumber(b)?b:a;this.left*=a;this.right*=a;this.top*=c;this.bottom*=c;return this};goog.math.IRect=function(){};goog.math.Rect=function(a,b,c,d){this.left=a;this.top=b;this.width=c;this.height=d};goog.math.Rect.prototype.clone=function(){return new goog.math.Rect(this.left,this.top,this.width,this.height)};goog.math.Rect.prototype.toBox=function(){return new goog.math.Box(this.top,this.left+this.width,this.top+this.height,this.left)};goog.math.Rect.createFromPositionAndSize=function(a,b){return new goog.math.Rect(a.x,a.y,b.width,b.height)};
 goog.math.Rect.createFromBox=function(a){return new goog.math.Rect(a.left,a.top,a.right-a.left,a.bottom-a.top)};goog.DEBUG&&(goog.math.Rect.prototype.toString=function(){return"("+this.left+", "+this.top+" - "+this.width+"w x "+this.height+"h)"});goog.math.Rect.equals=function(a,b){return a==b?!0:a&&b?a.left==b.left&&a.width==b.width&&a.top==b.top&&a.height==b.height:!1};
 goog.math.Rect.prototype.intersection=function(a){var b=Math.max(this.left,a.left),c=Math.min(this.left+this.width,a.left+a.width);if(b<=c){var d=Math.max(this.top,a.top);a=Math.min(this.top+this.height,a.top+a.height);if(d<=a)return this.left=b,this.top=d,this.width=c-b,this.height=a-d,!0}return!1};
 goog.math.Rect.intersection=function(a,b){var c=Math.max(a.left,b.left),d=Math.min(a.left+a.width,b.left+b.width);if(c<=d){var e=Math.max(a.top,b.top),f=Math.min(a.top+a.height,b.top+b.height);if(e<=f)return new goog.math.Rect(c,e,d-c,f-e)}return null};goog.math.Rect.intersects=function(a,b){return a.left<=b.left+b.width&&b.left<=a.left+a.width&&a.top<=b.top+b.height&&b.top<=a.top+a.height};goog.math.Rect.prototype.intersects=function(a){return goog.math.Rect.intersects(this,a)};
 goog.math.Rect.difference=function(a,b){var c=goog.math.Rect.intersection(a,b);if(!c||!c.height||!c.width)return[a.clone()];var c=[],d=a.top,e=a.height,f=a.left+a.width,g=a.top+a.height,h=b.left+b.width,k=b.top+b.height;b.top>a.top&&(c.push(new goog.math.Rect(a.left,a.top,a.width,b.top-a.top)),d=b.top,e-=b.top-a.top);k<g&&(c.push(new goog.math.Rect(a.left,k,a.width,g-k)),e=k-d);b.left>a.left&&c.push(new goog.math.Rect(a.left,d,b.left-a.left,e));h<f&&c.push(new goog.math.Rect(h,d,f-h,e));return c};
-goog.math.Rect.prototype.difference=function(a){return goog.math.Rect.difference(this,a)};goog.math.Rect.prototype.boundingRect=function(a){var b=Math.max(this.left+this.width,a.left+a.width),c=Math.max(this.top+this.height,a.top+a.height);this.left=Math.min(this.left,a.left);this.top=Math.min(this.top,a.top);this.width=b-this.left;this.height=c-this.top};goog.math.Rect.boundingRect=function(a,b){if(!a||!b)return null;var c=a.clone();c.boundingRect(b);return c};
+goog.math.Rect.prototype.difference=function(a){return goog.math.Rect.difference(this,a)};goog.math.Rect.prototype.boundingRect=function(a){var b=Math.max(this.left+this.width,a.left+a.width),c=Math.max(this.top+this.height,a.top+a.height);this.left=Math.min(this.left,a.left);this.top=Math.min(this.top,a.top);this.width=b-this.left;this.height=c-this.top};goog.math.Rect.boundingRect=function(a,b){if(!a||!b)return null;var c=new goog.math.Rect(a.left,a.top,a.width,a.height);c.boundingRect(b);return c};
-goog.math.Rect.prototype.contains=function(a){return a instanceof goog.math.Rect?this.left<=a.left&&this.left+this.width>=a.left+a.width&&this.top<=a.top&&this.top+this.height>=a.top+a.height:a.x>=this.left&&a.x<=this.left+this.width&&a.y>=this.top&&a.y<=this.top+this.height};goog.math.Rect.prototype.squaredDistance=function(a){var b=a.x<this.left?this.left-a.x:Math.max(a.x-(this.left+this.width),0);a=a.y<this.top?this.top-a.y:Math.max(a.y-(this.top+this.height),0);return b*b+a*a};
+goog.math.Rect.prototype.contains=function(a){return a instanceof goog.math.Coordinate?a.x>=this.left&&a.x<=this.left+this.width&&a.y>=this.top&&a.y<=this.top+this.height:this.left<=a.left&&this.left+this.width>=a.left+a.width&&this.top<=a.top&&this.top+this.height>=a.top+a.height};goog.math.Rect.prototype.squaredDistance=function(a){var b=a.x<this.left?this.left-a.x:Math.max(a.x-(this.left+this.width),0);a=a.y<this.top?this.top-a.y:Math.max(a.y-(this.top+this.height),0);return b*b+a*a};
 goog.math.Rect.prototype.distance=function(a){return Math.sqrt(this.squaredDistance(a))};goog.math.Rect.prototype.getSize=function(){return new goog.math.Size(this.width,this.height)};goog.math.Rect.prototype.getTopLeft=function(){return new goog.math.Coordinate(this.left,this.top)};goog.math.Rect.prototype.getCenter=function(){return new goog.math.Coordinate(this.left+this.width/2,this.top+this.height/2)};
 goog.math.Rect.prototype.getBottomRight=function(){return new goog.math.Coordinate(this.left+this.width,this.top+this.height)};goog.math.Rect.prototype.ceil=function(){this.left=Math.ceil(this.left);this.top=Math.ceil(this.top);this.width=Math.ceil(this.width);this.height=Math.ceil(this.height);return this};goog.math.Rect.prototype.floor=function(){this.left=Math.floor(this.left);this.top=Math.floor(this.top);this.width=Math.floor(this.width);this.height=Math.floor(this.height);return this};
 goog.math.Rect.prototype.round=function(){this.left=Math.round(this.left);this.top=Math.round(this.top);this.width=Math.round(this.width);this.height=Math.round(this.height);return this};goog.math.Rect.prototype.translate=function(a,b){a instanceof goog.math.Coordinate?(this.left+=a.x,this.top+=a.y):(this.left+=goog.asserts.assertNumber(a),goog.isNumber(b)&&(this.top+=b));return this};
-goog.math.Rect.prototype.scale=function(a,b){var c=goog.isNumber(b)?b:a;this.left*=a;this.width*=a;this.top*=c;this.height*=c;return this};goog.reflect={};goog.reflect.object=function(a,b){return b};goog.reflect.sinkValue=function(a){goog.reflect.sinkValue[" "](a);return a};goog.reflect.sinkValue[" "]=goog.nullFunction;goog.reflect.canAccessProperty=function(a,b){try{return goog.reflect.sinkValue(a[b]),!0}catch(c){}return!1};goog.reflect.cache=function(a,b,c,d){d=d?d(b):b;return Object.prototype.hasOwnProperty.call(a,d)?a[d]:a[d]=c(b)};goog.style={};goog.style.setStyle=function(a,b,c){if(goog.isString(b))goog.style.setStyle_(a,c,b);else for(var d in b)goog.style.setStyle_(a,b[d],d)};goog.style.setStyle_=function(a,b,c){(c=goog.style.getVendorJsStyleName_(a,c))&&(a.style[c]=b)};goog.style.styleNameCache_={};
+goog.math.Rect.prototype.scale=function(a,b){var c=goog.isNumber(b)?b:a;this.left*=a;this.width*=a;this.top*=c;this.height*=c;return this};goog.reflect={};goog.reflect.object=function(a,b){return b};goog.reflect.objectProperty=function(a,b){return a};goog.reflect.sinkValue=function(a){goog.reflect.sinkValue[" "](a);return a};goog.reflect.sinkValue[" "]=goog.nullFunction;goog.reflect.canAccessProperty=function(a,b){try{return goog.reflect.sinkValue(a[b]),!0}catch(c){}return!1};goog.reflect.cache=function(a,b,c,d){d=d?d(b):b;return Object.prototype.hasOwnProperty.call(a,d)?a[d]:a[d]=c(b)};goog.style={};goog.style.setStyle=function(a,b,c){if(goog.isString(b))goog.style.setStyle_(a,c,b);else for(var d in b)goog.style.setStyle_(a,b[d],d)};goog.style.setStyle_=function(a,b,c){(c=goog.style.getVendorJsStyleName_(a,c))&&(a.style[c]=b)};goog.style.styleNameCache_={};
 goog.style.getVendorJsStyleName_=function(a,b){var c=goog.style.styleNameCache_[b];if(!c){var d=goog.string.toCamelCase(b),c=d;void 0===a.style[d]&&(d=goog.dom.vendor.getVendorJsPrefix()+goog.string.toTitleCase(d),void 0!==a.style[d]&&(c=d));goog.style.styleNameCache_[b]=c}return c};
 goog.style.getVendorStyleName_=function(a,b){var c=goog.string.toCamelCase(b);return void 0===a.style[c]&&(c=goog.dom.vendor.getVendorJsPrefix()+goog.string.toTitleCase(c),void 0!==a.style[c])?goog.dom.vendor.getVendorPrefix()+"-"+b:b};goog.style.getStyle=function(a,b){var c=a.style[goog.string.toCamelCase(b)];return"undefined"!==typeof c?c:a.style[goog.style.getVendorJsStyleName_(a,b)]||""};
 goog.style.getComputedStyle=function(a,b){var c=goog.dom.getOwnerDocument(a);return c.defaultView&&c.defaultView.getComputedStyle&&(c=c.defaultView.getComputedStyle(a,null))?c[b]||c.getPropertyValue(b)||"":""};goog.style.getCascadedStyle=function(a,b){return a.currentStyle?a.currentStyle[b]:null};goog.style.getStyle_=function(a,b){return goog.style.getComputedStyle(a,b)||goog.style.getCascadedStyle(a,b)||a.style&&a.style[b]};
@@ -303,8 +313,8 @@ goog.style.getOffsetParent=function(a){if(goog.userAgent.IE&&!goog.userAgent.isD
 a.scrollHeight>a.clientHeight||"fixed"==c||"absolute"==c||"relative"==c))return a;return null};
 goog.style.getVisibleRectForElement=function(a){for(var b=new goog.math.Box(0,Infinity,Infinity,0),c=goog.dom.getDomHelper(a),d=c.getDocument().body,e=c.getDocument().documentElement,f=c.getDocumentScrollElement();a=goog.style.getOffsetParent(a);)if(!(goog.userAgent.IE&&0==a.clientWidth||goog.userAgent.WEBKIT&&0==a.clientHeight&&a==d)&&a!=d&&a!=e&&"visible"!=goog.style.getStyle_(a,"overflow")){var g=goog.style.getPageOffset(a),h=goog.style.getClientLeftTop(a);g.x+=h.x;g.y+=h.y;b.top=Math.max(b.top,
 g.y);b.right=Math.min(b.right,g.x+a.clientWidth);b.bottom=Math.min(b.bottom,g.y+a.clientHeight);b.left=Math.max(b.left,g.x)}d=f.scrollLeft;f=f.scrollTop;b.left=Math.max(b.left,d);b.top=Math.max(b.top,f);c=c.getViewportSize();b.right=Math.min(b.right,d+c.width);b.bottom=Math.min(b.bottom,f+c.height);return 0<=b.top&&0<=b.left&&b.bottom>b.top&&b.right>b.left?b:null};
-goog.style.getContainerOffsetToScrollInto=function(a,b,c){var d=b||goog.dom.getDocumentScrollElement(),e=goog.style.getPageOffset(a),f=goog.style.getPageOffset(d),g=goog.style.getBorderBox(d);d==goog.dom.getDocumentScrollElement()?(b=e.x-d.scrollLeft,e=e.y-d.scrollTop,goog.userAgent.IE&&!goog.userAgent.isDocumentModeOrHigher(10)&&(b+=g.left,e+=g.top)):(b=e.x-f.x-g.left,e=e.y-f.y-g.top);g=d.clientWidth-a.offsetWidth;a=d.clientHeight-a.offsetHeight;f=d.scrollLeft;d=d.scrollTop;c?(f+=b-g/2,d+=e-a/2):
+goog.style.getContainerOffsetToScrollInto=function(a,b,c){var d=b||goog.dom.getDocumentScrollElement(),e=goog.style.getPageOffset(a),f=goog.style.getPageOffset(d),g=goog.style.getBorderBox(d);d==goog.dom.getDocumentScrollElement()?(b=e.x-d.scrollLeft,e=e.y-d.scrollTop,goog.userAgent.IE&&!goog.userAgent.isDocumentModeOrHigher(10)&&(b+=g.left,e+=g.top)):(b=e.x-f.x-g.left,e=e.y-f.y-g.top);g=goog.style.getSizeWithDisplay_(a);a=d.clientWidth-g.width;g=d.clientHeight-g.height;f=d.scrollLeft;d=d.scrollTop;
-(f+=Math.min(b,Math.max(b-g,0)),d+=Math.min(e,Math.max(e-a,0)));return new goog.math.Coordinate(f,d)};goog.style.scrollIntoContainerView=function(a,b,c){b=b||goog.dom.getDocumentScrollElement();a=goog.style.getContainerOffsetToScrollInto(a,b,c);b.scrollLeft=a.x;b.scrollTop=a.y};goog.style.getClientLeftTop=function(a){return new goog.math.Coordinate(a.clientLeft,a.clientTop)};
+c?(f+=b-a/2,d+=e-g/2):(f+=Math.min(b,Math.max(b-a,0)),d+=Math.min(e,Math.max(e-g,0)));return new goog.math.Coordinate(f,d)};goog.style.scrollIntoContainerView=function(a,b,c){b=b||goog.dom.getDocumentScrollElement();a=goog.style.getContainerOffsetToScrollInto(a,b,c);b.scrollLeft=a.x;b.scrollTop=a.y};goog.style.getClientLeftTop=function(a){return new goog.math.Coordinate(a.clientLeft,a.clientTop)};
 goog.style.getPageOffset=function(a){var b=goog.dom.getOwnerDocument(a);goog.asserts.assertObject(a,"Parameter is required");var c=new goog.math.Coordinate(0,0),d=goog.style.getClientViewportElement(b);if(a==d)return c;a=goog.style.getBoundingClientRect_(a);b=goog.dom.getDomHelper(b).getDocumentScroll();c.x=a.left+b.x;c.y=a.top+b.y;return c};goog.style.getPageOffsetLeft=function(a){return goog.style.getPageOffset(a).x};goog.style.getPageOffsetTop=function(a){return goog.style.getPageOffset(a).y};
 goog.style.getFramedPageOffset=function(a,b){var c=new goog.math.Coordinate(0,0),d=goog.dom.getWindow(goog.dom.getOwnerDocument(a));if(!goog.reflect.canAccessProperty(d,"parent"))return c;var e=a;do{var f=d==b?goog.style.getPageOffset(e):goog.style.getClientPositionForElement_(goog.asserts.assert(e));c.x+=f.x;c.y+=f.y}while(d&&d!=b&&d!=d.parent&&(e=d.frameElement)&&(d=d.parent));return c};
 goog.style.translateRectForAnotherFrame=function(a,b,c){if(b.getDocument()!=c.getDocument()){var d=b.getDocument().body;c=goog.style.getFramedPageOffset(d,c.getWindow());c=goog.math.Coordinate.difference(c,goog.style.getPageOffset(d));!goog.userAgent.IE||goog.userAgent.isDocumentModeOrHigher(9)||b.isCss1CompatMode()||(c=goog.math.Coordinate.difference(c,b.getDocumentScroll()));a.left+=c.x;a.top+=c.y}};
@@ -317,8 +327,8 @@ goog.style.getBounds=function(a){var b=goog.style.getPageOffset(a);a=goog.style.
 goog.style.getOpacity=function(a){goog.asserts.assert(a);var b=a.style;a="";"opacity"in b?a=b.opacity:"MozOpacity"in b?a=b.MozOpacity:"filter"in b&&(b=b.filter.match(/alpha\(opacity=([\d.]+)\)/))&&(a=String(b[1]/100));return""==a?a:Number(a)};goog.style.setOpacity=function(a,b){goog.asserts.assert(a);var c=a.style;"opacity"in c?c.opacity=b:"MozOpacity"in c?c.MozOpacity=b:"filter"in c&&(c.filter=""===b?"":"alpha(opacity="+100*Number(b)+")")};
 goog.style.setTransparentBackgroundImage=function(a,b){var c=a.style;goog.userAgent.IE&&!goog.userAgent.isVersionOrHigher("8")?c.filter='progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+b+'", sizingMethod="crop")':(c.backgroundImage="url("+b+")",c.backgroundPosition="top left",c.backgroundRepeat="no-repeat")};goog.style.clearTransparentBackgroundImage=function(a){a=a.style;"filter"in a?a.filter="":a.backgroundImage="none"};
 goog.style.showElement=function(a,b){goog.style.setElementShown(a,b)};goog.style.setElementShown=function(a,b){a.style.display=b?"":"none"};goog.style.isElementShown=function(a){return"none"!=a.style.display};goog.style.installStyles=function(a,b){return goog.style.installSafeStyleSheet(goog.html.legacyconversions.safeStyleSheetFromString(a),b)};
-goog.style.installSafeStyleSheet=function(a,b){var c=goog.dom.getDomHelper(b),d,e=c.getDocument();goog.userAgent.IE&&e.createStyleSheet?(d=e.createStyleSheet(),goog.style.setSafeStyleSheet(d,a)):(e=c.getElementsByTagNameAndClass(goog.dom.TagName.HEAD)[0],e||(d=c.getElementsByTagNameAndClass(goog.dom.TagName.BODY)[0],e=c.createDom(goog.dom.TagName.HEAD),d.parentNode.insertBefore(e,d)),d=c.createDom(goog.dom.TagName.STYLE),goog.style.setSafeStyleSheet(d,a),c.appendChild(e,d));return d};
+goog.style.installSafeStyleSheet=function(a,b){var c=goog.dom.getDomHelper(b),d,e=c.getDocument();goog.userAgent.IE&&e.createStyleSheet?(d=e.createStyleSheet(),goog.style.setSafeStyleSheet(d,a)):(e=c.getElementsByTagNameAndClass("HEAD")[0],e||(d=c.getElementsByTagNameAndClass("BODY")[0],e=c.createDom("HEAD"),d.parentNode.insertBefore(e,d)),d=c.createDom("STYLE"),goog.style.setSafeStyleSheet(d,a),c.appendChild(e,d));return d};
-goog.style.uninstallStyles=function(a){goog.dom.removeNode(a.ownerNode||a.owningElement||a)};goog.style.setStyles=function(a,b){goog.style.setSafeStyleSheet(a,goog.html.legacyconversions.safeStyleSheetFromString(b))};goog.style.setSafeStyleSheet=function(a,b){var c=goog.html.SafeStyleSheet.unwrap(b);goog.userAgent.IE&&goog.isDef(a.cssText)?a.cssText=c:goog.dom.setTextContent(a,c)};
+goog.style.uninstallStyles=function(a){goog.dom.removeNode(a.ownerNode||a.owningElement||a)};goog.style.setStyles=function(a,b){goog.style.setSafeStyleSheet(a,goog.html.legacyconversions.safeStyleSheetFromString(b))};goog.style.setSafeStyleSheet=function(a,b){var c=goog.html.SafeStyleSheet.unwrap(b);goog.userAgent.IE&&goog.isDef(a.cssText)?a.cssText=c:a.innerHTML=c};
 goog.style.setPreWrap=function(a){a=a.style;goog.userAgent.IE&&!goog.userAgent.isVersionOrHigher("8")?(a.whiteSpace="pre",a.wordWrap="break-word"):a.whiteSpace=goog.userAgent.GECKO?"-moz-pre-wrap":"pre-wrap"};goog.style.setInlineBlock=function(a){a=a.style;a.position="relative";goog.userAgent.IE&&!goog.userAgent.isVersionOrHigher("8")?(a.zoom="1",a.display="inline"):a.display="inline-block"};goog.style.isRightToLeft=function(a){return"rtl"==goog.style.getStyle_(a,"direction")};
 goog.style.unselectableStyle_=goog.userAgent.GECKO?"MozUserSelect":goog.userAgent.WEBKIT||goog.userAgent.EDGE?"WebkitUserSelect":null;goog.style.isUnselectable=function(a){return goog.style.unselectableStyle_?"none"==a.style[goog.style.unselectableStyle_].toLowerCase():goog.userAgent.IE||goog.userAgent.OPERA?"on"==a.getAttribute("unselectable"):!1};
 goog.style.setUnselectable=function(a,b,c){c=c?null:a.getElementsByTagName("*");var d=goog.style.unselectableStyle_;if(d){if(b=b?"none":"",a.style&&(a.style[d]=b),c){a=0;for(var e;e=c[a];a++)e.style&&(e.style[d]=b)}}else if(goog.userAgent.IE||goog.userAgent.OPERA)if(b=b?"on":"",a.setAttribute("unselectable",b),c)for(a=0;e=c[a];a++)e.setAttribute("unselectable",b)};goog.style.getBorderBoxSize=function(a){return new goog.math.Size(a.offsetWidth,a.offsetHeight)};
@@ -336,9 +346,9 @@ goog.style.getBorderBox=function(a){if(goog.userAgent.IE&&!goog.userAgent.isDocu
 "borderBottomWidth");return new goog.math.Box(parseFloat(d),parseFloat(c),parseFloat(a),parseFloat(b))};goog.style.getFontFamily=function(a){var b=goog.dom.getOwnerDocument(a),c="";if(b.body.createTextRange&&goog.dom.contains(b,a)){b=b.body.createTextRange();b.moveToElementText(a);try{c=b.queryCommandValue("FontName")}catch(d){c=""}}c||(c=goog.style.getStyle_(a,"fontFamily"));a=c.split(",");1<a.length&&(c=a[0]);return goog.string.stripQuotes(c,"\"'")};goog.style.lengthUnitRegex_=/[^\d]+$/;
 goog.style.getLengthUnits=function(a){return(a=a.match(goog.style.lengthUnitRegex_))&&a[0]||null};goog.style.ABSOLUTE_CSS_LENGTH_UNITS_={cm:1,"in":1,mm:1,pc:1,pt:1};goog.style.CONVERTIBLE_RELATIVE_CSS_UNITS_={em:1,ex:1};
 goog.style.getFontSize=function(a){var b=goog.style.getStyle_(a,"fontSize"),c=goog.style.getLengthUnits(b);if(b&&"px"==c)return parseInt(b,10);if(goog.userAgent.IE){if(String(c)in goog.style.ABSOLUTE_CSS_LENGTH_UNITS_)return goog.style.getIePixelValue_(a,b,"left","pixelLeft");if(a.parentNode&&a.parentNode.nodeType==goog.dom.NodeType.ELEMENT&&String(c)in goog.style.CONVERTIBLE_RELATIVE_CSS_UNITS_)return a=a.parentNode,c=goog.style.getStyle_(a,"fontSize"),goog.style.getIePixelValue_(a,b==c?"1em":b,
-"left","pixelLeft")}c=goog.dom.createDom(goog.dom.TagName.SPAN,{style:"visibility:hidden;position:absolute;line-height:0;padding:0;margin:0;border:0;height:1em;"});goog.dom.appendChild(a,c);b=c.offsetHeight;goog.dom.removeNode(c);return b};goog.style.parseStyleAttribute=function(a){var b={};goog.array.forEach(a.split(/\s*;\s*/),function(a){var d=a.match(/\s*([\w-]+)\s*\:(.+)/);d&&(a=d[1],d=goog.string.trim(d[2]),b[goog.string.toCamelCase(a.toLowerCase())]=d)});return b};
+"left","pixelLeft")}c=goog.dom.createDom("SPAN",{style:"visibility:hidden;position:absolute;line-height:0;padding:0;margin:0;border:0;height:1em;"});goog.dom.appendChild(a,c);b=c.offsetHeight;goog.dom.removeNode(c);return b};goog.style.parseStyleAttribute=function(a){var b={};goog.array.forEach(a.split(/\s*;\s*/),function(a){var d=a.match(/\s*([\w-]+)\s*\:(.+)/);d&&(a=d[1],d=goog.string.trim(d[2]),b[goog.string.toCamelCase(a.toLowerCase())]=d)});return b};
 goog.style.toStyleAttribute=function(a){var b=[];goog.object.forEach(a,function(a,d){b.push(goog.string.toSelectorCase(d),":",a,";")});return b.join("")};goog.style.setFloat=function(a,b){a.style[goog.userAgent.IE?"styleFloat":"cssFloat"]=b};goog.style.getFloat=function(a){return a.style[goog.userAgent.IE?"styleFloat":"cssFloat"]||""};
-goog.style.getScrollbarWidth=function(a){var b=goog.dom.createElement(goog.dom.TagName.DIV);a&&(b.className=a);b.style.cssText="overflow:auto;position:absolute;top:0;width:100px;height:100px";a=goog.dom.createElement(goog.dom.TagName.DIV);goog.style.setSize(a,"200px","200px");b.appendChild(a);goog.dom.appendChild(goog.dom.getDocument().body,b);a=b.offsetWidth-b.clientWidth;goog.dom.removeNode(b);return a};goog.style.MATRIX_TRANSLATION_REGEX_=/matrix\([0-9\.\-]+, [0-9\.\-]+, [0-9\.\-]+, [0-9\.\-]+, ([0-9\.\-]+)p?x?, ([0-9\.\-]+)p?x?\)/;
+goog.style.getScrollbarWidth=function(a){var b=goog.dom.createElement("DIV");a&&(b.className=a);b.style.cssText="overflow:auto;position:absolute;top:0;width:100px;height:100px";a=goog.dom.createElement("DIV");goog.style.setSize(a,"200px","200px");b.appendChild(a);goog.dom.appendChild(goog.dom.getDocument().body,b);a=b.offsetWidth-b.clientWidth;goog.dom.removeNode(b);return a};goog.style.MATRIX_TRANSLATION_REGEX_=/matrix\([0-9\.\-]+, [0-9\.\-]+, [0-9\.\-]+, [0-9\.\-]+, ([0-9\.\-]+)p?x?, ([0-9\.\-]+)p?x?\)/;
 goog.style.getCssTranslation=function(a){a=goog.style.getComputedTransform(a);return a?(a=a.match(goog.style.MATRIX_TRANSLATION_REGEX_))?new goog.math.Coordinate(parseFloat(a[1]),parseFloat(a[2])):new goog.math.Coordinate(0,0):new goog.math.Coordinate(0,0)};goog.debug.entryPointRegistry={};goog.debug.EntryPointMonitor=function(){};goog.debug.entryPointRegistry.refList_=[];goog.debug.entryPointRegistry.monitors_=[];goog.debug.entryPointRegistry.monitorsMayExist_=!1;goog.debug.entryPointRegistry.register=function(a){goog.debug.entryPointRegistry.refList_[goog.debug.entryPointRegistry.refList_.length]=a;if(goog.debug.entryPointRegistry.monitorsMayExist_)for(var b=goog.debug.entryPointRegistry.monitors_,c=0;c<b.length;c++)a(goog.bind(b[c].wrap,b[c]))};
 goog.debug.entryPointRegistry.monitorAll=function(a){goog.debug.entryPointRegistry.monitorsMayExist_=!0;for(var b=goog.bind(a.wrap,a),c=0;c<goog.debug.entryPointRegistry.refList_.length;c++)goog.debug.entryPointRegistry.refList_[c](b);goog.debug.entryPointRegistry.monitors_.push(a)};
 goog.debug.entryPointRegistry.unmonitorAllIfPossible=function(a){var b=goog.debug.entryPointRegistry.monitors_;goog.asserts.assert(a==b[b.length-1],"Only the most recent monitor can be unwrapped.");a=goog.bind(a.unwrap,a);for(var c=0;c<goog.debug.entryPointRegistry.refList_.length;c++)goog.debug.entryPointRegistry.refList_[c](a);b.length--};goog.events={};
@@ -346,15 +356,15 @@ goog.events.BrowserFeature={HAS_W3C_BUTTON:!goog.userAgent.IE||goog.userAgent.is
 goog.userAgent.OPERA&&goog.userAgent.isVersionOrHigher("9.5")||goog.userAgent.WEBKIT&&goog.userAgent.isVersionOrHigher("528"),HTML5_NETWORK_EVENTS_FIRE_ON_BODY:goog.userAgent.GECKO&&!goog.userAgent.isVersionOrHigher("8")||goog.userAgent.IE&&!goog.userAgent.isVersionOrHigher("9"),TOUCH_ENABLED:"ontouchstart"in goog.global||!!(goog.global.document&&document.documentElement&&"ontouchstart"in document.documentElement)||!(!goog.global.navigator||!goog.global.navigator.msMaxTouchPoints)};goog.disposable={};goog.disposable.IDisposable=function(){};goog.Disposable=function(){goog.Disposable.MONITORING_MODE!=goog.Disposable.MonitoringMode.OFF&&(goog.Disposable.INCLUDE_STACK_ON_CREATION&&(this.creationStack=Error().stack),goog.Disposable.instances_[goog.getUid(this)]=this);this.disposed_=this.disposed_;this.onDisposeCallbacks_=this.onDisposeCallbacks_};goog.Disposable.MonitoringMode={OFF:0,PERMANENT:1,INTERACTIVE:2};goog.Disposable.MONITORING_MODE=0;goog.Disposable.INCLUDE_STACK_ON_CREATION=!0;goog.Disposable.instances_={};
 goog.Disposable.getUndisposedObjects=function(){var a=[],b;for(b in goog.Disposable.instances_)goog.Disposable.instances_.hasOwnProperty(b)&&a.push(goog.Disposable.instances_[Number(b)]);return a};goog.Disposable.clearUndisposedObjects=function(){goog.Disposable.instances_={}};goog.Disposable.prototype.disposed_=!1;goog.Disposable.prototype.isDisposed=function(){return this.disposed_};goog.Disposable.prototype.getDisposed=goog.Disposable.prototype.isDisposed;
 goog.Disposable.prototype.dispose=function(){if(!this.disposed_&&(this.disposed_=!0,this.disposeInternal(),goog.Disposable.MONITORING_MODE!=goog.Disposable.MonitoringMode.OFF)){var a=goog.getUid(this);if(goog.Disposable.MONITORING_MODE==goog.Disposable.MonitoringMode.PERMANENT&&!goog.Disposable.instances_.hasOwnProperty(a))throw Error(this+" did not call the goog.Disposable base constructor or was disposed of after a clearUndisposedObjects call");delete goog.Disposable.instances_[a]}};
-goog.Disposable.prototype.registerDisposable=function(a){this.addOnDisposeCallback(goog.partial(goog.dispose,a))};goog.Disposable.prototype.addOnDisposeCallback=function(a,b){this.disposed_?a.call(b):(this.onDisposeCallbacks_||(this.onDisposeCallbacks_=[]),this.onDisposeCallbacks_.push(goog.isDef(b)?goog.bind(a,b):a))};goog.Disposable.prototype.disposeInternal=function(){if(this.onDisposeCallbacks_)for(;this.onDisposeCallbacks_.length;)this.onDisposeCallbacks_.shift()()};
+goog.Disposable.prototype.registerDisposable=function(a){this.addOnDisposeCallback(goog.partial(goog.dispose,a))};goog.Disposable.prototype.addOnDisposeCallback=function(a,b){this.disposed_?goog.isDef(b)?a.call(b):a():(this.onDisposeCallbacks_||(this.onDisposeCallbacks_=[]),this.onDisposeCallbacks_.push(goog.isDef(b)?goog.bind(a,b):a))};goog.Disposable.prototype.disposeInternal=function(){if(this.onDisposeCallbacks_)for(;this.onDisposeCallbacks_.length;)this.onDisposeCallbacks_.shift()()};
 goog.Disposable.isDisposed=function(a){return a&&"function"==typeof a.isDisposed?a.isDisposed():!1};goog.dispose=function(a){a&&"function"==typeof a.dispose&&a.dispose()};goog.disposeAll=function(a){for(var b=0,c=arguments.length;b<c;++b){var d=arguments[b];goog.isArrayLike(d)?goog.disposeAll.apply(null,d):goog.dispose(d)}};goog.events.EventId=function(a){this.id=a};goog.events.EventId.prototype.toString=function(){return this.id};goog.events.Event=function(a,b){this.type=a instanceof goog.events.EventId?String(a):a;this.currentTarget=this.target=b;this.defaultPrevented=this.propagationStopped_=!1;this.returnValue_=!0};goog.events.Event.prototype.stopPropagation=function(){this.propagationStopped_=!0};goog.events.Event.prototype.preventDefault=function(){this.defaultPrevented=!0;this.returnValue_=!1};goog.events.Event.stopPropagation=function(a){a.stopPropagation()};goog.events.Event.preventDefault=function(a){a.preventDefault()};goog.events.getVendorPrefixedName_=function(a){return goog.userAgent.WEBKIT?"webkit"+a:goog.userAgent.OPERA?"o"+a.toLowerCase():a.toLowerCase()};
 goog.events.EventType={CLICK:"click",RIGHTCLICK:"rightclick",DBLCLICK:"dblclick",MOUSEDOWN:"mousedown",MOUSEUP:"mouseup",MOUSEOVER:"mouseover",MOUSEOUT:"mouseout",MOUSEMOVE:"mousemove",MOUSEENTER:"mouseenter",MOUSELEAVE:"mouseleave",SELECTSTART:"selectstart",WHEEL:"wheel",KEYPRESS:"keypress",KEYDOWN:"keydown",KEYUP:"keyup",BLUR:"blur",FOCUS:"focus",DEACTIVATE:"deactivate",FOCUSIN:goog.userAgent.IE?"focusin":"DOMFocusIn",FOCUSOUT:goog.userAgent.IE?"focusout":"DOMFocusOut",CHANGE:"change",RESET:"reset",
 SELECT:"select",SUBMIT:"submit",INPUT:"input",PROPERTYCHANGE:"propertychange",DRAGSTART:"dragstart",DRAG:"drag",DRAGENTER:"dragenter",DRAGOVER:"dragover",DRAGLEAVE:"dragleave",DROP:"drop",DRAGEND:"dragend",TOUCHSTART:"touchstart",TOUCHMOVE:"touchmove",TOUCHEND:"touchend",TOUCHCANCEL:"touchcancel",BEFOREUNLOAD:"beforeunload",CONSOLEMESSAGE:"consolemessage",CONTEXTMENU:"contextmenu",DOMCONTENTLOADED:"DOMContentLoaded",ERROR:"error",HELP:"help",LOAD:"load",LOSECAPTURE:"losecapture",ORIENTATIONCHANGE:"orientationchange",
-READYSTATECHANGE:"readystatechange",RESIZE:"resize",SCROLL:"scroll",TIMEUPDATE:"timeupdate",UNLOAD:"unload",HASHCHANGE:"hashchange",PAGEHIDE:"pagehide",PAGESHOW:"pageshow",POPSTATE:"popstate",COPY:"copy",PASTE:"paste",CUT:"cut",BEFORECOPY:"beforecopy",BEFORECUT:"beforecut",BEFOREPASTE:"beforepaste",ONLINE:"online",OFFLINE:"offline",MESSAGE:"message",CONNECT:"connect",ANIMATIONSTART:goog.events.getVendorPrefixedName_("AnimationStart"),ANIMATIONEND:goog.events.getVendorPrefixedName_("AnimationEnd"),
+READYSTATECHANGE:"readystatechange",RESIZE:"resize",SCROLL:"scroll",UNLOAD:"unload",CANPLAY:"canplay",CANPLAYTHROUGH:"canplaythrough",DURATIONCHANGE:"durationchange",EMPTIED:"emptied",ENDED:"ended",LOADEDDATA:"loadeddata",LOADEDMETADATA:"loadedmetadata",PAUSE:"pause",PLAY:"play",PLAYING:"playing",RATECHANGE:"ratechange",SEEKED:"seeked",SEEKING:"seeking",STALLED:"stalled",SUSPEND:"suspend",TIMEUPDATE:"timeupdate",VOLUMECHANGE:"volumechange",WAITING:"waiting",HASHCHANGE:"hashchange",PAGEHIDE:"pagehide",
-ANIMATIONITERATION:goog.events.getVendorPrefixedName_("AnimationIteration"),TRANSITIONEND:goog.events.getVendorPrefixedName_("TransitionEnd"),POINTERDOWN:"pointerdown",POINTERUP:"pointerup",POINTERCANCEL:"pointercancel",POINTERMOVE:"pointermove",POINTEROVER:"pointerover",POINTEROUT:"pointerout",POINTERENTER:"pointerenter",POINTERLEAVE:"pointerleave",GOTPOINTERCAPTURE:"gotpointercapture",LOSTPOINTERCAPTURE:"lostpointercapture",MSGESTURECHANGE:"MSGestureChange",MSGESTUREEND:"MSGestureEnd",MSGESTUREHOLD:"MSGestureHold",
+PAGESHOW:"pageshow",POPSTATE:"popstate",COPY:"copy",PASTE:"paste",CUT:"cut",BEFORECOPY:"beforecopy",BEFORECUT:"beforecut",BEFOREPASTE:"beforepaste",ONLINE:"online",OFFLINE:"offline",MESSAGE:"message",CONNECT:"connect",ANIMATIONSTART:goog.events.getVendorPrefixedName_("AnimationStart"),ANIMATIONEND:goog.events.getVendorPrefixedName_("AnimationEnd"),ANIMATIONITERATION:goog.events.getVendorPrefixedName_("AnimationIteration"),TRANSITIONEND:goog.events.getVendorPrefixedName_("TransitionEnd"),POINTERDOWN:"pointerdown",
-MSGESTURESTART:"MSGestureStart",MSGESTURETAP:"MSGestureTap",MSGOTPOINTERCAPTURE:"MSGotPointerCapture",MSINERTIASTART:"MSInertiaStart",MSLOSTPOINTERCAPTURE:"MSLostPointerCapture",MSPOINTERCANCEL:"MSPointerCancel",MSPOINTERDOWN:"MSPointerDown",MSPOINTERENTER:"MSPointerEnter",MSPOINTERHOVER:"MSPointerHover",MSPOINTERLEAVE:"MSPointerLeave",MSPOINTERMOVE:"MSPointerMove",MSPOINTEROUT:"MSPointerOut",MSPOINTEROVER:"MSPointerOver",MSPOINTERUP:"MSPointerUp",TEXT:"text",TEXTINPUT:"textInput",COMPOSITIONSTART:"compositionstart",
+POINTERUP:"pointerup",POINTERCANCEL:"pointercancel",POINTERMOVE:"pointermove",POINTEROVER:"pointerover",POINTEROUT:"pointerout",POINTERENTER:"pointerenter",POINTERLEAVE:"pointerleave",GOTPOINTERCAPTURE:"gotpointercapture",LOSTPOINTERCAPTURE:"lostpointercapture",MSGESTURECHANGE:"MSGestureChange",MSGESTUREEND:"MSGestureEnd",MSGESTUREHOLD:"MSGestureHold",MSGESTURESTART:"MSGestureStart",MSGESTURETAP:"MSGestureTap",MSGOTPOINTERCAPTURE:"MSGotPointerCapture",MSINERTIASTART:"MSInertiaStart",MSLOSTPOINTERCAPTURE:"MSLostPointerCapture",
-COMPOSITIONUPDATE:"compositionupdate",COMPOSITIONEND:"compositionend",EXIT:"exit",LOADABORT:"loadabort",LOADCOMMIT:"loadcommit",LOADREDIRECT:"loadredirect",LOADSTART:"loadstart",LOADSTOP:"loadstop",RESPONSIVE:"responsive",SIZECHANGED:"sizechanged",UNRESPONSIVE:"unresponsive",VISIBILITYCHANGE:"visibilitychange",STORAGE:"storage",DOMSUBTREEMODIFIED:"DOMSubtreeModified",DOMNODEINSERTED:"DOMNodeInserted",DOMNODEREMOVED:"DOMNodeRemoved",DOMNODEREMOVEDFROMDOCUMENT:"DOMNodeRemovedFromDocument",DOMNODEINSERTEDINTODOCUMENT:"DOMNodeInsertedIntoDocument",
+MSPOINTERCANCEL:"MSPointerCancel",MSPOINTERDOWN:"MSPointerDown",MSPOINTERENTER:"MSPointerEnter",MSPOINTERHOVER:"MSPointerHover",MSPOINTERLEAVE:"MSPointerLeave",MSPOINTERMOVE:"MSPointerMove",MSPOINTEROUT:"MSPointerOut",MSPOINTEROVER:"MSPointerOver",MSPOINTERUP:"MSPointerUp",TEXT:"text",TEXTINPUT:"textInput",COMPOSITIONSTART:"compositionstart",COMPOSITIONUPDATE:"compositionupdate",COMPOSITIONEND:"compositionend",EXIT:"exit",LOADABORT:"loadabort",LOADCOMMIT:"loadcommit",LOADREDIRECT:"loadredirect",LOADSTART:"loadstart",
-DOMATTRMODIFIED:"DOMAttrModified",DOMCHARACTERDATAMODIFIED:"DOMCharacterDataModified",BEFOREPRINT:"beforeprint",AFTERPRINT:"afterprint"};goog.events.BrowserEvent=function(a,b){goog.events.Event.call(this,a?a.type:"");this.relatedTarget=this.currentTarget=this.target=null;this.charCode=this.keyCode=this.button=this.screenY=this.screenX=this.clientY=this.clientX=this.offsetY=this.offsetX=0;this.metaKey=this.shiftKey=this.altKey=this.ctrlKey=!1;this.state=null;this.platformModifierKey=!1;this.event_=null;a&&this.init(a,b)};goog.inherits(goog.events.BrowserEvent,goog.events.Event);
+LOADSTOP:"loadstop",RESPONSIVE:"responsive",SIZECHANGED:"sizechanged",UNRESPONSIVE:"unresponsive",VISIBILITYCHANGE:"visibilitychange",STORAGE:"storage",DOMSUBTREEMODIFIED:"DOMSubtreeModified",DOMNODEINSERTED:"DOMNodeInserted",DOMNODEREMOVED:"DOMNodeRemoved",DOMNODEREMOVEDFROMDOCUMENT:"DOMNodeRemovedFromDocument",DOMNODEINSERTEDINTODOCUMENT:"DOMNodeInsertedIntoDocument",DOMATTRMODIFIED:"DOMAttrModified",DOMCHARACTERDATAMODIFIED:"DOMCharacterDataModified",BEFOREPRINT:"beforeprint",AFTERPRINT:"afterprint"};goog.events.BrowserEvent=function(a,b){goog.events.Event.call(this,a?a.type:"");this.relatedTarget=this.currentTarget=this.target=null;this.charCode=this.keyCode=this.button=this.screenY=this.screenX=this.clientY=this.clientX=this.offsetY=this.offsetX=0;this.metaKey=this.shiftKey=this.altKey=this.ctrlKey=!1;this.state=null;this.platformModifierKey=!1;this.event_=null;a&&this.init(a,b)};goog.inherits(goog.events.BrowserEvent,goog.events.Event);
 goog.events.BrowserEvent.MouseButton={LEFT:0,MIDDLE:1,RIGHT:2};goog.events.BrowserEvent.IEButtonMap=[1,4,2];
 goog.events.BrowserEvent.prototype.init=function(a,b){var c=this.type=a.type,d=a.changedTouches?a.changedTouches[0]:null;this.target=a.target||a.srcElement;this.currentTarget=b;var e=a.relatedTarget;e?goog.userAgent.GECKO&&(goog.reflect.canAccessProperty(e,"nodeName")||(e=null)):c==goog.events.EventType.MOUSEOVER?e=a.fromElement:c==goog.events.EventType.MOUSEOUT&&(e=a.toElement);this.relatedTarget=e;goog.isNull(d)?(this.offsetX=goog.userAgent.WEBKIT||void 0!==a.offsetX?a.offsetX:a.layerX,this.offsetY=
 goog.userAgent.WEBKIT||void 0!==a.offsetY?a.offsetY:a.layerY,this.clientX=void 0!==a.clientX?a.clientX:a.pageX,this.clientY=void 0!==a.clientY?a.clientY:a.pageY,this.screenX=a.screenX||0,this.screenY=a.screenY||0):(this.clientX=void 0!==d.clientX?d.clientX:d.pageX,this.clientY=void 0!==d.clientY?d.clientY:d.pageY,this.screenX=d.screenX||0,this.screenY=d.screenY||0);this.button=a.button;this.keyCode=a.keyCode||0;this.charCode=a.charCode||("keypress"==c?a.keyCode:0);this.ctrlKey=a.ctrlKey;this.altKey=
@@ -391,9 +401,9 @@ goog.functions.and=function(a){var b=arguments,c=b.length;return function(){for(
 goog.functions.create=function(a,b){var c=function(){};c.prototype=a.prototype;c=new c;a.apply(c,Array.prototype.slice.call(arguments,1));return c};goog.functions.CACHE_RETURN_VALUE=!0;goog.functions.cacheReturnValue=function(a){var b=!1,c;return function(){if(!goog.functions.CACHE_RETURN_VALUE)return a();b||(c=a(),b=!0);return c}};goog.functions.once=function(a){var b=a;return function(){if(b){var a=b;b=null;a()}}};
 goog.functions.debounce=function(a,b,c){c&&(a=goog.bind(a,c));var d=null;return function(c){goog.global.clearTimeout(d);var f=arguments;d=goog.global.setTimeout(function(){a.apply(null,f)},b)}};goog.functions.throttle=function(a,b,c){c&&(a=goog.bind(a,c));var d=null,e=!1,f=[],g=function(){d=null;e&&(e=!1,h())},h=function(){d=goog.global.setTimeout(g,b);a.apply(null,f)};return function(a){f=arguments;d?e=!0:h()}};goog.async.throwException=function(a){goog.global.setTimeout(function(){throw a;},0)};goog.async.nextTick=function(a,b,c){var d=a;b&&(d=goog.bind(a,b));d=goog.async.nextTick.wrapCallback_(d);goog.isFunction(goog.global.setImmediate)&&(c||goog.async.nextTick.useSetImmediate_())?goog.global.setImmediate(d):(goog.async.nextTick.setImmediate_||(goog.async.nextTick.setImmediate_=goog.async.nextTick.getSetImmediateEmulator_()),goog.async.nextTick.setImmediate_(d))};
 goog.async.nextTick.useSetImmediate_=function(){return goog.global.Window&&goog.global.Window.prototype&&!goog.labs.userAgent.browser.isEdge()&&goog.global.Window.prototype.setImmediate==goog.global.setImmediate?!1:!0};
-goog.async.nextTick.getSetImmediateEmulator_=function(){var a=goog.global.MessageChannel;"undefined"===typeof a&&"undefined"!==typeof window&&window.postMessage&&window.addEventListener&&!goog.labs.userAgent.engine.isPresto()&&(a=function(){var a=document.createElement(goog.dom.TagName.IFRAME);a.style.display="none";a.src="";document.documentElement.appendChild(a);var b=a.contentWindow,a=b.document;a.open();a.write("");a.close();var c="callImmediate"+Math.random(),d="file:"==b.location.protocol?"*":
+goog.async.nextTick.getSetImmediateEmulator_=function(){var a=goog.global.MessageChannel;"undefined"===typeof a&&"undefined"!==typeof window&&window.postMessage&&window.addEventListener&&!goog.labs.userAgent.engine.isPresto()&&(a=function(){var a=document.createElement("IFRAME");a.style.display="none";a.src="";document.documentElement.appendChild(a);var b=a.contentWindow,a=b.document;a.open();a.write("");a.close();var c="callImmediate"+Math.random(),d="file:"==b.location.protocol?"*":b.location.protocol+
-b.location.protocol+"//"+b.location.host,a=goog.bind(function(a){if(("*"==d||a.origin==d)&&a.data==c)this.port1.onmessage()},this);b.addEventListener("message",a,!1);this.port1={};this.port2={postMessage:function(){b.postMessage(c,d)}}});if("undefined"!==typeof a&&!goog.labs.userAgent.browser.isIE()){var b=new a,c={},d=c;b.port1.onmessage=function(){if(goog.isDef(c.next)){c=c.next;var a=c.cb;c.cb=null;a()}};return function(a){d.next={cb:a};d=d.next;b.port2.postMessage(0)}}return"undefined"!==typeof document&&
+"//"+b.location.host,a=goog.bind(function(a){if(("*"==d||a.origin==d)&&a.data==c)this.port1.onmessage()},this);b.addEventListener("message",a,!1);this.port1={};this.port2={postMessage:function(){b.postMessage(c,d)}}});if("undefined"!==typeof a&&!goog.labs.userAgent.browser.isIE()){var b=new a,c={},d=c;b.port1.onmessage=function(){if(goog.isDef(c.next)){c=c.next;var a=c.cb;c.cb=null;a()}};return function(a){d.next={cb:a};d=d.next;b.port2.postMessage(0)}}return"undefined"!==typeof document&&"onreadystatechange"in
-"onreadystatechange"in document.createElement(goog.dom.TagName.SCRIPT)?function(a){var b=document.createElement(goog.dom.TagName.SCRIPT);b.onreadystatechange=function(){b.onreadystatechange=null;b.parentNode.removeChild(b);b=null;a();a=null};document.documentElement.appendChild(b)}:function(a){goog.global.setTimeout(a,0)}};goog.async.nextTick.wrapCallback_=goog.functions.identity;goog.debug.entryPointRegistry.register(function(a){goog.async.nextTick.wrapCallback_=a});goog.async.run=function(a,b){goog.async.run.schedule_||goog.async.run.initializeRunner_();goog.async.run.workQueueScheduled_||(goog.async.run.schedule_(),goog.async.run.workQueueScheduled_=!0);goog.async.run.workQueue_.add(a,b)};goog.async.run.initializeRunner_=function(){if(goog.global.Promise&&goog.global.Promise.resolve){var a=goog.global.Promise.resolve(void 0);goog.async.run.schedule_=function(){a.then(goog.async.run.processWorkQueue)}}else goog.async.run.schedule_=function(){goog.async.nextTick(goog.async.run.processWorkQueue)}};
+document.createElement("SCRIPT")?function(a){var b=document.createElement("SCRIPT");b.onreadystatechange=function(){b.onreadystatechange=null;b.parentNode.removeChild(b);b=null;a();a=null};document.documentElement.appendChild(b)}:function(a){goog.global.setTimeout(a,0)}};goog.async.nextTick.wrapCallback_=goog.functions.identity;goog.debug.entryPointRegistry.register(function(a){goog.async.nextTick.wrapCallback_=a});goog.async.run=function(a,b){goog.async.run.schedule_||goog.async.run.initializeRunner_();goog.async.run.workQueueScheduled_||(goog.async.run.schedule_(),goog.async.run.workQueueScheduled_=!0);goog.async.run.workQueue_.add(a,b)};goog.async.run.initializeRunner_=function(){if(goog.global.Promise&&goog.global.Promise.resolve){var a=goog.global.Promise.resolve(void 0);goog.async.run.schedule_=function(){a.then(goog.async.run.processWorkQueue)}}else goog.async.run.schedule_=function(){goog.async.nextTick(goog.async.run.processWorkQueue)}};
 goog.async.run.forceNextTick=function(a){goog.async.run.schedule_=function(){goog.async.nextTick(goog.async.run.processWorkQueue);a&&a(goog.async.run.processWorkQueue)}};goog.async.run.workQueueScheduled_=!1;goog.async.run.workQueue_=new goog.async.WorkQueue;goog.DEBUG&&(goog.async.run.resetQueue=function(){goog.async.run.workQueueScheduled_=!1;goog.async.run.workQueue_=new goog.async.WorkQueue});
 goog.async.run.processWorkQueue=function(){for(var a;a=goog.async.run.workQueue_.remove();){try{a.fn.call(a.scope)}catch(b){goog.async.throwException(b)}goog.async.run.workQueue_.returnUnused(a)}goog.async.run.workQueueScheduled_=!1};goog.promise={};goog.promise.Resolver=function(){};goog.Promise=function(a,b){this.state_=goog.Promise.State_.PENDING;this.result_=void 0;this.callbackEntriesTail_=this.callbackEntries_=this.parent_=null;this.executing_=!1;0<goog.Promise.UNHANDLED_REJECTION_DELAY?this.unhandledRejectionId_=0:0==goog.Promise.UNHANDLED_REJECTION_DELAY&&(this.hadUnhandledRejection_=!1);goog.Promise.LONG_STACK_TRACES&&(this.stack_=[],this.addStackTrace_(Error("created")),this.currentStep_=0);if(a!=goog.nullFunction)try{var c=this;a.call(b,function(a){c.resolve_(goog.Promise.State_.FULFILLED,
 a)},function(a){if(goog.DEBUG&&!(a instanceof goog.Promise.CancellationError))try{if(a instanceof Error)throw a;throw Error("Promise rejected.");}catch(b){}c.resolve_(goog.Promise.State_.REJECTED,a)})}catch(d){this.resolve_(goog.Promise.State_.REJECTED,d)}};goog.Promise.LONG_STACK_TRACES=!1;goog.Promise.UNHANDLED_REJECTION_DELAY=0;goog.Promise.State_={PENDING:0,BLOCKED:1,FULFILLED:2,REJECTED:3};
@@ -411,7 +421,7 @@ goog.Promise.prototype.cancelChild_=function(a,b){if(this.callbackEntries_){for(
 goog.Promise.prototype.addCallbackEntry_=function(a){this.hasEntry_()||this.state_!=goog.Promise.State_.FULFILLED&&this.state_!=goog.Promise.State_.REJECTED||this.scheduleCallbacks_();this.queueEntry_(a)};
 goog.Promise.prototype.addChildPromise_=function(a,b,c){var d=goog.Promise.getCallbackEntry_(null,null,null);d.child=new goog.Promise(function(e,f){d.onFulfilled=a?function(b){try{var d=a.call(c,b);e(d)}catch(k){f(k)}}:e;d.onRejected=b?function(a){try{var d=b.call(c,a);!goog.isDef(d)&&a instanceof goog.Promise.CancellationError?f(a):e(d)}catch(k){f(k)}}:f});d.child.parent_=this;this.addCallbackEntry_(d);return d.child};
 goog.Promise.prototype.unblockAndFulfill_=function(a){goog.asserts.assert(this.state_==goog.Promise.State_.BLOCKED);this.state_=goog.Promise.State_.PENDING;this.resolve_(goog.Promise.State_.FULFILLED,a)};goog.Promise.prototype.unblockAndReject_=function(a){goog.asserts.assert(this.state_==goog.Promise.State_.BLOCKED);this.state_=goog.Promise.State_.PENDING;this.resolve_(goog.Promise.State_.REJECTED,a)};
-goog.Promise.prototype.resolve_=function(a,b){this.state_==goog.Promise.State_.PENDING&&(this==b&&(a=goog.Promise.State_.REJECTED,b=new TypeError("Promise cannot resolve to itself")),this.state_=goog.Promise.State_.BLOCKED,goog.Promise.maybeThen_(b,this.unblockAndFulfill_,this.unblockAndReject_,this)||(this.result_=b,this.state_=a,this.parent_=null,this.scheduleCallbacks_(),a!=goog.Promise.State_.REJECTED||b instanceof goog.Promise.CancellationError||goog.Promise.addUnhandledRejection_(this,b)))};
+goog.Promise.prototype.resolve_=function(a,b){this.state_==goog.Promise.State_.PENDING&&(this===b&&(a=goog.Promise.State_.REJECTED,b=new TypeError("Promise cannot resolve to itself")),this.state_=goog.Promise.State_.BLOCKED,goog.Promise.maybeThen_(b,this.unblockAndFulfill_,this.unblockAndReject_,this)||(this.result_=b,this.state_=a,this.parent_=null,this.scheduleCallbacks_(),a!=goog.Promise.State_.REJECTED||b instanceof goog.Promise.CancellationError||goog.Promise.addUnhandledRejection_(this,b)))};
 goog.Promise.maybeThen_=function(a,b,c,d){if(a instanceof goog.Promise)return a.thenVoid(b,c,d),!0;if(goog.Thenable.isImplementedBy(a))return a.then(b,c,d),!0;if(goog.isObject(a))try{var e=a.then;if(goog.isFunction(e))return goog.Promise.tryThen_(a,e,b,c,d),!0}catch(f){return c.call(d,f),!0}return!1};goog.Promise.tryThen_=function(a,b,c,d,e){var f=!1,g=function(a){f||(f=!0,c.call(e,a))},h=function(a){f||(f=!0,d.call(e,a))};try{b.call(a,g,h)}catch(k){h(k)}};
 goog.Promise.prototype.scheduleCallbacks_=function(){this.executing_||(this.executing_=!0,goog.async.run(this.executeCallbacks_,this))};goog.Promise.prototype.hasEntry_=function(){return!!this.callbackEntries_};goog.Promise.prototype.queueEntry_=function(a){goog.asserts.assert(null!=a.onFulfilled);this.callbackEntriesTail_?this.callbackEntriesTail_.next=a:this.callbackEntries_=a;this.callbackEntriesTail_=a};
 goog.Promise.prototype.popEntry_=function(){var a=null;this.callbackEntries_&&(a=this.callbackEntries_,this.callbackEntries_=a.next,a.next=null);this.callbackEntries_||(this.callbackEntriesTail_=null);null!=a&&goog.asserts.assert(null!=a.onFulfilled);return a};goog.Promise.prototype.removeEntryAfter_=function(a){goog.asserts.assert(this.callbackEntries_);goog.asserts.assert(null!=a);a.next==this.callbackEntriesTail_&&(this.callbackEntriesTail_=a);a.next=a.next.next};
@@ -450,8 +460,8 @@ goog.ui.Component.setDefaultRightToLeft=function(a){goog.ui.Component.defaultRig
 goog.ui.Component.prototype.getElementStrict=function(){var a=this.element_;goog.asserts.assert(a,"Can not call getElementStrict before rendering/decorating.");return a};goog.ui.Component.prototype.setElementInternal=function(a){this.element_=a};goog.ui.Component.prototype.getElementsByClass=function(a){return this.element_?this.dom_.getElementsByClass(a,this.element_):[]};goog.ui.Component.prototype.getElementByClass=function(a){return this.element_?this.dom_.getElementByClass(a,this.element_):null};
 goog.ui.Component.prototype.getRequiredElementByClass=function(a){var b=this.getElementByClass(a);goog.asserts.assert(b,"Expected element in component with class: %s",a);return b};goog.ui.Component.prototype.getHandler=function(){this.googUiComponentHandler_||(this.googUiComponentHandler_=new goog.events.EventHandler(this));return this.googUiComponentHandler_};
 goog.ui.Component.prototype.setParent=function(a){if(this==a)throw Error(goog.ui.Component.Error.PARENT_UNABLE_TO_BE_SET);if(a&&this.parent_&&this.id_&&this.parent_.getChild(this.id_)&&this.parent_!=a)throw Error(goog.ui.Component.Error.PARENT_UNABLE_TO_BE_SET);this.parent_=a;goog.ui.Component.superClass_.setParentEventTarget.call(this,a)};goog.ui.Component.prototype.getParent=function(){return this.parent_};
-goog.ui.Component.prototype.setParentEventTarget=function(a){if(this.parent_&&this.parent_!=a)throw Error(goog.ui.Component.Error.NOT_SUPPORTED);goog.ui.Component.superClass_.setParentEventTarget.call(this,a)};goog.ui.Component.prototype.getDomHelper=function(){return this.dom_};goog.ui.Component.prototype.isInDocument=function(){return this.inDocument_};goog.ui.Component.prototype.createDom=function(){this.element_=this.dom_.createElement(goog.dom.TagName.DIV)};
+goog.ui.Component.prototype.setParentEventTarget=function(a){if(this.parent_&&this.parent_!=a)throw Error(goog.ui.Component.Error.NOT_SUPPORTED);goog.ui.Component.superClass_.setParentEventTarget.call(this,a)};goog.ui.Component.prototype.getDomHelper=function(){return this.dom_};goog.ui.Component.prototype.isInDocument=function(){return this.inDocument_};goog.ui.Component.prototype.createDom=function(){this.element_=this.dom_.createElement("DIV")};goog.ui.Component.prototype.render=function(a){this.render_(a)};
-goog.ui.Component.prototype.render=function(a){this.render_(a)};goog.ui.Component.prototype.renderBefore=function(a){this.render_(a.parentNode,a)};goog.ui.Component.prototype.render_=function(a,b){if(this.inDocument_)throw Error(goog.ui.Component.Error.ALREADY_RENDERED);this.element_||this.createDom();a?a.insertBefore(this.element_,b||null):this.dom_.getDocument().body.appendChild(this.element_);this.parent_&&!this.parent_.isInDocument()||this.enterDocument()};
+goog.ui.Component.prototype.renderBefore=function(a){this.render_(a.parentNode,a)};goog.ui.Component.prototype.render_=function(a,b){if(this.inDocument_)throw Error(goog.ui.Component.Error.ALREADY_RENDERED);this.element_||this.createDom();a?a.insertBefore(this.element_,b||null):this.dom_.getDocument().body.appendChild(this.element_);this.parent_&&!this.parent_.isInDocument()||this.enterDocument()};
 goog.ui.Component.prototype.decorate=function(a){if(this.inDocument_)throw Error(goog.ui.Component.Error.ALREADY_RENDERED);if(a&&this.canDecorate(a)){this.wasDecorated_=!0;var b=goog.dom.getOwnerDocument(a);this.dom_&&this.dom_.getDocument()==b||(this.dom_=goog.dom.getDomHelper(a));this.decorateInternal(a);goog.ui.Component.ALLOW_DETACHED_DECORATION&&!goog.dom.contains(b,a)||this.enterDocument()}else throw Error(goog.ui.Component.Error.DECORATE_INVALID);};goog.ui.Component.prototype.canDecorate=function(a){return!0};
 goog.ui.Component.prototype.wasDecorated=function(){return this.wasDecorated_};goog.ui.Component.prototype.decorateInternal=function(a){this.element_=a};goog.ui.Component.prototype.enterDocument=function(){this.inDocument_=!0;this.forEachChild(function(a){!a.isInDocument()&&a.getElement()&&a.enterDocument()})};
 goog.ui.Component.prototype.exitDocument=function(){this.forEachChild(function(a){a.isInDocument()&&a.exitDocument()});this.googUiComponentHandler_&&this.googUiComponentHandler_.removeAll();this.inDocument_=!1};
@@ -472,7 +482,7 @@ PRESSED:"pressed",READONLY:"readonly",RELEVANT:"relevant",REQUIRED:"required",SE
 goog.a11y.aria.OrientationValues={VERTICAL:"vertical",HORIZONTAL:"horizontal"};goog.a11y.aria.RelevantValues={ADDITIONS:"additions",REMOVALS:"removals",TEXT:"text",ALL:"all"};goog.a11y.aria.SortValues={ASCENDING:"ascending",DESCENDING:"descending",NONE:"none",OTHER:"other"};goog.a11y.aria.CheckedValues={TRUE:"true",FALSE:"false",MIXED:"mixed",UNDEFINED:"undefined"};goog.a11y.aria.ExpandedValues={TRUE:"true",FALSE:"false",UNDEFINED:"undefined"};
 goog.a11y.aria.GrabbedValues={TRUE:"true",FALSE:"false",UNDEFINED:"undefined"};goog.a11y.aria.InvalidValues={FALSE:"false",TRUE:"true",GRAMMAR:"grammar",SPELLING:"spelling"};goog.a11y.aria.PressedValues={TRUE:"true",FALSE:"false",MIXED:"mixed",UNDEFINED:"undefined"};goog.a11y.aria.SelectedValues={TRUE:"true",FALSE:"false",UNDEFINED:"undefined"};goog.a11y.aria.datatables={};
 goog.a11y.aria.datatables.getDefaultValuesMap=function(){goog.a11y.aria.DefaultStateValueMap_||(goog.a11y.aria.DefaultStateValueMap_=goog.object.create(goog.a11y.aria.State.ATOMIC,!1,goog.a11y.aria.State.AUTOCOMPLETE,"none",goog.a11y.aria.State.DROPEFFECT,"none",goog.a11y.aria.State.HASPOPUP,!1,goog.a11y.aria.State.LIVE,"off",goog.a11y.aria.State.MULTILINE,!1,goog.a11y.aria.State.MULTISELECTABLE,!1,goog.a11y.aria.State.ORIENTATION,"vertical",goog.a11y.aria.State.READONLY,!1,goog.a11y.aria.State.RELEVANT,
-"additions text",goog.a11y.aria.State.REQUIRED,!1,goog.a11y.aria.State.SORT,"none",goog.a11y.aria.State.BUSY,!1,goog.a11y.aria.State.DISABLED,!1,goog.a11y.aria.State.HIDDEN,!1,goog.a11y.aria.State.INVALID,"false"));return goog.a11y.aria.DefaultStateValueMap_};goog.a11y.aria.ARIA_PREFIX_="aria-";goog.a11y.aria.ROLE_ATTRIBUTE_="role";goog.a11y.aria.TAGS_WITH_ASSUMED_ROLES_=[goog.dom.TagName.A,goog.dom.TagName.AREA,goog.dom.TagName.BUTTON,goog.dom.TagName.HEAD,goog.dom.TagName.INPUT,goog.dom.TagName.LINK,goog.dom.TagName.MENU,goog.dom.TagName.META,goog.dom.TagName.OPTGROUP,goog.dom.TagName.OPTION,goog.dom.TagName.PROGRESS,goog.dom.TagName.STYLE,goog.dom.TagName.SELECT,goog.dom.TagName.SOURCE,goog.dom.TagName.TEXTAREA,goog.dom.TagName.TITLE,goog.dom.TagName.TRACK];
+"additions text",goog.a11y.aria.State.REQUIRED,!1,goog.a11y.aria.State.SORT,"none",goog.a11y.aria.State.BUSY,!1,goog.a11y.aria.State.DISABLED,!1,goog.a11y.aria.State.HIDDEN,!1,goog.a11y.aria.State.INVALID,"false"));return goog.a11y.aria.DefaultStateValueMap_};goog.a11y.aria.ARIA_PREFIX_="aria-";goog.a11y.aria.ROLE_ATTRIBUTE_="role";goog.a11y.aria.TAGS_WITH_ASSUMED_ROLES_="A AREA BUTTON HEAD INPUT LINK MENU META OPTGROUP OPTION PROGRESS STYLE SELECT SOURCE TEXTAREA TITLE TRACK".split(" ");
 goog.a11y.aria.CONTAINER_ROLES_=[goog.a11y.aria.Role.COMBOBOX,goog.a11y.aria.Role.GRID,goog.a11y.aria.Role.GROUP,goog.a11y.aria.Role.LISTBOX,goog.a11y.aria.Role.MENU,goog.a11y.aria.Role.MENUBAR,goog.a11y.aria.Role.RADIOGROUP,goog.a11y.aria.Role.ROW,goog.a11y.aria.Role.ROWGROUP,goog.a11y.aria.Role.TAB_LIST,goog.a11y.aria.Role.TEXTBOX,goog.a11y.aria.Role.TOOLBAR,goog.a11y.aria.Role.TREE,goog.a11y.aria.Role.TREEGRID];
 goog.a11y.aria.setRole=function(a,b){b?(goog.asserts.ENABLE_ASSERTS&&goog.asserts.assert(goog.object.containsValue(goog.a11y.aria.Role,b),"No such ARIA role "+b),a.setAttribute(goog.a11y.aria.ROLE_ATTRIBUTE_,b)):goog.a11y.aria.removeRole(a)};goog.a11y.aria.getRole=function(a){return a.getAttribute(goog.a11y.aria.ROLE_ATTRIBUTE_)||null};goog.a11y.aria.removeRole=function(a){a.removeAttribute(goog.a11y.aria.ROLE_ATTRIBUTE_)};
 goog.a11y.aria.setState=function(a,b,c){goog.isArray(c)&&(c=c.join(" "));var d=goog.a11y.aria.getAriaAttributeName_(b);""===c||void 0==c?(c=goog.a11y.aria.datatables.getDefaultValuesMap(),b in c?a.setAttribute(d,c[b]):a.removeAttribute(d)):a.setAttribute(d,c)};goog.a11y.aria.toggleState=function(a,b){var c=goog.a11y.aria.getState(a,b);goog.string.isEmptyOrWhitespace(goog.string.makeSafe(c))||"true"==c||"false"==c?goog.a11y.aria.setState(a,b,"true"==c?"false":"true"):goog.a11y.aria.removeState(a,b)};
@@ -515,14 +525,14 @@ goog.dom.classlist.swap=function(a,b,c){return goog.dom.classlist.contains(a,b)?
 goog.ui.registry.setDefaultRenderer=function(a,b){if(!goog.isFunction(a))throw Error("Invalid component class "+a);if(!goog.isFunction(b))throw Error("Invalid renderer class "+b);var c=goog.getUid(a);goog.ui.registry.defaultRenderers_[c]=b};goog.ui.registry.getDecoratorByClassName=function(a){return a in goog.ui.registry.decoratorFunctions_?goog.ui.registry.decoratorFunctions_[a]():null};
 goog.ui.registry.setDecoratorByClassName=function(a,b){if(!a)throw Error("Invalid class name "+a);if(!goog.isFunction(b))throw Error("Invalid decorator function "+b);goog.ui.registry.decoratorFunctions_[a]=b};goog.ui.registry.getDecorator=function(a){goog.asserts.assert(a);for(var b=goog.dom.classlist.get(a),c=0,d=b.length;c<d;c++)if(a=goog.ui.registry.getDecoratorByClassName(b[c]))return a;return null};
 goog.ui.registry.reset=function(){goog.ui.registry.defaultRenderers_={};goog.ui.registry.decoratorFunctions_={}};goog.ui.registry.defaultRenderers_={};goog.ui.registry.decoratorFunctions_={};goog.ui.ContainerRenderer=function(a){this.ariaRole_=a};goog.addSingletonGetter(goog.ui.ContainerRenderer);goog.ui.ContainerRenderer.getCustomRenderer=function(a,b){var c=new a;c.getCssClass=function(){return b};return c};goog.ui.ContainerRenderer.CSS_CLASS="goog-container";goog.ui.ContainerRenderer.prototype.getAriaRole=function(){return this.ariaRole_};goog.ui.ContainerRenderer.prototype.enableTabIndex=function(a,b){a&&(a.tabIndex=b?0:-1)};
-goog.ui.ContainerRenderer.prototype.createDom=function(a){return a.getDomHelper().createDom(goog.dom.TagName.DIV,this.getClassNames(a).join(" "))};goog.ui.ContainerRenderer.prototype.getContentElement=function(a){return a};goog.ui.ContainerRenderer.prototype.canDecorate=function(a){return"DIV"==a.tagName};
+goog.ui.ContainerRenderer.prototype.createDom=function(a){return a.getDomHelper().createDom("DIV",this.getClassNames(a).join(" "))};goog.ui.ContainerRenderer.prototype.getContentElement=function(a){return a};goog.ui.ContainerRenderer.prototype.canDecorate=function(a){return"DIV"==a.tagName};
 goog.ui.ContainerRenderer.prototype.decorate=function(a,b){b.id&&a.setId(b.id);var c=this.getCssClass(),d=!1,e=goog.dom.classlist.get(b);e&&goog.array.forEach(e,function(b){b==c?d=!0:b&&this.setStateFromClassName(a,b,c)},this);d||goog.dom.classlist.add(b,c);this.decorateChildren(a,this.getContentElement(b));return b};
 goog.ui.ContainerRenderer.prototype.setStateFromClassName=function(a,b,c){b==c+"-disabled"?a.setEnabled(!1):b==c+"-horizontal"?a.setOrientation(goog.ui.Container.Orientation.HORIZONTAL):b==c+"-vertical"&&a.setOrientation(goog.ui.Container.Orientation.VERTICAL)};
 goog.ui.ContainerRenderer.prototype.decorateChildren=function(a,b,c){if(b){c=c||b.firstChild;for(var d;c&&c.parentNode==b;){d=c.nextSibling;if(c.nodeType==goog.dom.NodeType.ELEMENT){var e=this.getDecoratorForChild(c);e&&(e.setElementInternal(c),a.isEnabled()||e.setEnabled(!1),a.addChild(e),e.decorate(c))}else c.nodeValue&&""!=goog.string.trim(c.nodeValue)||b.removeChild(c);c=d}}};goog.ui.ContainerRenderer.prototype.getDecoratorForChild=function(a){return goog.ui.registry.getDecorator(a)};
 goog.ui.ContainerRenderer.prototype.initializeDom=function(a){a=a.getElement();goog.asserts.assert(a,"The container DOM element cannot be null.");goog.style.setUnselectable(a,!0,goog.userAgent.GECKO);goog.userAgent.IE&&(a.hideFocus=!0);var b=this.getAriaRole();b&&goog.a11y.aria.setRole(a,b)};goog.ui.ContainerRenderer.prototype.getKeyEventTarget=function(a){return a.getElement()};goog.ui.ContainerRenderer.prototype.getCssClass=function(){return goog.ui.ContainerRenderer.CSS_CLASS};
 goog.ui.ContainerRenderer.prototype.getClassNames=function(a){var b=this.getCssClass(),c=a.getOrientation()==goog.ui.Container.Orientation.HORIZONTAL,c=[b,c?b+"-horizontal":b+"-vertical"];a.isEnabled()||c.push(b+"-disabled");return c};goog.ui.ContainerRenderer.prototype.getDefaultOrientation=function(){return goog.ui.Container.Orientation.VERTICAL};goog.ui.ControlRenderer=function(){};goog.addSingletonGetter(goog.ui.ControlRenderer);goog.tagUnsealableClass(goog.ui.ControlRenderer);goog.ui.ControlRenderer.getCustomRenderer=function(a,b){var c=new a;c.getCssClass=function(){return b};return c};goog.ui.ControlRenderer.CSS_CLASS="goog-control";goog.ui.ControlRenderer.IE6_CLASS_COMBINATIONS=[];
 goog.ui.ControlRenderer.TOGGLE_ARIA_STATE_MAP_=goog.object.create(goog.a11y.aria.Role.BUTTON,goog.a11y.aria.State.PRESSED,goog.a11y.aria.Role.CHECKBOX,goog.a11y.aria.State.CHECKED,goog.a11y.aria.Role.MENU_ITEM,goog.a11y.aria.State.SELECTED,goog.a11y.aria.Role.MENU_ITEM_CHECKBOX,goog.a11y.aria.State.CHECKED,goog.a11y.aria.Role.MENU_ITEM_RADIO,goog.a11y.aria.State.CHECKED,goog.a11y.aria.Role.RADIO,goog.a11y.aria.State.CHECKED,goog.a11y.aria.Role.TAB,goog.a11y.aria.State.SELECTED,goog.a11y.aria.Role.TREEITEM,
-goog.a11y.aria.State.SELECTED);goog.ui.ControlRenderer.prototype.getAriaRole=function(){};goog.ui.ControlRenderer.prototype.createDom=function(a){return a.getDomHelper().createDom(goog.dom.TagName.DIV,this.getClassNames(a).join(" "),a.getContent())};goog.ui.ControlRenderer.prototype.getContentElement=function(a){return a};
+goog.a11y.aria.State.SELECTED);goog.ui.ControlRenderer.prototype.getAriaRole=function(){};goog.ui.ControlRenderer.prototype.createDom=function(a){return a.getDomHelper().createDom("DIV",this.getClassNames(a).join(" "),a.getContent())};goog.ui.ControlRenderer.prototype.getContentElement=function(a){return a};
 goog.ui.ControlRenderer.prototype.enableClassName=function(a,b,c){if(a=a.getElement?a.getElement():a){var d=[b];goog.userAgent.IE&&!goog.userAgent.isVersionOrHigher("7")&&(d=this.getAppliedCombinedClassNames_(goog.dom.classlist.get(a),b),d.push(b));goog.dom.classlist.enableAll(a,d,c)}};goog.ui.ControlRenderer.prototype.enableExtraClassName=function(a,b,c){this.enableClassName(a,b,c)};goog.ui.ControlRenderer.prototype.canDecorate=function(a){return!0};
 goog.ui.ControlRenderer.prototype.decorate=function(a,b){b.id&&a.setId(b.id);var c=this.getContentElement(b);c&&c.firstChild?a.setContentInternal(c.firstChild.nextSibling?goog.array.clone(c.childNodes):c.firstChild):a.setContentInternal(null);var d=0,e=this.getCssClass(),f=this.getStructuralCssClass(),g=!1,h=!1,k=!1,m=goog.array.toArray(goog.dom.classlist.get(b));goog.array.forEach(m,function(a){g||a!=e?h||a!=f?d|=this.getStateFromClass(a):h=!0:(g=!0,f==e&&(h=!0));this.getStateFromClass(a)==goog.ui.Component.State.DISABLED&&
 (goog.asserts.assertElement(c),goog.dom.isFocusableTabIndex(c)&&goog.dom.setFocusableTabIndex(c,!1))},this);a.setStateInternal(d);g||(m.push(e),f==e&&(h=!0));h||m.push(f);var p=a.getExtraClassNames();p&&m.push.apply(m,p);if(goog.userAgent.IE&&!goog.userAgent.isVersionOrHigher("7")){var l=this.getAppliedCombinedClassNames_(m);0<l.length&&(m.push.apply(m,l),k=!0)}g&&h&&!p&&!k||goog.dom.classlist.set(b,m.join(" "));return b};
@@ -612,12 +622,12 @@ goog.ui.Container.prototype.highlightHelper=function(a,b){for(var c=0>b?this.ind
 goog.ui.Container.prototype.setHighlightedIndexFromKeyEvent=function(a){this.setHighlightedIndex(a)};goog.ui.Container.prototype.getOpenItem=function(){return this.openItem_};goog.ui.Container.prototype.isMouseButtonPressed=function(){return this.mouseButtonPressed_};goog.ui.Container.prototype.setMouseButtonPressed=function(a){this.mouseButtonPressed_=a};goog.ui.MenuHeaderRenderer=function(){goog.ui.ControlRenderer.call(this)};goog.inherits(goog.ui.MenuHeaderRenderer,goog.ui.ControlRenderer);goog.addSingletonGetter(goog.ui.MenuHeaderRenderer);goog.ui.MenuHeaderRenderer.CSS_CLASS="goog-menuheader";goog.ui.MenuHeaderRenderer.prototype.getCssClass=function(){return goog.ui.MenuHeaderRenderer.CSS_CLASS};goog.ui.MenuHeader=function(a,b,c){goog.ui.Control.call(this,a,c||goog.ui.MenuHeaderRenderer.getInstance(),b);this.setSupportedState(goog.ui.Component.State.DISABLED,!1);this.setSupportedState(goog.ui.Component.State.HOVER,!1);this.setSupportedState(goog.ui.Component.State.ACTIVE,!1);this.setSupportedState(goog.ui.Component.State.FOCUSED,!1);this.setStateInternal(goog.ui.Component.State.DISABLED)};goog.inherits(goog.ui.MenuHeader,goog.ui.Control);
 goog.ui.registry.setDecoratorByClassName(goog.ui.MenuHeaderRenderer.CSS_CLASS,function(){return new goog.ui.MenuHeader(null)});goog.ui.MenuItemRenderer=function(){goog.ui.ControlRenderer.call(this);this.classNameCache_=[]};goog.inherits(goog.ui.MenuItemRenderer,goog.ui.ControlRenderer);goog.addSingletonGetter(goog.ui.MenuItemRenderer);goog.ui.MenuItemRenderer.CSS_CLASS="goog-menuitem";goog.ui.MenuItemRenderer.CompositeCssClassIndex_={HOVER:0,CHECKBOX:1,CONTENT:2};
 goog.ui.MenuItemRenderer.prototype.getCompositeCssClass_=function(a){var b=this.classNameCache_[a];if(!b){switch(a){case goog.ui.MenuItemRenderer.CompositeCssClassIndex_.HOVER:b=this.getStructuralCssClass()+"-highlight";break;case goog.ui.MenuItemRenderer.CompositeCssClassIndex_.CHECKBOX:b=this.getStructuralCssClass()+"-checkbox";break;case goog.ui.MenuItemRenderer.CompositeCssClassIndex_.CONTENT:b=this.getStructuralCssClass()+"-content"}this.classNameCache_[a]=b}return b};
-goog.ui.MenuItemRenderer.prototype.getAriaRole=function(){return goog.a11y.aria.Role.MENU_ITEM};goog.ui.MenuItemRenderer.prototype.createDom=function(a){var b=a.getDomHelper().createDom(goog.dom.TagName.DIV,this.getClassNames(a).join(" "),this.createContent(a.getContent(),a.getDomHelper()));this.setEnableCheckBoxStructure(a,b,a.isSupportedState(goog.ui.Component.State.SELECTED)||a.isSupportedState(goog.ui.Component.State.CHECKED));return b};
+goog.ui.MenuItemRenderer.prototype.getAriaRole=function(){return goog.a11y.aria.Role.MENU_ITEM};goog.ui.MenuItemRenderer.prototype.createDom=function(a){var b=a.getDomHelper().createDom("DIV",this.getClassNames(a).join(" "),this.createContent(a.getContent(),a.getDomHelper()));this.setEnableCheckBoxStructure(a,b,a.isSupportedState(goog.ui.Component.State.SELECTED)||a.isSupportedState(goog.ui.Component.State.CHECKED));return b};
 goog.ui.MenuItemRenderer.prototype.getContentElement=function(a){return a&&a.firstChild};goog.ui.MenuItemRenderer.prototype.decorate=function(a,b){goog.asserts.assert(b);this.hasContentStructure(b)||b.appendChild(this.createContent(b.childNodes,a.getDomHelper()));goog.dom.classlist.contains(b,"goog-option")&&(a.setCheckable(!0),this.setCheckable(a,b,!0));return goog.ui.MenuItemRenderer.superClass_.decorate.call(this,a,b)};
 goog.ui.MenuItemRenderer.prototype.setContent=function(a,b){var c=this.getContentElement(a),d=this.hasCheckBoxStructure(a)?c.firstChild:null;goog.ui.MenuItemRenderer.superClass_.setContent.call(this,a,b);d&&!this.hasCheckBoxStructure(a)&&c.insertBefore(d,c.firstChild||null)};
-goog.ui.MenuItemRenderer.prototype.hasContentStructure=function(a){a=goog.dom.getFirstElementChild(a);var b=this.getCompositeCssClass_(goog.ui.MenuItemRenderer.CompositeCssClassIndex_.CONTENT);return!!a&&goog.dom.classlist.contains(a,b)};goog.ui.MenuItemRenderer.prototype.createContent=function(a,b){var c=this.getCompositeCssClass_(goog.ui.MenuItemRenderer.CompositeCssClassIndex_.CONTENT);return b.createDom(goog.dom.TagName.DIV,c,a)};
+goog.ui.MenuItemRenderer.prototype.hasContentStructure=function(a){a=goog.dom.getFirstElementChild(a);var b=this.getCompositeCssClass_(goog.ui.MenuItemRenderer.CompositeCssClassIndex_.CONTENT);return!!a&&goog.dom.classlist.contains(a,b)};goog.ui.MenuItemRenderer.prototype.createContent=function(a,b){var c=this.getCompositeCssClass_(goog.ui.MenuItemRenderer.CompositeCssClassIndex_.CONTENT);return b.createDom("DIV",c,a)};
 goog.ui.MenuItemRenderer.prototype.setSelectable=function(a,b,c){a&&b&&this.setEnableCheckBoxStructure(a,b,c)};goog.ui.MenuItemRenderer.prototype.setCheckable=function(a,b,c){a&&b&&this.setEnableCheckBoxStructure(a,b,c)};goog.ui.MenuItemRenderer.prototype.hasCheckBoxStructure=function(a){if(a=this.getContentElement(a)){a=a.firstChild;var b=this.getCompositeCssClass_(goog.ui.MenuItemRenderer.CompositeCssClassIndex_.CHECKBOX);return!!a&&goog.dom.isElement(a)&&goog.dom.classlist.contains(a,b)}return!1};
-goog.ui.MenuItemRenderer.prototype.setEnableCheckBoxStructure=function(a,b,c){this.setAriaRole(b,a.getPreferredAriaRole());this.setAriaStates(a,b);c!=this.hasCheckBoxStructure(b)&&(goog.dom.classlist.enable(b,"goog-option",c),b=this.getContentElement(b),c?(c=this.getCompositeCssClass_(goog.ui.MenuItemRenderer.CompositeCssClassIndex_.CHECKBOX),b.insertBefore(a.getDomHelper().createDom(goog.dom.TagName.DIV,c),b.firstChild||null)):b.removeChild(b.firstChild))};
+goog.ui.MenuItemRenderer.prototype.setEnableCheckBoxStructure=function(a,b,c){this.setAriaRole(b,a.getPreferredAriaRole());this.setAriaStates(a,b);c!=this.hasCheckBoxStructure(b)&&(goog.dom.classlist.enable(b,"goog-option",c),b=this.getContentElement(b),c?(c=this.getCompositeCssClass_(goog.ui.MenuItemRenderer.CompositeCssClassIndex_.CHECKBOX),b.insertBefore(a.getDomHelper().createDom("DIV",c),b.firstChild||null)):b.removeChild(b.firstChild))};
 goog.ui.MenuItemRenderer.prototype.getClassForState=function(a){switch(a){case goog.ui.Component.State.HOVER:return this.getCompositeCssClass_(goog.ui.MenuItemRenderer.CompositeCssClassIndex_.HOVER);case goog.ui.Component.State.CHECKED:case goog.ui.Component.State.SELECTED:return"goog-option-selected";default:return goog.ui.MenuItemRenderer.superClass_.getClassForState.call(this,a)}};
 goog.ui.MenuItemRenderer.prototype.getStateFromClass=function(a){var b=this.getCompositeCssClass_(goog.ui.MenuItemRenderer.CompositeCssClassIndex_.HOVER);switch(a){case "goog-option-selected":return goog.ui.Component.State.CHECKED;case b:return goog.ui.Component.State.HOVER;default:return goog.ui.MenuItemRenderer.superClass_.getStateFromClass.call(this,a)}};goog.ui.MenuItemRenderer.prototype.getCssClass=function(){return goog.ui.MenuItemRenderer.CSS_CLASS};goog.ui.MenuItem=function(a,b,c,d){goog.ui.Control.call(this,a,d||goog.ui.MenuItemRenderer.getInstance(),c);this.setValue(b)};goog.inherits(goog.ui.MenuItem,goog.ui.Control);goog.tagUnsealableClass(goog.ui.MenuItem);goog.ui.MenuItem.MNEMONIC_WRAPPER_CLASS_="goog-menuitem-mnemonic-separator";goog.ui.MenuItem.ACCELERATOR_CLASS="goog-menuitem-accel";goog.ui.MenuItem.prototype.getValue=function(){var a=this.getModel();return null!=a?a:this.getCaption()};goog.ui.MenuItem.prototype.setValue=function(a){this.setModel(a)};
 goog.ui.MenuItem.prototype.setSupportedState=function(a,b){goog.ui.MenuItem.superClass_.setSupportedState.call(this,a,b);switch(a){case goog.ui.Component.State.SELECTED:this.setSelectableInternal_(b);break;case goog.ui.Component.State.CHECKED:this.setCheckableInternal_(b)}};goog.ui.MenuItem.prototype.setSelectable=function(a){this.setSupportedState(goog.ui.Component.State.SELECTED,a)};
@@ -626,10 +636,10 @@ goog.ui.MenuItem.prototype.getCaption=function(){var a=this.getContent();if(goog
 goog.ui.MenuItem.prototype.getAccelerator=function(){var a=this.getDomHelper(),b=this.getContent();return goog.isArray(b)&&(b=goog.array.find(b,function(a){return goog.dom.classlist.contains(a,goog.ui.MenuItem.ACCELERATOR_CLASS)}))?a.getTextContent(b):null};
 goog.ui.MenuItem.prototype.handleMouseUp=function(a){var b=this.getParent();if(b){var c=b.openingCoords;b.openingCoords=null;if(c&&goog.isNumber(a.clientX)&&(b=new goog.math.Coordinate(a.clientX,a.clientY),goog.math.Coordinate.equals(c,b)))return}goog.ui.MenuItem.superClass_.handleMouseUp.call(this,a)};goog.ui.MenuItem.prototype.handleKeyEventInternal=function(a){return a.keyCode==this.getMnemonic()&&this.performActionInternal(a)?!0:goog.ui.MenuItem.superClass_.handleKeyEventInternal.call(this,a)};
 goog.ui.MenuItem.prototype.setMnemonic=function(a){this.mnemonicKey_=a};goog.ui.MenuItem.prototype.getMnemonic=function(){return this.mnemonicKey_};goog.ui.registry.setDecoratorByClassName(goog.ui.MenuItemRenderer.CSS_CLASS,function(){return new goog.ui.MenuItem(null)});
-goog.ui.MenuItem.prototype.getPreferredAriaRole=function(){return this.isSupportedState(goog.ui.Component.State.CHECKED)?goog.a11y.aria.Role.MENU_ITEM_CHECKBOX:this.isSupportedState(goog.ui.Component.State.SELECTED)?goog.a11y.aria.Role.MENU_ITEM_RADIO:goog.ui.MenuItem.superClass_.getPreferredAriaRole.call(this)};goog.ui.MenuItem.prototype.getParent=function(){return goog.ui.Control.prototype.getParent.call(this)};goog.ui.MenuItem.prototype.getParentEventTarget=function(){return goog.ui.Control.prototype.getParentEventTarget.call(this)};goog.ui.MenuSeparatorRenderer=function(){goog.ui.ControlRenderer.call(this)};goog.inherits(goog.ui.MenuSeparatorRenderer,goog.ui.ControlRenderer);goog.addSingletonGetter(goog.ui.MenuSeparatorRenderer);goog.ui.MenuSeparatorRenderer.CSS_CLASS="goog-menuseparator";goog.ui.MenuSeparatorRenderer.prototype.createDom=function(a){return a.getDomHelper().createDom(goog.dom.TagName.DIV,this.getCssClass())};
+goog.ui.MenuItem.prototype.getPreferredAriaRole=function(){return this.isSupportedState(goog.ui.Component.State.CHECKED)?goog.a11y.aria.Role.MENU_ITEM_CHECKBOX:this.isSupportedState(goog.ui.Component.State.SELECTED)?goog.a11y.aria.Role.MENU_ITEM_RADIO:goog.ui.MenuItem.superClass_.getPreferredAriaRole.call(this)};goog.ui.MenuItem.prototype.getParent=function(){return goog.ui.Control.prototype.getParent.call(this)};goog.ui.MenuItem.prototype.getParentEventTarget=function(){return goog.ui.Control.prototype.getParentEventTarget.call(this)};goog.ui.MenuSeparatorRenderer=function(){goog.ui.ControlRenderer.call(this)};goog.inherits(goog.ui.MenuSeparatorRenderer,goog.ui.ControlRenderer);goog.addSingletonGetter(goog.ui.MenuSeparatorRenderer);goog.ui.MenuSeparatorRenderer.CSS_CLASS="goog-menuseparator";goog.ui.MenuSeparatorRenderer.prototype.createDom=function(a){return a.getDomHelper().createDom("DIV",this.getCssClass())};
-goog.ui.MenuSeparatorRenderer.prototype.decorate=function(a,b){b.id&&a.setId(b.id);if(b.tagName==goog.dom.TagName.HR){var c=b;b=this.createDom(a);goog.dom.insertSiblingBefore(b,c);goog.dom.removeNode(c)}else goog.dom.classlist.add(b,this.getCssClass());return b};goog.ui.MenuSeparatorRenderer.prototype.setContent=function(a,b){};goog.ui.MenuSeparatorRenderer.prototype.getCssClass=function(){return goog.ui.MenuSeparatorRenderer.CSS_CLASS};goog.ui.Separator=function(a,b){goog.ui.Control.call(this,null,a||goog.ui.MenuSeparatorRenderer.getInstance(),b);this.setSupportedState(goog.ui.Component.State.DISABLED,!1);this.setSupportedState(goog.ui.Component.State.HOVER,!1);this.setSupportedState(goog.ui.Component.State.ACTIVE,!1);this.setSupportedState(goog.ui.Component.State.FOCUSED,!1);this.setStateInternal(goog.ui.Component.State.DISABLED)};goog.inherits(goog.ui.Separator,goog.ui.Control);
+goog.ui.MenuSeparatorRenderer.prototype.decorate=function(a,b){b.id&&a.setId(b.id);if("HR"==b.tagName){var c=b;b=this.createDom(a);goog.dom.insertSiblingBefore(b,c);goog.dom.removeNode(c)}else goog.dom.classlist.add(b,this.getCssClass());return b};goog.ui.MenuSeparatorRenderer.prototype.setContent=function(a,b){};goog.ui.MenuSeparatorRenderer.prototype.getCssClass=function(){return goog.ui.MenuSeparatorRenderer.CSS_CLASS};goog.ui.Separator=function(a,b){goog.ui.Control.call(this,null,a||goog.ui.MenuSeparatorRenderer.getInstance(),b);this.setSupportedState(goog.ui.Component.State.DISABLED,!1);this.setSupportedState(goog.ui.Component.State.HOVER,!1);this.setSupportedState(goog.ui.Component.State.ACTIVE,!1);this.setSupportedState(goog.ui.Component.State.FOCUSED,!1);this.setStateInternal(goog.ui.Component.State.DISABLED)};goog.inherits(goog.ui.Separator,goog.ui.Control);
-goog.ui.Separator.prototype.enterDocument=function(){goog.ui.Separator.superClass_.enterDocument.call(this);var a=this.getElement();goog.asserts.assert(a,"The DOM element for the separator cannot be null.");goog.a11y.aria.setRole(a,"separator")};goog.ui.registry.setDecoratorByClassName(goog.ui.MenuSeparatorRenderer.CSS_CLASS,function(){return new goog.ui.Separator});goog.ui.MenuRenderer=function(a){goog.ui.ContainerRenderer.call(this,a||goog.a11y.aria.Role.MENU)};goog.inherits(goog.ui.MenuRenderer,goog.ui.ContainerRenderer);goog.addSingletonGetter(goog.ui.MenuRenderer);goog.ui.MenuRenderer.CSS_CLASS="goog-menu";goog.ui.MenuRenderer.prototype.canDecorate=function(a){return a.tagName==goog.dom.TagName.UL||goog.ui.MenuRenderer.superClass_.canDecorate.call(this,a)};
+goog.ui.Separator.prototype.enterDocument=function(){goog.ui.Separator.superClass_.enterDocument.call(this);var a=this.getElement();goog.asserts.assert(a,"The DOM element for the separator cannot be null.");goog.a11y.aria.setRole(a,"separator")};goog.ui.registry.setDecoratorByClassName(goog.ui.MenuSeparatorRenderer.CSS_CLASS,function(){return new goog.ui.Separator});goog.ui.MenuRenderer=function(a){goog.ui.ContainerRenderer.call(this,a||goog.a11y.aria.Role.MENU)};goog.inherits(goog.ui.MenuRenderer,goog.ui.ContainerRenderer);goog.addSingletonGetter(goog.ui.MenuRenderer);goog.ui.MenuRenderer.CSS_CLASS="goog-menu";goog.ui.MenuRenderer.prototype.canDecorate=function(a){return"UL"==a.tagName||goog.ui.MenuRenderer.superClass_.canDecorate.call(this,a)};
-goog.ui.MenuRenderer.prototype.getDecoratorForChild=function(a){return a.tagName==goog.dom.TagName.HR?new goog.ui.Separator:goog.ui.MenuRenderer.superClass_.getDecoratorForChild.call(this,a)};goog.ui.MenuRenderer.prototype.containsElement=function(a,b){return goog.dom.contains(a.getElement(),b)};goog.ui.MenuRenderer.prototype.getCssClass=function(){return goog.ui.MenuRenderer.CSS_CLASS};
+goog.ui.MenuRenderer.prototype.getDecoratorForChild=function(a){return"HR"==a.tagName?new goog.ui.Separator:goog.ui.MenuRenderer.superClass_.getDecoratorForChild.call(this,a)};goog.ui.MenuRenderer.prototype.containsElement=function(a,b){return goog.dom.contains(a.getElement(),b)};goog.ui.MenuRenderer.prototype.getCssClass=function(){return goog.ui.MenuRenderer.CSS_CLASS};
 goog.ui.MenuRenderer.prototype.initializeDom=function(a){goog.ui.MenuRenderer.superClass_.initializeDom.call(this,a);a=a.getElement();goog.asserts.assert(a,"The menu DOM element cannot be null.");goog.a11y.aria.setState(a,goog.a11y.aria.State.HASPOPUP,"true")};goog.ui.MenuSeparator=function(a){goog.ui.Separator.call(this,goog.ui.MenuSeparatorRenderer.getInstance(),a)};goog.inherits(goog.ui.MenuSeparator,goog.ui.Separator);goog.ui.registry.setDecoratorByClassName(goog.ui.MenuSeparatorRenderer.CSS_CLASS,function(){return new goog.ui.Separator});goog.ui.Menu=function(a,b){goog.ui.Container.call(this,goog.ui.Container.Orientation.VERTICAL,b||goog.ui.MenuRenderer.getInstance(),a);this.setFocusable(!1)};goog.inherits(goog.ui.Menu,goog.ui.Container);goog.tagUnsealableClass(goog.ui.Menu);goog.ui.Menu.EventType={BEFORE_SHOW:goog.ui.Component.EventType.BEFORE_SHOW,SHOW:goog.ui.Component.EventType.SHOW,BEFORE_HIDE:goog.ui.Component.EventType.HIDE,HIDE:goog.ui.Component.EventType.HIDE};goog.ui.Menu.CSS_CLASS=goog.ui.MenuRenderer.CSS_CLASS;
 goog.ui.Menu.prototype.allowAutoFocus_=!0;goog.ui.Menu.prototype.allowHighlightDisabled_=!1;goog.ui.Menu.prototype.getCssClass=function(){return this.getRenderer().getCssClass()};goog.ui.Menu.prototype.containsElement=function(a){if(this.getRenderer().containsElement(this,a))return!0;for(var b=0,c=this.getChildCount();b<c;b++){var d=this.getChildAt(b);if("function"==typeof d.containsElement&&d.containsElement(a))return!0}return!1};goog.ui.Menu.prototype.addItem=function(a){this.addChild(a,!0)};
 goog.ui.Menu.prototype.addItemAt=function(a,b){this.addChildAt(a,b,!0)};goog.ui.Menu.prototype.removeItem=function(a){(a=this.removeChild(a,!0))&&a.dispose()};goog.ui.Menu.prototype.removeItemAt=function(a){(a=this.removeChildAt(a,!0))&&a.dispose()};goog.ui.Menu.prototype.getItemAt=function(a){return this.getChildAt(a)};goog.ui.Menu.prototype.getItemCount=function(){return this.getChildCount()};goog.ui.Menu.prototype.getItems=function(){var a=[];this.forEachChild(function(b){a.push(b)});return a};
@@ -638,7 +648,7 @@ goog.ui.Menu.prototype.setAllowHighlightDisabled=function(a){this.allowHighlight
 goog.ui.Menu.prototype.handleEnterItem=function(a){this.allowAutoFocus_&&this.getKeyEventTarget().focus();return goog.ui.Menu.superClass_.handleEnterItem.call(this,a)};goog.ui.Menu.prototype.highlightNextPrefix=function(a){var b=new RegExp("^"+goog.string.regExpEscape(a),"i");return this.highlightHelper(function(a,d){var e=0>a?0:a,f=!1;do{++a;a==d&&(a=0,f=!0);var g=this.getChildAt(a).getCaption();if(g&&g.match(b))return a}while(!f||a!=e);return this.getHighlightedIndex()},this.getHighlightedIndex())};
 goog.ui.Menu.prototype.canHighlightItem=function(a){return(this.allowHighlightDisabled_||a.isEnabled())&&a.isVisible()&&a.isSupportedState(goog.ui.Component.State.HOVER)};goog.ui.Menu.prototype.decorateInternal=function(a){this.decorateContent(a);goog.ui.Menu.superClass_.decorateInternal.call(this,a)};
 goog.ui.Menu.prototype.handleKeyEventInternal=function(a){var b=goog.ui.Menu.superClass_.handleKeyEventInternal.call(this,a);b||this.forEachChild(function(c){!b&&c.getMnemonic&&c.getMnemonic()==a.keyCode&&(this.isEnabled()&&this.setHighlighted(c),b=c.handleKeyEvent(a))},this);return b};goog.ui.Menu.prototype.setHighlightedIndex=function(a){goog.ui.Menu.superClass_.setHighlightedIndex.call(this,a);(a=this.getChildAt(a))&&goog.style.scrollIntoContainerView(a.getElement(),this.getElement())};
-goog.ui.Menu.prototype.decorateContent=function(a){var b=this.getRenderer();a=this.getDomHelper().getElementsByTagNameAndClass(goog.dom.TagName.DIV,b.getCssClass()+"-content",a);for(var c=a.length,d=0;d<c;d++)b.decorateChildren(this,a[d])};goog.color={};
+goog.ui.Menu.prototype.decorateContent=function(a){var b=this.getRenderer();a=this.getDomHelper().getElementsByTagNameAndClass("DIV",b.getCssClass()+"-content",a);for(var c=a.length,d=0;d<c;d++)b.decorateChildren(this,a[d])};goog.color={};
 goog.color.names={aliceblue:"#f0f8ff",antiquewhite:"#faebd7",aqua:"#00ffff",aquamarine:"#7fffd4",azure:"#f0ffff",beige:"#f5f5dc",bisque:"#ffe4c4",black:"#000000",blanchedalmond:"#ffebcd",blue:"#0000ff",blueviolet:"#8a2be2",brown:"#a52a2a",burlywood:"#deb887",cadetblue:"#5f9ea0",chartreuse:"#7fff00",chocolate:"#d2691e",coral:"#ff7f50",cornflowerblue:"#6495ed",cornsilk:"#fff8dc",crimson:"#dc143c",cyan:"#00ffff",darkblue:"#00008b",darkcyan:"#008b8b",darkgoldenrod:"#b8860b",darkgray:"#a9a9a9",darkgreen:"#006400",
 darkgrey:"#a9a9a9",darkkhaki:"#bdb76b",darkmagenta:"#8b008b",darkolivegreen:"#556b2f",darkorange:"#ff8c00",darkorchid:"#9932cc",darkred:"#8b0000",darksalmon:"#e9967a",darkseagreen:"#8fbc8f",darkslateblue:"#483d8b",darkslategray:"#2f4f4f",darkslategrey:"#2f4f4f",darkturquoise:"#00ced1",darkviolet:"#9400d3",deeppink:"#ff1493",deepskyblue:"#00bfff",dimgray:"#696969",dimgrey:"#696969",dodgerblue:"#1e90ff",firebrick:"#b22222",floralwhite:"#fffaf0",forestgreen:"#228b22",fuchsia:"#ff00ff",gainsboro:"#dcdcdc",
 ghostwhite:"#f8f8ff",gold:"#ffd700",goldenrod:"#daa520",gray:"#808080",green:"#008000",greenyellow:"#adff2f",grey:"#808080",honeydew:"#f0fff0",hotpink:"#ff69b4",indianred:"#cd5c5c",indigo:"#4b0082",ivory:"#fffff0",khaki:"#f0e68c",lavender:"#e6e6fa",lavenderblush:"#fff0f5",lawngreen:"#7cfc00",lemonchiffon:"#fffacd",lightblue:"#add8e6",lightcoral:"#f08080",lightcyan:"#e0ffff",lightgoldenrodyellow:"#fafad2",lightgray:"#d3d3d3",lightgreen:"#90ee90",lightgrey:"#d3d3d3",lightpink:"#ffb6c1",lightsalmon:"#ffa07a",
@@ -684,13 +694,12 @@ goog.dom.TagIterator.prototype.restartTag=function(){var a=this.reversed?goog.do
 goog.dom.TagIterator.prototype.next=function(){var a;if(this.started_){if(!this.node||this.constrained&&0==this.depth)throw goog.iter.StopIteration;a=this.node;var b=this.reversed?goog.dom.TagWalkType.END_TAG:goog.dom.TagWalkType.START_TAG;if(this.tagType==b){var c=this.reversed?a.lastChild:a.firstChild;c?this.setPosition(c):this.setPosition(a,-1*b)}else(c=this.reversed?a.previousSibling:a.nextSibling)?this.setPosition(c):this.setPosition(a.parentNode,-1*b);this.depth+=this.tagType*(this.reversed?
 -1:1)}else this.started_=!0;a=this.node;if(!this.node)throw goog.iter.StopIteration;return a};goog.dom.TagIterator.prototype.isStarted=function(){return this.started_};goog.dom.TagIterator.prototype.isStartTag=function(){return this.tagType==goog.dom.TagWalkType.START_TAG};goog.dom.TagIterator.prototype.isEndTag=function(){return this.tagType==goog.dom.TagWalkType.END_TAG};goog.dom.TagIterator.prototype.isNonElement=function(){return this.tagType==goog.dom.TagWalkType.OTHER};
 goog.dom.TagIterator.prototype.equals=function(a){return a.node==this.node&&(!this.node||a.tagType==this.tagType)};goog.dom.TagIterator.prototype.splice=function(a){var b=this.node;this.restartTag();this.reversed=!this.reversed;goog.dom.TagIterator.prototype.next.call(this);this.reversed=!this.reversed;for(var c=goog.isArrayLike(arguments[0])?arguments[0]:arguments,d=c.length-1;0<=d;d--)goog.dom.insertSiblingAfter(c[d],b);goog.dom.removeNode(b)};goog.dom.NodeIterator=function(a,b,c,d){goog.dom.TagIterator.call(this,a,b,c,null,d)};goog.inherits(goog.dom.NodeIterator,goog.dom.TagIterator);goog.dom.NodeIterator.prototype.next=function(){do goog.dom.NodeIterator.superClass_.next.call(this);while(this.isEndTag());return this.node};goog.ui.PaletteRenderer=function(){goog.ui.ControlRenderer.call(this)};goog.inherits(goog.ui.PaletteRenderer,goog.ui.ControlRenderer);goog.addSingletonGetter(goog.ui.PaletteRenderer);goog.ui.PaletteRenderer.cellId_=0;goog.ui.PaletteRenderer.CSS_CLASS="goog-palette";
-goog.ui.PaletteRenderer.prototype.createDom=function(a){var b=this.getClassNames(a);a=a.getDomHelper().createDom(goog.dom.TagName.DIV,b?b.join(" "):null,this.createGrid(a.getContent(),a.getSize(),a.getDomHelper()));goog.a11y.aria.setRole(a,goog.a11y.aria.Role.GRID);return a};
+goog.ui.PaletteRenderer.prototype.createDom=function(a){var b=this.getClassNames(a);a=a.getDomHelper().createDom("DIV",b?b.join(" "):null,this.createGrid(a.getContent(),a.getSize(),a.getDomHelper()));goog.a11y.aria.setRole(a,goog.a11y.aria.Role.GRID);return a};goog.ui.PaletteRenderer.prototype.createGrid=function(a,b,c){for(var d=[],e=0,f=0;e<b.height;e++){for(var g=[],h=0;h<b.width;h++){var k=a&&a[f++];g.push(this.createCell(k,c))}d.push(this.createRow(g,c))}return this.createTable(d,c)};
-goog.ui.PaletteRenderer.prototype.createGrid=function(a,b,c){for(var d=[],e=0,f=0;e<b.height;e++){for(var g=[],h=0;h<b.width;h++){var k=a&&a[f++];g.push(this.createCell(k,c))}d.push(this.createRow(g,c))}return this.createTable(d,c)};goog.ui.PaletteRenderer.prototype.createTable=function(a,b){var c=b.createDom(goog.dom.TagName.TABLE,this.getCssClass()+"-table",b.createDom(goog.dom.TagName.TBODY,this.getCssClass()+"-body",a));c.cellSpacing=0;c.cellPadding=0;return c};
+goog.ui.PaletteRenderer.prototype.createTable=function(a,b){var c=b.createDom("TABLE",this.getCssClass()+"-table",b.createDom("TBODY",this.getCssClass()+"-body",a));c.cellSpacing=0;c.cellPadding=0;return c};goog.ui.PaletteRenderer.prototype.createRow=function(a,b){var c=b.createDom("TR",this.getCssClass()+"-row",a);goog.a11y.aria.setRole(c,goog.a11y.aria.Role.ROW);return c};
-goog.ui.PaletteRenderer.prototype.createRow=function(a,b){var c=b.createDom(goog.dom.TagName.TR,this.getCssClass()+"-row",a);goog.a11y.aria.setRole(c,goog.a11y.aria.Role.ROW);return c};
+goog.ui.PaletteRenderer.prototype.createCell=function(a,b){var c=b.createDom("TD",{"class":this.getCssClass()+"-cell",id:this.getCssClass()+"-cell-"+goog.ui.PaletteRenderer.cellId_++},a);goog.a11y.aria.setRole(c,goog.a11y.aria.Role.GRIDCELL);goog.a11y.aria.setState(c,goog.a11y.aria.State.SELECTED,!1);if(!goog.dom.getTextContent(c)&&!goog.a11y.aria.getLabel(c)){var d=this.findAriaLabelForCell_(c);d&&goog.a11y.aria.setLabel(c,d)}return c};
-goog.ui.PaletteRenderer.prototype.createCell=function(a,b){var c=b.createDom(goog.dom.TagName.TD,{"class":this.getCssClass()+"-cell",id:this.getCssClass()+"-cell-"+goog.ui.PaletteRenderer.cellId_++},a);goog.a11y.aria.setRole(c,goog.a11y.aria.Role.GRIDCELL);goog.a11y.aria.setState(c,goog.a11y.aria.State.SELECTED,!1);if(!goog.dom.getTextContent(c)&&!goog.a11y.aria.getLabel(c)){var d=this.findAriaLabelForCell_(c);d&&goog.a11y.aria.setLabel(c,d)}return c};
 goog.ui.PaletteRenderer.prototype.findAriaLabelForCell_=function(a){a=new goog.dom.NodeIterator(a);for(var b="",c;!b&&(c=goog.iter.nextOrValue(a,null));)c.nodeType==goog.dom.NodeType.ELEMENT&&(b=goog.a11y.aria.getLabel(c)||c.title);return b};goog.ui.PaletteRenderer.prototype.canDecorate=function(a){return!1};goog.ui.PaletteRenderer.prototype.decorate=function(a,b){return null};
-goog.ui.PaletteRenderer.prototype.setContent=function(a,b){if(a){var c=goog.dom.getElementsByTagNameAndClass(goog.dom.TagName.TBODY,this.getCssClass()+"-body",a)[0];if(c){var d=0;goog.array.forEach(c.rows,function(a){goog.array.forEach(a.cells,function(a){goog.dom.removeChildren(a);if(b){var c=b[d++];c&&goog.dom.appendChild(a,c)}})});if(d<b.length){for(var e=[],f=goog.dom.getDomHelper(a),g=c.rows[0].cells.length;d<b.length;){var h=b[d++];e.push(this.createCell(h,f));e.length==g&&(h=this.createRow(e,
+goog.ui.PaletteRenderer.prototype.setContent=function(a,b){if(a){var c=goog.dom.getElementsByTagNameAndClass("TBODY",this.getCssClass()+"-body",a)[0];if(c){var d=0;goog.array.forEach(c.rows,function(a){goog.array.forEach(a.cells,function(a){goog.dom.removeChildren(a);if(b){var c=b[d++];c&&goog.dom.appendChild(a,c)}})});if(d<b.length){for(var e=[],f=goog.dom.getDomHelper(a),g=c.rows[0].cells.length;d<b.length;){var h=b[d++];e.push(this.createCell(h,f));e.length==g&&(h=this.createRow(e,f),goog.dom.appendChild(c,
-f),goog.dom.appendChild(c,h),e.length=0)}if(0<e.length){for(;e.length<g;)e.push(this.createCell("",f));h=this.createRow(e,f);goog.dom.appendChild(c,h)}}}goog.style.setUnselectable(a,!0,goog.userAgent.GECKO)}};goog.ui.PaletteRenderer.prototype.getContainingItem=function(a,b){for(var c=a.getElement();b&&b.nodeType==goog.dom.NodeType.ELEMENT&&b!=c;){if(b.tagName==goog.dom.TagName.TD&&goog.dom.classlist.contains(b,this.getCssClass()+"-cell"))return b.firstChild;b=b.parentNode}return null};
+h),e.length=0)}if(0<e.length){for(;e.length<g;)e.push(this.createCell("",f));h=this.createRow(e,f);goog.dom.appendChild(c,h)}}}goog.style.setUnselectable(a,!0,goog.userAgent.GECKO)}};goog.ui.PaletteRenderer.prototype.getContainingItem=function(a,b){for(var c=a.getElement();b&&b.nodeType==goog.dom.NodeType.ELEMENT&&b!=c;){if("TD"==b.tagName&&goog.dom.classlist.contains(b,this.getCssClass()+"-cell"))return b.firstChild;b=b.parentNode}return null};
 goog.ui.PaletteRenderer.prototype.highlightCell=function(a,b,c){b&&(b=this.getCellForItem(b),goog.asserts.assert(b),goog.dom.classlist.enable(b,this.getCssClass()+"-cell-hover",c),c?goog.a11y.aria.setState(a.getElementStrict(),goog.a11y.aria.State.ACTIVEDESCENDANT,b.id):b.id==goog.a11y.aria.getState(a.getElementStrict(),goog.a11y.aria.State.ACTIVEDESCENDANT)&&goog.a11y.aria.removeState(a.getElementStrict(),goog.a11y.aria.State.ACTIVEDESCENDANT))};
 goog.ui.PaletteRenderer.prototype.getCellForItem=function(a){return a?a.parentNode:null};goog.ui.PaletteRenderer.prototype.selectCell=function(a,b,c){b&&(a=b.parentNode,goog.dom.classlist.enable(a,this.getCssClass()+"-cell-selected",c),goog.a11y.aria.setState(a,goog.a11y.aria.State.SELECTED,c))};goog.ui.PaletteRenderer.prototype.getCssClass=function(){return goog.ui.PaletteRenderer.CSS_CLASS};goog.ui.SelectionModel=function(a){goog.events.EventTarget.call(this);this.items_=[];this.addItems(a)};goog.inherits(goog.ui.SelectionModel,goog.events.EventTarget);goog.tagUnsealableClass(goog.ui.SelectionModel);goog.ui.SelectionModel.prototype.selectedItem_=null;goog.ui.SelectionModel.prototype.selectionHandler_=null;goog.ui.SelectionModel.prototype.getSelectionHandler=function(){return this.selectionHandler_};
 goog.ui.SelectionModel.prototype.setSelectionHandler=function(a){this.selectionHandler_=a};goog.ui.SelectionModel.prototype.getItemCount=function(){return this.items_.length};goog.ui.SelectionModel.prototype.indexOfItem=function(a){return a?goog.array.indexOf(this.items_,a):-1};goog.ui.SelectionModel.prototype.getFirst=function(){return this.items_[0]};goog.ui.SelectionModel.prototype.getLast=function(){return this.items_[this.items_.length-1]};
@@ -714,22 +723,14 @@ goog.ui.Palette.prototype.adjustSize_=function(){var a=this.getContent();if(a)if
 goog.inherits(goog.ui.Palette.CurrentCell_,goog.ui.Control);goog.ui.Palette.CurrentCell_.prototype.tryHighlight=function(a){this.setHighlighted(a);return this.isHighlighted()==a};goog.ui.ColorPalette=function(a,b,c){this.colors_=a||[];goog.ui.Palette.call(this,null,b||goog.ui.PaletteRenderer.getInstance(),c);this.setColors(this.colors_)};goog.inherits(goog.ui.ColorPalette,goog.ui.Palette);goog.tagUnsealableClass(goog.ui.ColorPalette);goog.ui.ColorPalette.prototype.normalizedColors_=null;goog.ui.ColorPalette.prototype.labels_=null;goog.ui.ColorPalette.prototype.getColors=function(){return this.colors_};
 goog.ui.ColorPalette.prototype.setColors=function(a,b){this.colors_=a;this.labels_=b||null;this.normalizedColors_=null;this.setContent(this.createColorNodes())};goog.ui.ColorPalette.prototype.getSelectedColor=function(){var a=this.getSelectedItem();return a?(a=goog.style.getStyle(a,"background-color"),goog.ui.ColorPalette.parseColor_(a)):null};
 goog.ui.ColorPalette.prototype.setSelectedColor=function(a){a=goog.ui.ColorPalette.parseColor_(a);this.normalizedColors_||(this.normalizedColors_=goog.array.map(this.colors_,function(a){return goog.ui.ColorPalette.parseColor_(a)}));this.setSelectedIndex(a?goog.array.indexOf(this.normalizedColors_,a):-1)};
-goog.ui.ColorPalette.prototype.createColorNodes=function(){return goog.array.map(this.colors_,function(a,b){var c=this.getDomHelper().createDom(goog.dom.TagName.DIV,{"class":this.getRenderer().getCssClass()+"-colorswatch",style:"background-color:"+a});c.title=this.labels_&&this.labels_[b]?this.labels_[b]:"#"==a.charAt(0)?"RGB ("+goog.color.hexToRgb(a).join(", ")+")":a;return c},this)};goog.ui.ColorPalette.parseColor_=function(a){if(a)try{return goog.color.parse(a).hex}catch(b){}return null};goog.ui.ColorPicker=function(a,b){goog.ui.Component.call(this,a);this.colorPalette_=b||null;this.getHandler().listen(this,goog.ui.Component.EventType.ACTION,this.onColorPaletteAction_)};goog.inherits(goog.ui.ColorPicker,goog.ui.Component);goog.ui.ColorPicker.DEFAULT_NUM_COLS=5;goog.ui.ColorPicker.EventType={CHANGE:"change"};goog.ui.ColorPicker.prototype.focusable_=!0;goog.ui.ColorPicker.prototype.getColors=function(){return this.colorPalette_?this.colorPalette_.getColors():null};
+goog.ui.ColorPalette.prototype.createColorNodes=function(){return goog.array.map(this.colors_,function(a,b){var c=this.getDomHelper().createDom("DIV",{"class":this.getRenderer().getCssClass()+"-colorswatch",style:"background-color:"+a});c.title=this.labels_&&this.labels_[b]?this.labels_[b]:"#"==a.charAt(0)?"RGB ("+goog.color.hexToRgb(a).join(", ")+")":a;return c},this)};goog.ui.ColorPalette.parseColor_=function(a){if(a)try{return goog.color.parse(a).hex}catch(b){}return null};goog.ui.ColorPicker=function(a,b){goog.ui.Component.call(this,a);this.colorPalette_=b||null;this.getHandler().listen(this,goog.ui.Component.EventType.ACTION,this.onColorPaletteAction_)};goog.inherits(goog.ui.ColorPicker,goog.ui.Component);goog.ui.ColorPicker.DEFAULT_NUM_COLS=5;goog.ui.ColorPicker.EventType={CHANGE:"change"};goog.ui.ColorPicker.prototype.focusable_=!0;goog.ui.ColorPicker.prototype.getColors=function(){return this.colorPalette_?this.colorPalette_.getColors():null};
 goog.ui.ColorPicker.prototype.setColors=function(a){this.colorPalette_?this.colorPalette_.setColors(a):this.createColorPalette_(a)};goog.ui.ColorPicker.prototype.addColors=function(a){this.setColors(a)};goog.ui.ColorPicker.prototype.setSize=function(a){this.colorPalette_||this.createColorPalette_([]);this.colorPalette_.setSize(a)};goog.ui.ColorPicker.prototype.getSize=function(){return this.colorPalette_?this.colorPalette_.getSize():null};goog.ui.ColorPicker.prototype.setColumnCount=function(a){this.setSize(a)};
 goog.ui.ColorPicker.prototype.getSelectedIndex=function(){return this.colorPalette_?this.colorPalette_.getSelectedIndex():-1};goog.ui.ColorPicker.prototype.setSelectedIndex=function(a){this.colorPalette_&&this.colorPalette_.setSelectedIndex(a)};goog.ui.ColorPicker.prototype.getSelectedColor=function(){return this.colorPalette_?this.colorPalette_.getSelectedColor():null};goog.ui.ColorPicker.prototype.setSelectedColor=function(a){this.colorPalette_&&this.colorPalette_.setSelectedColor(a)};
 goog.ui.ColorPicker.prototype.isFocusable=function(){return this.focusable_};goog.ui.ColorPicker.prototype.setFocusable=function(a){this.focusable_=a;this.colorPalette_&&this.colorPalette_.setSupportedState(goog.ui.Component.State.FOCUSED,a)};goog.ui.ColorPicker.prototype.canDecorate=function(a){return!1};
 goog.ui.ColorPicker.prototype.enterDocument=function(){goog.ui.ColorPicker.superClass_.enterDocument.call(this);this.colorPalette_&&this.colorPalette_.render(this.getElement());this.getElement().unselectable="on"};goog.ui.ColorPicker.prototype.disposeInternal=function(){goog.ui.ColorPicker.superClass_.disposeInternal.call(this);this.colorPalette_&&(this.colorPalette_.dispose(),this.colorPalette_=null)};goog.ui.ColorPicker.prototype.focus=function(){this.colorPalette_&&this.colorPalette_.getElement().focus()};
 goog.ui.ColorPicker.prototype.onColorPaletteAction_=function(a){a.stopPropagation();this.dispatchEvent(goog.ui.ColorPicker.EventType.CHANGE)};goog.ui.ColorPicker.prototype.createColorPalette_=function(a){a=new goog.ui.ColorPalette(a,null,this.getDomHelper());a.setSize(goog.ui.ColorPicker.DEFAULT_NUM_COLS);a.setSupportedState(goog.ui.Component.State.FOCUSED,this.focusable_);this.addChild(a);this.colorPalette_=a;this.isInDocument()&&this.colorPalette_.render(this.getElement())};
 goog.ui.ColorPicker.createSimpleColorGrid=function(a){a=new goog.ui.ColorPicker(a);a.setSize(7);a.setColors(goog.ui.ColorPicker.SIMPLE_GRID_COLORS);return a};goog.ui.ColorPicker.SIMPLE_GRID_COLORS="#ffffff #cccccc #c0c0c0 #999999 #666666 #333333 #000000 #ffcccc #ff6666 #ff0000 #cc0000 #990000 #660000 #330000 #ffcc99 #ff9966 #ff9900 #ff6600 #cc6600 #993300 #663300 #ffff99 #ffff66 #ffcc66 #ffcc33 #cc9933 #996633 #663333 #ffffcc #ffff33 #ffff00 #ffcc00 #999900 #666600 #333300 #99ff99 #66ff99 #33ff33 #33cc00 #009900 #006600 #003300 #99ffff #33ffff #66cccc #00cccc #339999 #336666 #003333 #ccffff #66ffff #33ccff #3366ff #3333ff #000099 #000066 #ccccff #9999ff #6666cc #6633ff #6600cc #333399 #330099 #ffccff #ff99ff #cc66cc #cc33cc #993399 #663366 #330033".split(" ");goog.events.FocusHandler=function(a){goog.events.EventTarget.call(this);this.element_=a;a=goog.userAgent.IE?"focusout":"blur";this.listenKeyIn_=goog.events.listen(this.element_,goog.userAgent.IE?"focusin":"focus",this,!goog.userAgent.IE);this.listenKeyOut_=goog.events.listen(this.element_,a,this,!goog.userAgent.IE)};goog.inherits(goog.events.FocusHandler,goog.events.EventTarget);goog.events.FocusHandler.EventType={FOCUSIN:"focusin",FOCUSOUT:"focusout"};
-goog.events.FocusHandler.prototype.handleEvent=function(a){var b=a.getBrowserEvent(),b=new goog.events.BrowserEvent(b);b.type="focusin"==a.type||"focus"==a.type?goog.events.FocusHandler.EventType.FOCUSIN:goog.events.FocusHandler.EventType.FOCUSOUT;this.dispatchEvent(b)};goog.events.FocusHandler.prototype.disposeInternal=function(){goog.events.FocusHandler.superClass_.disposeInternal.call(this);goog.events.unlistenByKey(this.listenKeyIn_);goog.events.unlistenByKey(this.listenKeyOut_);delete this.element_};goog.html.SafeScript=function(){this.privateDoNotAccessOrElseSafeScriptWrappedValue_="";this.SAFE_SCRIPT_TYPE_MARKER_GOOG_HTML_SECURITY_PRIVATE_=goog.html.SafeScript.TYPE_MARKER_GOOG_HTML_SECURITY_PRIVATE_};goog.html.SafeScript.prototype.implementsGoogStringTypedString=!0;goog.html.SafeScript.TYPE_MARKER_GOOG_HTML_SECURITY_PRIVATE_={};goog.html.SafeScript.fromConstant=function(a){a=goog.string.Const.unwrap(a);return 0===a.length?goog.html.SafeScript.EMPTY:goog.html.SafeScript.createSafeScriptSecurityPrivateDoNotAccessOrElse(a)};
+goog.events.FocusHandler.prototype.handleEvent=function(a){var b=a.getBrowserEvent(),b=new goog.events.BrowserEvent(b);b.type="focusin"==a.type||"focus"==a.type?goog.events.FocusHandler.EventType.FOCUSIN:goog.events.FocusHandler.EventType.FOCUSOUT;this.dispatchEvent(b)};goog.events.FocusHandler.prototype.disposeInternal=function(){goog.events.FocusHandler.superClass_.disposeInternal.call(this);goog.events.unlistenByKey(this.listenKeyIn_);goog.events.unlistenByKey(this.listenKeyOut_);delete this.element_};goog.structs={};goog.structs.getCount=function(a){return a.getCount&&"function"==typeof a.getCount?a.getCount():goog.isArrayLike(a)||goog.isString(a)?a.length:goog.object.getCount(a)};goog.structs.getValues=function(a){if(a.getValues&&"function"==typeof a.getValues)return a.getValues();if(goog.isString(a))return a.split("");if(goog.isArrayLike(a)){for(var b=[],c=a.length,d=0;d<c;d++)b.push(a[d]);return b}return goog.object.getValues(a)};
-goog.html.SafeScript.prototype.getTypedStringValue=function(){return this.privateDoNotAccessOrElseSafeScriptWrappedValue_};goog.DEBUG&&(goog.html.SafeScript.prototype.toString=function(){return"SafeScript{"+this.privateDoNotAccessOrElseSafeScriptWrappedValue_+"}"});
-goog.html.SafeScript.unwrap=function(a){if(a instanceof goog.html.SafeScript&&a.constructor===goog.html.SafeScript&&a.SAFE_SCRIPT_TYPE_MARKER_GOOG_HTML_SECURITY_PRIVATE_===goog.html.SafeScript.TYPE_MARKER_GOOG_HTML_SECURITY_PRIVATE_)return a.privateDoNotAccessOrElseSafeScriptWrappedValue_;goog.asserts.fail("expected object of type SafeScript, got '"+a+"' of type "+goog.typeOf(a));return"type_error:SafeScript"};goog.html.SafeScript.createSafeScriptSecurityPrivateDoNotAccessOrElse=function(a){return(new goog.html.SafeScript).initSecurityPrivateDoNotAccessOrElse_(a)};
-goog.html.SafeScript.prototype.initSecurityPrivateDoNotAccessOrElse_=function(a){this.privateDoNotAccessOrElseSafeScriptWrappedValue_=a;return this};goog.html.SafeScript.EMPTY=goog.html.SafeScript.createSafeScriptSecurityPrivateDoNotAccessOrElse("");goog.html.uncheckedconversions={};goog.html.uncheckedconversions.safeHtmlFromStringKnownToSatisfyTypeContract=function(a,b,c){goog.asserts.assertString(goog.string.Const.unwrap(a),"must provide justification");goog.asserts.assert(!goog.string.isEmptyOrWhitespace(goog.string.Const.unwrap(a)),"must provide non-empty justification");return goog.html.SafeHtml.createSafeHtmlSecurityPrivateDoNotAccessOrElse(b,c||null)};
-goog.html.uncheckedconversions.safeScriptFromStringKnownToSatisfyTypeContract=function(a,b){goog.asserts.assertString(goog.string.Const.unwrap(a),"must provide justification");goog.asserts.assert(!goog.string.isEmpty(goog.string.Const.unwrap(a)),"must provide non-empty justification");return goog.html.SafeScript.createSafeScriptSecurityPrivateDoNotAccessOrElse(b)};
-goog.html.uncheckedconversions.safeStyleFromStringKnownToSatisfyTypeContract=function(a,b){goog.asserts.assertString(goog.string.Const.unwrap(a),"must provide justification");goog.asserts.assert(!goog.string.isEmptyOrWhitespace(goog.string.Const.unwrap(a)),"must provide non-empty justification");return goog.html.SafeStyle.createSafeStyleSecurityPrivateDoNotAccessOrElse(b)};
-goog.html.uncheckedconversions.safeStyleSheetFromStringKnownToSatisfyTypeContract=function(a,b){goog.asserts.assertString(goog.string.Const.unwrap(a),"must provide justification");goog.asserts.assert(!goog.string.isEmptyOrWhitespace(goog.string.Const.unwrap(a)),"must provide non-empty justification");return goog.html.SafeStyleSheet.createSafeStyleSheetSecurityPrivateDoNotAccessOrElse(b)};
-goog.html.uncheckedconversions.safeUrlFromStringKnownToSatisfyTypeContract=function(a,b){goog.asserts.assertString(goog.string.Const.unwrap(a),"must provide justification");goog.asserts.assert(!goog.string.isEmptyOrWhitespace(goog.string.Const.unwrap(a)),"must provide non-empty justification");return goog.html.SafeUrl.createSafeUrlSecurityPrivateDoNotAccessOrElse(b)};
-goog.html.uncheckedconversions.trustedResourceUrlFromStringKnownToSatisfyTypeContract=function(a,b){goog.asserts.assertString(goog.string.Const.unwrap(a),"must provide justification");goog.asserts.assert(!goog.string.isEmptyOrWhitespace(goog.string.Const.unwrap(a)),"must provide non-empty justification");return goog.html.TrustedResourceUrl.createTrustedResourceUrlSecurityPrivateDoNotAccessOrElse(b)};goog.structs={};goog.structs.getCount=function(a){return a.getCount&&"function"==typeof a.getCount?a.getCount():goog.isArrayLike(a)||goog.isString(a)?a.length:goog.object.getCount(a)};goog.structs.getValues=function(a){if(a.getValues&&"function"==typeof a.getValues)return a.getValues();if(goog.isString(a))return a.split("");if(goog.isArrayLike(a)){for(var b=[],c=a.length,d=0;d<c;d++)b.push(a[d]);return b}return goog.object.getValues(a)};
 goog.structs.getKeys=function(a){if(a.getKeys&&"function"==typeof a.getKeys)return a.getKeys();if(!a.getValues||"function"!=typeof a.getValues){if(goog.isArrayLike(a)||goog.isString(a)){var b=[];a=a.length;for(var c=0;c<a;c++)b.push(c);return b}return goog.object.getKeys(a)}};
 goog.structs.contains=function(a,b){return a.contains&&"function"==typeof a.contains?a.contains(b):a.containsValue&&"function"==typeof a.containsValue?a.containsValue(b):goog.isArrayLike(a)||goog.isString(a)?goog.array.contains(a,b):goog.object.containsValue(a,b)};goog.structs.isEmpty=function(a){return a.isEmpty&&"function"==typeof a.isEmpty?a.isEmpty():goog.isArrayLike(a)||goog.isString(a)?goog.array.isEmpty(a):goog.object.isEmpty(a)};
 goog.structs.clear=function(a){a.clear&&"function"==typeof a.clear?a.clear():goog.isArrayLike(a)?goog.array.clear(a):goog.object.clear(a)};goog.structs.forEach=function(a,b,c){if(a.forEach&&"function"==typeof a.forEach)a.forEach(b,c);else if(goog.isArrayLike(a)||goog.isString(a))goog.array.forEach(a,b,c);else for(var d=goog.structs.getKeys(a),e=goog.structs.getValues(a),f=e.length,g=0;g<f;g++)b.call(c,e[g],d&&d[g],a)};
@@ -861,10 +862,15 @@ goog.ui.tree.TreeControl.prototype.createNode=function(a){return new goog.ui.tre
 // Copyright 2013 Google Inc.  Apache License 2.0
 var Blockly={Blocks:{}};Blockly.Blocks.ONE_BASED_INDEXING=!0;
 // Copyright 2012 Google Inc.  Apache License 2.0
-Blockly.Workspace=function(a){this.id=Blockly.genUid();Blockly.Workspace.WorkspaceDB_[this.id]=this;this.options=a||{};this.RTL=!!this.options.RTL;this.horizontalLayout=!!this.options.horizontalLayout;this.toolboxPosition=this.options.toolboxPosition;this.topBlocks_=[];this.listeners_=[];this.undoStack_=[];this.redoStack_=[];this.blockDB_=Object.create(null)};Blockly.Workspace.prototype.rendered=!1;Blockly.Workspace.prototype.MAX_UNDO=1024;
+Blockly.Workspace=function(a){this.id=Blockly.genUid();Blockly.Workspace.WorkspaceDB_[this.id]=this;this.options=a||{};this.RTL=!!this.options.RTL;this.horizontalLayout=!!this.options.horizontalLayout;this.toolboxPosition=this.options.toolboxPosition;this.topBlocks_=[];this.listeners_=[];this.undoStack_=[];this.redoStack_=[];this.blockDB_=Object.create(null);this.variableList=[]};Blockly.Workspace.prototype.rendered=!1;Blockly.Workspace.prototype.MAX_UNDO=1024;
-Blockly.Workspace.prototype.dispose=function(){this.listeners_.length=0;this.clear();delete Blockly.Workspace.WorkspaceDB_[this.id]};Blockly.Workspace.SCAN_ANGLE=3;Blockly.Workspace.prototype.addTopBlock=function(a){this.topBlocks_.push(a)};Blockly.Workspace.prototype.removeTopBlock=function(a){for(var b=!1,c,d=0;c=this.topBlocks_[d];d++)if(c==a){this.topBlocks_.splice(d,1);b=!0;break}if(!b)throw"Block not present in workspace's list of top-most blocks.";};
+Blockly.Workspace.prototype.dispose=function(){this.listeners_.length=0;this.clear();delete Blockly.Workspace.WorkspaceDB_[this.id]};Blockly.Workspace.SCAN_ANGLE=3;Blockly.Workspace.prototype.addTopBlock=function(a){this.topBlocks_.push(a);if(this.isFlyout){a=Blockly.Variables.allUsedVariables(a);for(var b=0;b<a.length;b++)-1==this.variableList.indexOf(a[b])&&this.variableList.push(a[b])}};
+Blockly.Workspace.prototype.removeTopBlock=function(a){for(var b=!1,c,d=0;c=this.topBlocks_[d];d++)if(c==a){this.topBlocks_.splice(d,1);b=!0;break}if(!b)throw"Block not present in workspace's list of top-most blocks.";};
 Blockly.Workspace.prototype.getTopBlocks=function(a){var b=[].concat(this.topBlocks_);if(a&&1<b.length){var c=Math.sin(goog.math.toRadians(Blockly.Workspace.SCAN_ANGLE));this.RTL&&(c*=-1);b.sort(function(a,b){var f=a.getRelativeToSurfaceXY(),g=b.getRelativeToSurfaceXY();return f.y+c*f.x-(g.y+c*g.x)})}return b};Blockly.Workspace.prototype.getAllBlocks=function(){for(var a=this.getTopBlocks(!1),b=0;b<a.length;b++)a.push.apply(a,a[b].getChildren());return a};
-Blockly.Workspace.prototype.clear=function(){var a=Blockly.Events.getGroup();for(a||Blockly.Events.setGroup(!0);this.topBlocks_.length;)this.topBlocks_[0].dispose();a||Blockly.Events.setGroup(!1)};Blockly.Workspace.prototype.getWidth=function(){return 0};Blockly.Workspace.prototype.newBlock=function(a,b){return new Blockly.Block(this,a,b)};Blockly.Workspace.prototype.remainingCapacity=function(){return isNaN(this.options.maxBlocks)?Infinity:this.options.maxBlocks-this.getAllBlocks().length};
+Blockly.Workspace.prototype.clear=function(){var a=Blockly.Events.getGroup();for(a||Blockly.Events.setGroup(!0);this.topBlocks_.length;)this.topBlocks_[0].dispose();a||Blockly.Events.setGroup(!1);this.variableList.length=0};Blockly.Workspace.prototype.updateVariableList=function(a){if(!this.isFlyout){a&&(this.variableList.length=0);a=Blockly.Variables.allUsedVariables(this);for(var b=0;b<a.length;b++)this.createVariable(a[b])}};
+Blockly.Workspace.prototype.renameVariable=function(a,b){var c=this.variableIndexOf(a),d=this.variableIndexOf(b);if(-1!=d&&this.variableList[d]!=b)var e=this.variableList[d];Blockly.Events.setGroup(!0);for(var f=this.getAllBlocks(),g=0;g<f.length;g++)f[g].renameVar(a,b),e&&f[g].renameVar(e,b);Blockly.Events.setGroup(!1);c==d||-1!=c&&-1==d?this.variableList[c]=b:-1!=c&&-1!=d?(this.variableList.splice(c,1),this.variableList[d]=b):(this.variableList.push(b),console.log("Tried to rename an non-existent variable."))};
+Blockly.Workspace.prototype.createVariable=function(a){-1==this.variableIndexOf(a)&&this.variableList.push(a)};Blockly.Workspace.prototype.getVariableUses=function(a){for(var b=[],c=this.getAllBlocks(),d=0;d<c.length;d++){var e=c[d].getVars();if(e)for(var f=0;f<e.length;f++){var g=e[f];g&&Blockly.Names.equals(g,a)&&b.push(c[d])}}return b};
+Blockly.Workspace.prototype.deleteVariable=function(a){var b=this.variableIndexOf(a);if(-1!=b){var c=this.getVariableUses(a);if(1<c.length){for(var d=0,e;e=c[d];d++)if("procedures_defnoreturn"==e.type||"procedures_defreturn"==e.type){b=e.getFieldValue("NAME");window.alert(Blockly.Msg.CANNOT_DELETE_VARIABLE_PROCEDURE.replace("%1",a).replace("%2",b));return}window.confirm(Blockly.Msg.DELETE_VARIABLE_CONFIRMATION.replace("%1",c.length).replace("%2",a))}Blockly.Events.setGroup(!0);for(d=0;d<c.length;d++)c[d].dispose(!0,
+!1);Blockly.Events.setGroup(!1);this.variableList.splice(b,1)}};Blockly.Workspace.prototype.variableIndexOf=function(a){for(var b=0,c;c=this.variableList[b];b++)if(Blockly.Names.equals(c,a))return b;return-1};Blockly.Workspace.prototype.getWidth=function(){return 0};Blockly.Workspace.prototype.newBlock=function(a,b){return new Blockly.Block(this,a,b)};Blockly.Workspace.prototype.remainingCapacity=function(){return isNaN(this.options.maxBlocks)?Infinity:this.options.maxBlocks-this.getAllBlocks().length};
 Blockly.Workspace.prototype.undo=function(a){var b=a?this.redoStack_:this.undoStack_,c=a?this.undoStack_:this.redoStack_,d=b.pop();if(d){for(var e=[d];b.length&&d.group&&d.group==b[b.length-1].group;)e.push(b.pop());for(b=0;d=e[b];b++)c.push(d);e=Blockly.Events.filter(e,a);Blockly.Events.recordUndo=!1;for(b=0;d=e[b];b++)d.run(a);Blockly.Events.recordUndo=!0}};Blockly.Workspace.prototype.clearUndo=function(){this.undoStack_.length=0;this.redoStack_.length=0;Blockly.Events.clearPendingUndo()};
 Blockly.Workspace.prototype.addChangeListener=function(a){this.listeners_.push(a);return a};Blockly.Workspace.prototype.removeChangeListener=function(a){a=this.listeners_.indexOf(a);-1!=a&&this.listeners_.splice(a,1)};Blockly.Workspace.prototype.fireChangeListener=function(a){a.recordUndo&&(this.undoStack_.push(a),this.redoStack_.length=0,this.undoStack_.length>this.MAX_UNDO&&this.undoStack_.unshift());for(var b=0,c;c=this.listeners_[b];b++)c(a)};
 Blockly.Workspace.prototype.getBlockById=function(a){return this.blockDB_[a]||null};Blockly.Workspace.WorkspaceDB_=Object.create(null);Blockly.Workspace.getById=function(a){return Blockly.Workspace.WorkspaceDB_[a]||null};Blockly.Workspace.prototype.clear=Blockly.Workspace.prototype.clear;Blockly.Workspace.prototype.clearUndo=Blockly.Workspace.prototype.clearUndo;Blockly.Workspace.prototype.addChangeListener=Blockly.Workspace.prototype.addChangeListener;
@@ -887,9 +893,9 @@ Blockly.Bubble.prototype.setBubbleSize=function(a,b){var c=2*Blockly.Bubble.BORD
 this.layoutBubble_(),this.positionBubble_(),this.renderArrow_());this.resizeCallback_&&this.resizeCallback_()};
 Blockly.Bubble.prototype.renderArrow_=function(){var a=[],b=this.width_/2,c=this.height_/2,d=-this.relativeLeft_,e=-this.relativeTop_;if(b==d&&c==e)a.push("M "+b+","+c);else{e-=c;d-=b;this.workspace_.RTL&&(d*=-1);var f=Math.sqrt(e*e+d*d),g=Math.acos(d/f);0>e&&(g=2*Math.PI-g);var h=g+Math.PI/2;h>2*Math.PI&&(h-=2*Math.PI);var k=Math.sin(h),m=Math.cos(h),p=this.getBubbleSize(),h=(p.width+p.height)/Blockly.Bubble.ARROW_THICKNESS,h=Math.min(h,p.width,p.height)/2,p=1-Blockly.Bubble.ANCHOR_RADIUS/f,d=b+
 p*d,e=c+p*e,p=b+h*m,l=c+h*k,b=b-h*m,c=c-h*k,k=g+this.arrow_radians_;k>2*Math.PI&&(k-=2*Math.PI);g=Math.sin(k)*f/Blockly.Bubble.ARROW_BEND;f=Math.cos(k)*f/Blockly.Bubble.ARROW_BEND;a.push("M"+p+","+l);a.push("C"+(p+f)+","+(l+g)+" "+d+","+e+" "+d+","+e);a.push("C"+d+","+e+" "+(b+f)+","+(c+g)+" "+b+","+c)}a.push("z");this.bubbleArrow_.setAttribute("d",a.join(" "))};Blockly.Bubble.prototype.setColour=function(a){this.bubbleBack_.setAttribute("fill",a);this.bubbleArrow_.setAttribute("fill",a)};
-Blockly.Bubble.prototype.dispose=function(){Blockly.Bubble.unbindDragEvents_();goog.dom.removeNode(this.bubbleGroup_);this.shape_=this.content_=this.workspace_=this.resizeGroup_=this.bubbleBack_=this.bubbleArrow_=this.bubbleGroup_=null};Blockly.Icon=function(a){this.block_=a};Blockly.Icon.prototype.collapseHidden=!0;Blockly.Icon.prototype.SIZE=17;Blockly.Icon.prototype.bubble_=null;Blockly.Icon.prototype.iconXY_=null;Blockly.Icon.prototype.createIcon=function(){this.iconGroup_||(this.iconGroup_=Blockly.createSvgElement("g",{"class":"blocklyIconGroup"},null),this.drawIcon_(this.iconGroup_),this.block_.getSvgRoot().appendChild(this.iconGroup_),Blockly.bindEvent_(this.iconGroup_,"mouseup",this,this.iconClick_),this.updateEditable())};
+Blockly.Bubble.prototype.dispose=function(){Blockly.Bubble.unbindDragEvents_();goog.dom.removeNode(this.bubbleGroup_);this.shape_=this.content_=this.workspace_=this.resizeGroup_=this.bubbleBack_=this.bubbleArrow_=this.bubbleGroup_=null};Blockly.Icon=function(a){this.block_=a};Blockly.Icon.prototype.collapseHidden=!0;Blockly.Icon.prototype.SIZE=17;Blockly.Icon.prototype.bubble_=null;Blockly.Icon.prototype.iconXY_=null;
-Blockly.Icon.prototype.dispose=function(){goog.dom.removeNode(this.iconGroup_);this.iconGroup_=null;this.setVisible(!1);this.block_=null};Blockly.Icon.prototype.updateEditable=function(){this.block_.isInFlyout||!this.block_.isEditable()?Blockly.addClass_(this.iconGroup_,"blocklyIconGroupReadonly"):Blockly.removeClass_(this.iconGroup_,"blocklyIconGroupReadonly")};Blockly.Icon.prototype.isVisible=function(){return!!this.bubble_};
+Blockly.Icon.prototype.createIcon=function(){this.iconGroup_||(this.iconGroup_=Blockly.createSvgElement("g",{"class":"blocklyIconGroup"},null),this.block_.isInFlyout&&Blockly.addClass_(this.iconGroup_,"blocklyIconGroupReadonly"),this.drawIcon_(this.iconGroup_),this.block_.getSvgRoot().appendChild(this.iconGroup_),Blockly.bindEvent_(this.iconGroup_,"mouseup",this,this.iconClick_),this.updateEditable())};
-Blockly.Icon.prototype.iconClick_=function(a){this.block_.workspace.isDragging()||this.block_.isInFlyout||Blockly.isRightButton(a)||this.setVisible(!this.isVisible())};Blockly.Icon.prototype.updateColour=function(){this.isVisible()&&this.bubble_.setColour(this.block_.getColour())};
+Blockly.Icon.prototype.dispose=function(){goog.dom.removeNode(this.iconGroup_);this.iconGroup_=null;this.setVisible(!1);this.block_=null};Blockly.Icon.prototype.updateEditable=function(){};Blockly.Icon.prototype.isVisible=function(){return!!this.bubble_};Blockly.Icon.prototype.iconClick_=function(a){this.block_.workspace.isDragging()||this.block_.isInFlyout||Blockly.isRightButton(a)||this.setVisible(!this.isVisible())};Blockly.Icon.prototype.updateColour=function(){this.isVisible()&&this.bubble_.setColour(this.block_.getColour())};
 Blockly.Icon.prototype.renderIcon=function(a){if(this.collapseHidden&&this.block_.isCollapsed())return this.iconGroup_.setAttribute("display","none"),a;this.iconGroup_.setAttribute("display","block");var b=this.SIZE;this.block_.RTL&&(a-=b);this.iconGroup_.setAttribute("transform","translate("+a+",5)");this.computeIconLocation();return a=this.block_.RTL?a-Blockly.BlockSvg.SEP_SPACE_X:a+(b+Blockly.BlockSvg.SEP_SPACE_X)};
 Blockly.Icon.prototype.setIconLocation=function(a){this.iconXY_=a;this.isVisible()&&this.bubble_.setAnchorLocation(a)};Blockly.Icon.prototype.computeIconLocation=function(){var a=this.block_.getRelativeToSurfaceXY(),b=Blockly.getRelativeXY_(this.iconGroup_),a=new goog.math.Coordinate(a.x+b.x+this.SIZE/2,a.y+b.y+this.SIZE/2);goog.math.Coordinate.equals(this.getIconLocation(),a)||this.setIconLocation(a)};Blockly.Icon.prototype.getIconLocation=function(){return this.iconXY_};
 // Copyright 2011 Google Inc.  Apache License 2.0
@@ -923,16 +929,16 @@ Blockly.Connection.prototype.setShadowDom=function(a){this.shadowDom_=a};Blockly
 Blockly.Field.prototype.setSourceBlock=function(a){goog.asserts.assert(!this.sourceBlock_,"Field already bound to a block.");this.sourceBlock_=a};
 Blockly.Field.prototype.init=function(){this.fieldGroup_||(this.fieldGroup_=Blockly.createSvgElement("g",{},null),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),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_),this.updateTextNode_())};Blockly.Field.prototype.dispose=function(){this.mouseUpWrapper_&&(Blockly.unbindEvent_(this.mouseUpWrapper_),this.mouseUpWrapper_=null);this.sourceBlock_=null;goog.dom.removeNode(this.fieldGroup_);this.validator_=this.borderRect_=this.textElement_=this.fieldGroup_=null};
-Blockly.Field.prototype.updateEditable=function(){this.EDITABLE&&this.sourceBlock_&&(this.sourceBlock_.isEditable()?(Blockly.addClass_(this.fieldGroup_,"blocklyEditableText"),Blockly.removeClass_(this.fieldGroup_,"blocklyNoNEditableText"),this.fieldGroup_.style.cursor=this.CURSOR):(Blockly.addClass_(this.fieldGroup_,"blocklyNonEditableText"),Blockly.removeClass_(this.fieldGroup_,"blocklyEditableText"),this.fieldGroup_.style.cursor=""))};Blockly.Field.prototype.isVisible=function(){return this.visible_};
+Blockly.Field.prototype.updateEditable=function(){var a=this.fieldGroup_;this.EDITABLE&&a&&(this.sourceBlock_.isEditable()?(Blockly.addClass_(a,"blocklyEditableText"),Blockly.removeClass_(a,"blocklyNonEditableText"),this.fieldGroup_.style.cursor=this.CURSOR):(Blockly.addClass_(a,"blocklyNonEditableText"),Blockly.removeClass_(a,"blocklyEditableText"),this.fieldGroup_.style.cursor=""))};Blockly.Field.prototype.isVisible=function(){return this.visible_};
-Blockly.Field.prototype.setVisible=function(a){if(this.visible_!=a){this.visible_=a;var b=this.getSvgRoot();b&&(b.style.display=a?"block":"none",this.render_())}};Blockly.Field.prototype.setValidator=function(a){this.validator_=a};Blockly.Field.prototype.getValidator=function(){return this.validator_};
+Blockly.Field.prototype.setVisible=function(a){if(this.visible_!=a){this.visible_=a;var b=this.getSvgRoot();b&&(b.style.display=a?"block":"none",this.render_())}};Blockly.Field.prototype.setValidator=function(a){this.validator_=a};Blockly.Field.prototype.getValidator=function(){return this.validator_};Blockly.Field.prototype.classValidator=function(a){return a};
-Blockly.Field.prototype.callValidator=function(a){for(var b=[this.getValidator()],c=this.constructor;c;)b.unshift(c.classValidator),c=c.superClass_;for(c=0;c<b.length;c++){var d=b[c];if(d){d=d.call(this,a);if(null===d)return null;void 0!==d&&(a=d)}}return a};Blockly.Field.prototype.getSvgRoot=function(){return this.fieldGroup_};
+Blockly.Field.prototype.callValidator=function(a){var b=this.classValidator(a);if(null===b)return null;void 0!==b&&(a=b);if(b=this.getValidator()){b=b.call(this,a);if(null===b)return null;void 0!==b&&(a=b)}return a};Blockly.Field.prototype.getSvgRoot=function(){return this.fieldGroup_};
 Blockly.Field.prototype.render_=function(){if(this.visible_&&this.textElement_){var a=this.textElement_.textContent+"\n"+this.textElement_.className.baseVal;if(Blockly.Field.cacheWidths_&&Blockly.Field.cacheWidths_[a])var b=Blockly.Field.cacheWidths_[a];else{try{b=this.textElement_.getComputedTextLength()}catch(c){b=8*this.textElement_.textContent.length}Blockly.Field.cacheWidths_&&(Blockly.Field.cacheWidths_[a]=b)}this.borderRect_&&this.borderRect_.setAttribute("width",b+Blockly.BlockSvg.SEP_SPACE_X)}else b=
 0;this.size_.width=b};Blockly.Field.startCache=function(){Blockly.Field.cacheReference_++;Blockly.Field.cacheWidths_||(Blockly.Field.cacheWidths_={})};Blockly.Field.stopCache=function(){Blockly.Field.cacheReference_--;Blockly.Field.cacheReference_||(Blockly.Field.cacheWidths_=null)};Blockly.Field.prototype.getSize=function(){this.size_.width||this.render_();return this.size_};
 Blockly.Field.prototype.getScaledBBox_=function(){var a=this.borderRect_.getBBox();return new goog.math.Size(a.width*this.sourceBlock_.workspace.scale,a.height*this.sourceBlock_.workspace.scale)};Blockly.Field.prototype.getText=function(){return this.text_};Blockly.Field.prototype.setText=function(a){null!==a&&(a=String(a),a!==this.text_&&(this.text_=a,this.updateTextNode_(),this.sourceBlock_&&this.sourceBlock_.rendered&&(this.sourceBlock_.render(),this.sourceBlock_.bumpNeighbours_())))};
 Blockly.Field.prototype.updateTextNode_=function(){if(this.textElement_){var a=this.text_;a.length>this.maxDisplayLength&&(a=a.substring(0,this.maxDisplayLength-2)+"\u2026");goog.dom.removeChildren(this.textElement_);a=a.replace(/\s/g,Blockly.Field.NBSP);this.sourceBlock_.RTL&&a&&(a+="\u200f");a||(a=Blockly.Field.NBSP);a=document.createTextNode(a);this.textElement_.appendChild(a);this.size_.width=0}};Blockly.Field.prototype.getValue=function(){return this.getText()};
 Blockly.Field.prototype.setValue=function(a){if(null!==a){var b=this.getValue();b!=a&&(this.sourceBlock_&&Blockly.Events.isEnabled()&&Blockly.Events.fire(new Blockly.Events.Change(this.sourceBlock_,"field",this.name,b,a)),this.setText(a))}};
 Blockly.Field.prototype.onMouseUp_=function(a){if(!goog.userAgent.IPHONE&&!goog.userAgent.IPAD||goog.userAgent.isVersionOrHigher("537.51.2")||0===a.layerX||0===a.layerY)Blockly.isRightButton(a)||this.sourceBlock_.workspace.isDragging()||this.sourceBlock_.isEditable()&&this.showEditor_()};Blockly.Field.prototype.setTooltip=function(a){};Blockly.Field.prototype.getAbsoluteXY_=function(){return goog.style.getPageOffset(this.borderRect_)};Blockly.Tooltip={};Blockly.Tooltip.visible=!1;Blockly.Tooltip.LIMIT=50;Blockly.Tooltip.mouseOutPid_=0;Blockly.Tooltip.showPid_=0;Blockly.Tooltip.lastX_=0;Blockly.Tooltip.lastY_=0;Blockly.Tooltip.element_=null;Blockly.Tooltip.poisonedElement_=null;Blockly.Tooltip.OFFSET_X=0;Blockly.Tooltip.OFFSET_Y=10;Blockly.Tooltip.RADIUS_OK=10;Blockly.Tooltip.HOVER_MS=750;Blockly.Tooltip.MARGINS=5;Blockly.Tooltip.DIV=null;
-Blockly.Tooltip.createDom=function(){Blockly.Tooltip.DIV||(Blockly.Tooltip.DIV=goog.dom.createDom("div","blocklyTooltipDiv"),document.body.appendChild(Blockly.Tooltip.DIV))};Blockly.Tooltip.bindMouseEvents=function(a){Blockly.bindEvent_(a,"mouseover",null,Blockly.Tooltip.onMouseOver_);Blockly.bindEvent_(a,"mouseout",null,Blockly.Tooltip.onMouseOut_);Blockly.bindEvent_(a,"mousemove",null,Blockly.Tooltip.onMouseMove_)};
+Blockly.Tooltip.createDom=function(){Blockly.Tooltip.DIV||(Blockly.Tooltip.DIV=goog.dom.createDom("DIV","blocklyTooltipDiv"),document.body.appendChild(Blockly.Tooltip.DIV))};Blockly.Tooltip.bindMouseEvents=function(a){Blockly.bindEvent_(a,"mouseover",null,Blockly.Tooltip.onMouseOver_);Blockly.bindEvent_(a,"mouseout",null,Blockly.Tooltip.onMouseOut_);Blockly.bindEvent_(a,"mousemove",null,Blockly.Tooltip.onMouseMove_)};
 Blockly.Tooltip.onMouseOver_=function(a){for(a=a.target;!goog.isString(a.tooltip)&&!goog.isFunction(a.tooltip);)a=a.tooltip;Blockly.Tooltip.element_!=a&&(Blockly.Tooltip.hide(),Blockly.Tooltip.poisonedElement_=null,Blockly.Tooltip.element_=a);clearTimeout(Blockly.Tooltip.mouseOutPid_)};Blockly.Tooltip.onMouseOut_=function(a){Blockly.Tooltip.mouseOutPid_=setTimeout(function(){Blockly.Tooltip.element_=null;Blockly.Tooltip.poisonedElement_=null;Blockly.Tooltip.hide()},1);clearTimeout(Blockly.Tooltip.showPid_)};
 Blockly.Tooltip.onMouseMove_=function(a){if(Blockly.Tooltip.element_&&Blockly.Tooltip.element_.tooltip&&Blockly.dragMode_==Blockly.DRAG_NONE&&!Blockly.WidgetDiv.isVisible())if(Blockly.Tooltip.visible){var b=Blockly.Tooltip.lastX_-a.pageX;a=Blockly.Tooltip.lastY_-a.pageY;Math.sqrt(b*b+a*a)>Blockly.Tooltip.RADIUS_OK&&Blockly.Tooltip.hide()}else Blockly.Tooltip.poisonedElement_!=Blockly.Tooltip.element_&&(clearTimeout(Blockly.Tooltip.showPid_),Blockly.Tooltip.lastX_=a.pageX,Blockly.Tooltip.lastY_=a.pageY,
 Blockly.Tooltip.showPid_=setTimeout(Blockly.Tooltip.show_,Blockly.Tooltip.HOVER_MS))};Blockly.Tooltip.hide=function(){Blockly.Tooltip.visible&&(Blockly.Tooltip.visible=!1,Blockly.Tooltip.DIV&&(Blockly.Tooltip.DIV.style.display="none"));clearTimeout(Blockly.Tooltip.showPid_)};
@@ -953,7 +959,7 @@ Blockly.ConnectionDB.init=function(a){var b=[];b[Blockly.INPUT_VALUE]=new Blockl
 // Copyright 2016 Google Inc.  Apache License 2.0
 Blockly.Options=function(a){var b=!!a.readOnly;if(b)var c=null,d=!1,e=!1,f=!1,g=!1,h=!1,k=!1;else c=Blockly.Options.parseToolboxTree(a.toolbox),d=!(!c||!c.getElementsByTagName("category").length),e=a.trashcan,void 0===e&&(e=d),f=a.collapse,void 0===f&&(f=d),g=a.comments,void 0===g&&(g=d),h=a.disable,void 0===h&&(h=d),k=a.sounds,void 0===k&&(k=!0);var m=!!a.rtl,p=a.horizontalLayout;void 0===p&&(p=!1);var l=a.toolboxPosition,l="end"===l?!1:!0,l=p?l?Blockly.TOOLBOX_AT_TOP:Blockly.TOOLBOX_AT_BOTTOM:l==
 m?Blockly.TOOLBOX_AT_RIGHT:Blockly.TOOLBOX_AT_LEFT,n=a.scrollbars;void 0===n&&(n=d);var q=a.css;void 0===q&&(q=!0);var t="https://blockly-demo.appspot.com/static/media/";a.media?t=a.media:a.path&&(t=a.path+"media/");this.RTL=m;this.collapse=f;this.comments=g;this.disable=h;this.readOnly=b;this.maxBlocks=a.maxBlocks||Infinity;this.pathToMedia=t;this.hasCategories=d;this.hasScrollbars=n;this.hasTrashcan=e;this.hasSounds=k;this.hasCss=q;this.horizontalLayout=p;this.languageTree=c;this.gridOptions=Blockly.Options.parseGridOptions_(a);
-this.zoomOptions=Blockly.Options.parseZoomOptions_(a);this.toolboxPosition=l};Blockly.Options.prototype.parentWorkspace=null;Blockly.Options.prototype.setMetrics=function(){};Blockly.Options.prototype.getMetrics=function(){return null};
+this.zoomOptions=Blockly.Options.parseZoomOptions_(a);this.toolboxPosition=l};Blockly.Options.prototype.parentWorkspace=null;Blockly.Options.prototype.setMetrics=null;Blockly.Options.prototype.getMetrics=null;
 Blockly.Options.parseZoomOptions_=function(a){a=a.zoom||{};var b={};b.controls=void 0===a.controls?!1:!!a.controls;b.wheel=void 0===a.wheel?!1:!!a.wheel;b.startScale=void 0===a.startScale?1:parseFloat(a.startScale);b.maxScale=void 0===a.maxScale?3:parseFloat(a.maxScale);b.minScale=void 0===a.minScale?.3:parseFloat(a.minScale);b.scaleSpeed=void 0===a.scaleSpeed?1.2:parseFloat(a.scaleSpeed);return b};
 Blockly.Options.parseGridOptions_=function(a){a=a.grid||{};var b={};b.spacing=parseFloat(a.spacing)||0;b.colour=a.colour||"#888";b.length=parseFloat(a.length)||1;b.snap=0<b.spacing&&!!a.snap;return b};Blockly.Options.parseToolboxTree=function(a){a?("string"!=typeof a&&("undefined"==typeof XSLTProcessor&&a.outerHTML?a=a.outerHTML:a instanceof Element||(a=null)),"string"==typeof a&&(a=Blockly.Xml.textToDom(a))):a=null;return a};Blockly.ScrollbarPair=function(a){this.workspace_=a;this.hScroll=new Blockly.Scrollbar(a,!0,!0);this.vScroll=new Blockly.Scrollbar(a,!1,!0);this.corner_=Blockly.createSvgElement("rect",{height:Blockly.Scrollbar.scrollbarThickness,width:Blockly.Scrollbar.scrollbarThickness,"class":"blocklyScrollbarBackground"},null);Blockly.Scrollbar.insertAfter_(this.corner_,a.getBubbleCanvas())};Blockly.ScrollbarPair.prototype.oldHostMetrics_=null;
 Blockly.ScrollbarPair.prototype.dispose=function(){goog.dom.removeNode(this.corner_);this.oldHostMetrics_=this.workspace_=this.corner_=null;this.hScroll.dispose();this.hScroll=null;this.vScroll.dispose();this.vScroll=null};
@@ -997,8 +1003,8 @@ Blockly.Xml.cloneShadow_=function(a){for(var b=a=a.cloneNode(!0),c;b;)if(b.first
 Blockly.Xml.domToPrettyText=function(a){a=Blockly.Xml.domToText(a).split("<");for(var b="",c=1;c<a.length;c++){var d=a[c];"/"==d[0]&&(b=b.substring(2));a[c]=b+"<"+d;"/"!=d[0]&&"/>"!=d.slice(-2)&&(b+="  ")}a=a.join("\n");a=a.replace(/(<(\w+)\b[^>]*>[^\n]*)\n *<\/\2>/g,"$1</$2>");return a.replace(/^\n/,"")};
 Blockly.Xml.textToDom=function(a){(a=(new DOMParser).parseFromString(a,"text/xml"))&&a.firstChild&&"xml"==a.firstChild.nodeName.toLowerCase()&&a.firstChild===a.lastChild||goog.asserts.fail("Blockly.Xml.textToDom did not obtain a valid XML tree.");return a.firstChild};
 Blockly.Xml.domToWorkspace=function(a,b){if(a instanceof Blockly.Workspace){var c=a;a=b;b=c;console.warn("Deprecated call to Blockly.Xml.domToWorkspace, swap the arguments.")}var d;b.RTL&&(d=b.getWidth());Blockly.Field.startCache();var c=a.childNodes.length,e=Blockly.Events.getGroup();e||Blockly.Events.setGroup(!0);for(var f=0;f<c;f++){var g=a.childNodes[f],h=g.nodeName.toLowerCase();if("block"==h||"shadow"==h&&!Blockly.Events.recordUndo){var h=Blockly.Xml.domToBlock(g,b),k=parseInt(g.getAttribute("x"),
-10),g=parseInt(g.getAttribute("y"),10);isNaN(k)||isNaN(g)||h.moveBy(b.RTL?d-k:k,g)}else"shadow"==h&&goog.asserts.fail("Shadow block cannot be a top-level block.")}e||Blockly.Events.setGroup(!1);Blockly.Field.stopCache()};
+10),g=parseInt(g.getAttribute("y"),10);isNaN(k)||isNaN(g)||h.moveBy(b.RTL?d-k:k,g)}else"shadow"==h&&goog.asserts.fail("Shadow block cannot be a top-level block.")}e||Blockly.Events.setGroup(!1);Blockly.Field.stopCache();b.updateVariableList(!1)};
-Blockly.Xml.domToBlock=function(a,b){if(a instanceof Blockly.Workspace){var c=a;a=b;b=c;console.warn("Deprecated call to Blockly.Xml.domToBlock, swap the arguments.")}Blockly.Events.disable();try{var d=Blockly.Xml.domToBlockHeadless_(a,b);if(b.rendered){d.setConnectionsHidden(!0);for(var e=d.getDescendants(),f=e.length-1;0<=f;f--)e[f].initSvg();for(f=e.length-1;0<=f;f--)e[f].render(!1);setTimeout(function(){d.workspace&&d.setConnectionsHidden(!1)},1);d.updateDisabled();Blockly.resizeSvgContents(b)}}finally{Blockly.Events.enable()}Blockly.Events.isEnabled()&&
+Blockly.Xml.domToBlock=function(a,b){if(a instanceof Blockly.Workspace){var c=a;a=b;b=c;console.warn("Deprecated call to Blockly.Xml.domToBlock, swap the arguments.")}Blockly.Events.disable();try{var d=Blockly.Xml.domToBlockHeadless_(a,b);if(b.rendered){d.setConnectionsHidden(!0);for(var e=d.getDescendants(),f=e.length-1;0<=f;f--)e[f].initSvg();for(f=e.length-1;0<=f;f--)e[f].render(!1);setTimeout(function(){d.workspace&&d.setConnectionsHidden(!1)},1);d.updateDisabled();b.resizeContents()}}finally{Blockly.Events.enable()}Blockly.Events.isEnabled()&&
 Blockly.Events.fire(new Blockly.Events.Create(d));return d};
 Blockly.Xml.domToBlockHeadless_=function(a,b){var c=null,d=a.getAttribute("type");goog.asserts.assert(d,"Block type unspecified: %s",a.outerHTML);for(var e=a.getAttribute("id"),c=b.newBlock(d,e),f=null,e=0,g;g=a.childNodes[e];e++)if(3!=g.nodeType){for(var h=f=null,k=0,m;m=g.childNodes[k];k++)1==m.nodeType&&("block"==m.nodeName.toLowerCase()?f=m:"shadow"==m.nodeName.toLowerCase()&&(h=m));!f&&h&&(f=h);k=g.getAttribute("name");switch(g.nodeName.toLowerCase()){case "mutation":c.domToMutation&&(c.domToMutation(g),
 c.initSvg&&c.initSvg());break;case "comment":c.setCommentText(g.textContent);var p=g.getAttribute("pinned");p&&!c.isInFlyout&&setTimeout(function(){c.comment&&c.comment.setVisible&&c.comment.setVisible("true"==p)},1);f=parseInt(g.getAttribute("w"),10);g=parseInt(g.getAttribute("h"),10);!isNaN(f)&&!isNaN(g)&&c.comment&&c.comment.setVisible&&c.comment.setBubbleSize(f,g);break;case "data":c.data=g.textContent;break;case "title":case "field":f=c.getField(k);if(!f){console.warn("Ignoring non-existent field "+
@@ -1016,33 +1022,34 @@ Blockly.ZoomControls.prototype.dispose=function(){this.svgGroup_&&(goog.dom.remo
 Blockly.ZoomControls.prototype.position=function(){var a=this.workspace_.getMetrics();a&&(this.workspace_.RTL?(this.left_=this.MARGIN_SIDE_+Blockly.Scrollbar.scrollbarThickness,a.toolboxPosition==Blockly.TOOLBOX_AT_LEFT&&(this.left_+=a.flyoutWidth,this.workspace_.toolbox_&&(this.left_+=a.absoluteLeft))):(this.left_=a.viewWidth+a.absoluteLeft-this.WIDTH_-this.MARGIN_SIDE_-Blockly.Scrollbar.scrollbarThickness,a.toolboxPosition==Blockly.TOOLBOX_AT_RIGHT&&(this.left_-=a.flyoutWidth)),this.top_=a.viewHeight+
 a.absoluteTop-this.HEIGHT_-this.bottom_,a.toolboxPosition==Blockly.TOOLBOX_AT_BOTTOM&&(this.top_-=a.flyoutHeight),this.svgGroup_.setAttribute("transform","translate("+this.left_+","+this.top_+")"))};
 // Copyright 2014 Google Inc.  Apache License 2.0
-Blockly.WorkspaceSvg=function(a){Blockly.WorkspaceSvg.superClass_.constructor.call(this,a);this.getMetrics=a.getMetrics;this.setMetrics=a.setMetrics;Blockly.ConnectionDB.init(this);this.SOUNDS_=Object.create(null)};goog.inherits(Blockly.WorkspaceSvg,Blockly.Workspace);Blockly.WorkspaceSvg.prototype.resizeHandlerWrapper_=null;Blockly.WorkspaceSvg.prototype.rendered=!0;Blockly.WorkspaceSvg.prototype.isFlyout=!1;Blockly.WorkspaceSvg.prototype.dragMode_=Blockly.DRAG_NONE;
+Blockly.WorkspaceSvg=function(a){Blockly.WorkspaceSvg.superClass_.constructor.call(this,a);this.getMetrics=a.getMetrics||Blockly.WorkspaceSvg.getTopLevelWorkspaceMetrics_;this.setMetrics=a.setMetrics||Blockly.WorkspaceSvg.setTopLevelWorkspaceMetrics_;Blockly.ConnectionDB.init(this);this.SOUNDS_=Object.create(null)};goog.inherits(Blockly.WorkspaceSvg,Blockly.Workspace);Blockly.WorkspaceSvg.prototype.resizeHandlerWrapper_=null;Blockly.WorkspaceSvg.prototype.rendered=!0;
-Blockly.WorkspaceSvg.prototype.scrollX=0;Blockly.WorkspaceSvg.prototype.scrollY=0;Blockly.WorkspaceSvg.prototype.startScrollX=0;Blockly.WorkspaceSvg.prototype.startScrollY=0;Blockly.WorkspaceSvg.prototype.dragDeltaXY_=null;Blockly.WorkspaceSvg.prototype.scale=1;Blockly.WorkspaceSvg.prototype.trashcan=null;Blockly.WorkspaceSvg.prototype.scrollbar=null;Blockly.WorkspaceSvg.prototype.lastSound_=null;Blockly.WorkspaceSvg.prototype.inverseScreenCTM_=null;
+Blockly.WorkspaceSvg.prototype.isFlyout=!1;Blockly.WorkspaceSvg.prototype.isMutator=!1;Blockly.WorkspaceSvg.prototype.dragMode_=Blockly.DRAG_NONE;Blockly.WorkspaceSvg.prototype.scrollX=0;Blockly.WorkspaceSvg.prototype.scrollY=0;Blockly.WorkspaceSvg.prototype.startScrollX=0;Blockly.WorkspaceSvg.prototype.startScrollY=0;Blockly.WorkspaceSvg.prototype.dragDeltaXY_=null;Blockly.WorkspaceSvg.prototype.scale=1;Blockly.WorkspaceSvg.prototype.trashcan=null;Blockly.WorkspaceSvg.prototype.scrollbar=null;
-Blockly.WorkspaceSvg.prototype.getInverseScreenCTM=function(){return this.inverseScreenCTM_};Blockly.WorkspaceSvg.prototype.updateInverseScreenCTM=function(){this.inverseScreenCTM_=this.getParentSvg().getScreenCTM().inverse()};Blockly.WorkspaceSvg.prototype.setResizeHandlerWrapper=function(a){this.resizeHandlerWrapper_=a};
+Blockly.WorkspaceSvg.prototype.lastSound_=null;Blockly.WorkspaceSvg.prototype.lastRecordedPageScroll_=null;Blockly.WorkspaceSvg.prototype.inverseScreenCTM_=null;Blockly.WorkspaceSvg.prototype.getInverseScreenCTM=function(){return this.inverseScreenCTM_};Blockly.WorkspaceSvg.prototype.updateInverseScreenCTM=function(){this.inverseScreenCTM_=this.getParentSvg().getScreenCTM().inverse()};Blockly.WorkspaceSvg.prototype.setResizeHandlerWrapper=function(a){this.resizeHandlerWrapper_=a};
 Blockly.WorkspaceSvg.prototype.createDom=function(a){this.svgGroup_=Blockly.createSvgElement("g",{"class":"blocklyWorkspace"},null);a&&(this.svgBackground_=Blockly.createSvgElement("rect",{height:"100%",width:"100%","class":a},this.svgGroup_),"blocklyMainBackground"==a&&(this.svgBackground_.style.fill="url(#"+this.options.gridPattern.id+")"));this.svgBlockCanvas_=Blockly.createSvgElement("g",{"class":"blocklyBlockCanvas"},this.svgGroup_,this);this.svgBubbleCanvas_=Blockly.createSvgElement("g",{"class":"blocklyBubbleCanvas"},
-this.svgGroup_,this);a=Blockly.Scrollbar.scrollbarThickness;this.options.hasTrashcan&&(a=this.addTrashcan_(a));this.options.zoomOptions&&this.options.zoomOptions.controls&&(a=this.addZoomControls_(a));Blockly.bindEvent_(this.svgGroup_,"mousedown",this,this.onMouseDown_);var b=this;Blockly.bindEvent_(this.svgGroup_,"touchstart",null,function(a){Blockly.longStart_(a,b)});this.options.zoomOptions&&this.options.zoomOptions.wheel&&Blockly.bindEvent_(this.svgGroup_,"wheel",this,this.onMouseWheel_);this.options.hasCategories?
+this.svgGroup_,this);a=Blockly.Scrollbar.scrollbarThickness;this.options.hasTrashcan&&(a=this.addTrashcan_(a));this.options.zoomOptions&&this.options.zoomOptions.controls&&(a=this.addZoomControls_(a));if(!this.isFlyout){Blockly.bindEvent_(this.svgGroup_,"mousedown",this,this.onMouseDown_);var b=this;Blockly.bindEvent_(this.svgGroup_,"touchstart",null,function(a){Blockly.longStart_(a,b)});this.options.zoomOptions&&this.options.zoomOptions.wheel&&Blockly.bindEvent_(this.svgGroup_,"wheel",this,this.onMouseWheel_)}this.options.hasCategories?
 this.toolbox_=new Blockly.Toolbox(this):this.options.languageTree&&this.addFlyout_();this.updateGridPattern_();this.recordDeleteAreas();return this.svgGroup_};
 Blockly.WorkspaceSvg.prototype.dispose=function(){this.rendered=!1;Blockly.WorkspaceSvg.superClass_.dispose.call(this);this.svgGroup_&&(goog.dom.removeNode(this.svgGroup_),this.svgGroup_=null);this.svgBubbleCanvas_=this.svgBlockCanvas_=null;this.toolbox_&&(this.toolbox_.dispose(),this.toolbox_=null);this.flyout_&&(this.flyout_.dispose(),this.flyout_=null);this.trashcan&&(this.trashcan.dispose(),this.trashcan=null);this.scrollbar&&(this.scrollbar.dispose(),this.scrollbar=null);this.zoomControls_&&
-(this.zoomControls_.dispose(),this.zoomControls_=null);this.options.parentWorkspace||goog.dom.removeNode(this.getParentSvg());this.resizeHandlerWrapper_&&(Blockly.unbindEvent_(this.resizeHandlerWrapper_),this.resizeHandlerWrapper_=null)};Blockly.WorkspaceSvg.prototype.newBlock=function(a,b){return new Blockly.BlockSvg(this,a,b)};
+(this.zoomControls_.dispose(),this.zoomControls_=null);this.options.parentWorkspace||goog.dom.removeNode(this.getParentSvg().parentNode);this.resizeHandlerWrapper_&&(Blockly.unbindEvent_(this.resizeHandlerWrapper_),this.resizeHandlerWrapper_=null)};Blockly.WorkspaceSvg.prototype.newBlock=function(a,b){return new Blockly.BlockSvg(this,a,b)};
 Blockly.WorkspaceSvg.prototype.addTrashcan_=function(a){this.trashcan=new Blockly.Trashcan(this);var b=this.trashcan.createDom();this.svgGroup_.insertBefore(b,this.svgBlockCanvas_);return this.trashcan.init(a)};Blockly.WorkspaceSvg.prototype.addZoomControls_=function(a){this.zoomControls_=new Blockly.ZoomControls(this);var b=this.zoomControls_.createDom();this.svgGroup_.appendChild(b);return this.zoomControls_.init(a)};
-Blockly.WorkspaceSvg.prototype.addFlyout_=function(){this.flyout_=new Blockly.Flyout({disabledPatternId:this.options.disabledPatternId,parentWorkspace:this,RTL:this.RTL,horizontalLayout:this.horizontalLayout,toolboxPosition:this.options.toolboxPosition});this.flyout_.autoClose=!1;var a=this.flyout_.createDom();this.svgGroup_.insertBefore(a,this.svgBlockCanvas_)};Blockly.WorkspaceSvg.prototype.resizeContents=function(){this.scrollbar&&this.scrollbar.resize();this.updateInverseScreenCTM()};
+Blockly.WorkspaceSvg.prototype.addFlyout_=function(){this.flyout_=new Blockly.Flyout({disabledPatternId:this.options.disabledPatternId,parentWorkspace:this,RTL:this.RTL,horizontalLayout:this.horizontalLayout,toolboxPosition:this.options.toolboxPosition});this.flyout_.autoClose=!1;var a=this.flyout_.createDom();this.svgGroup_.insertBefore(a,this.svgBlockCanvas_)};Blockly.WorkspaceSvg.prototype.updateScreenCalculations_=function(){this.updateInverseScreenCTM();this.recordDeleteAreas()};
-Blockly.WorkspaceSvg.prototype.resize=function(){this.toolbox_&&this.toolbox_.position();this.flyout_&&this.flyout_.position();this.trashcan&&this.trashcan.position();this.zoomControls_&&this.zoomControls_.position();this.scrollbar&&this.scrollbar.resize();this.updateInverseScreenCTM();this.recordDeleteAreas()};Blockly.WorkspaceSvg.prototype.getCanvas=function(){return this.svgBlockCanvas_};Blockly.WorkspaceSvg.prototype.getBubbleCanvas=function(){return this.svgBubbleCanvas_};
+Blockly.WorkspaceSvg.prototype.resizeContents=function(){this.scrollbar&&this.scrollbar.resize();this.updateInverseScreenCTM()};Blockly.WorkspaceSvg.prototype.resize=function(){this.toolbox_&&this.toolbox_.position();this.flyout_&&this.flyout_.position();this.trashcan&&this.trashcan.position();this.zoomControls_&&this.zoomControls_.position();this.scrollbar&&this.scrollbar.resize();this.updateScreenCalculations_()};
+Blockly.WorkspaceSvg.prototype.updateScreenCalculationsIfScrolled=function(){var a=goog.dom.getDocumentScroll();goog.math.Coordinate.equals(this.lastRecordedPageScroll_,a)||(this.lastRecordedPageScroll_=a,this.updateScreenCalculations_())};Blockly.WorkspaceSvg.prototype.getCanvas=function(){return this.svgBlockCanvas_};Blockly.WorkspaceSvg.prototype.getBubbleCanvas=function(){return this.svgBubbleCanvas_};
 Blockly.WorkspaceSvg.prototype.getParentSvg=function(){if(this.cachedParentSvg_)return this.cachedParentSvg_;for(var a=this.svgGroup_;a;){if("svg"==a.tagName)return this.cachedParentSvg_=a;a=a.parentNode}return null};Blockly.WorkspaceSvg.prototype.translate=function(a,b){var c="translate("+a+","+b+") scale("+this.scale+")";this.svgBlockCanvas_.setAttribute("transform",c);this.svgBubbleCanvas_.setAttribute("transform",c)};
 Blockly.WorkspaceSvg.prototype.getWidth=function(){var a=this.getMetrics();return a?a.viewWidth/this.scale:0};Blockly.WorkspaceSvg.prototype.setVisible=function(a){this.getParentSvg().style.display=a?"block":"none";this.toolbox_&&(this.toolbox_.HtmlDiv.style.display=a?"block":"none");a?(this.render(),this.toolbox_&&this.toolbox_.position()):Blockly.hideChaff(!0)};Blockly.WorkspaceSvg.prototype.render=function(){for(var a=this.getAllBlocks(),b=a.length-1;0<=b;b--)a[b].render(!1)};
 Blockly.WorkspaceSvg.prototype.traceOn=function(a){this.traceOn_=a;this.traceWrapper_&&(Blockly.unbindEvent_(this.traceWrapper_),this.traceWrapper_=null);a&&(this.traceWrapper_=Blockly.bindEvent_(this.svgBlockCanvas_,"blocklySelectChange",this,function(){this.traceOn_=!1}))};
 Blockly.WorkspaceSvg.prototype.highlightBlock=function(a){this.traceOn_&&Blockly.dragMode_!=Blockly.DRAG_NONE&&this.traceOn(!1);if(this.traceOn_){var b=null;if(a&&(b=this.getBlockById(a),!b))return;this.traceOn(!1);b?b.select():Blockly.selected&&Blockly.selected.unselect();var c=this;setTimeout(function(){c.traceOn(!0)},1)}};
 Blockly.WorkspaceSvg.prototype.paste=function(a){if(this.rendered&&!(a.getElementsByTagName("block").length>=this.remainingCapacity())){Blockly.terminateDrag_();Blockly.Events.disable();try{var b=Blockly.Xml.domToBlock(a,this),c=parseInt(a.getAttribute("x"),10),d=parseInt(a.getAttribute("y"),10);if(!isNaN(c)&&!isNaN(d)){this.RTL&&(c=-c);do{a=!1;for(var e=this.getAllBlocks(),f=0,g;g=e[f];f++){var h=g.getRelativeToSurfaceXY();if(1>=Math.abs(c-h.x)&&1>=Math.abs(d-h.y)){a=!0;break}}if(!a)for(var k=b.getConnections_(!1),
 f=0,m;m=k[f];f++)if(m.closest(Blockly.SNAP_RADIUS,new goog.math.Coordinate(c,d)).connection){a=!0;break}a&&(c=this.RTL?c-Blockly.SNAP_RADIUS:c+Blockly.SNAP_RADIUS,d+=2*Blockly.SNAP_RADIUS)}while(a);b.moveBy(c,d)}}finally{Blockly.Events.enable()}Blockly.Events.isEnabled()&&!b.isShadow()&&Blockly.Events.fire(new Blockly.Events.Create(b));b.select()}};
-Blockly.WorkspaceSvg.prototype.recordDeleteAreas=function(){this.deleteAreaTrash_=this.trashcan?this.trashcan.getClientRect():null;this.deleteAreaToolbox_=this.flyout_?this.flyout_.getClientRect():this.toolbox_?this.toolbox_.getClientRect():null};
+Blockly.WorkspaceSvg.prototype.createVariable=function(a){Blockly.WorkspaceSvg.superClass_.createVariable.call(this,a);this.toolbox_&&this.toolbox_.flyout_&&this.toolbox_.refreshSelection()};Blockly.WorkspaceSvg.prototype.recordDeleteAreas=function(){this.deleteAreaTrash_=this.trashcan?this.trashcan.getClientRect():null;this.deleteAreaToolbox_=this.flyout_?this.flyout_.getClientRect():this.toolbox_?this.toolbox_.getClientRect():null};
 Blockly.WorkspaceSvg.prototype.isDeleteArea=function(a){a=new goog.math.Coordinate(a.clientX,a.clientY);if(this.deleteAreaTrash_){if(this.deleteAreaTrash_.contains(a))return this.trashcan.setOpen_(!0),Blockly.Css.setCursor(Blockly.Css.Cursor.DELETE),!0;this.trashcan.setOpen_(!1)}if(this.deleteAreaToolbox_&&this.deleteAreaToolbox_.contains(a))return Blockly.Css.setCursor(Blockly.Css.Cursor.DELETE),!0;Blockly.Css.setCursor(Blockly.Css.Cursor.CLOSED);return!1};
 Blockly.WorkspaceSvg.prototype.onMouseDown_=function(a){this.markFocused();Blockly.isTargetInput_(a)||(Blockly.terminateDrag_(),Blockly.hideChaff(),a.target&&a.target.nodeName&&("svg"==a.target.nodeName.toLowerCase()||a.target==this.svgBackground_)&&Blockly.selected&&!this.options.readOnly&&Blockly.selected.unselect(),Blockly.isRightButton(a)?this.showContextMenu_(a):this.scrollbar&&(this.dragMode_=Blockly.DRAG_BEGIN,this.startDragMouseX=a.clientX,this.startDragMouseY=a.clientY,this.startDragMetrics=
 this.getMetrics(),this.startScrollX=this.scrollX,this.startScrollY=this.scrollY,"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_))),a.stopPropagation(),
 a.preventDefault())};Blockly.WorkspaceSvg.prototype.startDrag=function(a,b){var c=Blockly.mouseToSvg(a,this.getParentSvg(),this.getInverseScreenCTM());c.x/=this.scale;c.y/=this.scale;this.dragDeltaXY_=goog.math.Coordinate.difference(b,c)};Blockly.WorkspaceSvg.prototype.moveDrag=function(a){a=Blockly.mouseToSvg(a,this.getParentSvg(),this.getInverseScreenCTM());a.x/=this.scale;a.y/=this.scale;return goog.math.Coordinate.sum(this.dragDeltaXY_,a)};
-Blockly.WorkspaceSvg.prototype.isDragging=function(){return Blockly.dragMode_==Blockly.DRAG_FREE||this.dragMode_==Blockly.DRAG_FREE};Blockly.WorkspaceSvg.prototype.onMouseWheel_=function(a){Blockly.terminateDrag_();var b=0<a.deltaY?-1:1,c=Blockly.mouseToSvg(a,this.getParentSvg(),this.getInverseScreenCTM());this.zoom(c.x,c.y,b);a.preventDefault()};
+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};Blockly.WorkspaceSvg.prototype.onMouseWheel_=function(a){Blockly.terminateDrag_();var b=0<a.deltaY?-1:1,c=Blockly.mouseToSvg(a,this.getParentSvg(),this.getInverseScreenCTM());this.zoom(c.x,c.y,b);a.preventDefault()};
 Blockly.WorkspaceSvg.prototype.getBlocksBoundingBox=function(){var a=this.getTopBlocks(!1);if(!a.length)return{x:0,y:0,width:0,height:0};for(var b=a[0].getBoundingRectangle(),c=1;c<a.length;c++){var d=a[c].getBoundingRectangle();d.topLeft.x<b.topLeft.x&&(b.topLeft.x=d.topLeft.x);d.bottomRight.x>b.bottomRight.x&&(b.bottomRight.x=d.bottomRight.x);d.topLeft.y<b.topLeft.y&&(b.topLeft.y=d.topLeft.y);d.bottomRight.y>b.bottomRight.y&&(b.bottomRight.y=d.bottomRight.y)}return{x:b.topLeft.x,y:b.topLeft.y,width:b.bottomRight.x-
-b.topLeft.x,height:b.bottomRight.y-b.topLeft.y}};Blockly.WorkspaceSvg.prototype.cleanUp_=function(){Blockly.Events.setGroup(!0);for(var a=this.getTopBlocks(!0),b=0,c=0,d;d=a[c];c++){var e=d.getRelativeToSurfaceXY();d.moveBy(-e.x,b-e.y);d.snapToGrid();b=d.getRelativeToSurfaceXY().y+d.getHeightWidth().height+Blockly.BlockSvg.MIN_BLOCK_Y}Blockly.Events.setGroup(!1);Blockly.resizeSvgContents(this)};
+b.topLeft.x,height:b.bottomRight.y-b.topLeft.y}};Blockly.WorkspaceSvg.prototype.cleanUp=function(){Blockly.Events.setGroup(!0);for(var a=this.getTopBlocks(!0),b=0,c=0,d;d=a[c];c++){var e=d.getRelativeToSurfaceXY();d.moveBy(-e.x,b-e.y);d.snapToGrid();b=d.getRelativeToSurfaceXY().y+d.getHeightWidth().height+Blockly.BlockSvg.MIN_BLOCK_Y}Blockly.Events.setGroup(!1);this.resizeContents()};
 Blockly.WorkspaceSvg.prototype.showContextMenu_=function(a){function b(a){if(a.isDeletable())l=l.concat(a.getDescendants());else{a=a.getChildren();for(var c=0;c<a.length;c++)b(a[c])}}function c(){Blockly.Events.setGroup(f);var a=l.shift();a&&(a.workspace?(a.dispose(!1,!0),setTimeout(c,10)):c());Blockly.Events.setGroup(!1)}if(!this.options.readOnly&&!this.isFlyout){var d=[],e=this.getTopBlocks(!0),f=Blockly.genUid(),g={};g.text=Blockly.Msg.UNDO;g.enabled=0<this.undoStack_.length;g.callback=this.undo.bind(this,
-!1);d.push(g);g={};g.text=Blockly.Msg.REDO;g.enabled=0<this.redoStack_.length;g.callback=this.undo.bind(this,!0);d.push(g);this.scrollbar&&(g={},g.text=Blockly.Msg.CLEAN_UP,g.enabled=1<e.length,g.callback=this.cleanUp_.bind(this),d.push(g));if(this.options.collapse){for(var h=g=!1,k=0;k<e.length;k++)for(var m=e[k];m;)m.isCollapsed()?g=!0:h=!0,m=m.getNextBlock();var p=function(a){for(var b=0,c=0;c<e.length;c++)for(var d=e[c];d;)setTimeout(d.setCollapsed.bind(d,a),b),d=d.getNextBlock(),b+=10},h={enabled:h};
+!1);d.push(g);g={};g.text=Blockly.Msg.REDO;g.enabled=0<this.redoStack_.length;g.callback=this.undo.bind(this,!0);d.push(g);this.scrollbar&&(g={},g.text=Blockly.Msg.CLEAN_UP,g.enabled=1<e.length,g.callback=this.cleanUp.bind(this),d.push(g));if(this.options.collapse){for(var h=g=!1,k=0;k<e.length;k++)for(var m=e[k];m;)m.isCollapsed()?g=!0:h=!0,m=m.getNextBlock();var p=function(a){for(var b=0,c=0;c<e.length;c++)for(var d=e[c];d;)setTimeout(d.setCollapsed.bind(d,a),b),d=d.getNextBlock(),b+=10},h={enabled:h};
 h.text=Blockly.Msg.COLLAPSE_ALL;h.callback=function(){p(!0)};d.push(h);g={enabled:g};g.text=Blockly.Msg.EXPAND_ALL;g.callback=function(){p(!1)};d.push(g)}for(var l=[],k=0;k<e.length;k++)b(e[k]);g={text:1==l.length?Blockly.Msg.DELETE_BLOCK:Blockly.Msg.DELETE_X_BLOCKS.replace("%1",String(l.length)),enabled:0<l.length,callback:function(){(2>l.length||window.confirm(Blockly.Msg.DELETE_ALL_BLOCKS.replace("%1",String(l.length))))&&c()}};d.push(g);Blockly.ContextMenu.show(a,d,this.RTL)}};
 Blockly.WorkspaceSvg.prototype.loadAudio_=function(a,b){if(a.length){try{var c=new window.Audio}catch(h){return}for(var d,e=0;e<a.length;e++){var f=a[e],g=f.match(/\.(\w+)$/);if(g&&c.canPlayType("audio/"+g[1])){d=new window.Audio(f);break}}d&&d.play&&(this.SOUNDS_[b]=d)}};Blockly.WorkspaceSvg.prototype.preloadAudio_=function(){for(var a in this.SOUNDS_){var b=this.SOUNDS_[a];b.volume=.01;b.play();b.pause();if(goog.userAgent.IPAD||goog.userAgent.IPHONE)break}};
 Blockly.WorkspaceSvg.prototype.playAudio=function(a,b){var c=this.SOUNDS_[a];if(c){var d=new Date;d-this.lastSound_<Blockly.SOUND_LIMIT||(this.lastSound_=d,c=goog.userAgent.DOCUMENT_MODE&&9===goog.userAgent.DOCUMENT_MODE||goog.userAgent.IPAD||goog.userAgent.ANDROID?c:c.cloneNode(),c.volume=void 0===b?1:b,c.play())}else this.options.parentWorkspace&&this.options.parentWorkspace.playAudio(a,b)};
@@ -1054,11 +1061,17 @@ Blockly.WorkspaceSvg.prototype.zoomToFit=function(){var a=this.getMetrics(),b=th
 Blockly.WorkspaceSvg.prototype.scrollCenter=function(){if(this.scrollbar){var a=this.getMetrics(),b=(a.contentWidth-a.viewWidth)/2;this.flyout_&&(b-=this.flyout_.width_/2);this.scrollbar.set(b,(a.contentHeight-a.viewHeight)/2)}};
 Blockly.WorkspaceSvg.prototype.setScale=function(a){this.options.zoomOptions.maxScale&&a>this.options.zoomOptions.maxScale?a=this.options.zoomOptions.maxScale:this.options.zoomOptions.minScale&&a<this.options.zoomOptions.minScale&&(a=this.options.zoomOptions.minScale);this.scale=a;this.updateGridPattern_();this.scrollbar?this.scrollbar.resize():this.translate(this.scrollX,this.scrollY);Blockly.hideChaff(!1);this.flyout_&&this.flyout_.reflow()};
 Blockly.WorkspaceSvg.prototype.updateGridPattern_=function(){if(this.options.gridPattern){var a=this.options.gridOptions.spacing*this.scale||100;this.options.gridPattern.setAttribute("width",a);this.options.gridPattern.setAttribute("height",a);var a=Math.floor(this.options.gridOptions.spacing/2)+.5,b=a-this.options.gridOptions.length/2,c=a+this.options.gridOptions.length/2,d=this.options.gridPattern.firstChild,e=d&&d.nextSibling,a=a*this.scale,b=b*this.scale,c=c*this.scale;d&&(d.setAttribute("stroke-width",
-this.scale),d.setAttribute("x1",b),d.setAttribute("y1",a),d.setAttribute("x2",c),d.setAttribute("y2",a));e&&(e.setAttribute("stroke-width",this.scale),e.setAttribute("x1",a),e.setAttribute("y1",b),e.setAttribute("x2",a),e.setAttribute("y2",c))}};Blockly.WorkspaceSvg.prototype.setVisible=Blockly.WorkspaceSvg.prototype.setVisible;Blockly.Mutator=function(a){Blockly.Mutator.superClass_.constructor.call(this,null);this.quarkNames_=a};goog.inherits(Blockly.Mutator,Blockly.Icon);Blockly.Mutator.prototype.workspaceWidth_=0;Blockly.Mutator.prototype.workspaceHeight_=0;
+this.scale),d.setAttribute("x1",b),d.setAttribute("y1",a),d.setAttribute("x2",c),d.setAttribute("y2",a));e&&(e.setAttribute("stroke-width",this.scale),e.setAttribute("x1",a),e.setAttribute("y1",b),e.setAttribute("x2",a),e.setAttribute("y2",c))}};
+Blockly.WorkspaceSvg.getTopLevelWorkspaceMetrics_=function(){var a=Blockly.svgSize(this.getParentSvg());if(this.toolbox_)if(this.toolboxPosition==Blockly.TOOLBOX_AT_TOP||this.toolboxPosition==Blockly.TOOLBOX_AT_BOTTOM)a.height-=this.toolbox_.getHeight();else if(this.toolboxPosition==Blockly.TOOLBOX_AT_LEFT||this.toolboxPosition==Blockly.TOOLBOX_AT_RIGHT)a.width-=this.toolbox_.getWidth();var b=Blockly.Flyout.prototype.CORNER_RADIUS-1,c=a.width-b,d=a.height-b,e=this.getBlocksBoundingBox(),f=e.width*
+this.scale,g=e.height*this.scale,h=e.x*this.scale,k=e.y*this.scale;this.scrollbar?(b=Math.min(h-c/2,h+f-c),c=Math.max(h+f+c/2,h+c),f=Math.min(k-d/2,k+g-d),d=Math.max(k+g+d/2,k+d)):(b=e.x,c=b+e.width,f=e.y,d=f+e.height);e=0;this.toolbox_&&this.toolboxPosition==Blockly.TOOLBOX_AT_LEFT&&(e=this.toolbox_.getWidth());g=0;this.toolbox_&&this.toolboxPosition==Blockly.TOOLBOX_AT_TOP&&(g=this.toolbox_.getHeight());return{viewHeight:a.height,viewWidth:a.width,contentHeight:d-f,contentWidth:c-b,viewTop:-this.scrollY,
+viewLeft:-this.scrollX,contentTop:f,contentLeft:b,absoluteTop:g,absoluteLeft:e,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}};
+Blockly.WorkspaceSvg.setTopLevelWorkspaceMetrics_=function(a){if(!this.scrollbar)throw"Attempt to set top level workspace scroll without scrollbars.";var b=this.getMetrics();goog.isNumber(a.x)&&(this.scrollX=-b.contentWidth*a.x-b.contentLeft);goog.isNumber(a.y)&&(this.scrollY=-b.contentHeight*a.y-b.contentTop);a=this.scrollX+b.absoluteLeft;b=this.scrollY+b.absoluteTop;this.translate(a,b);this.options.gridPattern&&(this.options.gridPattern.setAttribute("x",a),this.options.gridPattern.setAttribute("y",
+b),goog.userAgent.IE&&this.updateGridPattern_())};Blockly.WorkspaceSvg.prototype.setVisible=Blockly.WorkspaceSvg.prototype.setVisible;Blockly.Mutator=function(a){Blockly.Mutator.superClass_.constructor.call(this,null);this.quarkNames_=a};goog.inherits(Blockly.Mutator,Blockly.Icon);Blockly.Mutator.prototype.workspaceWidth_=0;Blockly.Mutator.prototype.workspaceHeight_=0;
 Blockly.Mutator.prototype.drawIcon_=function(a){Blockly.createSvgElement("rect",{"class":"blocklyIconShape",rx:"4",ry:"4",height:"16",width:"16"},a);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"},a);
 Blockly.createSvgElement("circle",{"class":"blocklyIconShape",r:"2.7",cx:"8",cy:"8"},a)};Blockly.Mutator.prototype.iconClick_=function(a){this.block_.isEditable()&&Blockly.Icon.prototype.iconClick_.call(this,a)};
 Blockly.Mutator.prototype.createEditor_=function(){this.svgDialog_=Blockly.createSvgElement("svg",{x:Blockly.Bubble.BORDER_WIDTH,y:Blockly.Bubble.BORDER_WIDTH},null);if(this.quarkNames_.length)for(var a=goog.dom.createDom("xml"),b=0,c;c=this.quarkNames_[b];b++)a.appendChild(goog.dom.createDom("block",{type:c}));else a=null;a={languageTree:a,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:!1,getMetrics:this.getFlyoutMetrics_.bind(this),setMetrics:null};this.workspace_=new Blockly.WorkspaceSvg(a);this.svgDialog_.appendChild(this.workspace_.createDom("blocklyMutatorBackground"));return this.svgDialog_};Blockly.Mutator.prototype.updateEditable=function(){this.block_.isEditable()?Blockly.Icon.prototype.updateEditable.call(this):(this.setVisible(!1),this.iconGroup_&&Blockly.addClass_(this.iconGroup_,"blocklyIconGroupReadonly"))};
+Blockly.TOOLBOX_AT_LEFT,horizontalLayout:!1,getMetrics:this.getFlyoutMetrics_.bind(this),setMetrics:null};this.workspace_=new Blockly.WorkspaceSvg(a);this.workspace_.isMutator=!0;this.svgDialog_.appendChild(this.workspace_.createDom("blocklyMutatorBackground"));return this.svgDialog_};
+Blockly.Mutator.prototype.updateEditable=function(){this.block_.isInFlyout||(this.block_.isEditable()?this.iconGroup_&&Blockly.removeClass_(this.iconGroup_,"blocklyIconGroupReadonly"):(this.setVisible(!1),this.iconGroup_&&Blockly.addClass_(this.iconGroup_,"blocklyIconGroupReadonly")));Blockly.Icon.prototype.updateEditable.call(this)};
 Blockly.Mutator.prototype.resizeBubble_=function(){var a=2*Blockly.Bubble.BORDER_WIDTH,b=this.workspace_.getCanvas().getBBox(),c;c=this.block_.RTL?-b.x:b.width+b.x;b=b.height+3*a;if(this.workspace_.flyout_)var d=this.workspace_.flyout_.getMetrics_(),b=Math.max(b,d.contentHeight+20);c+=3*a;if(Math.abs(this.workspaceWidth_-c)>a||Math.abs(this.workspaceHeight_-b)>a)this.workspaceWidth_=c,this.workspaceHeight_=b,this.bubble_.setBubbleSize(c+a,b+a),this.svgDialog_.setAttribute("width",this.workspaceWidth_),
 this.svgDialog_.setAttribute("height",this.workspaceHeight_);this.block_.RTL&&(a="translate("+this.workspaceWidth_+",0)",this.workspace_.getCanvas().setAttribute("transform",a));this.workspace_.resize()};
 Blockly.Mutator.prototype.setVisible=function(a){if(a!=this.isVisible())if(Blockly.Events.fire(new Blockly.Events.Ui(this.block_,"mutatorOpen",!a,a)),a){this.bubble_=new Blockly.Bubble(this.block_.workspace,this.createEditor_(),this.block_.svgPath_,this.iconXY_,null,null);if(a=this.workspace_.options.languageTree)this.workspace_.flyout_.init(this.workspace_),this.workspace_.flyout_.show(a.childNodes);this.rootBlock_=this.block_.decompose(this.workspace_);a=this.rootBlock_.getDescendants();for(var b=
@@ -1071,11 +1084,11 @@ Blockly.Warning.prototype.drawIcon_=function(a){Blockly.createSvgElement("path",
 Blockly.Warning.textToDom_=function(a){var b=Blockly.createSvgElement("text",{"class":"blocklyText blocklyBubbleText",y:Blockly.Bubble.BORDER_WIDTH},null);a=a.split("\n");for(var c=0;c<a.length;c++){var d=Blockly.createSvgElement("tspan",{dy:"1em",x:Blockly.Bubble.BORDER_WIDTH},b),e=document.createTextNode(a[c]);d.appendChild(e)}return b};
 Blockly.Warning.prototype.setVisible=function(a){if(a!=this.isVisible())if(Blockly.Events.fire(new Blockly.Events.Ui(this.block_,"warningOpen",!a,a)),a){a=Blockly.Warning.textToDom_(this.getText());this.bubble_=new Blockly.Bubble(this.block_.workspace,a,this.block_.svgPath_,this.iconXY_,null,null);if(this.block_.RTL)for(var b=a.getBBox().width,c=0,d;d=a.childNodes[c];c++)d.setAttribute("text-anchor","end"),d.setAttribute("x",b+Blockly.Bubble.BORDER_WIDTH);this.updateColour();a=this.bubble_.getBubbleSize();
 this.bubble_.setBubbleSize(a.width,a.height)}else this.bubble_.dispose(),this.body_=this.bubble_=null};Blockly.Warning.prototype.bodyFocus_=function(a){this.bubble_.promote_()};Blockly.Warning.prototype.setText=function(a,b){this.text_[b]!=a&&(a?this.text_[b]=a:delete this.text_[b],this.isVisible()&&(this.setVisible(!1),this.setVisible(!0)))};Blockly.Warning.prototype.getText=function(){var a=[],b;for(b in this.text_)a.push(this.text_[b]);return a.join("\n")};
-Blockly.Warning.prototype.dispose=function(){this.block_.warning=null;Blockly.Icon.prototype.dispose.call(this)};Blockly.Block=function(a,b,c){this.id=c&&!a.getBlockById(c)?c:Blockly.genUid();a.blockDB_[this.id]=this;this.previousConnection=this.nextConnection=this.outputConnection=null;this.inputList=[];this.inputsInline=void 0;this.disabled=!1;this.tooltip="";this.contextMenu=!0;this.parentBlock_=null;this.childBlocks_=[];this.editable_=this.movable_=this.deletable_=!0;this.collapsed_=this.isShadow_=!1;this.comment=null;this.xy_=new goog.math.Coordinate(0,0);this.workspace=a;this.isInFlyout=a.isFlyout;this.RTL=
+Blockly.Warning.prototype.dispose=function(){this.block_.warning=null;Blockly.Icon.prototype.dispose.call(this)};Blockly.Block=function(a,b,c){this.id=c&&!a.getBlockById(c)?c:Blockly.genUid();a.blockDB_[this.id]=this;this.previousConnection=this.nextConnection=this.outputConnection=null;this.inputList=[];this.inputsInline=void 0;this.disabled=!1;this.tooltip="";this.contextMenu=!0;this.parentBlock_=null;this.childBlocks_=[];this.editable_=this.movable_=this.deletable_=!0;this.collapsed_=this.isShadow_=!1;this.comment=null;this.xy_=new goog.math.Coordinate(0,0);this.workspace=a;this.isInFlyout=a.isFlyout;this.isInMutator=
-a.RTL;b&&(this.type=b,c=Blockly.Blocks[b],goog.asserts.assertObject(c,'Error: "%s" is an unknown language block.',b),goog.mixin(this,c));a.addTopBlock(this);goog.isFunction(this.init)&&this.init();this.inputsInlineDefault=this.inputsInline;Blockly.Events.isEnabled()&&Blockly.Events.fire(new Blockly.Events.Create(this));goog.isFunction(this.onchange)&&(this.onchangeWrapper_=this.onchange.bind(this),this.workspace.addChangeListener(this.onchangeWrapper_))};
+a.isMutator;this.RTL=a.RTL;b&&(this.type=b,c=Blockly.Blocks[b],goog.asserts.assertObject(c,'Error: "%s" is an unknown language block.',b),goog.mixin(this,c));a.addTopBlock(this);goog.isFunction(this.init)&&this.init();this.inputsInlineDefault=this.inputsInline;Blockly.Events.isEnabled()&&Blockly.Events.fire(new Blockly.Events.Create(this));goog.isFunction(this.onchange)&&(this.onchangeWrapper_=this.onchange.bind(this),this.workspace.addChangeListener(this.onchangeWrapper_))};
 Blockly.Block.obtain=function(a,b){console.warn("Deprecated call to Blockly.Block.obtain, use workspace.newBlock instead.");return a.newBlock(b)};Blockly.Block.prototype.data=null;Blockly.Block.prototype.colour_="#000000";
-Blockly.Block.prototype.dispose=function(a){this.onchangeWrapper_&&this.workspace.removeChangeListener(this.onchangeWrapper_);this.unplug(a);Blockly.Events.isEnabled()&&Blockly.Events.fire(new Blockly.Events.Delete(this));Blockly.Events.disable();try{this.workspace&&(this.workspace.removeTopBlock(this),delete this.workspace.blockDB_[this.id],this.workspace=null);for(var b=this.childBlocks_.length-1;0<=b;b--)this.childBlocks_[b].dispose(!1);for(var b=0,c;c=this.inputList[b];b++)c.dispose();this.inputList.length=
+Blockly.Block.prototype.dispose=function(a){if(this.workspace){this.onchangeWrapper_&&this.workspace.removeChangeListener(this.onchangeWrapper_);this.unplug(a);Blockly.Events.isEnabled()&&Blockly.Events.fire(new Blockly.Events.Delete(this));Blockly.Events.disable();try{this.workspace&&(this.workspace.removeTopBlock(this),delete this.workspace.blockDB_[this.id],this.workspace=null);for(var b=this.childBlocks_.length-1;0<=b;b--)this.childBlocks_[b].dispose(!1);for(var b=0,c;c=this.inputList[b];b++)c.dispose();
-0;for(var d=this.getConnections_(!0),b=0;b<d.length;b++){var e=d[b];e.isConnected()&&e.disconnect();d[b].dispose()}}finally{Blockly.Events.enable()}};
+this.inputList.length=0;for(var d=this.getConnections_(!0),b=0;b<d.length;b++){var e=d[b];e.isConnected()&&e.disconnect();d[b].dispose()}}finally{Blockly.Events.enable()}}};
 Blockly.Block.prototype.unplug=function(a){if(this.outputConnection)this.outputConnection.isConnected()&&this.outputConnection.disconnect();else if(this.previousConnection){var b=null;this.previousConnection.isConnected()&&(b=this.previousConnection.targetConnection,this.previousConnection.disconnect());var c=this.getNextBlock();a&&c&&(a=this.nextConnection.targetConnection,a.disconnect(),b&&b.checkType_(a)&&b.connect(a))}};
 Blockly.Block.prototype.getConnections_=function(){var a=[];this.outputConnection&&a.push(this.outputConnection);this.previousConnection&&a.push(this.previousConnection);this.nextConnection&&a.push(this.nextConnection);for(var b=0,c;c=this.inputList[b];b++)c.connection&&a.push(c.connection);return a};Blockly.Block.prototype.lastConnectionInStack_=function(){for(var a=this.nextConnection;a;){var b=a.targetBlock();if(!b)return a;a=b.nextConnection}return null};
 Blockly.Block.prototype.bumpNeighbours_=function(){if(this.workspace&&Blockly.dragMode_==Blockly.DRAG_NONE){var a=this.getRootBlock();if(!a.isInFlyout)for(var b=this.getConnections_(!1),c=0,d;d=b[c];c++){d.isConnected()&&d.isSuperior()&&d.targetBlock().bumpNeighbours_();for(var e=d.neighbours_(Blockly.SNAP_RADIUS),f=0,g;g=e[f];f++)d.isConnected()&&g.isConnected()||g.getSourceBlock().getRootBlock()!=a&&(d.isSuperior()?g.bumpAwayFrom_(d):d.bumpAwayFrom_(g))}}};Blockly.Block.prototype.getParent=function(){return this.parentBlock_};
@@ -1096,8 +1109,8 @@ null)};Blockly.Block.prototype.setInputsInline=function(a){this.inputsInline!=a&
 Blockly.Block.prototype.getInputsInline=function(){if(void 0!=this.inputsInline)return this.inputsInline;for(var a=1;a<this.inputList.length;a++)if(this.inputList[a-1].type==Blockly.DUMMY_INPUT&&this.inputList[a].type==Blockly.DUMMY_INPUT)return!1;for(a=1;a<this.inputList.length;a++)if(this.inputList[a-1].type==Blockly.INPUT_VALUE&&this.inputList[a].type==Blockly.DUMMY_INPUT)return!0;return!1};
 Blockly.Block.prototype.setDisabled=function(a){this.disabled!=a&&(Blockly.Events.fire(new Blockly.Events.Change(this,"disabled",null,this.disabled,a)),this.disabled=a)};Blockly.Block.prototype.getInheritedDisabled=function(){for(var a=this;;){a=a.getSurroundParent();if(!a)return!1;if(a.disabled)return!0}};Blockly.Block.prototype.isCollapsed=function(){return this.collapsed_};
 Blockly.Block.prototype.setCollapsed=function(a){this.collapsed_!=a&&(Blockly.Events.fire(new Blockly.Events.Change(this,"collapsed",null,this.collapsed_,a)),this.collapsed_=a)};
-Blockly.Block.prototype.toString=function(a){var b=[];if(this.collapsed_)b.push(this.getInput("_TEMP_COLLAPSED_INPUT").fieldRow[0].text_);else for(var c=0,d;d=this.inputList[c];c++){for(var e=0,f;f=d.fieldRow[e];e++)b.push(f.getText());d.connection&&((d=d.connection.targetBlock())?b.push(d.toString()):b.push("?"))}b=goog.string.trim(b.join(" "))||"???";a&&(b=goog.string.truncate(b,a));return b};Blockly.Block.prototype.appendValueInput=function(a){return this.appendInput_(Blockly.INPUT_VALUE,a)};
+Blockly.Block.prototype.toString=function(a,b){var c=[],d=b||"?";if(this.collapsed_)c.push(this.getInput("_TEMP_COLLAPSED_INPUT").fieldRow[0].text_);else for(var e=0,f;f=this.inputList[e];e++){for(var g=0,h;h=f.fieldRow[g];g++)c.push(h.getText());f.connection&&((f=f.connection.targetBlock())?c.push(f.toString(void 0,b)):c.push(d))}c=goog.string.trim(c.join(" "))||"???";a&&(c=goog.string.truncate(c,a));return c};
-Blockly.Block.prototype.appendStatementInput=function(a){return this.appendInput_(Blockly.NEXT_STATEMENT,a)};Blockly.Block.prototype.appendDummyInput=function(a){return this.appendInput_(Blockly.DUMMY_INPUT,a||"")};
+Blockly.Block.prototype.appendValueInput=function(a){return this.appendInput_(Blockly.INPUT_VALUE,a)};Blockly.Block.prototype.appendStatementInput=function(a){return this.appendInput_(Blockly.NEXT_STATEMENT,a)};Blockly.Block.prototype.appendDummyInput=function(a){return this.appendInput_(Blockly.DUMMY_INPUT,a||"")};
 Blockly.Block.prototype.jsonInit=function(a){goog.asserts.assert(void 0==a.output||void 0==a.previousStatement,"Must not have both an output and a previousStatement.");void 0!==a.colour&&this.setColour(a.colour);for(var b=0;void 0!==a["message"+b];)this.interpolate_(a["message"+b],a["args"+b]||[],a["lastDummyAlign"+b]),b++;void 0!==a.inputsInline&&this.setInputsInline(a.inputsInline);void 0!==a.output&&this.setOutput(!0,a.output);void 0!==a.previousStatement&&this.setPreviousStatement(!0,a.previousStatement);
 void 0!==a.nextStatement&&this.setNextStatement(!0,a.nextStatement);void 0!==a.tooltip&&this.setTooltip(a.tooltip);void 0!==a.helpUrl&&this.setHelpUrl(a.helpUrl)};
 Blockly.Block.prototype.interpolate_=function(a,b,c){var d=Blockly.utils.tokenizeInterpolation(a),e=[],f=0;a=[];for(var g=0;g<d.length;g++){var h=d[g];"number"==typeof h?(goog.asserts.assert(0<h&&h<=b.length,'Message index "%s" out of range.',h),goog.asserts.assert(!e[h],'Message index "%s" duplicated.',h),e[h]=!0,f++,a.push(b[h-1])):(h=h.trim())&&a.push(h)}goog.asserts.assert(f==b.length,"Message does not reference all %s arg(s).",b.length);!a.length||"string"!=typeof a[a.length-1]&&0!=a[a.length-
@@ -1114,7 +1127,7 @@ Blockly.ContextMenu.show=function(a,b,c){Blockly.WidgetDiv.show(Blockly.ContextM
 d.render(Blockly.WidgetDiv.DIV);var h=d.getElement();Blockly.addClass_(h,"blocklyContextMenu");Blockly.bindEvent_(h,"contextmenu",null,Blockly.noEvent);f=goog.style.getSize(h);var g=a.clientX+e.x,k=a.clientY+e.y;a.clientY+f.height>=b.height&&(k-=f.height);c?f.width>=a.clientX&&(g+=f.width):a.clientX+f.width>=b.width&&(g-=f.width);Blockly.WidgetDiv.position(g,k,b,e,c);d.setAllowAutoFocus(!0);setTimeout(function(){h.focus()},1);Blockly.ContextMenu.currentBlock=null}else Blockly.ContextMenu.hide()};
 Blockly.ContextMenu.hide=function(){Blockly.WidgetDiv.hideIfOwner(Blockly.ContextMenu);Blockly.ContextMenu.currentBlock=null};
 Blockly.ContextMenu.callbackFactory=function(a,b){return function(){Blockly.Events.disable();try{var c=Blockly.Xml.domToBlock(b,a.workspace),d=a.getRelativeToSurfaceXY();d.x=a.RTL?d.x-Blockly.SNAP_RADIUS:d.x+Blockly.SNAP_RADIUS;d.y+=2*Blockly.SNAP_RADIUS;c.moveBy(d.x,d.y)}finally{Blockly.Events.enable()}Blockly.Events.isEnabled()&&!c.isShadow()&&Blockly.Events.fire(new Blockly.Events.Create(c));c.select()}};Blockly.RenderedConnection=function(a,b){Blockly.RenderedConnection.superClass_.constructor.call(this,a,b);this.offsetInBlock_=new goog.math.Coordinate(0,0)};goog.inherits(Blockly.RenderedConnection,Blockly.Connection);Blockly.RenderedConnection.prototype.distanceFrom=function(a){var b=this.x_-a.x_;a=this.y_-a.y_;return Math.sqrt(b*b+a*a)};
-Blockly.RenderedConnection.prototype.bumpAwayFrom_=function(a){if(Blockly.dragMode_==Blockly.DRAG_NONE){var b=this.sourceBlock_.getRootBlock();if(!b.isInFlyout){var c=!1;if(!b.isMovable()){b=a.getSourceBlock().getRootBlock();if(!b.isMovable())return;a=this;c=!0}var d=Blockly.selected==b;d||b.select();var e=a.x_+Blockly.SNAP_RADIUS-this.x_;a=a.y_+Blockly.SNAP_RADIUS-this.y_;c&&(a=-a);b.RTL&&(e=-e);b.moveBy(e,a);d||b.unselect()}}};
+Blockly.RenderedConnection.prototype.bumpAwayFrom_=function(a){if(Blockly.dragMode_==Blockly.DRAG_NONE){var b=this.sourceBlock_.getRootBlock();if(!b.isInFlyout){var c=!1;if(!b.isMovable()){b=a.getSourceBlock().getRootBlock();if(!b.isMovable())return;a=this;c=!0}var d=Blockly.selected==b;d||b.addSelect();var e=a.x_+Blockly.SNAP_RADIUS-this.x_;a=a.y_+Blockly.SNAP_RADIUS-this.y_;c&&(a=-a);b.RTL&&(e=-e);b.moveBy(e,a);d||b.removeSelect()}}};
 Blockly.RenderedConnection.prototype.moveTo=function(a,b){this.inDB_&&this.db_.removeConnection_(this);this.x_=a;this.y_=b;this.hidden_||this.db_.addConnection(this)};Blockly.RenderedConnection.prototype.moveBy=function(a,b){this.moveTo(this.x_+a,this.y_+b)};Blockly.RenderedConnection.prototype.moveToOffset=function(a){this.moveTo(a.x+this.offsetInBlock_.x,a.y+this.offsetInBlock_.y)};
 Blockly.RenderedConnection.prototype.setOffsetInBlock=function(a,b){this.offsetInBlock_.x=a;this.offsetInBlock_.y=b};Blockly.RenderedConnection.prototype.tighten_=function(){var a=this.targetConnection.x_-this.x_,b=this.targetConnection.y_-this.y_;if(0!=a||0!=b){var c=this.targetBlock(),d=c.getSvgRoot();if(!d)throw"block is not rendered.";d=Blockly.getRelativeXY_(d);c.getSvgRoot().setAttribute("transform","translate("+(d.x-a)+","+(d.y-b)+")");c.moveConnections_(-a,-b)}};
 Blockly.RenderedConnection.prototype.closest=function(a,b,c){return this.dbOpposite_.searchForClosest(this,a,b,c)};
@@ -1132,20 +1145,21 @@ Blockly.BlockSvg.prototype.select=function(){if(this.isShadow()&&this.getParent(
 Blockly.BlockSvg.prototype.unselect=function(){if(Blockly.selected==this){var a=new Blockly.Events.Ui(null,"selected",this.id,null);a.workspaceId=this.workspace.id;Blockly.Events.fire(a);Blockly.selected=null;this.removeSelect()}};Blockly.BlockSvg.prototype.mutator=null;Blockly.BlockSvg.prototype.comment=null;Blockly.BlockSvg.prototype.warning=null;
 Blockly.BlockSvg.prototype.getIcons=function(){var a=[];this.mutator&&a.push(this.mutator);this.comment&&a.push(this.comment);this.warning&&a.push(this.warning);return a};Blockly.BlockSvg.onMouseUpWrapper_=null;Blockly.BlockSvg.onMouseMoveWrapper_=null;
 Blockly.BlockSvg.terminateDrag=function(){Blockly.BlockSvg.disconnectUiStop_();Blockly.BlockSvg.onMouseUpWrapper_&&(Blockly.unbindEvent_(Blockly.BlockSvg.onMouseUpWrapper_),Blockly.BlockSvg.onMouseUpWrapper_=null);Blockly.BlockSvg.onMouseMoveWrapper_&&(Blockly.unbindEvent_(Blockly.BlockSvg.onMouseMoveWrapper_),Blockly.BlockSvg.onMouseMoveWrapper_=null);var a=Blockly.selected;if(Blockly.dragMode_==Blockly.DRAG_FREE&&a){var b=a.getRelativeToSurfaceXY(),b=goog.math.Coordinate.difference(b,a.dragStartXY_),
-c=new Blockly.Events.Move(a);c.oldCoordinate=a.dragStartXY_;c.recordNew();Blockly.Events.fire(c);a.moveConnections_(b.x,b.y);delete a.draggedBubbles_;a.setDragging_(!1);a.render();var d=Blockly.Events.getGroup();setTimeout(function(){Blockly.Events.setGroup(d);a.snapToGrid();Blockly.Events.setGroup(!1)},Blockly.BUMP_DELAY/2);setTimeout(function(){Blockly.Events.setGroup(d);a.bumpNeighbours_();Blockly.Events.setGroup(!1)},Blockly.BUMP_DELAY);Blockly.resizeSvgContents(a.workspace)}Blockly.dragMode_=
+c=new Blockly.Events.Move(a);c.oldCoordinate=a.dragStartXY_;c.recordNew();Blockly.Events.fire(c);a.moveConnections_(b.x,b.y);delete a.draggedBubbles_;a.setDragging_(!1);a.render();var d=Blockly.Events.getGroup();setTimeout(function(){Blockly.Events.setGroup(d);a.snapToGrid();Blockly.Events.setGroup(!1)},Blockly.BUMP_DELAY/2);setTimeout(function(){Blockly.Events.setGroup(d);a.bumpNeighbours_();Blockly.Events.setGroup(!1)},Blockly.BUMP_DELAY);a.workspace.resizeContents()}Blockly.dragMode_=Blockly.DRAG_NONE;
-Blockly.DRAG_NONE;Blockly.Css.setCursor(Blockly.Css.Cursor.OPEN)};
+Blockly.Css.setCursor(Blockly.Css.Cursor.OPEN)};
 Blockly.BlockSvg.prototype.setParent=function(a){if(a!=this.parentBlock_){var b=this.getSvgRoot();if(this.parentBlock_&&b){var c=this.getRelativeToSurfaceXY();this.workspace.getCanvas().appendChild(b);b.setAttribute("transform","translate("+c.x+","+c.y+")")}Blockly.Field.startCache();Blockly.BlockSvg.superClass_.setParent.call(this,a);Blockly.Field.stopCache();a&&(c=this.getRelativeToSurfaceXY(),a.getSvgRoot().appendChild(b),a=this.getRelativeToSurfaceXY(),this.moveConnections_(a.x-c.x,a.y-c.y))}};
 Blockly.BlockSvg.prototype.getRelativeToSurfaceXY=function(){var a=0,b=0,c=this.getSvgRoot();if(c){do var d=Blockly.getRelativeXY_(c),a=a+d.x,b=b+d.y,c=c.parentNode;while(c&&c!=this.workspace.getCanvas())}return new goog.math.Coordinate(a,b)};
-Blockly.BlockSvg.prototype.moveBy=function(a,b){goog.asserts.assert(!this.parentBlock_,"Block has parent.");var c=new Blockly.Events.Move(this),d=this.getRelativeToSurfaceXY();this.getSvgRoot().setAttribute("transform","translate("+(d.x+a)+","+(d.y+b)+")");this.moveConnections_(a,b);c.recordNew();Blockly.resizeSvgContents(this.workspace);Blockly.Events.fire(c)};
+Blockly.BlockSvg.prototype.moveBy=function(a,b){goog.asserts.assert(!this.parentBlock_,"Block has parent.");var c=new Blockly.Events.Move(this),d=this.getRelativeToSurfaceXY();this.getSvgRoot().setAttribute("transform","translate("+(d.x+a)+","+(d.y+b)+")");this.moveConnections_(a,b);c.recordNew();this.workspace.resizeContents();Blockly.Events.fire(c)};
 Blockly.BlockSvg.prototype.snapToGrid=function(){if(this.workspace&&Blockly.dragMode_==Blockly.DRAG_NONE&&!this.getParent()&&!this.isInFlyout&&this.workspace.options.gridOptions&&this.workspace.options.gridOptions.snap){var a=this.workspace.options.gridOptions.spacing,b=a/2,c=this.getRelativeToSurfaceXY(),d=Math.round((c.x-b)/a)*a+b-c.x,a=Math.round((c.y-b)/a)*a+b-c.y,d=Math.round(d),a=Math.round(a);0==d&&0==a||this.moveBy(d,a)}};
 Blockly.BlockSvg.prototype.getHeightWidth=function(){var a=this.height,b=this.width,c=this.getNextBlock();c?(c=c.getHeightWidth(),a+=c.height-4,b=Math.max(b,c.width)):this.nextConnection||this.outputConnection||(a+=2);return{height:a,width:b}};
 Blockly.BlockSvg.prototype.getBoundingRectangle=function(){var a=this.getRelativeToSurfaceXY(this),b=this.outputConnection?Blockly.BlockSvg.TAB_WIDTH:0,c=this.getHeightWidth(),d;this.RTL?(d=new goog.math.Coordinate(a.x-(c.width-b),a.y),a=new goog.math.Coordinate(a.x+b,a.y+c.height)):(d=new goog.math.Coordinate(a.x-b,a.y),a=new goog.math.Coordinate(a.x+c.width-b,a.y+c.height));return{topLeft:d,bottomRight:a}};
 Blockly.BlockSvg.prototype.setCollapsed=function(a){if(this.collapsed_!=a){for(var b=[],c=0,d;d=this.inputList[c];c++)b.push.apply(b,d.setVisible(!a));if(a){d=this.getIcons();for(c=0;c<d.length;c++)d[c].setVisible(!1);c=this.toString(Blockly.COLLAPSE_CHARS);this.appendDummyInput("_TEMP_COLLAPSED_INPUT").appendField(c).init()}else this.removeInput("_TEMP_COLLAPSED_INPUT"),this.setWarningText(null);Blockly.BlockSvg.superClass_.setCollapsed.call(this,a);b.length||(b[0]=this);if(this.rendered)for(c=0;a=
 b[c];c++)a.render()}};Blockly.BlockSvg.prototype.tab=function(a,b){for(var c=[],d=0,e;e=this.inputList[d];d++){for(var f=0,g;g=e.fieldRow[f];f++)g instanceof Blockly.FieldTextInput&&c.push(g);e.connection&&(e=e.connection.targetBlock())&&c.push(e)}d=c.indexOf(a);-1==d&&(d=b?-1:c.length);(c=c[b?d+1:d-1])?c instanceof Blockly.Field?c.showEditor_():c.tab(null,b):(c=this.getParent())&&c.tab(this,b)};
-Blockly.BlockSvg.prototype.onMouseDown_=function(a){if(!this.workspace.options.readOnly&&!this.isInFlyout){this.workspace.markFocused();Blockly.terminateDrag_();this.select();Blockly.hideChaff();if(Blockly.isRightButton(a))this.showContextMenu_(a);else if(this.isMovable()){Blockly.Events.getGroup()||Blockly.Events.setGroup(!0);Blockly.Css.setCursor(Blockly.Css.Cursor.CLOSED);this.dragStartXY_=this.getRelativeToSurfaceXY();this.workspace.startDrag(a,this.dragStartXY_);Blockly.dragMode_=Blockly.DRAG_STICKY;
+Blockly.BlockSvg.prototype.onMouseDown_=function(a){if(!this.workspace.options.readOnly&&!this.isInFlyout){this.isInMutator&&this.workspace.resize();this.workspace.updateScreenCalculationsIfScrolled();this.workspace.markFocused();Blockly.terminateDrag_();this.select();Blockly.hideChaff();if(Blockly.isRightButton(a))this.showContextMenu_(a);else if(this.isMovable()){Blockly.Events.getGroup()||Blockly.Events.setGroup(!0);Blockly.Css.setCursor(Blockly.Css.Cursor.CLOSED);this.dragStartXY_=this.getRelativeToSurfaceXY();
-Blockly.BlockSvg.onMouseUpWrapper_=Blockly.bindEvent_(document,"mouseup",this,this.onMouseUp_);Blockly.BlockSvg.onMouseMoveWrapper_=Blockly.bindEvent_(document,"mousemove",this,this.onMouseMove_);this.draggedBubbles_=[];for(var b=this.getDescendants(),c=0,d;d=b[c];c++){d=d.getIcons();for(var e=0;e<d.length;e++){var f=d[e].getIconLocation();f.bubble=d[e];this.draggedBubbles_.push(f)}}}else return;a.stopPropagation();a.preventDefault()}};
+this.workspace.startDrag(a,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_);this.draggedBubbles_=[];for(var b=this.getDescendants(),c=0,d;d=b[c];c++){d=d.getIcons();for(var e=0;e<d.length;e++){var f=d[e].getIconLocation();f.bubble=d[e];this.draggedBubbles_.push(f)}}}else return;a.stopPropagation();
-Blockly.BlockSvg.prototype.onMouseUp_=function(a){Blockly.dragMode_==Blockly.DRAG_FREE||Blockly.WidgetDiv.isVisible()||Blockly.Events.fire(new Blockly.Events.Ui(this,"click",void 0,void 0));Blockly.terminateDrag_();Blockly.selected&&Blockly.highlightedConnection_?(Blockly.localConnection_.connect(Blockly.highlightedConnection_),this.rendered&&(Blockly.localConnection_.isSuperior()?Blockly.highlightedConnection_:Blockly.localConnection_).getSourceBlock().connectionUiEffect(),this.workspace.trashcan&&
+a.preventDefault()}};
-this.workspace.trashcan.close()):!this.getParent()&&Blockly.selected.isDeletable()&&this.workspace.isDeleteArea(a)&&((a=this.workspace.trashcan)&&goog.Timer.callOnce(a.close,100,a),Blockly.selected.dispose(!1,!0));Blockly.highlightedConnection_&&(Blockly.highlightedConnection_.unhighlight(),Blockly.highlightedConnection_=null);Blockly.Css.setCursor(Blockly.Css.Cursor.OPEN);Blockly.WidgetDiv.isVisible()||Blockly.Events.setGroup(!1)};
+Blockly.BlockSvg.prototype.onMouseUp_=function(a){Blockly.dragMode_==Blockly.DRAG_FREE||Blockly.WidgetDiv.isVisible()||Blockly.Events.fire(new Blockly.Events.Ui(this,"click",void 0,void 0));Blockly.terminateDrag_();Blockly.selected&&Blockly.highlightedConnection_?(Blockly.localConnection_.connect(Blockly.highlightedConnection_),this.rendered&&(Blockly.localConnection_.isSuperior()?Blockly.highlightedConnection_:Blockly.localConnection_).getSourceBlock().connectionUiEffect(),this.workspace.trashcan&&this.workspace.trashcan.close()):
+!this.getParent()&&Blockly.selected.isDeletable()&&this.workspace.isDeleteArea(a)&&((a=this.workspace.trashcan)&&goog.Timer.callOnce(a.close,100,a),Blockly.selected.dispose(!1,!0));Blockly.highlightedConnection_&&(Blockly.highlightedConnection_.unhighlight(),Blockly.highlightedConnection_=null);Blockly.Css.setCursor(Blockly.Css.Cursor.OPEN);Blockly.WidgetDiv.isVisible()||Blockly.Events.setGroup(!1)};
 Blockly.BlockSvg.prototype.showHelp_=function(){var a=goog.isFunction(this.helpUrl)?this.helpUrl():this.helpUrl;a&&window.open(a)};
 Blockly.BlockSvg.prototype.showContextMenu_=function(a){if(!this.workspace.options.readOnly&&this.contextMenu){var b=this,c=[];if(this.isDeletable()&&this.isMovable()&&!b.isInFlyout){var d={text:Blockly.Msg.DUPLICATE_BLOCK,enabled:!0,callback:function(){Blockly.duplicate_(b)}};this.getDescendants().length>this.workspace.remainingCapacity()&&(d.enabled=!1);c.push(d);this.isEditable()&&!this.collapsed_&&this.workspace.options.comments&&(d={enabled:!goog.userAgent.IE},this.comment?(d.text=Blockly.Msg.REMOVE_COMMENT,
 d.callback=function(){b.setCommentText(null)}):(d.text=Blockly.Msg.ADD_COMMENT,d.callback=function(){b.setCommentText("")}),c.push(d));if(!this.collapsed_)for(d=1;d<this.inputList.length;d++)if(this.inputList[d-1].type!=Blockly.NEXT_STATEMENT&&this.inputList[d].type!=Blockly.NEXT_STATEMENT){var d={enabled:!0},e=this.getInputsInline();d.text=e?Blockly.Msg.EXTERNAL_INPUTS:Blockly.Msg.INLINE_INPUTS;d.callback=function(){b.setInputsInline(!e)};c.push(d);break}this.workspace.options.collapse&&(this.collapsed_?
@@ -1156,10 +1170,10 @@ Blockly.BlockSvg.prototype.setDragging_=function(a){if(a){var b=this.getSvgRoot(
 Blockly.BlockSvg.prototype.onMouseMove_=function(a){if("mousemove"==a.type&&1>=a.clientX&&0==a.clientY&&0==a.button)a.stopPropagation();else{var b=this.getRelativeToSurfaceXY(),c=this.workspace.moveDrag(a);if(Blockly.dragMode_==Blockly.DRAG_STICKY&&goog.math.Coordinate.distance(b,c)*this.workspace.scale>Blockly.DRAG_RADIUS){Blockly.dragMode_=Blockly.DRAG_FREE;Blockly.longStop_();if(this.parentBlock_){this.unplug();var d=this.getSvgRoot();d.translate_="translate("+c.x+","+c.y+")";this.disconnectUiEffect()}this.setDragging_(!0)}if(Blockly.dragMode_==
 Blockly.DRAG_FREE){b=goog.math.Coordinate.difference(b,this.dragStartXY_);d=this.getSvgRoot();d.translate_="translate("+c.x+","+c.y+")";d.setAttribute("transform",d.translate_+d.skew_);for(c=0;c<this.draggedBubbles_.length;c++)d=this.draggedBubbles_[c],d.bubble.setIconLocation(goog.math.Coordinate.sum(d,b));d=this.getConnections_(!1);(c=this.lastConnectionInStack_())&&c!=this.nextConnection&&d.push(c);for(var e=null,f=null,g=Blockly.SNAP_RADIUS,c=0;c<d.length;c++){var h=d[c],k=h.closest(g,b);k.connection&&
 (e=k.connection,f=h,g=k.radius)}Blockly.highlightedConnection_&&Blockly.highlightedConnection_!=e&&(Blockly.highlightedConnection_.unhighlight(),Blockly.highlightedConnection_=null,Blockly.localConnection_=null);e&&e!=Blockly.highlightedConnection_&&(e.highlight(),Blockly.highlightedConnection_=e,Blockly.localConnection_=f);this.isDeletable()&&this.workspace.isDeleteArea(a)}a.stopPropagation();a.preventDefault()}};
-Blockly.BlockSvg.prototype.updateMovable=function(){this.isMovable()?Blockly.addClass_(this.svgGroup_,"blocklyDraggable"):Blockly.removeClass_(this.svgGroup_,"blocklyDraggable")};Blockly.BlockSvg.prototype.setMovable=function(a){Blockly.BlockSvg.superClass_.setMovable.call(this,a);this.updateMovable()};Blockly.BlockSvg.prototype.setEditable=function(a){Blockly.BlockSvg.superClass_.setEditable.call(this,a);if(this.rendered){a=this.getIcons();for(var b=0;b<a.length;b++)a[b].updateEditable()}};
+Blockly.BlockSvg.prototype.updateMovable=function(){this.isMovable()?Blockly.addClass_(this.svgGroup_,"blocklyDraggable"):Blockly.removeClass_(this.svgGroup_,"blocklyDraggable")};Blockly.BlockSvg.prototype.setMovable=function(a){Blockly.BlockSvg.superClass_.setMovable.call(this,a);this.updateMovable()};Blockly.BlockSvg.prototype.setEditable=function(a){Blockly.BlockSvg.superClass_.setEditable.call(this,a);a=this.getIcons();for(var b=0;b<a.length;b++)a[b].updateEditable()};
 Blockly.BlockSvg.prototype.setShadow=function(a){Blockly.BlockSvg.superClass_.setShadow.call(this,a);this.updateColour()};Blockly.BlockSvg.prototype.getSvgRoot=function(){return this.svgGroup_};
-Blockly.BlockSvg.prototype.dispose=function(a,b){Blockly.Tooltip.hide();Blockly.Field.startCache();var c=this.workspace;Blockly.selected==this&&(this.unselect(),Blockly.terminateDrag_());Blockly.ContextMenu.currentBlock==this&&Blockly.ContextMenu.hide();b&&this.rendered&&(this.unplug(a),this.disposeUiEffect());this.rendered=!1;Blockly.Events.disable();try{for(var d=this.getIcons(),e=0;e<d.length;e++)d[e].dispose()}finally{Blockly.Events.enable()}Blockly.BlockSvg.superClass_.dispose.call(this,a);goog.dom.removeNode(this.svgGroup_);
+Blockly.BlockSvg.prototype.dispose=function(a,b){if(this.workspace){Blockly.Tooltip.hide();Blockly.Field.startCache();var c=this.workspace;Blockly.selected==this&&(this.unselect(),Blockly.terminateDrag_());Blockly.ContextMenu.currentBlock==this&&Blockly.ContextMenu.hide();b&&this.rendered&&(this.unplug(a),this.disposeUiEffect());this.rendered=!1;Blockly.Events.disable();try{for(var d=this.getIcons(),e=0;e<d.length;e++)d[e].dispose()}finally{Blockly.Events.enable()}Blockly.BlockSvg.superClass_.dispose.call(this,
-Blockly.resizeSvgContents(c);this.svgPathDark_=this.svgPathLight_=this.svgPath_=this.svgGroup_=null;Blockly.Field.stopCache()};
+a);goog.dom.removeNode(this.svgGroup_);c.resizeContents();this.svgPathDark_=this.svgPathLight_=this.svgPath_=this.svgGroup_=null;Blockly.Field.stopCache()}};
 Blockly.BlockSvg.prototype.disposeUiEffect=function(){this.workspace.playAudio("delete");var a=Blockly.getSvgXY_(this.svgGroup_,this.workspace),b=this.svgGroup_.cloneNode(!0);b.translateX_=a.x;b.translateY_=a.y;b.setAttribute("transform","translate("+b.translateX_+","+b.translateY_+")");this.workspace.getParentSvg().appendChild(b);b.bBox_=b.getBBox();Blockly.BlockSvg.disposeUiStep_(b,this.RTL,new Date,this.workspace.scale)};
 Blockly.BlockSvg.disposeUiStep_=function(a,b,c,d){var e=(new Date-c)/150;1<e?goog.dom.removeNode(a):(a.setAttribute("transform","translate("+(a.translateX_+(b?-1:1)*a.bBox_.width*d/2*e)+","+(a.translateY_+a.bBox_.height*d*e)+") scale("+(1-e)*d+")"),setTimeout(function(){Blockly.BlockSvg.disposeUiStep_(a,b,c,d)},10))};
 Blockly.BlockSvg.prototype.connectionUiEffect=function(){this.workspace.playAudio("click");if(!(1>this.workspace.scale)){var a=Blockly.getSvgXY_(this.svgGroup_,this.workspace);this.outputConnection?(a.x+=(this.RTL?3:-3)*this.workspace.scale,a.y+=13*this.workspace.scale):this.previousConnection&&(a.x+=(this.RTL?-23:23)*this.workspace.scale,a.y+=3*this.workspace.scale);a=Blockly.createSvgElement("circle",{cx:a.x,cy:a.y,r:0,fill:"none",stroke:"#888","stroke-width":10},this.workspace.getParentSvg());
@@ -1186,7 +1200,7 @@ Blockly.BlockSvg.TOP_LEFT_CORNER_START_HIGHLIGHT_LTR="m 0.5,"+(Blockly.BlockSvg.
 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;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;
 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-.5)+","+(Blockly.BlockSvg.CORNER_RADIUS-Blockly.BlockSvg.DISTANCE_45_OUTSIDE);Blockly.BlockSvg.INNER_BOTTOM_LEFT_CORNER_HIGHLIGHT_RTL="a "+(Blockly.BlockSvg.CORNER_RADIUS+.5)+","+(Blockly.BlockSvg.CORNER_RADIUS+.5)+" 0 0,0 "+(Blockly.BlockSvg.CORNER_RADIUS+.5)+","+(Blockly.BlockSvg.CORNER_RADIUS+.5);
 Blockly.BlockSvg.INNER_BOTTOM_LEFT_CORNER_HIGHLIGHT_LTR="a "+(Blockly.BlockSvg.CORNER_RADIUS+.5)+","+(Blockly.BlockSvg.CORNER_RADIUS+.5)+" 0 0,0 "+(Blockly.BlockSvg.CORNER_RADIUS-Blockly.BlockSvg.DISTANCE_45_OUTSIDE)+","+(Blockly.BlockSvg.DISTANCE_45_OUTSIDE+.5);
-Blockly.BlockSvg.prototype.render=function(a){Blockly.Field.startCache();this.rendered=!0;var b=Blockly.BlockSvg.SEP_SPACE_X;this.RTL&&(b=-b);for(var c=this.getIcons(),d=0;d<c.length;d++)b=c[d].renderIcon(b);b+=this.RTL?Blockly.BlockSvg.SEP_SPACE_X:-Blockly.BlockSvg.SEP_SPACE_X;c=this.renderCompute_(b);this.renderDraw_(b,c);this.renderMoveConnections_();!1!==a&&((a=this.getParent())?a.render(!0):Blockly.resizeSvgContents(this.workspace));Blockly.Field.stopCache()};
+Blockly.BlockSvg.prototype.render=function(a){Blockly.Field.startCache();this.rendered=!0;var b=Blockly.BlockSvg.SEP_SPACE_X;this.RTL&&(b=-b);for(var c=this.getIcons(),d=0;d<c.length;d++)b=c[d].renderIcon(b);b+=this.RTL?Blockly.BlockSvg.SEP_SPACE_X:-Blockly.BlockSvg.SEP_SPACE_X;c=this.renderCompute_(b);this.renderDraw_(b,c);this.renderMoveConnections_();!1!==a&&((a=this.getParent())?a.render(!0):this.workspace.resizeContents());Blockly.Field.stopCache()};
 Blockly.BlockSvg.prototype.renderFields_=function(a,b,c){c+=Blockly.BlockSvg.INLINE_PADDING_Y;this.RTL&&(b=-b);for(var d=0,e;e=a[d];d++){var f=e.getSvgRoot();f&&(this.RTL?(b-=e.renderSep+e.renderWidth,f.setAttribute("transform","translate("+b+","+c+")"),e.renderWidth&&(b-=Blockly.BlockSvg.SEP_SPACE_X)):(f.setAttribute("transform","translate("+(b+e.renderSep)+","+c+")"),e.renderWidth&&(b+=e.renderSep+e.renderWidth+Blockly.BlockSvg.SEP_SPACE_X)))}return this.RTL?-b:b};
 Blockly.BlockSvg.prototype.renderCompute_=function(a){var b=this.inputList,c=[];c.rightEdge=a+2*Blockly.BlockSvg.SEP_SPACE_X;if(this.previousConnection||this.nextConnection)c.rightEdge=Math.max(c.rightEdge,Blockly.BlockSvg.NOTCH_WIDTH+Blockly.BlockSvg.SEP_SPACE_X);for(var d=0,e=0,f=!1,g=!1,h=!1,k=void 0,m=this.getInputsInline()&&!this.isCollapsed(),p=0,l;l=b[p];p++)if(l.isVisible()){var n;m&&k&&k!=Blockly.NEXT_STATEMENT&&l.type!=Blockly.NEXT_STATEMENT?n=c[c.length-1]:(k=l.type,n=[],n.type=m&&l.type!=
 Blockly.NEXT_STATEMENT?Blockly.BlockSvg.INLINE:l.type,n.height=0,c.push(n));n.push(l);l.renderHeight=Blockly.BlockSvg.MIN_BLOCK_Y;l.renderWidth=m&&l.type==Blockly.INPUT_VALUE?Blockly.BlockSvg.TAB_WIDTH+1.25*Blockly.BlockSvg.SEP_SPACE_X:0;if(l.connection&&l.connection.isConnected()){var q=l.connection.targetBlock().getHeightWidth();l.renderHeight=Math.max(l.renderHeight,q.height);l.renderWidth=Math.max(l.renderWidth,q.width)}m||p!=b.length-1?!m&&l.type==Blockly.INPUT_VALUE&&b[p+1]&&b[p+1].type==Blockly.NEXT_STATEMENT&&
@@ -1226,8 +1240,8 @@ Blockly.Events.Delete=function(a){if(a){if(a.getParent())throw"Connected blocks
 Blockly.Events.Delete.prototype.fromJson=function(a){Blockly.Events.Delete.superClass_.fromJson.call(this,a);this.ids=a.ids};Blockly.Events.Delete.prototype.run=function(a){var b=Blockly.Workspace.getById(this.workspaceId);if(a){a=0;for(var c;c=this.ids[a];a++){var d=b.getBlockById(c);d?d.dispose(!1,!1):c==this.blockId&&console.warn("Can't delete non-existant block: "+c)}}else a=goog.dom.createDom("xml"),a.appendChild(this.oldXml),Blockly.Xml.domToWorkspace(a,b)};
 Blockly.Events.Change=function(a,b,c,d,e){a&&(Blockly.Events.Change.superClass_.constructor.call(this,a),this.element=b,this.name=c,this.oldValue=d,this.newValue=e)};goog.inherits(Blockly.Events.Change,Blockly.Events.Abstract);Blockly.Events.Change.prototype.type=Blockly.Events.CHANGE;Blockly.Events.Change.prototype.toJson=function(){var a=Blockly.Events.Change.superClass_.toJson.call(this);a.element=this.element;this.name&&(a.name=this.name);a.newValue=this.newValue;return a};
 Blockly.Events.Change.prototype.fromJson=function(a){Blockly.Events.Change.superClass_.fromJson.call(this,a);this.element=a.element;this.name=a.name;this.newValue=a.newValue};Blockly.Events.Change.prototype.isNull=function(){return this.oldValue==this.newValue};
-Blockly.Events.Change.prototype.run=function(a){var b=Blockly.Workspace.getById(this.workspaceId).getBlockById(this.blockId);if(b)switch(b.mutator&&b.mutator.setVisible(!1),a=a?this.newValue:this.oldValue,this.element){case "field":if(b=b.getField(this.name)){var c=b.getValidator();c&&c.call(b,a);b.setValue(a)}else console.warn("Can't set non-existant field: "+this.name);break;case "comment":b.setCommentText(a||null);break;case "collapsed":b.setCollapsed(a);break;case "disabled":b.setDisabled(a);
+Blockly.Events.Change.prototype.run=function(a){var b=Blockly.Workspace.getById(this.workspaceId).getBlockById(this.blockId);if(b)switch(b.mutator&&b.mutator.setVisible(!1),a=a?this.newValue:this.oldValue,this.element){case "field":(b=b.getField(this.name))?(b.callValidator(a),b.setValue(a)):console.warn("Can't set non-existant field: "+this.name);break;case "comment":b.setCommentText(a||null);break;case "collapsed":b.setCollapsed(a);break;case "disabled":b.setDisabled(a);break;case "inline":b.setInputsInline(a);
-break;case "inline":b.setInputsInline(a);break;case "mutation":c="";b.mutationToDom&&(c=(c=b.mutationToDom())&&Blockly.Xml.domToText(c));if(b.domToMutation){a=a||"<mutation></mutation>";var d=Blockly.Xml.textToDom("<xml>"+a+"</xml>");b.domToMutation(d.firstChild)}Blockly.Events.fire(new Blockly.Events.Change(b,"mutation",null,c,a));break;default:console.warn("Unknown change type: "+this.element)}else console.warn("Can't change non-existant block: "+this.blockId)};
+break;case "mutation":var c="";b.mutationToDom&&(c=(c=b.mutationToDom())&&Blockly.Xml.domToText(c));if(b.domToMutation){a=a||"<mutation></mutation>";var d=Blockly.Xml.textToDom("<xml>"+a+"</xml>");b.domToMutation(d.firstChild)}Blockly.Events.fire(new Blockly.Events.Change(b,"mutation",null,c,a));break;default:console.warn("Unknown change type: "+this.element)}else console.warn("Can't change non-existant block: "+this.blockId)};
 Blockly.Events.Move=function(a){a&&(Blockly.Events.Move.superClass_.constructor.call(this,a),a=this.currentLocation_(),this.oldParentId=a.parentId,this.oldInputName=a.inputName,this.oldCoordinate=a.coordinate)};goog.inherits(Blockly.Events.Move,Blockly.Events.Abstract);Blockly.Events.Move.prototype.type=Blockly.Events.MOVE;
 Blockly.Events.Move.prototype.toJson=function(){var a=Blockly.Events.Move.superClass_.toJson.call(this);this.newParentId&&(a.newParentId=this.newParentId);this.newInputName&&(a.newInputName=this.newInputName);this.newCoordinate&&(a.newCoordinate=Math.round(this.newCoordinate.x)+","+Math.round(this.newCoordinate.y));return a};
 Blockly.Events.Move.prototype.fromJson=function(a){Blockly.Events.Move.superClass_.fromJson.call(this,a);this.newParentId=a.newParentId;this.newInputName=a.newInputName;a.newCoordinate&&(a=a.newCoordinate.split(","),this.newCoordinate=new goog.math.Coordinate(parseFloat(a[0]),parseFloat(a[1])))};Blockly.Events.Move.prototype.recordNew=function(){var a=this.currentLocation_();this.newParentId=a.parentId;this.newInputName=a.inputName;this.newCoordinate=a.coordinate};
@@ -1235,25 +1249,26 @@ Blockly.Events.Move.prototype.currentLocation_=function(){var a=Blockly.Workspac
 Blockly.Events.Move.prototype.run=function(a){var b=Blockly.Workspace.getById(this.workspaceId),c=b.getBlockById(this.blockId);if(c){var d=a?this.newParentId:this.oldParentId,e=a?this.newInputName:this.oldInputName;a=a?this.newCoordinate:this.oldCoordinate;var f=null;if(d&&(f=b.getBlockById(d),!f)){console.warn("Can't connect to non-existant block: "+d);return}c.getParent()&&c.unplug();if(a)e=c.getRelativeToSurfaceXY(),c.moveBy(a.x-e.x,a.y-e.y);else{var c=c.outputConnection||c.previousConnection,
 g;if(e){if(b=f.getInput(e))g=b.connection}else c.type==Blockly.PREVIOUS_STATEMENT&&(g=f.nextConnection);g?c.connect(g):console.warn("Can't connect to non-existant input: "+e)}}else console.warn("Can't move non-existant block: "+this.blockId)};Blockly.Events.Ui=function(a,b,c,d){Blockly.Events.Ui.superClass_.constructor.call(this,a);this.element=b;this.oldValue=c;this.newValue=d;this.recordUndo=!1};goog.inherits(Blockly.Events.Ui,Blockly.Events.Abstract);Blockly.Events.Ui.prototype.type=Blockly.Events.UI;
 Blockly.Events.Ui.prototype.toJson=function(){var a=Blockly.Events.Ui.superClass_.toJson.call(this);a.element=this.element;void 0!==this.newValue&&(a.newValue=this.newValue);return a};Blockly.Events.Ui.prototype.fromJson=function(a){Blockly.Events.Ui.superClass_.fromJson.call(this,a);this.element=a.element;this.newValue=a.newValue};
-Blockly.Events.disableOrphans=function(a){if(a.type==Blockly.Events.MOVE||a.type==Blockly.Events.CREATE){Blockly.Events.disable();if(a=Blockly.Workspace.getById(a.workspaceId).getBlockById(a.blockId))if(a.getParent()&&!a.getParent().disabled){do a.setDisabled(!1),a=a.getNextBlock();while(a)}else if((a.outputConnection||a.previousConnection)&&Blockly.dragMode_==Blockly.DRAG_NONE){do a.setDisabled(!0),a=a.getNextBlock();while(a)}Blockly.Events.enable()}};Blockly.Msg={};goog.getMsgOrig=goog.getMsg;goog.getMsg=function(a,b){var c=goog.getMsg.blocklyMsgMap[a];c&&(a=Blockly.Msg[c]);return goog.getMsgOrig(a,b)};goog.getMsg.blocklyMsgMap={Today:"TODAY"};Blockly.FieldTextInput=function(a,b){Blockly.FieldTextInput.superClass_.constructor.call(this,a,b)};goog.inherits(Blockly.FieldTextInput,Blockly.Field);Blockly.FieldTextInput.FONTSIZE=11;Blockly.FieldTextInput.prototype.CURSOR="text";Blockly.FieldTextInput.prototype.spellcheck_=!0;Blockly.FieldTextInput.prototype.dispose=function(){Blockly.WidgetDiv.hideIfOwner(this);Blockly.FieldTextInput.superClass_.dispose.call(this)};
+Blockly.Events.disableOrphans=function(a){if(a.type==Blockly.Events.MOVE||a.type==Blockly.Events.CREATE){Blockly.Events.disable();if(a=Blockly.Workspace.getById(a.workspaceId).getBlockById(a.blockId))if(a.getParent()&&!a.getParent().disabled){a=a.getDescendants();for(var b=0,c;c=a[b];b++)c.setDisabled(!1)}else if((a.outputConnection||a.previousConnection)&&Blockly.dragMode_==Blockly.DRAG_NONE){do a.setDisabled(!0),a=a.getNextBlock();while(a)}Blockly.Events.enable()}};Blockly.Msg={};goog.getMsgOrig=goog.getMsg;goog.getMsg=function(a,b){var c=goog.getMsg.blocklyMsgMap[a];c&&(a=Blockly.Msg[c]);return goog.getMsgOrig(a,b)};goog.getMsg.blocklyMsgMap={Today:"TODAY"};Blockly.FieldTextInput=function(a,b){Blockly.FieldTextInput.superClass_.constructor.call(this,a,b)};goog.inherits(Blockly.FieldTextInput,Blockly.Field);Blockly.FieldTextInput.FONTSIZE=11;Blockly.FieldTextInput.prototype.CURSOR="text";Blockly.FieldTextInput.prototype.spellcheck_=!0;Blockly.FieldTextInput.prototype.dispose=function(){Blockly.WidgetDiv.hideIfOwner(this);Blockly.FieldTextInput.superClass_.dispose.call(this)};
 Blockly.FieldTextInput.prototype.setValue=function(a){if(null!==a){if(this.sourceBlock_){var b=this.callValidator(a);null!==b&&(a=b)}Blockly.Field.prototype.setValue.call(this,a)}};Blockly.FieldTextInput.prototype.setSpellcheck=function(a){this.spellcheck_=a};
-Blockly.FieldTextInput.prototype.showEditor_=function(a){this.workspace_=this.sourceBlock_.workspace;a=a||!1;if(!a&&(goog.userAgent.MOBILE||goog.userAgent.ANDROID||goog.userAgent.IPAD))a=window.prompt(Blockly.Msg.CHANGE_VALUE_TITLE,this.text_),this.sourceBlock_&&(a=this.callValidator(a)),this.setValue(a);else{Blockly.WidgetDiv.show(this,this.sourceBlock_.RTL,this.widgetDispose_());var b=Blockly.WidgetDiv.DIV,c=goog.dom.createDom("input","blocklyHtmlInput");c.setAttribute("spellcheck",this.spellcheck_);
+Blockly.FieldTextInput.prototype.showEditor_=function(a){this.workspace_=this.sourceBlock_.workspace;a=a||!1;if(!a&&(goog.userAgent.MOBILE||goog.userAgent.ANDROID||goog.userAgent.IPAD))a=window.prompt(Blockly.Msg.CHANGE_VALUE_TITLE,this.text_),this.sourceBlock_&&(a=this.callValidator(a)),this.setValue(a);else{Blockly.WidgetDiv.show(this,this.sourceBlock_.RTL,this.widgetDispose_());var b=Blockly.WidgetDiv.DIV,c=goog.dom.createDom("INPUT","blocklyHtmlInput");c.setAttribute("spellcheck",this.spellcheck_);
 var d=Blockly.FieldTextInput.FONTSIZE*this.workspace_.scale+"pt";b.style.fontSize=d;c.style.fontSize=d;Blockly.FieldTextInput.htmlInput_=c;b.appendChild(c);c.value=c.defaultValue=this.text_;c.oldValue_=null;this.validate_();this.resizeEditor_();a||(c.focus(),c.select());c.onKeyDownWrapper_=Blockly.bindEvent_(c,"keydown",this,this.onHtmlInputKeyDown_);c.onKeyUpWrapper_=Blockly.bindEvent_(c,"keyup",this,this.onHtmlInputChange_);c.onKeyPressWrapper_=Blockly.bindEvent_(c,"keypress",this,this.onHtmlInputChange_);
 c.onWorkspaceChangeWrapper_=this.resizeEditor_.bind(this);this.workspace_.addChangeListener(c.onWorkspaceChangeWrapper_)}};Blockly.FieldTextInput.prototype.onHtmlInputKeyDown_=function(a){var b=Blockly.FieldTextInput.htmlInput_;13==a.keyCode?Blockly.WidgetDiv.hide():27==a.keyCode?(b.value=b.defaultValue,Blockly.WidgetDiv.hide()):9==a.keyCode&&(Blockly.WidgetDiv.hide(),this.sourceBlock_.tab(this,!a.shiftKey),a.preventDefault())};
 Blockly.FieldTextInput.prototype.onHtmlInputChange_=function(a){a=Blockly.FieldTextInput.htmlInput_;var b=a.value;b!==a.oldValue_?(a.oldValue_=b,this.setValue(b),this.validate_()):goog.userAgent.WEBKIT&&this.sourceBlock_.render();this.resizeEditor_();Blockly.svgResize(this.sourceBlock_.workspace)};
 Blockly.FieldTextInput.prototype.validate_=function(){var a=!0;goog.asserts.assertObject(Blockly.FieldTextInput.htmlInput_);var b=Blockly.FieldTextInput.htmlInput_;this.sourceBlock_&&(a=this.callValidator(b.value));null===a?Blockly.addClass_(b,"blocklyInvalidInput"):Blockly.removeClass_(b,"blocklyInvalidInput")};
 Blockly.FieldTextInput.prototype.resizeEditor_=function(){var a=Blockly.WidgetDiv.DIV,b=this.fieldGroup_.getBBox();a.style.width=b.width*this.workspace_.scale+"px";a.style.height=b.height*this.workspace_.scale+"px";b=this.getAbsoluteXY_();if(this.sourceBlock_.RTL){var c=this.getScaledBBox_();b.x+=c.width;b.x-=a.offsetWidth}b.y+=1;goog.userAgent.GECKO&&Blockly.WidgetDiv.DIV.style.top&&(--b.x,--b.y);goog.userAgent.WEBKIT&&(b.y-=3);a.style.left=b.x+"px";a.style.top=b.y+"px"};
-Blockly.FieldTextInput.prototype.widgetDispose_=function(){var a=this;return function(){var b=Blockly.FieldTextInput.htmlInput_,c=b.value;a.sourceBlock_&&(c=a.callValidator(c),c=null===c?b.defaultValue:c);a.setValue(c);a.sourceBlock_.rendered&&a.sourceBlock_.render();Blockly.unbindEvent_(b.onKeyDownWrapper_);Blockly.unbindEvent_(b.onKeyUpWrapper_);Blockly.unbindEvent_(b.onKeyPressWrapper_);a.workspace_.removeChangeListener(b.onWorkspaceChangeWrapper_);Blockly.FieldTextInput.htmlInput_=null;b=Blockly.WidgetDiv.DIV.style;
+Blockly.FieldTextInput.prototype.widgetDispose_=function(){var a=this;return function(){var b=Blockly.FieldTextInput.htmlInput_,c=b.value;if(a.sourceBlock_)if(c=a.callValidator(c),null===c)c=b.defaultValue;else if(a.onFinishEditing_)a.onFinishEditing_(c);a.setValue(c);a.sourceBlock_.rendered&&a.sourceBlock_.render();Blockly.unbindEvent_(b.onKeyDownWrapper_);Blockly.unbindEvent_(b.onKeyUpWrapper_);Blockly.unbindEvent_(b.onKeyPressWrapper_);a.workspace_.removeChangeListener(b.onWorkspaceChangeWrapper_);
-b.width="auto";b.height="auto";b.fontSize=""}};Blockly.FieldTextInput.numberValidator=function(a){console.warn("Blockly.FieldTextInput.numberValidator is deprecated. Use Blockly.FieldNumber instead.");if(null===a)return null;a=String(a);a=a.replace(/O/ig,"0");a=a.replace(/,/g,"");a=parseFloat(a||0);return isNaN(a)?null:String(a)};Blockly.FieldTextInput.nonnegativeIntegerValidator=function(a){(a=Blockly.FieldTextInput.numberValidator(a))&&(a=String(Math.max(0,Math.floor(a))));return a};Blockly.FieldAngle=function(a,b){this.symbol_=Blockly.createSvgElement("tspan",{},null);this.symbol_.appendChild(document.createTextNode("\u00b0"));Blockly.FieldAngle.superClass_.constructor.call(this,a,b)};goog.inherits(Blockly.FieldAngle,Blockly.FieldTextInput);Blockly.FieldAngle.ROUND=15;Blockly.FieldAngle.HALF=50;Blockly.FieldAngle.CLOCKWISE=!1;Blockly.FieldAngle.OFFSET=0;Blockly.FieldAngle.WRAP=360;Blockly.FieldAngle.RADIUS=Blockly.FieldAngle.HALF-1;
+Blockly.FieldTextInput.htmlInput_=null;b=Blockly.WidgetDiv.DIV.style;b.width="auto";b.height="auto";b.fontSize=""}};Blockly.FieldTextInput.numberValidator=function(a){console.warn("Blockly.FieldTextInput.numberValidator is deprecated. Use Blockly.FieldNumber instead.");if(null===a)return null;a=String(a);a=a.replace(/O/ig,"0");a=a.replace(/,/g,"");a=parseFloat(a||0);return isNaN(a)?null:String(a)};
+Blockly.FieldTextInput.nonnegativeIntegerValidator=function(a){(a=Blockly.FieldTextInput.numberValidator(a))&&(a=String(Math.max(0,Math.floor(a))));return a};Blockly.FieldAngle=function(a,b){this.symbol_=Blockly.createSvgElement("tspan",{},null);this.symbol_.appendChild(document.createTextNode("\u00b0"));Blockly.FieldAngle.superClass_.constructor.call(this,a,b)};goog.inherits(Blockly.FieldAngle,Blockly.FieldTextInput);Blockly.FieldAngle.ROUND=15;Blockly.FieldAngle.HALF=50;Blockly.FieldAngle.CLOCKWISE=!1;Blockly.FieldAngle.OFFSET=0;Blockly.FieldAngle.WRAP=360;Blockly.FieldAngle.RADIUS=Blockly.FieldAngle.HALF-1;
 Blockly.FieldAngle.prototype.dispose_=function(){var a=this;return function(){Blockly.FieldAngle.superClass_.dispose_.call(a)();a.gauge_=null;a.clickWrapper_&&Blockly.unbindEvent_(a.clickWrapper_);a.moveWrapper1_&&Blockly.unbindEvent_(a.moveWrapper1_);a.moveWrapper2_&&Blockly.unbindEvent_(a.moveWrapper2_)}};
 Blockly.FieldAngle.prototype.showEditor_=function(){Blockly.FieldAngle.superClass_.showEditor_.call(this,goog.userAgent.MOBILE||goog.userAgent.ANDROID||goog.userAgent.IPAD);var a=Blockly.WidgetDiv.DIV;if(a.firstChild){var a=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:2*Blockly.FieldAngle.HALF+"px",width:2*Blockly.FieldAngle.HALF+"px"},a),b=Blockly.createSvgElement("circle",
 {cx:Blockly.FieldAngle.HALF,cy:Blockly.FieldAngle.HALF,r:Blockly.FieldAngle.RADIUS,"class":"blocklyAngleCircle"},a);this.gauge_=Blockly.createSvgElement("path",{"class":"blocklyAngleGauge"},a);this.line_=Blockly.createSvgElement("line",{x1:Blockly.FieldAngle.HALF,y1:Blockly.FieldAngle.HALF,"class":"blocklyAngleLine"},a);for(var c=0;360>c;c+=15)Blockly.createSvgElement("line",{x1:Blockly.FieldAngle.HALF+Blockly.FieldAngle.RADIUS,y1:Blockly.FieldAngle.HALF,x2:Blockly.FieldAngle.HALF+Blockly.FieldAngle.RADIUS-
 (0==c%45?10:5),y2:Blockly.FieldAngle.HALF,"class":"blocklyAngleMarks",transform:"rotate("+c+","+Blockly.FieldAngle.HALF+","+Blockly.FieldAngle.HALF+")"},a);a.style.marginLeft=15-Blockly.FieldAngle.RADIUS+"px";this.clickWrapper_=Blockly.bindEvent_(a,"click",this,Blockly.WidgetDiv.hide);this.moveWrapper1_=Blockly.bindEvent_(b,"mousemove",this,this.onMouseMove);this.moveWrapper2_=Blockly.bindEvent_(this.gauge_,"mousemove",this,this.onMouseMove);this.updateGraph_()}};
-Blockly.FieldAngle.prototype.onMouseMove=function(a){var b=this.gauge_.ownerSVGElement.getBoundingClientRect(),c=a.clientX-b.left-Blockly.FieldAngle.HALF;a=a.clientY-b.top-Blockly.FieldAngle.HALF;b=Math.atan(-a/c);isNaN(b)||(b=goog.math.toDegrees(b),0>c?b+=180:0<a&&(b+=360),b=Blockly.FieldAngle.CLOCKWISE?Blockly.FieldAngle.OFFSET+360-b:b-Blockly.FieldAngle.OFFSET,Blockly.FieldAngle.ROUND&&(b=Math.round(b/Blockly.FieldAngle.ROUND)*Blockly.FieldAngle.ROUND),b=Blockly.FieldAngle.angleValidator(b),Blockly.FieldTextInput.htmlInput_.value=
+Blockly.FieldAngle.prototype.onMouseMove=function(a){var b=this.gauge_.ownerSVGElement.getBoundingClientRect(),c=a.clientX-b.left-Blockly.FieldAngle.HALF;a=a.clientY-b.top-Blockly.FieldAngle.HALF;b=Math.atan(-a/c);isNaN(b)||(b=goog.math.toDegrees(b),0>c?b+=180:0<a&&(b+=360),b=Blockly.FieldAngle.CLOCKWISE?Blockly.FieldAngle.OFFSET+360-b:b-Blockly.FieldAngle.OFFSET,Blockly.FieldAngle.ROUND&&(b=Math.round(b/Blockly.FieldAngle.ROUND)*Blockly.FieldAngle.ROUND),b=this.callValidator(b),Blockly.FieldTextInput.htmlInput_.value=
 b,this.setValue(b),this.validate_(),this.resizeEditor_())};Blockly.FieldAngle.prototype.setText=function(a){Blockly.FieldAngle.superClass_.setText.call(this,a);this.textElement_&&(this.updateGraph_(),this.sourceBlock_.RTL?this.textElement_.insertBefore(this.symbol_,this.textElement_.firstChild):this.textElement_.appendChild(this.symbol_),this.size_.width=0)};
 Blockly.FieldAngle.prototype.updateGraph_=function(){if(this.gauge_){var a=Number(this.getText())+Blockly.FieldAngle.OFFSET,b=goog.math.toRadians(a),a=["M ",Blockly.FieldAngle.HALF,",",Blockly.FieldAngle.HALF],c=Blockly.FieldAngle.HALF,d=Blockly.FieldAngle.HALF;if(!isNaN(b)){var e=goog.math.toRadians(Blockly.FieldAngle.OFFSET),f=Math.cos(e)*Blockly.FieldAngle.RADIUS,g=Math.sin(e)*-Blockly.FieldAngle.RADIUS;Blockly.FieldAngle.CLOCKWISE&&(b=2*e-b);c+=Math.cos(b)*Blockly.FieldAngle.RADIUS;d-=Math.sin(b)*
 Blockly.FieldAngle.RADIUS;b=Math.abs(Math.floor((b-e)/Math.PI)%2);Blockly.FieldAngle.CLOCKWISE&&(b=1-b);a.push(" l ",f,",",g," A ",Blockly.FieldAngle.RADIUS,",",Blockly.FieldAngle.RADIUS," 0 ",b," ",Number(Blockly.FieldAngle.CLOCKWISE)," ",c,",",d," z")}this.gauge_.setAttribute("d",a.join(""));this.line_.setAttribute("x2",c);this.line_.setAttribute("y2",d)}};
-Blockly.FieldAngle.classValidator=function(a){if(null===a)return null;a=parseFloat(a||0);if(isNaN(a))return null;a%=360;0>a&&(a+=360);a>Blockly.FieldAngle.WRAP&&(a-=360);return String(a)};Blockly.FieldCheckbox=function(a,b){Blockly.FieldCheckbox.superClass_.constructor.call(this,"",b);this.setValue(a)};goog.inherits(Blockly.FieldCheckbox,Blockly.Field);Blockly.FieldCheckbox.CHECK_CHAR="\u2713";Blockly.FieldCheckbox.prototype.CURSOR="default";
+Blockly.FieldAngle.prototype.classValidator=function(a){if(null===a)return null;a=parseFloat(a||0);if(isNaN(a))return null;a%=360;0>a&&(a+=360);a>Blockly.FieldAngle.WRAP&&(a-=360);return String(a)};Blockly.FieldCheckbox=function(a,b){Blockly.FieldCheckbox.superClass_.constructor.call(this,"",b);this.setValue(a)};goog.inherits(Blockly.FieldCheckbox,Blockly.Field);Blockly.FieldCheckbox.CHECK_CHAR="\u2713";Blockly.FieldCheckbox.prototype.CURSOR="default";
 Blockly.FieldCheckbox.prototype.init=function(){if(!this.fieldGroup_){Blockly.FieldCheckbox.superClass_.init.call(this);this.checkElement_=Blockly.createSvgElement("text",{"class":"blocklyText blocklyCheckbox",x:-3,y:14},this.fieldGroup_);var a=document.createTextNode(Blockly.FieldCheckbox.CHECK_CHAR);this.checkElement_.appendChild(a);this.checkElement_.style.display=this.state_?"block":"none"}};Blockly.FieldCheckbox.prototype.getValue=function(){return String(this.state_).toUpperCase()};
 Blockly.FieldCheckbox.prototype.setValue=function(a){a="TRUE"==a;this.state_!==a&&(this.sourceBlock_&&Blockly.Events.isEnabled()&&Blockly.Events.fire(new Blockly.Events.Change(this.sourceBlock_,"field",this.name,this.state_,a)),this.state_=a,this.checkElement_&&(this.checkElement_.style.display=a?"block":"none"))};Blockly.FieldCheckbox.prototype.showEditor_=function(){var a=!this.state_;this.sourceBlock_&&(a=this.callValidator(a));null!==a&&this.setValue(String(a).toUpperCase())};Blockly.FieldColour=function(a,b){Blockly.FieldColour.superClass_.constructor.call(this,a,b);this.setText(Blockly.Field.NBSP+Blockly.Field.NBSP+Blockly.Field.NBSP)};goog.inherits(Blockly.FieldColour,Blockly.Field);Blockly.FieldColour.prototype.colours_=null;Blockly.FieldColour.prototype.columns_=0;Blockly.FieldColour.prototype.init=function(){Blockly.FieldColour.superClass_.init.call(this);this.borderRect_.style.fillOpacity=1;this.setValue(this.getValue())};Blockly.FieldColour.prototype.CURSOR="default";
 Blockly.FieldColour.prototype.dispose=function(){Blockly.WidgetDiv.hideIfOwner(this);Blockly.FieldColour.superClass_.dispose.call(this)};Blockly.FieldColour.prototype.getValue=function(){return this.colour_};Blockly.FieldColour.prototype.setValue=function(a){this.sourceBlock_&&Blockly.Events.isEnabled()&&this.colour_!=a&&Blockly.Events.fire(new Blockly.Events.Change(this.sourceBlock_,"field",this.name,this.colour_,a));this.colour_=a;this.borderRect_&&(this.borderRect_.style.fill=a)};
@@ -1272,16 +1287,18 @@ Blockly.FieldDropdown.prototype.setText=function(a){this.sourceBlock_&&this.arro
 Blockly.FieldDropdown.prototype.dispose=function(){Blockly.WidgetDiv.hideIfOwner(this);Blockly.FieldDropdown.superClass_.dispose.call(this)};Blockly.FieldImage=function(a,b,c,d){this.sourceBlock_=null;this.height_=Number(c);this.width_=Number(b);this.size_=new goog.math.Size(this.width_,this.height_+2*Blockly.BlockSvg.INLINE_PADDING_Y);this.text_=d||"";this.setValue(a)};goog.inherits(Blockly.FieldImage,Blockly.Field);Blockly.FieldImage.prototype.rectElement_=null;Blockly.FieldImage.prototype.EDITABLE=!1;
 Blockly.FieldImage.prototype.init=function(){if(!this.fieldGroup_){this.fieldGroup_=Blockly.createSvgElement("g",{},null);this.visible_||(this.fieldGroup_.style.display="none");this.imageElement_=Blockly.createSvgElement("image",{height:this.height_+"px",width:this.width_+"px"},this.fieldGroup_);this.setValue(this.src_);goog.userAgent.GECKO&&(this.rectElement_=Blockly.createSvgElement("rect",{height:this.height_+"px",width:this.width_+"px","fill-opacity":0},this.fieldGroup_));this.sourceBlock_.getSvgRoot().appendChild(this.fieldGroup_);
 var a=this.rectElement_||this.imageElement_;a.tooltip=this.sourceBlock_;Blockly.Tooltip.bindMouseEvents(a)}};Blockly.FieldImage.prototype.dispose=function(){goog.dom.removeNode(this.fieldGroup_);this.rectElement_=this.imageElement_=this.fieldGroup_=null};Blockly.FieldImage.prototype.setTooltip=function(a){(this.rectElement_||this.imageElement_).tooltip=a};Blockly.FieldImage.prototype.getValue=function(){return this.src_};
-Blockly.FieldImage.prototype.setValue=function(a){null!==a&&(this.src_=a,this.imageElement_&&this.imageElement_.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href",goog.isString(a)?a:""))};Blockly.FieldImage.prototype.setText=function(a){null!==a&&(this.text_=a)};Blockly.FieldImage.prototype.render_=function(){};Blockly.FieldNumber=function(a,b,c,d,e){a=String(a);Blockly.FieldNumber.superClass_.constructor.call(this,a,e);this.setConstraints(b,c,d)};goog.inherits(Blockly.FieldNumber,Blockly.FieldTextInput);Blockly.FieldNumber.prototype.setConstraints=function(a,b,c){c=parseFloat(c);this.precision_=isNaN(c)?0:c;a=parseFloat(a);this.min_=isNaN(a)?-Infinity:a;b=parseFloat(b);this.max_=isNaN(b)?Infinity:b;this.setValue(this.callValidator(this.getValue))};
+Blockly.FieldImage.prototype.setValue=function(a){null!==a&&(this.src_=a,this.imageElement_&&this.imageElement_.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href",goog.isString(a)?a:""))};Blockly.FieldImage.prototype.setText=function(a){null!==a&&(this.text_=a)};Blockly.FieldImage.prototype.render_=function(){};Blockly.FieldNumber=function(a,b,c,d,e){a=String(a);Blockly.FieldNumber.superClass_.constructor.call(this,a,e);this.setConstraints(b,c,d)};goog.inherits(Blockly.FieldNumber,Blockly.FieldTextInput);Blockly.FieldNumber.prototype.setConstraints=function(a,b,c){c=parseFloat(c);this.precision_=isNaN(c)?0:c;a=parseFloat(a);this.min_=isNaN(a)?-Infinity:a;b=parseFloat(b);this.max_=isNaN(b)?Infinity:b;this.setValue(this.callValidator(this.getValue()))};
-Blockly.FieldNumber.classValidator=function(a){if(null===a)return null;a=String(a);a=a.replace(/O/ig,"0");a=a.replace(/,/g,"");a=parseFloat(a||0);if(isNaN(a))return null;this.precision_&&Number.isFinite(a)&&(a=Math.round(a/this.precision_)*this.precision_);a=goog.math.clamp(a,this.min_,this.max_);return String(a)};Blockly.Variables={};Blockly.Variables.NAME_TYPE="VARIABLE";Blockly.Variables.allVariables=function(a){var b;if(a.getDescendants)b=a.getDescendants();else if(a.getAllBlocks)b=a.getAllBlocks();else throw"Not Block or Workspace: "+a;a=Object.create(null);for(var c=0;c<b.length;c++)for(var d=b[c].getVars(),e=0;e<d.length;e++){var f=d[e];f&&(a[f.toLowerCase()]=f)}b=[];for(var g in a)b.push(a[g]);return b};
+Blockly.FieldNumber.prototype.classValidator=function(a){if(null===a)return null;a=String(a);a=a.replace(/O/ig,"0");a=a.replace(/,/g,"");a=parseFloat(a||0);if(isNaN(a))return null;this.precision_&&Number.isFinite(a)&&(a=Math.round(a/this.precision_)*this.precision_);a=goog.math.clamp(a,this.min_,this.max_);return String(a)};Blockly.Variables={};Blockly.Variables.NAME_TYPE="VARIABLE";Blockly.Variables.allUsedVariables=function(a){var b;if(a instanceof Blockly.Block)b=a.getDescendants();else if(a.getAllBlocks)b=a.getAllBlocks();else throw"Not Block or Workspace: "+a;a=Object.create(null);for(var c=0;c<b.length;c++){var d=b[c].getVars();if(d)for(var e=0;e<d.length;e++){var f=d[e];f&&(a[f.toLowerCase()]=f)}}b=[];for(var g in a)b.push(a[g]);return b};
-Blockly.Variables.renameVariable=function(a,b,c){Blockly.Events.setGroup(!0);c=c.getAllBlocks();for(var d=0;d<c.length;d++)c[d].renameVar(a,b);Blockly.Events.setGroup(!1)};
+Blockly.Variables.allVariables=function(a){a instanceof Blockly.Block&&console.warn("Deprecated call to Blockly.Variables.allVariables with a block instead of a workspace.  You may want Blockly.Variables.allUsedVariables");return a.variableList};
-Blockly.Variables.flyoutCategory=function(a){a=Blockly.Variables.allVariables(a);a.sort(goog.string.caseInsensitiveCompare);goog.array.remove(a,Blockly.Msg.VARIABLES_DEFAULT_NAME);a.unshift(Blockly.Msg.VARIABLES_DEFAULT_NAME);for(var b=[],c=0;c<a.length;c++){if(Blockly.Blocks.variables_set){var d=goog.dom.createDom("block");d.setAttribute("type","variables_set");Blockly.Blocks.variables_get&&d.setAttribute("gap",8);var e=goog.dom.createDom("field",null,a[c]);e.setAttribute("name","VAR");d.appendChild(e);
+Blockly.Variables.flyoutCategory=function(a){a=a.variableList;a.sort(goog.string.caseInsensitiveCompare);var b=[],c=goog.dom.createDom("button");c.setAttribute("text",Blockly.Msg.NEW_VARIABLE);b.push(c);if(0<a.length){if(Blockly.Blocks.variables_set){c=goog.dom.createDom("block");c.setAttribute("type","variables_set");Blockly.Blocks.math_change?c.setAttribute("gap",8):c.setAttribute("gap",24);var d=goog.dom.createDom("field",null,a[0]);d.setAttribute("name","VAR");c.appendChild(d);b.push(c)}if(Blockly.Blocks.math_change){c=
-b.push(d)}Blockly.Blocks.variables_get&&(d=goog.dom.createDom("block"),d.setAttribute("type","variables_get"),Blockly.Blocks.variables_set&&d.setAttribute("gap",24),e=goog.dom.createDom("field",null,a[c]),e.setAttribute("name","VAR"),d.appendChild(e),b.push(d))}return b};
+goog.dom.createDom("block");c.setAttribute("type","math_change");Blockly.Blocks.variables_get&&c.setAttribute("gap",20);var e=goog.dom.createDom("value");e.setAttribute("name","DELTA");c.appendChild(e);d=goog.dom.createDom("field",null,a[0]);d.setAttribute("name","VAR");c.appendChild(d);d=goog.dom.createDom("shadow");d.setAttribute("type","math_number");e.appendChild(d);e=goog.dom.createDom("field",null,"1");e.setAttribute("name","NUM");d.appendChild(e);b.push(c)}for(e=0;e<a.length;e++)Blockly.Blocks.variables_get&&
-Blockly.Variables.generateUniqueName=function(a){a=Blockly.Variables.allVariables(a);var b="";if(a.length)for(var c=1,d=0,e="ijkmnopqrstuvwxyzabcdefgh".charAt(d);!b;){for(var f=!1,g=0;g<a.length;g++)if(a[g].toLowerCase()==e){f=!0;break}f?(d++,25==d&&(d=0,c++),e="ijkmnopqrstuvwxyzabcdefgh".charAt(d),1<c&&(e+=c)):b=e}else b="i";return b};Blockly.FieldVariable=function(a,b){Blockly.FieldVariable.superClass_.constructor.call(this,Blockly.FieldVariable.dropdownCreate,b);this.setValue(a||"")};goog.inherits(Blockly.FieldVariable,Blockly.FieldDropdown);Blockly.FieldVariable.prototype.init=function(){this.fieldGroup_||(Blockly.FieldVariable.superClass_.init.call(this),this.getValue()||this.setValue(Blockly.Variables.generateUniqueName(this.sourceBlock_.isInFlyout?this.sourceBlock_.workspace.targetWorkspace:this.sourceBlock_.workspace)))};
+(c=goog.dom.createDom("block"),c.setAttribute("type","variables_get"),Blockly.Blocks.variables_set&&c.setAttribute("gap",8),d=goog.dom.createDom("field",null,a[e]),d.setAttribute("name","VAR"),c.appendChild(d),b.push(c))}return b};
-Blockly.FieldVariable.prototype.getValue=function(){return this.getText()};Blockly.FieldVariable.prototype.setValue=function(a){this.sourceBlock_&&Blockly.Events.isEnabled()&&Blockly.Events.fire(new Blockly.Events.Change(this.sourceBlock_,"field",this.name,this.value_,a));this.value_=a;this.setText(a)};
+Blockly.Variables.generateUniqueName=function(a){a=a.variableList;var b="";if(a.length)for(var c=1,d=0,e="ijkmnopqrstuvwxyzabcdefgh".charAt(d);!b;){for(var f=!1,g=0;g<a.length;g++)if(a[g].toLowerCase()==e){f=!0;break}f?(d++,25==d&&(d=0,c++),e="ijkmnopqrstuvwxyzabcdefgh".charAt(d),1<c&&(e+=c)):b=e}else b="i";return b};
-Blockly.FieldVariable.dropdownCreate=function(){var a=this.sourceBlock_&&this.sourceBlock_.workspace?Blockly.Variables.allVariables(this.sourceBlock_.workspace):[],b=this.getText();b&&-1==a.indexOf(b)&&a.push(b);a.sort(goog.string.caseInsensitiveCompare);a.push(Blockly.Msg.RENAME_VARIABLE);a.push(Blockly.Msg.NEW_VARIABLE);for(var b=[],c=0;c<a.length;c++)b[c]=[a[c],a[c]];return b};
+Blockly.Variables.createVariable=function(a){for(;;){var b=Blockly.Variables.promptName(Blockly.Msg.NEW_VARIABLE_TITLE,"");if(b)if(-1!=a.variableIndexOf(b))window.alert(Blockly.Msg.VARIABLE_ALREADY_EXISTS.replace("%1",b.toLowerCase()));else{a.createVariable(b);break}else{b=null;break}}return b};Blockly.Variables.promptName=function(a,b){var c=window.prompt(a,b);c&&(c=c.replace(/[\s\xa0]+/g," ").replace(/^ | $/g,""),c==Blockly.Msg.RENAME_VARIABLE||c==Blockly.Msg.NEW_VARIABLE)&&(c=null);return c};Blockly.FieldVariable=function(a,b){Blockly.FieldVariable.superClass_.constructor.call(this,Blockly.FieldVariable.dropdownCreate,b);this.setValue(a||"")};goog.inherits(Blockly.FieldVariable,Blockly.FieldDropdown);
-Blockly.FieldVariable.classValidator=function(a){function b(a,b){Blockly.hideChaff();var c=window.prompt(a,b);c&&(c=c.replace(/[\s\xa0]+/g," ").replace(/^ | $/g,""),c==Blockly.Msg.RENAME_VARIABLE||c==Blockly.Msg.NEW_VARIABLE)&&(c=null);return c}var c=this.sourceBlock_.workspace;if(a==Blockly.Msg.RENAME_VARIABLE){var d=this.getText();(a=b(Blockly.Msg.RENAME_VARIABLE_TITLE.replace("%1",d),d))&&Blockly.Variables.renameVariable(d,a,c);return null}if(a==Blockly.Msg.NEW_VARIABLE)return(a=b(Blockly.Msg.NEW_VARIABLE_TITLE,
+Blockly.FieldVariable.prototype.init=function(){this.fieldGroup_||(Blockly.FieldVariable.superClass_.init.call(this),this.getValue()||this.setValue(Blockly.Variables.generateUniqueName(this.sourceBlock_.isInFlyout?this.sourceBlock_.workspace.targetWorkspace:this.sourceBlock_.workspace)),this.sourceBlock_.isInFlyout||this.sourceBlock_.workspace.createVariable(this.getValue()))};Blockly.FieldVariable.prototype.getValue=function(){return this.getText()};
-""))?(Blockly.Variables.renameVariable(a,a,c),a):null};Blockly.Generator=function(a){this.name_=a;this.FUNCTION_NAME_PLACEHOLDER_REGEXP_=new RegExp(this.FUNCTION_NAME_PLACEHOLDER_,"g")};Blockly.Generator.NAME_TYPE="generated_function";Blockly.Generator.prototype.INFINITE_LOOP_TRAP=null;Blockly.Generator.prototype.STATEMENT_PREFIX=null;Blockly.Generator.prototype.INDENT="  ";Blockly.Generator.prototype.COMMENT_WRAP=60;Blockly.Generator.prototype.ORDER_OVERRIDES=[];
+Blockly.FieldVariable.prototype.setValue=function(a){this.sourceBlock_&&Blockly.Events.isEnabled()&&Blockly.Events.fire(new Blockly.Events.Change(this.sourceBlock_,"field",this.name,this.value_,a));this.value_=a;this.setText(a)};
+Blockly.FieldVariable.dropdownCreate=function(){var a=this.sourceBlock_&&this.sourceBlock_.workspace?this.sourceBlock_.workspace.variableList.slice(0):[],b=this.getText();b&&-1==a.indexOf(b)&&a.push(b);a.sort(goog.string.caseInsensitiveCompare);a.push(Blockly.Msg.RENAME_VARIABLE);a.push(Blockly.Msg.DELETE_VARIABLE.replace("%1",b));for(var b=[],c=0;c<a.length;c++)b[c]=[a[c],a[c]];return b};
+Blockly.FieldVariable.prototype.classValidator=function(a){var b=this.sourceBlock_.workspace;if(a==Blockly.Msg.RENAME_VARIABLE){var c=this.getText();Blockly.hideChaff();(a=Blockly.Variables.promptName(Blockly.Msg.RENAME_VARIABLE_TITLE.replace("%1",c),c))&&b.renameVariable(c,a);return null}if(a==Blockly.Msg.DELETE_VARIABLE.replace("%1",this.getText()))return b.deleteVariable(this.getText()),null};Blockly.Generator=function(a){this.name_=a;this.FUNCTION_NAME_PLACEHOLDER_REGEXP_=new RegExp(this.FUNCTION_NAME_PLACEHOLDER_,"g")};Blockly.Generator.NAME_TYPE="generated_function";Blockly.Generator.prototype.INFINITE_LOOP_TRAP=null;Blockly.Generator.prototype.STATEMENT_PREFIX=null;Blockly.Generator.prototype.INDENT="  ";Blockly.Generator.prototype.COMMENT_WRAP=60;Blockly.Generator.prototype.ORDER_OVERRIDES=[];
 Blockly.Generator.prototype.workspaceToCode=function(a){a||(console.warn("No workspace specified in workspaceToCode call.  Guessing."),a=Blockly.getMainWorkspace());var b=[];this.init(a);a=a.getTopBlocks(!0);for(var c=0,d;d=a[c];c++){var e=this.blockToCode(d);goog.isArray(e)&&(e=e[0]);e&&(d.outputConnection&&this.scrubNakedValue&&(e=this.scrubNakedValue(e)),b.push(e))}b=b.join("\n");b=this.finish(b);b=b.replace(/^\s+\n/,"");b=b.replace(/\n\s+$/,"\n");return b=b.replace(/[ \t]+\n/g,"\n")};
 Blockly.Generator.prototype.prefixLines=function(a,b){return b+a.replace(/(?!\n$)\n/g,"\n"+b)};Blockly.Generator.prototype.allNestedComments=function(a){var b=[];a=a.getDescendants();for(var c=0;c<a.length;c++){var d=a[c].getCommentText();d&&b.push(d)}b.length&&b.push("");return b.join("\n")};
 Blockly.Generator.prototype.blockToCode=function(a){if(!a)return"";if(a.disabled)return this.blockToCode(a.getNextBlock());var b=this[a.type];goog.asserts.assertFunction(b,'Language "%s" does not know how to generate code for block type "%s".',this.name_,a.type);b=b.call(a,a);if(goog.isArray(b))return goog.asserts.assert(a.outputConnection,'Expecting string from statement block "%s".',a.type),[this.scrub_(a,b[0]),b[1]];if(goog.isString(b))return this.STATEMENT_PREFIX&&(b=this.STATEMENT_PREFIX.replace(/%1/g,
@@ -1298,9 +1315,12 @@ Blockly.Procedures.flyoutCategory=function(a){function b(a,b){for(var d=0;d<a.le
 d.setAttribute("gap",16);c.push(d)}Blockly.Blocks.procedures_defreturn&&(d=goog.dom.createDom("block"),d.setAttribute("type","procedures_defreturn"),d.setAttribute("gap",16),c.push(d));Blockly.Blocks.procedures_ifreturn&&(d=goog.dom.createDom("block"),d.setAttribute("type","procedures_ifreturn"),d.setAttribute("gap",16),c.push(d));c.length&&c[c.length-1].setAttribute("gap",24);a=Blockly.Procedures.allProcedures(a);b(a[0],"procedures_callnoreturn");b(a[1],"procedures_callreturn");return c};
 Blockly.Procedures.getCallers=function(a,b){for(var c=[],d=b.getAllBlocks(),e=0;e<d.length;e++)if(d[e].getProcedureCall){var f=d[e].getProcedureCall();f&&Blockly.Names.equals(f,a)&&c.push(d[e])}return c};
 Blockly.Procedures.mutateCallers=function(a){var b=Blockly.Events.recordUndo,c=a.getProcedureDef()[0],d=a.mutationToDom(!0);a=Blockly.Procedures.getCallers(c,a.workspace);for(var c=0,e;e=a[c];c++){var f=e.mutationToDom(),f=f&&Blockly.Xml.domToText(f);e.domToMutation(d);var g=e.mutationToDom(),g=g&&Blockly.Xml.domToText(g);f!=g&&(Blockly.Events.recordUndo=!1,Blockly.Events.fire(new Blockly.Events.Change(e,"mutation",null,f,g)),Blockly.Events.recordUndo=b)}};
-Blockly.Procedures.getDefinition=function(a,b){for(var c=b.getTopBlocks(!1),d=0;d<c.length;d++)if(c[d].getProcedureDef){var e=c[d].getProcedureDef();if(e&&Blockly.Names.equals(e[0],a))return c[d]}return null};Blockly.Flyout=function(a){a.getMetrics=this.getMetrics_.bind(this);a.setMetrics=this.setMetrics_.bind(this);this.workspace_=new Blockly.WorkspaceSvg(a);this.workspace_.isFlyout=!0;this.RTL=!!a.RTL;this.horizontalLayout_=a.horizontalLayout;this.toolboxPosition_=a.toolboxPosition;this.eventWrappers_=[];this.buttons_=[];this.listeners_=[];this.permanentlyDisabled_=[]};Blockly.Flyout.prototype.autoClose=!0;Blockly.Flyout.prototype.CORNER_RADIUS=8;Blockly.Flyout.prototype.DRAG_RADIUS=10;
+Blockly.Procedures.getDefinition=function(a,b){for(var c=b.getTopBlocks(!1),d=0;d<c.length;d++)if(c[d].getProcedureDef){var e=c[d].getProcedureDef();if(e&&Blockly.Names.equals(e[0],a))return c[d]}return null};Blockly.FlyoutButton=function(a,b,c){this.workspace_=a;this.targetWorkspace_=b;this.text_=c;this.position_=new goog.math.Coordinate(0,0)};Blockly.FlyoutButton.MARGIN=5;Blockly.FlyoutButton.prototype.width=0;Blockly.FlyoutButton.prototype.height=0;
-Blockly.Flyout.prototype.MARGIN=Blockly.Flyout.prototype.CORNER_RADIUS;Blockly.Flyout.prototype.SCROLLBAR_PADDING=2;Blockly.Flyout.prototype.width_=0;Blockly.Flyout.prototype.height_=0;Blockly.Flyout.prototype.dragMode_=Blockly.DRAG_NONE;Blockly.Flyout.prototype.dragAngleRange_=70;
+Blockly.FlyoutButton.prototype.createDom=function(){this.svgGroup_=Blockly.createSvgElement("g",{"class":"blocklyFlyoutButton"},this.workspace_.getCanvas());var a=Blockly.createSvgElement("rect",{rx:4,ry:4,height:0,width:0},this.svgGroup_),b=Blockly.createSvgElement("text",{"class":"blocklyText",x:0,y:0,"text-anchor":"middle"},this.svgGroup_);b.textContent=this.text_;this.width=b.getComputedTextLength()+2*Blockly.FlyoutButton.MARGIN;this.height=20;a.setAttribute("width",this.width);a.setAttribute("height",
-Blockly.Flyout.prototype.createDom=function(){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_};
+this.height);b.setAttribute("x",this.width/2);b.setAttribute("y",this.height-Blockly.FlyoutButton.MARGIN);this.updateTransform_();return this.svgGroup_};Blockly.FlyoutButton.prototype.show=function(){this.updateTransform_();this.svgGroup_.setAttribute("display","block")};Blockly.FlyoutButton.prototype.updateTransform_=function(){this.svgGroup_.setAttribute("transform","translate("+this.position_.x+","+this.position_.y+")")};
+Blockly.FlyoutButton.prototype.moveTo=function(a,b){this.position_.x=a;this.position_.y=b;this.updateTransform_()};Blockly.FlyoutButton.prototype.dispose=function(){this.svgGroup_&&(goog.dom.removeNode(this.svgGroup_),this.svgGroup_=null);this.targetWorkspace_=this.workspace_=null};Blockly.FlyoutButton.prototype.onMouseUp=function(a){a.preventDefault();a.stopPropagation();Blockly.Variables.createVariable(this.targetWorkspace_)};Blockly.Flyout=function(a){a.getMetrics=this.getMetrics_.bind(this);a.setMetrics=this.setMetrics_.bind(this);this.workspace_=new Blockly.WorkspaceSvg(a);this.workspace_.isFlyout=!0;this.RTL=!!a.RTL;this.horizontalLayout_=a.horizontalLayout;this.toolboxPosition_=a.toolboxPosition;this.eventWrappers_=[];this.backgroundButtons_=[];this.buttons_=[];this.listeners_=[];this.permanentlyDisabled_=[];this.startDragMouseX_=this.startDragMouseY_=0};Blockly.Flyout.startFlyout_=null;
+Blockly.Flyout.startDownEvent_=null;Blockly.Flyout.startBlock_=null;Blockly.Flyout.onMouseUpWrapper_=null;Blockly.Flyout.onMouseMoveWrapper_=null;Blockly.Flyout.onMouseMoveBlockWrapper_=null;Blockly.Flyout.prototype.autoClose=!0;Blockly.Flyout.prototype.CORNER_RADIUS=8;Blockly.Flyout.prototype.DRAG_RADIUS=10;Blockly.Flyout.prototype.MARGIN=Blockly.Flyout.prototype.CORNER_RADIUS;Blockly.Flyout.prototype.SCROLLBAR_PADDING=2;Blockly.Flyout.prototype.width_=0;Blockly.Flyout.prototype.height_=0;
+Blockly.Flyout.prototype.dragMode_=Blockly.DRAG_NONE;Blockly.Flyout.prototype.dragAngleRange_=70;Blockly.Flyout.prototype.createDom=function(){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_};
 Blockly.Flyout.prototype.init=function(a){this.targetWorkspace_=a;this.workspace_.targetWorkspace=a;this.scrollbar_=new Blockly.Scrollbar(this.workspace_,this.horizontalLayout_,!1);this.hide();Array.prototype.push.apply(this.eventWrappers_,Blockly.bindEvent_(this.svgGroup_,"wheel",this,this.wheel_));this.autoClose||(this.filterWrapper_=this.filterForCapacity_.bind(this),this.targetWorkspace_.addChangeListener(this.filterWrapper_));Array.prototype.push.apply(this.eventWrappers_,Blockly.bindEvent_(this.svgGroup_,
 "mousedown",this,this.onMouseDown_))};
 Blockly.Flyout.prototype.dispose=function(){this.hide();Blockly.unbindEvent_(this.eventWrappers_);this.filterWrapper_&&(this.targetWorkspace_.removeChangeListener(this.filterWrapper_),this.filterWrapper_=null);this.scrollbar_&&(this.scrollbar_.dispose(),this.scrollbar_=null);this.workspace_&&(this.workspace_.targetWorkspace=null,this.workspace_.dispose(),this.workspace_=null);this.svgGroup_&&(goog.dom.removeNode(this.svgGroup_),this.svgGroup_=null);this.targetWorkspace_=this.svgBackground_=null};
@@ -1316,14 +1336,16 @@ Blockly.Flyout.prototype.setBackgroundPathHorizontal_=function(a,b){var c=this.t
 -this.CORNER_RADIUS),d.push("h",a-this.CORNER_RADIUS),d.push("a",this.CORNER_RADIUS,this.CORNER_RADIUS,0,0,1,this.CORNER_RADIUS,this.CORNER_RADIUS),d.push("v",b-this.CORNER_RADIUS),d.push("h",-a-this.CORNER_RADIUS));d.push("z");this.svgBackground_.setAttribute("d",d.join(" "))};Blockly.Flyout.prototype.scrollToStart=function(){this.scrollbar_.set(this.horizontalLayout_&&this.RTL?Infinity:0)};
 Blockly.Flyout.prototype.wheel_=function(a){var b=this.horizontalLayout_?a.deltaX:a.deltaY;if(b){goog.userAgent.GECKO&&(b*=10);var c=this.getMetrics_(),b=this.horizontalLayout_?c.viewLeft+b:c.viewTop+b,b=Math.min(b,this.horizontalLayout_?c.contentWidth-c.viewWidth:c.contentHeight-c.viewHeight),b=Math.max(b,0);this.scrollbar_.set(b)}a.preventDefault();a.stopPropagation()};Blockly.Flyout.prototype.isVisible=function(){return this.svgGroup_&&"block"==this.svgGroup_.style.display};
 Blockly.Flyout.prototype.hide=function(){if(this.isVisible()){this.svgGroup_.style.display="none";for(var a=0,b;b=this.listeners_[a];a++)Blockly.unbindEvent_(b);this.listeners_.length=0;this.reflowWrapper_&&(this.workspace_.removeChangeListener(this.reflowWrapper_),this.reflowWrapper_=null)}};
-Blockly.Flyout.prototype.show=function(a){this.hide();this.clearOldBlocks_();a==Blockly.Variables.NAME_TYPE?a=Blockly.Variables.flyoutCategory(this.workspace_.targetWorkspace):a==Blockly.Procedures.NAME_TYPE&&(a=Blockly.Procedures.flyoutCategory(this.workspace_.targetWorkspace));this.svgGroup_.style.display="block";for(var b=[],c=[],d=this.permanentlyDisabled_.length=0,e;e=a[d];d++)if(e.tagName&&"BLOCK"==e.tagName.toUpperCase()){var f=Blockly.Xml.domToBlock(e,this.workspace_);f.disabled&&this.permanentlyDisabled_.push(f);
+Blockly.Flyout.prototype.show=function(a){this.hide();this.clearOldBlocks_();a==Blockly.Variables.NAME_TYPE?a=Blockly.Variables.flyoutCategory(this.workspace_.targetWorkspace):a==Blockly.Procedures.NAME_TYPE&&(a=Blockly.Procedures.flyoutCategory(this.workspace_.targetWorkspace));this.svgGroup_.style.display="block";for(var b=[],c=[],d=this.permanentlyDisabled_.length=0,e;e=a[d];d++)if(e.tagName){var f=e.tagName.toUpperCase();"BLOCK"==f?(f=Blockly.Xml.domToBlock(e,this.workspace_),f.disabled&&this.permanentlyDisabled_.push(f),
-b.push(f);e=parseInt(e.getAttribute("gap"),10);c.push(isNaN(e)?3*this.MARGIN:e)}this.layoutBlocks_(b,c);this.listeners_.push(Blockly.bindEvent_(this.svgBackground_,"mouseover",this,function(){for(var a=this.workspace_.getTopBlocks(!1),b=0,c;c=a[b];b++)c.removeSelect()}));this.horizontalLayout_?this.height_=0:this.width_=0;this.reflow();this.filterForCapacity_();this.position();this.reflowWrapper_=this.reflow.bind(this);this.workspace_.addChangeListener(this.reflowWrapper_)};
+b.push({type:"block",block:f}),e=parseInt(e.getAttribute("gap"),10),c.push(isNaN(e)?3*this.MARGIN:e)):"SEP"==e.tagName.toUpperCase()?(e=parseInt(e.getAttribute("gap"),10),!isNaN(e)&&0<c.length?c[c.length-1]=e:c.push(3*this.MARGIN)):"BUTTON"==f&&(e=e.getAttribute("text"),e=new Blockly.FlyoutButton(this.workspace_,this.targetWorkspace_,e),b.push({type:"button",button:e}),c.push(this.MARGIN))}this.layout_(b,c);this.listeners_.push(Blockly.bindEvent_(this.svgBackground_,"mouseover",this,function(){for(var a=
-Blockly.Flyout.prototype.layoutBlocks_=function(a,b){var c=this.MARGIN,d=this.RTL?c:c+Blockly.BlockSvg.TAB_WIDTH;this.horizontalLayout_&&this.RTL&&(a=a.reverse());for(var e=0,f;f=a[e];e++){for(var g=f.getDescendants(),h=0,k;k=g[h];h++)k.isInFlyout=!0;f.render();g=f.getSvgRoot();h=f.getHeightWidth();k=f.outputConnection?Blockly.BlockSvg.TAB_WIDTH:0;this.horizontalLayout_&&(d+=k);this.horizontalLayout_&&this.RTL?f.moveBy(d+h.width-k,c):f.moveBy(d,c);this.horizontalLayout_?d+=h.width+b[e]-k:c+=h.height+
+this.workspace_.getTopBlocks(!1),b=0,c;c=a[b];b++)c.removeSelect()}));this.horizontalLayout_?this.height_=0:this.width_=0;this.reflow();this.filterForCapacity_();this.position();this.reflowWrapper_=this.reflow.bind(this);this.workspace_.addChangeListener(this.reflowWrapper_)};
-b[e];h=Blockly.createSvgElement("rect",{"fill-opacity":0},null);h.tooltip=f;Blockly.Tooltip.bindMouseEvents(h);this.workspace_.getCanvas().insertBefore(h,f.getSvgRoot());f.flyoutRect_=h;this.buttons_[e]=h;this.addBlockListeners_(g,f,h)}};Blockly.Flyout.prototype.clearOldBlocks_=function(){for(var a=this.workspace_.getTopBlocks(!1),b=0,c;c=a[b];b++)c.workspace==this.workspace_&&c.dispose(!1,!1);for(a=0;b=this.buttons_[a];a++)goog.dom.removeNode(b);this.buttons_.length=0};
+Blockly.Flyout.prototype.layout_=function(a,b){this.workspace_.scale=this.targetWorkspace_.scale;var c=this.MARGIN,d=this.RTL?c:c+Blockly.BlockSvg.TAB_WIDTH;this.horizontalLayout_&&this.RTL&&(a=a.reverse());for(var e=0,f;f=a[e];e++)if("block"==f.type){f=f.block;for(var g=f.getDescendants(),h=0,k;k=g[h];h++)k.isInFlyout=!0;f.render();g=f.getSvgRoot();h=f.getHeightWidth();k=f.outputConnection?Blockly.BlockSvg.TAB_WIDTH:0;this.horizontalLayout_&&(d+=k);f.moveBy(this.horizontalLayout_&&this.RTL?d+h.width-
+k:d,c);this.horizontalLayout_?d+=h.width+b[e]-k:c+=h.height+b[e];h=Blockly.createSvgElement("rect",{"fill-opacity":0},null);h.tooltip=f;Blockly.Tooltip.bindMouseEvents(h);this.workspace_.getCanvas().insertBefore(h,f.getSvgRoot());f.flyoutRect_=h;this.backgroundButtons_[e]=h;this.addBlockListeners_(g,f,h)}else"button"==f.type&&(f=f.button,g=f.createDom(),f.moveTo(d,c),f.show(),Blockly.bindEvent_(g,"mouseup",f,f.onMouseUp),this.buttons_.push(f),this.horizontalLayout_?d+=f.width+b[e]:c+=f.height+b[e])};
+Blockly.Flyout.prototype.clearOldBlocks_=function(){for(var a=this.workspace_.getTopBlocks(!1),b=0,c;c=a[b];b++)c.workspace==this.workspace_&&c.dispose(!1,!1);for(b=0;a=this.backgroundButtons_[b];b++)goog.dom.removeNode(a);for(b=this.backgroundButtons_.length=0;a=this.buttons_[b];b++)a.dispose();this.buttons_.length=0};
 Blockly.Flyout.prototype.addBlockListeners_=function(a,b,c){this.listeners_.push(Blockly.bindEvent_(a,"mousedown",null,this.blockMouseDown_(b)));this.listeners_.push(Blockly.bindEvent_(c,"mousedown",null,this.blockMouseDown_(b)));this.listeners_.push(Blockly.bindEvent_(a,"mouseover",b,b.addSelect));this.listeners_.push(Blockly.bindEvent_(a,"mouseout",b,b.removeSelect));this.listeners_.push(Blockly.bindEvent_(c,"mouseover",b,b.addSelect));this.listeners_.push(Blockly.bindEvent_(c,"mouseout",b,b.removeSelect))};
 Blockly.Flyout.prototype.blockMouseDown_=function(a){var b=this;return function(c){Blockly.terminateDrag_();Blockly.hideChaff(!0);Blockly.isRightButton(c)?a.showContextMenu_(c):(Blockly.Css.setCursor(Blockly.Css.Cursor.CLOSED),b.startDragMouseY_=c.clientY,b.startDragMouseX_=c.clientX,Blockly.Flyout.startDownEvent_=c,Blockly.Flyout.startBlock_=a,Blockly.Flyout.startFlyout_=b,Blockly.Flyout.onMouseUpWrapper_=Blockly.bindEvent_(document,"mouseup",b,b.onMouseUp_),Blockly.Flyout.onMouseMoveBlockWrapper_=
 Blockly.bindEvent_(document,"mousemove",b,b.onMouseMoveBlock_));c.stopPropagation();c.preventDefault()}};
-Blockly.Flyout.prototype.onMouseDown_=function(a){Blockly.isRightButton(a)||(Blockly.hideChaff(!0),this.dragMode_=Blockly.DRAG_FREE,this.startDragMouseY_=a.clientY,this.startDragMouseX_=a.clientX,Blockly.Flyout.onMouseMoveWrapper_=Blockly.bindEvent_(document,"mousemove",this,this.onMouseMove_),Blockly.Flyout.onMouseUpWrapper_=Blockly.bindEvent_(document,"mouseup",this,Blockly.Flyout.terminateDrag_),a.preventDefault(),a.stopPropagation())};
+Blockly.Flyout.prototype.onMouseDown_=function(a){Blockly.isRightButton(a)||(Blockly.hideChaff(!0),this.dragMode_=Blockly.DRAG_FREE,this.startDragMouseY_=a.clientY,this.startDragMouseX_=a.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_),a.preventDefault(),a.stopPropagation())};
 Blockly.Flyout.prototype.onMouseUp_=function(a){this.workspace_.isDragging()||(this.autoClose?this.createBlockFunc_(Blockly.Flyout.startBlock_)(Blockly.Flyout.startDownEvent_):Blockly.WidgetDiv.isVisible()||Blockly.Events.fire(new Blockly.Events.Ui(Blockly.Flyout.startBlock_,"click",void 0,void 0)));Blockly.terminateDrag_()};
 Blockly.Flyout.prototype.onMouseMove_=function(a){var b=this.getMetrics_();if(this.horizontalLayout_){if(!(0>b.contentWidth-b.viewWidth)){var c=a.clientX-this.startDragMouseX_;this.startDragMouseX_=a.clientX;a=b.viewLeft-c;a=goog.math.clamp(a,0,b.contentWidth-b.viewWidth);this.scrollbar_.set(a)}}else 0>b.contentHeight-b.viewHeight||(c=a.clientY-this.startDragMouseY_,this.startDragMouseY_=a.clientY,a=b.viewTop-c,a=goog.math.clamp(a,0,b.contentHeight-b.viewHeight),this.scrollbar_.set(a))};
 Blockly.Flyout.prototype.onMouseMoveBlock_=function(a){if(!("mousemove"==a.type&&1>=a.clientX&&0==a.clientY&&0==a.button))if(this.determineDragIntention_(a.clientX-Blockly.Flyout.startDownEvent_.clientX,a.clientY-Blockly.Flyout.startDownEvent_.clientY))this.createBlockFunc_(Blockly.Flyout.startBlock_)(Blockly.Flyout.startDownEvent_);else if(this.dragMode_==Blockly.DRAG_FREE)this.onMouseMove_(a);a.stopPropagation()};
@@ -1335,60 +1357,62 @@ c.y+=d/e-d);a=Blockly.Xml.blockToDom(a);a=Blockly.Xml.domToBlock(a,b);e=a.getSvg
 Blockly.Flyout.prototype.filterForCapacity_=function(){for(var a=this.targetWorkspace_.remainingCapacity(),b=this.workspace_.getTopBlocks(!1),c=0,d;d=b[c];c++)if(-1==this.permanentlyDisabled_.indexOf(d)){var e=d.getDescendants();d.setDisabled(e.length>a)}};
 Blockly.Flyout.prototype.getClientRect=function(){if(!this.svgGroup_)return null;var a=this.svgGroup_.getBoundingClientRect(),b=a.left,c=a.top,d=a.width,a=a.height;return this.toolboxPosition_==Blockly.TOOLBOX_AT_TOP?new goog.math.Rect(-1E9,c-1E9,2E9,1E9+a):this.toolboxPosition_==Blockly.TOOLBOX_AT_BOTTOM?new goog.math.Rect(-1E9,c,2E9,1E9+a):this.toolboxPosition_==Blockly.TOOLBOX_AT_LEFT?new goog.math.Rect(b-1E9,-1E9,1E9+d,2E9):new goog.math.Rect(b,-1E9,1E9+d,2E9)};
 Blockly.Flyout.terminateDrag_=function(){Blockly.Flyout.startFlyout_&&(Blockly.Flyout.startFlyout_.dragMode_=Blockly.DRAG_NONE);Blockly.Flyout.onMouseUpWrapper_&&(Blockly.unbindEvent_(Blockly.Flyout.onMouseUpWrapper_),Blockly.Flyout.onMouseUpWrapper_=null);Blockly.Flyout.onMouseMoveBlockWrapper_&&(Blockly.unbindEvent_(Blockly.Flyout.onMouseMoveBlockWrapper_),Blockly.Flyout.onMouseMoveBlockWrapper_=null);Blockly.Flyout.onMouseMoveWrapper_&&(Blockly.unbindEvent_(Blockly.Flyout.onMouseMoveWrapper_),
-Blockly.Flyout.onMouseMoveWrapper_=null);Blockly.Flyout.onMouseUpWrapper_&&(Blockly.unbindEvent_(Blockly.Flyout.onMouseUpWrapper_),Blockly.Flyout.onMouseUpWrapper_=null);Blockly.Flyout.startDownEvent_=null;Blockly.Flyout.startBlock_=null;Blockly.Flyout.startFlyout_=null};
+Blockly.Flyout.onMouseMoveWrapper_=null);Blockly.Flyout.startDownEvent_=null;Blockly.Flyout.startBlock_=null;Blockly.Flyout.startFlyout_=null};
 Blockly.Flyout.prototype.reflowHorizontal=function(a){this.workspace_.scale=this.targetWorkspace_.scale;for(var b=0,c=0,d;d=a[c];c++)b=Math.max(b,d.getHeightWidth().height);b+=1.5*this.MARGIN;b*=this.workspace_.scale;b+=Blockly.Scrollbar.scrollbarThickness;if(this.height_!=b){for(c=0;d=a[c];c++){var e=d.getHeightWidth();if(d.flyoutRect_){d.flyoutRect_.setAttribute("width",e.width);d.flyoutRect_.setAttribute("height",e.height);var f=d.outputConnection?Blockly.BlockSvg.TAB_WIDTH:0,g=d.getRelativeToSurfaceXY();
 d.flyoutRect_.setAttribute("y",g.y);d.flyoutRect_.setAttribute("x",this.RTL?g.x-e.width+f:g.x-f);(e=d.startHat_?Blockly.BlockSvg.START_HAT_HEIGHT:0)&&d.moveBy(0,e);d.flyoutRect_.setAttribute("y",g.y)}}this.height_=b;this.targetWorkspace_.resize()}};
-Blockly.Flyout.prototype.reflowVertical=function(a){this.workspace_.scale=this.targetWorkspace_.scale;for(var b=0,c=0,d;d=a[c];c++){var e=d.getHeightWidth().width;d.outputConnection&&(e-=Blockly.BlockSvg.TAB_WIDTH);b=Math.max(b,e)}b+=1.5*this.MARGIN+Blockly.BlockSvg.TAB_WIDTH;b*=this.workspace_.scale;b+=Blockly.Scrollbar.scrollbarThickness;if(this.width_!=b){for(c=0;d=a[c];c++){e=d.getHeightWidth();if(this.RTL){var f=d.getRelativeToSurfaceXY().x,g=b/this.workspace_.scale-this.MARGIN,g=g-Blockly.BlockSvg.TAB_WIDTH;
+Blockly.Flyout.prototype.reflowVertical=function(a){this.workspace_.scale=this.targetWorkspace_.scale;for(var b=0,c=0,d;d=a[c];c++){var e=d.getHeightWidth().width;d.outputConnection&&(e-=Blockly.BlockSvg.TAB_WIDTH);b=Math.max(b,e)}for(c=0;d=this.buttons_[c];c++)b=Math.max(b,d.width);b+=1.5*this.MARGIN+Blockly.BlockSvg.TAB_WIDTH;b*=this.workspace_.scale;b+=Blockly.Scrollbar.scrollbarThickness;if(this.width_!=b){for(c=0;d=a[c];c++){e=d.getHeightWidth();if(this.RTL){var f=d.getRelativeToSurfaceXY().x,
-d.moveBy(g-f,0)}d.flyoutRect_&&(d.flyoutRect_.setAttribute("width",e.width),d.flyoutRect_.setAttribute("height",e.height),g=d.outputConnection?Blockly.BlockSvg.TAB_WIDTH:0,f=d.getRelativeToSurfaceXY(),d.flyoutRect_.setAttribute("x",this.RTL?f.x-e.width+g:f.x-g),(e=d.startHat_?Blockly.BlockSvg.START_HAT_HEIGHT:0)&&d.moveBy(0,e),d.flyoutRect_.setAttribute("y",f.y))}this.width_=b;this.targetWorkspace_.resize()}};
+g=b/this.workspace_.scale-this.MARGIN,g=g-Blockly.BlockSvg.TAB_WIDTH;d.moveBy(g-f,0)}d.flyoutRect_&&(d.flyoutRect_.setAttribute("width",e.width),d.flyoutRect_.setAttribute("height",e.height),g=d.outputConnection?Blockly.BlockSvg.TAB_WIDTH:0,f=d.getRelativeToSurfaceXY(),d.flyoutRect_.setAttribute("x",this.RTL?f.x-e.width+g:f.x-g),(e=d.startHat_?Blockly.BlockSvg.START_HAT_HEIGHT:0)&&d.moveBy(0,e),d.flyoutRect_.setAttribute("y",f.y))}this.width_=b;this.targetWorkspace_.resize()}};
 Blockly.Flyout.prototype.reflow=function(){this.reflowWrapper_&&this.workspace_.removeChangeListener(this.reflowWrapper_);var a=this.workspace_.getTopBlocks(!1);this.horizontalLayout_?this.reflowHorizontal(a):this.reflowVertical(a);this.reflowWrapper_&&this.workspace_.addChangeListener(this.reflowWrapper_)};Blockly.Toolbox=function(a){this.workspace_=a;this.RTL=a.options.RTL;this.horizontalLayout_=a.options.horizontalLayout;this.toolboxPosition=a.options.toolboxPosition;this.config_={indentWidth:19,cssRoot:"blocklyTreeRoot",cssHideRoot:"blocklyHidden",cssItem:"",cssTreeRow:"blocklyTreeRow",cssItemLabel:"blocklyTreeLabel",cssTreeIcon:"blocklyTreeIcon",cssExpandedFolderIcon:"blocklyTreeIconOpen",cssFileIcon:"blocklyTreeIconNone",cssSelectedRow:"blocklyTreeSelected"};this.treeSeparatorConfig_={cssTreeRow:"blocklyTreeSeparator"};
 this.horizontalLayout_&&(this.config_.cssTreeRow+=a.RTL?" blocklyHorizontalTreeRtl":" blocklyHorizontalTree",this.treeSeparatorConfig_.cssTreeRow="blocklyTreeSeparatorHorizontal "+(a.RTL?"blocklyHorizontalTreeRtl":"blocklyHorizontalTree"),this.config_.cssTreeIcon="")};Blockly.Toolbox.prototype.width=0;Blockly.Toolbox.prototype.height=0;Blockly.Toolbox.prototype.selectedOption_=null;Blockly.Toolbox.prototype.lastCategory_=null;
-Blockly.Toolbox.prototype.init=function(){var a=this.workspace_;this.HtmlDiv=goog.dom.createDom("div","blocklyToolboxDiv");this.HtmlDiv.setAttribute("dir",a.RTL?"RTL":"LTR");document.body.appendChild(this.HtmlDiv);Blockly.bindEvent_(this.HtmlDiv,"mousedown",this,function(a){Blockly.isRightButton(a)||a.target==this.HtmlDiv?Blockly.hideChaff(!1):Blockly.hideChaff(!0)});this.flyout_=new Blockly.Flyout({disabledPatternId:a.options.disabledPatternId,parentWorkspace:a,RTL:a.RTL,horizontalLayout:a.horizontalLayout,
+Blockly.Toolbox.prototype.init=function(){var a=this.workspace_,b=this.workspace_.getParentSvg();this.HtmlDiv=goog.dom.createDom("DIV","blocklyToolboxDiv");this.HtmlDiv.setAttribute("dir",a.RTL?"RTL":"LTR");b.parentNode.insertBefore(this.HtmlDiv,b);Blockly.bindEvent_(this.HtmlDiv,"mousedown",this,function(a){Blockly.isRightButton(a)||a.target==this.HtmlDiv?Blockly.hideChaff(!1):Blockly.hideChaff(!0)});this.flyout_=new Blockly.Flyout({disabledPatternId:a.options.disabledPatternId,parentWorkspace:a,
-toolboxPosition:a.options.toolboxPosition});goog.dom.insertSiblingAfter(this.flyout_.createDom(),a.svgGroup_);this.flyout_.init(a);this.config_.cleardotPath=a.options.pathToMedia+"1x1.gif";this.config_.cssCollapsedFolderIcon="blocklyTreeIconClosed"+(a.RTL?"Rtl":"Ltr");var b=new Blockly.Toolbox.TreeControl(this,this.config_);this.tree_=b;b.setShowRootNode(!1);b.setShowLines(!1);b.setShowExpandIcons(!1);b.setSelectedItem(null);this.populate_(a.options.languageTree);b.render(this.HtmlDiv);this.addColour_();
+RTL:a.RTL,horizontalLayout:a.horizontalLayout,toolboxPosition:a.options.toolboxPosition});goog.dom.insertSiblingAfter(this.flyout_.createDom(),a.svgGroup_);this.flyout_.init(a);this.config_.cleardotPath=a.options.pathToMedia+"1x1.gif";this.config_.cssCollapsedFolderIcon="blocklyTreeIconClosed"+(a.RTL?"Rtl":"Ltr");this.tree_=b=new Blockly.Toolbox.TreeControl(this,this.config_);b.setShowRootNode(!1);b.setShowLines(!1);b.setShowExpandIcons(!1);b.setSelectedItem(null);a=this.populate_(a.options.languageTree);
-this.position()};Blockly.Toolbox.prototype.dispose=function(){this.flyout_.dispose();this.tree_.dispose();goog.dom.removeNode(this.HtmlDiv);this.lastCategory_=this.workspace_=null};Blockly.Toolbox.prototype.getWidth=function(){return this.width};Blockly.Toolbox.prototype.getHeight=function(){return this.height};
+b.render(this.HtmlDiv);a&&b.setSelectedItem(a);this.addColour_();this.position()};Blockly.Toolbox.prototype.dispose=function(){this.flyout_.dispose();this.tree_.dispose();goog.dom.removeNode(this.HtmlDiv);this.lastCategory_=this.workspace_=null};Blockly.Toolbox.prototype.getWidth=function(){return this.width};Blockly.Toolbox.prototype.getHeight=function(){return this.height};
-Blockly.Toolbox.prototype.position=function(){var a=this.HtmlDiv;if(a){var b=this.workspace_.getParentSvg(),c=goog.style.getPageOffset(b),b=Blockly.svgSize(b);this.horizontalLayout_?(a.style.left=c.x+"px",a.style.height="auto",a.style.width=b.width+"px",this.height=a.offsetHeight,a.style.top=this.toolboxPosition==Blockly.TOOLBOX_AT_TOP?c.y+"px":c.y+b.height-a.offsetHeight+"px"):(a.style.left=this.toolboxPosition==Blockly.TOOLBOX_AT_RIGHT?c.x+b.width-a.offsetWidth+"px":c.x+"px",a.style.height=b.height+
+Blockly.Toolbox.prototype.position=function(){var a=this.HtmlDiv;if(a){var b=this.workspace_.getParentSvg();goog.style.getPageOffset(b);b=Blockly.svgSize(b);this.horizontalLayout_?(a.style.left="0",a.style.height="auto",a.style.width=b.width+"px",this.height=a.offsetHeight,this.toolboxPosition==Blockly.TOOLBOX_AT_TOP?a.style.top="0":a.style.bottom="0"):(this.toolboxPosition==Blockly.TOOLBOX_AT_RIGHT?a.style.right="0":a.style.left="0",a.style.height=b.height+"px",this.width=a.offsetWidth);this.flyout_.position()}};
-"px",a.style.top=c.y+"px",this.width=a.offsetWidth,this.toolboxPosition==Blockly.TOOLBOX_AT_LEFT&&--this.width);this.flyout_.position()}};Blockly.Toolbox.prototype.populate_=function(a){this.tree_.removeChildren();this.tree_.blocks=[];this.hasColours_=!1;this.syncTrees_(a,this.tree_,this.workspace_.options.pathToMedia);if(this.tree_.blocks.length)throw"Toolbox cannot have both blocks and categories in the root level.";Blockly.resizeSvgContents(this.workspace_)};
+Blockly.Toolbox.prototype.populate_=function(a){this.tree_.removeChildren();this.tree_.blocks=[];this.hasColours_=!1;a=this.syncTrees_(a,this.tree_,this.workspace_.options.pathToMedia);if(this.tree_.blocks.length)throw"Toolbox cannot have both blocks and categories in the root level.";this.workspace_.resizeContents();return a};
-Blockly.Toolbox.prototype.syncTrees_=function(a,b,c){for(var d=null,e=0,f;f=a.childNodes[e];e++)if(f.tagName)switch(f.tagName.toUpperCase()){case "CATEGORY":d=this.tree_.createNode(f.getAttribute("name"));d.blocks=[];b.add(d);var g=f.getAttribute("custom");g?d.blocks=g:this.syncTrees_(f,d,c);g=f.getAttribute("colour");goog.isString(g)?(g.match(/^#[0-9a-fA-F]{6}$/)?d.hexColour=g:d.hexColour=Blockly.hueToRgb(g),this.hasColours_=!0):d.hexColour="";"true"==f.getAttribute("expanded")?(d.blocks.length&&
+Blockly.Toolbox.prototype.syncTrees_=function(a,b,c){for(var d=null,e=null,f=0,g;g=a.childNodes[f];f++)if(g.tagName)switch(g.tagName.toUpperCase()){case "CATEGORY":e=this.tree_.createNode(g.getAttribute("name"));e.blocks=[];b.add(e);var h=g.getAttribute("custom");h?e.blocks=h:(h=this.syncTrees_(g,e,c))&&(d=h);h=g.getAttribute("colour");goog.isString(h)?(h.match(/^#[0-9a-fA-F]{6}$/)?e.hexColour=h:e.hexColour=Blockly.hueToRgb(h),this.hasColours_=!0):e.hexColour="";"true"==g.getAttribute("expanded")?
-this.tree_.setSelectedItem(d),d.setExpanded(!0)):d.setExpanded(!1);d=f;break;case "SEP":d&&("CATEGORY"==d.tagName.toUpperCase()?b.add(new Blockly.Toolbox.TreeSeparator(this.treeSeparatorConfig_)):(f=parseFloat(f.getAttribute("gap")),isNaN(f)||(g=parseFloat(d.getAttribute("gap")),f=isNaN(g)?f:g+f,d.setAttribute("gap",f))));break;case "BLOCK":case "SHADOW":b.blocks.push(f),d=f}};
+(e.blocks.length&&(d=e),e.setExpanded(!0)):e.setExpanded(!1);e=g;break;case "SEP":e&&("CATEGORY"==e.tagName.toUpperCase()?b.add(new Blockly.Toolbox.TreeSeparator(this.treeSeparatorConfig_)):(g=parseFloat(g.getAttribute("gap")),!isNaN(g)&&e&&e.setAttribute("gap",g)));break;case "BLOCK":case "SHADOW":b.blocks.push(g),e=g}return d};
 Blockly.Toolbox.prototype.addColour_=function(a){a=(a||this.tree_).getChildren();for(var b=0,c;c=a[b];b++){var d=c.getRowElement();if(d){var e=this.hasColours_?"8px solid "+(c.hexColour||"#ddd"):"none";this.workspace_.RTL?d.style.borderRight=e:d.style.borderLeft=e}this.addColour_(c)}};Blockly.Toolbox.prototype.clearSelection=function(){this.tree_.setSelectedItem(null)};
 Blockly.Toolbox.prototype.getClientRect=function(){if(!this.HtmlDiv)return null;var a=this.HtmlDiv.getBoundingClientRect(),b=a.left,c=a.top,d=a.width,a=a.height;return this.toolboxPosition==Blockly.TOOLBOX_AT_LEFT?new goog.math.Rect(-1E7,-1E7,1E7+b+d,2E7):this.toolboxPosition==Blockly.TOOLBOX_AT_RIGHT?new goog.math.Rect(b,-1E7,1E7+d,2E7):this.toolboxPosition==Blockly.TOOLBOX_AT_TOP?new goog.math.Rect(-1E7,-1E7,2E7,1E7+c+a):new goog.math.Rect(0,c,2E7,1E7+d)};
-Blockly.Toolbox.TreeControl=function(a,b){this.toolbox_=a;goog.ui.tree.TreeControl.call(this,goog.html.SafeHtml.EMPTY,b)};goog.inherits(Blockly.Toolbox.TreeControl,goog.ui.tree.TreeControl);Blockly.Toolbox.TreeControl.prototype.enterDocument=function(){Blockly.Toolbox.TreeControl.superClass_.enterDocument.call(this);if(goog.events.BrowserFeature.TOUCH_ENABLED){var a=this.getElement();Blockly.bindEvent_(a,goog.events.EventType.TOUCHSTART,this,this.handleTouchEvent_)}};
+Blockly.Toolbox.prototype.refreshSelection=function(){var a=this.tree_.getSelectedItem();a&&a.blocks&&this.flyout_.show(a.blocks)};Blockly.Toolbox.TreeControl=function(a,b){this.toolbox_=a;goog.ui.tree.TreeControl.call(this,goog.html.SafeHtml.EMPTY,b)};goog.inherits(Blockly.Toolbox.TreeControl,goog.ui.tree.TreeControl);
-Blockly.Toolbox.TreeControl.prototype.handleTouchEvent_=function(a){a.preventDefault();var b=this.getNodeFromEvent_(a);b&&a.type===goog.events.EventType.TOUCHSTART&&setTimeout(function(){b.onMouseDown(a)},1)};Blockly.Toolbox.TreeControl.prototype.createNode=function(a){return new Blockly.Toolbox.TreeNode(this.toolbox_,a?goog.html.SafeHtml.htmlEscape(a):goog.html.SafeHtml.EMPTY,this.getConfig(),this.getDomHelper())};
+Blockly.Toolbox.TreeControl.prototype.enterDocument=function(){Blockly.Toolbox.TreeControl.superClass_.enterDocument.call(this);if(goog.events.BrowserFeature.TOUCH_ENABLED){var a=this.getElement();Blockly.bindEvent_(a,goog.events.EventType.TOUCHSTART,this,this.handleTouchEvent_)}};Blockly.Toolbox.TreeControl.prototype.handleTouchEvent_=function(a){a.preventDefault();var b=this.getNodeFromEvent_(a);b&&a.type===goog.events.EventType.TOUCHSTART&&setTimeout(function(){b.onMouseDown(a)},1)};
+Blockly.Toolbox.TreeControl.prototype.createNode=function(a){return new Blockly.Toolbox.TreeNode(this.toolbox_,a?goog.html.SafeHtml.htmlEscape(a):goog.html.SafeHtml.EMPTY,this.getConfig(),this.getDomHelper())};
 Blockly.Toolbox.TreeControl.prototype.setSelectedItem=function(a){var b=this.toolbox_;if(a!=this.selectedItem_&&a!=b.tree_){b.lastCategory_&&(b.lastCategory_.getRowElement().style.backgroundColor="");if(a){var c=a.hexColour||"#57e";a.getRowElement().style.backgroundColor=c;b.addColour_(a)}c=this.getSelectedItem();goog.ui.tree.TreeControl.prototype.setSelectedItem.call(this,a);a&&a.blocks&&a.blocks.length?(b.flyout_.show(a.blocks),b.lastCategory_!=a&&b.flyout_.scrollToStart()):b.flyout_.hide();c!=
-a&&c!=this&&(c=new Blockly.Events.Ui(null,"category",c&&c.getHtml(),a&&a.getHtml()),c.workspaceId=b.workspace_.id,Blockly.Events.fire(c));a&&(b.lastCategory_=a)}};Blockly.Toolbox.TreeNode=function(a,b,c,d){goog.ui.tree.TreeNode.call(this,b,c,d);a&&(b=function(){Blockly.svgResize(a.workspace_)},goog.events.listen(a.tree_,goog.ui.tree.BaseNode.EventType.EXPAND,b),goog.events.listen(a.tree_,goog.ui.tree.BaseNode.EventType.COLLAPSE,b))};goog.inherits(Blockly.Toolbox.TreeNode,goog.ui.tree.TreeNode);
+a&&c!=this&&(c=new Blockly.Events.Ui(null,"category",c&&c.getHtml(),a&&a.getHtml()),c.workspaceId=b.workspace_.id,Blockly.Events.fire(c));a&&(b.lastCategory_=a)}};Blockly.Toolbox.TreeNode=function(a,b,c,d){goog.ui.tree.TreeNode.call(this,b,c,d);a&&(this.horizontalLayout_=a.horizontalLayout_,b=function(){Blockly.svgResize(a.workspace_)},goog.events.listen(a.tree_,goog.ui.tree.BaseNode.EventType.EXPAND,b),goog.events.listen(a.tree_,goog.ui.tree.BaseNode.EventType.COLLAPSE,b))};
-Blockly.Toolbox.TreeNode.prototype.getExpandIconSafeHtml=function(){return goog.html.SafeHtml.create("span")};Blockly.Toolbox.TreeNode.prototype.onMouseDown=function(a){this.hasChildren()&&this.isUserCollapsible_?(this.toggle(),this.select()):this.isSelected()?this.getTree().setSelectedItem(null):this.select();this.updateRow()};Blockly.Toolbox.TreeNode.prototype.onDoubleClick_=function(a){};Blockly.Toolbox.TreeSeparator=function(a){Blockly.Toolbox.TreeNode.call(this,null,"",a)};
+goog.inherits(Blockly.Toolbox.TreeNode,goog.ui.tree.TreeNode);Blockly.Toolbox.TreeNode.prototype.getExpandIconSafeHtml=function(){return goog.html.SafeHtml.create("span")};Blockly.Toolbox.TreeNode.prototype.onMouseDown=function(a){this.hasChildren()&&this.isUserCollapsible_?(this.toggle(),this.select()):this.isSelected()?this.getTree().setSelectedItem(null):this.select();this.updateRow()};Blockly.Toolbox.TreeNode.prototype.onDoubleClick_=function(a){};
+Blockly.Toolbox.TreeNode.prototype.onKeyDown=function(a){if(this.horizontalLayout_){var b={};b[goog.events.KeyCodes.RIGHT]=goog.events.KeyCodes.DOWN;b[goog.events.KeyCodes.LEFT]=goog.events.KeyCodes.UP;b[goog.events.KeyCodes.UP]=goog.events.KeyCodes.LEFT;b[goog.events.KeyCodes.DOWN]=goog.events.KeyCodes.RIGHT;a.keyCode=b[a.keyCode]||a.keyCode}return Blockly.Toolbox.TreeNode.superClass_.onKeyDown.call(this,a)};Blockly.Toolbox.TreeSeparator=function(a){Blockly.Toolbox.TreeNode.call(this,null,"",a)};
 goog.inherits(Blockly.Toolbox.TreeSeparator,Blockly.Toolbox.TreeNode);Blockly.Css={};Blockly.Css.Cursor={OPEN:"handopen",CLOSED:"handclosed",DELETE:"handdelete"};Blockly.Css.currentCursor_="";Blockly.Css.styleSheet_=null;Blockly.Css.mediaPath_="";
 Blockly.Css.inject=function(a,b){if(!Blockly.Css.styleSheet_){var c=".blocklyDraggable {}\n";a&&(c+=Blockly.Css.CONTENT.join("\n"),Blockly.FieldDate&&(c+=Blockly.FieldDate.CSS.join("\n")));Blockly.Css.mediaPath_=b.replace(/[\\\/]$/,"");var c=c.replace(/<<<PATH>>>/g,Blockly.Css.mediaPath_),d=document.createElement("style");document.head.appendChild(d);c=document.createTextNode(c);d.appendChild(c);Blockly.Css.styleSheet_=d.sheet;Blockly.Css.setCursor(Blockly.Css.Cursor.OPEN)}};
 Blockly.Css.setCursor=function(a){if(Blockly.Css.currentCursor_!=a){Blockly.Css.currentCursor_=a;var b="url("+Blockly.Css.mediaPath_+"/"+a+".cur), auto",c=".blocklyDraggable {\n  cursor: "+b+";\n}\n";Blockly.Css.styleSheet_.deleteRule(0);Blockly.Css.styleSheet_.insertRule(c,0);for(var c=document.getElementsByClassName("blocklyToolboxDiv"),d=0,e;e=c[d];d++)e.style.cursor=a==Blockly.Css.Cursor.DELETE?b:"";document.body.parentNode.style.cursor=a==Blockly.Css.Cursor.OPEN?"":b}};
-Blockly.Css.CONTENT=[".blocklySvg {","background-color: #fff;","outline: none;","overflow: hidden;","}",".blocklyWidgetDiv {","display: none;","position: absolute;","z-index: 999;","}",".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: 1000;","}",".blocklyResizeSE {","cursor: se-resize;",
+Blockly.Css.CONTENT=[".blocklySvg {","background-color: #fff;","outline: none;","overflow: hidden;","display: block;","}",".blocklyWidgetDiv {","display: none;","position: absolute;","z-index: 99999;","}",".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);",
-"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 {",
+"color: #000;","display: none;","font-family: sans-serif;","font-size: 9pt;","opacity: 0.9;","padding: 2px;","position: absolute;","z-index: 100000;","}",".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;",
-"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 {",
+"}",".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 {",
-"fill: #fff;","fill-opacity: .6;","}",".blocklyNonEditableText>text,",".blocklyEditableText>text {","fill: #000;","}",".blocklyEditableText:hover>rect {","stroke: #fff;","stroke-width: 2;","}",".blocklyBubbleText {","fill: #000;","}",".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;",
+"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","}",
-"}",".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;",
+".blocklyFlyoutButton:hover {","fill: #ccc;","}",".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 {",
-"padding: 0 1px;","width: 100%","}",".blocklyMainBackground {","stroke-width: 1;","stroke: #c6c6c6;","}",".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;",
+"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;","}",".blocklyMutatorBackground {","fill: #fff;","stroke: #ddd;","stroke-width: 1;",
-"}",".blocklyZoom>image:hover {","opacity: .6;","}",".blocklyZoom>image:active {","opacity: .8;","}",".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;",
+"}",".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;","}",".blocklyFlyout .blocklyScrollbarHandle {","fill: #bbb;","}",".blocklyFlyout .blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,",
-"}",".blocklyAngleGauge {","fill: #f88;","fill-opacity: .8;","}",".blocklyAngleLine {","stroke: #f00;","stroke-width: 2;","stroke-linecap: round;","}",".blocklyContextMenu {","border-radius: 4px;","}",".blocklyDropdownMenu {","padding: 0 !important;","}",".blocklyWidgetDiv .goog-option-selected .goog-menuitem-checkbox,",".blocklyWidgetDiv .goog-option-selected .goog-menuitem-icon {","background: url(<<<PATH>>>/sprites.png) no-repeat -48px -16px !important;","}",".blocklyToolboxDiv {","background-color: #ddd;",
+".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;",
-"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;",
+"}",".blocklyWidgetDiv .goog-option-selected .goog-menuitem-checkbox,",".blocklyWidgetDiv .goog-option-selected .goog-menuitem-icon {","background: url(<<<PATH>>>/sprites.png) no-repeat -48px -16px !important;","}",".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;",
-"}",".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;",
+"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;",
-"}",".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;",
+"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 {",
-"}",".blocklyTreeLabel {","cursor: default;","font-family: sans-serif;","font-size: 16px;","padding: 0 3px;","vertical-align: middle;","}",".blocklyTreeSelected .blocklyTreeLabel {","color: #fff;","}",".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;",
+"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;","}",".blocklyWidgetDiv .goog-palette {","outline: none;","cursor: default;",
-"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;","}",".blocklyWidgetDiv .goog-menu {","background: #fff;","border-color: #ccc #666 #666 #ccc;","border-style: solid;",
+"}",".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-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;","}",".blocklyWidgetDiv .goog-menuitem {","color: #000;","font: normal 13px Arial, sans-serif;","list-style: none;","margin: 0;","padding: 4px 7em 4px 28px;","white-space: nowrap;","}",".blocklyWidgetDiv .goog-menuitem.goog-menuitem-rtl {","padding-left: 7em;","padding-right: 28px;",
+"border: 1px solid #FFF;","}",".blocklyWidgetDiv .goog-palette-cell-selected .goog-palette-colorswatch {","border: 1px solid #000;","color: #fff;","}",".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;","}",".blocklyWidgetDiv .goog-menuitem {",
-"}",".blocklyWidgetDiv .goog-menu-nocheckbox .goog-menuitem,",".blocklyWidgetDiv .goog-menu-noicon .goog-menuitem {","padding-left: 12px;","}",".blocklyWidgetDiv .goog-menu-noaccel .goog-menuitem {","padding-right: 20px;","}",".blocklyWidgetDiv .goog-menuitem-content {","color: #000;","font: normal 13px Arial, sans-serif;","}",".blocklyWidgetDiv .goog-menuitem-disabled .goog-menuitem-accel,",".blocklyWidgetDiv .goog-menuitem-disabled .goog-menuitem-content {","color: #ccc !important;","}",".blocklyWidgetDiv .goog-menuitem-disabled .goog-menuitem-icon {",
+"color: #000;","font: normal 13px Arial, sans-serif;","list-style: none;","margin: 0;","padding: 4px 7em 4px 28px;","white-space: nowrap;","}",".blocklyWidgetDiv .goog-menuitem.goog-menuitem-rtl {","padding-left: 7em;","padding-right: 28px;","}",".blocklyWidgetDiv .goog-menu-nocheckbox .goog-menuitem,",".blocklyWidgetDiv .goog-menu-noicon .goog-menuitem {","padding-left: 12px;","}",".blocklyWidgetDiv .goog-menu-noaccel .goog-menuitem {","padding-right: 20px;","}",".blocklyWidgetDiv .goog-menuitem-content {",
-"opacity: 0.3;","-moz-opacity: 0.3;","filter: alpha(opacity=30);","}",".blocklyWidgetDiv .goog-menuitem-highlight,",".blocklyWidgetDiv .goog-menuitem-hover {","background-color: #d6e9f8;","border-color: #d6e9f8;","border-style: dotted;","border-width: 1px 0;","padding-bottom: 3px;","padding-top: 3px;","}",".blocklyWidgetDiv .goog-menuitem-checkbox,",".blocklyWidgetDiv .goog-menuitem-icon {","background-repeat: no-repeat;","height: 16px;","left: 6px;","position: absolute;","right: auto;","vertical-align: middle;",
+"color: #000;","font: normal 13px Arial, sans-serif;","}",".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);","}",".blocklyWidgetDiv .goog-menuitem-highlight,",".blocklyWidgetDiv .goog-menuitem-hover {","background-color: #d6e9f8;","border-color: #d6e9f8;",
-"width: 16px;","}",".blocklyWidgetDiv .goog-menuitem-rtl .goog-menuitem-checkbox,",".blocklyWidgetDiv .goog-menuitem-rtl .goog-menuitem-icon {","left: auto;","right: 6px;","}",".blocklyWidgetDiv .goog-option-selected .goog-menuitem-checkbox,",".blocklyWidgetDiv .goog-option-selected .goog-menuitem-icon {","background: url(//ssl.gstatic.com/editor/editortoolbar.png) no-repeat -512px 0;","}",".blocklyWidgetDiv .goog-menuitem-accel {","color: #999;","direction: ltr;","left: auto;","padding: 0 6px;",
+"border-style: dotted;","border-width: 1px 0;","padding-bottom: 3px;","padding-top: 3px;","}",".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;","}",".blocklyWidgetDiv .goog-menuitem-rtl .goog-menuitem-checkbox,",".blocklyWidgetDiv .goog-menuitem-rtl .goog-menuitem-icon {","left: auto;","right: 6px;","}",".blocklyWidgetDiv .goog-option-selected .goog-menuitem-checkbox,",
-"position: absolute;","right: 0;","text-align: right;","}",".blocklyWidgetDiv .goog-menuitem-rtl .goog-menuitem-accel {","left: 0;","right: auto;","text-align: left;","}",".blocklyWidgetDiv .goog-menuitem-mnemonic-hint {","text-decoration: underline;","}",".blocklyWidgetDiv .goog-menuitem-mnemonic-separator {","color: #999;","font-size: 12px;","padding-left: 4px;","}",".blocklyWidgetDiv .goog-menuseparator {","border-top: 1px solid #ccc;","margin: 4px 0;","padding: 0;","}",""];Blockly.WidgetDiv={};Blockly.WidgetDiv.DIV=null;Blockly.WidgetDiv.owner_=null;Blockly.WidgetDiv.dispose_=null;Blockly.WidgetDiv.createDom=function(){Blockly.WidgetDiv.DIV||(Blockly.WidgetDiv.DIV=goog.dom.createDom("div","blocklyWidgetDiv"),document.body.appendChild(Blockly.WidgetDiv.DIV))};
+".blocklyWidgetDiv .goog-option-selected .goog-menuitem-icon {","background: url(//ssl.gstatic.com/editor/editortoolbar.png) no-repeat -512px 0;","}",".blocklyWidgetDiv .goog-menuitem-accel {","color: #999;","direction: ltr;","left: auto;","padding: 0 6px;","position: absolute;","right: 0;","text-align: right;","}",".blocklyWidgetDiv .goog-menuitem-rtl .goog-menuitem-accel {","left: 0;","right: auto;","text-align: left;","}",".blocklyWidgetDiv .goog-menuitem-mnemonic-hint {","text-decoration: underline;",
+"}",".blocklyWidgetDiv .goog-menuitem-mnemonic-separator {","color: #999;","font-size: 12px;","padding-left: 4px;","}",".blocklyWidgetDiv .goog-menuseparator {","border-top: 1px solid #ccc;","margin: 4px 0;","padding: 0;","}",""];Blockly.WidgetDiv={};Blockly.WidgetDiv.DIV=null;Blockly.WidgetDiv.owner_=null;Blockly.WidgetDiv.dispose_=null;Blockly.WidgetDiv.createDom=function(){Blockly.WidgetDiv.DIV||(Blockly.WidgetDiv.DIV=goog.dom.createDom("DIV","blocklyWidgetDiv"),document.body.appendChild(Blockly.WidgetDiv.DIV))};
 Blockly.WidgetDiv.show=function(a,b,c){Blockly.WidgetDiv.hide();Blockly.WidgetDiv.owner_=a;Blockly.WidgetDiv.dispose_=c;a=goog.style.getViewportPageOffset(document);Blockly.WidgetDiv.DIV.style.top=a.y+"px";Blockly.WidgetDiv.DIV.style.direction=b?"rtl":"ltr";Blockly.WidgetDiv.DIV.style.display="block"};
-Blockly.WidgetDiv.hide=function(){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.DIV.style.height="",Blockly.WidgetDiv.dispose_&&Blockly.WidgetDiv.dispose_(),Blockly.WidgetDiv.dispose_=null,goog.dom.removeChildren(Blockly.WidgetDiv.DIV))};Blockly.WidgetDiv.isVisible=function(){return!!Blockly.WidgetDiv.owner_};
+Blockly.WidgetDiv.hide=function(){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))};Blockly.WidgetDiv.isVisible=function(){return!!Blockly.WidgetDiv.owner_};Blockly.WidgetDiv.hideIfOwner=function(a){Blockly.WidgetDiv.owner_==a&&Blockly.WidgetDiv.hide()};
-Blockly.WidgetDiv.hideIfOwner=function(a){Blockly.WidgetDiv.owner_==a&&Blockly.WidgetDiv.hide()};Blockly.WidgetDiv.position=function(a,b,c,d,e){b<d.y&&(b=d.y);e?a>c.width+d.x&&(a=c.width+d.x):a<d.x&&(a=d.x);Blockly.WidgetDiv.DIV.style.left=a+"px";Blockly.WidgetDiv.DIV.style.top=b+"px";Blockly.WidgetDiv.DIV.style.height=c.height-b+d.y+"px"};Blockly.constants={};Blockly.DRAG_RADIUS=5;Blockly.SNAP_RADIUS=20;Blockly.BUMP_DELAY=250;Blockly.COLLAPSE_CHARS=30;Blockly.LONGPRESS=750;Blockly.SOUND_LIMIT=100;Blockly.HSV_SATURATION=.45;Blockly.HSV_VALUE=.65;Blockly.SPRITE={width:96,height:124,url:"sprites.png"};Blockly.SVG_NS="http://www.w3.org/2000/svg";Blockly.HTML_NS="http://www.w3.org/1999/xhtml";Blockly.INPUT_VALUE=1;Blockly.OUTPUT_VALUE=2;Blockly.NEXT_STATEMENT=3;Blockly.PREVIOUS_STATEMENT=4;Blockly.DUMMY_INPUT=5;Blockly.ALIGN_LEFT=-1;
+Blockly.WidgetDiv.position=function(a,b,c,d,e){b<d.y&&(b=d.y);e?a>c.width+d.x&&(a=c.width+d.x):a<d.x&&(a=d.x);Blockly.WidgetDiv.DIV.style.left=a+"px";Blockly.WidgetDiv.DIV.style.top=b+"px";Blockly.WidgetDiv.DIV.style.height=c.height+"px"};Blockly.constants={};Blockly.DRAG_RADIUS=5;Blockly.SNAP_RADIUS=20;Blockly.BUMP_DELAY=250;Blockly.COLLAPSE_CHARS=30;Blockly.LONGPRESS=750;Blockly.SOUND_LIMIT=100;Blockly.HSV_SATURATION=.45;Blockly.HSV_VALUE=.65;Blockly.SPRITE={width:96,height:124,url:"sprites.png"};Blockly.SVG_NS="http://www.w3.org/2000/svg";Blockly.HTML_NS="http://www.w3.org/1999/xhtml";Blockly.INPUT_VALUE=1;Blockly.OUTPUT_VALUE=2;Blockly.NEXT_STATEMENT=3;Blockly.PREVIOUS_STATEMENT=4;Blockly.DUMMY_INPUT=5;Blockly.ALIGN_LEFT=-1;
 Blockly.ALIGN_CENTRE=0;Blockly.ALIGN_RIGHT=1;Blockly.DRAG_NONE=0;Blockly.DRAG_STICKY=1;Blockly.DRAG_BEGIN=1;Blockly.DRAG_FREE=2;Blockly.OPPOSITE_TYPE=[];Blockly.OPPOSITE_TYPE[Blockly.INPUT_VALUE]=Blockly.OUTPUT_VALUE;Blockly.OPPOSITE_TYPE[Blockly.OUTPUT_VALUE]=Blockly.INPUT_VALUE;Blockly.OPPOSITE_TYPE[Blockly.NEXT_STATEMENT]=Blockly.PREVIOUS_STATEMENT;Blockly.OPPOSITE_TYPE[Blockly.PREVIOUS_STATEMENT]=Blockly.NEXT_STATEMENT;Blockly.TOOLBOX_AT_TOP=0;Blockly.TOOLBOX_AT_BOTTOM=1;
-Blockly.TOOLBOX_AT_LEFT=2;Blockly.TOOLBOX_AT_RIGHT=3;Blockly.inject=function(a,b){goog.isString(a)&&(a=document.getElementById(a)||document.querySelector(a));if(!goog.dom.contains(document,a))throw"Error: container is not in current document.";var c=new Blockly.Options(b||{}),d=Blockly.createDom_(a,c),c=Blockly.createMainWorkspace_(d,c);Blockly.init_(c);c.markFocused();Blockly.bindEvent_(d,"focus",c,c.markFocused);Blockly.svgResize(c);return c};
+Blockly.TOOLBOX_AT_LEFT=2;Blockly.TOOLBOX_AT_RIGHT=3;Blockly.inject=function(a,b){goog.isString(a)&&(a=document.getElementById(a)||document.querySelector(a));if(!goog.dom.contains(document,a))throw"Error: container is not in current document.";var c=new Blockly.Options(b||{}),d=goog.dom.createDom("div","injectionDiv");a.appendChild(d);d=Blockly.createDom_(d,c);c=Blockly.createMainWorkspace_(d,c);Blockly.init_(c);c.markFocused();Blockly.bindEvent_(d,"focus",c,c.markFocused);Blockly.svgResize(c);return c};
 Blockly.createDom_=function(a,b){a.setAttribute("dir","LTR");goog.ui.Component.setDefaultRightToLeft(b.RTL);Blockly.Css.inject(b.hasCss,b.pathToMedia);var c=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"},a),d=Blockly.createSvgElement("defs",{},c),e=String(Math.random()).substring(2),f=Blockly.createSvgElement("filter",{id:"blocklyEmbossFilter"+e},d);Blockly.createSvgElement("feGaussianBlur",
 {"in":"SourceAlpha",stdDeviation:1,result:"blur"},f);var g=Blockly.createSvgElement("feSpecularLighting",{"in":"blur",surfaceScale:1,specularConstant:.5,specularExponent:10,"lighting-color":"white",result:"specOut"},f);Blockly.createSvgElement("fePointLight",{x:-5E3,y:-1E4,z:2E4},g);Blockly.createSvgElement("feComposite",{"in":"specOut",in2:"SourceAlpha",operator:"in",result:"specOut"},f);Blockly.createSvgElement("feComposite",{"in":"SourceGraphic",in2:"specOut",operator:"arithmetic",k1:0,k2:1,k3:1,
 k4:0},f);b.embossFilterId=f.id;f=Blockly.createSvgElement("pattern",{id:"blocklyDisabledPattern"+e,patternUnits:"userSpaceOnUse",width:10,height:10},d);Blockly.createSvgElement("rect",{width:10,height:10,fill:"#aaa"},f);Blockly.createSvgElement("path",{d:"M 0 0 L 10 10 M 10 0 L 0 10",stroke:"#cc0"},f);b.disabledPatternId=f.id;d=Blockly.createSvgElement("pattern",{id:"blocklyGridPattern"+e,patternUnits:"userSpaceOnUse"},d);0<b.gridOptions.length&&0<b.gridOptions.spacing&&(Blockly.createSvgElement("line",
 {stroke:b.gridOptions.colour},d),1<b.gridOptions.length&&Blockly.createSvgElement("line",{stroke:b.gridOptions.colour},d));b.gridPattern=d;return c};
-Blockly.createMainWorkspace_=function(a,b){b.parentWorkspace=null;b.getMetrics=Blockly.getMainWorkspaceMetrics_;b.setMetrics=Blockly.setMainWorkspaceMetrics_;var c=new Blockly.WorkspaceSvg(b);c.scale=b.zoomOptions.startScale;a.appendChild(c.createDom("blocklyMainBackground"));c.translate(0,0);c.markFocused();b.readOnly||b.hasScrollbars||c.addChangeListener(function(){if(Blockly.dragMode_==Blockly.DRAG_NONE){var a=c.getMetrics(),e=a.viewLeft+a.absoluteLeft,f=a.viewTop+a.absoluteTop;if(a.contentTop<
+Blockly.createMainWorkspace_=function(a,b){b.parentWorkspace=null;var c=new Blockly.WorkspaceSvg(b);c.scale=b.zoomOptions.startScale;a.appendChild(c.createDom("blocklyMainBackground"));c.translate(0,0);c.markFocused();b.readOnly||b.hasScrollbars||c.addChangeListener(function(){if(Blockly.dragMode_==Blockly.DRAG_NONE){var a=c.getMetrics(),e=a.viewLeft+a.absoluteLeft,f=a.viewTop+a.absoluteTop;if(a.contentTop<f||a.contentTop+a.contentHeight>a.viewHeight+f||a.contentLeft<(b.RTL?a.viewLeft:e)||a.contentLeft+
-f||a.contentTop+a.contentHeight>a.viewHeight+f||a.contentLeft<(b.RTL?a.viewLeft:e)||a.contentLeft+a.contentWidth>(b.RTL?a.viewWidth:a.viewWidth+e))for(var g=c.getTopBlocks(!1),h=0,k;k=g[h];h++){var m=k.getRelativeToSurfaceXY(),p=k.getHeightWidth(),l=f+25-p.height-m.y;0<l&&k.moveBy(0,l);l=f+a.viewHeight-25-m.y;0>l&&k.moveBy(0,l);l=25+e-m.x-(b.RTL?0:p.width);0<l&&k.moveBy(l,0);m=e+a.viewWidth-25-m.x+(b.RTL?p.width:0);0>m&&k.moveBy(m,0)}}});Blockly.svgResize(c);Blockly.WidgetDiv.createDom();Blockly.Tooltip.createDom();
+a.contentWidth>(b.RTL?a.viewWidth:a.viewWidth+e))for(var g=c.getTopBlocks(!1),h=0,k;k=g[h];h++){var m=k.getRelativeToSurfaceXY(),p=k.getHeightWidth(),l=f+25-p.height-m.y;0<l&&k.moveBy(0,l);l=f+a.viewHeight-25-m.y;0>l&&k.moveBy(0,l);l=25+e-m.x-(b.RTL?0:p.width);0<l&&k.moveBy(l,0);m=e+a.viewWidth-25-m.x+(b.RTL?p.width:0);0>m&&k.moveBy(m,0)}}});Blockly.svgResize(c);Blockly.WidgetDiv.createDom();Blockly.Tooltip.createDom();return c};
-return c};
 Blockly.init_=function(a){var b=a.options,c=a.getParentSvg();Blockly.bindEvent_(c,"contextmenu",null,function(a){Blockly.isTargetInput_(a)||a.preventDefault()});c=Blockly.bindEvent_(window,"resize",null,function(){Blockly.hideChaff(!0);Blockly.svgResize(a)});a.setResizeHandlerWrapper(c);Blockly.inject.bindDocumentEvents_();b.languageTree&&(a.toolbox_?a.toolbox_.init(a):a.flyout_&&(a.flyout_.init(a),a.flyout_.show(b.languageTree.childNodes),a.flyout_.scrollToStart(),a.scrollX=a.flyout_.width_,b.toolboxPosition==
 Blockly.TOOLBOX_AT_RIGHT&&(a.scrollX*=-1),a.translate(a.scrollX,0)));b.hasScrollbars&&(a.scrollbar=new Blockly.ScrollbarPair(a),a.scrollbar.resize());b.hasSounds&&Blockly.inject.loadSounds_(b.pathToMedia,a)};
 Blockly.inject.bindDocumentEvents_=function(){Blockly.documentEventsBound_||(Blockly.bindEvent_(document,"keydown",null,Blockly.onKeyDown_),Blockly.bindEvent_(document,"touchend",null,Blockly.longStop_),Blockly.bindEvent_(document,"touchcancel",null,Blockly.longStop_),document.addEventListener("mouseup",Blockly.onMouseUp_,!1),goog.userAgent.IPAD&&Blockly.bindEvent_(window,"orientationchange",document,function(){Blockly.svgResize(Blockly.getMainWorkspace())}));Blockly.documentEventsBound_=!0};
@@ -1415,10 +1439,5 @@ Blockly.onKeyDown_=function(a){if(!Blockly.mainWorkspace.options.readOnly&&!Bloc
 86==a.keyCode?Blockly.clipboardXml_&&(Blockly.Events.setGroup(!0),Blockly.clipboardSource_.paste(Blockly.clipboardXml_),Blockly.Events.setGroup(!1)):90==a.keyCode&&(Blockly.hideChaff(),Blockly.mainWorkspace.undo(a.shiftKey));b&&(Blockly.Events.setGroup(!0),Blockly.hideChaff(),Blockly.selected.dispose(Blockly.dragMode_!=Blockly.DRAG_FREE,!0),Blockly.highlightedConnection_&&(Blockly.highlightedConnection_.unhighlight(),Blockly.highlightedConnection_=null),Blockly.Events.setGroup(!1))}};
 Blockly.terminateDrag_=function(){Blockly.BlockSvg.terminateDrag();Blockly.Flyout.terminateDrag_()};Blockly.longPid_=0;Blockly.longStart_=function(a,b){Blockly.longStop_();Blockly.longPid_=setTimeout(function(){a.button=2;b.onMouseDown_(a)},Blockly.LONGPRESS)};Blockly.longStop_=function(){Blockly.longPid_&&(clearTimeout(Blockly.longPid_),Blockly.longPid_=0)};
 Blockly.copy_=function(a){var b=Blockly.Xml.blockToDom(a);Blockly.dragMode_!=Blockly.DRAG_FREE&&Blockly.Xml.deleteNext(b);var c=a.getRelativeToSurfaceXY();b.setAttribute("x",a.RTL?-c.x:c.x);b.setAttribute("y",c.y);Blockly.clipboardXml_=b;Blockly.clipboardSource_=a.workspace};Blockly.duplicate_=function(a){var b=Blockly.clipboardXml_,c=Blockly.clipboardSource_;Blockly.copy_(a);a.workspace.paste(Blockly.clipboardXml_);Blockly.clipboardXml_=b;Blockly.clipboardSource_=c};
-Blockly.onContextMenu_=function(a){Blockly.isTargetInput_(a)||a.preventDefault()};Blockly.hideChaff=function(a){Blockly.Tooltip.hide();Blockly.WidgetDiv.hide();a||(a=Blockly.getMainWorkspace(),a.toolbox_&&a.toolbox_.flyout_&&a.toolbox_.flyout_.autoClose&&a.toolbox_.clearSelection())};
+Blockly.onContextMenu_=function(a){Blockly.isTargetInput_(a)||a.preventDefault()};Blockly.hideChaff=function(a){Blockly.Tooltip.hide();Blockly.WidgetDiv.hide();a||(a=Blockly.getMainWorkspace(),a.toolbox_&&a.toolbox_.flyout_&&a.toolbox_.flyout_.autoClose&&a.toolbox_.clearSelection())};Blockly.addChangeListener=function(a){console.warn("Deprecated call to Blockly.addChangeListener, use workspace.addChangeListener instead.");return Blockly.getMainWorkspace().addChangeListener(a)};
-Blockly.getMainWorkspaceMetrics_=function(){var a=Blockly.svgSize(this.getParentSvg());if(this.toolbox_)if(this.toolboxPosition==Blockly.TOOLBOX_AT_TOP||this.toolboxPosition==Blockly.TOOLBOX_AT_BOTTOM)a.height-=this.toolbox_.getHeight();else if(this.toolboxPosition==Blockly.TOOLBOX_AT_LEFT||this.toolboxPosition==Blockly.TOOLBOX_AT_RIGHT)a.width-=this.toolbox_.getWidth();var b=Blockly.Flyout.prototype.CORNER_RADIUS-1,c=a.width-b,d=a.height-b,e=this.getBlocksBoundingBox(),f=e.width*this.scale,g=e.height*
+Blockly.getMainWorkspace=function(){return Blockly.mainWorkspace};goog.global.console||(goog.global.console={log:function(){},warn:function(){}});goog.global.Blockly||(goog.global.Blockly={});goog.global.Blockly.getMainWorkspace=Blockly.getMainWorkspace;goog.global.Blockly.addChangeListener=Blockly.addChangeListener;
-this.scale,h=e.x*this.scale,k=e.y*this.scale;this.scrollbar?(b=Math.min(h-c/2,h+f-c),c=Math.max(h+f+c/2,h+c),f=Math.min(k-d/2,k+g-d),d=Math.max(k+g+d/2,k+d)):(b=e.x,c=b+e.width,f=e.y,d=f+e.height);e=0;this.toolbox_&&this.toolboxPosition==Blockly.TOOLBOX_AT_LEFT&&(e=this.toolbox_.getWidth());g=0;this.toolbox_&&this.toolboxPosition==Blockly.TOOLBOX_AT_TOP&&(g=this.toolbox_.getHeight());return{viewHeight:a.height,viewWidth:a.width,contentHeight:d-f,contentWidth:c-b,viewTop:-this.scrollY,viewLeft:-this.scrollX,
-contentTop:f,contentLeft:b,absoluteTop:g,absoluteLeft:e,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}};
-Blockly.setMainWorkspaceMetrics_=function(a){if(!this.scrollbar)throw"Attempt to set main workspace scroll without scrollbars.";var b=this.getMetrics();goog.isNumber(a.x)&&(this.scrollX=-b.contentWidth*a.x-b.contentLeft);goog.isNumber(a.y)&&(this.scrollY=-b.contentHeight*a.y-b.contentTop);a=this.scrollX+b.absoluteLeft;b=this.scrollY+b.absoluteTop;this.translate(a,b);this.options.gridPattern&&(this.options.gridPattern.setAttribute("x",a),this.options.gridPattern.setAttribute("y",b),goog.userAgent.IE&&
-this.updateGridPattern_())};Blockly.addChangeListener=function(a){console.warn("Deprecated call to Blockly.addChangeListener, use workspace.addChangeListener instead.");return Blockly.getMainWorkspace().addChangeListener(a)};Blockly.getMainWorkspace=function(){return Blockly.mainWorkspace};goog.global.console||(goog.global.console={log:function(){},warn:function(){}});goog.global.Blockly||(goog.global.Blockly={});goog.global.Blockly.getMainWorkspace=Blockly.getMainWorkspace;
-goog.global.Blockly.addChangeListener=Blockly.addChangeListener;

blocks/logic.js

@@ -274,10 +274,10 @@ Blockly.Blocks['logic_compare'] = {
     var rtlOperators = [
       ['=', 'EQ'],
       ['\u2260', 'NEQ'],
-      ['>', 'LT'],
+      ['\u200F<\u200F', 'LT'],
-      ['\u2265', 'LTE'],
+      ['\u200F\u2264\u200F', 'LTE'],
-      ['<', 'GT'],
+      ['\u200F>\u200F', 'GT'],
-      ['\u2264', 'GTE']
+      ['\u200F\u2265\u200F', 'GTE']
     ];
     var ltrOperators = [
       ['=', 'EQ'],

blocks/loops.js

@@ -178,9 +178,9 @@ Blockly.Blocks['controls_for'] = {
       var option = {enabled: true};
       var name = this.getFieldValue('VAR');
       option.text = Blockly.Msg.VARIABLES_SET_CREATE_GET.replace('%1', name);
-      var xmlField = goog.dom.createUntypedDom('field', null, name);
+      var xmlField = goog.dom.createDom('field', null, name);
       xmlField.setAttribute('name', 'VAR');
-      var xmlBlock = goog.dom.createUntypedDom('block', null, xmlField);
+      var xmlBlock = goog.dom.createDom('block', null, xmlField);
       xmlBlock.setAttribute('type', 'variables_get');
       option.callback = Blockly.ContextMenu.callbackFactory(this, xmlBlock);
       options.push(option);

blocks/math.js

@@ -325,7 +325,7 @@ Blockly.Blocks['math_change'] = {
       ],
       "previousStatement": null,
       "nextStatement": null,
-      "colour": Blockly.Blocks.math.HUE,
+      "colour": Blockly.Blocks.variables.HUE,
       "helpUrl": Blockly.Msg.MATH_CHANGE_HELPURL
     });
     // Assign 'this' to a variable for use in the tooltip closure below.

blocks/procedures.js

@@ -295,14 +295,14 @@ Blockly.Blocks['procedures_defnoreturn'] = {
     var option = {enabled: true};
     var name = this.getFieldValue('NAME');
     option.text = Blockly.Msg.PROCEDURES_CREATE_DO.replace('%1', name);
-    var xmlMutation = goog.dom.createUntypedDom('mutation');
+    var xmlMutation = goog.dom.createDom('mutation');
     xmlMutation.setAttribute('name', name);
     for (var i = 0; i < this.arguments_.length; i++) {
-      var xmlArg = goog.dom.createUntypedDom('arg');
+      var xmlArg = goog.dom.createDom('arg');
       xmlArg.setAttribute('name', this.arguments_[i]);
       xmlMutation.appendChild(xmlArg);
     }
-    var xmlBlock = goog.dom.createUntypedDom('block', null, xmlMutation);
+    var xmlBlock = goog.dom.createDom('block', null, xmlMutation);
     xmlBlock.setAttribute('type', this.callType_);
     option.callback = Blockly.ContextMenu.callbackFactory(this, xmlBlock);
     options.push(option);
@@ -313,9 +313,9 @@ Blockly.Blocks['procedures_defnoreturn'] = {
         var option = {enabled: true};
         var name = this.arguments_[i];
         option.text = Blockly.Msg.VARIABLES_SET_CREATE_GET.replace('%1', name);
-        var xmlField = goog.dom.createUntypedDom('field', null, name);
+        var xmlField = goog.dom.createDom('field', null, name);
         xmlField.setAttribute('name', 'VAR');
-        var xmlBlock = goog.dom.createUntypedDom('block', null, xmlField);
+        var xmlBlock = goog.dom.createDom('block', null, xmlField);
         xmlBlock.setAttribute('type', 'variables_get');
         option.callback = Blockly.ContextMenu.callbackFactory(this, xmlBlock);
         options.push(option);
@@ -400,14 +400,20 @@ Blockly.Blocks['procedures_mutatorarg'] = {
    * @this Blockly.Block
    */
   init: function() {
+    var field = new Blockly.FieldTextInput('x', this.validator_);
     this.appendDummyInput()
         .appendField(Blockly.Msg.PROCEDURES_MUTATORARG_TITLE)
-        .appendField(new Blockly.FieldTextInput('x', this.validator_), 'NAME');
+        .appendField(field, 'NAME');
     this.setPreviousStatement(true);
     this.setNextStatement(true);
     this.setColour(Blockly.Blocks.procedures.HUE);
     this.setTooltip(Blockly.Msg.PROCEDURES_MUTATORARG_TOOLTIP);
     this.contextMenu = false;
+
+    // Create the default variable when we drag the block in from the flyout.
+    // Have to do this after installing the field on the block.
+    field.onFinishEditing_ = this.createNewVar_;
+    field.onFinishEditing_('x');
   },
   /**
    * Obtain a valid name for the procedure.
@@ -421,6 +427,20 @@ Blockly.Blocks['procedures_mutatorarg'] = {
   validator_: function(newVar) {
     newVar = newVar.replace(/[\s\xa0]+/g, ' ').replace(/^ | $/g, '');
     return newVar || null;
+  },
+  /**
+   * Called when focusing away from the text field.
+   * Creates a new variable with this name.
+   * @param {string} newText The new variable name.
+   * @private
+   * @this Blockly.FieldTextInput
+   */
+  createNewVar_: function(newText) {
+    var source = this.sourceBlock_;
+    if (source && source.workspace && source.workspace.options
+        && source.workspace.options.parentWorkspace) {
+      source.workspace.options.parentWorkspace.createVariable(newText);
+    }
   }
 };
 
@@ -687,8 +707,8 @@ Blockly.Blocks['procedures_callnoreturn'] = {
          *   </block>
          * </xml>
          */
-        var xml = goog.dom.createUntypedDom('xml');
+        var xml = goog.dom.createDom('xml');
-        var block = goog.dom.createUntypedDom('block');
+        var block = goog.dom.createDom('block');
         block.setAttribute('type', this.defType_);
         var xy = this.getRelativeToSurfaceXY();
         var x = xy.x + Blockly.SNAP_RADIUS * (this.RTL ? -1 : 1);
@@ -697,7 +717,7 @@ Blockly.Blocks['procedures_callnoreturn'] = {
         block.setAttribute('y', y);
         var mutation = this.mutationToDom();
         block.appendChild(mutation);
-        var field = goog.dom.createUntypedDom('field');
+        var field = goog.dom.createDom('field');
         field.setAttribute('name', 'NAME');
         field.appendChild(document.createTextNode(this.getProcedureCall()));
         block.appendChild(field);

blocks/variables.js

@@ -59,9 +59,9 @@ Blockly.Blocks['variables_get'] = {
     var option = {enabled: true};
     var name = this.getFieldValue('VAR');
     option.text = this.contextMenuMsg_.replace('%1', name);
-    var xmlField = goog.dom.createUntypedDom('field', null, name);
+    var xmlField = goog.dom.createDom('field', null, name);
     xmlField.setAttribute('name', 'VAR');
-    var xmlBlock = goog.dom.createUntypedDom('block', null, xmlField);
+    var xmlBlock = goog.dom.createDom('block', null, xmlField);
     xmlBlock.setAttribute('type', this.contextMenuType_);
     option.callback = Blockly.ContextMenu.callbackFactory(this, xmlBlock);
     options.push(option);

blocks_compressed.js

@@ -24,15 +24,15 @@ Blockly.Blocks.lists_getIndex={init:function(){var a=[[Blockly.Msg.LISTS_GET_IND
 this.setColour(Blockly.Blocks.lists.HUE);a=new Blockly.FieldDropdown(a,function(a){this.sourceBlock_.updateStatement_("REMOVE"==a)});this.appendValueInput("VALUE").setCheck("Array").appendField(Blockly.Msg.LISTS_GET_INDEX_INPUT_IN_LIST);this.appendDummyInput().appendField(a,"MODE").appendField("","SPACE");this.appendDummyInput("AT");Blockly.Msg.LISTS_GET_INDEX_TAIL&&this.appendDummyInput("TAIL").appendField(Blockly.Msg.LISTS_GET_INDEX_TAIL);this.setInputsInline(!0);this.setOutput(!0);this.updateAt_(!0);
 var b=this;this.setTooltip(function(){var a=b.getFieldValue("MODE"),e=b.getFieldValue("WHERE"),d="";switch(a+" "+e){case "GET FROM_START":case "GET FROM_END":d=Blockly.Msg.LISTS_GET_INDEX_TOOLTIP_GET_FROM;break;case "GET FIRST":d=Blockly.Msg.LISTS_GET_INDEX_TOOLTIP_GET_FIRST;break;case "GET LAST":d=Blockly.Msg.LISTS_GET_INDEX_TOOLTIP_GET_LAST;break;case "GET RANDOM":d=Blockly.Msg.LISTS_GET_INDEX_TOOLTIP_GET_RANDOM;break;case "GET_REMOVE FROM_START":case "GET_REMOVE FROM_END":d=Blockly.Msg.LISTS_GET_INDEX_TOOLTIP_GET_REMOVE_FROM;
 break;case "GET_REMOVE FIRST":d=Blockly.Msg.LISTS_GET_INDEX_TOOLTIP_GET_REMOVE_FIRST;break;case "GET_REMOVE LAST":d=Blockly.Msg.LISTS_GET_INDEX_TOOLTIP_GET_REMOVE_LAST;break;case "GET_REMOVE RANDOM":d=Blockly.Msg.LISTS_GET_INDEX_TOOLTIP_GET_REMOVE_RANDOM;break;case "REMOVE FROM_START":case "REMOVE FROM_END":d=Blockly.Msg.LISTS_GET_INDEX_TOOLTIP_REMOVE_FROM;break;case "REMOVE FIRST":d=Blockly.Msg.LISTS_GET_INDEX_TOOLTIP_REMOVE_FIRST;break;case "REMOVE LAST":d=Blockly.Msg.LISTS_GET_INDEX_TOOLTIP_REMOVE_LAST;
-break;case "REMOVE RANDOM":d=Blockly.Msg.LISTS_GET_INDEX_TOOLTIP_REMOVE_RANDOM}"FROM_START"==e?d+="  "+Blockly.Msg.LISTS_INDEX_FROM_START_TOOLTIP.replace("%1",Blockly.Blocks.ONE_BASED_INDEXING?"#1":"#0"):"FROM_END"==e&&(d+="  "+Blockly.Msg.LISTS_INDEX_FROM_END_TOOLTIP.replace("%1","#1"));return d})},mutationToDom:function(){var a=document.createElement("mutation");a.setAttribute("statement",!this.outputConnection);var b=this.getInput("AT").type==Blockly.INPUT_VALUE;a.setAttribute("at",b);return a},
+break;case "REMOVE RANDOM":d=Blockly.Msg.LISTS_GET_INDEX_TOOLTIP_REMOVE_RANDOM}if("FROM_START"==e||"FROM_END"==e)d+="  "+Blockly.Msg.LISTS_INDEX_FROM_START_TOOLTIP.replace("%1",Blockly.Blocks.ONE_BASED_INDEXING?"#1":"#0");return d})},mutationToDom:function(){var a=document.createElement("mutation");a.setAttribute("statement",!this.outputConnection);var b=this.getInput("AT").type==Blockly.INPUT_VALUE;a.setAttribute("at",b);return a},domToMutation:function(a){var b="true"==a.getAttribute("statement");
-domToMutation:function(a){var b="true"==a.getAttribute("statement");this.updateStatement_(b);a="false"!=a.getAttribute("at");this.updateAt_(a)},updateStatement_:function(a){a!=!this.outputConnection&&(this.unplug(!0,!0),a?(this.setOutput(!1),this.setPreviousStatement(!0),this.setNextStatement(!0)):(this.setPreviousStatement(!1),this.setNextStatement(!1),this.setOutput(!0)))},updateAt_:function(a){this.removeInput("AT");this.removeInput("ORDINAL",!0);a?(this.appendValueInput("AT").setCheck("Number"),
+this.updateStatement_(b);a="false"!=a.getAttribute("at");this.updateAt_(a)},updateStatement_:function(a){a!=!this.outputConnection&&(this.unplug(!0,!0),a?(this.setOutput(!1),this.setPreviousStatement(!0),this.setNextStatement(!0)):(this.setPreviousStatement(!1),this.setNextStatement(!1),this.setOutput(!0)))},updateAt_:function(a){this.removeInput("AT");this.removeInput("ORDINAL",!0);a?(this.appendValueInput("AT").setCheck("Number"),Blockly.Msg.ORDINAL_NUMBER_SUFFIX&&this.appendDummyInput("ORDINAL").appendField(Blockly.Msg.ORDINAL_NUMBER_SUFFIX)):
-Blockly.Msg.ORDINAL_NUMBER_SUFFIX&&this.appendDummyInput("ORDINAL").appendField(Blockly.Msg.ORDINAL_NUMBER_SUFFIX)):this.appendDummyInput("AT");var b=new Blockly.FieldDropdown(this.WHERE_OPTIONS,function(b){var e="FROM_START"==b||"FROM_END"==b;if(e!=a){var d=this.sourceBlock_;d.updateAt_(e);d.setFieldValue(b,"WHERE");return null}});this.getInput("AT").appendField(b,"WHERE");Blockly.Msg.LISTS_GET_INDEX_TAIL&&this.moveInputBefore("TAIL",null)}};
+this.appendDummyInput("AT");var b=new Blockly.FieldDropdown(this.WHERE_OPTIONS,function(b){var e="FROM_START"==b||"FROM_END"==b;if(e!=a){var d=this.sourceBlock_;d.updateAt_(e);d.setFieldValue(b,"WHERE");return null}});this.getInput("AT").appendField(b,"WHERE");Blockly.Msg.LISTS_GET_INDEX_TAIL&&this.moveInputBefore("TAIL",null)}};
 Blockly.Blocks.lists_setIndex={init:function(){var a=[[Blockly.Msg.LISTS_SET_INDEX_SET,"SET"],[Blockly.Msg.LISTS_SET_INDEX_INSERT,"INSERT"]];this.WHERE_OPTIONS=[[Blockly.Msg.LISTS_GET_INDEX_FROM_START,"FROM_START"],[Blockly.Msg.LISTS_GET_INDEX_FROM_END,"FROM_END"],[Blockly.Msg.LISTS_GET_INDEX_FIRST,"FIRST"],[Blockly.Msg.LISTS_GET_INDEX_LAST,"LAST"],[Blockly.Msg.LISTS_GET_INDEX_RANDOM,"RANDOM"]];this.setHelpUrl(Blockly.Msg.LISTS_SET_INDEX_HELPURL);this.setColour(Blockly.Blocks.lists.HUE);this.appendValueInput("LIST").setCheck("Array").appendField(Blockly.Msg.LISTS_SET_INDEX_INPUT_IN_LIST);
 this.appendDummyInput().appendField(new Blockly.FieldDropdown(a),"MODE").appendField("","SPACE");this.appendDummyInput("AT");this.appendValueInput("TO").appendField(Blockly.Msg.LISTS_SET_INDEX_INPUT_TO);this.setInputsInline(!0);this.setPreviousStatement(!0);this.setNextStatement(!0);this.setTooltip(Blockly.Msg.LISTS_SET_INDEX_TOOLTIP);this.updateAt_(!0);var b=this;this.setTooltip(function(){var a=b.getFieldValue("MODE"),e=b.getFieldValue("WHERE"),d="";switch(a+" "+e){case "SET FROM_START":case "SET FROM_END":d=
 Blockly.Msg.LISTS_SET_INDEX_TOOLTIP_SET_FROM;break;case "SET FIRST":d=Blockly.Msg.LISTS_SET_INDEX_TOOLTIP_SET_FIRST;break;case "SET LAST":d=Blockly.Msg.LISTS_SET_INDEX_TOOLTIP_SET_LAST;break;case "SET RANDOM":d=Blockly.Msg.LISTS_SET_INDEX_TOOLTIP_SET_RANDOM;break;case "INSERT FROM_START":case "INSERT FROM_END":d=Blockly.Msg.LISTS_SET_INDEX_TOOLTIP_INSERT_FROM;break;case "INSERT FIRST":d=Blockly.Msg.LISTS_SET_INDEX_TOOLTIP_INSERT_FIRST;break;case "INSERT LAST":d=Blockly.Msg.LISTS_SET_INDEX_TOOLTIP_INSERT_LAST;
-break;case "INSERT RANDOM":d=Blockly.Msg.LISTS_SET_INDEX_TOOLTIP_INSERT_RANDOM}"FROM_START"==e?d+="  "+Blockly.Msg.LISTS_INDEX_FROM_START_TOOLTIP.replace("%1",Blockly.Blocks.ONE_BASED_INDEXING?"#1":"#0"):"FROM_END"==e&&(d+="  "+Blockly.Msg.LISTS_INDEX_FROM_END_TOOLTIP.replace("%1","#1"));return d})},mutationToDom:function(){var a=document.createElement("mutation"),b=this.getInput("AT").type==Blockly.INPUT_VALUE;a.setAttribute("at",b);return a},domToMutation:function(a){a="false"!=a.getAttribute("at");
+break;case "INSERT RANDOM":d=Blockly.Msg.LISTS_SET_INDEX_TOOLTIP_INSERT_RANDOM}if("FROM_START"==e||"FROM_END"==e)d+="  "+Blockly.Msg.LISTS_INDEX_FROM_START_TOOLTIP.replace("%1",Blockly.Blocks.ONE_BASED_INDEXING?"#1":"#0");return d})},mutationToDom:function(){var a=document.createElement("mutation"),b=this.getInput("AT").type==Blockly.INPUT_VALUE;a.setAttribute("at",b);return a},domToMutation:function(a){a="false"!=a.getAttribute("at");this.updateAt_(a)},updateAt_:function(a){this.removeInput("AT");
-this.updateAt_(a)},updateAt_:function(a){this.removeInput("AT");this.removeInput("ORDINAL",!0);a?(this.appendValueInput("AT").setCheck("Number"),Blockly.Msg.ORDINAL_NUMBER_SUFFIX&&this.appendDummyInput("ORDINAL").appendField(Blockly.Msg.ORDINAL_NUMBER_SUFFIX)):this.appendDummyInput("AT");var b=new Blockly.FieldDropdown(this.WHERE_OPTIONS,function(b){var e="FROM_START"==b||"FROM_END"==b;if(e!=a){var d=this.sourceBlock_;d.updateAt_(e);d.setFieldValue(b,"WHERE");return null}});this.moveInputBefore("AT",
+this.removeInput("ORDINAL",!0);a?(this.appendValueInput("AT").setCheck("Number"),Blockly.Msg.ORDINAL_NUMBER_SUFFIX&&this.appendDummyInput("ORDINAL").appendField(Blockly.Msg.ORDINAL_NUMBER_SUFFIX)):this.appendDummyInput("AT");var b=new Blockly.FieldDropdown(this.WHERE_OPTIONS,function(b){var e="FROM_START"==b||"FROM_END"==b;if(e!=a){var d=this.sourceBlock_;d.updateAt_(e);d.setFieldValue(b,"WHERE");return null}});this.moveInputBefore("AT","TO");this.getInput("ORDINAL")&&this.moveInputBefore("ORDINAL",
-"TO");this.getInput("ORDINAL")&&this.moveInputBefore("ORDINAL","TO");this.getInput("AT").appendField(b,"WHERE")}};
+"TO");this.getInput("AT").appendField(b,"WHERE")}};
 Blockly.Blocks.lists_getSublist={init:function(){this.WHERE_OPTIONS_1=[[Blockly.Msg.LISTS_GET_SUBLIST_START_FROM_START,"FROM_START"],[Blockly.Msg.LISTS_GET_SUBLIST_START_FROM_END,"FROM_END"],[Blockly.Msg.LISTS_GET_SUBLIST_START_FIRST,"FIRST"]];this.WHERE_OPTIONS_2=[[Blockly.Msg.LISTS_GET_SUBLIST_END_FROM_START,"FROM_START"],[Blockly.Msg.LISTS_GET_SUBLIST_END_FROM_END,"FROM_END"],[Blockly.Msg.LISTS_GET_SUBLIST_END_LAST,"LAST"]];this.setHelpUrl(Blockly.Msg.LISTS_GET_SUBLIST_HELPURL);this.setColour(Blockly.Blocks.lists.HUE);
 this.appendValueInput("LIST").setCheck("Array").appendField(Blockly.Msg.LISTS_GET_SUBLIST_INPUT_IN_LIST);this.appendDummyInput("AT1");this.appendDummyInput("AT2");Blockly.Msg.LISTS_GET_SUBLIST_TAIL&&this.appendDummyInput("TAIL").appendField(Blockly.Msg.LISTS_GET_SUBLIST_TAIL);this.setInputsInline(!0);this.setOutput(!0,"Array");this.updateAt_(1,!0);this.updateAt_(2,!0);this.setTooltip(Blockly.Msg.LISTS_GET_SUBLIST_TOOLTIP)},mutationToDom:function(){var a=document.createElement("mutation"),b=this.getInput("AT1").type==
 Blockly.INPUT_VALUE;a.setAttribute("at1",b);b=this.getInput("AT2").type==Blockly.INPUT_VALUE;a.setAttribute("at2",b);return a},domToMutation:function(a){var b="true"==a.getAttribute("at1");a="true"==a.getAttribute("at2");this.updateAt_(1,b);this.updateAt_(2,a)},updateAt_:function(a,b){this.removeInput("AT"+a);this.removeInput("ORDINAL"+a,!0);b?(this.appendValueInput("AT"+a).setCheck("Number"),Blockly.Msg.ORDINAL_NUMBER_SUFFIX&&this.appendDummyInput("ORDINAL"+a).appendField(Blockly.Msg.ORDINAL_NUMBER_SUFFIX)):
@@ -51,9 +51,9 @@ compose:function(a){var b=a.nextConnection.targetBlock();this.elseCount_=this.el
 Blockly.Blocks.controls_if_if={init:function(){this.setColour(Blockly.Blocks.logic.HUE);this.appendDummyInput().appendField(Blockly.Msg.CONTROLS_IF_IF_TITLE_IF);this.setNextStatement(!0);this.setTooltip(Blockly.Msg.CONTROLS_IF_IF_TOOLTIP);this.contextMenu=!1}};
 Blockly.Blocks.controls_if_elseif={init:function(){this.setColour(Blockly.Blocks.logic.HUE);this.appendDummyInput().appendField(Blockly.Msg.CONTROLS_IF_ELSEIF_TITLE_ELSEIF);this.setPreviousStatement(!0);this.setNextStatement(!0);this.setTooltip(Blockly.Msg.CONTROLS_IF_ELSEIF_TOOLTIP);this.contextMenu=!1}};
 Blockly.Blocks.controls_if_else={init:function(){this.setColour(Blockly.Blocks.logic.HUE);this.appendDummyInput().appendField(Blockly.Msg.CONTROLS_IF_ELSE_TITLE_ELSE);this.setPreviousStatement(!0);this.setTooltip(Blockly.Msg.CONTROLS_IF_ELSE_TOOLTIP);this.contextMenu=!1}};
-Blockly.Blocks.logic_compare={init:function(){var a=[["=","EQ"],["\u2260","NEQ"],[">","LT"],["\u2265","LTE"],["<","GT"],["\u2264","GTE"]],b=[["=","EQ"],["\u2260","NEQ"],["<","LT"],["\u2264","LTE"],[">","GT"],["\u2265","GTE"]],a=this.RTL?a:b;this.setHelpUrl(Blockly.Msg.LOGIC_COMPARE_HELPURL);this.setColour(Blockly.Blocks.logic.HUE);this.setOutput(!0,"Boolean");this.appendValueInput("A");this.appendValueInput("B").appendField(new Blockly.FieldDropdown(a),"OP");this.setInputsInline(!0);var c=this;this.setTooltip(function(){var a=
+Blockly.Blocks.logic_compare={init:function(){var a=[["=","EQ"],["\u2260","NEQ"],["\u200f<\u200f","LT"],["\u200f\u2264\u200f","LTE"],["\u200f>\u200f","GT"],["\u200f\u2265\u200f","GTE"]],b=[["=","EQ"],["\u2260","NEQ"],["<","LT"],["\u2264","LTE"],[">","GT"],["\u2265","GTE"]],a=this.RTL?a:b;this.setHelpUrl(Blockly.Msg.LOGIC_COMPARE_HELPURL);this.setColour(Blockly.Blocks.logic.HUE);this.setOutput(!0,"Boolean");this.appendValueInput("A");this.appendValueInput("B").appendField(new Blockly.FieldDropdown(a),
-c.getFieldValue("OP");return{EQ:Blockly.Msg.LOGIC_COMPARE_TOOLTIP_EQ,NEQ:Blockly.Msg.LOGIC_COMPARE_TOOLTIP_NEQ,LT:Blockly.Msg.LOGIC_COMPARE_TOOLTIP_LT,LTE:Blockly.Msg.LOGIC_COMPARE_TOOLTIP_LTE,GT:Blockly.Msg.LOGIC_COMPARE_TOOLTIP_GT,GTE:Blockly.Msg.LOGIC_COMPARE_TOOLTIP_GTE}[a]});this.prevBlocks_=[null,null]},onchange:function(a){var b=this.getInputTargetBlock("A"),c=this.getInputTargetBlock("B");if(b&&c&&!b.outputConnection.checkType_(c.outputConnection)){Blockly.Events.setGroup(a.group);for(a=0;a<
+"OP");this.setInputsInline(!0);var c=this;this.setTooltip(function(){var a=c.getFieldValue("OP");return{EQ:Blockly.Msg.LOGIC_COMPARE_TOOLTIP_EQ,NEQ:Blockly.Msg.LOGIC_COMPARE_TOOLTIP_NEQ,LT:Blockly.Msg.LOGIC_COMPARE_TOOLTIP_LT,LTE:Blockly.Msg.LOGIC_COMPARE_TOOLTIP_LTE,GT:Blockly.Msg.LOGIC_COMPARE_TOOLTIP_GT,GTE:Blockly.Msg.LOGIC_COMPARE_TOOLTIP_GTE}[a]});this.prevBlocks_=[null,null]},onchange:function(a){var b=this.getInputTargetBlock("A"),c=this.getInputTargetBlock("B");if(b&&c&&!b.outputConnection.checkType_(c.outputConnection)){Blockly.Events.setGroup(a.group);
-this.prevBlocks_.length;a++){var e=this.prevBlocks_[a];if(e===b||e===c)e.unplug(),e.bumpNeighbours_()}Blockly.Events.setGroup(!1)}this.prevBlocks_[0]=b;this.prevBlocks_[1]=c}};
+for(a=0;a<this.prevBlocks_.length;a++){var e=this.prevBlocks_[a];if(e===b||e===c)e.unplug(),e.bumpNeighbours_()}Blockly.Events.setGroup(!1)}this.prevBlocks_[0]=b;this.prevBlocks_[1]=c}};
 Blockly.Blocks.logic_operation={init:function(){var a=[[Blockly.Msg.LOGIC_OPERATION_AND,"AND"],[Blockly.Msg.LOGIC_OPERATION_OR,"OR"]];this.setHelpUrl(Blockly.Msg.LOGIC_OPERATION_HELPURL);this.setColour(Blockly.Blocks.logic.HUE);this.setOutput(!0,"Boolean");this.appendValueInput("A").setCheck("Boolean");this.appendValueInput("B").setCheck("Boolean").appendField(new Blockly.FieldDropdown(a),"OP");this.setInputsInline(!0);var b=this;this.setTooltip(function(){var a=b.getFieldValue("OP");return{AND:Blockly.Msg.LOGIC_OPERATION_TOOLTIP_AND,
 OR:Blockly.Msg.LOGIC_OPERATION_TOOLTIP_OR}[a]})}};Blockly.Blocks.logic_negate={init:function(){this.jsonInit({message0:Blockly.Msg.LOGIC_NEGATE_TITLE,args0:[{type:"input_value",name:"BOOL",check:"Boolean"}],output:"Boolean",colour:Blockly.Blocks.logic.HUE,tooltip:Blockly.Msg.LOGIC_NEGATE_TOOLTIP,helpUrl:Blockly.Msg.LOGIC_NEGATE_HELPURL})}};
 Blockly.Blocks.logic_boolean={init:function(){this.jsonInit({message0:"%1",args0:[{type:"field_dropdown",name:"BOOL",options:[[Blockly.Msg.LOGIC_BOOLEAN_TRUE,"TRUE"],[Blockly.Msg.LOGIC_BOOLEAN_FALSE,"FALSE"]]}],output:"Boolean",colour:Blockly.Blocks.logic.HUE,tooltip:Blockly.Msg.LOGIC_BOOLEAN_TOOLTIP,helpUrl:Blockly.Msg.LOGIC_BOOLEAN_HELPURL})}};
@@ -78,7 +78,7 @@ a.getFieldValue("OP");return{SIN:Blockly.Msg.MATH_TRIG_TOOLTIP_SIN,COS:Blockly.M
 Blockly.Blocks.math_constant={init:function(){this.jsonInit({message0:"%1",args0:[{type:"field_dropdown",name:"CONSTANT",options:[["\u03c0","PI"],["e","E"],["\u03c6","GOLDEN_RATIO"],["sqrt(2)","SQRT2"],["sqrt(\u00bd)","SQRT1_2"],["\u221e","INFINITY"]]}],output:"Number",colour:Blockly.Blocks.math.HUE,tooltip:Blockly.Msg.MATH_CONSTANT_TOOLTIP,helpUrl:Blockly.Msg.MATH_CONSTANT_HELPURL})}};
 Blockly.Blocks.math_number_property={init:function(){var a=[[Blockly.Msg.MATH_IS_EVEN,"EVEN"],[Blockly.Msg.MATH_IS_ODD,"ODD"],[Blockly.Msg.MATH_IS_PRIME,"PRIME"],[Blockly.Msg.MATH_IS_WHOLE,"WHOLE"],[Blockly.Msg.MATH_IS_POSITIVE,"POSITIVE"],[Blockly.Msg.MATH_IS_NEGATIVE,"NEGATIVE"],[Blockly.Msg.MATH_IS_DIVISIBLE_BY,"DIVISIBLE_BY"]];this.setColour(Blockly.Blocks.math.HUE);this.appendValueInput("NUMBER_TO_CHECK").setCheck("Number");a=new Blockly.FieldDropdown(a,function(a){this.sourceBlock_.updateShape_("DIVISIBLE_BY"==
 a)});this.appendDummyInput().appendField(a,"PROPERTY");this.setInputsInline(!0);this.setOutput(!0,"Boolean");this.setTooltip(Blockly.Msg.MATH_IS_TOOLTIP)},mutationToDom:function(){var a=document.createElement("mutation"),b="DIVISIBLE_BY"==this.getFieldValue("PROPERTY");a.setAttribute("divisor_input",b);return a},domToMutation:function(a){a="true"==a.getAttribute("divisor_input");this.updateShape_(a)},updateShape_:function(a){var b=this.getInput("DIVISOR");a?b||this.appendValueInput("DIVISOR").setCheck("Number"):
-b&&this.removeInput("DIVISOR")}};Blockly.Blocks.math_change={init:function(){this.jsonInit({message0:Blockly.Msg.MATH_CHANGE_TITLE,args0:[{type:"field_variable",name:"VAR",variable:Blockly.Msg.MATH_CHANGE_TITLE_ITEM},{type:"input_value",name:"DELTA",check:"Number"}],previousStatement:null,nextStatement:null,colour:Blockly.Blocks.math.HUE,helpUrl:Blockly.Msg.MATH_CHANGE_HELPURL});var a=this;this.setTooltip(function(){return Blockly.Msg.MATH_CHANGE_TOOLTIP.replace("%1",a.getFieldValue("VAR"))})}};
+b&&this.removeInput("DIVISOR")}};Blockly.Blocks.math_change={init:function(){this.jsonInit({message0:Blockly.Msg.MATH_CHANGE_TITLE,args0:[{type:"field_variable",name:"VAR",variable:Blockly.Msg.MATH_CHANGE_TITLE_ITEM},{type:"input_value",name:"DELTA",check:"Number"}],previousStatement:null,nextStatement:null,colour:Blockly.Blocks.variables.HUE,helpUrl:Blockly.Msg.MATH_CHANGE_HELPURL});var a=this;this.setTooltip(function(){return Blockly.Msg.MATH_CHANGE_TOOLTIP.replace("%1",a.getFieldValue("VAR"))})}};
 Blockly.Blocks.math_round={init:function(){this.jsonInit({message0:"%1 %2",args0:[{type:"field_dropdown",name:"OP",options:[[Blockly.Msg.MATH_ROUND_OPERATOR_ROUND,"ROUND"],[Blockly.Msg.MATH_ROUND_OPERATOR_ROUNDUP,"ROUNDUP"],[Blockly.Msg.MATH_ROUND_OPERATOR_ROUNDDOWN,"ROUNDDOWN"]]},{type:"input_value",name:"NUM",check:"Number"}],output:"Number",colour:Blockly.Blocks.math.HUE,tooltip:Blockly.Msg.MATH_ROUND_TOOLTIP,helpUrl:Blockly.Msg.MATH_ROUND_HELPURL})}};
 Blockly.Blocks.math_on_list={init:function(){var a=[[Blockly.Msg.MATH_ONLIST_OPERATOR_SUM,"SUM"],[Blockly.Msg.MATH_ONLIST_OPERATOR_MIN,"MIN"],[Blockly.Msg.MATH_ONLIST_OPERATOR_MAX,"MAX"],[Blockly.Msg.MATH_ONLIST_OPERATOR_AVERAGE,"AVERAGE"],[Blockly.Msg.MATH_ONLIST_OPERATOR_MEDIAN,"MEDIAN"],[Blockly.Msg.MATH_ONLIST_OPERATOR_MODE,"MODE"],[Blockly.Msg.MATH_ONLIST_OPERATOR_STD_DEV,"STD_DEV"],[Blockly.Msg.MATH_ONLIST_OPERATOR_RANDOM,"RANDOM"]],b=this;this.setHelpUrl(Blockly.Msg.MATH_ONLIST_HELPURL);this.setColour(Blockly.Blocks.math.HUE);
 this.setOutput(!0,"Number");a=new Blockly.FieldDropdown(a,function(a){b.updateType_(a)});this.appendValueInput("LIST").setCheck("Array").appendField(a,"OP");this.setTooltip(function(){var a=b.getFieldValue("OP");return{SUM:Blockly.Msg.MATH_ONLIST_TOOLTIP_SUM,MIN:Blockly.Msg.MATH_ONLIST_TOOLTIP_MIN,MAX:Blockly.Msg.MATH_ONLIST_TOOLTIP_MAX,AVERAGE:Blockly.Msg.MATH_ONLIST_TOOLTIP_AVERAGE,MEDIAN:Blockly.Msg.MATH_ONLIST_TOOLTIP_MEDIAN,MODE:Blockly.Msg.MATH_ONLIST_TOOLTIP_MODE,STD_DEV:Blockly.Msg.MATH_ONLIST_TOOLTIP_STD_DEV,
@@ -100,7 +100,8 @@ Blockly.Blocks.procedures_defreturn={init:function(){var a=new Blockly.FieldText
 this.setCommentText(Blockly.Msg.PROCEDURES_DEFRETURN_COMMENT);this.setColour(Blockly.Blocks.procedures.HUE);this.setTooltip(Blockly.Msg.PROCEDURES_DEFRETURN_TOOLTIP);this.setHelpUrl(Blockly.Msg.PROCEDURES_DEFRETURN_HELPURL);this.arguments_=[];this.setStatements_(!0);this.statementConnection_=null},setStatements_:Blockly.Blocks.procedures_defnoreturn.setStatements_,updateParams_:Blockly.Blocks.procedures_defnoreturn.updateParams_,mutationToDom:Blockly.Blocks.procedures_defnoreturn.mutationToDom,domToMutation:Blockly.Blocks.procedures_defnoreturn.domToMutation,
 decompose:Blockly.Blocks.procedures_defnoreturn.decompose,compose:Blockly.Blocks.procedures_defnoreturn.compose,getProcedureDef:function(){return[this.getFieldValue("NAME"),this.arguments_,!0]},getVars:Blockly.Blocks.procedures_defnoreturn.getVars,renameVar:Blockly.Blocks.procedures_defnoreturn.renameVar,customContextMenu:Blockly.Blocks.procedures_defnoreturn.customContextMenu,callType_:"procedures_callreturn"};
 Blockly.Blocks.procedures_mutatorcontainer={init:function(){this.appendDummyInput().appendField(Blockly.Msg.PROCEDURES_MUTATORCONTAINER_TITLE);this.appendStatementInput("STACK");this.appendDummyInput("STATEMENT_INPUT").appendField(Blockly.Msg.PROCEDURES_ALLOW_STATEMENTS).appendField(new Blockly.FieldCheckbox("TRUE"),"STATEMENTS");this.setColour(Blockly.Blocks.procedures.HUE);this.setTooltip(Blockly.Msg.PROCEDURES_MUTATORCONTAINER_TOOLTIP);this.contextMenu=!1}};
-Blockly.Blocks.procedures_mutatorarg={init:function(){this.appendDummyInput().appendField(Blockly.Msg.PROCEDURES_MUTATORARG_TITLE).appendField(new Blockly.FieldTextInput("x",this.validator_),"NAME");this.setPreviousStatement(!0);this.setNextStatement(!0);this.setColour(Blockly.Blocks.procedures.HUE);this.setTooltip(Blockly.Msg.PROCEDURES_MUTATORARG_TOOLTIP);this.contextMenu=!1},validator_:function(a){return(a=a.replace(/[\s\xa0]+/g," ").replace(/^ | $/g,""))||null}};
+Blockly.Blocks.procedures_mutatorarg={init:function(){var a=new Blockly.FieldTextInput("x",this.validator_);this.appendDummyInput().appendField(Blockly.Msg.PROCEDURES_MUTATORARG_TITLE).appendField(a,"NAME");this.setPreviousStatement(!0);this.setNextStatement(!0);this.setColour(Blockly.Blocks.procedures.HUE);this.setTooltip(Blockly.Msg.PROCEDURES_MUTATORARG_TOOLTIP);this.contextMenu=!1;a.onFinishEditing_=this.createNewVar_;a.onFinishEditing_("x")},validator_:function(a){return(a=a.replace(/[\s\xa0]+/g,
+" ").replace(/^ | $/g,""))||null},createNewVar_:function(a){var b=this.sourceBlock_;b&&b.workspace&&b.workspace.options&&b.workspace.options.parentWorkspace&&b.workspace.options.parentWorkspace.createVariable(a)}};
 Blockly.Blocks.procedures_callnoreturn={init:function(){this.appendDummyInput("TOPROW").appendField(this.id,"NAME");this.setPreviousStatement(!0);this.setNextStatement(!0);this.setColour(Blockly.Blocks.procedures.HUE);this.setHelpUrl(Blockly.Msg.PROCEDURES_CALLNORETURN_HELPURL);this.arguments_=[];this.quarkConnections_={};this.quarkIds_=null},getProcedureCall:function(){return this.getFieldValue("NAME")},renameProcedure:function(a,b){Blockly.Names.equals(a,this.getProcedureCall())&&(this.setFieldValue(b,
 "NAME"),this.setTooltip((this.outputConnection?Blockly.Msg.PROCEDURES_CALLRETURN_TOOLTIP:Blockly.Msg.PROCEDURES_CALLNORETURN_TOOLTIP).replace("%1",b)))},setProcedureParameters_:function(a,b){var c=Blockly.Procedures.getDefinition(this.getProcedureCall(),this.workspace),e=c&&c.mutator&&c.mutator.isVisible();e||(this.quarkConnections_={},this.quarkIds_=null);if(b)if(goog.array.equals(this.arguments_,a))this.quarkIds_=b;else{if(b.length!=a.length)throw"Error: paramNames and paramIds must be the same length.";
 this.setCollapsed(!1);this.quarkIds_||(this.quarkConnections_={},a.join("\n")==this.arguments_.join("\n")?this.quarkIds_=b:this.quarkIds_=[]);c=this.rendered;this.rendered=!1;for(var d=0;d<this.arguments_.length;d++){var f=this.getInput("ARG"+d);f&&(f=f.connection.targetConnection,this.quarkConnections_[this.quarkIds_[d]]=f,e&&f&&-1==b.indexOf(this.quarkIds_[d])&&(f.disconnect(),f.getSourceBlock().bumpNeighbours_()))}this.arguments_=[].concat(a);this.updateShape_();if(this.quarkIds_=b)for(d=0;d<this.arguments_.length;d++)e=
@@ -129,8 +130,9 @@ Blockly.Blocks.text_isEmpty={init:function(){this.jsonInit({message0:Blockly.Msg
 Blockly.Blocks.text_indexOf={init:function(){var a=[[Blockly.Msg.TEXT_INDEXOF_OPERATOR_FIRST,"FIRST"],[Blockly.Msg.TEXT_INDEXOF_OPERATOR_LAST,"LAST"]];this.setHelpUrl(Blockly.Msg.TEXT_INDEXOF_HELPURL);this.setColour(Blockly.Blocks.texts.HUE);this.setOutput(!0,"Number");this.appendValueInput("VALUE").setCheck("String").appendField(Blockly.Msg.TEXT_INDEXOF_INPUT_INTEXT);this.appendValueInput("FIND").setCheck("String").appendField(new Blockly.FieldDropdown(a),"END");Blockly.Msg.TEXT_INDEXOF_TAIL&&this.appendDummyInput().appendField(Blockly.Msg.TEXT_INDEXOF_TAIL);
 this.setInputsInline(!0);a=Blockly.Msg.TEXT_INDEXOF_TOOLTIP.replace("%1",Blockly.Blocks.ONE_BASED_INDEXING?"0":"-1");this.setTooltip(a)}};
 Blockly.Blocks.text_charAt={init:function(){this.WHERE_OPTIONS=[[Blockly.Msg.TEXT_CHARAT_FROM_START,"FROM_START"],[Blockly.Msg.TEXT_CHARAT_FROM_END,"FROM_END"],[Blockly.Msg.TEXT_CHARAT_FIRST,"FIRST"],[Blockly.Msg.TEXT_CHARAT_LAST,"LAST"],[Blockly.Msg.TEXT_CHARAT_RANDOM,"RANDOM"]];this.setHelpUrl(Blockly.Msg.TEXT_CHARAT_HELPURL);this.setColour(Blockly.Blocks.texts.HUE);this.setOutput(!0,"String");this.appendValueInput("VALUE").setCheck("String").appendField(Blockly.Msg.TEXT_CHARAT_INPUT_INTEXT);this.appendDummyInput("AT");
-this.setInputsInline(!0);this.updateAt_(!0);this.setTooltip(Blockly.Msg.TEXT_CHARAT_TOOLTIP)},mutationToDom:function(){var a=document.createElement("mutation"),b=this.getInput("AT").type==Blockly.INPUT_VALUE;a.setAttribute("at",b);return a},domToMutation:function(a){a="false"!=a.getAttribute("at");this.updateAt_(a)},updateAt_:function(a){this.removeInput("AT");this.removeInput("ORDINAL",!0);a?(this.appendValueInput("AT").setCheck("Number"),Blockly.Msg.ORDINAL_NUMBER_SUFFIX&&this.appendDummyInput("ORDINAL").appendField(Blockly.Msg.ORDINAL_NUMBER_SUFFIX)):
+this.setInputsInline(!0);this.updateAt_(!0);var a=this;this.setTooltip(function(){var b=a.getFieldValue("WHERE"),c=Blockly.Msg.TEXT_CHARAT_TOOLTIP;if("FROM_START"==b||"FROM_END"==b)c+="  "+Blockly.Msg.LISTS_INDEX_FROM_END_TOOLTIP.replace("%1",Blockly.Blocks.ONE_BASED_INDEXING?"#1":"#0");return c})},mutationToDom:function(){var a=document.createElement("mutation"),b=this.getInput("AT").type==Blockly.INPUT_VALUE;a.setAttribute("at",b);return a},domToMutation:function(a){a="false"!=a.getAttribute("at");
-this.appendDummyInput("AT");Blockly.Msg.TEXT_CHARAT_TAIL&&(this.removeInput("TAIL",!0),this.appendDummyInput("TAIL").appendField(Blockly.Msg.TEXT_CHARAT_TAIL));var b=new Blockly.FieldDropdown(this.WHERE_OPTIONS,function(b){var e="FROM_START"==b||"FROM_END"==b;if(e!=a){var d=this.sourceBlock_;d.updateAt_(e);d.setFieldValue(b,"WHERE");return null}});this.getInput("AT").appendField(b,"WHERE")}};
+this.updateAt_(a)},updateAt_:function(a){this.removeInput("AT");this.removeInput("ORDINAL",!0);a?(this.appendValueInput("AT").setCheck("Number"),Blockly.Msg.ORDINAL_NUMBER_SUFFIX&&this.appendDummyInput("ORDINAL").appendField(Blockly.Msg.ORDINAL_NUMBER_SUFFIX)):this.appendDummyInput("AT");Blockly.Msg.TEXT_CHARAT_TAIL&&(this.removeInput("TAIL",!0),this.appendDummyInput("TAIL").appendField(Blockly.Msg.TEXT_CHARAT_TAIL));var b=new Blockly.FieldDropdown(this.WHERE_OPTIONS,function(b){var e="FROM_START"==
+b||"FROM_END"==b;if(e!=a){var d=this.sourceBlock_;d.updateAt_(e);d.setFieldValue(b,"WHERE");return null}});this.getInput("AT").appendField(b,"WHERE")}};
 Blockly.Blocks.text_getSubstring={init:function(){this.WHERE_OPTIONS_1=[[Blockly.Msg.TEXT_GET_SUBSTRING_START_FROM_START,"FROM_START"],[Blockly.Msg.TEXT_GET_SUBSTRING_START_FROM_END,"FROM_END"],[Blockly.Msg.TEXT_GET_SUBSTRING_START_FIRST,"FIRST"]];this.WHERE_OPTIONS_2=[[Blockly.Msg.TEXT_GET_SUBSTRING_END_FROM_START,"FROM_START"],[Blockly.Msg.TEXT_GET_SUBSTRING_END_FROM_END,"FROM_END"],[Blockly.Msg.TEXT_GET_SUBSTRING_END_LAST,"LAST"]];this.setHelpUrl(Blockly.Msg.TEXT_GET_SUBSTRING_HELPURL);this.setColour(Blockly.Blocks.texts.HUE);
 this.appendValueInput("STRING").setCheck("String").appendField(Blockly.Msg.TEXT_GET_SUBSTRING_INPUT_IN_TEXT);this.appendDummyInput("AT1");this.appendDummyInput("AT2");Blockly.Msg.TEXT_GET_SUBSTRING_TAIL&&this.appendDummyInput("TAIL").appendField(Blockly.Msg.TEXT_GET_SUBSTRING_TAIL);this.setInputsInline(!0);this.setOutput(!0,"String");this.updateAt_(1,!0);this.updateAt_(2,!0);this.setTooltip(Blockly.Msg.TEXT_GET_SUBSTRING_TOOLTIP)},mutationToDom:function(){var a=document.createElement("mutation"),
 b=this.getInput("AT1").type==Blockly.INPUT_VALUE;a.setAttribute("at1",b);b=this.getInput("AT2").type==Blockly.INPUT_VALUE;a.setAttribute("at2",b);return a},domToMutation:function(a){var b="true"==a.getAttribute("at1");a="true"==a.getAttribute("at2");this.updateAt_(1,b);this.updateAt_(2,a)},updateAt_:function(a,b){this.removeInput("AT"+a);this.removeInput("ORDINAL"+a,!0);b?(this.appendValueInput("AT"+a).setCheck("Number"),Blockly.Msg.ORDINAL_NUMBER_SUFFIX&&this.appendDummyInput("ORDINAL"+a).appendField(Blockly.Msg.ORDINAL_NUMBER_SUFFIX)):

core/block.js

@@ -127,6 +127,9 @@ Blockly.Block = function(workspace, prototypeName, opt_id) {
   this.workspace = workspace;
   /** @type {boolean} */
   this.isInFlyout = workspace.isFlyout;
+  /** @type {boolean} */
+  this.isInMutator = workspace.isMutator;
+
   /** @type {boolean} */
   this.RTL = workspace.RTL;
 
@@ -194,6 +197,10 @@ Blockly.Block.prototype.colour_ = '#000000';
  *     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_);
@@ -908,10 +915,13 @@ Blockly.Block.prototype.setCollapsed = function(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) {
+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 {
@@ -922,9 +932,9 @@ Blockly.Block.prototype.toString = function(opt_maxLength) {
       if (input.connection) {
         var child = input.connection.targetBlock();
         if (child) {
-          text.push(child.toString());
+          text.push(child.toString(undefined, opt_emptyToken));
         } else {
-          text.push('?');
+          text.push(emptyFieldPlaceholder);
         }
       }
     }

core/block_render_svg.js

@@ -288,7 +288,7 @@ Blockly.BlockSvg.prototype.render = function(opt_bubble) {
       parentBlock.render(true);
     } else {
       // Top-most block.  Fire an event to allow scrollbars to resize.
-      Blockly.resizeSvgContents(this.workspace);
+      this.workspace.resizeContents();
     }
   }
   Blockly.Field.stopCache();

core/block_svg.js

@@ -276,7 +276,7 @@ Blockly.BlockSvg.terminateDrag = function() {
         Blockly.Events.setGroup(false);
       }, Blockly.BUMP_DELAY);
       // Fire an event to allow scrollbars to resize.
-      Blockly.resizeSvgContents(selected.workspace);
+      selected.workspace.resizeContents();
     }
   }
   Blockly.dragMode_ = Blockly.DRAG_NONE;
@@ -346,7 +346,7 @@ Blockly.BlockSvg.prototype.moveBy = function(dx, dy) {
       'translate(' + (xy.x + dx) + ',' + (xy.y + dy) + ')');
   this.moveConnections_(dx, dy);
   event.recordNew();
-  Blockly.resizeSvgContents(this.workspace);
+  this.workspace.resizeContents();
   Blockly.Events.fire(event);
 };
 
@@ -533,6 +533,13 @@ Blockly.BlockSvg.prototype.onMouseDown_ = function(e) {
   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();
@@ -946,11 +953,9 @@ Blockly.BlockSvg.prototype.setMovable = function(movable) {
  */
 Blockly.BlockSvg.prototype.setEditable = function(editable) {
   Blockly.BlockSvg.superClass_.setEditable.call(this, editable);
-  if (this.rendered) {
+  var icons = this.getIcons();
-    var icons = this.getIcons();
+  for (var i = 0; i < icons.length; i++) {
-    for (var i = 0; i < icons.length; i++) {
+    icons[i].updateEditable();
-      icons[i].updateEditable();
-    }
   }
 };
 
@@ -979,6 +984,10 @@ Blockly.BlockSvg.prototype.getSvgRoot = function() {
  * @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
@@ -1013,7 +1022,7 @@ Blockly.BlockSvg.prototype.dispose = function(healStack, animate) {
   Blockly.BlockSvg.superClass_.dispose.call(this, healStack);
 
   goog.dom.removeNode(this.svgGroup_);
-  Blockly.resizeSvgContents(blockWorkspace);
+  blockWorkspace.resizeContents();
   // Sever JavaScript to DOM connections.
   this.svgGroup_ = null;
   this.svgPath_ = null;

core/blockly.js

@@ -453,128 +453,6 @@ Blockly.hideChaff = function(opt_allowToolbox) {
   }
 };
 
-/**
- * Return an object with all the metrics required to size scrollbars for the
- * main 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 main workspace.
- * @private
- * @this Blockly.WorkspaceSvg
- */
-Blockly.getMainWorkspaceMetrics_ = 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 the main 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
- * @this Blockly.WorkspaceSvg
- */
-Blockly.setMainWorkspaceMetrics_ = function(xyRatio) {
-  if (!this.scrollbar) {
-    throw 'Attempt to set main 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_();
-    }
-  }
-};
-
 /**
  * When something in Blockly's workspace changes, call a function.
  * @param {!Function} func Function to call.

core/css.js

@@ -135,12 +135,25 @@ Blockly.Css.CONTENT = [
     'background-color: #fff;',
     'outline: none;',
     'overflow: hidden;',  /* IE overflows by default. */
+    'display: block;', 
   '}',
 
   '.blocklyWidgetDiv {',
     'display: none;',
     'position: absolute;',
-    'z-index: 999;',
+    '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 {',
@@ -154,7 +167,7 @@ Blockly.Css.CONTENT = [
     'opacity: 0.9;',
     'padding: 2px;',
     'position: absolute;',
-    'z-index: 1000;',
+    'z-index: 100000;', /* big value for bootstrap3 compatibility */
   '}',
 
   '.blocklyResizeSE {',
@@ -244,6 +257,15 @@ Blockly.Css.CONTENT = [
     '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.

core/events.js

@@ -388,7 +388,7 @@ Blockly.Events.Create.prototype.fromJson = function(json) {
 Blockly.Events.Create.prototype.run = function(forward) {
   var workspace = Blockly.Workspace.getById(this.workspaceId);
   if (forward) {
-    var xml = goog.dom.createUntypedDom('xml');
+    var xml = goog.dom.createDom('xml');
     xml.appendChild(this.xml);
     Blockly.Xml.domToWorkspace(xml, workspace);
   } else {
@@ -465,7 +465,7 @@ Blockly.Events.Delete.prototype.run = function(forward) {
       }
     }
   } else {
-    var xml = goog.dom.createUntypedDom('xml');
+    var xml = goog.dom.createDom('xml');
     xml.appendChild(this.oldXml);
     Blockly.Xml.domToWorkspace(xml, workspace);
   }

core/field.js

@@ -178,20 +178,17 @@ Blockly.Field.prototype.dispose = function() {
  * Add or remove the UI indicating if this field is editable or not.
  */
 Blockly.Field.prototype.updateEditable = function() {
-  if (!this.EDITABLE || !this.fieldGroup_) {
+  var group = this.fieldGroup_;
+  if (!this.EDITABLE || !group) {
     return;
   }
   if (this.sourceBlock_.isEditable()) {
-    Blockly.addClass_(/** @type {!Element} */ (this.fieldGroup_),
+    Blockly.addClass_(group, 'blocklyEditableText');
-                      'blocklyEditableText');
+    Blockly.removeClass_(group, 'blocklyNonEditableText');
-    Blockly.removeClass_(/** @type {!Element} */ (this.fieldGroup_),
-                         'blocklyNoNEditableText');
     this.fieldGroup_.style.cursor = this.CURSOR;
   } else {
-    Blockly.addClass_(/** @type {!Element} */ (this.fieldGroup_),
+    Blockly.addClass_(group, 'blocklyNonEditableText');
-                      'blocklyNonEditableText');
+    Blockly.removeClass_(group, 'blocklyEditableText');
-    Blockly.removeClass_(/** @type {!Element} */ (this.fieldGroup_),
-                         'blocklyEditableText');
     this.fieldGroup_.style.cursor = '';
   }
 };

core/field_number.js

@@ -92,7 +92,7 @@ Blockly.FieldNumber.prototype.classValidator = function(text) {
     return null;
   }
   // Round to nearest multiple of precision.
-  if (this.precision_ && Number.isFinite(n)) {
+  if (this.precision_ && isFinite(n)) {
     n = Math.round(n / this.precision_) * this.precision_;
   }
   // Get the value in range.

core/field_textinput.js

@@ -271,6 +271,9 @@ Blockly.FieldTextInput.prototype.widgetDispose_ = function() {
       } else {
         // Validation function has changed the text.
         text = text1;
+        if (thisField.onFinishEditing_) {
+          thisField.onFinishEditing_(text);
+        }
       }
     }
     thisField.setValue(text);

core/field_variable.js

@@ -65,6 +65,12 @@ Blockly.FieldVariable.prototype.init = function() {
             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());
+  }
 };
 
 /**
@@ -97,8 +103,9 @@ Blockly.FieldVariable.prototype.setValue = function(newValue) {
  */
 Blockly.FieldVariable.dropdownCreate = function() {
   if (this.sourceBlock_ && this.sourceBlock_.workspace) {
-    var variableList =
+    // Get a copy of the list, so that adding rename and new variable options
-        Blockly.Variables.allVariables(this.sourceBlock_.workspace);
+    // doesn't modify the workspace's list.
+    var variableList = this.sourceBlock_.workspace.variableList.slice(0);
   } else {
     var variableList = [];
   }
@@ -109,7 +116,7 @@ Blockly.FieldVariable.dropdownCreate = function() {
   }
   variableList.sort(goog.string.caseInsensitiveCompare);
   variableList.push(Blockly.Msg.RENAME_VARIABLE);
-  variableList.push(Blockly.Msg.NEW_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 = [];
@@ -121,46 +128,27 @@ Blockly.FieldVariable.dropdownCreate = function() {
 
 /**
  * Event handler for a change in variable name.
- * Special case the 'New variable...' and 'Rename variable...' options.
+ * Special case the 'Rename variable...' and 'Delete variable...' options.
- * In both of these special cases, prompt the user for a new name.
+ * 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) {
-  function promptName(promptText, defaultText) {
-    Blockly.hideChaff();
-    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;
-  }
   var workspace = this.sourceBlock_.workspace;
   if (text == Blockly.Msg.RENAME_VARIABLE) {
     var oldVar = this.getText();
-    text = promptName(Blockly.Msg.RENAME_VARIABLE_TITLE.replace('%1', oldVar),
+    Blockly.hideChaff();
-                      oldVar);
+    text = Blockly.Variables.promptName(
+        Blockly.Msg.RENAME_VARIABLE_TITLE.replace('%1', oldVar), oldVar);
     if (text) {
-      Blockly.Variables.renameVariable(oldVar, text, workspace);
+      workspace.renameVariable(oldVar, text);
     }
     return null;
-  } else if (text == Blockly.Msg.NEW_VARIABLE) {
+  } else if (text == Blockly.Msg.DELETE_VARIABLE.replace('%1',
-    text = promptName(Blockly.Msg.NEW_VARIABLE_TITLE, '');
+      this.getText())) {
-    // Since variables are case-insensitive, ensure that if the new variable
+    workspace.deleteVariable(this.getText());
-    // matches with an existing variable, the new case prevails throughout.
-    if (text) {
-      Blockly.Variables.renameVariable(text, text, workspace);
-      return text;
-    }
     return null;
   }
   return undefined;

core/flyout.js

@@ -29,6 +29,7 @@ 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');
@@ -84,6 +85,13 @@ Blockly.Flyout = function(workspaceOptions) {
    * @type {!Array.<!Element>}
    * @private
    */
+  this.backgroundButtons_ = [];
+
+  /**
+   * List of visible buttons.
+   * @type {!Array.<!Blockly.FlyoutButton>}
+   * @private
+   */
   this.buttons_ = [];
 
   /**
@@ -99,8 +107,60 @@ Blockly.Flyout = function(workspaceOptions) {
    * @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}
@@ -128,6 +188,20 @@ Blockly.Flyout.prototype.DRAG_RADIUS = 10;
  */
 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}
@@ -583,24 +657,48 @@ Blockly.Flyout.prototype.show = function(xmlList) {
 
   this.svgGroup_.style.display = 'block';
   // Create the blocks to be shown in this flyout.
-  var blocks = [];
+  var contents = [];
   var gaps = [];
   this.permanentlyDisabled_.length = 0;
   for (var i = 0, xml; xml = xmlList[i]; i++) {
-    if (xml.tagName && xml.tagName.toUpperCase() == 'BLOCK') {
+    if (xml.tagName) {
-      var curBlock = Blockly.Xml.domToBlock(xml, this.workspace_);
+      var tagName = xml.tagName.toUpperCase();
-      if (curBlock.disabled) {
+      var default_gap = this.horizontalLayout_ ? this.GAP_X : this.GAP_Y;
-        // Record blocks that were initially disabled.
+      if (tagName == 'BLOCK') {
-        // Do not enable these blocks as a result of capacity filtering.
+        var curBlock = Blockly.Xml.domToBlock(xml, this.workspace_);
-        this.permanentlyDisabled_.push(curBlock);
+        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);
       }
-      blocks.push(curBlock);
-      var gap = parseInt(xml.getAttribute('gap'), 10);
-      gaps.push(isNaN(gap) ? this.MARGIN * 3 : gap);
     }
   }
 
-  this.layoutBlocks_(blocks, gaps);
+  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.
@@ -632,56 +730,70 @@ Blockly.Flyout.prototype.show = function(xmlList) {
 
 /**
  * Lay out the blocks in the flyout.
- * @param {!Array.<!Blockly.BlockSvg>} blocks The blocks to lay out.
+ * @param {!Array.<!Object>} contents The blocks and buttons to lay out.
  * @param {!Array.<number>} gaps The visible gaps between blocks.
  * @private
  */
-Blockly.Flyout.prototype.layoutBlocks_ = function(blocks, gaps) {
+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) {
-    blocks = blocks.reverse();
+    contents = contents.reverse();
   }
-  for (var i = 0, block; block = blocks[i]; i++) {
-    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;
-    }
 
-    if (this.horizontalLayout_ && this.RTL) {
+  for (var i = 0, item; item = contents[i]; i++) {
-      block.moveBy(cursorX + blockHW.width - tab, cursorY);
+    if (item.type == 'block') {
-    } else {
+      var block = item.block;
-      block.moveBy(cursorX, cursorY);
+      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];
+      }
     }
-
-    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.buttons_[i] = rect;
-
-    this.addBlockListeners_(root, block, rect);
   }
 };
 
@@ -698,9 +810,14 @@ Blockly.Flyout.prototype.clearOldBlocks_ = function() {
     }
   }
   // Delete any background buttons from a previous showing.
-  for (var j = 0, rect; rect = this.buttons_[j]; j++) {
+  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;
 };
 
@@ -774,6 +891,7 @@ Blockly.Flyout.prototype.onMouseDown_ = function(e) {
   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',
@@ -1122,10 +1240,6 @@ Blockly.Flyout.terminateDrag_ = function() {
     Blockly.unbindEvent_(Blockly.Flyout.onMouseMoveWrapper_);
     Blockly.Flyout.onMouseMoveWrapper_ = null;
   }
-  if (Blockly.Flyout.onMouseUpWrapper_) {
-    Blockly.unbindEvent_(Blockly.Flyout.onMouseUpWrapper_);
-    Blockly.Flyout.onMouseUpWrapper_ = null;
-  }
   Blockly.Flyout.startDownEvent_ = null;
   Blockly.Flyout.startBlock_ = null;
   Blockly.Flyout.startFlyout_ = null;
@@ -1190,6 +1304,9 @@ Blockly.Flyout.prototype.reflowVertical = function(blocks) {
     }
     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;

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_);
+};

core/icon.js

@@ -78,6 +78,10 @@ Blockly.Icon.prototype.createIcon = function() {
   */
   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_);
@@ -101,13 +105,6 @@ Blockly.Icon.prototype.dispose = function() {
  * Add or remove the UI indicating if this icon may be clicked or not.
  */
 Blockly.Icon.prototype.updateEditable = function() {
-  if (this.block_.isInFlyout || !this.block_.isEditable()) {
-    Blockly.addClass_(/** @type {!Element} */ (this.iconGroup_),
-                      'blocklyIconGroupReadonly');
-  } else {
-    Blockly.removeClass_(/** @type {!Element} */ (this.iconGroup_),
-                         'blocklyIconGroupReadonly');
-  }
 };
 
 /**

core/inject.js

@@ -51,7 +51,9 @@ Blockly.inject = function(container, opt_options) {
     throw 'Error: container is not in current document.';
   }
   var options = new Blockly.Options(opt_options || {});
-  var svg = Blockly.createDom_(container, 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();
@@ -183,8 +185,6 @@ Blockly.createDom_ = function(container, options) {
  */
 Blockly.createMainWorkspace_ = function(svg, options) {
   options.parentWorkspace = null;
-  options.getMetrics = Blockly.getMainWorkspaceMetrics_;
-  options.setMetrics = Blockly.setMainWorkspaceMetrics_;
   var mainWorkspace = new Blockly.WorkspaceSvg(options);
   mainWorkspace.scale = options.zoomOptions.startScale;
   svg.appendChild(mainWorkspace.createDom('blocklyMainBackground'));

core/mutator.js

@@ -110,10 +110,9 @@ Blockly.Mutator.prototype.createEditor_ = function() {
       null);
   // Convert the list of names into a list of XML objects for the flyout.
   if (this.quarkNames_.length) {
-    var quarkXml = goog.dom.createUntypedDom('xml');
+    var quarkXml = goog.dom.createDom('xml');
     for (var i = 0, quarkName; quarkName = this.quarkNames_[i]; i++) {
-      quarkXml.appendChild(
+      quarkXml.appendChild(goog.dom.createDom('block', {'type': quarkName}));
-          goog.dom.createUntypedDom('block', {'type': quarkName}));
     }
   } else {
     var quarkXml = null;
@@ -130,6 +129,7 @@ Blockly.Mutator.prototype.createEditor_ = function() {
     setMetrics: null
   };
   this.workspace_ = new Blockly.WorkspaceSvg(workspaceOptions);
+  this.workspace_.isMutator = true;
   this.svgDialog_.appendChild(
       this.workspace_.createDom('blocklyMutatorBackground'));
   return this.svgDialog_;
@@ -139,17 +139,23 @@ Blockly.Mutator.prototype.createEditor_ = function() {
  * Add or remove the UI indicating if this icon may be clicked or not.
  */
 Blockly.Mutator.prototype.updateEditable = function() {
-  if (this.block_.isEditable()) {
+  if (!this.block_.isInFlyout) {
-    // Default behaviour for an icon.
+    if (this.block_.isEditable()) {
-    Blockly.Icon.prototype.updateEditable.call(this);
+      if (this.iconGroup_) {
-  } else {
+        Blockly.removeClass_(/** @type {!Element} */ (this.iconGroup_),
-    // Close any mutator bubble.  Icon is not clickable.
+                             'blocklyIconGroupReadonly');
-    this.setVisible(false);
+      }
-    if (this.iconGroup_) {
+    } else {
-      Blockly.addClass_(/** @type {!Element} */ (this.iconGroup_),
+      // Close any mutator bubble.  Icon is not clickable.
-                        'blocklyIconGroupReadonly');
+      this.setVisible(false);
+      if (this.iconGroup_) {
+        Blockly.addClass_(/** @type {!Element} */ (this.iconGroup_),
+                          'blocklyIconGroupReadonly');
+      }
     }
   }
+  // Default behaviour for an icon.
+  Blockly.Icon.prototype.updateEditable.call(this);
 };
 
 /**

core/options.js

@@ -132,16 +132,14 @@ Blockly.Options.prototype.parentWorkspace = null;
 
 /**
  * If set, sets the translation of the workspace to match the scrollbars.
- * No-op if unset.
  */
-Blockly.Options.prototype.setMetrics = function() { return; };
+Blockly.Options.prototype.setMetrics = null;
 
 /**
- * Return an object with the metrics required to size the workspace, or null
+ * Return an object with the metrics required to size the workspace.
- * if unset.
+ * @return {Object} Contains size and position metrics, or null.
- * @return {Object} Contains size an position metrics, or null.
  */
-Blockly.Options.prototype.getMetrics = function() { return null; };
+Blockly.Options.prototype.getMetrics = null;
 
 /**
  * Parse the user-specified zoom options, using reasonable defaults where

core/procedures.js

@@ -162,21 +162,21 @@ Blockly.Procedures.flyoutCategory = function(workspace) {
   var xmlList = [];
   if (Blockly.Blocks['procedures_defnoreturn']) {
     // <block type="procedures_defnoreturn" gap="16"></block>
-    var block = goog.dom.createUntypedDom('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.createUntypedDom('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.createUntypedDom('block');
+    var block = goog.dom.createDom('block');
     block.setAttribute('type', 'procedures_ifreturn');
     block.setAttribute('gap', 16);
     xmlList.push(block);
@@ -195,14 +195,14 @@ Blockly.Procedures.flyoutCategory = function(workspace) {
       //     <arg name="x"></arg>
       //   </mutation>
       // </block>
-      var block = goog.dom.createUntypedDom('block');
+      var block = goog.dom.createDom('block');
       block.setAttribute('type', templateName);
       block.setAttribute('gap', 16);
-      var mutation = goog.dom.createUntypedDom('mutation');
+      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.createUntypedDom('arg');
+        var arg = goog.dom.createDom('arg');
         arg.setAttribute('name', args[j]);
         mutation.appendChild(arg);
       }

core/rendered_connection.js

@@ -86,7 +86,7 @@ Blockly.RenderedConnection.prototype.bumpAwayFrom_ = function(staticConnection)
   }
   // Raise it to the top for extra visibility.
   var selected = Blockly.selected == rootBlock;
-  selected || rootBlock.select();
+  selected || rootBlock.addSelect();
   var dx = (staticConnection.x_ + Blockly.SNAP_RADIUS) - this.x_;
   var dy = (staticConnection.y_ + Blockly.SNAP_RADIUS) - this.y_;
   if (reverse) {
@@ -97,7 +97,7 @@ Blockly.RenderedConnection.prototype.bumpAwayFrom_ = function(staticConnection)
     dx = -dx;
   }
   rootBlock.moveBy(dx, dy);
-  selected || rootBlock.unselect();
+  selected || rootBlock.removeSelect();
 };
 
 /**

core/toolbox.js

@@ -145,12 +145,13 @@ Blockly.Toolbox.prototype.lastCategory_ = null;
  */
 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');
-  document.body.appendChild(this.HtmlDiv);
+  svg.parentNode.insertBefore(this.HtmlDiv, svg);
 
   // Clicking on toolbox closes popups.
   Blockly.bindEvent_(this.HtmlDiv, 'mousedown', this,
@@ -187,8 +188,11 @@ Blockly.Toolbox.prototype.init = function() {
   tree.setShowLines(false);
   tree.setShowExpandIcons(false);
   tree.setSelectedItem(null);
-  this.populate_(workspace.options.languageTree);
+  var openNode = this.populate_(workspace.options.languageTree);
   tree.render(this.HtmlDiv);
+  if (openNode) {
+    tree.setSelectedItem(openNode);
+  }
   this.addColour_();
   this.position();
 };
@@ -233,61 +237,59 @@ Blockly.Toolbox.prototype.position = function() {
   var svgPosition = goog.style.getPageOffset(svg);
   var svgSize = Blockly.svgSize(svg);
   if (this.horizontalLayout_) {
-    treeDiv.style.left = svgPosition.x + 'px';
+    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 = svgPosition.y + 'px';
+      treeDiv.style.top = '0';
     } else {  // Bottom
-      var topOfToolbox = svgPosition.y + svgSize.height - treeDiv.offsetHeight;
+      treeDiv.style.bottom = '0';
-      treeDiv.style.top = topOfToolbox + 'px';
     }
   } else {
     if (this.toolboxPosition == Blockly.TOOLBOX_AT_RIGHT) {  // Right
-      treeDiv.style.left =
+      treeDiv.style.right = '0';
-          (svgPosition.x + svgSize.width - treeDiv.offsetWidth) + 'px';
     } else {  // Left
-      treeDiv.style.left = svgPosition.x + 'px';
+      treeDiv.style.left = '0';
     }
     treeDiv.style.height = svgSize.height + 'px';
-    treeDiv.style.top = svgPosition.y + 'px';
     this.width = treeDiv.offsetWidth;
-    if (this.toolboxPosition == Blockly.TOOLBOX_AT_LEFT) {
-      // For some reason the LTR toolbox now reports as 1px too wide.
-      this.width -= 1;
-    }
   }
   this.flyout_.position();
 };
 
 /**
  * Fill the toolbox with categories and blocks.
- * @param {Node} newTree DOM tree of blocks, or null.
+ * @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;
-  this.syncTrees_(newTree, this.tree_, this.workspace_.options.pathToMedia);
+  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.
-  Blockly.resizeSvgContents(this.workspace_);
+  this.workspace_.resizeContents();
+  return openNode;
 };
 
 /**
  * Sync trees of the toolbox.
- * @param {Node} treeIn DOM tree of blocks, or null.
+ * @param {!Node} treeIn DOM tree of blocks.
- * @param {Blockly.Toolbox.TreeControl} treeOut
+ * @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) {
@@ -304,7 +306,10 @@ Blockly.Toolbox.prototype.syncTrees_ = function(treeIn, treeOut, pathToMedia) {
           // Variables and procedures are special dynamic categories.
           childOut.blocks = custom;
         } else {
-          this.syncTrees_(childIn, childOut, pathToMedia);
+          var newOpenNode = this.syncTrees_(childIn, childOut, pathToMedia);
+          if (newOpenNode) {
+            openNode = newOpenNode;
+          }
         }
         var colour = childIn.getAttribute('colour');
         if (goog.isString(colour)) {
@@ -319,7 +324,9 @@ Blockly.Toolbox.prototype.syncTrees_ = function(treeIn, treeOut, pathToMedia) {
         }
         if (childIn.getAttribute('expanded') == 'true') {
           if (childOut.blocks.length) {
-            this.tree_.setSelectedItem(childOut);
+            // 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 {
@@ -341,10 +348,8 @@ Blockly.Toolbox.prototype.syncTrees_ = function(treeIn, treeOut, pathToMedia) {
             // 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)) {
+            if (!isNaN(newGap) && lastElement) {
-              var oldGap = parseFloat(lastElement.getAttribute('gap'));
+              lastElement.setAttribute('gap', newGap);
-              var gap = isNaN(oldGap) ? newGap : oldGap + newGap;
-              lastElement.setAttribute('gap', gap);
             }
           }
         }
@@ -356,6 +361,7 @@ Blockly.Toolbox.prototype.syncTrees_ = function(treeIn, treeOut, pathToMedia) {
         break;
     }
   }
+  return openNode;
 };
 
 /**
@@ -427,6 +433,18 @@ Blockly.Toolbox.prototype.getClientRect = function() {
   }
 };
 
+/**
+ * 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.
 
 /**
@@ -544,6 +562,7 @@ Blockly.Toolbox.TreeControl.prototype.setSelectedItem = function(node) {
 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.
@@ -595,6 +614,28 @@ 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

core/variables.js

@@ -37,13 +37,14 @@ goog.require('goog.string');
 Blockly.Variables.NAME_TYPE = 'VARIABLE';
 
 /**
- * Find all user-created variables.
+ * 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.allVariables = function(root) {
+Blockly.Variables.allUsedVariables = function(root) {
   var blocks;
-  if (root.getDescendants) {
+  if (root instanceof Blockly.Block) {
     // Root is Block.
     blocks = root.getDescendants();
   } else if (root.getAllBlocks) {
@@ -54,13 +55,15 @@ Blockly.Variables.allVariables = function(root) {
   }
   var variableHash = Object.create(null);
   // Iterate through every block and add each variable to the hash.
-  for (var i = 0; i < blocks.length; i++) {
+  for (var x = 0; x < blocks.length; x++) {
-    var blockVariables = blocks[i].getVars();
+    var blockVariables = blocks[x].getVars();
-    for (var j = 0; j < blockVariables.length; j++) {
+    if (blockVariables) {
-      var varName = blockVariables[j];
+      for (var y = 0; y < blockVariables.length; y++) {
-      // Variable name may be null if the block is only half-built.
+        var varName = blockVariables[y];
-      if (varName) {
+        // Variable name may be null if the block is only half-built.
-        variableHash[varName.toLowerCase()] = varName;
+        if (varName) {
+          variableHash[varName.toLowerCase()] = varName;
+        }
       }
     }
   }
@@ -73,19 +76,19 @@ Blockly.Variables.allVariables = function(root) {
 };
 
 /**
- * Find all instances of the specified variable and rename them.
+ * Find all variables that the user has created through the workspace or
- * @param {string} oldName Variable to rename.
+ * toolbox.  For use by generators.
- * @param {string} newName New variable name.
+ * @param {!Blockly.Workspace} root The workspace to inspect.
- * @param {!Blockly.Workspace} workspace Workspace rename variables in.
+ * @return {!Array.<string>} Array of variable names.
  */
-Blockly.Variables.renameVariable = function(oldName, newName, workspace) {
+Blockly.Variables.allVariables = function(root) {
-  Blockly.Events.setGroup(true);
+  if (root instanceof Blockly.Block) {
-  var blocks = workspace.getAllBlocks();
+    // Root is Block.
-  // Iterate through every block.
+    console.warn('Deprecated call to Blockly.Variables.allVariables ' +
-  for (var i = 0; i < blocks.length; i++) {
+                 'with a block instead of a workspace.  You may want ' +
-    blocks[i].renameVar(oldName, newName);
+                 'Blockly.Variables.allUsedVariables');
   }
-  Blockly.Events.setGroup(false);
+  return root.variableList;
 };
 
 /**
@@ -94,44 +97,79 @@ Blockly.Variables.renameVariable = function(oldName, newName, workspace) {
  * @return {!Array.<!Element>} Array of XML block elements.
  */
 Blockly.Variables.flyoutCategory = function(workspace) {
-  var variableList = Blockly.Variables.allVariables(workspace);
+  var variableList = workspace.variableList;
   variableList.sort(goog.string.caseInsensitiveCompare);
-  // In addition to the user's variables, we also want to display the default
-  // variable name at the top.  We also don't want this duplicated if the
-  // user has created a variable of the same name.
-  goog.array.remove(variableList, Blockly.Msg.VARIABLES_DEFAULT_NAME);
-  variableList.unshift(Blockly.Msg.VARIABLES_DEFAULT_NAME);
 
   var xmlList = [];
-  for (var i = 0; i < variableList.length; i++) {
+  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="8">
+      // <block type="variables_set" gap="20">
       //   <field name="VAR">item</field>
       // </block>
-      var block = goog.dom.createUntypedDom('block');
+      var block = goog.dom.createDom('block');
       block.setAttribute('type', 'variables_set');
-      if (Blockly.Blocks['variables_get']) {
+      if (Blockly.Blocks['math_change']) {
         block.setAttribute('gap', 8);
+      } else {
+        block.setAttribute('gap', 24);
       }
-      var field = goog.dom.createUntypedDom('field', null, variableList[i]);
+      var field = goog.dom.createDom('field', null, variableList[0]);
       field.setAttribute('name', 'VAR');
       block.appendChild(field);
       xmlList.push(block);
     }
-    if (Blockly.Blocks['variables_get']) {
+    if (Blockly.Blocks['math_change']) {
-      // <block type="variables_get" gap="24">
+      // <block type="math_change">
-      //   <field name="VAR">item</field>
+      //   <value name="DELTA">
+      //     <shadow type="math_number">
+      //       <field name="NUM">1</field>
+      //     </shadow>
+      //   </value>
       // </block>
-      var block = goog.dom.createUntypedDom('block');
+      var block = goog.dom.createDom('block');
-      block.setAttribute('type', 'variables_get');
+      block.setAttribute('type', 'math_change');
-      if (Blockly.Blocks['variables_set']) {
+      if (Blockly.Blocks['variables_get']) {
-        block.setAttribute('gap', 24);
+        block.setAttribute('gap', 20);
       }
-      var field = goog.dom.createUntypedDom('field', null, variableList[i]);
+      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;
 };
@@ -145,7 +183,7 @@ Blockly.Variables.flyoutCategory = function(workspace) {
 * @return {string} New variable name.
 */
 Blockly.Variables.generateUniqueName = function(workspace) {
-  var variableList = Blockly.Variables.allVariables(workspace);
+  var variableList = workspace.variableList;
   var newName = '';
   if (variableList.length) {
     var nameSuffix = 1;
@@ -184,3 +222,52 @@ Blockly.Variables.generateUniqueName = function(workspace) {
   }
   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;
+};

core/widgetdiv.js

@@ -95,7 +95,6 @@ Blockly.WidgetDiv.hide = function() {
     Blockly.WidgetDiv.DIV.style.display = 'none';
     Blockly.WidgetDiv.DIV.style.left = '';
     Blockly.WidgetDiv.DIV.style.top = '';
-    Blockly.WidgetDiv.DIV.style.height = '';
     Blockly.WidgetDiv.dispose_ && Blockly.WidgetDiv.dispose_();
     Blockly.WidgetDiv.dispose_ = null;
     goog.dom.removeChildren(Blockly.WidgetDiv.DIV);
@@ -149,6 +148,5 @@ Blockly.WidgetDiv.position = function(anchorX, anchorY, windowSize,
   }
   Blockly.WidgetDiv.DIV.style.left = anchorX + 'px';
   Blockly.WidgetDiv.DIV.style.top = anchorY + 'px';
-  Blockly.WidgetDiv.DIV.style.height =
+  Blockly.WidgetDiv.DIV.style.height = windowSize.height + 'px';
-      (windowSize.height - anchorY + scrollOffset.y) + 'px';
 };

core/workspace.js

@@ -73,6 +73,12 @@ Blockly.Workspace = function(opt_options) {
    * @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 = [];
 };
 
 /**
@@ -112,6 +118,17 @@ Blockly.Workspace.SCAN_ANGLE = 3;
  */
 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]);
+      }
+    }
+  }
 };
 
 /**
@@ -181,6 +198,158 @@ Blockly.Workspace.prototype.clear = function() {
   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;
+        }
+      }
+      window.confirm(
+          Blockly.Msg.DELETE_VARIABLE_CONFIRMATION.replace('%1', uses.length).
+          replace('%2', name));
+    }
+
+    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;
 };
 
 /**

core/workspace_svg.js

@@ -50,8 +50,10 @@ goog.require('goog.userAgent');
  */
 Blockly.WorkspaceSvg = function(options) {
   Blockly.WorkspaceSvg.superClass_.constructor.call(this, options);
-  this.getMetrics = options.getMetrics;
+  this.getMetrics =
-  this.setMetrics = options.setMetrics;
+      options.getMetrics || Blockly.WorkspaceSvg.getTopLevelWorkspaceMetrics_;
+  this.setMetrics =
+      options.setMetrics || Blockly.WorkspaceSvg.setTopLevelWorkspaceMetrics_;
 
   Blockly.ConnectionDB.init(this);
 
@@ -82,6 +84,13 @@ Blockly.WorkspaceSvg.prototype.rendered = true;
  */
 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.
@@ -147,6 +156,15 @@ Blockly.WorkspaceSvg.prototype.scrollbar = null;
  */
 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}
@@ -219,13 +237,16 @@ Blockly.WorkspaceSvg.prototype.createDom = function(opt_backgroundClass) {
   if (this.options.zoomOptions && this.options.zoomOptions.controls) {
     bottom = this.addZoomControls_(bottom);
   }
-  Blockly.bindEvent_(this.svgGroup_, 'mousedown', this, this.onMouseDown_);
+
-  var thisWorkspace = this;
+  if (!this.isFlyout) {
-  Blockly.bindEvent_(this.svgGroup_, 'touchstart', null,
+    Blockly.bindEvent_(this.svgGroup_, 'mousedown', this, this.onMouseDown_);
-                     function(e) {Blockly.longStart_(e, thisWorkspace);});
+    var thisWorkspace = this;
-  if (this.options.zoomOptions && this.options.zoomOptions.wheel) {
+    Blockly.bindEvent_(this.svgGroup_, 'touchstart', null,
-    // Mouse-wheel.
+                       function(e) {Blockly.longStart_(e, thisWorkspace);});
-    Blockly.bindEvent_(this.svgGroup_, 'wheel', this, this.onMouseWheel_);
+    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
@@ -275,8 +296,9 @@ Blockly.WorkspaceSvg.prototype.dispose = function() {
     this.zoomControls_ = null;
   }
   if (!this.options.parentWorkspace) {
-    // Top-most workspace.  Dispose of the SVG too.
+    // Top-most workspace.  Dispose of the div that the
-    goog.dom.removeNode(this.getParentSvg());
+    // svg is injected into (i.e. injectionDiv).
+    goog.dom.removeNode(this.getParentSvg().parentNode);
   }
   if (this.resizeHandlerWrapper_) {
     Blockly.unbindEvent_(this.resizeHandlerWrapper_);
@@ -343,6 +365,16 @@ Blockly.WorkspaceSvg.prototype.addFlyout_ = function() {
   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
@@ -382,11 +414,25 @@ Blockly.WorkspaceSvg.prototype.resize = function() {
   if (this.scrollbar) {
     this.scrollbar.resize();
   }
-
+  this.updateScreenCalculations_();
-  this.updateInverseScreenCTM();
-  this.recordDeleteAreas();
 };
 
+/**
+ * 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.
@@ -592,6 +638,19 @@ Blockly.WorkspaceSvg.prototype.paste = function(xmlBlock) {
   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.
  */
@@ -715,11 +774,13 @@ Blockly.WorkspaceSvg.prototype.moveDrag = function(e) {
 };
 
 /**
- * Is the user currently dragging a block or scrolling the workspace?
+ * 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;
 };
 
@@ -780,9 +841,8 @@ Blockly.WorkspaceSvg.prototype.getBlocksBoundingBox = function() {
 
 /**
  * Clean up the workspace by ordering all the blocks in a column.
- * @private
  */
-Blockly.WorkspaceSvg.prototype.cleanUp_ = function() {
+Blockly.WorkspaceSvg.prototype.cleanUp = function() {
   Blockly.Events.setGroup(true);
   var topBlocks = this.getTopBlocks(true);
   var cursorY = 0;
@@ -795,7 +855,7 @@ Blockly.WorkspaceSvg.prototype.cleanUp_ = function() {
   }
   Blockly.Events.setGroup(false);
   // Fire an event to allow scrollbars to resize.
-  Blockly.resizeSvgContents(this);
+  this.resizeContents();
 };
 
 /**
@@ -828,7 +888,7 @@ Blockly.WorkspaceSvg.prototype.showContextMenu_ = function(e) {
     var cleanOption = {};
     cleanOption.text = Blockly.Msg.CLEAN_UP;
     cleanOption.enabled = topBlocks.length > 1;
-    cleanOption.callback = this.cleanUp_.bind(this);
+    cleanOption.callback = this.cleanUp.bind(this);
     menuOptions.push(cleanOption);
   }
 
@@ -1215,6 +1275,126 @@ Blockly.WorkspaceSvg.prototype.updateGridPattern_ = function() {
   }
 };
 
+
+/**
+ * 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;

core/xml.js

@@ -36,7 +36,7 @@ goog.require('goog.dom');
  * @return {!Element} XML document.
  */
 Blockly.Xml.workspaceToDom = function(workspace) {
-  var xml = goog.dom.createUntypedDom('xml');
+  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));
@@ -68,8 +68,7 @@ Blockly.Xml.blockToDomWithXY = function(block) {
  * @return {!Element} Tree of XML elements.
  */
 Blockly.Xml.blockToDom = function(block) {
-  var element = goog.dom.createUntypedDom(
+  var element = goog.dom.createDom(block.isShadow() ? 'shadow' : 'block');
-      block.isShadow() ? 'shadow' : 'block');
   element.setAttribute('type', block.type);
   element.setAttribute('id', block.id);
   if (block.mutationToDom) {
@@ -81,8 +80,7 @@ Blockly.Xml.blockToDom = function(block) {
   }
   function fieldToDom(field) {
     if (field.name && field.EDITABLE) {
-      var container =
+      var container = goog.dom.createDom('field', null, field.getValue());
-          goog.dom.createUntypedDom('field', null, field.getValue());
       container.setAttribute('name', field.name);
       element.appendChild(container);
     }
@@ -95,8 +93,7 @@ Blockly.Xml.blockToDom = function(block) {
 
   var commentText = block.getCommentText();
   if (commentText) {
-    var commentElement =
+    var commentElement = goog.dom.createDom('comment', null, commentText);
-        goog.dom.createUntypedDom('comment', null, commentText);
     if (typeof block.comment == 'object') {
       commentElement.setAttribute('pinned', block.comment.isVisible());
       var hw = block.comment.getBubbleSize();
@@ -107,7 +104,7 @@ Blockly.Xml.blockToDom = function(block) {
   }
 
   if (block.data) {
-    var dataElement = goog.dom.createUntypedDom('data', null, block.data);
+    var dataElement = goog.dom.createDom('data', null, block.data);
     element.appendChild(dataElement);
   }
 
@@ -119,9 +116,9 @@ Blockly.Xml.blockToDom = function(block) {
     } else {
       var childBlock = input.connection.targetBlock();
       if (input.type == Blockly.INPUT_VALUE) {
-        container = goog.dom.createUntypedDom('value');
+        container = goog.dom.createDom('value');
       } else if (input.type == Blockly.NEXT_STATEMENT) {
-        container = goog.dom.createUntypedDom('statement');
+        container = goog.dom.createDom('statement');
       }
       var shadow = input.connection.getShadowDom();
       if (shadow && (!childBlock || !childBlock.isShadow())) {
@@ -158,8 +155,8 @@ Blockly.Xml.blockToDom = function(block) {
 
   var nextBlock = block.getNextBlock();
   if (nextBlock) {
-    var container = goog.dom.createUntypedDom(
+    var container = goog.dom.createDom('next', null,
-        'next', null, Blockly.Xml.blockToDom(nextBlock));
+        Blockly.Xml.blockToDom(nextBlock));
     element.appendChild(container);
   }
   var shadow = block.nextConnection && block.nextConnection.getShadowDom();
@@ -316,6 +313,8 @@ Blockly.Xml.domToWorkspace = function(xml, workspace) {
     Blockly.Events.setGroup(false);
   }
   Blockly.Field.stopCache();
+
+  workspace.updateVariableList(false);
 };
 
 /**
@@ -359,7 +358,7 @@ Blockly.Xml.domToBlock = function(xmlBlock, workspace) {
       topBlock.updateDisabled();
       // Allow the scrollbars to resize and move based on the new contents.
       // TODO(@picklesrus): #387. Remove when domToBlock avoids resizing.
-      Blockly.resizeSvgContents(workspace);
+      workspace.resizeContents();
     }
   } finally {
     Blockly.Events.enable();

dart_compressed.js

@@ -6,11 +6,11 @@
 Blockly.Dart=new Blockly.Generator("Dart");Blockly.Dart.addReservedWords("assert,break,case,catch,class,const,continue,default,do,else,enum,extends,false,final,finally,for,if,in,is,new,null,rethrow,return,super,switch,this,throw,true,try,var,void,while,with,print,identityHashCode,identical,BidirectionalIterator,Comparable,double,Function,int,Invocation,Iterable,Iterator,List,Map,Match,num,Pattern,RegExp,Set,StackTrace,String,StringSink,Type,bool,DateTime,Deprecated,Duration,Expando,Null,Object,RuneIterator,Runes,Stopwatch,StringBuffer,Symbol,Uri,Comparator,AbstractClassInstantiationError,ArgumentError,AssertionError,CastError,ConcurrentModificationError,CyclicInitializationError,Error,Exception,FallThroughError,FormatException,IntegerDivisionByZeroException,NoSuchMethodError,NullThrownError,OutOfMemoryError,RangeError,StackOverflowError,StateError,TypeError,UnimplementedError,UnsupportedError");
 Blockly.Dart.ORDER_ATOMIC=0;Blockly.Dart.ORDER_UNARY_POSTFIX=1;Blockly.Dart.ORDER_UNARY_PREFIX=2;Blockly.Dart.ORDER_MULTIPLICATIVE=3;Blockly.Dart.ORDER_ADDITIVE=4;Blockly.Dart.ORDER_SHIFT=5;Blockly.Dart.ORDER_BITWISE_AND=6;Blockly.Dart.ORDER_BITWISE_XOR=7;Blockly.Dart.ORDER_BITWISE_OR=8;Blockly.Dart.ORDER_RELATIONAL=9;Blockly.Dart.ORDER_EQUALITY=10;Blockly.Dart.ORDER_LOGICAL_AND=11;Blockly.Dart.ORDER_LOGICAL_OR=12;Blockly.Dart.ORDER_IF_NULL=13;Blockly.Dart.ORDER_CONDITIONAL=14;
 Blockly.Dart.ORDER_CASCADE=15;Blockly.Dart.ORDER_ASSIGNMENT=16;Blockly.Dart.ORDER_NONE=99;Blockly.Dart.ONE_BASED_INDEXING=!0;
-Blockly.Dart.init=function(a){Blockly.Dart.definitions_=Object.create(null);Blockly.Dart.functionNames_=Object.create(null);Blockly.Dart.variableDB_?Blockly.Dart.variableDB_.reset():Blockly.Dart.variableDB_=new Blockly.Names(Blockly.Dart.RESERVED_WORDS_);var b=[];a=Blockly.Variables.allVariables(a);if(a.length){for(var c=0;c<a.length;c++)b[c]=Blockly.Dart.variableDB_.getName(a[c],Blockly.Variables.NAME_TYPE);Blockly.Dart.definitions_.variables="var "+b.join(", ")+";"}};
+Blockly.Dart.init=function(a){Blockly.Dart.definitions_=Object.create(null);Blockly.Dart.functionNames_=Object.create(null);Blockly.Dart.variableDB_?Blockly.Dart.variableDB_.reset():Blockly.Dart.variableDB_=new Blockly.Names(Blockly.Dart.RESERVED_WORDS_);var b=[];a=a.variableList;if(a.length){for(var c=0;c<a.length;c++)b[c]=Blockly.Dart.variableDB_.getName(a[c],Blockly.Variables.NAME_TYPE);Blockly.Dart.definitions_.variables="var "+b.join(", ")+";"}};
 Blockly.Dart.finish=function(a){a&&(a=Blockly.Dart.prefixLines(a,Blockly.Dart.INDENT));a="main() {\n"+a+"}";var b=[],c=[],d;for(d in Blockly.Dart.definitions_){var e=Blockly.Dart.definitions_[d];e.match(/^import\s/)?b.push(e):c.push(e)}delete Blockly.Dart.definitions_;delete Blockly.Dart.functionNames_;Blockly.Dart.variableDB_.reset();return(b.join("\n")+"\n\n"+c.join("\n\n")).replace(/\n\n+/g,"\n\n").replace(/\n*$/,"\n\n\n")+a};Blockly.Dart.scrubNakedValue=function(a){return a+";\n"};
 Blockly.Dart.quote_=function(a){a=a.replace(/\\/g,"\\\\").replace(/\n/g,"\\\n").replace(/\$/g,"\\$").replace(/'/g,"\\'");return"'"+a+"'"};
-Blockly.Dart.scrub_=function(a,b){var c="";if(!a.outputConnection||!a.outputConnection.targetConnection){var d=a.getCommentText();d&&(c=a.getProcedureDef?c+Blockly.Dart.prefixLines(d+"\n","/// "):c+Blockly.Dart.prefixLines(d+"\n","// "));for(var e=0;e<a.inputList.length;e++)a.inputList[e].type==Blockly.INPUT_VALUE&&(d=a.inputList[e].connection.targetBlock())&&(d=Blockly.Dart.allNestedComments(d))&&(c+=Blockly.Dart.prefixLines(d,"// "))}e=a.nextConnection&&a.nextConnection.targetBlock();e=Blockly.Dart.blockToCode(e);
+Blockly.Dart.scrub_=function(a,b){var c="";if(!a.outputConnection||!a.outputConnection.targetConnection){var d=a.getCommentText();(d=Blockly.utils.wrap(d,Blockly.Dart.COMMENT_WRAP-3))&&(c=a.getProcedureDef?c+Blockly.Dart.prefixLines(d+"\n","/// "):c+Blockly.Dart.prefixLines(d+"\n","// "));for(var e=0;e<a.inputList.length;e++)a.inputList[e].type==Blockly.INPUT_VALUE&&(d=a.inputList[e].connection.targetBlock())&&(d=Blockly.Dart.allNestedComments(d))&&(c+=Blockly.Dart.prefixLines(d,"// "))}e=a.nextConnection&&
-return c+b+e};
+a.nextConnection.targetBlock();e=Blockly.Dart.blockToCode(e);return c+b+e};
 Blockly.Dart.getAdjusted=function(a,b,c,d,e){c=c||0;e=e||Blockly.Dart.ORDER_NONE;Blockly.Dart.ONE_BASED_INDEXING&&c--;var f=Blockly.Dart.ONE_BASED_INDEXING?"1":"0";a=c?Blockly.Dart.valueToCode(a,b,Blockly.Dart.ORDER_ADDITIVE)||f:d?Blockly.Dart.valueToCode(a,b,Blockly.Dart.ORDER_UNARY_PREFIX)||f:Blockly.Dart.valueToCode(a,b,e)||f;if(Blockly.isNumber(a))a=parseInt(a,10)+c,d&&(a=-a);else{if(0<c){a=a+" + "+c;var g=Blockly.Dart.ORDER_ADDITIVE}else 0>c&&(a=a+" - "+-c,g=Blockly.Dart.ORDER_ADDITIVE);d&&(a=
 c?"-("+a+")":"-"+a,g=Blockly.Dart.ORDER_UNARY_PREFIX);g=Math.floor(g);e=Math.floor(e);g&&e>=g&&(a="("+a+")")}return a};Blockly.Dart.colour={};Blockly.Dart.addReservedWords("Math");Blockly.Dart.colour_picker=function(a){return["'"+a.getFieldValue("COLOUR")+"'",Blockly.Dart.ORDER_ATOMIC]};
 Blockly.Dart.colour_random=function(a){Blockly.Dart.definitions_.import_dart_math="import 'dart:math' as Math;";return[Blockly.Dart.provideFunction_("colour_random",["String "+Blockly.Dart.FUNCTION_NAME_PLACEHOLDER_+"() {","  String hex = '0123456789abcdef';","  var rnd = new Math.Random();","  return '#${hex[rnd.nextInt(16)]}${hex[rnd.nextInt(16)]}'","      '${hex[rnd.nextInt(16)]}${hex[rnd.nextInt(16)]}'","      '${hex[rnd.nextInt(16)]}${hex[rnd.nextInt(16)]}';","}"])+"()",Blockly.Dart.ORDER_UNARY_POSTFIX]};

demos/accessible/index.html

@@ -19,6 +19,8 @@
   <script src="../../accessible/libs/angular2-all.umd.min.js"></script>
 
   <script src="../../accessible/utils.service.js"></script>
+  <script src="../../accessible/audio.service.js"></script>
+  <script src="../../accessible/notifications.service.js"></script>
   <script src="../../accessible/clipboard.service.js"></script>
   <script src="../../accessible/tree.service.js"></script>
   <script src="../../accessible/translate.pipe.js"></script>
@@ -30,7 +32,7 @@
   <script src="../../accessible/workspace.component.js"></script>
   <script src="../../accessible/app.component.js"></script>
 
-  <link rel="stylesheet" href="../../media/accessible.css">
+  <link rel="stylesheet" href="../../accessible/media/accessible.css">
   <style>
     body {
       background-color: #fff;
@@ -40,14 +42,27 @@
       font-weight: normal;
       font-size: 140%;
     }
+
+    *:focus {
+      background: yellow;
+    }
   </style>
 </head>
 <body>
-  <h1><a href="https://developers.google.com/blockly/">Blockly</a> &gt;
+  <h1>
-    <a href="../index.html">Demos</a> &gt; Accessible Blockly</h1>
+    <a href="https://developers.google.com/blockly/">Blockly</a> &gt;
+    <a href="../index.html">Demos</a> &gt; Accessible Blockly
+  </h1>
 
   <p>This is a simple demo of a version of Blockly designed for screen readers.</p>
 
+  <p>
+    In Blockly, you can move blocks from the toolbox to the workspace and join
+    them to create programs. To navigate between components, use Tab or
+    Shift-Tab. When you're on a block, move right to access its submenus, and
+    move up or down to go to the next or previous block in the sequence.
+  </p>
+
   <!--
   <p>&rarr; More info on <a href="https://developers.google.com/blockly/">accessible Blockly</a>&hellip;</p>
   -->
@@ -58,7 +73,9 @@
     var ACCESSIBLE_GLOBALS = {
       // Additional buttons for the workspace toolbar that
       // go before the "Clear Workspace" button.
-      toolbarButtonConfig: []
+      toolbarButtonConfig: [],
+      // Prefix of path to sound files.
+      mediaPathPrefix: '../../accessible/media/'
     };
     document.addEventListener('DOMContentLoaded', function() {
       ng.platform.browser.bootstrap(blocklyApp.AppView);
@@ -72,7 +89,6 @@
       <block type="logic_operation"></block>
       <block type="logic_negate"></block>
       <block type="logic_boolean"></block>
-      <block type="logic_null" disabled="true"></block>
       <block type="logic_ternary"></block>
     </category>
     <category name="Loops" colour="120">
@@ -83,7 +99,6 @@
           </block>
         </value>
       </block>
-      <block type="controls_repeat" disabled="true"></block>
       <block type="controls_whileUntil"></block>
       <block type="controls_for">
         <value name="FROM">
@@ -326,9 +341,6 @@
         </value>
       </block>
     </category>
-    <sep></sep>
-    <category name="Variables" colour="330" custom="VARIABLE"></category>
-    <category name="Functions" colour="290" custom="PROCEDURE"></category>
   </xml>
 
 </body>

demos/blockfactory/index.html

@@ -140,8 +140,8 @@
             <td height="5%">
               <h3>Language code:
                 <select id="format">
-                  <option value="JavaScript">JavaScript</option>
                   <option value="JSON">JSON</option>
+                  <option value="JavaScript">JavaScript</option>
                   <option value="Manual">Manual edit&hellip;</option>
                 </select>
               </h3>

demos/blocklyfactory/app_controller.js

@@ -0,0 +1,635 @@
+/**
+ * @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 The AppController Class brings together the Block
+ * Factory, Block Library, and Block Exporter functionality into a single web
+ * app.
+ *
+ * @author quachtina96 (Tina Quach)
+ */
+goog.provide('AppController');
+
+goog.require('BlockFactory');
+goog.require('FactoryUtils');
+goog.require('BlockLibraryController');
+goog.require('BlockExporterController');
+goog.require('goog.dom.classlist');
+goog.require('goog.string');
+goog.require('goog.ui.PopupColorPicker');
+goog.require('goog.ui.ColorPicker');
+
+/**
+ * Controller for the Blockly Factory
+ * @constructor
+ */
+AppController = function() {
+  // Initialize Block Library
+  this.blockLibraryName = 'blockLibrary';
+  this.blockLibraryController =
+      new BlockLibraryController(this.blockLibraryName);
+  this.blockLibraryController.populateBlockLibrary();
+
+  // Construct Workspace Factory Controller.
+  this.workspaceFactoryController = new WorkspaceFactoryController
+      ('workspacefactory_toolbox', 'toolbox_blocks', 'preview_blocks');
+
+  // Initialize Block Exporter
+  this.exporter =
+      new BlockExporterController(this.blockLibraryController.storage);
+
+  // Map of tab type to the div element for the tab.
+  this.tabMap = Object.create(null);
+  this.tabMap[AppController.BLOCK_FACTORY] =
+      goog.dom.getElement('blockFactory_tab');
+  this.tabMap[AppController.WORKSPACE_FACTORY] =
+      goog.dom.getElement('workspaceFactory_tab');
+  this.tabMap[AppController.EXPORTER] =
+      goog.dom.getElement('blocklibraryExporter_tab');
+
+  // Selected tab.
+  this.selectedTab = AppController.BLOCK_FACTORY;
+};
+
+// Constant values representing the three tabs in the controller.
+AppController.BLOCK_FACTORY = 'BLOCK_FACTORY';
+AppController.WORKSPACE_FACTORY = 'WORKSPACE_FACTORY';
+AppController.EXPORTER = 'EXPORTER';
+
+/**
+ * Tied to the 'Import Block Library' button. Imports block library from file to
+ * Block Factory. Expects user to upload a single file of JSON mapping each
+ * block type to its xml text representation.
+ */
+AppController.prototype.importBlockLibraryFromFile = function() {
+  var self = this;
+  var files = document.getElementById('files');
+  // If the file list is empty, the user likely canceled in the dialog.
+  if (files.files.length > 0) {
+    // The input tag doesn't have the "multiple" attribute
+    // so the user can only choose 1 file.
+    var file = files.files[0];
+    var fileReader = new FileReader();
+
+    // Create a map of block type to xml text from the file when it has been
+    // read.
+    fileReader.addEventListener('load', function(event) {
+      var fileContents = event.target.result;
+      // Create empty object to hold the read block library information.
+      var blockXmlTextMap = Object.create(null);
+      try {
+        // Parse the file to get map of block type to xml text.
+        blockXmlTextMap = self.formatBlockLibraryForImport_(fileContents);
+      } catch (e) {
+        var message = 'Could not load your block library file.\n'
+        window.alert(message + '\nFile Name: ' + file.name);
+        return;
+      }
+
+      // Create a new block library storage object with inputted block library.
+      var blockLibStorage = new BlockLibraryStorage(
+          self.blockLibraryName, blockXmlTextMap);
+
+      // Update block library controller with the new block library
+      // storage.
+      self.blockLibraryController.setBlockLibraryStorage(blockLibStorage);
+      // Update the block library dropdown.
+      self.blockLibraryController.populateBlockLibrary();
+      // Update the exporter's block library storage.
+      self.exporter.setBlockLibraryStorage(blockLibStorage);
+    });
+    // Read the file.
+    fileReader.readAsText(file);
+  }
+};
+
+/**
+ * Tied to the 'Export Block Library' button. Exports block library to file that
+ * contains JSON mapping each block type to its xml text representation.
+ */
+AppController.prototype.exportBlockLibraryToFile = function() {
+  // Get map of block type to xml.
+  var blockLib = this.blockLibraryController.getBlockLibrary();
+  // Concatenate the xmls, each separated by a blank line.
+  var blockLibText = this.formatBlockLibraryForExport_(blockLib);
+  // Get file name.
+  var filename = prompt('Enter the file name under which to save your block ' +
+      'library.');
+  // Download file if all necessary parameters are provided.
+  if (filename) {
+    FactoryUtils.createAndDownloadFile(blockLibText, filename, 'xml');
+  } else {
+    alert('Could not export Block Library without file name under which to ' +
+      'save library.');
+  }
+};
+
+/**
+ * Converts an object mapping block type to xml to text file for output.
+ * @private
+ *
+ * @param {!Object} blockXmlMap - Object mapping block type to xml.
+ * @return {string} Xml text containing the block xmls.
+ */
+AppController.prototype.formatBlockLibraryForExport_ = function(blockXmlMap) {
+  // Create DOM for XML.
+  var xmlDom = goog.dom.createDom('xml', {
+    'xmlns':"http://www.w3.org/1999/xhtml"
+  });
+
+  // Append each block node to xml dom.
+  for (var blockType in blockXmlMap) {
+    var blockXmlDom = Blockly.Xml.textToDom(blockXmlMap[blockType]);
+    var blockNode = blockXmlDom.firstElementChild;
+    xmlDom.appendChild(blockNode);
+  }
+
+  // Return the xml text.
+  return Blockly.Xml.domToText(xmlDom);
+};
+
+/**
+ * Converts imported block library to an object mapping block type to block xml.
+ * @private
+ *
+ * @param {string} xmlText - String representation of an xml with each block as
+ *    a child node.
+ * @return {!Object} object mapping block type to xml text.
+ */
+AppController.prototype.formatBlockLibraryForImport_ = function(xmlText) {
+  var xmlDom = Blockly.Xml.textToDom(xmlText);
+
+  // Get array of xmls. Use an asterisk (*) instead of a tag name for the XPath
+  // selector, to match all elements at that level and get all factory_base
+  // blocks.
+  var blockNodes = goog.dom.xml.selectNodes(xmlDom, '*');
+
+  // Create empty map. The line below creates a  truly empy object. It doesn't
+  // have built-in attributes/functions such as length or toString.
+  var blockXmlTextMap = Object.create(null);
+
+  // Populate map.
+  for (var i = 0, blockNode; blockNode = blockNodes[i]; i++) {
+
+    // Add outer xml tag to the block for proper injection in to the
+    // main workspace.
+    // Create DOM for XML.
+    var xmlDom = goog.dom.createDom('xml', {
+      'xmlns':"http://www.w3.org/1999/xhtml"
+    });
+    xmlDom.appendChild(blockNode);
+
+    var xmlText = Blockly.Xml.domToText(xmlDom);
+    // All block types should be lowercase.
+    var blockType = this.getBlockTypeFromXml_(xmlText).toLowerCase();
+
+    blockXmlTextMap[blockType] = xmlText;
+  }
+
+  return blockXmlTextMap;
+};
+
+/**
+ * Extracts out block type from xml text, the kind that is saved in block
+ * library storage.
+ * @private
+ *
+ * @param {!string} xmlText - A block's xml text.
+ * @return {string} The block type that corresponds to the provided xml text.
+ */
+AppController.prototype.getBlockTypeFromXml_ = function(xmlText) {
+  var xmlDom = Blockly.Xml.textToDom(xmlText);
+  // Find factory base block.
+  var factoryBaseBlockXml = xmlDom.getElementsByTagName('block')[0];
+  // Get field elements from factory base.
+  var fields = factoryBaseBlockXml.getElementsByTagName('field');
+  for (var i = 0; i < fields.length; i++) {
+    // The field whose name is 'NAME' holds the block type as its value.
+    if (fields[i].getAttribute('name') == 'NAME') {
+      return fields[i].childNodes[0].nodeValue;
+    }
+  }
+};
+
+/**
+ * Updates the Block Factory tab to show selected block when user selects a
+ * different block in the block library dropdown. Tied to block library dropdown
+ * in index.html.
+ *
+ * @param {!Element} blockLibraryDropdown - HTML select element from which the
+ *    user selects a block to work on.
+ */
+AppController.prototype.onSelectedBlockChanged
+    = function(blockLibraryDropdown) {
+  // Get selected block type.
+  var blockType = this.blockLibraryController.getSelectedBlockType(
+      blockLibraryDropdown);
+  // Update Block Factory page by showing the selected block.
+  this.blockLibraryController.openBlock(blockType);
+};
+
+/**
+ * Add click handlers to each tab to allow switching between the Block Factory,
+ * Workspace Factory, and Block Exporter tab.
+ *
+ * @param {!Object} tabMap - Map of tab name to div element that is the tab.
+ */
+AppController.prototype.addTabHandlers = function(tabMap) {
+  var self = this;
+  for (var tabName in tabMap) {
+    var tab = tabMap[tabName];
+    // Use an additional closure to correctly assign the tab callback.
+    tab.addEventListener('click', self.makeTabClickHandler_(tabName));
+  }
+};
+
+/**
+ * Set the selected tab.
+ * @private
+ *
+ * @param {string} tabName AppController.BLOCK_FACTORY,
+ *    AppController.WORKSPACE_FACTORY, or AppController.EXPORTER
+ */
+AppController.prototype.setSelected_ = function(tabName) {
+  this.selectedTab = tabName;
+};
+
+/**
+ * Creates the tab click handler specific to the tab specified.
+ * @private
+ *
+ * @param {string} tabName AppController.BLOCK_FACTORY,
+ *    AppController.WORKSPACE_FACTORY, or AppController.EXPORTER
+ * @return {Function} The tab click handler.
+ */
+AppController.prototype.makeTabClickHandler_ = function(tabName) {
+  var self = this;
+  return function() {
+    self.setSelected_(tabName);
+    self.onTab();
+  };
+};
+
+/**
+ * Called on each tab click. Hides and shows specific content based on which tab
+ * (Block Factory, Workspace Factory, or Exporter) is selected.
+ */
+AppController.prototype.onTab = function() {
+  // Get tab div elements.
+  var blockFactoryTab = this.tabMap[AppController.BLOCK_FACTORY];
+  var exporterTab = this.tabMap[AppController.EXPORTER];
+  var workspaceFactoryTab = this.tabMap[AppController.WORKSPACE_FACTORY];
+
+  // Turn selected tab on and other tabs off.
+  this.styleTabs_();
+
+  // Only enable key events in workspace factory if workspace factory tab is
+  // selected.
+  this.workspaceFactoryController.keyEventsEnabled =
+      this.selectedTab == AppController.WORKSPACE_FACTORY;
+
+  if (this.selectedTab == AppController.EXPORTER) {
+    // Show container of exporter.
+    FactoryUtils.show('blockLibraryExporter');
+    FactoryUtils.hide('workspaceFactoryContent');
+
+    // Need accurate state in order to know which blocks are used in workspace
+    // factory.
+    this.workspaceFactoryController.saveStateFromWorkspace();
+
+    // Update exporter's list of the types of blocks used in workspace factory.
+    var usedBlockTypes = this.workspaceFactoryController.getAllUsedBlockTypes();
+    this.exporter.setUsedBlockTypes(usedBlockTypes);
+
+    // Update exporter's block selector to reflect current block library.
+    this.exporter.updateSelector();
+
+    // Update the preview to reflect any changes made to the blocks.
+    this.exporter.updatePreview();
+
+  } else if (this.selectedTab ==  AppController.BLOCK_FACTORY) {
+    // Hide container of exporter.
+    FactoryUtils.hide('blockLibraryExporter');
+    FactoryUtils.hide('workspaceFactoryContent');
+
+  } else if (this.selectedTab == AppController.WORKSPACE_FACTORY) {
+    // Hide container of exporter.
+    FactoryUtils.hide('blockLibraryExporter');
+    // Show workspace factory container.
+    FactoryUtils.show('workspaceFactoryContent');
+    // Update block library category.
+    var categoryXml = this.exporter.getBlockLibraryCategory();
+    var blockTypes = this.blockLibraryController.getStoredBlockTypes();
+    this.workspaceFactoryController.setBlockLibCategory(categoryXml,
+        blockTypes);
+  }
+
+  // Resize to render workspaces' toolboxes correctly for all tabs.
+  window.dispatchEvent(new Event('resize'));
+};
+
+/**
+ * Called on each tab click. Styles the tabs to reflect which tab is selected.
+ * @private
+ */
+AppController.prototype.styleTabs_ = function() {
+  for (var tabName in this.tabMap) {
+    if (this.selectedTab == tabName) {
+      goog.dom.classlist.addRemove(this.tabMap[tabName], 'taboff', 'tabon');
+    } else {
+      goog.dom.classlist.addRemove(this.tabMap[tabName], 'tabon', 'taboff');
+    }
+  }
+};
+
+/**
+ * Assign button click handlers for the exporter.
+ */
+AppController.prototype.assignExporterClickHandlers = function() {
+  var self = this;
+  document.getElementById('button_setBlocks').addEventListener('click',
+      function() {
+        document.getElementById('dropdownDiv_setBlocks').classList.toggle("show");
+      });
+
+  document.getElementById('dropdown_addAllUsed').addEventListener('click',
+      function() {
+        self.exporter.selectUsedBlocks();
+        self.exporter.updatePreview();
+        document.getElementById('dropdownDiv_setBlocks').classList.remove("show");
+      });
+
+  document.getElementById('dropdown_clearSelected').addEventListener('click',
+      function() {
+        self.exporter.clearSelectedBlocks();
+        self.exporter.updatePreview();
+        document.getElementById('dropdownDiv_setBlocks').classList.remove("show");
+      });
+
+  document.getElementById('dropdown_addAllFromLib').addEventListener('click',
+      function() {
+        self.exporter.selectAllBlocks();
+        self.exporter.updatePreview();
+        document.getElementById('dropdownDiv_setBlocks').classList.remove("show");
+      });
+
+  // Export blocks when the user submits the export settings.
+  document.getElementById('exporterSubmitButton').addEventListener('click',
+      function() {
+        self.exporter.export();
+      });
+};
+
+/**
+ * Assign change listeners for the exporter. These allow for the dynamic update
+ * of the exporter preview.
+ */
+AppController.prototype.assignExporterChangeListeners = function() {
+  var self = this;
+
+  var blockDefCheck = document.getElementById('blockDefCheck');
+  var genStubCheck = document.getElementById('genStubCheck');
+
+  var blockDefs = document.getElementById('blockDefs');
+  var blockDefSettings = document.getElementById('blockDefSettings');
+  var blockDefElements = [blockDefs, blockDefSettings];
+
+  var genStubs = document.getElementById('genStubs');
+  var genStubSettings = document.getElementById('genStubSettings');
+  var genStubElements = [genStubs, genStubSettings];
+
+  // Select the block definitions and generator stubs on default.
+  blockDefCheck.checked = true;
+  genStubCheck.checked = true;
+
+  // Checking the block definitions checkbox displays preview of code to export.
+  document.getElementById('blockDefCheck').addEventListener('change',
+      function(e) {
+        self.ifCheckedDisplay(blockDefCheck, blockDefElements);
+      });
+
+  // Preview updates when user selects different block definition format.
+  document.getElementById('exportFormat').addEventListener('change',
+      function(e) {
+        self.exporter.updatePreview();
+      });
+
+  // Checking the generator stub checkbox displays preview of code to export.
+  document.getElementById('genStubCheck').addEventListener('change',
+      function(e) {
+        self.ifCheckedDisplay(genStubCheck, genStubElements);
+      });
+
+  // Preview updates when user selects different generator stub language.
+  document.getElementById('exportLanguage').addEventListener('change',
+      function(e) {
+        self.exporter.updatePreview();
+      });
+};
+
+/**
+ * If given checkbox is checked, display given elements. Otherwise, hide.
+ *
+ * @param {!Element} checkbox - Input element of type checkbox.
+ * @param {!Array.<!Element>} elementArray - Array of elements to show when
+ *    block is checked.
+ */
+AppController.prototype.ifCheckedDisplay = function(checkbox, elementArray) {
+  for (var i = 0, element; element = elementArray[i]; i++) {
+    element.style.display = checkbox.checked ? 'block' : 'none';
+  }
+};
+
+/**
+ * Assign button click handlers for the block library.
+ */
+AppController.prototype.assignLibraryClickHandlers = function() {
+  var self = this;
+  // Assign button click handlers for Block Library.
+  document.getElementById('saveToBlockLibraryButton').addEventListener('click',
+      function() {
+        self.blockLibraryController.saveToBlockLibrary();
+      });
+
+  document.getElementById('removeBlockFromLibraryButton').addEventListener(
+    'click',
+      function() {
+        self.blockLibraryController.removeFromBlockLibrary();
+      });
+
+  document.getElementById('clearBlockLibraryButton').addEventListener('click',
+      function() {
+        self.blockLibraryController.clearBlockLibrary();
+      });
+
+  var dropdown = document.getElementById('blockLibraryDropdown');
+  dropdown.addEventListener('change',
+      function() {
+        self.onSelectedBlockChanged(dropdown);
+      });
+};
+
+/**
+ * Assign button click handlers for the block factory.
+ */
+AppController.prototype.assignBlockFactoryClickHandlers = function() {
+  var self = this;
+  // Assign button event handlers for Block Factory.
+  document.getElementById('localSaveButton')
+      .addEventListener('click', function() {
+        self.exportBlockLibraryToFile();
+      });
+
+  document.getElementById('helpButton').addEventListener('click',
+      function() {
+        open('https://developers.google.com/blockly/custom-blocks/block-factory',
+             'BlockFactoryHelp');
+      });
+
+  document.getElementById('files').addEventListener('change',
+      function() {
+        // Warn user.
+        var replace = confirm('This imported block library will ' +
+            'replace your current block library.');
+        if (replace) {
+          self.importBlockLibraryFromFile();
+          // Clear this so that the change event still fires even if the
+          // same file is chosen again. If the user re-imports a file, we
+          // want to reload the workspace with its contents.
+          this.value = null;
+        }
+      });
+
+  document.getElementById('createNewBlockButton')
+    .addEventListener('click', function() {
+        BlockFactory.showStarterBlock();
+        BlockLibraryView.selectDefaultOption('blockLibraryDropdown');
+    });
+};
+
+/**
+ * Add event listeners for the block factory.
+ */
+AppController.prototype.addBlockFactoryEventListeners = function() {
+  BlockFactory.mainWorkspace.addChangeListener(BlockFactory.updateLanguage);
+  document.getElementById('direction')
+      .addEventListener('change', BlockFactory.updatePreview);
+  document.getElementById('languageTA')
+      .addEventListener('change', BlockFactory.updatePreview);
+  document.getElementById('languageTA')
+      .addEventListener('keyup', BlockFactory.updatePreview);
+  document.getElementById('format')
+      .addEventListener('change', BlockFactory.formatChange);
+  document.getElementById('language')
+      .addEventListener('change', BlockFactory.updatePreview);
+};
+
+/**
+ * Handle Blockly Storage with App Engine.
+ */
+AppController.prototype.initializeBlocklyStorage = function() {
+  BlocklyStorage.HTTPREQUEST_ERROR =
+      'There was a problem with the request.\n';
+  BlocklyStorage.LINK_ALERT =
+      'Share your blocks with this link:\n\n%1';
+  BlocklyStorage.HASH_ERROR =
+      'Sorry, "%1" doesn\'t correspond with any saved Blockly file.';
+  BlocklyStorage.XML_ERROR = 'Could not load your saved file.\n' +
+      'Perhaps it was created with a different version of Blockly?';
+  var linkButton = document.getElementById('linkButton');
+  linkButton.style.display = 'inline-block';
+  linkButton.addEventListener('click',
+      function() {
+          BlocklyStorage.link(BlockFactory.mainWorkspace);});
+  BlockFactory.disableEnableLink();
+};
+
+/**
+ * Handle resizing of elements.
+ */
+AppController.prototype.onresize = function(event) {
+  // Handle resizing of Block Factory elements.
+  var expandList = [
+    document.getElementById('blockly'),
+    document.getElementById('blocklyMask'),
+    document.getElementById('preview'),
+    document.getElementById('languagePre'),
+    document.getElementById('languageTA'),
+    document.getElementById('generatorPre')
+  ];
+  for (var i = 0, expand; expand = expandList[i]; i++) {
+    expand.style.width = (expand.parentNode.offsetWidth - 2) + 'px';
+    expand.style.height = (expand.parentNode.offsetHeight - 2) + 'px';
+  }
+
+  // Handle resize of Exporter block options.
+  this.exporter.view.centerPreviewBlocks();
+};
+
+/**
+ * Initialize Blockly and layout.  Called on page load.
+ */
+AppController.prototype.init = function() {
+  // Handle Blockly Storage with App Engine
+  if ('BlocklyStorage' in window) {
+    this.initializeBlocklyStorage();
+  }
+
+  // Assign click handlers.
+  this.assignExporterClickHandlers();
+  this.assignLibraryClickHandlers();
+  this.assignBlockFactoryClickHandlers();
+
+  this.onresize();
+  self = this;
+  window.addEventListener('resize', function() {
+    self.onresize();
+  });
+
+  // Inject Block Factory Main Workspace.
+  var toolbox = document.getElementById('blockfactory_toolbox');
+  BlockFactory.mainWorkspace = Blockly.inject('blockly',
+      {collapse: false,
+       toolbox: toolbox,
+       media: '../../media/'});
+
+  // Add tab handlers for switching between Block Factory and Block Exporter.
+  this.addTabHandlers(this.tabMap);
+
+  // Assign exporter change listeners.
+  this.assignExporterChangeListeners();
+
+  // Create the root block on Block Factory main workspace.
+  if ('BlocklyStorage' in window && window.location.hash.length > 1) {
+    BlocklyStorage.retrieveXml(window.location.hash.substring(1),
+                               BlockFactory.mainWorkspace);
+  } else {
+    BlockFactory.showStarterBlock();
+  }
+  BlockFactory.mainWorkspace.clearUndo();
+
+  // Add Block Factory event listeners.
+  this.addBlockFactoryEventListeners();
+
+  // Workspace Factory init.
+  WorkspaceFactoryInit.initWorkspaceFactory(this.workspaceFactoryController);
+};
+
+

demos/blocklyfactory/block_exporter_controller.js

@@ -0,0 +1,335 @@
+/**
+ * @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 Javascript for the Block Exporter Controller class. Allows
+ * users to export block definitions and generator stubs of their saved blocks
+ * easily using a visual interface. Depends on Block Exporter View and Block
+ * Exporter Tools classes. Interacts with Export Settings in the index.html.
+ *
+ * @author quachtina96 (Tina Quach)
+ */
+
+'use strict';
+
+goog.provide('BlockExporterController');
+
+goog.require('FactoryUtils');
+goog.require('StandardCategories');
+goog.require('BlockExporterView');
+goog.require('BlockExporterTools');
+goog.require('goog.dom.xml');
+
+/**
+ * BlockExporter Controller Class
+ * @constructor
+ *
+ * @param {!BlockLibrary.Storage} blockLibStorage - Block Library Storage.
+ */
+BlockExporterController = function(blockLibStorage) {
+  // BlockLibrary.Storage object containing user's saved blocks.
+  this.blockLibStorage = blockLibStorage;
+  // Utils for generating code to export.
+  this.tools = new BlockExporterTools();
+  // The ID of the block selector, a div element that will be populated with the
+  // block options.
+  this.selectorID = 'blockSelector';
+  // Map of block types stored in block library to their corresponding Block
+  // Option objects.
+  this.blockOptions = this.tools.createBlockSelectorFromLib(
+      this.blockLibStorage, this.selectorID);
+  // View provides the block selector and export settings UI.
+  this.view = new BlockExporterView(this.blockOptions);
+};
+
+/**
+ * Set the block library storage object from which exporter exports.
+ *
+ * @param {!BlockLibraryStorage} blockLibStorage - Block Library Storage object
+ *    that stores the blocks.
+ */
+BlockExporterController.prototype.setBlockLibraryStorage =
+    function(blockLibStorage) {
+  this.blockLibStorage = blockLibStorage;
+};
+
+/**
+ * Get the block library storage object from which exporter exports.
+ *
+ * @return {!BlockLibraryStorage} blockLibStorage - Block Library Storage object
+ *    that stores the blocks.
+ */
+BlockExporterController.prototype.getBlockLibraryStorage =
+    function(blockLibStorage) {
+  return this.blockLibStorage;
+};
+
+/**
+ * Get selected blocks from block selector, pulls info from the Export
+ * Settings form in Block Exporter, and downloads code accordingly.
+ */
+BlockExporterController.prototype.export = function() {
+  // Get selected blocks' information.
+  var blockTypes = this.view.getSelectedBlockTypes();
+  var blockXmlMap = this.blockLibStorage.getBlockXmlMap(blockTypes);
+
+  // Pull block definition(s) settings from the Export Settings form.
+  var wantBlockDef = document.getElementById('blockDefCheck').checked;
+  var definitionFormat = document.getElementById('exportFormat').value;
+  var blockDef_filename = document.getElementById('blockDef_filename').value;
+
+  // Pull block generator stub(s) settings from the Export Settings form.
+  var wantGenStub = document.getElementById('genStubCheck').checked;
+  var language = document.getElementById('exportLanguage').value;
+  var generatorStub_filename = document.getElementById(
+      'generatorStub_filename').value;
+
+  if (wantBlockDef) {
+    // User wants to export selected blocks' definitions.
+    if (!blockDef_filename) {
+      // User needs to enter filename.
+      alert('Please enter a filename for your block definition(s) download.');
+    } else {
+      // Get block definition code in the selected format for the blocks.
+      var blockDefs = this.tools.getBlockDefinitions(blockXmlMap,
+          definitionFormat);
+      // Download the file, using .js file ending for JSON or Javascript.
+      FactoryUtils.createAndDownloadFile(
+          blockDefs, blockDef_filename, 'javascript');
+    }
+  }
+
+  if (wantGenStub) {
+    // User wants to export selected blocks' generator stubs.
+    if (!generatorStub_filename) {
+      // User needs to enter filename.
+      alert('Please enter a filename for your generator stub(s) download.');
+    } else {
+      // Get generator stub code in the selected language for the blocks.
+      var genStubs = this.tools.getGeneratorCode(blockXmlMap,
+          language);
+      // Get the correct file extension.
+      if (language == 'JavaScript') {
+        var fileType = 'javascript';
+      } else {
+        var fileType = 'plain';
+      }
+      // Download the file.
+      FactoryUtils.createAndDownloadFile(
+          genStubs, generatorStub_filename, fileType);
+    }
+  }
+
+};
+
+/**
+ * Update the Exporter's block selector with block options generated from blocks
+ * stored in block library.
+ */
+BlockExporterController.prototype.updateSelector = function() {
+  // Get previously selected block types.
+  var oldSelectedTypes = this.view.getSelectedBlockTypes();
+
+  // Generate options from block library and assign to view.
+  this.blockOptions = this.tools.createBlockSelectorFromLib(
+      this.blockLibStorage, this.selectorID);
+  this.addBlockOptionSelectHandlers();
+  this.view.setBlockOptions(this.blockOptions);
+
+  // Select all previously selected blocks.
+  for (var i = 0, blockType; blockType = oldSelectedTypes[i]; i++) {
+    if (this.blockOptions[blockType]) {
+      this.view.select(blockType);
+    }
+  }
+
+  this.view.listSelectedBlocks();
+};
+
+/**
+ * Tied to the 'Clear Selected Blocks' button in the Block Exporter.
+ * Deselects all blocks in the selector and updates text accordingly.
+ */
+BlockExporterController.prototype.clearSelectedBlocks = function() {
+  this.view.deselectAllBlocks();
+  this.view.listSelectedBlocks();
+};
+
+/**
+ * Tied to the 'All Stored' button in the Block Exporter 'Select' dropdown.
+ * Selects all blocks stored in block library for export.
+ */
+BlockExporterController.prototype.selectAllBlocks = function() {
+  var allBlockTypes = this.blockLibStorage.getBlockTypes();
+  for (var i = 0, blockType; blockType = allBlockTypes[i]; i++) {
+    this.view.select(blockType);
+  }
+  this.view.listSelectedBlocks();
+};
+
+/**
+ * Returns the category xml containing all blocks in the block library.
+ *
+ * @return {Element} Xml for a category to be used in toolbox.
+ */
+BlockExporterController.prototype.getBlockLibraryCategory = function() {
+  return this.tools.generateCategoryFromBlockLib(this.blockLibStorage);
+};
+
+/**
+ * Add select handlers to each block option to update the view and the selected
+ * blocks accordingly.
+ */
+BlockExporterController.prototype.addBlockOptionSelectHandlers = function() {
+  var self = this;
+
+  // Click handler for a block option. Toggles whether or not it's selected and
+  // updates helper text accordingly.
+  var updateSelectedBlockTypes_ = function(blockOption) {
+    // Toggle selected.
+    blockOption.setSelected(!blockOption.isSelected());
+
+    // Show currently selected blocks in helper text.
+    self.view.listSelectedBlocks();
+  };
+
+  // Returns a block option select handler.
+  var makeBlockOptionSelectHandler_ = function(blockOption) {
+    return function() {
+      updateSelectedBlockTypes_(blockOption);
+      self.updatePreview();
+    };
+  };
+
+  // Assign a click handler to each block option.
+  for (var blockType in this.blockOptions) {
+    var blockOption = this.blockOptions[blockType];
+    // Use an additional closure to correctly assign the tab callback.
+    blockOption.dom.addEventListener(
+        'click', makeBlockOptionSelectHandler_(blockOption));
+  }
+};
+
+/**
+ * Tied to the 'All Used' button in the Block Exporter's 'Select' button.
+ * Selects all blocks stored in block library and used in workspace factory.
+ */
+BlockExporterController.prototype.selectUsedBlocks = function() {
+  // Deselect all blocks.
+  this.view.deselectAllBlocks();
+
+  // Get list of block types that are in block library and used in workspace
+  // factory.
+  var storedBlockTypes = this.blockLibStorage.getBlockTypes();
+  var sharedBlockTypes = [];
+  // Keep list of custom block types used but not in library.
+  var unstoredCustomBlockTypes = [];
+
+  for (var i = 0, blockType; blockType = this.usedBlockTypes[i]; i++) {
+    if (storedBlockTypes.indexOf(blockType) != -1) {
+      sharedBlockTypes.push(blockType);
+    } else if (StandardCategories.coreBlockTypes.indexOf(blockType) == -1) {
+      unstoredCustomBlockTypes.push(blockType);
+    }
+  }
+
+  // Select each shared block type.
+  for (var i = 0, blockType; blockType = sharedBlockTypes[i]; i++) {
+    this.view.select(blockType);
+  }
+  this.view.listSelectedBlocks();
+
+  if (unstoredCustomBlockTypes.length > 0){
+    // Warn user to import block defifnitions and generator code for blocks
+    // not in their Block Library nor Blockly's standard library.
+    var blockTypesText = unstoredCustomBlockTypes.join(', ');
+    var customWarning = 'Custom blocks used in workspace factory but not ' +
+        'stored in block library:\n ' + blockTypesText +
+        '\n\nDon\'t forget to include block definitions and generator code ' +
+        'for these blocks.';
+    alert(customWarning);
+  }
+};
+
+/**
+ * Set the array that holds the block types used in workspace factory.
+ *
+ * @param {!Array.<!string>} usedBlockTypes - Block types used in
+ */
+BlockExporterController.prototype.setUsedBlockTypes =
+    function(usedBlockTypes) {
+  this.usedBlockTypes = usedBlockTypes;
+};
+
+/**
+ * Updates preview code (block definitions and generator stubs) in the exporter
+ * preview to reflect selected blocks.
+ */
+BlockExporterController.prototype.updatePreview = function() {
+  // Generate preview code for selected blocks.
+  var blockDefs = this.getBlockDefinitionsOfSelected();
+  var genStubs = this.getGeneratorStubsOfSelected();
+
+  // Update the text areas containing the code.
+  FactoryUtils.injectCode(blockDefs, 'blockDefs_textArea');
+  FactoryUtils.injectCode(genStubs, 'genStubs_textArea');
+};
+
+/**
+ * Returns a map of each selected block's type to its corresponding xml.
+ *
+ * @return {!Object} a map of each selected block's type (a string) to its
+ * corresponding xml element.
+ */
+BlockExporterController.prototype.getSelectedBlockXmlMap = function() {
+  var blockTypes = this.view.getSelectedBlockTypes();
+  return this.blockLibStorage.getBlockXmlMap(blockTypes);
+};
+
+/**
+ * Get block definition code in the selected format for selected blocks.
+ *
+ * @return {!string} The concatenation of each selected block's language code
+ * in the format specified in export settings.
+ */
+BlockExporterController.prototype.getBlockDefinitionsOfSelected = function() {
+  // Get selected blocks' information.
+  var blockXmlMap = this.getSelectedBlockXmlMap();
+
+  // Get block definition code in the selected format for the blocks.
+  var definitionFormat = document.getElementById('exportFormat').value;
+  return this.tools.getBlockDefinitions(blockXmlMap, definitionFormat);
+};
+
+/**
+ * Get generator stubs in the selected language for selected blocks.
+ *
+ * @return {!string} The concatenation of each selected block's generator stub
+ * in the language specified in export settings.
+ */
+BlockExporterController.prototype.getGeneratorStubsOfSelected = function() {
+  // Get selected blocks' information.
+  var blockXmlMap = this.getSelectedBlockXmlMap();
+
+  // Get generator stub code in the selected language for the blocks.
+  var language = document.getElementById('exportLanguage').value;
+  return this.tools.getGeneratorCode(blockXmlMap, language);
+};
+

demos/blocklyfactory/block_exporter_tools.js

@@ -0,0 +1,276 @@
+/**
+ * @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 Javascript for the BlockExporter Tools class, which generates
+ * block definitions and generator stubs for given block types. Also generates
+ * toolbox xml for the exporter's workspace. Depends on the FactoryUtils for
+ * its code generation functions.
+ *
+ * @author quachtina96 (Tina Quach)
+ */
+'use strict';
+
+goog.provide('BlockExporterTools');
+
+goog.require('FactoryUtils');
+goog.require('BlockOption');
+goog.require('goog.dom');
+goog.require('goog.dom.xml');
+
+/**
+* Block Exporter Tools Class
+* @constructor
+*/
+BlockExporterTools = function() {
+  // Create container for hidden workspace.
+  this.container = goog.dom.createDom('div', {
+    'id': 'blockExporterTools_hiddenWorkspace'
+  }, ''); // Empty quotes for empty div.
+  // Hide hidden workspace.
+  this.container.style.display = 'none';
+  goog.dom.appendChild(document.body, this.container);
+  /**
+   * Hidden workspace for the Block Exporter that holds pieces that make
+   * up the block
+   * @type {Blockly.Workspace}
+   */
+  this.hiddenWorkspace = Blockly.inject(this.container.id,
+      {collapse: false,
+       media: '../../media/'});
+};
+
+/**
+ * Get Blockly Block object from xml that encodes the blocks used to design
+ * the block.
+ * @private
+ *
+ * @param {!Element} xml - Xml element that encodes the blocks used to design
+ *    the block. For example, the block xmls saved in block library.
+ * @return {!Blockly.Block} - Root block (factory_base block) which contains
+ *    all information needed to generate block definition or null.
+ */
+BlockExporterTools.prototype.getRootBlockFromXml_ = function(xml) {
+  // Render xml in hidden workspace.
+  this.hiddenWorkspace.clear();
+  Blockly.Xml.domToWorkspace(xml, this.hiddenWorkspace);
+  // Get root block.
+  var rootBlock = this.hiddenWorkspace.getTopBlocks()[0] || null;
+  return rootBlock;
+};
+
+/**
+ * Return the given language code of each block type in an array.
+ *
+ * @param {!Object} blockXmlMap - Map of block type to xml.
+ * @param {string} definitionFormat - 'JSON' or 'JavaScript'
+ * @return {string} The concatenation of each block's language code in the
+ *    desired format.
+ */
+BlockExporterTools.prototype.getBlockDefinitions =
+    function(blockXmlMap, definitionFormat) {
+  var blockCode = [];
+  for (var blockType in blockXmlMap) {
+    var xml = blockXmlMap[blockType];
+    if (xml) {
+      // Render and get block from hidden workspace.
+      var rootBlock = this.getRootBlockFromXml_(xml);
+      if (rootBlock) {
+        // Generate the block's definition.
+        var code = FactoryUtils.getBlockDefinition(blockType, rootBlock,
+            definitionFormat, this.hiddenWorkspace);
+        // Add block's definition to the definitions to return.
+      } else {
+        // Append warning comment and write to console.
+        var code = '// No block definition generated for ' + blockType +
+          '. Could not find root block in xml stored for this block.';
+        console.log('No block definition generated for ' + blockType +
+          '. Could not find root block in xml stored for this block.');
+      }
+    } else {
+      // Append warning comment and write to console.
+      var code = '// No block definition generated for ' + blockType +
+        '. Block was not found in Block Library Storage.';
+      console.log('No block definition generated for ' + blockType +
+        '. Block was not found in Block Library Storage.');
+    }
+    blockCode.push(code);
+  }
+  return blockCode.join("\n\n");
+};
+
+/**
+ * Return the generator code of each block type in an array in a given language.
+ *
+ * @param {!Object} blockXmlMap - Map of block type to xml.
+ * @param {string} generatorLanguage - e.g.'JavaScript', 'Python', 'PHP', 'Lua',
+ *     'Dart'
+ * @return {string} The concatenation of each block's generator code in the
+ * desired format.
+ */
+BlockExporterTools.prototype.getGeneratorCode =
+    function(blockXmlMap, generatorLanguage) {
+  var multiblockCode = [];
+  // Define the custom blocks in order to be able to create instances of
+  // them in the exporter workspace.
+  this.addBlockDefinitions(blockXmlMap);
+
+  for (var blockType in blockXmlMap) {
+    var xml = blockXmlMap[blockType];
+    if (xml) {
+      // Render the preview block in the hidden workspace.
+      var tempBlock =
+          FactoryUtils.getDefinedBlock(blockType, this.hiddenWorkspace);
+      // Get generator stub for the given block and add to  generator code.
+      var blockGenCode =
+          FactoryUtils.getGeneratorStub(tempBlock, generatorLanguage);
+    } else {
+      // Append warning comment and write to console.
+      var blockGenCode = '// No generator stub generated for ' + blockType +
+        '. Block was not found in Block Library Storage.';
+      console.log('No block generator stub generated for ' + blockType +
+        '. Block was not found in Block Library Storage.');
+    }
+    multiblockCode.push(blockGenCode);
+  }
+  return multiblockCode.join("\n\n");
+};
+
+/**
+ * Evaluates block definition code of each block in given object mapping
+ * block type to xml. Called in order to be able to create instances of the
+ * blocks in the exporter workspace.
+ *
+ * @param {!Object} blockXmlMap - Map of block type to xml.
+ */
+BlockExporterTools.prototype.addBlockDefinitions = function(blockXmlMap) {
+  var blockDefs = this.getBlockDefinitions(blockXmlMap, 'JavaScript');
+  eval(blockDefs);
+};
+
+/**
+ * Pulls information about all blocks in the block library to generate xml
+ * for the selector workpace's toolbox.
+ *
+ * @param {!BlockLibraryStorage} blockLibStorage - Block Library Storage object.
+ * @return {!Element} Xml representation of the toolbox.
+ */
+BlockExporterTools.prototype.generateToolboxFromLibrary
+    = function(blockLibStorage) {
+  // Create DOM for XML.
+  var xmlDom = goog.dom.createDom('xml', {
+    'id' : 'blockExporterTools_toolbox',
+    'style' : 'display:none'
+  });
+
+  var allBlockTypes = blockLibStorage.getBlockTypes();
+  // Object mapping block type to XML.
+  var blockXmlMap = blockLibStorage.getBlockXmlMap(allBlockTypes);
+
+  // Define the custom blocks in order to be able to create instances of
+  // them in the exporter workspace.
+  this.addBlockDefinitions(blockXmlMap);
+
+  for (var blockType in blockXmlMap) {
+    // Get block.
+    var block = FactoryUtils.getDefinedBlock(blockType, this.hiddenWorkspace);
+    var category = FactoryUtils.generateCategoryXml([block], blockType);
+    xmlDom.appendChild(category);
+  }
+
+  // If there are no blocks in library and the map is empty, append dummy
+  // category.
+  if (Object.keys(blockXmlMap).length == 0) {
+    var category = goog.dom.createDom('category');
+    category.setAttribute('name','Next Saved Block');
+    xmlDom.appendChild(category);
+  }
+  return xmlDom;
+};
+
+/**
+ * Generate xml for the workspace factory's category from imported block
+ * definitions.
+ *
+ * @param {!BlockLibraryStorage} blockLibStorage - Block Library Storage object.
+ * @return {!Element} Xml representation of a category.
+ */
+BlockExporterTools.prototype.generateCategoryFromBlockLib =
+    function(blockLibStorage) {
+  var allBlockTypes = blockLibStorage.getBlockTypes();
+  // Object mapping block type to XML.
+  var blockXmlMap = blockLibStorage.getBlockXmlMap(allBlockTypes);
+
+  // Define the custom blocks in order to be able to create instances of
+  // them in the exporter workspace.
+  this.addBlockDefinitions(blockXmlMap);
+
+  // Get array of defined blocks.
+  var blocks = [];
+  for (var blockType in blockXmlMap) {
+    var block = FactoryUtils.getDefinedBlock(blockType, this.hiddenWorkspace);
+    blocks.push(block);
+  }
+
+  return FactoryUtils.generateCategoryXml(blocks,'Block Library');
+};
+
+/**
+ * Generate selector dom from block library storage. For each block in the
+ * library, it has a block option, which consists of a checkbox, a label,
+ * and a fixed size preview workspace.
+ *
+ * @param {!BlockLibraryStorage} blockLibStorage - Block Library Storage object.
+ * @param {!string} blockSelectorID - ID of the div element that will contain
+ *    the block options.
+ * @return {!Object} Map of block type to Block Option object.
+ */
+BlockExporterTools.prototype.createBlockSelectorFromLib =
+    function(blockLibStorage, blockSelectorID) {
+  // Object mapping each stored block type to XML.
+  var allBlockTypes = blockLibStorage.getBlockTypes();
+  var blockXmlMap = blockLibStorage.getBlockXmlMap(allBlockTypes);
+
+  // Define the custom blocks in order to be able to create instances of
+  // them in the exporter workspace.
+  this.addBlockDefinitions(blockXmlMap);
+
+  var blockSelector = goog.dom.getElement(blockSelectorID);
+  // Clear the block selector.
+  goog.dom.removeChildren(blockSelector);
+
+  // Append each block option's dom to the selector.
+  var blockOptions = Object.create(null);
+  for (var blockType in blockXmlMap) {
+    // Get preview block's xml.
+    var block = FactoryUtils.getDefinedBlock(blockType, this.hiddenWorkspace);
+    var previewBlockXml = Blockly.Xml.workspaceToDom(this.hiddenWorkspace);
+
+    // Create block option, inject block into preview workspace, and append
+    // option to block selector.
+    var blockOpt = new BlockOption(blockSelector, blockType, previewBlockXml);
+    blockOpt.createDom();
+    goog.dom.appendChild(blockSelector, blockOpt.dom);
+    blockOpt.showPreviewBlock();
+    blockOptions[blockType] = blockOpt;
+  }
+  return blockOptions;
+};
+

demos/blocklyfactory/block_exporter_view.js

@@ -0,0 +1,145 @@
+/**
+ * @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 Javascript for the Block Exporter View class. Reads from and
+ * manages a block selector through which users select blocks to export.
+ *
+ * @author quachtina96 (Tina Quach)
+ */
+
+'use strict';
+
+goog.provide('BlockExporterView');
+
+goog.require('BlockExporterTools');
+goog.require('BlockOption');
+goog.require('goog.dom');
+
+/**
+ * BlockExporter View Class
+ * @constructor
+ *
+ * @param {!Object} blockOptions - Map of block types to BlockOption objects.
+ */
+BlockExporterView = function(blockOptions) {
+  //  Map of block types to BlockOption objects to select from.
+  this.blockOptions = blockOptions;
+};
+
+/**
+ * Set the block options in the selector of this instance of
+ * BlockExporterView.
+ *
+ * @param {!Object} blockOptions - Map of block types to BlockOption objects.
+ */
+BlockExporterView.prototype.setBlockOptions = function(blockOptions) {
+  this.blockOptions = blockOptions;
+};
+
+/**
+ * Updates the helper text.
+ *
+ * @param {string} newText - New helper text.
+ * @param {boolean} opt_append - True if appending to helper Text, false if
+ *    replacing.
+ */
+BlockExporterView.prototype.updateHelperText = function(newText, opt_append) {
+  if (opt_append) {
+    goog.dom.getElement('helperText').textContent =
+        goog.dom.getElement('helperText').textContent + newText;
+  } else {
+    goog.dom.getElement('helperText').textContent = newText;
+  }
+};
+
+/**
+ * Updates the helper text to show list of currently selected blocks.
+ */
+BlockExporterView.prototype.listSelectedBlocks = function() {
+
+  var selectedBlocksText = this.getSelectedBlockTypes().join(",\n ");
+  goog.dom.getElement('selectedBlocksText').textContent = selectedBlocksText;
+};
+
+/**
+ * Selects a given block type in the selector.
+ *
+ * @param {string} blockType - Type of block to selector.
+ */
+BlockExporterView.prototype.select = function(blockType) {
+  this.blockOptions[blockType].setSelected(true);
+};
+
+/**
+ * Deselects a block in the selector.
+ *
+ * @param {!Blockly.Block} block - Type of block to add to selector workspce.
+ */
+BlockExporterView.prototype.deselect = function(blockType) {
+  this.blockOptions[blockType].setSelected(false);
+};
+
+
+/**
+ * Deselects all blocks.
+ */
+BlockExporterView.prototype.deselectAllBlocks = function() {
+  for (var blockType in this.blockOptions) {
+    this.deselect(blockType);
+  }
+};
+
+/**
+ * Given an array of selected blocks, selects these blocks in the view, marking
+ * the checkboxes accordingly.
+ *
+ * @param {Array.<Blockly.Block>} blockTypes - Array of block types to select.
+ */
+BlockExporterView.prototype.setSelectedBlockTypes = function(blockTypes) {
+  for (var i = 0, blockType; blockType = blockTypes[i]; i++) {
+    this.select(blockType);
+  }
+};
+
+/**
+ * Returns array of selected blocks.
+ *
+ * @return {!Array.<!string>} Array of all selected block types.
+ */
+BlockExporterView.prototype.getSelectedBlockTypes = function() {
+  var selectedTypes = [];
+  for (var blockType in this.blockOptions) {
+    var blockOption = this.blockOptions[blockType];
+    if (blockOption.isSelected()) {
+      selectedTypes.push(blockType);
+    }
+  }
+  return selectedTypes;
+};
+
+/**
+ * Centers the preview block of each block option in the exporter selector.
+ */
+BlockExporterView.prototype.centerPreviewBlocks = function() {
+  for (var blockType in this.blockOptions) {
+    this.blockOptions[blockType].centerBlock();
+  }
+};

demos/blocklyfactory/block_library_controller.js

@@ -0,0 +1,239 @@
+/**
+ * @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 Contains the code for Block Library Controller, which
+ * depends on Block Library Storage and Block Library UI. Provides the
+ * interfaces for the user to
+ *  - save their blocks to the browser
+ *  - re-open and edit saved blocks
+ *  - delete blocks
+ *  - clear their block library
+ * Depends on BlockFactory functions defined in factory.js.
+ *
+ * @author quachtina96 (Tina Quach)
+ */
+'use strict';
+
+goog.provide('BlockLibraryController');
+
+goog.require('BlockLibraryStorage');
+goog.require('BlockLibraryView');
+goog.require('BlockFactory');
+
+/**
+ * Block Library Controller Class
+ * @constructor
+ *
+ * @param {string} blockLibraryName - Desired name of Block Library, also used
+ *    to create the key for where it's stored in local storage.
+ * @param {!BlockLibraryStorage} opt_blockLibraryStorage - optional storage
+ *    object that allows user to import a block library.
+ */
+BlockLibraryController = function(blockLibraryName, opt_blockLibraryStorage) {
+  this.name = blockLibraryName;
+  // Create a new, empty Block Library Storage object, or load existing one.
+  this.storage = opt_blockLibraryStorage || new BlockLibraryStorage(this.name);
+};
+
+/**
+ * Returns the block type of the block the user is building.
+ * @private
+ *
+ * @return {string} The current block's type.
+ */
+BlockLibraryController.prototype.getCurrentBlockType_ = function() {
+  var rootBlock = FactoryUtils.getRootBlock(BlockFactory.mainWorkspace);
+  var blockType = rootBlock.getFieldValue('NAME').trim().toLowerCase();
+  // Replace white space with underscores
+  return blockType.replace(/\W/g, '_').replace(/^(\d)/, '_\\1');
+};
+
+/**
+ * Removes current block from Block Library
+ *
+ * @param {string} blockType - Type of block.
+ */
+BlockLibraryController.prototype.removeFromBlockLibrary = function() {
+  var blockType = this.getCurrentBlockType_();
+  this.storage.removeBlock(blockType);
+  this.storage.saveToLocalStorage();
+  this.populateBlockLibrary();
+  // Show default block.
+  BlockFactory.showStarterBlock();
+};
+
+/**
+ * Updates the workspace to show the block user selected from library
+ *
+ * @param {string} blockType - Block to edit on block factory.
+ */
+BlockLibraryController.prototype.openBlock = function(blockType) {
+   var xml = this.storage.getBlockXml(blockType);
+   BlockFactory.mainWorkspace.clear();
+   Blockly.Xml.domToWorkspace(xml, BlockFactory.mainWorkspace);
+};
+
+/**
+ * Returns type of block selected from library.
+ *
+ * @param {Element} blockLibraryDropdown - The block library dropdown.
+ * @return {string} Type of block selected.
+ */
+BlockLibraryController.prototype.getSelectedBlockType =
+    function(blockLibraryDropdown) {
+  return BlockLibraryView.getSelected(blockLibraryDropdown);
+};
+
+/**
+ * Confirms with user before clearing the block library in local storage and
+ * updating the dropdown and displaying the starter block (factory_base).
+ */
+BlockLibraryController.prototype.clearBlockLibrary = function() {
+  var check = confirm(
+      'Click OK to clear your block library.');
+  if (check) {
+    // Clear Block Library Storage.
+    this.storage.clear();
+    this.storage.saveToLocalStorage();
+    // Update dropdown.
+    BlockLibraryView.clearOptions('blockLibraryDropdown');
+    // Add a default, blank option to dropdown for when no block from library is
+    // selected.
+    BlockLibraryView.addDefaultOption('blockLibraryDropdown');
+    // Show default block.
+    BlockFactory.showStarterBlock();
+  }
+};
+
+/**
+ * Saves current block to local storage and updates dropdown.
+ */
+BlockLibraryController.prototype.saveToBlockLibrary = function() {
+  var blockType = this.getCurrentBlockType_();
+  // If block under that name already exists, confirm that user wants to replace
+  // saved block.
+  if (this.isInBlockLibrary(blockType)) {
+    var replace = confirm('You already have a block called ' + blockType +
+      ' in your library. Click OK to replace.');
+    if (!replace) {
+      // Do not save if user doesn't want to replace the saved block.
+      return;
+    }
+  }
+
+  // Create block xml.
+  var xmlElement = goog.dom.createDom('xml');
+  var block = FactoryUtils.getRootBlock(BlockFactory.mainWorkspace);
+  xmlElement.appendChild(Blockly.Xml.blockToDomWithXY(block));
+
+  // Save block.
+  this.storage.addBlock(blockType, xmlElement);
+  this.storage.saveToLocalStorage();
+
+  // Show saved block without other stray blocks sitting in Block Factory's
+  // main workspace.
+  this.openBlock(blockType);
+
+  // Do not add another option to dropdown if replacing.
+  if (replace) {
+    return;
+  }
+  BlockLibraryView.addOption(
+      blockType, blockType, 'blockLibraryDropdown', true, true);
+};
+
+/**
+ * Checks to see if the given blockType is already in Block Library
+ *
+ * @param {string} blockType - Type of block.
+ * @return {boolean} Boolean indicating whether or not block is in the library.
+ */
+BlockLibraryController.prototype.isInBlockLibrary = function(blockType) {
+  var blockLibrary = this.storage.blocks;
+  return (blockType in blockLibrary && blockLibrary[blockType] != null);
+};
+
+/**
+ *  Populates the dropdown menu.
+ */
+BlockLibraryController.prototype.populateBlockLibrary = function() {
+  BlockLibraryView.clearOptions('blockLibraryDropdown');
+  // Add a default, blank option to dropdown for when no block from library is
+  // selected.
+  BlockLibraryView.addDefaultOption('blockLibraryDropdown');
+  // Add option for each saved block.
+  var blockLibrary = this.storage.blocks;
+  for (var block in blockLibrary) {
+    // Make sure the block wasn't deleted.
+    if (blockLibrary[block] != null) {
+      BlockLibraryView.addOption(
+          block, block, 'blockLibraryDropdown', false, true);
+    }
+  }
+};
+
+/**
+ * Return block library mapping block type to xml.
+ *
+ * @return {Object} Object mapping block type to xml text.
+ */
+BlockLibraryController.prototype.getBlockLibrary = function() {
+  return this.storage.getBlockXmlTextMap();
+};
+
+/**
+ * Set the block library storage object from which exporter exports.
+ *
+ * @param {!BlockLibraryStorage} blockLibStorage - Block Library Storage
+ *    object.
+ */
+BlockLibraryController.prototype.setBlockLibraryStorage
+    = function(blockLibStorage) {
+  this.storage = blockLibStorage;
+};
+
+/**
+ * Get the block library storage object from which exporter exports.
+ *
+ * @return {!BlockLibraryStorage} blockLibStorage - Block Library Storage object
+ *    that stores the blocks.
+ */
+BlockLibraryController.prototype.getBlockLibraryStorage = function() {
+  return this.blockLibStorage;
+};
+
+/**
+ * Get the block library storage object from which exporter exports.
+ *
+ * @return {boolean} True if the Block Library is empty, false otherwise.
+ */
+BlockLibraryController.prototype.hasEmptyBlockLibrary = function() {
+  return this.storage.isEmpty();
+};
+
+/**
+ * Get all block types stored in block library.
+ *
+ * @return {!Array<!string>} Array of block types.
+ */
+BlockLibraryController.prototype.getStoredBlockTypes = function() {
+  return this.storage.getBlockTypes();
+};

demos/blocklyfactory/block_library_storage.js

@@ -0,0 +1,178 @@
+/**
+ * @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 Javascript for Block Library's Storage Class.
+ * Depends on Block Library for its namespace.
+ *
+ * @author quachtina96 (Tina Quach)
+ */
+
+'use strict';
+
+goog.provide('BlockLibraryStorage');
+
+/**
+ * Represents a block library's storage.
+ * @constructor
+ *
+ * @param {string} blockLibraryName - Desired name of Block Library, also used
+ *    to create the key for where it's stored in local storage.
+ * @param {Object} opt_blocks - Object mapping block type to xml.
+ */
+BlockLibraryStorage = function(blockLibraryName, opt_blocks) {
+  // Add prefix to this.name to avoid collisions in local storage.
+  this.name = 'BlockLibraryStorage.' + blockLibraryName;
+  if (!opt_blocks) {
+    // Initialize this.blocks by loading from local storage.
+    this.loadFromLocalStorage();
+    if (this.blocks == null) {
+      this.blocks = Object.create(null);
+      // The line above is equivalent of {} except that this object is TRULY
+      // empty. It doesn't have built-in attributes/functions such as length or
+      // toString.
+      this.saveToLocalStorage();
+    }
+  } else {
+    this.blocks = opt_blocks;
+    this.saveToLocalStorage();
+  }
+};
+
+/**
+ * Reads the named block library from local storage and saves it in this.blocks.
+ */
+BlockLibraryStorage.prototype.loadFromLocalStorage = function() {
+  // goog.global is synonymous to window, and allows for flexibility
+  // between browsers.
+  var object = goog.global.localStorage[this.name];
+  this.blocks = object ? JSON.parse(object) : null;
+};
+
+/**
+ * Writes the current block library (this.blocks) to local storage.
+ */
+BlockLibraryStorage.prototype.saveToLocalStorage = function() {
+  goog.global.localStorage[this.name] = JSON.stringify(this.blocks);
+};
+
+/**
+ * Clears the current block library.
+ */
+BlockLibraryStorage.prototype.clear = function() {
+  this.blocks = Object.create(null);
+  // The line above is equivalent of {} except that this object is TRULY
+  // empty. It doesn't have built-in attributes/functions such as length or
+  // toString.
+};
+
+/**
+ * Saves block to block library.
+ *
+ * @param {string} blockType - Type of block.
+ * @param {Element} blockXML - The block's XML pulled from workspace.
+ */
+BlockLibraryStorage.prototype.addBlock = function(blockType, blockXML) {
+  var prettyXml = Blockly.Xml.domToPrettyText(blockXML);
+  this.blocks[blockType] = prettyXml;
+};
+
+/**
+ * Removes block from current block library (this.blocks).
+ *
+ * @param {string} blockType - Type of block.
+ */
+BlockLibraryStorage.prototype.removeBlock = function(blockType) {
+  delete this.blocks[blockType];
+};
+
+/**
+ * Returns the xml of given block type stored in current block library
+ * (this.blocks).
+ *
+ * @param {string} blockType - Type of block.
+ * @return {Element} The xml that represents the block type or null.
+ */
+BlockLibraryStorage.prototype.getBlockXml = function(blockType) {
+  var xml = this.blocks[blockType] || null;
+  if (xml) {
+    var xml = Blockly.Xml.textToDom(xml);
+  }
+  return xml;
+};
+
+
+/**
+ * Returns map of each block type to its corresponding xml stored in current
+ * block library (this.blocks).
+ *
+ * @param {Array.<!string>} blockTypes - Types of blocks.
+ * @return {!Object} Map of block type to corresponding xml.
+ */
+BlockLibraryStorage.prototype.getBlockXmlMap = function(blockTypes) {
+  var blockXmlMap = {};
+  for (var i = 0; i < blockTypes.length; i++) {
+    var blockType = blockTypes[i];
+    var xml = this.getBlockXml(blockType);
+    blockXmlMap[blockType] = xml;
+  }
+  return blockXmlMap;
+};
+
+/**
+ * Returns array of all block types stored in current block library.
+ *
+ * @return {!Array.<string>} Array of block types stored in library.
+ */
+BlockLibraryStorage.prototype.getBlockTypes = function() {
+  return Object.keys(this.blocks);
+};
+
+/**
+ * Checks to see if block library is empty.
+ *
+ * @return {boolean} True if empty, false otherwise.
+ */
+BlockLibraryStorage.prototype.isEmpty = function() {
+  for (var blockType in this.blocks) {
+    return false;
+  }
+  return true;
+};
+
+/**
+ * Returns array of all block types stored in current block library.
+ *
+ * @return {!Array.<string>} Map of block type to corresponding xml text.
+ */
+BlockLibraryStorage.prototype.getBlockXmlTextMap = function() {
+  return this.blocks;
+};
+
+/**
+ * Returns boolean of whether or not a given blockType is stored in block
+ * library.
+ *
+ * @param {string} blockType - Type of block.
+ * @return {boolean} Whether or not blockType is stored in block library.
+ */
+BlockLibraryStorage.prototype.has = function(blockType) {
+  return this.blocks[blockType] ? true : false;
+};

demos/blocklyfactory/block_library_view.js

@@ -0,0 +1,117 @@
+/**
+ * @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 Javascript for Block Library's UI for pulling blocks from the
+ * Block Library's storage to edit in Block Factory.
+ *
+ * @author quachtina96 (Tina Quach)
+ */
+
+'use strict';
+
+goog.provide('BlockLibraryView');
+
+/**
+ * Creates a node of a given element type and appends to the node with given id.
+ *
+ * @param {string} optionIdentifier - String used to identify option.
+ * @param {string} optionText - Text to display in the dropdown for the option.
+ * @param {string} dropdownID - ID for HTML select element.
+ * @param {boolean} selected - Whether or not the option should be selected on
+ *    the dropdown.
+ * @param {boolean} enabled - Whether or not the option should be enabled.
+ */
+BlockLibraryView.addOption
+    = function(optionIdentifier, optionText, dropdownID, selected, enabled) {
+  var dropdown = document.getElementById(dropdownID);
+  var option = document.createElement('option');
+  // The value attribute of a dropdown's option is not visible in the UI, but is
+  // useful for identifying different options that may have the same text.
+  option.value = optionIdentifier;
+  // The text attribute is what the user sees in the dropdown for the option.
+  option.text = optionText;
+  option.selected = selected;
+  option.disabled = !enabled;
+  dropdown.add(option);
+};
+
+/**
+ * Adds a default, blank option to dropdown for when no block from library is
+ * selected.
+ *
+ * @param {string} dropdownID - ID of HTML select element
+ */
+BlockLibraryView.addDefaultOption = function(dropdownID) {
+  BlockLibraryView.addOption(
+      'BLOCK_LIBRARY_DEFAULT_BLANK', '', dropdownID, true, false);
+};
+
+/**
+ * Selects the default, blank option in dropdown identified by given ID.
+ *
+ * @param {string} dropdownID - ID of HTML select element
+ */
+BlockLibraryView.selectDefaultOption = function(dropdownID) {
+  var dropdown = document.getElementById(dropdownID);
+  // Deselect currently selected option.
+  var index = dropdown.selectedIndex;
+  dropdown.options[index].selected = false;
+  // Select default option, always the first in the dropdown.
+  var defaultOption = dropdown.options[0];
+  defaultOption.selected = true;
+};
+
+/**
+ * Returns block type of selected block.
+ *
+ * @param {Element} dropdown - HTML select element.
+ * @return {string} Type of block selected.
+ */
+BlockLibraryView.getSelected = function(dropdown) {
+  var index = dropdown.selectedIndex;
+  return dropdown.options[index].value;
+};
+
+/**
+ * Removes option currently selected in dropdown from dropdown menu.
+ *
+ * @param {string} dropdownID - ID of HTML select element within which to find
+ *     the selected option.
+ */
+BlockLibraryView.removeSelectedOption = function(dropdownID) {
+  var dropdown = document.getElementById(dropdownID);
+  if (dropdown) {
+    dropdown.remove(dropdown.selectedIndex);
+  }
+};
+
+/**
+ * Removes all options from dropdown.
+ *
+ * @param {string} dropdownID - ID of HTML select element to clear options of.
+ */
+BlockLibraryView.clearOptions = function(dropdownID) {
+  var dropdown = document.getElementById(dropdownID);
+  while (dropdown.length > 0) {
+    dropdown.remove(dropdown.length - 1);
+  }
+};
+

demos/blocklyfactory/block_option.js

@@ -0,0 +1,181 @@
+/**
+ * @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 Javascript for the BlockOption class, used to represent each of
+ * the various blocks that you may select. Each block option has a checkbox,
+ * a label, and a preview workspace through which to view the block.
+ *
+ * @author quachtina96 (Tina Quach)
+ */
+'use strict';
+
+goog.provide('BlockOption');
+goog.require('goog.dom');
+
+ /**
+ * BlockOption Class
+ * A block option includes checkbox, label, and div element that shows a preview
+ * of the block.
+ * @constructor
+ *
+ * @param {!Element} blockSelector - Scrollable div that will contain the
+ *    block options for the selector.
+ * @param {!string} blockType - Type of block for which to create an option.
+ * @param {!Element} previewBlockXml - Xml element containing the preview block.
+ */
+var BlockOption = function(blockSelector, blockType, previewBlockXml) {
+  // The div to contain the block option.
+  this.blockSelector = blockSelector;
+  // The type of block represented by the option.
+  this.blockType = blockType;
+  // The checkbox for the option. Set in createDom.
+  this.checkbox = null;
+  // The dom for the option. Set in createDom.
+  this.dom = null;
+  // Xml element containing the preview block.
+  this.previewBlockXml = previewBlockXml;
+  // Workspace containing preview of block. Set upon injection of workspace in
+  // showPreviewBlock.
+  this.previewWorkspace = null;
+  // Whether or not block the option is selected.
+  this.selected = false;
+  // Using this.selected rather than this.checkbox.checked allows for proper
+  // handling of click events on the block option; Without this, clicking
+  // directly on the checkbox does not toggle selection.
+};
+
+/**
+ * Creates the dom for a single block option. Includes checkbox, label, and div
+ * in which to inject the preview block.
+ *
+ * @return {!Element} Root node of the selector dom which consists of a
+ * checkbox, a label, and a fixed size preview workspace per block.
+ */
+BlockOption.prototype.createDom = function() {
+  // Create the div for the block option.
+  var blockOptContainer = goog.dom.createDom('div', {
+    'id': this.blockType,
+    'class': 'blockOption'
+  }, ''); // Empty quotes for empty div.
+
+  // Create and append div in which to inject the workspace for viewing the
+  // block option.
+  var blockOptionPreview = goog.dom.createDom('div', {
+    'id' : this.blockType + '_workspace',
+    'class': 'blockOption_preview'
+  }, '');
+  goog.dom.appendChild(blockOptContainer,blockOptionPreview);
+
+  // Create and append container to hold checkbox and label.
+  var checkLabelContainer = goog.dom.createDom('div', {
+    'class': 'blockOption_checkLabel'
+  }, '');
+  goog.dom.appendChild(blockOptContainer,checkLabelContainer);
+
+  // Create and append container for checkbox.
+  var checkContainer = goog.dom.createDom('div', {
+    'class': 'blockOption_check'
+  }, '');
+  goog.dom.appendChild(checkLabelContainer, checkContainer);
+
+  // Create and append checkbox.
+  this.checkbox = goog.dom.createDom('input', {
+    'type': 'checkbox',
+    'id': this.blockType + '_check'
+  }, '');
+  goog.dom.appendChild(checkContainer, this.checkbox);
+
+  // Create and append container for block label.
+  var labelContainer = goog.dom.createDom('div', {
+    'class': 'blockOption_label'
+  }, '');
+  goog.dom.appendChild(checkLabelContainer, labelContainer);
+
+  // Create and append text node for the label.
+  var labelText = goog.dom.createDom('p', {
+    'id': this.blockType + '_text'
+  }, this.blockType);
+  goog.dom.appendChild(labelContainer, labelText);
+
+  this.dom = blockOptContainer;
+  return this.dom;
+};
+
+/**
+ * Injects a workspace containing the block into the block option's preview div.
+ */
+BlockOption.prototype.showPreviewBlock = function() {
+  // Get ID of preview workspace.
+  var blockOptPreviewID = this.dom.id + '_workspace';
+
+  // Inject preview block.
+  var workspace = Blockly.inject(blockOptPreviewID, {readOnly:true});
+  Blockly.Xml.domToWorkspace(this.previewBlockXml, workspace);
+  this.previewWorkspace = workspace;
+
+  // Center the preview block in the workspace.
+  this.centerBlock();
+};
+
+/**
+ * Centers the preview block in the workspace.
+ */
+BlockOption.prototype.centerBlock = function() {
+  // Get metrics.
+  var block = this.previewWorkspace.getTopBlocks()[0];
+  var blockMetrics = block.getHeightWidth();
+  var blockCoordinates = block.getRelativeToSurfaceXY();
+  var workspaceMetrics = this.previewWorkspace.getMetrics();
+
+  // Calculate new coordinates.
+  var x = workspaceMetrics.viewWidth/2 - blockMetrics['width']/2 -
+      blockCoordinates.x;
+  var y = workspaceMetrics.viewHeight/2 - blockMetrics['height']/2 -
+      blockCoordinates.y;
+
+  // Move block.
+  block.moveBy(x, y);
+};
+
+/**
+ * Selects or deselects the block option.
+ *
+ * @param {!boolean} selected - True if selecting option, false if deselecting
+ *    option.
+ */
+BlockOption.prototype.setSelected = function(selected) {
+  this.selected = selected;
+  if (this.checkbox) {
+    this.checkbox.checked = selected;
+  }
+};
+
+/**
+ * Returns boolean telling whether or not block is selected.
+ *
+ * @return {!boolean} True if selecting option, false if deselecting
+ *    option.
+ */
+BlockOption.prototype.isSelected = function() {
+  return this.selected;
+};
+
+

demos/blocklyfactory/factory.css

@@ -0,0 +1,518 @@
+/**
+ * @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.
+ */
+
+html, body {
+  height: 100%;
+  min-height: 375px;
+}
+
+body {
+  background-color: #fff;
+  font-family: sans-serif;
+  margin: 0 5px;
+  overflow: hidden
+}
+
+h1 {
+  font-weight: normal;
+  font-size: 140%;
+}
+
+h3 {
+  margin-top: 5px;
+  margin-bottom: 0;
+}
+
+table {
+  border: none;
+  border-collapse: collapse;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+}
+
+td {
+  vertical-align: top;
+  padding: 0;
+}
+
+p {
+  display: block;
+  -webkit-margin-before: 0em;
+  -webkit-margin-after: 0em;
+  -webkit-margin-start: 0px;
+  -webkit-margin-end: 0px;
+  padding: 5px 0px;
+}
+
+#blockly {
+  position: fixed;
+}
+
+#blocklyMask {
+  background-color: #000;
+  cursor: not-allowed;
+  display: none;
+  position: fixed;
+  opacity: 0.2;
+  z-index: 9;
+}
+
+#preview {
+  position: absolute;
+}
+
+pre,
+#languageTA {
+  border: #ddd 1px solid;
+  margin-top: 0;
+  position: absolute;
+  overflow: scroll;
+}
+
+#languageTA {
+  display: none;
+  font: 10pt monospace;
+}
+
+.downloadButton {
+  padding: 5px;
+}
+
+button:disabled, .buttonStyle:disabled {
+  opacity: 0.6;
+}
+
+button>*, .buttonStyle>* {
+  opacity: 1;
+  vertical-align: text-bottom;
+}
+
+button, .buttonStyle {
+  border-radius: 4px;
+  border: 1px solid #ddd;
+  background-color: #eee;
+  color: #000;
+  padding: 10px;
+  margin: 10px 5px;
+  font-size: small;
+}
+
+.buttonStyle:hover:not(:disabled), button:hover:not(:disabled) {
+  box-shadow: 2px 2px 5px #888;
+}
+
+.buttonStyle:hover:not(:disabled)>*, button:hover:not(:disabled)>* {
+  opacity: 1;
+}
+
+#linkButton {
+  display: none;
+}
+
+#helpButton {
+  float: right;
+}
+
+#blockFactoryContent {
+  height: 87%;
+  width: 100%;
+}
+
+#blockFactoryPreview {
+  height: 100%;
+  width: 100%;
+}
+
+#blockLibraryContainer {
+  vertical-align: bottom;
+}
+
+#blockLibraryControls {
+  text-align: right;
+  vertical-align: middle;
+}
+
+#previewContainer {
+  vertical-align: bottom;
+}
+
+#buttonContainer {
+  text-align: right;
+  vertical-align: middle;
+}
+
+#files {
+  position: absolute;
+  visibility: hidden;
+}
+
+.toolbox {
+  display: none;
+}
+
+#blocklyWorkspaceContainer {
+  height: 95%;
+  padding: 2px;
+  width: 50%;
+}
+
+#workspaceFactoryContent {
+  clear: both;
+  display: none;
+  height: 100%;
+}
+
+/* Exporter */
+
+#blockLibraryExporter {
+  clear: both;
+  display: none;
+  height: 100%;
+}
+
+#exportSelector {
+  display: inline-block;
+  float: left;
+  height: 70%;
+  width: 30%;
+}
+
+#exportSettings {
+  float: left;
+  overflow: hidden;
+  padding-left: 16px;
+  width: 20%;
+}
+
+#selectedBlocksTextContainer {
+  max-height: 200px;
+  overflow-y: scroll;
+  padding-bottom: 2em;
+}
+
+::-webkit-scrollbar {
+  -webkit-appearance: none;
+  width: 7px;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  background-color: #ccc;
+  -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
+}
+
+.subsettings {
+  margin: 0px 25px;
+}
+
+#exporterHiddenWorkspace {
+ display: none;
+}
+
+#exportPreview {
+  float: right;
+  height: 90%;
+  overflow: hidden;
+  width: 45%;
+}
+
+.exportPreviewTextArea {
+  display: block;
+  float: right;
+  height: 40%;
+  width: 100%;
+}
+
+#genStubs_textArea, #blockDefs_textArea {
+  display: block;
+  height: 80%;
+  margin-right: 20px;
+  max-height: 300px;
+  overflow: scroll;
+  position: static;
+}
+
+#blockDefs_label, #genStubs_label {
+  display: block;
+}
+
+#blockSelector {
+  background-color: #eee;
+  border: 1px solid lightgrey;
+  width: 80%;
+  height: 90%;
+  overflow-y: scroll;
+  position: relative;
+}
+
+/* Exporter Block Option */
+
+.blockOption {
+  background-color: #eee;
+  padding: 15px 20px;
+  width: 95%;
+}
+
+.blockOption_check_label {
+  position: relative;
+}
+
+.blockOption_check {
+  float: left;
+  padding: 4px;
+}
+
+.blockOption_label {
+  float: left;
+  max-width: inherit;
+  overflow-y: scroll;
+  word-wrap: break-word;
+}
+
+.blockOption_preview {
+  height: 100px;
+  padding-top: 10px;
+  width: 90%;
+}
+
+/* Tabs */
+
+.tab {
+  float: left;
+  padding: 5px 19px;
+}
+
+.tab:hover:not(.tabon){
+  background-color: #e8e8e8;
+}
+
+.tab.tabon {
+  background-color: #ccc;
+}
+
+.tab.taboff {
+  cursor: pointer;
+}
+
+#tabContainer {
+  background-color: #f8f8f8;
+  border-top: 1px solid #ddd;
+  border-bottom: 1px solid #ddd;
+  display: table;
+  width: 100%;
+}
+
+/* Workspace Factory */
+
+section {
+  float: left;
+}
+
+aside {
+  float: right;
+}
+
+#categoryTable>table {
+  border: 1px solid #ccc;
+  border-bottom: none;
+  width: auto;
+}
+
+td.tabon {
+  background-color: #ccc;
+  border-bottom-color: #ccc;
+  padding: 5px 19px;
+}
+
+td.taboff {
+  cursor: pointer;
+  padding: 5px 19px;
+}
+
+td.taboff:hover {
+  background-color: #eee;
+}
+
+.large {
+  font-size: large;
+}
+
+td {
+  padding: 0;
+  vertical-align: top;
+}
+
+.inputfile {
+  height: 0;
+  opacity: 0;
+  overflow: hidden;
+  position: absolute;
+  width: 0;
+  z-index: -1;
+}
+
+#workspaceTabs {
+  background-color: #f8f8f8;
+  border: 1px solid #ccc;
+  display: table;
+}
+
+#toolbox_section {
+  height: 405px;
+  width: 60%;
+  position: relative;
+}
+
+#toolbox_blocks {
+  height: 100%;
+  width: 100%;
+}
+
+#preview_blocks {
+  height: 395px;
+  width: 100%;
+}
+
+#createDiv {
+  padding: 0.5%;
+  width: 60%;
+}
+
+#previewDiv {
+  border: 10px solid #eee;
+  margin-right: 0.5%;
+  width: 35%;
+}
+
+#previewBorder {
+  border: 5px solid #ddd;
+  padding: 2%;
+}
+
+#toolbox_div, #preload_div {
+  margin-right: 5%;
+  width: 35%;
+}
+
+#workspace_options {
+  max-height: 250px;
+  overflow-y: scroll;
+}
+
+#disable_div {
+  background-color: white;
+  height: 100%;
+  left: 0;
+  opacity: .5;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: -1;  /* Start behind workspace */
+}
+
+/* Rules for Closure popup color picker */
+.goog-palette {
+  outline: none;
+  cursor: default;
+}
+
+.goog-palette-cell {
+  height: 13px;
+  width: 15px;
+  margin: 0;
+  border: 0;
+  text-align: center;
+  vertical-align: middle;
+  border-right: 1px solid #000000;
+  font-size: 1px;
+}
+
+.goog-palette-colorswatch {
+  border: 1px solid #000000;
+  height: 13px;
+  position: relative;
+  width: 15px;
+}
+
+.goog-palette-cell-hover .goog-palette-colorswatch {
+  border: 1px solid #FFF;
+}
+
+.goog-palette-cell-selected .goog-palette-colorswatch {
+  border: 1px solid #000;
+  color: #fff;
+}
+
+.goog-palette-table {
+  border: 1px solid #000;
+  border-collapse: collapse;
+}
+
+.goog-popupcolorpicker {
+  position: absolute;
+}
+
+/* The container <div> - needed to position the dropdown content */
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+/* Dropdown Content (Hidden by Default) */
+.dropdown-content {
+  background-color: #f9f9f9;
+  box-shadow: 0px 8px 16px 0px rgba(0,0,0,.2);
+  display: none;
+  min-width: 170px;
+  opacity: 1;
+  position: absolute;
+  z-index: 1;
+}
+
+/* Links inside the dropdown */
+.dropdown-content a, .dropdown-content label {
+  color: black;
+  display: block;
+  font-size: small;
+  padding: 12px 16px;
+  text-decoration: none;
+}
+
+/* Change color of dropdown links on hover. */
+.dropdown-content a:hover, .dropdown-content label:hover {
+  background-color: #f1f1f1
+}
+
+/* Show the dropdown menu */
+.show {
+  display: block;
+}
+
+.shadowBlock>.blocklyPath {
+  fill-opacity: .5;
+  stroke-opacity: .5;
+}
+
+.shadowBlock>.blocklyPathLight,
+.shadowBlock>.blocklyPathDark {
+  display: none;
+}

demos/blocklyfactory/factory.js

@@ -0,0 +1,252 @@
+/**
+ * @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 JavaScript for Blockly's Block Factory application through
+ * which users can build blocks using a visual interface and dynamically
+ * generate a preview block and starter code for the block (block definition and
+ * generator stub. Uses the Block Factory namespace. Depends on the FactoryUtils
+ * for its code generation functions.
+ *
+ * @author fraser@google.com (Neil Fraser), quachtina96 (Tina Quach)
+ */
+'use strict';
+
+/**
+ * Namespace for Block Factory.
+ */
+goog.provide('BlockFactory');
+
+goog.require('FactoryUtils');
+goog.require('StandardCategories');
+
+
+/**
+ * Workspace for user to build block.
+ * @type {Blockly.Workspace}
+ */
+BlockFactory.mainWorkspace = null;
+
+/**
+ * Workspace for preview of block.
+ * @type {Blockly.Workspace}
+ */
+BlockFactory.previewWorkspace = null;
+
+/**
+ * Name of block if not named.
+ */
+BlockFactory.UNNAMED = 'unnamed';
+
+/**
+ * Existing direction ('ltr' vs 'rtl') of preview.
+ */
+BlockFactory.oldDir = null;
+
+/**
+ * Inject code into a pre tag, with syntax highlighting.
+ * Safe from HTML/script injection.
+ * @param {string} code Lines of code.
+ * @param {string} id ID of <pre> element to inject into.
+ */
+FactoryUtils.injectCode = function(code, id) {
+  var pre = document.getElementById(id);
+  pre.textContent = code;
+  code = pre.innerHTML;
+  code = prettyPrintOne(code, 'js');
+  pre.innerHTML = code;
+};
+
+/**
+ * Change the language code format.
+ */
+BlockFactory.formatChange = function() {
+  var mask = document.getElementById('blocklyMask');
+  var languagePre = document.getElementById('languagePre');
+  var languageTA = document.getElementById('languageTA');
+  if (document.getElementById('format').value == 'Manual') {
+    Blockly.hideChaff();
+    mask.style.display = 'block';
+    languagePre.style.display = 'none';
+    languageTA.style.display = 'block';
+    var code = languagePre.textContent.trim();
+    languageTA.value = code;
+    languageTA.focus();
+    BlockFactory.updatePreview();
+  } else {
+    mask.style.display = 'none';
+    languageTA.style.display = 'none';
+    languagePre.style.display = 'block';
+    BlockFactory.updateLanguage();
+  }
+  BlockFactory.disableEnableLink();
+};
+
+/**
+ * Update the language code based on constructs made in Blockly.
+ */
+BlockFactory.updateLanguage = function() {
+  var rootBlock = FactoryUtils.getRootBlock(BlockFactory.mainWorkspace);
+  if (!rootBlock) {
+    return;
+  }
+  var blockType = rootBlock.getFieldValue('NAME').trim().toLowerCase();
+  if (!blockType) {
+    blockType = BlockFactory.UNNAMED;
+  }
+  var format = document.getElementById('format').value;
+  var code = FactoryUtils.getBlockDefinition(blockType, rootBlock, format,
+      BlockFactory.mainWorkspace);
+  FactoryUtils.injectCode(code, 'languagePre');
+  BlockFactory.updatePreview();
+};
+
+/**
+ * Update the generator code.
+ * @param {!Blockly.Block} block Rendered block in preview workspace.
+ */
+BlockFactory.updateGenerator = function(block) {
+  var language = document.getElementById('language').value;
+  var generatorStub = FactoryUtils.getGeneratorStub(block, language);
+  FactoryUtils.injectCode(generatorStub, 'generatorPre');
+};
+
+/**
+ * Update the preview display.
+ */
+BlockFactory.updatePreview = function() {
+  // Toggle between LTR/RTL if needed (also used in first display).
+  var newDir = document.getElementById('direction').value;
+  if (BlockFactory.oldDir != newDir) {
+    if (BlockFactory.previewWorkspace) {
+      BlockFactory.previewWorkspace.dispose();
+    }
+    var rtl = newDir == 'rtl';
+    BlockFactory.previewWorkspace = Blockly.inject('preview',
+        {rtl: rtl,
+         media: '../../media/',
+         scrollbars: true});
+    BlockFactory.oldDir = newDir;
+  }
+  BlockFactory.previewWorkspace.clear();
+
+  // Fetch the code and determine its format (JSON or JavaScript).
+  var format = document.getElementById('format').value;
+  if (format == 'Manual') {
+    var code = document.getElementById('languageTA').value;
+    // If the code is JSON, it will parse, otherwise treat as JS.
+    try {
+      JSON.parse(code);
+      format = 'JSON';
+    } catch (e) {
+      format = 'JavaScript';
+    }
+  } else {
+    var code = document.getElementById('languagePre').textContent;
+  }
+  if (!code.trim()) {
+    // Nothing to render.  Happens while cloud storage is loading.
+    return;
+  }
+
+  // Backup Blockly.Blocks object so that main workspace and preview don't
+  // collide if user creates a 'factory_base' block, for instance.
+  var backupBlocks = Blockly.Blocks;
+  try {
+    // Make a shallow copy.
+    Blockly.Blocks = Object.create(null);
+    for (var prop in backupBlocks) {
+      Blockly.Blocks[prop] = backupBlocks[prop];
+    }
+
+    if (format == 'JSON') {
+      var json = JSON.parse(code);
+      Blockly.Blocks[json.type || BlockFactory.UNNAMED] = {
+        init: function() {
+          this.jsonInit(json);
+        }
+      };
+    } else if (format == 'JavaScript') {
+      eval(code);
+    } else {
+      throw 'Unknown format: ' + format;
+    }
+
+    // Look for a block on Blockly.Blocks that does not match the backup.
+    var blockType = null;
+    for (var type in Blockly.Blocks) {
+      if (typeof Blockly.Blocks[type].init == 'function' &&
+          Blockly.Blocks[type] != backupBlocks[type]) {
+        blockType = type;
+        break;
+      }
+    }
+    if (!blockType) {
+      return;
+    }
+
+    // Create the preview block.
+    var previewBlock = BlockFactory.previewWorkspace.newBlock(blockType);
+    previewBlock.initSvg();
+    previewBlock.render();
+    previewBlock.setMovable(false);
+    previewBlock.setDeletable(false);
+    previewBlock.moveBy(15, 10);
+    BlockFactory.previewWorkspace.clearUndo();
+    BlockFactory.updateGenerator(previewBlock);
+
+    // Warn user only if their block type is already exists in Blockly's
+    // standard library.
+    var rootBlock = FactoryUtils.getRootBlock(BlockFactory.mainWorkspace);
+    if (StandardCategories.coreBlockTypes.indexOf(blockType) != -1) {
+      rootBlock.setWarningText('A standard Blockly.Block already exists ' +
+          'under this name.');
+    } else {
+      rootBlock.setWarningText(null);
+    }
+  } finally {
+    Blockly.Blocks = backupBlocks;
+  }
+};
+
+/**
+ * Disable link and save buttons if the format is 'Manual', enable otherwise.
+ */
+BlockFactory.disableEnableLink = function() {
+  var linkButton = document.getElementById('linkButton');
+  var saveBlockButton = document.getElementById('localSaveButton');
+  var saveToLibButton = document.getElementById('saveToBlockLibraryButton');
+  var disabled = document.getElementById('format').value == 'Manual';
+  linkButton.disabled = disabled;
+  saveBlockButton.disabled = disabled;
+  saveToLibButton.disabled = disabled;
+};
+
+/**
+ * Render starter block (factory_base).
+ */
+BlockFactory.showStarterBlock = function() {
+    BlockFactory.mainWorkspace.clear();
+    var xml = '<xml><block type="factory_base" deletable="false" ' +
+        'movable="false"></block></xml>';
+    Blockly.Xml.domToWorkspace(
+        Blockly.Xml.textToDom(xml), BlockFactory.mainWorkspace);
+};
+

demos/blocklyfactory/factory_utils.js

@@ -0,0 +1,888 @@
+/**
+ * @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 FactoryUtils is a namespace that holds block starter code
+ * generation functions shared by the Block Factory, Workspace Factory, and
+ * Exporter applications within Blockly Factory. Holds functions to generate
+ * block definitions and generator stubs and to create and download files.
+ *
+ * @author fraser@google.com (Neil Fraser), quachtina96 (Tina Quach)
+ */
+ 'use strict';
+
+/**
+ * Namespace for FactoryUtils.
+ */
+goog.provide('FactoryUtils');
+
+goog.require('goog.dom.classes');
+
+/**
+ * Get block definition code for the current block.
+ *
+ * @param {string} blockType - Type of block.
+ * @param {!Blockly.Block} rootBlock - RootBlock from main workspace in which
+ *    user uses Block Factory Blocks to create a custom block.
+ * @param {string} format - 'JSON' or 'JavaScript'.
+ * @param {!Blockly.Workspace} workspace - Where the root block lives.
+ * @return {string} Block definition.
+ */
+FactoryUtils.getBlockDefinition = function(blockType, rootBlock, format, workspace) {
+  blockType = blockType.replace(/\W/g, '_').replace(/^(\d)/, '_\\1');
+  switch (format) {
+    case 'JSON':
+      var code = FactoryUtils.formatJson_(blockType, rootBlock);
+      break;
+    case 'JavaScript':
+      var code = FactoryUtils.formatJavaScript_(blockType, rootBlock, workspace);
+      break;
+  }
+  return code;
+};
+
+/**
+ * Get the generator code for a given block.
+ *
+ * @param {!Blockly.Block} block - Rendered block in preview workspace.
+ * @param {string} generatorLanguage - 'JavaScript', 'Python', 'PHP', 'Lua',
+ *     'Dart'.
+ * @return {string} Generator code for multiple blocks.
+ */
+FactoryUtils.getGeneratorStub = function(block, generatorLanguage) {
+  function makeVar(root, name) {
+    name = name.toLowerCase().replace(/\W/g, '_');
+    return '  var ' + root + '_' + name;
+  }
+  // The makevar function lives in the original update generator.
+  var language = generatorLanguage;
+  var code = [];
+  code.push("Blockly." + language + "['" + block.type +
+            "'] = function(block) {");
+
+  // Generate getters for any fields or inputs.
+  for (var i = 0, input; input = block.inputList[i]; i++) {
+    for (var j = 0, field; field = input.fieldRow[j]; j++) {
+      var name = field.name;
+      if (!name) {
+        continue;
+      }
+      if (field instanceof Blockly.FieldVariable) {
+        // Subclass of Blockly.FieldDropdown, must test first.
+        code.push(makeVar('variable', name) +
+                  " = Blockly." + language +
+                  ".variableDB_.getName(block.getFieldValue('" + name +
+                  "'), Blockly.Variables.NAME_TYPE);");
+      } else if (field instanceof Blockly.FieldAngle) {
+        // Subclass of Blockly.FieldTextInput, must test first.
+        code.push(makeVar('angle', name) +
+                  " = block.getFieldValue('" + name + "');");
+      } else if (Blockly.FieldDate && field instanceof Blockly.FieldDate) {
+        // Blockly.FieldDate may not be compiled into Blockly.
+        code.push(makeVar('date', name) +
+                  " = block.getFieldValue('" + name + "');");
+      } else if (field instanceof Blockly.FieldColour) {
+        code.push(makeVar('colour', name) +
+                  " = block.getFieldValue('" + name + "');");
+      } else if (field instanceof Blockly.FieldCheckbox) {
+        code.push(makeVar('checkbox', name) +
+                  " = block.getFieldValue('" + name + "') == 'TRUE';");
+      } else if (field instanceof Blockly.FieldDropdown) {
+        code.push(makeVar('dropdown', name) +
+                  " = block.getFieldValue('" + name + "');");
+      } else if (field instanceof Blockly.FieldNumber) {
+        code.push(makeVar('number', name) +
+                  " = block.getFieldValue('" + name + "');");
+      } else if (field instanceof Blockly.FieldTextInput) {
+        code.push(makeVar('text', name) +
+                  " = block.getFieldValue('" + name + "');");
+      }
+    }
+    var name = input.name;
+    if (name) {
+      if (input.type == Blockly.INPUT_VALUE) {
+        code.push(makeVar('value', name) +
+                  " = Blockly." + language + ".valueToCode(block, '" + name +
+                  "', Blockly." + language + ".ORDER_ATOMIC);");
+      } else if (input.type == Blockly.NEXT_STATEMENT) {
+        code.push(makeVar('statements', name) +
+                  " = Blockly." + language + ".statementToCode(block, '" +
+                  name + "');");
+      }
+    }
+  }
+  // Most languages end lines with a semicolon.  Python does not.
+  var lineEnd = {
+    'JavaScript': ';',
+    'Python': '',
+    'PHP': ';',
+    'Dart': ';'
+  };
+  code.push("  // TODO: Assemble " + language + " into code variable.");
+  if (block.outputConnection) {
+    code.push("  var code = '...';");
+    code.push("  // TODO: Change ORDER_NONE to the correct strength.");
+    code.push("  return [code, Blockly." + language + ".ORDER_NONE];");
+  } else {
+    code.push("  var code = '..." + (lineEnd[language] || '') + "\\n';");
+    code.push("  return code;");
+  }
+  code.push("};");
+
+  return code.join('\n');
+};
+
+/**
+ * Update the language code as JSON.
+ * @param {string} blockType Name of block.
+ * @param {!Blockly.Block} rootBlock Factory_base block.
+ * @return {string} Generanted language code.
+ * @private
+ */
+FactoryUtils.formatJson_ = function(blockType, rootBlock) {
+  var JS = {};
+  // Type is not used by Blockly, but may be used by a loader.
+  JS.type = blockType;
+  // Generate inputs.
+  var message = [];
+  var args = [];
+  var contentsBlock = rootBlock.getInputTargetBlock('INPUTS');
+  var lastInput = null;
+  while (contentsBlock) {
+    if (!contentsBlock.disabled && !contentsBlock.getInheritedDisabled()) {
+      var fields = FactoryUtils.getFieldsJson_(
+          contentsBlock.getInputTargetBlock('FIELDS'));
+      for (var i = 0; i < fields.length; i++) {
+        if (typeof fields[i] == 'string') {
+          message.push(fields[i].replace(/%/g, '%%'));
+        } else {
+          args.push(fields[i]);
+          message.push('%' + args.length);
+        }
+      }
+
+      var input = {type: contentsBlock.type};
+      // Dummy inputs don't have names.  Other inputs do.
+      if (contentsBlock.type != 'input_dummy') {
+        input.name = contentsBlock.getFieldValue('INPUTNAME');
+      }
+      var check = JSON.parse(
+          FactoryUtils.getOptTypesFrom(contentsBlock, 'TYPE') || 'null');
+      if (check) {
+        input.check = check;
+      }
+      var align = contentsBlock.getFieldValue('ALIGN');
+      if (align != 'LEFT') {
+        input.align = align;
+      }
+      args.push(input);
+      message.push('%' + args.length);
+      lastInput = contentsBlock;
+    }
+    contentsBlock = contentsBlock.nextConnection &&
+        contentsBlock.nextConnection.targetBlock();
+  }
+  // Remove last input if dummy and not empty.
+  if (lastInput && lastInput.type == 'input_dummy') {
+    var fields = lastInput.getInputTargetBlock('FIELDS');
+    if (fields && FactoryUtils.getFieldsJson_(fields).join('').trim() != '') {
+      var align = lastInput.getFieldValue('ALIGN');
+      if (align != 'LEFT') {
+        JS.lastDummyAlign0 = align;
+      }
+      args.pop();
+      message.pop();
+    }
+  }
+  JS.message0 = message.join(' ');
+  if (args.length) {
+    JS.args0 = args;
+  }
+  // Generate inline/external switch.
+  if (rootBlock.getFieldValue('INLINE') == 'EXT') {
+    JS.inputsInline = false;
+  } else if (rootBlock.getFieldValue('INLINE') == 'INT') {
+    JS.inputsInline = true;
+  }
+  // Generate output, or next/previous connections.
+  switch (rootBlock.getFieldValue('CONNECTIONS')) {
+    case 'LEFT':
+      JS.output =
+          JSON.parse(
+              FactoryUtils.getOptTypesFrom(rootBlock, 'OUTPUTTYPE') || 'null');
+      break;
+    case 'BOTH':
+      JS.previousStatement =
+          JSON.parse(
+              FactoryUtils.getOptTypesFrom(rootBlock, 'TOPTYPE') || 'null');
+      JS.nextStatement =
+          JSON.parse(
+              FactoryUtils.getOptTypesFrom(rootBlock, 'BOTTOMTYPE') || 'null');
+      break;
+    case 'TOP':
+      JS.previousStatement =
+          JSON.parse(
+              FactoryUtils.getOptTypesFrom(rootBlock, 'TOPTYPE') || 'null');
+      break;
+    case 'BOTTOM':
+      JS.nextStatement =
+          JSON.parse(
+              FactoryUtils.getOptTypesFrom(rootBlock, 'BOTTOMTYPE') || 'null');
+      break;
+  }
+  // Generate colour.
+  var colourBlock = rootBlock.getInputTargetBlock('COLOUR');
+  if (colourBlock && !colourBlock.disabled) {
+    var hue = parseInt(colourBlock.getFieldValue('HUE'), 10);
+    JS.colour = hue;
+  }
+  JS.tooltip = '';
+  JS.helpUrl = 'http://www.example.com/';
+  return JSON.stringify(JS, null, '  ');
+};
+
+/**
+ * Update the language code as JavaScript.
+ * @param {string} blockType Name of block.
+ * @param {!Blockly.Block} rootBlock Factory_base block.
+ * @param {!Blockly.Workspace} workspace - Where the root block lives.
+
+ * @return {string} Generated language code.
+ * @private
+ */
+FactoryUtils.formatJavaScript_ = function(blockType, rootBlock, workspace) {
+  var code = [];
+  code.push("Blockly.Blocks['" + blockType + "'] = {");
+  code.push("  init: function() {");
+  // Generate inputs.
+  var TYPES = {'input_value': 'appendValueInput',
+               'input_statement': 'appendStatementInput',
+               'input_dummy': 'appendDummyInput'};
+  var contentsBlock = rootBlock.getInputTargetBlock('INPUTS');
+  while (contentsBlock) {
+    if (!contentsBlock.disabled && !contentsBlock.getInheritedDisabled()) {
+      var name = '';
+      // Dummy inputs don't have names.  Other inputs do.
+      if (contentsBlock.type != 'input_dummy') {
+        name =
+            FactoryUtils.escapeString(contentsBlock.getFieldValue('INPUTNAME'));
+      }
+      code.push('    this.' + TYPES[contentsBlock.type] + '(' + name + ')');
+      var check = FactoryUtils.getOptTypesFrom(contentsBlock, 'TYPE');
+      if (check) {
+        code.push('        .setCheck(' + check + ')');
+      }
+      var align = contentsBlock.getFieldValue('ALIGN');
+      if (align != 'LEFT') {
+        code.push('        .setAlign(Blockly.ALIGN_' + align + ')');
+      }
+      var fields = FactoryUtils.getFieldsJs_(
+          contentsBlock.getInputTargetBlock('FIELDS'));
+      for (var i = 0; i < fields.length; i++) {
+        code.push('        .appendField(' + fields[i] + ')');
+      }
+      // Add semicolon to last line to finish the statement.
+      code[code.length - 1] += ';';
+    }
+    contentsBlock = contentsBlock.nextConnection &&
+        contentsBlock.nextConnection.targetBlock();
+  }
+  // Generate inline/external switch.
+  if (rootBlock.getFieldValue('INLINE') == 'EXT') {
+    code.push('    this.setInputsInline(false);');
+  } else if (rootBlock.getFieldValue('INLINE') == 'INT') {
+    code.push('    this.setInputsInline(true);');
+  }
+  // Generate output, or next/previous connections.
+  switch (rootBlock.getFieldValue('CONNECTIONS')) {
+    case 'LEFT':
+      code.push(FactoryUtils.connectionLineJs_('setOutput', 'OUTPUTTYPE', workspace));
+      break;
+    case 'BOTH':
+      code.push(
+          FactoryUtils.connectionLineJs_('setPreviousStatement', 'TOPTYPE', workspace));
+      code.push(
+          FactoryUtils.connectionLineJs_('setNextStatement', 'BOTTOMTYPE', workspace));
+      break;
+    case 'TOP':
+      code.push(
+          FactoryUtils.connectionLineJs_('setPreviousStatement', 'TOPTYPE', workspace));
+      break;
+    case 'BOTTOM':
+      code.push(
+          FactoryUtils.connectionLineJs_('setNextStatement', 'BOTTOMTYPE', workspace));
+      break;
+  }
+  // Generate colour.
+  var colourBlock = rootBlock.getInputTargetBlock('COLOUR');
+  if (colourBlock && !colourBlock.disabled) {
+    var hue = parseInt(colourBlock.getFieldValue('HUE'), 10);
+    if (!isNaN(hue)) {
+      code.push('    this.setColour(' + hue + ');');
+    }
+  }
+  code.push("    this.setTooltip('');");
+  code.push("    this.setHelpUrl('http://www.example.com/');");
+  code.push('  }');
+  code.push('};');
+  return code.join('\n');
+};
+
+/**
+ * Create JS code required to create a top, bottom, or value connection.
+ * @param {string} functionName JavaScript function name.
+ * @param {string} typeName Name of type input.
+ * @param {!Blockly.Workspace} workspace - Where the root block lives.
+ * @return {string} Line of JavaScript code to create connection.
+ * @private
+ */
+FactoryUtils.connectionLineJs_ = function(functionName, typeName, workspace) {
+  var type = FactoryUtils.getOptTypesFrom(
+      FactoryUtils.getRootBlock(workspace), typeName);
+  if (type) {
+    type = ', ' + type;
+  } else {
+    type = '';
+  }
+  return '    this.' + functionName + '(true' + type + ');';
+};
+
+/**
+ * Returns field strings and any config.
+ * @param {!Blockly.Block} block Input block.
+ * @return {!Array.<string>} Field strings.
+ * @private
+ */
+FactoryUtils.getFieldsJs_ = function(block) {
+  var fields = [];
+  while (block) {
+    if (!block.disabled && !block.getInheritedDisabled()) {
+      switch (block.type) {
+        case 'field_static':
+          // Result: 'hello'
+          fields.push(FactoryUtils.escapeString(block.getFieldValue('TEXT')));
+          break;
+        case 'field_input':
+          // Result: new Blockly.FieldTextInput('Hello'), 'GREET'
+          fields.push('new Blockly.FieldTextInput(' +
+              FactoryUtils.escapeString(block.getFieldValue('TEXT')) + '), ' +
+              FactoryUtils.escapeString(block.getFieldValue('FIELDNAME')));
+          break;
+        case 'field_number':
+          // Result: new Blockly.FieldNumber(10, 0, 100, 1), 'NUMBER'
+          var args = [
+            Number(block.getFieldValue('VALUE')),
+            Number(block.getFieldValue('MIN')),
+            Number(block.getFieldValue('MAX')),
+            Number(block.getFieldValue('PRECISION'))
+          ];
+          // Remove any trailing arguments that aren't needed.
+          if (args[3] == 0) {
+            args.pop();
+            if (args[2] == Infinity) {
+              args.pop();
+              if (args[1] == -Infinity) {
+                args.pop();
+              }
+            }
+          }
+          fields.push('new Blockly.FieldNumber(' + args.join(', ') + '), ' +
+              FactoryUtils.escapeString(block.getFieldValue('FIELDNAME')));
+          break;
+        case 'field_angle':
+          // Result: new Blockly.FieldAngle(90), 'ANGLE'
+          fields.push('new Blockly.FieldAngle(' +
+              parseFloat(block.getFieldValue('ANGLE')) + '), ' +
+              FactoryUtils.escapeString(block.getFieldValue('FIELDNAME')));
+          break;
+        case 'field_checkbox':
+          // Result: new Blockly.FieldCheckbox('TRUE'), 'CHECK'
+          fields.push('new Blockly.FieldCheckbox(' +
+              FactoryUtils.escapeString(block.getFieldValue('CHECKED')) +
+               '), ' +
+              FactoryUtils.escapeString(block.getFieldValue('FIELDNAME')));
+          break;
+        case 'field_colour':
+          // Result: new Blockly.FieldColour('#ff0000'), 'COLOUR'
+          fields.push('new Blockly.FieldColour(' +
+              FactoryUtils.escapeString(block.getFieldValue('COLOUR')) +
+              '), ' +
+              FactoryUtils.escapeString(block.getFieldValue('FIELDNAME')));
+          break;
+        case 'field_date':
+          // Result: new Blockly.FieldDate('2015-02-04'), 'DATE'
+          fields.push('new Blockly.FieldDate(' +
+              FactoryUtils.escapeString(block.getFieldValue('DATE')) + '), ' +
+              FactoryUtils.escapeString(block.getFieldValue('FIELDNAME')));
+          break;
+        case 'field_variable':
+          // Result: new Blockly.FieldVariable('item'), 'VAR'
+          var varname
+              = FactoryUtils.escapeString(block.getFieldValue('TEXT') || null);
+          fields.push('new Blockly.FieldVariable(' + varname + '), ' +
+              FactoryUtils.escapeString(block.getFieldValue('FIELDNAME')));
+          break;
+        case 'field_dropdown':
+          // Result:
+          // new Blockly.FieldDropdown([['yes', '1'], ['no', '0']]), 'TOGGLE'
+          var options = [];
+          for (var i = 0; i < block.optionCount_; i++) {
+            options[i] = '[' +
+                FactoryUtils.escapeString(block.getFieldValue('USER' + i)) +
+                ', ' +
+                FactoryUtils.escapeString(block.getFieldValue('CPU' + i)) + ']';
+          }
+          if (options.length) {
+            fields.push('new Blockly.FieldDropdown([' +
+                options.join(', ') + ']), ' +
+                FactoryUtils.escapeString(block.getFieldValue('FIELDNAME')));
+          }
+          break;
+        case 'field_image':
+          // Result: new Blockly.FieldImage('http://...', 80, 60)
+          var src = FactoryUtils.escapeString(block.getFieldValue('SRC'));
+          var width = Number(block.getFieldValue('WIDTH'));
+          var height = Number(block.getFieldValue('HEIGHT'));
+          var alt = FactoryUtils.escapeString(block.getFieldValue('ALT'));
+          fields.push('new Blockly.FieldImage(' +
+              src + ', ' + width + ', ' + height + ', ' + alt + ')');
+          break;
+      }
+    }
+    block = block.nextConnection && block.nextConnection.targetBlock();
+  }
+  return fields;
+};
+
+/**
+ * Returns field strings and any config.
+ * @param {!Blockly.Block} block Input block.
+ * @return {!Array.<string|!Object>} Array of static text and field configs.
+ * @private
+ */
+FactoryUtils.getFieldsJson_ = function(block) {
+  var fields = [];
+  while (block) {
+    if (!block.disabled && !block.getInheritedDisabled()) {
+      switch (block.type) {
+        case 'field_static':
+          // Result: 'hello'
+          fields.push(block.getFieldValue('TEXT'));
+          break;
+        case 'field_input':
+          fields.push({
+            type: block.type,
+            name: block.getFieldValue('FIELDNAME'),
+            text: block.getFieldValue('TEXT')
+          });
+          break;
+        case 'field_number':
+          var obj = {
+            type: block.type,
+            name: block.getFieldValue('FIELDNAME'),
+            value: parseFloat(block.getFieldValue('VALUE'))
+          };
+          var min = parseFloat(block.getFieldValue('MIN'));
+          if (min > -Infinity) {
+            obj.min = min;
+          }
+          var max = parseFloat(block.getFieldValue('MAX'));
+          if (max < Infinity) {
+            obj.max = max;
+          }
+          var precision = parseFloat(block.getFieldValue('PRECISION'));
+          if (precision) {
+            obj.precision = precision;
+          }
+          fields.push(obj);
+          break;
+        case 'field_angle':
+          fields.push({
+            type: block.type,
+            name: block.getFieldValue('FIELDNAME'),
+            angle: Number(block.getFieldValue('ANGLE'))
+          });
+          break;
+        case 'field_checkbox':
+          fields.push({
+            type: block.type,
+            name: block.getFieldValue('FIELDNAME'),
+            checked: block.getFieldValue('CHECKED') == 'TRUE'
+          });
+          break;
+        case 'field_colour':
+          fields.push({
+            type: block.type,
+            name: block.getFieldValue('FIELDNAME'),
+            colour: block.getFieldValue('COLOUR')
+          });
+          break;
+        case 'field_date':
+          fields.push({
+            type: block.type,
+            name: block.getFieldValue('FIELDNAME'),
+            date: block.getFieldValue('DATE')
+          });
+          break;
+        case 'field_variable':
+          fields.push({
+            type: block.type,
+            name: block.getFieldValue('FIELDNAME'),
+            variable: block.getFieldValue('TEXT') || null
+          });
+          break;
+        case 'field_dropdown':
+          var options = [];
+          for (var i = 0; i < block.optionCount_; i++) {
+            options[i] = [block.getFieldValue('USER' + i),
+                block.getFieldValue('CPU' + i)];
+          }
+          if (options.length) {
+            fields.push({
+              type: block.type,
+              name: block.getFieldValue('FIELDNAME'),
+              options: options
+            });
+          }
+          break;
+        case 'field_image':
+          fields.push({
+            type: block.type,
+            src: block.getFieldValue('SRC'),
+            width: Number(block.getFieldValue('WIDTH')),
+            height: Number(block.getFieldValue('HEIGHT')),
+            alt: block.getFieldValue('ALT')
+          });
+          break;
+      }
+    }
+    block = block.nextConnection && block.nextConnection.targetBlock();
+  }
+  return fields;
+};
+
+/**
+ * Fetch the type(s) defined in the given input.
+ * Format as a string for appending to the generated code.
+ * @param {!Blockly.Block} block Block with input.
+ * @param {string} name Name of the input.
+ * @return {?string} String defining the types.
+ */
+FactoryUtils.getOptTypesFrom = function(block, name) {
+  var types = FactoryUtils.getTypesFrom_(block, name);
+  if (types.length == 0) {
+    return undefined;
+  } else if (types.indexOf('null') != -1) {
+    return 'null';
+  } else if (types.length == 1) {
+    return types[0];
+  } else {
+    return '[' + types.join(', ') + ']';
+  }
+};
+
+
+/**
+ * Fetch the type(s) defined in the given input.
+ * @param {!Blockly.Block} block Block with input.
+ * @param {string} name Name of the input.
+ * @return {!Array.<string>} List of types.
+ * @private
+ */
+FactoryUtils.getTypesFrom_ = function(block, name) {
+  var typeBlock = block.getInputTargetBlock(name);
+  var types;
+  if (!typeBlock || typeBlock.disabled) {
+    types = [];
+  } else if (typeBlock.type == 'type_other') {
+    types = [FactoryUtils.escapeString(typeBlock.getFieldValue('TYPE'))];
+  } else if (typeBlock.type == 'type_group') {
+    types = [];
+    for (var n = 0; n < typeBlock.typeCount_; n++) {
+      types = types.concat(FactoryUtils.getTypesFrom_(typeBlock, 'TYPE' + n));
+    }
+    // Remove duplicates.
+    var hash = Object.create(null);
+    for (var n = types.length - 1; n >= 0; n--) {
+      if (hash[types[n]]) {
+        types.splice(n, 1);
+      }
+      hash[types[n]] = true;
+    }
+  } else {
+    types = [FactoryUtils.escapeString(typeBlock.valueType)];
+  }
+  return types;
+};
+
+/**
+ * Escape a string.
+ * @param {string} string String to escape.
+ * @return {string} Escaped string surrouned by quotes.
+ */
+FactoryUtils.escapeString = function(string) {
+  return JSON.stringify(string);
+};
+
+/**
+ * Return the uneditable container block that everything else attaches to in
+ * given workspace
+ *
+ * @param {!Blockly.Workspace} workspace - where the root block lives
+ * @return {Blockly.Block} root block
+ */
+FactoryUtils.getRootBlock = function(workspace) {
+  var blocks = workspace.getTopBlocks(false);
+  for (var i = 0, block; block = blocks[i]; i++) {
+    if (block.type == 'factory_base') {
+      return block;
+    }
+  }
+  return null;
+};
+
+// TODO(quachtina96): Move hide, show, makeInvisible, and makeVisible to a new
+// AppView namespace.
+
+/**
+ * Hides element so that it's invisible and doesn't take up space.
+ *
+ * @param {string} elementID - ID of element to hide.
+ */
+FactoryUtils.hide = function(elementID) {
+  document.getElementById(elementID).style.display = 'none';
+};
+
+/**
+ * Un-hides an element.
+ *
+ * @param {string} elementID - ID of element to hide.
+ */
+FactoryUtils.show = function(elementID) {
+  document.getElementById(elementID).style.display = 'block';
+};
+
+/**
+ * Hides element so that it's invisible but still takes up space.
+ *
+ * @param {string} elementID - ID of element to hide.
+ */
+FactoryUtils.makeInvisible = function(elementID) {
+  document.getElementById(elementID).visibility = 'hidden';
+};
+
+/**
+ * Makes element visible.
+ *
+ * @param {string} elementID - ID of element to hide.
+ */
+FactoryUtils.makeVisible = function(elementID) {
+  document.getElementById(elementID).visibility = 'visible';
+};
+
+/**
+ * Create a file with the given attributes and download it.
+ * @param {string} contents - The contents of the file.
+ * @param {string} filename - The name of the file to save to.
+ * @param {string} fileType - The type of the file to save.
+ */
+FactoryUtils.createAndDownloadFile = function(contents, filename, fileType) {
+  var data = new Blob([contents], {type: 'text/' + fileType});
+  var clickEvent = new MouseEvent("click", {
+    "view": window,
+    "bubbles": true,
+    "cancelable": false
+  });
+
+  var a = document.createElement('a');
+  a.href = window.URL.createObjectURL(data);
+  a.download = filename;
+  a.textContent = 'Download file!';
+  a.dispatchEvent(clickEvent);
+};
+
+/**
+ * Get Blockly Block by rendering pre-defined block in workspace.
+ *
+ * @param {!Element} blockType - Type of block that has already been defined.
+ * @param {!Blockly.Workspace} workspace - Workspace on which to render
+ *    the block.
+ * @return {!Blockly.Block} the Blockly.Block of desired type.
+ */
+FactoryUtils.getDefinedBlock = function(blockType, workspace) {
+  workspace.clear();
+  return workspace.newBlock(blockType);
+};
+
+/**
+ * Parses a block definition get the type of the block it defines.
+ *
+ * @param {!string} blockDef - A single block definition.
+ * @return {string} Type of block defined by the given definition.
+ */
+FactoryUtils.getBlockTypeFromJsDefinition = function(blockDef) {
+  var indexOfStartBracket = blockDef.indexOf('[\'');
+  var indexOfEndBracket = blockDef.indexOf('\']');
+  if (indexOfStartBracket != -1 && indexOfEndBracket != -1) {
+    return blockDef.substring(indexOfStartBracket + 2, indexOfEndBracket);
+  } else {
+    throw new Error ('Could not parse block type out of JavaScript block ' +
+        'definition. Brackets normally enclosing block type not found.');
+  }
+};
+
+/**
+ * Generates a category containing blocks of the specified block types.
+ *
+ * @param {!Array.<Blockly.Block>} blocks - Blocks to include in the category.
+ * @param {string} categoryName - Name to use for the generated category.
+ * @return {Element} - Category xml containing the given block types.
+ */
+FactoryUtils.generateCategoryXml = function(blocks, categoryName) {
+  // Create category DOM element.
+  var categoryElement = goog.dom.createDom('category');
+  categoryElement.setAttribute('name', categoryName);
+
+  // For each block, add block element to category.
+  for (var i = 0, block; block = blocks[i]; i++) {
+
+    // Get preview block XML.
+    var blockXml = Blockly.Xml.blockToDom(block);
+    blockXml.removeAttribute('id');
+
+    // Add block to category and category to XML.
+    categoryElement.appendChild(blockXml);
+  }
+  return categoryElement;
+};
+
+/**
+ * Parses a string containing JavaScript block definition(s) to create an array
+ * in which each element is a single block definition.
+ *
+ * @param {!string} blockDefsString - JavaScript block definition(s).
+ * @return {!Array.<string>} - Array of block definitions.
+ */
+FactoryUtils.parseJsBlockDefinitions = function(blockDefsString) {
+  var blockDefArray = [];
+  var defStart = blockDefsString.indexOf('Blockly.Blocks');
+
+  while (blockDefsString.indexOf('Blockly.Blocks', defStart) != -1) {
+    var nextStart = blockDefsString.indexOf('Blockly.Blocks', defStart + 1);
+    if (nextStart == -1) {
+      // This is the last block definition.
+      nextStart = blockDefsString.length;
+    }
+    var blockDef = blockDefsString.substring(defStart, nextStart);
+    blockDefArray.push(blockDef);
+    defStart = nextStart;
+  }
+  return blockDefArray;
+};
+
+/**
+ * Parses a string containing JSON block definition(s) to create an array
+ * in which each element is a single block definition. Expected input is
+ * one or more block definitions in the form of concatenated, stringified
+ * JSON objects.
+ *
+ * @param {!string} blockDefsString - String containing JSON block
+ *    definition(s).
+ * @return {!Array.<string>} - Array of block definitions.
+ */
+FactoryUtils.parseJsonBlockDefinitions = function(blockDefsString) {
+  var blockDefArray = [];
+  var unbalancedBracketCount = 0;
+  var defStart = 0;
+  // Iterate through the blockDefs string. Keep track of whether brackets
+  // are balanced.
+  for (var i = 0; i < blockDefsString.length; i++) {
+    var currentChar = blockDefsString[i];
+    if (currentChar == '{') {
+      unbalancedBracketCount++;
+    }
+    else if (currentChar == '}') {
+      unbalancedBracketCount--;
+      if (unbalancedBracketCount == 0 && i > 0) {
+        // The brackets are balanced. We've got a complete block defintion.
+        var blockDef = blockDefsString.substring(defStart, i + 1);
+        blockDefArray.push(blockDef);
+        defStart = i + 1;
+      }
+    }
+  }
+  return blockDefArray;
+};
+
+/**
+ * Define blocks from imported block definitions.
+ *
+ * @param {!string} blockDefsString - Block definition(s).
+ * @param {!string} format - Block definition format ('JSON' or 'JavaScript').
+ * @return {!Array<!Element>} Array of block types defined.
+ */
+FactoryUtils.defineAndGetBlockTypes = function(blockDefsString, format) {
+  var blockTypes = [];
+
+  // Define blocks and get block types.
+  if (format == 'JSON') {
+    var blockDefArray = FactoryUtils.parseJsonBlockDefinitions(blockDefsString);
+
+    // Populate array of blocktypes and define each block.
+    for (var i = 0, blockDef; blockDef = blockDefArray[i]; i++) {
+      var json = JSON.parse(blockDef);
+      blockTypes.push(json.type);
+
+      // Define the block.
+      Blockly.Blocks[json.type] = {
+        init: function() {
+          this.jsonInit(json);
+        }
+      };
+    }
+  } else if (format == 'JavaScript') {
+    var blockDefArray = FactoryUtils.parseJsBlockDefinitions(blockDefsString);
+
+    // Populate array of block types.
+    for (var i = 0, blockDef; blockDef = blockDefArray[i]; i++) {
+      var blockType = FactoryUtils.getBlockTypeFromJsDefinition(blockDef);
+      blockTypes.push(blockType);
+    }
+
+    // Define all blocks.
+    eval(blockDefsString);
+  }
+
+  return blockTypes;
+};
+
+/**
+ * Inject code into a pre tag, with syntax highlighting.
+ * Safe from HTML/script injection.
+ * @param {string} code Lines of code.
+ * @param {string} id ID of <pre> element to inject into.
+ */
+FactoryUtils.injectCode = function(code, id) {
+  var pre = document.getElementById(id);
+  pre.textContent = code;
+  code = pre.innerHTML;
+  code = prettyPrintOne(code, 'js');
+  pre.innerHTML = code;
+};

demos/blocklyfactory/index.html

@@ -0,0 +1,729 @@
+<!-- TODO(quachtina96): move the CSS out to a separate file -->
+
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="target-densitydpi=device-dpi, height=660, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <title>Blockly Demo: Blockly Factory</title>
+  <script src="../../blockly_compressed.js"></script>
+  <script src="../../javascript_compressed.js"></script>
+  <script src="../../msg/messages.js"></script>
+  <script src="../../blocks_compressed.js"></script>
+  <script src="workspacefactory/wfactory_model.js"></script>
+  <script src="workspacefactory/wfactory_controller.js"></script>
+  <script src="workspacefactory/wfactory_view.js"></script>
+  <script src="workspacefactory/wfactory_generator.js"></script>
+  <script src="workspacefactory/wfactory_init.js"></script>
+  <script src="standard_categories.js"></script>
+  <script src="/storage.js"></script>
+  <script src="../../../closure-library/closure/goog/base.js"></script>
+  <script src="factory_utils.js"></script>
+  <script src="block_option.js"></script>
+  <script src="factory.js"></script>
+  <script src="block_library_view.js"></script>
+  <script src="block_library_storage.js"></script>
+  <script src="block_library_controller.js"></script>
+  <script src="block_exporter_tools.js"></script>
+  <script src="block_exporter_view.js"></script>
+  <script src="block_exporter_controller.js"></script>
+  <script src="../blockfactory/blocks.js"></script>
+  <script src="app_controller.js"></script>
+  <link rel="stylesheet" href="factory.css">
+  <link rel="stylesheet" href="../prettify.css">
+  <script src="../prettify.js"></script>
+  <script>
+    var blocklyFactory;
+    var init = function() {
+      blocklyFactory = new AppController();
+      blocklyFactory.init();
+    };
+    window.addEventListener('load', init);
+  </script>
+</head>
+<body>
+<h1><a href="https://developers.google.com/blockly/">Blockly</a> &gt;
+  <a href="../index.html">Demos</a> &gt; Blockly Factory
+  <button id="helpButton" title="View documentation in new window.">
+    <span>Help</span>
+  </button>
+</h1>
+ <div id="tabContainer">
+    <div id="blockFactory_tab" class="tab tabon"> Block Factory</div>
+    <div id="workspaceFactory_tab" class="tab taboff"> Workspace Factory</div>
+    <div id="blocklibraryExporter_tab" class="tab taboff"> Block Exporter</div>
+  </div>
+
+  <!-- Exporter tab -->
+  <div id="blockLibraryExporter">
+    <br>
+    <p id="helperText"> First, select blocks from your block library by dragging them into your workspace. Then, use the Export Settings form to download starter code for selected blocks.
+    </p>
+    <div id="exportSelector">
+      <br>
+      <h3> Block Selector </h3>
+      <div class='dropdown'>
+        <button id="button_setBlocks">Select From Library</button>
+        <div id="dropdownDiv_setBlocks" class="dropdown-content">
+          <a id='dropdown_addAllFromLib' title="Select all block library blocks.">All Stored</a>
+          <a id='dropdown_addAllUsed' title="Select all block library blocks used in workspace factory.">All Used</a>
+          <a id='dropdown_clearSelected' title="Clear selected blocks.">Clear</a>
+        </div>
+      </div>
+      <div id="blockSelector"></div>
+    </div>
+
+    <!-- Users may customize export settings through this form -->
+    <div id="exportSettings">
+      <br>
+      <h3> Export Settings </h3>
+      <form id="exportSettingsForm">
+
+        <div id="selectedBlocksTextContainer">
+          <p>Currently Selected:</p>
+          <p id="selectedBlocksText"></p>
+        </div>
+        <input type="checkbox" id="blockDefCheck">Block Definition(s)<br>
+        <div id="blockDefSettings" class="subsettings">
+          Format:
+          <select id="exportFormat">
+            <option value="JSON">JSON</option>
+            <option value="JavaScript">JavaScript</option>
+          </select>
+          <br>
+          File Name:
+          <br>
+          <input type="text" id="blockDef_filename">
+        </div>
+          <br>
+        <input type="checkbox" id="genStubCheck">Generator Stub(s)<br>
+        <div id="genStubSettings" class="subsettings">
+          Language:
+          <select id="exportLanguage">
+            <option value="JavaScript">JavaScript</option>
+            <option value="Python">Python</option>
+            <option value="PHP">PHP</option>
+            <option value="Lua">Lua</option>
+            <option value="Dart">Dart</option>
+          </select>
+          <br>
+          File Name:
+          <br>
+          <input type="text" id="generatorStub_filename"><br>
+        </div>
+          <br>
+      </form>
+        <button id="exporterSubmitButton" title="Download block starter code as specified in export settings."> Export </button>
+    </div>
+    <div id="exportPreview">
+      <br>
+      <h3>Export Preview </h3>
+        <div id="blockDefs" class="exportPreviewTextArea">
+          <p id="blockDefs_label">Block Definitions:</p>
+          <pre id="blockDefs_textArea"></pre>
+        </div>
+        <div id="genStubs" class="exportPreviewTextArea">
+          <p id="genStubs_label">Generator Stubs:</p>
+          <pre id="genStubs_textArea"></pre>
+        </div>
+    </div>
+  </div>
+
+  <!-- Workspace Factory tab -->
+
+  <div id="workspaceFactoryContent">
+    <p>
+        <div class="dropdown">
+        <button id="button_importBlocks">Import Custom Blocks</button>
+          <div id="dropdownDiv_importBlocks" class="dropdown-content">
+            <input type="file" id="input_importBlocksJson" accept=".js, .json, .txt" class="inputfile"</input>
+            <label for="input_importBlocksJson">From JSON</label>
+            <input type="file" id="input_importBlocksJs" accept=".js, .txt" class="inputfile"</input>
+            <label for="input_importBlocksJs">From Javascript</label>
+          </div>
+        </div>
+
+        <div class="dropdown">
+        <button id="button_load">Load to Edit</button>
+          <div id="dropdownDiv_load" class="dropdown-content">
+            <input type="file" id="input_loadToolbox" accept=".xml" class="inputfile"></input>
+            <label for="input_loadToolbox">Toolbox</label>
+            <input type="file" id="input_loadPreload" accept=".xml" class="inputfile"</input>
+            <label for="input_loadPreload">Workspace Blocks</label>
+          </div>
+        </div>
+
+        <div class="dropdown">
+        <button id="button_export">Export</button>
+          <div id="dropdownDiv_export" class="dropdown-content">
+            <a id='dropdown_exportToolbox'>Toolbox</a>
+            <a id='dropdown_exportPreload'>Workspace Blocks</a>
+            <a id='dropdown_exportOptions'>Inject Options</a>
+            <a id='dropdown_exportAll'>All</a>
+          </div>
+        </div>
+
+        <button id="button_clear">Clear</button>
+
+    </p>
+
+    <section id="createDiv">
+      <h3>Edit</h3>
+      <p id="editHelpText">Drag blocks into the workspace to configure the toolbox in your custom workspace.</p>
+      <table id='workspaceTabs' style="width:auto">
+        <td id="tab_toolbox" class="tabon">Toolbox</td>
+        <td id="tab_preload" class="taboff">Workspace</td>
+      </table>
+      <section id="toolbox_section">
+        <div id="toolbox_blocks" class="content"></div>
+        <div id='disable_div'></div>
+      </section>
+      <aside id="toolbox_div">
+        <p id="categoryHeader">Your categories will appear here</p>
+        <table id="categoryTable" style="width:auto">
+        </table>
+        <p>&nbsp;</p>
+
+        <div class='dropdown'>
+        <button id="button_add" class="large">+</button>
+        <div id="dropdownDiv_add" class="dropdown-content">
+          <a id='dropdown_newCategory'>New Category</a>
+          <a id='dropdown_loadCategory'>Standard Category</a>
+          <a id='dropdown_separator'>Separator</a>
+        </div>
+        </div>
+
+        <button id="button_remove" class="large">-</button>
+
+        <button id="button_up" class="large">&#8593;</button>
+        <button id="button_down" class="large">&#8595;</button>
+
+        <br>
+        <div class='dropdown'>
+        <button id="button_editCategory">Edit Category</button>
+        <div id="dropdownDiv_editCategory" class="dropdown-content">
+          <a id='dropdown_name'>Name</a>
+          <a id='dropdown_color'>Color</a>
+        </div>
+        </div>
+
+      </aside>
+
+      <div class='dropdown'>
+      <button id="button_editShadow">Edit Block</button>
+      <div id="dropdownDiv_editShadowAdd" class="dropdown-content">
+        <a id='dropdown_addShadow'>Add Shadow</a>
+      </div>
+      <div id="dropdownDiv_editShadowRemove" class="dropdown-content">
+        <a id='dropdown_removeShadow'>Remove Shadow</a>
+      </div>
+      </div>
+
+      <aside id='preload_div' style='display:none'>
+        <p>Configure the <a href="https://developers.google.com/blockly/guides/get-started/web">options</a> for your Blockly inject call.</p>
+        <button class="small" id="button_standardOptions">Reset Options</button>
+        <form id="workspace_options">
+          <input type="checkbox" id="option_collapse_checkbox" class="optionsInput">Collapsible Blocks<br>
+          <input type="checkbox" id="option_comments_checkbox" class="optionsInput">Comments for Blocks<br>
+          <input type="checkbox" id="option_css_checkbox" class="optionsInput">Use Blockly CSS<br>
+          <input type="checkbox" id="option_disable_checkbox" class="optionsInput">Disabled Blocks<br>
+          <input type="checkbox" id="option_grid_checkbox" class="optionsInput">Use Grid<br>
+          <div id="grid_options" name="grid" style="display:none">
+            Spacing <input type="text" id="gridOption_spacing_text" class="optionsInput"value="0"><br>
+            Length <input type="text" id="gridOption_length_text" class="optionsInput" value="1"><br>
+            Color <input type="text" id="gridOption_colour_text" class="optionsInput" value="#888"><br>
+            <input type="checkbox" id="gridOption_snap_checkbox" class="optionsInput" value="grid_snap_checkbox">Snap<br>
+          </div>
+          Max Blocks <input type="text" id="option_maxBlocks_text" class="optionsInput" value="Infinity"><br>
+          Path to Blockly Media <input type="text" id="option_media_text" class="optionsInput"><br>
+          <input type="checkbox" id="option_readOnly_checkbox" class="optionsInput">Read Only<br>
+          <input type="checkbox" id="option_rtl_checkbox" class="optionsInput">Layout with RTL<br>
+          <input type="checkbox" id="option_scrollbars_checkbox" class="optionsInput">Scrollbars<br>
+          <input type="checkbox" id="option_sounds_checkbox" class="optionsInput">Sounds<br>
+          <input type="checkbox" id="option_trashcan_checkbox" class="optionsInput">Trashcan<br>
+          <input type="checkbox" id="option_zoom_checkbox" class="optionsInput">Zoom<br>
+          <div id="zoom_options" name="zoom" style="display:none">
+            <input type="checkbox" id="zoomOption_controls_checkbox" class="optionsInput">Zoom Controls<br>
+            <input type="checkbox" id="zoomOption_wheel_checkbox" class="optionsInput">Zoom Wheel<br>
+            Start Scale <input type="text" id="zoomOption_startScale_text" class="optionsInput" name="startScale" value="1.0"><br>
+            Max Scale <input type="text" id="zoomOption_maxScale_text" class="optionsInput" value="3"><br>
+            Min Scale <input type="text" id="zoomOption_minScale_text" class="optionsInput" value="0.3"><br>
+            Scale Speed <input type="text" id="zoomOption_scaleSpeed_text" class="optionsInput" value="1.2"><br>
+          </div>
+        </form>
+      </aside>
+
+
+    </section>
+
+    <aside id="previewDiv">
+      <div id="previewBorder">
+        <h3>Preview</h3>
+        <p>This is what your custom workspace will look like.</p>
+        <div id="preview_blocks" class="content"></div>
+      </div>
+    </aside>
+  </div>
+
+  <!-- Blockly Factory Tab -->
+  <table id="blockFactoryContent">
+    <tr>
+      <td width="50%" height="5%">
+        <table>
+          <tr id="blockLibrary">
+            <td id="blockLibraryContainer">
+            <span>
+              <h3>Block Library:</h3>
+              <select id="blockLibraryDropdown">
+              </select>
+            </span>
+            </td>
+            <td id="blockLibraryControls">
+            <button id="saveToBlockLibraryButton" title="Save block to Block Library.">
+              <span>Save Block</span>
+            </button>
+            <button id="removeBlockFromLibraryButton" title="Remove block from Block Library.">
+              <span>Delete Block</span>
+            </button>
+            <button id="createNewBlockButton" title="Create a new block.">
+              <span> Create Block</span>
+            </button>
+            </td>
+          </tr>
+        </table>
+      </td>
+      <td>
+        <table id="blockFactoryPreview">
+          <tr>
+            <td id="previewContainer">
+              <h3>Preview:
+                <select id="direction">
+                  <option value="ltr">LTR</option>
+                  <option value="rtl">RTL</option>
+                </select>
+              </h3>
+            </td>
+            <td id="buttonContainer">
+              <button id="linkButton" title="Save and link to blocks.">
+                <img src="link.png" height="21" width="21">
+              </button>
+              <button id="clearBlockLibraryButton" title="Clear Block Library.">
+                <span>Clear Library</span>
+              </button>
+              <label for="files" class="buttonStyle">
+                <span class=>Import Block Library</span>
+              </label>
+              <input id="files" type="file" name="files"
+                  accept="application/xml">
+              <button id="localSaveButton" title="Save block library xml to a local file.">
+                <span>Download Block Library</span>
+              </button>
+            </td>
+          </tr>
+        </table>
+      </td>
+    </tr>
+    <tr>
+      <td id="blocklyWorkspaceContainer">
+        <div id="blockly"></div>
+        <div id="blocklyMask"></div>
+      </td>
+      <td width="50%" height="95%">
+        <table>
+          <tr>
+            <td height="30%">
+              <div id="preview"></div>
+            </td>
+          </tr>
+          <tr>
+            <td height="5%">
+              <h3>Language code:
+                <select id="format">
+                  <option value="JSON">JSON</option>
+                  <option value="JavaScript">JavaScript</option>
+                  <option value="Manual">Manual edit&hellip;</option>
+                </select>
+              </h3>
+            </td>
+          </tr>
+          <tr>
+            <td height="30%">
+              <pre id="languagePre"></pre>
+              <textarea id="languageTA"></textarea>
+            </td>
+          </tr>
+          <tr>
+            <td height="5%">
+              <h3>Generator stub:
+                <select id="language">
+                  <option value="JavaScript">JavaScript</option>
+                  <option value="Python">Python</option>
+                  <option value="PHP">PHP</option>
+                  <option value="Lua">Lua</option>
+                  <option value="Dart">Dart</option>
+                </select>
+              </h3>
+            </td>
+          </tr>
+          <tr>
+            <td height="30%">
+              <pre id="generatorPre"></pre>
+            </td>
+          </tr>
+        </table>
+      </td>
+  </table>
+
+  <xml id="blockfactory_toolbox" class="toolbox">
+    <category name="Input">
+      <block type="input_value">
+        <value name="TYPE">
+          <shadow type="type_null"></shadow>
+        </value>
+      </block>
+      <block type="input_statement">
+        <value name="TYPE">
+          <shadow type="type_null"></shadow>
+        </value>
+      </block>
+      <block type="input_dummy"></block>
+    </category>
+    <category name="Field">
+      <block type="field_static"></block>
+      <block type="field_input"></block>
+      <block type="field_number"></block>
+      <block type="field_angle"></block>
+      <block type="field_dropdown"></block>
+      <block type="field_checkbox"></block>
+      <block type="field_colour"></block>
+      <!--
+      Date picker commented out since it increases footprint by 60%.
+      Add it only if you need it.  See also goog.require in blockly.js.
+      <block type="field_date"></block>
+      -->
+      <block type="field_variable"></block>
+      <block type="field_image"></block>
+    </category>
+    <category name="Type">
+      <block type="type_group"></block>
+      <block type="type_null"></block>
+      <block type="type_boolean"></block>
+      <block type="type_number"></block>
+      <block type="type_string"></block>
+      <block type="type_list"></block>
+      <block type="type_other"></block>
+    </category>
+    <category name="Colour" id="colourCategory">
+      <block type="colour_hue"><mutation colour="20"></mutation><field name="HUE">20</field></block>
+      <block type="colour_hue"><mutation colour="65"></mutation><field name="HUE">65</field></block>
+      <block type="colour_hue"><mutation colour="120"></mutation><field name="HUE">120</field></block>
+      <block type="colour_hue"><mutation colour="160"></mutation><field name="HUE">160</field></block>
+      <block type="colour_hue"><mutation colour="210"></mutation><field name="HUE">210</field></block>
+      <block type="colour_hue"><mutation colour="230"></mutation><field name="HUE">230</field></block>
+      <block type="colour_hue"><mutation colour="260"></mutation><field name="HUE">260</field></block>
+      <block type="colour_hue"><mutation colour="290"></mutation><field name="HUE">290</field></block>
+      <block type="colour_hue"><mutation colour="330"></mutation><field name="HUE">330</field></block>
+    </category>
+  </xml>
+
+  <xml id="workspacefactory_toolbox" class="toolbox">
+    <category name="Logic" colour="210">
+      <block type="controls_if"></block>
+      <block type="logic_compare"></block>
+      <block type="logic_operation"></block>
+      <block type="logic_negate"></block>
+      <block type="logic_boolean"></block>
+      <block type="logic_null"></block>
+      <block type="logic_ternary"></block>
+    </category>
+    <category name="Loops" colour="120">
+      <block type="controls_repeat_ext">
+        <value name="TIMES">
+          <shadow type="math_number">
+            <field name="NUM">10</field>
+          </shadow>
+        </value>
+      </block>
+      <block type="controls_whileUntil"></block>
+      <block type="controls_for">
+        <value name="FROM">
+          <shadow type="math_number">
+            <field name="NUM">1</field>
+          </shadow>
+        </value>
+        <value name="TO">
+          <shadow type="math_number">
+            <field name="NUM">10</field>
+          </shadow>
+        </value>
+        <value name="BY">
+          <shadow type="math_number">
+            <field name="NUM">1</field>
+          </shadow>
+        </value>
+      </block>
+      <block type="controls_forEach"></block>
+      <block type="controls_flow_statements"></block>
+    </category>
+    <category name="Math" colour="230">
+      <block type="math_number"></block>
+      <block type="math_arithmetic">
+        <value name="A">
+          <shadow type="math_number">
+            <field name="NUM">1</field>
+          </shadow>
+        </value>
+        <value name="B">
+          <shadow type="math_number">
+            <field name="NUM">1</field>
+          </shadow>
+        </value>
+      </block>
+      <block type="math_single">
+        <value name="NUM">
+          <shadow type="math_number">
+            <field name="NUM">9</field>
+          </shadow>
+        </value>
+      </block>
+      <block type="math_trig">
+        <value name="NUM">
+          <shadow type="math_number">
+            <field name="NUM">45</field>
+          </shadow>
+        </value>
+      </block>
+      <block type="math_constant"></block>
+      <block type="math_number_property">
+        <value name="NUMBER_TO_CHECK">
+          <shadow type="math_number">
+            <field name="NUM">0</field>
+          </shadow>
+        </value>
+      </block>
+      <block type="math_round">
+        <value name="NUM">
+          <shadow type="math_number">
+            <field name="NUM">3.1</field>
+          </shadow>
+        </value>
+      </block>
+      <block type="math_on_list"></block>
+      <block type="math_modulo">
+        <value name="DIVIDEND">
+          <shadow type="math_number">
+            <field name="NUM">64</field>
+          </shadow>
+        </value>
+        <value name="DIVISOR">
+          <shadow type="math_number">
+            <field name="NUM">10</field>
+          </shadow>
+        </value>
+      </block>
+      <block type="math_constrain">
+        <value name="VALUE">
+          <shadow type="math_number">
+            <field name="NUM">50</field>
+          </shadow>
+        </value>
+        <value name="LOW">
+          <shadow type="math_number">
+            <field name="NUM">1</field>
+          </shadow>
+        </value>
+        <value name="HIGH">
+          <shadow type="math_number">
+            <field name="NUM">100</field>
+          </shadow>
+        </value>
+      </block>
+      <block type="math_random_int">
+        <value name="FROM">
+          <shadow type="math_number">
+            <field name="NUM">1</field>
+          </shadow>
+        </value>
+        <value name="TO">
+          <shadow type="math_number">
+            <field name="NUM">100</field>
+          </shadow>
+        </value>
+      </block>
+      <block type="math_random_float"></block>
+    </category>
+    <category name="Text" colour="160">
+      <block type="text"></block>
+      <block type="text_join"></block>
+      <block type="text_append">
+        <value name="TEXT">
+          <shadow type="text"></shadow>
+        </value>
+      </block>
+      <block type="text_length">
+        <value name="VALUE">
+          <shadow type="text">
+            <field name="TEXT">abc</field>
+          </shadow>
+        </value>
+      </block>
+      <block type="text_isEmpty">
+        <value name="VALUE">
+          <shadow type="text">
+            <field name="TEXT"></field>
+          </shadow>
+        </value>
+      </block>
+      <block type="text_indexOf">
+        <value name="VALUE">
+          <block type="variables_get">
+            <field name="VAR">text</field>
+          </block>
+        </value>
+        <value name="FIND">
+          <shadow type="text">
+            <field name="TEXT">abc</field>
+          </shadow>
+        </value>
+      </block>
+      <block type="text_charAt">
+        <value name="VALUE">
+          <block type="variables_get">
+            <field name="VAR">text</field>
+          </block>
+        </value>
+      </block>
+      <block type="text_getSubstring">
+        <value name="STRING">
+          <block type="variables_get">
+            <field name="VAR">text</field>
+          </block>
+        </value>
+      </block>
+      <block type="text_changeCase">
+        <value name="TEXT">
+          <shadow type="text">
+            <field name="TEXT">abc</field>
+          </shadow>
+        </value>
+      </block>
+      <block type="text_trim">
+        <value name="TEXT">
+          <shadow type="text">
+            <field name="TEXT">abc</field>
+          </shadow>
+        </value>
+      </block>
+      <block type="text_print">
+        <value name="TEXT">
+          <shadow type="text">
+            <field name="TEXT">abc</field>
+          </shadow>
+        </value>
+      </block>
+      <block type="text_prompt_ext">
+        <value name="TEXT">
+          <shadow type="text">
+            <field name="TEXT">abc</field>
+          </shadow>
+        </value>
+      </block>
+    </category>
+    <category name="Lists" colour="260">
+      <block type="lists_create_with">
+        <mutation items="0"></mutation>
+      </block>
+      <block type="lists_create_with"></block>
+      <block type="lists_repeat">
+        <value name="NUM">
+          <shadow type="math_number">
+            <field name="NUM">5</field>
+          </shadow>
+        </value>
+      </block>
+      <block type="lists_length"></block>
+      <block type="lists_isEmpty"></block>
+      <block type="lists_indexOf">
+        <value name="VALUE">
+          <block type="variables_get">
+            <field name="VAR">list</field>
+          </block>
+        </value>
+      </block>
+      <block type="lists_getIndex">
+        <value name="VALUE">
+          <block type="variables_get">
+            <field name="VAR">list</field>
+          </block>
+        </value>
+      </block>
+      <block type="lists_setIndex">
+        <value name="LIST">
+          <block type="variables_get">
+            <field name="VAR">list</field>
+          </block>
+        </value>
+      </block>
+      <block type="lists_getSublist">
+        <value name="LIST">
+          <block type="variables_get">
+            <field name="VAR">list</field>
+          </block>
+        </value>
+      </block>
+      <block type="lists_split">
+        <value name="DELIM">
+          <shadow type="text">
+            <field name="TEXT">,</field>
+          </shadow>
+        </value>
+      </block>
+      <block type="lists_sort"></block>
+    </category>
+    <category name="Colour" colour="20">
+      <block type="colour_picker"></block>
+      <block type="colour_random"></block>
+      <block type="colour_rgb">
+        <value name="RED">
+          <shadow type="math_number">
+            <field name="NUM">100</field>
+          </shadow>
+        </value>
+        <value name="GREEN">
+          <shadow type="math_number">
+            <field name="NUM">50</field>
+          </shadow>
+        </value>
+        <value name="BLUE">
+          <shadow type="math_number">
+            <field name="NUM">0</field>
+          </shadow>
+        </value>
+      </block>
+      <block type="colour_blend">
+        <value name="COLOUR1">
+          <shadow type="colour_picker">
+            <field name="COLOUR">#ff0000</field>
+          </shadow>
+        </value>
+        <value name="COLOUR2">
+          <shadow type="colour_picker">
+            <field name="COLOUR">#3333ff</field>
+          </shadow>
+        </value>
+        <value name="RATIO">
+          <shadow type="math_number">
+            <field name="NUM">0.5</field>
+          </shadow>
+        </value>
+      </block>
+    </category>
+    <sep></sep>
+    <category name="Variables" colour="330" custom="VARIABLE"></category>
+    <category name="Functions" colour="290" custom="PROCEDURE"></category>
+    <sep></sep>
+    <category name="Block Library" colour="260" id="blockLibCategory"></category>
+  </xml>
+
+</body>
+</html>

demos/blocklyfactory/standard_categories.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 Contains a map of standard Blockly categories used to load
+ * standard Blockly categories into the user's toolbox. The map is keyed by
+ * the lower case name of the category, and contains the Category object for
+ * that particular category. Also has a list of core block types provided
+ * by Blockly.
+ *
+ * @author Emma Dauterman (evd2014)
+ */
+ 'use strict';
+
+/**
+ * Namespace for StandardCategories
+ */
+goog.provide('StandardCategories');
+
+// Map of standard category information necessary to add a standard category
+// to the toolbox.
+StandardCategories.categoryMap = Object.create(null);
+
+StandardCategories.categoryMap['logic'] =
+    new ListElement(ListElement.TYPE_CATEGORY, 'Logic');
+StandardCategories.categoryMap['logic'].xml =
+    Blockly.Xml.textToDom(
+    '<xml>' +
+    '<block type="controls_if"></block>' +
+    '<block type="logic_compare"></block>' +
+    '<block type="logic_operation"></block>' +
+    '<block type="logic_negate"></block>' +
+    '<block type="logic_boolean"></block>' +
+    '<block type="logic_null"></block>' +
+    '<block type="logic_ternary"></block>' +
+    '</xml>');
+StandardCategories.categoryMap['logic'].color ='#5C81A6';
+
+StandardCategories.categoryMap['loops'] =
+    new ListElement(ListElement.TYPE_CATEGORY, 'Loops');
+StandardCategories.categoryMap['loops'].xml =
+    Blockly.Xml.textToDom(
+    '<xml>' +
+    '<block type="controls_repeat_ext">' +
+      '<value name="TIMES">' +
+        '<shadow type="math_number">' +
+          '<field name="NUM">10</field>' +
+        '</shadow>' +
+      '</value>' +
+    '</block>' +
+    '<block type="controls_whileUntil"></block>' +
+    '<block type="controls_for">' +
+      '<value name="FROM">' +
+        '<shadow type="math_number">' +
+          '<field name="NUM">1</field>' +
+        '</shadow>' +
+      '</value>' +
+      '<value name="TO">' +
+        '<shadow type="math_number">' +
+          '<field name="NUM">10</field>' +
+        '</shadow>' +
+      '</value>' +
+      '<value name="BY">' +
+        '<shadow type="math_number">' +
+          '<field name="NUM">1</field>' +
+        '</shadow>' +
+      '</value>' +
+    '</block>' +
+    '<block type="controls_forEach"></block>' +
+    '<block type="controls_flow_statements"></block>' +
+    '</xml>');
+StandardCategories.categoryMap['loops'].color = '#5CA65C';
+
+StandardCategories.categoryMap['math'] =
+    new ListElement(ListElement.TYPE_CATEGORY, 'Math');
+StandardCategories.categoryMap['math'].xml =
+    Blockly.Xml.textToDom(
+    '<xml>' +
+    '<block type="math_number"></block>' +
+    '<block type="math_arithmetic">' +
+      '<value name="A">' +
+        '<shadow type="math_number">' +
+          '<field name="NUM">1</field>' +
+        '</shadow>' +
+      '</value>' +
+      '<value name="B">' +
+        '<shadow type="math_number">' +
+          '<field name="NUM">1</field>' +
+        '</shadow>' +
+      '</value>' +
+    '</block>' +
+    '<block type="math_single">' +
+      '<value name="NUM">' +
+        '<shadow type="math_number">' +
+          '<field name="NUM">9</field>' +
+        '</shadow>' +
+      '</value>' +
+    '</block>' +
+    '<block type="math_trig">' +
+      '<value name="NUM">' +
+        '<shadow type="math_number">' +
+          '<field name="NUM">45</field>' +
+        '</shadow>' +
+      '</value>' +
+    '</block>' +
+    '<block type="math_constant"></block>' +
+    '<block type="math_number_property">' +
+      '<value name="NUMBER_TO_CHECK">' +
+        '<shadow type="math_number">' +
+          '<field name="NUM">0</field>' +
+        '</shadow>' +
+      '</value>' +
+    '</block>' +
+    '<block type="math_round">' +
+      '<value name="NUM">' +
+        '<shadow type="math_number">' +
+          '<field name="NUM">3.1</field>' +
+        '</shadow>' +
+      '</value>' +
+    '</block>' +
+    '<block type="math_on_list"></block>' +
+    '<block type="math_modulo">' +
+      '<value name="DIVIDEND">' +
+        '<shadow type="math_number">' +
+          '<field name="NUM">64</field>' +
+        '</shadow>' +
+      '</value>' +
+      '<value name="DIVISOR">' +
+        '<shadow type="math_number">' +
+          '<field name="NUM">10</field>'+
+        '</shadow>' +
+      '</value>' +
+    '</block>' +
+    '<block type="math_constrain">' +
+      '<value name="VALUE">' +
+        '<shadow type="math_number">' +
+          '<field name="NUM">50</field>' +
+        '</shadow>' +
+      '</value>' +
+      '<value name="LOW">' +
+        '<shadow type="math_number">' +
+          '<field name="NUM">1</field>' +
+        '</shadow>' +
+      '</value>' +
+      '<value name="HIGH">' +
+        '<shadow type="math_number">' +
+          '<field name="NUM">100</field>' +
+        '</shadow>' +
+      '</value>' +
+    '</block>' +
+    '<block type="math_random_int">' +
+      '<value name="FROM">' +
+        '<shadow type="math_number">' +
+          '<field name="NUM">1</field>' +
+        '</shadow>' +
+      '</value>' +
+      '<value name="TO">' +
+        '<shadow type="math_number">' +
+          '<field name="NUM">100</field>' +
+        '</shadow>' +
+      '</value>' +
+    '</block>' +
+    '<block type="math_random_float"></block>' +
+    '</xml>');
+StandardCategories.categoryMap['math'].color = '#5C68A6';
+
+StandardCategories.categoryMap['text'] =
+    new ListElement(ListElement.TYPE_CATEGORY, 'Text');
+StandardCategories.categoryMap['text'].xml =
+    Blockly.Xml.textToDom(
+    '<xml>' +
+    '<block type="text"></block>' +
+    '<block type="text_join"></block>' +
+    '<block type="text_append">' +
+      '<value name="TEXT">' +
+        '<shadow type="text"></shadow>' +
+      '</value>' +
+    '</block>' +
+    '<block type="text_length">' +
+      '<value name="VALUE">' +
+        '<shadow type="text">' +
+          '<field name="TEXT">abc</field>' +
+        '</shadow>' +
+      '</value>' +
+    '</block>' +
+    '<block type="text_isEmpty">' +
+      '<value name="VALUE">' +
+        '<shadow type="text">' +
+          '<field name="TEXT"></field>' +
+        '</shadow>' +
+      '</value>' +
+    '</block>' +
+    '<block type="text_indexOf">' +
+      '<value name="VALUE">' +
+        '<block type="variables_get">' +
+          '<field name="VAR">text</field>' +
+        '</block>' +
+      '</value>' +
+      '<value name="FIND">' +
+        '<shadow type="text">' +
+          '<field name="TEXT">abc</field>' +
+        '</shadow>' +
+      '</value>' +
+    '</block>' +
+    '<block type="text_charAt">' +
+      '<value name="VALUE">' +
+        '<block type="variables_get">' +
+          '<field name="VAR">text</field>' +
+        '</block>' +
+      '</value>' +
+    '</block>' +
+    '<block type="text_getSubstring">' +
+      '<value name="STRING">' +
+        '<block type="variables_get">' +
+          '<field name="VAR">text</field>' +
+        '</block>' +
+      '</value>' +
+    '</block>' +
+    '<block type="text_changeCase">' +
+      '<value name="TEXT">' +
+        '<shadow type="text">' +
+          '<field name="TEXT">abc</field>' +
+        '</shadow>' +
+      '</value>' +
+    '</block>' +
+    '<block type="text_trim">' +
+      '<value name="TEXT">' +
+        '<shadow type="text">' +
+          '<field name="TEXT">abc</field>' +
+        '</shadow>' +
+      '</value>' +
+    '</block>' +
+    '<block type="text_print">' +
+      '<value name="TEXT">' +
+        '<shadow type="text">' +
+          '<field name="TEXT">abc</field>' +
+        '</shadow>' +
+      '</value>' +
+    '</block>' +
+    '<block type="text_prompt_ext">' +
+      '<value name="TEXT">' +
+        '<shadow type="text">' +
+          '<field name="TEXT">abc</field>' +
+        '</shadow>' +
+      '</value>' +
+    '</block>' +
+    '</xml>');
+StandardCategories.categoryMap['text'].color = '#5CA68D';
+
+StandardCategories.categoryMap['lists'] =
+    new ListElement(ListElement.TYPE_CATEGORY, 'Lists');
+StandardCategories.categoryMap['lists'].xml =
+    Blockly.Xml.textToDom(
+    '<xml>' +
+    '<block type="lists_create_with">' +
+      '<mutation items="0"></mutation>' +
+    '</block>' +
+    '<block type="lists_create_with"></block>' +
+    '<block type="lists_repeat">' +
+      '<value name="NUM">' +
+        '<shadow type="math_number">' +
+          '<field name="NUM">5</field>' +
+        '</shadow>' +
+      '</value>' +
+    '</block>' +
+    '<block type="lists_length"></block>' +
+    '<block type="lists_isEmpty"></block>' +
+    '<block type="lists_indexOf">' +
+      '<value name="VALUE">' +
+        '<block type="variables_get">' +
+          '<field name="VAR">list</field>' +
+        '</block>' +
+      '</value>' +
+    '</block>' +
+    '<block type="lists_getIndex">' +
+      '<value name="VALUE">' +
+        '<block type="variables_get">' +
+          '<field name="VAR">list</field>' +
+        '</block>' +
+      '</value>' +
+    '</block>' +
+    '<block type="lists_setIndex">' +
+      '<value name="LIST">' +
+        '<block type="variables_get">' +
+          '<field name="VAR">list</field>' +
+        '</block>' +
+      '</value>' +
+    '</block>' +
+    '<block type="lists_getSublist">' +
+      '<value name="LIST">' +
+        '<block type="variables_get">' +
+          '<field name="VAR">list</field>' +
+        '</block>' +
+      '</value>' +
+    '</block>' +
+    '<block type="lists_split">' +
+      '<value name="DELIM">' +
+        '<shadow type="text">' +
+          '<field name="TEXT">,</field>' +
+        '</shadow>' +
+      '</value>' +
+    '</block>' +
+    '<block type="lists_sort"></block>' +
+    '</xml>');
+StandardCategories.categoryMap['lists'].color = '#745CA6';
+
+StandardCategories.categoryMap['colour'] =
+    new ListElement(ListElement.TYPE_CATEGORY, 'Colour');
+StandardCategories.categoryMap['colour'].xml =
+    Blockly.Xml.textToDom(
+    '<xml>' +
+    '<block type="colour_picker"></block>' +
+    '<block type="colour_random"></block>' +
+    '<block type="colour_rgb">' +
+      '<value name="RED">' +
+        '<shadow type="math_number">' +
+          '<field name="NUM">100</field>' +
+        '</shadow>' +
+      '</value>' +
+      '<value name="GREEN">' +
+        '<shadow type="math_number">' +
+          '<field name="NUM">50</field>' +
+        '</shadow>' +
+      '</value>' +
+      '<value name="BLUE">' +
+        '<shadow type="math_number">' +
+          '<field name="NUM">0</field>' +
+        '</shadow>' +
+      '</value>' +
+    '</block>' +
+    '<block type="colour_blend">' +
+      '<value name="COLOUR1">' +
+        '<shadow type="colour_picker">' +
+          '<field name="COLOUR">#ff0000</field>' +
+        '</shadow>' +
+      '</value>' +
+      '<value name="COLOUR2">' +
+        '<shadow type="colour_picker">' +
+          '<field name="COLOUR">#3333ff</field>' +
+        '</shadow>' +
+      '</value>' +
+      '<value name="RATIO">' +
+        '<shadow type="math_number">' +
+          '<field name="NUM">0.5</field>' +
+       '</shadow>' +
+      '</value>' +
+    '</block>' +
+    '</xml>');
+StandardCategories.categoryMap['colour'].color = '#A6745C';
+
+StandardCategories.categoryMap['functions'] =
+    new ListElement(ListElement.TYPE_CATEGORY, 'Functions');
+StandardCategories.categoryMap['functions'].color = '#9A5CA6'
+StandardCategories.categoryMap['functions'].custom = 'PROCEDURE';
+
+StandardCategories.categoryMap['variables'] =
+    new ListElement(ListElement.TYPE_CATEGORY, 'Variables');
+StandardCategories.categoryMap['variables'].color = '#A65C81';
+StandardCategories.categoryMap['variables'].custom = 'VARIABLE';
+
+// All standard block types in provided in Blockly core.
+StandardCategories.coreBlockTypes =  ["controls_if", "logic_compare",
+    "logic_operation", "logic_negate", "logic_boolean", "logic_null",
+    "logic_ternary", "controls_repeat_ext", "controls_whileUntil",
+    "controls_for", "controls_forEach", "controls_flow_statements",
+    "math_number", "math_arithmetic", "math_single", "math_trig",
+    "math_constant", "math_number_property", "math_change", "math_round",
+    "math_on_list", "math_modulo", "math_constrain", "math_random_int",
+    "math_random_float", "text", "text_join", "text_append", "text_length",
+    "text_isEmpty", "text_indexOf", "variables_get", "text_charAt",
+    "text_getSubstring", "text_changeCase", "text_trim", "text_print",
+    "text_prompt_ext", "colour_picker", "colour_random", "colour_rgb",
+    "colour_blend", "lists_create_with", "lists_repeat", "lists_length",
+    "lists_isEmpty", "lists_indexOf", "lists_getIndex", "lists_setIndex",
+    "lists_getSublist", "lists_split", "lists_sort", "variables_set",
+    "procedures_defreturn", "procedures_ifreturn", "procedures_defnoreturn",
+    "procedures_callreturn"];
+

demos/blocklyfactory/workspacefactory/index.html

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

demos/blocklyfactory/workspacefactory/style.css

@@ -0,0 +1,224 @@
+body {
+  background-color: #fff;
+  font-family: sans-serif;
+}
+
+h1 {
+  font-weight: normal;
+  font-size: 140%;
+}
+
+section {
+  float: left;
+}
+
+aside {
+  float: right;
+}
+
+#categoryTable>table {
+  border: 1px solid #ccc;
+  border-bottom: none;
+}
+
+#workspaceTabs>table {
+  float: right;
+}
+
+td.tabon {
+  border-bottom-color: #ddd !important;
+  background-color: #ddd;
+  padding: 5px 19px;
+}
+
+td.taboff {
+  cursor: pointer;
+  padding: 5px 19px;
+}
+
+td.taboff:hover {
+  background-color: #eee;
+}
+
+button {
+  border-radius: 4px;
+  border: 1px solid #ddd;
+  background-color: #eee;
+  color: #000;
+  font-size: large;
+  margin: 0 5px;
+  padding: 10px;
+}
+
+button:hover:not(:disabled) {
+  box-shadow: 2px 2px 5px #888;
+}
+
+button:disabled {
+  opacity: .6;
+}
+
+button>* {
+  opacity: .6;
+  vertical-align: text-bottom;
+}
+
+button:hover:not(:disabled)>* {
+  opacity: 1;
+}
+
+button.small {
+  font-size: small;
+}
+
+table {
+  border: none;
+  border-collapse: collapse;
+  margin: 0;
+  padding: 0;
+}
+
+td {
+  padding: 0;
+  vertical-align: top;
+}
+
+.inputfile {
+  height: 0;
+  opacity: 0;
+  overflow: hidden;
+  position: absolute;
+  width: 0;
+  z-index: -1;
+}
+
+#toolbox_section {
+  height: 480px;
+  width: 80%;
+  position: relative;
+}
+
+#toolbox_blocks {
+  height: 100%;
+  width: 100%;
+}
+
+#preview_blocks {
+  height: 300px;
+  width: 100%;
+}
+
+#createDiv {
+  width: 70%;
+}
+
+#previewDiv {
+  width: 30%;
+}
+
+#toolbox_div {
+  width: 20%;
+}
+
+#preload_div {
+  width: 20%;
+}
+
+#disable_div {
+  background-color: white;
+  height: 100%;
+  left: 0;
+  opacity: .5;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: -1;  /* Start behind workspace */
+}
+
+/* Rules for Closure popup color picker */
+.goog-palette {
+  outline: none;
+  cursor: default;
+}
+
+.goog-palette-cell {
+  height: 13px;
+  width: 15px;
+  margin: 0;
+  border: 0;
+  text-align: center;
+  vertical-align: middle;
+  border-right: 1px solid #000000;
+  font-size: 1px;
+}
+
+.goog-palette-colorswatch {
+  border: 1px solid #000000;
+  height: 13px;
+  position: relative;
+  width: 15px;
+}
+
+.goog-palette-cell-hover .goog-palette-colorswatch {
+  border: 1px solid #FFF;
+}
+
+.goog-palette-cell-selected .goog-palette-colorswatch {
+  border: 1px solid #000;
+  color: #fff;
+}
+
+.goog-palette-table {
+  border: 1px solid #000;
+  border-collapse: collapse;
+}
+
+.goog-popupcolorpicker {
+  position: absolute;
+}
+
+/* The container <div> - needed to position the dropdown content */
+.dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+/* Dropdown Content (Hidden by Default) */
+.dropdown-content {
+  background-color: #f9f9f9;
+  box-shadow: 0px 8px 16px 0px rgba(0,0,0,.2);
+  display: none;
+  min-width: 170px;
+  opacity: 1;
+  position: absolute;
+  z-index: 1;
+}
+
+/* Links inside the dropdown */
+.dropdown-content a, .dropdown-content label {
+  color: black;
+  display: block;
+  font-size: small;
+  padding: 12px 16px;
+  text-decoration: none;
+}
+
+/* Change color of dropdown links on hover. */
+.dropdown-content a:hover, .dropdown-content label:hover {
+  background-color: #f1f1f1
+}
+
+/* Show the dropdown menu */
+.show {
+  display: block;
+}
+
+.shadowBlock>.blocklyPath {
+  fill-opacity: .5;
+  stroke-opacity: .5;
+}
+
+.shadowBlock>.blocklyPathLight,
+.shadowBlock>.blocklyPathDark {
+  display: none;
+}

demos/blocklyfactory/workspacefactory/wfactory_generator.js

@@ -0,0 +1,200 @@
+/**
+ * @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 Generates the configuration xml used to update the preview
+ * workspace or print to the console or download to a file. Leverages
+ * Blockly.Xml and depends on information in the model (holds a reference).
+ * Depends on a hidden workspace created in the generator to load saved XML in
+ * order to generate toolbox XML.
+ *
+ * @author Emma Dauterman (evd2014)
+ */
+
+goog.require('FactoryUtils');
+
+/**
+ * Class for a WorkspaceFactoryGenerator
+ * @constructor
+ */
+WorkspaceFactoryGenerator = function(model) {
+  // Model to share information about categories and shadow blocks.
+  this.model = model;
+  // Create hidden workspace to load saved XML to generate toolbox XML.
+  var hiddenBlocks = document.createElement('div');
+  // Generate a globally unique ID for the hidden div element to avoid
+  // collisions.
+  var hiddenBlocksId = Blockly.genUid();
+  hiddenBlocks.id = hiddenBlocksId;
+  hiddenBlocks.style.display = 'none';
+  document.body.appendChild(hiddenBlocks);
+  this.hiddenWorkspace = Blockly.inject(hiddenBlocksId);
+};
+
+/**
+ * Generates the xml for the toolbox or flyout with information from
+ * toolboxWorkspace and the model. Uses the hiddenWorkspace to generate XML.
+ * Save state of workspace in model (saveFromWorkspace) before calling if
+ * changes might have been made to the selected category.
+ *
+ * @param {!Blockly.workspace} toolboxWorkspace Toolbox editing workspace where
+ * blocks are added by user to be part of the toolbox.
+ * @return {!Element} XML element representing toolbox or flyout corresponding
+ * to toolbox workspace.
+ */
+WorkspaceFactoryGenerator.prototype.generateToolboxXml = function() {
+  // Create DOM for XML.
+  var xmlDom = goog.dom.createDom('xml',
+      {
+        'id' : 'toolbox',
+        'style' : 'display:none'
+      });
+  if (!this.model.hasElements()) {
+    // Toolbox has no categories. Use XML directly from workspace.
+    this.loadToHiddenWorkspace_(this.model.getSelectedXml());
+    this.appendHiddenWorkspaceToDom_(xmlDom);
+  } else {
+    // Toolbox has categories.
+    // Assert that selected != null
+    if (!this.model.getSelected()) {
+      throw new Error('Selected is null when the toolbox is empty.');
+    }
+
+    var xml = this.model.getSelectedXml();
+    var toolboxList = this.model.getToolboxList();
+
+    // Iterate through each category to generate XML for each using the
+    // hidden workspace. Load each category to the hidden workspace to make sure
+    // that all the blocks that are not top blocks are also captured as block
+    // groups in the flyout.
+    for (var i = 0; i < toolboxList.length; i++) {
+      var element = toolboxList[i];
+      if (element.type == ListElement.TYPE_SEPARATOR) {
+        // If the next element is a separator.
+        var nextElement = goog.dom.createDom('sep');
+      } else if (element.type == ListElement.TYPE_CATEGORY) {
+        // If the next element is a category.
+        var nextElement = goog.dom.createDom('category');
+        nextElement.setAttribute('name', element.name);
+        // Add a colour attribute if one exists.
+        if (element.color != null) {
+          nextElement.setAttribute('colour', element.color);
+        }
+        // Add a custom attribute if one exists.
+        if (element.custom != null) {
+          nextElement.setAttribute('custom', element.custom);
+        }
+        // Load that category to hidden workspace, setting user-generated shadow
+        // blocks as real shadow blocks.
+        this.loadToHiddenWorkspace_(element.xml);
+        this.appendHiddenWorkspaceToDom_(nextElement);
+      }
+      xmlDom.appendChild(nextElement);
+    }
+  }
+  return xmlDom;
+ };
+
+
+ /**
+  * Generates XML for the workspace (different from generateConfigXml in that
+  * it includes XY and ID attributes). Uses a workspace and converts user
+  * generated shadow blocks to actual shadow blocks.
+  *
+  */
+WorkspaceFactoryGenerator.prototype.generateWorkspaceXml = function() {
+  // Load workspace XML to hidden workspace with user-generated shadow blocks
+  // as actual shadow blocks.
+  this.hiddenWorkspace.clear();
+  Blockly.Xml.domToWorkspace(this.model.getPreloadXml(), this.hiddenWorkspace);
+  this.setShadowBlocksInHiddenWorkspace_();
+
+  // Generate XML and set attributes.
+  var generatedXml = Blockly.Xml.workspaceToDom(this.hiddenWorkspace);
+  generatedXml.setAttribute('id', 'preload_blocks');
+  generatedXml.setAttribute('style', 'display:none');
+  return generatedXml;
+ };
+
+/**
+ * Loads the given XML to the hidden workspace and sets any user-generated
+ * shadow blocks to be actual shadow blocks.
+ * @private
+ *
+ * @param {!Element} xml The XML to be loaded to the hidden workspace.
+ */
+WorkspaceFactoryGenerator.prototype.loadToHiddenWorkspace_ = function(xml) {
+  this.hiddenWorkspace.clear();
+  Blockly.Xml.domToWorkspace(xml, this.hiddenWorkspace);
+  this.setShadowBlocksInHiddenWorkspace_();
+}
+
+ /**
+ * Encodes blocks in the hidden workspace in a XML DOM element. Very
+ * similar to workspaceToDom, but doesn't capture IDs. Uses the top-level
+ * blocks loaded in hiddenWorkspace.
+ * @private
+ *
+ * @param {!Element} xmlDom Tree of XML elements to be appended to.
+ */
+WorkspaceFactoryGenerator.prototype.appendHiddenWorkspaceToDom_ =
+    function(xmlDom) {
+  var blocks = this.hiddenWorkspace.getTopBlocks();
+  for (var i = 0, block; block = blocks[i]; i++) {
+    var blockChild = Blockly.Xml.blockToDom(block);
+    blockChild.removeAttribute('id');
+    xmlDom.appendChild(blockChild);
+  }
+};
+
+/**
+ * Sets the user-generated shadow blocks loaded into hiddenWorkspace to be
+ * actual shadow blocks. This is done so that blockToDom records them as
+ * shadow blocks instead of regular blocks.
+ * @private
+ *
+ */
+WorkspaceFactoryGenerator.prototype.setShadowBlocksInHiddenWorkspace_ =
+    function() {
+  var blocks = this.hiddenWorkspace.getAllBlocks();
+  for (var i = 0; i < blocks.length; i++) {
+    if (this.model.isShadowBlock(blocks[i].id)) {
+      blocks[i].setShadow(true);
+    }
+  }
+};
+
+/**
+ * Given a set of block types, gets the Blockly.Block objects for each block
+ * type.
+ *
+ * @param {!Array<!Element>} blockTypes Array of blocks that have been defined.
+ * @return {!Array<!Blockly.Block>} Array of Blockly.Block objects corresponding
+ *    to the array of blockTypes.
+ */
+WorkspaceFactoryGenerator.prototype.getDefinedBlocks = function(blockTypes) {
+  var blocks = [];
+  for (var i = 0; i < blockTypes.length ; i++) {
+    blocks.push(FactoryUtils.getDefinedBlock(blockTypes[i],
+        this.hiddenWorkspace));
+  }
+  return blocks;
+};
+

demos/blocklyfactory/workspacefactory/wfactory_init.js

@@ -0,0 +1,535 @@
+/**
+ * @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 Contains the init functions for the workspace factory tab.
+ * Adds click handlers to buttons and dropdowns, adds event listeners for
+ * keydown events and Blockly events, and configures the initial setup of
+ * the page.
+ *
+ * @author Emma Dauterman (evd2014)
+ */
+
+/**
+ * Namespace for workspace factory initialization methods.
+ * @namespace
+ */
+WorkspaceFactoryInit = {};
+
+/**
+ * Initialization for workspace factory tab.
+ *
+ * @param {!FactoryController} controller The controller for the workspace
+ *    factory tab.
+ */
+WorkspaceFactoryInit.initWorkspaceFactory = function(controller) {
+  // Disable category editing buttons until categories are created.
+  document.getElementById('button_remove').disabled = true;
+  document.getElementById('button_up').disabled = true;
+  document.getElementById('button_down').disabled = true;
+  document.getElementById('button_editCategory').disabled = true;
+  document.getElementById('button_editShadow').disabled = true;
+
+  this.initColorPicker_(controller);
+  this.addWorkspaceFactoryEventListeners_(controller);
+  this.assignWorkspaceFactoryClickHandlers_(controller);
+  this.addWorkspaceFactoryOptionsListeners_(controller);
+
+  // Check standard options and apply the changes to update the view.
+  controller.setStandardOptionsAndUpdate();
+};
+
+/**
+ * Initialize the color picker in workspace factory.
+ * @private
+ *
+ * @param {!FactoryController} controller The controller for the workspace
+ *    factory tab.
+ */
+WorkspaceFactoryInit.initColorPicker_ = function(controller) {
+  // Array of Blockly category colors, variety of hues with saturation 45%
+  // and value 65% as specified in Blockly Developer documentation:
+  // https://developers.google.com/blockly/guides/create-custom-blocks/define-blocks
+  var colors = ['#A65C5C',
+      '#A6635C',
+      '#A66A5C',
+      '#A6725C',
+      '#A6795C',
+      '#A6815C',
+      '#A6885C',
+      '#A6905C',
+      '#A6975C',
+      '#A69F5C',
+      '#A6A65C',
+      '#9FA65C',
+      '#97A65C',
+      '#90A65C',
+      '#88A65C',
+      '#81A65C',
+      '#79A65C',
+      '#6FA65C',
+      '#66A65C',
+      '#5EA65C',
+      '#5CA661',
+      '#5CA668',
+      '#5CA66F',
+      '#5CA677',
+      '#5CA67E',
+      '#5CA686',
+      '#5CA68D',
+      '#5CA695',
+      '#5CA69C',
+      '#5CA6A4',
+      '#5CA1A6',
+      '#5C9AA6',
+      '#5C92A6',
+      '#5C8BA6',
+      '#5C83A6',
+      '#5C7CA6',
+      '#5C74A6',
+      '#5C6AA6',
+      '#5C61A6',
+      '#5E5CA6',
+      '#665CA6',
+      '#6D5CA6',
+      '#745CA6',
+      '#7C5CA6',
+      '#835CA6',
+      '#8B5CA6',
+      '#925CA6',
+      '#9A5CA6',
+      '#A15CA6',
+      '#A65CA4',
+      '#A65C9C',
+      '#A65C95',
+      '#A65C8D',
+      '#A65C86',
+      '#A65C7E',
+      '#A65C77',
+      '#A65C6F',
+      '#A65C66',
+      '#A65C61',
+      '#A65C5E'];
+
+  // Create color picker with specific set of Blockly colors.
+  var colorPicker = new goog.ui.ColorPicker();
+  colorPicker.setColors(colors);
+
+  // Create and render the popup color picker and attach to button.
+  var popupPicker = new goog.ui.PopupColorPicker(null, colorPicker);
+  popupPicker.render();
+  popupPicker.attach(document.getElementById('dropdown_color'));
+  popupPicker.setFocusable(true);
+  goog.events.listen(popupPicker, 'change', function(e) {
+    controller.changeSelectedCategoryColor(popupPicker.getSelectedColor());
+    document.getElementById('dropdownDiv_editCategory').classList.remove
+        ("show");
+  });
+};
+
+/**
+ * Assign click handlers for workspace factory.
+ * @private
+ *
+ * @param {!FactoryController} controller The controller for the workspace
+ *    factory tab.
+ */
+WorkspaceFactoryInit.assignWorkspaceFactoryClickHandlers_ =
+    function(controller) {
+  document.getElementById('tab_toolbox').addEventListener
+      ('click',
+      function() {
+        controller.setMode(WorkspaceFactoryController.MODE_TOOLBOX);
+      });
+
+  document.getElementById('tab_preload').addEventListener
+      ('click',
+      function() {
+        controller.setMode(WorkspaceFactoryController.MODE_PRELOAD);
+      });
+
+  document.getElementById('button_add').addEventListener
+      ('click',
+      function() {
+        document.getElementById('dropdownDiv_add').classList.toggle("show");
+      });
+
+  document.getElementById('dropdown_newCategory').addEventListener
+      ('click',
+      function() {
+        controller.addCategory();
+        document.getElementById('dropdownDiv_add').classList.remove("show");
+      });
+
+  document.getElementById('dropdown_loadCategory').addEventListener
+      ('click',
+      function() {
+        controller.loadCategory();
+        document.getElementById('dropdownDiv_add').classList.remove("show");
+      });
+
+  document.getElementById('dropdown_separator').addEventListener
+      ('click',
+      function() {
+        controller.addSeparator();
+        document.getElementById('dropdownDiv_add').classList.remove("show");
+      });
+
+  document.getElementById('button_remove').addEventListener
+      ('click',
+      function() {
+        controller.removeElement();
+      });
+
+  document.getElementById('dropdown_exportToolbox').addEventListener
+      ('click',
+      function() {
+        controller.exportXmlFile(WorkspaceFactoryController.MODE_TOOLBOX);
+        document.getElementById('dropdownDiv_export').classList.remove("show");
+      });
+
+  document.getElementById('dropdown_exportPreload').addEventListener
+      ('click',
+      function() {
+        controller.exportXmlFile(WorkspaceFactoryController.MODE_PRELOAD);
+        document.getElementById('dropdownDiv_export').classList.remove("show");
+      });
+
+  document.getElementById('dropdown_exportOptions').addEventListener
+      ('click',
+      function() {
+        controller.exportOptionsFile();
+        document.getElementById('dropdownDiv_export').classList.remove("show");
+      });
+
+  document.getElementById('dropdown_exportAll').addEventListener
+      ('click',
+      function() {
+        controller.exportXmlFile(WorkspaceFactoryController.MODE_TOOLBOX);
+        controller.exportXmlFile(WorkspaceFactoryController.MODE_PRELOAD);
+        controller.exportOptionsFile();
+        document.getElementById('dropdownDiv_export').classList.remove("show");
+      });
+
+  document.getElementById('button_export').addEventListener
+      ('click',
+      function() {
+        document.getElementById('dropdownDiv_export').classList.toggle("show");
+        document.getElementById('dropdownDiv_load').classList.remove("show");
+        document.getElementById('dropdownDiv_importBlocks').classList.
+            remove("show");
+      });
+
+  document.getElementById('button_up').addEventListener
+      ('click',
+      function() {
+        controller.moveElement(-1);
+      });
+
+  document.getElementById('button_down').addEventListener
+      ('click',
+      function() {
+        controller.moveElement(1);
+      });
+
+  document.getElementById('button_editCategory').addEventListener
+      ('click',
+      function() {
+        document.getElementById('dropdownDiv_editCategory').classList.
+        toggle("show");
+      });
+
+  document.getElementById('button_editShadow').addEventListener
+      ('click',
+      function() {
+        if (Blockly.selected) {
+          // Can only edit blocks when a block is selected.
+
+          if (!controller.isUserGenShadowBlock(Blockly.selected.id) &&
+              Blockly.selected.getSurroundParent() != null) {
+            // If a block is selected that could be a valid shadow block (not a
+            // shadow block, has a surrounding parent), let the user make it a
+            // shadow block. Use toggle instead of add so that the user can
+            // click the button again to make the dropdown disappear without
+            // clicking one of the options.
+            document.getElementById('dropdownDiv_editShadowRemove').classList.
+                remove("show");
+            document.getElementById('dropdownDiv_editShadowAdd').classList.
+                toggle("show");
+          } else {
+            // If the block is a shadow block, let the user make it a normal
+            // block.
+            document.getElementById('dropdownDiv_editShadowAdd').classList.
+                remove("show");
+            document.getElementById('dropdownDiv_editShadowRemove').classList.
+                toggle("show");
+          }
+        }
+      });
+
+  document.getElementById('dropdown_name').addEventListener
+      ('click',
+      function() {
+        controller.changeCategoryName();
+        document.getElementById('dropdownDiv_editCategory').classList.
+            remove("show");
+      });
+
+document.getElementById('button_importBlocks').addEventListener
+      ('click',
+      function() {
+        document.getElementById('dropdownDiv_importBlocks').classList.
+            toggle("show");
+        document.getElementById('dropdownDiv_export').classList.remove("show");
+        document.getElementById('dropdownDiv_load').classList.remove("show");
+      });
+
+  document.getElementById('button_load').addEventListener
+      ('click',
+      function() {
+        document.getElementById('dropdownDiv_load').classList.toggle("show");
+        document.getElementById('dropdownDiv_export').classList.remove("show");
+        document.getElementById('dropdownDiv_importBlocks').classList.
+            remove("show");
+      });
+
+  document.getElementById('input_loadToolbox').addEventListener
+      ('change',
+      function() {
+        controller.importFile(event.target.files[0],
+            WorkspaceFactoryController.MODE_TOOLBOX);
+        document.getElementById('dropdownDiv_load').classList.remove("show");
+      });
+
+  document.getElementById('input_loadPreload').addEventListener
+      ('change',
+      function() {
+        controller.importFile(event.target.files[0],
+            WorkspaceFactoryController.MODE_PRELOAD);
+        document.getElementById('dropdownDiv_load').classList.remove("show");
+      });
+
+  document.getElementById('input_importBlocksJson').addEventListener
+      ('change',
+      function() {
+        controller.importBlocks(event.target.files[0],'JSON');
+        document.getElementById('dropdownDiv_importBlocks').classList.
+            remove("show");
+      });
+
+  document.getElementById('input_importBlocksJs').addEventListener
+      ('change',
+      function() {
+        controller.importBlocks(event.target.files[0],'JavaScript');
+        document.getElementById('dropdownDiv_importBlocks').classList.
+            remove("show");
+      });
+
+  document.getElementById('button_clear').addEventListener
+      ('click',
+      function() {
+        document.getElementById('dropdownDiv_importBlocks').classList.
+            remove("show");
+        document.getElementById('dropdownDiv_export').classList.remove("show");
+        document.getElementById('dropdownDiv_load').classList.remove("show");
+        controller.clearAll();
+      });
+
+  document.getElementById('dropdown_addShadow').addEventListener
+      ('click',
+      function() {
+        controller.addShadow();
+        document.getElementById('dropdownDiv_editShadowAdd').classList.
+            remove("show");
+      });
+
+  document.getElementById('dropdown_removeShadow').addEventListener
+      ('click',
+      function() {
+        controller.removeShadow();
+        document.getElementById('dropdownDiv_editShadowRemove').classList.
+            remove("show");
+        // Disable shadow editing button if turning invalid shadow block back
+        // to normal block.
+        if (!Blockly.selected.getSurroundParent()) {
+          document.getElementById('button_editShadow').disabled = true;
+        }
+      });
+
+  document.getElementById('button_standardOptions').addEventListener
+      ('click', function() {
+        controller.setStandardOptionsAndUpdate();
+      });
+};
+
+/**
+ * Add event listeners for workspace factory.
+ * @private
+ *
+ * @param {!FactoryController} controller The controller for the workspace
+ *    factory tab.
+ */
+WorkspaceFactoryInit.addWorkspaceFactoryEventListeners_ = function(controller) {
+  // Use up and down arrow keys to move categories.
+  window.addEventListener('keydown', function(e) {
+    // Don't let arrow keys have any effect if not in Workspace Factory
+    // editing the toolbox.
+    if (!(controller.keyEventsEnabled && controller.selectedMode
+        == WorkspaceFactoryController.MODE_TOOLBOX)) {
+      return;
+    }
+
+    if (e.keyCode == 38) {
+      // Arrow up.
+      controller.moveElement(-1);
+    } else if (e.keyCode == 40) {
+      // Arrow down.
+      controller.moveElement(1);
+    }
+  });
+
+  // Determines if a block breaks shadow block placement rules.
+  // Breaks rules if (1) a shadow block no longer has a valid
+  // parent, or (2) a normal block is inside of a shadow block.
+  var isInvalidBlockPlacement = function(block) {
+    return ((controller.isUserGenShadowBlock(block.id) &&
+        !block.getSurroundParent()) ||
+        (!controller.isUserGenShadowBlock(block.id) && block.getSurroundParent()
+        && controller.isUserGenShadowBlock(block.getSurroundParent().id)));
+  };
+
+  // Add change listeners for toolbox workspace in workspace factory.
+  controller.toolboxWorkspace.addChangeListener(function(e) {
+    // Listen for Blockly move and delete events to update preview.
+    // Not listening for Blockly create events because causes the user to drop
+    // blocks when dragging them into workspace. Could cause problems if ever
+    // load blocks into workspace directly without calling updatePreview.
+    if (e.type == Blockly.Events.MOVE || e.type == Blockly.Events.DELETE ||
+          e.type == Blockly.Events.CHANGE) {
+      controller.saveStateFromWorkspace();
+      controller.updatePreview();
+    }
+
+    // Listen for Blockly UI events to correctly enable the "Edit Block" button.
+    // Only enable "Edit Block" when a block is selected and it has a
+    // surrounding parent, meaning it is nested in another block (blocks that
+    // are not nested in parents cannot be shadow blocks).
+    if (e.type == Blockly.Events.MOVE || (e.type == Blockly.Events.UI &&
+        e.element == 'selected')) {
+      var selected = Blockly.selected;
+
+      if (selected != null && selected.getSurroundParent() != null &&
+          !controller.isUserGenShadowBlock(selected.getSurroundParent().id)) {
+        // Selected block is a valid shadow block or could be a valid shadow
+        // block.
+
+        // Enable block editing and remove warnings if the block is not a
+        // variable user-generated shadow block.
+        document.getElementById('button_editShadow').disabled = false;
+        if (!controller.hasVariableField(selected) &&
+            controller.isDefinedBlock(selected)) {
+          selected.setWarningText(null);
+        }
+      } else {
+        // Selected block cannot be a valid shadow block.
+
+        if (selected != null && isInvalidBlockPlacement(selected)) {
+          // Selected block breaks shadow block rules.
+          // Invalid shadow block if (1) a shadow block no longer has a valid
+          // parent, or (2) a normal block is inside of a shadow block.
+
+          if (!controller.isUserGenShadowBlock(selected.id)) {
+            // Warn if a non-shadow block is nested inside a shadow block.
+            selected.setWarningText('Only shadow blocks can be nested inside '
+                + 'other shadow blocks.');
+          } else if (!controller.hasVariableField(selected)) {
+            // Warn if a shadow block is invalid only if not replacing
+            // warning for variables.
+            selected.setWarningText('Shadow blocks must be nested inside other'
+                + ' blocks.')
+          }
+
+          // Give editing options so that the user can make an invalid shadow
+          // block a normal block.
+          document.getElementById('button_editShadow').disabled = false;
+        } else {
+          // Selected block does not break any shadow block rules, but cannot
+          // be a shadow block.
+
+          // Remove possible 'invalid shadow block placement' warning.
+          if (selected != null && controller.isDefinedBlock(selected) &&
+              (!controller.hasVariableField(selected) ||
+              !controller.isUserGenShadowBlock(selected.id))) {
+            selected.setWarningText(null);
+          }
+
+          // No block selected that is a shadow block or could be a valid shadow
+          // block. Disable block editing.
+          document.getElementById('button_editShadow').disabled = true;
+          document.getElementById('dropdownDiv_editShadowRemove').classList.
+              remove("show");
+          document.getElementById('dropdownDiv_editShadowAdd').classList.
+              remove("show");
+        }
+      }
+    }
+
+    // Convert actual shadow blocks added from the toolbox to user-generated
+    // shadow blocks.
+    if (e.type == Blockly.Events.CREATE) {
+      controller.convertShadowBlocks();
+    }
+  });
+};
+
+/**
+ * Add listeners for workspace factory options input elements.
+ * @private
+ *
+ * @param {!FactoryController} controller The controller for the workspace
+ *    factory tab.
+ */
+WorkspaceFactoryInit.addWorkspaceFactoryOptionsListeners_ =
+    function(controller) {
+
+  // Checking the grid checkbox displays grid options.
+  document.getElementById('option_grid_checkbox').addEventListener('change',
+      function(e) {
+        document.getElementById('grid_options').style.display =
+            document.getElementById('option_grid_checkbox').checked ?
+            'block' : 'none';
+      });
+
+  // Checking the grid checkbox displays zoom options.
+  document.getElementById('option_zoom_checkbox').addEventListener('change',
+      function(e) {
+        document.getElementById('zoom_options').style.display =
+            document.getElementById('option_zoom_checkbox').checked ?
+            'block' : 'none';
+      });
+
+  // Generate new options every time an options input is updated.
+  var optionsElements = document.getElementsByClassName('optionsInput');
+  for (var i = 0; i < optionsElements.length; i++) {
+    optionsElements[i].addEventListener('change', function() {
+      controller.generateNewOptions();
+    });
+  }
+};

demos/blocklyfactory/workspacefactory/wfactory_model.js

@@ -0,0 +1,593 @@
+/**
+ * @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 Stores and updates information about state and categories
+ * in workspace factory. Each list element is either a separator or a category,
+ * and each category stores its name, XML to load that category, color,
+ * custom tags, and a unique ID making it possible to change category names and
+ * move categories easily. Keeps track of the currently selected list
+ * element. Also keeps track of all the user-created shadow blocks and
+ * manipulates them as necessary.
+ *
+ * @author Emma Dauterman (evd2014)
+ */
+
+/**
+ * Class for a WorkspaceFactoryModel
+ * @constructor
+ */
+WorkspaceFactoryModel = function() {
+  // Ordered list of ListElement objects. Empty if there is a single flyout.
+  this.toolboxList = [];
+  // ListElement for blocks in a single flyout. Null if a toolbox exists.
+  this.flyout = new ListElement(ListElement.TYPE_FLYOUT);
+  // Array of block IDs for all user created shadow blocks.
+  this.shadowBlocks = [];
+  // Reference to currently selected ListElement. Stored in this.toolboxList if
+  // there are categories, or in this.flyout if blocks are displayed in a single
+  // flyout.
+  this.selected = this.flyout;
+  // Boolean for if a Variable category has been added.
+  this.hasVariableCategory = false;
+  // Boolean for if a Procedure category has been added.
+  this.hasProcedureCategory = false;
+  // XML to be pre-loaded to workspace. Empty on default;
+  this.preloadXml = Blockly.Xml.textToDom('<xml></xml>');
+  // Options object to be configured for Blockly inject call.
+  this.options = new Object(null);
+  // Block Library block types.
+  this.libBlockTypes = [];
+  // Imported block types.
+  this.importedBlockTypes = [];
+  //
+};
+
+/**
+ * Given a name, determines if it is the name of a category already present.
+ * Used when getting a valid category name from the user.
+ *
+ * @param {string} name String name to be compared against.
+ * @return {boolean} True if string is a used category name, false otherwise.
+ */
+WorkspaceFactoryModel.prototype.hasCategoryByName = function(name) {
+  for (var i = 0; i < this.toolboxList.length; i++) {
+    if (this.toolboxList[i].type == ListElement.TYPE_CATEGORY &&
+        this.toolboxList[i].name == name) {
+      return true;
+    }
+  }
+  return false;
+};
+
+/**
+ * Determines if a category with the 'VARIABLE' tag exists.
+ *
+ * @return {boolean} True if there exists a category with the Variables tag,
+ * false otherwise.
+ */
+WorkspaceFactoryModel.prototype.hasVariables = function() {
+  return this.hasVariableCategory;
+};
+
+/**
+ * Determines if a category with the 'PROCEDURE' tag exists.
+ *
+ * @return {boolean} True if there exists a category with the Procedures tag,
+ * false otherwise.
+ */
+WorkspaceFactoryModel.prototype.hasProcedures = function() {
+  return this.hasFunctionCategory;
+};
+
+/**
+ * Determines if the user has any elements in the toolbox. Uses the length of
+ * toolboxList.
+ *
+ * @return {boolean} True if elements exist, false otherwise.
+ */
+WorkspaceFactoryModel.prototype.hasElements = function() {
+  return this.toolboxList.length > 0;
+};
+
+/**
+ * Given a ListElement, adds it to the toolbox list.
+ *
+ * @param {!ListElement} element The element to be added to the list.
+ */
+WorkspaceFactoryModel.prototype.addElementToList = function(element) {
+  // Update state if the copied category has a custom tag.
+  this.hasVariableCategory = element.custom == 'VARIABLE' ? true :
+      this.hasVariableCategory;
+  this.hasProcedureCategory = element.custom == 'PROCEDURE' ? true :
+      this.hasProcedureCategory;
+  // Add element to toolboxList.
+  this.toolboxList.push(element);
+  // Empty single flyout.
+  this.flyout = null;
+};
+
+/**
+ * Given an index, deletes a list element and all associated data.
+ *
+ * @param {int} index The index of the list element to delete.
+ */
+WorkspaceFactoryModel.prototype.deleteElementFromList = function(index) {
+  // Check if index is out of bounds.
+  if (index < 0 || index >= this.toolboxList.length) {
+    return; // No entry to delete.
+  }
+  // Check if need to update flags.
+  this.hasVariableCategory = this.toolboxList[index].custom == 'VARIABLE' ?
+      false : this.hasVariableCategory;
+  this.hasProcedureCategory = this.toolboxList[index].custom == 'PROCEDURE' ?
+      false : this.hasProcedureCategory;
+  // Remove element.
+  this.toolboxList.splice(index, 1);
+};
+
+/**
+ * Sets selected to be an empty category not in toolbox list if toolbox list
+ * is empty. Should be called when removing the last element from toolbox list.
+ * If the toolbox list is empty, selected stores the XML for the single flyout
+ * of blocks displayed.
+ *
+ */
+WorkspaceFactoryModel.prototype.createDefaultSelectedIfEmpty = function() {
+  if (this.toolboxList.length == 0) {
+    this.flyout = new ListElement(ListElement.TYPE_FLYOUT);
+    this.selected = this.flyout;
+  }
+}
+
+/**
+ * Moves a list element to a certain position in toolboxList by removing it
+ * and then inserting it at the correct index. Checks that indices are in
+ * bounds (throws error if not), but assumes that oldIndex is the correct index
+ * for list element.
+ *
+ * @param {!ListElement} element The element to move in toolboxList.
+ * @param {int} newIndex The index to insert the element at.
+ * @param {int} oldIndex The index the element is currently at.
+ */
+WorkspaceFactoryModel.prototype.moveElementToIndex = function(element, newIndex,
+    oldIndex) {
+  // Check that indexes are in bounds.
+  if (newIndex < 0 || newIndex >= this.toolboxList.length || oldIndex < 0 ||
+      oldIndex >= this.toolboxList.length) {
+    throw new Error('Index out of bounds when moving element in the model.');
+  }
+  this.deleteElementFromList(oldIndex);
+  this.toolboxList.splice(newIndex, 0, element);
+}
+
+/**
+ * Returns the ID of the currently selected element. Returns null if there are
+ * no categories (if selected == null).
+ *
+ * @return {string} The ID of the element currently selected.
+ */
+WorkspaceFactoryModel.prototype.getSelectedId = function() {
+  return this.selected ? this.selected.id : null;
+};
+
+/**
+ * Returns the name of the currently selected category. Returns null if there
+ * are no categories (if selected == null) or the selected element is not
+ * a category (in which case its name is null).
+ *
+ * @return {string} The name of the category currently selected.
+ */
+WorkspaceFactoryModel.prototype.getSelectedName = function() {
+  return this.selected ? this.selected.name : null;
+};
+
+/**
+ * Returns the currently selected list element object.
+ *
+ * @return {ListElement} The currently selected ListElement
+ */
+WorkspaceFactoryModel.prototype.getSelected = function() {
+  return this.selected;
+};
+
+/**
+ * Sets list element currently selected by id.
+ *
+ * @param {string} id ID of list element that should now be selected.
+ */
+WorkspaceFactoryModel.prototype.setSelectedById = function(id) {
+  this.selected = this.getElementById(id);
+};
+
+/**
+ * Given an ID of a list element, returns the index of that list element in
+ * toolboxList. Returns -1 if ID is not present.
+ *
+ * @param {!string} id The ID of list element to search for.
+ * @return {int} The index of the list element in toolboxList, or -1 if it
+ * doesn't exist.
+ */
+
+WorkspaceFactoryModel.prototype.getIndexByElementId = function(id) {
+  for (var i = 0; i < this.toolboxList.length; i++) {
+    if (this.toolboxList[i].id == id) {
+      return i;
+    }
+  }
+  return -1;  // ID not present in toolboxList.
+};
+
+/**
+ * Given the ID of a list element, returns that ListElement object.
+ *
+ * @param {!string} id The ID of element to search for.
+ * @return {ListElement} Corresponding ListElement object in toolboxList, or
+ *     null if that element does not exist.
+ */
+WorkspaceFactoryModel.prototype.getElementById = function(id) {
+  for (var i = 0; i < this.toolboxList.length; i++) {
+    if (this.toolboxList[i].id == id) {
+      return this.toolboxList[i];
+    }
+  }
+  return null;  // ID not present in toolboxList.
+};
+
+/**
+ * Given the index of a list element in toolboxList, returns that ListElement
+ * object.
+ *
+ * @param {int} index The index of the element to return.
+ * @return {ListElement} The corresponding ListElement object in toolboxList.
+ */
+WorkspaceFactoryModel.prototype.getElementByIndex = function(index) {
+  if (index < 0 || index >= this.toolboxList.length) {
+    return null;
+  }
+  return this.toolboxList[index];
+};
+
+/**
+ * Returns the xml to load the selected element.
+ *
+ * @return {!Element} The XML of the selected element, or null if there is
+ * no selected element.
+ */
+WorkspaceFactoryModel.prototype.getSelectedXml = function() {
+  return this.selected ? this.selected.xml : null;
+};
+
+/**
+ * Return ordered list of ListElement objects.
+ *
+ * @return {!Array<!ListElement>} ordered list of ListElement objects
+ */
+WorkspaceFactoryModel.prototype.getToolboxList = function() {
+  return this.toolboxList;
+};
+
+/**
+ * Gets the ID of a category given its name.
+ *
+ * @param {string} name Name of category.
+ * @return {int} ID of category
+ */
+WorkspaceFactoryModel.prototype.getCategoryIdByName = function(name) {
+  for (var i = 0; i < this.toolboxList.length; i++) {
+    if (this.toolboxList[i].name == name) {
+      return this.toolboxList[i].id;
+    }
+  }
+  return null;  // Name not present in toolboxList.
+};
+
+/**
+ * Clears the toolbox list, deleting all ListElements.
+ */
+WorkspaceFactoryModel.prototype.clearToolboxList = function() {
+  this.toolboxList = [];
+  this.hasVariableCategory = false;
+  this.hasProcedureCategory = false;
+  this.shadowBlocks = [];
+  this.selected.xml = Blockly.Xml.textToDom('<xml></xml>');
+};
+
+/**
+ * Class for a ListElement
+ * Adds a shadow block to the list of shadow blocks.
+ *
+ * @param {!string} blockId The unique ID of block to be added.
+ */
+WorkspaceFactoryModel.prototype.addShadowBlock = function(blockId) {
+  this.shadowBlocks.push(blockId);
+};
+
+/**
+ * Removes a shadow block ID from the list of shadow block IDs if that ID is
+ * in the list.
+ *
+ * @param {!string} blockId The unique ID of block to be removed.
+ */
+WorkspaceFactoryModel.prototype.removeShadowBlock = function(blockId) {
+  for (var i = 0; i < this.shadowBlocks.length; i++) {
+    if (this.shadowBlocks[i] == blockId) {
+      this.shadowBlocks.splice(i, 1);
+      return;
+    }
+  }
+};
+
+/**
+ * Determines if a block is a shadow block given a unique block ID.
+ *
+ * @param {!string} blockId The unique ID of the block to examine.
+ * @return {boolean} True if the block is a user-generated shadow block, false
+ *    otherwise.
+ */
+WorkspaceFactoryModel.prototype.isShadowBlock = function(blockId) {
+  for (var i = 0; i < this.shadowBlocks.length; i++) {
+    if (this.shadowBlocks[i] == blockId) {
+      return true;
+    }
+  }
+  return false;
+};
+
+/**
+ * Given a set of blocks currently loaded, returns all blocks in the workspace
+ * that are user generated shadow blocks.
+ *
+ * @param {!<Blockly.Block>} blocks Array of blocks currently loaded.
+ * @return {!<Blockly.Block>} Array of user-generated shadow blocks currently
+ * loaded.
+ */
+WorkspaceFactoryModel.prototype.getShadowBlocksInWorkspace =
+    function(workspaceBlocks) {
+  var shadowsInWorkspace = [];
+  for (var i = 0; i < workspaceBlocks.length; i++) {
+    if (this.isShadowBlock(workspaceBlocks[i].id)) {
+      shadowsInWorkspace.push(workspaceBlocks[i]);
+    }
+  }
+  return shadowsInWorkspace;
+};
+
+/**
+ * Adds a custom tag to a category, updating state variables accordingly.
+ * Only accepts 'VARIABLE' and 'PROCEDURE' tags.
+ *
+ * @param {!ListElement} category The category to add the tag to.
+ * @param {!string} tag The custom tag to add to the category.
+ */
+WorkspaceFactoryModel.prototype.addCustomTag = function(category, tag) {
+  // Only update list elements that are categories.
+  if (category.type != ListElement.TYPE_CATEGORY) {
+    return;
+  }
+  // Only update the tag to be 'VARIABLE' or 'PROCEDURE'.
+  if (tag == 'VARIABLE') {
+    this.hasVariableCategory = true;
+    category.custom = 'VARIABLE';
+  } else if (tag == 'PROCEDURE') {
+    this.hasProcedureCategory = true;
+    category.custom = 'PROCEDURE';
+  }
+};
+
+/**
+ * Have basic pre-loaded workspace working
+ * Saves XML as XML to be pre-loaded into the workspace.
+ *
+ * @param {!Element} xml The XML to be saved.
+ */
+WorkspaceFactoryModel.prototype.savePreloadXml = function(xml) {
+  this.preloadXml = xml
+};
+
+/**
+ * Gets the XML to be pre-loaded into the workspace.
+ *
+ * @return {!Element} The XML for the workspace.
+ */
+WorkspaceFactoryModel.prototype.getPreloadXml = function() {
+  return this.preloadXml;
+};
+
+/**
+ * Sets a new options object for injecting a Blockly workspace.
+ *
+ * @param {Object} options Options object for injecting a Blockly workspace.
+ */
+WorkspaceFactoryModel.prototype.setOptions = function(options) {
+  this.options = options;
+};
+
+/**
+ * Sets an attribute of the options object.
+ *
+ * @param {!string} name Name of the attribute to add.
+ * @param {Object} value The value of the attribute to add.
+ */
+WorkspaceFactoryModel.prototype.setOptionsAttribute = function(name, value) {
+  this.options[name] = value;
+};
+
+/*
+ * Returns an array of all the block types currently being used in the toolbox
+ * and the pre-loaded blocks. No duplicates.
+ * TODO(evd2014): Move pushBlockTypesToList to FactoryUtils.
+ *
+ * @return {!Array<!string>} Array of block types currently being used.
+ */
+WorkspaceFactoryModel.prototype.getAllUsedBlockTypes = function() {
+  var blockTypeList = [];
+
+  // Given XML for the workspace, adds all block types included in the XML
+  // to the list, not including duplicates.
+  var pushBlockTypesToList = function(xml, list) {
+    // Get all block XML nodes.
+    var blocks = xml.getElementsByTagName('block');
+
+    // Add block types if not already in list.
+    for (var i = 0; i < blocks.length; i++) {
+      var type = blocks[i].getAttribute('type');
+      if (list.indexOf(type) == -1) {
+        list.push(type);
+      }
+    }
+  };
+
+  if (this.flyout) {
+    // If has a single flyout, add block types for the single flyout.
+    pushBlockTypesToList(this.getSelectedXml(), blockTypeList);
+  } else {
+    // If has categories, add block types for each category.
+
+    for (var i = 0, category; category = this.toolboxList[i]; i++) {
+      if (category.type == ListElement.TYPE_CATEGORY) {
+        pushBlockTypesToList(category.xml, blockTypeList);
+      }
+    }
+  }
+
+  // Add the block types from any pre-loaded blocks.
+  pushBlockTypesToList(this.getPreloadXml(), blockTypeList);
+
+  return blockTypeList;
+};
+
+/**
+ * Adds new imported block types to the list of current imported block types.
+ *
+ * @param {!Array<!string>} blockTypes Array of block types imported.
+ */
+WorkspaceFactoryModel.prototype.addImportedBlockTypes = function(blockTypes) {
+  this.importedBlockTypes = this.importedBlockTypes.concat(blockTypes);
+};
+
+/**
+ * Updates block types in block library.
+ *
+ * @param {!Array<!string>} blockTypes Array of block types in block library.
+ */
+WorkspaceFactoryModel.prototype.updateLibBlockTypes = function(blockTypes) {
+  this.libBlockTypes = blockTypes;
+};
+
+/**
+ * Determines if a block type is defined as a standard block, in the block
+ * library, or as an imported block.
+ *
+ * @param {!string} blockType Block type to check.
+ * @return {boolean} True if blockType is defined, false otherwise.
+ */
+WorkspaceFactoryModel.prototype.isDefinedBlockType = function(blockType) {
+  var isStandardBlock = StandardCategories.coreBlockTypes.indexOf(blockType)
+      != -1;
+  var isLibBlock = this.libBlockTypes.indexOf(blockType) != -1;
+  var isImportedBlock = this.importedBlockTypes.indexOf(blockType) != -1;
+  return (isStandardBlock || isLibBlock || isImportedBlock);
+}
+
+/**
+ * Class for a ListElement.
+ * @constructor
+ */
+ListElement = function(type, opt_name) {
+  this.type = type;
+  // XML DOM element to load the element.
+  this.xml = Blockly.Xml.textToDom('<xml></xml>');
+  // Name of category. Can be changed by user. Null if separator.
+  this.name = opt_name ? opt_name : null;
+  // Unique ID of element. Does not change.
+  this.id = Blockly.genUid();
+  // Color of category. Default is no color. Null if separator.
+  this.color = null;
+  // Stores a custom tag, if necessary. Null if no custom tag or separator.
+  this.custom = null;
+};
+
+// List element types.
+ListElement.TYPE_CATEGORY = 'category';
+ListElement.TYPE_SEPARATOR = 'separator';
+ListElement.TYPE_FLYOUT = 'flyout';
+
+/**
+ * Saves a category by updating its XML (does not save XML for
+ * elements that are not categories).
+ *
+ * @param {!Blockly.workspace} workspace The workspace to save category entry
+ * from.
+ */
+ListElement.prototype.saveFromWorkspace = function(workspace) {
+  // Only save XML for categories and flyouts.
+  if (this.type == ListElement.TYPE_FLYOUT ||
+      this.type == ListElement.TYPE_CATEGORY) {
+    this.xml = Blockly.Xml.workspaceToDom(workspace);
+  }
+};
+
+
+/**
+ * Changes the name of a category object given a new name. Returns if
+ * not a category.
+ *
+ * @param {string} name New name of category.
+ */
+ListElement.prototype.changeName = function (name) {
+  // Only update list elements that are categories.
+  if (this.type != ListElement.TYPE_CATEGORY) {
+    return;
+  }
+  this.name = name;
+};
+
+/**
+ * Sets the color of a category. If tries to set the color of something other
+ * than a category, returns.
+ *
+ * @param {!string} color The color that should be used for that category.
+ */
+ListElement.prototype.changeColor = function (color) {
+  if (this.type != ListElement.TYPE_CATEGORY) {
+    return;
+  }
+  this.color = color;
+};
+
+/**
+ * Makes a copy of the original element and returns it. Everything about the
+ * copy is identical except for its ID.
+ *
+ * @return {!ListElement} The copy of the ListElement.
+ */
+ListElement.prototype.copy = function() {
+  copy = new ListElement(this.type);
+  // Generate a unique ID for the element.
+  copy.id = Blockly.genUid();
+  // Copy all attributes except ID.
+  copy.name = this.name;
+  copy.xml = this.xml;
+  copy.color = this.color;
+  copy.custom = this.custom;
+  // Return copy.
+  return copy;
+};

demos/blocklyfactory/workspacefactory/wfactory_view.js

@@ -0,0 +1,435 @@
+/**
+ * @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.
+ */
+
+/**
+ * Controls the UI elements for workspace factory, mainly the category tabs.
+ * Also includes downloading files because that interacts directly with the DOM.
+ * Depends on WorkspaceFactoryController (for adding mouse listeners). Tabs for
+ * each category are stored in tab map, which associates a unique ID for a
+ * category with a particular tab.
+ *
+ * @author Emma Dauterman (edauterman)
+ */
+
+ /**
+  * Class for a WorkspaceFactoryView
+  * @constructor
+  */
+
+WorkspaceFactoryView = function() {
+  // For each tab, maps ID of a ListElement to the td DOM element.
+  this.tabMap = Object.create(null);
+};
+
+/**
+ * Adds a category tab to the UI, and updates tabMap accordingly.
+ *
+ * @param {!string} name The name of the category being created
+ * @param {!string} id ID of category being created
+ * @param {boolean} firstCategory true if it's the first category, false
+ * otherwise
+ * @return {!Element} DOM element created for tab
+ */
+WorkspaceFactoryView.prototype.addCategoryRow =
+    function(name, id, firstCategory) {
+  var table = document.getElementById('categoryTable');
+  // Delete help label and enable category buttons if it's the first category.
+  if (firstCategory) {
+    document.getElementById('categoryHeader').textContent = 'Your Categories:';
+  }
+  // Create tab.
+  var count = table.rows.length;
+  var row = table.insertRow(count);
+  var nextEntry = row.insertCell(0);
+  // Configure tab.
+  nextEntry.id = this.createCategoryIdName(name);
+  nextEntry.textContent = name;
+  // Store tab.
+  this.tabMap[id] = table.rows[count].cells[0];
+  // Return tab.
+  return nextEntry;
+};
+
+/**
+ * Deletes a category tab from the UI and updates tabMap accordingly.
+ *
+ * @param {!string} id ID of category to be deleted.
+ * @param {!string} name The name of the category to be deleted.
+ */
+WorkspaceFactoryView.prototype.deleteElementRow = function(id, index) {
+  // Delete tab entry.
+  delete this.tabMap[id];
+  // Delete tab row.
+  var table = document.getElementById('categoryTable');
+  var count = table.rows.length;
+  table.deleteRow(index);
+
+  // If last category removed, add category help text and disable category
+  // buttons.
+  this.addEmptyCategoryMessage();
+};
+
+/**
+ * If there are no toolbox elements created, adds a help message to show
+ * where categories will appear. Should be called when deleting list elements
+ * in case the last element is deleted.
+ */
+WorkspaceFactoryView.prototype.addEmptyCategoryMessage = function() {
+  var table = document.getElementById('categoryTable');
+  if (table.rows.length == 0) {
+    document.getElementById('categoryHeader').textContent =
+        'Your categories will appear here';
+  }
+}
+
+/**
+ * Given the index of the currently selected element, updates the state of
+ * the buttons that allow the user to edit the list elements. Updates the edit
+ * and arrow buttons. Should be called when adding or removing elements
+ * or when changing to a new element or when swapping to a different element.
+ *
+ * TODO(evd2014): Switch to using CSS to add/remove styles.
+ *
+ * @param {int} selectedIndex The index of the currently selected category,
+ * -1 if no categories created.
+ * @param {ListElement} selected The selected ListElement.
+ */
+WorkspaceFactoryView.prototype.updateState = function(selectedIndex, selected) {
+  // Disable/enable editing buttons as necessary.
+  document.getElementById('button_editCategory').disabled = selectedIndex < 0 ||
+      selected.type != ListElement.TYPE_CATEGORY;
+  document.getElementById('button_remove').disabled = selectedIndex < 0;
+  document.getElementById('button_up').disabled =
+      selectedIndex <= 0 ? true : false;
+  var table = document.getElementById('categoryTable');
+  document.getElementById('button_down').disabled = selectedIndex >=
+      table.rows.length - 1 || selectedIndex < 0 ? true : false;
+  // Disable/enable the workspace as necessary.
+  this.disableWorkspace(this.shouldDisableWorkspace(selected));
+};
+
+/**
+ * Determines the DOM id for a category given its name.
+ *
+ * @param {!string} name Name of category
+ * @return {!string} ID of category tab
+ */
+WorkspaceFactoryView.prototype.createCategoryIdName = function(name) {
+  return 'tab_' + name;
+};
+
+/**
+ * Switches a tab on or off.
+ *
+ * @param {!string} id ID of the tab to switch on or off.
+ * @param {boolean} selected True if tab should be on, false if tab should be
+ * off.
+ */
+WorkspaceFactoryView.prototype.setCategoryTabSelection =
+    function(id, selected) {
+  if (!this.tabMap[id]) {
+    return;   // Exit if tab does not exist.
+  }
+  this.tabMap[id].className = selected ? 'tabon' : 'taboff';
+};
+
+/**
+ * Used to bind a click to a certain DOM element (used for category tabs).
+ * Taken directly from code.js
+ *
+ * @param {string|!Element} e1 tab element or corresponding id string
+ * @param {!Function} func Function to be executed on click
+ */
+WorkspaceFactoryView.prototype.bindClick = function(el, func) {
+  if (typeof el == 'string') {
+    el = document.getElementById(el);
+  }
+  el.addEventListener('click', func, true);
+  el.addEventListener('touchend', func, true);
+};
+
+/**
+ * Creates a file and downloads it. In some browsers downloads, and in other
+ * browsers, opens new tab with contents.
+ *
+ * @param {!string} filename Name of file
+ * @param {!Blob} data Blob containing contents to download
+ */
+WorkspaceFactoryView.prototype.createAndDownloadFile =
+    function(filename, data) {
+   var clickEvent = new MouseEvent("click", {
+     "view": window,
+     "bubbles": true,
+     "cancelable": false
+   });
+   var a = document.createElement('a');
+   a.href = window.URL.createObjectURL(data);
+   a.download = filename;
+   a.textContent = 'Download file!';
+   a.dispatchEvent(clickEvent);
+ };
+
+/**
+ * Given the ID of a certain category, updates the corresponding tab in
+ * the DOM to show a new name.
+ *
+ * @param {!string} newName Name of string to be displayed on tab
+ * @param {!string} id ID of category to be updated
+ *
+ */
+WorkspaceFactoryView.prototype.updateCategoryName = function(newName, id) {
+  this.tabMap[id].textContent = newName;
+  this.tabMap[id].id = this.createCategoryIdName(newName);
+};
+
+/**
+ * Moves a tab from one index to another. Adjusts index inserting before
+ * based on if inserting before or after. Checks that the indexes are in
+ * bounds, throws error if not.
+ *
+ * @param {!string} id The ID of the category to move.
+ * @param {int} newIndex The index to move the category to.
+ * @param {int} oldIndex The index the category is currently at.
+ */
+WorkspaceFactoryView.prototype.moveTabToIndex =
+    function(id, newIndex, oldIndex) {
+  var table = document.getElementById('categoryTable');
+  // Check that indexes are in bounds
+  if (newIndex < 0 || newIndex >= table.rows.length || oldIndex < 0 ||
+      oldIndex >= table.rows.length) {
+    throw new Error('Index out of bounds when moving tab in the view.');
+  }
+
+  if (newIndex < oldIndex) {
+    // Inserting before.
+    var row = table.insertRow(newIndex);
+    row.appendChild(this.tabMap[id]);
+    table.deleteRow(oldIndex + 1);
+  } else {
+    // Inserting after.
+    var row = table.insertRow(newIndex + 1);
+    row.appendChild(this.tabMap[id]);
+    table.deleteRow(oldIndex);
+  }
+};
+
+/**
+ * Given a category ID and color, use that color to color the left border of the
+ * tab for that category.
+ *
+ * @param {!string} id The ID of the category to color.
+ * @param {!string} color The color for to be used for the border of the tab.
+ * Must be a valid CSS string.
+ */
+WorkspaceFactoryView.prototype.setBorderColor = function(id, color) {
+  var tab = this.tabMap[id];
+  tab.style.borderLeftWidth = "8px";
+  tab.style.borderLeftStyle = "solid";
+  tab.style.borderColor = color;
+};
+
+/**
+ * Given a separator ID, creates a corresponding tab in the view, updates
+ * tab map, and returns the tab.
+ *
+ * @param {!string} id The ID of the separator.
+ * @param {!Element} The td DOM element representing the separator.
+ */
+WorkspaceFactoryView.prototype.addSeparatorTab = function(id) {
+  // Create separator.
+  var table = document.getElementById('categoryTable');
+  var count = table.rows.length;
+  var row = table.insertRow(count);
+  var nextEntry = row.insertCell(0);
+  // Configure separator.
+  nextEntry.style.height = '10px';
+  // Store and return separator.
+  this.tabMap[id] = table.rows[count].cells[0];
+  return nextEntry;
+};
+
+/**
+ * Disables or enables the workspace by putting a div over or under the
+ * toolbox workspace, depending on the value of disable. Used when switching
+ * to/from separators where the user shouldn't be able to drag blocks into
+ * the workspace.
+ *
+ * @param {boolean} disable True if the workspace should be disabled, false
+ * if it should be enabled.
+ */
+WorkspaceFactoryView.prototype.disableWorkspace = function(disable) {
+  document.getElementById('disable_div').style.zIndex = disable ? 1 : -1;
+};
+
+/**
+ * Determines if the workspace should be disabled. The workspace should be
+ * disabled if category is a separator or has VARIABLE or PROCEDURE tags.
+ *
+ * @return {boolean} True if the workspace should be disabled, false otherwise.
+ */
+WorkspaceFactoryView.prototype.shouldDisableWorkspace = function(category) {
+  return category != null && category.type != ListElement.TYPE_FLYOUT &&
+      (category.type == ListElement.TYPE_SEPARATOR ||
+      category.custom == 'VARIABLE' || category.custom == 'PROCEDURE');
+};
+
+/*
+ * Removes all categories and separators in the view. Clears the tabMap to
+ * reflect this.
+ */
+WorkspaceFactoryView.prototype.clearToolboxTabs = function() {
+  this.tabMap = [];
+  var oldCategoryTable = document.getElementById('categoryTable');
+  var newCategoryTable = document.createElement('table');
+  newCategoryTable.id = 'categoryTable';
+  newCategoryTable.style.width = 'auto';
+  oldCategoryTable.parentElement.replaceChild(newCategoryTable,
+      oldCategoryTable);
+};
+
+/**
+ * Given a set of blocks currently loaded user-generated shadow blocks, visually
+ * marks them without making them actual shadow blocks (allowing them to still
+ * be editable and movable).
+ *
+ * @param {!<Blockly.Block>} blocks Array of user-generated shadow blocks
+ * currently loaded.
+ */
+WorkspaceFactoryView.prototype.markShadowBlocks = function(blocks) {
+  for (var i = 0; i < blocks.length; i++) {
+    this.markShadowBlock(blocks[i]);
+  }
+};
+
+/**
+ * Visually marks a user-generated shadow block as a shadow block in the
+ * workspace without making the block an actual shadow block (allowing it
+ * to be moved and edited).
+ *
+ * @param {!Blockly.Block} block The block that should be marked as a shadow
+ *    block (must be rendered).
+ */
+WorkspaceFactoryView.prototype.markShadowBlock = function(block) {
+  // Add Blockly CSS for user-generated shadow blocks.
+  Blockly.addClass_(block.svgGroup_, 'shadowBlock');
+  // If not a valid shadow block, add a warning message.
+  if (!block.getSurroundParent()) {
+      block.setWarningText('Shadow blocks must be nested inside' +
+          ' other blocks to be displayed.');
+  }
+};
+
+/**
+ * Removes visual marking for a shadow block given a rendered block.
+ *
+ * @param {!Blockly.Block} block The block that should be unmarked as a shadow
+ *    block (must be rendered).
+ */
+WorkspaceFactoryView.prototype.unmarkShadowBlock = function(block) {
+  // Remove Blockly CSS for user-generated shadow blocks.
+  if (Blockly.hasClass_(block.svgGroup_, 'shadowBlock')) {
+    Blockly.removeClass_(block.svgGroup_, 'shadowBlock');
+  }
+};
+
+/**
+ * Sets the tabs for modes according to which mode the user is currenly
+ * editing in.
+ *
+ * @param {!string} mode The mode being switched to
+ *    (WorkspaceFactoryController.MODE_TOOLBOX or WorkspaceFactoryController.MODE_PRELOAD).
+ */
+WorkspaceFactoryView.prototype.setModeSelection = function(mode) {
+  document.getElementById('tab_preload').className = mode ==
+      WorkspaceFactoryController.MODE_PRELOAD ? 'tabon' : 'taboff';
+  document.getElementById('preload_div').style.display = mode ==
+      WorkspaceFactoryController.MODE_PRELOAD ? 'block' : 'none';
+  document.getElementById('tab_toolbox').className = mode ==
+      WorkspaceFactoryController.MODE_TOOLBOX ? 'tabon' : 'taboff';
+  document.getElementById('toolbox_div').style.display = mode ==
+      WorkspaceFactoryController.MODE_TOOLBOX ? 'block' : 'none';
+};
+
+/**
+ * Updates the help text above the workspace depending on the selected mode.
+ *
+ * @param {!string} mode The selected mode (WorkspaceFactoryController.MODE_TOOLBOX or
+ *    WorkspaceFactoryController.MODE_PRELOAD).
+ */
+WorkspaceFactoryView.prototype.updateHelpText = function(mode) {
+  if (mode == WorkspaceFactoryController.MODE_TOOLBOX) {
+    var helpText = 'Drag blocks into the workspace to configure the toolbox '
+        + 'in your custom workspace.';
+  } else {
+    var helpText = 'Drag blocks into the workspace to pre-load them in your '
+        + 'custom workspace.'
+  }
+  document.getElementById('editHelpText').textContent = helpText;
+};
+
+/**
+ * Sets the basic options that are not dependent on if there are categories
+ * or a single flyout of blocks. Updates checkboxes and text fields.
+ */
+WorkspaceFactoryView.prototype.setBaseOptions = function() {
+  // Set basic options.
+  document.getElementById('option_css_checkbox').checked = true;
+  document.getElementById('option_maxBlocks_text').value = Infinity;
+  document.getElementById('option_media_text').value =
+      'https://blockly-demo.appspot.com/static/media/';
+  document.getElementById('option_readOnly_checkbox').checked = false;
+  document.getElementById('option_rtl_checkbox').checked = false;
+  document.getElementById('option_sounds_checkbox').checked = true;
+
+  // Uncheck grid and zoom options and hide suboptions.
+  document.getElementById('option_grid_checkbox').checked = false;
+  document.getElementById('grid_options').style.display = 'none';
+  document.getElementById('option_zoom_checkbox').checked = false;
+  document.getElementById('zoom_options').style.display = 'none';
+
+  // Set grid options.
+  document.getElementById('gridOption_spacing_text').value = 0;
+  document.getElementById('gridOption_length_text').value = 1;
+  document.getElementById('gridOption_colour_text').value = '#888';
+  document.getElementById('gridOption_snap_checkbox').checked = false;
+
+  // Set zoom options.
+  document.getElementById('zoomOption_controls_checkbox').checked = false;
+  document.getElementById('zoomOption_wheel_checkbox').checked = false;
+  document.getElementById('zoomOption_startScale_text').value = 1.0;
+  document.getElementById('zoomOption_maxScale_text').value = 3;
+  document.getElementById('zoomOption_minScale_text').value = 0.3;
+  document.getElementById('zoomOption_scaleSpeed_text').value = 1.2;
+};
+
+/**
+ * Updates category specific options depending on if there are categories
+ * currently present. Updates checkboxes and text fields in the view.
+ *
+ * @param {boolean} hasCategories True if categories are present, false if all
+ *    blocks are displayed in a single flyout.
+ */
+WorkspaceFactoryView.prototype.setCategoryOptions = function(hasCategories) {
+  document.getElementById('option_collapse_checkbox').checked = hasCategories;
+  document.getElementById('option_comments_checkbox').checked = hasCategories;
+  document.getElementById('option_disable_checkbox').checked = hasCategories;
+  document.getElementById('option_scrollbars_checkbox').checked = hasCategories;
+  document.getElementById('option_trashcan_checkbox').checked = hasCategories;
+}

demos/code/code.js

@@ -42,6 +42,7 @@ Code.LANGUAGE_NAME = {
   'el': 'Ελληνικά',
   'en': 'English',
   'es': 'Español',
+  'et': 'Eesti',
   'fa': 'فارسی',
   'fr': 'Français',
   'he': 'עברית',

demos/code/index.html

@@ -148,13 +148,6 @@
           </shadow>
         </value>
       </block>
-      <block type="math_change">
-        <value name="DELTA">
-          <shadow type="math_number">
-            <field name="NUM">1</field>
-          </shadow>
-        </value>
-      </block>
       <block type="math_round">
         <value name="NUM">
           <shadow type="math_number">

demos/code/msg/et.js

@@ -0,0 +1,24 @@
+var MSG = {
+  title: "Kood",
+  blocks: "Plokid",
+  linkTooltip: "Salvesta ja tekita link plokkidele.",
+  runTooltip: "Käivita töölaual olevate plokkidega defineeritud programm.",
+  badCode: "Viga programmis:\n%1",
+  timeout: "Käivitatavate iteratsioonide maksimaalne arv on ületatud.",
+  trashTooltip: "Eemalda kõik plokid.",
+  catLogic: "Loogika",
+  catLoops: "Kordus",
+  catMath: "Matemaatika",
+  catText: "Tekst",
+  catLists: "Loendid",
+  catColour: "Värv",
+  catVariables: "Muutujad",
+  catFunctions: "Funktsioonid",
+  listVariable: "loend",
+  textVariable: "tekst",
+  httpRequestError: "Probleem päringuga.",
+  linkAlert: "Oma plokke saad jagada selle lingiga:\n\n%1",
+  hashError: "Vabandust, kuid '%1' ei vasta ühelegi salvestatud programmile.",
+  xmlError: "Su salvestatud faili ei õnnestunud laadida. Võibolla on see loodud mõne teise Blockly versiooniga?",
+  badXml: "Viga XML-i parsimisel:\n%1\n\nTehtud muudatustest loobumiseks vajuta 'OK', XML-i muudatuste tegemise jätkamiseks 'Katkesta'."
+};

demos/plane/generated/et.js

@@ -0,0 +1,37 @@
+// This file was automatically generated from template.soy.
+// Please don't edit this file by hand.
+
+if (typeof planepage == 'undefined') { var planepage = {}; }
+
+
+planepage.messages = function(opt_data, opt_ignored, opt_ijData) {
+  return '<div style="display: none"><span id="Plane_rows">Ridu: %1</span><span id="Plane_getRows">rows (%1)</span><span id="Plane_rows1">1. klassi ridu: %1</span><span id="Plane_getRows1">1. klassi ridu (%1)</span><span id="Plane_rows2">2. klassi ridu: %1</span><span id="Plane_getRows2">2. klassi ridu (%1)</span><span id="Plane_seats">Istmeid: %1</span><span id="Plane_placeholder">?</span><span id="Plane_setSeats">istmete arv =</span></div>';
+};
+
+
+planepage.start = function(opt_data, opt_ignored, opt_ijData) {
+  var output = planepage.messages(null, null, opt_ijData) + '<table width="100%"><tr><td><h1><a href="https://developers.google.com/blockly/">Blockly</a>&rlm; &gt; <a href="../index.html">Demos</a>&rlm; &gt; <span id="title">Lennukiistmete kalkulaator</span> &nbsp; ';
+  var iLimit37 = opt_ijData.maxLevel + 1;
+  for (var i37 = 1; i37 < iLimit37; i37++) {
+    output += ' ' + ((i37 == opt_ijData.level) ? '<span class="tab" id="selected">' + soy.$$escapeHtml(i37) + '</span>' : (i37 < opt_ijData.level) ? '<a class="tab previous" href="?lang=' + soy.$$escapeHtml(opt_ijData.lang) + '&level=' + soy.$$escapeHtml(i37) + '">' + soy.$$escapeHtml(i37) + '</a>' : '<a class="tab" href="?lang=' + soy.$$escapeHtml(opt_ijData.lang) + '&level=' + soy.$$escapeHtml(i37) + '">' + soy.$$escapeHtml(i37) + '</a>');
+  }
+  output += '</h1></td><td class="farSide"><span ' + ((opt_ijData.lang == 'en') ? 'id="languageBorder"' : '') + ' style="padding: 10px"><select id="languageMenu"></select></span></td></tr></table><script src="slider.js"><\/script><svg id="plane" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="600" height="320" viewBox="0 110 600 320"><defs><g id="row1st"><rect class="seat1st" width="10" height="10" x="75" y="243" /><rect class="seat1st" width="10" height="10" x="75" y="254" /><rect class="seat1st" width="10" height="10" x="75" y="272" /><rect class="seat1st" width="10" height="10" x="75" y="283" /></g><g id="row2nd"><rect class="seat2nd" width="10" height="8" x="75" y="243" /><rect class="seat2nd" width="10" height="8" x="75" y="251" /><rect class="seat2nd" width="10" height="8" x="75" y="269" /><rect class="seat2nd" width="10" height="8" x="75" y="277" /><rect class="seat2nd" width="10" height="8" x="75" y="285" /></g><linearGradient id="grad1" x1="0%" y1="100%" x2="0%" y2="0%"><stop offset="0%" style="stop-color:#fff;stop-opacity:0" /><stop offset="100%" style="stop-color:#fff;stop-opacity:1" /></linearGradient><linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:#fff;stop-opacity:0" /><stop offset="100%" style="stop-color:#fff;stop-opacity:1" /></linearGradient></defs><path d="m 214,270 l 159,-254 31,-16 -74,189 0,162 74,189 -31,16 z" id="wing" /><path d="m 577,270 22,-93 -27,6 -44,88 44,88 27,6 z" id="tail" /><path d="m 577,270 l -94,24 h -407 c -38,0 -75,-13 -75,-26 c 0,-13 38,-26 75,-26 h 407 z" id="fuselage" /><rect width="610" height="100" x="-5" y="110" fill="url(#grad1)" /><rect width="610" height="100" x="-5" y="330" fill="url(#grad2)" /><text id="row1stText" x="55" y="380"></text><text id="row2ndText" x="55" y="420"></text><text x="55" y="210"><tspan id="seatText"></tspan><tspan id="seatYes" style="fill: #0c0;" dy="10">&#x2713;</tspan><tspan id="seatNo" style="fill: #f00;" dy="10">&#x2717;</tspan></text>' + ((opt_ijData.level > 1) ? '<rect id="crew_right" class="crew" width="10" height="10" x="35" y="254" /><rect id="crew_left" class="crew" width="10" height="10" x="35" y="272" />' : '') + '</svg><p>';
+  switch (opt_ijData.level) {
+    case 1:
+      output += 'Lennukis on reisijate istmed mitmes reas. Igas reas on neli istet.';
+      break;
+    case 2:
+      output += 'Lennuki kokpitis on kaks istet (üks kummalegi piloodile) ja mingi arv istemridu reisijatele. Igas reas on neli istet.';
+      break;
+    case 3:
+      output += 'Lennuki kokpitis on kaks istet (üks kummalegi piloodile), mingi arv ridu 1. klassi reisijatele ja mingi arv ridu 2. klassi reisijatele. Igas 1. klassi reas on neli istet, igas 2. klassi reas viis istet.';
+      break;
+  }
+  output += '</p><p>Ehita plokkidest valem, mis arvutab istmete arvu lennukis õigesti sõltumata ridade arvust (seda saad muuta lennuki juures oleva liuguriga).</p><script src="../../blockly_compressed.js"><\/script><script src="../../blocks_compressed.js"><\/script><script src="../../javascript_compressed.js"><\/script><script src="../../msg/js/' + soy.$$escapeHtml(opt_ijData.lang) + '.js"><\/script><script src="blocks.js"><\/script>' + planepage.toolbox(null, null, opt_ijData) + '<div id="blockly"></div>';
+  return output;
+};
+
+
+planepage.toolbox = function(opt_data, opt_ignored, opt_ijData) {
+  return '<xml id="toolbox" style="display: none"><block type="math_number"></block><block type="math_arithmetic"><value name="A"><shadow type="math_number"><field name="NUM">1</field></shadow></value><value name="B"><shadow type="math_number"><field name="NUM">1</field></shadow></value></block><block type="math_arithmetic"><field name="OP">MULTIPLY</field><value name="A"><shadow type="math_number"><field name="NUM">1</field></shadow></value><value name="B"><shadow type="math_number"><field name="NUM">1</field></shadow></value></block>' + ((opt_ijData.level <= 2) ? '<block type="plane_get_rows"></block>' : '<block type="plane_get_rows1st"></block><block type="plane_get_rows2nd"></block>') + '</xml>';
+};

demos/plane/style.css

@@ -28,20 +28,13 @@ html[dir="RTL"] .farSide {
 #languageBorder {
   border-radius: 4px;
   animation: pulse 2s ease-in-out forwards;
-  -webkit-animation: pulse 2s ease-in-out forwards;
   animation-delay: 2s;
-  -webkit-animation-delay: 2s;
 }
 @keyframes pulse {
     0% { background-color: #fff }
     50% { background-color: #f00 }
     100% { background-color: #fff }
 }
-@-webkit-keyframes pulse {
-    0% { background-color: #fff }
-    50% { background-color: #f00 }
-    100% { background-color: #fff }
-}
 
 #blockly {
   height: 300px;

demos/plane/xlf/translated_msgs_et.xlf

@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+  <file original="SoyMsgBundle" datatype="x-soy-msg-bundle" source-language="en" target-language="en">
+    <body>
+      <trans-unit id="286555642257111053" datatype="html">
+        <source>Rows: %1</source>
+        <target>Ridu: %1</target>
+      </trans-unit>
+      <trans-unit id="990695256953568910" datatype="html">
+        <source>seats =</source>
+        <target>istmete arv =</target>
+      </trans-unit>
+      <trans-unit id="1327005465775917626" datatype="html">
+        <source>An airplane has two seats in the flight deck (for the pilot and co-pilot), and a number of rows of 1st class and 2nd class passenger seats.  Each 1st class row contains four seats. Each 2nd class row contains five seats.</source>
+        <target>Lennuki kokpitis on kaks istet (üks kummalegi piloodile), mingi arv ridu 1. klassi reisijatele ja mingi arv ridu 2. klassi reisijatele. Igas 1. klassi reas on neli istet, igas 2. klassi reas viis istet.</target>
+      </trans-unit>
+      <trans-unit id="1649099567159388799" datatype="html">
+        <source>?</source>
+        <target>?</target>
+      </trans-unit>
+      <trans-unit id="3872872459414039837" datatype="html">
+        <source>Build a formula (below) that calculates the total number of seats on the airplane as the rows are changed (above).</source>
+        <target>Ehita plokkidest valem, mis arvutab istmete arvu lennukis õigesti sõltumata ridade arvust (seda saad muuta lennuki juures oleva liuguriga).</target>
+      </trans-unit>
+      <trans-unit id="4755413400587385256" datatype="html">
+        <source>An airplane has two seats in the flight deck (for the pilot and co-pilot), and a number of rows of passenger seats.  Each row contains four seats.</source>
+        <target>Lennuki kokpitis on kaks istet (üks kummalegi piloodile) ja mingi arv istemridu reisijatele. Igas reas on neli istet.</target>
+      </trans-unit>
+      <trans-unit id="5622822520334788359" datatype="html">
+        <source>1st class rows (%1)</source>
+        <target>1. klassi ridu (%1)</target>
+      </trans-unit>
+      <trans-unit id="6523489254328705062" datatype="html">
+        <source>2nd class rows: %1</source>
+        <target>2. klassi ridu: %1</target>
+      </trans-unit>
+      <trans-unit id="6636919311618748816" datatype="html">
+        <source>Seats: %1</source>
+        <target>Istmeid: %1</target>
+      </trans-unit>
+      <trans-unit id="6646116297668869388" datatype="html">
+        <source>Plane Seat Calculator</source>
+        <target>Lennukiistmete kalkulaator</target>
+      </trans-unit>
+      <trans-unit id="7030918043298347994" datatype="html">
+        <source>rows (%1)</source>
+        <target>rows (%1)</target>
+      </trans-unit>
+      <trans-unit id="7091637686507441682" datatype="html">
+        <source>1st class rows: %1</source>
+        <target>1. klassi ridu: %1</target>
+      </trans-unit>
+      <trans-unit id="7784699858027886282" datatype="html">
+        <source>An airplane has a number of rows of passenger seats.  Each row contains four seats.</source>
+        <target>Lennukis on reisijate istmed mitmes reas. Igas reas on neli istet.</target>
+      </trans-unit>
+      <trans-unit id="8347578891541780742" datatype="html">
+        <source>2nd class rows (%1)</source>
+        <target>2. klassi ridu (%1)</target>
+      </trans-unit>
+    </body>
+  </file>
+</xliff>

demos/resizable/overlay.html

@@ -87,6 +87,7 @@
     };
     window.addEventListener('resize', onresize, false);
     onresize();
+    Blockly.svgResize(workspace);
   </script>
 </body>
 </html>

demos/rtl/index.html

@@ -87,13 +87,6 @@
       <block type="math_trig"></block>
       <block type="math_constant"></block>
       <block type="math_number_property"></block>
-      <block type="math_change">
-        <value name="DELTA">
-          <block type="math_number">
-            <field name="NUM">1</field>
-          </block>
-        </value>
-      </block>
       <block type="math_round"></block>
       <block type="math_on_list"></block>
       <block type="math_modulo"></block>

demos/toolbox/index.html

@@ -84,13 +84,6 @@
       <block type="math_trig"></block>
       <block type="math_constant"></block>
       <block type="math_number_property"></block>
-      <block type="math_change">
-        <value name="DELTA">
-          <block type="math_number">
-            <field name="NUM">1</field>
-          </block>
-        </value>
-      </block>
       <block type="math_round"></block>
       <block type="math_on_list"></block>
       <block type="math_modulo"></block>

generators/dart.js

@@ -109,7 +109,7 @@ Blockly.Dart.init = function(workspace) {
   }
 
   var defvars = [];
-  var variables = Blockly.Variables.allVariables(workspace);
+  var variables = workspace.variableList;
   if (variables.length) {
     for (var i = 0; i < variables.length; i++) {
       defvars[i] = Blockly.Dart.variableDB_.getName(variables[i],

generators/javascript.js

@@ -159,7 +159,7 @@ Blockly.JavaScript.init = function(workspace) {
   }
 
   var defvars = [];
-  var variables = Blockly.Variables.allVariables(workspace);
+  var variables = workspace.variableList;
   if (variables.length) {
     for (var i = 0; i < variables.length; i++) {
       defvars[i] = Blockly.JavaScript.variableDB_.getName(variables[i],

generators/php/procedures.js

@@ -31,7 +31,7 @@ goog.require('Blockly.PHP');
 Blockly.PHP['procedures_defreturn'] = function(block) {
   // Define a procedure with a return value.
   // First, add a 'global' statement for every variable that is assigned.
-  var globals = Blockly.Variables.allVariables(block);
+  var globals = block.workspace.variableList;
   for (var i = globals.length - 1; i >= 0; i--) {
       var varName = globals[i];
       if (block.arguments_.indexOf(varName) == -1) {

generators/python.js

@@ -146,7 +146,7 @@ Blockly.Python.init = function(workspace) {
   }
 
   var defvars = [];
-  var variables = Blockly.Variables.allVariables(workspace);
+  var variables = workspace.variableList;
   for (var i = 0; i < variables.length; i++) {
     defvars[i] = Blockly.Python.variableDB_.getName(variables[i],
         Blockly.Variables.NAME_TYPE) + ' = None';

generators/python/procedures.js

@@ -32,7 +32,7 @@ goog.require('Blockly.Python');
 Blockly.Python['procedures_defreturn'] = function(block) {
   // Define a procedure with a return value.
   // First, add a 'global' statement for every variable that is assigned.
-  var globals = Blockly.Variables.allVariables(block);
+  var globals = block.workspace.variableList;
   for (var i = globals.length - 1; i >= 0; i--) {
     var varName = globals[i];
     if (block.arguments_.indexOf(varName) == -1) {

javascript_compressed.js

@@ -9,8 +9,8 @@ Blockly.JavaScript.ORDER_DIVISION=5.1;Blockly.JavaScript.ORDER_MULTIPLICATION=5.
 Blockly.JavaScript.ORDER_LOGICAL_AND=13;Blockly.JavaScript.ORDER_LOGICAL_OR=14;Blockly.JavaScript.ORDER_CONDITIONAL=15;Blockly.JavaScript.ORDER_ASSIGNMENT=16;Blockly.JavaScript.ORDER_COMMA=17;Blockly.JavaScript.ORDER_NONE=99;
 Blockly.JavaScript.ORDER_OVERRIDES=[[Blockly.JavaScript.ORDER_FUNCTION_CALL,Blockly.JavaScript.ORDER_MEMBER],[Blockly.JavaScript.ORDER_FUNCTION_CALL,Blockly.JavaScript.ORDER_FUNCTION_CALL],[Blockly.JavaScript.ORDER_MEMBER,Blockly.JavaScript.ORDER_MEMBER],[Blockly.JavaScript.ORDER_MEMBER,Blockly.JavaScript.ORDER_FUNCTION_CALL],[Blockly.JavaScript.ORDER_LOGICAL_NOT,Blockly.JavaScript.ORDER_LOGICAL_NOT],[Blockly.JavaScript.ORDER_MULTIPLICATION,Blockly.JavaScript.ORDER_MULTIPLICATION],[Blockly.JavaScript.ORDER_ADDITION,
 Blockly.JavaScript.ORDER_ADDITION],[Blockly.JavaScript.ORDER_LOGICAL_AND,Blockly.JavaScript.ORDER_LOGICAL_AND],[Blockly.JavaScript.ORDER_LOGICAL_OR,Blockly.JavaScript.ORDER_LOGICAL_OR]];Blockly.JavaScript.ONE_BASED_INDEXING=!0;
-Blockly.JavaScript.init=function(a){Blockly.JavaScript.definitions_=Object.create(null);Blockly.JavaScript.functionNames_=Object.create(null);Blockly.JavaScript.variableDB_?Blockly.JavaScript.variableDB_.reset():Blockly.JavaScript.variableDB_=new Blockly.Names(Blockly.JavaScript.RESERVED_WORDS_);var b=[];a=Blockly.Variables.allVariables(a);if(a.length){for(var c=0;c<a.length;c++)b[c]=Blockly.JavaScript.variableDB_.getName(a[c],Blockly.Variables.NAME_TYPE);Blockly.JavaScript.definitions_.variables=
+Blockly.JavaScript.init=function(a){Blockly.JavaScript.definitions_=Object.create(null);Blockly.JavaScript.functionNames_=Object.create(null);Blockly.JavaScript.variableDB_?Blockly.JavaScript.variableDB_.reset():Blockly.JavaScript.variableDB_=new Blockly.Names(Blockly.JavaScript.RESERVED_WORDS_);var b=[];a=a.variableList;if(a.length){for(var c=0;c<a.length;c++)b[c]=Blockly.JavaScript.variableDB_.getName(a[c],Blockly.Variables.NAME_TYPE);Blockly.JavaScript.definitions_.variables="var "+b.join(", ")+
-"var "+b.join(", ")+";"}};Blockly.JavaScript.finish=function(a){var b=[],c;for(c in Blockly.JavaScript.definitions_)b.push(Blockly.JavaScript.definitions_[c]);delete Blockly.JavaScript.definitions_;delete Blockly.JavaScript.functionNames_;Blockly.JavaScript.variableDB_.reset();return b.join("\n\n")+"\n\n\n"+a};Blockly.JavaScript.scrubNakedValue=function(a){return a+";\n"};Blockly.JavaScript.quote_=function(a){a=a.replace(/\\/g,"\\\\").replace(/\n/g,"\\\n").replace(/'/g,"\\'");return"'"+a+"'"};
+";"}};Blockly.JavaScript.finish=function(a){var b=[],c;for(c in Blockly.JavaScript.definitions_)b.push(Blockly.JavaScript.definitions_[c]);delete Blockly.JavaScript.definitions_;delete Blockly.JavaScript.functionNames_;Blockly.JavaScript.variableDB_.reset();return b.join("\n\n")+"\n\n\n"+a};Blockly.JavaScript.scrubNakedValue=function(a){return a+";\n"};Blockly.JavaScript.quote_=function(a){a=a.replace(/\\/g,"\\\\").replace(/\n/g,"\\\n").replace(/'/g,"\\'");return"'"+a+"'"};
 Blockly.JavaScript.scrub_=function(a,b){var c="";if(!a.outputConnection||!a.outputConnection.targetConnection){var d=a.getCommentText();(d=Blockly.utils.wrap(d,Blockly.JavaScript.COMMENT_WRAP-3))&&(c=a.getProcedureDef?c+("/**\n"+Blockly.JavaScript.prefixLines(d+"\n"," * ")+" */\n"):c+Blockly.JavaScript.prefixLines(d+"\n","// "));for(var e=0;e<a.inputList.length;e++)a.inputList[e].type==Blockly.INPUT_VALUE&&(d=a.inputList[e].connection.targetBlock())&&(d=Blockly.JavaScript.allNestedComments(d))&&(c+=
 Blockly.JavaScript.prefixLines(d,"// "))}e=a.nextConnection&&a.nextConnection.targetBlock();e=Blockly.JavaScript.blockToCode(e);return c+b+e};
 Blockly.JavaScript.getAdjusted=function(a,b,c,d,e){c=c||0;e=e||Blockly.JavaScript.ORDER_NONE;Blockly.JavaScript.ONE_BASED_INDEXING&&c--;var f=Blockly.JavaScript.ONE_BASED_INDEXING?"1":"0";a=0<c?Blockly.JavaScript.valueToCode(a,b,Blockly.JavaScript.ORDER_ADDITION)||f:0>c?Blockly.JavaScript.valueToCode(a,b,Blockly.JavaScript.ORDER_SUBTRACTION)||f:d?Blockly.JavaScript.valueToCode(a,b,Blockly.JavaScript.ORDER_UNARY_NEGATION)||f:Blockly.JavaScript.valueToCode(a,b,e)||f;if(Blockly.isNumber(a))a=parseFloat(a)+

msg/js/ar.js

@@ -62,6 +62,8 @@ Blockly.Msg.CONTROLS_WHILEUNTIL_TOOLTIP_UNTIL = "بما ان القيمة خاط
 Blockly.Msg.CONTROLS_WHILEUNTIL_TOOLTIP_WHILE = "بما ان القيمة صحيحة, نفّذ بعض الأوامر.";
 Blockly.Msg.DELETE_ALL_BLOCKS = "حذف كل مناعات %1؟";
 Blockly.Msg.DELETE_BLOCK = "إحذف القطعة";
+Blockly.Msg.DELETE_VARIABLE = "Delete the '%1' variable";  // untranslated
+Blockly.Msg.DELETE_VARIABLE_CONFIRMATION = "Delete %1 uses of the '%2' variable?";  // untranslated
 Blockly.Msg.DELETE_X_BLOCKS = "إحذف قطع %1";
 Blockly.Msg.DISABLE_BLOCK = "عطّل القطعة";
 Blockly.Msg.DUPLICATE_BLOCK = "ادمج";
@@ -366,6 +368,7 @@ Blockly.Msg.VARIABLES_SET = "تعيين %1 إلى %2";
 Blockly.Msg.VARIABLES_SET_CREATE_GET = "انشئ 'احصل على %1'";
 Blockly.Msg.VARIABLES_SET_HELPURL = "https://github.com/google/blockly/wiki/Variables#set";  // untranslated
 Blockly.Msg.VARIABLES_SET_TOOLTIP = "تعيين هذا المتغير لتكون مساوية للقيمة المدخلة.";
+Blockly.Msg.VARIABLE_ALREADY_EXISTS = "A variable named '%1' already exists.";  // untranslated
 Blockly.Msg.PROCEDURES_DEFRETURN_TITLE = Blockly.Msg.PROCEDURES_DEFNORETURN_TITLE;
 Blockly.Msg.CONTROLS_IF_IF_TITLE_IF = Blockly.Msg.CONTROLS_IF_MSG_IF;
 Blockly.Msg.CONTROLS_WHILEUNTIL_INPUT_DO = Blockly.Msg.CONTROLS_REPEAT_INPUT_DO;

msg/js/az.js

@@ -62,6 +62,8 @@ Blockly.Msg.CONTROLS_WHILEUNTIL_TOOLTIP_UNTIL = "Hələ ki, qiymət \"yalan\"dı
 Blockly.Msg.CONTROLS_WHILEUNTIL_TOOLTIP_WHILE = "Hələ ki, qiymət \"doğru\"dur, bəzi əmrləri yerinə yetir.";
 Blockly.Msg.DELETE_ALL_BLOCKS = "Bütün %1 blok silinsin?";
 Blockly.Msg.DELETE_BLOCK = "Bloku sil";
+Blockly.Msg.DELETE_VARIABLE = "Delete the '%1' variable";  // untranslated
+Blockly.Msg.DELETE_VARIABLE_CONFIRMATION = "Delete %1 uses of the '%2' variable?";  // untranslated
 Blockly.Msg.DELETE_X_BLOCKS = "%1 bloku sil";
 Blockly.Msg.DISABLE_BLOCK = "Bloku söndür";
 Blockly.Msg.DUPLICATE_BLOCK = "Dublikat";
@@ -366,6 +368,7 @@ Blockly.Msg.VARIABLES_SET = "%1 - i bu qiymət ilə təyin et: %2";
 Blockly.Msg.VARIABLES_SET_CREATE_GET = "'%1 - i götür' - ü yarat";
 Blockly.Msg.VARIABLES_SET_HELPURL = "https://github.com/google/blockly/wiki/Variables#set";  // untranslated
 Blockly.Msg.VARIABLES_SET_TOOLTIP = "Bu dəyişəni daxil edilmiş qiymətə bərabər edir.";
+Blockly.Msg.VARIABLE_ALREADY_EXISTS = "A variable named '%1' already exists.";  // untranslated
 Blockly.Msg.PROCEDURES_DEFRETURN_TITLE = Blockly.Msg.PROCEDURES_DEFNORETURN_TITLE;
 Blockly.Msg.CONTROLS_IF_IF_TITLE_IF = Blockly.Msg.CONTROLS_IF_MSG_IF;
 Blockly.Msg.CONTROLS_WHILEUNTIL_INPUT_DO = Blockly.Msg.CONTROLS_REPEAT_INPUT_DO;

msg/js/ba.js

@@ -62,6 +62,8 @@ Blockly.Msg.CONTROLS_WHILEUNTIL_TOOLTIP_UNTIL = "Мәғәнә ялған бул
 Blockly.Msg.CONTROLS_WHILEUNTIL_TOOLTIP_WHILE = "Мәғәнә дөрөҫ булғанда, командаларҙы ҡабатлай.";
 Blockly.Msg.DELETE_ALL_BLOCKS = "Бөтә %1 блоктарҙы юйырғамы?";
 Blockly.Msg.DELETE_BLOCK = "Блокты юйҙырырға";
+Blockly.Msg.DELETE_VARIABLE = "Delete the '%1' variable";  // untranslated
+Blockly.Msg.DELETE_VARIABLE_CONFIRMATION = "Delete %1 uses of the '%2' variable?";  // untranslated
 Blockly.Msg.DELETE_X_BLOCKS = " %1 блокты юйҙырырға";
 Blockly.Msg.DISABLE_BLOCK = "Блокты һүндерергә";
 Blockly.Msg.DUPLICATE_BLOCK = "Күсереп алырға";
@@ -366,6 +368,7 @@ Blockly.Msg.VARIABLES_SET = "set %1 to %2";  // untranslated
 Blockly.Msg.VARIABLES_SET_CREATE_GET = "Create 'get %1'";  // untranslated
 Blockly.Msg.VARIABLES_SET_HELPURL = "https://github.com/google/blockly/wiki/Variables#set";  // untranslated
 Blockly.Msg.VARIABLES_SET_TOOLTIP = "Sets this variable to be equal to the input.";  // untranslated
+Blockly.Msg.VARIABLE_ALREADY_EXISTS = "A variable named '%1' already exists.";  // untranslated
 Blockly.Msg.PROCEDURES_DEFRETURN_TITLE = Blockly.Msg.PROCEDURES_DEFNORETURN_TITLE;
 Blockly.Msg.CONTROLS_IF_IF_TITLE_IF = Blockly.Msg.CONTROLS_IF_MSG_IF;
 Blockly.Msg.CONTROLS_WHILEUNTIL_INPUT_DO = Blockly.Msg.CONTROLS_REPEAT_INPUT_DO;

msg/js/bcc.js

@@ -62,6 +62,8 @@ Blockly.Msg.CONTROLS_WHILEUNTIL_TOOLTIP_UNTIL = "تا زمانی که یک مق
 Blockly.Msg.CONTROLS_WHILEUNTIL_TOOLTIP_WHILE = "تا زمانی که یک مقدار صحیح است، چند عبارت را انجام بده.";
 Blockly.Msg.DELETE_ALL_BLOCKS = "Delete all %1 blocks?";  // untranslated
 Blockly.Msg.DELETE_BLOCK = "حذف بلوک";
+Blockly.Msg.DELETE_VARIABLE = "Delete the '%1' variable";  // untranslated
+Blockly.Msg.DELETE_VARIABLE_CONFIRMATION = "Delete %1 uses of the '%2' variable?";  // untranslated
 Blockly.Msg.DELETE_X_BLOCKS = "حذف بلوک‌های %1";
 Blockly.Msg.DISABLE_BLOCK = "غیرفعال‌سازی بلوک";
 Blockly.Msg.DUPLICATE_BLOCK = "تکراری";
@@ -366,6 +368,7 @@ Blockly.Msg.VARIABLES_SET = "مجموعه %1 به %2";
 Blockly.Msg.VARIABLES_SET_CREATE_GET = "درست‌کردن «تنظیم %1»";
 Blockly.Msg.VARIABLES_SET_HELPURL = "https://github.com/google/blockly/wiki/Variables#set";  // untranslated
 Blockly.Msg.VARIABLES_SET_TOOLTIP = "متغیر برابر با خروجی را مشخص می‌کند.";
+Blockly.Msg.VARIABLE_ALREADY_EXISTS = "A variable named '%1' already exists.";  // untranslated
 Blockly.Msg.PROCEDURES_DEFRETURN_TITLE = Blockly.Msg.PROCEDURES_DEFNORETURN_TITLE;
 Blockly.Msg.CONTROLS_IF_IF_TITLE_IF = Blockly.Msg.CONTROLS_IF_MSG_IF;
 Blockly.Msg.CONTROLS_WHILEUNTIL_INPUT_DO = Blockly.Msg.CONTROLS_REPEAT_INPUT_DO;

msg/js/be-tarask.js

@@ -62,6 +62,8 @@ Blockly.Msg.CONTROLS_WHILEUNTIL_TOOLTIP_UNTIL = "Пакуль значэньне
 Blockly.Msg.CONTROLS_WHILEUNTIL_TOOLTIP_WHILE = "Пакуль значэньне ісьціна, выконваць пэўныя апэрацыі.";
 Blockly.Msg.DELETE_ALL_BLOCKS = "Выдаліць усе блёкі %1?";
 Blockly.Msg.DELETE_BLOCK = "Выдаліць блёк";
+Blockly.Msg.DELETE_VARIABLE = "Delete the '%1' variable";  // untranslated
+Blockly.Msg.DELETE_VARIABLE_CONFIRMATION = "Delete %1 uses of the '%2' variable?";  // untranslated
 Blockly.Msg.DELETE_X_BLOCKS = "Выдаліць %1 блёкі";
 Blockly.Msg.DISABLE_BLOCK = "Адключыць блёк";
 Blockly.Msg.DUPLICATE_BLOCK = "Капіяваць";
@@ -366,6 +368,7 @@ Blockly.Msg.VARIABLES_SET = "усталяваць %1 да %2";
 Blockly.Msg.VARIABLES_SET_CREATE_GET = "Стварыць блёк «атрымаць %1»";
 Blockly.Msg.VARIABLES_SET_HELPURL = "https://github.com/google/blockly/wiki/Variables#set";  // untranslated
 Blockly.Msg.VARIABLES_SET_TOOLTIP = "Надаць гэтай зьменнай значэньне ўстаўкі.";
+Blockly.Msg.VARIABLE_ALREADY_EXISTS = "A variable named '%1' already exists.";  // untranslated
 Blockly.Msg.PROCEDURES_DEFRETURN_TITLE = Blockly.Msg.PROCEDURES_DEFNORETURN_TITLE;
 Blockly.Msg.CONTROLS_IF_IF_TITLE_IF = Blockly.Msg.CONTROLS_IF_MSG_IF;
 Blockly.Msg.CONTROLS_WHILEUNTIL_INPUT_DO = Blockly.Msg.CONTROLS_REPEAT_INPUT_DO;

msg/js/bg.js

@@ -62,6 +62,8 @@ Blockly.Msg.CONTROLS_WHILEUNTIL_TOOLTIP_UNTIL = "Докато стойностт
 Blockly.Msg.CONTROLS_WHILEUNTIL_TOOLTIP_WHILE = "Докато стойността е истина, изпълнявай командите.";
 Blockly.Msg.DELETE_ALL_BLOCKS = "Изтриване на всички 1% блокове?";
 Blockly.Msg.DELETE_BLOCK = "Изтрий блок";
+Blockly.Msg.DELETE_VARIABLE = "Delete the '%1' variable";  // untranslated
+Blockly.Msg.DELETE_VARIABLE_CONFIRMATION = "Delete %1 uses of the '%2' variable?";  // untranslated
 Blockly.Msg.DELETE_X_BLOCKS = "Изтрий %1 блока";
 Blockly.Msg.DISABLE_BLOCK = "Деактивирай блок";
 Blockly.Msg.DUPLICATE_BLOCK = "Копирай";
@@ -366,6 +368,7 @@ Blockly.Msg.VARIABLES_SET = "нека %1 бъде %2";
 Blockly.Msg.VARIABLES_SET_CREATE_GET = "Създай \"вземи стойността на %1\"";
 Blockly.Msg.VARIABLES_SET_HELPURL = "https://github.com/google/blockly/wiki/Variables#set";  // untranslated
 Blockly.Msg.VARIABLES_SET_TOOLTIP = "Задава тази променлива да бъде равен на входа.";
+Blockly.Msg.VARIABLE_ALREADY_EXISTS = "A variable named '%1' already exists.";  // untranslated
 Blockly.Msg.PROCEDURES_DEFRETURN_TITLE = Blockly.Msg.PROCEDURES_DEFNORETURN_TITLE;
 Blockly.Msg.CONTROLS_IF_IF_TITLE_IF = Blockly.Msg.CONTROLS_IF_MSG_IF;
 Blockly.Msg.CONTROLS_WHILEUNTIL_INPUT_DO = Blockly.Msg.CONTROLS_REPEAT_INPUT_DO;

msg/js/bn.js

@@ -62,6 +62,8 @@ Blockly.Msg.CONTROLS_WHILEUNTIL_TOOLTIP_UNTIL = "While a value is false, then do
 Blockly.Msg.CONTROLS_WHILEUNTIL_TOOLTIP_WHILE = "While a value is true, then do some statements.";  // untranslated
 Blockly.Msg.DELETE_ALL_BLOCKS = "Delete all %1 blocks?";  // untranslated
 Blockly.Msg.DELETE_BLOCK = "ব্লকটি মুছে ফেল";
+Blockly.Msg.DELETE_VARIABLE = "Delete the '%1' variable";  // untranslated
+Blockly.Msg.DELETE_VARIABLE_CONFIRMATION = "Delete %1 uses of the '%2' variable?";  // untranslated
 Blockly.Msg.DELETE_X_BLOCKS = "%1 ব্লক অপসারণ কর";
 Blockly.Msg.DISABLE_BLOCK = "ব্লকটি বিকল কর";
 Blockly.Msg.DUPLICATE_BLOCK = "প্রতিলিপি";
@@ -366,6 +368,7 @@ Blockly.Msg.VARIABLES_SET = "set %1 to %2";  // untranslated
 Blockly.Msg.VARIABLES_SET_CREATE_GET = "'%1 নিন' তৈরি করুন";
 Blockly.Msg.VARIABLES_SET_HELPURL = "https://github.com/google/blockly/wiki/Variables#set";  // untranslated
 Blockly.Msg.VARIABLES_SET_TOOLTIP = "Sets this variable to be equal to the input.";  // untranslated
+Blockly.Msg.VARIABLE_ALREADY_EXISTS = "A variable named '%1' already exists.";  // untranslated
 Blockly.Msg.PROCEDURES_DEFRETURN_TITLE = Blockly.Msg.PROCEDURES_DEFNORETURN_TITLE;
 Blockly.Msg.CONTROLS_IF_IF_TITLE_IF = Blockly.Msg.CONTROLS_IF_MSG_IF;
 Blockly.Msg.CONTROLS_WHILEUNTIL_INPUT_DO = Blockly.Msg.CONTROLS_REPEAT_INPUT_DO;

msg/js/br.js

@@ -62,6 +62,8 @@ Blockly.Msg.CONTROLS_WHILEUNTIL_TOOLTIP_UNTIL = "Keit ha ma vez faos un dalvoude
 Blockly.Msg.CONTROLS_WHILEUNTIL_TOOLTIP_WHILE = "Keit ha ma vez gwir un dalvoudenn, seveniñ urzhioù zo neuze.";
 Blockly.Msg.DELETE_ALL_BLOCKS = "Diverkañ an holl vloc'hoù %1 ?";
 Blockly.Msg.DELETE_BLOCK = "Dilemel ar bloc'h";
+Blockly.Msg.DELETE_VARIABLE = "Delete the '%1' variable";  // untranslated
+Blockly.Msg.DELETE_VARIABLE_CONFIRMATION = "Delete %1 uses of the '%2' variable?";  // untranslated
 Blockly.Msg.DELETE_X_BLOCKS = "Dilemel %1 bloc'h";
 Blockly.Msg.DISABLE_BLOCK = "Diweredekaat ar bloc'h";
 Blockly.Msg.DUPLICATE_BLOCK = "Eiladuriñ";
@@ -366,6 +368,7 @@ Blockly.Msg.VARIABLES_SET = "termenañ %1 da %2";
 Blockly.Msg.VARIABLES_SET_CREATE_GET = "Krouiñ 'kaout %1'";
 Blockly.Msg.VARIABLES_SET_HELPURL = "https://github.com/google/blockly/wiki/Variables#set";  // untranslated
 Blockly.Msg.VARIABLES_SET_TOOLTIP = "Termenañ a ra argemm-mañ evit ma vo par da dalvoudenn ar moned.";
+Blockly.Msg.VARIABLE_ALREADY_EXISTS = "A variable named '%1' already exists.";  // untranslated
 Blockly.Msg.PROCEDURES_DEFRETURN_TITLE = Blockly.Msg.PROCEDURES_DEFNORETURN_TITLE;
 Blockly.Msg.CONTROLS_IF_IF_TITLE_IF = Blockly.Msg.CONTROLS_IF_MSG_IF;
 Blockly.Msg.CONTROLS_WHILEUNTIL_INPUT_DO = Blockly.Msg.CONTROLS_REPEAT_INPUT_DO;

msg/js/ca.js

@@ -62,6 +62,8 @@ Blockly.Msg.CONTROLS_WHILEUNTIL_TOOLTIP_UNTIL = "Mentre un valor sigui fals, lla
 Blockly.Msg.CONTROLS_WHILEUNTIL_TOOLTIP_WHILE = "Mentre un valor sigui cert, llavors executar unes sentències.";
 Blockly.Msg.DELETE_ALL_BLOCKS = "Esborrar els %1 blocs?";
 Blockly.Msg.DELETE_BLOCK = "Esborra bloc";
+Blockly.Msg.DELETE_VARIABLE = "Delete the '%1' variable";  // untranslated
+Blockly.Msg.DELETE_VARIABLE_CONFIRMATION = "Delete %1 uses of the '%2' variable?";  // untranslated
 Blockly.Msg.DELETE_X_BLOCKS = "Esborra %1 blocs";
 Blockly.Msg.DISABLE_BLOCK = "Desactiva bloc";
 Blockly.Msg.DUPLICATE_BLOCK = "Duplica";
@@ -366,6 +368,7 @@ Blockly.Msg.VARIABLES_SET = "modifica %1 a %2";
 Blockly.Msg.VARIABLES_SET_CREATE_GET = "Crear 'recupera %1'";
 Blockly.Msg.VARIABLES_SET_HELPURL = "https://github.com/google/blockly/wiki/Variables#set";  // untranslated
 Blockly.Msg.VARIABLES_SET_TOOLTIP = "Modifica aquesta variable al valor introduït.";
+Blockly.Msg.VARIABLE_ALREADY_EXISTS = "A variable named '%1' already exists.";  // untranslated
 Blockly.Msg.PROCEDURES_DEFRETURN_TITLE = Blockly.Msg.PROCEDURES_DEFNORETURN_TITLE;
 Blockly.Msg.CONTROLS_IF_IF_TITLE_IF = Blockly.Msg.CONTROLS_IF_MSG_IF;
 Blockly.Msg.CONTROLS_WHILEUNTIL_INPUT_DO = Blockly.Msg.CONTROLS_REPEAT_INPUT_DO;