Blocks from context menus

[NeilFraser]

Currently context menus for variables look like this:

It would be better if they looked like this:

Ideally the block could be dragged out (like from a flyout), but also consider it just being a graphical button which creates the block when clicked (like the existing menu row). This would apply to the context menus of variable blocks, for/in loops, function arguments, and maybe some others.

This issue should not be addressed right now, since the context menus are due for rewriting. They were copied from Closure and suffer from code bloat. However, while rewriting these menus, we should keep this issue in mind.

How to achieve this goal is an open question. Maybe the menu row should be a flyout. Maybe the menu row should contain a dynamically-generated PNG with XML payload. Maybe the menu row should be a workspace.

This proposal is a result of seeing @BeksOmega unexpectedly drag a block out of a field, followed by the rest of us dragging our jaws off the floor.

[samelhusseini]

I think I've seen something like this in App Inventor. @ewpatton?

[ewpatton]

We don't have this feature specifically, but we have two that are very similar and would in combination be something akin to this.

1. We've had FieldFlydown as a custom field since 2014. This is used for both global and lexically scoped variables to retrieve getter/setter blocks for variables. It's accomplished by creating a new group on the <svg> element and creating a flyout that draws to that group. The flyout only ever contains the set/get blocks.

2. I've been working on a new documentation system that allows us to attach help items to menus, which when clicked show an iframe with additional content explaining the feature. One can then drag blocks out of this iframe into the main workspace. I demoed this at the summit, but it's not in production yet. This uses the code-in-PNG feature that I also demoed at the summit (and is in production). In theory, this can use any block but isn't as clean because dragging across the iframe boundary is implemented with images rather than svg, and the browser typically shows a translucent copy of the image so it doesn't feel as real as dragging a block.

If I were to attempt an implementation of this, I would probably embed an <svg> directly into the menu item and have a drag start handler reposition it in the workspace's <svg> from the menu at the same x, y coordinates using transforms. This way everything lives in the same DOM space (as in option 1) but benefits from embedding the content in the menus (option 2).

[moniika]

Transferring to Blockly Samples as this would make a really nice plugin.