[pull] master from microsoft:master

pxtblocks/fields/field_animation.ts

@@ -48,7 +48,7 @@ export class FieldAnimationEditor extends FieldAssetEditor<FieldAnimationOptions
     initView() {
         // Register mouseover events for animating preview
         (this.sourceBlock_ as Blockly.BlockSvg).getSvgRoot().addEventListener("mouseenter", this.onMouseEnter);
-        (this.sourceBlock_ as Blockly.BlockSvg).getSvgRoot().addEventListener("mouseleave", this.onMouseLeave);
+        (this.sourceBlock_ as Blockly.BlockSvg).getSvgRoot().addEventListener("mouseleave", this.cancelAnimation);
     }
 
     showEditor_() {
@@ -156,7 +156,7 @@ export class FieldAnimationEditor extends FieldAssetEditor<FieldAnimationOptions
         }
     }
 
-    protected onMouseEnter = () => {
+    protected onMouseEnter = (e: MouseEvent) => {
         if (this.animateRef || !this.asset) return;
 
         const assetInterval = this.getParentInterval() || this.asset.interval;
@@ -168,15 +168,27 @@ export class FieldAnimationEditor extends FieldAssetEditor<FieldAnimationOptions
             if (this.preview && this.frames[index]) this.preview.src(this.frames[index]);
             index = (index + 1) % this.frames.length;
         }, interval);
+
+        document.addEventListener("mousemove", this.onDocumentMouseMove);
+    }
+
+    protected onDocumentMouseMove = (e: MouseEvent) => {
+        const rect = (this.sourceBlock_ as Blockly.BlockSvg).getSvgRoot().getBoundingClientRect();
+
+        if (e.clientX < rect.left || e.clientX > rect.right || e.clientY < rect.top || e.clientY > rect.bottom) {
+            this.cancelAnimation();
+        }
     }
 
-    protected onMouseLeave = () => {
+    protected cancelAnimation = () => {
         if (this.animateRef) clearInterval(this.animateRef);
         this.animateRef = undefined;
 
         if (this.preview && this.frames[0]) {
             this.preview.src(this.frames[0]);
         }
+
+        document.removeEventListener("mousemove", this.onDocumentMouseMove);
     }
 
     protected getParentIntervalBlock(): Blockly.Block {
@@ -220,6 +232,13 @@ export class FieldAnimationEditor extends FieldAssetEditor<FieldAnimationOptions
     protected parseFieldOptions(opts: FieldAnimationOptions): ParsedFieldAnimationOptions {
         return parseFieldOptions(opts);
     }
+
+    onDispose() {
+        super.onDispose();
+        (this.sourceBlock_ as Blockly.BlockSvg).getSvgRoot().removeEventListener("mouseenter", this.onMouseEnter);
+        (this.sourceBlock_ as Blockly.BlockSvg).getSvgRoot().removeEventListener("mouseleave", this.cancelAnimation);
+        document.removeEventListener("mousemove", this.onDocumentMouseMove);
+    }
 }
 
 function parseFieldOptions(opts: FieldAnimationOptions) {

pxtlib/tilemap.ts

@@ -1589,7 +1589,28 @@ namespace pxt {
                 }
                 if (entry.tilemapTile) {
                     tags.push("tile");
-                    tags.push("category-" + namespaceName)
+
+                    let category: string = undefined;
+                    if (entry.displayName && entry.displayName.indexOf("--") !== -1) {
+                        const rawCategory = entry.displayName.split("--")[1].trim();
+                        const categoryParts = rawCategory.split(/[\s\-]+/g).map((part, index) => {
+                            if (index === 0) {
+                                return part
+                            }
+                            else {
+                                return part.charAt(0).toUpperCase() + part.slice(1);
+                            }
+                        });
+                        category = categoryParts.join("");
+                    }
+
+                    if (!category && !/^transparency(?:4|8|16|32)$/.test(varName)) {
+                        category = namespaceName
+                    }
+
+                    if (category) {
+                        tags.push("category-" + category);
+                    }
                 }
             }
 

theme/debugger.less

@@ -133,6 +133,9 @@
         font-size: larger;
         color: var(--pxt-neutral-foreground1);
     }
+    .variableAndValue .variable.varname i.ui.icon.small {
+        background: unset;
+    }
 }
 .ui.segment.debugvariables {
     width: 100%;

webapp/src/app.tsx

@@ -2708,7 +2708,7 @@ export class ProjectView
 
     initDragAndDrop() {
         draganddrop.addDragAndDropHandler({
-            filter: file => file.size < 1000000,
+            filter: () => true,
             dragged: files => {
                 if (files) {
                     pxt.tickEvent("dragandrop.open")