update ICP

.gitignore

@@ -0,0 +1,38 @@
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
+node_modules
+
+# webpack
+public/assets
+locales
+
+# local configuration file
+configs/general.json
+
+public
+server
+build

LICENSE

@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 Fred Chien
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

README.md

@@ -0,0 +1,9 @@
+# Lantern
+
+An isomorphic web application with modern technologies which can be used to create your project.
+
+ - [Materialize](http://materializecss.com/)
+ - [Material icon](http://google.github.io/material-design-icons/#icon-images-for-the-web)
+ - [Awesome react](https://github.com/enaqx/awesome-react)
+ - [React components](http://react-components.com)
+ - [React DnD](http://gaearon.github.io/react-dnd/)

app.js

@@ -0,0 +1,161 @@
+var path = require('path');
+var koa = require('koa');
+var Router = require('koa-router');
+var bodyParser = require('koa-bodyparser');
+var views = require('koa-views');
+var serve = require('koa-static');
+var session = require('koa-session');
+var passport = require('koa-passport');
+var co = require('co');
+
+// React
+var ReactApp = require('./build/server.js');
+
+// Loading settings
+var settings = require('./lib/config.js');
+if (!settings) {
+	console.error('Failed to load settings');
+	process.exit(1);
+}
+
+// Libraries
+var Utils = require('./lib/utils');
+//var Mailer = require('./lib/mailer');
+//var Database = require('./lib/database');
+var Passport = require('./lib/passport');
+
+var app = koa();
+
+// Static file path
+app.use(serve(path.join(__dirname, 'public')));
+
+// Enabling BODY
+app.use(bodyParser());
+
+
+// Initializing authenication
+Passport.init(passport);
+Passport.local(passport);
+
+// Setup 3rd-party authorization
+if (settings.general.authorization.github.enabled)
+	Passport.github(passport);
+
+if (settings.general.authorization.facebook.enabled)
+	Passport.facebook(passport);
+
+if (settings.general.authorization.google.enabled)
+	Passport.google(passport);
+
+if (settings.general.authorization.linkedin.enabled)
+	Passport.linkedin(passport);
+
+app.use(passport.initialize());
+app.use(passport.session());
+
+// Create render
+app.use(views(__dirname + '/views', {
+	ext: 'jade',
+	map: {
+		html: 'jade'
+	}
+}));
+
+// Initializing session mechanism
+app.keys = settings.general.session.keys || [];
+app.use(session(app));
+
+// Initializing locals to make template be able to get
+app.use(function *(next) {
+	this.state.user = this.req.user || undefined;
+	yield next;
+});
+
+// Routes
+app.use(require('./routes/codebender').middleware());
+/*
+app.use(require('./routes/auth').middleware());
+app.use(require('./routes/user').middleware());
+app.use(require('./routes/admin/dashboard').middleware());
+app.use(require('./routes/admin/users').middleware());
+*/
+co(function *() {
+
+	// Initializing APIs
+//	yield Mailer.init();
+//	yield Database.init();
+
+	// Initializing routes for front-end rendering
+	var router = new Router();
+	for (var index in ReactApp.routes) {
+		var route = ReactApp.routes[index];
+
+		// NotFound Page
+		if (!route.path) {
+			app.use(function *pageNotFound(next) {
+
+				// Be the last handler
+				yield next;
+
+				if (this.status != 404)
+					return;
+
+				if (this.json || this.body || !this.idempotent)
+					return;
+
+				// Rendering
+				var page = yield ReactApp.render(this.request.path);
+				yield this.render('index', {
+					title: settings.general.service.name,
+					content: page.content,
+					state: page.state
+				});
+
+				// Do not trigger koa's 404 handling
+				this.message = null;
+			});
+			continue;
+		}
+
+		// Redirect
+		if (route.redirect) {
+			(function(route) {
+				router.get(route.path, function *() {
+					this.redirect(route.redirect);
+				});
+			})(route);
+			continue;
+		}
+
+		// Register path for pages
+		router.get(route.path, function *() {
+
+			// It must create a new instance for rending react page asynchronously
+			delete require.cache[require.resolve('./build/server.js')];
+			var ReactApp = require('./build/server.js');
+			ReactApp.init({
+				externalUrl: Utils.getExternalUrl(),
+				cookie: this.req.headers.cookie
+			});
+
+			// Reset initial state with session for new page
+			var curState = {
+				User: this.state.user || {}
+			};
+			curState.User.logined = this.isAuthenticated();
+
+			// Rendering page and pass state to client-side
+			var page = yield ReactApp.render(this.request.path, curState);
+			yield this.render('index', {
+				title: settings.general.service.name,
+				content: page.content,
+				state: page.state
+			});
+		});
+	}
+	app.use(router.middleware());
+
+	app.listen(settings.general.server.port, function() {
+		console.log('server is ready');
+	});
+});

configs/general.json.default

@@ -0,0 +1,52 @@
+{
+	"service": {
+		"name": "Genuino",
+		"external_url": "http://localhost:3001"
+	},
+	"server": {
+		"port": 3001
+	},
+	"mailer": {
+		"service": "Gmail",
+		"auth": {
+			"user": "youruser@gmail.com",
+			"clientId": "1062945721841-gv9knqff750pt1jfdnlnppqp18i8df68.apps.googleusercontent.com",
+			"clientSecret": "BBcspOhl_prNwcxOQtEKVtbe",
+			"refreshToken": "1/rvU5OkrToA7AujYucB9dagEHT4KoBbiXzP31aaJWweVIgOrJDtdun6zK6XiATCKT"
+		},
+		"sender": {
+			"name": "Genuino Service",
+			"address": "service@yourdomain.com"
+		}
+	},
+	"session": {
+		"keys": [
+			"YOUneverKnowWhoYOUaRe1234567890"
+		]
+	},
+	"database": {
+		"uri": "mongodb://localhost:27017/genuino"
+	},
+	"authorization": {
+		"github": {
+			"enabled": true,
+			"clientID": "f338ce33075757bfa59e",
+			"clientSecret": "571c81750b388c6233ffe060e491f822e617b402"
+		},
+		"facebook": {
+			"enabled": true,
+			"clientID": "511679122323080",
+			"clientSecret": "ffec2c1f7ea4b0e32ff31af0d0e275d6"
+		},
+		"google": {
+			"enabled": true,
+			"clientID": "1062945721841-5hm41ltvoahmepdi822v40iue8hufgeq.apps.googleusercontent.com",
+			"clientSecret": "y_QDeNpKoQS-P2u8SegRGiXE"
+		},
+		"linkedin": {
+			"enabled": true,
+			"clientID": "757uag6nqoq4r8",
+			"clientSecret": "0nx4svG7uesLlPai"
+		}
+	}
+}

data/modules.json

@@ -0,0 +1,12 @@
+[
+  {
+    "sku": "101020037",
+	"cname": "馬達",
+	"ename": "Motor",
+	"color": 1,
+    "types": 1,
+	"slots": [ "D2", "D3" ],
+    "desc": "A Motor",
+	"func": "DigitalWrite($slot)"
+  }
+]

lib/config.js

@@ -0,0 +1,14 @@
+var path = require('path');
+var fs = require('fs');
+var settings = {};
+
+try {
+	var data = fs.readFileSync(path.join(__dirname, '..', 'configs', 'general.json'));
+	settings.general = JSON.parse(data);
+} catch(e) {
+	console.warn('[warning]', 'No configuration file exists, using default settings.');
+	var data = fs.readFileSync(path.join(__dirname, '..', 'configs', 'general.json.default'));
+	settings.general = JSON.parse(data);
+}
+
+module.exports = settings;

lib/database.js

@@ -0,0 +1,16 @@
+var settings = require('./config');
+var mongoose = require('mongoose');
+
+module.exports = {
+	init: function() {
+
+		return function(done) {
+
+			mongoose.connect(settings.general.database.uri);
+			var db = mongoose.connection;
+			db.once('open', function() {
+				done();
+			});
+		};
+	}
+};

lib/mailer.js

@@ -0,0 +1,61 @@
+var settings = require('./config');
+var nodemailer = require('nodemailer');
+var smtpPool = require('nodemailer-smtp-pool');
+
+var transporter;
+
+var Mailer = module.exports = {
+	init: function() {
+
+		return function(done) {
+
+			if (settings.general.mailer.service == 'Gmail') {
+
+				// Initializing XOAuth2
+				var generator = require('xoauth2')
+					.createXOAuth2Generator(settings.general.mailer.auth);
+
+				// Create a pool of connections
+				var pool = smtpPool({
+					service: settings.general.mailer.service,
+					auth: {
+						xoauth2: generator
+					}
+				});
+
+				// Create a transport
+				transporter = nodemailer.createTransport(pool);
+
+				done();
+				return;
+			}
+
+			// Create a pool of connections for specific mail service
+			var pool = smtpPool({
+				service: settings.general.mailer.service,
+				auth: settings.general.mailer.auth
+			});
+
+			// Create a transport
+			transporter = nodemailer.createTransport(pool);
+
+			done();
+		};
+	},
+	sendMail: function(msg) {
+
+		return function(done) {
+
+			transporter.sendMail(msg, done);
+		};
+	},
+	sendMailFromService: function(to, subject, html) {
+
+		return Mailer.sendMail({
+			from: settings.general.mailer.sender.name + ' <' + settings.general.mailer.sender.address + '>',
+			to: to,
+			subject: subject,
+			html: html
+		});
+	}
+};

lib/member.js

@@ -0,0 +1,370 @@
+var crypto = require('crypto');
+var mongoose = require('mongoose');
+var Member = require('../models/member');
+var settings = require('./config');
+var utils = require('./utils');
+
+module.exports = {
+	create: function(member) {
+		return function(done) {
+			var _member = new Member({
+				name: member.name,
+				email: member.email,
+				phone: member.phone,
+				gender: member.gender,
+				idno: member.idno,
+				salt: utils.generateSalt(),
+				birthday: member.birthday,
+				cardno: member.cardno,
+				tokens: member.tokens
+			});
+
+			if (member.password) {
+				// Encrypt plain password
+				_member.password = utils.encryptPassword(_member.salt, member.password);
+			} else {
+				_member.password = '';
+			}
+
+			_member.save(function(err) {
+				done(err, _member);
+			});
+		};
+	},
+	getMember: function(id) {
+		return function(done) {
+			Member.findOne({ _id: id }, function(err, member) {
+				if (err)
+					return done(err);
+
+				if (!member)
+					return done();
+
+				return done(null, member);
+			});
+		};
+	},
+	getMemberByEmail: function(email) {
+		return function(done) {
+			Member.findOne({ email: email}, function(err, member) {
+				if (err)
+					return done(err);
+
+				if (!member)
+					return done();
+
+				return done(null, member);
+			});
+		};
+	},
+	deleteMembers: function(ids) {
+		return function(done) {
+			Member.remove({
+				_id: {
+					$in: ids
+				}
+			}, function(err) {
+				done(err);
+			});
+		};
+	},
+	insert: function(members) {
+		return function(done) {
+
+			Member.collection.insert(members, done);
+		};
+	},
+	updateByEmail: function(email, member, opts) {
+		
+		return function(done) {
+
+			// Update time
+			member.updated = Date.now();
+
+			Member.update({ email: email }, member, opts, done);
+		};
+	},
+	changePassword: function(id, password) {
+		return function(done) {
+
+			// Generate a new salt for encryption
+			var salt = utils.generateSalt();
+			var newPassword = utils.encryptPassword(salt, password);
+
+			// Update password
+			Member.findOneAndUpdate({ _id: id }, {
+				salt: salt,
+				password: newPassword,
+				updated: Date.now()
+			}, { new: true }, function(err, member) {
+
+				if (err)
+					return done(err);
+
+				done(null, member ? true : false);
+			});
+		};
+	},
+	changePasswordWithToken: function(id, token, password) {
+		return function(done) {
+
+			// Generate a new salt for encryption
+			var salt = utils.generateSalt();
+			var newPassword = utils.encryptPassword(salt, password);
+
+			// TODO: Should check expired time of token
+			// Update password
+			Member.findOneAndUpdate({
+				_id: id,
+				'rule_tokens.name': 'reset_password'
+			}, {
+				$pull: {
+					rule_tokens: {
+						name: 'reset_password'
+					}
+				},
+				salt: salt,
+				password: newPassword,
+				updated: Date.now()
+			}, { new: true }, function(err, member) {
+
+				if (err)
+					return done(err);
+
+				done(null, member ? true : false);
+			});
+		};
+	},
+	checkCard: function(token) {
+		return function(done) {
+
+			Member.findOne({ tokens: token }, function(err, member) {
+				if (err)
+					return done(err);
+
+				if (!member)
+					return done(new Error('Not Found'));
+
+				return done(null, member);
+			});
+		};
+	},
+	authorizeMember: function(username, password) {
+		return function(done) {
+
+			Member.findOne({ email: username }, function(err, member) {
+				if (err)
+					return done(err);
+
+				// Found nothing
+				if (!member)
+					return done();
+
+				// First time to login
+				if (!member.password) {
+
+					// Using phone to be password
+					if (member.phone == password)
+						return done(null, member);
+					else
+						return done();
+				}
+
+				// Check password
+				if (utils.encryptPassword(member.salt, password) == member.password)
+					return done(null, member);
+				else
+					return done();
+			});
+		};
+	},
+	save: function(id, member) {
+
+		return function(done) {
+			var updated = Date.now();
+
+			var m = {
+				name: member.name || undefined,
+				email: member.email || undefined,
+				phone: member.phone || undefined,
+				gender: member.gender || undefined,
+				idno: member.idno || undefined,
+				birthday: member.birthday || undefined,
+				tokens: member.tokens || undefined,
+				updated: updated
+			};
+
+			// Remove fields which is unset
+			for (var key in m) {
+				if (m[key] == undefined)
+					delete m[key];
+			}
+
+			Member.findOneAndUpdate({ _id: id }, m, { new: true }, function(err, _member) {
+
+				if (err)
+					return done(err);
+
+				done(null, _member);
+			});
+		};
+	},
+	count: function() {
+		return function(done) {
+			Member.count({}, done);
+		};
+	},
+	list: function() {
+
+		var conditions = {};
+		var columns;
+		var opts = {};
+		if (arguments.length == 3) {
+			conditions = arguments[0];
+			columns = arguments[1];
+			opts = arguments[2];
+		} else if (arguments.length == 2) {
+			if (arguments[0] instanceof Array) {
+				columns = arguments[0];
+				opts = arguments[1];
+			} else if (arguments[1] instanceof Array) {
+				conditions = arguments[0];
+				columns = arguments[1];
+			} else {
+				conditions = arguments[0];
+				opts = arguments[1];
+			}
+		} else if (arguments.length == 1) {
+			columns = null;
+			opts = arguments[0];
+		}
+
+		return function(done) {
+
+			var cols = null;
+			if (columns)
+				cols = columns.join(' ');
+
+			Member.count(conditions, function(err, count) {
+				if (err) {
+					done(err);
+					return;
+				}
+
+				if (!count) {
+					done(err, { count: 0 });
+					return;
+				}
+
+				Member.find(conditions, cols, opts, function(err, members) {
+
+					done(err, {
+						count: count,
+						members: members
+					});
+				});
+			});
+		};
+	},
+	setupRuleToken: function(id, name, expired) {
+
+		return function(done) {
+
+			var token = utils.generateToken();
+
+			// Remove old token
+			Member.findOneAndUpdate({
+				_id: id,
+				'rule_tokens.name': name
+			}, {
+				$pull: {
+					'rule_tokens.$.name': name
+				}
+			}, function(err) {
+				if (err) {
+					return done(err);
+				}
+
+				// Update rule token. add a new one if no key exists
+				Member.findOneAndUpdate({
+					_id: id
+				}, {
+					$addToSet: {
+						rule_tokens: {
+							name: name,
+							token: token,
+							expired: expired
+						}
+					}
+				}, function(err, member) {
+
+					done(err, member ? {
+						token: token,
+						id: member._id
+					} : null);
+				});
+			});
+			
+		};
+	},
+	setupRuleTokenByEmail: function(email, name, expired) {
+
+		return function(done) {
+
+			var token = utils.generateToken();
+
+			// Remove old token
+			Member.findOneAndUpdate({
+				email: email,
+				'rule_tokens.name': name
+			}, {
+				$pull: {
+					'rule_tokens.$.name': name
+				}
+			}, function(err) {
+				if (err) {
+					return done(err);
+				}
+
+				// Update rule token. add a new one if no key exists
+				Member.findOneAndUpdate({
+					email: email
+				}, {
+					$addToSet: {
+						rule_tokens: {
+							name: name,
+							token: token,
+							expired: expired
+						}
+					}
+				}, function(err, member) {
+
+					done(err, member ? {
+						token: token,
+						id: member._id
+					} : null);
+				});
+			});
+			
+		};
+	},
+	updateCardno: function(id, cardno) {
+
+		return function(done) {
+			Member.update({ _id: id }, {
+				cardno: cardno,
+				updated: Date.now()
+			}, done);
+		};
+	},
+	updateCardnoByEmail: function(email, token, cardno) {
+
+		return function(done) {
+			Member.update({ email: email }, {
+				tokens: [ token ],
+				cardno: cardno,
+				updated: Date.now()
+			}, done);
+		};
+	}
+};

lib/middleware.js

@@ -0,0 +1,11 @@
+
+module.exports = {
+	requireAuthorized: function *(next) {
+		if (!this.isAuthenticated()) {
+			this.status = 404;
+			return;
+		}
+
+		yield next;
+	}
+};

lib/passport.js

@@ -0,0 +1,137 @@
+var co = require('co');
+var crypto = require('crypto');
+var LocalStrategy = require('passport-local').Strategy;
+var GithubStrategy = require('passport-github2').Strategy;
+var FacebookStrategy = require('passport-facebook').Strategy;
+var GoogleStrategy = require('passport-google-oauth').OAuth2Strategy;
+var LinkedinStrategy = require('passport-linkedin-oauth2').Strategy;
+var Utils = require('./utils');
+var Member = require('./member');
+
+// Loading settings
+var settings = require('./config.js');
+if (!settings) {
+	console.error('Failed to load settings');
+	return;
+}
+
+var protocol = settings.general.server.secure ? 'https://' : 'http://';
+var port = (settings.general.server.port == 80) ? '' : ':' + settings.general.server.port;
+
+module.exports = {
+	init: function(passport) {
+
+		passport.serializeUser(function(user, done) {
+			done(null, user);
+		})
+
+		passport.deserializeUser(function(user, done) {
+			done(null, user);
+		})
+	},
+	local: function(passport) {
+
+		passport.use(new LocalStrategy(function(username, password, done) {
+
+			co(function *() {
+				// Using own library to authorize
+				return yield Member.authorizeMember(username, password);
+			}).then(function(member) {
+				done(null, member);
+			}, function(err) {
+				done(err);
+			});
+		}));
+	},
+	github: function(passport) {
+
+		passport.use(new GithubStrategy({
+				clientID: settings.general.authorization.github.clientID,
+				clientSecret: settings.general.authorization.github.clientSecret,
+				callbackURL: Utils.getExternalUrl() + '/auth/github/callback'
+			},
+			function(accessToken, refreshToken, profile, done) {
+				var user = {
+					name: profile.displayName,
+					email: profile.emails[0].value
+				};
+				done(null, user);
+			}
+		));
+	},
+	facebook: function(passport) {
+
+		passport.use(new FacebookStrategy({
+				clientID: settings.general.authorization.facebook.clientID,
+				clientSecret: settings.general.authorization.facebook.clientSecret,
+				callbackURL: Utils.getExternalUrl() + '/auth/facebook/callback',
+				profileFields: [ 'displayName', 'emails' ],
+				enableProof: false
+			},
+			function(accessToken, refreshToken, profile, done) {
+
+				var user = {
+					name: profile.displayName,
+					email: profile.emails[0].value
+				};
+				done(null, user);
+			}
+		));
+	},
+	google: function(passport) {
+
+		passport.use(new GoogleStrategy({
+				clientID: settings.general.authorization.google.clientID,
+				clientSecret: settings.general.authorization.google.clientSecret,
+				callbackURL: Utils.getExternalUrl() + '/auth/google/callback'
+			},
+			function(accessToken, refreshToken, profile, done) {
+
+				var user = {
+					name: profile.displayName,
+					email: profile.emails[0].value
+				};
+				done(null, user);
+			}
+		));
+	},
+	linkedin: function(passport) {
+
+		passport.use(new LinkedinStrategy({
+				clientID: settings.general.authorization.linkedin.clientID,
+				clientSecret: settings.general.authorization.linkedin.clientSecret,
+				callbackURL: Utils.getExternalUrl() + '/auth/linkedin/callback',
+				scope: [ 'r_emailaddress', 'r_basicprofile' ],
+				state: true
+			},
+			function(accessToken, refreshToken, profile, done) {
+
+				var user = {
+					name: profile.displayName,
+					email: profile.emails[0].value
+				};
+				done(null, user);
+			}
+		));
+	},
+	login: function(ctx, user) {
+
+		return function(done) {
+
+			co(function *() {
+				var member = {
+					id: user.id,
+					name: user.name,
+					email: user.email,
+					login_time: Date.now(),
+					avatar_hash: crypto.createHash('md5').update(user.email).digest('hex')
+				}
+
+				// User information will be stored in session
+				yield ctx.login(member);
+
+				done(null, member);
+			});
+		};
+	}
+};

lib/utils.js

@@ -0,0 +1,20 @@
+var settings = require('./config');
+var crypto = require('crypto');
+
+module.exports = {
+	getServiceName: function() {
+		return settings.general.service.name;
+	},
+	getExternalUrl: function() {
+		return settings.general.service.external_url;
+	},
+	generateToken: function() {
+		return crypto.randomBytes(16).toString('base64');
+	},
+	generateSalt: function() {
+		return crypto.randomBytes(12).toString('base64');
+	},
+	encryptPassword: function(salt, password) {
+		return crypto.createHmac('sha256', password + salt || '').digest('hex');
+	}
+};

models/member.js

@@ -0,0 +1,24 @@
+var mongoose = require('mongoose');
+
+var Member = new mongoose.Schema({
+	name: String,
+	email: { type: String, unique: true },
+	password: String,
+	salt: String,
+	gender: Number,
+	birthday: Date,
+	hashname: { type: String },
+	phone: String,
+	idno: String,
+	tokens: [ String ],
+	rule_tokens: [{ name: String, token: String, expired: Date }],
+	disabled: { type: Boolean, default: false },
+	created: { type: Date, default: Date.now },
+	updated: { type: Date, default: Date.now }
+});
+
+Member.methods.validPassword = function(password) {
+    return (this.password == password) ? true : false;
+};
+
+module.exports = mongoose.model('Member', Member);

package.json

@@ -0,0 +1,63 @@
+{
+  "name": "genuino",
+  "version": "1.0.0",
+  "description": "Genuino Online service",
+  "main": "app.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "npm run serve | npm run dev",
+    "serve": "./node_modules/.bin/http-server -p 8080",
+    "dev": "webpack-dev-server --progress --colors --port 8090"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cfsghost/lantern.git"
+  },
+  "keywords": [
+    "web"
+  ],
+  "author": "Fred Chien <cfsghost@gmail.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/cfsghost/lantern/issues"
+  },
+  "homepage": "https://github.com/cfsghost/lantern",
+  "devDependencies": {
+    "css-loader": ">=0.15.6",
+    "file-loader": "^0.8.4",
+    "jsx-loader": ">=0.13.2",
+    "less": ">=2.5.1",
+    "less-loader": ">=2.2.0",
+    "node-libs-browser": ">=0.5.2",
+    "style-loader": ">=0.12.3",
+    "url-loader": "^0.5.6",
+    "webpack": ">=1.10.1"
+  },
+  "dependencies": {
+    "babel-core": "^5.8.23",
+    "babel-loader": "^5.3.2",
+    "babel-runtime": "^5.8.20",
+    "co": "^4.6.0",
+    "fluky": "^0.1.12",
+    "jade": ">=1.11.0",
+    "koa": ">=0.21.0",
+    "koa-bodyparser": ">=2.0.0",
+    "koa-passport": "^1.1.6",
+    "koa-router": ">=5.1.2",
+    "koa-session": ">=3.3.1",
+    "koa-static": ">=1.4.9",
+    "koa-views": ">=3.1.0",
+    "mongoose": "^4.1.5",
+    "passport-facebook": "^2.0.0",
+    "passport-github2": "^0.1.9",
+    "passport-google-oauth": "^0.2.0",
+    "passport-linkedin-oauth2": "^1.2.1",
+    "passport-local": "^1.0.0",
+    "react": "^0.13.3",
+    "react-dnd": "^1.1.4",
+    "react-router": "^0.13.3",
+    "react-tap-event-plugin": "^0.1.7",
+    "react-tools": ">=0.13.3",
+    "scriptjs": "^2.5.7"
+  }
+}

routes/codebender.js

@@ -0,0 +1,11 @@
+var Router = require('koa-router');
+
+var router = module.exports = new Router();
+
+router.get('/js/codebender/chrome-client.js', function *() {
+	this.response.redirect('http://codebender.cc/js/codebender/chrome-client.js');
+});
+
+router.get('/js/codebender/firefox-client.js', function *() {
+	this.response.redirect('http://codebender.cc/js/codebender/firefox-client.js');
+});

src/blockly/.gitignore

@@ -0,0 +1,3 @@
+.DS_Store
+*.pyc
+*.komodoproject

src/blockly/COPYING

@@ -0,0 +1,177 @@
+
+                                 Apache License
+                           Version 2.0, January 2011
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS

src/blockly/README.md

@@ -0,0 +1,8 @@
+# Blockly
+
+Google's Blockly is a web-based, visual programming editor.  Users can drag
+blocks together to build programs.  All code is free and open source.
+
+**The project page is https://developers.google.com/blockly/**
+
+![](https://developers.google.com/blockly/sample.png)

src/blockly/appengine/README.txt

@@ -0,0 +1,43 @@
+
+  Running an App Engine server
+
+This directory contains the files needed to setup the optional Blockly server.
+Although Blockly itself is 100% client-side, the server enables cloud storage
+and sharing.  Store your programs in Datastore and get a unique URL that allows
+you to load the program on any computer.
+
+To run your own App Engine instance you'll need to create this directory
+structure:
+
+blockly/
+ |- app.yaml
+ |- index.yaml
+ |- index_redirect.py
+ |- README.txt
+ |- storage.js
+ |- storage.py
+ |- closure-library/  (Optional)
+ `- static/
+     |- blocks/
+     |- core/
+     |- demos/
+     |- generators/
+     |- media/
+     |- msg/
+     |- tests/
+     |- blockly_compressed.js
+     |- blockly_uncompressed.js  (Optional)
+     |- blocks_compressed.js
+     |- dart_compressed.js
+     |- javascript_compressed.js
+     |- php_compressed.js
+     `- python_compressed.js
+
+Instructions for fetching the optional Closure library may be found here:
+  https://developers.google.com/blockly/hacking/closure
+
+Go to https://appengine.google.com/ and create your App Engine application.
+Modify the 'application' name of app.yaml to your App Engine application name.
+
+Finally, upload this directory structure to your App Engine account,
+wait a minute, then go to http://YOURAPPNAME.appspot.com/

src/blockly/appengine/app.yaml

@@ -0,0 +1,82 @@
+application: blockly-demo
+version: 1
+runtime: python27
+api_version: 1
+threadsafe: no
+
+handlers:
+# Redirect obsolete URLs.
+# Blockly files moved from /blockly to /static on 5 Dec 2012.
+- url: /blockly/.*
+  static_files: redirect.html
+  upload: redirect.html
+# Code, Maze and Turtle moved from demos on 29 Dec 2012.
+- url: /static/demos/(maze|turtle)/.*
+  static_files: redirect.html
+  upload: redirect.html
+# Apps was disbanded on 20 Nov 2014.
+- url: /static/apps/.*
+  static_files: redirect.html
+  upload: redirect.html
+
+
+# Storage API.
+- url: /storage
+  script: storage.py
+  secure: always
+- url: /storage\.js
+  static_files: storage.js
+  upload: storage\.js
+  secure: always
+
+# Blockly files.
+- url: /static
+  static_dir: static
+  secure: always
+
+# Closure library for uncompiled Blockly.
+- url: /closure-library
+  static_dir: closure-library
+  secure: always
+
+# Redirect for root directory.
+- url: /
+  script: index_redirect.py
+  secure: always
+
+# Favicon.
+- url: /favicon\.ico
+  static_files: favicon.ico
+  upload: favicon\.ico
+  secure: always
+  expiration: "30d"
+
+# Apple icon.
+- url: /apple-touch-icon\.png
+  static_files: apple-touch-icon.png
+  upload: apple-touch-icon\.png
+  secure: always
+  expiration: "30d"
+
+# robot.txt
+- url: /robots\.txt
+  static_files: robots.txt
+  upload: robots\.txt
+  secure: always
+
+
+skip_files:
+# App Engine default patterns.
+- ^(.*/)?#.*#$
+- ^(.*/)?.*~$
+- ^(.*/)?.*\.py[co]$
+- ^(.*/)?.*/RCS/.*$
+- ^(.*/)?\..*$
+# Custom skip patterns.
+- ^static/appengine/.*$
+- ^static/demos/plane/soy/.+\.jar$
+- ^static/demos/plane/template.soy$
+- ^static/demos/plane/xlf/.*$
+- ^static/i18n/.*$
+- ^static/msg/json/.*$
+- ^.+\.soy$

src/blockly/appengine/index.yaml

@@ -0,0 +1,11 @@
+indexes:
+
+# AUTOGENERATED
+
+# This index.yaml is automatically updated whenever the dev_appserver
+# detects that a new type of query is run.  If you want to manage the
+# index.yaml file manually, remove the above marker line (the line
+# saying "# AUTOGENERATED").  If you want to manage some indexes
+# manually, move them above the marker line.  The index.yaml file is
+# automatically uploaded to the admin console when you next deploy
+# your application using appcfg.py.

src/blockly/appengine/index_redirect.py

@@ -0,0 +1,2 @@
+print("Status: 302")
+print("Location: /static/demos/index.html")

src/blockly/appengine/redirect.html

@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script>
+var loc = location.href;
+
+// Blockly files moved from /blockly to /static on 5 Dec 2012.
+if (loc.match('/blockly/')) {
+  loc = loc.replace('/blockly/', '/static/');
+}
+
+// Maze and Turtle moved from demos to apps on 29 Dec 2012.
+if (loc.match(/\/demos\/(maze|turtle)\//)) {
+  loc = loc.replace('/demos/', '/apps/');
+}
+
+// Vietnamese apps moved from vn to vi on 9 Jun 2012.
+if (loc.match('/vn.html')) {
+  loc = loc.replace('/vn.html', '/vi.html');
+}
+
+if (loc.match('/code/code.html')) {
+  // Code moved to index.html on 7 Aug 2013.
+  loc = loc.replace('/code.html', '/index.html');
+} else if (loc.match('/apps/code/zh_tw.html')) {
+  // zh-tw was changed to zh-hans on 25 Nov 2013.
+  loc = loc.replace('/zh_tw.html', '/index.html?lang=zh-hans');
+} else if (loc.match('/apps/code/index.html')) {
+  // NOP.
+} else if (loc.match(/\/apps\/code\/[-a-z]+\.html/)) {
+  // Code became language-agnostic on 20 Jul 2013.
+  loc = loc.replace(/\/([-a-z]+)\.html/, '/index.html?lang=$1');
+}
+
+if (loc.match('/apps/plane/plane.html')) {
+  // Plane moved to index.html on 7 Aug 2013.
+  loc = loc.replace('/plane.html', '/index.html');
+} else if (loc.match('/apps/code/plane.html')) {
+  // NOP.
+} else if (loc.match(/\/apps\/plane\/[\d_]*[-a-z]+\.html/)) {
+  // Plane became language-agnostic on 20 Jul 2013.
+  loc = loc.replace('vn.html', 'vi.html');
+  if (location.search) {
+    loc = loc.replace(/\/[\d_]*([-a-z]+)\.html\?/, '/index.html?lang=$1&');
+  } else {
+    loc = loc.replace(/\/[\d_]*([-a-z]+)\.html/, '/index.html?lang=$1');
+  }
+}
+
+if (loc.match('/apps/puzzle/')) {
+  // Puzzle moved to Blockly Games on 15 Oct 2014.
+  loc = 'https://blockly-games.appspot.com/puzzle';
+} else if (loc.match('/apps/maze/')) {
+  // Maze moved to Blockly Games on 10 Nov 2014.
+  loc = 'https://blockly-games.appspot.com/maze';
+} else if (loc.match('/apps/turtle/')) {
+  // Turtle moved to Blockly Games on 10 Nov 2014.
+  loc = 'https://blockly-games.appspot.com/turtle';
+} else if (loc.match('/apps/')) {
+  // Remaining apps moved to demos on 20 Nov 2014.
+  loc = loc.replace('/apps/', '/demos/');
+}
+
+location = loc;
+
+    </script>
+  </head>
+</html>

src/blockly/appengine/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /storage

src/blockly/appengine/storage.js

@@ -0,0 +1,194 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2012 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Loading and saving blocks with localStorage and cloud storage.
+ * @author q.neutron@gmail.com (Quynh Neutron)
+ */
+'use strict';
+
+// Create a namespace.
+var BlocklyStorage = {};
+
+/**
+ * Backup code blocks to localStorage.
+ * @param {!Blockly.WorkspaceSvg} workspace Workspace.
+ * @private
+ */
+BlocklyStorage.backupBlocks_ = function(workspace) {
+  if ('localStorage' in window) {
+    var xml = Blockly.Xml.workspaceToDom(workspace);
+    // Gets the current URL, not including the hash.
+    var url = window.location.href.split('#')[0];
+    window.localStorage.setItem(url, Blockly.Xml.domToText(xml));
+  }
+};
+
+/**
+ * Bind the localStorage backup function to the unload event.
+ * @param {Blockly.WorkspaceSvg=} opt_workspace Workspace.
+ */
+BlocklyStorage.backupOnUnload = function(opt_workspace) {
+  var workspace = opt_workspace || Blockly.getMainWorkspace();
+  window.addEventListener('unload',
+      function() {BlocklyStorage.backupBlocks_(workspace);}, false);
+};
+
+/**
+ * Restore code blocks from localStorage.
+ * @param {Blockly.WorkspaceSvg=} opt_workspace Workspace.
+ */
+BlocklyStorage.restoreBlocks = function(opt_workspace) {
+  var url = window.location.href.split('#')[0];
+  if ('localStorage' in window && window.localStorage[url]) {
+    var workspace = opt_workspace || Blockly.getMainWorkspace();
+    var xml = Blockly.Xml.textToDom(window.localStorage[url]);
+    Blockly.Xml.domToWorkspace(workspace, xml);
+  }
+};
+
+/**
+ * Save blocks to database and return a link containing key to XML.
+ * @param {Blockly.WorkspaceSvg=} opt_workspace Workspace.
+ */
+BlocklyStorage.link = function(opt_workspace) {
+  var workspace = opt_workspace || Blockly.getMainWorkspace();
+  var xml = Blockly.Xml.workspaceToDom(workspace);
+  var data = Blockly.Xml.domToText(xml);
+  BlocklyStorage.makeRequest_('/storage', 'xml', data, workspace);
+};
+
+/**
+ * Retrieve XML text from database using given key.
+ * @param {string} key Key to XML, obtained from href.
+ * @param {Blockly.WorkspaceSvg=} opt_workspace Workspace.
+ */
+BlocklyStorage.retrieveXml = function(key, opt_workspace) {
+  var workspace = opt_workspace || Blockly.getMainWorkspace();
+  BlocklyStorage.makeRequest_('/storage', 'key', key, workspace);
+};
+
+/**
+ * Global reference to current AJAX request.
+ * @type {XMLHttpRequest}
+ * @private
+ */
+BlocklyStorage.httpRequest_ = null;
+
+/**
+ * Fire a new AJAX request.
+ * @param {string} url URL to fetch.
+ * @param {string} name Name of parameter.
+ * @param {string} content Content of parameter.
+ * @param {!Blockly.WorkspaceSvg} workspace Workspace.
+ * @private
+ */
+BlocklyStorage.makeRequest_ = function(url, name, content, workspace) {
+  if (BlocklyStorage.httpRequest_) {
+    // AJAX call is in-flight.
+    BlocklyStorage.httpRequest_.abort();
+  }
+  BlocklyStorage.httpRequest_ = new XMLHttpRequest();
+  BlocklyStorage.httpRequest_.name = name;
+  BlocklyStorage.httpRequest_.onreadystatechange =
+      BlocklyStorage.handleRequest_;
+  BlocklyStorage.httpRequest_.open('POST', url);
+  BlocklyStorage.httpRequest_.setRequestHeader('Content-Type',
+      'application/x-www-form-urlencoded');
+  BlocklyStorage.httpRequest_.send(name + '=' + encodeURIComponent(content));
+  BlocklyStorage.httpRequest_.workspace = workspace;
+};
+
+/**
+ * Callback function for AJAX call.
+ * @private
+ */
+BlocklyStorage.handleRequest_ = function() {
+  if (BlocklyStorage.httpRequest_.readyState == 4) {
+    if (BlocklyStorage.httpRequest_.status != 200) {
+      BlocklyStorage.alert(BlocklyStorage.HTTPREQUEST_ERROR + '\n' +
+          'httpRequest_.status: ' + BlocklyStorage.httpRequest_.status);
+    } else {
+      var data = BlocklyStorage.httpRequest_.responseText.trim();
+      if (BlocklyStorage.httpRequest_.name == 'xml') {
+        window.location.hash = data;
+        BlocklyStorage.alert(BlocklyStorage.LINK_ALERT.replace('%1',
+            window.location.href));
+      } else if (BlocklyStorage.httpRequest_.name == 'key') {
+        if (!data.length) {
+          BlocklyStorage.alert(BlocklyStorage.HASH_ERROR.replace('%1',
+              window.location.hash));
+        } else {
+          BlocklyStorage.loadXml_(data, BlocklyStorage.httpRequest_.workspace);
+        }
+      }
+      BlocklyStorage.monitorChanges_(BlocklyStorage.httpRequest_.workspace);
+    }
+    BlocklyStorage.httpRequest_ = null;
+  }
+};
+
+/**
+ * Start monitoring the workspace.  If a change is made that changes the XML,
+ * clear the key from the URL.  Stop monitoring the workspace once such a
+ * change is detected.
+ * @param {!Blockly.WorkspaceSvg} workspace Workspace.
+ * @private
+ */
+BlocklyStorage.monitorChanges_ = function(workspace) {
+  var startXmlDom = Blockly.Xml.workspaceToDom(workspace);
+  var startXmlText = Blockly.Xml.domToText(startXmlDom);
+  function change() {
+    var xmlDom = Blockly.Xml.workspaceToDom(workspace);
+    var xmlText = Blockly.Xml.domToText(xmlDom);
+    if (startXmlText != xmlText) {
+      window.location.hash = '';
+      workspace.removeChangeListener(bindData);
+    }
+  }
+  var bindData = workspace.addChangeListener(change);
+};
+
+/**
+ * Load blocks from XML.
+ * @param {string} xml Text representation of XML.
+ * @param {!Blockly.WorkspaceSvg} workspace Workspace.
+ * @private
+ */
+BlocklyStorage.loadXml_ = function(xml, workspace) {
+  try {
+    xml = Blockly.Xml.textToDom(xml);
+  } catch (e) {
+    BlocklyStorage.alert(BlocklyStorage.XML_ERROR + '\nXML: ' + xml);
+    return;
+  }
+  // Clear the workspace to avoid merge.
+  workspace.clear();
+  Blockly.Xml.domToWorkspace(workspace, xml);
+};
+
+/**
+ * Present a text message to the user.
+ * Designed to be overridden if an app has custom dialogs, or a butter bar.
+ * @param {string} message Text to alert.
+ */
+BlocklyStorage.alert = function(message) {
+  window.alert(message);
+};

src/blockly/appengine/storage.py

@@ -0,0 +1,85 @@
+"""Blockly Demo: Storage
+
+Copyright 2012 Google Inc.
+https://developers.google.com/blockly/
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+"""
+
+"""Store and retrieve XML with App Engine.
+"""
+
+__author__ = "q.neutron@gmail.com (Quynh Neutron)"
+
+import cgi
+from random import randint
+from google.appengine.ext import db
+from google.appengine.api import memcache
+import logging
+
+print "Content-Type: text/plain\n"
+
+def keyGen():
+  # Generate a random string of length KEY_LEN.
+  KEY_LEN = 6
+  CHARS = "abcdefghijkmnopqrstuvwxyz23456789" # Exclude l, 0, 1.
+  max_index = len(CHARS) - 1
+  return "".join([CHARS[randint(0, max_index)] for x in range(KEY_LEN)])
+
+class Xml(db.Model):
+  # A row in the database.
+  xml_hash = db.IntegerProperty()
+  xml_content = db.TextProperty()
+
+forms = cgi.FieldStorage()
+if "xml" in forms:
+  # Store XML and return a generated key.
+  xml_content = forms["xml"].value
+  xml_hash = hash(xml_content)
+  lookup_query = db.Query(Xml)
+  lookup_query.filter("xml_hash =", xml_hash)
+  lookup_result = lookup_query.get()
+  if lookup_result:
+    xml_key = lookup_result.key().name()
+  else:
+    trials = 0
+    result = True
+    while result:
+      trials += 1
+      if trials == 100:
+        raise Exception("Sorry, the generator failed to get a key for you.")
+      xml_key = keyGen()
+      result = db.get(db.Key.from_path("Xml", xml_key))
+    xml = db.Text(xml_content, encoding="utf_8")
+    row = Xml(key_name = xml_key, xml_hash = xml_hash, xml_content = xml)
+    row.put()
+  print xml_key
+
+if "key" in forms:
+  # Retrieve stored XML based on the provided key.
+  key_provided = forms["key"].value
+  # Normalize the string.
+  key_provided = key_provided.lower().strip()
+  # Check memcache for a quick match.
+  xml = memcache.get("XML_" + key_provided)
+  if xml is None:
+    # Check datastore for a definitive match.
+    result = db.get(db.Key.from_path("Xml", key_provided))
+    if not result:
+      xml = ""
+    else:
+      xml = result.xml_content
+    # Save to memcache for next hit.
+    if not memcache.add("XML_" + key_provided, xml, 3600):
+      logging.error("Memcache set failed.")
+  print xml.encode("utf-8")

src/blockly/blocks/base.js

@@ -0,0 +1,232 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2012 Fred Lin.
+ * https://github.com/gasolin/BlocklyDuino
+ *
+ * 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 Helper functions for generating Arduino blocks.
+ * @author gasolin@gmail.com (Fred Lin)
+ */
+'use strict';
+
+//To support syntax defined in http://arduino.cc/en/Reference/HomePage
+
+goog.provide('Blockly.Blocks.base');
+
+goog.require('Blockly.Blocks');
+
+
+Blockly.Blocks['base_delay'] = {
+  helpUrl: 'http://arduino.cc/en/Reference/delay',
+  init: function() {
+    this.setColour(120);
+    this.appendDummyInput()
+        .appendField(Blockly.Msg.BASE_DELAY);
+    this.appendValueInput("DELAY_TIME", 'Number')
+        .setCheck('Number');
+    this.appendDummyInput()
+        .appendField(Blockly.Msg.BASE_DELAY_UNIT);
+    this.setInputsInline(true);
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+    this.setTooltip('Delay specific time');
+  }
+};
+
+Blockly.Blocks['base_map'] = {
+  helpUrl: 'http://arduino.cc/en/Reference/map',
+  init: function() {
+    this.setColour(230);
+    this.appendValueInput("NUM", 'Number')
+        .appendField("Map ")
+        .setCheck('Number');
+    this.appendValueInput("DMAX", 'Number')
+        .appendField("value to [0-")
+        .setCheck('Number');
+    this.appendDummyInput()
+	      .appendField("]");
+    this.setInputsInline(true);
+    this.setOutput(true);
+    this.setTooltip('Re-maps a number from [0-1024] to another.');
+  }
+};
+
+Blockly.Blocks['inout_buildin_led'] = {
+   helpUrl: 'http://arduino.cc/en/Reference/DigitalWrite',
+   init: function() {
+     this.setColour(190);
+     this.appendDummyInput()
+	       .appendField("Build-in LED Stat")
+	       .appendField(new Blockly.FieldDropdown([["HIGH", "HIGH"], ["LOW", "LOW"]]), "STAT");
+     this.setPreviousStatement(true, null);
+     this.setNextStatement(true, null);
+     this.setTooltip('light or off the build-in LED');
+   }
+};
+
+Blockly.Blocks['inout_digital_write'] = {
+  helpUrl: 'http://arduino.cc/en/Reference/DigitalWrite',
+  init: function() {
+    this.setColour(230);
+    this.appendDummyInput()
+	      .appendField("DigitalWrite PIN#")
+	      .appendField(new Blockly.FieldDropdown(profile.default.digital), "PIN")
+      	.appendField("Stat")
+      	.appendField(new Blockly.FieldDropdown([["HIGH", "HIGH"], ["LOW", "LOW"]]), "STAT");
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+    this.setTooltip('Write digital value to a specific Port');
+  }
+};
+
+Blockly.Blocks['inout_digital_read'] = {
+  helpUrl: 'http://arduino.cc/en/Reference/DigitalRead',
+  init: function() {
+    this.setColour(230);
+    this.appendDummyInput()
+	      .appendField("DigitalRead PIN#")
+	      .appendField(new Blockly.FieldDropdown(profile.default.digital), "PIN");
+    this.setOutput(true, 'Boolean');
+    this.setTooltip('');
+  }
+};
+
+Blockly.Blocks['inout_analog_write'] = {
+  helpUrl: 'http://arduino.cc/en/Reference/AnalogWrite',
+  init: function() {
+    this.setColour(230);
+    this.appendDummyInput()
+        .appendField("AnalogWrite PIN#")
+        .appendField(new Blockly.FieldDropdown(profile.default.digital), "PIN");
+    this.appendValueInput("NUM", 'Number')
+        .appendField("value")
+        .setCheck('Number');
+    this.setInputsInline(true);
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+    this.setTooltip('Write analog value between 0 and 255 to a specific Port');
+  }
+};
+
+Blockly.Blocks['inout_analog_read'] = {
+  helpUrl: 'http://arduino.cc/en/Reference/AnalogRead',
+  init: function() {
+    this.setColour(230);
+    this.appendDummyInput()
+        .appendField("AnalogRead PIN#")
+        .appendField(new Blockly.FieldDropdown(profile.default.analog), "PIN");
+    this.setOutput(true, 'Number');
+    this.setTooltip('Return value between 0 and 1024');
+  }
+};
+
+Blockly.Blocks['inout_tone'] = {
+  helpUrl: 'http://www.arduino.cc/en/Reference/Tone',
+  init: function() {
+    this.setColour(230);
+    this.appendDummyInput()
+        .appendField("Tone PIN#")
+        .appendField(new Blockly.FieldDropdown(profile.default.digital), "PIN");
+    this.appendValueInput("NUM", "Number")
+        .appendField("frequency")
+        .setCheck("Number");
+    this.setInputsInline(true);
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+    this.setTooltip("Generate audio tones on a pin");
+  }
+};
+
+Blockly.Blocks['inout_notone'] = {
+  helpUrl: 'http://www.arduino.cc/en/Reference/NoTone',
+  init: function() {
+    this.setColour(230);
+    this.appendDummyInput()
+        .appendField("No tone PIN#")
+        .appendField(new Blockly.FieldDropdown(profile.default.digital), "PIN");
+    this.setInputsInline(true);
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+    this.setTooltip("Stop generating a tone on a pin");
+  }
+};
+
+Blockly.Blocks['inout_highlow'] = {
+  helpUrl: 'http://arduino.cc/en/Reference/Constants',
+  init: function() {
+    this.setColour(230);
+    this.appendDummyInput()
+        .appendField(new Blockly.FieldDropdown([["HIGH", "HIGH"], ["LOW", "LOW"]]), 'BOOL')
+    this.setOutput(true, 'Boolean');
+    this.setTooltip('');
+  }
+};
+
+//servo block
+//http://www.seeedstudio.com/depot/emax-9g-es08a-high-sensitive-mini-servo-p-760.html?cPath=170_171
+Blockly.Blocks['servo_move'] = {
+  helpUrl: 'http://www.arduino.cc/playground/ComponentLib/servo',
+  init: function() {
+    this.setColour(190);
+    this.appendDummyInput()
+        .appendField("Servo")
+        .appendField(new Blockly.FieldImage("http://www.seeedstudio.com/depot/images/product/a991.jpg", 64, 64))
+        .appendField("PIN#")
+        .appendField(new Blockly.FieldDropdown(profile.default.digital), "PIN")
+    this.appendValueInput("DEGREE", 'Number')
+        .setCheck('Number')
+        .setAlign(Blockly.ALIGN_RIGHT)
+        .appendField("Degree (0~180)");
+    this.appendValueInput("DELAY_TIME", 'Number')
+        .setCheck('Number')
+        .setAlign(Blockly.ALIGN_RIGHT)
+        .appendField("Delay");
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+    this.setTooltip('move between 0~180 degree');
+  }
+};
+
+Blockly.Blocks['servo_read_degrees'] = {
+  helpUrl: 'http://www.arduino.cc/playground/ComponentLib/servo',
+  init: function() {
+    this.setColour(190);
+    this.appendDummyInput()
+        .appendField("Servo")
+        .appendField(new Blockly.FieldImage("http://www.seeedstudio.com/depot/images/product/a991.jpg", 64, 64))
+        .appendField("PIN#")
+        .appendField(new Blockly.FieldDropdown(profile.default.digital), "PIN");
+    this.appendDummyInput()
+        .setAlign(Blockly.ALIGN_RIGHT)
+        .appendField("Read Degrees")
+    this.setOutput(true, 'Number');
+    this.setTooltip('return that degree with the last servo move.');
+  }
+};
+
+Blockly.Blocks['serial_print'] = {
+  helpUrl: 'http://www.arduino.cc/en/Serial/Print',
+  init: function() {
+    this.setColour(230);
+    this.appendValueInput("CONTENT", 'String')
+        .appendField("Serial Print");
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+    this.setTooltip('Prints data to the console/serial port as human-readable ASCII text.');
+  }
+};

src/blockly/blocks/colour.js

@@ -0,0 +1,117 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2012 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Colour blocks for Blockly.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.Blocks.colour');
+
+goog.require('Blockly.Blocks');
+
+
+/**
+ * Common HSV hue for all blocks in this category.
+ */
+Blockly.Blocks.colour.HUE = 20;
+
+Blockly.Blocks['colour_picker'] = {
+  /**
+   * Block for colour picker.
+   * @this Blockly.Block
+   */
+  init: function() {
+    this.setHelpUrl(Blockly.Msg.COLOUR_PICKER_HELPURL);
+    this.setColour(Blockly.Blocks.colour.HUE);
+    this.appendDummyInput()
+        .appendField(new Blockly.FieldColour('#ff0000'), 'COLOUR');
+    this.setOutput(true, 'Colour');
+    this.setTooltip(Blockly.Msg.COLOUR_PICKER_TOOLTIP);
+  }
+};
+
+Blockly.Blocks['colour_random'] = {
+  /**
+   * Block for random colour.
+   * @this Blockly.Block
+   */
+  init: function() {
+    this.setHelpUrl(Blockly.Msg.COLOUR_RANDOM_HELPURL);
+    this.setColour(Blockly.Blocks.colour.HUE);
+    this.appendDummyInput()
+        .appendField(Blockly.Msg.COLOUR_RANDOM_TITLE);
+    this.setOutput(true, 'Colour');
+    this.setTooltip(Blockly.Msg.COLOUR_RANDOM_TOOLTIP);
+  }
+};
+
+Blockly.Blocks['colour_rgb'] = {
+  /**
+   * Block for composing a colour from RGB components.
+   * @this Blockly.Block
+   */
+  init: function() {
+    this.setHelpUrl(Blockly.Msg.COLOUR_RGB_HELPURL);
+    this.setColour(Blockly.Blocks.colour.HUE);
+    this.appendValueInput('RED')
+        .setCheck('Number')
+        .setAlign(Blockly.ALIGN_RIGHT)
+        .appendField(Blockly.Msg.COLOUR_RGB_TITLE)
+        .appendField(Blockly.Msg.COLOUR_RGB_RED);
+    this.appendValueInput('GREEN')
+        .setCheck('Number')
+        .setAlign(Blockly.ALIGN_RIGHT)
+        .appendField(Blockly.Msg.COLOUR_RGB_GREEN);
+    this.appendValueInput('BLUE')
+        .setCheck('Number')
+        .setAlign(Blockly.ALIGN_RIGHT)
+        .appendField(Blockly.Msg.COLOUR_RGB_BLUE);
+    this.setOutput(true, 'Colour');
+    this.setTooltip(Blockly.Msg.COLOUR_RGB_TOOLTIP);
+  }
+};
+
+Blockly.Blocks['colour_blend'] = {
+  /**
+   * Block for blending two colours together.
+   * @this Blockly.Block
+   */
+  init: function() {
+    this.setHelpUrl(Blockly.Msg.COLOUR_BLEND_HELPURL);
+    this.setColour(Blockly.Blocks.colour.HUE);
+    this.appendValueInput('COLOUR1')
+        .setCheck('Colour')
+        .setAlign(Blockly.ALIGN_RIGHT)
+        .appendField(Blockly.Msg.COLOUR_BLEND_TITLE)
+        .appendField(Blockly.Msg.COLOUR_BLEND_COLOUR1);
+    this.appendValueInput('COLOUR2')
+        .setCheck('Colour')
+        .setAlign(Blockly.ALIGN_RIGHT)
+        .appendField(Blockly.Msg.COLOUR_BLEND_COLOUR2);
+    this.appendValueInput('RATIO')
+        .setCheck('Number')
+        .setAlign(Blockly.ALIGN_RIGHT)
+        .appendField(Blockly.Msg.COLOUR_BLEND_RATIO);
+    this.setOutput(true, 'Colour');
+    this.setTooltip(Blockly.Msg.COLOUR_BLEND_TOOLTIP);
+  }
+};

src/blockly/blocks/grove.js

@@ -0,0 +1,505 @@
+//http://www.seeedstudio.com/wiki/GROVE_System
+//http://www.seeedstudio.com/depot/index.php?main_page=advanced_search_result&search_in_description=1&keyword=grovefamily
+//support starter bundle example http://www.seeedstudio.com/wiki/GROVE_-_Starter_Kit_V1.1b
+
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2012 Fred Lin.
+ * https://github.com/gasolin/BlocklyDuino
+ *
+ * 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 Helper functions for generating seeeduino grove blocks.
+ * @author gasolin@gmail.com (Fred Lin)
+ */
+
+goog.provide('Blockly.Blocks.grove');
+
+goog.require('Blockly.Blocks');
+
+
+Blockly.Blocks['grove_led'] = {
+  helpUrl: 'http://www.seeedstudio.com/wiki/index.php?title=GROVE_-_Starter_Bundle_V1.0b#LED',
+  init: function() {
+    this.setColour(190);
+    this.appendDummyInput()
+        .appendField("LED")
+        .appendField(new Blockly.FieldImage("http://www.seeedstudio.com/wiki/images/thumb/e/e0/LED1.jpg/400px-LED1.jpg", 64, 64))
+        .appendField("PIN#")
+        .appendField(new Blockly.FieldDropdown(profile.default.digital), "PIN")
+        .appendField("stat")
+        .appendField(new Blockly.FieldDropdown([["HIGH", "HIGH"], ["LOW", "LOW"]]), "STAT");
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+    this.setTooltip('green LED');
+  }
+};
+
+Blockly.Blocks['grove_button'] = {
+  helpUrl: 'http://www.seeedstudio.com/wiki/index.php?title=GROVE_-_Starter_Bundle_V1.0b#Button',
+  init: function() {
+    this.setColour(190);
+    this.appendDummyInput()
+        .appendField("Button")
+        .appendField(new Blockly.FieldImage("http://www.seeedstudio.com/wiki/images/thumb/9/93/Button1.jpg/400px-Button1.jpg", 64, 64))
+        .appendField("PIN#")
+        .appendField(new Blockly.FieldDropdown(profile.default.digital), "PIN");
+    this.setOutput(true, 'Boolean');
+    this.setTooltip('Basic digital input');
+  }
+};
+
+Blockly.Blocks['grove_rotary_angle'] = {
+  helpUrl: 'http://www.seeedstudio.com/wiki/index.php?title=GROVE_-_Starter_Bundle_V1.0b#Potentiometer',
+  init: function() {
+    this.setColour(10);
+    this.appendDummyInput()
+        .appendField("Rotary Angle")
+        .appendField(new Blockly.FieldImage("http://www.seeedstudio.com/wiki/images/thumb/5/59/Potentiometer1.jpg/400px-Potentiometer1.jpg", 64, 64))
+        .appendField("PIN#")
+        .appendField(new Blockly.FieldDropdown(profile.default.analog), "PIN");
+    this.setOutput(true, 'Number');
+    this.setTooltip('Analog output between 0 and Vcc');
+  }
+};
+
+Blockly.Blocks['grove_tilt_switch'] = {
+  helpUrl: 'http://www.seeedstudio.com/wiki/index.php?title=GROVE_-_Starter_Bundle_V1.0b#Tilt_switch',
+  init: function() {
+    this.setColour(190);
+    this.appendDummyInput()
+        .appendField("Tilt Switch")
+        .appendField(new Blockly.FieldImage("http://www.seeedstudio.com/wiki/images/thumb/9/95/Tilt1.jpg/400px-Tilt1.jpg", 64, 64))
+        .appendField("PIN#")
+        .appendField(new Blockly.FieldDropdown(profile.default.digital), "PIN");
+    this.setOutput(true, 'Boolean');
+    this.setTooltip('When the switch is level it is open, and when tilted, the switch closes.');
+  }
+};
+
+Blockly.Blocks['grove_piezo_buzzer'] = {
+  helpUrl: 'http://www.seeedstudio.com/wiki/GROVE_-_Starter_Kit_V1.1b#Grove_.E2.80.93_Buzzer',
+  init: function() {
+    this.setColour(190);
+    this.appendDummyInput()
+        .appendField("Piezo Buzzer")
+        .appendField(new Blockly.FieldImage("http://www.seeedstudio.com/wiki/images/thumb/e/ed/Buzzer1.jpg/400px-Buzzer1.jpg", 64, 64))
+        .appendField("PIN#")
+        .appendField(new Blockly.FieldDropdown(profile.default.digital), "PIN")
+        .appendField("stat")
+        .appendField(new Blockly.FieldDropdown([["HIGH", "HIGH"], ["LOW", "LOW"]]), "STAT");
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+    this.setTooltip('Emit a tone when the output is high');
+  }
+};
+
+Blockly.Blocks['grove_relay'] = {
+  helpUrl: 'http://www.seeedstudio.com/wiki/Grove_-_Relay',
+  init: function() {
+    this.setColour(190);
+    this.appendDummyInput()
+        .appendField("Relay")
+        .appendField(new Blockly.FieldImage("http://www.seeedstudio.com/wiki/images/thumb/0/04/Twig-Relay1.jpg/400px-Twig-Relay1.jpg", 64, 64))
+        .appendField("PIN#")
+        .appendField(new Blockly.FieldDropdown(profile.default.digital), "PIN")
+        .appendField("stat")
+        .appendField(new Blockly.FieldDropdown([["HIGH", "HIGH"], ["LOW", "LOW"]]), "STAT");
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+    this.setTooltip('capable of switching a much higher voltages and currents. The maximum voltage and current that can be controlled by this module upto 250V at 10 amps.');
+  }
+};
+
+Blockly.Blocks['grove_temporature_sensor'] = {
+  helpUrl: 'http://www.seeedstudio.com/wiki/Project_Seven_-_Temperature',
+  init: function() {
+    this.setColour(10);
+    this.appendDummyInput()
+        .appendField("Temporature Sensor")
+        .appendField(new Blockly.FieldImage("http://www.seeedstudio.com/wiki/images/thumb/b/b0/Temperature1.jpg/400px-Temperature1.jpg", 64, 64))
+        .appendField("PIN#")
+        .appendField(new Blockly.FieldDropdown(profile.default.analog), "PIN")
+    this.setOutput(true, 'Number');
+    this.setTooltip('return number of ambient temperature in ℃');
+  }
+};
+
+Blockly.Blocks['grove_serial_lcd_print'] = {
+  helpUrl: 'http://www.seeedstudio.com/wiki/index.php?title=GROVE_-_Starter_Bundle_V1.0b#Serial_LCD',
+  init: function() {
+    this.setColour(190);
+    this.appendDummyInput()
+        .appendField("Serial LCD")
+        .appendField(new Blockly.FieldImage("http://www.seeedstudio.com/wiki/images/thumb/6/6a/LCD1.jpg/400px-LCD1.jpg", 64, 64))
+        .appendField("PIN#")
+        .appendField(new Blockly.FieldDropdown(profile.default.digital), "PIN");
+    this.appendValueInput("TEXT", 'String')
+        .setCheck('String')
+        .setAlign(Blockly.ALIGN_RIGHT)
+        .appendField("print line1");
+    this.appendValueInput("TEXT2", 'String')
+        .setCheck('String')
+        .setAlign(Blockly.ALIGN_RIGHT)
+        .appendField("print line2")
+    this.appendValueInput("DELAY_TIME", 'Number')
+        .setCheck('Number')
+        .setAlign(Blockly.ALIGN_RIGHT)
+        .appendField("Delay");
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+    this.setTooltip('print text on an 16 character by 2 line LCD.');
+  }
+};
+
+//grove lcd power on/off
+Blockly.Blocks['grove_serial_lcd_power'] = {
+  helpUrl: 'http://www.seeedstudio.com/wiki/index.php?title=GROVE_-_Starter_Bundle_V1.0b#LED',
+  init: function() {
+    this.setColour(190);
+    this.appendDummyInput()
+        .appendField("Serial LCD")
+        .appendField(new Blockly.FieldImage("http://www.seeedstudio.com/wiki/images/thumb/6/6a/LCD1.jpg/400px-LCD1.jpg", 64, 64))
+        .appendField("PIN#")
+        .appendField(new Blockly.FieldDropdown(profile.default.digital), "PIN");
+    this.appendDummyInput()
+        .setAlign(Blockly.ALIGN_RIGHT)
+        .appendField("Power")
+        .appendField(new Blockly.FieldDropdown([["ON", "ON"], ["OFF", "OFF"]]), "STAT");
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+    this.setTooltip('Turn LCD power on/off');
+  }
+};
+
+//scroll left/right/no scroll/blink/noblink
+Blockly.Blocks['grove_serial_lcd_effect'] = {
+  helpUrl: 'http://www.seeedstudio.com/wiki/index.php?title=GROVE_-_Starter_Bundle_V1.0b#LED',
+  init: function() {
+    this.setColour(190);
+    this.appendDummyInput()
+        .appendField("Serial LCD")
+        .appendField(new Blockly.FieldImage("http://www.seeedstudio.com/wiki/images/thumb/6/6a/LCD1.jpg/400px-LCD1.jpg", 64, 64))
+        .appendField("PIN#")
+        .appendField(new Blockly.FieldDropdown(profile.default.digital), "PIN");
+    this.appendDummyInput()
+        .setAlign(Blockly.ALIGN_RIGHT)
+        .appendField("Effect")
+        .appendField(new Blockly.FieldDropdown([["Scroll Left", "LEFT"], ["Scroll Right", "RIGHT"], ["Scroll Auto", "AUTO"]]), "STAT");
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+    this.setTooltip('Turn LCD power on/off');
+  }
+};
+
+Blockly.Blocks['grove_sound_sensor'] = {
+  helpUrl: 'http://www.seeedstudio.com/wiki/Grove_-_Sound_Sensor',
+  init: function() {
+    this.setColour(10);
+    this.appendDummyInput()
+        .appendField("Sound Sensor")
+        .appendField(new Blockly.FieldImage("http://www.seeedstudio.com/wiki/images/thumb/e/e3/Twig-Sound-sensor.jpg/400px-Twig-Sound-sensor.jpg", 64, 64))
+        .appendField("PIN#")
+        .appendField(new Blockly.FieldDropdown(profile.default.analog), "PIN")
+    this.setOutput(true, 'Number');
+    this.setTooltip('Detect the sound strength of the environment');
+  }
+};
+
+Blockly.Blocks['grove_pir_motion_sensor'] = {
+  helpUrl: 'http://www.seeedstudio.com/wiki/Grove_-_PIR_Motion_Sensor',
+  init: function() {
+    this.setColour(190);
+    this.appendDummyInput()
+        .appendField("PIR Motion Sensor")
+        .appendField(new Blockly.FieldImage("http://www.seeedstudio.com/wiki/images/thumb/f/fd/Twig-PIR_Motion_Sensor.jpg/400px-Twig-PIR_Motion_Sensor.jpg", 64, 64))
+        .appendField("PIN#")
+        .appendField(new Blockly.FieldDropdown(profile.default.digital), "PIN")
+    this.setOutput(true, 'Number');
+    this.setTooltip('When anyone moves in it\'s detecting range, the sensor outputs HIGH.');
+  }
+};
+
+Blockly.Blocks['grove_line_finder'] = {
+  helpUrl: 'http://www.seeedstudio.com/wiki/Grove_-_Line_Finder',
+  init: function() {
+    this.setColour(190);
+    this.appendDummyInput()
+        .appendField("Line Finder")
+        .appendField(new Blockly.FieldImage("http://www.seeedstudio.com/wiki/images/thumb/8/82/Grovelinefinder1.jpg/400px-Grovelinefinder1.jpg", 64, 64))
+	      .appendField("PIN#")
+	      .appendField(new Blockly.FieldDropdown(profile.default.digital), "PIN");
+    this.setOutput(true, 'Boolean');
+    this.setTooltip('Output digital signal so the robot can reliably follow a black line on a white background');
+  }
+};
+
+Blockly.Blocks['grove_ultrasonic_ranger'] = {
+  helpUrl: 'http://www.seeedstudio.com/wiki/Grove_-_Ultrasonic_Ranger',
+  init: function() {
+    this.setColour(190);
+    this.appendDummyInput()
+	      .appendField("Ultrasonic Ranger")
+        .appendField(new Blockly.FieldImage("http://www.seeedstudio.com/wiki/images/thumb/b/b0/Twig_-_Ultrasonic_Ranger2.jpg/200px-Twig_-_Ultrasonic_Ranger2.jpg", 64, 64))
+	      .appendField("PIN#")
+        .appendField(new Blockly.FieldDropdown(profile.default.digital), "PIN")
+        .appendField("unit")
+        .appendField(new Blockly.FieldDropdown([["cm", "cm"],  ["inch", "inch"]]), "UNIT");
+    this.setOutput(true, 'Boolean');
+    this.setTooltip('Non-contact distance measurement module');
+  }
+};
+
+Blockly.Blocks['grove_motor_shield'] = {
+  helpUrl: 'http://www.seeedstudio.com/wiki/Motor_Shield',
+  init: function() {
+    this.setColour(190);
+    this.appendDummyInput()
+        .appendField("Motor")
+        .appendField(new Blockly.FieldImage("http://www.seeedstudio.com/wiki/images/thumb/4/4d/Smotoshield2.jpg/400px-Smotoshield2.jpg", 64, 64))
+        .appendField(new Blockly.FieldDropdown([["Stop", "stop"], ["Forward", "forward"], ["Right", "right"], ["Left", "left"], ["Backward", "backward"]]), "DIRECTION");
+    /*this.appendValueInput("SPEED", 'Number')
+        .setCheck('Number')
+        .setAlign(Blockly.ALIGN_RIGHT)
+        .appendField("Speed");*/
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+    this.setTooltip('Drive two brushed DC motors');
+  }
+};
+
+Blockly.Blocks['grove_thumb_joystick'] = {
+  helpUrl: 'http://www.seeedstudio.com/wiki/Grove_-_Thumb_Joystick',
+  init: function() {
+    this.setColour(10);
+    this.appendDummyInput()
+	.appendField("Thumb Joystick")
+        .appendField(new Blockly.FieldImage("http://www.seeedstudio.com/wiki/images/thumb/e/e0/Twig_-_Thumb_Joystick_v0.9b.jpg/200px-Twig_-_Thumb_Joystick_v0.9b.jpg", 64, 64))
+	.appendField("PIN#")
+        .appendField(new Blockly.FieldDropdown(profile.default.analog), "PIN")
+        .appendField("axis")
+        .appendField(new Blockly.FieldDropdown([["x", "x"],  ["y", "y"]]), "AXIS");
+    this.setOutput(true, 'Number');
+this.setTooltip('output two analog values(200~800) representing two directions');
+  }
+};
+
+Blockly.Blocks['grove_rgb_led'] = {
+  helpUrl: 'http://www.seeedstudio.com/wiki/index.php?title=Twig_-_Chainable_RGB_LED',
+  init: function() {
+    this.setColour(190);
+    this.appendDummyInput()
+  .appendField("Chainable RGB LED")
+        .appendField(new Blockly.FieldImage("http://www.seeedstudio.com/depot/images/product/chanbalelednb1.jpg", 64, 64))
+  .appendField("PIN#")
+        .appendField(new Blockly.FieldDropdown(profile.default.digital), "PIN")
+    this.appendDummyInput("COLOR0")
+        .setAlign(Blockly.ALIGN_RIGHT)
+        .appendField("Color 1")
+        .appendField(new Blockly.FieldColour("#00ff00"), "RGB0");
+    this.setMutator(new Blockly.Mutator(['grove_rgb_led_item']));
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+    this.setTooltip('256 color LED, currently Chainable feature is not support');
+    this.itemCount_ = 1;
+  },
+  mutationToDom: function() {
+    var container = document.createElement('mutation');
+    container.setAttribute('items', this.itemCount_);
+    for (var x = 0; x < this.itemCount_; x++) {
+      var colour_rgb = this.getFieldValue('RGB0');
+      //alert(colour_rgb);
+      container.setAttribute('RGB' + x, colour_rgb);
+    }
+    return container;
+  },
+  domToMutation: function(xmlElement) {
+    for (var x = 0; x < this.itemCount_; x++) {
+      this.removeInput('COLOR' + x);
+    }
+    this.itemCount_ = window.parseInt(xmlElement.getAttribute('items'), 10);
+    for (var x = 0; x < this.itemCount_; x++) {
+      var color = window.parseInt(xmlElement.getAttribute('RGB'+x), "#00ff00");
+      var input = this.appendDummyInput('COLOR' + x);
+      //if (x == 0) {
+        input.setAlign(Blockly.ALIGN_RIGHT)
+             .appendField("Color "+(x+1))
+             .appendField(new Blockly.FieldColour(color), "RGB" + x);
+      //}
+    }
+    if (this.itemCount_ == 0) {
+      this.appendDummyInput('COLOR0')
+          .setAlign(Blockly.ALIGN_RIGHT)
+          .appendField("Color 1")
+          .appendField(new Blockly.FieldColour("#00ff00"), "RGB0");
+    }
+  },
+  decompose: function(workspace) {
+    var containerBlock = Blockly.Block.obtain(workspace,
+                                              'grove_rgb_led_container');
+    containerBlock.initSvg();
+    var connection = containerBlock.getInput('STACK').connection;
+    for (var x = 0; x < this.itemCount_; x++) {
+      var itemBlock = Blockly.Block.obtain(workspace, 'grove_rgb_led_item');
+      itemBlock.initSvg();
+      connection.connect(itemBlock.previousConnection);
+      connection = itemBlock.nextConnection;
+    }
+    return containerBlock;
+  },
+  compose: function(containerBlock) {
+    // Disconnect all input blocks and remove all inputs.
+    if (this.itemCount_ == 0) {
+      this.removeInput('COLOR0');
+    } else {
+      for (var x = this.itemCount_ - 1; x >= 0; x--) {
+        //console.log("cnt:"+x);
+        this.removeInput('COLOR' + x);
+      }
+    }
+    /*var top;
+    if(this.itemCount_ > 0){
+      top = this.itemCount_-1;
+    } else {
+      top = 0;
+    }
+    console.log("top:"+top);*/
+    this.itemCount_ = 0;
+    // Rebuild the block's inputs.
+    var itemBlock = containerBlock.getInputTargetBlock('STACK');
+    while (itemBlock) {
+      var colour_rgb = this.getFieldValue('RGB' + this.itemCount_);
+      if(colour_rgb==null){
+          colour_rgb = "00ff00";
+      }
+      //console.log("blk:"+this.itemCount_);
+      /*if(top>this.itemCount_){
+        this.removeInput('COLOR' + this.itemCount_);
+      }*/
+      var input = this.appendDummyInput('COLOR' + this.itemCount_);
+      //if (this.itemCount_ == 0) {
+        input.setAlign(Blockly.ALIGN_RIGHT)
+             .appendField("Color " + (this.itemCount_+1))
+             .appendField(new Blockly.FieldColour(colour_rgb), "RGB" + this.itemCount_);
+      //}
+      // Reconnect any child blocks.
+      if (itemBlock.valueConnection_) {
+        input.connection.connect(itemBlock.valueConnection_);
+      }
+      this.itemCount_++;
+      itemBlock = itemBlock.nextConnection &&
+          itemBlock.nextConnection.targetBlock();
+    }
+    if (this.itemCount_ == 0) {
+      this.appendDummyInput('COLOR0')
+          .setAlign(Blockly.ALIGN_RIGHT)
+          .appendField("Color 1")
+          .appendField(new Blockly.FieldColour("#00ff00"), "RGB0");
+    }
+  }
+  /*saveConnections: function(containerBlock) {
+    // Store a pointer to any connected child blocks.
+    var itemBlock = containerBlock.getInputTargetBlock('STACK');
+    var x = 0;
+    while (itemBlock) {
+      var input = this.getInput('COLOR' + x);
+      itemBlock.valueConnection_ = input && input.connection.targetConnection;
+      x++;
+      itemBlock = itemBlock.nextConnection &&
+          itemBlock.nextConnection.targetBlock();
+    }
+  }*/
+};
+
+Blockly.Blocks['grove_rgb_led_container'] = {
+  // Container.
+  init: function() {
+    this.setColour(190);
+    this.appendDummyInput()
+        .appendField("Container");
+    this.appendStatementInput('STACK');
+    this.setTooltip("Add, remove items to reconfigure this chain");
+    this.contextMenu = false;
+  }
+};
+
+Blockly.Blocks['grove_rgb_led_item'] = {
+  // Add items.
+  init: function() {
+    this.setColour(190);
+    this.appendDummyInput()
+        .appendField("Item");
+    this.setPreviousStatement(true);
+    this.setNextStatement(true);
+    this.setTooltip("Add an item to the chain");
+    this.contextMenu = false;
+  }
+};
+
+Blockly.Blocks['grove_bluetooth_slave'] = {
+  category: 'Network',
+  helpUrl: 'http://www.seeedstudio.com/wiki/Grove_-_Serial_Bluetooth',
+  init: function() {
+    this.setColour(190);
+    this.appendDummyInput()
+      .appendField("Bluetooth Slave")
+      .appendField(new Blockly.FieldImage("http://www.seeedstudio.com/wiki/File:Twigbt00.jpg", 64, 64))
+      .appendField("PIN#")
+      .appendField(new Blockly.FieldDropdown(profile.default.digital), "PIN")
+    this.appendDummyInput()
+      .setAlign(Blockly.ALIGN_RIGHT)
+      .appendField("Name")
+      .appendField(new Blockly.FieldTextInput('blocklyduino'), 'NAME');
+    this.appendDummyInput()
+      .setAlign(Blockly.ALIGN_RIGHT)
+      .appendField("Pincode")
+      .appendField(new Blockly.FieldTextInput('0000'), 'PINCODE');
+    this.appendStatementInput("RCV")
+      .setAlign(Blockly.ALIGN_RIGHT)
+      .appendField("Receive");
+    this.appendStatementInput("SNT")
+      .setAlign(Blockly.ALIGN_RIGHT)
+      .appendField("Send");
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+    this.setTooltip('Bluetooth V2.0+EDR slave. Support single slave per board');
+  }
+};
+//http://www.seeedstudio.com/wiki/File:Twig-Temp%26Humi.jpg
+//http://www.seeedstudio.com/wiki/Grove-_Temperature_and_Humidity_Sensor
+
+//http://www.seeedstudio.com/wiki/Grove_-_125KHz_RFID_Reader
+
+/*
+void setup()
+{
+	pinMode( 3 , OUTPUT);
+	pinMode( 1 , INPUT);
+}
+
+void loop()
+{
+	if (digitalRead( 1))
+	{
+		digitalWrite( 3 , HIGH);
+	}
+	else
+	{
+		digitalWrite( 1 , LOW);
+	}
+}
+*/

src/blockly/blocks/lists.js

@@ -0,0 +1,681 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2012 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview List blocks for Blockly.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.Blocks.lists');
+
+goog.require('Blockly.Blocks');
+
+
+/**
+ * Common HSV hue for all blocks in this category.
+ */
+Blockly.Blocks.lists.HUE = 260;
+
+Blockly.Blocks['lists_create_empty'] = {
+  /**
+   * Block for creating an empty list.
+   * @this Blockly.Block
+   */
+  init: function() {
+    this.setHelpUrl(Blockly.Msg.LISTS_CREATE_EMPTY_HELPURL);
+    this.setColour(Blockly.Blocks.lists.HUE);
+    this.setOutput(true, 'Array');
+    this.appendDummyInput()
+        .appendField(Blockly.Msg.LISTS_CREATE_EMPTY_TITLE);
+    this.setTooltip(Blockly.Msg.LISTS_CREATE_EMPTY_TOOLTIP);
+  }
+};
+
+Blockly.Blocks['lists_create_with'] = {
+  /**
+   * Block for creating a list with any number of elements of any type.
+   * @this Blockly.Block
+   */
+  init: function() {
+    this.setHelpUrl(Blockly.Msg.LISTS_CREATE_WITH_HELPURL);
+    this.setColour(Blockly.Blocks.lists.HUE);
+    this.itemCount_ = 3;
+    this.updateShape_();
+    this.setOutput(true, 'Array');
+    this.setMutator(new Blockly.Mutator(['lists_create_with_item']));
+    this.setTooltip(Blockly.Msg.LISTS_CREATE_WITH_TOOLTIP);
+  },
+  /**
+   * Create XML to represent list inputs.
+   * @return {Element} XML storage element.
+   * @this Blockly.Block
+   */
+  mutationToDom: function() {
+    var container = document.createElement('mutation');
+    container.setAttribute('items', this.itemCount_);
+    return container;
+  },
+  /**
+   * Parse XML to restore the list inputs.
+   * @param {!Element} xmlElement XML storage element.
+   * @this Blockly.Block
+   */
+  domToMutation: function(xmlElement) {
+    this.itemCount_ = parseInt(xmlElement.getAttribute('items'), 10);
+    this.updateShape_();
+  },
+  /**
+   * Populate the mutator's dialog with this block's components.
+   * @param {!Blockly.Workspace} workspace Mutator's workspace.
+   * @return {!Blockly.Block} Root block in mutator.
+   * @this Blockly.Block
+   */
+  decompose: function(workspace) {
+    var containerBlock =
+        Blockly.Block.obtain(workspace, 'lists_create_with_container');
+    containerBlock.initSvg();
+    var connection = containerBlock.getInput('STACK').connection;
+    for (var i = 0; i < this.itemCount_; i++) {
+      var itemBlock = Blockly.Block.obtain(workspace, 'lists_create_with_item');
+      itemBlock.initSvg();
+      connection.connect(itemBlock.previousConnection);
+      connection = itemBlock.nextConnection;
+    }
+    return containerBlock;
+  },
+  /**
+   * Reconfigure this block based on the mutator dialog's components.
+   * @param {!Blockly.Block} containerBlock Root block in mutator.
+   * @this Blockly.Block
+   */
+  compose: function(containerBlock) {
+    var itemBlock = containerBlock.getInputTargetBlock('STACK');
+    // Count number of inputs.
+    var connections = [];
+    var i = 0;
+    while (itemBlock) {
+      connections[i] = itemBlock.valueConnection_;
+      itemBlock = itemBlock.nextConnection &&
+          itemBlock.nextConnection.targetBlock();
+      i++;
+    }
+    this.itemCount_ = i;
+    this.updateShape_();
+    // Reconnect any child blocks.
+    for (var i = 0; i < this.itemCount_; i++) {
+      if (connections[i]) {
+        this.getInput('ADD' + i).connection.connect(connections[i]);
+      }
+    }
+  },
+  /**
+   * Store pointers to any connected child blocks.
+   * @param {!Blockly.Block} containerBlock Root block in mutator.
+   * @this Blockly.Block
+   */
+  saveConnections: function(containerBlock) {
+    var itemBlock = containerBlock.getInputTargetBlock('STACK');
+    var i = 0;
+    while (itemBlock) {
+      var input = this.getInput('ADD' + i);
+      itemBlock.valueConnection_ = input && input.connection.targetConnection;
+      i++;
+      itemBlock = itemBlock.nextConnection &&
+          itemBlock.nextConnection.targetBlock();
+    }
+  },
+  /**
+   * Modify this block to have the correct number of inputs.
+   * @private
+   * @this Blockly.Block
+   */
+  updateShape_: function() {
+    // Delete everything.
+    if (this.getInput('EMPTY')) {
+      this.removeInput('EMPTY');
+    } else {
+      var i = 0;
+      while (this.getInput('ADD' + i)) {
+        this.removeInput('ADD' + i);
+        i++;
+      }
+    }
+    // Rebuild block.
+    if (this.itemCount_ == 0) {
+      this.appendDummyInput('EMPTY')
+          .appendField(Blockly.Msg.LISTS_CREATE_EMPTY_TITLE);
+    } else {
+      for (var i = 0; i < this.itemCount_; i++) {
+        var input = this.appendValueInput('ADD' + i);
+        if (i == 0) {
+          input.appendField(Blockly.Msg.LISTS_CREATE_WITH_INPUT_WITH);
+        }
+      }
+    }
+  }
+};
+
+Blockly.Blocks['lists_create_with_container'] = {
+  /**
+   * Mutator block for list container.
+   * @this Blockly.Block
+   */
+  init: function() {
+    this.setColour(Blockly.Blocks.lists.HUE);
+    this.appendDummyInput()
+        .appendField(Blockly.Msg.LISTS_CREATE_WITH_CONTAINER_TITLE_ADD);
+    this.appendStatementInput('STACK');
+    this.setTooltip(Blockly.Msg.LISTS_CREATE_WITH_CONTAINER_TOOLTIP);
+    this.contextMenu = false;
+  }
+};
+
+Blockly.Blocks['lists_create_with_item'] = {
+  /**
+   * Mutator bolck for adding items.
+   * @this Blockly.Block
+   */
+  init: function() {
+    this.setColour(Blockly.Blocks.lists.HUE);
+    this.appendDummyInput()
+        .appendField(Blockly.Msg.LISTS_CREATE_WITH_ITEM_TITLE);
+    this.setPreviousStatement(true);
+    this.setNextStatement(true);
+    this.setTooltip(Blockly.Msg.LISTS_CREATE_WITH_ITEM_TOOLTIP);
+    this.contextMenu = false;
+  }
+};
+
+Blockly.Blocks['lists_repeat'] = {
+  /**
+   * Block for creating a list with one element repeated.
+   * @this Blockly.Block
+   */
+  init: function() {
+    this.jsonInit({
+      "message0": Blockly.Msg.LISTS_REPEAT_TITLE,
+      "args0": [
+        {
+          "type": "input_value",
+          "name": "ITEM"
+        },
+        {
+          "type": "input_value",
+          "name": "NUM",
+          "check": "Number"
+        }
+      ],
+      "output": "Array",
+      "colour": Blockly.Blocks.lists.HUE,
+      "tooltip": Blockly.Msg.LISTS_REPEAT_TOOLTIP,
+      "helpUrl": Blockly.Msg.LISTS_REPEAT_HELPURL
+    });
+  }
+};
+
+Blockly.Blocks['lists_length'] = {
+  /**
+   * Block for list length.
+   * @this Blockly.Block
+   */
+  init: function() {
+    this.jsonInit({
+      "message0": Blockly.Msg.LISTS_LENGTH_TITLE,
+      "args0": [
+        {
+          "type": "input_value",
+          "name": "VALUE",
+          "check": ['String', 'Array']
+        }
+      ],
+      "output": 'Number',
+      "colour": Blockly.Blocks.lists.HUE,
+      "tooltip": Blockly.Msg.LISTS_LENGTH_TOOLTIP,
+      "helpUrl": Blockly.Msg.LISTS_LENGTH_HELPURL
+    });
+  }
+};
+
+Blockly.Blocks['lists_isEmpty'] = {
+  /**
+   * Block for is the list empty?
+   * @this Blockly.Block
+   */
+  init: function() {
+    this.jsonInit({
+      "message0": Blockly.Msg.LISTS_ISEMPTY_TITLE,
+      "args0": [
+        {
+          "type": "input_value",
+          "name": "VALUE",
+          "check": ['String', 'Array']
+        }
+      ],
+      "output": 'Boolean',
+      "colour": Blockly.Blocks.lists.HUE,
+      "tooltip": Blockly.Msg.LISTS_ISEMPTY_TOOLTIP,
+      "helpUrl": Blockly.Msg.LISTS_ISEMPTY_HELPURL
+    });
+  }
+};
+
+Blockly.Blocks['lists_indexOf'] = {
+  /**
+   * Block for finding an item in the list.
+   * @this Blockly.Block
+   */
+  init: function() {
+    var OPERATORS =
+        [[Blockly.Msg.LISTS_INDEX_OF_FIRST, 'FIRST'],
+         [Blockly.Msg.LISTS_INDEX_OF_LAST, 'LAST']];
+    this.setHelpUrl(Blockly.Msg.LISTS_INDEX_OF_HELPURL);
+    this.setColour(Blockly.Blocks.lists.HUE);
+    this.setOutput(true, 'Number');
+    this.appendValueInput('VALUE')
+        .setCheck('Array')
+        .appendField(Blockly.Msg.LISTS_INDEX_OF_INPUT_IN_LIST);
+    this.appendValueInput('FIND')
+        .appendField(new Blockly.FieldDropdown(OPERATORS), 'END');
+    this.setInputsInline(true);
+    this.setTooltip(Blockly.Msg.LISTS_INDEX_OF_TOOLTIP);
+  }
+};
+
+Blockly.Blocks['lists_getIndex'] = {
+  /**
+   * Block for getting element at index.
+   * @this Blockly.Block
+   */
+  init: function() {
+    var MODE =
+        [[Blockly.Msg.LISTS_GET_INDEX_GET, 'GET'],
+         [Blockly.Msg.LISTS_GET_INDEX_GET_REMOVE, 'GET_REMOVE'],
+         [Blockly.Msg.LISTS_GET_INDEX_REMOVE, 'REMOVE']];
+    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_GET_INDEX_HELPURL);
+    this.setColour(Blockly.Blocks.lists.HUE);
+    var modeMenu = new Blockly.FieldDropdown(MODE, function(value) {
+      var isStatement = (value == 'REMOVE');
+      this.sourceBlock_.updateStatement_(isStatement);
+    });
+    this.appendValueInput('VALUE')
+        .setCheck('Array')
+        .appendField(Blockly.Msg.LISTS_GET_INDEX_INPUT_IN_LIST);
+    this.appendDummyInput()
+        .appendField(modeMenu, 'MODE')
+        .appendField('', 'SPACE');
+    this.appendDummyInput('AT');
+    if (Blockly.Msg.LISTS_GET_INDEX_TAIL) {
+      this.appendDummyInput('TAIL')
+          .appendField(Blockly.Msg.LISTS_GET_INDEX_TAIL);
+    }
+    this.setInputsInline(true);
+    this.setOutput(true);
+    this.updateAt_(true);
+    // Assign 'this' to a variable for use in the tooltip closure below.
+    var thisBlock = this;
+    this.setTooltip(function() {
+      var combo = thisBlock.getFieldValue('MODE') + '_' +
+          thisBlock.getFieldValue('WHERE');
+      return Blockly.Msg['LISTS_GET_INDEX_TOOLTIP_' + combo];
+    });
+  },
+  /**
+   * Create XML to represent whether the block is a statement or a value.
+   * Also represent whether there is an 'AT' input.
+   * @return {Element} XML storage element.
+   * @this Blockly.Block
+   */
+  mutationToDom: function() {
+    var container = document.createElement('mutation');
+    var isStatement = !this.outputConnection;
+    container.setAttribute('statement', isStatement);
+    var isAt = this.getInput('AT').type == Blockly.INPUT_VALUE;
+    container.setAttribute('at', isAt);
+    return container;
+  },
+  /**
+   * Parse XML to restore the 'AT' input.
+   * @param {!Element} xmlElement XML storage element.
+   * @this Blockly.Block
+   */
+  domToMutation: function(xmlElement) {
+    // Note: Until January 2013 this block did not have mutations,
+    // so 'statement' defaults to false and 'at' defaults to true.
+    var isStatement = (xmlElement.getAttribute('statement') == 'true');
+    this.updateStatement_(isStatement);
+    var isAt = (xmlElement.getAttribute('at') != 'false');
+    this.updateAt_(isAt);
+  },
+  /**
+   * Switch between a value block and a statement block.
+   * @param {boolean} newStatement True if the block should be a statement.
+   *     False if the block should be a value.
+   * @private
+   * @this Blockly.Block
+   */
+  updateStatement_: function(newStatement) {
+    var oldStatement = !this.outputConnection;
+    if (newStatement != oldStatement) {
+      this.unplug(true, true);
+      if (newStatement) {
+        this.setOutput(false);
+        this.setPreviousStatement(true);
+        this.setNextStatement(true);
+      } else {
+        this.setPreviousStatement(false);
+        this.setNextStatement(false);
+        this.setOutput(true);
+      }
+    }
+  },
+  /**
+   * Create or delete an input for the numeric index.
+   * @param {boolean} isAt True if the input should exist.
+   * @private
+   * @this Blockly.Block
+   */
+  updateAt_: function(isAt) {
+    // Destroy old 'AT' and 'ORDINAL' inputs.
+    this.removeInput('AT');
+    this.removeInput('ORDINAL', true);
+    // Create either a value 'AT' input or a dummy input.
+    if (isAt) {
+      this.appendValueInput('AT').setCheck('Number');
+      if (Blockly.Msg.ORDINAL_NUMBER_SUFFIX) {
+        this.appendDummyInput('ORDINAL')
+            .appendField(Blockly.Msg.ORDINAL_NUMBER_SUFFIX);
+      }
+    } else {
+      this.appendDummyInput('AT');
+    }
+    var menu = new Blockly.FieldDropdown(this.WHERE_OPTIONS, function(value) {
+      var newAt = (value == 'FROM_START') || (value == 'FROM_END');
+      // The 'isAt' variable is available due to this function being a closure.
+      if (newAt != isAt) {
+        var block = this.sourceBlock_;
+        block.updateAt_(newAt);
+        // This menu has been destroyed and replaced.  Update the replacement.
+        block.setFieldValue(value, 'WHERE');
+        return null;
+      }
+      return undefined;
+    });
+    this.getInput('AT').appendField(menu, 'WHERE');
+    if (Blockly.Msg.LISTS_GET_INDEX_TAIL) {
+      this.moveInputBefore('TAIL', null);
+    }
+  }
+};
+
+Blockly.Blocks['lists_setIndex'] = {
+  /**
+   * Block for setting the element at index.
+   * @this Blockly.Block
+   */
+  init: function() {
+    var MODE =
+        [[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(MODE), 'MODE')
+        .appendField('', 'SPACE');
+    this.appendDummyInput('AT');
+    this.appendValueInput('TO')
+        .appendField(Blockly.Msg.LISTS_SET_INDEX_INPUT_TO);
+    this.setInputsInline(true);
+    this.setPreviousStatement(true);
+    this.setNextStatement(true);
+    this.setTooltip(Blockly.Msg.LISTS_SET_INDEX_TOOLTIP);
+    this.updateAt_(true);
+    // Assign 'this' to a variable for use in the tooltip closure below.
+    var thisBlock = this;
+    this.setTooltip(function() {
+      var combo = thisBlock.getFieldValue('MODE') + '_' +
+          thisBlock.getFieldValue('WHERE');
+      return Blockly.Msg['LISTS_SET_INDEX_TOOLTIP_' + combo];
+    });
+  },
+  /**
+   * Create XML to represent whether there is an 'AT' input.
+   * @return {Element} XML storage element.
+   * @this Blockly.Block
+   */
+  mutationToDom: function() {
+    var container = document.createElement('mutation');
+    var isAt = this.getInput('AT').type == Blockly.INPUT_VALUE;
+    container.setAttribute('at', isAt);
+    return container;
+  },
+  /**
+   * Parse XML to restore the 'AT' input.
+   * @param {!Element} xmlElement XML storage element.
+   * @this Blockly.Block
+   */
+  domToMutation: function(xmlElement) {
+    // Note: Until January 2013 this block did not have mutations,
+    // so 'at' defaults to true.
+    var isAt = (xmlElement.getAttribute('at') != 'false');
+    this.updateAt_(isAt);
+  },
+  /**
+   * Create or delete an input for the numeric index.
+   * @param {boolean} isAt True if the input should exist.
+   * @private
+   * @this Blockly.Block
+   */
+  updateAt_: function(isAt) {
+    // Destroy old 'AT' and 'ORDINAL' input.
+    this.removeInput('AT');
+    this.removeInput('ORDINAL', true);
+    // Create either a value 'AT' input or a dummy input.
+    if (isAt) {
+      this.appendValueInput('AT').setCheck('Number');
+      if (Blockly.Msg.ORDINAL_NUMBER_SUFFIX) {
+        this.appendDummyInput('ORDINAL')
+            .appendField(Blockly.Msg.ORDINAL_NUMBER_SUFFIX);
+      }
+    } else {
+      this.appendDummyInput('AT');
+    }
+    var menu = new Blockly.FieldDropdown(this.WHERE_OPTIONS, function(value) {
+      var newAt = (value == 'FROM_START') || (value == 'FROM_END');
+      // The 'isAt' variable is available due to this function being a closure.
+      if (newAt != isAt) {
+        var block = this.sourceBlock_;
+        block.updateAt_(newAt);
+        // This menu has been destroyed and replaced.  Update the replacement.
+        block.setFieldValue(value, 'WHERE');
+        return null;
+      }
+      return undefined;
+    });
+    this.moveInputBefore('AT', 'TO');
+    if (this.getInput('ORDINAL')) {
+      this.moveInputBefore('ORDINAL', 'TO');
+    }
+
+    this.getInput('AT').appendField(menu, 'WHERE');
+  }
+};
+
+Blockly.Blocks['lists_getSublist'] = {
+  /**
+   * Block for getting sublist.
+   * @this Blockly.Block
+   */
+  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');
+    if (Blockly.Msg.LISTS_GET_SUBLIST_TAIL) {
+      this.appendDummyInput('TAIL')
+          .appendField(Blockly.Msg.LISTS_GET_SUBLIST_TAIL);
+    }
+    this.setInputsInline(true);
+    this.setOutput(true, 'Array');
+    this.updateAt_(1, true);
+    this.updateAt_(2, true);
+    this.setTooltip(Blockly.Msg.LISTS_GET_SUBLIST_TOOLTIP);
+  },
+  /**
+   * Create XML to represent whether there are 'AT' inputs.
+   * @return {Element} XML storage element.
+   * @this Blockly.Block
+   */
+  mutationToDom: function() {
+    var container = document.createElement('mutation');
+    var isAt1 = this.getInput('AT1').type == Blockly.INPUT_VALUE;
+    container.setAttribute('at1', isAt1);
+    var isAt2 = this.getInput('AT2').type == Blockly.INPUT_VALUE;
+    container.setAttribute('at2', isAt2);
+    return container;
+  },
+  /**
+   * Parse XML to restore the 'AT' inputs.
+   * @param {!Element} xmlElement XML storage element.
+   * @this Blockly.Block
+   */
+  domToMutation: function(xmlElement) {
+    var isAt1 = (xmlElement.getAttribute('at1') == 'true');
+    var isAt2 = (xmlElement.getAttribute('at2') == 'true');
+    this.updateAt_(1, isAt1);
+    this.updateAt_(2, isAt2);
+  },
+  /**
+   * Create or delete an input for a numeric index.
+   * This block has two such inputs, independant of each other.
+   * @param {number} n Specify first or second input (1 or 2).
+   * @param {boolean} isAt True if the input should exist.
+   * @private
+   * @this Blockly.Block
+   */
+  updateAt_: function(n, isAt) {
+    // Create or delete an input for the numeric index.
+    // Destroy old 'AT' and 'ORDINAL' inputs.
+    this.removeInput('AT' + n);
+    this.removeInput('ORDINAL' + n, true);
+    // Create either a value 'AT' input or a dummy input.
+    if (isAt) {
+      this.appendValueInput('AT' + n).setCheck('Number');
+      if (Blockly.Msg.ORDINAL_NUMBER_SUFFIX) {
+        this.appendDummyInput('ORDINAL' + n)
+            .appendField(Blockly.Msg.ORDINAL_NUMBER_SUFFIX);
+      }
+    } else {
+      this.appendDummyInput('AT' + n);
+    }
+    var menu = new Blockly.FieldDropdown(this['WHERE_OPTIONS_' + n],
+        function(value) {
+      var newAt = (value == 'FROM_START') || (value == 'FROM_END');
+      // The 'isAt' variable is available due to this function being a closure.
+      if (newAt != isAt) {
+        var block = this.sourceBlock_;
+        block.updateAt_(n, newAt);
+        // This menu has been destroyed and replaced.  Update the replacement.
+        block.setFieldValue(value, 'WHERE' + n);
+        return null;
+      }
+      return undefined;
+    });
+    this.getInput('AT' + n)
+        .appendField(menu, 'WHERE' + n);
+    if (n == 1) {
+      this.moveInputBefore('AT1', 'AT2');
+      if (this.getInput('ORDINAL1')) {
+        this.moveInputBefore('ORDINAL1', 'AT2');
+      }
+    }
+    if (Blockly.Msg.LISTS_GET_SUBLIST_TAIL) {
+      this.moveInputBefore('TAIL', null);
+    }
+  }
+};
+
+Blockly.Blocks['lists_split'] = {
+  /**
+   * Block for splitting text into a list, or joining a list into text.
+   * @this Blockly.Block
+   */
+  init: function() {
+    // Assign 'this' to a variable for use in the closures below.
+    var thisBlock = this;
+    var dropdown = new Blockly.FieldDropdown(
+        [[Blockly.Msg.LISTS_SPLIT_LIST_FROM_TEXT, 'SPLIT'],
+         [Blockly.Msg.LISTS_SPLIT_TEXT_FROM_LIST, 'JOIN']],
+        function(newOp) {
+          if (newOp == 'SPLIT') {
+            thisBlock.outputConnection.setCheck('Array');
+            thisBlock.getInput('INPUT').setCheck('String');
+          } else {
+            thisBlock.outputConnection.setCheck('String');
+            thisBlock.getInput('INPUT').setCheck('Array');
+          }
+        });
+    this.setHelpUrl(Blockly.Msg.LISTS_SPLIT_HELPURL);
+    this.setColour(Blockly.Blocks.lists.HUE);
+    this.appendValueInput('INPUT')
+        .setCheck('String')
+        .appendField(dropdown, 'MODE');
+    this.appendValueInput('DELIM')
+        .setCheck('String')
+        .appendField(Blockly.Msg.LISTS_SPLIT_WITH_DELIMITER);
+    this.setInputsInline(true);
+    this.setOutput(true, 'Array');
+    this.setTooltip(function() {
+      var mode = thisBlock.getFieldValue('MODE');
+      if (mode == 'SPLIT') {
+        return Blockly.Msg.LISTS_SPLIT_TOOLTIP_SPLIT;
+      } else if (mode == 'JOIN') {
+        return Blockly.Msg.LISTS_SPLIT_TOOLTIP_JOIN;
+      }
+      throw 'Unknown mode: ' + mode;
+    });
+  }
+};

src/blockly/blocks/logic.js

@@ -0,0 +1,464 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2012 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Logic blocks for Blockly.
+ * @author q.neutron@gmail.com (Quynh Neutron)
+ */
+'use strict';
+
+goog.provide('Blockly.Blocks.logic');
+
+goog.require('Blockly.Blocks');
+
+
+/**
+ * Common HSV hue for all blocks in this category.
+ */
+Blockly.Blocks.logic.HUE = 210;
+
+Blockly.Blocks['controls_if'] = {
+  /**
+   * Block for if/elseif/else condition.
+   * @this Blockly.Block
+   */
+  init: function() {
+    this.setHelpUrl(Blockly.Msg.CONTROLS_IF_HELPURL);
+    this.setColour(Blockly.Blocks.logic.HUE);
+    this.appendValueInput('IF0')
+        .setCheck('Boolean')
+        .appendField(Blockly.Msg.CONTROLS_IF_MSG_IF);
+    this.appendStatementInput('DO0')
+        .appendField(Blockly.Msg.CONTROLS_IF_MSG_THEN);
+    this.setPreviousStatement(true);
+    this.setNextStatement(true);
+    this.setMutator(new Blockly.Mutator(['controls_if_elseif',
+                                         'controls_if_else']));
+    // Assign 'this' to a variable for use in the tooltip closure below.
+    var thisBlock = this;
+    this.setTooltip(function() {
+      if (!thisBlock.elseifCount_ && !thisBlock.elseCount_) {
+        return Blockly.Msg.CONTROLS_IF_TOOLTIP_1;
+      } else if (!thisBlock.elseifCount_ && thisBlock.elseCount_) {
+        return Blockly.Msg.CONTROLS_IF_TOOLTIP_2;
+      } else if (thisBlock.elseifCount_ && !thisBlock.elseCount_) {
+        return Blockly.Msg.CONTROLS_IF_TOOLTIP_3;
+      } else if (thisBlock.elseifCount_ && thisBlock.elseCount_) {
+        return Blockly.Msg.CONTROLS_IF_TOOLTIP_4;
+      }
+      return '';
+    });
+    this.elseifCount_ = 0;
+    this.elseCount_ = 0;
+  },
+  /**
+   * Create XML to represent the number of else-if and else inputs.
+   * @return {Element} XML storage element.
+   * @this Blockly.Block
+   */
+  mutationToDom: function() {
+    if (!this.elseifCount_ && !this.elseCount_) {
+      return null;
+    }
+    var container = document.createElement('mutation');
+    if (this.elseifCount_) {
+      container.setAttribute('elseif', this.elseifCount_);
+    }
+    if (this.elseCount_) {
+      container.setAttribute('else', 1);
+    }
+    return container;
+  },
+  /**
+   * Parse XML to restore the else-if and else inputs.
+   * @param {!Element} xmlElement XML storage element.
+   * @this Blockly.Block
+   */
+  domToMutation: function(xmlElement) {
+    this.elseifCount_ = parseInt(xmlElement.getAttribute('elseif'), 10) || 0;
+    this.elseCount_ = parseInt(xmlElement.getAttribute('else'), 10) || 0;
+    for (var i = 1; i <= this.elseifCount_; i++) {
+      this.appendValueInput('IF' + i)
+          .setCheck('Boolean')
+          .appendField(Blockly.Msg.CONTROLS_IF_MSG_ELSEIF);
+      this.appendStatementInput('DO' + i)
+          .appendField(Blockly.Msg.CONTROLS_IF_MSG_THEN);
+    }
+    if (this.elseCount_) {
+      this.appendStatementInput('ELSE')
+          .appendField(Blockly.Msg.CONTROLS_IF_MSG_ELSE);
+    }
+  },
+  /**
+   * Populate the mutator's dialog with this block's components.
+   * @param {!Blockly.Workspace} workspace Mutator's workspace.
+   * @return {!Blockly.Block} Root block in mutator.
+   * @this Blockly.Block
+   */
+  decompose: function(workspace) {
+    var containerBlock = Blockly.Block.obtain(workspace, 'controls_if_if');
+    containerBlock.initSvg();
+    var connection = containerBlock.getInput('STACK').connection;
+    for (var i = 1; i <= this.elseifCount_; i++) {
+      var elseifBlock = Blockly.Block.obtain(workspace, 'controls_if_elseif');
+      elseifBlock.initSvg();
+      connection.connect(elseifBlock.previousConnection);
+      connection = elseifBlock.nextConnection;
+    }
+    if (this.elseCount_) {
+      var elseBlock = Blockly.Block.obtain(workspace, 'controls_if_else');
+      elseBlock.initSvg();
+      connection.connect(elseBlock.previousConnection);
+    }
+    return containerBlock;
+  },
+  /**
+   * Reconfigure this block based on the mutator dialog's components.
+   * @param {!Blockly.Block} containerBlock Root block in mutator.
+   * @this Blockly.Block
+   */
+  compose: function(containerBlock) {
+    // Disconnect the else input blocks and remove the inputs.
+    if (this.elseCount_) {
+      this.removeInput('ELSE');
+    }
+    this.elseCount_ = 0;
+    // Disconnect all the elseif input blocks and remove the inputs.
+    for (var i = this.elseifCount_; i > 0; i--) {
+      this.removeInput('IF' + i);
+      this.removeInput('DO' + i);
+    }
+    this.elseifCount_ = 0;
+    // Rebuild the block's optional inputs.
+    var clauseBlock = containerBlock.getInputTargetBlock('STACK');
+    while (clauseBlock) {
+      switch (clauseBlock.type) {
+        case 'controls_if_elseif':
+          this.elseifCount_++;
+          var ifInput = this.appendValueInput('IF' + this.elseifCount_)
+              .setCheck('Boolean')
+              .appendField(Blockly.Msg.CONTROLS_IF_MSG_ELSEIF);
+          var doInput = this.appendStatementInput('DO' + this.elseifCount_);
+          doInput.appendField(Blockly.Msg.CONTROLS_IF_MSG_THEN);
+          // Reconnect any child blocks.
+          if (clauseBlock.valueConnection_) {
+            ifInput.connection.connect(clauseBlock.valueConnection_);
+          }
+          if (clauseBlock.statementConnection_) {
+            doInput.connection.connect(clauseBlock.statementConnection_);
+          }
+          break;
+        case 'controls_if_else':
+          this.elseCount_++;
+          var elseInput = this.appendStatementInput('ELSE');
+          elseInput.appendField(Blockly.Msg.CONTROLS_IF_MSG_ELSE);
+          // Reconnect any child blocks.
+          if (clauseBlock.statementConnection_) {
+            elseInput.connection.connect(clauseBlock.statementConnection_);
+          }
+          break;
+        default:
+          throw 'Unknown block type.';
+      }
+      clauseBlock = clauseBlock.nextConnection &&
+          clauseBlock.nextConnection.targetBlock();
+    }
+  },
+  /**
+   * Store pointers to any connected child blocks.
+   * @param {!Blockly.Block} containerBlock Root block in mutator.
+   * @this Blockly.Block
+   */
+  saveConnections: function(containerBlock) {
+    var clauseBlock = containerBlock.getInputTargetBlock('STACK');
+    var i = 1;
+    while (clauseBlock) {
+      switch (clauseBlock.type) {
+        case 'controls_if_elseif':
+          var inputIf = this.getInput('IF' + i);
+          var inputDo = this.getInput('DO' + i);
+          clauseBlock.valueConnection_ =
+              inputIf && inputIf.connection.targetConnection;
+          clauseBlock.statementConnection_ =
+              inputDo && inputDo.connection.targetConnection;
+          i++;
+          break;
+        case 'controls_if_else':
+          var inputDo = this.getInput('ELSE');
+          clauseBlock.statementConnection_ =
+              inputDo && inputDo.connection.targetConnection;
+          break;
+        default:
+          throw 'Unknown block type.';
+      }
+      clauseBlock = clauseBlock.nextConnection &&
+          clauseBlock.nextConnection.targetBlock();
+    }
+  }
+};
+
+Blockly.Blocks['controls_if_if'] = {
+  /**
+   * Mutator block for if container.
+   * @this Blockly.Block
+   */
+  init: function() {
+    this.setColour(Blockly.Blocks.logic.HUE);
+    this.appendDummyInput()
+        .appendField(Blockly.Msg.CONTROLS_IF_IF_TITLE_IF);
+    this.appendStatementInput('STACK');
+    this.setTooltip(Blockly.Msg.CONTROLS_IF_IF_TOOLTIP);
+    this.contextMenu = false;
+  }
+};
+
+Blockly.Blocks['controls_if_elseif'] = {
+  /**
+   * Mutator bolck for else-if condition.
+   * @this Blockly.Block
+   */
+  init: function() {
+    this.setColour(Blockly.Blocks.logic.HUE);
+    this.appendDummyInput()
+        .appendField(Blockly.Msg.CONTROLS_IF_ELSEIF_TITLE_ELSEIF);
+    this.setPreviousStatement(true);
+    this.setNextStatement(true);
+    this.setTooltip(Blockly.Msg.CONTROLS_IF_ELSEIF_TOOLTIP);
+    this.contextMenu = false;
+  }
+};
+
+Blockly.Blocks['controls_if_else'] = {
+  /**
+   * Mutator block for else condition.
+   * @this Blockly.Block
+   */
+  init: function() {
+    this.setColour(Blockly.Blocks.logic.HUE);
+    this.appendDummyInput()
+        .appendField(Blockly.Msg.CONTROLS_IF_ELSE_TITLE_ELSE);
+    this.setPreviousStatement(true);
+    this.setTooltip(Blockly.Msg.CONTROLS_IF_ELSE_TOOLTIP);
+    this.contextMenu = false;
+  }
+};
+
+Blockly.Blocks['logic_compare'] = {
+  /**
+   * Block for comparison operator.
+   * @this Blockly.Block
+   */
+  init: function() {
+    var OPERATORS = this.RTL ? [
+          ['=', 'EQ'],
+          ['\u2260', 'NEQ'],
+          ['>', 'LT'],
+          ['\u2265', 'LTE'],
+          ['<', 'GT'],
+          ['\u2264', 'GTE']
+        ] : [
+          ['=', 'EQ'],
+          ['\u2260', 'NEQ'],
+          ['<', 'LT'],
+          ['\u2264', 'LTE'],
+          ['>', 'GT'],
+          ['\u2265', 'GTE']
+        ];
+    this.setHelpUrl(Blockly.Msg.LOGIC_COMPARE_HELPURL);
+    this.setColour(Blockly.Blocks.logic.HUE);
+    this.setOutput(true, 'Boolean');
+    this.appendValueInput('A');
+    this.appendValueInput('B')
+        .appendField(new Blockly.FieldDropdown(OPERATORS), 'OP');
+    this.setInputsInline(true);
+    // Assign 'this' to a variable for use in the tooltip closure below.
+    var thisBlock = this;
+    this.setTooltip(function() {
+      var op = thisBlock.getFieldValue('OP');
+      var TOOLTIPS = {
+        '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
+      };
+      return TOOLTIPS[op];
+    });
+    this.prevBlocks_ = [null, null];
+  },
+  /**
+   * Called whenever anything on the workspace changes.
+   * Prevent mismatched types from being compared.
+   * @this Blockly.Block
+   */
+  onchange: function() {
+    var blockA = this.getInputTargetBlock('A');
+    var blockB = this.getInputTargetBlock('B');
+    // Disconnect blocks that existed prior to this change if they don't match.
+    if (blockA && blockB &&
+        !blockA.outputConnection.checkType_(blockB.outputConnection)) {
+      // Mismatch between two inputs.  Disconnect previous and bump it away.
+      for (var i = 0; i < this.prevBlocks_.length; i++) {
+        var block = this.prevBlocks_[i];
+        if (block === blockA || block === blockB) {
+          block.setParent(null);
+          block.bumpNeighbours_();
+        }
+      }
+    }
+    this.prevBlocks_[0] = blockA;
+    this.prevBlocks_[1] = blockB;
+  }
+};
+
+Blockly.Blocks['logic_operation'] = {
+  /**
+   * Block for logical operations: 'and', 'or'.
+   * @this Blockly.Block
+   */
+  init: function() {
+    var OPERATORS =
+        [[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(true, 'Boolean');
+    this.appendValueInput('A')
+        .setCheck('Boolean');
+    this.appendValueInput('B')
+        .setCheck('Boolean')
+        .appendField(new Blockly.FieldDropdown(OPERATORS), 'OP');
+    this.setInputsInline(true);
+    // Assign 'this' to a variable for use in the tooltip closure below.
+    var thisBlock = this;
+    this.setTooltip(function() {
+      var op = thisBlock.getFieldValue('OP');
+      var TOOLTIPS = {
+        'AND': Blockly.Msg.LOGIC_OPERATION_TOOLTIP_AND,
+        'OR': Blockly.Msg.LOGIC_OPERATION_TOOLTIP_OR
+      };
+      return TOOLTIPS[op];
+    });
+  }
+};
+
+Blockly.Blocks['logic_negate'] = {
+  /**
+   * Block for negation.
+   * @this Blockly.Block
+   */
+  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'] = {
+  /**
+   * Block for boolean data type: true and false.
+   * @this Blockly.Block
+   */
+  init: function() {
+    var BOOLEANS =
+        [[Blockly.Msg.LOGIC_BOOLEAN_TRUE, 'TRUE'],
+         [Blockly.Msg.LOGIC_BOOLEAN_FALSE, 'FALSE']];
+    this.setHelpUrl(Blockly.Msg.LOGIC_BOOLEAN_HELPURL);
+    this.setColour(Blockly.Blocks.logic.HUE);
+    this.setOutput(true, 'Boolean');
+    this.appendDummyInput()
+        .appendField(new Blockly.FieldDropdown(BOOLEANS), 'BOOL');
+    this.setTooltip(Blockly.Msg.LOGIC_BOOLEAN_TOOLTIP);
+  }
+};
+
+Blockly.Blocks['logic_null'] = {
+  /**
+   * Block for null data type.
+   * @this Blockly.Block
+   */
+  init: function() {
+    this.setHelpUrl(Blockly.Msg.LOGIC_NULL_HELPURL);
+    this.setColour(Blockly.Blocks.logic.HUE);
+    this.setOutput(true);
+    this.appendDummyInput()
+        .appendField(Blockly.Msg.LOGIC_NULL);
+    this.setTooltip(Blockly.Msg.LOGIC_NULL_TOOLTIP);
+  }
+};
+
+Blockly.Blocks['logic_ternary'] = {
+  /**
+   * Block for ternary operator.
+   * @this Blockly.Block
+   */
+  init: function() {
+    this.setHelpUrl(Blockly.Msg.LOGIC_TERNARY_HELPURL);
+    this.setColour(Blockly.Blocks.logic.HUE);
+    this.appendValueInput('IF')
+        .setCheck('Boolean')
+        .appendField(Blockly.Msg.LOGIC_TERNARY_CONDITION);
+    this.appendValueInput('THEN')
+        .appendField(Blockly.Msg.LOGIC_TERNARY_IF_TRUE);
+    this.appendValueInput('ELSE')
+        .appendField(Blockly.Msg.LOGIC_TERNARY_IF_FALSE);
+    this.setOutput(true);
+    this.setTooltip(Blockly.Msg.LOGIC_TERNARY_TOOLTIP);
+    this.prevParentConnection_ = null;
+  },
+  /**
+   * Called whenever anything on the workspace changes.
+   * Prevent mismatched types.
+   * @this Blockly.Block
+   */
+  onchange: function() {
+    var blockA = this.getInputTargetBlock('THEN');
+    var blockB = this.getInputTargetBlock('ELSE');
+    var parentConnection = this.outputConnection.targetConnection;
+    // Disconnect blocks that existed prior to this change if they don't match.
+    if ((blockA || blockB) && parentConnection) {
+      for (var i = 0; i < 2; i++) {
+        var block = (i == 1) ? blockA : blockB;
+        if (block && !block.outputConnection.checkType_(parentConnection)) {
+          if (parentConnection === this.prevParentConnection_) {
+            this.setParent(null);
+            parentConnection.sourceBlock_.bumpNeighbours_();
+          } else {
+            block.setParent(null);
+            block.bumpNeighbours_();
+          }
+        }
+      }
+    }
+    this.prevParentConnection_ = parentConnection;
+  }
+};

src/blockly/blocks/loops.js

@@ -0,0 +1,318 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2012 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Loop blocks for Blockly.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.Blocks.loops');
+
+goog.require('Blockly.Blocks');
+
+
+/**
+ * Common HSV hue for all blocks in this category.
+ */
+Blockly.Blocks.loops.HUE = 120;
+
+Blockly.Blocks['controls_repeat'] = {
+  /**
+   * Block for repeat n times (internal number).
+   * @this Blockly.Block
+   */
+  init: function() {
+    this.jsonInit({
+      "message0": Blockly.Msg.CONTROLS_REPEAT_TITLE,
+      "args0": [
+        {
+          "type": "field_input",
+          "name": "TIMES",
+          "text": "10"
+        }
+      ],
+      "previousStatement": null,
+      "nextStatement": null,
+      "colour": Blockly.Blocks.loops.HUE,
+      "tooltip": Blockly.Msg.CONTROLS_REPEAT_TOOLTIP,
+      "helpUrl": Blockly.Msg.CONTROLS_REPEAT_HELPURL
+    });
+    this.appendStatementInput('DO')
+        .appendField(Blockly.Msg.CONTROLS_REPEAT_INPUT_DO);
+    this.getField('TIMES').setChangeHandler(
+        Blockly.FieldTextInput.nonnegativeIntegerValidator);
+  }
+};
+
+Blockly.Blocks['controls_repeat_ext'] = {
+  /**
+   * Block for repeat n times (external number).
+   * @this Blockly.Block
+   */
+  init: function() {
+    this.jsonInit({
+      "message0": Blockly.Msg.CONTROLS_REPEAT_TITLE,
+      "args0": [
+        {
+          "type": "input_value",
+          "name": "TIMES",
+          "check": "Number"
+        }
+      ],
+      "previousStatement": null,
+      "nextStatement": null,
+      "colour": Blockly.Blocks.loops.HUE,
+      "tooltip": Blockly.Msg.CONTROLS_REPEAT_TOOLTIP,
+      "helpUrl": Blockly.Msg.CONTROLS_REPEAT_HELPURL
+    });
+    this.appendStatementInput('DO')
+        .appendField(Blockly.Msg.CONTROLS_REPEAT_INPUT_DO);
+  }
+};
+
+Blockly.Blocks['controls_whileUntil'] = {
+  /**
+   * Block for 'do while/until' loop.
+   * @this Blockly.Block
+   */
+  init: function() {
+    var OPERATORS =
+        [[Blockly.Msg.CONTROLS_WHILEUNTIL_OPERATOR_WHILE, 'WHILE'],
+         [Blockly.Msg.CONTROLS_WHILEUNTIL_OPERATOR_UNTIL, 'UNTIL']];
+    this.setHelpUrl(Blockly.Msg.CONTROLS_WHILEUNTIL_HELPURL);
+    this.setColour(Blockly.Blocks.loops.HUE);
+    this.appendValueInput('BOOL')
+        .setCheck('Boolean')
+        .appendField(new Blockly.FieldDropdown(OPERATORS), 'MODE');
+    this.appendStatementInput('DO')
+        .appendField(Blockly.Msg.CONTROLS_WHILEUNTIL_INPUT_DO);
+    this.setPreviousStatement(true);
+    this.setNextStatement(true);
+    // Assign 'this' to a variable for use in the tooltip closure below.
+    var thisBlock = this;
+    this.setTooltip(function() {
+      var op = thisBlock.getFieldValue('MODE');
+      var TOOLTIPS = {
+        'WHILE': Blockly.Msg.CONTROLS_WHILEUNTIL_TOOLTIP_WHILE,
+        'UNTIL': Blockly.Msg.CONTROLS_WHILEUNTIL_TOOLTIP_UNTIL
+      };
+      return TOOLTIPS[op];
+    });
+  }
+};
+
+Blockly.Blocks['controls_for'] = {
+  /**
+   * Block for 'for' loop.
+   * @this Blockly.Block
+   */
+  init: function() {
+    this.jsonInit({
+      "message0": Blockly.Msg.CONTROLS_FOR_TITLE,
+      "args0": [
+        {
+          "type": "field_variable",
+          "name": "VAR",
+          "variable": null
+        },
+        {
+          "type": "input_value",
+          "name": "FROM",
+          "check": "Number",
+          "align": "RIGHT"
+        },
+        {
+          "type": "input_value",
+          "name": "TO",
+          "check": "Number",
+          "align": "RIGHT"
+        },
+        {
+          "type": "input_value",
+          "name": "BY",
+          "check": "Number",
+          "align": "RIGHT"
+        }
+      ],
+      "inputsInline": true,
+      "previousStatement": null,
+      "nextStatement": null,
+      "colour": Blockly.Blocks.loops.HUE,
+      "helpUrl": Blockly.Msg.CONTROLS_FOR_HELPURL
+    });
+    this.appendStatementInput('DO')
+        .appendField(Blockly.Msg.CONTROLS_FOR_INPUT_DO);
+    // Assign 'this' to a variable for use in the tooltip closure below.
+    var thisBlock = this;
+    this.setTooltip(function() {
+      return Blockly.Msg.CONTROLS_FOR_TOOLTIP.replace('%1',
+          thisBlock.getFieldValue('VAR'));
+    });
+  },
+  /**
+   * Return all variables referenced by this block.
+   * @return {!Array.<string>} List of variable names.
+   * @this Blockly.Block
+   */
+  getVars: function() {
+    return [this.getFieldValue('VAR')];
+  },
+  /**
+   * Notification that a variable is renaming.
+   * If the name matches one of this block's variables, rename it.
+   * @param {string} oldName Previous name of variable.
+   * @param {string} newName Renamed variable.
+   * @this Blockly.Block
+   */
+  renameVar: function(oldName, newName) {
+    if (Blockly.Names.equals(oldName, this.getFieldValue('VAR'))) {
+      this.setFieldValue(newName, 'VAR');
+    }
+  },
+  /**
+   * Add menu option to create getter block for loop variable.
+   * @param {!Array} options List of menu options to add to.
+   * @this Blockly.Block
+   */
+  customContextMenu: function(options) {
+    if (!this.isCollapsed()) {
+      var option = {enabled: true};
+      var name = this.getFieldValue('VAR');
+      option.text = Blockly.Msg.VARIABLES_SET_CREATE_GET.replace('%1', name);
+      var xmlField = goog.dom.createDom('field', null, name);
+      xmlField.setAttribute('name', 'VAR');
+      var xmlBlock = goog.dom.createDom('block', null, xmlField);
+      xmlBlock.setAttribute('type', 'variables_get');
+      option.callback = Blockly.ContextMenu.callbackFactory(this, xmlBlock);
+      options.push(option);
+    }
+  }
+};
+
+Blockly.Blocks['controls_forEach'] = {
+  /**
+   * Block for 'for each' loop.
+   * @this Blockly.Block
+   */
+  init: function() {
+    this.jsonInit({
+      "message0": Blockly.Msg.CONTROLS_FOREACH_TITLE,
+      "args0": [
+        {
+          "type": "field_variable",
+          "name": "VAR",
+          "variable": null
+        },
+        {
+          "type": "input_value",
+          "name": "LIST",
+          "check": "Array"
+        }
+      ],
+      "previousStatement": null,
+      "nextStatement": null,
+      "colour": Blockly.Blocks.loops.HUE,
+      "helpUrl": Blockly.Msg.CONTROLS_FOREACH_HELPURL
+    });
+    this.appendStatementInput('DO')
+        .appendField(Blockly.Msg.CONTROLS_FOREACH_INPUT_DO);
+    // Assign 'this' to a variable for use in the tooltip closure below.
+    var thisBlock = this;
+    this.setTooltip(function() {
+      return Blockly.Msg.CONTROLS_FOREACH_TOOLTIP.replace('%1',
+          thisBlock.getFieldValue('VAR'));
+    });
+  },
+  /**
+   * Return all variables referenced by this block.
+   * @return {!Array.<string>} List of variable names.
+   * @this Blockly.Block
+   */
+  getVars: function() {
+    return [this.getFieldValue('VAR')];
+  },
+  /**
+   * Notification that a variable is renaming.
+   * If the name matches one of this block's variables, rename it.
+   * @param {string} oldName Previous name of variable.
+   * @param {string} newName Renamed variable.
+   * @this Blockly.Block
+   */
+  renameVar: function(oldName, newName) {
+    if (Blockly.Names.equals(oldName, this.getFieldValue('VAR'))) {
+      this.setFieldValue(newName, 'VAR');
+    }
+  },
+  customContextMenu: Blockly.Blocks['controls_for'].customContextMenu
+};
+
+Blockly.Blocks['controls_flow_statements'] = {
+  /**
+   * Block for flow statements: continue, break.
+   * @this Blockly.Block
+   */
+  init: function() {
+    var OPERATORS =
+        [[Blockly.Msg.CONTROLS_FLOW_STATEMENTS_OPERATOR_BREAK, 'BREAK'],
+         [Blockly.Msg.CONTROLS_FLOW_STATEMENTS_OPERATOR_CONTINUE, 'CONTINUE']];
+    this.setHelpUrl(Blockly.Msg.CONTROLS_FLOW_STATEMENTS_HELPURL);
+    this.setColour(Blockly.Blocks.loops.HUE);
+    this.appendDummyInput()
+        .appendField(new Blockly.FieldDropdown(OPERATORS), 'FLOW');
+    this.setPreviousStatement(true);
+    // Assign 'this' to a variable for use in the tooltip closure below.
+    var thisBlock = this;
+    this.setTooltip(function() {
+      var op = thisBlock.getFieldValue('FLOW');
+      var TOOLTIPS = {
+        'BREAK': Blockly.Msg.CONTROLS_FLOW_STATEMENTS_TOOLTIP_BREAK,
+        'CONTINUE': Blockly.Msg.CONTROLS_FLOW_STATEMENTS_TOOLTIP_CONTINUE
+      };
+      return TOOLTIPS[op];
+    });
+  },
+  /**
+   * Called whenever anything on the workspace changes.
+   * Add warning if this flow block is not nested inside a loop.
+   * @this Blockly.Block
+   */
+  onchange: function() {
+    var legal = false;
+    // Is the block nested in a loop?
+    var block = this;
+    do {
+      if (block.type == 'controls_repeat' ||
+          block.type == 'controls_repeat_ext' ||
+          block.type == 'controls_forEach' ||
+          block.type == 'controls_for' ||
+          block.type == 'controls_whileUntil') {
+        legal = true;
+        break;
+      }
+      block = block.getSurroundParent();
+    } while (block);
+    if (legal) {
+      this.setWarningText(null);
+    } else {
+      this.setWarningText(Blockly.Msg.CONTROLS_FLOW_STATEMENTS_WARNING);
+    }
+  }
+};

src/blockly/blocks/math.js

@@ -0,0 +1,481 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2012 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Math blocks for Blockly.
+ * @author q.neutron@gmail.com (Quynh Neutron)
+ */
+'use strict';
+
+goog.provide('Blockly.Blocks.math');
+
+goog.require('Blockly.Blocks');
+
+
+/**
+ * Common HSV hue for all blocks in this category.
+ */
+Blockly.Blocks.math.HUE = 230;
+
+Blockly.Blocks['math_number'] = {
+  /**
+   * Block for numeric value.
+   * @this Blockly.Block
+   */
+  init: function() {
+    this.setHelpUrl(Blockly.Msg.MATH_NUMBER_HELPURL);
+    this.setColour(Blockly.Blocks.math.HUE);
+    this.appendDummyInput()
+        .appendField(new Blockly.FieldTextInput('0',
+        Blockly.FieldTextInput.numberValidator), 'NUM');
+    this.setOutput(true, 'Number');
+    this.setTooltip(Blockly.Msg.MATH_NUMBER_TOOLTIP);
+  }
+};
+
+Blockly.Blocks['math_arithmetic'] = {
+  /**
+   * Block for basic arithmetic operator.
+   * @this Blockly.Block
+   */
+  init: function() {
+    var OPERATORS =
+        [[Blockly.Msg.MATH_ADDITION_SYMBOL, 'ADD'],
+         [Blockly.Msg.MATH_SUBTRACTION_SYMBOL, 'MINUS'],
+         [Blockly.Msg.MATH_MULTIPLICATION_SYMBOL, 'MULTIPLY'],
+         [Blockly.Msg.MATH_DIVISION_SYMBOL, 'DIVIDE'],
+         [Blockly.Msg.MATH_POWER_SYMBOL, 'POWER']];
+    this.setHelpUrl(Blockly.Msg.MATH_ARITHMETIC_HELPURL);
+    this.setColour(Blockly.Blocks.math.HUE);
+    this.setOutput(true, 'Number');
+    this.appendValueInput('A')
+        .setCheck('Number');
+    this.appendValueInput('B')
+        .setCheck('Number')
+        .appendField(new Blockly.FieldDropdown(OPERATORS), 'OP');
+    this.setInputsInline(true);
+    // Assign 'this' to a variable for use in the tooltip closure below.
+    var thisBlock = this;
+    this.setTooltip(function() {
+      var mode = thisBlock.getFieldValue('OP');
+      var TOOLTIPS = {
+        'ADD': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_ADD,
+        'MINUS': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_MINUS,
+        'MULTIPLY': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_MULTIPLY,
+        'DIVIDE': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_DIVIDE,
+        'POWER': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_POWER
+      };
+      return TOOLTIPS[mode];
+    });
+  }
+};
+
+Blockly.Blocks['math_single'] = {
+  /**
+   * Block for advanced math operators with single operand.
+   * @this Blockly.Block
+   */
+  init: function() {
+    var OPERATORS =
+        [[Blockly.Msg.MATH_SINGLE_OP_ROOT, 'ROOT'],
+         [Blockly.Msg.MATH_SINGLE_OP_ABSOLUTE, 'ABS'],
+         ['-', 'NEG'],
+         ['ln', 'LN'],
+         ['log10', 'LOG10'],
+         ['e^', 'EXP'],
+         ['10^', 'POW10']];
+    this.setHelpUrl(Blockly.Msg.MATH_SINGLE_HELPURL);
+    this.setColour(Blockly.Blocks.math.HUE);
+    this.setOutput(true, 'Number');
+    this.appendValueInput('NUM')
+        .setCheck('Number')
+        .appendField(new Blockly.FieldDropdown(OPERATORS), 'OP');
+    // Assign 'this' to a variable for use in the tooltip closure below.
+    var thisBlock = this;
+    this.setTooltip(function() {
+      var mode = thisBlock.getFieldValue('OP');
+      var TOOLTIPS = {
+        'ROOT': Blockly.Msg.MATH_SINGLE_TOOLTIP_ROOT,
+        'ABS': Blockly.Msg.MATH_SINGLE_TOOLTIP_ABS,
+        'NEG': Blockly.Msg.MATH_SINGLE_TOOLTIP_NEG,
+        'LN': Blockly.Msg.MATH_SINGLE_TOOLTIP_LN,
+        'LOG10': Blockly.Msg.MATH_SINGLE_TOOLTIP_LOG10,
+        'EXP': Blockly.Msg.MATH_SINGLE_TOOLTIP_EXP,
+        'POW10': Blockly.Msg.MATH_SINGLE_TOOLTIP_POW10
+      };
+      return TOOLTIPS[mode];
+    });
+  }
+};
+
+Blockly.Blocks['math_trig'] = {
+  /**
+   * Block for trigonometry operators.
+   * @this Blockly.Block
+   */
+  init: function() {
+    var OPERATORS =
+        [[Blockly.Msg.MATH_TRIG_SIN, 'SIN'],
+         [Blockly.Msg.MATH_TRIG_COS, 'COS'],
+         [Blockly.Msg.MATH_TRIG_TAN, 'TAN'],
+         [Blockly.Msg.MATH_TRIG_ASIN, 'ASIN'],
+         [Blockly.Msg.MATH_TRIG_ACOS, 'ACOS'],
+         [Blockly.Msg.MATH_TRIG_ATAN, 'ATAN']];
+    this.setHelpUrl(Blockly.Msg.MATH_TRIG_HELPURL);
+    this.setColour(Blockly.Blocks.math.HUE);
+    this.setOutput(true, 'Number');
+    this.appendValueInput('NUM')
+        .setCheck('Number')
+        .appendField(new Blockly.FieldDropdown(OPERATORS), 'OP');
+    // Assign 'this' to a variable for use in the tooltip closure below.
+    var thisBlock = this;
+    this.setTooltip(function() {
+      var mode = thisBlock.getFieldValue('OP');
+      var TOOLTIPS = {
+        'SIN': Blockly.Msg.MATH_TRIG_TOOLTIP_SIN,
+        'COS': Blockly.Msg.MATH_TRIG_TOOLTIP_COS,
+        'TAN': Blockly.Msg.MATH_TRIG_TOOLTIP_TAN,
+        'ASIN': Blockly.Msg.MATH_TRIG_TOOLTIP_ASIN,
+        'ACOS': Blockly.Msg.MATH_TRIG_TOOLTIP_ACOS,
+        'ATAN': Blockly.Msg.MATH_TRIG_TOOLTIP_ATAN
+      };
+      return TOOLTIPS[mode];
+    });
+  }
+};
+
+Blockly.Blocks['math_constant'] = {
+  /**
+   * Block for constants: PI, E, the Golden Ratio, sqrt(2), 1/sqrt(2), INFINITY.
+   * @this Blockly.Block
+   */
+  init: function() {
+    var CONSTANTS =
+        [['\u03c0', 'PI'],
+         ['e', 'E'],
+         ['\u03c6', 'GOLDEN_RATIO'],
+         ['sqrt(2)', 'SQRT2'],
+         ['sqrt(\u00bd)', 'SQRT1_2'],
+         ['\u221e', 'INFINITY']];
+    this.setHelpUrl(Blockly.Msg.MATH_CONSTANT_HELPURL);
+    this.setColour(Blockly.Blocks.math.HUE);
+    this.setOutput(true, 'Number');
+    this.appendDummyInput()
+        .appendField(new Blockly.FieldDropdown(CONSTANTS), 'CONSTANT');
+    this.setTooltip(Blockly.Msg.MATH_CONSTANT_TOOLTIP);
+  }
+};
+
+Blockly.Blocks['math_number_property'] = {
+  /**
+   * Block for checking if a number is even, odd, prime, whole, positive,
+   * negative or if it is divisible by certain number.
+   * @this Blockly.Block
+   */
+  init: function() {
+    var PROPERTIES =
+        [[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');
+    var dropdown = new Blockly.FieldDropdown(PROPERTIES, function(option) {
+      var divisorInput = (option == 'DIVISIBLE_BY');
+      this.sourceBlock_.updateShape_(divisorInput);
+    });
+    this.appendDummyInput()
+        .appendField(dropdown, 'PROPERTY');
+    this.setInputsInline(true);
+    this.setOutput(true, 'Boolean');
+    this.setTooltip(Blockly.Msg.MATH_IS_TOOLTIP);
+  },
+  /**
+   * Create XML to represent whether the 'divisorInput' should be present.
+   * @return {Element} XML storage element.
+   * @this Blockly.Block
+   */
+  mutationToDom: function() {
+    var container = document.createElement('mutation');
+    var divisorInput = (this.getFieldValue('PROPERTY') == 'DIVISIBLE_BY');
+    container.setAttribute('divisor_input', divisorInput);
+    return container;
+  },
+  /**
+   * Parse XML to restore the 'divisorInput'.
+   * @param {!Element} xmlElement XML storage element.
+   * @this Blockly.Block
+   */
+  domToMutation: function(xmlElement) {
+    var divisorInput = (xmlElement.getAttribute('divisor_input') == 'true');
+    this.updateShape_(divisorInput);
+  },
+  /**
+   * Modify this block to have (or not have) an input for 'is divisible by'.
+   * @param {boolean} divisorInput True if this block has a divisor input.
+   * @private
+   * @this Blockly.Block
+   */
+  updateShape_: function(divisorInput) {
+    // Add or remove a Value Input.
+    var inputExists = this.getInput('DIVISOR');
+    if (divisorInput) {
+      if (!inputExists) {
+        this.appendValueInput('DIVISOR')
+            .setCheck('Number');
+      }
+    } else if (inputExists) {
+      this.removeInput('DIVISOR');
+    }
+  }
+};
+
+Blockly.Blocks['math_change'] = {
+  /**
+   * Block for adding to a variable in place.
+   * @this Blockly.Block
+   */
+  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
+    });
+    // Assign 'this' to a variable for use in the tooltip closure below.
+    var thisBlock = this;
+    this.setTooltip(function() {
+      return Blockly.Msg.MATH_CHANGE_TOOLTIP.replace('%1',
+          thisBlock.getFieldValue('VAR'));
+    });
+  },
+  /**
+   * Return all variables referenced by this block.
+   * @return {!Array.<string>} List of variable names.
+   * @this Blockly.Block
+   */
+  getVars: function() {
+    return [this.getFieldValue('VAR')];
+  },
+  /**
+   * Notification that a variable is renaming.
+   * If the name matches one of this block's variables, rename it.
+   * @param {string} oldName Previous name of variable.
+   * @param {string} newName Renamed variable.
+   * @this Blockly.Block
+   */
+  renameVar: function(oldName, newName) {
+    if (Blockly.Names.equals(oldName, this.getFieldValue('VAR'))) {
+      this.setFieldValue(newName, 'VAR');
+    }
+  }
+};
+
+Blockly.Blocks['math_round'] = {
+  /**
+   * Block for rounding functions.
+   * @this Blockly.Block
+   */
+  init: function() {
+    var OPERATORS =
+        [[Blockly.Msg.MATH_ROUND_OPERATOR_ROUND, 'ROUND'],
+         [Blockly.Msg.MATH_ROUND_OPERATOR_ROUNDUP, 'ROUNDUP'],
+         [Blockly.Msg.MATH_ROUND_OPERATOR_ROUNDDOWN, 'ROUNDDOWN']];
+    this.setHelpUrl(Blockly.Msg.MATH_ROUND_HELPURL);
+    this.setColour(Blockly.Blocks.math.HUE);
+    this.setOutput(true, 'Number');
+    this.appendValueInput('NUM')
+        .setCheck('Number')
+        .appendField(new Blockly.FieldDropdown(OPERATORS), 'OP');
+    this.setTooltip(Blockly.Msg.MATH_ROUND_TOOLTIP);
+  }
+};
+
+Blockly.Blocks['math_on_list'] = {
+  /**
+   * Block for evaluating a list of numbers to return sum, average, min, max,
+   * etc.  Some functions also work on text (min, max, mode, median).
+   * @this Blockly.Block
+   */
+  init: function() {
+    var OPERATORS =
+        [[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']];
+    // Assign 'this' to a variable for use in the closures below.
+    var thisBlock = this;
+    this.setHelpUrl(Blockly.Msg.MATH_ONLIST_HELPURL);
+    this.setColour(Blockly.Blocks.math.HUE);
+    this.setOutput(true, 'Number');
+    var dropdown = new Blockly.FieldDropdown(OPERATORS, function(newOp) {
+      if (newOp == 'MODE') {
+        thisBlock.outputConnection.setCheck('Array');
+      } else {
+        thisBlock.outputConnection.setCheck('Number');
+      }
+    });
+    this.appendValueInput('LIST')
+        .setCheck('Array')
+        .appendField(dropdown, 'OP');
+    this.setTooltip(function() {
+      var mode = thisBlock.getFieldValue('OP');
+      var TOOLTIPS = {
+        '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,
+        'RANDOM': Blockly.Msg.MATH_ONLIST_TOOLTIP_RANDOM
+      };
+      return TOOLTIPS[mode];
+    });
+  }
+};
+
+Blockly.Blocks['math_modulo'] = {
+  /**
+   * Block for remainder of a division.
+   * @this Blockly.Block
+   */
+  init: function() {
+    this.jsonInit({
+      "message0": Blockly.Msg.MATH_MODULO_TITLE,
+      "args0": [
+        {
+          "type": "input_value",
+          "name": "DIVIDEND",
+          "check": "Number"
+        },
+        {
+          "type": "input_value",
+          "name": "DIVISOR",
+          "check": "Number"
+        }
+      ],
+      "inputsInline": true,
+      "output": "Number",
+      "colour": Blockly.Blocks.math.HUE,
+      "tooltip": Blockly.Msg.MATH_MODULO_TOOLTIP,
+      "helpUrl": Blockly.Msg.MATH_MODULO_HELPURL
+    });
+  }
+};
+
+Blockly.Blocks['math_constrain'] = {
+  /**
+   * Block for constraining a number between two limits.
+   * @this Blockly.Block
+   */
+  init: function() {
+    this.jsonInit({
+      "message0": Blockly.Msg.MATH_CONSTRAIN_TITLE,
+      "args0": [
+        {
+          "type": "input_value",
+          "name": "VALUE",
+          "check": "Number"
+        },
+        {
+          "type": "input_value",
+          "name": "LOW",
+          "check": "Number"
+        },
+        {
+          "type": "input_value",
+          "name": "HIGH",
+          "check": "Number"
+        }
+      ],
+      "inputsInline": true,
+      "output": "Number",
+      "colour": Blockly.Blocks.math.HUE,
+      "tooltip": Blockly.Msg.MATH_CONSTRAIN_TOOLTIP,
+      "helpUrl": Blockly.Msg.MATH_CONSTRAIN_HELPURL
+    });
+  }
+};
+
+Blockly.Blocks['math_random_int'] = {
+  /**
+   * Block for random integer between [X] and [Y].
+   * @this Blockly.Block
+   */
+  init: function() {
+    this.jsonInit({
+      "message0": Blockly.Msg.MATH_RANDOM_INT_TITLE,
+      "args0": [
+        {
+          "type": "input_value",
+          "name": "FROM",
+          "check": "Number"
+        },
+        {
+          "type": "input_value",
+          "name": "TO",
+          "check": "Number"
+        }
+      ],
+      "inputsInline": true,
+      "output": "Number",
+      "colour": Blockly.Blocks.math.HUE,
+      "tooltip": Blockly.Msg.MATH_RANDOM_INT_TOOLTIP,
+      "helpUrl": Blockly.Msg.MATH_RANDOM_INT_HELPURL
+    });
+  }
+};
+
+Blockly.Blocks['math_random_float'] = {
+  /**
+   * Block for random fraction between 0 and 1.
+   * @this Blockly.Block
+   */
+  init: function() {
+    this.setHelpUrl(Blockly.Msg.MATH_RANDOM_FLOAT_HELPURL);
+    this.setColour(Blockly.Blocks.math.HUE);
+    this.setOutput(true, 'Number');
+    this.appendDummyInput()
+        .appendField(Blockly.Msg.MATH_RANDOM_FLOAT_TITLE_RANDOM);
+    this.setTooltip(Blockly.Msg.MATH_RANDOM_FLOAT_TOOLTIP);
+  }
+};

src/blockly/blocks/procedures.js

@@ -0,0 +1,767 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2012 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Procedure blocks for Blockly.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.Blocks.procedures');
+
+goog.require('Blockly.Blocks');
+
+
+/**
+ * Common HSV hue for all blocks in this category.
+ */
+Blockly.Blocks.procedures.HUE = 290;
+
+Blockly.Blocks['procedures_defnoreturn'] = {
+  /**
+   * Block for defining a procedure with no return value.
+   * @this Blockly.Block
+   */
+  init: function() {
+    this.setHelpUrl(Blockly.Msg.PROCEDURES_DEFNORETURN_HELPURL);
+    this.setColour(Blockly.Blocks.procedures.HUE);
+    var name = Blockly.Procedures.findLegalName(
+        Blockly.Msg.PROCEDURES_DEFNORETURN_PROCEDURE, this);
+    var nameField = new Blockly.FieldTextInput(name,
+        Blockly.Procedures.rename);
+    nameField.setSpellcheck(false);
+    this.appendDummyInput()
+        .appendField(Blockly.Msg.PROCEDURES_DEFNORETURN_TITLE)
+        .appendField(nameField, 'NAME')
+        .appendField('', 'PARAMS');
+    this.setMutator(new Blockly.Mutator(['procedures_mutatorarg']));
+    this.setTooltip(Blockly.Msg.PROCEDURES_DEFNORETURN_TOOLTIP);
+    this.arguments_ = [];
+    this.setStatements_(true);
+    this.statementConnection_ = null;
+  },
+  /**
+   * Add or remove the statement block from this function definition.
+   * @param {boolean} hasStatements True if a statement block is needed.
+   * @this Blockly.Block
+   */
+  setStatements_: function(hasStatements) {
+    if (this.hasStatements_ === hasStatements) {
+      return;
+    }
+    if (hasStatements) {
+      this.appendStatementInput('STACK')
+          .appendField(Blockly.Msg.PROCEDURES_DEFNORETURN_DO);
+      if (this.getInput('RETURN')) {
+        this.moveInputBefore('STACK', 'RETURN');
+      }
+    } else {
+      this.removeInput('STACK', true);
+    }
+    this.hasStatements_ = hasStatements;
+  },
+  /**
+   * Update the display of parameters for this procedure definition block.
+   * Display a warning if there are duplicately named parameters.
+   * @private
+   * @this Blockly.Block
+   */
+  updateParams_: function() {
+    // Check for duplicated arguments.
+    var badArg = false;
+    var hash = {};
+    for (var i = 0; i < this.arguments_.length; i++) {
+      if (hash['arg_' + this.arguments_[i].toLowerCase()]) {
+        badArg = true;
+        break;
+      }
+      hash['arg_' + this.arguments_[i].toLowerCase()] = true;
+    }
+    if (badArg) {
+      this.setWarningText(Blockly.Msg.PROCEDURES_DEF_DUPLICATE_WARNING);
+    } else {
+      this.setWarningText(null);
+    }
+    // Merge the arguments into a human-readable list.
+    var paramString = '';
+    if (this.arguments_.length) {
+      paramString = Blockly.Msg.PROCEDURES_BEFORE_PARAMS +
+          ' ' + this.arguments_.join(', ');
+    }
+    this.setFieldValue(paramString, 'PARAMS');
+  },
+  /**
+   * Create XML to represent the argument inputs.
+   * @return {Element} XML storage element.
+   * @this Blockly.Block
+   */
+  mutationToDom: function() {
+    var container = document.createElement('mutation');
+    for (var i = 0; i < this.arguments_.length; i++) {
+      var parameter = document.createElement('arg');
+      parameter.setAttribute('name', this.arguments_[i]);
+      container.appendChild(parameter);
+    }
+
+    // Save whether the statement input is visible.
+    if (!this.hasStatements_) {
+      container.setAttribute('statements', 'false');
+    }
+    return container;
+  },
+  /**
+   * Parse XML to restore the argument inputs.
+   * @param {!Element} xmlElement XML storage element.
+   * @this Blockly.Block
+   */
+  domToMutation: function(xmlElement) {
+    this.arguments_ = [];
+    for (var i = 0, childNode; childNode = xmlElement.childNodes[i]; i++) {
+      if (childNode.nodeName.toLowerCase() == 'arg') {
+        this.arguments_.push(childNode.getAttribute('name'));
+      }
+    }
+    this.updateParams_();
+
+    // Show or hide the statement input.
+    this.setStatements_(xmlElement.getAttribute('statements') !== 'false');
+  },
+  /**
+   * Populate the mutator's dialog with this block's components.
+   * @param {!Blockly.Workspace} workspace Mutator's workspace.
+   * @return {!Blockly.Block} Root block in mutator.
+   * @this Blockly.Block
+   */
+  decompose: function(workspace) {
+    var containerBlock = Blockly.Block.obtain(workspace,
+                                              'procedures_mutatorcontainer');
+    containerBlock.initSvg();
+
+    // Check/uncheck the allow statement box.
+    if (this.getInput('RETURN')) {
+      containerBlock.setFieldValue(this.hasStatements_ ? 'TRUE' : 'FALSE',
+                                   'STATEMENTS');
+    } else {
+      containerBlock.getInput('STATEMENT_INPUT').setVisible(false);
+    }
+
+    // Parameter list.
+    var connection = containerBlock.getInput('STACK').connection;
+    for (var i = 0; i < this.arguments_.length; i++) {
+      var paramBlock = Blockly.Block.obtain(workspace, 'procedures_mutatorarg');
+      paramBlock.initSvg();
+      paramBlock.setFieldValue(this.arguments_[i], 'NAME');
+      // Store the old location.
+      paramBlock.oldLocation = i;
+      connection.connect(paramBlock.previousConnection);
+      connection = paramBlock.nextConnection;
+    }
+    // Initialize procedure's callers with blank IDs.
+    Blockly.Procedures.mutateCallers(this.getFieldValue('NAME'),
+                                     this.workspace, this.arguments_, null);
+    return containerBlock;
+  },
+  /**
+   * Reconfigure this block based on the mutator dialog's components.
+   * @param {!Blockly.Block} containerBlock Root block in mutator.
+   * @this Blockly.Block
+   */
+  compose: function(containerBlock) {
+    // Parameter list.
+    this.arguments_ = [];
+    this.paramIds_ = [];
+    var paramBlock = containerBlock.getInputTargetBlock('STACK');
+    while (paramBlock) {
+      this.arguments_.push(paramBlock.getFieldValue('NAME'));
+      this.paramIds_.push(paramBlock.id);
+      paramBlock = paramBlock.nextConnection &&
+          paramBlock.nextConnection.targetBlock();
+    }
+    this.updateParams_();
+    Blockly.Procedures.mutateCallers(this.getFieldValue('NAME'),
+        this.workspace, this.arguments_, this.paramIds_);
+
+    // Show/hide the statement input.
+    var hasStatements = containerBlock.getFieldValue('STATEMENTS');
+    if (hasStatements !== null) {
+      hasStatements = hasStatements == 'TRUE';
+      if (this.hasStatements_ != hasStatements) {
+        if (hasStatements) {
+          this.setStatements_(true);
+          // Restore the stack, if one was saved.
+          var stackConnection = this.getInput('STACK').connection;
+          if (stackConnection.targetConnection ||
+              !this.statementConnection_ ||
+              this.statementConnection_.targetConnection ||
+              this.statementConnection_.sourceBlock_.workspace !=
+              this.workspace) {
+            // Block no longer exists or has been attached elsewhere.
+            this.statementConnection_ = null;
+          } else {
+            stackConnection.connect(this.statementConnection_);
+          }
+        } else {
+          // Save the stack, then disconnect it.
+          var stackConnection = this.getInput('STACK').connection;
+          this.statementConnection_ = stackConnection.targetConnection;
+          if (this.statementConnection_) {
+            var stackBlock = stackConnection.targetBlock();
+            stackBlock.setParent(null);
+            stackBlock.bumpNeighbours_();
+          }
+          this.setStatements_(false);
+        }
+      }
+    }
+  },
+  /**
+   * Dispose of any callers.
+   * @this Blockly.Block
+   */
+  dispose: function() {
+    var name = this.getFieldValue('NAME');
+    Blockly.Procedures.disposeCallers(name, this.workspace);
+    // Call parent's destructor.
+    this.constructor.prototype.dispose.apply(this, arguments);
+  },
+  /**
+   * Return the signature of this procedure definition.
+   * @return {!Array} Tuple containing three elements:
+   *     - the name of the defined procedure,
+   *     - a list of all its arguments,
+   *     - that it DOES NOT have a return value.
+   * @this Blockly.Block
+   */
+  getProcedureDef: function() {
+    return [this.getFieldValue('NAME'), this.arguments_, false];
+  },
+  /**
+   * Return all variables referenced by this block.
+   * @return {!Array.<string>} List of variable names.
+   * @this Blockly.Block
+   */
+  getVars: function() {
+    return this.arguments_;
+  },
+  /**
+   * Notification that a variable is renaming.
+   * If the name matches one of this block's variables, rename it.
+   * @param {string} oldName Previous name of variable.
+   * @param {string} newName Renamed variable.
+   * @this Blockly.Block
+   */
+  renameVar: function(oldName, newName) {
+    var change = false;
+    for (var i = 0; i < this.arguments_.length; i++) {
+      if (Blockly.Names.equals(oldName, this.arguments_[i])) {
+        this.arguments_[i] = newName;
+        change = true;
+      }
+    }
+    if (change) {
+      this.updateParams_();
+      // Update the mutator's variables if the mutator is open.
+      if (this.mutator.isVisible()) {
+        var blocks = this.mutator.workspace_.getAllBlocks();
+        for (var i = 0, block; block = blocks[i]; i++) {
+          if (block.type == 'procedures_mutatorarg' &&
+              Blockly.Names.equals(oldName, block.getFieldValue('NAME'))) {
+            block.setFieldValue(newName, 'NAME');
+          }
+        }
+      }
+    }
+  },
+  /**
+   * Add custom menu options to this block's context menu.
+   * @param {!Array} options List of menu options to add to.
+   * @this Blockly.Block
+   */
+  customContextMenu: function(options) {
+    // Add option to create caller.
+    var option = {enabled: true};
+    var name = this.getFieldValue('NAME');
+    option.text = Blockly.Msg.PROCEDURES_CREATE_DO.replace('%1', name);
+    var xmlMutation = goog.dom.createDom('mutation');
+    xmlMutation.setAttribute('name', name);
+    for (var i = 0; i < this.arguments_.length; i++) {
+      var xmlArg = goog.dom.createDom('arg');
+      xmlArg.setAttribute('name', this.arguments_[i]);
+      xmlMutation.appendChild(xmlArg);
+    }
+    var xmlBlock = goog.dom.createDom('block', null, xmlMutation);
+    xmlBlock.setAttribute('type', this.callType_);
+    option.callback = Blockly.ContextMenu.callbackFactory(this, xmlBlock);
+    options.push(option);
+
+    // Add options to create getters for each parameter.
+    if (!this.isCollapsed()) {
+      for (var i = 0; i < this.arguments_.length; i++) {
+        var option = {enabled: true};
+        var name = this.arguments_[i];
+        option.text = Blockly.Msg.VARIABLES_SET_CREATE_GET.replace('%1', name);
+        var xmlField = goog.dom.createDom('field', null, name);
+        xmlField.setAttribute('name', 'VAR');
+        var xmlBlock = goog.dom.createDom('block', null, xmlField);
+        xmlBlock.setAttribute('type', 'variables_get');
+        option.callback = Blockly.ContextMenu.callbackFactory(this, xmlBlock);
+        options.push(option);
+      }
+    }
+  },
+  callType_: 'procedures_callnoreturn'
+};
+
+Blockly.Blocks['procedures_defreturn'] = {
+  /**
+   * Block for defining a procedure with a return value.
+   * @this Blockly.Block
+   */
+  init: function() {
+    this.setHelpUrl(Blockly.Msg.PROCEDURES_DEFRETURN_HELPURL);
+    this.setColour(Blockly.Blocks.procedures.HUE);
+    var name = Blockly.Procedures.findLegalName(
+        Blockly.Msg.PROCEDURES_DEFRETURN_PROCEDURE, this);
+    var nameField = new Blockly.FieldTextInput(name,
+        Blockly.Procedures.rename);
+    nameField.setSpellcheck(false);
+    this.appendDummyInput()
+        .appendField(Blockly.Msg.PROCEDURES_DEFRETURN_TITLE)
+        .appendField(nameField, 'NAME')
+        .appendField('', 'PARAMS');
+    this.appendValueInput('RETURN')
+        .setAlign(Blockly.ALIGN_RIGHT)
+        .appendField(Blockly.Msg.PROCEDURES_DEFRETURN_RETURN)
+        .setCheck(["Number", "Boolean"]);
+    this.setMutator(new Blockly.Mutator(['procedures_mutatorarg']));
+    this.setTooltip(Blockly.Msg.PROCEDURES_DEFRETURN_TOOLTIP);
+    this.arguments_ = [];
+    this.setStatements_(true);
+    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,
+  dispose: Blockly.Blocks['procedures_defnoreturn'].dispose,
+  /**
+   * Return the signature of this procedure definition.
+   * @return {!Array} Tuple containing three elements:
+   *     - the name of the defined procedure,
+   *     - a list of all its arguments,
+   *     - that it DOES have a return value.
+   * @this Blockly.Block
+   */
+  getProcedureDef: function() {
+    return [this.getFieldValue('NAME'), this.arguments_, true];
+  },
+  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'] = {
+  /**
+   * Mutator block for procedure container.
+   * @this Blockly.Block
+   */
+  init: function() {
+    this.setColour(Blockly.Blocks.procedures.HUE);
+    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.setTooltip(Blockly.Msg.PROCEDURES_MUTATORCONTAINER_TOOLTIP);
+    this.contextMenu = false;
+  }
+};
+
+Blockly.Blocks['procedures_mutatorarg'] = {
+  /**
+   * Mutator block for procedure argument.
+   * @this Blockly.Block
+   */
+  init: function() {
+    this.setColour(Blockly.Blocks.procedures.HUE);
+    this.appendDummyInput()
+        .appendField(Blockly.Msg.PROCEDURES_MUTATORARG_TITLE)
+        .appendField(new Blockly.FieldTextInput('x', this.validator_), 'NAME');
+    this.setPreviousStatement(true);
+    this.setNextStatement(true);
+    this.setTooltip(Blockly.Msg.PROCEDURES_MUTATORARG_TOOLTIP);
+    this.contextMenu = false;
+  },
+  /**
+   * Obtain a valid name for the procedure.
+   * Merge runs of whitespace.  Strip leading and trailing whitespace.
+   * Beyond this, all names are legal.
+   * @param {string} newVar User-supplied name.
+   * @return {?string} Valid name, or null if a name was not specified.
+   * @private
+   * @this Blockly.Block
+   */
+  validator_: function(newVar) {
+    newVar = newVar.replace(/[\s\xa0]+/g, ' ').replace(/^ | $/g, '');
+    return newVar || null;
+  }
+};
+
+Blockly.Blocks['procedures_callnoreturn'] = {
+  /**
+   * Block for calling a procedure with no return value.
+   * @this Blockly.Block
+   */
+  init: function() {
+    this.setHelpUrl(Blockly.Msg.PROCEDURES_CALLNORETURN_HELPURL);
+    this.setColour(Blockly.Blocks.procedures.HUE);
+    this.appendDummyInput('TOPROW')
+        .appendField(Blockly.Msg.PROCEDURES_CALLNORETURN_CALL)
+        .appendField('', 'NAME');
+    this.setPreviousStatement(true);
+    this.setNextStatement(true);
+    // Tooltip is set in domToMutation.
+    this.arguments_ = [];
+    this.quarkConnections_ = {};
+    this.quarkArguments_ = null;
+  },
+  /**
+   * Returns the name of the procedure this block calls.
+   * @return {string} Procedure name.
+   * @this Blockly.Block
+   */
+  getProcedureCall: function() {
+    // The NAME field is guaranteed to exist, null will never be returned.
+    return /** @type {string} */ (this.getFieldValue('NAME'));
+  },
+  /**
+   * Notification that a procedure is renaming.
+   * If the name matches this block's procedure, rename it.
+   * @param {string} oldName Previous name of procedure.
+   * @param {string} newName Renamed procedure.
+   * @this Blockly.Block
+   */
+  renameProcedure: function(oldName, newName) {
+    if (Blockly.Names.equals(oldName, this.getProcedureCall())) {
+      this.setFieldValue(newName, 'NAME');
+      this.setTooltip(
+          (this.outputConnection ? Blockly.Msg.PROCEDURES_CALLRETURN_TOOLTIP :
+           Blockly.Msg.PROCEDURES_CALLNORETURN_TOOLTIP)
+          .replace('%1', newName));
+    }
+  },
+  /**
+   * Notification that the procedure's parameters have changed.
+   * @param {!Array.<string>} paramNames New param names, e.g. ['x', 'y', 'z'].
+   * @param {!Array.<string>} paramIds IDs of params (consistent for each
+   *     parameter through the life of a mutator, regardless of param renaming),
+   *     e.g. ['piua', 'f8b_', 'oi.o'].
+   * @this Blockly.Block
+   */
+  setProcedureParameters: function(paramNames, paramIds) {
+    // Data structures:
+    // this.arguments = ['x', 'y']
+    //     Existing param names.
+    // this.quarkConnections_ {piua: null, f8b_: Blockly.Connection}
+    //     Look-up of paramIds to connections plugged into the call block.
+    // this.quarkArguments_ = ['piua', 'f8b_']
+    //     Existing param IDs.
+    // Note that quarkConnections_ may include IDs that no longer exist, but
+    // which might reappear if a param is reattached in the mutator.
+    if (!paramIds) {
+      // Reset the quarks (a mutator is about to open).
+      this.quarkConnections_ = {};
+      this.quarkArguments_ = null;
+      return;
+    }
+    if (goog.array.equals(this.arguments_, paramNames)) {
+      // No change.
+      this.quarkArguments_ = paramIds;
+      return;
+    }
+    this.setCollapsed(false);
+    if (paramIds.length != paramNames.length) {
+      throw 'Error: paramNames and paramIds must be the same length.';
+    }
+    if (!this.quarkArguments_) {
+      // Initialize tracking for this block.
+      this.quarkConnections_ = {};
+      if (paramNames.join('\n') == this.arguments_.join('\n')) {
+        // No change to the parameters, allow quarkConnections_ to be
+        // populated with the existing connections.
+        this.quarkArguments_ = paramIds;
+      } else {
+        this.quarkArguments_ = [];
+      }
+    }
+    // Switch off rendering while the block is rebuilt.
+    var savedRendered = this.rendered;
+    this.rendered = false;
+    // Update the quarkConnections_ with existing connections.
+    for (var i = this.arguments_.length - 1; i >= 0; i--) {
+      var input = this.getInput('ARG' + i);
+      if (input) {
+        var connection = input.connection.targetConnection;
+        this.quarkConnections_[this.quarkArguments_[i]] = connection;
+        // Disconnect all argument blocks and remove all inputs.
+        this.removeInput('ARG' + i);
+      }
+    }
+    // Rebuild the block's arguments.
+    this.arguments_ = [].concat(paramNames);
+    this.renderArgs_();
+    this.quarkArguments_ = paramIds;
+    // Reconnect any child blocks.
+    if (this.quarkArguments_) {
+      for (var i = 0; i < this.arguments_.length; i++) {
+        var input = this.getInput('ARG' + i);
+        var quarkName = this.quarkArguments_[i];
+        if (quarkName in this.quarkConnections_) {
+          var connection = this.quarkConnections_[quarkName];
+          if (!connection || connection.targetConnection ||
+              connection.sourceBlock_.workspace != this.workspace) {
+            // Block no longer exists or has been attached elsewhere.
+            delete this.quarkConnections_[quarkName];
+          } else {
+            input.connection.connect(connection);
+          }
+        }
+      }
+    }
+    // Restore rendering and show the changes.
+    this.rendered = savedRendered;
+    if (this.rendered) {
+      this.render();
+    }
+  },
+  /**
+   * Render the arguments.
+   * @this Blockly.Block
+   * @private
+   */
+  renderArgs_: function() {
+    for (var i = 0; i < this.arguments_.length; i++) {
+      var input = this.appendValueInput('ARG' + i)
+          .setAlign(Blockly.ALIGN_RIGHT)
+          .appendField(this.arguments_[i]);
+      input.init();
+    }
+    // Add 'with:' if there are parameters.
+    var input = this.getInput('TOPROW');
+    if (input) {
+      if (this.arguments_.length) {
+        if (!this.getField('WITH')) {
+          input.appendField(Blockly.Msg.PROCEDURES_CALL_BEFORE_PARAMS, 'WITH');
+          input.init();
+        }
+      } else {
+        if (this.getField('WITH')) {
+          input.removeField('WITH');
+        }
+      }
+    }
+  },
+  /**
+   * Create XML to represent the (non-editable) name and arguments.
+   * @return {Element} XML storage element.
+   * @this Blockly.Block
+   */
+  mutationToDom: function() {
+    var container = document.createElement('mutation');
+    container.setAttribute('name', this.getProcedureCall());
+    for (var i = 0; i < this.arguments_.length; i++) {
+      var parameter = document.createElement('arg');
+      parameter.setAttribute('name', this.arguments_[i]);
+      container.appendChild(parameter);
+    }
+    return container;
+  },
+  /**
+   * Parse XML to restore the (non-editable) name and parameters.
+   * @param {!Element} xmlElement XML storage element.
+   * @this Blockly.Block
+   */
+  domToMutation: function(xmlElement) {
+    var name = xmlElement.getAttribute('name');
+    this.setFieldValue(name, 'NAME');
+    this.setTooltip(
+        (this.outputConnection ? Blockly.Msg.PROCEDURES_CALLRETURN_TOOLTIP :
+         Blockly.Msg.PROCEDURES_CALLNORETURN_TOOLTIP).replace('%1', name));
+    var def = Blockly.Procedures.getDefinition(name, this.workspace);
+    if (def && def.mutator && def.mutator.isVisible()) {
+      // Initialize caller with the mutator's IDs.
+      this.setProcedureParameters(def.arguments_, def.paramIds_);
+    } else {
+      var args = [];
+      for (var i = 0, childNode; childNode = xmlElement.childNodes[i]; i++) {
+        if (childNode.nodeName.toLowerCase() == 'arg') {
+          args.push(childNode.getAttribute('name'));
+        }
+      }
+      // For the second argument (paramIds) use the arguments list as a dummy
+      // list.
+      this.setProcedureParameters(args, args);
+    }
+  },
+  /**
+   * Notification that a variable is renaming.
+   * If the name matches one of this block's variables, rename it.
+   * @param {string} oldName Previous name of variable.
+   * @param {string} newName Renamed variable.
+   * @this Blockly.Block
+   */
+  renameVar: function(oldName, newName) {
+    for (var i = 0; i < this.arguments_.length; i++) {
+      if (Blockly.Names.equals(oldName, this.arguments_[i])) {
+        this.arguments_[i] = newName;
+        this.getInput('ARG' + i).fieldRow[0].setText(newName);
+      }
+    }
+  },
+  /**
+   * Add menu option to find the definition block for this call.
+   * @param {!Array} options List of menu options to add to.
+   * @this Blockly.Block
+   */
+  customContextMenu: function(options) {
+    var option = {enabled: true};
+    option.text = Blockly.Msg.PROCEDURES_HIGHLIGHT_DEF;
+    var name = this.getProcedureCall();
+    var workspace = this.workspace;
+    option.callback = function() {
+      var def = Blockly.Procedures.getDefinition(name, workspace);
+      def && def.select();
+    };
+    options.push(option);
+  }
+};
+
+Blockly.Blocks['procedures_callreturn'] = {
+  /**
+   * Block for calling a procedure with a return value.
+   * @this Blockly.Block
+   */
+  init: function() {
+    this.setHelpUrl(Blockly.Msg.PROCEDURES_CALLRETURN_HELPURL);
+    this.setColour(Blockly.Blocks.procedures.HUE);
+    this.appendDummyInput('TOPROW')
+        .appendField(Blockly.Msg.PROCEDURES_CALLRETURN_CALL)
+        .appendField('', 'NAME');
+    this.setOutput(true);
+    // Tooltip is set in domToMutation.
+    this.arguments_ = [];
+    this.quarkConnections_ = {};
+    this.quarkArguments_ = null;
+  },
+  getProcedureCall: Blockly.Blocks['procedures_callnoreturn'].getProcedureCall,
+  renameProcedure: Blockly.Blocks['procedures_callnoreturn'].renameProcedure,
+  setProcedureParameters:
+      Blockly.Blocks['procedures_callnoreturn'].setProcedureParameters,
+  renderArgs_: Blockly.Blocks['procedures_callnoreturn'].renderArgs_,
+  mutationToDom: Blockly.Blocks['procedures_callnoreturn'].mutationToDom,
+  domToMutation: Blockly.Blocks['procedures_callnoreturn'].domToMutation,
+  renameVar: Blockly.Blocks['procedures_callnoreturn'].renameVar,
+  customContextMenu: Blockly.Blocks['procedures_callnoreturn'].customContextMenu
+};
+
+Blockly.Blocks['procedures_ifreturn'] = {
+  /**
+   * Block for conditionally returning a value from a procedure.
+   * @this Blockly.Block
+   */
+  init: function() {
+    this.setHelpUrl('http://c2.com/cgi/wiki?GuardClause');
+    this.setColour(Blockly.Blocks.procedures.HUE);
+    this.appendValueInput('CONDITION')
+        .setCheck('Boolean')
+        .appendField(Blockly.Msg.CONTROLS_IF_MSG_IF);
+    this.appendValueInput('VALUE')
+        .appendField(Blockly.Msg.PROCEDURES_DEFRETURN_RETURN);
+    this.setInputsInline(true);
+    this.setPreviousStatement(true);
+    this.setNextStatement(true);
+    this.setTooltip(Blockly.Msg.PROCEDURES_IFRETURN_TOOLTIP);
+    this.hasReturnValue_ = true;
+  },
+  /**
+   * Create XML to represent whether this block has a return value.
+   * @return {Element} XML storage element.
+   * @this Blockly.Block
+   */
+  mutationToDom: function() {
+    var container = document.createElement('mutation');
+    container.setAttribute('value', Number(this.hasReturnValue_));
+    return container;
+  },
+  /**
+   * Parse XML to restore whether this block has a return value.
+   * @param {!Element} xmlElement XML storage element.
+   * @this Blockly.Block
+   */
+  domToMutation: function(xmlElement) {
+    var value = xmlElement.getAttribute('value');
+    this.hasReturnValue_ = (value == 1);
+    if (!this.hasReturnValue_) {
+      this.removeInput('VALUE');
+      this.appendDummyInput('VALUE')
+        .appendField(Blockly.Msg.PROCEDURES_DEFRETURN_RETURN);
+    }
+  },
+  /**
+   * Called whenever anything on the workspace changes.
+   * Add warning if this flow block is not nested inside a loop.
+   * @this Blockly.Block
+   */
+  onchange: function() {
+    var legal = false;
+    // Is the block nested in a procedure?
+    var block = this;
+    do {
+      if (block.type == 'procedures_defnoreturn' ||
+          block.type == 'procedures_defreturn') {
+        legal = true;
+        break;
+      }
+      block = block.getSurroundParent();
+    } while (block);
+    if (legal) {
+      // If needed, toggle whether this block has a return value.
+      if (block.type == 'procedures_defnoreturn' && this.hasReturnValue_) {
+        this.removeInput('VALUE');
+        this.appendDummyInput('VALUE')
+          .appendField(Blockly.Msg.PROCEDURES_DEFRETURN_RETURN);
+        this.hasReturnValue_ = false;
+      } else if (block.type == 'procedures_defreturn' &&
+                 !this.hasReturnValue_) {
+        this.removeInput('VALUE');
+        this.appendValueInput('VALUE')
+          .appendField(Blockly.Msg.PROCEDURES_DEFRETURN_RETURN);
+        this.hasReturnValue_ = true;
+      }
+      this.setWarningText(null);
+    } else {
+      this.setWarningText(Blockly.Msg.PROCEDURES_IFRETURN_WARNING);
+    }
+  }
+};

src/blockly/blocks/text.js

@@ -0,0 +1,664 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2012 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Text blocks for Blockly.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.Blocks.texts');
+
+goog.require('Blockly.Blocks');
+
+
+/**
+ * Common HSV hue for all blocks in this category.
+ */
+Blockly.Blocks.texts.HUE = 160;
+
+Blockly.Blocks['text'] = {
+  /**
+   * Block for text value.
+   * @this Blockly.Block
+   */
+  init: function() {
+    this.setHelpUrl(Blockly.Msg.TEXT_TEXT_HELPURL);
+    this.setColour(Blockly.Blocks.texts.HUE);
+    this.appendDummyInput()
+        .appendField(this.newQuote_(true))
+        .appendField(new Blockly.FieldTextInput(''), 'TEXT')
+        .appendField(this.newQuote_(false));
+    this.setOutput(true, 'String');
+    this.setTooltip(Blockly.Msg.TEXT_TEXT_TOOLTIP);
+  },
+  /**
+   * Create an image of an open or closed quote.
+   * @param {boolean} open True if open quote, false if closed.
+   * @return {!Blockly.FieldImage} The field image of the quote.
+   * @this Blockly.Block
+   * @private
+   */
+  newQuote_: function(open) {
+    if (open == this.RTL) {
+      var file = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAKCAQAAAAqJXdxAAAAqUlEQVQI1z3KvUpCcRiA8ef9E4JNHhI0aFEacm1o0BsI0Slx8wa8gLauoDnoBhq7DcfWhggONDmJJgqCPA7neJ7p934EOOKOnM8Q7PDElo/4x4lFb2DmuUjcUzS3URnGib9qaPNbuXvBO3sGPHJDRG6fGVdMSeWDP2q99FQdFrz26Gu5Tq7dFMzUvbXy8KXeAj57cOklgA+u1B5AoslLtGIHQMaCVnwDnADZIFIrXsoXrgAAAABJRU5ErkJggg==';
+    } else {
+      var file = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAKCAQAAAAqJXdxAAAAn0lEQVQI1z3OMa5BURSF4f/cQhAKjUQhuQmFNwGJEUi0RKN5rU7FHKhpjEH3TEMtkdBSCY1EIv8r7nFX9e29V7EBAOvu7RPjwmWGH/VuF8CyN9/OAdvqIXYLvtRaNjx9mMTDyo+NjAN1HNcl9ZQ5oQMM3dgDUqDo1l8DzvwmtZN7mnD+PkmLa+4mhrxVA9fRowBWmVBhFy5gYEjKMfz9AylsaRRgGzvZAAAAAElFTkSuQmCC';
+    }
+    return new Blockly.FieldImage(file, 12, 12, '"');
+  }
+};
+
+Blockly.Blocks['text_join'] = {
+  /**
+   * Block for creating a string made up of any number of elements of any type.
+   * @this Blockly.Block
+   */
+  init: function() {
+    this.setHelpUrl(Blockly.Msg.TEXT_JOIN_HELPURL);
+    this.setColour(Blockly.Blocks.texts.HUE);
+    this.itemCount_ = 2;
+    this.updateShape_();
+    this.setOutput(true, 'String');
+    this.setMutator(new Blockly.Mutator(['text_create_join_item']));
+    this.setTooltip(Blockly.Msg.TEXT_JOIN_TOOLTIP);
+  },
+  /**
+   * Create XML to represent number of text inputs.
+   * @return {Element} XML storage element.
+   * @this Blockly.Block
+   */
+  mutationToDom: function() {
+    var container = document.createElement('mutation');
+    container.setAttribute('items', this.itemCount_);
+    return container;
+  },
+  /**
+   * Parse XML to restore the text inputs.
+   * @param {!Element} xmlElement XML storage element.
+   * @this Blockly.Block
+   */
+  domToMutation: function(xmlElement) {
+    this.itemCount_ = parseInt(xmlElement.getAttribute('items'), 10);
+    this.updateShape_();
+  },
+  /**
+   * Populate the mutator's dialog with this block's components.
+   * @param {!Blockly.Workspace} workspace Mutator's workspace.
+   * @return {!Blockly.Block} Root block in mutator.
+   * @this Blockly.Block
+   */
+  decompose: function(workspace) {
+    var containerBlock = Blockly.Block.obtain(workspace,
+                                           'text_create_join_container');
+    containerBlock.initSvg();
+    var connection = containerBlock.getInput('STACK').connection;
+    for (var i = 0; i < this.itemCount_; i++) {
+      var itemBlock = Blockly.Block.obtain(workspace, 'text_create_join_item');
+      itemBlock.initSvg();
+      connection.connect(itemBlock.previousConnection);
+      connection = itemBlock.nextConnection;
+    }
+    return containerBlock;
+  },
+  /**
+   * Reconfigure this block based on the mutator dialog's components.
+   * @param {!Blockly.Block} containerBlock Root block in mutator.
+   * @this Blockly.Block
+   */
+  compose: function(containerBlock) {
+    var itemBlock = containerBlock.getInputTargetBlock('STACK');
+    // Count number of inputs.
+    var connections = [];
+    var i = 0;
+    while (itemBlock) {
+      connections[i] = itemBlock.valueConnection_;
+      itemBlock = itemBlock.nextConnection &&
+          itemBlock.nextConnection.targetBlock();
+      i++;
+    }
+    this.itemCount_ = i;
+    this.updateShape_();
+    // Reconnect any child blocks.
+    for (var i = 0; i < this.itemCount_; i++) {
+      if (connections[i]) {
+        this.getInput('ADD' + i).connection.connect(connections[i]);
+      }
+    }
+  },
+  /**
+   * Store pointers to any connected child blocks.
+   * @param {!Blockly.Block} containerBlock Root block in mutator.
+   * @this Blockly.Block
+   */
+  saveConnections: function(containerBlock) {
+    var itemBlock = containerBlock.getInputTargetBlock('STACK');
+    var i = 0;
+    while (itemBlock) {
+      var input = this.getInput('ADD' + i);
+      itemBlock.valueConnection_ = input && input.connection.targetConnection;
+      i++;
+      itemBlock = itemBlock.nextConnection &&
+          itemBlock.nextConnection.targetBlock();
+    }
+  },
+  /**
+   * Modify this block to have the correct number of inputs.
+   * @private
+   * @this Blockly.Block
+   */
+  updateShape_: function() {
+    // Delete everything.
+    if (this.getInput('EMPTY')) {
+      this.removeInput('EMPTY');
+    } else {
+      var i = 0;
+      while (this.getInput('ADD' + i)) {
+        this.removeInput('ADD' + i);
+        i++;
+      }
+    }
+    // Rebuild block.
+    if (this.itemCount_ == 0) {
+      this.appendDummyInput('EMPTY')
+          .appendField(this.newQuote_(true))
+          .appendField(this.newQuote_(false));
+    } else {
+      for (var i = 0; i < this.itemCount_; i++) {
+        var input = this.appendValueInput('ADD' + i);
+        if (i == 0) {
+          input.appendField(Blockly.Msg.TEXT_JOIN_TITLE_CREATEWITH);
+        }
+      }
+    }
+  },
+  newQuote_: Blockly.Blocks['text'].newQuote_
+};
+
+Blockly.Blocks['text_create_join_container'] = {
+  /**
+   * Mutator block for container.
+   * @this Blockly.Block
+   */
+  init: function() {
+    this.setColour(Blockly.Blocks.texts.HUE);
+    this.appendDummyInput()
+        .appendField(Blockly.Msg.TEXT_CREATE_JOIN_TITLE_JOIN);
+    this.appendStatementInput('STACK');
+    this.setTooltip(Blockly.Msg.TEXT_CREATE_JOIN_TOOLTIP);
+    this.contextMenu = false;
+  }
+};
+
+Blockly.Blocks['text_create_join_item'] = {
+  /**
+   * Mutator block for add items.
+   * @this Blockly.Block
+   */
+  init: function() {
+    this.setColour(Blockly.Blocks.texts.HUE);
+    this.appendDummyInput()
+        .appendField(Blockly.Msg.TEXT_CREATE_JOIN_ITEM_TITLE_ITEM);
+    this.setPreviousStatement(true);
+    this.setNextStatement(true);
+    this.setTooltip(Blockly.Msg.TEXT_CREATE_JOIN_ITEM_TOOLTIP);
+    this.contextMenu = false;
+  }
+};
+
+Blockly.Blocks['text_append'] = {
+  /**
+   * Block for appending to a variable in place.
+   * @this Blockly.Block
+   */
+  init: function() {
+    this.setHelpUrl(Blockly.Msg.TEXT_APPEND_HELPURL);
+    this.setColour(Blockly.Blocks.texts.HUE);
+    this.appendValueInput('TEXT')
+        .appendField(Blockly.Msg.TEXT_APPEND_TO)
+        .appendField(new Blockly.FieldVariable(
+        Blockly.Msg.TEXT_APPEND_VARIABLE), 'VAR')
+        .appendField(Blockly.Msg.TEXT_APPEND_APPENDTEXT);
+    this.setPreviousStatement(true);
+    this.setNextStatement(true);
+    // Assign 'this' to a variable for use in the tooltip closure below.
+    var thisBlock = this;
+    this.setTooltip(function() {
+      return Blockly.Msg.TEXT_APPEND_TOOLTIP.replace('%1',
+          thisBlock.getFieldValue('VAR'));
+    });
+  },
+  /**
+   * Return all variables referenced by this block.
+   * @return {!Array.<string>} List of variable names.
+   * @this Blockly.Block
+   */
+  getVars: function() {
+    return [this.getFieldValue('VAR')];
+  },
+  /**
+   * Notification that a variable is renaming.
+   * If the name matches one of this block's variables, rename it.
+   * @param {string} oldName Previous name of variable.
+   * @param {string} newName Renamed variable.
+   * @this Blockly.Block
+   */
+  renameVar: function(oldName, newName) {
+    if (Blockly.Names.equals(oldName, this.getFieldValue('VAR'))) {
+      this.setFieldValue(newName, 'VAR');
+    }
+  }
+};
+
+Blockly.Blocks['text_length'] = {
+  /**
+   * Block for string length.
+   * @this Blockly.Block
+   */
+  init: function() {
+    this.jsonInit({
+      "message0": Blockly.Msg.TEXT_LENGTH_TITLE,
+      "args0": [
+        {
+          "type": "input_value",
+          "name": "VALUE",
+          "check": ['String', 'Array']
+        }
+      ],
+      "output": 'Number',
+      "colour": Blockly.Blocks.texts.HUE,
+      "tooltip": Blockly.Msg.TEXT_LENGTH_TOOLTIP,
+      "helpUrl": Blockly.Msg.TEXT_LENGTH_HELPURL
+    });
+  }
+};
+
+Blockly.Blocks['text_isEmpty'] = {
+  /**
+   * Block for is the string null?
+   * @this Blockly.Block
+   */
+  init: function() {
+    this.jsonInit({
+      "message0": Blockly.Msg.TEXT_ISEMPTY_TITLE,
+      "args0": [
+        {
+          "type": "input_value",
+          "name": "VALUE",
+          "check": ['String', 'Array']
+        }
+      ],
+      "output": 'Boolean',
+      "colour": Blockly.Blocks.texts.HUE,
+      "tooltip": Blockly.Msg.TEXT_ISEMPTY_TOOLTIP,
+      "helpUrl": Blockly.Msg.TEXT_ISEMPTY_HELPURL
+    });
+  }
+};
+
+Blockly.Blocks['text_indexOf'] = {
+  /**
+   * Block for finding a substring in the text.
+   * @this Blockly.Block
+   */
+  init: function() {
+    var OPERATORS =
+        [[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(true, 'Number');
+    this.appendValueInput('VALUE')
+        .setCheck('String')
+        .appendField(Blockly.Msg.TEXT_INDEXOF_INPUT_INTEXT);
+    this.appendValueInput('FIND')
+        .setCheck('String')
+        .appendField(new Blockly.FieldDropdown(OPERATORS), 'END');
+    if (Blockly.Msg.TEXT_INDEXOF_TAIL) {
+      this.appendDummyInput().appendField(Blockly.Msg.TEXT_INDEXOF_TAIL);
+    }
+    this.setInputsInline(true);
+    this.setTooltip(Blockly.Msg.TEXT_INDEXOF_TOOLTIP);
+  }
+};
+
+Blockly.Blocks['text_charAt'] = {
+  /**
+   * Block for getting a character from the string.
+   * @this Blockly.Block
+   */
+  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(true, 'String');
+    this.appendValueInput('VALUE')
+        .setCheck('String')
+        .appendField(Blockly.Msg.TEXT_CHARAT_INPUT_INTEXT);
+    this.appendDummyInput('AT');
+    this.setInputsInline(true);
+    this.updateAt_(true);
+    this.setTooltip(Blockly.Msg.TEXT_CHARAT_TOOLTIP);
+  },
+  /**
+   * Create XML to represent whether there is an 'AT' input.
+   * @return {Element} XML storage element.
+   * @this Blockly.Block
+   */
+  mutationToDom: function() {
+    var container = document.createElement('mutation');
+    var isAt = this.getInput('AT').type == Blockly.INPUT_VALUE;
+    container.setAttribute('at', isAt);
+    return container;
+  },
+  /**
+   * Parse XML to restore the 'AT' input.
+   * @param {!Element} xmlElement XML storage element.
+   * @this Blockly.Block
+   */
+  domToMutation: function(xmlElement) {
+    // Note: Until January 2013 this block did not have mutations,
+    // so 'at' defaults to true.
+    var isAt = (xmlElement.getAttribute('at') != 'false');
+    this.updateAt_(isAt);
+  },
+  /**
+   * Create or delete an input for the numeric index.
+   * @param {boolean} isAt True if the input should exist.
+   * @private
+   * @this Blockly.Block
+   */
+  updateAt_: function(isAt) {
+    // Destroy old 'AT' and 'ORDINAL' inputs.
+    this.removeInput('AT');
+    this.removeInput('ORDINAL', true);
+    // Create either a value 'AT' input or a dummy input.
+    if (isAt) {
+      this.appendValueInput('AT').setCheck('Number');
+      if (Blockly.Msg.ORDINAL_NUMBER_SUFFIX) {
+        this.appendDummyInput('ORDINAL')
+            .appendField(Blockly.Msg.ORDINAL_NUMBER_SUFFIX);
+      }
+    } else {
+      this.appendDummyInput('AT');
+    }
+    if (Blockly.Msg.TEXT_CHARAT_TAIL) {
+      this.removeInput('TAIL', true);
+      this.appendDummyInput('TAIL')
+          .appendField(Blockly.Msg.TEXT_CHARAT_TAIL);
+    }
+    var menu = new Blockly.FieldDropdown(this.WHERE_OPTIONS, function(value) {
+      var newAt = (value == 'FROM_START') || (value == 'FROM_END');
+      // The 'isAt' variable is available due to this function being a closure.
+      if (newAt != isAt) {
+        var block = this.sourceBlock_;
+        block.updateAt_(newAt);
+        // This menu has been destroyed and replaced.  Update the replacement.
+        block.setFieldValue(value, 'WHERE');
+        return null;
+      }
+      return undefined;
+    });
+    this.getInput('AT').appendField(menu, 'WHERE');
+  }
+};
+
+Blockly.Blocks['text_getSubstring'] = {
+  /**
+   * Block for getting substring.
+   * @this Blockly.Block
+   */
+  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');
+    if (Blockly.Msg.TEXT_GET_SUBSTRING_TAIL) {
+      this.appendDummyInput('TAIL')
+          .appendField(Blockly.Msg.TEXT_GET_SUBSTRING_TAIL);
+    }
+    this.setInputsInline(true);
+    this.setOutput(true, 'String');
+    this.updateAt_(1, true);
+    this.updateAt_(2, true);
+    this.setTooltip(Blockly.Msg.TEXT_GET_SUBSTRING_TOOLTIP);
+  },
+  /**
+   * Create XML to represent whether there are 'AT' inputs.
+   * @return {Element} XML storage element.
+   * @this Blockly.Block
+   */
+  mutationToDom: function() {
+    var container = document.createElement('mutation');
+    var isAt1 = this.getInput('AT1').type == Blockly.INPUT_VALUE;
+    container.setAttribute('at1', isAt1);
+    var isAt2 = this.getInput('AT2').type == Blockly.INPUT_VALUE;
+    container.setAttribute('at2', isAt2);
+    return container;
+  },
+  /**
+   * Parse XML to restore the 'AT' inputs.
+   * @param {!Element} xmlElement XML storage element.
+   * @this Blockly.Block
+   */
+  domToMutation: function(xmlElement) {
+    var isAt1 = (xmlElement.getAttribute('at1') == 'true');
+    var isAt2 = (xmlElement.getAttribute('at2') == 'true');
+    this.updateAt_(1, isAt1);
+    this.updateAt_(2, isAt2);
+  },
+  /**
+   * Create or delete an input for a numeric index.
+   * This block has two such inputs, independant of each other.
+   * @param {number} n Specify first or second input (1 or 2).
+   * @param {boolean} isAt True if the input should exist.
+   * @private
+   * @this Blockly.Block
+   */
+  updateAt_: function(n, isAt) {
+    // Create or delete an input for the numeric index.
+    // Destroy old 'AT' and 'ORDINAL' inputs.
+    this.removeInput('AT' + n);
+    this.removeInput('ORDINAL' + n, true);
+    // Create either a value 'AT' input or a dummy input.
+    if (isAt) {
+      this.appendValueInput('AT' + n).setCheck('Number');
+      if (Blockly.Msg.ORDINAL_NUMBER_SUFFIX) {
+        this.appendDummyInput('ORDINAL' + n)
+            .appendField(Blockly.Msg.ORDINAL_NUMBER_SUFFIX);
+      }
+    } else {
+      this.appendDummyInput('AT' + n);
+    }
+    // Move tail, if present, to end of block.
+    if (n == 2 && Blockly.Msg.TEXT_GET_SUBSTRING_TAIL) {
+      this.removeInput('TAIL', true);
+      this.appendDummyInput('TAIL')
+          .appendField(Blockly.Msg.TEXT_GET_SUBSTRING_TAIL);
+    }
+    var menu = new Blockly.FieldDropdown(this['WHERE_OPTIONS_' + n],
+        function(value) {
+      var newAt = (value == 'FROM_START') || (value == 'FROM_END');
+      // The 'isAt' variable is available due to this function being a closure.
+      if (newAt != isAt) {
+        var block = this.sourceBlock_;
+        block.updateAt_(n, newAt);
+        // This menu has been destroyed and replaced.  Update the replacement.
+        block.setFieldValue(value, 'WHERE' + n);
+        return null;
+      }
+      return undefined;
+    });
+    this.getInput('AT' + n)
+        .appendField(menu, 'WHERE' + n);
+    if (n == 1) {
+      this.moveInputBefore('AT1', 'AT2');
+    }
+  }
+};
+
+Blockly.Blocks['text_changeCase'] = {
+  /**
+   * Block for changing capitalization.
+   * @this Blockly.Block
+   */
+  init: function() {
+    var OPERATORS =
+        [[Blockly.Msg.TEXT_CHANGECASE_OPERATOR_UPPERCASE, 'UPPERCASE'],
+         [Blockly.Msg.TEXT_CHANGECASE_OPERATOR_LOWERCASE, 'LOWERCASE'],
+         [Blockly.Msg.TEXT_CHANGECASE_OPERATOR_TITLECASE, 'TITLECASE']];
+    this.setHelpUrl(Blockly.Msg.TEXT_CHANGECASE_HELPURL);
+    this.setColour(Blockly.Blocks.texts.HUE);
+    this.appendValueInput('TEXT')
+        .setCheck('String')
+        .appendField(new Blockly.FieldDropdown(OPERATORS), 'CASE');
+    this.setOutput(true, 'String');
+    this.setTooltip(Blockly.Msg.TEXT_CHANGECASE_TOOLTIP);
+  }
+};
+
+Blockly.Blocks['text_trim'] = {
+  /**
+   * Block for trimming spaces.
+   * @this Blockly.Block
+   */
+  init: function() {
+    var OPERATORS =
+        [[Blockly.Msg.TEXT_TRIM_OPERATOR_BOTH, 'BOTH'],
+         [Blockly.Msg.TEXT_TRIM_OPERATOR_LEFT, 'LEFT'],
+         [Blockly.Msg.TEXT_TRIM_OPERATOR_RIGHT, 'RIGHT']];
+    this.setHelpUrl(Blockly.Msg.TEXT_TRIM_HELPURL);
+    this.setColour(Blockly.Blocks.texts.HUE);
+    this.appendValueInput('TEXT')
+        .setCheck('String')
+        .appendField(new Blockly.FieldDropdown(OPERATORS), 'MODE');
+    this.setOutput(true, 'String');
+    this.setTooltip(Blockly.Msg.TEXT_TRIM_TOOLTIP);
+  }
+};
+
+Blockly.Blocks['text_print'] = {
+  /**
+   * Block for print statement.
+   * @this Blockly.Block
+   */
+  init: function() {
+    this.jsonInit({
+      "message0": Blockly.Msg.TEXT_PRINT_TITLE,
+      "args0": [
+        {
+          "type": "input_value",
+          "name": "TEXT"
+        }
+      ],
+      "previousStatement": null,
+      "nextStatement": null,
+      "colour": Blockly.Blocks.texts.HUE,
+      "tooltip": Blockly.Msg.TEXT_PRINT_TOOLTIP,
+      "helpUrl": Blockly.Msg.TEXT_PRINT_HELPURL
+    });
+  }
+};
+
+Blockly.Blocks['text_prompt'] = {
+  /**
+   * Block for prompt function (internal message).
+   * @this Blockly.Block
+   */
+  init: function() {
+    var TYPES =
+        [[Blockly.Msg.TEXT_PROMPT_TYPE_TEXT, 'TEXT'],
+         [Blockly.Msg.TEXT_PROMPT_TYPE_NUMBER, 'NUMBER']];
+    // Assign 'this' to a variable for use in the closure below.
+    var thisBlock = this;
+    this.setHelpUrl(Blockly.Msg.TEXT_PROMPT_HELPURL);
+    this.setColour(Blockly.Blocks.texts.HUE);
+    var dropdown = new Blockly.FieldDropdown(TYPES, function(newOp) {
+      if (newOp == 'NUMBER') {
+        thisBlock.changeOutput('Number');
+      } else {
+        thisBlock.changeOutput('String');
+      }
+    });
+    this.appendDummyInput()
+        .appendField(dropdown, 'TYPE')
+        .appendField(this.newQuote_(true))
+        .appendField(new Blockly.FieldTextInput(''), 'TEXT')
+        .appendField(this.newQuote_(false));
+    this.setOutput(true, 'String');
+    // Assign 'this' to a variable for use in the tooltip closure below.
+    var thisBlock = this;
+    this.setTooltip(function() {
+      return (thisBlock.getFieldValue('TYPE') == 'TEXT') ?
+          Blockly.Msg.TEXT_PROMPT_TOOLTIP_TEXT :
+          Blockly.Msg.TEXT_PROMPT_TOOLTIP_NUMBER;
+    });
+  },
+  newQuote_: Blockly.Blocks['text'].newQuote_
+};
+
+Blockly.Blocks['text_prompt_ext'] = {
+  /**
+   * Block for prompt function (external message).
+   * @this Blockly.Block
+   */
+  init: function() {
+    var TYPES =
+        [[Blockly.Msg.TEXT_PROMPT_TYPE_TEXT, 'TEXT'],
+         [Blockly.Msg.TEXT_PROMPT_TYPE_NUMBER, 'NUMBER']];
+    // Assign 'this' to a variable for use in the closure below.
+    var thisBlock = this;
+    this.setHelpUrl(Blockly.Msg.TEXT_PROMPT_HELPURL);
+    this.setColour(Blockly.Blocks.texts.HUE);
+    var dropdown = new Blockly.FieldDropdown(TYPES, function(newOp) {
+      if (newOp == 'NUMBER') {
+        thisBlock.changeOutput('Number');
+      } else {
+        thisBlock.changeOutput('String');
+      }
+    });
+    this.appendValueInput('TEXT')
+        .appendField(dropdown, 'TYPE');
+    this.setOutput(true, 'String');
+    // Assign 'this' to a variable for use in the tooltip closure below.
+    var thisBlock = this;
+    this.setTooltip(function() {
+      return (thisBlock.getFieldValue('TYPE') == 'TEXT') ?
+          Blockly.Msg.TEXT_PROMPT_TOOLTIP_TEXT :
+          Blockly.Msg.TEXT_PROMPT_TOOLTIP_NUMBER;
+    });
+  }
+};

src/blockly/blocks/variables.js

@@ -0,0 +1,140 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2012 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Variable blocks for Blockly.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.Blocks.variables');
+
+goog.require('Blockly.Blocks');
+
+
+/**
+ * Common HSV hue for all blocks in this category.
+ */
+Blockly.Blocks.variables.HUE = 330;
+
+Blockly.Blocks['variables_get'] = {
+  /**
+   * Block for variable getter.
+   * @this Blockly.Block
+   */
+  init: function() {
+    this.setHelpUrl(Blockly.Msg.VARIABLES_GET_HELPURL);
+    this.setColour(Blockly.Blocks.variables.HUE);
+    this.appendDummyInput()
+        .appendField(new Blockly.FieldVariable(
+        Blockly.Msg.VARIABLES_DEFAULT_NAME), 'VAR');
+    this.setOutput(true);
+    this.setTooltip(Blockly.Msg.VARIABLES_GET_TOOLTIP);
+    this.contextMenuMsg_ = Blockly.Msg.VARIABLES_GET_CREATE_SET;
+  },
+  /**
+   * Return all variables referenced by this block.
+   * @return {!Array.<string>} List of variable names.
+   * @this Blockly.Block
+   */
+  getVars: function() {
+    return [this.getFieldValue('VAR')];
+  },
+  /**
+   * Notification that a variable is renaming.
+   * If the name matches one of this block's variables, rename it.
+   * @param {string} oldName Previous name of variable.
+   * @param {string} newName Renamed variable.
+   * @this Blockly.Block
+   */
+  renameVar: function(oldName, newName) {
+    if (Blockly.Names.equals(oldName, this.getFieldValue('VAR'))) {
+      this.setFieldValue(newName, 'VAR');
+    }
+  },
+  contextMenuType_: 'variables_set',
+  /**
+   * Add menu option to create getter/setter block for this setter/getter.
+   * @param {!Array} options List of menu options to add to.
+   * @this Blockly.Block
+   */
+  customContextMenu: function(options) {
+    var option = {enabled: true};
+    var name = this.getFieldValue('VAR');
+    option.text = this.contextMenuMsg_.replace('%1', name);
+    var xmlField = goog.dom.createDom('field', null, name);
+    xmlField.setAttribute('name', 'VAR');
+    var xmlBlock = goog.dom.createDom('block', null, xmlField);
+    xmlBlock.setAttribute('type', this.contextMenuType_);
+    option.callback = Blockly.ContextMenu.callbackFactory(this, xmlBlock);
+    options.push(option);
+  }
+};
+
+Blockly.Blocks['variables_set'] = {
+  /**
+   * Block for variable setter.
+   * @this Blockly.Block
+   */
+  init: function() {
+    this.jsonInit({
+      "message0": Blockly.Msg.VARIABLES_SET,
+      "args0": [
+        {
+          "type": "field_variable",
+          "name": "VAR",
+          "variable": Blockly.Msg.VARIABLES_DEFAULT_NAME
+        },
+        {
+          "type": "input_value",
+          "name": "VALUE"
+        }
+      ],
+      "previousStatement": null,
+      "nextStatement": null,
+      "colour": Blockly.Blocks.variables.HUE,
+      "tooltip": Blockly.Msg.VARIABLES_SET_TOOLTIP,
+      "helpUrl": Blockly.Msg.VARIABLES_SET_HELPURL
+    });
+    this.contextMenuMsg_ = Blockly.Msg.VARIABLES_SET_CREATE_GET;
+  },
+  /**
+   * Return all variables referenced by this block.
+   * @return {!Array.<string>} List of variable names.
+   * @this Blockly.Block
+   */
+  getVars: function() {
+    return [this.getFieldValue('VAR')];
+  },
+  /**
+   * Notification that a variable is renaming.
+   * If the name matches one of this block's variables, rename it.
+   * @param {string} oldName Previous name of variable.
+   * @param {string} newName Renamed variable.
+   * @this Blockly.Block
+   */
+  renameVar: function(oldName, newName) {
+    if (Blockly.Names.equals(oldName, this.getFieldValue('VAR'))) {
+      this.setFieldValue(newName, 'VAR');
+    }
+  },
+  contextMenuType_: 'variables_get',
+  customContextMenu: Blockly.Blocks['variables_get'].customContextMenu
+};

src/blockly/build.py

@@ -0,0 +1,440 @@
+#!/usr/bin/python2.7
+# Compresses the core Blockly files into a single JavaScript file.
+#
+# Copyright 2012 Google Inc.
+# https://developers.google.com/blockly/
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#   http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+# This script generates two versions of Blockly's core files:
+#   blockly_compressed.js
+#   blockly_uncompressed.js
+# The compressed file is a concatenation of all of Blockly's core files which
+# have been run through Google's Closure Compiler.  This is done using the
+# online API (which takes a few seconds and requires an Internet connection).
+# The uncompressed file is a script that loads in each of Blockly's core files
+# one by one.  This takes much longer for a browser to load, but is useful
+# when debugging code since line numbers are meaningful and variables haven't
+# been renamed.  The uncompressed file also allows for a faster developement
+# cycle since there is no need to rebuild or recompile, just reload.
+#
+# This script also generates:
+#   blocks_compressed.js: The compressed Blockly language blocks.
+#   javascript_compressed.js: The compressed Javascript generator.
+#   python_compressed.js: The compressed Python generator.
+#   dart_compressed.js: The compressed Dart generator.
+#   msg/js/<LANG>.js for every language <LANG> defined in msg/js/<LANG>.json.
+
+import sys
+if sys.version_info[0] != 2:
+  raise Exception("Blockly build only compatible with Python 2.x.\n"
+                  "You are using: " + sys.version)
+
+import errno, glob, httplib, json, os, re, subprocess, threading, urllib
+
+
+def import_path(fullpath):
+  """Import a file with full path specification.
+  Allows one to import from any directory, something __import__ does not do.
+
+  Args:
+      fullpath:  Path and filename of import.
+
+  Returns:
+      An imported module.
+  """
+  path, filename = os.path.split(fullpath)
+  filename, ext = os.path.splitext(filename)
+  sys.path.append(path)
+  module = __import__(filename)
+  reload(module)  # Might be out of date.
+  del sys.path[-1]
+  return module
+
+
+HEADER = ("// Do not edit this file; automatically generated by build.py.\n"
+          "'use strict';\n")
+
+
+class Gen_uncompressed(threading.Thread):
+  """Generate a JavaScript file that loads Blockly's raw files.
+  Runs in a separate thread.
+  """
+  def __init__(self, search_paths):
+    threading.Thread.__init__(self)
+    self.search_paths = search_paths
+
+  def run(self):
+    target_filename = "blockly_uncompressed.js"
+    f = open(target_filename, "w")
+    f.write(HEADER)
+    f.write("""
+// 'this' is 'window' in a browser, or 'global' in node.js.
+this.BLOCKLY_DIR = (function() {
+  // Find name of current directory.
+  var scripts = document.getElementsByTagName('script');
+  var re = new RegExp('(.+)[\/]blockly_uncompressed\.js$');
+  for (var x = 0, script; script = scripts[x]; x++) {
+    var match = re.exec(script.src);
+    if (match) {
+      return match[1];
+    }
+  }
+  alert('Could not detect Blockly\\'s directory name.');
+  return '';
+})();
+
+this.BLOCKLY_BOOT = function() {
+// Execute after Closure has loaded.
+if (!this.goog) {
+  alert('Error: Closure not found.  Read this:\\n' +
+        'developers.google.com/blockly/hacking/closure');
+}
+
+// Build map of all dependencies (used and unused).
+var dir = this.BLOCKLY_DIR.match(/[^\\/]+$/)[0];
+""")
+    add_dependency = []
+    base_path = calcdeps.FindClosureBasePath(self.search_paths)
+    for dep in calcdeps.BuildDependenciesFromFiles(self.search_paths):
+      add_dependency.append(calcdeps.GetDepsLine(dep, base_path))
+    add_dependency = "\n".join(add_dependency)
+    # Find the Blockly directory name and replace it with a JS variable.
+    # This allows blockly_uncompressed.js to be compiled on one computer and be
+    # used on another, even if the directory name differs.
+    m = re.search("[\\/]([^\\/]+)[\\/]core[\\/]blockly.js", add_dependency)
+    add_dependency = re.sub("([\\/])" + re.escape(m.group(1)) +
+        "([\\/]core[\\/])", '\\1" + dir + "\\2', add_dependency)
+    f.write(add_dependency + "\n")
+
+    provides = []
+    for dep in calcdeps.BuildDependenciesFromFiles(self.search_paths):
+      if not dep.filename.startswith(os.pardir + os.sep):  # "../"
+        provides.extend(dep.provides)
+    provides.sort()
+    f.write("\n")
+    f.write("// Load Blockly.\n")
+    for provide in provides:
+      f.write("goog.require('%s');\n" % provide)
+
+    f.write("""
+delete this.BLOCKLY_DIR;
+delete this.BLOCKLY_BOOT;
+};
+
+if (typeof DOMParser == 'undefined' && typeof require == 'function') {
+  // Node.js needs DOMParser loaded separately.
+  var DOMParser = require('xmldom').DOMParser;
+}
+
+// Delete any existing Closure (e.g. Soy's nogoog_shim).
+document.write('<script>var goog = undefined;</script>');
+// Load fresh Closure Library.
+document.write('<script src="' + this.BLOCKLY_DIR +
+    '/../closure-library/closure/goog/base.js"></script>');
+document.write('<script>this.BLOCKLY_BOOT()</script>');
+""")
+    f.close()
+    print("SUCCESS: " + target_filename)
+
+
+class Gen_compressed(threading.Thread):
+  """Generate a JavaScript file that contains all of Blockly's core and all
+  required parts of Closure, compiled together.
+  Uses the Closure Compiler's online API.
+  Runs in a separate thread.
+  """
+  def __init__(self, search_paths):
+    threading.Thread.__init__(self)
+    self.search_paths = search_paths
+
+  def run(self):
+    self.gen_core()
+    self.gen_blocks()
+    self.gen_generator("arduino")
+
+  def gen_core(self):
+    target_filename = "blockly_compressed.js"
+    # Define the parameters for the POST request.
+    params = [
+        ("compilation_level", "SIMPLE_OPTIMIZATIONS"),
+        ("use_closure_library", "true"),
+        ("output_format", "json"),
+        ("output_info", "compiled_code"),
+        ("output_info", "warnings"),
+        ("output_info", "errors"),
+        ("output_info", "statistics"),
+      ]
+
+    # Read in all the source files.
+    filenames = calcdeps.CalculateDependencies(self.search_paths,
+        [os.path.join("core", "blockly.js")])
+    for filename in filenames:
+      # Filter out the Closure files (the compiler will add them).
+      if filename.startswith(os.pardir + os.sep):  # '../'
+        continue
+      f = open(filename)
+      params.append(("js_code", "".join(f.readlines())))
+      f.close()
+
+    self.do_compile(params, target_filename, filenames, "")
+
+  def gen_blocks(self):
+    target_filename = "blocks_compressed.js"
+    # Define the parameters for the POST request.
+    params = [
+        ("compilation_level", "SIMPLE_OPTIMIZATIONS"),
+        ("output_format", "json"),
+        ("output_info", "compiled_code"),
+        ("output_info", "warnings"),
+        ("output_info", "errors"),
+        ("output_info", "statistics"),
+      ]
+
+    # Read in all the source files.
+    # Add Blockly.Blocks to be compatible with the compiler.
+    params.append(("js_code", "goog.provide('Blockly.Blocks');"))
+    filenames = glob.glob(os.path.join("blocks", "*.js"))
+    for filename in filenames:
+      f = open(filename)
+      params.append(("js_code", "".join(f.readlines())))
+      f.close()
+
+    # Remove Blockly.Blocks to be compatible with Blockly.
+    remove = "var Blockly={Blocks:{}};"
+    self.do_compile(params, target_filename, filenames, remove)
+
+  def gen_generator(self, language):
+    target_filename = language + "_compressed.js"
+    # Define the parameters for the POST request.
+    params = [
+        ("compilation_level", "SIMPLE_OPTIMIZATIONS"),
+        ("output_format", "json"),
+        ("output_info", "compiled_code"),
+        ("output_info", "warnings"),
+        ("output_info", "errors"),
+        ("output_info", "statistics"),
+      ]
+
+    # Read in all the source files.
+    # Add Blockly.Generator to be compatible with the compiler.
+    params.append(("js_code", "goog.provide('Blockly.Generator');"))
+    filenames = glob.glob(
+        os.path.join("generators", language, "*.js"))
+    filenames.insert(0, os.path.join("generators", language + ".js"))
+    for filename in filenames:
+      f = open(filename)
+      params.append(("js_code", "".join(f.readlines())))
+      f.close()
+    filenames.insert(0, "[goog.provide]")
+
+    # Remove Blockly.Generator to be compatible with Blockly.
+    remove = "var Blockly={Generator:{}};"
+    self.do_compile(params, target_filename, filenames, remove)
+
+  def do_compile(self, params, target_filename, filenames, remove):
+    # Send the request to Google.
+    headers = {"Content-type": "application/x-www-form-urlencoded"}
+    conn = httplib.HTTPConnection("closure-compiler.appspot.com")
+    conn.request("POST", "/compile", urllib.urlencode(params), headers)
+    response = conn.getresponse()
+    json_str = response.read()
+    conn.close()
+
+    # Parse the JSON response.
+    json_data = json.loads(json_str)
+
+    def file_lookup(name):
+      if not name.startswith("Input_"):
+        return "???"
+      n = int(name[6:]) - 1
+      return filenames[n]
+
+    if json_data.has_key("serverErrors"):
+      errors = json_data["serverErrors"]
+      for error in errors:
+        print("SERVER ERROR: %s" % target_filename)
+        print(error["error"])
+    elif json_data.has_key("errors"):
+      errors = json_data["errors"]
+      for error in errors:
+        print("FATAL ERROR")
+        print(error["error"])
+        if error["file"]:
+          print("%s at line %d:" % (
+              file_lookup(error["file"]), error["lineno"]))
+          print(error["line"])
+          print((" " * error["charno"]) + "^")
+        sys.exit(1)
+    else:
+      if json_data.has_key("warnings"):
+        warnings = json_data["warnings"]
+        for warning in warnings:
+          print("WARNING")
+          print(warning["warning"])
+          if warning["file"]:
+            print("%s at line %d:" % (
+                file_lookup(warning["file"]), warning["lineno"]))
+            print(warning["line"])
+            print((" " * warning["charno"]) + "^")
+        print()
+
+      if not json_data.has_key("compiledCode"):
+        print("FATAL ERROR: Compiler did not return compiledCode.")
+        sys.exit(1)
+
+      code = HEADER + "\n" + json_data["compiledCode"]
+      code = code.replace(remove, "")
+
+      # Trim down Google's Apache licences.
+      LICENSE = re.compile("""/\\*
+
+ [\w ]+
+
+ (Copyright \\d+ 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.
+\\*/""")
+      code = re.sub(LICENSE, r"\n// \1  Apache License 2.0", code)
+
+      stats = json_data["statistics"]
+      original_b = stats["originalSize"]
+      compressed_b = stats["compressedSize"]
+      if original_b > 0 and compressed_b > 0:
+        f = open(target_filename, "w")
+        f.write(code)
+        f.close()
+
+        original_kb = int(original_b / 1024 + 0.5)
+        compressed_kb = int(compressed_b / 1024 + 0.5)
+        ratio = int(float(compressed_b) / float(original_b) * 100 + 0.5)
+        print("SUCCESS: " + target_filename)
+        print("Size changed from %d KB to %d KB (%d%%)." % (
+            original_kb, compressed_kb, ratio))
+      else:
+        print("UNKNOWN ERROR")
+
+
+class Gen_langfiles(threading.Thread):
+  """Generate JavaScript file for each natural language supported.
+
+  Runs in a separate thread.
+  """
+
+  def __init__(self):
+    threading.Thread.__init__(self)
+
+  def _rebuild(self, srcs, dests):
+    # Determine whether any of the files in srcs is newer than any in dests.
+    try:
+      return (max(os.path.getmtime(src) for src in srcs) >
+              min(os.path.getmtime(dest) for dest in dests))
+    except OSError as e:
+      # Was a file not found?
+      if e.errno == errno.ENOENT:
+        # If it was a source file, we can't proceed.
+        if e.filename in srcs:
+          print("Source file missing: " + e.filename)
+          sys.exit(1)
+        else:
+          # If a destination file was missing, rebuild.
+          return True
+      else:
+        print("Error checking file creation times: " + e)
+
+  def run(self):
+    # The files msg/json/{en,qqq,synonyms}.json depend on msg/messages.js.
+    if self._rebuild([os.path.join("msg", "messages.js")],
+                     [os.path.join("msg", "json", f) for f in
+                      ["en.json", "qqq.json", "synonyms.json"]]):
+      try:
+        subprocess.check_call([
+            "python",
+            os.path.join("i18n", "js_to_json.py"),
+            "--input_file", "msg/messages.js",
+            "--output_dir", "msg/json/",
+            "--quiet"])
+      except (subprocess.CalledProcessError, OSError) as e:
+        # Documentation for subprocess.check_call says that CalledProcessError
+        # will be raised on failure, but I found that OSError is also possible.
+        print("Error running i18n/js_to_json.py: ", e)
+        sys.exit(1)
+
+    # Checking whether it is necessary to rebuild the js files would be a lot of
+    # work since we would have to compare each <lang>.json file with each
+    # <lang>.js file.  Rebuilding is easy and cheap, so just go ahead and do it.
+    try:
+      # Use create_messages.py to create .js files from .json files.
+      cmd = [
+          "python",
+          os.path.join("i18n", "create_messages.py"),
+          "--source_lang_file", os.path.join("msg", "json", "en.json"),
+          "--source_synonym_file", os.path.join("msg", "json", "synonyms.json"),
+          "--key_file", os.path.join("msg", "json", "keys.json"),
+          "--output_dir", os.path.join("msg", "js"),
+          "--quiet"]
+      json_files = glob.glob(os.path.join("msg", "json", "*.json"))
+      json_files = [file for file in json_files if not
+                    (file.endswith(("keys.json", "synonyms.json", "qqq.json")))]
+      cmd.extend(json_files)
+      subprocess.check_call(cmd)
+    except (subprocess.CalledProcessError, OSError) as e:
+      print("Error running i18n/create_messages.py: ", e)
+      sys.exit(1)
+
+    # Output list of .js files created.
+    for f in json_files:
+      # This assumes the path to the current directory does not contain "json".
+      f = f.replace("json", "js")
+      if os.path.isfile(f):
+        print("SUCCESS: " + f)
+      else:
+        print("FAILED to create " + f)
+
+
+if __name__ == "__main__":
+  try:
+    calcdeps = import_path(os.path.join(
+        os.path.pardir, "closure-library", "closure", "bin", "calcdeps.py"))
+  except ImportError:
+    if os.path.isdir(os.path.join(os.path.pardir, "closure-library-read-only")):
+      # Dir got renamed when Closure moved from Google Code to GitHub in 2014.
+      print("Error: Closure directory needs to be renamed from"
+            "'closure-library-read-only' to 'closure-library'.\n"
+            "Please rename this directory.")
+    else:
+      print("""Error: Closure not found.  Read this:
+https://developers.google.com/blockly/hacking/closure""")
+    sys.exit(1)
+  search_paths = calcdeps.ExpandDirectories(
+      ["core", os.path.join(os.path.pardir, "closure-library")])
+
+  # Run both tasks in parallel threads.
+  # Uncompressed is limited by processor speed.
+  # Compressed is limited by network and server speed.
+  Gen_uncompressed(search_paths).start()
+  Gen_compressed(search_paths).start()
+
+  # This is run locally in a separate thread.
+  Gen_langfiles().start()

src/blockly/core/blockly.js

@@ -0,0 +1,652 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2011 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Core JavaScript library for Blockly.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+// Top level object for Blockly.
+goog.provide('Blockly');
+
+goog.require('Blockly.BlockSvg');
+goog.require('Blockly.FieldAngle');
+goog.require('Blockly.FieldCheckbox');
+goog.require('Blockly.FieldColour');
+// Date picker commented out since it increases footprint by 60%.
+// Add it only if you need it.
+//goog.require('Blockly.FieldDate');
+goog.require('Blockly.FieldDropdown');
+goog.require('Blockly.FieldImage');
+goog.require('Blockly.FieldTextInput');
+goog.require('Blockly.FieldVariable');
+goog.require('Blockly.Generator');
+goog.require('Blockly.Msg');
+goog.require('Blockly.Procedures');
+// Realtime is currently badly broken.  Stub it out.
+//goog.require('Blockly.Realtime');
+Blockly.Realtime = {
+  isEnabled: function() {return false;},
+  blockChanged: function() {},
+  doCommand: function(cmdThunk) {cmdThunk();}
+};
+goog.require('Blockly.Toolbox');
+goog.require('Blockly.WidgetDiv');
+goog.require('Blockly.WorkspaceSvg');
+goog.require('Blockly.inject');
+goog.require('Blockly.utils');
+goog.require('goog.color');
+goog.require('goog.userAgent');
+
+
+// Turn off debugging when compiled.
+var CLOSURE_DEFINES = {'goog.DEBUG': false};
+
+/**
+ * Required name space for SVG elements.
+ * @const
+ */
+Blockly.SVG_NS = 'http://www.w3.org/2000/svg';
+/**
+ * Required name space for HTML elements.
+ * @const
+ */
+Blockly.HTML_NS = 'http://www.w3.org/1999/xhtml';
+
+/**
+ * The richness of block colours, regardless of the hue.
+ * Must be in the range of 0 (inclusive) to 1 (exclusive).
+ */
+Blockly.HSV_SATURATION = 0.45;
+/**
+ * The intensity of block colours, regardless of the hue.
+ * Must be in the range of 0 (inclusive) to 1 (exclusive).
+ */
+Blockly.HSV_VALUE = 0.65;
+
+/**
+ * Sprited icons and images.
+ */
+Blockly.SPRITE = {
+  width: 96,
+  height: 124,
+  url: 'sprites.png'
+};
+
+/**
+ * Convert a hue (HSV model) into an RGB hex triplet.
+ * @param {number} hue Hue on a colour wheel (0-360).
+ * @return {string} RGB code, e.g. '#5ba65b'.
+ */
+Blockly.makeColour = function(hue) {
+  return goog.color.hsvToHex(hue, Blockly.HSV_SATURATION,
+      Blockly.HSV_VALUE * 255);
+};
+
+/**
+ * ENUM for a right-facing value input.  E.g. 'set item to' or 'return'.
+ * @const
+ */
+Blockly.INPUT_VALUE = 1;
+/**
+ * ENUM for a left-facing value output.  E.g. 'random fraction'.
+ * @const
+ */
+Blockly.OUTPUT_VALUE = 2;
+/**
+ * ENUM for a down-facing block stack.  E.g. 'if-do' or 'else'.
+ * @const
+ */
+Blockly.NEXT_STATEMENT = 3;
+/**
+ * ENUM for an up-facing block stack.  E.g. 'break out of loop'.
+ * @const
+ */
+Blockly.PREVIOUS_STATEMENT = 4;
+/**
+ * ENUM for an dummy input.  Used to add field(s) with no input.
+ * @const
+ */
+Blockly.DUMMY_INPUT = 5;
+
+/**
+ * ENUM for left alignment.
+ * @const
+ */
+Blockly.ALIGN_LEFT = -1;
+/**
+ * ENUM for centre alignment.
+ * @const
+ */
+Blockly.ALIGN_CENTRE = 0;
+/**
+ * ENUM for right alignment.
+ * @const
+ */
+Blockly.ALIGN_RIGHT = 1;
+
+/**
+ * Lookup table for determining the opposite type of a connection.
+ * @const
+ */
+Blockly.OPPOSITE_TYPE = [];
+Blockly.OPPOSITE_TYPE[Blockly.INPUT_VALUE] = Blockly.OUTPUT_VALUE;
+Blockly.OPPOSITE_TYPE[Blockly.OUTPUT_VALUE] = Blockly.INPUT_VALUE;
+Blockly.OPPOSITE_TYPE[Blockly.NEXT_STATEMENT] = Blockly.PREVIOUS_STATEMENT;
+Blockly.OPPOSITE_TYPE[Blockly.PREVIOUS_STATEMENT] = Blockly.NEXT_STATEMENT;
+
+/**
+ * Currently selected block.
+ * @type {Blockly.Block}
+ */
+Blockly.selected = null;
+
+/**
+ * Currently highlighted connection (during a drag).
+ * @type {Blockly.Connection}
+ * @private
+ */
+Blockly.highlightedConnection_ = null;
+
+/**
+ * Connection on dragged block that matches the highlighted connection.
+ * @type {Blockly.Connection}
+ * @private
+ */
+Blockly.localConnection_ = null;
+
+/**
+ * Number of pixels the mouse must move before a drag starts.
+ */
+Blockly.DRAG_RADIUS = 5;
+
+/**
+ * Maximum misalignment between connections for them to snap together.
+ */
+Blockly.SNAP_RADIUS = 20;
+
+/**
+ * Delay in ms between trigger and bumping unconnected block out of alignment.
+ */
+Blockly.BUMP_DELAY = 250;
+
+/**
+ * Number of characters to truncate a collapsed block to.
+ */
+Blockly.COLLAPSE_CHARS = 30;
+
+/**
+ * Length in ms for a touch to become a long press.
+ */
+Blockly.LONGPRESS = 750;
+
+/**
+ * The main workspace most recently used.
+ * Set by Blockly.WorkspaceSvg.prototype.markFocused
+ * @type {Blockly.Workspace}
+ */
+Blockly.mainWorkspace = null;
+
+/**
+ * Contents of the local clipboard.
+ * @type {Element}
+ * @private
+ */
+Blockly.clipboardXml_ = null;
+
+/**
+ * Source of the local clipboard.
+ * @type {Blockly.WorkspaceSvg}
+ * @private
+ */
+Blockly.clipboardSource_ = null;
+
+/**
+ * Is the mouse dragging a block?
+ * 0 - No drag operation.
+ * 1 - Still inside the sticky DRAG_RADIUS.
+ * 2 - Freely draggable.
+ * @private
+ */
+Blockly.dragMode_ = 0;
+
+/**
+ * Wrapper function called when a touch mouseUp occurs during a drag operation.
+ * @type {Array.<!Array>}
+ * @private
+ */
+Blockly.onTouchUpWrapper_ = null;
+
+/**
+ * Returns the dimensions of the specified SVG image.
+ * @param {!Element} svg SVG image.
+ * @return {!Object} Contains width and height properties.
+ */
+Blockly.svgSize = function(svg) {
+  return {width: svg.cachedWidth_,
+          height: svg.cachedHeight_};
+};
+
+/**
+ * Size the SVG image to completely fill its container.
+ * Record the height/width of the SVG image.
+ * @param {!Blockly.WorkspaceSvg} workspace Any workspace in the SVG.
+ */
+Blockly.svgResize = function(workspace) {
+  var mainWorkspace = workspace;
+  while (mainWorkspace.options.parentWorkspace) {
+    mainWorkspace = mainWorkspace.options.parentWorkspace;
+  }
+  var svg = mainWorkspace.options.svg;
+  var div = svg.parentNode;
+  if (!div) {
+    // Workspace deteted, or something.
+    return;
+  }
+  var width = div.offsetWidth;
+  var height = div.offsetHeight;
+  if (svg.cachedWidth_ != width) {
+    svg.setAttribute('width', width + 'px');
+    svg.cachedWidth_ = width;
+  }
+  if (svg.cachedHeight_ != height) {
+    svg.setAttribute('height', height + 'px');
+    svg.cachedHeight_ = height;
+  }
+  mainWorkspace.resize();
+};
+
+/**
+ * Handle a mouse-up anywhere on the page.
+ * @param {!Event} e Mouse up event.
+ * @private
+ */
+Blockly.onMouseUp_ = function(e) {
+  var workspace = Blockly.getMainWorkspace();
+  Blockly.Css.setCursor(Blockly.Css.Cursor.OPEN);
+  workspace.isScrolling = false;
+
+  // Unbind the touch event if it exists.
+  if (Blockly.onTouchUpWrapper_) {
+    Blockly.unbindEvent_(Blockly.onTouchUpWrapper_);
+    Blockly.onTouchUpWrapper_ = null;
+  }
+  if (Blockly.onMouseMoveWrapper_) {
+    Blockly.unbindEvent_(Blockly.onMouseMoveWrapper_);
+    Blockly.onMouseMoveWrapper_ = null;
+  }
+};
+
+/**
+ * Handle a mouse-move on SVG drawing surface.
+ * @param {!Event} e Mouse move event.
+ * @private
+ */
+Blockly.onMouseMove_ = function(e) {
+  if (e.touches && e.touches.length >= 2) {
+    return;  // Multi-touch gestures won't have e.clientX.
+  }
+  var workspace = Blockly.getMainWorkspace();
+  if (workspace.isScrolling) {
+    Blockly.removeAllRanges();
+    var dx = e.clientX - workspace.startDragMouseX;
+    var dy = e.clientY - workspace.startDragMouseY;
+    var metrics = workspace.startDragMetrics;
+    var x = workspace.startScrollX + dx;
+    var y = workspace.startScrollY + dy;
+    x = Math.min(x, -metrics.contentLeft);
+    y = Math.min(y, -metrics.contentTop);
+    x = Math.max(x, metrics.viewWidth - metrics.contentLeft -
+                 metrics.contentWidth);
+    y = Math.max(y, metrics.viewHeight - metrics.contentTop -
+                 metrics.contentHeight);
+
+    // Move the scrollbars and the page will scroll automatically.
+    workspace.scrollbar.set(-x - metrics.contentLeft,
+                            -y - metrics.contentTop);
+    // Cancel the long-press if the drag has moved too far.
+    if (Math.sqrt(dx * dx + dy * dy) > Blockly.DRAG_RADIUS) {
+      Blockly.longStop_();
+    }
+    e.stopPropagation();
+  }
+};
+
+/**
+ * Handle a key-down on SVG drawing surface.
+ * @param {!Event} e Key down event.
+ * @private
+ */
+Blockly.onKeyDown_ = function(e) {
+  if (Blockly.isTargetInput_(e)) {
+    // When focused on an HTML text input widget, don't trap any keys.
+    return;
+  }
+  var deleteBlock = false;
+  if (e.keyCode == 27) {
+    // Pressing esc closes the context menu.
+    Blockly.hideChaff();
+  } else if (e.keyCode == 8 || e.keyCode == 46) {
+    // Delete or backspace.
+    try {
+      if (Blockly.selected && Blockly.selected.isDeletable()) {
+        deleteBlock = true;
+      }
+    } finally {
+      // Stop the browser from going back to the previous page.
+      // Use a finally so that any error in delete code above doesn't disappear
+      // from the console when the page rolls back.
+      e.preventDefault();
+    }
+  } else if (e.altKey || e.ctrlKey || e.metaKey) {
+    if (Blockly.selected &&
+        Blockly.selected.isDeletable() && Blockly.selected.isMovable()) {
+      if (e.keyCode == 67) {
+        // 'c' for copy.
+        Blockly.hideChaff();
+        Blockly.copy_(Blockly.selected);
+      } else if (e.keyCode == 88) {
+        // 'x' for cut.
+        Blockly.copy_(Blockly.selected);
+        deleteBlock = true;
+      }
+    }
+    if (e.keyCode == 86) {
+      // 'v' for paste.
+      if (Blockly.clipboardXml_) {
+        Blockly.clipboardSource_.paste(Blockly.clipboardXml_);
+      }
+    }
+  }
+  if (deleteBlock) {
+    // Common code for delete and cut.
+    Blockly.hideChaff();
+    var heal = Blockly.dragMode_ != 2;
+    Blockly.selected.dispose(heal, true);
+    if (Blockly.highlightedConnection_) {
+      Blockly.highlightedConnection_.unhighlight();
+      Blockly.highlightedConnection_ = null;
+    }
+  }
+};
+
+/**
+ * Stop binding to the global mouseup and mousemove events.
+ * @private
+ */
+Blockly.terminateDrag_ = function() {
+  Blockly.BlockSvg.terminateDrag_();
+  Blockly.Flyout.terminateDrag_();
+};
+
+/**
+ * PID of queued long-press task.
+ * @private
+ */
+Blockly.longPid_ = 0;
+
+/**
+ * Context menus on touch devices are activated using a long-press.
+ * Unfortunately the contextmenu touch event is currently (2015) only suported
+ * by Chrome.  This function is fired on any touchstart event, queues a task,
+ * which after about a second opens the context menu.  The tasks is killed
+ * if the touch event terminates early.
+ * @param {!Event} e Touch start event.
+ * @param {!Blockly.Block|!Blockly.WorkspaceSvg} uiObject The block or workspace
+ *   under the touchstart event.
+ * @private
+ */
+Blockly.longStart_ = function(e, uiObject) {
+  Blockly.longStop_();
+  Blockly.longPid_ = setTimeout(function() {
+      e.button = 2;  // Simulate a right button click.
+      uiObject.onMouseDown_(e);
+    }, Blockly.LONGPRESS);
+};
+
+/**
+ * Nope, that's not a long-press.  Either touchend or touchcancel was fired,
+ * or a drag hath begun.  Kill the queued long-press task.
+ * @private
+ */
+Blockly.longStop_ = function() {
+  if (Blockly.longPid_) {
+    clearTimeout(Blockly.longPid_);
+    Blockly.longPid_ = 0;
+  }
+};
+
+/**
+ * Copy a block onto the local clipboard.
+ * @param {!Blockly.Block} block Block to be copied.
+ * @private
+ */
+Blockly.copy_ = function(block) {
+  var xmlBlock = Blockly.Xml.blockToDom_(block);
+  if (Blockly.dragMode_ != 2) {
+    Blockly.Xml.deleteNext(xmlBlock);
+  }
+  // Encode start position in XML.
+  var xy = block.getRelativeToSurfaceXY();
+  xmlBlock.setAttribute('x', block.RTL ? -xy.x : xy.x);
+  xmlBlock.setAttribute('y', xy.y);
+  Blockly.clipboardXml_ = xmlBlock;
+  Blockly.clipboardSource_ = block.workspace;
+};
+
+/**
+ * Duplicate this block and its children.
+ * @param {!Blockly.Block} block Block to be copied.
+ * @private
+ */
+Blockly.duplicate_ = function(block) {
+  // Save the clipboard.
+  var clipboardXml = Blockly.clipboardXml_;
+  var clipboardSource = Blockly.clipboardSource_;
+
+  // Create a duplicate via a copy/paste operation.
+  Blockly.copy_(block);
+  block.workspace.paste(Blockly.clipboardXml_);
+
+  // Restore the clipboard.
+  Blockly.clipboardXml_ = clipboardXml;
+  Blockly.clipboardSource_ = clipboardSource;
+};
+
+/**
+ * Cancel the native context menu, unless the focus is on an HTML input widget.
+ * @param {!Event} e Mouse down event.
+ * @private
+ */
+Blockly.onContextMenu_ = function(e) {
+  if (!Blockly.isTargetInput_(e)) {
+    // When focused on an HTML text input widget, don't cancel the context menu.
+    e.preventDefault();
+  }
+};
+
+/**
+ * Close tooltips, context menus, dropdown selections, etc.
+ * @param {boolean=} opt_allowToolbox If true, don't close the toolbox.
+ */
+Blockly.hideChaff = function(opt_allowToolbox) {
+  Blockly.Tooltip.hide();
+  Blockly.WidgetDiv.hide();
+  if (!opt_allowToolbox) {
+    var workspace = Blockly.getMainWorkspace();
+    if (workspace.toolbox_ &&
+        workspace.toolbox_.flyout_ &&
+        workspace.toolbox_.flyout_.autoClose) {
+      workspace.toolbox_.clearSelection();
+    }
+  }
+};
+
+/**
+ * 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.
+ * @return {Object} Contains size and position metrics of main workspace.
+ * @private
+ * @this Blockly.WorkspaceSvg
+ */
+Blockly.getMainWorkspaceMetrics_ = function() {
+  var svgSize = Blockly.svgSize(this.options.svg);
+  if (this.toolbox_) {
+    svgSize.width -= this.toolbox_.width;
+  }
+  // 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;
+  try {
+    var blockBox = this.getCanvas().getBBox();
+  } catch (e) {
+    // Firefox has trouble with hidden elements (Bug 528969).
+    return null;
+  }
+  // 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.RTL && this.toolbox_) {
+    absoluteLeft = this.toolbox_.width;
+  }
+  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: 0,
+    absoluteLeft: absoluteLeft
+  };
+  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_();
+    }
+  }
+};
+
+/**
+ * Execute a command.  Generally, a command is the result of a user action
+ * e.g., a click, drag or context menu selection.  Calling the cmdThunk function
+ * through doCommand() allows us to capture information that can be used for
+ * capabilities like undo (which is supported by the realtime collaboration
+ * feature).
+ * @param {function()} cmdThunk A function representing the command execution.
+ */
+Blockly.doCommand = function(cmdThunk) {
+  if (Blockly.Realtime.isEnabled) {
+    Blockly.Realtime.doCommand(cmdThunk);
+  } else {
+    cmdThunk();
+  }
+};
+
+/**
+ * When something in Blockly's workspace changes, call a function.
+ * @param {!Function} func Function to call.
+ * @return {!Array.<!Array>} Opaque data that can be passed to
+ *     removeChangeListener.
+ * @deprecated April 2015
+ */
+Blockly.addChangeListener = function(func) {
+  // Backwards compatability from before there could be multiple workspaces.
+  console.warn('Deprecated call to Blockly.addChangeListener, ' +
+               'use workspace.addChangeListener instead.');
+  return Blockly.getMainWorkspace().addChangeListener(func);
+};
+
+/**
+ * Returns the main workspace.  Returns the last used main workspace (based on
+ * focus).
+ * @return {!Blockly.Workspace} The main workspace.
+ */
+Blockly.getMainWorkspace = function() {
+  return Blockly.mainWorkspace;
+};
+
+// Export symbols that would otherwise be renamed by Closure compiler.
+if (!goog.global['Blockly']) {
+  goog.global['Blockly'] = {};
+}
+goog.global['Blockly']['getMainWorkspace'] = Blockly.getMainWorkspace;
+goog.global['Blockly']['addChangeListener'] = Blockly.addChangeListener;

src/blockly/core/blocks.js

@@ -0,0 +1,48 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2013 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Name space for the Blocks singleton.
+ * @author spertus@google.com (Ellen Spertus)
+ */
+'use strict';
+
+goog.provide('Blockly.Blocks');
+
+
+/**
+ * Unique ID counter for created blocks.
+ * @private
+ */
+Blockly.Blocks.uidCounter_ = 0;
+
+/**
+ * Generate a unique ID.  This will be locally or globally unique, depending on
+ * whether we are in single user or realtime collaborative mode.
+ * @return {string}
+ */
+Blockly.Blocks.genUid = function() {
+  var uid = (++Blockly.Blocks.uidCounter_).toString();
+  if (Blockly.Realtime.isEnabled()) {
+    return Blockly.Realtime.genUid(uid);
+  } else {
+    return uid;
+  }
+};

src/blockly/core/bubble.js

@@ -0,0 +1,578 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2012 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Object representing a UI bubble.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.Bubble');
+
+goog.require('Blockly.Workspace');
+goog.require('goog.dom');
+goog.require('goog.math');
+goog.require('goog.userAgent');
+
+
+/**
+ * Class for UI bubble.
+ * @param {!Blockly.Workspace} workspace The workspace on which to draw the
+ *     bubble.
+ * @param {!Element} content SVG content for the bubble.
+ * @param {Element} shape SVG element to avoid eclipsing.
+ * @param {number} anchorX Absolute horizontal position of bubbles anchor point.
+ * @param {number} anchorY Absolute vertical position of bubbles anchor point.
+ * @param {?number} bubbleWidth Width of bubble, or null if not resizable.
+ * @param {?number} bubbleHeight Height of bubble, or null if not resizable.
+ * @constructor
+ */
+Blockly.Bubble = function(workspace, content, shape,
+                          anchorX, anchorY,
+                          bubbleWidth, bubbleHeight) {
+  this.workspace_ = workspace;
+  this.content_ = content;
+  this.shape_ = shape;
+
+  var angle = Blockly.Bubble.ARROW_ANGLE;
+  if (this.workspace_.RTL) {
+    angle = -angle;
+  }
+  this.arrow_radians_ = goog.math.toRadians(angle);
+
+  var canvas = workspace.getBubbleCanvas();
+  canvas.appendChild(this.createDom_(content, !!(bubbleWidth && bubbleHeight)));
+
+  this.setAnchorLocation(anchorX, anchorY);
+  if (!bubbleWidth || !bubbleHeight) {
+    var bBox = /** @type {SVGLocatable} */ (this.content_).getBBox();
+    bubbleWidth = bBox.width + 2 * Blockly.Bubble.BORDER_WIDTH;
+    bubbleHeight = bBox.height + 2 * Blockly.Bubble.BORDER_WIDTH;
+  }
+  this.setBubbleSize(bubbleWidth, bubbleHeight);
+
+  // Render the bubble.
+  this.positionBubble_();
+  this.renderArrow_();
+  this.rendered_ = true;
+
+  if (!workspace.options.readOnly) {
+    Blockly.bindEvent_(this.bubbleBack_, 'mousedown', this,
+                       this.bubbleMouseDown_);
+    if (this.resizeGroup_) {
+      Blockly.bindEvent_(this.resizeGroup_, 'mousedown', this,
+                         this.resizeMouseDown_);
+    }
+  }
+};
+
+/**
+ * Width of the border around the bubble.
+ */
+Blockly.Bubble.BORDER_WIDTH = 6;
+
+/**
+ * Determines the thickness of the base of the arrow in relation to the size
+ * of the bubble.  Higher numbers result in thinner arrows.
+ */
+Blockly.Bubble.ARROW_THICKNESS = 10;
+
+/**
+ * The number of degrees that the arrow bends counter-clockwise.
+ */
+Blockly.Bubble.ARROW_ANGLE = 20;
+
+/**
+ * The sharpness of the arrow's bend.  Higher numbers result in smoother arrows.
+ */
+Blockly.Bubble.ARROW_BEND = 4;
+
+/**
+ * Distance between arrow point and anchor point.
+ */
+Blockly.Bubble.ANCHOR_RADIUS = 8;
+
+/**
+ * Wrapper function called when a mouseUp occurs during a drag operation.
+ * @type {Array.<!Array>}
+ * @private
+ */
+Blockly.Bubble.onMouseUpWrapper_ = null;
+
+/**
+ * Wrapper function called when a mouseMove occurs during a drag operation.
+ * @type {Array.<!Array>}
+ * @private
+ */
+Blockly.Bubble.onMouseMoveWrapper_ = null;
+
+/**
+ * Stop binding to the global mouseup and mousemove events.
+ * @private
+ */
+Blockly.Bubble.unbindDragEvents_ = function() {
+  if (Blockly.Bubble.onMouseUpWrapper_) {
+    Blockly.unbindEvent_(Blockly.Bubble.onMouseUpWrapper_);
+    Blockly.Bubble.onMouseUpWrapper_ = null;
+  }
+  if (Blockly.Bubble.onMouseMoveWrapper_) {
+    Blockly.unbindEvent_(Blockly.Bubble.onMouseMoveWrapper_);
+    Blockly.Bubble.onMouseMoveWrapper_ = null;
+  }
+};
+
+/**
+ * Flag to stop incremental rendering during construction.
+ * @private
+ */
+Blockly.Bubble.prototype.rendered_ = false;
+
+/**
+ * Absolute X coordinate of anchor point.
+ * @private
+ */
+Blockly.Bubble.prototype.anchorX_ = 0;
+
+/**
+ * Absolute Y coordinate of anchor point.
+ * @private
+ */
+Blockly.Bubble.prototype.anchorY_ = 0;
+
+/**
+ * Relative X coordinate of bubble with respect to the anchor's centre.
+ * In RTL mode the initial value is negated.
+ * @private
+ */
+Blockly.Bubble.prototype.relativeLeft_ = 0;
+
+/**
+ * Relative Y coordinate of bubble with respect to the anchor's centre.
+ * @private
+ */
+Blockly.Bubble.prototype.relativeTop_ = 0;
+
+/**
+ * Width of bubble.
+ * @private
+ */
+Blockly.Bubble.prototype.width_ = 0;
+
+/**
+ * Height of bubble.
+ * @private
+ */
+Blockly.Bubble.prototype.height_ = 0;
+
+/**
+ * Automatically position and reposition the bubble.
+ * @private
+ */
+Blockly.Bubble.prototype.autoLayout_ = true;
+
+/**
+ * Create the bubble's DOM.
+ * @param {!Element} content SVG content for the bubble.
+ * @param {boolean} hasResize Add diagonal resize gripper if true.
+ * @return {!Element} The bubble's SVG group.
+ * @private
+ */
+Blockly.Bubble.prototype.createDom_ = function(content, hasResize) {
+  /* Create the bubble.  Here's the markup that will be generated:
+  <g>
+    <g filter="url(#blocklyEmbossFilter837493)">
+      <path d="... Z" />
+      <rect class="blocklyDraggable" rx="8" ry="8" width="180" height="180"/>
+    </g>
+    <g transform="translate(165, 165)" class="blocklyResizeSE">
+      <polygon points="0,15 15,15 15,0"/>
+      <line class="blocklyResizeLine" x1="5" y1="14" x2="14" y2="5"/>
+      <line class="blocklyResizeLine" x1="10" y1="14" x2="14" y2="10"/>
+    </g>
+    [...content goes here...]
+  </g>
+  */
+  this.bubbleGroup_ = Blockly.createSvgElement('g', {}, null);
+  var filter =
+      {'filter': 'url(#' + this.workspace_.options.embossFilterId + ')'};
+  if (goog.userAgent.getUserAgentString().indexOf('JavaFX') != -1) {
+    // Multiple reports that JavaFX can't handle filters.  UserAgent:
+    // Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.44
+    //     (KHTML, like Gecko) JavaFX/8.0 Safari/537.44
+    // https://github.com/google/blockly/issues/99
+    filter = {};
+  }
+  var bubbleEmboss = Blockly.createSvgElement('g',
+      filter, this.bubbleGroup_);
+  this.bubbleArrow_ = Blockly.createSvgElement('path', {}, bubbleEmboss);
+  this.bubbleBack_ = Blockly.createSvgElement('rect',
+      {'class': 'blocklyDraggable', 'x': 0, 'y': 0,
+      'rx': Blockly.Bubble.BORDER_WIDTH, 'ry': Blockly.Bubble.BORDER_WIDTH},
+      bubbleEmboss);
+  if (hasResize) {
+    this.resizeGroup_ = Blockly.createSvgElement('g',
+        {'class': this.workspace_.RTL ?
+                  'blocklyResizeSW' : 'blocklyResizeSE'},
+        this.bubbleGroup_);
+    var resizeSize = 2 * Blockly.Bubble.BORDER_WIDTH;
+    Blockly.createSvgElement('polygon',
+        {'points': '0,x x,x x,0'.replace(/x/g, resizeSize.toString())},
+        this.resizeGroup_);
+    Blockly.createSvgElement('line',
+        {'class': 'blocklyResizeLine',
+        'x1': resizeSize / 3, 'y1': resizeSize - 1,
+        'x2': resizeSize - 1, 'y2': resizeSize / 3}, this.resizeGroup_);
+    Blockly.createSvgElement('line',
+        {'class': 'blocklyResizeLine',
+        'x1': resizeSize * 2 / 3, 'y1': resizeSize - 1,
+        'x2': resizeSize - 1, 'y2': resizeSize * 2 / 3}, this.resizeGroup_);
+  } else {
+    this.resizeGroup_ = null;
+  }
+  this.bubbleGroup_.appendChild(content);
+  return this.bubbleGroup_;
+};
+
+/**
+ * Handle a mouse-down on bubble's border.
+ * @param {!Event} e Mouse down event.
+ * @private
+ */
+Blockly.Bubble.prototype.bubbleMouseDown_ = function(e) {
+  this.promote_();
+  Blockly.Bubble.unbindDragEvents_();
+  if (Blockly.isRightButton(e)) {
+    // No right-click.
+    e.stopPropagation();
+    return;
+  } else if (Blockly.isTargetInput_(e)) {
+    // When focused on an HTML text input widget, don't trap any events.
+    return;
+  }
+  // Left-click (or middle click)
+  Blockly.Css.setCursor(Blockly.Css.Cursor.CLOSED);
+
+  this.workspace_.startDrag(e,
+      this.workspace_.RTL ? -this.relativeLeft_ : this.relativeLeft_,
+      this.relativeTop_);
+
+  Blockly.Bubble.onMouseUpWrapper_ = Blockly.bindEvent_(document,
+      'mouseup', this, Blockly.Bubble.unbindDragEvents_);
+  Blockly.Bubble.onMouseMoveWrapper_ = Blockly.bindEvent_(document,
+      'mousemove', this, this.bubbleMouseMove_);
+  Blockly.hideChaff();
+  // This event has been handled.  No need to bubble up to the document.
+  e.stopPropagation();
+};
+
+/**
+ * Drag this bubble to follow the mouse.
+ * @param {!Event} e Mouse move event.
+ * @private
+ */
+Blockly.Bubble.prototype.bubbleMouseMove_ = function(e) {
+  this.autoLayout_ = false;
+  var newXY = this.workspace_.moveDrag(e);
+  this.relativeLeft_ = this.workspace_.RTL ? -newXY.x : newXY.x;
+  this.relativeTop_ = newXY.y;
+  this.positionBubble_();
+  this.renderArrow_();
+};
+
+/**
+ * Handle a mouse-down on bubble's resize corner.
+ * @param {!Event} e Mouse down event.
+ * @private
+ */
+Blockly.Bubble.prototype.resizeMouseDown_ = function(e) {
+  this.promote_();
+  Blockly.Bubble.unbindDragEvents_();
+  if (Blockly.isRightButton(e)) {
+    // No right-click.
+    e.stopPropagation();
+    return;
+  }
+  // Left-click (or middle click)
+  Blockly.Css.setCursor(Blockly.Css.Cursor.CLOSED);
+
+  this.workspace_.startDrag(e,
+      this.workspace_.RTL ? -this.width_ : this.width_, this.height_);
+
+  Blockly.Bubble.onMouseUpWrapper_ = Blockly.bindEvent_(document,
+      'mouseup', this, Blockly.Bubble.unbindDragEvents_);
+  Blockly.Bubble.onMouseMoveWrapper_ = Blockly.bindEvent_(document,
+      'mousemove', this, this.resizeMouseMove_);
+  Blockly.hideChaff();
+  // This event has been handled.  No need to bubble up to the document.
+  e.stopPropagation();
+};
+
+/**
+ * Resize this bubble to follow the mouse.
+ * @param {!Event} e Mouse move event.
+ * @private
+ */
+Blockly.Bubble.prototype.resizeMouseMove_ = function(e) {
+  this.autoLayout_ = false;
+  var newXY = this.workspace_.moveDrag(e);
+  this.setBubbleSize(this.workspace_.RTL ? -newXY.x : newXY.x, newXY.y);
+  if (this.workspace_.RTL) {
+    // RTL requires the bubble to move its left edge.
+    this.positionBubble_();
+  }
+};
+
+/**
+ * Register a function as a callback event for when the bubble is resized.
+ * @param {Object} thisObject The value of 'this' in the callback.
+ * @param {!Function} callback The function to call on resize.
+ */
+Blockly.Bubble.prototype.registerResizeEvent = function(thisObject, callback) {
+  Blockly.bindEvent_(this.bubbleGroup_, 'resize', thisObject, callback);
+};
+
+/**
+ * Move this bubble to the top of the stack.
+ * @private
+ */
+Blockly.Bubble.prototype.promote_ = function() {
+  var svgGroup = this.bubbleGroup_.parentNode;
+  svgGroup.appendChild(this.bubbleGroup_);
+};
+
+/**
+ * Notification that the anchor has moved.
+ * Update the arrow and bubble accordingly.
+ * @param {number} x Absolute horizontal location.
+ * @param {number} y Absolute vertical location.
+ */
+Blockly.Bubble.prototype.setAnchorLocation = function(x, y) {
+  this.anchorX_ = x;
+  this.anchorY_ = y;
+  if (this.rendered_) {
+    this.positionBubble_();
+  }
+};
+
+/**
+ * Position the bubble so that it does not fall off-screen.
+ * @private
+ */
+Blockly.Bubble.prototype.layoutBubble_ = function() {
+  // Compute the preferred bubble location.
+  var relativeLeft = -this.width_ / 4;
+  var relativeTop = -this.height_ - Blockly.BlockSvg.MIN_BLOCK_Y;
+  // Prevent the bubble from being off-screen.
+  var metrics = this.workspace_.getMetrics();
+  metrics.viewWidth /= this.workspace_.scale;
+  metrics.viewLeft /= this.workspace_.scale;
+  if (this.workspace_.RTL) {
+    if (this.anchorX_ - metrics.viewLeft - relativeLeft - this.width_ <
+        Blockly.Scrollbar.scrollbarThickness) {
+      // Slide the bubble right until it is onscreen.
+      relativeLeft = this.anchorX_ - metrics.viewLeft - this.width_ -
+        Blockly.Scrollbar.scrollbarThickness;
+    } else if (this.anchorX_ - metrics.viewLeft - relativeLeft >
+               metrics.viewWidth) {
+      // Slide the bubble left until it is onscreen.
+      relativeLeft = this.anchorX_ - metrics.viewLeft - metrics.viewWidth;
+    }
+  } else {
+    if (this.anchorX_ + relativeLeft < metrics.viewLeft) {
+      // Slide the bubble right until it is onscreen.
+      relativeLeft = metrics.viewLeft - this.anchorX_;
+    } else if (metrics.viewLeft + metrics.viewWidth <
+        this.anchorX_ + relativeLeft + this.width_ +
+        Blockly.BlockSvg.SEP_SPACE_X +
+        Blockly.Scrollbar.scrollbarThickness) {
+      // Slide the bubble left until it is onscreen.
+      relativeLeft = metrics.viewLeft + metrics.viewWidth - this.anchorX_ -
+          this.width_ - Blockly.Scrollbar.scrollbarThickness;
+    }
+  }
+  if (this.anchorY_ + relativeTop < metrics.viewTop) {
+    // Slide the bubble below the block.
+    var bBox = /** @type {SVGLocatable} */ (this.shape_).getBBox();
+    relativeTop = bBox.height;
+  }
+  this.relativeLeft_ = relativeLeft;
+  this.relativeTop_ = relativeTop;
+};
+
+/**
+ * Move the bubble to a location relative to the anchor's centre.
+ * @private
+ */
+Blockly.Bubble.prototype.positionBubble_ = function() {
+  var left;
+  if (this.workspace_.RTL) {
+    left = this.anchorX_ - this.relativeLeft_ - this.width_;
+  } else {
+    left = this.anchorX_ + this.relativeLeft_;
+  }
+  var top = this.relativeTop_ + this.anchorY_;
+  this.bubbleGroup_.setAttribute('transform',
+      'translate(' + left + ',' + top + ')');
+};
+
+/**
+ * Get the dimensions of this bubble.
+ * @return {!Object} Object with width and height properties.
+ */
+Blockly.Bubble.prototype.getBubbleSize = function() {
+  return {width: this.width_, height: this.height_};
+};
+
+/**
+ * Size this bubble.
+ * @param {number} width Width of the bubble.
+ * @param {number} height Height of the bubble.
+ */
+Blockly.Bubble.prototype.setBubbleSize = function(width, height) {
+  var doubleBorderWidth = 2 * Blockly.Bubble.BORDER_WIDTH;
+  // Minimum size of a bubble.
+  width = Math.max(width, doubleBorderWidth + 45);
+  height = Math.max(height, doubleBorderWidth + 20);
+  this.width_ = width;
+  this.height_ = height;
+  this.bubbleBack_.setAttribute('width', width);
+  this.bubbleBack_.setAttribute('height', height);
+  if (this.resizeGroup_) {
+    if (this.workspace_.RTL) {
+      // Mirror the resize group.
+      var resizeSize = 2 * Blockly.Bubble.BORDER_WIDTH;
+      this.resizeGroup_.setAttribute('transform', 'translate(' +
+          resizeSize + ',' + (height - doubleBorderWidth) + ') scale(-1 1)');
+    } else {
+      this.resizeGroup_.setAttribute('transform', 'translate(' +
+          (width - doubleBorderWidth) + ',' +
+          (height - doubleBorderWidth) + ')');
+    }
+  }
+  if (this.rendered_) {
+    if (this.autoLayout_) {
+      this.layoutBubble_();
+    }
+    this.positionBubble_();
+    this.renderArrow_();
+  }
+  // Fire an event to allow the contents to resize.
+  Blockly.fireUiEvent(this.bubbleGroup_, 'resize');
+};
+
+/**
+ * Draw the arrow between the bubble and the origin.
+ * @private
+ */
+Blockly.Bubble.prototype.renderArrow_ = function() {
+  var steps = [];
+  // Find the relative coordinates of the center of the bubble.
+  var relBubbleX = this.width_ / 2;
+  var relBubbleY = this.height_ / 2;
+  // Find the relative coordinates of the center of the anchor.
+  var relAnchorX = -this.relativeLeft_;
+  var relAnchorY = -this.relativeTop_;
+  if (relBubbleX == relAnchorX && relBubbleY == relAnchorY) {
+    // Null case.  Bubble is directly on top of the anchor.
+    // Short circuit this rather than wade through divide by zeros.
+    steps.push('M ' + relBubbleX + ',' + relBubbleY);
+  } else {
+    // Compute the angle of the arrow's line.
+    var rise = relAnchorY - relBubbleY;
+    var run = relAnchorX - relBubbleX;
+    if (this.workspace_.RTL) {
+      run *= -1;
+    }
+    var hypotenuse = Math.sqrt(rise * rise + run * run);
+    var angle = Math.acos(run / hypotenuse);
+    if (rise < 0) {
+      angle = 2 * Math.PI - angle;
+    }
+    // Compute a line perpendicular to the arrow.
+    var rightAngle = angle + Math.PI / 2;
+    if (rightAngle > Math.PI * 2) {
+      rightAngle -= Math.PI * 2;
+    }
+    var rightRise = Math.sin(rightAngle);
+    var rightRun = Math.cos(rightAngle);
+
+    // Calculate the thickness of the base of the arrow.
+    var bubbleSize = this.getBubbleSize();
+    var thickness = (bubbleSize.width + bubbleSize.height) /
+                    Blockly.Bubble.ARROW_THICKNESS;
+    thickness = Math.min(thickness, bubbleSize.width, bubbleSize.height) / 2;
+
+    // Back the tip of the arrow off of the anchor.
+    var backoffRatio = 1 - Blockly.Bubble.ANCHOR_RADIUS / hypotenuse;
+    relAnchorX = relBubbleX + backoffRatio * run;
+    relAnchorY = relBubbleY + backoffRatio * rise;
+
+    // Coordinates for the base of the arrow.
+    var baseX1 = relBubbleX + thickness * rightRun;
+    var baseY1 = relBubbleY + thickness * rightRise;
+    var baseX2 = relBubbleX - thickness * rightRun;
+    var baseY2 = relBubbleY - thickness * rightRise;
+
+    // Distortion to curve the arrow.
+    var swirlAngle = angle + this.arrow_radians_;
+    if (swirlAngle > Math.PI * 2) {
+      swirlAngle -= Math.PI * 2;
+    }
+    var swirlRise = Math.sin(swirlAngle) *
+        hypotenuse / Blockly.Bubble.ARROW_BEND;
+    var swirlRun = Math.cos(swirlAngle) *
+        hypotenuse / Blockly.Bubble.ARROW_BEND;
+
+    steps.push('M' + baseX1 + ',' + baseY1);
+    steps.push('C' + (baseX1 + swirlRun) + ',' + (baseY1 + swirlRise) +
+               ' ' + relAnchorX + ',' + relAnchorY +
+               ' ' + relAnchorX + ',' + relAnchorY);
+    steps.push('C' + relAnchorX + ',' + relAnchorY +
+               ' ' + (baseX2 + swirlRun) + ',' + (baseY2 + swirlRise) +
+               ' ' + baseX2 + ',' + baseY2);
+  }
+  steps.push('z');
+  this.bubbleArrow_.setAttribute('d', steps.join(' '));
+};
+
+/**
+ * Change the colour of a bubble.
+ * @param {string} hexColour Hex code of colour.
+ */
+Blockly.Bubble.prototype.setColour = function(hexColour) {
+  this.bubbleBack_.setAttribute('fill', hexColour);
+  this.bubbleArrow_.setAttribute('fill', hexColour);
+};
+
+/**
+ * Dispose of this bubble.
+ */
+Blockly.Bubble.prototype.dispose = function() {
+  Blockly.Bubble.unbindDragEvents_();
+  // Dispose of and unlink the bubble.
+  goog.dom.removeNode(this.bubbleGroup_);
+  this.bubbleGroup_ = null;
+  this.bubbleArrow_ = null;
+  this.bubbleBack_ = null;
+  this.resizeGroup_ = null;
+  this.workspace_ = null;
+  this.content_ = null;
+  this.shape_ = null;
+};

src/blockly/core/connection.js

@@ -0,0 +1,925 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2011 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Components for creating connections between blocks.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.Connection');
+goog.provide('Blockly.ConnectionDB');
+
+goog.require('goog.dom');
+
+
+/**
+ * Class for a connection between blocks.
+ * @param {!Blockly.Block} source The block establishing this connection.
+ * @param {number} type The type of the connection.
+ * @constructor
+ */
+Blockly.Connection = function(source, type) {
+  /** @type {!Blockly.Block} */
+  this.sourceBlock_ = source;
+  /** @type {number} */
+  this.type = type;
+  // Shortcut for the databases for this connection's workspace.
+  if (source.workspace.connectionDBList) {
+    this.db_ = source.workspace.connectionDBList[type];
+    this.dbOpposite_ =
+        source.workspace.connectionDBList[Blockly.OPPOSITE_TYPE[type]];
+    this.hidden_ = !this.db_;
+  }
+};
+
+/**
+ * Connection this connection connects to.  Null if not connected.
+ * @type {Blockly.Connection}
+ */
+Blockly.Connection.prototype.targetConnection = null;
+
+/**
+ * List of compatible value types.  Null if all types are compatible.
+ * @type {Array}
+ * @private
+ */
+Blockly.Connection.prototype.check_ = null;
+
+/**
+ * DOM representation of a shadow block, or null if none.
+ * @type {Element}
+ * @private
+ */
+Blockly.Connection.prototype.shadowDom_ = null;
+
+/**
+ * Horizontal location of this connection.
+ * @type {number}
+ * @private
+ */
+Blockly.Connection.prototype.x_ = 0;
+
+/**
+ * Vertical location of this connection.
+ * @type {number}
+ * @private
+ */
+Blockly.Connection.prototype.y_ = 0;
+
+/**
+ * Has this connection been added to the connection database?
+ * @type {boolean}
+ * @private
+ */
+Blockly.Connection.prototype.inDB_ = false;
+
+/**
+ * Connection database for connections of this type on the current workspace.
+ * @type {Blockly.ConnectionDB}
+ * @private
+ */
+Blockly.Connection.prototype.db_ = null;
+
+/**
+ * Connection database for connections compatible with this type on the
+ * current workspace.
+ * @type {Blockly.ConnectionDB}
+ * @private
+ */
+Blockly.Connection.prototype.dbOpposite_ = null;
+
+/**
+ * Whether this connections is hidden (not tracked in a database) or not.
+ * @type {boolean}
+ * @private
+ */
+Blockly.Connection.prototype.hidden_ = null;
+
+/**
+ * Sever all links to this connection (not including from the source object).
+ */
+Blockly.Connection.prototype.dispose = function() {
+  if (this.targetConnection) {
+    throw 'Disconnect connection before disposing of it.';
+  }
+  if (this.inDB_) {
+    this.db_.removeConnection_(this);
+  }
+  if (Blockly.highlightedConnection_ == this) {
+    Blockly.highlightedConnection_ = null;
+  }
+  if (Blockly.localConnection_ == this) {
+    Blockly.localConnection_ = null;
+  }
+  this.db_ = null;
+  this.dbOpposite_ = null;
+};
+
+/**
+ * Does the connection belong to a superior block (higher in the source stack)?
+ * @return {boolean} True if connection faces down or right.
+ */
+Blockly.Connection.prototype.isSuperior = function() {
+  return this.type == Blockly.INPUT_VALUE ||
+      this.type == Blockly.NEXT_STATEMENT;
+};
+
+/**
+ * Connect this connection to another connection.
+ * @param {!Blockly.Connection} otherConnection Connection to connect to.
+ */
+Blockly.Connection.prototype.connect = function(otherConnection) {
+  if (this.sourceBlock_ == otherConnection.sourceBlock_) {
+    throw 'Attempted to connect a block to itself.';
+  }
+  if (this.sourceBlock_.workspace !== otherConnection.sourceBlock_.workspace) {
+    throw 'Blocks are on different workspaces.';
+  }
+  if (Blockly.OPPOSITE_TYPE[this.type] != otherConnection.type) {
+    throw 'Attempt to connect incompatible types.';
+  }
+  if (this.type == Blockly.INPUT_VALUE || this.type == Blockly.OUTPUT_VALUE) {
+    if (this.targetConnection) {
+      // Can't make a value connection if male block is already connected.
+      throw 'Source connection already connected (value).';
+    } else if (otherConnection.targetConnection) {
+      // Record and disable the shadow so that it does not respawn here.
+      var shadowDom = otherConnection.getShadowDom();
+      otherConnection.setShadowDom(null);
+      // If female block is already connected, disconnect and bump the male.
+      var orphanBlock = otherConnection.targetBlock();
+      orphanBlock.setParent(null);
+      if (orphanBlock.isShadow()) {
+        otherConnection.setShadowDom(Blockly.Xml.blockToDom_(orphanBlock));
+        orphanBlock.dispose();
+      } else {
+        if (!orphanBlock.outputConnection) {
+          throw 'Orphan block does not have an output connection.';
+        }
+        // Attempt to reattach the orphan at the end of the newly inserted
+        // block.  Since this block may be a row, walk down to the end.
+        var newBlock = this.sourceBlock_;
+        var connection;
+        while (connection = Blockly.Connection.singleConnection_(
+            /** @type {!Blockly.Block} */ (newBlock), orphanBlock)) {
+          // '=' is intentional in line above.
+          newBlock = connection.targetBlock();
+          if (!newBlock || newBlock.isShadow()) {
+            orphanBlock.outputConnection.connect(connection);
+            orphanBlock = null;
+            break;
+          }
+        }
+        if (orphanBlock) {
+          // Unable to reattach orphan.  Bump it off to the side.
+          setTimeout(function() {
+                orphanBlock.outputConnection.bumpAwayFrom_(otherConnection);
+              }, Blockly.BUMP_DELAY);
+        }
+        // Restore the shadow.
+        otherConnection.setShadowDom(shadowDom);
+      }
+    }
+  } else {
+    if (this.targetConnection) {
+      throw 'Source connection already connected (block).';
+    } else if (otherConnection.targetConnection) {
+      // Statement blocks may be inserted into the middle of a stack.
+      if (this.type != Blockly.PREVIOUS_STATEMENT) {
+        throw 'Can only do a mid-stack connection with the top of a block.';
+      }
+      // Split the stack.
+      var orphanBlock = otherConnection.targetBlock();
+      orphanBlock.setParent(null);
+      if (!orphanBlock.previousConnection) {
+        throw 'Orphan block does not have a previous connection.';
+      }
+      // Attempt to reattach the orphan at the bottom of the newly inserted
+      // block.  Since this block may be a stack, walk down to the end.
+      var newBlock = this.sourceBlock_;
+      while (newBlock.nextConnection) {
+        if (newBlock.nextConnection.targetConnection) {
+          newBlock = newBlock.getNextBlock();
+        } else {
+          if (orphanBlock.previousConnection.checkType_(
+              newBlock.nextConnection)) {
+            newBlock.nextConnection.connect(orphanBlock.previousConnection);
+            orphanBlock = null;
+          }
+          break;
+        }
+      }
+      if (orphanBlock) {
+        // Unable to reattach orphan.  Bump it off to the side.
+        setTimeout(function() {
+              orphanBlock.previousConnection.bumpAwayFrom_(otherConnection);
+            }, Blockly.BUMP_DELAY);
+      }
+    }
+  }
+
+  // Determine which block is superior (higher in the source stack).
+  var parentBlock, childBlock;
+  if (this.isSuperior()) {
+    // Superior block.
+    parentBlock = this.sourceBlock_;
+    childBlock = otherConnection.sourceBlock_;
+  } else {
+    // Inferior block.
+    parentBlock = otherConnection.sourceBlock_;
+    childBlock = this.sourceBlock_;
+  }
+
+  // Establish the connections.
+  this.targetConnection = otherConnection;
+  otherConnection.targetConnection = this;
+
+  // Demote the inferior block so that one is a child of the superior one.
+  childBlock.setParent(parentBlock);
+
+  if (parentBlock.rendered) {
+    parentBlock.updateDisabled();
+  }
+  if (childBlock.rendered) {
+    childBlock.updateDisabled();
+  }
+  if (parentBlock.rendered && childBlock.rendered) {
+    if (this.type == Blockly.NEXT_STATEMENT ||
+        this.type == Blockly.PREVIOUS_STATEMENT) {
+      // Child block may need to square off its corners if it is in a stack.
+      // Rendering a child will render its parent.
+      childBlock.render();
+    } else {
+      // Child block does not change shape.  Rendering the parent node will
+      // move its connected children into position.
+      parentBlock.render();
+    }
+  }
+};
+
+/**
+ * Does the given block have one and only one connection point that will accept
+ * an orphaned block?
+ * @param {!Blockly.Block} block The superior block.
+ * @param {!Blockly.Block} orphanBlock The inferior block.
+ * @return {Blockly.Connection} The suitable connection point on 'block',
+ *     or null.
+ * @private
+ */
+Blockly.Connection.singleConnection_ = function(block, orphanBlock) {
+  var connection = false;
+  for (var i = 0; i < block.inputList.length; i++) {
+    var thisConnection = block.inputList[i].connection;
+    if (thisConnection && thisConnection.type == Blockly.INPUT_VALUE &&
+        orphanBlock.outputConnection.checkType_(thisConnection)) {
+      if (connection) {
+        return null;  // More than one connection.
+      }
+      connection = thisConnection;
+    }
+  }
+  return connection;
+};
+
+/**
+ * Disconnect this connection.
+ */
+Blockly.Connection.prototype.disconnect = function() {
+  var otherConnection = this.targetConnection;
+  if (!otherConnection) {
+    throw 'Source connection not connected.';
+  } else if (otherConnection.targetConnection != this) {
+    throw 'Target connection not connected to source connection.';
+  }
+  otherConnection.targetConnection = null;
+  this.targetConnection = null;
+
+  // Rerender the parent so that it may reflow.
+  var parentBlock, childBlock, parentConnection;
+  if (this.isSuperior()) {
+    // Superior block.
+    parentBlock = this.sourceBlock_;
+    childBlock = otherConnection.sourceBlock_;
+    parentConnection = this;
+  } else {
+    // Inferior block.
+    parentBlock = otherConnection.sourceBlock_;
+    childBlock = this.sourceBlock_;
+    parentConnection = otherConnection;
+  }
+  var shadow = parentConnection.getShadowDom();
+  if (parentBlock.workspace && !childBlock.isShadow() && shadow) {
+    // Respawn the shadow block.
+    var blockShadow =
+        Blockly.Xml.domToBlock(parentBlock.workspace, shadow);
+    if (blockShadow.outputConnection) {
+      parentConnection.connect(blockShadow.outputConnection);
+    } else if (blockShadow.previousConnection) {
+      parentConnection.connect(blockShadow.previousConnection);
+    } else {
+      throw 'Child block does not have output or previous statement.';
+    }
+    blockShadow.initSvg();
+    blockShadow.render(false);
+  }
+  if (parentBlock.rendered) {
+    parentBlock.render();
+  }
+  if (childBlock.rendered) {
+    childBlock.updateDisabled();
+    childBlock.render();
+  }
+};
+
+/**
+ * Returns the block that this connection connects to.
+ * @return {Blockly.Block} The connected block or null if none is connected.
+ */
+Blockly.Connection.prototype.targetBlock = function() {
+  if (this.targetConnection) {
+    return this.targetConnection.sourceBlock_;
+  }
+  return null;
+};
+
+/**
+ * Move the block(s) belonging to the connection to a point where they don't
+ * visually interfere with the specified connection.
+ * @param {!Blockly.Connection} staticConnection The connection to move away
+ *     from.
+ * @private
+ */
+Blockly.Connection.prototype.bumpAwayFrom_ = function(staticConnection) {
+  if (Blockly.dragMode_ != 0) {
+    // Don't move blocks around while the user is doing the same.
+    return;
+  }
+  // Move the root block.
+  var rootBlock = this.sourceBlock_.getRootBlock();
+  if (rootBlock.isInFlyout) {
+    // Don't move blocks around in a flyout.
+    return;
+  }
+  var reverse = false;
+  if (!rootBlock.isMovable()) {
+    // Can't bump an uneditable block away.
+    // Check to see if the other block is movable.
+    rootBlock = staticConnection.sourceBlock_.getRootBlock();
+    if (!rootBlock.isMovable()) {
+      return;
+    }
+    // Swap the connections and move the 'static' connection instead.
+    staticConnection = this;
+    reverse = true;
+  }
+  // Raise it to the top for extra visibility.
+  rootBlock.getSvgRoot().parentNode.appendChild(rootBlock.getSvgRoot());
+  var dx = (staticConnection.x_ + Blockly.SNAP_RADIUS) - this.x_;
+  var dy = (staticConnection.y_ + Blockly.SNAP_RADIUS) - this.y_;
+  if (reverse) {
+    // When reversing a bump due to an uneditable block, bump up.
+    dy = -dy;
+  }
+  if (rootBlock.RTL) {
+    dx = -dx;
+  }
+  rootBlock.moveBy(dx, dy);
+};
+
+/**
+ * Change the connection's coordinates.
+ * @param {number} x New absolute x coordinate.
+ * @param {number} y New absolute y coordinate.
+ */
+Blockly.Connection.prototype.moveTo = function(x, y) {
+  // Remove it from its old location in the database (if already present)
+  if (this.inDB_) {
+    this.db_.removeConnection_(this);
+  }
+  this.x_ = x;
+  this.y_ = y;
+  // Insert it into its new location in the database.
+  if (!this.hidden_) {
+    this.db_.addConnection_(this);
+  }
+};
+
+/**
+ * Change the connection's coordinates.
+ * @param {number} dx Change to x coordinate.
+ * @param {number} dy Change to y coordinate.
+ */
+Blockly.Connection.prototype.moveBy = function(dx, dy) {
+  this.moveTo(this.x_ + dx, this.y_ + dy);
+};
+
+/**
+ * Add highlighting around this connection.
+ */
+Blockly.Connection.prototype.highlight = function() {
+  var steps;
+  if (this.type == Blockly.INPUT_VALUE || this.type == Blockly.OUTPUT_VALUE) {
+    var tabWidth = this.sourceBlock_.RTL ? -Blockly.BlockSvg.TAB_WIDTH :
+        Blockly.BlockSvg.TAB_WIDTH;
+    steps = 'm 0,0 v 5 c 0,10 ' + -tabWidth + ',-8 ' + -tabWidth + ',7.5 s ' +
+            tabWidth + ',-2.5 ' + tabWidth + ',7.5 v 5';
+  } else {
+    if (this.sourceBlock_.RTL) {
+      steps = 'm 20,0 h -5 ' + Blockly.BlockSvg.NOTCH_PATH_RIGHT + ' h -5';
+    } else {
+      steps = 'm -20,0 h 5 ' + Blockly.BlockSvg.NOTCH_PATH_LEFT + ' h 5';
+    }
+  }
+  var xy = this.sourceBlock_.getRelativeToSurfaceXY();
+  var x = this.x_ - xy.x;
+  var y = this.y_ - xy.y;
+  Blockly.Connection.highlightedPath_ = Blockly.createSvgElement('path',
+      {'class': 'blocklyHighlightedConnectionPath',
+       'd': steps,
+       transform: 'translate(' + x + ',' + y + ')'},
+      this.sourceBlock_.getSvgRoot());
+};
+
+/**
+ * Remove the highlighting around this connection.
+ */
+Blockly.Connection.prototype.unhighlight = function() {
+  goog.dom.removeNode(Blockly.Connection.highlightedPath_);
+  delete Blockly.Connection.highlightedPath_;
+};
+
+/**
+ * Move the blocks on either side of this connection right next to each other.
+ * @private
+ */
+Blockly.Connection.prototype.tighten_ = function() {
+  var dx = this.targetConnection.x_ - this.x_;
+  var dy = this.targetConnection.y_ - this.y_;
+  if (dx != 0 || dy != 0) {
+    var block = this.targetBlock();
+    var svgRoot = block.getSvgRoot();
+    if (!svgRoot) {
+      throw 'block is not rendered.';
+    }
+    var xy = Blockly.getRelativeXY_(svgRoot);
+    block.getSvgRoot().setAttribute('transform',
+        'translate(' + (xy.x - dx) + ',' + (xy.y - dy) + ')');
+    block.moveConnections_(-dx, -dy);
+  }
+};
+
+/**
+ * Find the closest compatible connection to this connection.
+ * @param {number} maxLimit The maximum radius to another connection.
+ * @param {number} dx Horizontal offset between this connection's location
+ *     in the database and the current location (as a result of dragging).
+ * @param {number} dy Vertical offset between this connection's location
+ *     in the database and the current location (as a result of dragging).
+ * @return {!Object} Contains two properties: 'connection' which is either
+ *     another connection or null, and 'radius' which is the distance.
+ */
+Blockly.Connection.prototype.closest = function(maxLimit, dx, dy) {
+  if (this.targetConnection) {
+    // Don't offer to connect to a connection that's already connected.
+    return {connection: null, radius: maxLimit};
+  }
+  // Determine the opposite type of connection.
+  var db = this.dbOpposite_;
+
+  // Since this connection is probably being dragged, add the delta.
+  var currentX = this.x_ + dx;
+  var currentY = this.y_ + dy;
+
+  // Binary search to find the closest y location.
+  var pointerMin = 0;
+  var pointerMax = db.length - 2;
+  var pointerMid = pointerMax;
+  while (pointerMin < pointerMid) {
+    if (db[pointerMid].y_ < currentY) {
+      pointerMin = pointerMid;
+    } else {
+      pointerMax = pointerMid;
+    }
+    pointerMid = Math.floor((pointerMin + pointerMax) / 2);
+  }
+
+  // Walk forward and back on the y axis looking for the closest x,y point.
+  pointerMin = pointerMid;
+  pointerMax = pointerMid;
+  var closestConnection = null;
+  var sourceBlock = this.sourceBlock_;
+  var thisConnection = this;
+  if (db.length) {
+    while (pointerMin >= 0 && checkConnection_(pointerMin)) {
+      pointerMin--;
+    }
+    do {
+      pointerMax++;
+    } while (pointerMax < db.length && checkConnection_(pointerMax));
+  }
+
+  /**
+   * Computes if the current connection is within the allowed radius of another
+   * connection.
+   * This function is a closure and has access to outside variables.
+   * @param {number} yIndex The other connection's index in the database.
+   * @return {boolean} True if the search needs to continue: either the current
+   *     connection's vertical distance from the other connection is less than
+   *     the allowed radius, or if the connection is not compatible.
+   * @private
+   */
+  function checkConnection_(yIndex) {
+    var connection = db[yIndex];
+    if (connection.type == Blockly.OUTPUT_VALUE ||
+        connection.type == Blockly.PREVIOUS_STATEMENT) {
+      // Don't offer to connect an already connected left (male) value plug to
+      // an available right (female) value plug.  Don't offer to connect the
+      // bottom of a statement block to one that's already connected.
+      if (connection.targetConnection) {
+        return true;
+      }
+    }
+    // Offering to connect the top of a statement block to an already connected
+    // connection is ok, we'll just insert it into the stack.
+
+    // Offering to connect the left (male) of a value block to an already
+    // connected value pair is ok, we'll splice it in.
+    // However, don't offer to splice into an unmovable block.
+    if (connection.type == Blockly.INPUT_VALUE &&
+        connection.targetConnection &&
+        !connection.targetBlock().isMovable() &&
+        !connection.targetBlock().isShadow()) {
+      return true;
+    }
+
+    // Do type checking.
+    if (!thisConnection.checkType_(connection)) {
+      return true;
+    }
+
+    // Don't let blocks try to connect to themselves or ones they nest.
+    var targetSourceBlock = connection.sourceBlock_;
+    do {
+      if (sourceBlock == targetSourceBlock) {
+        return true;
+      }
+      targetSourceBlock = targetSourceBlock.getParent();
+    } while (targetSourceBlock);
+
+    // Only connections within the maxLimit radius.
+    var dx = currentX - connection.x_;
+    var dy = currentY - connection.y_;
+    var r = Math.sqrt(dx * dx + dy * dy);
+    if (r <= maxLimit) {
+      closestConnection = connection;
+      maxLimit = r;
+    }
+    return Math.abs(dy) < maxLimit;
+  }
+  return {connection: closestConnection, radius: maxLimit};
+};
+
+/**
+ * Is this connection compatible with another connection with respect to the
+ * value type system.  E.g. square_root("Hello") is not compatible.
+ * @param {!Blockly.Connection} otherConnection Connection to compare against.
+ * @return {boolean} True if the connections share a type.
+ * @private
+ */
+Blockly.Connection.prototype.checkType_ = function(otherConnection) {
+  // Don't split a connection where both sides are immovable.
+  var thisTargetBlock = this.targetBlock();
+  if (thisTargetBlock && !thisTargetBlock.isMovable() &&
+      !this.sourceBlock_.isMovable()) {
+    return false;
+  }
+  var otherTargetBlock = otherConnection.targetBlock();
+  if (otherTargetBlock && !otherTargetBlock.isMovable() &&
+      !otherConnection.sourceBlock_.isMovable()) {
+    return false;
+  }
+  if (!this.check_ || !otherConnection.check_) {
+    // One or both sides are promiscuous enough that anything will fit.
+    return true;
+  }
+  // Find any intersection in the check lists.
+  for (var i = 0; i < this.check_.length; i++) {
+    if (otherConnection.check_.indexOf(this.check_[i]) != -1) {
+      return true;
+    }
+  }
+  // No intersection.
+  return false;
+};
+
+/**
+ * Change a connection's compatibility.
+ * @param {*} check Compatible value type or list of value types.
+ *     Null if all types are compatible.
+ * @return {!Blockly.Connection} The connection being modified
+ *     (to allow chaining).
+ */
+Blockly.Connection.prototype.setCheck = function(check) {
+  if (check) {
+    // Ensure that check is in an array.
+    if (!goog.isArray(check)) {
+      check = [check];
+    }
+    this.check_ = check;
+    // The new value type may not be compatible with the existing connection.
+    if (this.targetConnection && !this.checkType_(this.targetConnection)) {
+      if (this.isSuperior()) {
+        this.targetBlock().setParent(null);
+      } else {
+        this.sourceBlock_.setParent(null);
+      }
+      // Bump away.
+      this.sourceBlock_.bumpNeighbours_();
+    }
+  } else {
+    this.check_ = null;
+  }
+  return this;
+};
+
+/**
+ * Change a connection's shadow block.
+ * @param {Element} shadow DOM representation of a block or null.
+ */
+Blockly.Connection.prototype.setShadowDom = function(shadow) {
+  this.shadowDom_ = shadow;
+};
+
+/**
+ * Return a connection's shadow block.
+ * @return {Element} shadow DOM representation of a block or null.
+ */
+Blockly.Connection.prototype.getShadowDom = function() {
+  return this.shadowDom_;
+};
+
+/**
+ * Find all nearby compatible connections to this connection.
+ * Type checking does not apply, since this function is used for bumping.
+ * @param {number} maxLimit The maximum radius to another connection.
+ * @return {!Array.<Blockly.Connection>} List of connections.
+ * @private
+ */
+Blockly.Connection.prototype.neighbours_ = function(maxLimit) {
+  // Determine the opposite type of connection.
+  var db = this.dbOpposite_;
+
+  var currentX = this.x_;
+  var currentY = this.y_;
+
+  // Binary search to find the closest y location.
+  var pointerMin = 0;
+  var pointerMax = db.length - 2;
+  var pointerMid = pointerMax;
+  while (pointerMin < pointerMid) {
+    if (db[pointerMid].y_ < currentY) {
+      pointerMin = pointerMid;
+    } else {
+      pointerMax = pointerMid;
+    }
+    pointerMid = Math.floor((pointerMin + pointerMax) / 2);
+  }
+
+  // Walk forward and back on the y axis looking for the closest x,y point.
+  pointerMin = pointerMid;
+  pointerMax = pointerMid;
+  var neighbours = [];
+  var sourceBlock = this.sourceBlock_;
+  if (db.length) {
+    while (pointerMin >= 0 && checkConnection_(pointerMin)) {
+      pointerMin--;
+    }
+    do {
+      pointerMax++;
+    } while (pointerMax < db.length && checkConnection_(pointerMax));
+  }
+
+  /**
+   * Computes if the current connection is within the allowed radius of another
+   * connection.
+   * This function is a closure and has access to outside variables.
+   * @param {number} yIndex The other connection's index in the database.
+   * @return {boolean} True if the current connection's vertical distance from
+   *     the other connection is less than the allowed radius.
+   */
+  function checkConnection_(yIndex) {
+    var dx = currentX - db[yIndex].x_;
+    var dy = currentY - db[yIndex].y_;
+    var r = Math.sqrt(dx * dx + dy * dy);
+    if (r <= maxLimit) {
+      neighbours.push(db[yIndex]);
+    }
+    return dy < maxLimit;
+  }
+  return neighbours;
+};
+
+/**
+ * Set whether this connections is hidden (not tracked in a database) or not.
+ * @param {boolean} hidden True if connection is hidden.
+ */
+Blockly.Connection.prototype.setHidden = function(hidden) {
+  this.hidden_ = hidden;
+  if (hidden && this.inDB_) {
+    this.db_.removeConnection_(this);
+  } else if (!hidden && !this.inDB_) {
+    this.db_.addConnection_(this);
+  }
+};
+
+/**
+ * Hide this connection, as well as all down-stream connections on any block
+ * attached to this connection.  This happens when a block is collapsed.
+ * Also hides down-stream comments.
+ */
+Blockly.Connection.prototype.hideAll = function() {
+  this.setHidden(true);
+  if (this.targetConnection) {
+    var blocks = this.targetBlock().getDescendants();
+    for (var b = 0; b < blocks.length; b++) {
+      var block = blocks[b];
+      // Hide all connections of all children.
+      var connections = block.getConnections_(true);
+      for (var c = 0; c < connections.length; c++) {
+        connections[c].setHidden(true);
+      }
+      // Close all bubbles of all children.
+      var icons = block.getIcons();
+      for (var i = 0; i < icons.length; i++) {
+        icons[i].setVisible(false);
+      }
+    }
+  }
+};
+
+/**
+ * Unhide this connection, as well as all down-stream connections on any block
+ * attached to this connection.  This happens when a block is expanded.
+ * Also unhides down-stream comments.
+ * @return {!Array.<!Blockly.Block>} List of blocks to render.
+ */
+Blockly.Connection.prototype.unhideAll = function() {
+  this.setHidden(false);
+  // All blocks that need unhiding must be unhidden before any rendering takes
+  // place, since rendering requires knowing the dimensions of lower blocks.
+  // Also, since rendering a block renders all its parents, we only need to
+  // render the leaf nodes.
+  var renderList = [];
+  if (this.type != Blockly.INPUT_VALUE && this.type != Blockly.NEXT_STATEMENT) {
+    // Only spider down.
+    return renderList;
+  }
+  var block = this.targetBlock();
+  if (block) {
+    var connections;
+    if (block.isCollapsed()) {
+      // This block should only be partially revealed since it is collapsed.
+      connections = [];
+      block.outputConnection && connections.push(block.outputConnection);
+      block.nextConnection && connections.push(block.nextConnection);
+      block.previousConnection && connections.push(block.previousConnection);
+    } else {
+      // Show all connections of this block.
+      connections = block.getConnections_(true);
+    }
+    for (var c = 0; c < connections.length; c++) {
+      renderList.push.apply(renderList, connections[c].unhideAll());
+    }
+    if (renderList.length == 0) {
+      // Leaf block.
+      renderList[0] = block;
+    }
+  }
+  return renderList;
+};
+
+
+/**
+ * Database of connections.
+ * Connections are stored in order of their vertical component.  This way
+ * connections in an area may be looked up quickly using a binary search.
+ * @constructor
+ */
+Blockly.ConnectionDB = function() {
+};
+
+Blockly.ConnectionDB.prototype = new Array();
+/**
+ * Don't inherit the constructor from Array.
+ * @type {!Function}
+ */
+Blockly.ConnectionDB.constructor = Blockly.ConnectionDB;
+
+/**
+ * Add a connection to the database.  Must not already exist in DB.
+ * @param {!Blockly.Connection} connection The connection to be added.
+ * @private
+ */
+Blockly.ConnectionDB.prototype.addConnection_ = function(connection) {
+  if (connection.inDB_) {
+    throw 'Connection already in database.';
+  }
+  if (connection.sourceBlock_.isInFlyout) {
+    // Don't bother maintaining a database of connections in a flyout.
+    return;
+  }
+  // Insert connection using binary search.
+  var pointerMin = 0;
+  var pointerMax = this.length;
+  while (pointerMin < pointerMax) {
+    var pointerMid = Math.floor((pointerMin + pointerMax) / 2);
+    if (this[pointerMid].y_ < connection.y_) {
+      pointerMin = pointerMid + 1;
+    } else if (this[pointerMid].y_ > connection.y_) {
+      pointerMax = pointerMid;
+    } else {
+      pointerMin = pointerMid;
+      break;
+    }
+  }
+  this.splice(pointerMin, 0, connection);
+  connection.inDB_ = true;
+};
+
+/**
+ * Remove a connection from the database.  Must already exist in DB.
+ * @param {!Blockly.Connection} connection The connection to be removed.
+ * @private
+ */
+Blockly.ConnectionDB.prototype.removeConnection_ = function(connection) {
+  if (!connection.inDB_) {
+    throw 'Connection not in database.';
+  }
+  connection.inDB_ = false;
+  // Find the connection using a binary search.
+  // About 10% faster than a linear search using indexOf.
+  var pointerMin = 0;
+  var pointerMax = this.length - 2;
+  var pointerMid = pointerMax;
+  while (pointerMin < pointerMid) {
+    if (this[pointerMid].y_ < connection.y_) {
+      pointerMin = pointerMid;
+    } else {
+      pointerMax = pointerMid;
+    }
+    pointerMid = Math.floor((pointerMin + pointerMax) / 2);
+  }
+
+  // Walk forward and back on the y axis looking for the connection.
+  // When found, splice it out of the array.
+  pointerMin = pointerMid;
+  pointerMax = pointerMid;
+  while (pointerMin >= 0 && this[pointerMin].y_ == connection.y_) {
+    if (this[pointerMin] == connection) {
+      this.splice(pointerMin, 1);
+      return;
+    }
+    pointerMin--;
+  }
+  do {
+    if (this[pointerMax] == connection) {
+      this.splice(pointerMax, 1);
+      return;
+    }
+    pointerMax++;
+  } while (pointerMax < this.length &&
+           this[pointerMax].y_ == connection.y_);
+  throw 'Unable to find connection in connectionDB.';
+};
+
+/**
+ * Initialize a set of connection DBs for a specified workspace.
+ * @param {!Blockly.Workspace} workspace The workspace this DB is for.
+ */
+Blockly.ConnectionDB.init = function(workspace) {
+  // Create four databases, one for each connection type.
+  var dbList = [];
+  dbList[Blockly.INPUT_VALUE] = new Blockly.ConnectionDB();
+  dbList[Blockly.OUTPUT_VALUE] = new Blockly.ConnectionDB();
+  dbList[Blockly.NEXT_STATEMENT] = new Blockly.ConnectionDB();
+  dbList[Blockly.PREVIOUS_STATEMENT] = new Blockly.ConnectionDB();
+  workspace.connectionDBList = dbList;
+};

src/blockly/core/contextmenu.js

@@ -0,0 +1,141 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2011 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Functionality for the right-click context menus.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.ContextMenu');
+
+goog.require('goog.dom');
+goog.require('goog.events');
+goog.require('goog.style');
+goog.require('goog.ui.Menu');
+goog.require('goog.ui.MenuItem');
+
+
+/**
+ * Which block is the context menu attached to?
+ * @type {Blockly.Block}
+ */
+Blockly.ContextMenu.currentBlock = null;
+
+/**
+ * Construct the menu based on the list of options and show the menu.
+ * @param {!Event} e Mouse event.
+ * @param {!Array.<!Object>} options Array of menu options.
+ * @param {boolean} rtl True if RTL, false if LTR.
+ */
+Blockly.ContextMenu.show = function(e, options, rtl) {
+  Blockly.WidgetDiv.show(Blockly.ContextMenu, rtl, null);
+  if (!options.length) {
+    Blockly.ContextMenu.hide();
+    return;
+  }
+  /* Here's what one option object looks like:
+    {text: 'Make It So',
+     enabled: true,
+     callback: Blockly.MakeItSo}
+  */
+  var menu = new goog.ui.Menu();
+  menu.setRightToLeft(rtl);
+  for (var x = 0, option; option = options[x]; x++) {
+    var menuItem = new goog.ui.MenuItem(option.text);
+    menuItem.setRightToLeft(rtl);
+    menu.addChild(menuItem, true);
+    menuItem.setEnabled(option.enabled);
+    if (option.enabled) {
+      var evtHandlerCapturer = function(callback) {
+        return function() { Blockly.doCommand(callback); };
+      };
+      goog.events.listen(menuItem, goog.ui.Component.EventType.ACTION,
+                         evtHandlerCapturer(option.callback));
+    }
+  }
+  goog.events.listen(menu, goog.ui.Component.EventType.ACTION,
+                     Blockly.ContextMenu.hide);
+  // Record windowSize and scrollOffset before adding menu.
+  var windowSize = goog.dom.getViewportSize();
+  var scrollOffset = goog.style.getViewportPageOffset(document);
+  var div = Blockly.WidgetDiv.DIV;
+  menu.render(div);
+  var menuDom = menu.getElement();
+  Blockly.addClass_(menuDom, 'blocklyContextMenu');
+  // Record menuSize after adding menu.
+  var menuSize = goog.style.getSize(menuDom);
+
+  // Position the menu.
+  var x = e.clientX + scrollOffset.x;
+  var y = e.clientY + scrollOffset.y;
+  // Flip menu vertically if off the bottom.
+  if (e.clientY + menuSize.height >= windowSize.height) {
+    y -= menuSize.height;
+  }
+  // Flip menu horizontally if off the edge.
+  if (rtl) {
+    if (menuSize.width >= e.clientX) {
+      x += menuSize.width;
+    }
+  } else {
+    if (e.clientX + menuSize.width >= windowSize.width) {
+      x -= menuSize.width;
+    }
+  }
+  Blockly.WidgetDiv.position(x, y, windowSize, scrollOffset, rtl);
+
+  menu.setAllowAutoFocus(true);
+  // 1ms delay is required for focusing on context menus because some other
+  // mouse event is still waiting in the queue and clears focus.
+  setTimeout(function() {menuDom.focus();}, 1);
+  Blockly.ContextMenu.currentBlock = null;  // May be set by Blockly.Block.
+};
+
+/**
+ * Hide the context menu.
+ */
+Blockly.ContextMenu.hide = function() {
+  Blockly.WidgetDiv.hideIfOwner(Blockly.ContextMenu);
+  Blockly.ContextMenu.currentBlock = null;
+};
+
+/**
+ * Create a callback function that creates and configures a block,
+ *   then places the new block next to the original.
+ * @param {!Blockly.Block} block Original block.
+ * @param {!Element} xml XML representation of new block.
+ * @return {!Function} Function that creates a block.
+ */
+Blockly.ContextMenu.callbackFactory = function(block, xml) {
+  return function() {
+    var newBlock = Blockly.Xml.domToBlock(block.workspace, xml);
+    // Move the new block next to the old block.
+    var xy = block.getRelativeToSurfaceXY();
+    if (block.RTL) {
+      xy.x -= Blockly.SNAP_RADIUS;
+    } else {
+      xy.x += Blockly.SNAP_RADIUS;
+    }
+    xy.y += Blockly.SNAP_RADIUS * 2;
+    newBlock.moveBy(xy.x, xy.y);
+    newBlock.select();
+  };
+};

src/blockly/core/css.js

@@ -0,0 +1,732 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2013 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Inject Blockly's CSS synchronously.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.Css');
+
+
+/**
+ * List of cursors.
+ * @enum {string}
+ */
+Blockly.Css.Cursor = {
+  OPEN: 'handopen',
+  CLOSED: 'handclosed',
+  DELETE: 'handdelete'
+};
+
+/**
+ * Current cursor (cached value).
+ * @type {string}
+ * @private
+ */
+Blockly.Css.currentCursor_ = '';
+
+/**
+ * Large stylesheet added by Blockly.Css.inject.
+ * @type {Element}
+ * @private
+ */
+Blockly.Css.styleSheet_ = null;
+
+/**
+ * Path to media directory, with any trailing slash removed.
+ * @type {string}
+ * @private
+ */
+Blockly.Css.mediaPath_ = '';
+
+/**
+ * Inject the CSS into the DOM.  This is preferable over using a regular CSS
+ * file since:
+ * a) It loads synchronously and doesn't force a redraw later.
+ * b) It speeds up loading by not blocking on a separate HTTP transfer.
+ * c) The CSS content may be made dynamic depending on init options.
+ * @param {boolean} hasCss If false, don't inject CSS
+ *     (providing CSS becomes the document's responsibility).
+ * @param {string} pathToMedia Path from page to the Blockly media directory.
+ */
+Blockly.Css.inject = function(hasCss, pathToMedia) {
+  // Only inject the CSS once.
+  if (Blockly.Css.styleSheet_) {
+    return;
+  }
+  // Placeholder for cursor rule.  Must be first rule (index 0).
+  var text = '.blocklyDraggable {}\n';
+  if (hasCss) {
+    text += Blockly.Css.CONTENT.join('\n');
+    if (Blockly.FieldDate) {
+      text += Blockly.FieldDate.CSS.join('\n');
+    }
+  }
+  // Strip off any trailing slash (either Unix or Windows).
+  Blockly.Css.mediaPath_ = pathToMedia.replace(/[\\\/]$/, '');
+  text = text.replace(/<<<PATH>>>/g, Blockly.Css.mediaPath_);
+  // Inject CSS tag.
+  var cssNode = document.createElement('style');
+  document.head.appendChild(cssNode);
+  var cssTextNode = document.createTextNode(text);
+  cssNode.appendChild(cssTextNode);
+  Blockly.Css.styleSheet_ = cssNode.sheet;
+  Blockly.Css.setCursor(Blockly.Css.Cursor.OPEN);
+};
+
+/**
+ * Set the cursor to be displayed when over something draggable.
+ * @param {Blockly.Css.Cursor} cursor Enum.
+ */
+Blockly.Css.setCursor = function(cursor) {
+  if (Blockly.Css.currentCursor_ == cursor) {
+    return;
+  }
+  Blockly.Css.currentCursor_ = cursor;
+  var url = 'url(' + Blockly.Css.mediaPath_ + '/' + cursor + '.cur), auto';
+  // There are potentially hundreds of draggable objects.  Changing their style
+  // properties individually is too slow, so change the CSS rule instead.
+  var rule = '.blocklyDraggable {\n  cursor: ' + url + ';\n}\n';
+  Blockly.Css.styleSheet_.deleteRule(0);
+  Blockly.Css.styleSheet_.insertRule(rule, 0);
+  // There is probably only one toolbox, so just change its style property.
+  var toolboxen = document.getElementsByClassName('blocklyToolboxDiv');
+  for (var i = 0, toolbox; toolbox = toolboxen[i]; i++) {
+    if (cursor == Blockly.Css.Cursor.DELETE) {
+      toolbox.style.cursor = url;
+    } else {
+      toolbox.style.cursor = '';
+    }
+  }
+  // Set cursor on the whole document, so that rapid movements
+  // don't result in cursor changing to an arrow momentarily.
+  var html = document.body.parentNode;
+  if (cursor == Blockly.Css.Cursor.OPEN) {
+    html.style.cursor = '';
+  } else {
+    html.style.cursor = url;
+  }
+};
+
+/**
+ * Array making up the CSS content for Blockly.
+ */
+Blockly.Css.CONTENT = [
+  '.blocklySvg {',
+    'background-color: #fff;',
+    'outline: none;',
+    'overflow: hidden;',  /* IE overflows by default. */
+  '}',
+
+  '.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;',
+    'fill: #aaa;',
+  '}',
+
+  '.blocklyResizeSW {',
+    'cursor: sw-resize;',
+    'fill: #aaa;',
+  '}',
+
+  '.blocklyResizeLine {',
+    'stroke: #888;',
+    'stroke-width: 1;',
+  '}',
+
+  '.blocklyHighlightedConnectionPath {',
+    'fill: none;',
+    'stroke: #fc3;',
+    'stroke-width: 4px;',
+  '}',
+
+  '.blocklyPathLight {',
+    'fill: none;',
+    'stroke-linecap: round;',
+    'stroke-width: 1;',
+  '}',
+
+  '.blocklySelected>.blocklyPath {',
+    'stroke: #fc3;',
+    'stroke-width: 3px;',
+  '}',
+
+  '.blocklySelected>.blocklyPathLight {',
+    'display: none;',
+  '}',
+
+  '.blocklyDragging>.blocklyPath,',
+  '.blocklyDragging>.blocklyPathLight {',
+    'fill-opacity: .8;',
+    'stroke-opacity: .8;',
+  '}',
+
+  '.blocklyDragging>.blocklyPathDark {',
+    'display: none;',
+  '}',
+
+  '.blocklyDisabled>.blocklyPath {',
+    'fill-opacity: .5;',
+    'stroke-opacity: .5;',
+  '}',
+
+  '.blocklyDisabled>.blocklyPathLight,',
+  '.blocklyDisabled>.blocklyPathDark {',
+    'display: none;',
+  '}',
+
+  '.blocklyText {',
+    'cursor: default;',
+    'fill: #fff;',
+    'font-family: sans-serif;',
+    'font-size: 11pt;',
+  '}',
+
+  '.blocklyNonEditableText>text {',
+    'pointer-events: none;',
+  '}',
+
+  '.blocklyNonEditableText>rect,',
+  '.blocklyEditableText>rect {',
+    'fill: #fff;',
+    'fill-opacity: .6;',
+  '}',
+
+  '.blocklyNonEditableText>text,',
+  '.blocklyEditableText>text {',
+    'fill: #000;',
+  '}',
+
+  '.blocklyEditableText:hover>rect {',
+    'stroke: #fff;',
+    'stroke-width: 2;',
+  '}',
+
+  '.blocklyBubbleText {',
+    'fill: #000;',
+  '}',
+
+  /*
+    Don't allow users to select text.  It gets annoying when trying to
+    drag a block and selected text moves instead.
+  */
+  '.blocklySvg text {',
+    'user-select: none;',
+    '-moz-user-select: none;',
+    '-webkit-user-select: none;',
+    'cursor: inherit;',
+  '}',
+
+  '.blocklyHidden {',
+    'display: none;',
+  '}',
+
+  '.blocklyFieldDropdown:not(.blocklyHidden) {',
+    'display: block;',
+  '}',
+
+  '.blocklyIconGroup {',
+    'cursor: default;',
+  '}',
+
+  '.blocklyIconGroup:not(:hover),',
+  '.blocklyIconGroupReadonly {',
+    'opacity: .6;',
+  '}',
+
+  '.blocklyMinimalBody {',
+    'margin: 0;',
+    'padding: 0;',
+  '}',
+
+  '.blocklyCommentTextarea {',
+    'background-color: #ffc;',
+    'border: 0;',
+    'margin: 0;',
+    'padding: 2px;',
+    'resize: none;',
+  '}',
+
+  '.blocklyHtmlInput {',
+    'border: none;',
+    'border-radius: 4px;',
+    'font-family: sans-serif;',
+    'height: 100%;',
+    'margin: 0;',
+    'outline: none;',
+    'padding: 0 1px;',
+    'width: 100%',
+  '}',
+
+  '.blocklyMainBackground {',
+    'stroke-width: 1;',
+    'stroke: #c6c6c6;',  /* Equates to #ddd due to border being off-pixel. */
+  '}',
+
+  '.blocklyMutatorBackground {',
+    'fill: #fff;',
+    'stroke: #ddd;',
+    'stroke-width: 1;',
+  '}',
+
+  '.blocklyFlyoutBackground {',
+    'fill: #ddd;',
+    'fill-opacity: .8;',
+  '}',
+
+  '.blocklyScrollbarBackground {',
+    'opacity: 0;',
+  '}',
+
+  '.blocklyScrollbarKnob {',
+    'fill: #ccc;',
+  '}',
+
+  '.blocklyScrollbarBackground:hover+.blocklyScrollbarKnob,',
+  '.blocklyScrollbarKnob:hover {',
+    'fill: #bbb;',
+  '}',
+
+  '.blocklyZoom>image {',
+    'opacity: .4;',
+  '}',
+
+  '.blocklyZoom>image:hover {',
+    'opacity: .6;',
+  '}',
+
+  '.blocklyZoom>image:active {',
+    'opacity: .8;',
+  '}',
+
+  /* Darken flyout scrollbars due to being on a grey background. */
+  /* By contrast, workspace scrollbars are on a white background. */
+  '.blocklyFlyout .blocklyScrollbarKnob {',
+    'fill: #bbb;',
+  '}',
+
+  '.blocklyFlyout .blocklyScrollbarBackground:hover+.blocklyScrollbarKnob,',
+  '.blocklyFlyout .blocklyScrollbarKnob:hover {',
+    'fill: #aaa;',
+  '}',
+
+  '.blocklyInvalidInput {',
+    'background: #faa;',
+  '}',
+
+  '.blocklyAngleCircle {',
+    'stroke: #444;',
+    'stroke-width: 1;',
+    'fill: #ddd;',
+    'fill-opacity: .8;',
+  '}',
+
+  '.blocklyAngleMarks {',
+    'stroke: #444;',
+    'stroke-width: 1;',
+  '}',
+
+  '.blocklyAngleGauge {',
+    'fill: #f88;',
+    'fill-opacity: .8;  ',
+  '}',
+
+  '.blocklyAngleLine {',
+    'stroke: #f00;',
+    'stroke-width: 2;',
+    'stroke-linecap: round;',
+  '}',
+
+  '.blocklyContextMenu {',
+    'border-radius: 4px;',
+  '}',
+
+  '.blocklyDropdownMenu {',
+    'padding: 0 !important;',
+  '}',
+
+  /* Override the default Closure URL. */
+  '.blocklyWidgetDiv .goog-option-selected .goog-menuitem-checkbox,',
+  '.blocklyWidgetDiv .goog-option-selected .goog-menuitem-icon {',
+    'background: url(<<<PATH>>>/sprites.png) no-repeat -48px -16px !important;',
+  '}',
+
+  /* Category tree in Toolbox. */
+  '.blocklyToolboxDiv {',
+    'background-color: #ddd;',
+    'overflow-x: visible;',
+    'overflow-y: auto;',
+    'position: absolute;',
+  '}',
+
+  '.blocklyTreeRoot {',
+    'padding: 4px 0;',
+  '}',
+
+  '.blocklyTreeRoot:focus {',
+    'outline: none;',
+  '}',
+
+  '.blocklyTreeRow {',
+    'height: 22px;',
+    'line-height: 22px;',
+    'margin-bottom: 3px;',
+    'padding-right: 8px;',
+    'white-space: nowrap;',
+  '}',
+
+  '.blocklyToolboxDiv[dir="RTL"] .blocklyTreeRow {',
+    'margin-left: 8px;',
+  '}',
+
+  '.blocklyTreeRow:not(.blocklyTreeSelected):hover {',
+    'background-color: #e4e4e4;',
+  '}',
+
+  '.blocklyTreeSeparator {',
+    'border-bottom: solid #e5e5e5 1px;',
+    'height: 0px;',
+    'margin: 5px 0;',
+  '}',
+
+  '.blocklyTreeIcon {',
+    'background-image: url(<<<PATH>>>/sprites.png);',
+    'height: 16px;',
+    'vertical-align: middle;',
+    'width: 16px;',
+  '}',
+
+  '.blocklyTreeIconClosedLtr {',
+    'background-position: -32px -1px;',
+  '}',
+
+  '.blocklyTreeIconClosedRtl {',
+    'background-position: 0px -1px;',
+  '}',
+
+  '.blocklyTreeIconOpen {',
+    'background-position: -16px -1px;',
+  '}',
+
+  '.blocklyTreeSelected>.blocklyTreeIconClosedLtr {',
+    'background-position: -32px -17px;',
+  '}',
+
+  '.blocklyTreeSelected>.blocklyTreeIconClosedRtl {',
+    'background-position: 0px -17px;',
+  '}',
+
+  '.blocklyTreeSelected>.blocklyTreeIconOpen {',
+    'background-position: -16px -17px;',
+  '}',
+
+  '.blocklyTreeIconNone,',
+  '.blocklyTreeSelected>.blocklyTreeIconNone {',
+    'background-position: -48px -1px;',
+  '}',
+
+  '.blocklyTreeLabel {',
+    'cursor: default;',
+    'font-family: sans-serif;',
+    'font-size: 16px;',
+    'padding: 0 3px;',
+    'vertical-align: middle;',
+  '}',
+
+  '.blocklyTreeSelected .blocklyTreeLabel {',
+    'color: #fff;',
+  '}',
+
+  /* Copied from: goog/css/colorpicker-simplegrid.css */
+  /*
+   * Copyright 2007 The Closure Library Authors. All Rights Reserved.
+   *
+   * Use of this source code is governed by the Apache License, Version 2.0.
+   * See the COPYING file for details.
+   */
+
+  /* Author: pupius@google.com (Daniel Pupius) */
+
+  /*
+    Styles to make the colorpicker look like the old gmail color picker
+    NOTE: without CSS scoping this will override styles defined in palette.css
+  */
+  '.blocklyWidgetDiv .goog-palette {',
+    'outline: none;',
+    'cursor: default;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-palette-table {',
+    'border: 1px solid #666;',
+    'border-collapse: collapse;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-palette-cell {',
+    'height: 13px;',
+    'width: 15px;',
+    'margin: 0;',
+    'border: 0;',
+    'text-align: center;',
+    'vertical-align: middle;',
+    'border-right: 1px solid #666;',
+    'font-size: 1px;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-palette-colorswatch {',
+    'position: relative;',
+    'height: 13px;',
+    'width: 15px;',
+    'border: 1px solid #666;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-palette-cell-hover .goog-palette-colorswatch {',
+    'border: 1px solid #FFF;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-palette-cell-selected .goog-palette-colorswatch {',
+    'border: 1px solid #000;',
+    'color: #fff;',
+  '}',
+
+  /* Copied from: goog/css/menu.css */
+  /*
+   * Copyright 2009 The Closure Library Authors. All Rights Reserved.
+   *
+   * Use of this source code is governed by the Apache License, Version 2.0.
+   * See the COPYING file for details.
+   */
+
+  /**
+   * Standard styling for menus created by goog.ui.MenuRenderer.
+   *
+   * @author attila@google.com (Attila Bodis)
+   */
+
+  '.blocklyWidgetDiv .goog-menu {',
+    'background: #fff;',
+    'border-color: #ccc #666 #666 #ccc;',
+    'border-style: solid;',
+    'border-width: 1px;',
+    'cursor: default;',
+    'font: normal 13px Arial, sans-serif;',
+    'margin: 0;',
+    'outline: none;',
+    'padding: 4px 0;',
+    'position: absolute;',
+    'overflow-y: auto;',
+    'overflow-x: hidden;',
+    'max-height: 100%;',
+    'z-index: 20000;',  /* Arbitrary, but some apps depend on it... */
+  '}',
+
+  /* Copied from: goog/css/menuitem.css */
+  /*
+   * Copyright 2009 The Closure Library Authors. All Rights Reserved.
+   *
+   * Use of this source code is governed by the Apache License, Version 2.0.
+   * See the COPYING file for details.
+   */
+
+  /**
+   * Standard styling for menus created by goog.ui.MenuItemRenderer.
+   *
+   * @author attila@google.com (Attila Bodis)
+   */
+
+  /**
+   * State: resting.
+   *
+   * NOTE(mleibman,chrishenry):
+   * The RTL support in Closure is provided via two mechanisms -- "rtl" CSS
+   * classes and BiDi flipping done by the CSS compiler.  Closure supports RTL
+   * with or without the use of the CSS compiler.  In order for them not
+   * to conflict with each other, the "rtl" CSS classes need to have the #noflip
+   * annotation.  The non-rtl counterparts should ideally have them as well, but,
+   * since .goog-menuitem existed without .goog-menuitem-rtl for so long before
+   * being added, there is a risk of people having templates where they are not
+   * rendering the .goog-menuitem-rtl class when in RTL and instead rely solely
+   * on the BiDi flipping by the CSS compiler.  That's why we're not adding the
+   * #noflip to .goog-menuitem.
+   */
+  '.blocklyWidgetDiv .goog-menuitem {',
+    'color: #000;',
+    'font: normal 13px Arial, sans-serif;',
+    'list-style: none;',
+    'margin: 0;',
+     /* 28px on the left for icon or checkbox; 7em on the right for shortcut. */
+    'padding: 4px 7em 4px 28px;',
+    'white-space: nowrap;',
+  '}',
+
+  /* BiDi override for the resting state. */
+  /* #noflip */
+  '.blocklyWidgetDiv .goog-menuitem.goog-menuitem-rtl {',
+     /* Flip left/right padding for BiDi. */
+    'padding-left: 7em;',
+    'padding-right: 28px;',
+  '}',
+
+  /* If a menu doesn't have checkable items or items with icons, remove padding. */
+  '.blocklyWidgetDiv .goog-menu-nocheckbox .goog-menuitem,',
+  '.blocklyWidgetDiv .goog-menu-noicon .goog-menuitem {',
+    'padding-left: 12px;',
+  '}',
+
+  /*
+   * If a menu doesn't have items with shortcuts, leave just enough room for
+   * submenu arrows, if they are rendered.
+   */
+  '.blocklyWidgetDiv .goog-menu-noaccel .goog-menuitem {',
+    'padding-right: 20px;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-menuitem-content {',
+    'color: #000;',
+    'font: normal 13px Arial, sans-serif;',
+  '}',
+
+  /* State: disabled. */
+  '.blocklyWidgetDiv .goog-menuitem-disabled .goog-menuitem-accel,',
+  '.blocklyWidgetDiv .goog-menuitem-disabled .goog-menuitem-content {',
+    'color: #ccc !important;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-menuitem-disabled .goog-menuitem-icon {',
+    'opacity: 0.3;',
+    '-moz-opacity: 0.3;',
+    'filter: alpha(opacity=30);',
+  '}',
+
+  /* State: hover. */
+  '.blocklyWidgetDiv .goog-menuitem-highlight,',
+  '.blocklyWidgetDiv .goog-menuitem-hover {',
+    'background-color: #d6e9f8;',
+     /* Use an explicit top and bottom border so that the selection is visible',
+      * in high contrast mode. */
+    'border-color: #d6e9f8;',
+    'border-style: dotted;',
+    'border-width: 1px 0;',
+    'padding-bottom: 3px;',
+    'padding-top: 3px;',
+  '}',
+
+  /* State: selected/checked. */
+  '.blocklyWidgetDiv .goog-menuitem-checkbox,',
+  '.blocklyWidgetDiv .goog-menuitem-icon {',
+    'background-repeat: no-repeat;',
+    'height: 16px;',
+    'left: 6px;',
+    'position: absolute;',
+    'right: auto;',
+    'vertical-align: middle;',
+    'width: 16px;',
+  '}',
+
+  /* BiDi override for the selected/checked state. */
+  /* #noflip */
+  '.blocklyWidgetDiv .goog-menuitem-rtl .goog-menuitem-checkbox,',
+  '.blocklyWidgetDiv .goog-menuitem-rtl .goog-menuitem-icon {',
+     /* Flip left/right positioning. */
+    'left: auto;',
+    'right: 6px;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-option-selected .goog-menuitem-checkbox,',
+  '.blocklyWidgetDiv .goog-option-selected .goog-menuitem-icon {',
+     /* Client apps may override the URL at which they serve the sprite. */
+    'background: url(//ssl.gstatic.com/editor/editortoolbar.png) no-repeat -512px 0;',
+  '}',
+
+  /* Keyboard shortcut ("accelerator") style. */
+  '.blocklyWidgetDiv .goog-menuitem-accel {',
+    'color: #999;',
+     /* Keyboard shortcuts are untranslated; always left-to-right. */
+     /* #noflip */
+    'direction: ltr;',
+    'left: auto;',
+    'padding: 0 6px;',
+    'position: absolute;',
+    'right: 0;',
+    'text-align: right;',
+  '}',
+
+  /* BiDi override for shortcut style. */
+  /* #noflip */
+  '.blocklyWidgetDiv .goog-menuitem-rtl .goog-menuitem-accel {',
+     /* Flip left/right positioning and text alignment. */
+    'left: 0;',
+    'right: auto;',
+    'text-align: left;',
+  '}',
+
+  /* Mnemonic styles. */
+  '.blocklyWidgetDiv .goog-menuitem-mnemonic-hint {',
+    'text-decoration: underline;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-menuitem-mnemonic-separator {',
+    'color: #999;',
+    'font-size: 12px;',
+    'padding-left: 4px;',
+  '}',
+
+  /* Copied from: goog/css/menuseparator.css */
+  /*
+   * Copyright 2009 The Closure Library Authors. All Rights Reserved.
+   *
+   * Use of this source code is governed by the Apache License, Version 2.0.
+   * See the COPYING file for details.
+   */
+
+  /**
+   * Standard styling for menus created by goog.ui.MenuSeparatorRenderer.
+   *
+   * @author attila@google.com (Attila Bodis)
+   */
+
+  '.blocklyWidgetDiv .goog-menuseparator {',
+    'border-top: 1px solid #ccc;',
+    'margin: 4px 0;',
+    'padding: 0;',
+  '}',
+
+  ''
+];

src/blockly/core/field.js

@@ -0,0 +1,414 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2012 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Input field.  Used for editable titles, variables, etc.
+ * This is an abstract class that defines the UI on the block.  Actual
+ * instances would be Blockly.FieldTextInput, Blockly.FieldDropdown, etc.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.Field');
+
+goog.require('goog.asserts');
+goog.require('goog.dom');
+goog.require('goog.math.Size');
+goog.require('goog.style');
+goog.require('goog.userAgent');
+
+
+/**
+ * Class for an editable field.
+ * @param {string} text The initial content of the field.
+ * @constructor
+ */
+Blockly.Field = function(text) {
+  this.size_ = new goog.math.Size(0, 25);
+  this.setText(text);
+};
+
+/**
+ * Temporary cache of text widths.
+ * @type {Object}
+ * @private
+ */
+Blockly.Field.cacheWidths_ = null;
+
+/**
+ * Number of current references to cache.
+ * @type {number}
+ * @private
+ */
+Blockly.Field.cacheReference_ = 0;
+
+/**
+ * Maximum characters of text to display before adding an ellipsis.
+ */
+Blockly.Field.prototype.maxDisplayLength = 50;
+
+/**
+ * Block this field is attached to.  Starts as null, then in set in init.
+ * @private
+ */
+Blockly.Field.prototype.sourceBlock_ = null;
+
+/**
+ * Is the field visible, or hidden due to the block being collapsed?
+ * @private
+ */
+Blockly.Field.prototype.visible_ = true;
+
+/**
+ * Change handler called when user edits an editable field.
+ * @private
+ */
+Blockly.Field.prototype.changeHandler_ = null;
+
+/**
+ * Non-breaking space.
+ */
+Blockly.Field.NBSP = '\u00A0';
+
+/**
+ * Editable fields are saved by the XML renderer, non-editable fields are not.
+ */
+Blockly.Field.prototype.EDITABLE = true;
+
+/**
+ * Install this field on a block.
+ * @param {!Blockly.Block} block The block containing this field.
+ */
+Blockly.Field.prototype.init = function(block) {
+  if (this.sourceBlock_) {
+    // Field has already been initialized once.
+    return;
+  }
+  this.sourceBlock_ = block;
+  // Build the DOM.
+  this.fieldGroup_ = Blockly.createSvgElement('g', {}, null);
+  if (!this.visible_) {
+    this.fieldGroup_.style.display = 'none';
+  }
+  this.borderRect_ = Blockly.createSvgElement('rect',
+      {'rx': 4,
+       'ry': 4,
+       'x': -Blockly.BlockSvg.SEP_SPACE_X / 2,
+       'y': 0,
+       'height': 16}, this.fieldGroup_, this.sourceBlock_.workspace);
+  /** @type {!Element} */
+  this.textElement_ = Blockly.createSvgElement('text',
+      {'class': 'blocklyText', 'y': this.size_.height - 12.5},
+      this.fieldGroup_);
+
+  this.updateEditable();
+  block.getSvgRoot().appendChild(this.fieldGroup_);
+  this.mouseUpWrapper_ =
+      Blockly.bindEvent_(this.fieldGroup_, 'mouseup', this, this.onMouseUp_);
+  // Force a render.
+  this.updateTextNode_();
+};
+
+/**
+ * Dispose of all DOM objects belonging to this editable field.
+ */
+Blockly.Field.prototype.dispose = function() {
+  if (this.mouseUpWrapper_) {
+    Blockly.unbindEvent_(this.mouseUpWrapper_);
+    this.mouseUpWrapper_ = null;
+  }
+  this.sourceBlock_ = null;
+  goog.dom.removeNode(this.fieldGroup_);
+  this.fieldGroup_ = null;
+  this.textElement_ = null;
+  this.borderRect_ = null;
+  this.changeHandler_ = null;
+};
+
+/**
+ * Add or remove the UI indicating if this field is editable or not.
+ */
+Blockly.Field.prototype.updateEditable = function() {
+  if (!this.EDITABLE || !this.sourceBlock_) {
+    return;
+  }
+  if (this.sourceBlock_.isEditable()) {
+    Blockly.addClass_(/** @type {!Element} */ (this.fieldGroup_),
+                      'blocklyEditableText');
+    Blockly.removeClass_(/** @type {!Element} */ (this.fieldGroup_),
+                         'blocklyNoNEditableText');
+    this.fieldGroup_.style.cursor = this.CURSOR;
+  } else {
+    Blockly.addClass_(/** @type {!Element} */ (this.fieldGroup_),
+                      'blocklyNonEditableText');
+    Blockly.removeClass_(/** @type {!Element} */ (this.fieldGroup_),
+                         'blocklyEditableText');
+    this.fieldGroup_.style.cursor = '';
+  }
+};
+
+/**
+ * Gets whether this editable field is visible or not.
+ * @return {boolean} True if visible.
+ */
+Blockly.Field.prototype.isVisible = function() {
+  return this.visible_;
+};
+
+/**
+ * Sets whether this editable field is visible or not.
+ * @param {boolean} visible True if visible.
+ */
+Blockly.Field.prototype.setVisible = function(visible) {
+  if (this.visible_ == visible) {
+    return;
+  }
+  this.visible_ = visible;
+  var root = this.getSvgRoot();
+  if (root) {
+    root.style.display = visible ? 'block' : 'none';
+    this.render_();
+  }
+};
+
+/**
+ * Sets a new change handler for editable fields.
+ * @param {Function} handler New change handler, or null.
+ */
+Blockly.Field.prototype.setChangeHandler = function(handler) {
+  this.changeHandler_ = handler;
+};
+
+/**
+ * Gets the group element for this editable field.
+ * Used for measuring the size and for positioning.
+ * @return {!Element} The group element.
+ */
+Blockly.Field.prototype.getSvgRoot = function() {
+  return /** @type {!Element} */ (this.fieldGroup_);
+};
+
+/**
+ * Draws the border with the correct width.
+ * Saves the computed width in a property.
+ * @private
+ */
+Blockly.Field.prototype.render_ = function() {
+  if (this.visible_ && this.textElement_) {
+    var key = this.textElement_.textContent + '\n' +
+        this.textElement_.className.baseVal;
+    if (Blockly.Field.cacheWidths_ && Blockly.Field.cacheWidths_[key]) {
+      var width = Blockly.Field.cacheWidths_[key];
+    } else {
+      try {
+        var width = this.textElement_.getComputedTextLength();
+      } catch (e) {
+        // MSIE 11 is known to throw "Unexpected call to method or property
+        // access." if Blockly is hidden.
+        var width = this.textElement_.textContent.length * 8;
+      }
+      if (Blockly.Field.cacheWidths_) {
+        Blockly.Field.cacheWidths_[key] = width;
+      }
+    }
+    if (this.borderRect_) {
+      this.borderRect_.setAttribute('width',
+          width + Blockly.BlockSvg.SEP_SPACE_X);
+    }
+  } else {
+    var width = 0;
+  }
+  this.size_.width = width;
+};
+
+/**
+ * Start caching field widths.  Every call to this function MUST also call
+ * stopCache.  Caches must not survive between execution threads.
+ * @type {Object}
+ * @private
+ */
+Blockly.Field.startCache = function() {
+  Blockly.Field.cacheReference_++;
+  if (!Blockly.Field.cacheWidths_) {
+    Blockly.Field.cacheWidths_ = {};
+  }
+};
+
+/**
+ * Stop caching field widths.  Unless caching was already on when the
+ * corresponding call to startCache was made.
+ * @type {number}
+ * @private
+ */
+Blockly.Field.stopCache = function() {
+  Blockly.Field.cacheReference_--;
+  if (!Blockly.Field.cacheReference_) {
+    Blockly.Field.cacheWidths_ = null;
+  }
+};
+
+/**
+ * Returns the height and width of the field.
+ * @return {!goog.math.Size} Height and width.
+ */
+Blockly.Field.prototype.getSize = function() {
+  if (!this.size_.width) {
+    this.render_();
+  }
+  return this.size_;
+};
+
+/**
+ * Returns the height and width of the field,
+ * accounting for the workspace scaling.
+ * @return {!goog.math.Size} Height and width.
+ */
+Blockly.Field.prototype.getScaledBBox_ = function() {
+  var bBox = this.borderRect_.getBBox();
+  // Create new object, as getBBox can return an uneditable SVGRect in IE.
+  return new goog.math.Size(bBox.width * this.sourceBlock_.workspace.scale,
+                            bBox.height * this.sourceBlock_.workspace.scale);
+};
+
+/**
+ * Get the text from this field.
+ * @return {string} Current text.
+ */
+Blockly.Field.prototype.getText = function() {
+  return this.text_;
+};
+
+/**
+ * Set the text in this field.  Trigger a rerender of the source block.
+ * @param {*} text New text.
+ */
+Blockly.Field.prototype.setText = function(text) {
+  if (text === null) {
+    // No change if null.
+    return;
+  }
+  text = String(text);
+  if (text === this.text_) {
+    // No change.
+    return;
+  }
+  this.text_ = text;
+  this.updateTextNode_();
+
+  if (this.sourceBlock_ && this.sourceBlock_.rendered) {
+    this.sourceBlock_.render();
+    this.sourceBlock_.bumpNeighbours_();
+    this.sourceBlock_.workspace.fireChangeEvent();
+  }
+};
+
+/**
+ * Update the text node of this field to display the current text.
+ * @private
+ */
+Blockly.Field.prototype.updateTextNode_ = function() {
+  if (!this.textElement_) {
+    // Not rendered yet.
+    return;
+  }
+  var text = this.text_;
+  if (text.length > this.maxDisplayLength) {
+    // Truncate displayed string and add an ellipsis ('...').
+    text = text.substring(0, this.maxDisplayLength - 2) + '\u2026';
+  }
+  // Empty the text element.
+  goog.dom.removeChildren(/** @type {!Element} */ (this.textElement_));
+  // Replace whitespace with non-breaking spaces so the text doesn't collapse.
+  text = text.replace(/\s/g, Blockly.Field.NBSP);
+  if (this.sourceBlock_.RTL && text) {
+    // The SVG is LTR, force text to be RTL.
+    text += '\u200F';
+  }
+  if (!text) {
+    // Prevent the field from disappearing if empty.
+    text = Blockly.Field.NBSP;
+  }
+  var textNode = document.createTextNode(text);
+  this.textElement_.appendChild(textNode);
+
+  // Cached width is obsolete.  Clear it.
+  this.size_.width = 0;
+};
+
+/**
+ * By default there is no difference between the human-readable text and
+ * the language-neutral values.  Subclasses (such as dropdown) may define this.
+ * @return {string} Current text.
+ */
+Blockly.Field.prototype.getValue = function() {
+  return this.getText();
+};
+
+/**
+ * By default there is no difference between the human-readable text and
+ * the language-neutral values.  Subclasses (such as dropdown) may define this.
+ * @param {string} text New text.
+ */
+Blockly.Field.prototype.setValue = function(text) {
+  this.setText(text);
+};
+
+/**
+ * Handle a mouse up event on an editable field.
+ * @param {!Event} e Mouse up event.
+ * @private
+ */
+Blockly.Field.prototype.onMouseUp_ = function(e) {
+  if ((goog.userAgent.IPHONE || goog.userAgent.IPAD) &&
+      !goog.userAgent.isVersionOrHigher('537.51.2') &&
+      e.layerX !== 0 && e.layerY !== 0) {
+    // Old iOS spawns a bogus event on the next touch after a 'prompt()' edit.
+    // Unlike the real events, these have a layerX and layerY set.
+    return;
+  } else if (Blockly.isRightButton(e)) {
+    // Right-click.
+    return;
+  } else if (Blockly.dragMode_ == 2) {
+    // Drag operation is concluding.  Don't open the editor.
+    return;
+  } else if (this.sourceBlock_.isEditable()) {
+    // Non-abstract sub-classes must define a showEditor_ method.
+    this.showEditor_();
+  }
+};
+
+/**
+ * Change the tooltip text for this field.
+ * @param {string|!Element} newTip Text for tooltip or a parent element to
+ *     link to for its tooltip.
+ */
+Blockly.Field.prototype.setTooltip = function(newTip) {
+  // Non-abstract sub-classes may wish to implement this.  See FieldLabel.
+};
+
+/**
+ * Return the absolute coordinates of the top-left corner of this field.
+ * The origin (0,0) is the top-left corner of the page body.
+ * @return {{!goog.math.Coordinate}} Object with .x and .y properties.
+ * @private
+ */
+Blockly.Field.prototype.getAbsoluteXY_ = function() {
+  return goog.style.getPageOffset(this.borderRect_);
+};

src/blockly/core/field_angle.js

@@ -0,0 +1,279 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2013 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Angle input field.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.FieldAngle');
+
+goog.require('Blockly.FieldTextInput');
+goog.require('goog.math');
+goog.require('goog.userAgent');
+
+
+/**
+ * Class for an editable angle field.
+ * @param {string} text The initial content of the field.
+ * @param {Function=} opt_changeHandler An optional function that is called
+ *     to validate any constraints on what the user entered.  Takes the new
+ *     text as an argument and returns the accepted text or null to abort
+ *     the change.
+ * @extends {Blockly.FieldTextInput}
+ * @constructor
+ */
+Blockly.FieldAngle = function(text, opt_changeHandler) {
+  // Add degree symbol: "360°" (LTR) or "°360" (RTL)
+  this.symbol_ = Blockly.createSvgElement('tspan', {}, null);
+  this.symbol_.appendChild(document.createTextNode('\u00B0'));
+
+  Blockly.FieldAngle.superClass_.constructor.call(this, text, null);
+  this.setChangeHandler(opt_changeHandler);
+};
+goog.inherits(Blockly.FieldAngle, Blockly.FieldTextInput);
+
+/**
+ * Sets a new change handler for angle field.
+ * @param {Function} handler New change handler, or null.
+ */
+Blockly.FieldAngle.prototype.setChangeHandler = function(handler) {
+  var wrappedHandler;
+  if (handler) {
+    // Wrap the user's change handler together with the angle validator.
+    wrappedHandler = function(value) {
+      var v1 = handler.call(this, value);
+      if (v1 === null) {
+        var v2 = v1;
+      } else {
+        if (v1 === undefined) {
+          v1 = value;
+        }
+        var v2 = Blockly.FieldAngle.angleValidator.call(this, v1);
+        if (v2 !== undefined) {
+          v2 = v1;
+        }
+      }
+      return v2 === value ? undefined : v2;
+    };
+  } else {
+    wrappedHandler = Blockly.FieldAngle.angleValidator;
+  }
+  Blockly.FieldAngle.superClass_.setChangeHandler.call(this, wrappedHandler);
+};
+
+/**
+ * Round angles to the nearest 15 degrees when using mouse.
+ * Set to 0 to disable rounding.
+ */
+Blockly.FieldAngle.ROUND = 15;
+
+/**
+ * Half the width of protractor image.
+ */
+Blockly.FieldAngle.HALF = 100 / 2;
+
+/**
+ * Radius of protractor circle.  Slightly smaller than protractor size since
+ * otherwise SVG crops off half the border at the edges.
+ */
+Blockly.FieldAngle.RADIUS = Blockly.FieldAngle.HALF - 1;
+
+/**
+ * Clean up this FieldAngle, as well as the inherited FieldTextInput.
+ * @return {!Function} Closure to call on destruction of the WidgetDiv.
+ * @private
+ */
+Blockly.FieldAngle.prototype.dispose_ = function() {
+  var thisField = this;
+  return function() {
+    Blockly.FieldAngle.superClass_.dispose_.call(thisField)();
+    thisField.gauge_ = null;
+    if (thisField.clickWrapper_) {
+      Blockly.unbindEvent_(thisField.clickWrapper_);
+    }
+    if (thisField.moveWrapper1_) {
+      Blockly.unbindEvent_(thisField.moveWrapper1_);
+    }
+    if (thisField.moveWrapper2_) {
+      Blockly.unbindEvent_(thisField.moveWrapper2_);
+    }
+  };
+};
+
+/**
+ * Show the inline free-text editor on top of the text.
+ * @private
+ */
+Blockly.FieldAngle.prototype.showEditor_ = function() {
+  var noFocus =
+      goog.userAgent.MOBILE || goog.userAgent.ANDROID || goog.userAgent.IPAD;
+  // Mobile browsers have issues with in-line textareas (focus & keyboards).
+  Blockly.FieldAngle.superClass_.showEditor_.call(this, noFocus);
+  var div = Blockly.WidgetDiv.DIV;
+  if (!div.firstChild) {
+    // Mobile interface uses window.prompt.
+    return;
+  }
+  // Build the SVG DOM.
+  var svg = Blockly.createSvgElement('svg', {
+    'xmlns': 'http://www.w3.org/2000/svg',
+    'xmlns:html': 'http://www.w3.org/1999/xhtml',
+    'xmlns:xlink': 'http://www.w3.org/1999/xlink',
+    'version': '1.1',
+    'height': (Blockly.FieldAngle.HALF * 2) + 'px',
+    'width': (Blockly.FieldAngle.HALF * 2) + 'px'
+  }, div);
+  var circle = Blockly.createSvgElement('circle', {
+    'cx': Blockly.FieldAngle.HALF, 'cy': Blockly.FieldAngle.HALF,
+    'r': Blockly.FieldAngle.RADIUS,
+    'class': 'blocklyAngleCircle'
+  }, svg);
+  this.gauge_ = Blockly.createSvgElement('path',
+      {'class': 'blocklyAngleGauge'}, svg);
+  this.line_ = Blockly.createSvgElement('line',
+      {'x1': Blockly.FieldAngle.HALF,
+      'y1': Blockly.FieldAngle.HALF,
+      'class': 'blocklyAngleLine'}, svg);
+  // Draw markers around the edge.
+  for (var a = 0; a < 360; a += 15) {
+    Blockly.createSvgElement('line', {
+      'x1': Blockly.FieldAngle.HALF + Blockly.FieldAngle.RADIUS,
+      'y1': Blockly.FieldAngle.HALF,
+      'x2': Blockly.FieldAngle.HALF + Blockly.FieldAngle.RADIUS -
+          (a % 45 == 0 ? 10 : 5),
+      'y2': Blockly.FieldAngle.HALF,
+      'class': 'blocklyAngleMarks',
+      'transform': 'rotate(' + a + ',' +
+          Blockly.FieldAngle.HALF + ',' + Blockly.FieldAngle.HALF + ')'
+    }, svg);
+  }
+  svg.style.marginLeft = (15 - Blockly.FieldAngle.RADIUS) + 'px';
+  this.clickWrapper_ =
+      Blockly.bindEvent_(svg, 'click', this, Blockly.WidgetDiv.hide);
+  this.moveWrapper1_ =
+      Blockly.bindEvent_(circle, 'mousemove', this, this.onMouseMove);
+  this.moveWrapper2_ =
+      Blockly.bindEvent_(this.gauge_, 'mousemove', this, this.onMouseMove);
+  this.updateGraph_();
+};
+
+/**
+ * Set the angle to match the mouse's position.
+ * @param {!Event} e Mouse move event.
+ */
+Blockly.FieldAngle.prototype.onMouseMove = function(e) {
+  var bBox = this.gauge_.ownerSVGElement.getBoundingClientRect();
+  var dx = e.clientX - bBox.left - Blockly.FieldAngle.HALF;
+  var dy = e.clientY - bBox.top - Blockly.FieldAngle.HALF;
+  var angle = Math.atan(-dy / dx);
+  if (isNaN(angle)) {
+    // This shouldn't happen, but let's not let this error propogate further.
+    return;
+  }
+  angle = goog.math.toDegrees(angle);
+  // 0: East, 90: North, 180: West, 270: South.
+  if (dx < 0) {
+    angle += 180;
+  } else if (dy > 0) {
+    angle += 360;
+  }
+  if (Blockly.FieldAngle.ROUND) {
+    angle = Math.round(angle / Blockly.FieldAngle.ROUND) *
+        Blockly.FieldAngle.ROUND;
+  }
+  if (angle >= 360) {
+    // Rounding may have rounded up to 360.
+    angle -= 360;
+  }
+  angle = String(angle);
+  Blockly.FieldTextInput.htmlInput_.value = angle;
+  this.setText(angle);
+  this.validate_();
+};
+
+/**
+ * Insert a degree symbol.
+ * @param {?string} text New text.
+ */
+Blockly.FieldAngle.prototype.setText = function(text) {
+  Blockly.FieldAngle.superClass_.setText.call(this, text);
+  if (!this.textElement_) {
+    // Not rendered yet.
+    return;
+  }
+  this.updateGraph_();
+  // Insert degree symbol.
+  if (this.sourceBlock_.RTL) {
+    this.textElement_.insertBefore(this.symbol_, this.textElement_.firstChild);
+  } else {
+    this.textElement_.appendChild(this.symbol_);
+  }
+  // Cached width is obsolete.  Clear it.
+  this.size_.width = 0;
+};
+
+/**
+ * Redraw the graph with the current angle.
+ * @private
+ */
+Blockly.FieldAngle.prototype.updateGraph_ = function() {
+  if (!this.gauge_) {
+    return;
+  }
+  var angleRadians = goog.math.toRadians(Number(this.getText()));
+  if (isNaN(angleRadians)) {
+    this.gauge_.setAttribute('d',
+        'M ' + Blockly.FieldAngle.HALF + ',' + Blockly.FieldAngle.HALF);
+    this.line_.setAttribute('x2', Blockly.FieldAngle.HALF);
+    this.line_.setAttribute('y2', Blockly.FieldAngle.HALF);
+  } else {
+    var x = Blockly.FieldAngle.HALF + Math.cos(angleRadians) *
+        Blockly.FieldAngle.RADIUS;
+    var y = Blockly.FieldAngle.HALF + Math.sin(angleRadians) *
+        -Blockly.FieldAngle.RADIUS;
+    var largeFlag = (angleRadians > Math.PI) ? 1 : 0;
+    this.gauge_.setAttribute('d',
+        'M ' + Blockly.FieldAngle.HALF + ',' + Blockly.FieldAngle.HALF +
+        ' h ' + Blockly.FieldAngle.RADIUS +
+        ' A ' + Blockly.FieldAngle.RADIUS + ',' + Blockly.FieldAngle.RADIUS +
+        ' 0 ' + largeFlag + ' 0 ' + x + ',' + y + ' z');
+    this.line_.setAttribute('x2', x);
+    this.line_.setAttribute('y2', y);
+  }
+};
+
+/**
+ * Ensure that only an angle may be entered.
+ * @param {string} text The user's text.
+ * @return {?string} A string representing a valid angle, or null if invalid.
+ */
+Blockly.FieldAngle.angleValidator = function(text) {
+  var n = Blockly.FieldTextInput.numberValidator(text);
+  if (n !== null) {
+    n = n % 360;
+    if (n < 0) {
+      n += 360;
+    }
+    n = String(n);
+   }
+  return n;
+};

src/blockly/core/field_checkbox.js

@@ -0,0 +1,117 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2012 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Checkbox field.  Checked or not checked.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.FieldCheckbox');
+
+goog.require('Blockly.Field');
+
+
+/**
+ * Class for a checkbox field.
+ * @param {string} state The initial state of the field ('TRUE' or 'FALSE').
+ * @param {Function=} opt_changeHandler A function that is executed when a new
+ *     option is selected.  Its sole argument is the new checkbox state.  If
+ *     it returns a value, this becomes the new checkbox state, unless the
+ *     value is null, in which case the change is aborted.
+ * @extends {Blockly.Field}
+ * @constructor
+ */
+Blockly.FieldCheckbox = function(state, opt_changeHandler) {
+  Blockly.FieldCheckbox.superClass_.constructor.call(this, '');
+
+  this.setChangeHandler(opt_changeHandler);
+  // Set the initial state.
+  this.setValue(state);
+};
+goog.inherits(Blockly.FieldCheckbox, Blockly.Field);
+
+/**
+ * Mouse cursor style when over the hotspot that initiates editability.
+ */
+Blockly.FieldCheckbox.prototype.CURSOR = 'default';
+
+/**
+ * Install this checkbox on a block.
+ * @param {!Blockly.Block} block The block containing this text.
+ */
+Blockly.FieldCheckbox.prototype.init = function(block) {
+  if (this.sourceBlock_) {
+    // Checkbox has already been initialized once.
+    return;
+  }
+  Blockly.FieldCheckbox.superClass_.init.call(this, block);
+  // The checkbox doesn't use the inherited text element.
+  // Instead it uses a custom checkmark element that is either visible or not.
+  this.checkElement_ = Blockly.createSvgElement('text',
+      {'class': 'blocklyText', 'x': -3, 'y': 14}, this.fieldGroup_);
+  var textNode = document.createTextNode('\u2713');
+  this.checkElement_.appendChild(textNode);
+  this.checkElement_.style.display = this.state_ ? 'block' : 'none';
+};
+
+/**
+ * Return 'TRUE' if the checkbox is checked, 'FALSE' otherwise.
+ * @return {string} Current state.
+ */
+Blockly.FieldCheckbox.prototype.getValue = function() {
+  return String(this.state_).toUpperCase();
+};
+
+/**
+ * Set the checkbox to be checked if strBool is 'TRUE', unchecks otherwise.
+ * @param {string} strBool New state.
+ */
+Blockly.FieldCheckbox.prototype.setValue = function(strBool) {
+  var newState = (strBool == 'TRUE');
+  if (this.state_ !== newState) {
+    this.state_ = newState;
+    if (this.checkElement_) {
+      this.checkElement_.style.display = newState ? 'block' : 'none';
+    }
+    if (this.sourceBlock_ && this.sourceBlock_.rendered) {
+      this.sourceBlock_.workspace.fireChangeEvent();
+    }
+  }
+};
+
+/**
+ * Toggle the state of the checkbox.
+ * @private
+ */
+Blockly.FieldCheckbox.prototype.showEditor_ = function() {
+  var newState = !this.state_;
+  if (this.sourceBlock_ && this.changeHandler_) {
+    // Call any change handler, and allow it to override.
+    var override = this.changeHandler_(newState);
+    if (override !== undefined) {
+      newState = override;
+    }
+  }
+  if (newState !== null) {
+    this.sourceBlock_.setShadow(false);
+    this.setValue(String(newState).toUpperCase());
+  }
+};

src/blockly/core/field_colour.js

@@ -0,0 +1,242 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2012 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Colour input field.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.FieldColour');
+
+goog.require('Blockly.Field');
+goog.require('goog.dom');
+goog.require('goog.events');
+goog.require('goog.style');
+goog.require('goog.ui.ColorPicker');
+
+
+/**
+ * Class for a colour input field.
+ * @param {string} colour The initial colour in '#rrggbb' format.
+ * @param {Function=} opt_changeHandler A function that is executed when a new
+ *     colour is selected.  Its sole argument is the new colour value.  Its
+ *     return value becomes the selected colour, unless it is undefined, in
+ *     which case the new colour stands, or it is null, in which case the change
+ *     is aborted.
+ * @extends {Blockly.Field}
+ * @constructor
+ */
+Blockly.FieldColour = function(colour, opt_changeHandler) {
+  Blockly.FieldColour.superClass_.constructor.call(this, '\u00A0\u00A0\u00A0');
+
+  this.setChangeHandler(opt_changeHandler);
+  // Set the initial state.
+  this.setValue(colour);
+};
+goog.inherits(Blockly.FieldColour, Blockly.Field);
+
+/**
+ * By default use the global constants for colours.
+ * @type {Array.<string>}
+ * @private
+ */
+Blockly.FieldColour.prototype.colours_ = null;
+
+/**
+ * By default use the global constants for columns.
+ * @type {number}
+ * @private
+ */
+Blockly.FieldColour.prototype.columns_ = 0;
+
+/**
+ * Install this field on a block.
+ * @param {!Blockly.Block} block The block containing this field.
+ */
+Blockly.FieldColour.prototype.init = function(block) {
+  Blockly.FieldColour.superClass_.init.call(this, block);
+  this.borderRect_.style['fillOpacity'] = 1;
+  this.setValue(this.getValue());
+};
+
+/**
+ * Mouse cursor style when over the hotspot that initiates the editor.
+ */
+Blockly.FieldColour.prototype.CURSOR = 'default';
+
+/**
+ * Close the colour picker if this input is being deleted.
+ */
+Blockly.FieldColour.prototype.dispose = function() {
+  Blockly.WidgetDiv.hideIfOwner(this);
+  Blockly.FieldColour.superClass_.dispose.call(this);
+};
+
+/**
+ * Return the current colour.
+ * @return {string} Current colour in '#rrggbb' format.
+ */
+Blockly.FieldColour.prototype.getValue = function() {
+  return this.colour_;
+};
+
+/**
+ * Set the colour.
+ * @param {string} colour The new colour in '#rrggbb' format.
+ */
+Blockly.FieldColour.prototype.setValue = function(colour) {
+  this.colour_ = colour;
+  if (this.borderRect_) {
+    this.borderRect_.style.fill = colour;
+  }
+  if (this.sourceBlock_ && this.sourceBlock_.rendered) {
+    // Since we're not re-rendering we need to explicitly call
+    // Blockly.Realtime.blockChanged()
+    Blockly.Realtime.blockChanged(this.sourceBlock_);
+    this.sourceBlock_.workspace.fireChangeEvent();
+  }
+};
+
+/**
+ * Get the text from this field.  Used when the block is collapsed.
+ * @return {string} Current text.
+ */
+Blockly.FieldColour.prototype.getText = function() {
+  var colour = this.colour_;
+  var m = colour.match(/^#(.)\1(.)\2(.)\3$/);
+  if (m) {
+    colour = '#' + m[1] + m[2] + m[3];
+  }
+  return colour;
+};
+
+/**
+ * An array of colour strings for the palette.
+ * See bottom of this page for the default:
+ * http://docs.closure-library.googlecode.com/git/closure_goog_ui_colorpicker.js.source.html
+ * @type {!Array.<string>}
+ */
+Blockly.FieldColour.COLOURS = goog.ui.ColorPicker.SIMPLE_GRID_COLORS;
+
+/**
+ * Number of columns in the palette.
+ */
+Blockly.FieldColour.COLUMNS = 7;
+
+/**
+ * Set a custom colour grid for this field.
+ * @param {Array.<string>} colours Array of colours for this block,
+ *     or null to use default (Blockly.FieldColour.COLOURS).
+ * @return {!Blockly.FieldColour} Returns itself (for method chaining).
+ */
+Blockly.FieldColour.prototype.setColours = function(colours) {
+  this.colours_ = colours;
+  return this;
+};
+
+/**
+ * Set a custom grid size for this field.
+ * @param {number} columns Number of columns for this block,
+ *     or 0 to use default (Blockly.FieldColour.COLUMNS).
+ * @return {!Blockly.FieldColour} Returns itself (for method chaining).
+ */
+Blockly.FieldColour.prototype.setColumns = function(columns) {
+  this.columns_ = columns;
+  return this;
+};
+
+/**
+ * Create a palette under the colour field.
+ * @private
+ */
+Blockly.FieldColour.prototype.showEditor_ = function() {
+  Blockly.WidgetDiv.show(this, this.sourceBlock_.RTL,
+      Blockly.FieldColour.widgetDispose_);
+  // Create the palette using Closure.
+  var picker = new goog.ui.ColorPicker();
+  picker.setSize(this.columns_ || Blockly.FieldColour.COLUMNS);
+  picker.setColors(this.colours_ || Blockly.FieldColour.COLOURS);
+
+  // Position the palette to line up with the field.
+  // Record windowSize and scrollOffset before adding the palette.
+  var windowSize = goog.dom.getViewportSize();
+  var scrollOffset = goog.style.getViewportPageOffset(document);
+  var xy = this.getAbsoluteXY_();
+  var borderBBox = this.getScaledBBox_();
+  var div = Blockly.WidgetDiv.DIV;
+  picker.render(div);
+  picker.setSelectedColor(this.getValue());
+  // Record paletteSize after adding the palette.
+  var paletteSize = goog.style.getSize(picker.getElement());
+
+  // Flip the palette vertically if off the bottom.
+  if (xy.y + paletteSize.height + borderBBox.height >=
+      windowSize.height + scrollOffset.y) {
+    xy.y -= paletteSize.height - 1;
+  } else {
+    xy.y += borderBBox.height - 1;
+  }
+  if (this.sourceBlock_.RTL) {
+    xy.x += borderBBox.width;
+    xy.x -= paletteSize.width;
+    // Don't go offscreen left.
+    if (xy.x < scrollOffset.x) {
+      xy.x = scrollOffset.x;
+    }
+  } else {
+    // Don't go offscreen right.
+    if (xy.x > windowSize.width + scrollOffset.x - paletteSize.width) {
+      xy.x = windowSize.width + scrollOffset.x - paletteSize.width;
+    }
+  }
+  Blockly.WidgetDiv.position(xy.x, xy.y, windowSize, scrollOffset,
+                             this.sourceBlock_.RTL);
+
+  // Configure event handler.
+  var thisField = this;
+  Blockly.FieldColour.changeEventKey_ = goog.events.listen(picker,
+      goog.ui.ColorPicker.EventType.CHANGE,
+      function(event) {
+        var colour = event.target.getSelectedColor() || '#000000';
+        Blockly.WidgetDiv.hide();
+        if (thisField.sourceBlock_ && thisField.changeHandler_) {
+          // Call any change handler, and allow it to override.
+          var override = thisField.changeHandler_(colour);
+          if (override !== undefined) {
+            colour = override;
+          }
+        }
+        if (colour !== null) {
+          thisField.sourceBlock_.setShadow(false);
+          thisField.setValue(colour);
+        }
+      });
+};
+
+/**
+ * Hide the colour palette.
+ * @private
+ */
+Blockly.FieldColour.widgetDispose_ = function() {
+  if (Blockly.FieldColour.changeEventKey_) {
+    goog.events.unlistenByKey(Blockly.FieldColour.changeEventKey_);
+  }
+};

src/blockly/core/field_date.js

@@ -0,0 +1,350 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2015 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Date input field.
+ * @author pkendall64@gmail.com (Paul Kendall)
+ */
+'use strict';
+
+goog.provide('Blockly.FieldDate');
+
+goog.require('Blockly.Field');
+goog.require('goog.date');
+goog.require('goog.dom');
+goog.require('goog.events');
+goog.require('goog.i18n.DateTimeSymbols');
+goog.require('goog.i18n.DateTimeSymbols_he');
+goog.require('goog.style');
+goog.require('goog.ui.DatePicker');
+
+
+/**
+ * Class for a date input field.
+ * @param {string} date The initial date.
+ * @param {Function=} opt_changeHandler A function that is executed when a new
+ *     date is selected.  Its sole argument is the new date value.  Its
+ *     return value becomes the selected date, unless it is undefined, in
+ *     which case the new date stands, or it is null, in which case the change
+ *     is aborted.
+ * @extends {Blockly.Field}
+ * @constructor
+ */
+Blockly.FieldDate = function(date, opt_changeHandler) {
+  if (!date) {
+    date = new goog.date.Date().toIsoString(true);
+  }
+  Blockly.FieldDate.superClass_.constructor.call(this, date);
+  this.setValue(date);
+  this.setChangeHandler(opt_changeHandler);
+};
+goog.inherits(Blockly.FieldDate, Blockly.Field);
+
+/**
+ * Mouse cursor style when over the hotspot that initiates the editor.
+ */
+Blockly.FieldDate.prototype.CURSOR = 'text';
+
+/**
+ * Close the colour picker if this input is being deleted.
+ */
+Blockly.FieldDate.prototype.dispose = function() {
+  Blockly.WidgetDiv.hideIfOwner(this);
+  Blockly.FieldDate.superClass_.dispose.call(this);
+};
+
+/**
+ * Return the current date.
+ * @return {string} Current date.
+ */
+Blockly.FieldDate.prototype.getValue = function() {
+  return this.date_;
+};
+
+/**
+ * Set the date.
+ * @param {string} date The new date.
+ */
+Blockly.FieldDate.prototype.setValue = function(date) {
+  if (this.sourceBlock_ && this.changeHandler_) {
+    var validated = this.changeHandler_(date);
+    // If the new date is invalid, validation returns null.
+    // In this case we still want to display the illegal result.
+    if (validated !== null && validated !== undefined) {
+      date = validated;
+    }
+  }
+  this.date_ = date;
+  Blockly.Field.prototype.setText.call(this, date);
+};
+
+/**
+ * Create a date picker under the date field.
+ * @private
+ */
+Blockly.FieldDate.prototype.showEditor_ = function() {
+  Blockly.WidgetDiv.show(this, this.sourceBlock_.RTL,
+      Blockly.FieldDate.widgetDispose_);
+  // Create the date picker using Closure.
+  Blockly.FieldDate.loadLanguage_();
+  var picker = new goog.ui.DatePicker();
+  picker.setAllowNone(false);
+  picker.setShowWeekNum(false);
+
+  // Position the picker to line up with the field.
+  // Record windowSize and scrollOffset before adding the picker.
+  var windowSize = goog.dom.getViewportSize();
+  var scrollOffset = goog.style.getViewportPageOffset(document);
+  var xy = this.getAbsoluteXY_();
+  var borderBBox = this.getScaledBBox_();
+  var div = Blockly.WidgetDiv.DIV;
+  picker.render(div);
+  picker.setDate(goog.date.fromIsoString(this.getValue()));
+  // Record pickerSize after adding the date picker.
+  var pickerSize = goog.style.getSize(picker.getElement());
+
+  // Flip the picker vertically if off the bottom.
+  if (xy.y + pickerSize.height + borderBBox.height >=
+      windowSize.height + scrollOffset.y) {
+    xy.y -= pickerSize.height - 1;
+  } else {
+    xy.y += borderBBox.height - 1;
+  }
+  if (this.sourceBlock_.RTL) {
+    xy.x += borderBBox.width;
+    xy.x -= pickerSize.width;
+    // Don't go offscreen left.
+    if (xy.x < scrollOffset.x) {
+      xy.x = scrollOffset.x;
+    }
+  } else {
+    // Don't go offscreen right.
+    if (xy.x > windowSize.width + scrollOffset.x - pickerSize.width) {
+      xy.x = windowSize.width + scrollOffset.x - pickerSize.width;
+    }
+  }
+  Blockly.WidgetDiv.position(xy.x, xy.y, windowSize, scrollOffset,
+                             this.sourceBlock_.RTL);
+
+  // Configure event handler.
+  var thisField = this;
+  Blockly.FieldDate.changeEventKey_ = goog.events.listen(picker,
+      goog.ui.DatePicker.Events.CHANGE,
+      function(event) {
+        var date = event.date ? event.date.toIsoString(true) : '';
+        Blockly.WidgetDiv.hide();
+        if (thisField.sourceBlock_ && thisField.changeHandler_) {
+          // Call any change handler, and allow it to override.
+          var override = thisField.changeHandler_(date);
+          if (override !== undefined) {
+            date = override;
+          }
+        }
+        thisField.setValue(date);
+      });
+};
+
+/**
+ * Hide the date picker.
+ * @private
+ */
+Blockly.FieldDate.widgetDispose_ = function() {
+  if (Blockly.FieldDate.changeEventKey_) {
+    goog.events.unlistenByKey(Blockly.FieldDate.changeEventKey_);
+  }
+};
+
+/**
+ * Load the best language pack by scanning the Blockly.Msg object for a
+ * language that matches the available languages in Closure.
+ * @private
+ */
+Blockly.FieldDate.loadLanguage_ = function() {
+  var reg = /^DateTimeSymbols_(.+)$/;
+  for (var prop in goog.i18n) {
+    var m = prop.match(reg);
+    if (m) {
+      var lang = m[1].toLowerCase().replace('_', '.');  // E.g. 'pt.br'
+      if (goog.getObjectByName(lang, Blockly.Msg)) {
+        goog.i18n.DateTimeSymbols = goog.i18n[prop];
+      }
+    }
+  }
+};
+
+/**
+ * CSS for date picker.  See css.js for use.
+ */
+Blockly.FieldDate.CSS = [
+  /* Copied from: goog/css/datepicker.css */
+  /*
+   * Copyright 2009 The Closure Library Authors. All Rights Reserved.
+   *
+   * Use of this source code is governed by the Apache License, Version 2.0.
+   * See the COPYING file for details.
+   */
+
+  /*
+   * Standard styling for a goog.ui.DatePicker.
+   *
+   * @author arv@google.com (Erik Arvidsson)
+   */
+
+  '.blocklyWidgetDiv .goog-date-picker,',
+  '.blocklyWidgetDiv .goog-date-picker th,',
+  '.blocklyWidgetDiv .goog-date-picker td {',
+  '  font: 13px Arial, sans-serif;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker {',
+  '  -moz-user-focus: normal;',
+  '  -moz-user-select: none;',
+  '  position: relative;',
+  '  border: 1px solid #000;',
+  '  float: left;',
+  '  padding: 2px;',
+  '  color: #000;',
+  '  background: #c3d9ff;',
+  '  cursor: default;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker th {',
+  '  text-align: center;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker td {',
+  '  text-align: center;',
+  '  vertical-align: middle;',
+  '  padding: 1px 3px;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker-menu {',
+  '  position: absolute;',
+  '  background: threedface;',
+  '  border: 1px solid gray;',
+  '  -moz-user-focus: normal;',
+  '  z-index: 1;',
+  '  outline: none;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker-menu ul {',
+  '  list-style: none;',
+  '  margin: 0px;',
+  '  padding: 0px;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker-menu ul li {',
+  '  cursor: default;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker-menu-selected {',
+  '  background: #ccf;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker th {',
+  '  font-size: .9em;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker td div {',
+  '  float: left;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker button {',
+  '  padding: 0px;',
+  '  margin: 1px 0;',
+  '  border: 0;',
+  '  color: #20c;',
+  '  font-weight: bold;',
+  '  background: transparent;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker-date {',
+  '  background: #fff;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker-week,',
+  '.blocklyWidgetDiv .goog-date-picker-wday {',
+  '  padding: 1px 3px;',
+  '  border: 0;',
+  '  border-color: #a2bbdd;',
+  '  border-style: solid;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker-week {',
+  '  border-right-width: 1px;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker-wday {',
+  '  border-bottom-width: 1px;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker-head td {',
+  '  text-align: center;',
+  '}',
+
+  /** Use td.className instead of !important */
+  '.blocklyWidgetDiv td.goog-date-picker-today-cont {',
+  '  text-align: center;',
+  '}',
+
+  /** Use td.className instead of !important */
+  '.blocklyWidgetDiv td.goog-date-picker-none-cont {',
+  '  text-align: center;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker-month {',
+  '  min-width: 11ex;',
+  '  white-space: nowrap;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker-year {',
+  '  min-width: 6ex;',
+  '  white-space: nowrap;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker-monthyear {',
+  '  white-space: nowrap;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker table {',
+  '  border-collapse: collapse;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker-other-month {',
+  '  color: #888;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker-wkend-start,',
+  '.blocklyWidgetDiv .goog-date-picker-wkend-end {',
+  '  background: #eee;',
+  '}',
+
+  /** Use td.className instead of !important */
+  '.blocklyWidgetDiv td.goog-date-picker-selected {',
+  '  background: #c3d9ff;',
+  '}',
+
+  '.blocklyWidgetDiv .goog-date-picker-today {',
+  '  background: #9ab;',
+  '  font-weight: bold !important;',
+  '  border-color: #246 #9bd #9bd #246;',
+  '  color: #fff;',
+  '}'
+];

src/blockly/core/field_dropdown.js

@@ -0,0 +1,321 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2012 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Dropdown input field.  Used for editable titles and variables.
+ * In the interests of a consistent UI, the toolbox shares some functions and
+ * properties with the context menu.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.FieldDropdown');
+
+goog.require('Blockly.Field');
+goog.require('goog.dom');
+goog.require('goog.events');
+goog.require('goog.style');
+goog.require('goog.ui.Menu');
+goog.require('goog.ui.MenuItem');
+goog.require('goog.userAgent');
+
+
+/**
+ * Class for an editable dropdown field.
+ * @param {(!Array.<!Array.<string>>|!Function)} menuGenerator An array of options
+ *     for a dropdown list, or a function which generates these options.
+ * @param {Function=} opt_changeHandler A function that is executed when a new
+ *     option is selected, with the newly selected value as its sole argument.
+ *     If it returns a value, that value (which must be one of the options) will
+ *     become selected in place of the newly selected option, unless the return
+ *     value is null, in which case the change is aborted.
+ * @extends {Blockly.Field}
+ * @constructor
+ */
+Blockly.FieldDropdown = function(menuGenerator, opt_changeHandler) {
+  this.menuGenerator_ = menuGenerator;
+  this.setChangeHandler(opt_changeHandler);
+  this.trimOptions_();
+  var firstTuple = this.getOptions_()[0];
+  this.value_ = firstTuple[1];
+
+  // Call parent's constructor.
+  Blockly.FieldDropdown.superClass_.constructor.call(this, firstTuple[0]);
+};
+goog.inherits(Blockly.FieldDropdown, Blockly.Field);
+
+/**
+ * Horizontal distance that a checkmark ovehangs the dropdown.
+ */
+Blockly.FieldDropdown.CHECKMARK_OVERHANG = 25;
+
+/**
+ * Android can't (in 2014) display "▾", so use "▼" instead.
+ */
+Blockly.FieldDropdown.ARROW_CHAR = goog.userAgent.ANDROID ? '\u25BC' : '\u25BE';
+
+/**
+ * Mouse cursor style when over the hotspot that initiates the editor.
+ */
+Blockly.FieldDropdown.prototype.CURSOR = 'default';
+
+/**
+ * Install this dropdown on a block.
+ * @param {!Blockly.Block} block The block containing this text.
+ */
+Blockly.FieldDropdown.prototype.init = function(block) {
+  if (this.sourceBlock_) {
+    // Dropdown has already been initialized once.
+    return;
+  }
+
+  // Add dropdown arrow: "option ▾" (LTR) or "▾ אופציה" (RTL)
+  this.arrow_ = Blockly.createSvgElement('tspan', {}, null);
+  this.arrow_.appendChild(document.createTextNode(
+      block.RTL ? Blockly.FieldDropdown.ARROW_CHAR + ' ' :
+          ' ' + Blockly.FieldDropdown.ARROW_CHAR));
+
+  Blockly.FieldDropdown.superClass_.init.call(this, block);
+  // Force a reset of the text to add the arrow.
+  var text = this.text_;
+  this.text_ = null;
+  this.setText(text);
+};
+
+/**
+ * Create a dropdown menu under the text.
+ * @private
+ */
+Blockly.FieldDropdown.prototype.showEditor_ = function() {
+  Blockly.WidgetDiv.show(this, this.sourceBlock_.RTL, null);
+  var thisField = this;
+
+  function callback(e) {
+    var menuItem = e.target;
+    if (menuItem) {
+      var value = menuItem.getValue();
+      if (thisField.sourceBlock_ && thisField.changeHandler_) {
+        // Call any change handler, and allow it to override.
+        var override = thisField.changeHandler_(value);
+        if (override !== undefined) {
+          value = override;
+        }
+      }
+      if (value !== null) {
+        thisField.sourceBlock_.setShadow(false);
+        thisField.setValue(value);
+      }
+    }
+    Blockly.WidgetDiv.hideIfOwner(thisField);
+  }
+
+  var menu = new goog.ui.Menu();
+  menu.setRightToLeft(this.sourceBlock_.RTL);
+  var options = this.getOptions_();
+  for (var x = 0; x < options.length; x++) {
+    var text = options[x][0];  // Human-readable text.
+    var value = options[x][1]; // Language-neutral value.
+    var menuItem = new goog.ui.MenuItem(text);
+    menuItem.setRightToLeft(this.sourceBlock_.RTL);
+    menuItem.setValue(value);
+    menuItem.setCheckable(true);
+    menu.addChild(menuItem, true);
+    menuItem.setChecked(value == this.value_);
+  }
+  // Listen for mouse/keyboard events.
+  goog.events.listen(menu, goog.ui.Component.EventType.ACTION, callback);
+  // Listen for touch events (why doesn't Closure handle this already?).
+  function callbackTouchStart(e) {
+    var control = this.getOwnerControl(/** @type {Node} */ (e.target));
+    // Highlight the menu item.
+    control.handleMouseDown(e);
+  }
+  function callbackTouchEnd(e) {
+    var control = this.getOwnerControl(/** @type {Node} */ (e.target));
+    // Activate the menu item.
+    control.performActionInternal(e);
+  }
+  menu.getHandler().listen(menu.getElement(), goog.events.EventType.TOUCHSTART,
+                           callbackTouchStart);
+  menu.getHandler().listen(menu.getElement(), goog.events.EventType.TOUCHEND,
+                           callbackTouchEnd);
+
+  // Record windowSize and scrollOffset before adding menu.
+  var windowSize = goog.dom.getViewportSize();
+  var scrollOffset = goog.style.getViewportPageOffset(document);
+  var xy = this.getAbsoluteXY_();
+  var borderBBox = this.getScaledBBox_();
+  var div = Blockly.WidgetDiv.DIV;
+  menu.render(div);
+  var menuDom = menu.getElement();
+  Blockly.addClass_(menuDom, 'blocklyDropdownMenu');
+  // Record menuSize after adding menu.
+  var menuSize = goog.style.getSize(menuDom);
+  // Recalculate height for the total content, not only box height.
+  menuSize.height = menuDom.scrollHeight;
+
+  // Position the menu.
+  // Flip menu vertically if off the bottom.
+  if (xy.y + menuSize.height + borderBBox.height >=
+      windowSize.height + scrollOffset.y) {
+    xy.y -= menuSize.height + 2;
+  } else {
+    xy.y += borderBBox.height;
+  }
+  if (this.sourceBlock_.RTL) {
+    xy.x += borderBBox.width;
+    xy.x += Blockly.FieldDropdown.CHECKMARK_OVERHANG;
+    // Don't go offscreen left.
+    if (xy.x < scrollOffset.x + menuSize.width) {
+      xy.x = scrollOffset.x + menuSize.width;
+    }
+  } else {
+    xy.x -= Blockly.FieldDropdown.CHECKMARK_OVERHANG;
+    // Don't go offscreen right.
+    if (xy.x > windowSize.width + scrollOffset.x - menuSize.width) {
+      xy.x = windowSize.width + scrollOffset.x - menuSize.width;
+    }
+  }
+  Blockly.WidgetDiv.position(xy.x, xy.y, windowSize, scrollOffset,
+                             this.sourceBlock_.RTL);
+  menu.setAllowAutoFocus(true);
+  menuDom.focus();
+};
+
+/**
+ * Factor out common words in statically defined options.
+ * Create prefix and/or suffix labels.
+ * @private
+ */
+Blockly.FieldDropdown.prototype.trimOptions_ = function() {
+  this.prefixField = null;
+  this.suffixField = null;
+  var options = this.menuGenerator_;
+  if (!goog.isArray(options) || options.length < 2) {
+    return;
+  }
+  var strings = options.map(function(t) {return t[0];});
+  var shortest = Blockly.shortestStringLength(strings);
+  var prefixLength = Blockly.commonWordPrefix(strings, shortest);
+  var suffixLength = Blockly.commonWordSuffix(strings, shortest);
+  if (!prefixLength && !suffixLength) {
+    return;
+  }
+  if (shortest <= prefixLength + suffixLength) {
+    // One or more strings will entirely vanish if we proceed.  Abort.
+    return;
+  }
+  if (prefixLength) {
+    this.prefixField = strings[0].substring(0, prefixLength - 1);
+  }
+  if (suffixLength) {
+    this.suffixField = strings[0].substr(1 - suffixLength);
+  }
+  // Remove the prefix and suffix from the options.
+  var newOptions = [];
+  for (var x = 0; x < options.length; x++) {
+    var text = options[x][0];
+    var value = options[x][1];
+    text = text.substring(prefixLength, text.length - suffixLength);
+    newOptions[x] = [text, value];
+  }
+  this.menuGenerator_ = newOptions;
+};
+
+/**
+ * Return a list of the options for this dropdown.
+ * @return {!Array.<!Array.<string>>} Array of option tuples:
+ *     (human-readable text, language-neutral name).
+ * @private
+ */
+Blockly.FieldDropdown.prototype.getOptions_ = function() {
+  if (goog.isFunction(this.menuGenerator_)) {
+    return this.menuGenerator_.call(this);
+  }
+  return /** @type {!Array.<!Array.<string>>} */ (this.menuGenerator_);
+};
+
+/**
+ * Get the language-neutral value from this dropdown menu.
+ * @return {string} Current text.
+ */
+Blockly.FieldDropdown.prototype.getValue = function() {
+  return this.value_;
+};
+
+/**
+ * Set the language-neutral value for this dropdown menu.
+ * @param {string} newValue New value to set.
+ */
+Blockly.FieldDropdown.prototype.setValue = function(newValue) {
+  this.value_ = newValue;
+  // Look up and display the human-readable text.
+  var options = this.getOptions_();
+  for (var x = 0; x < options.length; x++) {
+    // Options are tuples of human-readable text and language-neutral values.
+    if (options[x][1] == newValue) {
+      this.setText(options[x][0]);
+      return;
+    }
+  }
+  // Value not found.  Add it, maybe it will become valid once set
+  // (like variable names).
+  this.setText(newValue);
+};
+
+/**
+ * Set the text in this field.  Trigger a rerender of the source block.
+ * @param {?string} text New text.
+ */
+Blockly.FieldDropdown.prototype.setText = function(text) {
+  if (this.sourceBlock_ && this.arrow_) {
+    // Update arrow's colour.
+    this.arrow_.style.fill = Blockly.makeColour(this.sourceBlock_.getColour());
+  }
+  if (text === null || text === this.text_) {
+    // No change if null.
+    return;
+  }
+  this.text_ = text;
+  this.updateTextNode_();
+
+  if (this.textElement_) {
+    // Insert dropdown arrow.
+    if (this.sourceBlock_.RTL) {
+      this.textElement_.insertBefore(this.arrow_, this.textElement_.firstChild);
+    } else {
+      this.textElement_.appendChild(this.arrow_);
+    }
+  }
+
+  if (this.sourceBlock_ && this.sourceBlock_.rendered) {
+    this.sourceBlock_.render();
+    this.sourceBlock_.bumpNeighbours_();
+    this.sourceBlock_.workspace.fireChangeEvent();
+  }
+};
+
+/**
+ * Close the dropdown menu if this input is being deleted.
+ */
+Blockly.FieldDropdown.prototype.dispose = function() {
+  Blockly.WidgetDiv.hideIfOwner(this);
+  Blockly.FieldDropdown.superClass_.dispose.call(this);
+};

src/blockly/core/field_image.js

@@ -0,0 +1,168 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2012 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Image field.  Used for titles, labels, etc.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.FieldImage');
+
+goog.require('Blockly.Field');
+goog.require('goog.dom');
+goog.require('goog.math.Size');
+goog.require('goog.userAgent');
+
+
+/**
+ * Class for an image.
+ * @param {string} src The URL of the image.
+ * @param {number} width Width of the image.
+ * @param {number} height Height of the image.
+ * @param {string=} opt_alt Optional alt text for when block is collapsed.
+ * @extends {Blockly.Field}
+ * @constructor
+ */
+Blockly.FieldImage = function(src, width, height, opt_alt) {
+  this.sourceBlock_ = null;
+  // Ensure height and width are numbers.  Strings are bad at math.
+  this.height_ = Number(height);
+  this.width_ = Number(width);
+  this.size_ = new goog.math.Size(this.width_,
+      this.height_ + 2 * Blockly.BlockSvg.INLINE_PADDING_Y);
+  this.text_ = opt_alt || '';
+  this.setValue(src);
+};
+goog.inherits(Blockly.FieldImage, Blockly.Field);
+
+/**
+ * Rectangular mask used by Firefox.
+ * @type {Element}
+ * @private
+ */
+Blockly.FieldImage.prototype.rectElement_ = null;
+
+/**
+ * Editable fields are saved by the XML renderer, non-editable fields are not.
+ */
+Blockly.FieldImage.prototype.EDITABLE = false;
+
+/**
+ * Install this image on a block.
+ * @param {!Blockly.Block} block The block containing this text.
+ */
+Blockly.FieldImage.prototype.init = function(block) {
+  if (this.sourceBlock_) {
+    // Image has already been initialized once.
+    return;
+  }
+  this.sourceBlock_ = block;
+  // Build the DOM.
+  this.fieldGroup_ = Blockly.createSvgElement('g', {}, null);
+  if (!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_);
+  if (goog.userAgent.GECKO) {
+    // Due to a Firefox bug which eats mouse events on image elements,
+    // a transparent rectangle needs to be placed on top of the image.
+    this.rectElement_ = Blockly.createSvgElement('rect',
+        {'height': this.height_ + 'px',
+         'width': this.width_ + 'px',
+         'fill-opacity': 0}, this.fieldGroup_);
+  }
+  block.getSvgRoot().appendChild(this.fieldGroup_);
+
+  // Configure the field to be transparent with respect to tooltips.
+  var topElement = this.rectElement_ || this.imageElement_;
+  topElement.tooltip = this.sourceBlock_;
+  Blockly.Tooltip.bindMouseEvents(topElement);
+};
+
+/**
+ * Dispose of all DOM objects belonging to this text.
+ */
+Blockly.FieldImage.prototype.dispose = function() {
+  goog.dom.removeNode(this.fieldGroup_);
+  this.fieldGroup_ = null;
+  this.imageElement_ = null;
+  this.rectElement_ = null;
+};
+
+/**
+ * Change the tooltip text for this field.
+ * @param {string|!Element} newTip Text for tooltip or a parent element to
+ *     link to for its tooltip.
+ */
+Blockly.FieldImage.prototype.setTooltip = function(newTip) {
+  var topElement = this.rectElement_ || this.imageElement_;
+  topElement.tooltip = newTip;
+};
+
+/**
+ * Get the source URL of this image.
+ * @return {string} Current text.
+ * @override
+ */
+Blockly.FieldImage.prototype.getValue = function() {
+  return this.src_;
+};
+
+/**
+ * Set the source URL of this image.
+ * @param {?string} src New source.
+ * @override
+ */
+Blockly.FieldImage.prototype.setValue = function(src) {
+  if (src === null) {
+    // No change if null.
+    return;
+  }
+  this.src_ = src;
+  if (this.imageElement_) {
+    this.imageElement_.setAttributeNS('http://www.w3.org/1999/xlink',
+        'xlink:href', goog.isString(src) ? src : '');
+  }
+};
+
+/**
+ * Set the alt text of this image.
+ * @param {?string} alt New alt text.
+ * @override
+ */
+Blockly.FieldImage.prototype.setText = function(alt) {
+  if (alt === null) {
+    // No change if null.
+    return;
+  }
+  this.text_ = alt;
+};
+
+/**
+ * Images are fixed width, no need to render.
+ * @private
+ */
+Blockly.FieldImage.prototype.render_ = function() {
+  // NOP
+};

src/blockly/core/field_label.js

@@ -0,0 +1,107 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2012 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Non-editable text field.  Used for titles, labels, etc.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.FieldLabel');
+
+goog.require('Blockly.Field');
+goog.require('Blockly.Tooltip');
+goog.require('goog.dom');
+goog.require('goog.math.Size');
+
+
+/**
+ * Class for a non-editable field.
+ * @param {string} text The initial content of the field.
+ * @param {string=} opt_class Optional CSS class for the field's text.
+ * @extends {Blockly.Field}
+ * @constructor
+ */
+Blockly.FieldLabel = function(text, opt_class) {
+  this.size_ = new goog.math.Size(0, 17.5);
+  this.class_ = opt_class;
+  this.setText(text);
+};
+goog.inherits(Blockly.FieldLabel, Blockly.Field);
+
+/**
+ * Editable fields are saved by the XML renderer, non-editable fields are not.
+ */
+Blockly.FieldLabel.prototype.EDITABLE = false;
+
+/**
+ * Install this text on a block.
+ * @param {!Blockly.Block} block The block containing this text.
+ */
+Blockly.FieldLabel.prototype.init = function(block) {
+  if (this.sourceBlock_) {
+    // Text has already been initialized once.
+    return;
+  }
+  this.sourceBlock_ = block;
+
+  // Build the DOM.
+  this.textElement_ = Blockly.createSvgElement('text',
+      {'class': 'blocklyText', 'y': this.size_.height - 5}, null);
+  if (this.class_) {
+    Blockly.addClass_(this.textElement_, this.class_);
+  }
+  if (!this.visible_) {
+    this.textElement_.style.display = 'none';
+  }
+  block.getSvgRoot().appendChild(this.textElement_);
+
+  // Configure the field to be transparent with respect to tooltips.
+  this.textElement_.tooltip = this.sourceBlock_;
+  Blockly.Tooltip.bindMouseEvents(this.textElement_);
+  // Force a render.
+  this.updateTextNode_();
+};
+
+/**
+ * Dispose of all DOM objects belonging to this text.
+ */
+Blockly.FieldLabel.prototype.dispose = function() {
+  goog.dom.removeNode(this.textElement_);
+  this.textElement_ = null;
+};
+
+/**
+ * Gets the group element for this field.
+ * Used for measuring the size and for positioning.
+ * @return {!Element} The group element.
+ */
+Blockly.FieldLabel.prototype.getSvgRoot = function() {
+  return /** @type {!Element} */ (this.textElement_);
+};
+
+/**
+ * Change the tooltip text for this field.
+ * @param {string|!Element} newTip Text for tooltip or a parent element to
+ *     link to for its tooltip.
+ */
+Blockly.FieldLabel.prototype.setTooltip = function(newTip) {
+  this.textElement_.tooltip = newTip;
+};

src/blockly/core/field_textinput.js

@@ -0,0 +1,328 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2012 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Text input field.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.FieldTextInput');
+
+goog.require('Blockly.Field');
+goog.require('Blockly.Msg');
+goog.require('goog.asserts');
+goog.require('goog.dom');
+goog.require('goog.userAgent');
+
+
+/**
+ * Class for an editable text field.
+ * @param {string} text The initial content of the field.
+ * @param {Function=} opt_changeHandler An optional function that is called
+ *     to validate any constraints on what the user entered.  Takes the new
+ *     text as an argument and returns either the accepted text, a replacement
+ *     text, or null to abort the change.
+ * @extends {Blockly.Field}
+ * @constructor
+ */
+Blockly.FieldTextInput = function(text, opt_changeHandler) {
+  Blockly.FieldTextInput.superClass_.constructor.call(this, text);
+  this.setChangeHandler(opt_changeHandler);
+};
+goog.inherits(Blockly.FieldTextInput, Blockly.Field);
+
+/**
+ * Point size of text.  Should match blocklyText's font-size in CSS.
+ */
+Blockly.FieldTextInput.FONTSIZE = 11;
+
+/**
+ * Mouse cursor style when over the hotspot that initiates the editor.
+ */
+Blockly.FieldTextInput.prototype.CURSOR = 'text';
+
+/**
+ * Allow browser to spellcheck this field.
+ * @private
+ */
+Blockly.FieldTextInput.prototype.spellcheck_ = true;
+
+/**
+ * Close the input widget if this input is being deleted.
+ */
+Blockly.FieldTextInput.prototype.dispose = function() {
+  Blockly.WidgetDiv.hideIfOwner(this);
+  Blockly.FieldTextInput.superClass_.dispose.call(this);
+};
+
+/**
+ * Set the text in this field.
+ * @param {?string} text New text.
+ * @override
+ */
+Blockly.FieldTextInput.prototype.setText = function(text) {
+  if (text === null) {
+    // No change if null.
+    return;
+  }
+  if (this.sourceBlock_ && this.changeHandler_) {
+    var validated = this.changeHandler_(text);
+    // If the new text is invalid, validation returns null.
+    // In this case we still want to display the illegal result.
+    if (validated !== null && validated !== undefined) {
+      text = validated;
+    }
+  }
+  Blockly.Field.prototype.setText.call(this, text);
+};
+
+/**
+ * Set whether this field is spellchecked by the browser.
+ * @param {boolean} check True if checked.
+ */
+Blockly.FieldTextInput.prototype.setSpellcheck = function(check) {
+  this.spellcheck_ = check;
+};
+
+/**
+ * Show the inline free-text editor on top of the text.
+ * @param {boolean=} opt_quietInput True if editor should be created without
+ *     focus.  Defaults to false.
+ * @private
+ */
+Blockly.FieldTextInput.prototype.showEditor_ = function(opt_quietInput) {
+  var quietInput = opt_quietInput || false;
+  if (!quietInput && (goog.userAgent.MOBILE || goog.userAgent.ANDROID ||
+                      goog.userAgent.IPAD)) {
+    // Mobile browsers have issues with in-line textareas (focus & keyboards).
+    var newValue = window.prompt(Blockly.Msg.CHANGE_VALUE_TITLE, this.text_);
+    if (this.sourceBlock_ && this.changeHandler_) {
+      var override = this.changeHandler_(newValue);
+      if (override !== undefined) {
+        newValue = override;
+      }
+    }
+    if (newValue !== null) {
+      this.setText(newValue);
+    }
+    return;
+  }
+
+  Blockly.WidgetDiv.show(this, this.sourceBlock_.RTL, this.widgetDispose_());
+  var div = Blockly.WidgetDiv.DIV;
+  // Create the input.
+  var htmlInput = goog.dom.createDom('input', 'blocklyHtmlInput');
+  htmlInput.setAttribute('spellcheck', this.spellcheck_);
+  var fontSize = (Blockly.FieldTextInput.FONTSIZE *
+                  this.sourceBlock_.workspace.scale) + 'pt';
+  div.style.fontSize = fontSize;
+  htmlInput.style.fontSize = fontSize;
+  /** @type {!HTMLInputElement} */
+  Blockly.FieldTextInput.htmlInput_ = htmlInput;
+  div.appendChild(htmlInput);
+
+  htmlInput.value = htmlInput.defaultValue = this.text_;
+  htmlInput.oldValue_ = null;
+  this.validate_();
+  this.resizeEditor_();
+  if (!quietInput) {
+    htmlInput.focus();
+    htmlInput.select();
+  }
+
+  // Bind to keydown -- trap Enter without IME and Esc to hide.
+  htmlInput.onKeyDownWrapper_ =
+      Blockly.bindEvent_(htmlInput, 'keydown', this, this.onHtmlInputKeyDown_);
+  // Bind to keyup -- trap Enter; resize after every keystroke.
+  htmlInput.onKeyUpWrapper_ =
+      Blockly.bindEvent_(htmlInput, 'keyup', this, this.onHtmlInputChange_);
+  // Bind to keyPress -- repeatedly resize when holding down a key.
+  htmlInput.onKeyPressWrapper_ =
+      Blockly.bindEvent_(htmlInput, 'keypress', this, this.onHtmlInputChange_);
+  var workspaceSvg = this.sourceBlock_.workspace.getCanvas();
+  htmlInput.onWorkspaceChangeWrapper_ =
+      Blockly.bindEvent_(workspaceSvg, 'blocklyWorkspaceChange', this,
+      this.resizeEditor_);
+};
+
+/**
+ * Handle key down to the editor.
+ * @param {!Event} e Keyboard event.
+ * @private
+ */
+Blockly.FieldTextInput.prototype.onHtmlInputKeyDown_ = function(e) {
+  var htmlInput = Blockly.FieldTextInput.htmlInput_;
+  var tabKey = 9, enterKey = 13, escKey = 27;
+  if (e.keyCode == enterKey) {
+    Blockly.WidgetDiv.hide();
+  } else if (e.keyCode == escKey) {
+    this.setText(htmlInput.defaultValue);
+    Blockly.WidgetDiv.hide();
+  } else if (e.keyCode == tabKey) {
+    Blockly.WidgetDiv.hide();
+    this.sourceBlock_.tab(this, !e.shiftKey);
+    e.preventDefault();
+  }
+};
+
+/**
+ * Handle a change to the editor.
+ * @param {!Event} e Keyboard event.
+ * @private
+ */
+Blockly.FieldTextInput.prototype.onHtmlInputChange_ = function(e) {
+  var htmlInput = Blockly.FieldTextInput.htmlInput_;
+  var escKey = 27;
+  if (e.keyCode != escKey) {
+    // Update source block.
+    var text = htmlInput.value;
+    if (text !== htmlInput.oldValue_) {
+      this.sourceBlock_.setShadow(false);
+      htmlInput.oldValue_ = text;
+      this.setText(text);
+      this.validate_();
+    } else if (goog.userAgent.WEBKIT) {
+      // Cursor key.  Render the source block to show the caret moving.
+      // Chrome only (version 26, OS X).
+      this.sourceBlock_.render();
+    }
+  }
+};
+
+/**
+ * Check to see if the contents of the editor validates.
+ * Style the editor accordingly.
+ * @private
+ */
+Blockly.FieldTextInput.prototype.validate_ = function() {
+  var valid = true;
+  goog.asserts.assertObject(Blockly.FieldTextInput.htmlInput_);
+  var htmlInput = Blockly.FieldTextInput.htmlInput_;
+  if (this.sourceBlock_ && this.changeHandler_) {
+    valid = this.changeHandler_(htmlInput.value);
+  }
+  if (valid === null) {
+    Blockly.addClass_(htmlInput, 'blocklyInvalidInput');
+  } else {
+    Blockly.removeClass_(htmlInput, 'blocklyInvalidInput');
+  }
+};
+
+/**
+ * Resize the editor and the underlying block to fit the text.
+ * @private
+ */
+Blockly.FieldTextInput.prototype.resizeEditor_ = function() {
+  var div = Blockly.WidgetDiv.DIV;
+  var bBox = this.fieldGroup_.getBBox();
+  div.style.width = bBox.width * this.sourceBlock_.workspace.scale + 'px';
+  div.style.height = bBox.height * this.sourceBlock_.workspace.scale + 'px';
+  var xy = this.getAbsoluteXY_();
+  // In RTL mode block fields and LTR input fields the left edge moves,
+  // whereas the right edge is fixed.  Reposition the editor.
+  if (this.sourceBlock_.RTL) {
+    var borderBBox = this.getScaledBBox_();
+    xy.x += borderBBox.width;
+    xy.x -= div.offsetWidth;
+  }
+  // Shift by a few pixels to line up exactly.
+  xy.y += 1;
+  if (goog.userAgent.GECKO && Blockly.WidgetDiv.DIV.style.top) {
+    // Firefox mis-reports the location of the border by a pixel
+    // once the WidgetDiv is moved into position.
+    xy.x -= 1;
+    xy.y -= 1;
+  }
+  if (goog.userAgent.WEBKIT) {
+    xy.y -= 3;
+  }
+  div.style.left = xy.x + 'px';
+  div.style.top = xy.y + 'px';
+};
+
+/**
+ * Close the editor, save the results, and dispose of the editable
+ * text field's elements.
+ * @return {!Function} Closure to call on destruction of the WidgetDiv.
+ * @private
+ */
+Blockly.FieldTextInput.prototype.widgetDispose_ = function() {
+  var thisField = this;
+  return function() {
+    var htmlInput = Blockly.FieldTextInput.htmlInput_;
+    // Save the edit (if it validates).
+    var text = htmlInput.value;
+    if (thisField.sourceBlock_ && thisField.changeHandler_) {
+      var text1 = thisField.changeHandler_(text);
+      if (text1 === null) {
+        // Invalid edit.
+        text = htmlInput.defaultValue;
+      } else if (text1 !== undefined) {
+        // Change handler has changed the text.
+        text = text1;
+      }
+    }
+    thisField.setText(text);
+    thisField.sourceBlock_.rendered && thisField.sourceBlock_.render();
+    Blockly.unbindEvent_(htmlInput.onKeyDownWrapper_);
+    Blockly.unbindEvent_(htmlInput.onKeyUpWrapper_);
+    Blockly.unbindEvent_(htmlInput.onKeyPressWrapper_);
+    Blockly.unbindEvent_(htmlInput.onWorkspaceChangeWrapper_);
+    Blockly.FieldTextInput.htmlInput_ = null;
+    // Delete style properties.
+    var style = Blockly.WidgetDiv.DIV.style;
+    style.width = 'auto';
+    style.height = 'auto';
+    style.fontSize = '';
+  };
+};
+
+/**
+ * Ensure that only a number may be entered.
+ * @param {string} text The user's text.
+ * @return {?string} A string representing a valid number, or null if invalid.
+ */
+Blockly.FieldTextInput.numberValidator = function(text) {
+  if (text === null) {
+    return null;
+  }
+  text = String(text);
+  // TODO: Handle cases like 'ten', '1.203,14', etc.
+  // 'O' is sometimes mistaken for '0' by inexperienced users.
+  text = text.replace(/O/ig, '0');
+  // Strip out thousands separators.
+  text = text.replace(/,/g, '');
+  var n = parseFloat(text || 0);
+  return isNaN(n) ? null : String(n);
+};
+
+/**
+ * Ensure that only a nonnegative integer may be entered.
+ * @param {string} text The user's text.
+ * @return {?string} A string representing a valid int, or null if invalid.
+ */
+Blockly.FieldTextInput.nonnegativeIntegerValidator = function(text) {
+  var n = Blockly.FieldTextInput.numberValidator(text);
+  if (n) {
+    n = String(Math.max(0, Math.floor(n)));
+  }
+  return n;
+};

src/blockly/core/field_variable.js

@@ -0,0 +1,197 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2012 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Variable input field.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.FieldVariable');
+
+goog.require('Blockly.FieldDropdown');
+goog.require('Blockly.Msg');
+goog.require('Blockly.Variables');
+goog.require('goog.string');
+
+
+/**
+ * Class for a variable's dropdown field.
+ * @param {?string} varname The default name for the variable.  If null,
+ *     a unique variable name will be generated.
+ * @param {Function=} opt_changeHandler A function that is executed when a new
+ *     option is selected.  Its sole argument is the new option value.
+ * @extends {Blockly.FieldDropdown}
+ * @constructor
+ */
+Blockly.FieldVariable = function(varname, opt_changeHandler) {
+  Blockly.FieldVariable.superClass_.constructor.call(this,
+      Blockly.FieldVariable.dropdownCreate, null);
+  this.setChangeHandler(opt_changeHandler);
+  this.setValue(varname || '');
+};
+goog.inherits(Blockly.FieldVariable, Blockly.FieldDropdown);
+
+/**
+ * Sets a new change handler for angle field.
+ * @param {Function} handler New change handler, or null.
+ */
+Blockly.FieldVariable.prototype.setChangeHandler = function(handler) {
+  var wrappedHandler;
+  if (handler) {
+    // Wrap the user's change handler together with the variable rename handler.
+    wrappedHandler = function(value) {
+      var v1 = handler.call(this, value);
+      if (v1 === null) {
+        var v2 = v1;
+      } else {
+        if (v1 === undefined) {
+          v1 = value;
+        }
+        var v2 = Blockly.FieldVariable.dropdownChange.call(this, v1);
+        if (v2 !== undefined) {
+          v2 = v1;
+        }
+      }
+      return v2 === value ? undefined : v2;
+    };
+  } else {
+    wrappedHandler = Blockly.FieldVariable.dropdownChange;
+  }
+  Blockly.FieldVariable.superClass_.setChangeHandler.call(this, wrappedHandler);
+};
+
+/**
+ * Install this dropdown on a block.
+ * @param {!Blockly.Block} block The block containing this text.
+ */
+Blockly.FieldVariable.prototype.init = function(block) {
+  if (this.sourceBlock_) {
+    // Dropdown has already been initialized once.
+    return;
+  }
+
+  if (!this.getValue()) {
+    // Variables without names get uniquely named for this workspace.
+    if (block.isInFlyout) {
+      var workspace = block.workspace.targetWorkspace;
+    } else {
+      var workspace = block.workspace;
+    }
+    this.setValue(Blockly.Variables.generateUniqueName(workspace));
+  }
+  Blockly.FieldVariable.superClass_.init.call(this, block);
+};
+
+/**
+ * Get the variable's name (use a variableDB to convert into a real name).
+ * Unline a regular dropdown, variables are literal and have no neutral value.
+ * @return {string} Current text.
+ */
+Blockly.FieldVariable.prototype.getValue = function() {
+  return this.getText();
+};
+
+/**
+ * Set the variable name.
+ * @param {string} text New text.
+ */
+Blockly.FieldVariable.prototype.setValue = function(text) {
+  this.value_ = text;
+  this.setText(text);
+};
+
+/**
+ * Return a sorted list of variable names for variable dropdown menus.
+ * Include a special option at the end for creating a new variable name.
+ * @return {!Array.<string>} Array of variable names.
+ * @this {!Blockly.FieldVariable}
+ */
+Blockly.FieldVariable.dropdownCreate = function() {
+  if (this.sourceBlock_ && this.sourceBlock_.workspace) {
+    var variableList =
+        Blockly.Variables.allVariables(this.sourceBlock_.workspace);
+  } else {
+    var variableList = [];
+  }
+  // Ensure that the currently selected variable is an option.
+  var name = this.getText();
+  if (name && variableList.indexOf(name) == -1) {
+    variableList.push(name);
+  }
+  variableList.sort(goog.string.caseInsensitiveCompare);
+  variableList.push(Blockly.Msg.RENAME_VARIABLE);
+  variableList.push(Blockly.Msg.NEW_VARIABLE);
+  // Variables are not language-specific, use the name as both the user-facing
+  // text and the internal representation.
+  var options = [];
+  for (var x = 0; x < variableList.length; x++) {
+    options[x] = [variableList[x], variableList[x]];
+  }
+  return options;
+};
+
+/**
+ * Event handler for a change in variable name.
+ * Special case the 'New variable...' and 'Rename variable...' options.
+ * In both of these special cases, 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.
+ * @this {!Blockly.FieldVariable}
+ */
+Blockly.FieldVariable.dropdownChange = 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),
+                      oldVar);
+    if (text) {
+      Blockly.Variables.renameVariable(oldVar, text, workspace);
+    }
+    return null;
+  } else if (text == Blockly.Msg.NEW_VARIABLE) {
+    text = promptName(Blockly.Msg.NEW_VARIABLE_TITLE, '');
+    // Since variables are case-insensitive, ensure that if the new variable
+    // matches with an existing variable, the new case prevails throughout.
+    if (text) {
+      Blockly.Variables.renameVariable(text, text, workspace);
+      return text;
+    }
+    return null;
+  }
+  return undefined;
+};

src/blockly/core/flyout.js

@@ -0,0 +1,731 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2011 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Flyout tray containing blocks which may be created.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.Flyout');
+
+goog.require('Blockly.Block');
+goog.require('Blockly.Comment');
+goog.require('Blockly.WorkspaceSvg');
+goog.require('goog.dom');
+goog.require('goog.events');
+goog.require('goog.math.Rect');
+goog.require('goog.userAgent');
+
+
+/**
+ * Class for a flyout.
+ * @param {!Object} workspaceOptions Dictionary of options for the workspace.
+ * @constructor
+ */
+Blockly.Flyout = function(workspaceOptions) {
+  var flyout = this;
+  workspaceOptions.getMetrics = function() {return flyout.getMetrics_();};
+  workspaceOptions.setMetrics =
+      function(ratio) {return flyout.setMetrics_(ratio);};
+  /**
+   * @type {!Blockly.Workspace}
+   * @private
+   */
+  this.workspace_ = new Blockly.WorkspaceSvg(workspaceOptions);
+  this.workspace_.isFlyout = true;
+
+  /**
+   * Is RTL vs LTR.
+   * @type {boolean}
+   */
+  this.RTL = !!workspaceOptions.RTL;
+
+  /**
+   * Opaque data that can be passed to Blockly.unbindEvent_.
+   * @type {!Array.<!Array>}
+   * @private
+   */
+  this.eventWrappers_ = [];
+
+  /**
+   * List of background buttons that lurk behind each block to catch clicks
+   * landing in the blocks' lakes and bays.
+   * @type {!Array.<!Element>}
+   * @private
+   */
+  this.buttons_ = [];
+
+  /**
+   * List of event listeners.
+   * @type {!Array.<!Array>}
+   * @private
+   */
+  this.listeners_ = [];
+};
+
+/**
+ * Does the flyout automatically close when a block is created?
+ * @type {boolean}
+ */
+Blockly.Flyout.prototype.autoClose = true;
+
+/**
+ * Corner radius of the flyout background.
+ * @type {number}
+ * @const
+ */
+Blockly.Flyout.prototype.CORNER_RADIUS = 8;
+
+/**
+ * Top/bottom padding between scrollbar and edge of flyout background.
+ * @type {number}
+ * @const
+ */
+Blockly.Flyout.prototype.SCROLLBAR_PADDING = 2;
+
+/**
+ * Width of flyout.
+ * @type {number}
+ * @private
+ */
+Blockly.Flyout.prototype.width_ = 0;
+
+/**
+ * Height of flyout.
+ * @type {number}
+ * @private
+ */
+Blockly.Flyout.prototype.height_ = 0;
+
+/**
+ * Creates the flyout's DOM.  Only needs to be called once.
+ * @return {!Element} The flyout's SVG group.
+ */
+Blockly.Flyout.prototype.createDom = function() {
+  /*
+  <g>
+    <path class="blocklyFlyoutBackground"/>
+    <g class="blocklyFlyout"></g>
+  </g>
+  */
+  this.svgGroup_ = Blockly.createSvgElement('g',
+      {'class': 'blocklyFlyout'}, null);
+  this.svgBackground_ = Blockly.createSvgElement('path',
+      {'class': 'blocklyFlyoutBackground'}, this.svgGroup_);
+  this.svgGroup_.appendChild(this.workspace_.createDom());
+  return this.svgGroup_;
+};
+
+/**
+ * Initializes the flyout.
+ * @param {!Blockly.Workspace} targetWorkspace The workspace in which to create
+ *     new blocks.
+ */
+Blockly.Flyout.prototype.init = function(targetWorkspace) {
+  this.targetWorkspace_ = targetWorkspace;
+  this.workspace_.targetWorkspace = targetWorkspace;
+  // Add scrollbar.
+  this.scrollbar_ = new Blockly.Scrollbar(this.workspace_, false, false);
+
+  this.hide();
+
+  Array.prototype.push.apply(this.eventWrappers_,
+      Blockly.bindEvent_(this.svgGroup_, 'wheel', this, this.wheel_));
+  if (!this.autoClose) {
+    Array.prototype.push.apply(this.eventWrappers_,
+        Blockly.bindEvent_(this.targetWorkspace_.getCanvas(),
+        'blocklyWorkspaceChange', this, this.filterForCapacity_));
+  }
+  // Dragging the flyout up and down.
+  Array.prototype.push.apply(this.eventWrappers_,
+      Blockly.bindEvent_(this.svgGroup_, 'mousedown', this, this.onMouseDown_));
+};
+
+/**
+ * Dispose of this flyout.
+ * Unlink from all DOM elements to prevent memory leaks.
+ */
+Blockly.Flyout.prototype.dispose = function() {
+  this.hide();
+  Blockly.unbindEvent_(this.eventWrappers_);
+  if (this.scrollbar_) {
+    this.scrollbar_.dispose();
+    this.scrollbar_ = null;
+  }
+  if (this.workspace_) {
+    this.workspace_.targetWorkspace = null;
+    this.workspace_.dispose();
+    this.workspace_ = null;
+  }
+  if (this.svgGroup_) {
+    goog.dom.removeNode(this.svgGroup_);
+    this.svgGroup_ = null;
+  }
+  this.svgBackground_ = null;
+  this.targetWorkspace_ = null;
+};
+
+/**
+ * Return an object with all the metrics required to size scrollbars for the
+ * flyout.  The following properties are computed:
+ * .viewHeight: Height of the visible rectangle,
+ * .viewWidth: Width of the visible rectangle,
+ * .contentHeight: Height of the contents,
+ * .viewTop: Offset of top edge of visible rectangle from parent,
+ * .contentTop: Offset of the top-most content from the y=0 coordinate,
+ * .absoluteTop: Top-edge of view.
+ * .absoluteLeft: Left-edge of view.
+ * @return {Object} Contains size and position metrics of the flyout.
+ * @private
+ */
+Blockly.Flyout.prototype.getMetrics_ = function() {
+  if (!this.isVisible()) {
+    // Flyout is hidden.
+    return null;
+  }
+  var viewHeight = this.height_ - 2 * this.SCROLLBAR_PADDING;
+  var viewWidth = this.width_;
+  try {
+    var optionBox = this.workspace_.getCanvas().getBBox();
+  } catch (e) {
+    // Firefox has trouble with hidden elements (Bug 528969).
+    var optionBox = {height: 0, y: 0};
+  }
+  return {
+    viewHeight: viewHeight,
+    viewWidth: viewWidth,
+    contentHeight: (optionBox.height + optionBox.y) * this.workspace_.scale,
+    viewTop: -this.workspace_.scrollY,
+    contentTop: 0,
+    absoluteTop: this.SCROLLBAR_PADDING,
+    absoluteLeft: 0
+  };
+};
+
+/**
+ * Sets the Y translation of the flyout to match the scrollbars.
+ * @param {!Object} yRatio Contains a y property which is a float
+ *     between 0 and 1 specifying the degree of scrolling.
+ * @private
+ */
+Blockly.Flyout.prototype.setMetrics_ = function(yRatio) {
+  var metrics = this.getMetrics_();
+  // This is a fix to an apparent race condition.
+  if (!metrics) {
+    return;
+  }
+  if (goog.isNumber(yRatio.y)) {
+    this.workspace_.scrollY =
+        -metrics.contentHeight * yRatio.y - metrics.contentTop;
+  }
+  this.workspace_.translate(0, this.workspace_.scrollY + metrics.absoluteTop);
+};
+
+/**
+ * Move the toolbox to the edge of the workspace.
+ */
+Blockly.Flyout.prototype.position = function() {
+  if (!this.isVisible()) {
+    return;
+  }
+  var metrics = this.targetWorkspace_.getMetrics();
+  if (!metrics) {
+    // Hidden components will return null.
+    return;
+  }
+  var edgeWidth = this.width_ - this.CORNER_RADIUS;
+  if (this.RTL) {
+    edgeWidth *= -1;
+  }
+  var path = ['M ' + (this.RTL ? this.width_ : 0) + ',0'];
+  path.push('h', edgeWidth);
+  path.push('a', this.CORNER_RADIUS, this.CORNER_RADIUS, 0, 0,
+      this.RTL ? 0 : 1,
+      this.RTL ? -this.CORNER_RADIUS : this.CORNER_RADIUS,
+      this.CORNER_RADIUS);
+  path.push('v', Math.max(0, metrics.viewHeight - this.CORNER_RADIUS * 2));
+  path.push('a', this.CORNER_RADIUS, this.CORNER_RADIUS, 0, 0,
+      this.RTL ? 0 : 1,
+      this.RTL ? this.CORNER_RADIUS : -this.CORNER_RADIUS,
+      this.CORNER_RADIUS);
+  path.push('h', -edgeWidth);
+  path.push('z');
+  this.svgBackground_.setAttribute('d', path.join(' '));
+
+  var x = metrics.absoluteLeft;
+  if (this.RTL) {
+    x += metrics.viewWidth;
+    x -= this.width_;
+  }
+  this.svgGroup_.setAttribute('transform',
+      'translate(' + x + ',' + metrics.absoluteTop + ')');
+
+  // Record the height for Blockly.Flyout.getMetrics_.
+  this.height_ = metrics.viewHeight;
+
+  // Update the scrollbar (if one exists).
+  if (this.scrollbar_) {
+    this.scrollbar_.resize();
+  }
+};
+
+/**
+ * Scroll the flyout to the top.
+ */
+Blockly.Flyout.prototype.scrollToTop = function() {
+  this.scrollbar_.set(0);
+};
+
+/**
+ * Scroll the flyout up or down.
+ * @param {!Event} e Mouse wheel scroll event.
+ * @private
+ */
+Blockly.Flyout.prototype.wheel_ = function(e) {
+  var delta = e.deltaY;
+  if (delta) {
+    if (goog.userAgent.GECKO) {
+      // Firefox's deltas are a tenth that of Chrome/Safari.
+      delta *= 10;
+    }
+    var metrics = this.getMetrics_();
+    var y = metrics.viewTop + delta;
+    y = Math.min(y, metrics.contentHeight - metrics.viewHeight);
+    y = Math.max(y, 0);
+    this.scrollbar_.set(y);
+    // Don't scroll the page.
+    e.preventDefault();
+    // Don't propagate mousewheel event (zooming).
+    e.stopPropagation();
+  }
+};
+
+/**
+ * Is the flyout visible?
+ * @return {boolean} True if visible.
+ */
+Blockly.Flyout.prototype.isVisible = function() {
+  return this.svgGroup_ && this.svgGroup_.style.display == 'block';
+};
+
+/**
+ * Hide and empty the flyout.
+ */
+Blockly.Flyout.prototype.hide = function() {
+  if (!this.isVisible()) {
+    return;
+  }
+  this.svgGroup_.style.display = 'none';
+  // Delete all the event listeners.
+  for (var x = 0, listen; listen = this.listeners_[x]; x++) {
+    Blockly.unbindEvent_(listen);
+  }
+  this.listeners_.length = 0;
+  if (this.reflowWrapper_) {
+    Blockly.unbindEvent_(this.reflowWrapper_);
+    this.reflowWrapper_ = null;
+  }
+  // Do NOT delete the blocks here.  Wait until Flyout.show.
+  // https://neil.fraser.name/news/2014/08/09/
+};
+
+/**
+ * Show and populate the flyout.
+ * @param {!Array|string} xmlList List of blocks to show.
+ *     Variables and procedures have a custom set of blocks.
+ */
+Blockly.Flyout.prototype.show = function(xmlList) {
+  this.hide();
+  // Delete any blocks from a previous showing.
+  var blocks = this.workspace_.getTopBlocks(false);
+  for (var i = 0, block; block = blocks[i]; i++) {
+    if (block.workspace == this.workspace_) {
+      block.dispose(false, false);
+    }
+  }
+  // Delete any background buttons from a previous showing.
+  for (var i = 0, rect; rect = this.buttons_[i]; i++) {
+    goog.dom.removeNode(rect);
+  }
+  this.buttons_.length = 0;
+
+  if (xmlList == Blockly.Variables.NAME_TYPE) {
+    // Special category for variables.
+    xmlList =
+        Blockly.Variables.flyoutCategory(this.workspace_.targetWorkspace);
+  } else if (xmlList == Blockly.Procedures.NAME_TYPE) {
+    // Special category for procedures.
+    xmlList =
+        Blockly.Procedures.flyoutCategory(this.workspace_.targetWorkspace);
+  }
+
+  var margin = this.CORNER_RADIUS;
+  this.svgGroup_.style.display = 'block';
+  // Create the blocks to be shown in this flyout.
+  var blocks = [];
+  var gaps = [];
+  for (var i = 0, xml; xml = xmlList[i]; i++) {
+    if (xml.tagName && xml.tagName.toUpperCase() == 'BLOCK') {
+      var block = Blockly.Xml.domToBlock(
+          /** @type {!Blockly.Workspace} */ (this.workspace_), xml);
+      blocks.push(block);
+      var gap = parseInt(xml.getAttribute('gap'), 10);
+      gaps.push(gap || margin * 3);
+    }
+  }
+
+  // Lay out the blocks vertically.
+  var cursorY = margin;
+  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;
+      // There is no good way to handle comment bubbles inside the flyout.
+      // Blocks shouldn't come with predefined comments, but someone will
+      // try this, I'm sure.  Kill the comment.
+      child.setCommentText(null);
+    }
+    block.render();
+    var root = block.getSvgRoot();
+    var blockHW = block.getHeightWidth();
+    var x = this.RTL ? 0 : margin / this.workspace_.scale +
+        Blockly.BlockSvg.TAB_WIDTH;
+    block.moveBy(x, cursorY);
+    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);
+    // 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;
+
+    if (this.autoClose) {
+      this.listeners_.push(Blockly.bindEvent_(root, 'mousedown', null,
+          this.createBlockFunc_(block)));
+    } else {
+      this.listeners_.push(Blockly.bindEvent_(root, 'mousedown', null,
+          this.blockMouseDown_(block)));
+    }
+    this.listeners_.push(Blockly.bindEvent_(root, 'mouseover', block,
+        block.addSelect));
+    this.listeners_.push(Blockly.bindEvent_(root, 'mouseout', block,
+        block.removeSelect));
+    this.listeners_.push(Blockly.bindEvent_(rect, 'mousedown', null,
+        this.createBlockFunc_(block)));
+    this.listeners_.push(Blockly.bindEvent_(rect, 'mouseover', block,
+        block.addSelect));
+    this.listeners_.push(Blockly.bindEvent_(rect, 'mouseout', block,
+        block.removeSelect));
+  }
+
+  // IE 11 is an incompetant browser that fails to fire mouseout events.
+  // When the mouse is over the background, deselect all blocks.
+  var deselectAll = function(e) {
+    var blocks = this.workspace_.getTopBlocks(false);
+    for (var i = 0, block; block = blocks[i]; i++) {
+      block.removeSelect();
+    }
+  };
+  this.listeners_.push(Blockly.bindEvent_(this.svgBackground_, 'mouseover',
+      this, deselectAll));
+
+  this.width_ = 0;
+  this.reflow();
+
+  this.filterForCapacity_();
+
+  // Fire a resize event to update the flyout's scrollbar.
+  Blockly.fireUiEventNow(window, 'resize');
+  this.reflowWrapper_ = Blockly.bindEvent_(this.workspace_.getCanvas(),
+      'blocklyWorkspaceChange', this, this.reflow);
+  this.workspace_.fireChangeEvent();
+};
+
+/**
+ * Compute width of flyout.  Position button under each block.
+ * For RTL: Lay out the blocks right-aligned.
+ */
+Blockly.Flyout.prototype.reflow = function() {
+  this.workspace_.scale = this.targetWorkspace_.scale;
+  var flyoutWidth = 0;
+  var margin = this.CORNER_RADIUS;
+  var blocks = this.workspace_.getTopBlocks(false);
+  for (var x = 0, block; block = blocks[x]; x++) {
+    var width = block.getHeightWidth().width;
+    if (block.outputConnection) {
+      width -= Blockly.BlockSvg.TAB_WIDTH;
+    }
+    flyoutWidth = Math.max(flyoutWidth, width);
+  }
+  flyoutWidth += Blockly.BlockSvg.TAB_WIDTH;
+  flyoutWidth *= this.workspace_.scale;
+  flyoutWidth += margin * 1.5 + Blockly.Scrollbar.scrollbarThickness;
+  if (this.width_ != flyoutWidth) {
+    for (var x = 0, block; block = blocks[x]; x++) {
+      var blockHW = block.getHeightWidth();
+      if (this.RTL) {
+        // With the flyoutWidth known, right-align the blocks.
+        var oldX = block.getRelativeToSurfaceXY().x;
+        var dx = flyoutWidth - margin;
+        dx /= this.workspace_.scale;
+        dx -= Blockly.BlockSvg.TAB_WIDTH;
+        block.moveBy(dx - oldX, 0);
+      }
+      if (block.flyoutRect_) {
+        block.flyoutRect_.setAttribute('width', blockHW.width);
+        block.flyoutRect_.setAttribute('height', blockHW.height);
+        // Blocks with output tabs are shifted a bit.
+        var tab = block.outputConnection ? Blockly.BlockSvg.TAB_WIDTH : 0;
+        var blockXY = block.getRelativeToSurfaceXY();
+        block.flyoutRect_.setAttribute('x',
+            this.RTL ? blockXY.x - blockHW.width + tab : blockXY.x - tab);
+        block.flyoutRect_.setAttribute('y', blockXY.y);
+      }
+    }
+    // Record the width for .getMetrics_ and .position.
+    this.width_ = flyoutWidth;
+    // Fire a resize event to update the flyout's scrollbar.
+    Blockly.fireUiEvent(window, 'resize');
+  }
+};
+
+/**
+ * Handle a mouse-down on an SVG block in a non-closing flyout.
+ * @param {!Blockly.Block} block The flyout block to copy.
+ * @return {!Function} Function to call when block is clicked.
+ * @private
+ */
+Blockly.Flyout.prototype.blockMouseDown_ = function(block) {
+  var flyout = this;
+  return function(e) {
+    Blockly.terminateDrag_();
+    Blockly.hideChaff();
+    if (Blockly.isRightButton(e)) {
+      // Right-click.
+      block.showContextMenu_(e);
+    } else {
+      // Left-click (or middle click)
+      Blockly.removeAllRanges();
+      Blockly.Css.setCursor(Blockly.Css.Cursor.CLOSED);
+      // Record the current mouse position.
+      Blockly.Flyout.startDownEvent_ = e;
+      Blockly.Flyout.startBlock_ = block;
+      Blockly.Flyout.startFlyout_ = flyout;
+      Blockly.Flyout.onMouseUpWrapper_ = Blockly.bindEvent_(document,
+          'mouseup', this, Blockly.terminateDrag_);
+      Blockly.Flyout.onMouseMoveBlockWrapper_ = Blockly.bindEvent_(document,
+          'mousemove', this, flyout.onMouseMoveBlock_);
+    }
+    // This event has been handled.  No need to bubble up to the document.
+    e.stopPropagation();
+  };
+};
+
+/**
+ * Mouse down on the flyout background.  Start a vertical scroll drag.
+ * @param {!Event} e Mouse down event.
+ * @private
+ */
+Blockly.Flyout.prototype.onMouseDown_ = function(e) {
+  if (Blockly.isRightButton(e)) {
+    return;
+  }
+  Blockly.hideChaff(true);
+  Blockly.Flyout.terminateDrag_();
+  this.startDragMouseY_ = e.clientY;
+  Blockly.Flyout.onMouseMoveWrapper_ = Blockly.bindEvent_(document, 'mousemove',
+      this, this.onMouseMove_);
+  Blockly.Flyout.onMouseUpWrapper_ = Blockly.bindEvent_(document, 'mouseup',
+      this, Blockly.Flyout.terminateDrag_);
+  // This event has been handled.  No need to bubble up to the document.
+  e.preventDefault();
+  e.stopPropagation();
+};
+
+/**
+ * Handle a mouse-move to vertically drag the flyout.
+ * @param {!Event} e Mouse move event.
+ * @private
+ */
+Blockly.Flyout.prototype.onMouseMove_ = function(e) {
+  var dy = e.clientY - this.startDragMouseY_;
+  this.startDragMouseY_ = e.clientY;
+  var metrics = this.getMetrics_();
+  var y = metrics.viewTop - dy;
+  y = Math.min(y, metrics.contentHeight - metrics.viewHeight);
+  y = Math.max(y, 0);
+  this.scrollbar_.set(y);
+};
+
+/**
+ * Mouse button is down on a block in a non-closing flyout.  Create the block
+ * if the mouse moves beyond a small radius.  This allows one to play with
+ * fields without instantiating blocks that instantly self-destruct.
+ * @param {!Event} e Mouse move event.
+ * @private
+ */
+Blockly.Flyout.prototype.onMouseMoveBlock_ = function(e) {
+  if (e.type == 'mousemove' && e.clientX <= 1 && e.clientY == 0 &&
+      e.button == 0) {
+    /* HACK:
+     Safari Mobile 6.0 and Chrome for Android 18.0 fire rogue mousemove events
+     on certain touch actions. Ignore events with these signatures.
+     This may result in a one-pixel blind spot in other browsers,
+     but this shouldn't be noticable. */
+    e.stopPropagation();
+    return;
+  }
+  Blockly.removeAllRanges();
+  var dx = e.clientX - Blockly.Flyout.startDownEvent_.clientX;
+  var dy = e.clientY - Blockly.Flyout.startDownEvent_.clientY;
+  // Still dragging within the sticky DRAG_RADIUS.
+  if (Math.sqrt(dx * dx + dy * dy) > Blockly.DRAG_RADIUS) {
+    // Create the block.
+    Blockly.Flyout.startFlyout_.createBlockFunc_(Blockly.Flyout.startBlock_)(
+        Blockly.Flyout.startDownEvent_);
+  }
+};
+
+/**
+ * Create a copy of this block on the workspace.
+ * @param {!Blockly.Block} originBlock The flyout block to copy.
+ * @return {!Function} Function to call when block is clicked.
+ * @private
+ */
+Blockly.Flyout.prototype.createBlockFunc_ = function(originBlock) {
+  var flyout = this;
+  var workspace = this.targetWorkspace_;
+  return function(e) {
+    if (Blockly.isRightButton(e)) {
+      // Right-click.  Don't create a block, let the context menu show.
+      return;
+    }
+    if (originBlock.disabled) {
+      // Beyond capacity.
+      return;
+    }
+    // Create the new block by cloning the block in the flyout (via XML).
+    var xml = Blockly.Xml.blockToDom_(originBlock);
+    var block = Blockly.Xml.domToBlock(workspace, xml);
+    // Place it in the same spot as the flyout copy.
+    var svgRootOld = originBlock.getSvgRoot();
+    if (!svgRootOld) {
+      throw 'originBlock is not rendered.';
+    }
+    var xyOld = Blockly.getSvgXY_(svgRootOld, workspace);
+    // Scale the scroll (getSvgXY_ did not do this).
+    if (flyout.RTL) {
+      var width = workspace.getMetrics().viewWidth - flyout.width_;
+      xyOld.x += width / workspace.scale - width;
+    } else {
+      xyOld.x += flyout.workspace_.scrollX / flyout.workspace_.scale -
+          flyout.workspace_.scrollX;
+    }
+    xyOld.y += flyout.workspace_.scrollY / flyout.workspace_.scale -
+        flyout.workspace_.scrollY;
+    var svgRootNew = block.getSvgRoot();
+    if (!svgRootNew) {
+      throw 'block is not rendered.';
+    }
+    var xyNew = Blockly.getSvgXY_(svgRootNew, workspace);
+    // Scale the scroll (getSvgXY_ did not do this).
+    xyNew.x += workspace.scrollX / workspace.scale - workspace.scrollX;
+    xyNew.y += workspace.scrollY / workspace.scale - workspace.scrollY;
+    if (workspace.toolbox_ && !workspace.scrollbar) {
+      xyNew.x += workspace.toolbox_.width / workspace.scale;
+    }
+    block.moveBy(xyOld.x - xyNew.x, xyOld.y - xyNew.y);
+    if (flyout.autoClose) {
+      flyout.hide();
+    } else {
+      flyout.filterForCapacity_();
+    }
+    // Start a dragging operation on the new block.
+    block.onMouseDown_(e);
+  };
+};
+
+/**
+ * Filter the blocks on the flyout to disable the ones that are above the
+ * capacity limit.
+ * @private
+ */
+Blockly.Flyout.prototype.filterForCapacity_ = function() {
+  var remainingCapacity = this.targetWorkspace_.remainingCapacity();
+  var blocks = this.workspace_.getTopBlocks(false);
+  for (var i = 0, block; block = blocks[i]; i++) {
+    var allBlocks = block.getDescendants();
+    if (allBlocks.length > remainingCapacity) {
+      block.setDisabled(true);
+    }
+  }
+};
+
+/**
+ * Return the deletion rectangle for this flyout.
+ * @return {goog.math.Rect} Rectangle in which to delete.
+ */
+Blockly.Flyout.prototype.getRect = function() {
+  // BIG_NUM is offscreen padding so that blocks dragged beyond the shown flyout
+  // area are still deleted.  Must be larger than the largest screen size,
+  // but be smaller than half Number.MAX_SAFE_INTEGER (not available on IE).
+  var BIG_NUM = 1000000000;
+  var mainWorkspace = Blockly.mainWorkspace;
+  var x = Blockly.getSvgXY_(this.svgGroup_, mainWorkspace).x;
+  if (!this.RTL) {
+    x -= BIG_NUM;
+  }
+  // Fix scale if nested in zoomed workspace.
+  var scale = this.targetWorkspace_ == mainWorkspace ? 1 : mainWorkspace.scale;
+    return new goog.math.Rect(x, -BIG_NUM,
+        BIG_NUM + this.width_ * scale, BIG_NUM * 2);
+};
+
+/**
+ * Stop binding to the global mouseup and mousemove events.
+ * @private
+ */
+Blockly.Flyout.terminateDrag_ = function() {
+  if (Blockly.Flyout.onMouseUpWrapper_) {
+    Blockly.unbindEvent_(Blockly.Flyout.onMouseUpWrapper_);
+    Blockly.Flyout.onMouseUpWrapper_ = null;
+  }
+  if (Blockly.Flyout.onMouseMoveBlockWrapper_) {
+    Blockly.unbindEvent_(Blockly.Flyout.onMouseMoveBlockWrapper_);
+    Blockly.Flyout.onMouseMoveBlockWrapper_ = null;
+  }
+  if (Blockly.Flyout.onMouseMoveWrapper_) {
+    Blockly.unbindEvent_(Blockly.Flyout.onMouseMoveWrapper_);
+    Blockly.Flyout.onMouseMoveWrapper_ = null;
+  }
+  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;
+};

src/blockly/core/generator.js

@@ -0,0 +1,328 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2012 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Utility functions for generating executable code from
+ * Blockly code.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.Generator');
+
+goog.require('Blockly.Block');
+goog.require('goog.asserts');
+
+
+/**
+ * Class for a code generator that translates the blocks into a language.
+ * @param {string} name Language name of this generator.
+ * @constructor
+ */
+Blockly.Generator = function(name) {
+  this.name_ = name;
+  this.FUNCTION_NAME_PLACEHOLDER_REGEXP_ =
+      new RegExp(this.FUNCTION_NAME_PLACEHOLDER_, 'g');
+};
+
+/**
+ * Category to separate generated function names from variables and procedures.
+ */
+Blockly.Generator.NAME_TYPE = 'generated_function';
+
+/**
+ * Arbitrary code to inject into locations that risk causing infinite loops.
+ * Any instances of '%1' will be replaced by the block ID that failed.
+ * E.g. '  checkTimeout(%1);\n'
+ * @type {?string}
+ */
+Blockly.Generator.prototype.INFINITE_LOOP_TRAP = null;
+
+/**
+ * Arbitrary code to inject before every statement.
+ * Any instances of '%1' will be replaced by the block ID of the statement.
+ * E.g. 'highlight(%1);\n'
+ * @type {?string}
+ */
+Blockly.Generator.prototype.STATEMENT_PREFIX = null;
+
+/**
+ * Generate code for all blocks in the workspace to the specified language.
+ * @param {Blockly.Workspace} workspace Workspace to generate code from.
+ * @return {string} Generated code.
+ */
+Blockly.Generator.prototype.workspaceToCode = function(workspace) {
+  if (!workspace) {
+    // Backwards compatability from before there could be multiple workspaces.
+    console.warn('No workspace specified in workspaceToCode call.  Guessing.');
+    workspace = Blockly.getMainWorkspace();
+  }
+  var code = [];
+  this.init(workspace);
+  var blocks = workspace.getTopBlocks(true);
+  for (var x = 0, block; block = blocks[x]; x++) {
+    var line = this.blockToCode(block);
+    if (goog.isArray(line)) {
+      // Value blocks return tuples of code and operator order.
+      // Top-level blocks don't care about operator order.
+      line = line[0];
+    }
+    if (line) {
+      if (block.outputConnection && this.scrubNakedValue) {
+        // This block is a naked value.  Ask the language's code generator if
+        // it wants to append a semicolon, or something.
+        line = this.scrubNakedValue(line);
+      }
+      code.push(line);
+    }
+  }
+  code = code.join('\n');  // Blank line between each section.
+  code = this.finish(code);
+  // Final scrubbing of whitespace.
+  code = code.replace(/^\s+\n/, '');
+  code = code.replace(/\n\s+$/, '\n');
+  code = code.replace(/[ \t]+\n/g, '\n');
+  return code;
+};
+
+// The following are some helpful functions which can be used by multiple
+// languages.
+
+/**
+ * Prepend a common prefix onto each line of code.
+ * @param {string} text The lines of code.
+ * @param {string} prefix The common prefix.
+ * @return {string} The prefixed lines of code.
+ */
+Blockly.Generator.prototype.prefixLines = function(text, prefix) {
+  return prefix + text.replace(/\n(.)/g, '\n' + prefix + '$1');
+};
+
+/**
+ * Recursively spider a tree of blocks, returning all their comments.
+ * @param {!Blockly.Block} block The block from which to start spidering.
+ * @return {string} Concatenated list of comments.
+ */
+Blockly.Generator.prototype.allNestedComments = function(block) {
+  var comments = [];
+  var blocks = block.getDescendants();
+  for (var x = 0; x < blocks.length; x++) {
+    var comment = blocks[x].getCommentText();
+    if (comment) {
+      comments.push(comment);
+    }
+  }
+  // Append an empty string to create a trailing line break when joined.
+  if (comments.length) {
+    comments.push('');
+  }
+  return comments.join('\n');
+};
+
+/**
+ * Generate code for the specified block (and attached blocks).
+ * @param {Blockly.Block} block The block to generate code for.
+ * @return {string|!Array} For statement blocks, the generated code.
+ *     For value blocks, an array containing the generated code and an
+ *     operator order value.  Returns '' if block is null.
+ */
+Blockly.Generator.prototype.blockToCode = function(block) {
+  if (!block) {
+    return '';
+  }
+  if (block.disabled) {
+    // Skip past this block if it is disabled.
+    return this.blockToCode(block.getNextBlock());
+  }
+
+  var func = this[block.type];
+  goog.asserts.assertFunction(func,
+      'Language "%s" does not know how to generate code for block type "%s".',
+      this.name_, block.type);
+  // First argument to func.call is the value of 'this' in the generator.
+  // Prior to 24 September 2013 'this' was the only way to access the block.
+  // The current prefered method of accessing the block is through the second
+  // argument to func.call, which becomes the first parameter to the generator.
+  var code = func.call(block, block);
+  if (goog.isArray(code)) {
+    // Value blocks return tuples of code and operator order.
+    return [this.scrub_(block, code[0]), code[1]];
+  } else if (goog.isString(code)) {
+    if (this.STATEMENT_PREFIX) {
+      code = this.STATEMENT_PREFIX.replace(/%1/g, '\'' + block.id + '\'') +
+          code;
+    }
+    return this.scrub_(block, code);
+  } else if (code === null) {
+    // Block has handled code generation itself.
+    return '';
+  } else {
+    goog.asserts.fail('Invalid code generated: %s', code);
+  }
+};
+
+/**
+ * Generate code representing the specified value input.
+ * @param {!Blockly.Block} block The block containing the input.
+ * @param {string} name The name of the input.
+ * @param {number} order The maximum binding strength (minimum order value)
+ *     of any operators adjacent to "block".
+ * @return {string} Generated code or '' if no blocks are connected or the
+ *     specified input does not exist.
+ */
+Blockly.Generator.prototype.valueToCode = function(block, name, order) {
+  if (isNaN(order)) {
+    goog.asserts.fail('Expecting valid order from block "%s".', block.type);
+  }
+  var targetBlock = block.getInputTargetBlock(name);
+  if (!targetBlock) {
+    return '';
+  }
+  var tuple = this.blockToCode(targetBlock);
+  if (tuple === '') {
+    // Disabled block.
+    return '';
+  }
+  // Value blocks must return code and order of operations info.
+  // Statement blocks must only return code.
+  goog.asserts.assertArray(tuple,
+      'Expecting tuple from value block "%s".', targetBlock.type);
+  var code = tuple[0];
+  var innerOrder = tuple[1];
+  if (isNaN(innerOrder)) {
+    goog.asserts.fail('Expecting valid order from value block "%s".',
+        targetBlock.type);
+  }
+  if (code && order <= innerOrder) {
+    if (order == innerOrder && (order == 0 || order == 99)) {
+      // Don't generate parens around NONE-NONE and ATOMIC-ATOMIC pairs.
+      // 0 is the atomic order, 99 is the none order.  No parentheses needed.
+      // In all known languages multiple such code blocks are not order
+      // sensitive.  In fact in Python ('a' 'b') 'c' would fail.
+    } else {
+      // The operators outside this code are stonger than the operators
+      // inside this code.  To prevent the code from being pulled apart,
+      // wrap the code in parentheses.
+      // Technically, this should be handled on a language-by-language basis.
+      // However all known (sane) languages use parentheses for grouping.
+      code = '(' + code + ')';
+    }
+  }
+  return code;
+};
+
+/**
+ * Generate code representing the statement.  Indent the code.
+ * @param {!Blockly.Block} block The block containing the input.
+ * @param {string} name The name of the input.
+ * @return {string} Generated code or '' if no blocks are connected.
+ */
+Blockly.Generator.prototype.statementToCode = function(block, name) {
+  var targetBlock = block.getInputTargetBlock(name);
+  var code = this.blockToCode(targetBlock);
+  // Value blocks must return code and order of operations info.
+  // Statement blocks must only return code.
+  goog.asserts.assertString(code,
+      'Expecting code from statement block "%s".',
+      targetBlock && targetBlock.type);
+  if (code) {
+    code = this.prefixLines(/** @type {string} */ (code), this.INDENT);
+  }
+  return code;
+};
+
+/**
+ * Add an infinite loop trap to the contents of a loop.
+ * If loop is empty, add a statment prefix for the loop block.
+ * @param {string} branch Code for loop contents.
+ * @param {string} id ID of enclosing block.
+ * @return {string} Loop contents, with infinite loop trap added.
+ */
+Blockly.Generator.prototype.addLoopTrap = function(branch, id) {
+  if (this.INFINITE_LOOP_TRAP) {
+    branch = this.INFINITE_LOOP_TRAP.replace(/%1/g, '\'' + id + '\'') + branch;
+  }
+  if (this.STATEMENT_PREFIX) {
+    branch += this.prefixLines(this.STATEMENT_PREFIX.replace(/%1/g,
+        '\'' + id + '\''), this.INDENT);
+  }
+  return branch;
+};
+
+/**
+ * The method of indenting.  Defaults to two spaces, but language generators
+ * may override this to increase indent or change to tabs.
+ * @type {string}
+ */
+Blockly.Generator.prototype.INDENT = '  ';
+
+/**
+ * Comma-separated list of reserved words.
+ * @type {string}
+ * @private
+ */
+Blockly.Generator.prototype.RESERVED_WORDS_ = '';
+
+/**
+ * Add one or more words to the list of reserved words for this language.
+ * @param {string} words Comma-separated list of words to add to the list.
+ *     No spaces.  Duplicates are ok.
+ */
+Blockly.Generator.prototype.addReservedWords = function(words) {
+  this.RESERVED_WORDS_ += words + ',';
+};
+
+/**
+ * This is used as a placeholder in functions defined using
+ * Blockly.Generator.provideFunction_.  It must not be legal code that could
+ * legitimately appear in a function definition (or comment), and it must
+ * not confuse the regular expression parser.
+ * @type {string}
+ * @private
+ */
+Blockly.Generator.prototype.FUNCTION_NAME_PLACEHOLDER_ = '{leCUI8hutHZI4480Dc}';
+
+/**
+ * Define a function to be included in the generated code.
+ * The first time this is called with a given desiredName, the code is
+ * saved and an actual name is generated.  Subsequent calls with the
+ * same desiredName have no effect but have the same return value.
+ *
+ * It is up to the caller to make sure the same desiredName is not
+ * used for different code values.
+ *
+ * The code gets output when Blockly.Generator.finish() is called.
+ *
+ * @param {string} desiredName The desired name of the function (e.g., isPrime).
+ * @param {!Array.<string>} code A list of Python statements.
+ * @return {string} The actual name of the new function.  This may differ
+ *     from desiredName if the former has already been taken by the user.
+ * @private
+ */
+Blockly.Generator.prototype.provideFunction_ = function(desiredName, code) {
+  if (!this.definitions_[desiredName]) {
+    var functionName =
+        this.variableDB_.getDistinctName(desiredName, this.NAME_TYPE);
+    this.functionNames_[desiredName] = functionName;
+    this.definitions_[desiredName] = code.join('\n').replace(
+        this.FUNCTION_NAME_PLACEHOLDER_REGEXP_, functionName);
+  }
+  return this.functionNames_[desiredName];
+};

src/blockly/core/icon.js

@@ -0,0 +1,222 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2013 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Object representing an icon on a block.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.Icon');
+
+goog.require('goog.dom');
+
+
+/**
+ * Class for an icon.
+ * @param {Blockly.Block} block The block associated with this icon.
+ * @constructor
+ */
+Blockly.Icon = function(block) {
+  this.block_ = block;
+};
+
+/**
+ * Does this icon get hidden when the block is collapsed.
+ */
+Blockly.Icon.prototype.collapseHidden = true;
+
+/**
+ * Height and width of icons.
+ */
+Blockly.Icon.prototype.SIZE = 17;
+
+/**
+ * Icon in base64 format.
+ * @private
+ */
+Blockly.Icon.prototype.png_ = '';
+
+/**
+ * Bubble UI (if visible).
+ * @type {Blockly.Bubble}
+ * @private
+ */
+Blockly.Icon.prototype.bubble_ = null;
+
+/**
+ * Absolute X coordinate of icon's center.
+ * @private
+ */
+Blockly.Icon.prototype.iconX_ = 0;
+
+/**
+ * Absolute Y coordinate of icon's centre.
+ * @private
+ */
+Blockly.Icon.prototype.iconY_ = 0;
+
+/**
+ * Create the icon on the block.
+ */
+Blockly.Icon.prototype.createIcon = function() {
+  if (this.iconGroup_) {
+    // Icon already exists.
+    return;
+  }
+  /* Here's the markup that will be generated:
+  <g class="blocklyIconGroup">
+    <image width="17" height="17"
+     xlink:href="data:image/png;base64,iVBOR..."></image>
+  </g>
+  */
+  this.iconGroup_ = Blockly.createSvgElement('g',
+      {'class': 'blocklyIconGroup'}, null);
+  var img = Blockly.createSvgElement('image',
+      {'width': this.SIZE, 'height': this.SIZE},
+      this.iconGroup_);
+  img.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', this.png_);
+
+  this.block_.getSvgRoot().appendChild(this.iconGroup_);
+  Blockly.bindEvent_(this.iconGroup_, 'mouseup', this, this.iconClick_);
+  this.updateEditable();
+};
+
+/**
+ * Dispose of this icon.
+ */
+Blockly.Icon.prototype.dispose = function() {
+  // Dispose of and unlink the icon.
+  goog.dom.removeNode(this.iconGroup_);
+  this.iconGroup_ = null;
+  // Dispose of and unlink the bubble.
+  this.setVisible(false);
+  this.block_ = null;
+};
+
+/**
+ * Add or remove the UI indicating if this icon may be clicked or not.
+ */
+Blockly.Icon.prototype.updateEditable = function() {
+  if (this.block_.isInFlyout || !this.block_.isEditable()) {
+    Blockly.addClass_(/** @type {!Element} */ (this.iconGroup_),
+                      'blocklyIconGroupReadonly');
+  } else {
+    Blockly.removeClass_(/** @type {!Element} */ (this.iconGroup_),
+                         'blocklyIconGroupReadonly');
+  }
+};
+
+/**
+ * Is the associated bubble visible?
+ * @return {boolean} True if the bubble is visible.
+ */
+Blockly.Icon.prototype.isVisible = function() {
+  return !!this.bubble_;
+};
+
+/**
+ * Clicking on the icon toggles if the bubble is visible.
+ * @param {!Event} e Mouse click event.
+ * @private
+ */
+Blockly.Icon.prototype.iconClick_ = function(e) {
+  if (Blockly.dragMode_ == 2) {
+    // Drag operation is concluding.  Don't open the editor.
+    return;
+  }
+  if (!this.block_.isInFlyout && !Blockly.isRightButton(e)) {
+    this.setVisible(!this.isVisible());
+  }
+};
+
+/**
+ * Change the colour of the associated bubble to match its block.
+ */
+Blockly.Icon.prototype.updateColour = function() {
+  if (this.isVisible()) {
+    var hexColour = Blockly.makeColour(this.block_.getColour());
+    this.bubble_.setColour(hexColour);
+  }
+};
+
+/**
+ * Render the icon.
+ * @param {number} cursorX Horizontal offset at which to position the icon.
+ * @return {number} Horizontal offset for next item to draw.
+ */
+Blockly.Icon.prototype.renderIcon = function(cursorX) {
+  if (this.collapseHidden && this.block_.isCollapsed()) {
+    this.iconGroup_.setAttribute('display', 'none');
+    return cursorX;
+  }
+  this.iconGroup_.setAttribute('display', 'block');
+
+  var TOP_MARGIN = 5;
+  var width = this.SIZE;
+  if (this.block_.RTL) {
+    cursorX -= width;
+  }
+  this.iconGroup_.setAttribute('transform',
+      'translate(' + cursorX + ',' + TOP_MARGIN + ')');
+  this.computeIconLocation();
+  if (this.block_.RTL) {
+    cursorX -= Blockly.BlockSvg.SEP_SPACE_X;
+  } else {
+    cursorX += width + Blockly.BlockSvg.SEP_SPACE_X;
+  }
+  return cursorX;
+};
+
+/**
+ * Notification that the icon has moved.  Update the arrow accordingly.
+ * @param {number} x Absolute horizontal location.
+ * @param {number} y Absolute vertical location.
+ */
+Blockly.Icon.prototype.setIconLocation = function(x, y) {
+  this.iconX_ = x;
+  this.iconY_ = y;
+  if (this.isVisible()) {
+    this.bubble_.setAnchorLocation(x, y);
+  }
+};
+
+/**
+ * Notification that the icon has moved, but we don't really know where.
+ * Recompute the icon's location from scratch.
+ */
+Blockly.Icon.prototype.computeIconLocation = function() {
+  // Find coordinates for the centre of the icon and update the arrow.
+  var blockXY = this.block_.getRelativeToSurfaceXY();
+  var iconXY = Blockly.getRelativeXY_(this.iconGroup_);
+  var newX = blockXY.x + iconXY.x + this.SIZE / 2;
+  var newY = blockXY.y + iconXY.y + this.SIZE / 2;
+  if (newX !== this.iconX_ || newY !== this.iconY_) {
+    this.setIconLocation(newX, newY);
+  }
+};
+
+/**
+ * Returns the center of the block's icon relative to the surface.
+ * @return {!Object} Object with x and y properties.
+ */
+Blockly.Icon.prototype.getIconLocation = function() {
+  return {x: this.iconX_, y: this.iconY_};
+};

src/blockly/core/inject.js

@@ -0,0 +1,542 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2011 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Functions for injecting Blockly into a web page.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.inject');
+
+goog.require('Blockly.Css');
+goog.require('Blockly.WorkspaceSvg');
+goog.require('goog.dom');
+goog.require('goog.ui.Component');
+goog.require('goog.userAgent');
+
+
+/**
+ * Inject a Blockly editor into the specified container element (usually a div).
+ * @param {!Element|string} container Containing element or its ID.
+ * @param {Object=} opt_options Optional dictionary of options.
+ * @return {!Blockly.Workspace} Newly created main workspace.
+ */
+Blockly.inject = function(container, opt_options) {
+  if (goog.isString(container)) {
+    container = document.getElementById(container);
+  }
+  // Verify that the container is in document.
+  if (!goog.dom.contains(document, container)) {
+    throw 'Error: container is not in current document.';
+  }
+  var options = Blockly.parseOptions_(opt_options || {});
+  var workspace;
+  var startUi = function() {
+    var svg = Blockly.createDom_(container, options);
+    workspace = Blockly.createMainWorkspace_(svg, options);
+    Blockly.init_(workspace);
+    workspace.markFocused();
+    Blockly.bindEvent_(svg, 'focus', workspace, workspace.markFocused);
+  };
+  if (options.enableRealtime) {
+    var realtimeElement = document.getElementById('realtime');
+    if (realtimeElement) {
+      realtimeElement.style.display = 'block';
+    }
+    Blockly.Realtime.startRealtime(startUi, container, options.realtimeOptions);
+  } else {
+    startUi();
+  }
+  return workspace;
+};
+
+/**
+ * Parse the provided toolbox tree into a consistent DOM format.
+ * @param {Node|string} tree DOM tree of blocks, or text representation of same.
+ * @return {Node} DOM tree of blocks, or null.
+ * @private
+ */
+Blockly.parseToolboxTree_ = function(tree) {
+  if (tree) {
+    if (typeof tree != 'string' && typeof XSLTProcessor == 'undefined') {
+      // In this case the tree will not have been properly built by the
+      // browser. The HTML will be contained in the element, but it will
+      // not have the proper DOM structure since the browser doesn't support
+      // XSLTProcessor (XML -> HTML). This is the case in IE 9+.
+      tree = tree.outerHTML;
+    }
+    if (typeof tree == 'string') {
+      tree = Blockly.Xml.textToDom(tree);
+    }
+  } else {
+    tree = null;
+  }
+  return tree;
+};
+
+/**
+ * Configure Blockly to behave according to a set of options.
+ * @param {!Object} options Dictionary of options.  Specification:
+ *   https://developers.google.com/blockly/installation/overview#configuration
+ * @return {!Object} Dictionary of normalized options.
+ * @private
+ */
+Blockly.parseOptions_ = function(options) {
+  var readOnly = !!options['readOnly'];
+  if (readOnly) {
+    var languageTree = null;
+    var hasCategories = false;
+    var hasTrashcan = false;
+    var hasCollapse = false;
+    var hasComments = false;
+    var hasDisable = false;
+    var hasSounds = false;
+  } else {
+    var languageTree = Blockly.parseToolboxTree_(options['toolbox']);
+    var hasCategories = Boolean(languageTree &&
+        languageTree.getElementsByTagName('category').length);
+    var hasTrashcan = options['trashcan'];
+    if (hasTrashcan === undefined) {
+      hasTrashcan = hasCategories;
+    }
+    var hasCollapse = options['collapse'];
+    if (hasCollapse === undefined) {
+      hasCollapse = hasCategories;
+    }
+    var hasComments = options['comments'];
+    if (hasComments === undefined) {
+      hasComments = hasCategories;
+    }
+    var hasDisable = options['disable'];
+    if (hasDisable === undefined) {
+      hasDisable = hasCategories;
+    }
+    var hasSounds = options['sounds'];
+    if (hasSounds === undefined) {
+      hasSounds = true;
+    }
+  }
+  var hasScrollbars = options['scrollbars'];
+  if (hasScrollbars === undefined) {
+    hasScrollbars = hasCategories;
+  }
+  var hasCss = options['css'];
+  if (hasCss === undefined) {
+    hasCss = true;
+  }
+  // See grid documentation at:
+  // https://developers.google.com/blockly/installation/grid
+  var grid = options['grid'] || {};
+  var gridOptions = {};
+  gridOptions.spacing = parseFloat(grid['spacing']) || 0;
+  gridOptions.colour = grid['colour'] || '#888';
+  gridOptions.length = parseFloat(grid['length']) || 1;
+  gridOptions.snap = gridOptions.spacing > 0 && !!grid['snap'];
+  var pathToMedia = 'https://blockly-demo.appspot.com/static/media/';
+  if (options['media']) {
+    pathToMedia = options['media'];
+  } else if (options['path']) {
+    // 'path' is a deprecated option which has been replaced by 'media'.
+    pathToMedia = options['path'] + 'media/';
+  }
+
+/* TODO (fraser): Add documentation page:
+ * https://developers.google.com/blockly/installation/zoom
+ *
+ * controls
+ *
+ * Set to `true` to show zoom-in and zoom-out buttons.  Defaults to `false`.
+ *
+ * wheel
+ *
+ * Set to `true` to allow the mouse wheel to zoom.  Defaults to `false`.
+ *
+ * startScale
+ *
+ * Initial magnification factor.  Defaults to `1.0`.
+ *
+ * maxScale
+ *
+ * Maximum multiplication factor for how far one can zoom in.  Defaults to `3`.
+ *
+ * minScale
+ *
+ * Minimum multiplication factor for how far one can zoom out.  Defaults to `0.3`.
+ *
+ * scaleSpeed
+ *
+ * For each zooming in-out step the scale is multiplied
+ * or divided respectively by the scale speed, this means that:
+ * `scale = scaleSpeed ^ steps`, note that in this formula
+ * steps of zoom-out are subtracted and zoom-in steps are added.
+ */
+  // See zoom documentation at:
+  // https://developers.google.com/blockly/installation/zoom
+  var zoom = options['zoom'] || {};
+  var zoomOptions = {};
+  if (zoom['controls'] === undefined) {
+    zoomOptions.controls = false;
+  } else {
+    zoomOptions.controls = !!zoom['controls'];
+  }
+  if (zoom['wheel'] === undefined) {
+    zoomOptions.wheel = false;
+  } else {
+    zoomOptions.wheel = !!zoom['wheel'];
+  }
+  if (zoom['startScale'] === undefined) {
+    zoomOptions.startScale = 1;
+  } else {
+    zoomOptions.startScale = parseFloat(zoom['startScale']);
+  }
+  if (zoom['maxScale'] === undefined) {
+    zoomOptions.maxScale = 3;
+  } else {
+    zoomOptions.maxScale = parseFloat(zoom['maxScale']);
+  }
+  if (zoom['minScale'] === undefined) {
+    zoomOptions.minScale = 0.3;
+  } else {
+    zoomOptions.minScale = parseFloat(zoom['minScale']);
+  }
+  if (zoom['scaleSpeed'] === undefined) {
+    zoomOptions.scaleSpeed = 1.2;
+  } else {
+    zoomOptions.scaleSpeed = parseFloat(zoom['scaleSpeed']);
+  }
+
+  var enableRealtime = !!options['realtime'];
+  var realtimeOptions = enableRealtime ? options['realtimeOptions'] : undefined;
+
+  return {
+    RTL: !!options['rtl'],
+    collapse: hasCollapse,
+    comments: hasComments,
+    disable: hasDisable,
+    readOnly: readOnly,
+    maxBlocks: options['maxBlocks'] || Infinity,
+    pathToMedia: pathToMedia,
+    hasCategories: hasCategories,
+    hasScrollbars: hasScrollbars,
+    hasTrashcan: hasTrashcan,
+    hasSounds: hasSounds,
+    hasCss: hasCss,
+    languageTree: languageTree,
+    gridOptions: gridOptions,
+    zoomOptions: zoomOptions,
+    enableRealtime: enableRealtime,
+    realtimeOptions: realtimeOptions
+  };
+};
+
+/**
+ * Create the SVG image.
+ * @param {!Element} container Containing element.
+ * @param {Object} options Dictionary of options.
+ * @return {!Element} Newly created SVG image.
+ * @private
+ */
+Blockly.createDom_ = function(container, options) {
+  // Sadly browsers (Chrome vs Firefox) are currently inconsistent in laying
+  // out content in RTL mode.  Therefore Blockly forces the use of LTR,
+  // then manually positions content in RTL as needed.
+  container.setAttribute('dir', 'LTR');
+  // Closure can be trusted to create HTML widgets with the proper direction.
+  goog.ui.Component.setDefaultRightToLeft(options.RTL);
+
+  // Load CSS.
+  Blockly.Css.inject(options.hasCss, options.pathToMedia);
+
+  // Build the SVG DOM.
+  /*
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:html="http://www.w3.org/1999/xhtml"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    version="1.1"
+    class="blocklySvg">
+    ...
+  </svg>
+  */
+  var svg = Blockly.createSvgElement('svg', {
+    'xmlns': 'http://www.w3.org/2000/svg',
+    'xmlns:html': 'http://www.w3.org/1999/xhtml',
+    'xmlns:xlink': 'http://www.w3.org/1999/xlink',
+    'version': '1.1',
+    'class': 'blocklySvg'
+  }, container);
+  /*
+  <defs>
+    ... filters go here ...
+  </defs>
+  */
+  var defs = Blockly.createSvgElement('defs', {}, svg);
+  var rnd = String(Math.random()).substring(2);
+  /*
+    <filter id="blocklyEmbossFilter837493">
+      <feGaussianBlur in="SourceAlpha" stdDeviation="1" result="blur"/>
+      <feSpecularLighting in="blur" surfaceScale="1" specularConstant="0.5"
+                          specularExponent="10" lighting-color="white"
+                          result="specOut">
+        <fePointLight x="-5000" y="-10000" z="20000"/>
+      </feSpecularLighting>
+      <feComposite in="specOut" in2="SourceAlpha" operator="in"
+                   result="specOut"/>
+      <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic"
+                   k1="0" k2="1" k3="1" k4="0"/>
+    </filter>
+  */
+  var embossFilter = Blockly.createSvgElement('filter',
+      {'id': 'blocklyEmbossFilter' + rnd}, defs);
+  Blockly.createSvgElement('feGaussianBlur',
+      {'in': 'SourceAlpha', 'stdDeviation': 1, 'result': 'blur'}, embossFilter);
+  var feSpecularLighting = Blockly.createSvgElement('feSpecularLighting',
+      {'in': 'blur', 'surfaceScale': 1, 'specularConstant': 0.5,
+       'specularExponent': 10, 'lighting-color': 'white', 'result': 'specOut'},
+      embossFilter);
+  Blockly.createSvgElement('fePointLight',
+      {'x': -5000, 'y': -10000, 'z': 20000}, feSpecularLighting);
+  Blockly.createSvgElement('feComposite',
+      {'in': 'specOut', 'in2': 'SourceAlpha', 'operator': 'in',
+       'result': 'specOut'}, embossFilter);
+  Blockly.createSvgElement('feComposite',
+      {'in': 'SourceGraphic', 'in2': 'specOut', 'operator': 'arithmetic',
+       'k1': 0, 'k2': 1, 'k3': 1, 'k4': 0}, embossFilter);
+  options.embossFilterId = embossFilter.id;
+  /*
+    <pattern id="blocklyDisabledPattern837493" patternUnits="userSpaceOnUse"
+             width="10" height="10">
+      <rect width="10" height="10" fill="#aaa" />
+      <path d="M 0 0 L 10 10 M 10 0 L 0 10" stroke="#cc0" />
+    </pattern>
+  */
+  var disabledPattern = Blockly.createSvgElement('pattern',
+      {'id': 'blocklyDisabledPattern' + rnd,
+       'patternUnits': 'userSpaceOnUse',
+       'width': 10, 'height': 10}, defs);
+  Blockly.createSvgElement('rect',
+      {'width': 10, 'height': 10, 'fill': '#aaa'}, disabledPattern);
+  Blockly.createSvgElement('path',
+      {'d': 'M 0 0 L 10 10 M 10 0 L 0 10', 'stroke': '#cc0'}, disabledPattern);
+  options.disabledPatternId = disabledPattern.id;
+  /*
+    <pattern id="blocklyGridPattern837493" patternUnits="userSpaceOnUse">
+      <rect stroke="#888" />
+      <rect stroke="#888" />
+    </pattern>
+  */
+  var gridPattern = Blockly.createSvgElement('pattern',
+      {'id': 'blocklyGridPattern' + rnd,
+       'patternUnits': 'userSpaceOnUse'}, defs);
+  if (options.gridOptions['length'] > 0 && options.gridOptions['spacing'] > 0) {
+    Blockly.createSvgElement('line',
+        {'stroke': options.gridOptions['colour']},
+        gridPattern);
+    if (options.gridOptions['length'] > 1) {
+      Blockly.createSvgElement('line',
+          {'stroke': options.gridOptions['colour']},
+          gridPattern);
+    }
+    // x1, y1, x1, x2 properties will be set later in updateGridPattern_.
+  }
+  options.gridPattern = gridPattern;
+  options.svg = svg;
+  return svg;
+};
+
+/**
+ * Create a main workspace and add it to the SVG.
+ * @param {!Element} svg SVG element with pattern defined.
+ * @param {Object} options Dictionary of options.
+ * @return {!Blockly.Workspace} Newly created main workspace.
+ * @private
+ */
+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'));
+  // A null translation will also apply the correct initial scale.
+  mainWorkspace.translate(0, 0);
+  mainWorkspace.markFocused();
+
+  if (!options.readOnly && !options.hasScrollbars) {
+    var workspaceChanged = function() {
+      if (Blockly.dragMode_ == 0) {
+        var metrics = mainWorkspace.getMetrics();
+        var edgeLeft = metrics.viewLeft + metrics.absoluteLeft;
+        var edgeTop = metrics.viewTop + metrics.absoluteTop;
+        if (metrics.contentTop < edgeTop ||
+            metrics.contentTop + metrics.contentHeight >
+            metrics.viewHeight + edgeTop ||
+            metrics.contentLeft <
+                (options.RTL ? metrics.viewLeft : edgeLeft) ||
+            metrics.contentLeft + metrics.contentWidth > (options.RTL ?
+                metrics.viewWidth : metrics.viewWidth + edgeLeft)) {
+          // One or more blocks may be out of bounds.  Bump them back in.
+          var MARGIN = 25;
+          var blocks = mainWorkspace.getTopBlocks(false);
+          for (var b = 0, block; block = blocks[b]; b++) {
+            var blockXY = block.getRelativeToSurfaceXY();
+            var blockHW = block.getHeightWidth();
+            // Bump any block that's above the top back inside.
+            var overflow = edgeTop + MARGIN - blockHW.height - blockXY.y;
+            if (overflow > 0) {
+              block.moveBy(0, overflow);
+            }
+            // Bump any block that's below the bottom back inside.
+            var overflow = edgeTop + metrics.viewHeight - MARGIN - blockXY.y;
+            if (overflow < 0) {
+              block.moveBy(0, overflow);
+            }
+            // Bump any block that's off the left back inside.
+            var overflow = MARGIN + edgeLeft -
+                blockXY.x - (options.RTL ? 0 : blockHW.width);
+            if (overflow > 0) {
+              block.moveBy(overflow, 0);
+            }
+            // Bump any block that's off the right back inside.
+            var overflow = edgeLeft + metrics.viewWidth - MARGIN -
+                blockXY.x + (options.RTL ? blockHW.width : 0);
+            if (overflow < 0) {
+              block.moveBy(overflow, 0);
+            }
+          }
+        }
+      }
+    };
+    mainWorkspace.addChangeListener(workspaceChanged);
+  }
+  // The SVG is now fully assembled.
+  Blockly.svgResize(mainWorkspace);
+  Blockly.WidgetDiv.createDom();
+  Blockly.Tooltip.createDom();
+  return mainWorkspace;
+};
+
+/**
+ * Initialize Blockly with various handlers.
+ * @param {!Blockly.Workspace} mainWorkspace Newly created main workspace.
+ * @private
+ */
+Blockly.init_ = function(mainWorkspace) {
+  var options = mainWorkspace.options;
+  var svg = mainWorkspace.options.svg;
+  // Supress the browser's context menu.
+  Blockly.bindEvent_(svg, 'contextmenu', null,
+      function(e) {
+        if (!Blockly.isTargetInput_(e)) {
+          e.preventDefault();
+        }
+      });
+  // Bind events for scrolling the workspace.
+  // Most of these events should be bound to the SVG's surface.
+  // However, 'mouseup' has to be on the whole document so that a block dragged
+  // out of bounds and released will know that it has been released.
+  // Also, 'keydown' has to be on the whole document since the browser doesn't
+  // understand a concept of focus on the SVG image.
+
+  Blockly.bindEvent_(window, 'resize', null,
+                     function() {Blockly.svgResize(mainWorkspace);});
+
+  if (!Blockly.documentEventsBound_) {
+    // Only bind the window/document events once.
+    // Destroying and reinjecting Blockly should not bind again.
+    Blockly.bindEvent_(document, 'keydown', null, Blockly.onKeyDown_);
+    Blockly.bindEvent_(document, 'touchend', null, Blockly.longStop_);
+    Blockly.bindEvent_(document, 'touchcancel', null, Blockly.longStop_);
+    // Don't use bindEvent_ for document's mouseup since that would create a
+    // corresponding touch handler that would squeltch the ability to interact
+    // with non-Blockly elements.
+    document.addEventListener('mouseup', Blockly.onMouseUp_, false);
+    // Some iPad versions don't fire resize after portrait to landscape change.
+    if (goog.userAgent.IPAD) {
+      Blockly.bindEvent_(window, 'orientationchange', document, function() {
+        Blockly.fireUiEvent(window, 'resize');
+      });
+    }
+    Blockly.documentEventsBound_ = true;
+  }
+
+  if (options.languageTree) {
+    if (mainWorkspace.toolbox_) {
+      mainWorkspace.toolbox_.init(mainWorkspace);
+    } else if (mainWorkspace.flyout_) {
+      // Build a fixed flyout with the root blocks.
+      mainWorkspace.flyout_.init(mainWorkspace);
+      mainWorkspace.flyout_.show(options.languageTree.childNodes);
+      // Translate the workspace sideways to avoid the fixed flyout.
+      mainWorkspace.scrollX = mainWorkspace.flyout_.width_;
+      if (options.RTL) {
+        mainWorkspace.scrollX *= -1;
+      }
+      var translation = 'translate(' + mainWorkspace.scrollX + ',0)';
+      mainWorkspace.getCanvas().setAttribute('transform', translation);
+      mainWorkspace.getBubbleCanvas().setAttribute('transform', translation);
+    }
+  }
+  if (options.hasScrollbars) {
+    mainWorkspace.scrollbar = new Blockly.ScrollbarPair(mainWorkspace);
+    mainWorkspace.scrollbar.resize();
+  }
+
+  // Load the sounds.
+  if (options.hasSounds) {
+    mainWorkspace.loadAudio_(
+        [options.pathToMedia + 'click.mp3',
+         options.pathToMedia + 'click.wav',
+         options.pathToMedia + 'click.ogg'], 'click');
+    mainWorkspace.loadAudio_(
+        [options.pathToMedia + 'disconnect.wav',
+         options.pathToMedia + 'disconnect.mp3',
+         options.pathToMedia + 'disconnect.ogg'], 'disconnect');
+    mainWorkspace.loadAudio_(
+        [options.pathToMedia + 'delete.mp3',
+         options.pathToMedia + 'delete.ogg',
+         options.pathToMedia + 'delete.wav'], 'delete');
+
+    // Bind temporary hooks that preload the sounds.
+    var soundBinds = [];
+    var unbindSounds = function() {
+      while (soundBinds.length) {
+        Blockly.unbindEvent_(soundBinds.pop());
+      }
+      mainWorkspace.preloadAudio_();
+    };
+    // Android ignores any sound not loaded as a result of a user action.
+    soundBinds.push(
+        Blockly.bindEvent_(document, 'mousemove', null, unbindSounds));
+    soundBinds.push(
+        Blockly.bindEvent_(document, 'touchstart', null, unbindSounds));
+  }
+};
+
+/**
+ * Modify the block tree on the existing toolbox.
+ * @param {Node|string} tree DOM tree of blocks, or text representation of same.
+ */
+Blockly.updateToolbox = function(tree) {
+  console.warn('Deprecated call to Blockly.updateToolbox, ' +
+               'use workspace.updateToolbox instead.');
+  Blockly.getMainWorkspace().updateToolbox(tree);
+};

src/blockly/core/input.js

@@ -0,0 +1,239 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2012 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Object representing an input (value, statement, or dummy).
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.Input');
+
+// TODO(scr): Fix circular dependencies
+// goog.require('Blockly.Block');
+goog.require('Blockly.Connection');
+goog.require('Blockly.FieldLabel');
+goog.require('goog.asserts');
+
+
+/**
+ * Class for an input with an optional field.
+ * @param {number} type The type of the input.
+ * @param {string} name Language-neutral identifier which may used to find this
+ *     input again.
+ * @param {!Blockly.Block} block The block containing this input.
+ * @param {Blockly.Connection} connection Optional connection for this input.
+ * @constructor
+ */
+Blockly.Input = function(type, name, block, connection) {
+  /** @type {number} */
+  this.type = type;
+  /** @type {string} */
+  this.name = name;
+  /** @type {!Blockly.Block} */
+  this.sourceBlock_ = block;
+  /** @type {Blockly.Connection} */
+  this.connection = connection;
+  /** @type {!Array.<!Blockly.Field>} */
+  this.fieldRow = [];
+};
+
+/**
+ * Alignment of input's fields (left, right or centre).
+ * @type {number}
+ */
+Blockly.Input.prototype.align = Blockly.ALIGN_LEFT;
+
+/**
+ * Is the input visible?
+ * @type {boolean}
+ * @private
+ */
+Blockly.Input.prototype.visible_ = true;
+
+/**
+ * Add an item to the end of the input's field row.
+ * @param {string|!Blockly.Field} field Something to add as a field.
+ * @param {string=} opt_name Language-neutral identifier which may used to find
+ *     this field again.  Should be unique to the host block.
+ * @return {!Blockly.Input} The input being append to (to allow chaining).
+ */
+Blockly.Input.prototype.appendField = function(field, opt_name) {
+  // Empty string, Null or undefined generates no field, unless field is named.
+  if (!field && !opt_name) {
+    return this;
+  }
+  // Generate a FieldLabel when given a plain text field.
+  if (goog.isString(field)) {
+    field = new Blockly.FieldLabel(/** @type {string} */ (field));
+  }
+  if (this.sourceBlock_.rendered) {
+    field.init(this.sourceBlock_);
+  }
+  field.name = opt_name;
+
+  if (field.prefixField) {
+    // Add any prefix.
+    this.appendField(field.prefixField);
+  }
+  // Add the field to the field row.
+  this.fieldRow.push(field);
+  if (field.suffixField) {
+    // Add any suffix.
+    this.appendField(field.suffixField);
+  }
+
+  if (this.sourceBlock_.rendered) {
+    this.sourceBlock_.render();
+    // Adding a field will cause the block to change shape.
+    this.sourceBlock_.bumpNeighbours_();
+  }
+  return this;
+};
+
+/**
+ * Add an item to the end of the input's field row.
+ * @param {*} field Something to add as a field.
+ * @param {string=} opt_name Language-neutral identifier which may used to find
+ *     this field again.  Should be unique to the host block.
+ * @return {!Blockly.Input} The input being append to (to allow chaining).
+ * @deprecated December 2013
+ */
+Blockly.Input.prototype.appendTitle = function(field, opt_name) {
+  console.warn('Deprecated call to appendTitle, use appendField instead.');
+  return this.appendField(field, opt_name);
+};
+
+/**
+ * Remove a field from this input.
+ * @param {string} name The name of the field.
+ * @throws {goog.asserts.AssertionError} if the field is not present.
+ */
+Blockly.Input.prototype.removeField = function(name) {
+  for (var i = 0, field; field = this.fieldRow[i]; i++) {
+    if (field.name === name) {
+      field.dispose();
+      this.fieldRow.splice(i, 1);
+      if (this.sourceBlock_.rendered) {
+        this.sourceBlock_.render();
+        // Removing a field will cause the block to change shape.
+        this.sourceBlock_.bumpNeighbours_();
+      }
+      return;
+    }
+  }
+  goog.asserts.fail('Field "%s" not found.', name);
+};
+
+/**
+ * Gets whether this input is visible or not.
+ * @return {boolean} True if visible.
+ */
+Blockly.Input.prototype.isVisible = function() {
+  return this.visible_;
+};
+
+/**
+ * Sets whether this input is visible or not.
+ * Used to collapse/uncollapse a block.
+ * @param {boolean} visible True if visible.
+ * @return {!Array.<!Blockly.Block>} List of blocks to render.
+ */
+Blockly.Input.prototype.setVisible = function(visible) {
+  var renderList = [];
+  if (this.visible_ == visible) {
+    return renderList;
+  }
+  this.visible_ = visible;
+
+  var display = visible ? 'block' : 'none';
+  for (var y = 0, field; field = this.fieldRow[y]; y++) {
+    field.setVisible(visible);
+  }
+  if (this.connection) {
+    // Has a connection.
+    if (visible) {
+      renderList = this.connection.unhideAll();
+    } else {
+      this.connection.hideAll();
+    }
+    var child = this.connection.targetBlock();
+    if (child) {
+      child.getSvgRoot().style.display = display;
+      if (!visible) {
+        child.rendered = false;
+      }
+    }
+  }
+  return renderList;
+};
+
+/**
+ * Change a connection's compatibility.
+ * @param {string|Array.<string>|null} check Compatible value type or
+ *     list of value types.  Null if all types are compatible.
+ * @return {!Blockly.Input} The input being modified (to allow chaining).
+ */
+Blockly.Input.prototype.setCheck = function(check) {
+  if (!this.connection) {
+    throw 'This input does not have a connection.';
+  }
+  this.connection.setCheck(check);
+  return this;
+};
+
+/**
+ * Change the alignment of the connection's field(s).
+ * @param {number} align One of Blockly.ALIGN_LEFT, ALIGN_CENTRE, ALIGN_RIGHT.
+ *   In RTL mode directions are reversed, and ALIGN_RIGHT aligns to the left.
+ * @return {!Blockly.Input} The input being modified (to allow chaining).
+ */
+Blockly.Input.prototype.setAlign = function(align) {
+  this.align = align;
+  if (this.sourceBlock_.rendered) {
+    this.sourceBlock_.render();
+  }
+  return this;
+};
+
+/**
+ * Initialize the fields on this input.
+ */
+Blockly.Input.prototype.init = function() {
+  if (!this.sourceBlock_.workspace.rendered) {
+    return;  // Headless blocks don't need fields initialized.
+  }
+  for (var x = 0; x < this.fieldRow.length; x++) {
+    this.fieldRow[x].init(this.sourceBlock_);
+  }
+};
+
+/**
+ * Sever all links to this input.
+ */
+Blockly.Input.prototype.dispose = function() {
+  for (var i = 0, field; field = this.fieldRow[i]; i++) {
+    field.dispose();
+  }
+  if (this.connection) {
+    this.connection.dispose();
+  }
+  this.sourceBlock_ = null;
+};

src/blockly/core/msg.js

@@ -0,0 +1,62 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2013 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Core JavaScript library for Blockly.
+ * @author scr@google.com (Sheridan Rawlins)
+ */
+'use strict';
+
+/**
+ * Name space for the Msg singleton.
+ * Msg gets populated in the message files.
+ */
+goog.provide('Blockly.Msg');
+
+
+/**
+ * Back up original getMsg function.
+ * @type {!Function}
+ */
+goog.getMsgOrig = goog.getMsg;
+
+/**
+ * Gets a localized message.
+ * Overrides the default Closure function to check for a Blockly.Msg first.
+ * Used infrequently, only known case is TODAY button in date picker.
+ * @param {string} str Translatable string, places holders in the form {$foo}.
+ * @param {Object<string, string>=} opt_values Maps place holder name to value.
+ * @return {string} message with placeholders filled.
+ * @suppress {duplicate}
+ */
+goog.getMsg = function(str, opt_values) {
+  var key = goog.getMsg.blocklyMsgMap[str];
+  if (key) {
+    str = Blockly.Msg[key];
+  }
+  return goog.getMsgOrig(str, opt_values);
+};
+
+/**
+ * Mapping of Closure messages to Blockly.Msg names.
+ */
+goog.getMsg.blocklyMsgMap = {
+  'Today': 'TODAY'
+};

src/blockly/core/names.js

@@ -0,0 +1,143 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2012 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Utility functions for handling variables and procedure names.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.Names');
+
+
+/**
+ * Class for a database of entity names (variables, functions, etc).
+ * @param {string} reservedWords A comma-separated string of words that are
+ *     illegal for use as names in a language (e.g. 'new,if,this,...').
+ * @param {string=} opt_variablePrefix Some languages need a '$' or a namespace
+ *     before all variable names.
+ * @constructor
+ */
+Blockly.Names = function(reservedWords, opt_variablePrefix) {
+  this.variablePrefix_ = opt_variablePrefix || '';
+  this.reservedDict_ = Object.create(null);
+  if (reservedWords) {
+    var splitWords = reservedWords.split(',');
+    for (var i = 0; i < splitWords.length; i++) {
+      this.reservedDict_[splitWords[i]] = true;
+    }
+  }
+  this.reset();
+};
+
+/**
+ * When JavaScript (or most other languages) is generated, variable 'foo' and
+ * procedure 'foo' would collide.  However, Blockly has no such problems since
+ * variable get 'foo' and procedure call 'foo' are unambiguous.
+ * Therefore, Blockly keeps a separate type name to disambiguate.
+ * getName('foo', 'variable') -> 'foo'
+ * getName('foo', 'procedure') -> 'foo2'
+ */
+
+/**
+ * Empty the database and start from scratch.  The reserved words are kept.
+ */
+Blockly.Names.prototype.reset = function() {
+  this.db_ = Object.create(null);
+  this.dbReverse_ = Object.create(null);
+};
+
+/**
+ * Convert a Blockly entity name to a legal exportable entity name.
+ * @param {string} name The Blockly entity name (no constraints).
+ * @param {string} type The type of entity in Blockly
+ *     ('VARIABLE', 'PROCEDURE', 'BUILTIN', etc...).
+ * @return {string} An entity name legal for the exported language.
+ */
+Blockly.Names.prototype.getName = function(name, type) {
+  var normalized = name.toLowerCase() + '_' + type;
+  var prefix = (type == Blockly.Variables.NAME_TYPE) ?
+      this.variablePrefix_ : '';
+  if (normalized in this.db_) {
+    return prefix + this.db_[normalized];
+  }
+  var safeName = this.getDistinctName(name, type);
+  this.db_[normalized] = safeName.substr(prefix.length);
+  return safeName;
+};
+
+/**
+ * Convert a Blockly entity name to a legal exportable entity name.
+ * Ensure that this is a new name not overlapping any previously defined name.
+ * Also check against list of reserved words for the current language and
+ * ensure name doesn't collide.
+ * @param {string} name The Blockly entity name (no constraints).
+ * @param {string} type The type of entity in Blockly
+ *     ('VARIABLE', 'PROCEDURE', 'BUILTIN', etc...).
+ * @return {string} An entity name legal for the exported language.
+ */
+Blockly.Names.prototype.getDistinctName = function(name, type) {
+  var safeName = this.safeName_(name);
+  var i = '';
+  while (this.dbReverse_[safeName + i] ||
+         (safeName + i) in this.reservedDict_) {
+    // Collision with existing name.  Create a unique name.
+    i = i ? i + 1 : 2;
+  }
+  safeName += i;
+  this.dbReverse_[safeName] = true;
+  var prefix = (type == Blockly.Variables.NAME_TYPE) ?
+      this.variablePrefix_ : '';
+  return prefix + safeName;
+};
+
+/**
+ * Given a proposed entity name, generate a name that conforms to the
+ * [_A-Za-z][_A-Za-z0-9]* format that most languages consider legal for
+ * variables.
+ * @param {string} name Potentially illegal entity name.
+ * @return {string} Safe entity name.
+ * @private
+ */
+Blockly.Names.prototype.safeName_ = function(name) {
+  if (!name) {
+    name = 'unnamed';
+  } else {
+    // Unfortunately names in non-latin characters will look like
+    // _E9_9F_B3_E4_B9_90 which is pretty meaningless.
+    name = encodeURI(name.replace(/ /g, '_')).replace(/[^\w]/g, '_');
+    // Most languages don't allow names with leading numbers.
+    if ('0123456789'.indexOf(name[0]) != -1) {
+      name = 'my_' + name;
+    }
+  }
+  return name;
+};
+
+/**
+ * Do the given two entity names refer to the same entity?
+ * Blockly names are case-insensitive.
+ * @param {string} name1 First name.
+ * @param {string} name2 Second name.
+ * @return {boolean} True if names are the same.
+ */
+Blockly.Names.equals = function(name1, name2) {
+  return name1.toLowerCase() == name2.toLowerCase();
+};

src/blockly/core/procedures.js

@@ -0,0 +1,284 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2012 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Utility functions for handling procedures.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.Procedures');
+
+// TODO(scr): Fix circular dependencies
+// goog.require('Blockly.Block');
+goog.require('Blockly.Field');
+goog.require('Blockly.Names');
+goog.require('Blockly.Workspace');
+
+
+/**
+ * Category to separate procedure names from variables and generated functions.
+ */
+Blockly.Procedures.NAME_TYPE = 'PROCEDURE';
+
+/**
+ * Find all user-created procedure definitions in a workspace.
+ * @param {!Blockly.Workspace} root Root workspace.
+ * @return {!Array.<!Array.<!Array>>} Pair of arrays, the
+ *     first contains procedures without return variables, the second with.
+ *     Each procedure is defined by a three-element list of name, parameter
+ *     list, and return value boolean.
+ */
+Blockly.Procedures.allProcedures = function(root) {
+  var blocks = root.getAllBlocks();
+  var proceduresReturn = [];
+  var proceduresNoReturn = [];
+  for (var i = 0; i < blocks.length; i++) {
+    if (blocks[i].getProcedureDef) {
+      var tuple = blocks[i].getProcedureDef();
+      if (tuple) {
+        if (tuple[2]) {
+          proceduresReturn.push(tuple);
+        } else {
+          proceduresNoReturn.push(tuple);
+        }
+      }
+    }
+  }
+  proceduresNoReturn.sort(Blockly.Procedures.procTupleComparator_);
+  proceduresReturn.sort(Blockly.Procedures.procTupleComparator_);
+  return [proceduresNoReturn, proceduresReturn];
+};
+
+/**
+ * Comparison function for case-insensitive sorting of the first element of
+ * a tuple.
+ * @param {!Array} ta First tuple.
+ * @param {!Array} tb Second tuple.
+ * @return {number} -1, 0, or 1 to signify greater than, equality, or less than.
+ * @private
+ */
+Blockly.Procedures.procTupleComparator_ = function(ta, tb) {
+  return ta[0].toLowerCase().localeCompare(tb[0].toLowerCase());
+};
+
+/**
+ * Ensure two identically-named procedures don't exist.
+ * @param {string} name Proposed procedure name.
+ * @param {!Blockly.Block} block Block to disambiguate.
+ * @return {string} Non-colliding name.
+ */
+Blockly.Procedures.findLegalName = function(name, block) {
+  if (block.isInFlyout) {
+    // Flyouts can have multiple procedures called 'do something'.
+    return name;
+  }
+  while (!Blockly.Procedures.isLegalName(name, block.workspace, block)) {
+    // Collision with another procedure.
+    var r = name.match(/^(.*?)(\d+)$/);
+    if (!r) {
+      name += '2';
+    } else {
+      name = r[1] + (parseInt(r[2], 10) + 1);
+    }
+  }
+  return name;
+};
+
+/**
+ * Does this procedure have a legal name?  Illegal names include names of
+ * procedures already defined.
+ * @param {string} name The questionable name.
+ * @param {!Blockly.Workspace} workspace The workspace to scan for collisions.
+ * @param {Blockly.Block=} opt_exclude Optional block to exclude from
+ *     comparisons (one doesn't want to collide with oneself).
+ * @return {boolean} True if the name is legal.
+ */
+Blockly.Procedures.isLegalName = function(name, workspace, opt_exclude) {
+  var blocks = workspace.getAllBlocks();
+  // Iterate through every block and check the name.
+  for (var i = 0; i < blocks.length; i++) {
+    if (blocks[i] == opt_exclude) {
+      continue;
+    }
+    if (blocks[i].getProcedureDef) {
+      var procName = blocks[i].getProcedureDef();
+      if (Blockly.Names.equals(procName[0], name)) {
+        return false;
+      }
+    }
+  }
+  return true;
+};
+
+/**
+ * Rename a procedure.  Called by the editable field.
+ * @param {string} text The proposed new name.
+ * @return {string} The accepted name.
+ * @this {!Blockly.Field}
+ */
+Blockly.Procedures.rename = function(text) {
+  // Strip leading and trailing whitespace.  Beyond this, all names are legal.
+  text = text.replace(/^[\s\xa0]+|[\s\xa0]+$/g, '');
+
+  // Ensure two identically-named procedures don't exist.
+  text = Blockly.Procedures.findLegalName(text, this.sourceBlock_);
+  // Rename any callers.
+  var blocks = this.sourceBlock_.workspace.getAllBlocks();
+  for (var i = 0; i < blocks.length; i++) {
+    if (blocks[i].renameProcedure) {
+      blocks[i].renameProcedure(this.text_, text);
+    }
+  }
+  return text;
+};
+
+/**
+ * Construct the blocks required by the flyout for the procedure category.
+ * @param {!Blockly.Workspace} workspace The workspace contianing procedures.
+ * @return {!Array.<!Element>} Array of XML block elements.
+ */
+Blockly.Procedures.flyoutCategory = function(workspace) {
+  var xmlList = [];
+  if (Blockly.Blocks['procedures_defnoreturn']) {
+    // <block type="procedures_defnoreturn" gap="16"></block>
+    var block = goog.dom.createDom('block');
+    block.setAttribute('type', 'procedures_defnoreturn');
+    block.setAttribute('gap', 16);
+    xmlList.push(block);
+  }
+  if (Blockly.Blocks['procedures_defreturn']) {
+    // <block type="procedures_defreturn" gap="16"></block>
+    var block = goog.dom.createDom('block');
+    block.setAttribute('type', 'procedures_defreturn');
+    block.setAttribute('gap', 16);
+    xmlList.push(block);
+  }
+  if (Blockly.Blocks['procedures_ifreturn']) {
+    // <block type="procedures_ifreturn" gap="16"></block>
+    var block = goog.dom.createDom('block');
+    block.setAttribute('type', 'procedures_ifreturn');
+    block.setAttribute('gap', 16);
+    xmlList.push(block);
+  }
+  if (xmlList.length) {
+    // Add slightly larger gap between system blocks and user calls.
+    xmlList[xmlList.length - 1].setAttribute('gap', 24);
+  }
+
+  function populateProcedures(procedureList, templateName) {
+    for (var i = 0; i < procedureList.length; i++) {
+      var name = procedureList[i][0];
+      var args = procedureList[i][1];
+      // <block type="procedures_callnoreturn" gap="16">
+      //   <mutation name="do something">
+      //     <arg name="x"></arg>
+      //   </mutation>
+      // </block>
+      var block = goog.dom.createDom('block');
+      block.setAttribute('type', templateName);
+      block.setAttribute('gap', 16);
+      var mutation = goog.dom.createDom('mutation');
+      mutation.setAttribute('name', name);
+      block.appendChild(mutation);
+      for (var t = 0; t < args.length; t++) {
+        var arg = goog.dom.createDom('arg');
+        arg.setAttribute('name', args[t]);
+        mutation.appendChild(arg);
+      }
+      xmlList.push(block);
+    }
+  }
+
+  var tuple = Blockly.Procedures.allProcedures(workspace);
+  populateProcedures(tuple[0], 'procedures_callnoreturn');
+  populateProcedures(tuple[1], 'procedures_callreturn');
+  return xmlList;
+};
+
+/**
+ * Find all the callers of a named procedure.
+ * @param {string} name Name of procedure.
+ * @param {!Blockly.Workspace} workspace The workspace to find callers in.
+ * @return {!Array.<!Blockly.Block>} Array of caller blocks.
+ */
+Blockly.Procedures.getCallers = function(name, workspace) {
+  var callers = [];
+  var blocks = workspace.getAllBlocks();
+  // Iterate through every block and check the name.
+  for (var i = 0; i < blocks.length; i++) {
+    if (blocks[i].getProcedureCall) {
+      var procName = blocks[i].getProcedureCall();
+      // Procedure name may be null if the block is only half-built.
+      if (procName && Blockly.Names.equals(procName, name)) {
+        callers.push(blocks[i]);
+      }
+    }
+  }
+  return callers;
+};
+
+/**
+ * When a procedure definition is disposed of, find and dispose of all its
+ *     callers.
+ * @param {string} name Name of deleted procedure definition.
+ * @param {!Blockly.Workspace} workspace The workspace to delete callers from.
+ */
+Blockly.Procedures.disposeCallers = function(name, workspace) {
+  var callers = Blockly.Procedures.getCallers(name, workspace);
+  for (var i = 0; i < callers.length; i++) {
+    callers[i].dispose(true, false);
+  }
+};
+
+/**
+ * When a procedure definition changes its parameters, find and edit all its
+ * callers.
+ * @param {string} name Name of edited procedure definition.
+ * @param {!Blockly.Workspace} workspace The workspace to delete callers from.
+ * @param {!Array.<string>} paramNames Array of new parameter names.
+ * @param {!Array.<string>} paramIds Array of unique parameter IDs.
+ */
+Blockly.Procedures.mutateCallers = function(name, workspace,
+                                            paramNames, paramIds) {
+  var callers = Blockly.Procedures.getCallers(name, workspace);
+  for (var i = 0; i < callers.length; i++) {
+    callers[i].setProcedureParameters(paramNames, paramIds);
+  }
+};
+
+/**
+ * Find the definition block for the named procedure.
+ * @param {string} name Name of procedure.
+ * @param {!Blockly.Workspace} workspace The workspace to search.
+ * @return {Blockly.Block} The procedure definition block, or null not found.
+ */
+Blockly.Procedures.getDefinition = function(name, workspace) {
+  var blocks = workspace.getAllBlocks();
+  for (var i = 0; i < blocks.length; i++) {
+    if (blocks[i].getProcedureDef) {
+      var tuple = blocks[i].getProcedureDef();
+      if (tuple && Blockly.Names.equals(tuple[0], name)) {
+        return blocks[i];
+      }
+    }
+  }
+  return null;
+};

src/blockly/core/realtime-client-utils.js

@@ -0,0 +1,500 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2013 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Common utility functionality for Google Drive Realtime API,
+ * including authorization and file loading. This functionality should serve
+ * mostly as a well-documented example, though is usable in its own right.
+ *
+ * You can find this code as part of the Google Drive Realtime API Quickstart at
+ * https://developers.google.com/drive/realtime/realtime-quickstart and also as
+ * part of the Google Drive Realtime Playground code at
+ * https://github.com/googledrive/realtime-playground/blob/master/js/realtime-client-utils.js
+ */
+'use strict';
+
+/**
+ * Realtime client utilities namespace.
+ */
+goog.provide('rtclient');
+
+
+/**
+ * OAuth 2.0 scope for installing Drive Apps.
+ * @const
+ */
+rtclient.INSTALL_SCOPE = 'https://www.googleapis.com/auth/drive.install';
+
+/**
+ * OAuth 2.0 scope for opening and creating files.
+ * @const
+ */
+rtclient.FILE_SCOPE = 'https://www.googleapis.com/auth/drive.file';
+
+/**
+ * OAuth 2.0 scope for accessing the appdata folder, a hidden folder private
+ * to this app.
+ * @const
+ */
+rtclient.APPDATA_SCOPE = 'https://www.googleapis.com/auth/drive.appdata';
+
+/**
+ * OAuth 2.0 scope for accessing the user's ID.
+ * @const
+ */
+rtclient.OPENID_SCOPE = 'openid';
+
+/**
+ * MIME type for newly created Realtime files.
+ * @const
+ */
+rtclient.REALTIME_MIMETYPE = 'application/vnd.google-apps.drive-sdk';
+
+/**
+ * Key used to store the folder id of the Drive folder in which we will store
+ * Realtime files.
+ * @type {string}
+ */
+rtclient.FOLDER_KEY = 'folderId';
+
+/**
+ * Parses the hash parameters to this page and returns them as an object.
+ * @return {!Object} Parameter object.
+ */
+rtclient.getParams = function() {
+  // Be careful with regards to node.js which has no window or location.
+  var location = goog.global['location'] || {};
+  var params = {};
+  function parseParams(fragment) {
+    // Split up the query string and store in an object.
+    var paramStrs = fragment.slice(1).split('&');
+    for (var i = 0; i < paramStrs.length; i++) {
+      var paramStr = paramStrs[i].split('=');
+      params[decodeURIComponent(paramStr[0])] = decodeURIComponent(paramStr[1]);
+    }
+  }
+  var hashFragment = location.hash;
+  if (hashFragment) {
+    parseParams(hashFragment);
+  }
+  // Opening from Drive will encode the state in a query search parameter.
+  var searchFragment = location.search;
+  if (searchFragment) {
+    parseParams(searchFragment);
+  }
+  return params;
+};
+
+/**
+ * Instance of the query parameters.
+ */
+rtclient.params = rtclient.getParams();
+
+/**
+ * Fetches an option from options or a default value, logging an error if
+ *     neither is available.
+ * @param {!Object} options Containing options.
+ * @param {string} key Option key.
+ * @param {*=} opt_defaultValue Default option value (optional).
+ * @return {*} Option value.
+ */
+rtclient.getOption = function(options, key, opt_defaultValue) {
+  if (options.hasOwnProperty(key)) {
+    return options[key];
+  }
+  if (opt_defaultValue === undefined) {
+    console.error(key + ' should be present in the options.');
+  }
+  return opt_defaultValue;
+};
+
+/**
+ * Creates a new Authorizer from the options.
+ * @constructor
+ * @param {!Object} options For authorizer. Two keys are required as mandatory,
+ *     these are:
+ *
+ *    1. "clientId", the Client ID from the console
+ *    2. "authButtonElementId", the is of the dom element to use for
+ *       authorizing.
+ */
+rtclient.Authorizer = function(options) {
+  this.clientId = rtclient.getOption(options, 'clientId');
+  // Get the user ID if it's available in the state query parameter.
+  this.userId = rtclient.params['userId'];
+  this.authButton = document.getElementById(rtclient.getOption(options,
+      'authButtonElementId'));
+  this.authDiv = document.getElementById(rtclient.getOption(options,
+      'authDivElementId'));
+};
+
+/**
+ * Start the authorization process.
+ * @param {Function} onAuthComplete To call once authorization has completed.
+ */
+rtclient.Authorizer.prototype.start = function(onAuthComplete) {
+  var _this = this;
+  gapi.load('auth:client,drive-realtime,drive-share', function() {
+    _this.authorize(onAuthComplete);
+  });
+};
+
+/**
+ * Reauthorize the client with no callback (used for authorization failure).
+ * @param {Function} onAuthComplete To call once authorization has completed.
+ */
+rtclient.Authorizer.prototype.authorize = function(onAuthComplete) {
+  var clientId = this.clientId;
+  var userId = this.userId;
+  var _this = this;
+  var handleAuthResult = function(authResult) {
+    if (authResult && !authResult.error) {
+      _this.authButton.disabled = true;
+      _this.fetchUserId(onAuthComplete);
+      _this.authDiv.style.display = 'none';
+    } else {
+      _this.authButton.disabled = false;
+      _this.authButton.onclick = authorizeWithPopup;
+      _this.authDiv.style.display = 'block';
+    }
+  };
+  var authorizeWithPopup = function() {
+    gapi.auth.authorize({
+      'client_id': clientId,
+      'scope': [
+        rtclient.INSTALL_SCOPE,
+        rtclient.FILE_SCOPE,
+        rtclient.OPENID_SCOPE,
+        rtclient.APPDATA_SCOPE
+      ],
+      'user_id': userId,
+      'immediate': false
+    }, handleAuthResult);
+  };
+  // Try with no popups first.
+  gapi.auth.authorize({
+    'client_id': clientId,
+    'scope': [
+      rtclient.INSTALL_SCOPE,
+      rtclient.FILE_SCOPE,
+      rtclient.OPENID_SCOPE,
+      rtclient.APPDATA_SCOPE
+    ],
+    'user_id': userId,
+    'immediate': true
+  }, handleAuthResult);
+};
+
+/**
+ * Fetch the user ID using the UserInfo API and save it locally.
+ * @param {Function} callback The callback to call after user ID has been
+ *     fetched.
+ */
+rtclient.Authorizer.prototype.fetchUserId = function(callback) {
+  var _this = this;
+  gapi.client.load('oauth2', 'v2', function() {
+    gapi.client.oauth2.userinfo.get().execute(function(resp) {
+      if (resp.id) {
+        _this.userId = resp.id;
+      }
+      if (callback) {
+        callback();
+      }
+    });
+  });
+};
+
+/**
+ * Creates a new Realtime file.
+ * @param {string} title Title of the newly created file.
+ * @param {string} mimeType The MIME type of the new file.
+ * @param {string} folderTitle Title of the folder to place the file in.
+ * @param {Function} callback The callback to call after creation.
+ */
+rtclient.createRealtimeFile = function(title, mimeType, folderTitle, callback) {
+
+  function insertFile(folderId) {
+    gapi.client.drive.files.insert({
+      'resource': {
+        'mimeType': mimeType,
+        'title': title,
+        'parents': [{'id': folderId}]
+      }
+    }).execute(callback);
+  }
+
+  function getOrCreateFolder() {
+
+    function storeInAppdataProperty(folderId) {
+      // Store folder id in a custom property of the appdata folder.  The
+      // 'appdata' folder is a special Google Drive folder that is only
+      // accessible by a specific app (i.e. identified by the client id).
+      gapi.client.drive.properties.insert({
+        'fileId': 'appdata',
+        'resource': { 'key': rtclient.FOLDER_KEY, 'value': folderId }
+      }).execute(function(resp) {
+        insertFile(folderId);
+      });
+    };
+
+    function createFolder() {
+      gapi.client.drive.files.insert({
+        'resource': {
+          'mimeType': 'application/vnd.google-apps.folder',
+          'title': folderTitle
+        }
+      }).execute(function(folder) {
+        storeInAppdataProperty(folder.id);
+      });
+    }
+
+    // Get the folder id from the appdata properties.
+    gapi.client.drive.properties.get({
+      'fileId': 'appdata',
+      'propertyKey': rtclient.FOLDER_KEY
+    }).execute(function(resp) {
+       if (resp.error) {
+        // There's no folder id stored yet so we create a new folder if a
+        // folderTitle has been supplied.
+        if (folderTitle) {
+          createFolder();
+        } else {
+          // There's no folder specified, so we just store the file in the
+          // user's root folder.
+          storeInAppdataProperty('root');
+        }
+      } else {
+         var folderId = resp.result.value;
+         gapi.client.drive.files.get({
+           'fileId': folderId
+         }).execute(function(resp) {
+           if (resp.error || resp.labels.trashed) {
+             // Folder doesn't exist or was deleted, so create a new one.
+             createFolder();
+           } else {
+             insertFile(folderId);
+           }
+         });
+      }
+    });
+  }
+
+  gapi.client.load('drive', 'v2', function() {
+    getOrCreateFolder();
+  });
+};
+
+/**
+ * Fetches the metadata for a Realtime file.
+ * @param {string} fileId The file to load metadata for.
+ * @param {Function} callback The callback to be called on completion,
+ *     with signature:
+ *
+ *    function onGetFileMetadata(file) {}
+ *
+ * where the file parameter is a Google Drive API file resource instance.
+ */
+rtclient.getFileMetadata = function(fileId, callback) {
+  gapi.client.load('drive', 'v2', function() {
+    gapi.client.drive.files.get({
+      'fileId': fileId
+    }).execute(callback);
+  });
+};
+
+/**
+ * Parses the state parameter passed from the Drive user interface after
+ *     Open With operations.
+ * @param {string} stateParam The state query parameter as a JSON string.
+ * @return {Object} The state query parameter as an object or null if
+ *     parsing failed.
+ */
+rtclient.parseState = function(stateParam) {
+  try {
+    var stateObj = JSON.parse(stateParam);
+    return stateObj;
+  } catch (e) {
+    return null;
+  }
+};
+
+/**
+ * Handles authorizing, parsing query parameters, loading and creating Realtime
+ *     documents.
+ * @constructor
+ * @param {!Object} options Options for loader. Four keys are required as
+ *     mandatory, these are:
+ *
+ *    1. "clientId", the Client ID from the console
+ *    2. "initializeModel", the callback to call when the file is loaded.
+ *    3. "onFileLoaded", the callback to call when the model is first created.
+ *
+ * and two keys are optional:
+ *
+ *    1. "defaultTitle", the title of newly created Realtime files.
+ *    2. "defaultFolderTitle", the folder to place in which to place newly
+ *       created Realtime files.
+ */
+rtclient.RealtimeLoader = function(options) {
+  // Initialize configuration variables.
+  this.onFileLoaded = rtclient.getOption(options, 'onFileLoaded');
+  this.newFileMimeType = rtclient.getOption(options, 'newFileMimeType',
+      rtclient.REALTIME_MIMETYPE);
+  this.initializeModel = rtclient.getOption(options, 'initializeModel');
+  this.registerTypes = rtclient.getOption(options, 'registerTypes',
+      function() {});
+  this.afterAuth = rtclient.getOption(options, 'afterAuth', function() {});
+  // This tells us if need to we automatically create a file after auth.
+  this.autoCreate = rtclient.getOption(options, 'autoCreate', false);
+  this.defaultTitle = rtclient.getOption(options, 'defaultTitle',
+      'New Realtime File');
+  this.defaultFolderTitle = rtclient.getOption(options, 'defaultFolderTitle',
+      '');
+  this.afterCreate = rtclient.getOption(options, 'afterCreate', function() {});
+  this.authorizer = new rtclient.Authorizer(options);
+};
+
+/**
+ * Redirects the browser back to the current page with an appropriate file ID.
+ * @param {Array.<string>} fileIds The IDs of the files to open.
+ * @param {string} userId The ID of the user.
+ */
+rtclient.RealtimeLoader.prototype.redirectTo = function(fileIds, userId) {
+  var params = [];
+  if (fileIds) {
+    params.push('fileIds=' + fileIds.join(','));
+  }
+  if (userId) {
+    params.push('userId=' + userId);
+  }
+  // Naive URL construction.
+  var newUrl = params.length == 0 ?
+      window.location.pathname :
+      (window.location.pathname + '#' + params.join('&'));
+  // Using HTML URL re-write if available.
+  if (window.history && window.history.replaceState) {
+    window.history.replaceState('Google Drive Realtime API Playground',
+        'Google Drive Realtime API Playground', newUrl);
+  } else {
+    window.location.href = newUrl;
+  }
+  // We are still here that means the page didn't reload.
+  rtclient.params = rtclient.getParams();
+  for (var index in fileIds) {
+    gapi.drive.realtime.load(fileIds[index], this.onFileLoaded,
+        this.initializeModel, this.handleErrors);
+  }
+};
+
+/**
+ * Starts the loader by authorizing.
+ */
+rtclient.RealtimeLoader.prototype.start = function() {
+  // Bind to local context to make them suitable for callbacks.
+  var _this = this;
+  this.authorizer.start(function() {
+    if (_this.registerTypes) {
+      _this.registerTypes();
+    }
+    if (_this.afterAuth) {
+      _this.afterAuth();
+    }
+    _this.load();
+  });
+};
+
+/**
+ * Handles errors thrown by the Realtime API.
+ * @param {!Error} e Error.
+ */
+rtclient.RealtimeLoader.prototype.handleErrors = function(e) {
+  if (e.type == gapi.drive.realtime.ErrorType.TOKEN_REFRESH_REQUIRED) {
+    this.authorizer.authorize();
+  } else if (e.type == gapi.drive.realtime.ErrorType.CLIENT_ERROR) {
+    alert('An Error happened: ' + e.message);
+    window.location.href = '/';
+  } else if (e.type == gapi.drive.realtime.ErrorType.NOT_FOUND) {
+    alert('The file was not found. It does not exist or you do not have ' +
+        'read access to the file.');
+    window.location.href = '/';
+  }
+};
+
+/**
+ * Loads or creates a Realtime file depending on the fileId and state query
+ * parameters.
+ */
+rtclient.RealtimeLoader.prototype.load = function() {
+  var fileIds = rtclient.params['fileIds'];
+  if (fileIds) {
+    fileIds = fileIds.split(',');
+  }
+  var userId = this.authorizer.userId;
+  var state = rtclient.params['state'];
+  // Creating the error callback.
+  var authorizer = this.authorizer;
+  // We have file IDs in the query parameters, so we will use them to load a
+  // file.
+  if (fileIds) {
+    for (var index in fileIds) {
+      gapi.drive.realtime.load(fileIds[index], this.onFileLoaded,
+          this.initializeModel, this.handleErrors);
+    }
+    return;
+  }
+  // We have a state parameter being redirected from the Drive UI.
+  // We will parse it and redirect to the fileId contained.
+  else if (state) {
+    var stateObj = rtclient.parseState(state);
+    // If opening a file from Drive.
+    if (stateObj.action == 'open') {
+      fileIds = stateObj.ids;
+      userId = stateObj.userId;
+      this.redirectTo(fileIds, userId);
+      return;
+    }
+  }
+  if (this.autoCreate) {
+    this.createNewFileAndRedirect();
+  }
+};
+
+/**
+ * Creates a new file and redirects to the URL to load it.
+ */
+rtclient.RealtimeLoader.prototype.createNewFileAndRedirect = function() {
+  // No fileId or state have been passed. We create a new Realtime file and
+  // redirect to it.
+  var _this = this;
+  rtclient.createRealtimeFile(this.defaultTitle, this.newFileMimeType,
+      this.defaultFolderTitle,
+      function(file) {
+        if (file.id) {
+          if (_this.afterCreate) {
+            _this.afterCreate(file.id);
+          }
+          _this.redirectTo([file.id], _this.authorizer.userId);
+        } else {
+          // File failed to be created, log why and do not attempt to redirect.
+          console.error('Error creating file.');
+          console.error(file);
+        }
+      });
+};

src/blockly/core/realtime.js

@@ -0,0 +1,869 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2014 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * This file contains functions used by any Blockly app that wants to provide
+ * realtime collaboration functionality.
+ */
+
+/**
+ * @fileoverview Common support code for Blockly apps using realtime
+ * collaboration.
+ * Note that to use this you must set up a project via the Google Developers
+ * Console. Instructions on how to do that can be found at
+ * https://developers.google.com/blockly/realtime-collaboration
+ * Once you do that you can set the clientId in
+ * Blockly.Realtime.rtclientOptions_
+ * @author markf@google.com (Mark Friedman)
+ */
+'use strict';
+
+goog.provide('Blockly.Realtime');
+
+goog.require('goog.array');
+goog.require('goog.dom');
+goog.require('goog.style');
+goog.require('rtclient');
+
+/**
+ * Is realtime collaboration enabled?
+ * @type {boolean}
+ * @private
+ */
+Blockly.Realtime.enabled_ = false;
+
+/**
+ * The Realtime document being collaborated on.
+ * @type {gapi.drive.realtime.Document}
+ * @private
+ */
+Blockly.Realtime.document_ = null;
+
+/**
+ * The Realtime model of this doc.
+ * @type {gapi.drive.realtime.Model}
+ * @private
+ */
+Blockly.Realtime.model_ = null;
+
+/**
+ * The unique id associated with this editing session.
+ * @type {string}
+ * @private
+ */
+Blockly.Realtime.sessionId_ = null;
+
+/**
+ * The function used to initialize the UI after realtime is initialized.
+ * @type {function()}
+ * @private
+ */
+Blockly.Realtime.initUi_ = null;
+
+/**
+ * A map from block id to blocks.
+ * @type {gapi.drive.realtime.CollaborativeMap}
+ * @private
+ */
+Blockly.Realtime.blocksMap_ = null;
+
+/**
+ * Are currently syncing from another instance of this realtime doc.
+ * @type {boolean}
+ */
+Blockly.Realtime.withinSync = false;
+
+/**
+ * The current instance of the realtime loader client
+ * @type {rtclient.RealtimeLoader}
+ * @private
+ */
+Blockly.Realtime.realtimeLoader_ = null;
+
+/**
+ * The id of a text area to be used as a realtime chat box.
+ * @type {string}
+ * @private
+ */
+Blockly.Realtime.chatBoxElementId_ = null;
+
+/**
+ * The initial text to be placed in the realtime chat box.
+ * @type {string}
+ * @private
+ */
+Blockly.Realtime.chatBoxInitialText_ = null;
+
+/**
+ * Indicator of whether we are in the context of an undo or redo operation.
+ * @type {boolean}
+ * @private
+ */
+Blockly.Realtime.withinUndo_ = false;
+
+/**
+ * Returns whether realtime collaboration is enabled.
+ * @return {boolean}
+ */
+Blockly.Realtime.isEnabled = function() {
+  return Blockly.Realtime.enabled_;
+};
+
+/**
+ * The id of the button to use for undo.
+ * @type {string}
+ * @private
+ */
+Blockly.Realtime.undoElementId_ = null;
+
+/**
+ * The id of the button to use for redo.
+ * @type {string}
+ * @private
+ */
+Blockly.Realtime.redoElementId_ = null;
+
+/**
+ * URL of the animated progress indicator.
+ * @type {string}
+ * @private
+ */
+Blockly.Realtime.PROGRESS_URL_ = 'progress.gif';
+
+/**
+ * URL of the anonymous user image.
+ * @type {string}
+ * @private
+ */
+Blockly.Realtime.ANONYMOUS_URL_ = 'anon.jpeg';
+
+/**
+ * This function is called the first time that the Realtime model is created
+ * for a file. This function should be used to initialize any values of the
+ * model.
+ * @param {!gapi.drive.realtime.Model} model The Realtime root model object.
+ * @private
+ */
+Blockly.Realtime.initializeModel_ = function(model) {
+  Blockly.Realtime.model_ = model;
+  var blocksMap = model.createMap();
+  model.getRoot().set('blocks', blocksMap);
+  var topBlocks = model.createList();
+  model.getRoot().set('topBlocks', topBlocks);
+  if (Blockly.Realtime.chatBoxElementId_) {
+    model.getRoot().set(Blockly.Realtime.chatBoxElementId_,
+        model.createString(Blockly.Realtime.chatBoxInitialText_));
+  }
+};
+
+/**
+ * Delete a block from the realtime blocks map.
+ * @param {!Blockly.Block} block The block to remove.
+ */
+Blockly.Realtime.removeBlock = function(block) {
+  Blockly.Realtime.blocksMap_['delete'](block.id.toString());
+};
+
+/**
+ * Add to the list of top-level blocks.
+ * @param {!Blockly.Block} block The block to add.
+ */
+Blockly.Realtime.addTopBlock = function(block) {
+  if (Blockly.Realtime.topBlocks_.indexOf(block) == -1) {
+    Blockly.Realtime.topBlocks_.push(block);
+  }
+};
+
+/**
+ * Delete a block from the list of top-level blocks.
+ * @param {!Blockly.Block} block The block to remove.
+ */
+Blockly.Realtime.removeTopBlock = function(block) {
+  Blockly.Realtime.topBlocks_.removeValue(block);
+};
+
+/**
+ * Obtain a newly created block known by the Realtime API.
+ * @param {!Blockly.Workspace} workspace The workspace to put the block in.
+ * @param {string} prototypeName The name of the prototype for the block.
+ * @return {!Blockly.Block}
+ */
+Blockly.Realtime.obtainBlock = function(workspace, prototypeName) {
+  var newBlock =
+      Blockly.Realtime.model_.create(Blockly.Block, workspace, prototypeName);
+  return newBlock;
+};
+
+/**
+ * Get an existing block by id.
+ * @param {string} id The block's id.
+ * @return {Blockly.Block} The found block.
+ */
+Blockly.Realtime.getBlockById = function(id) {
+  return Blockly.Realtime.blocksMap_.get(id);
+};
+
+/**
+ * Log the event for debugging purposes.
+ * @param {gapi.drive.realtime.BaseModelEvent} evt The event that occurred.
+ * @private
+ */
+Blockly.Realtime.logEvent_ = function(evt) {
+  console.log('Object event:');
+  console.log('  id: ' + evt.target.id);
+  console.log('  type: ' + evt.type);
+  var events = evt.events;
+  if (events) {
+    var eventCount = events.length;
+    for (var i = 0; i < eventCount; i++) {
+      var event = events[i];
+      console.log('  child event:');
+      console.log('    id: ' + event.target.id);
+      console.log('    type: ' + event.type);
+    }
+  }
+};
+
+/**
+ * Event handler to call when a block is changed.
+ * @param {!gapi.drive.realtime.ObjectChangedEvent} evt The event that occurred.
+ * @private
+ */
+Blockly.Realtime.onObjectChange_ = function(evt) {
+  var events = evt.events;
+  var eventCount = evt.events.length;
+  for (var i = 0; i < eventCount; i++) {
+    var event = events[i];
+    if (!event.isLocal || Blockly.Realtime.withinUndo_) {
+      var block = event.target;
+      if (event.type == 'value_changed') {
+        if (event.property == 'xmlDom') {
+          Blockly.Realtime.doWithinSync_(function() {
+            Blockly.Realtime.placeBlockOnWorkspace_(block, false);
+            Blockly.Realtime.moveBlock_(block);
+          });
+        } else if (event.property == 'relativeX' ||
+            event.property == 'relativeY') {
+          Blockly.Realtime.doWithinSync_(function() {
+            if (!block.svg_) {
+              // If this is a move of a newly disconnected (i.e. newly top
+              // level) block it will not have any svg (because it has been
+              // disposed of by its parent), so we need to handle that here.
+              Blockly.Realtime.placeBlockOnWorkspace_(block, false);
+            }
+            Blockly.Realtime.moveBlock_(block);
+          });
+        }
+      }
+    }
+  }
+};
+
+/**
+ * Event handler to call when there is a change to the realtime blocks map.
+ * @param {!gapi.drive.realtime.ValueChangedEvent} evt The event that occurred.
+ * @private
+ */
+Blockly.Realtime.onBlocksMapChange_ = function(evt) {
+  if (!evt.isLocal || Blockly.Realtime.withinUndo_) {
+    var block = evt.newValue;
+    if (block) {
+      Blockly.Realtime.placeBlockOnWorkspace_(block, !(evt.oldValue));
+    } else {
+      block = evt.oldValue;
+      Blockly.Realtime.deleteBlock(block);
+    }
+  }
+};
+
+/**
+ * A convenient wrapper around code that synchronizes the local model being
+ * edited with changes from another non-local model.
+ * @param {!function()} thunk A thunk of code to call.
+ * @private
+ */
+Blockly.Realtime.doWithinSync_ = function(thunk) {
+  if (Blockly.Realtime.withinSync) {
+    thunk();
+  } else {
+    try {
+      Blockly.Realtime.withinSync = true;
+      thunk();
+    } finally {
+      Blockly.Realtime.withinSync = false;
+    }
+  }
+};
+
+/**
+ * Places a block to be synced on this docs main workspace.  The block might
+ * already exist on this doc, in which case it is updated and/or moved.
+ * @param {!Blockly.Block} block The block.
+ * @param {boolean} addToTop Whether to add the block to the workspace/s list of
+ *     top-level blocks.
+ * @private
+ */
+Blockly.Realtime.placeBlockOnWorkspace_ = function(block, addToTop) {
+  Blockly.Realtime.doWithinSync_(function() {
+//    if (!Blockly.Realtime.blocksMap_.has(block.id)) {
+//      Blockly.Realtime.blocksMap_.set(block.id, block);
+//    }
+    var blockDom = Blockly.Xml.textToDom(block.xmlDom).firstChild;
+    var newBlock =
+        Blockly.Xml.domToBlock(Blockly.mainWorkspace, blockDom, true);
+    // TODO: The following is for debugging.  It should never actually happen.
+    if (!newBlock) {
+      return;
+    }
+    // Since Blockly.Xml.blockDomToBlock() purposely won't add blocks to
+    // workspace.topBlocks_ we sometimes need to do it explicitly here.
+    if (addToTop) {
+      newBlock.workspace.addTopBlock(newBlock);
+    }
+    if (addToTop ||
+        goog.array.contains(Blockly.Realtime.topBlocks_, newBlock)) {
+      Blockly.Realtime.moveBlock_(newBlock);
+    }
+  });
+};
+
+/**
+ * Move a block.
+ * @param {!Blockly.Block} block The block to move.
+ * @private
+ */
+Blockly.Realtime.moveBlock_ = function(block) {
+  if (!isNaN(block.relativeX) && !isNaN(block.relativeY)) {
+    var width = Blockly.svgSize().width;
+    var curPos = block.getRelativeToSurfaceXY();
+    var dx = block.relativeX - curPos.x;
+    var dy = block.relativeY - curPos.y;
+    block.moveBy(Blockly.RTL ? width - dx : dx, dy);
+  }
+};
+
+/**
+ * Delete a block.
+ * @param {!Blockly.Block} block The block to delete.
+ */
+Blockly.Realtime.deleteBlock = function(block) {
+  Blockly.Realtime.doWithinSync_(function() {
+    block.dispose(true, true, true);
+  });
+};
+
+/**
+ * Load all the blocks from the realtime model's blocks map and place them
+ * appropriately on the main Blockly workspace.
+ * @private
+ */
+Blockly.Realtime.loadBlocks_ = function() {
+  var topBlocks = Blockly.Realtime.topBlocks_;
+  for (var j = 0; j < topBlocks.length; j++) {
+    var topBlock = topBlocks.get(j);
+    Blockly.Realtime.placeBlockOnWorkspace_(topBlock, true);
+  }
+};
+
+/**
+ * Cause a changed block to update the realtime model, and therefore to be
+ * synced with other apps editing this same doc.
+ * @param {!Blockly.Block} block The block that changed.
+ */
+Blockly.Realtime.blockChanged = function(block) {
+  if (block.workspace == Blockly.mainWorkspace &&
+      Blockly.Realtime.isEnabled() &&
+      !Blockly.Realtime.withinSync) {
+    var rootBlock = block.getRootBlock();
+    var xy = rootBlock.getRelativeToSurfaceXY();
+    var changed = false;
+    var xml = Blockly.Xml.blockToDom_(rootBlock);
+    xml.setAttribute('id', rootBlock.id);
+    var topXml = goog.dom.createDom('xml');
+    topXml.appendChild(xml);
+    var newXml = Blockly.Xml.domToText(topXml);
+    if (newXml != rootBlock.xmlDom) {
+      changed = true;
+      rootBlock.xmlDom = newXml;
+    }
+    if (rootBlock.relativeX != xy.x || rootBlock.relativeY != xy.y) {
+      rootBlock.relativeX = xy.x;
+      rootBlock.relativeY = xy.y;
+      changed = true;
+    }
+    if (changed) {
+      var blockId = rootBlock.id.toString();
+      Blockly.Realtime.blocksMap_.set(blockId, rootBlock);
+    }
+  }
+};
+
+/**
+ * This function is called when the Realtime file has been loaded. It should
+ * be used to initialize any user interface components and event handlers
+ * depending on the Realtime model. In this case, create a text control binder
+ * and bind it to our string model that we created in initializeModel.
+ * @param {!gapi.drive.realtime.Document} doc The Realtime document.
+ * @private
+ */
+Blockly.Realtime.onFileLoaded_ = function(doc) {
+  Blockly.Realtime.document_ = doc;
+  Blockly.Realtime.sessionId_ = Blockly.Realtime.getSessionId_(doc);
+  Blockly.Realtime.model_ = doc.getModel();
+  Blockly.Realtime.blocksMap_ =
+      Blockly.Realtime.model_.getRoot().get('blocks');
+  Blockly.Realtime.topBlocks_ =
+      Blockly.Realtime.model_.getRoot().get('topBlocks');
+
+  Blockly.Realtime.model_.getRoot().addEventListener(
+      gapi.drive.realtime.EventType.OBJECT_CHANGED,
+      Blockly.Realtime.onObjectChange_);
+  Blockly.Realtime.blocksMap_.addEventListener(
+      gapi.drive.realtime.EventType.VALUE_CHANGED,
+      Blockly.Realtime.onBlocksMapChange_);
+
+  Blockly.Realtime.initUi_();
+
+  //Adding Listeners for Collaborator events.
+  doc.addEventListener(gapi.drive.realtime.EventType.COLLABORATOR_JOINED,
+      Blockly.Realtime.onCollaboratorJoined_);
+  doc.addEventListener(gapi.drive.realtime.EventType.COLLABORATOR_LEFT,
+      Blockly.Realtime.onCollaboratorLeft_);
+  Blockly.Realtime.updateCollabUi_();
+
+  Blockly.Realtime.loadBlocks_();
+
+  // Add logic for undo button.
+  // TODO: Uncomment this when undo/redo are fixed.
+//
+//  var undoButton = document.getElementById(Blockly.Realtime.undoElementId_);
+//  var redoButton = document.getElementById(Blockly.Realtime.redoElementId_);
+//
+//  if (undoButton) {
+//    undoButton.onclick = function (e) {
+//      try {
+//        Blockly.Realtime.withinUndo_ = true;
+//        Blockly.Realtime.model_.undo();
+//      } finally {
+//        Blockly.Realtime.withinUndo_ = false;
+//      }
+//    };
+//  }
+//  if (redoButton) {
+//    redoButton.onclick = function (e) {
+//      try {
+//        Blockly.Realtime.withinUndo_ = true;
+//        Blockly.Realtime.model_.redo();
+//      } finally {
+//        Blockly.Realtime.withinUndo_ = false;
+//      }
+//    };
+//  }
+//
+//  // Add event handler for UndoRedoStateChanged events.
+//  var onUndoRedoStateChanged = function(e) {
+//    undoButton.disabled = !e.canUndo;
+//    redoButton.disabled = !e.canRedo;
+//  };
+//  Blockly.Realtime.model_.addEventListener(
+//      gapi.drive.realtime.EventType.UNDO_REDO_STATE_CHANGED,
+//      onUndoRedoStateChanged);
+
+};
+
+/**
+ * Get the sessionId associated with this editing session.  Note that it is
+ * unique to the current browser window/tab.
+ * @param {gapi.drive.realtime.Document} doc
+ * @return {*}
+ * @private
+ */
+Blockly.Realtime.getSessionId_ = function(doc) {
+  var collaborators = doc.getCollaborators();
+  for (var i = 0; i < collaborators.length; i++) {
+    var collaborator = collaborators[i];
+    if (collaborator.isMe) {
+      return collaborator.sessionId;
+    }
+  }
+  return undefined;
+};
+
+/**
+ * Register the Blockly types and attributes that are reflected in the realtime
+ * model.
+ * @private
+ */
+Blockly.Realtime.registerTypes_ = function() {
+  var custom = gapi.drive.realtime.custom;
+
+  custom.registerType(Blockly.Block, 'Block');
+  Blockly.Block.prototype.id = custom.collaborativeField('id');
+  Blockly.Block.prototype.xmlDom = custom.collaborativeField('xmlDom');
+  Blockly.Block.prototype.relativeX = custom.collaborativeField('relativeX');
+  Blockly.Block.prototype.relativeY = custom.collaborativeField('relativeY');
+
+  custom.setInitializer(Blockly.Block, Blockly.Block.prototype.initialize);
+};
+
+/**
+ * Time period for realtime re-authorization
+ * @type {number}
+ * @private
+ */
+Blockly.Realtime.REAUTH_INTERVAL_IN_MILLISECONDS_ = 30 * 60 * 1000;
+
+/**
+ * What to do after Realtime authorization.
+ * @private
+ */
+Blockly.Realtime.afterAuth_ = function() {
+  // This is a workaround for the fact that the code in realtime-client-utils.js
+  // doesn't deal with auth timeouts correctly.  So we explicitly reauthorize at
+  // regular intervals.
+  setTimeout(
+      function() {
+        Blockly.Realtime.realtimeLoader_.authorizer.authorize(
+            Blockly.Realtime.afterAuth_);
+      },
+      Blockly.Realtime.REAUTH_INTERVAL_IN_MILLISECONDS_);
+};
+
+/**
+ * Add "Anyone with the link" permissions to the file.
+ * @param {string} fileId the file id
+ * @private
+ */
+Blockly.Realtime.afterCreate_ = function(fileId) {
+  var resource = {
+    'type': 'anyone',
+    'role': 'writer',
+    'value': 'default',
+    'withLink': true
+  };
+  var request = gapi.client.drive.permissions.insert({
+    'fileId': fileId,
+    'resource': resource
+  });
+  request.execute(function(resp) {
+    // If we have an error try to just set the permission for all users
+    // of the domain.
+    if (resp.error) {
+      Blockly.Realtime.getUserDomain(fileId, function(domain) {
+        var resource = {
+          'type': 'domain',
+          'role': 'writer',
+          'value': domain,
+          'withLink': true
+        };
+        request = gapi.client.drive.permissions.insert({
+          'fileId': fileId,
+          'resource': resource
+        });
+        request.execute(function(resp) { });
+      });
+    }
+  });
+};
+
+/**
+ * Get the domain (if it exists) associated with a realtime file.  The callback
+ * will be called with the domain, if it exists.
+ * @param {string} fileId the id of the file
+ * @param {function(string)} callback a function to call back with the domain
+ */
+Blockly.Realtime.getUserDomain = function(fileId, callback) {
+  /**
+   * Note that there may be a more direct way to get the domain by, for example,
+   * using the Google profile API but this way we don't need any additional
+   * APIs or scopes.  But if it turns out that the permissions API stops
+   * providing the domain this might have to change.
+   */
+  var request = gapi.client.drive.permissions.list({
+    'fileId': fileId
+  });
+  request.execute(function(resp) {
+    for (var i = 0; i < resp.items.length; i++) {
+      var item = resp.items[i];
+      if (item.role == 'owner') {
+        callback(item.domain);
+        return;
+      }
+    }
+  });
+};
+
+/**
+ * Options for the Realtime loader.
+ * @private
+ */
+Blockly.Realtime.rtclientOptions_ = {
+  /**
+   * Client ID from the console.
+   * This will be set from the options passed into Blockly.Realtime.start()
+   */
+  'clientId': null,
+
+  /**
+   * The ID of the button to click to authorize. Must be a DOM element ID.
+   */
+  'authButtonElementId': 'authorizeButton',
+
+  /**
+   * The ID of the container of the authorize button.
+   */
+  'authDivElementId': 'authButtonDiv',
+
+  /**
+   * Function to be called when a Realtime model is first created.
+   */
+  'initializeModel': Blockly.Realtime.initializeModel_,
+
+  /**
+   * Autocreate files right after auth automatically.
+   */
+  'autoCreate': true,
+
+  /**
+   * The name of newly created Drive files.
+   */
+  'defaultTitle': 'Realtime Blockly File',
+
+  /**
+   * The name of the folder to place newly created Drive files in.
+   */
+  'defaultFolderTitle': 'Realtime Blockly Folder',
+
+  /**
+   * The MIME type of newly created Drive Files. By default the application
+   * specific MIME type will be used:
+   *     application/vnd.google-apps.drive-sdk.
+   */
+  'newFileMimeType': null, // Using default.
+
+  /**
+   * Function to be called every time a Realtime file is loaded.
+   */
+  'onFileLoaded': Blockly.Realtime.onFileLoaded_,
+
+  /**
+   * Function to be called to initialize custom Collaborative Objects types.
+   */
+  'registerTypes': Blockly.Realtime.registerTypes_,
+
+  /**
+   * Function to be called after authorization and before loading files.
+   */
+  'afterAuth': Blockly.Realtime.afterAuth_,
+
+  /**
+   * Function to be called after file creation, if autoCreate is true.
+   */
+  'afterCreate': Blockly.Realtime.afterCreate_
+};
+
+/**
+ * Parse options to startRealtime().
+ * @param {!Object} options Object containing the options.
+ * @private
+ */
+Blockly.Realtime.parseOptions_ = function(options) {
+  var chatBoxOptions = rtclient.getOption(options, 'chatbox');
+  if (chatBoxOptions) {
+    Blockly.Realtime.chatBoxElementId_ =
+        rtclient.getOption(chatBoxOptions, 'elementId');
+    Blockly.Realtime.chatBoxInitialText_ =
+        rtclient.getOption(chatBoxOptions, 'initText', Blockly.Msg.CHAT);
+  }
+  Blockly.Realtime.rtclientOptions_.clientId =
+      rtclient.getOption(options, 'clientId');
+  Blockly.Realtime.collabElementId =
+      rtclient.getOption(options, 'collabElementId');
+  // TODO: Uncomment this when undo/redo are fixed.
+//  Blockly.Realtime.undoElementId_ =
+//      rtclient.getOption(options, 'undoElementId', 'undoButton');
+//  Blockly.Realtime.redoElementId_ =
+//      rtclient.getOption(options, 'redoElementId', 'redoButton');
+};
+
+/**
+ * Setup the Blockly container for realtime authorization and start the
+ * Realtime loader.
+ * @param {function()} uiInitialize Function to initialize the Blockly UI.
+ * @param {!Element} uiContainer Container element for the Blockly UI.
+ * @param {!Object} options The realtime options.
+ */
+Blockly.Realtime.startRealtime = function(uiInitialize, uiContainer, options) {
+  Blockly.Realtime.parseOptions_(options);
+  Blockly.Realtime.enabled_ = true;
+  // Note that we need to setup the UI for realtime authorization before
+  // loading the realtime code (which, in turn, will handle initializing the
+  // rest of the Blockly UI).
+  var authDiv = Blockly.Realtime.addAuthUi_(uiContainer);
+  Blockly.Realtime.initUi_ = function() {
+    uiInitialize();
+    if (Blockly.Realtime.chatBoxElementId_) {
+      var chatText = Blockly.Realtime.model_.getRoot().get(
+          Blockly.Realtime.chatBoxElementId_);
+      var chatBox = document.getElementById(Blockly.Realtime.chatBoxElementId_);
+      gapi.drive.realtime.databinding.bindString(chatText, chatBox);
+      chatBox.disabled = false;
+    }
+  };
+  Blockly.Realtime.realtimeLoader_ =
+      new rtclient.RealtimeLoader(Blockly.Realtime.rtclientOptions_);
+  Blockly.Realtime.realtimeLoader_.start();
+};
+
+/**
+ * Setup the Blockly container for realtime authorization.
+ * @param {!Element} uiContainer A DOM container element for the Blockly UI.
+ * @return {!Element} The DOM element for the authorization UI.
+ * @private
+ */
+Blockly.Realtime.addAuthUi_ = function(uiContainer) {
+  // Add progress indicator to the UI container.
+  uiContainer.style.background = 'url(' + Blockly.pathToMedia +
+      Blockly.Realtime.PROGRESS_URL_ + ') no-repeat center center';
+  // Setup authorization button
+  var blocklyDivBounds = goog.style.getBounds(uiContainer);
+  var authButtonDiv = goog.dom.createDom('div');
+  authButtonDiv.id = Blockly.Realtime.rtclientOptions_['authDivElementId'];
+  var authText = goog.dom.createDom('p', null, Blockly.Msg.AUTH);
+  authButtonDiv.appendChild(authText);
+  var authButton = goog.dom.createDom('button', null, 'Authorize');
+  authButton.id = Blockly.Realtime.rtclientOptions_.authButtonElementId;
+  authButtonDiv.appendChild(authButton);
+  uiContainer.appendChild(authButtonDiv);
+
+  // TODO: I would have liked to set the style for the authButtonDiv in css.js
+  // but that CSS doesn't get injected until after this code gets run.
+  authButtonDiv.style.display = 'none';
+  authButtonDiv.style.position = 'relative';
+  authButtonDiv.style.textAlign = 'center';
+  authButtonDiv.style.border = '1px solid';
+  authButtonDiv.style.backgroundColor = '#f6f9ff';
+  authButtonDiv.style.borderRadius = '15px';
+  authButtonDiv.style.boxShadow = '10px 10px 5px #888';
+  authButtonDiv.style.width = (blocklyDivBounds.width / 3) + 'px';
+  var authButtonDivBounds = goog.style.getBounds(authButtonDiv);
+  authButtonDiv.style.left =
+      (blocklyDivBounds.width - authButtonDivBounds.width) / 3 + 'px';
+  authButtonDiv.style.top =
+      (blocklyDivBounds.height - authButtonDivBounds.height) / 4 + 'px';
+  return authButtonDiv;
+};
+
+/**
+ * Update the collaborators UI to include the latest set of users.
+ * @private
+ */
+Blockly.Realtime.updateCollabUi_ = function() {
+  if (!Blockly.Realtime.collabElementId) {
+    return;
+  }
+  var collabElement = goog.dom.getElement(Blockly.Realtime.collabElementId);
+  goog.dom.removeChildren(collabElement);
+  var collaboratorsList = Blockly.Realtime.document_.getCollaborators();
+  for (var i = 0; i < collaboratorsList.length; i++) {
+    var collaborator = collaboratorsList[i];
+    var imgSrc = collaborator.photoUrl ||
+        Blockly.pathToMedia + Blockly.Realtime.ANONYMOUS_URL_;
+    var img = goog.dom.createDom('img',
+        {
+          'src': imgSrc,
+          'alt': collaborator.displayName,
+          'title': collaborator.displayName +
+              (collaborator.isMe ? ' (' + Blockly.Msg.ME + ')' : '')});
+    img.style.backgroundColor = collaborator.color;
+    goog.dom.appendChild(collabElement, img);
+  }
+};
+
+/**
+ * Event handler for when collaborators join.
+ * @param {gapi.drive.realtime.CollaboratorJoinedEvent} event The event.
+ * @private
+ */
+Blockly.Realtime.onCollaboratorJoined_ = function(event) {
+  Blockly.Realtime.updateCollabUi_();
+};
+
+/**
+ * Event handler for when collaborators leave.
+ * @param {gapi.drive.realtime.CollaboratorLeftEvent} event The event.
+ * @private
+ */
+Blockly.Realtime.onCollaboratorLeft_ = function(event) {
+  Blockly.Realtime.updateCollabUi_();
+};
+
+/**
+ * Execute a command.  Generally, a command is the result of a user action
+ * e.g. a click, drag or context menu selection.
+ * @param {function()} cmdThunk A function representing the command execution.
+ */
+Blockly.Realtime.doCommand = function(cmdThunk) {
+  // TODO(): We'd like to use the realtime API compound operations as in the
+  // commented out code below.  However, it appears that the realtime API is
+  // re-ordering events when they're within compound operations in a way which
+  // breaks us.  We might need to implement our own compound operations as a
+  // workaround.  Doing so might give us some other advantages since we could
+  // then allow compound operations that span synchronous blocks of code (e.g.,
+  // span multiple Blockly events).  It would also allow us to deal with the
+  // fact that the current realtime API puts some operations into the undo stack
+  // that we would prefer weren't there; namely local changes that occur as a
+  // result of remote realtime events.
+//  try {
+//    Blockly.Realtime.model_.beginCompoundOperation();
+//    cmdThunk();
+//  } finally {
+//    Blockly.Realtime.model_.endCompoundOperation();
+//  }
+  cmdThunk();
+};
+
+/**
+ * Generate an id that is unique among the all the sessions that ever
+ * collaborated on this document.
+ * @param {string} extra A string id which is unique within this particular
+ * session.
+ * @return {string}
+ */
+Blockly.Realtime.genUid = function(extra) {
+  /* The idea here is that we use the extra string to ensure uniqueness within
+     this session and the current sessionId to ensure uniqueness across
+     all the current sessions.  There's still the (remote) chance that the
+     current sessionId is the same as some old (non-current) one, so we still
+     need to check that our uid hasn't been previously used.
+
+     Note that you could potentially use a random number to generate the id but
+     there remains the small chance of regenerating the same number that's been
+     used before and I'm paranoid.  It's not enough to just check that the
+     random uid hasn't been previously used because other concurrent sessions
+     might generate the same uid at the same time.  Like I said, I'm paranoid.
+   */
+  var potentialUid = Blockly.Realtime.sessionId_ + '-' + extra;
+  if (!Blockly.Realtime.blocksMap_.has(potentialUid)) {
+    return potentialUid;
+  } else {
+    return (Blockly.Realtime.genUid('-' + extra));
+  }
+};

src/blockly/core/scrollbar.js

@@ -0,0 +1,523 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2011 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Library for creating scrollbars.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.Scrollbar');
+goog.provide('Blockly.ScrollbarPair');
+
+goog.require('goog.dom');
+goog.require('goog.events');
+
+
+/**
+ * Class for a pair of scrollbars.  Horizontal and vertical.
+ * @param {!Blockly.Workspace} workspace Workspace to bind the scrollbars to.
+ * @constructor
+ */
+Blockly.ScrollbarPair = function(workspace) {
+  this.workspace_ = workspace;
+  this.hScroll = new Blockly.Scrollbar(workspace, true, true);
+  this.vScroll = new Blockly.Scrollbar(workspace, false, true);
+  this.corner_ = Blockly.createSvgElement('rect',
+      {'height': Blockly.Scrollbar.scrollbarThickness,
+      'width': Blockly.Scrollbar.scrollbarThickness,
+      'class': 'blocklyScrollbarBackground'}, null);
+  Blockly.Scrollbar.insertAfter_(this.corner_, workspace.getBubbleCanvas());
+};
+
+/**
+ * Previously recorded metrics from the workspace.
+ * @type {Object}
+ * @private
+ */
+Blockly.ScrollbarPair.prototype.oldHostMetrics_ = null;
+
+/**
+ * Dispose of this pair of scrollbars.
+ * Unlink from all DOM elements to prevent memory leaks.
+ */
+Blockly.ScrollbarPair.prototype.dispose = function() {
+  goog.dom.removeNode(this.corner_);
+  this.corner_ = null;
+  this.workspace_ = null;
+  this.oldHostMetrics_ = null;
+  this.hScroll.dispose();
+  this.hScroll = null;
+  this.vScroll.dispose();
+  this.vScroll = null;
+};
+
+/**
+ * Recalculate both of the scrollbars' locations and lengths.
+ * Also reposition the corner rectangle.
+ */
+Blockly.ScrollbarPair.prototype.resize = function() {
+  // Look up the host metrics once, and use for both scrollbars.
+  var hostMetrics = this.workspace_.getMetrics();
+  if (!hostMetrics) {
+    // Host element is likely not visible.
+    return;
+  }
+
+  // Only change the scrollbars if there has been a change in metrics.
+  var resizeH = false;
+  var resizeV = false;
+  if (!this.oldHostMetrics_ ||
+      this.oldHostMetrics_.viewWidth != hostMetrics.viewWidth ||
+      this.oldHostMetrics_.viewHeight != hostMetrics.viewHeight ||
+      this.oldHostMetrics_.absoluteTop != hostMetrics.absoluteTop ||
+      this.oldHostMetrics_.absoluteLeft != hostMetrics.absoluteLeft) {
+    // The window has been resized or repositioned.
+    resizeH = true;
+    resizeV = true;
+  } else {
+    // Has the content been resized or moved?
+    if (!this.oldHostMetrics_ ||
+        this.oldHostMetrics_.contentWidth != hostMetrics.contentWidth ||
+        this.oldHostMetrics_.viewLeft != hostMetrics.viewLeft ||
+        this.oldHostMetrics_.contentLeft != hostMetrics.contentLeft) {
+      resizeH = true;
+    }
+    if (!this.oldHostMetrics_ ||
+        this.oldHostMetrics_.contentHeight != hostMetrics.contentHeight ||
+        this.oldHostMetrics_.viewTop != hostMetrics.viewTop ||
+        this.oldHostMetrics_.contentTop != hostMetrics.contentTop) {
+      resizeV = true;
+    }
+  }
+  if (resizeH) {
+    this.hScroll.resize(hostMetrics);
+  }
+  if (resizeV) {
+    this.vScroll.resize(hostMetrics);
+  }
+
+  // Reposition the corner square.
+  if (!this.oldHostMetrics_ ||
+      this.oldHostMetrics_.viewWidth != hostMetrics.viewWidth ||
+      this.oldHostMetrics_.absoluteLeft != hostMetrics.absoluteLeft) {
+    this.corner_.setAttribute('x', this.vScroll.xCoordinate);
+  }
+  if (!this.oldHostMetrics_ ||
+      this.oldHostMetrics_.viewHeight != hostMetrics.viewHeight ||
+      this.oldHostMetrics_.absoluteTop != hostMetrics.absoluteTop) {
+    this.corner_.setAttribute('y', this.hScroll.yCoordinate);
+  }
+
+  // Cache the current metrics to potentially short-cut the next resize event.
+  this.oldHostMetrics_ = hostMetrics;
+};
+
+/**
+ * Set the sliders of both scrollbars to be at a certain position.
+ * @param {number} x Horizontal scroll value.
+ * @param {number} y Vertical scroll value.
+ */
+Blockly.ScrollbarPair.prototype.set = function(x, y) {
+  this.hScroll.set(x);
+  this.vScroll.set(y);
+};
+
+// --------------------------------------------------------------------
+
+/**
+ * Class for a pure SVG scrollbar.
+ * This technique offers a scrollbar that is guaranteed to work, but may not
+ * look or behave like the system's scrollbars.
+ * @param {!Blockly.Workspace} workspace Workspace to bind the scrollbar to.
+ * @param {boolean} horizontal True if horizontal, false if vertical.
+ * @param {boolean=} opt_pair True if the scrollbar is part of a horiz/vert pair.
+ * @constructor
+ */
+Blockly.Scrollbar = function(workspace, horizontal, opt_pair) {
+  this.workspace_ = workspace;
+  this.pair_ = opt_pair || false;
+  this.horizontal_ = horizontal;
+
+  this.createDom_();
+
+  if (horizontal) {
+    this.svgBackground_.setAttribute('height',
+        Blockly.Scrollbar.scrollbarThickness);
+    this.svgKnob_.setAttribute('height',
+        Blockly.Scrollbar.scrollbarThickness - 5);
+    this.svgKnob_.setAttribute('y', 2.5);
+  } else {
+    this.svgBackground_.setAttribute('width',
+        Blockly.Scrollbar.scrollbarThickness);
+    this.svgKnob_.setAttribute('width',
+        Blockly.Scrollbar.scrollbarThickness - 5);
+    this.svgKnob_.setAttribute('x', 2.5);
+  }
+  var scrollbar = this;
+  this.onMouseDownBarWrapper_ = Blockly.bindEvent_(this.svgBackground_,
+      'mousedown', scrollbar, scrollbar.onMouseDownBar_);
+  this.onMouseDownKnobWrapper_ = Blockly.bindEvent_(this.svgKnob_,
+      'mousedown', scrollbar, scrollbar.onMouseDownKnob_);
+};
+
+/**
+ * Width of vertical scrollbar or height of horizontal scrollbar.
+ * Increase the size of scrollbars on touch devices.
+ * Don't define if there is no document object (e.g. node.js).
+ */
+Blockly.Scrollbar.scrollbarThickness = 15;
+if (goog.events.BrowserFeature.TOUCH_ENABLED) {
+  Blockly.Scrollbar.scrollbarThickness = 25;
+}
+
+/**
+ * Dispose of this scrollbar.
+ * Unlink from all DOM elements to prevent memory leaks.
+ */
+Blockly.Scrollbar.prototype.dispose = function() {
+  this.onMouseUpKnob_();
+  Blockly.unbindEvent_(this.onMouseDownBarWrapper_);
+  this.onMouseDownBarWrapper_ = null;
+  Blockly.unbindEvent_(this.onMouseDownKnobWrapper_);
+  this.onMouseDownKnobWrapper_ = null;
+
+  goog.dom.removeNode(this.svgGroup_);
+  this.svgGroup_ = null;
+  this.svgBackground_ = null;
+  this.svgKnob_ = null;
+  this.workspace_ = null;
+};
+
+/**
+ * Recalculate the scrollbar's location and its length.
+ * @param {Object=} opt_metrics A data structure of from the describing all the
+ * required dimensions.  If not provided, it will be fetched from the host
+ * object.
+ */
+Blockly.Scrollbar.prototype.resize = function(opt_metrics) {
+  // Determine the location, height and width of the host element.
+  var hostMetrics = opt_metrics;
+  if (!hostMetrics) {
+    hostMetrics = this.workspace_.getMetrics();
+    if (!hostMetrics) {
+      // Host element is likely not visible.
+      return;
+    }
+  }
+  /* hostMetrics is an object with the following properties.
+   * .viewHeight: Height of the visible rectangle,
+   * .viewWidth: Width of the visible rectangle,
+   * .contentHeight: Height of the contents,
+   * .contentWidth: Width of the content,
+   * .viewTop: Offset of top edge of visible rectangle from parent,
+   * .viewLeft: Offset of left edge of visible rectangle from parent,
+   * .contentTop: Offset of the top-most content from the y=0 coordinate,
+   * .contentLeft: Offset of the left-most content from the x=0 coordinate,
+   * .absoluteTop: Top-edge of view.
+   * .absoluteLeft: Left-edge of view.
+   */
+  if (this.horizontal_) {
+    var outerLength = hostMetrics.viewWidth - 1;
+    if (this.pair_) {
+      // Shorten the scrollbar to make room for the corner square.
+      outerLength -= Blockly.Scrollbar.scrollbarThickness;
+    } else {
+      // Only show the scrollbar if needed.
+      // Ideally this would also apply to scrollbar pairs, but that's a bigger
+      // headache (due to interactions with the corner square).
+      this.setVisible(outerLength < hostMetrics.contentHeight);
+    }
+    this.ratio_ = outerLength / hostMetrics.contentWidth;
+    if (this.ratio_ === -Infinity || this.ratio_ === Infinity ||
+        isNaN(this.ratio_)) {
+      this.ratio_ = 0;
+    }
+    var innerLength = hostMetrics.viewWidth * this.ratio_;
+    var innerOffset = (hostMetrics.viewLeft - hostMetrics.contentLeft) *
+        this.ratio_;
+    this.svgKnob_.setAttribute('width', Math.max(0, innerLength));
+    this.xCoordinate = hostMetrics.absoluteLeft + 0.5;
+    if (this.pair_ && this.workspace_.RTL) {
+      this.xCoordinate += hostMetrics.absoluteLeft +
+          Blockly.Scrollbar.scrollbarThickness;
+    }
+    this.yCoordinate = hostMetrics.absoluteTop + hostMetrics.viewHeight -
+        Blockly.Scrollbar.scrollbarThickness - 0.5;
+    this.svgGroup_.setAttribute('transform',
+        'translate(' + this.xCoordinate + ',' + this.yCoordinate + ')');
+    this.svgBackground_.setAttribute('width', Math.max(0, outerLength));
+    this.svgKnob_.setAttribute('x', this.constrainKnob_(innerOffset));
+  } else {
+    var outerLength = hostMetrics.viewHeight - 1;
+    if (this.pair_) {
+      // Shorten the scrollbar to make room for the corner square.
+      outerLength -= Blockly.Scrollbar.scrollbarThickness;
+    } else {
+      // Only show the scrollbar if needed.
+      this.setVisible(outerLength < hostMetrics.contentHeight);
+    }
+    this.ratio_ = outerLength / hostMetrics.contentHeight;
+    if (this.ratio_ === -Infinity || this.ratio_ === Infinity ||
+        isNaN(this.ratio_)) {
+      this.ratio_ = 0;
+    }
+    var innerLength = hostMetrics.viewHeight * this.ratio_;
+    var innerOffset = (hostMetrics.viewTop - hostMetrics.contentTop) *
+        this.ratio_;
+    this.svgKnob_.setAttribute('height', Math.max(0, innerLength));
+    this.xCoordinate = hostMetrics.absoluteLeft + 0.5;
+    if (!this.workspace_.RTL) {
+      this.xCoordinate += hostMetrics.viewWidth -
+          Blockly.Scrollbar.scrollbarThickness - 1;
+    }
+    this.yCoordinate = hostMetrics.absoluteTop + 0.5;
+    this.svgGroup_.setAttribute('transform',
+        'translate(' + this.xCoordinate + ',' + this.yCoordinate + ')');
+    this.svgBackground_.setAttribute('height', Math.max(0, outerLength));
+    this.svgKnob_.setAttribute('y', this.constrainKnob_(innerOffset));
+  }
+  // Resizing may have caused some scrolling.
+  this.onScroll_();
+};
+
+/**
+ * Create all the DOM elements required for a scrollbar.
+ * The resulting widget is not sized.
+ * @private
+ */
+Blockly.Scrollbar.prototype.createDom_ = function() {
+  /* Create the following DOM:
+  <g class="blocklyScrollbarHorizontal">
+    <rect class="blocklyScrollbarBackground" />
+    <rect class="blocklyScrollbarKnob" rx="8" ry="8" />
+  </g>
+  */
+  var className = 'blocklyScrollbar' +
+      (this.horizontal_ ? 'Horizontal' : 'Vertical');
+  this.svgGroup_ = Blockly.createSvgElement('g', {'class': className}, null);
+  this.svgBackground_ = Blockly.createSvgElement('rect',
+      {'class': 'blocklyScrollbarBackground'}, this.svgGroup_);
+  var radius = Math.floor((Blockly.Scrollbar.scrollbarThickness - 5) / 2);
+  this.svgKnob_ = Blockly.createSvgElement('rect',
+      {'class': 'blocklyScrollbarKnob', 'rx': radius, 'ry': radius},
+      this.svgGroup_);
+  Blockly.Scrollbar.insertAfter_(this.svgGroup_,
+                                 this.workspace_.getBubbleCanvas());
+};
+
+/**
+ * Is the scrollbar visible.  Non-paired scrollbars disappear when they aren't
+ * needed.
+ * @return {boolean} True if visible.
+ */
+Blockly.Scrollbar.prototype.isVisible = function() {
+  return this.svgGroup_.getAttribute('display') != 'none';
+};
+
+/**
+ * Set whether the scrollbar is visible.
+ * Only applies to non-paired scrollbars.
+ * @param {boolean} visible True if visible.
+ */
+Blockly.Scrollbar.prototype.setVisible = function(visible) {
+  if (visible == this.isVisible()) {
+    return;
+  }
+  // Ideally this would also apply to scrollbar pairs, but that's a bigger
+  // headache (due to interactions with the corner square).
+  if (this.pair_) {
+    throw 'Unable to toggle visibility of paired scrollbars.';
+  }
+  if (visible) {
+    this.svgGroup_.setAttribute('display', 'block');
+  } else {
+    // Hide the scrollbar.
+    this.workspace_.setMetrics({x: 0, y: 0});
+    this.svgGroup_.setAttribute('display', 'none');
+  }
+};
+
+/**
+ * Scroll by one pageful.
+ * Called when scrollbar background is clicked.
+ * @param {!Event} e Mouse down event.
+ * @private
+ */
+Blockly.Scrollbar.prototype.onMouseDownBar_ = function(e) {
+  this.onMouseUpKnob_();
+  if (Blockly.isRightButton(e)) {
+    // Right-click.
+    // Scrollbars have no context menu.
+    e.stopPropagation();
+    return;
+  }
+  var mouseXY = Blockly.mouseToSvg(e, this.workspace_.options.svg);
+  var mouseLocation = this.horizontal_ ? mouseXY.x : mouseXY.y;
+
+  var knobXY = Blockly.getSvgXY_(this.svgKnob_, this.workspace_);
+  var knobStart = this.horizontal_ ? knobXY.x : knobXY.y;
+  var knobLength = parseFloat(
+      this.svgKnob_.getAttribute(this.horizontal_ ? 'width' : 'height'));
+  var knobValue = parseFloat(
+      this.svgKnob_.getAttribute(this.horizontal_ ? 'x' : 'y'));
+
+  var pageLength = knobLength * 0.95;
+  if (mouseLocation <= knobStart) {
+    // Decrease the scrollbar's value by a page.
+    knobValue -= pageLength;
+  } else if (mouseLocation >= knobStart + knobLength) {
+    // Increase the scrollbar's value by a page.
+    knobValue += pageLength;
+  }
+  this.svgKnob_.setAttribute(this.horizontal_ ? 'x' : 'y',
+                             this.constrainKnob_(knobValue));
+  this.onScroll_();
+  e.stopPropagation();
+};
+
+/**
+ * Start a dragging operation.
+ * Called when scrollbar knob is clicked.
+ * @param {!Event} e Mouse down event.
+ * @private
+ */
+Blockly.Scrollbar.prototype.onMouseDownKnob_ = function(e) {
+  this.onMouseUpKnob_();
+  if (Blockly.isRightButton(e)) {
+    // Right-click.
+    // Scrollbars have no context menu.
+    e.stopPropagation();
+    return;
+  }
+  // Look up the current translation and record it.
+  this.startDragKnob = parseFloat(
+      this.svgKnob_.getAttribute(this.horizontal_ ? 'x' : 'y'));
+  // Record the current mouse position.
+  this.startDragMouse = this.horizontal_ ? e.clientX : e.clientY;
+  Blockly.Scrollbar.onMouseUpWrapper_ = Blockly.bindEvent_(document,
+      'mouseup', this, this.onMouseUpKnob_);
+  Blockly.Scrollbar.onMouseMoveWrapper_ = Blockly.bindEvent_(document,
+      'mousemove', this, this.onMouseMoveKnob_);
+  e.stopPropagation();
+};
+
+/**
+ * Drag the scrollbar's knob.
+ * @param {!Event} e Mouse up event.
+ * @private
+ */
+Blockly.Scrollbar.prototype.onMouseMoveKnob_ = function(e) {
+  var currentMouse = this.horizontal_ ? e.clientX : e.clientY;
+  var mouseDelta = currentMouse - this.startDragMouse;
+  var knobValue = this.startDragKnob + mouseDelta;
+  // Position the bar.
+  this.svgKnob_.setAttribute(this.horizontal_ ? 'x' : 'y',
+                             this.constrainKnob_(knobValue));
+  this.onScroll_();
+};
+
+/**
+ * Stop binding to the global mouseup and mousemove events.
+ * @private
+ */
+Blockly.Scrollbar.prototype.onMouseUpKnob_ = function() {
+  Blockly.removeAllRanges();
+  Blockly.hideChaff(true);
+  if (Blockly.Scrollbar.onMouseUpWrapper_) {
+    Blockly.unbindEvent_(Blockly.Scrollbar.onMouseUpWrapper_);
+    Blockly.Scrollbar.onMouseUpWrapper_ = null;
+  }
+  if (Blockly.Scrollbar.onMouseMoveWrapper_) {
+    Blockly.unbindEvent_(Blockly.Scrollbar.onMouseMoveWrapper_);
+    Blockly.Scrollbar.onMouseMoveWrapper_ = null;
+  }
+};
+
+/**
+ * Constrain the knob's position within the minimum (0) and maximum
+ * (length of scrollbar) values allowed for the scrollbar.
+ * @param {number} value Value that is potentially out of bounds.
+ * @return {number} Constrained value.
+ * @private
+ */
+Blockly.Scrollbar.prototype.constrainKnob_ = function(value) {
+  if (value <= 0 || isNaN(value)) {
+    value = 0;
+  } else {
+    var axis = this.horizontal_ ? 'width' : 'height';
+    var barLength = parseFloat(this.svgBackground_.getAttribute(axis));
+    var knobLength = parseFloat(this.svgKnob_.getAttribute(axis));
+    value = Math.min(value, barLength - knobLength);
+  }
+  return value;
+};
+
+/**
+ * Called when scrollbar is moved.
+ * @private
+ */
+Blockly.Scrollbar.prototype.onScroll_ = function() {
+  var knobValue = parseFloat(
+      this.svgKnob_.getAttribute(this.horizontal_ ? 'x' : 'y'));
+  var barLength = parseFloat(
+      this.svgBackground_.getAttribute(this.horizontal_ ? 'width' : 'height'));
+  var ratio = knobValue / barLength;
+  if (isNaN(ratio)) {
+    ratio = 0;
+  }
+  var xyRatio = {};
+  if (this.horizontal_) {
+    xyRatio.x = ratio;
+  } else {
+    xyRatio.y = ratio;
+  }
+  this.workspace_.setMetrics(xyRatio);
+};
+
+/**
+ * Set the scrollbar slider's position.
+ * @param {number} value The distance from the top/left end of the bar.
+ */
+Blockly.Scrollbar.prototype.set = function(value) {
+  // Move the scrollbar slider.
+  this.svgKnob_.setAttribute(this.horizontal_ ? 'x' : 'y', value * this.ratio_);
+  this.onScroll_();
+};
+
+/**
+ * Insert a node after a reference node.
+ * Contrast with node.insertBefore function.
+ * @param {!Element} newNode New element to insert.
+ * @param {!Element} refNode Existing element to precede new node.
+ * @private
+ */
+Blockly.Scrollbar.insertAfter_ = function(newNode, refNode) {
+  var siblingNode = refNode.nextSibling;
+  var parentNode = refNode.parentNode;
+  if (!parentNode) {
+    throw 'Reference node has no parent.';
+  }
+  if (siblingNode) {
+    parentNode.insertBefore(newNode, siblingNode);
+  } else {
+    parentNode.appendChild(newNode);
+  }
+};

src/blockly/core/toolbox.js

@@ -0,0 +1,475 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2011 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Toolbox from whence to create blocks.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.Toolbox');
+
+goog.require('Blockly.Flyout');
+goog.require('goog.dom');
+goog.require('goog.events');
+goog.require('goog.events.BrowserFeature');
+goog.require('goog.html.SafeHtml');
+goog.require('goog.math.Rect');
+goog.require('goog.style');
+goog.require('goog.ui.tree.TreeControl');
+goog.require('goog.ui.tree.TreeNode');
+
+
+/**
+ * Class for a Toolbox.
+ * Creates the toolbox's DOM.
+ * @param {!Blockly.Workspace} workspace The workspace in which to create new
+ *     blocks.
+ * @constructor
+ */
+Blockly.Toolbox = function(workspace) {
+  /**
+   * @type {!Blockly.Workspace}
+   * @private
+   */
+  this.workspace_ = workspace;
+};
+
+/**
+ * Width of the toolbox.
+ * @type {number}
+ */
+Blockly.Toolbox.prototype.width = 0;
+
+/**
+ * The SVG group currently selected.
+ * @type {SVGGElement}
+ * @private
+ */
+Blockly.Toolbox.prototype.selectedOption_ = null;
+
+/**
+ * The tree node most recently selected.
+ * @type {goog.ui.tree.BaseNode}
+ * @private
+ */
+Blockly.Toolbox.prototype.lastCategory_ = null;
+
+/**
+ * Configuration constants for Closure's tree UI.
+ * @type {Object.<string,*>}
+ * @const
+ * @private
+ */
+Blockly.Toolbox.prototype.CONFIG_ = {
+  indentWidth: 19,
+  cssRoot: 'blocklyTreeRoot',
+  cssHideRoot: 'blocklyHidden',
+  cssItem: '',
+  cssTreeRow: 'blocklyTreeRow',
+  cssItemLabel: 'blocklyTreeLabel',
+  cssTreeIcon: 'blocklyTreeIcon',
+  cssExpandedFolderIcon: 'blocklyTreeIconOpen',
+  cssFileIcon: 'blocklyTreeIconNone',
+  cssSelectedRow: 'blocklyTreeSelected'
+};
+
+/**
+ * Initializes the toolbox.
+ */
+Blockly.Toolbox.prototype.init = function() {
+  var workspace = this.workspace_;
+
+  // Create an HTML container for the Toolbox menu.
+  this.HtmlDiv = goog.dom.createDom('div', 'blocklyToolboxDiv');
+  this.HtmlDiv.setAttribute('dir', workspace.RTL ? 'RTL' : 'LTR');
+  document.body.appendChild(this.HtmlDiv);
+
+  // Clicking on toolbar closes popups.
+  Blockly.bindEvent_(this.HtmlDiv, 'mousedown', this,
+      function(e) {
+        if (Blockly.isRightButton(e) || e.target == this.HtmlDiv) {
+          // Close flyout.
+          Blockly.hideChaff(false);
+        } else {
+          // Just close popups.
+          Blockly.hideChaff(true);
+        }
+      });
+  var workspaceOptions = {
+    disabledPatternId: workspace.options.disabledPatternId,
+    parentWorkspace: workspace,
+    RTL: workspace.RTL,
+    svg: workspace.options.svg
+  };
+  /**
+   * @type {!Blockly.Flyout}
+   * @private
+   */
+  this.flyout_ = new Blockly.Flyout(workspaceOptions);
+  goog.dom.insertSiblingAfter(this.flyout_.createDom(), workspace.svgGroup_);
+  this.flyout_.init(workspace);
+
+  this.CONFIG_['cleardotPath'] = workspace.options.pathToMedia + '1x1.gif';
+  this.CONFIG_['cssCollapsedFolderIcon'] =
+      'blocklyTreeIconClosed' + (workspace.RTL ? 'Rtl' : 'Ltr');
+  var tree = new Blockly.Toolbox.TreeControl(this, this.CONFIG_);
+  this.tree_ = tree;
+  tree.setShowRootNode(false);
+  tree.setShowLines(false);
+  tree.setShowExpandIcons(false);
+  tree.setSelectedItem(null);
+  this.hasColours_ = false;
+  this.populate_(workspace.options.languageTree);
+  tree.render(this.HtmlDiv);
+  if (this.hasColours_) {
+    this.addColour_(tree);
+  }
+  this.position();
+};
+
+/**
+ * Dispose of this toolbox.
+ */
+Blockly.Toolbox.prototype.dispose = function() {
+  this.flyout_.dispose();
+  this.tree_.dispose();
+  goog.dom.removeNode(this.HtmlDiv);
+  this.workspace_ = null;
+  this.lastCategory_ = null;
+};
+
+/**
+ * Move the toolbox to the edge.
+ */
+Blockly.Toolbox.prototype.position = function() {
+  var treeDiv = this.HtmlDiv;
+  if (!treeDiv) {
+    // Not initialized yet.
+    return;
+  }
+  var svg = this.workspace_.options.svg;
+  var svgPosition = goog.style.getPageOffset(svg);
+  var svgSize = Blockly.svgSize(svg);
+  if (this.workspace_.RTL) {
+    treeDiv.style.left =
+        (svgPosition.x + svgSize.width - treeDiv.offsetWidth) + 'px';
+  } else {
+    treeDiv.style.left = svgPosition.x + 'px';
+  }
+  treeDiv.style.height = svgSize.height + 'px';
+  treeDiv.style.top = svgPosition.y + 'px';
+  this.width = treeDiv.offsetWidth;
+  if (!this.workspace_.RTL) {
+    // 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.
+ * @private
+ */
+Blockly.Toolbox.prototype.populate_ = function(newTree) {
+  var rootOut = this.tree_;
+  rootOut.removeChildren();  // Delete any existing content.
+  rootOut.blocks = [];
+  var hasColours = false;
+  function syncTrees(treeIn, treeOut) {
+    for (var i = 0, childIn; childIn = treeIn.childNodes[i]; i++) {
+      if (!childIn.tagName) {
+        // Skip over text.
+        continue;
+      }
+      switch (childIn.tagName.toUpperCase()) {
+        case 'CATEGORY':
+          var childOut = rootOut.createNode(childIn.getAttribute('name'));
+          childOut.blocks = [];
+          treeOut.add(childOut);
+          var custom = childIn.getAttribute('custom');
+          if (custom) {
+            // Variables and procedures are special dynamic categories.
+            childOut.blocks = custom;
+          } else {
+            syncTrees(childIn, childOut);
+          }
+          var hue = childIn.getAttribute('colour');
+          if (goog.isString(hue)) {
+            childOut.hexColour = Blockly.makeColour(hue);
+            hasColours = true;
+          } else {
+            childOut.hexColour = '';
+          }
+          if (childIn.getAttribute('expanded') == 'true') {
+            if (childOut.blocks.length) {
+              rootOut.setSelectedItem(childOut);
+            }
+            childOut.setExpanded(true);
+          }
+          break;
+        case 'SEP':
+          treeOut.add(new Blockly.Toolbox.TreeSeparator());
+          break;
+        case 'BLOCK':
+          treeOut.blocks.push(childIn);
+          break;
+      }
+    }
+  }
+  syncTrees(newTree, this.tree_);
+  this.hasColours_ = hasColours;
+
+  if (rootOut.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.fireUiEvent(window, 'resize');
+};
+
+/**
+ * Recursively add colours to this toolbox.
+ * @param {!Blockly.Toolbox.TreeNode}
+ * @private
+ */
+Blockly.Toolbox.prototype.addColour_ = function(tree) {
+  var children = tree.getChildren();
+  for (var i = 0, child; child = children[i]; i++) {
+    var element = child.getRowElement();
+    if (element) {
+      var border = '8px solid ' + (child.hexColour || '#ddd');
+      if (this.workspace_.RTL) {
+        element.style.borderRight = border;
+      } else {
+        element.style.borderLeft = border;
+      }
+    }
+    this.addColour_(child);
+  }
+};
+
+/**
+ * Unhighlight any previously specified option.
+ */
+Blockly.Toolbox.prototype.clearSelection = function() {
+  this.tree_.setSelectedItem(null);
+};
+
+/**
+ * Return the deletion rectangle for this toolbar.
+ * @return {goog.math.Rect} Rectangle in which to delete.
+ */
+Blockly.Toolbox.prototype.getRect = function() {
+  // BIG_NUM is offscreen padding so that blocks dragged beyond the toolbox
+  // area are still deleted.  Must be smaller than Infinity, but larger than
+  // the largest screen size.
+  var BIG_NUM = 10000000;
+  // Assumes that the toolbox is on the SVG edge.  If this changes
+  // (e.g. toolboxes in mutators) then this code will need to be more complex.
+  if (this.workspace_.RTL) {
+    var svgSize = Blockly.svgSize(this.workspace_.options.svg);
+    var x = svgSize.width - this.width;
+  } else {
+    var x = -BIG_NUM;
+  }
+  return new goog.math.Rect(x, -BIG_NUM, BIG_NUM + this.width, 2 * BIG_NUM);
+};
+
+// Extending Closure's Tree UI.
+
+/**
+ * Extention of a TreeControl object that uses a custom tree node.
+ * @param {Blockly.Toolbox} toolbox The parent toolbox for this tree.
+ * @param {Object} config The configuration for the tree. See
+ *    goog.ui.tree.TreeControl.DefaultConfig.
+ * @constructor
+ * @extends {goog.ui.tree.TreeControl}
+ */
+Blockly.Toolbox.TreeControl = function(toolbox, config) {
+  this.toolbox_ = toolbox;
+  goog.ui.tree.TreeControl.call(this, goog.html.SafeHtml.EMPTY, config);
+};
+goog.inherits(Blockly.Toolbox.TreeControl, goog.ui.tree.TreeControl);
+
+/**
+ * Adds touch handling to TreeControl.
+ * @override
+ */
+Blockly.Toolbox.TreeControl.prototype.enterDocument = function() {
+  Blockly.Toolbox.TreeControl.superClass_.enterDocument.call(this);
+
+  // Add touch handler.
+  if (goog.events.BrowserFeature.TOUCH_ENABLED) {
+    var el = this.getRowElement();
+    Blockly.bindEvent_(el, goog.events.EventType.TOUCHSTART, this,
+        this.handleTouchEvent_);
+  }
+};
+/**
+ * Handles touch events.
+ * @param {!goog.events.BrowserEvent} e The browser event.
+ * @private
+ */
+Blockly.Toolbox.TreeControl.prototype.handleTouchEvent_ = function(e) {
+  e.preventDefault();
+  var node = this.getNodeFromEvent_(e);
+  if (node && e.type === goog.events.EventType.TOUCHSTART) {
+    // Fire asynchronously since onMouseDown takes long enough that the browser
+    // would fire the default mouse event before this method returns.
+    setTimeout(function() {
+      node.onMouseDown(e);  // Same behaviour for click and touch.
+    }, 1);
+  }
+};
+
+/**
+ * Creates a new tree node using a custom tree node.
+ * @param {string=} opt_html The HTML content of the node label.
+ * @return {!goog.ui.tree.TreeNode} The new item.
+ * @override
+ */
+Blockly.Toolbox.TreeControl.prototype.createNode = function(opt_html) {
+  return new Blockly.Toolbox.TreeNode(this.toolbox_, opt_html ?
+      goog.html.SafeHtml.htmlEscape(opt_html) : goog.html.SafeHtml.EMPTY,
+      this.getConfig(), this.getDomHelper());
+};
+
+/**
+ * Display/hide the flyout when an item is selected.
+ * @param {goog.ui.tree.BaseNode} node The item to select.
+ * @override
+ */
+Blockly.Toolbox.TreeControl.prototype.setSelectedItem = function(node) {
+  Blockly.removeAllRanges();
+  var toolbox = this.toolbox_;
+  if (node == this.selectedItem_ || node == toolbox.tree_) {
+    return;
+  }
+  if (toolbox.lastCategory_) {
+    toolbox.lastCategory_.getRowElement().style.backgroundColor = '';
+  }
+  if (node) {
+    var hexColour = node.hexColour || '#57e';
+    node.getRowElement().style.backgroundColor = hexColour;
+    // Add colours to child nodes which may have been collapsed and thus
+    // not rendered.
+    toolbox.addColour_(node);
+  }
+  goog.ui.tree.TreeControl.prototype.setSelectedItem.call(this, node);
+  if (node && node.blocks && node.blocks.length) {
+    toolbox.flyout_.show(node.blocks);
+    // Scroll the flyout to the top if the category has changed.
+    if (toolbox.lastCategory_ != node) {
+      toolbox.flyout_.scrollToTop();
+    }
+  } else {
+    // Hide the flyout.
+    toolbox.flyout_.hide();
+  }
+  if (node) {
+    toolbox.lastCategory_ = node;
+  }
+};
+
+/**
+ * A single node in the tree, customized for Blockly's UI.
+ * @param {Blockly.Toolbox} toolbox The parent toolbox for this tree.
+ * @param {!goog.html.SafeHtml} html The HTML content of the node label.
+ * @param {Object=} opt_config The configuration for the tree. See
+ *    goog.ui.tree.TreeControl.DefaultConfig. If not specified, a default config
+ *    will be used.
+ * @param {goog.dom.DomHelper=} opt_domHelper Optional DOM helper.
+ * @constructor
+ * @extends {goog.ui.tree.TreeNode}
+ */
+Blockly.Toolbox.TreeNode = function(toolbox, html, opt_config, opt_domHelper) {
+  goog.ui.tree.TreeNode.call(this, html, opt_config, opt_domHelper);
+  if (toolbox) {
+    var resize = function() {
+      Blockly.fireUiEvent(window, 'resize');
+    };
+    // Fire a resize event since the toolbox may have changed width.
+    goog.events.listen(toolbox.tree_,
+        goog.ui.tree.BaseNode.EventType.EXPAND, resize);
+    goog.events.listen(toolbox.tree_,
+        goog.ui.tree.BaseNode.EventType.COLLAPSE, resize);
+  }
+};
+goog.inherits(Blockly.Toolbox.TreeNode, goog.ui.tree.TreeNode);
+
+/**
+ * Supress population of the +/- icon.
+ * @return {!goog.html.SafeHtml} The source for the icon.
+ * @override
+ */
+Blockly.Toolbox.TreeNode.prototype.getExpandIconSafeHtml = function() {
+  return goog.html.SafeHtml.create('span');
+};
+
+/**
+ * Expand or collapse the node on mouse click.
+ * @param {!goog.events.BrowserEvent} e The browser event.
+ * @override
+ */
+Blockly.Toolbox.TreeNode.prototype.onMouseDown = function(e) {
+  // Expand icon.
+  if (this.hasChildren() && this.isUserCollapsible_) {
+    this.toggle();
+    this.select();
+  } else if (this.isSelected()) {
+    this.getTree().setSelectedItem(null);
+  } else {
+    this.select();
+  }
+  this.updateRow();
+};
+
+/**
+ * Supress the inherited double-click behaviour.
+ * @param {!goog.events.BrowserEvent} e The browser event.
+ * @override
+ * @private
+ */
+Blockly.Toolbox.TreeNode.prototype.onDoubleClick_ = function(e) {
+  // NOP.
+};
+
+/**
+ * A blank separator node in the tree.
+ * @constructor
+ * @extends {Blockly.Toolbox.TreeNode}
+ */
+Blockly.Toolbox.TreeSeparator = function() {
+  Blockly.Toolbox.TreeNode.call(this, null, '',
+      Blockly.Toolbox.TreeSeparator.CONFIG_);
+};
+goog.inherits(Blockly.Toolbox.TreeSeparator, Blockly.Toolbox.TreeNode);
+
+/**
+ * Configuration constants for tree separator.
+ * @type {Object.<string,*>}
+ * @const
+ * @private
+ */
+Blockly.Toolbox.TreeSeparator.CONFIG_ = {
+  cssTreeRow: 'blocklyTreeSeparator'
+};

src/blockly/core/tooltip.js

@@ -0,0 +1,438 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2011 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Library to create tooltips for Blockly.
+ * First, call Blockly.Tooltip.init() after onload.
+ * Second, set the 'tooltip' property on any SVG element that needs a tooltip.
+ * If the tooltip is a string, then that message will be displayed.
+ * If the tooltip is an SVG element, then that object's tooltip will be used.
+ * Third, call Blockly.Tooltip.bindMouseEvents(e) passing the SVG element.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.Tooltip');
+
+goog.require('goog.dom');
+
+
+/**
+ * Is a tooltip currently showing?
+ */
+Blockly.Tooltip.visible = false;
+
+/**
+ * Maximum width (in characters) of a tooltip.
+ */
+Blockly.Tooltip.LIMIT = 50;
+
+/**
+ * PID of suspended thread to clear tooltip on mouse out.
+ * @private
+ */
+Blockly.Tooltip.mouseOutPid_ = 0;
+
+/**
+ * PID of suspended thread to show the tooltip.
+ * @private
+ */
+Blockly.Tooltip.showPid_ = 0;
+
+/**
+ * Last observed X location of the mouse pointer (freezes when tooltip appears).
+ * @private
+ */
+Blockly.Tooltip.lastX_ = 0;
+
+/**
+ * Last observed Y location of the mouse pointer (freezes when tooltip appears).
+ * @private
+ */
+Blockly.Tooltip.lastY_ = 0;
+
+/**
+ * Current element being pointed at.
+ * @private
+ */
+Blockly.Tooltip.element_ = null;
+
+/**
+ * Once a tooltip has opened for an element, that element is 'poisoned' and
+ * cannot respawn a tooltip until the pointer moves over a different element.
+ * @private
+ */
+Blockly.Tooltip.poisonedElement_ = null;
+
+/**
+ * Horizontal offset between mouse cursor and tooltip.
+ */
+Blockly.Tooltip.OFFSET_X = 0;
+
+/**
+ * Vertical offset between mouse cursor and tooltip.
+ */
+Blockly.Tooltip.OFFSET_Y = 10;
+
+/**
+ * Radius mouse can move before killing tooltip.
+ */
+Blockly.Tooltip.RADIUS_OK = 10;
+
+/**
+ * Delay before tooltip appears.
+ */
+Blockly.Tooltip.HOVER_MS = 1000;
+
+/**
+ * Horizontal padding between tooltip and screen edge.
+ */
+Blockly.Tooltip.MARGINS = 5;
+
+/**
+ * The HTML container.  Set once by Blockly.Tooltip.createDom.
+ * @type {Element}
+ */
+Blockly.Tooltip.DIV = null;
+
+/**
+ * Create the tooltip div and inject it onto the page.
+ */
+Blockly.Tooltip.createDom = function() {
+  if (Blockly.Tooltip.DIV) {
+    return;  // Already created.
+  }
+  // Create an HTML container for popup overlays (e.g. editor widgets).
+  Blockly.Tooltip.DIV = goog.dom.createDom('div', 'blocklyTooltipDiv');
+  document.body.appendChild(Blockly.Tooltip.DIV);
+};
+
+/**
+ * Binds the required mouse events onto an SVG element.
+ * @param {!Element} element SVG element onto which tooltip is to be bound.
+ */
+Blockly.Tooltip.bindMouseEvents = function(element) {
+  Blockly.bindEvent_(element, 'mouseover', null, Blockly.Tooltip.onMouseOver_);
+  Blockly.bindEvent_(element, 'mouseout', null, Blockly.Tooltip.onMouseOut_);
+  Blockly.bindEvent_(element, 'mousemove', null, Blockly.Tooltip.onMouseMove_);
+};
+
+/**
+ * Hide the tooltip if the mouse is over a different object.
+ * Initialize the tooltip to potentially appear for this object.
+ * @param {!Event} e Mouse event.
+ * @private
+ */
+Blockly.Tooltip.onMouseOver_ = function(e) {
+  // If the tooltip is an object, treat it as a pointer to the next object in
+  // the chain to look at.  Terminate when a string or function is found.
+  var element = e.target;
+  while (!goog.isString(element.tooltip) && !goog.isFunction(element.tooltip)) {
+    element = element.tooltip;
+  }
+  if (Blockly.Tooltip.element_ != element) {
+    Blockly.Tooltip.hide();
+    Blockly.Tooltip.poisonedElement_ = null;
+    Blockly.Tooltip.element_ = element;
+  }
+  // Forget about any immediately preceeding mouseOut event.
+  clearTimeout(Blockly.Tooltip.mouseOutPid_);
+};
+
+/**
+ * Hide the tooltip if the mouse leaves the object and enters the workspace.
+ * @param {!Event} e Mouse event.
+ * @private
+ */
+Blockly.Tooltip.onMouseOut_ = function(e) {
+  // Moving from one element to another (overlapping or with no gap) generates
+  // a mouseOut followed instantly by a mouseOver.  Fork off the mouseOut
+  // event and kill it if a mouseOver is received immediately.
+  // This way the task only fully executes if mousing into the void.
+  Blockly.Tooltip.mouseOutPid_ = setTimeout(function() {
+        Blockly.Tooltip.element_ = null;
+        Blockly.Tooltip.poisonedElement_ = null;
+        Blockly.Tooltip.hide();
+      }, 1);
+  clearTimeout(Blockly.Tooltip.showPid_);
+};
+
+/**
+ * When hovering over an element, schedule a tooltip to be shown.  If a tooltip
+ * is already visible, hide it if the mouse strays out of a certain radius.
+ * @param {!Event} e Mouse event.
+ * @private
+ */
+Blockly.Tooltip.onMouseMove_ = function(e) {
+  if (!Blockly.Tooltip.element_ || !Blockly.Tooltip.element_.tooltip) {
+    // No tooltip here to show.
+    return;
+  } else if (Blockly.dragMode_ != 0) {
+    // Don't display a tooltip during a drag.
+    return;
+  } else if (Blockly.WidgetDiv.isVisible()) {
+    // Don't display a tooltip if a widget is open (tooltip would be under it).
+    return;
+  }
+  if (Blockly.Tooltip.visible) {
+    // Compute the distance between the mouse position when the tooltip was
+    // shown and the current mouse position.  Pythagorean theorem.
+    var dx = Blockly.Tooltip.lastX_ - e.pageX;
+    var dy = Blockly.Tooltip.lastY_ - e.pageY;
+    if (Math.sqrt(dx * dx + dy * dy) > Blockly.Tooltip.RADIUS_OK) {
+      Blockly.Tooltip.hide();
+    }
+  } else if (Blockly.Tooltip.poisonedElement_ != Blockly.Tooltip.element_) {
+    // The mouse moved, clear any previously scheduled tooltip.
+    clearTimeout(Blockly.Tooltip.showPid_);
+    // Maybe this time the mouse will stay put.  Schedule showing of tooltip.
+    Blockly.Tooltip.lastX_ = e.pageX;
+    Blockly.Tooltip.lastY_ = e.pageY;
+    Blockly.Tooltip.showPid_ =
+        setTimeout(Blockly.Tooltip.show_, Blockly.Tooltip.HOVER_MS);
+  }
+};
+
+/**
+ * Hide the tooltip.
+ */
+Blockly.Tooltip.hide = function() {
+  if (Blockly.Tooltip.visible) {
+    Blockly.Tooltip.visible = false;
+    if (Blockly.Tooltip.DIV) {
+      Blockly.Tooltip.DIV.style.display = 'none';
+    }
+  }
+  clearTimeout(Blockly.Tooltip.showPid_);
+};
+
+/**
+ * Create the tooltip and show it.
+ * @private
+ */
+Blockly.Tooltip.show_ = function() {
+  Blockly.Tooltip.poisonedElement_ = Blockly.Tooltip.element_;
+  if (!Blockly.Tooltip.DIV) {
+    return;
+  }
+  // Erase all existing text.
+  goog.dom.removeChildren(/** @type {!Element} */ (Blockly.Tooltip.DIV));
+  // Get the new text.
+  var tip = Blockly.Tooltip.element_.tooltip;
+  if (goog.isFunction(tip)) {
+    tip = tip();
+  }
+  tip = Blockly.Tooltip.wrap_(tip, Blockly.Tooltip.LIMIT);
+  // Create new text, line by line.
+  var lines = tip.split('\n');
+  for (var i = 0; i < lines.length; i++) {
+    var div = document.createElement('div');
+    div.appendChild(document.createTextNode(lines[i]));
+    Blockly.Tooltip.DIV.appendChild(div);
+  }
+  var rtl = Blockly.Tooltip.element_.RTL;
+  var windowSize = goog.dom.getViewportSize();
+  // Display the tooltip.
+  Blockly.Tooltip.DIV.style.direction = rtl ? 'rtl' : 'ltr';
+  Blockly.Tooltip.DIV.style.display = 'block';
+  Blockly.Tooltip.visible = true;
+  // Move the tooltip to just below the cursor.
+  var anchorX = Blockly.Tooltip.lastX_;
+  if (rtl) {
+    anchorX -= Blockly.Tooltip.OFFSET_X + Blockly.Tooltip.DIV.offsetWidth;
+  } else {
+    anchorX += Blockly.Tooltip.OFFSET_X;
+  }
+  var anchorY = Blockly.Tooltip.lastY_ + Blockly.Tooltip.OFFSET_Y;
+
+  if (anchorY + Blockly.Tooltip.DIV.offsetHeight >
+      windowSize.height + window.scrollY) {
+    // Falling off the bottom of the screen; shift the tooltip up.
+    anchorY -= Blockly.Tooltip.DIV.offsetHeight + 2 * Blockly.Tooltip.OFFSET_Y;
+  }
+  if (rtl) {
+    // Prevent falling off left edge in RTL mode.
+    anchorX = Math.max(Blockly.Tooltip.MARGINS - window.scrollX, anchorX);
+  } else {
+    if (anchorX + Blockly.Tooltip.DIV.offsetWidth >
+        windowSize.width + window.scrollX - 2 * Blockly.Tooltip.MARGINS) {
+      // Falling off the right edge of the screen;
+      // clamp the tooltip on the edge.
+      anchorX = windowSize.width - Blockly.Tooltip.DIV.offsetWidth -
+          2 * Blockly.Tooltip.MARGINS;
+    }
+  }
+  Blockly.Tooltip.DIV.style.top = anchorY + 'px';
+  Blockly.Tooltip.DIV.style.left = anchorX + 'px';
+};
+
+/**
+ * Wrap text to the specified width.
+ * @param {string} text Text to wrap.
+ * @param {number} limit Width to wrap each line.
+ * @return {string} Wrapped text.
+ * @private
+ */
+Blockly.Tooltip.wrap_ = function(text, limit) {
+  if (text.length <= limit) {
+    // Short text, no need to wrap.
+    return text;
+  }
+  // Split the text into words.
+  var words = text.trim().split(/\s+/);
+  // Set limit to be the length of the largest word.
+  for (var i = 0; i < words.length; i++) {
+    if (words[i].length > limit) {
+      limit = words[i].length;
+    }
+  }
+
+  var lastScore;
+  var score = -Infinity;
+  var lastText;
+  var lineCount = 1;
+  do {
+    lastScore = score;
+    lastText = text;
+    // Create a list of booleans representing if a space (false) or
+    // a break (true) appears after each word.
+    var wordBreaks = [];
+    // Seed the list with evenly spaced linebreaks.
+    var steps = words.length / lineCount;
+    var insertedBreaks = 1;
+    for (var i = 0; i < words.length - 1; i++) {
+      if (insertedBreaks < (i + 1.5) / steps) {
+        insertedBreaks++;
+        wordBreaks[i] = true;
+      } else {
+        wordBreaks[i] = false;
+      }
+    }
+    wordBreaks = Blockly.Tooltip.wrapMutate_(words, wordBreaks, limit);
+    score = Blockly.Tooltip.wrapScore_(words, wordBreaks, limit);
+    text = Blockly.Tooltip.wrapToText_(words, wordBreaks);
+    lineCount++;
+  } while (score > lastScore);
+  return lastText;
+};
+
+/**
+ * Compute a score for how good the wrapping is.
+ * @param {!Array.<string>} words Array of each word.
+ * @param {!Array.<boolean>} wordBreaks Array of line breaks.
+ * @param {number} limit Width to wrap each line.
+ * @return {number} Larger the better.
+ * @private
+ */
+Blockly.Tooltip.wrapScore_ = function(words, wordBreaks, limit) {
+  // If this function becomes a performance liability, add caching.
+  // Compute the length of each line.
+  var lineLengths = [0];
+  var linePunctuation = [];
+  for (var i = 0; i < words.length; i++) {
+    lineLengths[lineLengths.length - 1] += words[i].length;
+    if (wordBreaks[i] === true) {
+      lineLengths.push(0);
+      linePunctuation.push(words[i].charAt(words[i].length - 1));
+    } else if (wordBreaks[i] === false) {
+      lineLengths[lineLengths.length - 1]++;
+    }
+  }
+  var maxLength = Math.max.apply(Math, lineLengths);
+
+  var score = 0;
+  for (var i = 0; i < lineLengths.length; i++) {
+    // Optimize for width.
+    // -2 points per char over limit (scaled to the power of 1.5).
+    score -= Math.pow(Math.abs(limit - lineLengths[i]), 1.5) * 2;
+    // Optimize for even lines.
+    // -1 point per char smaller than max (scaled to the power of 1.5).
+    score -= Math.pow(maxLength - lineLengths[i], 1.5);
+    // Optimize for structure.
+    // Add score to line endings after punctuation.
+    if ('.?!'.indexOf(linePunctuation[i]) != -1) {
+      score += limit / 3;
+    } else if (',;)]}'.indexOf(linePunctuation[i]) != -1) {
+      score += limit / 4;
+    }
+  }
+  // All else being equal, the last line should not be longer than the
+  // previous line.  For example, this looks wrong:
+  // aaa bbb
+  // ccc ddd eee
+  if (lineLengths.length > 1 && lineLengths[lineLengths.length - 1] <=
+      lineLengths[lineLengths.length - 2]) {
+    score += 0.5;
+  }
+  return score;
+};
+
+/**
+ * Mutate the array of line break locations until an optimal solution is found.
+ * No line breaks are added or deleted, they are simply moved around.
+ * @param {!Array.<string>} words Array of each word.
+ * @param {!Array.<boolean>} wordBreaks Array of line breaks.
+ * @param {number} limit Width to wrap each line.
+ * @return {!Array.<boolean>} New array of optimal line breaks.
+ * @private
+ */
+Blockly.Tooltip.wrapMutate_ = function(words, wordBreaks, limit) {
+  var bestScore = Blockly.Tooltip.wrapScore_(words, wordBreaks, limit);
+  var bestBreaks;
+  // Try shifting every line break forward or backward.
+  for (var i = 0; i < wordBreaks.length - 1; i++) {
+    if (wordBreaks[i] == wordBreaks[i + 1]) {
+      continue;
+    }
+    var mutatedWordBreaks = [].concat(wordBreaks);
+    mutatedWordBreaks[i] = !mutatedWordBreaks[i];
+    mutatedWordBreaks[i + 1] = !mutatedWordBreaks[i + 1];
+    var mutatedScore =
+        Blockly.Tooltip.wrapScore_(words, mutatedWordBreaks, limit);
+    if (mutatedScore > bestScore) {
+      bestScore = mutatedScore;
+      bestBreaks = mutatedWordBreaks;
+    }
+  }
+  if (bestBreaks) {
+    // Found an improvement.  See if it may be improved further.
+    return Blockly.Tooltip.wrapMutate_(words, bestBreaks, limit);
+  }
+  // No improvements found.  Done.
+  return wordBreaks;
+};
+
+/**
+ * Reassemble the array of words into text, with the specified line breaks.
+ * @param {!Array.<string>} words Array of each word.
+ * @param {!Array.<boolean>} wordBreaks Array of line breaks.
+ * @return {string} Plain text.
+ * @private
+ */
+Blockly.Tooltip.wrapToText_ = function(words, wordBreaks) {
+  var text = [];
+  for (var i = 0; i < words.length; i++) {
+    text.push(words[i]);
+    if (wordBreaks[i] !== undefined) {
+      text.push(wordBreaks[i] ? '\n' : ' ');
+    }
+  }
+  return text.join('');
+};

src/blockly/core/trashcan.js

@@ -0,0 +1,297 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2011 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Object representing a trash can icon.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.Trashcan');
+
+goog.require('goog.Timer');
+goog.require('goog.dom');
+goog.require('goog.math');
+goog.require('goog.math.Rect');
+
+
+/**
+ * Class for a trash can.
+ * @param {!Blockly.Workspace} workspace The workspace to sit in.
+ * @constructor
+ */
+Blockly.Trashcan = function(workspace) {
+  this.workspace_ = workspace;
+};
+
+/**
+ * Width of both the trash can and lid images.
+ * @type {number}
+ * @private
+ */
+Blockly.Trashcan.prototype.WIDTH_ = 47;
+
+/**
+ * Height of the trashcan image (minus lid).
+ * @type {number}
+ * @private
+ */
+Blockly.Trashcan.prototype.BODY_HEIGHT_ = 44;
+
+/**
+ * Height of the lid image.
+ * @type {number}
+ * @private
+ */
+Blockly.Trashcan.prototype.LID_HEIGHT_ = 16;
+
+/**
+ * Distance between trashcan and bottom edge of workspace.
+ * @type {number}
+ * @private
+ */
+Blockly.Trashcan.prototype.MARGIN_BOTTOM_ = 20;
+
+/**
+ * Distance between trashcan and right edge of workspace.
+ * @type {number}
+ * @private
+ */
+Blockly.Trashcan.prototype.MARGIN_SIDE_ = 20;
+
+/**
+ * Extent of hotspot on all sides beyond the size of the image.
+ * @type {number}
+ * @private
+ */
+Blockly.Trashcan.prototype.MARGIN_HOTSPOT_ = 25;
+
+/**
+ * Current open/close state of the lid.
+ * @type {boolean}
+ */
+Blockly.Trashcan.prototype.isOpen = false;
+
+/**
+ * The SVG group containing the trash can.
+ * @type {Element}
+ * @private
+ */
+Blockly.Trashcan.prototype.svgGroup_ = null;
+
+/**
+ * The SVG image element of the trash can lid.
+ * @type {Element}
+ * @private
+ */
+Blockly.Trashcan.prototype.svgLid_ = null;
+
+/**
+ * Task ID of opening/closing animation.
+ * @type {number}
+ * @private
+ */
+Blockly.Trashcan.prototype.lidTask_ = 0;
+
+/**
+ * Current state of lid opening (0.0 = closed, 1.0 = open).
+ * @type {number}
+ * @private
+ */
+Blockly.Trashcan.prototype.lidOpen_ = 0;
+
+/**
+ * Left coordinate of the trash can.
+ * @type {number}
+ * @private
+ */
+Blockly.Trashcan.prototype.left_ = 0;
+
+/**
+ * Top coordinate of the trash can.
+ * @type {number}
+ * @private
+ */
+Blockly.Trashcan.prototype.top_ = 0;
+
+/**
+ * Create the trash can elements.
+ * @return {!Element} The trash can's SVG group.
+ */
+Blockly.Trashcan.prototype.createDom = function() {
+  /* Here's the markup that will be generated:
+  <g class="blocklyTrash">
+    <clippath id="blocklyTrashBodyClipPath837493">
+      <rect width="47" height="45" y="15"></rect>
+    </clippath>
+    <image width="64" height="92" y="-32" xlink:href="media/sprites.png"
+        clip-path="url(#blocklyTrashBodyClipPath837493)"></image>
+    <clippath id="blocklyTrashLidClipPath837493">
+      <rect width="47" height="15"></rect>
+    </clippath>
+    <image width="84" height="92" y="-32" xlink:href="media/sprites.png"
+        clip-path="url(#blocklyTrashLidClipPath837493)"></image>
+  </g>
+  */
+  this.svgGroup_ = Blockly.createSvgElement('g',
+      {'class': 'blocklyTrash'}, null);
+  var rnd = String(Math.random()).substring(2);
+  var clip = Blockly.createSvgElement('clipPath',
+      {'id': 'blocklyTrashBodyClipPath' + rnd},
+      this.svgGroup_);
+  Blockly.createSvgElement('rect',
+      {'width': this.WIDTH_, 'height': this.BODY_HEIGHT_,
+       'y': this.LID_HEIGHT_},
+      clip);
+  var body = Blockly.createSvgElement('image',
+      {'width': Blockly.SPRITE.width, 'height': Blockly.SPRITE.height, 'y': -32,
+       'clip-path': 'url(#blocklyTrashBodyClipPath' + rnd + ')'},
+      this.svgGroup_);
+  body.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href',
+      this.workspace_.options.pathToMedia + Blockly.SPRITE.url);
+
+  var clip = Blockly.createSvgElement('clipPath',
+      {'id': 'blocklyTrashLidClipPath' + rnd},
+      this.svgGroup_);
+  Blockly.createSvgElement('rect',
+      {'width': this.WIDTH_, 'height': this.LID_HEIGHT_}, clip);
+  this.svgLid_ = Blockly.createSvgElement('image',
+      {'width': Blockly.SPRITE.width, 'height': Blockly.SPRITE.height, 'y': -32,
+       'clip-path': 'url(#blocklyTrashLidClipPath' + rnd + ')'},
+      this.svgGroup_);
+  this.svgLid_.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href',
+      this.workspace_.options.pathToMedia + Blockly.SPRITE.url);
+
+  Blockly.bindEvent_(this.svgGroup_, 'mouseup', this, this.click);
+  this.animateLid_();
+  return this.svgGroup_;
+};
+
+/**
+ * Initialize the trash can.
+ * @param {number} bottom Distance from workspace bottom to bottom of trashcan.
+ * @return {number} Distance from workspace bottom to the top of trashcan.
+ */
+Blockly.Trashcan.prototype.init = function(bottom) {
+  this.bottom_ =  this.MARGIN_BOTTOM_ + bottom;
+  this.setOpen_(false);
+  return this.bottom_ + this.BODY_HEIGHT_ + this.LID_HEIGHT_;
+};
+
+/**
+ * Dispose of this trash can.
+ * Unlink from all DOM elements to prevent memory leaks.
+ */
+Blockly.Trashcan.prototype.dispose = function() {
+  if (this.svgGroup_) {
+    goog.dom.removeNode(this.svgGroup_);
+    this.svgGroup_ = null;
+  }
+  this.svgLid_ = null;
+  this.workspace_ = null;
+  goog.Timer.clear(this.lidTask_);
+};
+
+/**
+ * Move the trash can to the bottom-right corner.
+ */
+Blockly.Trashcan.prototype.position = function() {
+  var metrics = this.workspace_.getMetrics();
+  if (!metrics) {
+    // There are no metrics available (workspace is probably not visible).
+    return;
+  }
+  if (this.workspace_.RTL) {
+    this.left_ = this.MARGIN_SIDE_ + Blockly.Scrollbar.scrollbarThickness;
+  } else {
+    this.left_ = metrics.viewWidth + metrics.absoluteLeft -
+        this.WIDTH_ - this.MARGIN_SIDE_ - Blockly.Scrollbar.scrollbarThickness;
+  }
+  this.top_ = metrics.viewHeight + metrics.absoluteTop -
+      (this.BODY_HEIGHT_ + this.LID_HEIGHT_) - this.bottom_;
+  this.svgGroup_.setAttribute('transform',
+      'translate(' + this.left_ + ',' + this.top_ + ')');
+};
+
+/**
+ * Return the deletion rectangle for this trash can.
+ * @return {goog.math.Rect} Rectangle in which to delete.
+ */
+Blockly.Trashcan.prototype.getRect = function() {
+  var trashXY = Blockly.getSvgXY_(this.svgGroup_, this.workspace_);
+  return new goog.math.Rect(
+      trashXY.x - this.MARGIN_HOTSPOT_,
+      trashXY.y - this.MARGIN_HOTSPOT_,
+      this.WIDTH_ + 2 * this.MARGIN_HOTSPOT_,
+      this.BODY_HEIGHT_ + this.LID_HEIGHT_ + 2 * this.MARGIN_HOTSPOT_);
+};
+
+/**
+ * Flip the lid open or shut.
+ * @param {boolean} state True if open.
+ * @private
+ */
+Blockly.Trashcan.prototype.setOpen_ = function(state) {
+  if (this.isOpen == state) {
+    return;
+  }
+  goog.Timer.clear(this.lidTask_);
+  this.isOpen = state;
+  this.animateLid_();
+};
+
+/**
+ * Rotate the lid open or closed by one step.  Then wait and recurse.
+ * @private
+ */
+Blockly.Trashcan.prototype.animateLid_ = function() {
+  this.lidOpen_ += this.isOpen ? 0.2 : -0.2;
+  this.lidOpen_ = goog.math.clamp(this.lidOpen_, 0, 1);
+  var lidAngle = this.lidOpen_ * 45;
+  this.svgLid_.setAttribute('transform', 'rotate(' +
+      (this.workspace_.RTL ? -lidAngle : lidAngle) + ',' +
+      (this.workspace_.RTL ? 4 : this.WIDTH_ - 4) + ',' +
+      (this.LID_HEIGHT_ - 2) + ')');
+  var opacity = goog.math.lerp(0.4, 0.8, this.lidOpen_);
+  this.svgGroup_.style.opacity = opacity;
+  if (this.lidOpen_ > 0 && this.lidOpen_ < 1) {
+    this.lidTask_ = goog.Timer.callOnce(this.animateLid_, 20, this);
+  }
+};
+
+/**
+ * Flip the lid shut.
+ * Called externally after a drag.
+ */
+Blockly.Trashcan.prototype.close = function() {
+  this.setOpen_(false);
+};
+
+/**
+ * Inspect the contents of the trash.
+ */
+Blockly.Trashcan.prototype.click = function() {
+  var dx = this.workspace_.startScrollX - this.workspace_.scrollX;
+  var dy = this.workspace_.startScrollY - this.workspace_.scrollY;
+  if (Math.sqrt(dx * dx + dy * dy) > Blockly.DRAG_RADIUS) {
+    return;
+  }
+  console.log('TODO: Inspect trash.');
+};

src/blockly/core/utils.js

@@ -0,0 +1,553 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2012 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Utility methods.
+ * These methods are not specific to Blockly, and could be factored out into
+ * a JavaScript framework such as Closure.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.utils');
+
+goog.require('goog.dom');
+goog.require('goog.events.BrowserFeature');
+goog.require('goog.math.Coordinate');
+goog.require('goog.userAgent');
+
+
+/**
+ * Add a CSS class to a element.
+ * Similar to Closure's goog.dom.classes.add, except it handles SVG elements.
+ * @param {!Element} element DOM element to add class to.
+ * @param {string} className Name of class to add.
+ * @private
+ */
+Blockly.addClass_ = function(element, className) {
+  var classes = element.getAttribute('class') || '';
+  if ((' ' + classes + ' ').indexOf(' ' + className + ' ') == -1) {
+    if (classes) {
+      classes += ' ';
+    }
+    element.setAttribute('class', classes + className);
+  }
+};
+
+/**
+ * Remove a CSS class from a element.
+ * Similar to Closure's goog.dom.classes.remove, except it handles SVG elements.
+ * @param {!Element} element DOM element to remove class from.
+ * @param {string} className Name of class to remove.
+ * @private
+ */
+Blockly.removeClass_ = function(element, className) {
+  var classes = element.getAttribute('class');
+  if ((' ' + classes + ' ').indexOf(' ' + className + ' ') != -1) {
+    var classList = classes.split(/\s+/);
+    for (var i = 0; i < classList.length; i++) {
+      if (!classList[i] || classList[i] == className) {
+        classList.splice(i, 1);
+        i--;
+      }
+    }
+    if (classList.length) {
+      element.setAttribute('class', classList.join(' '));
+    } else {
+      element.removeAttribute('class');
+    }
+  }
+};
+
+/**
+ * Checks if an element has the specified CSS class.
+ * Similar to Closure's goog.dom.classes.has, except it handles SVG elements.
+ * @param {!Element} element DOM element to check.
+ * @param {string} className Name of class to check.
+ * @return {boolean} True if class exists, false otherwise.
+ * @private
+ */
+Blockly.hasClass_ = function(element, className) {
+  var classes = element.getAttribute('class');
+  return (' ' + classes + ' ').indexOf(' ' + className + ' ') != -1;
+};
+
+/**
+ * Bind an event to a function call.
+ * @param {!Node} node Node upon which to listen.
+ * @param {string} name Event name to listen to (e.g. 'mousedown').
+ * @param {Object} thisObject The value of 'this' in the function.
+ * @param {!Function} func Function to call when event is triggered.
+ * @return {!Array.<!Array>} Opaque data that can be passed to unbindEvent_.
+ * @private
+ */
+Blockly.bindEvent_ = function(node, name, thisObject, func) {
+  if (thisObject) {
+    var wrapFunc = function(e) {
+      func.call(thisObject, e);
+    };
+  } else {
+    var wrapFunc = func;
+  }
+  node.addEventListener(name, wrapFunc, false);
+  var bindData = [[node, name, wrapFunc]];
+  // Add equivalent touch event.
+  if (name in Blockly.bindEvent_.TOUCH_MAP) {
+    wrapFunc = function(e) {
+      // Punt on multitouch events.
+      if (e.changedTouches.length == 1) {
+        // Map the touch event's properties to the event.
+        var touchPoint = e.changedTouches[0];
+        e.clientX = touchPoint.clientX;
+        e.clientY = touchPoint.clientY;
+      }
+      func.call(thisObject, e);
+      // Stop the browser from scrolling/zooming the page.
+      e.preventDefault();
+    };
+    for (var i = 0, eventName;
+         eventName = Blockly.bindEvent_.TOUCH_MAP[name][i]; i++) {
+      node.addEventListener(eventName, wrapFunc, false);
+      bindData.push([node, eventName, wrapFunc]);
+    }
+  }
+  return bindData;
+};
+
+/**
+ * The TOUCH_MAP lookup dictionary specifies additional touch events to fire,
+ * in conjunction with mouse events.
+ * @type {Object}
+ */
+Blockly.bindEvent_.TOUCH_MAP = {};
+if (goog.events.BrowserFeature.TOUCH_ENABLED) {
+  Blockly.bindEvent_.TOUCH_MAP = {
+    'mousedown': ['touchstart'],
+    'mousemove': ['touchmove'],
+    'mouseup': ['touchend', 'touchcancel']
+  };
+}
+
+/**
+ * Unbind one or more events event from a function call.
+ * @param {!Array.<!Array>} bindData Opaque data from bindEvent_.  This list is
+ *     emptied during the course of calling this function.
+ * @return {!Function} The function call.
+ * @private
+ */
+Blockly.unbindEvent_ = function(bindData) {
+  while (bindData.length) {
+    var bindDatum = bindData.pop();
+    var node = bindDatum[0];
+    var name = bindDatum[1];
+    var func = bindDatum[2];
+    node.removeEventListener(name, func, false);
+  }
+  return func;
+};
+
+/**
+ * Fire a synthetic event synchronously.
+ * @param {!EventTarget} node The event's target node.
+ * @param {string} eventName Name of event (e.g. 'click').
+ */
+Blockly.fireUiEventNow = function(node, eventName) {
+  // Remove the event from the anti-duplicate database.
+  var list = Blockly.fireUiEvent.DB_[eventName];
+  if (list) {
+    var i = list.indexOf(node);
+    if (i != -1) {
+      list.splice(i, 1);
+    }
+  }
+  // Fire the event in a browser-compatible way.
+  if (document.createEvent) {
+    // W3
+    var evt = document.createEvent('UIEvents');
+    evt.initEvent(eventName, true, true);  // event type, bubbling, cancelable
+    node.dispatchEvent(evt);
+  } else if (document.createEventObject) {
+    // MSIE
+    var evt = document.createEventObject();
+    node.fireEvent('on' + eventName, evt);
+  } else {
+    throw 'FireEvent: No event creation mechanism.';
+  }
+};
+
+/**
+ * Fire a synthetic event asynchronously.  Groups of simultaneous events (e.g.
+ * a tree of blocks being deleted) are merged into one event.
+ * @param {!EventTarget} node The event's target node.
+ * @param {string} eventName Name of event (e.g. 'click').
+ */
+Blockly.fireUiEvent = function(node, eventName) {
+  var list = Blockly.fireUiEvent.DB_[eventName];
+  if (list) {
+    if (list.indexOf(node) != -1) {
+      // This event is already scheduled to fire.
+      return;
+    }
+    list.push(node);
+  } else {
+    Blockly.fireUiEvent.DB_[eventName] = [node];
+  }
+  var fire = function() {
+    Blockly.fireUiEventNow(node, eventName);
+  };
+  setTimeout(fire, 0);
+};
+
+/**
+ * Database of upcoming firing event types.
+ * Used to fire only one event after multiple changes.
+ * @type {!Object}
+ * @private
+ */
+Blockly.fireUiEvent.DB_ = {};
+
+/**
+ * Don't do anything for this event, just halt propagation.
+ * @param {!Event} e An event.
+ */
+Blockly.noEvent = function(e) {
+  // This event has been handled.  No need to bubble up to the document.
+  e.preventDefault();
+  e.stopPropagation();
+};
+
+/**
+ * Is this event targeting a text input widget?
+ * @param {!Event} e An event.
+ * @return {boolean} True if text input.
+ * @private
+ */
+Blockly.isTargetInput_ = function(e) {
+  return e.target.type == 'textarea' || e.target.type == 'text' ||
+         e.target.type == 'number' || e.target.type == 'email' ||
+         e.target.type == 'password' || e.target.type == 'search' ||
+         e.target.type == 'tel' || e.target.type == 'url' ||
+         e.target.isContentEditable;
+};
+
+/**
+ * Return the coordinates of the top-left corner of this element relative to
+ * its parent.  Only for SVG elements and children (e.g. rect, g, path).
+ * @param {!Element} element SVG element to find the coordinates of.
+ * @return {!goog.math.Coordinate} Object with .x and .y properties.
+ * @private
+ */
+Blockly.getRelativeXY_ = function(element) {
+  var xy = new goog.math.Coordinate(0, 0);
+  // First, check for x and y attributes.
+  var x = element.getAttribute('x');
+  if (x) {
+    xy.x = parseInt(x, 10);
+  }
+  var y = element.getAttribute('y');
+  if (y) {
+    xy.y = parseInt(y, 10);
+  }
+  // Second, check for transform="translate(...)" attribute.
+  var transform = element.getAttribute('transform');
+  var r = transform && transform.match(Blockly.getRelativeXY_.XY_REGEXP_);
+  if (r) {
+    xy.x += parseFloat(r[1]);
+    if (r[3]) {
+      xy.y += parseFloat(r[3]);
+    }
+  }
+  return xy;
+};
+
+/**
+ * Static regex to pull the x,y values out of an SVG translate() directive.
+ * Note that Firefox and IE (9,10) return 'translate(12)' instead of
+ * 'translate(12, 0)'.
+ * Note that IE (9,10) returns 'translate(16 8)' instead of 'translate(16, 8)'.
+ * Note that IE has been reported to return scientific notation (0.123456e-42).
+ * @type {!RegExp}
+ * @private
+ */
+Blockly.getRelativeXY_.XY_REGEXP_ =
+    /translate\(\s*([-+\d.e]+)([ ,]\s*([-+\d.e]+)\s*\))?/;
+
+/**
+ * Return the absolute coordinates of the top-left corner of this element,
+ * scales that after canvas SVG element, if it's a descendant.
+ * The origin (0,0) is the top-left corner of the Blockly SVG.
+ * @param {!Element} element Element to find the coordinates of.
+ * @param {!Blockly.Workspace} workspace Element must be in this workspace.
+ * @return {!goog.math.Coordinate} Object with .x and .y properties.
+ * @private
+ */
+Blockly.getSvgXY_ = function(element, workspace) {
+  var x = 0;
+  var y = 0;
+  var scale = 1;
+  if (goog.dom.contains(workspace.getCanvas(), element) ||
+      goog.dom.contains(workspace.getBubbleCanvas(), element)) {
+    // Before the SVG canvas, scale the coordinates.
+    scale = workspace.scale;
+  }
+  do {
+    // Loop through this block and every parent.
+    var xy = Blockly.getRelativeXY_(element);
+    if (element == workspace.getCanvas() ||
+        element == workspace.getBubbleCanvas()) {
+      // After the SVG canvas, don't scale the coordinates.
+      scale = 1;
+    }
+    x += xy.x * scale;
+    y += xy.y * scale;
+    element = element.parentNode;
+  } while (element && element != workspace.options.svg);
+  return new goog.math.Coordinate(x, y);
+};
+
+/**
+ * Helper method for creating SVG elements.
+ * @param {string} name Element's tag name.
+ * @param {!Object} attrs Dictionary of attribute names and values.
+ * @param {Element} parent Optional parent on which to append the element.
+ * @param {Blockly.Workspace=} opt_workspace Optional workspace for access to
+ *     context (scale...).
+ * @return {!SVGElement} Newly created SVG element.
+ */
+Blockly.createSvgElement = function(name, attrs, parent, opt_workspace) {
+  var e = /** @type {!SVGElement} */ (
+      document.createElementNS(Blockly.SVG_NS, name));
+  for (var key in attrs) {
+    e.setAttribute(key, attrs[key]);
+  }
+  // IE defines a unique attribute "runtimeStyle", it is NOT applied to
+  // elements created with createElementNS. However, Closure checks for IE
+  // and assumes the presence of the attribute and crashes.
+  if (document.body.runtimeStyle) {  // Indicates presence of IE-only attr.
+    e.runtimeStyle = e.currentStyle = e.style;
+  }
+  if (parent) {
+    parent.appendChild(e);
+  }
+  return e;
+};
+
+/**
+ * Deselect any selections on the webpage.
+ * Chrome will select text outside the SVG when double-clicking.
+ * Deselect this text, so that it doesn't mess up any subsequent drag.
+ */
+Blockly.removeAllRanges = function() {
+  if (window.getSelection) {
+    setTimeout(function() {
+        try {
+          var selection = window.getSelection();
+          if (!selection.isCollapsed) {
+            selection.removeAllRanges();
+          }
+        } catch (e) {
+          // MSIE throws 'error 800a025e' here.
+        }
+      }, 0);
+  }
+};
+
+/**
+ * Is this event a right-click?
+ * @param {!Event} e Mouse event.
+ * @return {boolean} True if right-click.
+ */
+Blockly.isRightButton = function(e) {
+  if (e.ctrlKey && goog.userAgent.MAC) {
+    // Control-clicking on Mac OS X is treated as a right-click.
+    // WebKit on Mac OS X fails to change button to 2 (but Gecko does).
+    return true;
+  }
+  return e.button == 2;
+};
+
+/**
+ * Return the converted coordinates of the given mouse event.
+ * The origin (0,0) is the top-left corner of the Blockly svg.
+ * @param {!Event} e Mouse event.
+ * @param {!Element} svg SVG element.
+ * @return {!Object} Object with .x and .y properties.
+ */
+Blockly.mouseToSvg = function(e, svg) {
+  var svgPoint = svg.createSVGPoint();
+  svgPoint.x = e.clientX;
+  svgPoint.y = e.clientY;
+  var matrix = svg.getScreenCTM();
+  matrix = matrix.inverse();
+  return svgPoint.matrixTransform(matrix);
+};
+
+/**
+ * Given an array of strings, return the length of the shortest one.
+ * @param {!Array.<string>} array Array of strings.
+ * @return {number} Length of shortest string.
+ */
+Blockly.shortestStringLength = function(array) {
+  if (!array.length) {
+    return 0;
+  }
+  var len = array[0].length;
+  for (var i = 1; i < array.length; i++) {
+    len = Math.min(len, array[i].length);
+  }
+  return len;
+};
+
+/**
+ * Given an array of strings, return the length of the common prefix.
+ * Words may not be split.  Any space after a word is included in the length.
+ * @param {!Array.<string>} array Array of strings.
+ * @param {number=} opt_shortest Length of shortest string.
+ * @return {number} Length of common prefix.
+ */
+Blockly.commonWordPrefix = function(array, opt_shortest) {
+  if (!array.length) {
+    return 0;
+  } else if (array.length == 1) {
+    return array[0].length;
+  }
+  var wordPrefix = 0;
+  var max = opt_shortest || Blockly.shortestStringLength(array);
+  for (var len = 0; len < max; len++) {
+    var letter = array[0][len];
+    for (var i = 1; i < array.length; i++) {
+      if (letter != array[i][len]) {
+        return wordPrefix;
+      }
+    }
+    if (letter == ' ') {
+      wordPrefix = len + 1;
+    }
+  }
+  for (var i = 1; i < array.length; i++) {
+    var letter = array[i][len];
+    if (letter && letter != ' ') {
+      return wordPrefix;
+    }
+  }
+  return max;
+};
+
+/**
+ * Given an array of strings, return the length of the common suffix.
+ * Words may not be split.  Any space after a word is included in the length.
+ * @param {!Array.<string>} array Array of strings.
+ * @param {number=} opt_shortest Length of shortest string.
+ * @return {number} Length of common suffix.
+ */
+Blockly.commonWordSuffix = function(array, opt_shortest) {
+  if (!array.length) {
+    return 0;
+  } else if (array.length == 1) {
+    return array[0].length;
+  }
+  var wordPrefix = 0;
+  var max = opt_shortest || Blockly.shortestStringLength(array);
+  for (var len = 0; len < max; len++) {
+    var letter = array[0].substr(-len - 1, 1);
+    for (var i = 1; i < array.length; i++) {
+      if (letter != array[i].substr(-len - 1, 1)) {
+        return wordPrefix;
+      }
+    }
+    if (letter == ' ') {
+      wordPrefix = len + 1;
+    }
+  }
+  for (var i = 1; i < array.length; i++) {
+    var letter = array[i].charAt(array[i].length - len - 1);
+    if (letter && letter != ' ') {
+      return wordPrefix;
+    }
+  }
+  return max;
+};
+
+/**
+ * Is the given string a number (includes negative and decimals).
+ * @param {string} str Input string.
+ * @return {boolean} True if number, false otherwise.
+ */
+Blockly.isNumber = function(str) {
+  return !!str.match(/^\s*-?\d+(\.\d+)?\s*$/);
+};
+
+/**
+ * Parse a string with any number of interpolation tokens (%1, %2, ...).
+ * '%' characters may be self-escaped (%%).
+ * @param {string} message Text containing interpolation tokens.
+ * @return {!Array.<string|number>} Array of strings and numbers.
+ */
+Blockly.tokenizeInterpolation = function(message) {
+  var tokens = [];
+  var chars = message.split('');
+  chars.push('');  // End marker.
+  // Parse the message with a finite state machine.
+  // 0 - Base case.
+  // 1 - % found.
+  // 2 - Digit found.
+  var state = 0;
+  var buffer = [];
+  var number = null;
+  for (var i = 0; i < chars.length; i++) {
+    var c = chars[i];
+    if (state == 0) {
+      if (c == '%') {
+        state = 1;  // Start escape.
+      } else {
+        buffer.push(c);  // Regular char.
+      }
+    } else if (state == 1) {
+      if (c == '%') {
+        buffer.push(c);  // Escaped %: %%
+        state = 0;
+      } else if ('0' <= c && c <= '9') {
+        state = 2;
+        number = c;
+        var text = buffer.join('');
+        if (text) {
+          tokens.push(text);
+        }
+        buffer.length = 0;
+      } else {
+        buffer.push('%', c);  // Not an escape: %a
+        state = 0;
+      }
+    } else if (state == 2) {
+      if ('0' <= c && c <= '9') {
+        number += c;  // Multi-digit number.
+      } else {
+        tokens.push(parseInt(number, 10));
+        i--;  // Parse this char again.
+        state = 0;
+      }
+    }
+  }
+  var text = buffer.join('');
+  if (text) {
+    tokens.push(text);
+  }
+  return tokens;
+};

src/blockly/core/variables.js

@@ -0,0 +1,189 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2012 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Utility functions for handling variables.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.Variables');
+
+// TODO(scr): Fix circular dependencies
+// goog.require('Blockly.Block');
+goog.require('Blockly.Workspace');
+goog.require('goog.string');
+
+
+/**
+ * Category to separate variable names from procedures and generated functions.
+ */
+Blockly.Variables.NAME_TYPE = 'VARIABLE';
+
+/**
+ * Find all user-created variables.
+ * @param {!Blockly.Block|!Blockly.Workspace} root Root block or workspace.
+ * @return {!Array.<string>} Array of variable names.
+ */
+Blockly.Variables.allVariables = function(root) {
+  var blocks;
+  if (root.getDescendants) {
+    // Root is Block.
+    blocks = root.getDescendants();
+  } else if (root.getAllBlocks) {
+    // Root is Workspace.
+    blocks = root.getAllBlocks();
+  } else {
+    throw 'Not Block or Workspace: ' + root;
+  }
+  var variableHash = Object.create(null);
+  // Iterate through every block and add each variable to the hash.
+  for (var x = 0; x < blocks.length; x++) {
+    if (blocks[x].getVars) {
+      var blockVariables = blocks[x].getVars();
+      for (var y = 0; y < blockVariables.length; y++) {
+        var varName = blockVariables[y];
+        // Variable name may be null if the block is only half-built.
+        if (varName) {
+          variableHash[varName.toLowerCase()] = varName;
+        }
+      }
+    }
+  }
+  // Flatten the hash into a list.
+  var variableList = [];
+  for (var name in variableHash) {
+    variableList.push(variableHash[name]);
+  }
+  return variableList;
+};
+
+/**
+ * Find all instances of the specified variable and rename them.
+ * @param {string} oldName Variable to rename.
+ * @param {string} newName New variable name.
+ * @param {!Blockly.Workspace} workspace Workspace rename variables in.
+ */
+Blockly.Variables.renameVariable = function(oldName, newName, workspace) {
+  var blocks = workspace.getAllBlocks();
+  // Iterate through every block.
+  for (var i = 0; i < blocks.length; i++) {
+    if (blocks[i].renameVar) {
+      blocks[i].renameVar(oldName, newName);
+    }
+  }
+};
+
+/**
+ * Construct the blocks required by the flyout for the variable category.
+ * @param {!Blockly.Workspace} workspace The workspace contianing variables.
+ * @return {!Array.<!Element>} Array of XML block elements.
+ */
+Blockly.Variables.flyoutCategory = function(workspace) {
+  var variableList = Blockly.Variables.allVariables(workspace);
+  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++) {
+    if (Blockly.Blocks['variables_set']) {
+      // <block type="variables_set" gap="8">
+      //   <field name="VAR">item</field>
+      // </block>
+      var block = goog.dom.createDom('block');
+      block.setAttribute('type', 'variables_set');
+      if (Blockly.Blocks['variables_get']) {
+        block.setAttribute('gap', 8);
+      }
+      var field = goog.dom.createDom('field', null, variableList[i]);
+      field.setAttribute('name', 'VAR');
+      block.appendChild(field);
+      xmlList.push(block);
+    }
+    if (Blockly.Blocks['variables_get']) {
+      // <block type="variables_get" gap="24">
+      //   <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', 24);
+      }
+      var field = goog.dom.createDom('field', null, variableList[i]);
+      field.setAttribute('name', 'VAR');
+      block.appendChild(field);
+      xmlList.push(block);
+    }
+  }
+  return xmlList;
+};
+
+/**
+* Return a new variable name that is not yet being used. This will try to
+* generate single letter variable names in the range 'i' to 'z' to start with.
+* If no unique name is located it will try 'i' to 'z', 'a' to 'h',
+* then 'i2' to 'z2' etc.  Skip 'l'.
+ * @param {!Blockly.Workspace} workspace The workspace to be unique in.
+* @return {string} New variable name.
+*/
+Blockly.Variables.generateUniqueName = function(workspace) {
+  var variableList = Blockly.Variables.allVariables(workspace);
+  var newName = '';
+  if (variableList.length) {
+    var nameSuffix = 1;
+    var letters = 'ijkmnopqrstuvwxyzabcdefgh';  // No 'l'.
+    var letterIndex = 0;
+    var potName = letters.charAt(letterIndex);
+    while (!newName) {
+      var inUse = false;
+      for (var i = 0; i < variableList.length; i++) {
+        if (variableList[i].toLowerCase() == potName) {
+          // This potential name is already used.
+          inUse = true;
+          break;
+        }
+      }
+      if (inUse) {
+        // Try the next potential name.
+        letterIndex++;
+        if (letterIndex == letters.length) {
+          // Reached the end of the character sequence so back to 'i'.
+          // a new suffix.
+          letterIndex = 0;
+          nameSuffix++;
+        }
+        potName = letters.charAt(letterIndex);
+        if (nameSuffix > 1) {
+          potName += nameSuffix;
+        }
+      } else {
+        // We can use the current potential name.
+        newName = potName;
+      }
+    }
+  } else {
+    newName = 'i';
+  }
+  return newName;
+};

src/blockly/core/widgetdiv.js

@@ -0,0 +1,152 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2013 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview A div that floats on top of Blockly.  This singleton contains
+ *     temporary HTML UI widgets that the user is currently interacting with.
+ *     E.g. text input areas, colour pickers, context menus.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.WidgetDiv');
+
+goog.require('Blockly.Css');
+goog.require('goog.dom');
+goog.require('goog.style');
+
+
+/**
+ * The HTML container.  Set once by Blockly.WidgetDiv.createDom.
+ * @type {Element}
+ */
+Blockly.WidgetDiv.DIV = null;
+
+/**
+ * The object currently using this container.
+ * @type {Object}
+ * @private
+ */
+Blockly.WidgetDiv.owner_ = null;
+
+/**
+ * Optional cleanup function set by whichever object uses the widget.
+ * @type {Function}
+ * @private
+ */
+Blockly.WidgetDiv.dispose_ = null;
+
+/**
+ * Create the widget div and inject it onto the page.
+ */
+Blockly.WidgetDiv.createDom = function() {
+  if (Blockly.WidgetDiv.DIV) {
+    return;  // Already created.
+  }
+  // Create an HTML container for popup overlays (e.g. editor widgets).
+  Blockly.WidgetDiv.DIV = goog.dom.createDom('div', 'blocklyWidgetDiv');
+  document.body.appendChild(Blockly.WidgetDiv.DIV);
+};
+
+/**
+ * Initialize and display the widget div.  Close the old one if needed.
+ * @param {!Object} newOwner The object that will be using this container.
+ * @param {boolean} rtl Right-to-left (true) or left-to-right (false).
+ * @param {Function} dispose Optional cleanup function to be run when the widget
+ *   is closed.
+ */
+Blockly.WidgetDiv.show = function(newOwner, rtl, dispose) {
+  Blockly.WidgetDiv.hide();
+  Blockly.WidgetDiv.owner_ = newOwner;
+  Blockly.WidgetDiv.dispose_ = dispose;
+  // Temporarily move the widget to the top of the screen so that it does not
+  // cause a scrollbar jump in Firefox when displayed.
+  var xy = goog.style.getViewportPageOffset(document);
+  Blockly.WidgetDiv.DIV.style.top = xy.y + 'px';
+  Blockly.WidgetDiv.DIV.style.direction = rtl ? 'rtl' : 'ltr';
+  Blockly.WidgetDiv.DIV.style.display = 'block';
+};
+
+/**
+ * Destroy the widget and hide the div.
+ */
+Blockly.WidgetDiv.hide = function() {
+  if (Blockly.WidgetDiv.owner_) {
+    Blockly.WidgetDiv.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.owner_ = null;
+    Blockly.WidgetDiv.dispose_ = null;
+    goog.dom.removeChildren(Blockly.WidgetDiv.DIV);
+  }
+};
+
+/**
+ * Is the container visible?
+ * @return {boolean} True if visible.
+ */
+Blockly.WidgetDiv.isVisible = function() {
+  return !!Blockly.WidgetDiv.owner_;
+};
+
+/**
+ * Destroy the widget and hide the div if it is being used by the specified
+ *   object.
+ * @param {!Object} oldOwner The object that was using this container.
+ */
+Blockly.WidgetDiv.hideIfOwner = function(oldOwner) {
+  if (Blockly.WidgetDiv.owner_ == oldOwner) {
+    Blockly.WidgetDiv.hide();
+  }
+};
+
+/**
+ * Position the widget at a given location.  Prevent the widget from going
+ * offscreen top or left (right in RTL).
+ * @param {number} anchorX Horizontal location (window coorditates, not body).
+ * @param {number} anchorY Vertical location (window coorditates, not body).
+ * @param {!goog.math.Size} windowSize Height/width of window.
+ * @param {!goog.math.Coordinate} scrollOffset X/y of window scrollbars.
+ * @param {boolean} rtl True if RTL, false if LTR.
+ */
+Blockly.WidgetDiv.position = function(anchorX, anchorY, windowSize,
+                                      scrollOffset, rtl) {
+  // Don't let the widget go above the top edge of the window.
+  if (anchorY < scrollOffset.y) {
+    anchorY = scrollOffset.y;
+  }
+  if (rtl) {
+    // Don't let the widget go right of the right edge of the window.
+    if (anchorX > windowSize.width + scrollOffset.x) {
+      anchorX = windowSize.width + scrollOffset.x;
+    }
+  } else {
+    // Don't let the widget go left of the left edge of the window.
+    if (anchorX < scrollOffset.x) {
+      anchorX = scrollOffset.x;
+    }
+  }
+  Blockly.WidgetDiv.DIV.style.left = anchorX + 'px';
+  Blockly.WidgetDiv.DIV.style.top = anchorY + 'px';
+  Blockly.WidgetDiv.DIV.style.height =
+      (windowSize.height - anchorY + scrollOffset.y) + 'px';
+};

src/blockly/core/workspace.js

@@ -0,0 +1,187 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2012 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Object representing a workspace.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.Workspace');
+
+goog.require('goog.math');
+
+
+/**
+ * Class for a workspace.  This is a data structure that contains blocks.
+ * There is no UI, and can be created headlessly.
+ * @param {Object=} opt_options Dictionary of options.
+ * @constructor
+ */
+Blockly.Workspace = function(opt_options) {
+  /** @type {!Object} */
+  this.options = opt_options || {};
+  /** @type {boolean} */
+  this.RTL = !!this.options.RTL;
+  /** @type {!Array.<!Blockly.Block>} */
+  this.topBlocks_ = [];
+};
+
+/**
+ * Workspaces may be headless.
+ * @type {boolean} True if visible.  False if headless.
+ */
+Blockly.Workspace.prototype.rendered = false;
+
+/**
+ * Dispose of this workspace.
+ * Unlink from all DOM elements to prevent memory leaks.
+ */
+Blockly.Workspace.prototype.dispose = function() {
+  this.clear();
+};
+
+/**
+ * Angle away from the horizontal to sweep for blocks.  Order of execution is
+ * generally top to bottom, but a small angle changes the scan to give a bit of
+ * a left to right bias (reversed in RTL).  Units are in degrees.
+ * See: http://tvtropes.org/pmwiki/pmwiki.php/Main/DiagonalBilling.
+ */
+Blockly.Workspace.SCAN_ANGLE = 3;
+
+/**
+ * Add a block to the list of top blocks.
+ * @param {!Blockly.Block} block Block to remove.
+ */
+Blockly.Workspace.prototype.addTopBlock = function(block) {
+  this.topBlocks_.push(block);
+  this.fireChangeEvent();
+};
+
+/**
+ * Remove a block from the list of top blocks.
+ * @param {!Blockly.Block} block Block to remove.
+ */
+Blockly.Workspace.prototype.removeTopBlock = function(block) {
+  var found = false;
+  for (var child, i = 0; child = this.topBlocks_[i]; i++) {
+    if (child == block) {
+      this.topBlocks_.splice(i, 1);
+      found = true;
+      break;
+    }
+  }
+  if (!found) {
+    throw 'Block not present in workspace\'s list of top-most blocks.';
+  }
+  this.fireChangeEvent();
+};
+
+/**
+ * Finds the top-level blocks and returns them.  Blocks are optionally sorted
+ * by position; top to bottom (with slight LTR or RTL bias).
+ * @param {boolean} ordered Sort the list if true.
+ * @return {!Array.<!Blockly.Block>} The top-level block objects.
+ */
+Blockly.Workspace.prototype.getTopBlocks = function(ordered) {
+  // Copy the topBlocks_ list.
+  var blocks = [].concat(this.topBlocks_);
+  if (ordered && blocks.length > 1) {
+    var offset = Math.sin(goog.math.toRadians(Blockly.Workspace.SCAN_ANGLE));
+    if (this.RTL) {
+      offset *= -1;
+    }
+    blocks.sort(function(a, b) {
+      var aXY = a.getRelativeToSurfaceXY();
+      var bXY = b.getRelativeToSurfaceXY();
+      return (aXY.y + offset * aXY.x) - (bXY.y + offset * bXY.x);
+    });
+  }
+  return blocks;
+};
+
+/**
+ * Find all blocks in workspace.  No particular order.
+ * @return {!Array.<!Blockly.Block>} Array of blocks.
+ */
+Blockly.Workspace.prototype.getAllBlocks = function() {
+  var blocks = this.getTopBlocks(false);
+  for (var i = 0; i < blocks.length; i++) {
+    blocks.push.apply(blocks, blocks[i].getChildren());
+  }
+  return blocks;
+};
+
+/**
+ * Dispose of all blocks in workspace.
+ */
+Blockly.Workspace.prototype.clear = function() {
+  while (this.topBlocks_.length) {
+    this.topBlocks_[0].dispose();
+  }
+};
+
+/**
+ * Returns the horizontal offset of the workspace.
+ * Intended for LTR/RTL compatibility in XML.
+ * Not relevant for a headless workspace.
+ * @return {number} Width.
+ */
+Blockly.Workspace.prototype.getWidth = function() {
+  return 0;
+};
+
+/**
+ * Finds the block with the specified ID in this workspace.
+ * @param {string} id ID of block to find.
+ * @return {Blockly.Block} The matching block, or null if not found.
+ */
+Blockly.Workspace.prototype.getBlockById = function(id) {
+  // If this O(n) function fails to scale well, maintain a hash table of IDs.
+  var blocks = this.getAllBlocks();
+  for (var i = 0, block; block = blocks[i]; i++) {
+    if (block.id == id) {
+      return block;
+    }
+  }
+  return null;
+};
+
+/**
+ * The number of blocks that may be added to the workspace before reaching
+ *     the maxBlocks.
+ * @return {number} Number of blocks left.
+ */
+Blockly.Workspace.prototype.remainingCapacity = function() {
+  if (isNaN(this.options.maxBlocks)) {
+    return Infinity;
+  }
+  return this.options.maxBlocks - this.getAllBlocks().length;
+};
+
+/**
+ * Something on this workspace has changed.
+ */
+Blockly.Workspace.prototype.fireChangeEvent = function() {
+  // NOP.
+};
+
+// Export symbols that would otherwise be renamed by Closure compiler.
+Blockly.Workspace.prototype['clear'] = Blockly.Workspace.prototype.clear;

src/blockly/core/xml.js

@@ -0,0 +1,552 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2012 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview XML reader and writer.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.Xml');
+
+// TODO(scr): Fix circular dependencies
+// goog.require('Blockly.Block');
+goog.require('goog.dom');
+
+
+/**
+ * Encode a block tree as XML.
+ * @param {!Blockly.Workspace} workspace The workspace containing blocks.
+ * @return {!Element} XML document.
+ */
+Blockly.Xml.workspaceToDom = function(workspace) {
+  var width;  // Not used in LTR.
+  if (workspace.RTL) {
+    width = workspace.getWidth();
+  }
+  var xml = goog.dom.createDom('xml');
+  var blocks = workspace.getTopBlocks(true);
+  for (var i = 0, block; block = blocks[i]; i++) {
+    var element = Blockly.Xml.blockToDom_(block);
+    var xy = block.getRelativeToSurfaceXY();
+    element.setAttribute('x', Math.round(workspace.RTL ? width - xy.x : xy.x));
+    element.setAttribute('y', Math.round(xy.y));
+    xml.appendChild(element);
+  }
+  return xml;
+};
+
+/**
+ * Encode a block subtree as XML.
+ * @param {!Blockly.Block} block The root block to encode.
+ * @return {!Element} Tree of XML elements.
+ * @private
+ */
+Blockly.Xml.blockToDom_ = function(block) {
+  var element = goog.dom.createDom(block.isShadow() ? 'shadow' : 'block');
+  element.setAttribute('type', block.type);
+  if (Blockly.Realtime.isEnabled()) {
+    // Only used by realtime.
+    element.setAttribute('id', block.id);
+  }
+  if (block.mutationToDom) {
+    // Custom data for an advanced block.
+    var mutation = block.mutationToDom();
+    if (mutation && (mutation.hasChildNodes() || mutation.hasAttributes())) {
+      element.appendChild(mutation);
+    }
+  }
+  function fieldToDom(field) {
+    if (field.name && field.EDITABLE) {
+      var container = goog.dom.createDom('field', null, field.getValue());
+      container.setAttribute('name', field.name);
+      element.appendChild(container);
+    }
+  }
+  for (var i = 0, input; input = block.inputList[i]; i++) {
+    for (var j = 0, field; field = input.fieldRow[j]; j++) {
+      fieldToDom(field);
+    }
+  }
+
+  var commentText = block.getCommentText();
+  if (commentText) {
+    var commentElement = goog.dom.createDom('comment', null, commentText);
+    if (typeof block.comment == 'object') {
+      commentElement.setAttribute('pinned', block.comment.isVisible());
+      var hw = block.comment.getBubbleSize();
+      commentElement.setAttribute('h', hw.height);
+      commentElement.setAttribute('w', hw.width);
+    }
+    element.appendChild(commentElement);
+  }
+
+  if (block.data) {
+    // Optional text data that round-trips beween blocks and XML.
+    // Has no effect.  May be used by 3rd parties for meta information.
+    var dataElement = goog.dom.createDom('data', null, block.data);
+    element.appendChild(dataElement);
+  }
+
+  for (var i = 0, input; input = block.inputList[i]; i++) {
+    var container;
+    var empty = true;
+    if (input.type == Blockly.DUMMY_INPUT) {
+      continue;
+    } else {
+      var childBlock = input.connection.targetBlock();
+      if (input.type == Blockly.INPUT_VALUE) {
+        container = goog.dom.createDom('value');
+      } else if (input.type == Blockly.NEXT_STATEMENT) {
+        container = goog.dom.createDom('statement');
+      }
+      var shadow = input.connection.getShadowDom();
+      if (shadow && (!childBlock || !childBlock.isShadow())) {
+        container.appendChild(Blockly.Xml.cloneShadow_(shadow));
+      }
+      if (childBlock) {
+        container.appendChild(Blockly.Xml.blockToDom_(childBlock));
+        empty = false;
+      }
+    }
+    container.setAttribute('name', input.name);
+    if (!empty) {
+      element.appendChild(container);
+    }
+  }
+  if (block.inputsInlineDefault != block.inputsInline) {
+    element.setAttribute('inline', block.inputsInline);
+  }
+  if (block.isCollapsed()) {
+    element.setAttribute('collapsed', true);
+  }
+  if (block.disabled) {
+    element.setAttribute('disabled', true);
+  }
+  if (!block.isDeletable() && !block.isShadow()) {
+    element.setAttribute('deletable', false);
+  }
+  if (!block.isMovable() && !block.isShadow()) {
+    element.setAttribute('movable', false);
+  }
+  if (!block.isEditable()) {
+    element.setAttribute('editable', false);
+  }
+
+  var nextBlock = block.getNextBlock();
+  if (nextBlock) {
+    var container = goog.dom.createDom('next', null,
+        Blockly.Xml.blockToDom_(nextBlock));
+    element.appendChild(container);
+  }
+  var shadow = block.nextConnection && block.nextConnection.getShadowDom();
+  if (shadow && (!nextBlock || !nextBlock.isShadow())) {
+    container.appendChild(Blockly.Xml.cloneShadow_(shadow));
+  }
+
+  return element;
+};
+
+/**
+ * Deeply clone the shadow's DOM so that changes don't back-wash to the block.
+ * @param {!Element} shadow A tree of XML elements.
+ * @return {!Element} A tree of XML elements.
+ * @private
+ */
+Blockly.Xml.cloneShadow_ = function(shadow) {
+  shadow = shadow.cloneNode(true);
+  // Walk the tree looking for whitespace.  Don't prune whitespace in a tag.
+  var node = shadow;
+  var textNode;
+  while (node) {
+    if (node.firstChild) {
+      node = node.firstChild;
+    } else {
+      while (node && !node.nextSibling) {
+        textNode = node;
+        node = node.parentNode;
+        if (textNode.nodeType == 3 && textNode.data.trim() == '' &&
+            node.firstChild != textNode) {
+          // Prune whitespace after a tag.
+          goog.dom.removeNode(textNode);
+        }
+      }
+      if (node) {
+        textNode = node;
+        node = node.nextSibling;
+        if (textNode.nodeType == 3 && textNode.data.trim() == '') {
+          // Prune whitespace before a tag.
+          goog.dom.removeNode(textNode);
+        }
+      }
+    }
+  }
+  return shadow;
+};
+
+/**
+ * Converts a DOM structure into plain text.
+ * Currently the text format is fairly ugly: all one line with no whitespace.
+ * @param {!Element} dom A tree of XML elements.
+ * @return {string} Text representation.
+ */
+Blockly.Xml.domToText = function(dom) {
+  var oSerializer = new XMLSerializer();
+  return oSerializer.serializeToString(dom);
+};
+
+/**
+ * Converts a DOM structure into properly indented text.
+ * @param {!Element} dom A tree of XML elements.
+ * @return {string} Text representation.
+ */
+Blockly.Xml.domToPrettyText = function(dom) {
+  // This function is not guaranteed to be correct for all XML.
+  // But it handles the XML that Blockly generates.
+  var blob = Blockly.Xml.domToText(dom);
+  // Place every open and close tag on its own line.
+  var lines = blob.split('<');
+  // Indent every line.
+  var indent = '';
+  for (var i = 1; i < lines.length; i++) {
+    var line = lines[i];
+    if (line[0] == '/') {
+      indent = indent.substring(2);
+    }
+    lines[i] = indent + '<' + line;
+    if (line[0] != '/' && line.slice(-2) != '/>') {
+      indent += '  ';
+    }
+  }
+  // Pull simple tags back together.
+  // E.g. <foo></foo>
+  var text = lines.join('\n');
+  text = text.replace(/(<(\w+)\b[^>]*>[^\n]*)\n *<\/\2>/g, '$1</$2>');
+  // Trim leading blank line.
+  return text.replace(/^\n/, '');
+};
+
+/**
+ * Converts plain text into a DOM structure.
+ * Throws an error if XML doesn't parse.
+ * @param {string} text Text representation.
+ * @return {!Element} A tree of XML elements.
+ */
+Blockly.Xml.textToDom = function(text) {
+  var oParser = new DOMParser();
+  var dom = oParser.parseFromString(text, 'text/xml');
+  // The DOM should have one and only one top-level node, an XML tag.
+  if (!dom || !dom.firstChild ||
+      dom.firstChild.nodeName.toLowerCase() != 'xml' ||
+      dom.firstChild !== dom.lastChild) {
+    // Whatever we got back from the parser is not XML.
+    throw 'Blockly.Xml.textToDom did not obtain a valid XML tree.';
+  }
+  return dom.firstChild;
+};
+
+/**
+ * Decode an XML DOM and create blocks on the workspace.
+ * @param {!Blockly.Workspace} workspace The workspace.
+ * @param {!Element} xml XML DOM.
+ */
+Blockly.Xml.domToWorkspace = function(workspace, xml) {
+  var width;  // Not used in LTR.
+  if (workspace.RTL) {
+    width = workspace.getWidth();
+  }
+  Blockly.Field.startCache();
+  // Safari 7.1.3 is known to provide node lists with extra references to
+  // children beyond the lists' length.  Trust the length, do not use the
+  // looping pattern of checking the index for an object.
+  var childCount = xml.childNodes.length;
+  for (var i = 0; i < childCount; i++) {
+    var xmlChild = xml.childNodes[i];
+    var name = xmlChild.nodeName.toLowerCase();
+    if (name == 'block' || name == 'shadow') {
+      var block = Blockly.Xml.domToBlock(workspace, xmlChild);
+      var blockX = parseInt(xmlChild.getAttribute('x'), 10);
+      var blockY = parseInt(xmlChild.getAttribute('y'), 10);
+      if (!isNaN(blockX) && !isNaN(blockY)) {
+        block.moveBy(workspace.RTL ? width - blockX : blockX, blockY);
+      }
+    }
+  }
+  Blockly.Field.stopCache();
+};
+
+/**
+ * Decode an XML block tag and create a block (and possibly sub blocks) on the
+ * workspace.
+ * @param {!Blockly.Workspace} workspace The workspace.
+ * @param {!Element} xmlBlock XML block element.
+ * @param {boolean=} opt_reuseBlock Optional arg indicating whether to
+ *     reinitialize an existing block.
+ * @return {!Blockly.Block} The root block created.
+ */
+Blockly.Xml.domToBlock = function(workspace, xmlBlock, opt_reuseBlock) {
+  // Create top-level block.
+  var topBlock = Blockly.Xml.domToBlockHeadless_(workspace, xmlBlock,
+                                                 opt_reuseBlock);
+  if (workspace.rendered) {
+    // Hide connections to speed up assembly.
+    topBlock.setConnectionsHidden(true);
+    // Generate list of all blocks.
+    var blocks = topBlock.getDescendants();
+    // Render each block.
+    for (var i = blocks.length - 1; i >= 0; i--) {
+      blocks[i].initSvg();
+    }
+    for (var i = blocks.length - 1; i >= 0; i--) {
+      blocks[i].render(false);
+    }
+    // Populating the connection database may be defered until after the blocks
+    // have renderend.
+    setTimeout(function() {
+      if (topBlock.workspace) {  // Check that the block hasn't been deleted.
+        topBlock.setConnectionsHidden(false);
+      }
+    }, 1);
+    topBlock.updateDisabled();
+    // Fire an event to allow scrollbars to resize.
+    Blockly.fireUiEvent(window, 'resize');
+  }
+  return topBlock;
+};
+
+/**
+ * Decode an XML block tag and create a block (and possibly sub blocks) on the
+ * workspace.
+ * @param {!Blockly.Workspace} workspace The workspace.
+ * @param {!Element} xmlBlock XML block element.
+ * @param {boolean=} opt_reuseBlock Optional arg indicating whether to
+ *     reinitialize an existing block.
+ * @return {!Blockly.Block} The root block created.
+ * @private
+ */
+Blockly.Xml.domToBlockHeadless_ =
+    function(workspace, xmlBlock, opt_reuseBlock) {
+  var block = null;
+  var prototypeName = xmlBlock.getAttribute('type');
+  if (!prototypeName) {
+    throw 'Block type unspecified: \n' + xmlBlock.outerHTML;
+  }
+  var id = xmlBlock.getAttribute('id');
+  if (opt_reuseBlock && id) {
+    // Only used by realtime.
+    block = Blockly.Block.getById(id, workspace);
+    // TODO: The following is for debugging.  It should never actually happen.
+    if (!block) {
+      throw 'Couldn\'t get Block with id: ' + id;
+    }
+    var parentBlock = block.getParent();
+    // If we've already filled this block then we will dispose of it and then
+    // re-fill it.
+    if (block.workspace) {
+      block.dispose(true, false, true);
+    }
+    block.fill(workspace, prototypeName);
+    block.parent_ = parentBlock;
+  } else {
+    block = Blockly.Block.obtain(workspace, prototypeName);
+  }
+
+  var blockChild = null;
+  for (var i = 0, xmlChild; xmlChild = xmlBlock.childNodes[i]; i++) {
+    if (xmlChild.nodeType == 3) {
+      // Ignore any text at the <block> level.  It's all whitespace anyway.
+      continue;
+    }
+    var input;
+
+    // Find any enclosed blocks or shadows in this tag.
+    var childBlockNode = null;
+    var childShadowNode = null;
+    var shadowActive = false;
+    for (var j = 0, grandchildNode; grandchildNode = xmlChild.childNodes[j];
+         j++) {
+      if (grandchildNode.nodeType == 1) {
+        if (grandchildNode.nodeName.toLowerCase() == 'block') {
+          childBlockNode = grandchildNode;
+        } else if (grandchildNode.nodeName.toLowerCase() == 'shadow') {
+          childShadowNode = grandchildNode;
+        }
+      }
+    }
+    // Use the shadow block if there is no child block.
+    if (!childBlockNode && childShadowNode) {
+      childBlockNode = childShadowNode;
+      shadowActive = true;
+    }
+
+    var name = xmlChild.getAttribute('name');
+    switch (xmlChild.nodeName.toLowerCase()) {
+      case 'mutation':
+        // Custom data for an advanced block.
+        if (block.domToMutation) {
+          block.domToMutation(xmlChild);
+          if (block.initSvg) {
+            // Mutation may have added some elements that need initalizing.
+            block.initSvg();
+          }
+        }
+        break;
+      case 'comment':
+        block.setCommentText(xmlChild.textContent);
+        var visible = xmlChild.getAttribute('pinned');
+        if (visible) {
+          // Give the renderer a millisecond to render and position the block
+          // before positioning the comment bubble.
+          setTimeout(function() {
+            if (block.comment && block.comment.setVisible) {
+              block.comment.setVisible(visible == 'true');
+            }
+          }, 1);
+        }
+        var bubbleW = parseInt(xmlChild.getAttribute('w'), 10);
+        var bubbleH = parseInt(xmlChild.getAttribute('h'), 10);
+        if (!isNaN(bubbleW) && !isNaN(bubbleH) &&
+            block.comment && block.comment.setVisible) {
+          block.comment.setBubbleSize(bubbleW, bubbleH);
+        }
+        break;
+      case 'data':
+        // Optional text data that round-trips beween blocks and XML.
+        // Has no effect.  May be used by 3rd parties for meta information.
+        block.data = xmlChild.textContent;
+        break;
+      case 'title':
+        // Titles were renamed to field in December 2013.
+        // Fall through.
+      case 'field':
+        var field = block.getField(name);
+        if (!field) {
+          console.warn('Ignoring non-existent field ' + name + ' in block ' +
+                       prototypeName);
+          break;
+        }
+        field.setValue(xmlChild.textContent);
+        break;
+      case 'value':
+      case 'statement':
+        input = block.getInput(name);
+        if (!input) {
+          console.warn('Ignoring non-existent input ' + name + ' in block ' +
+                       prototypeName);
+          break;
+        }
+        if (childShadowNode) {
+          input.connection.setShadowDom(childShadowNode);
+        }
+        if (childBlockNode) {
+          blockChild = Blockly.Xml.domToBlockHeadless_(workspace,
+              childBlockNode, opt_reuseBlock);
+          if (blockChild.outputConnection) {
+            input.connection.connect(blockChild.outputConnection);
+          } else if (blockChild.previousConnection) {
+            input.connection.connect(blockChild.previousConnection);
+          } else {
+            throw 'Child block does not have output or previous statement.';
+          }
+        }
+        break;
+      case 'next':
+        if (childShadowNode && block.nextConnection) {
+          block.nextConnection.setShadowDom(childShadowNode);
+        }
+        if (childBlockNode) {
+          if (!block.nextConnection) {
+            throw 'Next statement does not exist.';
+          } else if (block.nextConnection.targetConnection) {
+            // This could happen if there is more than one XML 'next' tag.
+            throw 'Next statement is already connected.';
+          }
+          blockChild = Blockly.Xml.domToBlockHeadless_(workspace,
+              childBlockNode, opt_reuseBlock);
+          if (!blockChild.previousConnection) {
+            throw 'Next block does not have previous statement.';
+          }
+          block.nextConnection.connect(blockChild.previousConnection);
+        }
+        break;
+      default:
+        // Unknown tag; ignore.  Same principle as HTML parsers.
+        console.warn('Ignoring unknown tag: ' + xmlChild.nodeName);
+    }
+  }
+
+  var inline = xmlBlock.getAttribute('inline');
+  if (inline) {
+    block.setInputsInline(inline == 'true');
+  }
+  var disabled = xmlBlock.getAttribute('disabled');
+  if (disabled) {
+    block.setDisabled(disabled == 'true');
+  }
+  var deletable = xmlBlock.getAttribute('deletable');
+  if (deletable) {
+    block.setDeletable(deletable == 'true');
+  }
+  var movable = xmlBlock.getAttribute('movable');
+  if (movable) {
+    block.setMovable(movable == 'true');
+  }
+  var editable = xmlBlock.getAttribute('editable');
+  if (editable) {
+    block.setEditable(editable == 'true');
+  }
+  var collapsed = xmlBlock.getAttribute('collapsed');
+  if (collapsed) {
+    block.setCollapsed(collapsed == 'true');
+  }
+  if (xmlBlock.nodeName.toLowerCase() == 'shadow') {
+    block.setShadow(true);
+  }
+  // Give the block a chance to clean up any initial inputs.
+  if (block.validate) {
+    block.validate();
+  }
+  return block;
+};
+
+/**
+ * Remove any 'next' block (statements in a stack).
+ * @param {!Element} xmlBlock XML block element.
+ */
+Blockly.Xml.deleteNext = function(xmlBlock) {
+  for (var i = 0, child; child = xmlBlock.childNodes[i]; i++) {
+    if (child.nodeName.toLowerCase() == 'next') {
+      xmlBlock.removeChild(child);
+      break;
+    }
+  }
+};
+
+// Export symbols that would otherwise be renamed by Closure compiler.
+if (!goog.global['Blockly']) {
+  goog.global['Blockly'] = {};
+}
+if (!goog.global['Blockly']['Xml']) {
+  goog.global['Blockly']['Xml'] = {};
+}
+goog.global['Blockly']['Xml']['domToText'] = Blockly.Xml.domToText;
+goog.global['Blockly']['Xml']['domToWorkspace'] = Blockly.Xml.domToWorkspace;
+goog.global['Blockly']['Xml']['textToDom'] = Blockly.Xml.textToDom;
+goog.global['Blockly']['Xml']['workspaceToDom'] = Blockly.Xml.workspaceToDom;

src/blockly/core/zoom_controls.js

@@ -0,0 +1,219 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2015 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Object representing a zoom icons.
+ * @author carloslfu@gmail.com (Carlos Galarza)
+ */
+'use strict';
+
+goog.provide('Blockly.ZoomControls');
+
+goog.require('goog.dom');
+
+
+/**
+ * Class for a zoom controls.
+ * @param {!Blockly.Workspace} workspace The workspace to sit in.
+ * @constructor
+ */
+Blockly.ZoomControls = function(workspace) {
+  this.workspace_ = workspace;
+};
+
+/**
+ * Width of the zoom controls.
+ * @type {number}
+ * @private
+ */
+Blockly.ZoomControls.prototype.WIDTH_ = 32;
+
+/**
+ * Height of the zoom controls.
+ * @type {number}
+ * @private
+ */
+Blockly.ZoomControls.prototype.HEIGHT_ = 110;
+
+/**
+ * Distance between zoom controls and bottom edge of workspace.
+ * @type {number}
+ * @private
+ */
+Blockly.ZoomControls.prototype.MARGIN_BOTTOM_ = 20;
+
+/**
+ * Distance between zoom controls and right edge of workspace.
+ * @type {number}
+ * @private
+ */
+Blockly.ZoomControls.prototype.MARGIN_SIDE_ = 20;
+
+/**
+ * The SVG group containing the zoom controls.
+ * @type {Element}
+ * @private
+ */
+Blockly.ZoomControls.prototype.svgGroup_ = null;
+
+/**
+ * Left coordinate of the zoom controls.
+ * @type {number}
+ * @private
+ */
+Blockly.ZoomControls.prototype.left_ = 0;
+
+/**
+ * Top coordinate of the zoom controls.
+ * @type {number}
+ * @private
+ */
+Blockly.ZoomControls.prototype.top_ = 0;
+
+/**
+ * Create the zoom controls.
+ * @return {!Element} The zoom controls SVG group.
+ */
+Blockly.ZoomControls.prototype.createDom = function() {
+  var workspace = this.workspace_;
+  /* Here's the markup that will be generated:
+  <g class="blocklyZoom">
+    <clippath id="blocklyZoomoutClipPath837493">
+      <rect width="32" height="32" y="77"></rect>
+    </clippath>
+    <image width="96" height="124" x="-64" y="-15" xlink:href="media/sprites.png">
+        clip-path="url(#blocklyZoomoutClipPath837493)"></image>
+    <clippath id="blocklyZoominClipPath837493">
+      <rect width="32" height="32" y="43"></rect>
+    </clippath>
+    <image width="96" height="124" x="-32" y="-49" xlink:href="media/sprites.png">
+        clip-path="url(#blocklyZoominClipPath837493)"></image>
+    <clippath id="blocklyZoomresetClipPath837493">
+      <rect width="32" height="32"></rect>
+    </clippath>
+    <image width="96" height="124" y="-92" xlink:href="media/sprites.png">
+        clip-path="url(#blocklyZoomresetClipPath837493)"></image>
+  </g>
+  */
+  this.svgGroup_ = Blockly.createSvgElement('g',
+      {'class': 'blocklyZoom'}, null);
+  var rnd = String(Math.random()).substring(2);
+
+  var clip = Blockly.createSvgElement('clipPath',
+      {'id': 'blocklyZoomoutClipPath' + rnd},
+      this.svgGroup_);
+  Blockly.createSvgElement('rect',
+      {'width': 32, 'height': 32, 'y': 77},
+      clip);
+  var zoomoutSvg = Blockly.createSvgElement('image',
+      {'width': Blockly.SPRITE.width,
+       'height': Blockly.SPRITE.height, 'x': -64,
+       'y': -15,
+       'clip-path': 'url(#blocklyZoomoutClipPath' + rnd + ')'},
+      this.svgGroup_);
+  zoomoutSvg.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href',
+      workspace.options.pathToMedia + Blockly.SPRITE.url);
+
+  var clip = Blockly.createSvgElement('clipPath',
+      {'id': 'blocklyZoominClipPath' + rnd},
+      this.svgGroup_);
+  Blockly.createSvgElement('rect',
+      {'width': 32, 'height': 32, 'y': 43},
+      clip);
+  var zoominSvg = Blockly.createSvgElement('image',
+      {'width': Blockly.SPRITE.width,
+       'height': Blockly.SPRITE.height,
+       'x': -32,
+       'y': -49,
+       'clip-path': 'url(#blocklyZoominClipPath' + rnd + ')'},
+      this.svgGroup_);
+  zoominSvg.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href',
+      workspace.options.pathToMedia + Blockly.SPRITE.url);
+
+  var clip = Blockly.createSvgElement('clipPath',
+      {'id': 'blocklyZoomresetClipPath' + rnd},
+      this.svgGroup_);
+  Blockly.createSvgElement('rect',
+      {'width': 32, 'height': 32},
+      clip);
+  var zoomresetSvg = Blockly.createSvgElement('image',
+      {'width': Blockly.SPRITE.width,
+       'height': Blockly.SPRITE.height, 'y': -92,
+       'clip-path': 'url(#blocklyZoomresetClipPath' + rnd + ')'},
+      this.svgGroup_);
+  zoomresetSvg.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href',
+      workspace.options.pathToMedia + Blockly.SPRITE.url);
+
+  // Attach event listeners.
+  Blockly.bindEvent_(zoomresetSvg, 'mousedown', workspace, workspace.zoomReset);
+  Blockly.bindEvent_(zoominSvg, 'mousedown', null, function(e) {
+    workspace.zoomCenter(1);
+    e.stopPropagation();  // Don't start a workspace scroll.
+  });
+  Blockly.bindEvent_(zoomoutSvg, 'mousedown', null, function(e) {
+    workspace.zoomCenter(-1);
+    e.stopPropagation();  // Don't start a workspace scroll.
+  });
+
+  return this.svgGroup_;
+};
+
+/**
+ * Initialize the zoom controls.
+ * @param {number} bottom Distance from workspace bottom to bottom of controls.
+ * @return {number} Distance from workspace bottom to the top of controls.
+ */
+Blockly.ZoomControls.prototype.init = function(bottom) {
+  this.bottom_ = this.MARGIN_BOTTOM_ + bottom;
+  return this.bottom_ + this.HEIGHT_;
+};
+
+/**
+ * Dispose of this zoom controls.
+ * Unlink from all DOM elements to prevent memory leaks.
+ */
+Blockly.ZoomControls.prototype.dispose = function() {
+  if (this.svgGroup_) {
+    goog.dom.removeNode(this.svgGroup_);
+    this.svgGroup_ = null;
+  }
+  this.workspace_ = null;
+};
+
+/**
+ * Move the zoom controls to the bottom-right corner.
+ */
+Blockly.ZoomControls.prototype.position = function() {
+  var metrics = this.workspace_.getMetrics();
+  if (!metrics) {
+    // There are no metrics available (workspace is probably not visible).
+    return;
+  }
+  if (this.workspace_.RTL) {
+    this.left_ = this.MARGIN_SIDE_ + Blockly.Scrollbar.scrollbarThickness;
+  } else {
+    this.left_ = metrics.viewWidth + metrics.absoluteLeft -
+        this.WIDTH_ - this.MARGIN_SIDE_ - Blockly.Scrollbar.scrollbarThickness;
+  }
+  this.top_ = metrics.viewHeight + metrics.absoluteTop -
+      this.HEIGHT_ - this.bottom_;
+  this.svgGroup_.setAttribute('transform',
+      'translate(' + this.left_ + ',' + this.top_ + ')');
+};

src/blockly/demos/blockfactory/blocks.js

@@ -0,0 +1,754 @@
+/**
+ * Blockly Demos: Block Factory Blocks
+ *
+ * Copyright 2012 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Blocks for Blockly's Block Factory application.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+Blockly.Blocks['factory_base'] = {
+  // Base of new block.
+  init: function() {
+    this.setColour(120);
+    this.appendDummyInput()
+        .appendField('name')
+        .appendField(new Blockly.FieldTextInput('math_foo'), 'NAME');
+    this.appendStatementInput('INPUTS')
+        .setCheck('Input')
+        .appendField('inputs');
+    var dropdown = new Blockly.FieldDropdown([
+        ['automatic inputs', 'AUTO'],
+        ['external inputs', 'EXT'],
+        ['inline inputs', 'INT']]);
+    this.appendDummyInput()
+        .appendField(dropdown, 'INLINE');
+    dropdown = new Blockly.FieldDropdown([
+        ['no connections', 'NONE'],
+        ['← left output', 'LEFT'],
+        ['↕ top+bottom connections', 'BOTH'],
+        ['↑ top connection', 'TOP'],
+        ['↓ bottom connection', 'BOTTOM']],
+        function(option) {
+          this.sourceBlock_.updateShape_(option);
+        });
+    this.appendDummyInput()
+        .appendField(dropdown, 'CONNECTIONS');
+    this.appendValueInput('COLOUR')
+        .setCheck('Colour')
+        .appendField('colour');
+    /*
+    this.appendValueInput('TOOLTIP')
+        .setCheck('String')
+        .appendField('tooltip');
+    this.appendValueInput('HELP')
+        .setCheck('String')
+        .appendField('help url');
+    */
+    this.setTooltip('Build a custom block by plugging\n' +
+        'fields, inputs and other blocks here.');
+    this.setHelpUrl(
+        'https://developers.google.com/blockly/custom-blocks/block-factory');
+  },
+  mutationToDom: function() {
+    var container = document.createElement('mutation');
+    container.setAttribute('connections', this.getFieldValue('CONNECTIONS'));
+    return container;
+  },
+  domToMutation: function(xmlElement) {
+    var connections = xmlElement.getAttribute('connections');
+    this.updateShape_(connections);
+  },
+  updateShape_: function(option) {
+    var outputExists = this.getInput('OUTPUTTYPE');
+    var topExists = this.getInput('TOPTYPE');
+    var bottomExists = this.getInput('BOTTOMTYPE');
+    if (option == 'LEFT') {
+      if (!outputExists) {
+        this.appendValueInput('OUTPUTTYPE')
+            .setCheck('Type')
+            .appendField('output type');
+        this.moveInputBefore('OUTPUTTYPE', 'COLOUR');
+      }
+    } else if (outputExists) {
+      this.removeInput('OUTPUTTYPE');
+    }
+    if (option == 'TOP' || option == 'BOTH') {
+      if (!topExists) {
+        this.appendValueInput('TOPTYPE')
+            .setCheck('Type')
+            .appendField('top type');
+        this.moveInputBefore('TOPTYPE', 'COLOUR');
+      }
+    } else if (topExists) {
+      this.removeInput('TOPTYPE');
+    }
+    if (option == 'BOTTOM' || option == 'BOTH') {
+      if (!bottomExists) {
+        this.appendValueInput('BOTTOMTYPE')
+            .setCheck('Type')
+            .appendField('bottom type');
+        this.moveInputBefore('BOTTOMTYPE', 'COLOUR');
+      }
+    } else if (bottomExists) {
+      this.removeInput('BOTTOMTYPE');
+    }
+  }
+};
+
+var ALIGNMENT_OPTIONS =
+    [['left', 'LEFT'], ['right', 'RIGHT'], ['centre', 'CENTRE']];
+
+Blockly.Blocks['input_value'] = {
+  // Value input.
+  init: function() {
+    this.setColour(210);
+    this.appendDummyInput()
+        .appendField('value input')
+        .appendField(new Blockly.FieldTextInput('NAME'), 'INPUTNAME');
+    this.appendStatementInput('FIELDS')
+        .setCheck('Field')
+        .appendField('fields')
+        .appendField(new Blockly.FieldDropdown(ALIGNMENT_OPTIONS), 'ALIGN');
+    this.appendValueInput('TYPE')
+        .setCheck('Type')
+        .setAlign(Blockly.ALIGN_RIGHT)
+        .appendField('type');
+    this.setPreviousStatement(true, 'Input');
+    this.setNextStatement(true, 'Input');
+    this.setTooltip('A value socket for horizontal connections.');
+    this.setHelpUrl('https://www.youtube.com/watch?v=s2_xaEvcVI0#t=71');
+  },
+  onchange: function() {
+    if (!this.workspace) {
+      // Block has been deleted.
+      return;
+    }
+    inputNameCheck(this);
+  }
+};
+
+Blockly.Blocks['input_statement'] = {
+  // Statement input.
+  init: function() {
+    this.setColour(210);
+    this.appendDummyInput()
+        .appendField('statement input')
+        .appendField(new Blockly.FieldTextInput('NAME'), 'INPUTNAME');
+    this.appendStatementInput('FIELDS')
+        .setCheck('Field')
+        .appendField('fields')
+        .appendField(new Blockly.FieldDropdown(ALIGNMENT_OPTIONS), 'ALIGN');
+    this.appendValueInput('TYPE')
+        .setCheck('Type')
+        .setAlign(Blockly.ALIGN_RIGHT)
+        .appendField('type');
+    this.setPreviousStatement(true, 'Input');
+    this.setNextStatement(true, 'Input');
+    this.setTooltip('A statement socket for enclosed vertical stacks.');
+    this.setHelpUrl('https://www.youtube.com/watch?v=s2_xaEvcVI0#t=246');
+  },
+  onchange: function() {
+    if (!this.workspace) {
+      // Block has been deleted.
+      return;
+    }
+    inputNameCheck(this);
+  }
+};
+
+Blockly.Blocks['input_dummy'] = {
+  // Dummy input.
+  init: function() {
+    this.setColour(210);
+    this.appendDummyInput()
+        .appendField('dummy input');
+    this.appendStatementInput('FIELDS')
+        .setCheck('Field')
+        .appendField('fields')
+        .appendField(new Blockly.FieldDropdown(ALIGNMENT_OPTIONS), 'ALIGN');
+    this.setPreviousStatement(true, 'Input');
+    this.setNextStatement(true, 'Input');
+    this.setTooltip('For adding fields on a separate row with no ' +
+                    'connections. Alignment options (left, right, centre) ' +
+                    'apply only to multi-line fields.');
+    this.setHelpUrl('https://www.youtube.com/watch?v=s2_xaEvcVI0#t=293');
+  }
+};
+
+Blockly.Blocks['field_static'] = {
+  // Text value.
+  init: function() {
+    this.setColour(160);
+    this.appendDummyInput()
+        .appendField('text')
+        .appendField(new Blockly.FieldTextInput(''), 'TEXT');
+    this.setPreviousStatement(true, 'Field');
+    this.setNextStatement(true, 'Field');
+    this.setTooltip('Static text that serves as a label.');
+    this.setHelpUrl('https://www.youtube.com/watch?v=s2_xaEvcVI0#t=88');
+  }
+};
+
+Blockly.Blocks['field_input'] = {
+  // Text input.
+  init: function() {
+    this.setColour(160);
+    this.appendDummyInput()
+        .appendField('text input')
+        .appendField(new Blockly.FieldTextInput('default'), 'TEXT')
+        .appendField(',')
+        .appendField(new Blockly.FieldTextInput('NAME'), 'FIELDNAME');
+    this.setPreviousStatement(true, 'Field');
+    this.setNextStatement(true, 'Field');
+    this.setTooltip('An input field for the user to enter text.');
+    this.setHelpUrl('https://www.youtube.com/watch?v=s2_xaEvcVI0#t=319');
+  },
+  onchange: function() {
+    if (!this.workspace) {
+      // Block has been deleted.
+      return;
+    }
+    fieldNameCheck(this);
+  }
+};
+
+Blockly.Blocks['field_angle'] = {
+  // Angle input.
+  init: function() {
+    this.setColour(160);
+    this.appendDummyInput()
+        .appendField('angle input')
+        .appendField(new Blockly.FieldAngle('90'), 'ANGLE')
+        .appendField(',')
+        .appendField(new Blockly.FieldTextInput('NAME'), 'FIELDNAME');
+    this.setPreviousStatement(true, 'Field');
+    this.setNextStatement(true, 'Field');
+    this.setTooltip('An input field for the user to enter an angle.');
+    this.setHelpUrl('https://www.youtube.com/watch?v=s2_xaEvcVI0#t=372');
+  },
+  onchange: function() {
+    if (!this.workspace) {
+      // Block has been deleted.
+      return;
+    }
+    fieldNameCheck(this);
+  }
+};
+
+Blockly.Blocks['field_dropdown'] = {
+  // Dropdown menu.
+  init: function() {
+    this.setColour(160);
+    this.appendDummyInput()
+        .appendField('dropdown')
+        .appendField(new Blockly.FieldTextInput('NAME'), 'FIELDNAME');
+    this.appendDummyInput('OPTION0')
+        .appendField(new Blockly.FieldTextInput('option'), 'USER0')
+        .appendField(',')
+        .appendField(new Blockly.FieldTextInput('OPTIONNAME'), 'CPU0');
+    this.appendDummyInput('OPTION1')
+        .appendField(new Blockly.FieldTextInput('option'), 'USER1')
+        .appendField(',')
+        .appendField(new Blockly.FieldTextInput('OPTIONNAME'), 'CPU1');
+    this.appendDummyInput('OPTION2')
+        .appendField(new Blockly.FieldTextInput('option'), 'USER2')
+        .appendField(',')
+        .appendField(new Blockly.FieldTextInput('OPTIONNAME'), 'CPU2');
+    this.setPreviousStatement(true, 'Field');
+    this.setNextStatement(true, 'Field');
+    this.setMutator(new Blockly.Mutator(['field_dropdown_option']));
+    this.setTooltip('Dropdown menu with a list of options.');
+    this.setHelpUrl('https://www.youtube.com/watch?v=s2_xaEvcVI0#t=386');
+    this.optionCount_ = 3;
+  },
+  mutationToDom: function(workspace) {
+    var container = document.createElement('mutation');
+    container.setAttribute('options', this.optionCount_);
+    return container;
+  },
+  domToMutation: function(container) {
+    for (var x = 0; x < this.optionCount_; x++) {
+      this.removeInput('OPTION' + x);
+    }
+    this.optionCount_ = parseInt(container.getAttribute('options'), 10);
+    for (var x = 0; x < this.optionCount_; x++) {
+      var input = this.appendDummyInput('OPTION' + x);
+      input.appendField(new Blockly.FieldTextInput('option'), 'USER' + x);
+      input.appendField(',');
+      input.appendField(new Blockly.FieldTextInput('OPTIONNAME'), 'CPU' + x);
+    }
+  },
+  decompose: function(workspace) {
+    var containerBlock =
+        Blockly.Block.obtain(workspace, 'field_dropdown_container');
+    containerBlock.initSvg();
+    var connection = containerBlock.getInput('STACK').connection;
+    for (var x = 0; x < this.optionCount_; x++) {
+      var optionBlock =
+          Blockly.Block.obtain(workspace, 'field_dropdown_option');
+      optionBlock.initSvg();
+      connection.connect(optionBlock.previousConnection);
+      connection = optionBlock.nextConnection;
+    }
+    return containerBlock;
+  },
+  compose: function(containerBlock) {
+    // Disconnect all input blocks and remove all inputs.
+    for (var x = this.optionCount_ - 1; x >= 0; x--) {
+      this.removeInput('OPTION' + x);
+    }
+    this.optionCount_ = 0;
+    // Rebuild the block's inputs.
+    var optionBlock = containerBlock.getInputTargetBlock('STACK');
+    while (optionBlock) {
+      this.appendDummyInput('OPTION' + this.optionCount_)
+          .appendField(new Blockly.FieldTextInput(
+              optionBlock.userData_ || 'option'), 'USER' + this.optionCount_)
+          .appendField(',')
+          .appendField(new Blockly.FieldTextInput(
+              optionBlock.cpuData_ || 'OPTIONNAME'), 'CPU' + this.optionCount_);
+      this.optionCount_++;
+      optionBlock = optionBlock.nextConnection &&
+          optionBlock.nextConnection.targetBlock();
+    }
+  },
+  saveConnections: function(containerBlock) {
+    // Store names and values for each option.
+    var optionBlock = containerBlock.getInputTargetBlock('STACK');
+    var x = 0;
+    while (optionBlock) {
+      optionBlock.userData_ = this.getFieldValue('USER' + x);
+      optionBlock.cpuData_ = this.getFieldValue('CPU' + x);
+      x++;
+      optionBlock = optionBlock.nextConnection &&
+          optionBlock.nextConnection.targetBlock();
+    }
+  },
+  onchange: function() {
+    if (!this.workspace) {
+      // Block has been deleted.
+      return;
+    }
+    if (this.optionCount_ < 1) {
+      this.setWarningText('Drop down menu must\nhave at least one option.');
+    } else {
+      fieldNameCheck(this);
+    }
+  }
+};
+
+Blockly.Blocks['field_dropdown_container'] = {
+  // Container.
+  init: function() {
+    this.setColour(160);
+    this.appendDummyInput()
+        .appendField('add options');
+    this.appendStatementInput('STACK');
+    this.setTooltip('Add, remove, or reorder options\n' +
+                    'to reconfigure this dropdown menu.');
+    this.setHelpUrl('https://www.youtube.com/watch?v=s2_xaEvcVI0#t=386');
+    this.contextMenu = false;
+  }
+};
+
+Blockly.Blocks['field_dropdown_option'] = {
+  // Add option.
+  init: function() {
+    this.setColour(160);
+    this.appendDummyInput()
+        .appendField('option');
+    this.setPreviousStatement(true);
+    this.setNextStatement(true);
+    this.setTooltip('Add a new option to the dropdown menu.');
+    this.setHelpUrl('https://www.youtube.com/watch?v=s2_xaEvcVI0#t=386');
+    this.contextMenu = false;
+  }
+};
+
+Blockly.Blocks['field_checkbox'] = {
+  // Checkbox.
+  init: function() {
+    this.setColour(160);
+    this.appendDummyInput()
+        .appendField('checkbox')
+        .appendField(new Blockly.FieldCheckbox('TRUE'), 'CHECKED')
+        .appendField(',')
+        .appendField(new Blockly.FieldTextInput('NAME'), 'FIELDNAME');
+    this.setPreviousStatement(true, 'Field');
+    this.setNextStatement(true, 'Field');
+    this.setTooltip('Checkbox field.');
+    this.setHelpUrl('https://www.youtube.com/watch?v=s2_xaEvcVI0#t=485');
+  },
+  onchange: function() {
+    if (!this.workspace) {
+      // Block has been deleted.
+      return;
+    }
+    fieldNameCheck(this);
+  }
+};
+
+Blockly.Blocks['field_colour'] = {
+  // Colour input.
+  init: function() {
+    this.setColour(160);
+    this.appendDummyInput()
+        .appendField('colour')
+        .appendField(new Blockly.FieldColour('#ff0000'), 'COLOUR')
+        .appendField(',')
+        .appendField(new Blockly.FieldTextInput('NAME'), 'FIELDNAME');
+    this.setPreviousStatement(true, 'Field');
+    this.setNextStatement(true, 'Field');
+    this.setTooltip('Colour input field.');
+    this.setHelpUrl('https://www.youtube.com/watch?v=s2_xaEvcVI0#t=495');
+  },
+  onchange: function() {
+    if (!this.workspace) {
+      // Block has been deleted.
+      return;
+    }
+    fieldNameCheck(this);
+  }
+};
+
+Blockly.Blocks['field_date'] = {
+  // Date input.
+  init: function() {
+    this.setColour(160);
+    this.appendDummyInput()
+        .appendField('date')
+        .appendField(new Blockly.FieldDate(), 'DATE')
+        .appendField(',')
+        .appendField(new Blockly.FieldTextInput('NAME'), 'FIELDNAME');
+    this.setPreviousStatement(true, 'Field');
+    this.setNextStatement(true, 'Field');
+    this.setTooltip('Date input field.');
+  },
+  onchange: function() {
+    if (!this.workspace) {
+      // Block has been deleted.
+      return;
+    }
+    fieldNameCheck(this);
+  }
+};
+
+Blockly.Blocks['field_variable'] = {
+  // Dropdown for variables.
+  init: function() {
+    this.setColour(160);
+    this.appendDummyInput()
+        .appendField('variable')
+        .appendField(new Blockly.FieldTextInput('item'), 'TEXT')
+        .appendField(',')
+        .appendField(new Blockly.FieldTextInput('NAME'), 'FIELDNAME');
+    this.setPreviousStatement(true, 'Field');
+    this.setNextStatement(true, 'Field');
+    this.setTooltip('Dropdown menu for variable names.');
+    this.setHelpUrl('https://www.youtube.com/watch?v=s2_xaEvcVI0#t=510');
+  },
+  onchange: function() {
+    if (!this.workspace) {
+      // Block has been deleted.
+      return;
+    }
+    fieldNameCheck(this);
+  }
+};
+
+Blockly.Blocks['field_image'] = {
+  // Image.
+  init: function() {
+    this.setColour(160);
+    var src = 'https://www.gstatic.com/codesite/ph/images/star_on.gif';
+    this.appendDummyInput()
+        .appendField('image')
+        .appendField(new Blockly.FieldTextInput(src), 'SRC');
+    this.appendDummyInput()
+        .appendField('width')
+        .appendField(new Blockly.FieldTextInput('15',
+            Blockly.FieldTextInput.numberValidator), 'WIDTH')
+        .appendField('height')
+        .appendField(new Blockly.FieldTextInput('15',
+            Blockly.FieldTextInput.numberValidator), 'HEIGHT')
+        .appendField('alt text')
+        .appendField(new Blockly.FieldTextInput('*'), 'ALT');
+    this.setPreviousStatement(true, 'Field');
+    this.setNextStatement(true, 'Field');
+    this.setTooltip('Static image (JPEG, PNG, GIF, SVG, BMP).\n' +
+                    'Retains aspect ratio regardless of height and width.\n' +
+                    'Alt text is for when collapsed.');
+    this.setHelpUrl('https://www.youtube.com/watch?v=s2_xaEvcVI0#t=567');
+  }
+};
+
+Blockly.Blocks['type_group'] = {
+  // Group of types.
+  init: function() {
+    this.setColour(230);
+    this.appendValueInput('TYPE0')
+        .setCheck('Type')
+        .appendField('any of');
+    this.appendValueInput('TYPE1')
+        .setCheck('Type');
+    this.setOutput(true, 'Type');
+    this.setMutator(new Blockly.Mutator(['type_group_item']));
+    this.setTooltip('Allows more than one type to be accepted.');
+    this.setHelpUrl('https://www.youtube.com/watch?v=s2_xaEvcVI0#t=677');
+    this.typeCount_ = 2;
+  },
+  mutationToDom: function(workspace) {
+    var container = document.createElement('mutation');
+    container.setAttribute('types', this.typeCount_);
+    return container;
+  },
+  domToMutation: function(container) {
+    for (var x = 0; x < this.typeCount_; x++) {
+      this.removeInput('TYPE' + x);
+    }
+    this.typeCount_ = parseInt(container.getAttribute('types'), 10);
+    for (var x = 0; x < this.typeCount_; x++) {
+      var input = this.appendValueInput('TYPE' + x)
+                      .setCheck('Type');
+      if (x == 0) {
+        input.appendField('any of');
+      }
+    }
+  },
+  decompose: function(workspace) {
+    var containerBlock =
+        Blockly.Block.obtain(workspace, 'type_group_container');
+    containerBlock.initSvg();
+    var connection = containerBlock.getInput('STACK').connection;
+    for (var x = 0; x < this.typeCount_; x++) {
+      var typeBlock = Blockly.Block.obtain(workspace, 'type_group_item');
+      typeBlock.initSvg();
+      connection.connect(typeBlock.previousConnection);
+      connection = typeBlock.nextConnection;
+    }
+    return containerBlock;
+  },
+  compose: function(containerBlock) {
+    // Disconnect all input blocks and remove all inputs.
+    for (var x = this.typeCount_ - 1; x >= 0; x--) {
+      this.removeInput('TYPE' + x);
+    }
+    this.typeCount_ = 0;
+    // Rebuild the block's inputs.
+    var typeBlock = containerBlock.getInputTargetBlock('STACK');
+    while (typeBlock) {
+      var input = this.appendValueInput('TYPE' + this.typeCount_)
+                      .setCheck('Type');
+      if (this.typeCount_ == 0) {
+        input.appendField('any of');
+      }
+      // Reconnect any child blocks.
+      if (typeBlock.valueConnection_) {
+        input.connection.connect(typeBlock.valueConnection_);
+      }
+      this.typeCount_++;
+      typeBlock = typeBlock.nextConnection &&
+          typeBlock.nextConnection.targetBlock();
+    }
+  },
+  saveConnections: function(containerBlock) {
+    // Store a pointer to any connected child blocks.
+    var typeBlock = containerBlock.getInputTargetBlock('STACK');
+    var x = 0;
+    while (typeBlock) {
+      var input = this.getInput('TYPE' + x);
+      typeBlock.valueConnection_ = input && input.connection.targetConnection;
+      x++;
+      typeBlock = typeBlock.nextConnection &&
+          typeBlock.nextConnection.targetBlock();
+    }
+  }
+};
+
+Blockly.Blocks['type_group_container'] = {
+  // Container.
+  init: function() {
+    this.setColour(230);
+    this.appendDummyInput()
+        .appendField('add types');
+    this.appendStatementInput('STACK');
+    this.setTooltip('Add, or remove allowed type.');
+    this.setHelpUrl('https://www.youtube.com/watch?v=s2_xaEvcVI0#t=677');
+    this.contextMenu = false;
+  }
+};
+
+Blockly.Blocks['type_group_item'] = {
+  // Add type.
+  init: function() {
+    this.setColour(230);
+    this.appendDummyInput()
+        .appendField('type');
+    this.setPreviousStatement(true);
+    this.setNextStatement(true);
+    this.setTooltip('Add a new allowed type.');
+    this.setHelpUrl('https://www.youtube.com/watch?v=s2_xaEvcVI0#t=677');
+    this.contextMenu = false;
+  }
+};
+
+Blockly.Blocks['type_null'] = {
+  // Null type.
+  valueType: null,
+  init: function() {
+    this.setColour(230);
+    this.appendDummyInput()
+        .appendField('any');
+    this.setOutput(true, 'Type');
+    this.setTooltip('Any type is allowed.');
+    this.setHelpUrl('https://www.youtube.com/watch?v=s2_xaEvcVI0#t=602');
+  }
+};
+
+Blockly.Blocks['type_boolean'] = {
+  // Boolean type.
+  valueType: 'Boolean',
+  init: function() {
+    this.setColour(230);
+    this.appendDummyInput()
+        .appendField('boolean');
+    this.setOutput(true, 'Type');
+    this.setTooltip('Booleans (true/false) are allowed.');
+    this.setHelpUrl('https://www.youtube.com/watch?v=s2_xaEvcVI0#t=602');
+  }
+};
+
+Blockly.Blocks['type_number'] = {
+  // Number type.
+  valueType: 'Number',
+  init: function() {
+    this.setColour(230);
+    this.appendDummyInput()
+        .appendField('number');
+    this.setOutput(true, 'Type');
+    this.setTooltip('Numbers (int/float) are allowed.');
+    this.setHelpUrl('https://www.youtube.com/watch?v=s2_xaEvcVI0#t=602');
+  }
+};
+
+Blockly.Blocks['type_string'] = {
+  // String type.
+  valueType: 'String',
+  init: function() {
+    this.setColour(230);
+    this.appendDummyInput()
+        .appendField('string');
+    this.setOutput(true, 'Type');
+    this.setTooltip('Strings (text) are allowed.');
+    this.setHelpUrl('https://www.youtube.com/watch?v=s2_xaEvcVI0#t=602');
+  }
+};
+
+Blockly.Blocks['type_list'] = {
+  // List type.
+  valueType: 'Array',
+  init: function() {
+    this.setColour(230);
+    this.appendDummyInput()
+        .appendField('list');
+    this.setOutput(true, 'Type');
+    this.setTooltip('Arrays (lists) are allowed.');
+    this.setHelpUrl('https://www.youtube.com/watch?v=s2_xaEvcVI0#t=602');
+  }
+};
+
+Blockly.Blocks['type_other'] = {
+  // Other type.
+  init: function() {
+    this.setColour(230);
+    this.appendDummyInput()
+        .appendField('other')
+        .appendField(new Blockly.FieldTextInput(''), 'TYPE');
+    this.setOutput(true, 'Type');
+    this.setTooltip('Custom type to allow.');
+    this.setHelpUrl('https://www.youtube.com/watch?v=s2_xaEvcVI0#t=702');
+  }
+};
+
+Blockly.Blocks['colour_hue'] = {
+  // Set the colour of the block.
+  init: function() {
+    this.appendDummyInput()
+        .appendField('hue:')
+        .appendField(new Blockly.FieldAngle('0', this.validator), 'HUE');
+    this.setOutput(true, 'Colour');
+    this.setTooltip('Paint the block with this colour.');
+    this.setHelpUrl('https://www.youtube.com/watch?v=s2_xaEvcVI0#t=55');
+  },
+  validator: function(text) {
+    // Update the current block's colour to match.
+    this.sourceBlock_.setColour(text);
+  },
+  mutationToDom: function(workspace) {
+    var container = document.createElement('mutation');
+    container.setAttribute('colour', this.getColour());
+    return container;
+  },
+  domToMutation: function(container) {
+    this.setColour(container.getAttribute('colour'));
+  }
+};
+
+/**
+ * Check to see if more than one field has this name.
+ * Highly inefficient (On^2), but n is small.
+ * @param {!Blockly.Block} referenceBlock Block to check.
+ */
+function fieldNameCheck(referenceBlock) {
+  var name = referenceBlock.getFieldValue('FIELDNAME').toLowerCase();
+  var count = 0;
+  var blocks = referenceBlock.workspace.getAllBlocks();
+  for (var x = 0, block; block = blocks[x]; x++) {
+    var otherName = block.getFieldValue('FIELDNAME');
+    if (!block.disabled && !block.getInheritedDisabled() &&
+        otherName && otherName.toLowerCase() == name) {
+      count++;
+    }
+  }
+  var msg = (count > 1) ?
+      'There are ' + count + ' field blocks\n with this name.' : null;
+  referenceBlock.setWarningText(msg);
+}
+
+/**
+ * Check to see if more than one input has this name.
+ * Highly inefficient (On^2), but n is small.
+ * @param {!Blockly.Block} referenceBlock Block to check.
+ */
+function inputNameCheck(referenceBlock) {
+  var name = referenceBlock.getFieldValue('INPUTNAME').toLowerCase();
+  var count = 0;
+  var blocks = referenceBlock.workspace.getAllBlocks();
+  for (var x = 0, block; block = blocks[x]; x++) {
+    var otherName = block.getFieldValue('INPUTNAME');
+    if (!block.disabled && !block.getInheritedDisabled() &&
+        otherName && otherName.toLowerCase() == name) {
+      count++;
+    }
+  }
+  var msg = (count > 1) ?
+      'There are ' + count + ' input blocks\n with this name.' : null;
+  referenceBlock.setWarningText(msg);
+}

src/blockly/demos/blockfactory/factory.js

@@ -0,0 +1,793 @@
+/**
+ * Blockly Demos: Block Factory
+ *
+ * Copyright 2012 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview JavaScript for Blockly's Block Factory application.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+/**
+ * Workspace for user to build block.
+ * @type {Blockly.Workspace}
+ */
+var mainWorkspace = null;
+
+/**
+ * Workspace for preview of block.
+ * @type {Blockly.Workspace}
+ */
+var previewWorkspace = null;
+
+/**
+ * Name of block if not named.
+ */
+var UNNAMED = 'unnamed';
+
+/**
+ * Change the language code format.
+ */
+function formatChange() {
+  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();
+    updatePreview();
+  } else {
+    mask.style.display = 'none';
+    languageTA.style.display = 'none';
+    languagePre.style.display = 'block';
+    updateLanguage();
+  }
+  disableEnableLink();
+}
+
+/**
+ * Update the language code based on constructs made in Blockly.
+ */
+function updateLanguage() {
+  var rootBlock = getRootBlock();
+  if (!rootBlock) {
+    return;
+  }
+  var blockType = rootBlock.getFieldValue('NAME').trim().toLowerCase();
+  if (!blockType) {
+    blockType = UNNAMED;
+  }
+  blockType = blockType.replace(/\W/g, '_').replace(/^(\d)/, '_\\1');
+  switch (document.getElementById('format').value) {
+    case 'JSON':
+      var code = formatJson_(blockType, rootBlock);
+      break;
+    case 'JavaScript':
+      var code = formatJavaScript_(blockType, rootBlock);
+      break;
+  }
+  injectCode(code, 'languagePre');
+  updatePreview();
+}
+
+/**
+ * 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
+ */
+function formatJson_(blockType, rootBlock) {
+  var JS = {};
+  // ID is not used by Blockly, but may be used by a loader.
+  JS.id = blockType;
+  // Generate inputs.
+  var message = [];
+  var args = [];
+  var contentsBlock = rootBlock.getInputTargetBlock('INPUTS');
+  var lastInput = null;
+  while (contentsBlock) {
+    if (!contentsBlock.disabled && !contentsBlock.getInheritedDisabled()) {
+      var fields = 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(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 && getFieldsJson_(fields).join('').trim() != '') {
+      var align = lastInput.getFieldValue('ALIGN');
+      if (align != 'LEFT') {
+        JS.lastDummyAlign0 = align;
+      }
+      args.pop();
+      message.pop();
+    }
+  }
+  JS.message0 = message.join(' ');
+  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(getOptTypesFrom(rootBlock, 'OUTPUTTYPE') || 'null');
+      break;
+    case 'BOTH':
+      JS.previousStatement =
+          JSON.parse(getOptTypesFrom(rootBlock, 'TOPTYPE') || 'null');
+      JS.nextStatement =
+          JSON.parse(getOptTypesFrom(rootBlock, 'BOTTOMTYPE') || 'null');
+      break;
+    case 'TOP':
+      JS.previousStatement =
+          JSON.parse(getOptTypesFrom(rootBlock, 'TOPTYPE') || 'null');
+      break;
+    case 'BOTTOM':
+      JS.nextStatement =
+          JSON.parse(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.
+ * @return {string} Generanted language code.
+ * @private
+ */
+function formatJavaScript_(blockType, rootBlock) {
+  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 = escapeString(contentsBlock.getFieldValue('INPUTNAME'));
+      }
+      code.push('    this.' + TYPES[contentsBlock.type] + '(' + name + ')');
+      var check = 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 = 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(connectionLineJs_('setOutput', 'OUTPUTTYPE'));
+      break;
+    case 'BOTH':
+      code.push(connectionLineJs_('setPreviousStatement', 'TOPTYPE'));
+      code.push(connectionLineJs_('setNextStatement', 'BOTTOMTYPE'));
+      break;
+    case 'TOP':
+      code.push(connectionLineJs_('setPreviousStatement', 'TOPTYPE'));
+      break;
+    case 'BOTTOM':
+      code.push(connectionLineJs_('setNextStatement', 'BOTTOMTYPE'));
+      break;
+  }
+  // Generate colour.
+  var colourBlock = rootBlock.getInputTargetBlock('COLOUR');
+  if (colourBlock && !colourBlock.disabled) {
+    var hue = parseInt(colourBlock.getFieldValue('HUE'), 10);
+    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.
+ * @return {string} Line of JavaScript code to create connection.
+ * @private
+ */
+function connectionLineJs_(functionName, typeName) {
+  var type = getOptTypesFrom(getRootBlock(), 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
+ */
+function getFieldsJs_(block) {
+  var fields = [];
+  while (block) {
+    if (!block.disabled && !block.getInheritedDisabled()) {
+      switch (block.type) {
+        case 'field_static':
+          // Result: 'hello'
+          fields.push(escapeString(block.getFieldValue('TEXT')));
+          break;
+        case 'field_input':
+          // Result: new Blockly.FieldTextInput('Hello'), 'GREET'
+          fields.push('new Blockly.FieldTextInput(' +
+              escapeString(block.getFieldValue('TEXT')) + '), ' +
+              escapeString(block.getFieldValue('FIELDNAME')));
+          break;
+        case 'field_angle':
+          // Result: new Blockly.FieldAngle(90), 'ANGLE'
+          fields.push('new Blockly.FieldAngle(' +
+              escapeString(block.getFieldValue('ANGLE')) + '), ' +
+              escapeString(block.getFieldValue('FIELDNAME')));
+          break;
+        case 'field_checkbox':
+          // Result: new Blockly.FieldCheckbox('TRUE'), 'CHECK'
+          fields.push('new Blockly.FieldCheckbox(' +
+              escapeString(block.getFieldValue('CHECKED')) + '), ' +
+              escapeString(block.getFieldValue('FIELDNAME')));
+          break;
+        case 'field_colour':
+          // Result: new Blockly.FieldColour('#ff0000'), 'COLOUR'
+          fields.push('new Blockly.FieldColour(' +
+              escapeString(block.getFieldValue('COLOUR')) + '), ' +
+              escapeString(block.getFieldValue('FIELDNAME')));
+          break;
+        case 'field_date':
+          // Result: new Blockly.FieldDate('2015-02-04'), 'DATE'
+          fields.push('new Blockly.FieldDate(' +
+              escapeString(block.getFieldValue('DATE')) + '), ' +
+              escapeString(block.getFieldValue('FIELDNAME')));
+          break;
+        case 'field_variable':
+          // Result: new Blockly.FieldVariable('item'), 'VAR'
+          var varname = escapeString(block.getFieldValue('TEXT') || null);
+          fields.push('new Blockly.FieldVariable(' + varname + '), ' +
+              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] = '[' + escapeString(block.getFieldValue('USER' + i)) +
+                ', ' + escapeString(block.getFieldValue('CPU' + i)) + ']';
+          }
+          if (options.length) {
+            fields.push('new Blockly.FieldDropdown([' +
+                options.join(', ') + ']), ' +
+                escapeString(block.getFieldValue('FIELDNAME')));
+          }
+          break;
+        case 'field_image':
+          // Result: new Blockly.FieldImage('http://...', 80, 60)
+          var src = escapeString(block.getFieldValue('SRC'));
+          var width = Number(block.getFieldValue('WIDTH'));
+          var height = Number(block.getFieldValue('HEIGHT'));
+          var alt = 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
+ */
+function getFieldsJson_(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_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;
+}
+
+/**
+ * Escape a string.
+ * @param {string} string String to escape.
+ * @return {string} Escaped string surrouned by quotes.
+ */
+function escapeString(string) {
+  return JSON.stringify(string);
+}
+
+/**
+ * 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.
+ */
+function getOptTypesFrom(block, name) {
+  var types = 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
+ */
+function getTypesFrom_(block, name) {
+  var typeBlock = block.getInputTargetBlock(name);
+  var types;
+  if (!typeBlock || typeBlock.disabled) {
+    types = [];
+  } else if (typeBlock.type == 'type_other') {
+    types = [escapeString(typeBlock.getFieldValue('TYPE'))];
+  } else if (typeBlock.type == 'type_group') {
+    types = [];
+    for (var n = 0; n < typeBlock.typeCount_; n++) {
+      types = types.concat(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 = [escapeString(typeBlock.valueType)];
+  }
+  return types;
+}
+
+/**
+ * Update the generator code.
+ * @param {!Blockly.Block} block Rendered block in preview workspace.
+ */
+function updateGenerator(block) {
+  function makeVar(root, name) {
+    name = name.toLowerCase().replace(/\W/g, '_');
+    return '  var ' + root + '_' + name;
+  }
+  var language = document.getElementById('language').value;
+  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.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 + "');");
+      }
+    }
+  }
+  code.push("  // TODO: Assemble " + language + " into code variable.");
+  code.push("  var code = \'...\';");
+  if (block.outputConnection) {
+    code.push("  // TODO: Change ORDER_NONE to the correct strength.");
+    code.push("  return [code, Blockly." + language + ".ORDER_NONE];");
+  } else {
+    code.push("  return code;");
+  }
+  code.push("};");
+
+  injectCode(code.join('\n'), 'generatorPre');
+}
+
+/**
+ * Existing direction ('ltr' vs 'rtl') of preview.
+ */
+var oldDir = null;
+
+/**
+ * Update the preview display.
+ */
+function updatePreview() {
+  // Toggle between LTR/RTL if needed (also used in first display).
+  var newDir = document.getElementById('direction').value;
+  if (oldDir != newDir) {
+    if (previewWorkspace) {
+      previewWorkspace.dispose();
+    }
+    var rtl = newDir == 'rtl';
+    previewWorkspace = Blockly.inject('preview',
+        {rtl: rtl,
+         media: '../../media/',
+         scrollbars: true});
+    oldDir = newDir;
+  }
+  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 = {};
+    for (var prop in backupBlocks) {
+      Blockly.Blocks[prop] = backupBlocks[prop];
+    }
+
+    if (format == 'JSON') {
+      var json = JSON.parse(code);
+      Blockly.Blocks[json.id || 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 = Blockly.Block.obtain(previewWorkspace, blockType);
+    previewBlock.initSvg();
+    previewBlock.render();
+    previewBlock.setMovable(false);
+    previewBlock.setDeletable(false);
+    previewBlock.moveBy(15, 10);
+
+    updateGenerator(previewBlock);
+  } finally {
+    Blockly.Blocks = backupBlocks;
+  }
+}
+
+/**
+ * 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.
+ */
+function injectCode(code, id) {
+  Blockly.removeAllRanges();
+  var pre = document.getElementById(id);
+  pre.textContent = code;
+  code = pre.innerHTML;
+  code = prettyPrintOne(code, 'js');
+  pre.innerHTML = code;
+}
+
+/**
+ * Return the uneditable container block that everything else attaches to.
+ * @return {Blockly.Block}
+ */
+function getRootBlock() {
+  var blocks = mainWorkspace.getTopBlocks(false);
+  for (var i = 0, block; block = blocks[i]; i++) {
+    if (block.type == 'factory_base') {
+      return block;
+    }
+  }
+  return null;
+}
+
+/**
+ * Disable the link button if the format is 'Manual', enable otherwise.
+ */
+function disableEnableLink() {
+  var linkButton = document.getElementById('linkButton');
+  linkButton.disabled = document.getElementById('format').value == 'Manual';
+}
+
+/**
+ * Initialize Blockly and layout.  Called on page load.
+ */
+function init() {
+  if ('BlocklyStorage' in window) {
+    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(mainWorkspace);});
+    disableEnableLink();
+  }
+
+  document.getElementById('helpButton').addEventListener('click',
+    function() {
+      open('https://developers.google.com/blockly/custom-blocks/block-factory',
+           'BlockFactoryHelp');
+    });
+
+  var expandList = [
+    document.getElementById('blockly'),
+    document.getElementById('blocklyMask'),
+    document.getElementById('preview'),
+    document.getElementById('languagePre'),
+    document.getElementById('languageTA'),
+    document.getElementById('generatorPre')
+  ];
+  var onresize = function(e) {
+    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';
+    }
+  };
+  onresize();
+  window.addEventListener('resize', onresize);
+
+  var toolbox = document.getElementById('toolbox');
+  mainWorkspace = Blockly.inject('blockly',
+      {toolbox: toolbox, media: '../../media/'});
+
+  // Create the root block.
+  if ('BlocklyStorage' in window && window.location.hash.length > 1) {
+    BlocklyStorage.retrieveXml(window.location.hash.substring(1),
+                               mainWorkspace);
+  } else {
+    var rootBlock = Blockly.Block.obtain(mainWorkspace, 'factory_base');
+    rootBlock.initSvg();
+    rootBlock.render();
+    rootBlock.setMovable(false);
+    rootBlock.setDeletable(false);
+  }
+
+  mainWorkspace.addChangeListener(updateLanguage);
+  document.getElementById('direction')
+      .addEventListener('change', updatePreview);
+  document.getElementById('languageTA')
+      .addEventListener('change', updatePreview);
+  document.getElementById('languageTA')
+      .addEventListener('keyup', updatePreview);
+  document.getElementById('format')
+      .addEventListener('change', formatChange);
+  document.getElementById('language')
+      .addEventListener('change', updatePreview);
+}
+window.addEventListener('load', init);

src/blockly/demos/blockfactory/index.html

@@ -0,0 +1,220 @@
+<!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: Block Factory</title>
+  <script src="/storage.js"></script>
+  <script src="factory.js"></script>
+  <script src="../../blockly_compressed.js"></script>
+  <script src="../../msg/messages.js"></script>
+  <script src="blocks.js"></script>
+  <style>
+    html, body {
+      height: 100%;
+    }
+    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 {
+      height: 100%;
+      width: 100%;
+    }
+    td {
+      vertical-align: top;
+      padding: 0;
+    }
+    #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-family: monospace;
+      font-size: 10pt;
+    }
+
+    button {
+      border-radius: 4px;
+      border: 1px solid #ddd;
+      background-color: #eee;
+      color: #000;
+      padding: 10px;
+      margin: 0 5px;
+      font-size: large;
+    }
+    button:hover:not(:disabled) {
+      box-shadow: 2px 2px 5px #888;
+    }
+    button:disabled {
+      opacity: 0.6;
+    }
+    button>* {
+      opacity: 0.6;
+      vertical-align: text-bottom;
+    }
+    button:hover:not(:disabled)>* {
+      opacity: 1;
+    }
+    #linkButton {
+      display: none;
+    }
+  </style>
+  <link rel="stylesheet" href="../prettify.css">
+  <script src="../prettify.js"></script>
+</head>
+<body>
+  <table>
+    <tr>
+      <td width="50%" height="5%">
+        <h1><a href="https://developers.google.com/blockly/">Blockly</a> &gt;
+          <a href="../index.html">Demos</a> &gt; Block Factory</h1>
+      </td>
+      <td width="50%" height="5%">
+        <table>
+          <tr>
+            <td style="vertical-align: bottom;">
+              <h3>Preview:
+                <select id="direction">
+                  <option value="ltr">LTR</option>
+                  <option value="rtl">RTL</option>
+                </select>
+              </h3>
+            </td>
+            <td style="vertical-align: middle; text-align: right;">
+              <button id="linkButton" title="Save and link to blocks.">
+                <img src="link.png" height="21" width="21">
+              </button>
+              <button id="linkButton" title="Save and link to blocks.">
+                <img src="link.png" height="21" width="21">
+              </button>
+              <button id="helpButton" title="View documentation in new window.">
+                <span>Help</span>
+              </button>
+            </td>
+          </tr>
+        </table>
+      </td>
+    </tr>
+    <tr>
+      <td width="50%" height="95%" style="padding: 2px;">
+        <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="JavaScript">JavaScript</option>
+                  <option value="JSON">JSON</option>
+                  <option value="Manual">Manual edit...</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="Dart">Dart</option>
+                </select>
+              </h3>
+            </td>
+          </tr>
+          <tr>
+            <td height="30%">
+              <pre id="generatorPre"></pre>
+            </td>
+          </tr>
+        </table>
+      </td>
+    </tr>
+  </table>
+  <xml id="toolbox" style="display: none">
+    <category name="Input">
+      <block type="input_value"></block>
+      <block type="input_statement"></block>
+      <block type="input_dummy"></block>
+    </category>
+    <category name="Field">
+      <block type="field_static"></block>
+      <block type="field_input"></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>
+</body>
+</html>

src/blockly/demos/code/code.js

@@ -0,0 +1,533 @@
+/**
+ * Blockly Demos: Code
+ *
+ * Copyright 2012 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview JavaScript for Blockly's Code demo.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+/**
+ * Create a namespace for the application.
+ */
+var Code = {};
+
+/**
+ * Lookup for names of supported languages.  Keys should be in ISO 639 format.
+ */
+Code.LANGUAGE_NAME = {
+  'ar': 'العربية',
+  'be-tarask': 'Taraškievica',
+  'br': 'Brezhoneg',
+  'ca': 'Català',
+  'cs': 'Česky',
+  'da': 'Dansk',
+  'de': 'Deutsch',
+  'el': 'Ελληνικά',
+  'en': 'English',
+  'es': 'Español',
+  'fa': 'فارسی',
+  'fr': 'Français',
+  'he': 'עברית',
+  'hrx': 'Hunsrik',
+  'hu': 'Magyar',
+  'ia': 'Interlingua',
+  'is': 'Íslenska',
+  'it': 'Italiano',
+  'ja': '日本語',
+  'ko': '한국어',
+  'mk': 'Македонски',
+  'ms': 'Bahasa Melayu',
+  'nb': 'Norsk Bokmål',
+  'nl': 'Nederlands, Vlaams',
+  'oc': 'Lenga d\'òc',
+  'pl': 'Polski',
+  'pms': 'Piemontèis',
+  'pt-br': 'Português Brasileiro',
+  'ro': 'Română',
+  'ru': 'Русский',
+  'sc': 'Sardu',
+  'sk': 'Slovenčina',
+  'sr': 'Српски',
+  'sv': 'Svenska',
+  'th': 'ภาษาไทย',
+  'tlh': 'tlhIngan Hol',
+  'tr': 'Türkçe',
+  'uk': 'Українська',
+  'vi': 'Tiếng Việt',
+  'zh-hans': '簡體中文',
+  'zh-hant': '正體中文'
+};
+
+/**
+ * List of RTL languages.
+ */
+Code.LANGUAGE_RTL = ['ar', 'fa', 'he'];
+
+/**
+ * Blockly's main workspace.
+ * @type {Blockly.WorkspaceSvg}
+ */
+Code.workspace = null;
+
+/**
+ * Extracts a parameter from the URL.
+ * If the parameter is absent default_value is returned.
+ * @param {string} name The name of the parameter.
+ * @param {string} defaultValue Value to return if paramater not found.
+ * @return {string} The parameter value or the default value if not found.
+ */
+Code.getStringParamFromUrl = function(name, defaultValue) {
+  var val = location.search.match(new RegExp('[?&]' + name + '=([^&]+)'));
+  return val ? decodeURIComponent(val[1].replace(/\+/g, '%20')) : defaultValue;
+};
+
+/**
+ * Get the language of this user from the URL.
+ * @return {string} User's language.
+ */
+Code.getLang = function() {
+  var lang = Code.getStringParamFromUrl('lang', '');
+  if (Code.LANGUAGE_NAME[lang] === undefined) {
+    // Default to English.
+    lang = 'en';
+  }
+  return lang;
+};
+
+/**
+ * Is the current language (Code.LANG) an RTL language?
+ * @return {boolean} True if RTL, false if LTR.
+ */
+Code.isRtl = function() {
+  return Code.LANGUAGE_RTL.indexOf(Code.LANG) != -1;
+};
+
+/**
+ * Load blocks saved on App Engine Storage or in session/local storage.
+ * @param {string} defaultXml Text representation of default blocks.
+ */
+Code.loadBlocks = function(defaultXml) {
+  try {
+    var loadOnce = window.sessionStorage.loadOnceBlocks;
+  } catch(e) {
+    // Firefox sometimes throws a SecurityError when accessing sessionStorage.
+    // Restarting Firefox fixes this, so it looks like a bug.
+    var loadOnce = null;
+  }
+  if ('BlocklyStorage' in window && window.location.hash.length > 1) {
+    // An href with #key trigers an AJAX call to retrieve saved blocks.
+    BlocklyStorage.retrieveXml(window.location.hash.substring(1));
+  } else if (loadOnce) {
+    // Language switching stores the blocks during the reload.
+    delete window.sessionStorage.loadOnceBlocks;
+    var xml = Blockly.Xml.textToDom(loadOnce);
+    Blockly.Xml.domToWorkspace(Code.workspace, xml);
+  } else if (defaultXml) {
+    // Load the editor with default starting blocks.
+    var xml = Blockly.Xml.textToDom(defaultXml);
+    Blockly.Xml.domToWorkspace(Code.workspace, xml);
+  } else if ('BlocklyStorage' in window) {
+    // Restore saved blocks in a separate thread so that subsequent
+    // initialization is not affected from a failed load.
+    window.setTimeout(BlocklyStorage.restoreBlocks, 0);
+  }
+};
+
+/**
+ * Save the blocks and reload with a different language.
+ */
+Code.changeLanguage = function() {
+  // Store the blocks for the duration of the reload.
+  // This should be skipped for the index page, which has no blocks and does
+  // not load Blockly.
+  // MSIE 11 does not support sessionStorage on file:// URLs.
+  if (typeof Blockly != 'undefined' && window.sessionStorage) {
+    var xml = Blockly.Xml.workspaceToDom(Code.workspace);
+    var text = Blockly.Xml.domToText(xml);
+    window.sessionStorage.loadOnceBlocks = text;
+  }
+
+  var languageMenu = document.getElementById('languageMenu');
+  var newLang = encodeURIComponent(
+      languageMenu.options[languageMenu.selectedIndex].value);
+  var search = window.location.search;
+  if (search.length <= 1) {
+    search = '?lang=' + newLang;
+  } else if (search.match(/[?&]lang=[^&]*/)) {
+    search = search.replace(/([?&]lang=)[^&]*/, '$1' + newLang);
+  } else {
+    search = search.replace(/\?/, '?lang=' + newLang + '&');
+  }
+
+  window.location = window.location.protocol + '//' +
+      window.location.host + window.location.pathname + search;
+};
+
+/**
+ * Bind a function to a button's click event.
+ * On touch enabled browsers, ontouchend is treated as equivalent to onclick.
+ * @param {!Element|string} el Button element or ID thereof.
+ * @param {!Function} func Event handler to bind.
+ */
+Code.bindClick = function(el, func) {
+  if (typeof el == 'string') {
+    el = document.getElementById(el);
+  }
+  el.addEventListener('click', func, true);
+  el.addEventListener('touchend', func, true);
+};
+
+/**
+ * Load the Prettify CSS and JavaScript.
+ */
+Code.importPrettify = function() {
+  //<link rel="stylesheet" href="../prettify.css">
+  //<script src="../prettify.js"></script>
+  var link = document.createElement('link');
+  link.setAttribute('rel', 'stylesheet');
+  link.setAttribute('href', '../prettify.css');
+  document.head.appendChild(link);
+  var script = document.createElement('script');
+  script.setAttribute('src', '../prettify.js');
+  document.head.appendChild(script);
+};
+
+/**
+ * Compute the absolute coordinates and dimensions of an HTML element.
+ * @param {!Element} element Element to match.
+ * @return {!Object} Contains height, width, x, and y properties.
+ * @private
+ */
+Code.getBBox_ = function(element) {
+  var height = element.offsetHeight;
+  var width = element.offsetWidth;
+  var x = 0;
+  var y = 0;
+  do {
+    x += element.offsetLeft;
+    y += element.offsetTop;
+    element = element.offsetParent;
+  } while (element);
+  return {
+    height: height,
+    width: width,
+    x: x,
+    y: y
+  };
+};
+
+/**
+ * User's language (e.g. "en").
+ * @type {string}
+ */
+Code.LANG = Code.getLang();
+
+/**
+ * List of tab names.
+ * @private
+ */
+Code.TABS_ = ['blocks', 'javascript', 'php', 'python', 'dart', 'arduino', 'xml'];
+
+Code.selected = 'blocks';
+
+/**
+ * Switch the visible pane when a tab is clicked.
+ * @param {string} clickedName Name of tab clicked.
+ */
+Code.tabClick = function(clickedName) {
+  // If the XML tab was open, save and render the content.
+  if (document.getElementById('tab_xml').className == 'tabon') {
+    var xmlTextarea = document.getElementById('content_xml');
+    var xmlText = xmlTextarea.value;
+    var xmlDom = null;
+    try {
+      xmlDom = Blockly.Xml.textToDom(xmlText);
+    } catch (e) {
+      var q =
+          window.confirm(MSG['badXml'].replace('%1', e));
+      if (!q) {
+        // Leave the user on the XML tab.
+        return;
+      }
+    }
+    if (xmlDom) {
+      Code.workspace.clear();
+      Blockly.Xml.domToWorkspace(Code.workspace, xmlDom);
+    }
+  }
+
+  if (document.getElementById('tab_blocks').className == 'tabon') {
+    Code.workspace.setVisible(false);
+  }
+  // Deselect all tabs and hide all panes.
+  for (var i = 0; i < Code.TABS_.length; i++) {
+    var name = Code.TABS_[i];
+    document.getElementById('tab_' + name).className = 'taboff';
+    document.getElementById('content_' + name).style.visibility = 'hidden';
+  }
+
+  // Select the active tab.
+  Code.selected = clickedName;
+  document.getElementById('tab_' + clickedName).className = 'tabon';
+  // Show the selected pane.
+  document.getElementById('content_' + clickedName).style.visibility =
+      'visible';
+  Code.renderContent();
+  if (clickedName == 'blocks') {
+    Code.workspace.setVisible(true);
+  }
+  Blockly.fireUiEvent(window, 'resize');
+};
+
+/**
+ * Populate the currently selected pane with content generated from the blocks.
+ */
+Code.renderContent = function() {
+  var content = document.getElementById('content_' + Code.selected);
+  // Initialize the pane.
+  if (content.id == 'content_xml') {
+    var xmlTextarea = document.getElementById('content_xml');
+    var xmlDom = Blockly.Xml.workspaceToDom(Code.workspace);
+    var xmlText = Blockly.Xml.domToPrettyText(xmlDom);
+    xmlTextarea.value = xmlText;
+    xmlTextarea.focus();
+  } else if (content.id == 'content_javascript') {
+    var code = Blockly.JavaScript.workspaceToCode(Code.workspace);
+    content.textContent = code;
+    if (typeof prettyPrintOne == 'function') {
+      code = content.innerHTML;
+      code = prettyPrintOne(code, 'js');
+      content.innerHTML = code;
+    }
+  } else if (content.id == 'content_python') {
+    code = Blockly.Python.workspaceToCode(Code.workspace);
+    content.textContent = code;
+    if (typeof prettyPrintOne == 'function') {
+      code = content.innerHTML;
+      code = prettyPrintOne(code, 'py');
+      content.innerHTML = code;
+    }
+  } else if (content.id == 'content_php') {
+    code = Blockly.PHP.workspaceToCode(Code.workspace);
+    content.textContent = code;
+    if (typeof prettyPrintOne == 'function') {
+      code = content.innerHTML;
+      code = prettyPrintOne(code, 'php');
+      content.innerHTML = code;
+    }
+  } else if (content.id == 'content_dart') {
+    code = Blockly.Dart.workspaceToCode(Code.workspace);
+    content.textContent = code;
+    if (typeof prettyPrintOne == 'function') {
+      code = content.innerHTML;
+      code = prettyPrintOne(code, 'dart');
+      content.innerHTML = code;
+    }
+  } else if (content.id == 'content_arduino') {
+    code = Blockly.Arduino.workspaceToCode(Code.workspace);
+    content.textContent = code;
+    if (typeof prettyPrintOne == 'function') {
+      code = content.innerHTML;
+      code = prettyPrintOne(code, 'arduino');
+      content.innerHTML = code;
+    }
+  }
+};
+
+/**
+ * Initialize Blockly.  Called on page load.
+ */
+Code.init = function() {
+  Code.initLanguage();
+
+  var rtl = Code.isRtl();
+  var container = document.getElementById('content_area');
+  var onresize = function(e) {
+    var bBox = Code.getBBox_(container);
+    for (var i = 0; i < Code.TABS_.length; i++) {
+      var el = document.getElementById('content_' + Code.TABS_[i]);
+      el.style.top = bBox.y + 'px';
+      el.style.left = bBox.x + 'px';
+      // Height and width need to be set, read back, then set again to
+      // compensate for scrollbars.
+      el.style.height = bBox.height + 'px';
+      el.style.height = (2 * bBox.height - el.offsetHeight) + 'px';
+      el.style.width = bBox.width + 'px';
+      el.style.width = (2 * bBox.width - el.offsetWidth) + 'px';
+    }
+    // Make the 'Blocks' tab line up with the toolbox.
+    if (Code.workspace.toolbox_.width) {
+      document.getElementById('tab_blocks').style.minWidth =
+          (Code.workspace.toolbox_.width - 38) + 'px';
+          // Account for the 19 pixel margin and on each side.
+    }
+  };
+  window.addEventListener('resize', onresize, false);
+
+  var toolbox = document.getElementById('toolbox');
+  Code.workspace = Blockly.inject('content_blocks',
+      {grid:
+          {spacing: 25,
+           length: 3,
+           colour: '#ccc',
+           snap: true},
+       media: '../../media/',
+       rtl: rtl,
+       toolbox: toolbox});
+
+  // Add to reserved word list: Local variables in execution evironment (runJS)
+  // and the infinite loop detection function.
+  Blockly.JavaScript.addReservedWords('code,timeouts,checkTimeout');
+
+  Code.loadBlocks('');
+
+  if ('BlocklyStorage' in window) {
+    // Hook a save function onto unload.
+    BlocklyStorage.backupOnUnload(Code.workspace);
+  }
+
+  Code.tabClick(Code.selected);
+  Blockly.fireUiEvent(window, 'resize');
+
+  Code.bindClick('trashButton',
+      function() {Code.discard(); Code.renderContent();});
+  Code.bindClick('runButton', Code.runJS);
+  // Disable the link button if page isn't backed by App Engine storage.
+  var linkButton = document.getElementById('linkButton');
+  if ('BlocklyStorage' in window) {
+    BlocklyStorage['HTTPREQUEST_ERROR'] = MSG['httpRequestError'];
+    BlocklyStorage['LINK_ALERT'] = MSG['linkAlert'];
+    BlocklyStorage['HASH_ERROR'] = MSG['hashError'];
+    BlocklyStorage['XML_ERROR'] = MSG['xmlError'];
+    Code.bindClick(linkButton,
+        function() {BlocklyStorage.link(Code.workspace);});
+  } else if (linkButton) {
+    linkButton.className = 'disabled';
+  }
+
+  for (var i = 0; i < Code.TABS_.length; i++) {
+    var name = Code.TABS_[i];
+    Code.bindClick('tab_' + name,
+        function(name_) {return function() {Code.tabClick(name_);};}(name));
+  }
+
+  onresize();
+  // Lazy-load the syntax-highlighting.
+  window.setTimeout(Code.importPrettify, 1);
+};
+
+/**
+ * Initialize the page language.
+ */
+Code.initLanguage = function() {
+  // Set the HTML's language and direction.
+  var rtl = Code.isRtl();
+  document.dir = rtl ? 'rtl' : 'ltr';
+  document.head.parentElement.setAttribute('lang', Code.LANG);
+
+  // Sort languages alphabetically.
+  var languages = [];
+  for (var lang in Code.LANGUAGE_NAME) {
+    languages.push([Code.LANGUAGE_NAME[lang], lang]);
+  }
+  var comp = function(a, b) {
+    // Sort based on first argument ('English', 'Русский', '简体字', etc).
+    if (a[0] > b[0]) return 1;
+    if (a[0] < b[0]) return -1;
+    return 0;
+  };
+  languages.sort(comp);
+  // Populate the language selection menu.
+  var languageMenu = document.getElementById('languageMenu');
+  languageMenu.options.length = 0;
+  for (var i = 0; i < languages.length; i++) {
+    var tuple = languages[i];
+    var lang = tuple[tuple.length - 1];
+    var option = new Option(tuple[0], lang);
+    if (lang == Code.LANG) {
+      option.selected = true;
+    }
+    languageMenu.options.add(option);
+  }
+  languageMenu.addEventListener('change', Code.changeLanguage, true);
+
+  // Inject language strings.
+  document.title += ' ' + MSG['title'];
+  document.getElementById('title').textContent = MSG['title'];
+  document.getElementById('tab_blocks').textContent = MSG['blocks'];
+
+  document.getElementById('linkButton').title = MSG['linkTooltip'];
+  document.getElementById('runButton').title = MSG['runTooltip'];
+  document.getElementById('trashButton').title = MSG['trashTooltip'];
+
+  var categories = ['catLogic', 'catLoops', 'catMath', 'catText', 'catLists',
+                    'catColour', 'catVariables', 'catFunctions'];
+  for (var i = 0, cat; cat = categories[i]; i++) {
+    document.getElementById(cat).setAttribute('name', MSG[cat]);
+  }
+  var textVars = document.getElementsByClassName('textVar');
+  for (var i = 0, textVar; textVar = textVars[i]; i++) {
+    textVar.textContent = MSG['textVariable'];
+  }
+  var listVars = document.getElementsByClassName('listVar');
+  for (var i = 0, listVar; listVar = listVars[i]; i++) {
+    listVar.textContent = MSG['listVariable'];
+  }
+};
+
+/**
+ * Execute the user's code.
+ * Just a quick and dirty eval.  Catch infinite loops.
+ */
+Code.runJS = function() {
+  Blockly.JavaScript.INFINITE_LOOP_TRAP = '  checkTimeout();\n';
+  var timeouts = 0;
+  var checkTimeout = function() {
+    if (timeouts++ > 1000000) {
+      throw MSG['timeout'];
+    }
+  };
+  var code = Blockly.JavaScript.workspaceToCode(Code.workspace);
+  Blockly.JavaScript.INFINITE_LOOP_TRAP = null;
+  try {
+    eval(code);
+  } catch (e) {
+    alert(MSG['badCode'].replace('%1', e));
+  }
+};
+
+/**
+ * Discard all blocks from the workspace.
+ */
+Code.discard = function() {
+  var count = Code.workspace.getAllBlocks().length;
+  if (count < 2 ||
+      window.confirm(MSG['discard'].replace('%1', count))) {
+    Code.workspace.clear();
+    window.location.hash = '';
+  }
+};
+
+// Load the Code demo's language strings.
+document.write('<script src="msg/' + Code.LANG + '.js"></script>\n');
+// Load Blockly's language strings.
+document.write('<script src="../../msg/js/' + Code.LANG + '.js"></script>\n');
+
+window.addEventListener('load', Code.init);

src/blockly/demos/code/index.html

@@ -0,0 +1,290 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="google" value="notranslate">
+  <title>Blockly Demo:</title>
+  <link rel="stylesheet" href="style.css">
+  <script src="/storage.js"></script>
+  <script src="../../blockly_compressed.js"></script>
+  <script src="../../blocks_compressed.js"></script>
+  <script src="../../javascript_compressed.js"></script>
+  <script src="../../python_compressed.js"></script>
+  <script src="../../php_compressed.js"></script>
+  <script src="../../dart_compressed.js"></script>
+  <script src="../../arduino_compressed.js"></script>
+  <script src="code.js"></script>
+</head>
+<body>
+  <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">...</span>
+        </h1>
+      </td>
+      <td class="farSide">
+        <select id="languageMenu"></select>
+      </td>
+    </tr>
+    <tr>
+      <td colspan=2>
+        <table width="100%">
+          <tr id="tabRow" height="1em">
+            <td id="tab_blocks" class="tabon">...</td>
+            <td class="tabmin">&nbsp;</td>
+            <td id="tab_javascript" class="taboff">JavaScript</td>
+            <td class="tabmin">&nbsp;</td>
+            <td id="tab_python" class="taboff">Python</td>
+            <td class="tabmin">&nbsp;</td>
+            <td id="tab_php" class="taboff">PHP</td>
+            <td class="tabmin">&nbsp;</td>
+            <td id="tab_dart" class="taboff">Dart</td>
+            <td class="tabmin">&nbsp;</td>
+            <td id="tab_arduino" class="taboff">Arduino</td>
+            <td class="tabmin">&nbsp;</td>
+            <td id="tab_xml" class="taboff">XML</td>
+            <td class="tabmax">
+              <button id="trashButton" class="notext" title="...">
+                <img src='../../media/1x1.gif' class="trash icon21">
+              </button>
+              <button id="linkButton" class="notext" title="...">
+                <img src='../../media/1x1.gif' class="link icon21">
+              </button>
+              <button id="runButton" class="notext primary" title="...">
+                <img src='../../media/1x1.gif' class="run icon21">
+              </button>
+            </td>
+          </tr>
+        </table>
+      </td>
+    </tr>
+    <tr>
+      <td height="99%" colspan=2 id="content_area">
+      </td>
+    </tr>
+  </table>
+  <div id="content_blocks" class="content"></div>
+  <pre id="content_javascript" class="content"></pre>
+  <pre id="content_php" class="content"></pre>
+  <pre id="content_arduino" class="content"></pre>
+  <pre id="content_python" class="content"></pre>
+  <pre id="content_dart" class="content"></pre>
+  <textarea id="content_xml" class="content" wrap="off"></textarea>
+
+  <xml id="toolbox" style="display: none">
+    <category id="catLogic">
+      <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 id="catLoops">
+      <block type="controls_repeat_ext">
+        <value name="TIMES">
+          <block type="math_number">
+            <field name="NUM">10</field>
+          </block>
+        </value>
+      </block>
+      <block type="controls_whileUntil"></block>
+      <block type="controls_for">
+        <value name="FROM">
+          <block type="math_number">
+            <field name="NUM">1</field>
+          </block>
+        </value>
+        <value name="TO">
+          <block type="math_number">
+            <field name="NUM">10</field>
+          </block>
+        </value>
+        <value name="BY">
+          <block type="math_number">
+            <field name="NUM">1</field>
+          </block>
+        </value>
+      </block>
+      <block type="controls_forEach"></block>
+      <block type="controls_flow_statements"></block>
+    </category>
+    <category id="catMath">
+      <block type="math_number"></block>
+      <block type="math_arithmetic"></block>
+      <block type="math_single"></block>
+      <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>
+      <block type="math_constrain">
+        <value name="LOW">
+          <block type="math_number">
+            <field name="NUM">1</field>
+          </block>
+        </value>
+        <value name="HIGH">
+          <block type="math_number">
+            <field name="NUM">100</field>
+          </block>
+        </value>
+      </block>
+      <block type="math_random_int">
+        <value name="FROM">
+          <block type="math_number">
+            <field name="NUM">1</field>
+          </block>
+        </value>
+        <value name="TO">
+          <block type="math_number">
+            <field name="NUM">100</field>
+          </block>
+        </value>
+      </block>
+      <block type="math_random_float"></block>
+    </category>
+    <category id="catText">
+      <block type="text"></block>
+      <block type="text_join"></block>
+      <block type="text_append">
+        <value name="TEXT">
+          <block type="text"></block>
+        </value>
+      </block>
+      <block type="text_length"></block>
+      <block type="text_isEmpty"></block>
+      <block type="text_indexOf">
+        <value name="VALUE">
+          <block type="variables_get">
+            <field name="VAR" class="textVar">...</field>
+          </block>
+        </value>
+      </block>
+      <block type="text_charAt">
+        <value name="VALUE">
+          <block type="variables_get">
+            <field name="VAR" class="textVar">...</field>
+          </block>
+        </value>
+      </block>
+      <block type="text_getSubstring">
+        <value name="STRING">
+          <block type="variables_get">
+            <field name="VAR" class="textVar">...</field>
+          </block>
+        </value>
+      </block>
+      <block type="text_changeCase"></block>
+      <block type="text_trim"></block>
+      <block type="text_print"></block>
+      <block type="text_prompt_ext">
+        <value name="TEXT">
+          <block type="text"></block>
+        </value>
+      </block>
+    </category>
+    <category id="catLists">
+      <block type="lists_create_empty"></block>
+      <block type="lists_create_with"></block>
+      <block type="lists_repeat">
+        <value name="NUM">
+          <block type="math_number">
+            <field name="NUM">5</field>
+          </block>
+        </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" class="listVar">...</field>
+          </block>
+        </value>
+      </block>
+      <block type="lists_getIndex">
+        <value name="VALUE">
+          <block type="variables_get">
+            <field name="VAR" class="listVar">...</field>
+          </block>
+        </value>
+      </block>
+      <block type="lists_setIndex">
+        <value name="LIST">
+          <block type="variables_get">
+            <field name="VAR" class="listVar">...</field>
+          </block>
+        </value>
+      </block>
+      <block type="lists_getSublist">
+        <value name="LIST">
+          <block type="variables_get">
+            <field name="VAR" class="listVar">...</field>
+          </block>
+        </value>
+      </block>
+      <block type="lists_split">
+        <value name="DELIM">
+          <block type="text">
+            <field name="TEXT">,</field>
+          </block>
+        </value>
+      </block>
+    </category>
+    <category id="catColour">
+      <block type="colour_picker"></block>
+      <block type="colour_random"></block>
+      <block type="colour_rgb">
+        <value name="RED">
+          <block type="math_number">
+            <field name="NUM">100</field>
+          </block>
+        </value>
+        <value name="GREEN">
+          <block type="math_number">
+            <field name="NUM">50</field>
+          </block>
+        </value>
+        <value name="BLUE">
+          <block type="math_number">
+            <field name="NUM">0</field>
+          </block>
+        </value>
+      </block>
+      <block type="colour_blend">
+        <value name="COLOUR1">
+          <block type="colour_picker">
+            <field name="COLOUR">#ff0000</field>
+          </block>
+        </value>
+        <value name="COLOUR2">
+          <block type="colour_picker">
+            <field name="COLOUR">#3333ff</field>
+          </block>
+        </value>
+        <value name="RATIO">
+          <block type="math_number">
+            <field name="NUM">0.5</field>
+          </block>
+        </value>
+      </block>
+    </category>
+    <sep></sep>
+    <category id="catVariables" custom="VARIABLE"></category>
+    <category id="catFunctions" custom="PROCEDURE"></category>
+  </xml>
+
+</body>
+</html>

src/blockly/demos/code/msg/ar.js

@@ -0,0 +1,25 @@
+var MSG = {
+  title: "كود",
+  blocks: "البلوكات",
+  linkTooltip: "احفظ ووصلة إلى البلوكات.",
+  runTooltip: "شغل البرنامج المعرف بواسطة البلوكات في مساحة العمل.",
+  badCode: "خطأ في البرنامج:\n %1",
+  timeout: "تم تجاوز الحد الأقصى لتكرارات التنفيذ .",
+  discard: "حذف كل بلوكات %1؟",
+  trashTooltip: "تجاهل كل البلوكات.",
+  catLogic: "منطق",
+  catLoops: "الحلقات",
+  catMath: "رياضيات",
+  catText: "نص",
+  catLists: "قوائم",
+  catColour: "لون",
+  catVariables: "متغيرات",
+  catFunctions: "إجراءات",
+  listVariable: "قائمة",
+  textVariable: "نص",
+  httpRequestError: "كانت هناك مشكلة مع هذا الطلب.",
+  linkAlert: "مشاركة كود بلوكلي الخاص بك مع هذا الرابط:\n %1",
+  hashError: "عذراً،ال '%1' لا تتوافق مع أي برنامج تم حفظه.",
+  xmlError: "تعذر تحميل الملف المحفوظة الخاصة بك.  ربما تم إنشاؤه باستخدام إصدار مختلف من بلوكلي؟",
+  badXml: "خطأ في توزيع ال \"XML\":\n %1\n\nحدد 'موافق' للتخلي عن التغييرات أو 'إلغاء الأمر' لمواصلة تحرير ال\"XML\"."
+};

src/blockly/demos/code/msg/be-tarask.js

@@ -0,0 +1,25 @@
+var MSG = {
+  title: "Код",
+  blocks: "Блёкі",
+  linkTooltip: "Захаваць і зьвязаць з блёкамі.",
+  runTooltip: "Запусьціце праграму, вызначаную блёкамі ў працоўнай вобласьці.",
+  badCode: "Памылка праграмы:\n%1",
+  timeout: "Перавышана максымальная колькасьць ітэрацыяў.",
+  discard: "Выдаліць усе блёкі %1?",
+  trashTooltip: "Выдаліць усе блёкі.",
+  catLogic: "Лёгіка",
+  catLoops: "Петлі",
+  catMath: "Матэматычныя формулы",
+  catText: "Тэкст",
+  catLists: "Сьпісы",
+  catColour: "Колер",
+  catVariables: "Зьменныя",
+  catFunctions: "Функцыі",
+  listVariable: "сьпіс",
+  textVariable: "тэкст",
+  httpRequestError: "Узьнікла праблема з запытам.",
+  linkAlert: "Падзяліцца Вашым блёкам праз гэтую спасылку:\n\n%1",
+  hashError: "Прабачце, '%1' не адпавядае ніводнай захаванай праграме.",
+  xmlError: "Не атрымалася загрузіць захаваны файл. Магчыма, ён быў створаны з іншай вэрсіяй Блёклі?",
+  badXml: "Памылка сынтаксічнага аналізу XML:\n%1\n\nАбярыце \"ОК\", каб адмовіцца ад зьменаў ці \"Скасаваць\" для далейшага рэдагаваньня XML."
+};

src/blockly/demos/code/msg/br.js

@@ -0,0 +1,25 @@
+var MSG = {
+  title: "Kod",
+  blocks: "Bloc'hoù",
+  linkTooltip: "Enrollañ ha liammañ d'ar bloc'hadoù.",
+  runTooltip: "Lañsañ ar programm termenet gant ar bloc'hadoù en takad labour.",
+  badCode: "Fazi programm :\n%1",
+  timeout: "Tizhet eo bet an niver brasañ a iteradurioù seveniñ aotreet.",
+  discard: "Diverkañ an holl vloc'hoù %1 ?",
+  trashTooltip: "Disteurel an holl vloc'hoù.",
+  catLogic: "Poell",
+  catLoops: "Boukloù",
+  catMath: "Matematik",
+  catText: "Testenn",
+  catLists: "Rolloù",
+  catColour: "Liv",
+  catVariables: "Argemmennoù",
+  catFunctions: "Arc'hwelioù",
+  listVariable: "roll",
+  textVariable: "testenn",
+  httpRequestError: "Ur gudenn zo gant ar reked.",
+  linkAlert: "Rannañ ho ploc'hoù gant al liamm-mañ :\n\n%1",
+  hashError: "Digarezit. \"%1\" ne glot gant programm enrollet ebet.",
+  xmlError: "Ne c'haller ket kargañ ho restr enrollet. Marteze e oa bet krouet gant ur stumm disheñvel eus Blockly ?",
+  badXml: "Fazi dielfennañ XML :\n%1\n\nDibabit \"Mat eo\" evit dilezel ar c'hemmoù-se pe \"Nullañ\" evit kemmañ an XML c'hoazh."
+};