0.0.49

Fix download and save icons.
Merge pull request #167 from Microsoft/blockfixes
2018-01-03 15:02:35 -08:00 · 2018-01-03 15:02:24 -08:00 · 2018-01-03 14:22:18 -08:00 · 2018-01-03 14:22:00 -08:00 · 2018-01-03 14:21:04 -08:00 · 2018-01-03 14:20:33 -08:00
52 changed files with 11377 additions and 357 deletions
--- a/docs/static/fonts/icons/iconfont.css
+++ b/docs/static/fonts/icons/iconfont.css
@ -1,8 +1,8 @@
@font-face {
 	font-family: "iconfont";
-	src: url("iconfont.eot?e05611aaee246c1da118a83eaf515de9?#iefix") format("embedded-opentype"),
-url("iconfont.woff2?e05611aaee246c1da118a83eaf515de9") format("woff2"),
-url("iconfont.woff?e05611aaee246c1da118a83eaf515de9") format("woff");
+	src: url("iconfont.eot?6e1ef95090bc1e1acc3a7e6bb86172de?#iefix") format("embedded-opentype"),
+url("iconfont.woff2?6e1ef95090bc1e1acc3a7e6bb86172de") format("woff2"),
+url("iconfont.woff?6e1ef95090bc1e1acc3a7e6bb86172de") format("woff");
 }

 .icon {
@ -28,3 +28,60 @@ url("iconfont.woff?e05611aaee246c1da118a83eaf515de9") format("woff");
 .icon-gyro:before {
 	content: "\f104";
 }
+.icon-addpackage:before {
+	content: "\f105";
+}
+.icon-brick:before {
+	content: "\f106";
+}
+.icon-controls:before {
+	content: "\f107";
+}
+.icon-functions:before {
+	content: "\f108";
+}
+.icon-list:before {
+	content: "\f109";
+}
+.icon-logic:before {
+	content: "\f10a";
+}
+.icon-loops:before {
+	content: "\f10b";
+}
+.icon-math:before {
+	content: "\f10c";
+}
+.icon-motors:before {
+	content: "\f10d";
+}
+.icon-music:before {
+	content: "\f10e";
+}
+.icon-sensors:before {
+	content: "\f10f";
+}
+.icon-text:before {
+	content: "\f110";
+}
+.icon-variables:before {
+	content: "\f111";
+}
+.icon-cancel:before {
+	content: "\f112";
+}
+.icon-check:before {
+	content: "\f113";
+}
+.icon-download:before {
+	content: "\f114";
+}
+.icon-save:before {
+	content: "\f115";
+}
+.icon-advancedcollapsed:before {
+	content: "\f116";
+}
+.icon-advancedexpanded:before {
+	content: "\f117";
+}
--- a/docs/static/fonts/icons/iconfont.eot
+++ b/docs/static/fonts/icons/iconfont.eot
--- a/docs/static/fonts/icons/iconfont.svg
+++ b/docs/static/fonts/icons/iconfont.svg
@ -19,6 +19,63 @@
    <glyph glyph-name="gyro"
      unicode="&#xF104;"
      horiz-adv-x="23.578015492438215" d=" M17 0H6.4A5.901881224640355 5.901881224640355 0 0 0 5.1 0.3H2.3A1.283659166359277 1.283659166359277 0 0 0 1 1.6V4.5H0.5A0.5016599040944301 0.5016599040944301 0 0 0 0 5V35.4A0.5016599040944301 0.5016599040944301 0 0 0 0.5 35.9H1V38.7A1.283659166359277 1.283659166359277 0 0 0 2.3 40H10.6V39.6H12.8V40H21.2A1.283659166359277 1.283659166359277 0 0 0 22.5 38.7V35.9H23.1A0.5016599040944301 0.5016599040944301 0 0 0 23.6 35.4V5.1A0.5016599040944301 0.5016599040944301 0 0 0 23.1 4.6H22.5V1.6A1.283659166359277 1.283659166359277 0 0 0 21.2 0.4H18.5C18.4 0.1 17.2 0 17 0zM6.2 34.5L3.7 33.8A1.0033198081888601 1.0033198081888601 0 0 1 3.4 33.7A0.2360752489856142 0.2360752489856142 0 0 1 3.3 33.5A0.20656584286241245 0.20656584286241245 0 0 1 3.4 33.3L4.1 32.8A7.657690888970861 7.657690888970861 0 0 1 3.1 30A8.51346366654371 8.51346366654371 0 0 1 4.8 23.5C5.8 24.2 6.5 24.7 6.5 24.7A7.377351530800443 7.377351530800443 0 0 0 5.4 26.9A6.300258207303577 6.300258207303577 0 0 0 6 31.8L6.5 31.5H6.5L6.6 31.5A0.3541128734784213 0.3541128734784213 0 0 1 6.8 31.4A0.17705643673921065 0.17705643673921065 0 0 1 7 31.5A0.6344522316488379 0.6344522316488379 0 0 1 7 32L6.2 34.5zM17.5 31.8H17.5A6.300258207303577 6.300258207303577 0 0 0 18 26.9A7.510143858354851 7.510143858354851 0 0 0 17 24.7L17.1 24.6L18.6 23.5A8.631501291036518 8.631501291036518 0 0 1 20.3 30A7.657690888970861 7.657690888970861 0 0 1 19.3 32.8L19.8 33.1L20 33.2A0.22132054592401326 0.22132054592401326 0 0 1 20.1 33.4A0.26558465510881596 0.26558465510881596 0 0 1 20 33.6A1.0033198081888601 1.0033198081888601 0 0 1 19.7 33.7L17.2 34.5S17.1 34.1 17 33.6S16.6 32.3 16.5 32A0.619697528587237 0.619697528587237 0 0 1 16.5 31.5A0.17705643673921065 0.17705643673921065 0 0 1 16.6 31.4A0.48690520103282936 0.48690520103282936 0 0 1 16.8 31.4L16.8 31.4L17.4 31.7zM11.7 30.6A1.9918849133161198 1.9918849133161198 0 1 1 13.7 28.6A1.9918849133161198 1.9918849133161198 0 0 1 11.7 30.6H11.7z" />
+    <glyph glyph-name="addpackage"
+      unicode="&#xF105;"
+      horiz-adv-x="40" d=" M4.3 19.1C4.3 10.5 11.4 3.5 20 3.5C28.6 3.5 35.7 10.5 35.7 19.1C35.7 27.8 28.6 34.8 20 34.8C11.4 34.8 4.3 27.8 4.3 19.1z M30.4 20.9L21.7 20.9L21.7 29.6L18.3 29.6L18.3 20.9L9.6 20.9L9.6 17.4L18.3 17.4L18.3 8.7L21.7 8.7L21.7 17.4L30.4 17.4z" />
+    <glyph glyph-name="brick"
+      unicode="&#xF106;"
+      horiz-adv-x="40" d=" M34.3 0.9H5.7V39.1H34.4V0.9zM10.4 32.7V18.4H29.6V32.7H10.4z" />
+    <glyph glyph-name="controls"
+      unicode="&#xF107;"
+      horiz-adv-x="40" d=" M6.1 33H9.6V5.2H6.1V33z M18.3 33H21.7V5.2H18.3V33z M30.4 33H33.9V5.2H30.4V33z M2.6 15.7H13V7H2.6V15.7z M14.8 31.3H25.2V22.6H14.8V31.3z M27 22.6H37.4V13.9H27V22.6z" />
+    <glyph glyph-name="functions"
+      unicode="&#xF108;"
+      horiz-adv-x="40" d=" M12.2 25.4H9.1C9.1 26.3 9.1 26.5 9.9 26.5C11.5 26.5 12.5 27.2 13.1 28.6C13.8 30.1 14.8 31.5 15.7 33.1C16.5 34.3 18.1 35.3 19.7 35.5C20.7 35.7 21.9 35.3 22.5 34.5C22.8 33.9 22.8 33.4 22.6 32.7C22.3 32.2 21.8 32 21.1 32.2C20.5 32.2 20.2 32.7 20.2 33.3C20.2 33.4 20.2 33.4 20.2 33.6C20.2 33.9 20.4 34.3 20.4 34.6C20 34.6 19.5 34.8 19.2 34.6C18.5 34.3 17.9 33.9 17.4 33.1C16.7 32 16.2 30.6 15.7 29.4C15.3 28.6 15 27.3 14.8 26.5H17.2C17.1 26.1 17.1 25.8 16.9 25.4H14.5C13.9 23.5 13.6 21.9 12.9 20.2C12.2 16.7 10.8 13.4 9.4 10.1C8.7 8.6 7.7 7.3 6.6 6.3C5.8 5.4 4.5 4.9 3.3 4.9C2.6 4.7 1.8 5.1 1.1 5.4C0.7 5.8 0.5 6.5 0.7 7.2C1.1 7.7 1.6 8 2.5 7.9C3 7.9 3.2 7.3 3.2 6.8C3.2 6.6 3 6.5 3 6.5C2.8 6.3 2.8 6.1 2.8 5.9C3 5.9 3.2 5.8 3.5 5.8C4.4 5.8 5.4 6.3 5.9 7.2C6.5 8 7 9.1 7.2 9.9C8.5 15.2 10.1 20.4 11.7 25.4C12.2 25.3 12.2 25.3 12.2 25.4z M32.5 4.7C32.7 4.9 32.7 5.1 32.9 5.3C34.8 6.3 36 8.4 36.4 10.5C37.1 13.9 37.1 17.4 36.2 20.9C35.7 22.8 34.5 24.2 33.1 25.4C32.9 25.6 32.7 25.8 32.7 25.9C36 24.7 39.2 20.6 39.2 15.3C39.3 10.8 36.7 6.5 32.5 4.7z M23.9 25.8C23.9 25.6 23.7 25.4 23.7 25.4C21.8 24.4 20.5 22.3 20.2 20.2C19.5 16.7 19.5 13.3 20.4 9.6C20.9 7.7 22.1 6.3 23.5 5.1C23.7 4.9 23.9 4.9 23.9 4.6C20 6.5 17.4 10.5 17.6 15C17.4 20.7 20.9 24.9 23.9 25.8z M32 12.2C32 12.2 32.2 12.2 32.4 12C32.4 12 32.4 12 32.4 11.9C31.9 11 31.3 10.1 30.3 9.6C29.9 9.3 29.2 9.1 28.5 9.6C28.4 9.8 28.2 9.9 28.2 10.3C27.9 11.3 27.7 12.4 27.5 13.4C27.5 13.6 27.5 13.6 27.3 13.8C27.2 13.4 27 13.1 26.6 12.7C26.1 12 25.6 11 24.7 10.3C24.4 9.9 24 9.6 23.5 9.4C23 9.3 22.5 9.4 21.9 9.9V10.1C21.9 10.5 21.9 10.8 22.3 11C22.5 11.2 22.8 11.2 23.2 11L23.3 10.8C23.9 10.5 24 10.3 24.4 11C25.1 12 25.9 13.4 26.8 14.5C26.8 14.6 26.8 14.8 26.8 15C26.6 15.7 26.5 16.6 26.3 17.3C25.9 18.5 25.4 19 24 19H23.9C23.7 19.2 23.9 19.3 24 19.3C24.7 19.5 25.8 19.7 26.5 19.7C26.6 19.7 26.8 19.7 27 19.5C27.5 18.8 27.9 18.1 28 17.1C28 16.9 28.2 16.6 28.2 16.4C28.4 16.7 28.7 17.3 29.1 17.6C29.6 18.1 30.1 18.8 30.8 19.3C31.2 19.5 31.5 19.7 31.9 19.7C32.4 19.7 32.7 19.3 32.7 18.8V18.6C32.5 18.1 32.2 17.9 31.7 18.1L31.7 18.1C31.5 18.1 31.5 18.1 31.3 18.1C30.8 18.5 30.1 18.3 29.6 17.8L29.6 17.8C29.2 17.3 28.7 16.6 28.4 15.9C28.4 15.7 28.4 15.7 28.4 15.5C28.7 14.3 28.9 12.9 29.2 11.5C29.2 11.3 29.2 11.3 29.4 11.2C29.6 10.6 29.9 10.5 30.3 11C31.3 11.3 31.5 11.9 32 12.2z" />
+    <glyph glyph-name="list"
+      unicode="&#xF109;"
+      horiz-adv-x="40" d=" M11.1 30.4H36.9V27.3H11.1V30.4z M11.1 22.4H36.9V19.3H11.1V22.4z M11.1 14.4H36.9V11.3H11.1V14.4z M5.6 27.3H3.8V33.6H2.4V34.6C3.3 34.6 4 35.1 4.2 36.2H5.6V27.3z M7.7 17.6V16H1.4V16.7C1.4 18.8 2.8 19.7 4 20.3C5.7 21.2 5.7 21.6 5.7 22.1C5.7 22.6 5.4 23.1 4.5 23.1C3.7 23.1 3.1 22.4 3.1 21.6H1.4C1.4 23.1 2.4 24.7 4.5 24.7C6.6 24.7 7.5 23.3 7.5 22.1C7.5 20.3 6.3 19.8 4.9 19C4 18.4 3.3 17.9 3.3 17.4H7.7z M4.5 4.5C2.4 4.5 1.4 5.9 1.2 7.5H3C3 6.6 3.5 6.1 4.5 6.1C5.6 6.1 6.1 6.6 6.1 7.3C6.1 8 5.6 8.5 4.7 8.5H4.2V9.9H4.5C5.6 9.9 5.9 10.4 5.9 11C5.9 11.7 5.4 12 4.7 12C3.8 12 3.3 11.3 3.3 10.6H1.6C1.6 12.2 2.6 13.6 4.5 13.6C6.4 13.6 7.5 12.3 7.5 11.1C7.5 10.4 7.1 9.7 6.3 9.4C7.3 9 7.7 8.2 7.7 7.3C7.8 6.1 6.8 4.5 4.5 4.5z" />
+    <glyph glyph-name="logic"
+      unicode="&#xF10A;"
+      horiz-adv-x="40" d=" M2.8 14.1H7.4C10 14.2 12.2 16 13.1 18.6C15 23.1 18.3 31.3 23.7 31.3S29.8 31.3 29.8 31.3V35.8L36.9 28.3L29.8 21.5V26.4H24.9C22.3 25.7 20.2 24 19.4 21.5C17.3 17 15.2 9.4 8.2 9.2C5.1 9.2 3 9.2 3 9.2V14.1z M2.8 31.1V26.2H8.2C8.2 26.2 11.4 26.2 13.1 22.1C13.8 23.8 14.7 25.4 15.7 26.9C15.7 26.9 12.2 30.9 8.4 30.9S2.8 31.1 2.8 31.1z M19.5 18.4C19.5 18.4 21.8 13.9 24.4 13.9H30V18.4L37.3 11.3L30 4.2V9H23.7C23.7 9 20.2 9 16.9 13.4C18 14.9 18.8 16.7 19.5 18.4z" />
+    <glyph glyph-name="loops"
+      unicode="&#xF10B;"
+      horiz-adv-x="40" d=" M6.3 12.7C4.5 15.2 2.6 17.4 0.9 20H4.5C4.5 24.2 6.3 28.4 9.2 31.3C11.3 33.4 13.7 34.8 16.7 35.3C21.9 36.6 27.3 35 31.1 31.2C30.3 30.3 29.4 29.4 28.7 28.7C24.2 32.6 19.3 33.3 14.1 30.5C10.3 28.4 8.2 24.4 8.2 20.2H11.8C9.7 17.6 7.8 15 6.3 12.7z M32.2 20H28.5C30.4 22.5 32.2 24.7 33.9 27.3C35.8 24.9 37.6 22.6 39.3 20H35.6C35.6 15.7 33.7 11.5 30.6 8.6C28.5 6.6 26.1 5.3 23.3 4.7C18.1 3.5 12.7 5.1 8.9 8.9L11.3 11.3C15.6 7.5 20.7 6.6 25.9 9.6C29.9 11.7 32.2 15.7 32.2 20z" />
+    <glyph glyph-name="math"
+      unicode="&#xF10C;"
+      horiz-adv-x="40" d=" M15.2 5.3C14.9 4.9 14.2 4.2 13.8 3.9L9.3 8.4C7.6 6.7 6.2 5.3 4.8 3.9C4.4 4.2 3.8 4.9 3.4 5.3L7.9 9.8C6.2 11.5 4.8 12.9 3.4 14.3C3.8 14.7 4.4 15.4 4.8 15.7L9.3 11.2L13.8 15.7C14.2 15.4 14.9 14.7 15.2 14.3L10.7 9.8C12.1 8.2 13.7 6.7 15.2 5.3z M1.5 28V30H7.9V36.4C8.6 36.4 9.1 36.4 9.8 36.4V30H16.3V28H9.8V21.6H7.8V28H1.5z M38.4 10.7H22V14.1H38.4V10.7z M38.4 7.2V3.7H22V7.2H38.4z M38.4 31V27.5H22V31H38.4z" />
+    <glyph glyph-name="motors"
+      unicode="&#xF10D;"
+      horiz-adv-x="40" d=" M28.9 25.8C27.5 24.4 25.9 22.9 24.5 21.5H35.7V32.6L32.2 29.1C29.6 32.3 25.9 34.3 21.8 34.9C18.3 35.4 14.6 34.5 11.7 32.6C4.2 28.1 1.9 18.3 6.5 10.9S20.7 1.1 28.2 5.6C30.8 7.2 32.7 9.5 34.1 12.1C32.7 12.6 31.3 13.3 29.9 13.8C28.5 11 25.9 9 23 8.1C20.7 7.4 18.3 7.6 16 8.4C10.3 10.7 7.3 17.1 9.4 22.9C10.6 26.3 13.6 29 17.1 29.8C21.6 31.2 26.3 29.5 28.9 25.8z M16.7 19C16.7 17.1 18.3 15.7 20 15.7S23.3 17.3 23.3 19C23.3 21 21.8 22.3 20 22.3C18.1 22.5 16.7 21 16.7 19C16.7 19 16.7 19 16.7 19z" />
+    <glyph glyph-name="music"
+      unicode="&#xF10E;"
+      horiz-adv-x="40" d=" M24.2 17.7C27.1 17.2 29.9 15.7 31.7 13.2C32.5 13.2 33.4 13.2 33.4 13.2S36 20.9 30.3 26.3S13.4 31.7 9.2 26.3C6.3 22.6 5.2 17.6 6.8 13.2C7.3 13.2 7.7 13.2 8.2 13.2C8.2 13.2 11.1 17.6 15.8 17.7C15.7 10.1 15.7 3.5 15.7 3.5C12.3 4.2 9.6 6.3 8 9.4C4.5 10.1 1.7 13.2 1.7 17C1.7 28.3 10.3 34.8 20 34.8S38.8 27.3 38.1 17C37.7 9.9 31.8 9.4 31.8 9.4C30.4 6.3 27.7 4 24.3 3.5C24.2 11.3 24.2 17.7 24.2 17.7z" />
+    <glyph glyph-name="sensors"
+      unicode="&#xF10F;"
+      horiz-adv-x="40" d=" M20 36.9C10.6 36.9 3 29.2 3 19.8C3 10.4 10.6 2.8 20 2.8S37 10.4 37 19.8C36.9 29.4 29.4 36.9 20 36.9zM20 8.2C13.4 8.2 8.2 13.6 8.2 20S13.6 31.8 20 31.8S31.8 26.4 31.8 20S26.6 8.2 20 8.2z M13.2 20C13.2 16.3 16.3 13.2 20 13.2C23.7 13.2 26.8 16.3 26.8 20C26.8 23.7 23.7 26.8 20 26.8C16.3 26.8 13.2 23.7 13.2 20z" />
+    <glyph glyph-name="text"
+      unicode="&#xF110;"
+      horiz-adv-x="40" d=" M23.1 30.6V2.8H16.5V30.6H7.7V36.7H32.3V30.6H23.1z" />
+    <glyph glyph-name="variables"
+      unicode="&#xF111;"
+      horiz-adv-x="40" d=" M36.8 12V7.8H3.4V12H36.8z M36.8 22.1V17.9H3.4V22.1H36.8z M36.7 32.2V28H3.3V32.2H36.7z" />
+    <glyph glyph-name="cancel"
+      unicode="&#xF112;"
+      horiz-adv-x="40" d=" M4285.9 23284.1H4308.1V23280.4H4285.9V23284.1z M4285.9 23302.6H4289.6V23280.4H4285.9V23302.6z" />
+    <glyph glyph-name="check"
+      unicode="&#xF113;"
+      horiz-adv-x="40" d=" M4209.2 23456H4231.3V23452.3H4209.2V23456z M4201.2 23463.4H4204.9V23452.3H4201.2V23463.4z" />
+    <glyph glyph-name="download"
+      unicode="&#xF114;"
+      horiz-adv-x="40" d=" M5.2 15.7H36.5V1.7H5.2V15.7z M28.5 24.2L26.1 26.6L22.6 23.1L22.6 36.5L19.1 36.5L19.1 23.5L16 26.6L13.6 24.2L20.9 16.7L21 16.9L21.2 16.7z" />
+    <glyph glyph-name="save"
+      unicode="&#xF115;"
+      horiz-adv-x="40" d=" M2.3 20.1V36.6C2.3 37.8 2.4 38 3.7 38H11.5C12.7 38 12.9 37.8 12.9 36.6V28.6C12.9 27.6 13 27.4 14.1 27.4H25.9C27 27.4 27.1 27.6 27.1 28.6V36.8C27.1 37.8 27.3 38 28.3 38C30.8 38 30.8 38 32.3 36.4C34.1 34.7 35.7 33.1 37.4 31.4C37.7 31 37.9 30.5 37.9 30V3.6C37.9 2.5 37.7 2.2 36.7 2.2H3.5C2.4 2.2 2.3 2.3 2.3 3.6C2.3 9.1 2.3 14.7 2.3 20.1zM20.2 6H33C34.3 6 34.4 6.2 34.4 7.4V22.5C34.4 23.6 34.3 23.9 33 23.9H7.1C6.1 23.9 5.7 23.7 5.7 22.5V7.4C5.7 6.2 5.9 6 7.1 6H20.2z M24.7 34.5C24.7 33.6 24.7 32.8 24.7 31.9C24.7 31 24.3 30.9 23.7 30.9C23.1 30.9 22.4 30.9 22.1 30.9S21 31 21 31.7V31.9V36.9C21 37.3 21.2 37.8 21.9 38C21.9 38 21.9 38 22.1 38C22.6 38 23.3 38 23.8 38C24.3 38 24.9 37.6 24.9 37.1C24.9 37.1 24.9 37.1 24.9 36.9C24.7 36.3 24.7 35.2 24.7 34.5z M5.1 25H35.4V4.8H5.1V25z M6.2 24.1H34.5V5.9H6.2V24.1z" />
+    <glyph glyph-name="advancedcollapsed"
+      unicode="&#xF116;"
+      horiz-adv-x="40" d=" M39.7 28.2L36.2 31.5L20 15.3L3.8 31.5L0.3 28.2L18.3 10.3L18.3 10.3L20 8.5L20.5 9L20.5 9z" />
+    <glyph glyph-name="advancedexpanded"
+      unicode="&#xF117;"
+      horiz-adv-x="40" d=" M39.3 12L21.7 29.6L21.7 29.6L20 31.3L19.5 30.8L19.5 30.8L0.7 12L4 8.7L20 24.7L36 8.7z" />
  </font>
 </defs>
 </svg>
--- a/docs/static/fonts/icons/iconfont.ttf
+++ b/docs/static/fonts/icons/iconfont.ttf
--- a/docs/static/fonts/icons/iconfont.woff
+++ b/docs/static/fonts/icons/iconfont.woff
--- a/docs/static/fonts/icons/iconfont.woff2
+++ b/docs/static/fonts/icons/iconfont.woff2
--- a/editor/extension.ts
+++ b/editor/extension.ts
@ -139,8 +139,98 @@ namespace pxt.editor {
            })
    }

+    /**
+     * Update the shape of Blockly blocks with square corners
+     */
+    function updateBlocklyShape() {
+
+        /**
+         * Rounded corner radius.
+         * @const
+         */
+        (Blockly.BlockSvg as any).CORNER_RADIUS = 0 * (Blockly.BlockSvg as any).GRID_UNIT;
+
+        /**
+         * Inner space between edge of statement input and notch.
+         * @const
+         */
+        (Blockly.BlockSvg as any).STATEMENT_INPUT_INNER_SPACE = 3 * (Blockly.BlockSvg as any).GRID_UNIT;
+        /**
+         * SVG path for drawing next/previous notch from left to right.
+         * @const
+         */
+        (Blockly.BlockSvg as any).NOTCH_PATH_LEFT = (
+            'l 8,8 ' +
+            'h 16 ' +
+            'l 8,-8 '
+        );
+
+        /**
+         * SVG path for drawing next/previous notch from right to left.
+         * @const
+         */
+        (Blockly.BlockSvg as any).NOTCH_PATH_RIGHT = (
+            'l -8,8 ' +
+            'h -16 ' +
+            'l -8,-8 '
+        );
+
+        /**
+         * SVG start point for drawing the top-left corner.
+         * @const
+         */
+        (Blockly.BlockSvg as any).TOP_LEFT_CORNER_START =
+            'm 0,' + 0;
+
+        /**
+         * SVG path for drawing the rounded top-left corner.
+         * @const
+         */
+        (Blockly.BlockSvg as any).TOP_LEFT_CORNER =
+            'l ' + (Blockly.BlockSvg as any).CORNER_RADIUS + ',0 ';
+
+        /**
+         * SVG path for drawing the rounded top-right corner.
+         * @const
+         */
+        (Blockly.BlockSvg as any).TOP_RIGHT_CORNER =
+            'l ' + 0 + ',' + (Blockly.BlockSvg as any).CORNER_RADIUS;
+
+        /**
+         * SVG path for drawing the rounded bottom-right corner.
+         * @const
+         */
+        (Blockly.BlockSvg as any).BOTTOM_RIGHT_CORNER =
+            'l 0,' + (Blockly.BlockSvg as any).CORNER_RADIUS;
+
+        /**
+         * SVG path for drawing the rounded bottom-left corner.
+         * @const
+         */
+        (Blockly.BlockSvg as any).BOTTOM_LEFT_CORNER =
+            'l -' + (Blockly.BlockSvg as any).CORNER_RADIUS + ',0';
+
+        /**
+         * SVG path for drawing the top-left corner of a statement input.
+         * @const
+         */
+        (Blockly.BlockSvg as any).INNER_TOP_LEFT_CORNER =
+            'l ' + (Blockly.BlockSvg as any).CORNER_RADIUS + ',-' + 0;
+
+        /**
+         * SVG path for drawing the bottom-left corner of a statement input.
+         * Includes the rounded inside corner.
+         * @const
+         */
+        (Blockly.BlockSvg as any).INNER_BOTTOM_LEFT_CORNER =
+            'l ' + 0 + ',' + (Blockly.BlockSvg as any).CORNER_RADIUS * 2 +
+            'l ' + (Blockly.BlockSvg as any).CORNER_RADIUS + ',' + 0;
+
+    }
+
    initExtensionsAsync = function (opts: pxt.editor.ExtensionOptions): Promise<pxt.editor.ExtensionResult> {
        pxt.debug('loading pxt-ev3 target extensions...')
+        updateBlocklyShape();
        const res: pxt.editor.ExtensionResult = {
            deployCoreAsync,
        };
--- a/legoresources/MakeCode_overview.ai
+++ b/legoresources/MakeCode_overview.ai
--- a/libs/color-sensor/color.ts
+++ b/libs/color-sensor/color.ts
@ -56,6 +56,7 @@ namespace sensors {

        constructor(port: number) {
            super(port)
+            this._setMode(ColorSensorMode.None);
            this.thresholdDetector = new sensors.internal.ThresholdDetector(this.id());
        }

--- a/libs/core/_locales/core-jsdoc-strings.json
+++ b/libs/core/_locales/core-jsdoc-strings.json
@ -21,8 +21,6 @@
  "brick.Button.pauseUntil": "Waits until the event is raised",
  "brick.Button.pauseUntil|param|ev": "the event to wait for",
  "brick.Button.wasPressed": "See if the button was pressed again since the last time you checked.",
-  "brick._imagePicker": "An image",
-  "brick._imagePicker|param|image": "the image",
  "brick.buttonDown": "Down button on the EV3 Brick.",
  "brick.buttonEnter": "Enter button on the EV3 Brick.",
  "brick.buttonLeft": "Left button on the EV3 Brick.",
@ -31,17 +29,12 @@
  "brick.clearScreen": "Clears the screen",
  "brick.lightPattern": "Pattern block.",
  "brick.lightPattern|param|pattern": "the lights pattern to use. eg: LightsPattern.Green",
-  "brick.print": "Show text on the screen.",
+  "brick.printLine": "Show text on the screen at a specific line.",
+  "brick.printLine|param|line": "the line number to print the text at, eg: 0",
+  "brick.printLine|param|text": "the text to print on the screen, eg: \"Hello world\"",
  "brick.printPorts": "Prints the port states on the screen",
-  "brick.print|param|text": "the text to print on the screen, eg: \"Hello world\"",
-  "brick.print|param|x": "the starting position's x coordinate, eg: 0",
-  "brick.print|param|y": "the starting position's x coordinate, eg: 0",
  "brick.setLight": "Set lights.",
  "brick.setLight|param|pattern": "the lights pattern to use.",
-  "brick.setPixel": "Sets a pixel on or off",
-  "brick.setPixel|param|on": "a value indicating if the pixel should be on or off",
-  "brick.setPixel|param|x": "the starting position's x coordinate, eg: 0",
-  "brick.setPixel|param|y": "the starting position's x coordinate, eg: 0",
  "brick.showImage": "Shows an image on screen",
  "brick.showImage|param|image": "image to draw",
  "console": "Reading and writing data to the console output.\n\nReading and writing data to the console output.",
@ -77,9 +70,15 @@
  "motors.MotorBase.setSpeed": "Sets the speed of the motor.",
  "motors.MotorBase.setSpeed|param|speed": "the speed from ``100`` full forward to ``-100`` full backward, eg: 50",
  "motors.MotorBase.stop": "Stops the motor(s).",
+  "motors.SynchedMotorPair.drive": "Makes a differential drive robot move with a given speed (%) and rotation rate (deg/s)\nusing a unicycle model.",
+  "motors.SynchedMotorPair.drive|param|rotationSpeed": "rotation of the robot around the center point, eg: 30",
+  "motors.SynchedMotorPair.drive|param|speed": "speed of the center point between motors, eg: 10",
+  "motors.SynchedMotorPair.drive|param|value": "the amount of movement, eg: 2",
+  "motors.SynchedMotorPair.setDimensions": "Sets the wheels radius and base length of a directional drive robot",
+  "motors.SynchedMotorPair.setDimensions|param|wheelRadius": "@param baseLength ",
  "motors.SynchedMotorPair.steer": "Turns the motor and the follower motor by a number of rotations",
  "motors.SynchedMotorPair.steer|param|speed": "the speed from ``100`` full forward to ``-100`` full backward, eg: 50",
-  "motors.SynchedMotorPair.steer|param|steering": "the ratio of power sent to the follower motor, from ``-100`` to ``100``",
+  "motors.SynchedMotorPair.steer|param|turnRatio": "the ratio of power sent to the follower motor, from ``-200`` to ``200``, eg: 0",
  "motors.SynchedMotorPair.steer|param|unit": "the meaning of the value",
  "motors.SynchedMotorPair.steer|param|value": "the move quantity, eg: 2",
  "motors.SynchedMotorPair.tank": "The Move Tank block can make a robot drive forward, backward, turn, or stop. \nUse the Move Tank block for robot vehicles that have two Large Motors, \nwith one motor driving the left side of the vehicle and the other the right side. \nYou can make the two motors go at different speeds or in different directions \nto make your robot turn.",
--- a/libs/core/_locales/core-strings.json
+++ b/libs/core/_locales/core-strings.json
@ -28,7 +28,6 @@
  "brick.Button.onEvent|block": "on %button|%event",
  "brick.Button.pauseUntil|block": "pause until %button|%event",
  "brick.Button.wasPressed|block": "%button|was pressed",
-  "brick._imagePicker|block": "%image",
  "brick.buttonDown|block": "down",
  "brick.buttonEnter|block": "enter",
  "brick.buttonLeft|block": "left",
@ -36,10 +35,9 @@
  "brick.buttonUp|block": "up",
  "brick.clearScreen|block": "clear screen",
  "brick.lightPattern|block": "%pattern",
+  "brick.printLine|block": "print %text| at line %line",
  "brick.printPorts|block": "print ports",
-  "brick.print|block": "print %text| at x: %x| y: %y",
  "brick.setLight|block": "set light to %pattern=led_pattern",
-  "brick.setPixel|block": "set pixel %on| at x: %x| y: %y",
  "brick.showImage|block": "show image %image=screen_image_picker",
  "brick|block": "brick",
  "console.logValue|block": "console|log value %name|= %value",
@ -55,8 +53,9 @@
  "motors.MotorBase.setBrake|block": "set %motor|brake %brake",
  "motors.MotorBase.setReversed|block": "set %motor|reversed %reversed",
  "motors.MotorBase.setSpeed|block": "set speed of %motor|to %speed|%",
-  "motors.SynchedMotorPair.steer|block": "steer %chassis|%steering|%|at speed %speed|%|by %value|%unit",
-  "motors.SynchedMotorPair.tank|block": "tank %chassis|left %speedLeft|%|right %speedRight|%|by %value|%unit",
+  "motors.SynchedMotorPair.drive|block": "drive %chassis|at %speed|cm/s|turning %rotationSpeed|deg/s|for %value|%unit",
+  "motors.SynchedMotorPair.steer|block": "steer %chassis turn by|%turnRatio|at speed %speed|%|for %value|%unit",
+  "motors.SynchedMotorPair.tank|block": "tank %chassis|left %speedLeft|%|right %speedRight|%|for %value|%unit",
  "motors.largeAB|block": "large A+B",
  "motors.largeAD|block": "large A+D",
  "motors.largeA|block": "large A",
--- a/libs/core/buttons.ts
+++ b/libs/core/buttons.ts
@ -66,6 +66,7 @@ namespace brick {

        //% hidden
        _update(curr: boolean) {
+            if (this == null) return
            if (this._isPressed == curr) return
            this._isPressed = curr
            if (curr) {
@ -104,7 +105,7 @@ namespace brick {
        //% blockId=buttonWasPressed
        //% parts="brick"
        //% blockNamespace=brick
-        //% weight=80 blockGap=8
+        //% weight=80
        //% group="Buttons"
        wasPressed() {
            const r = this._wasPressed
--- a/libs/core/images.ts
+++ b/libs/core/images.ts
@ -1,260 +1,260 @@
 namespace images {
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const expressionsBigSmile = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const expressionsHeartLarge = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const expressionsHeartSmall = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const expressionsMouth1open = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const expressionsMouth1shut = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const expressionsMouth2open = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const expressionsMouth2shut = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const expressionsSad = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const expressionsSick = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const expressionsSmile = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const expressionsSwearing = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const expressionsTalking = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const expressionsWink = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const expressionsZzz = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const eyesAngry = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const eyesAwake = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const eyesBlackEye = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const eyesBottomLeft = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const eyesBottomRight = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const eyesCrazy1 = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const eyesCrazy2 = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const eyesDisappointed = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const eyesDizzy = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const eyesDown = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const eyesEvil = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const eyesHurt = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const eyesKnockedOut = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const eyesLove = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const eyesMiddleLeft = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const eyesMiddleRight = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const eyesNeutral = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const eyesNuclear = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const eyesPinchLeft = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const eyesPinchMiddle = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const eyesPinchRight = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const eyesSleeping = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const eyesTear = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const eyesTiredLeft = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const eyesTiredMiddle = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const eyesTiredRight = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const eyesToxic = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const eyesUp = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const eyesWinking = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const informationAccept = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const informationBackward = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const informationDecline = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const informationForward = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const informationLeft = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const informationNoGo = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const informationQuestionMark = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const informationRight = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const informationStop1 = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const informationStop2 = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const informationThumbsDown = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const informationThumbsUp = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const informationWarning = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const legoColorSensor = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const legoEv3icon = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const legoEv3 = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const legoGyroSensor = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const legoIrBeacon = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const legoIrSensor = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const legoLego = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const legoLargeMotor = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const legoMindstorms = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const legoMediumMotor = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const legoSoundSensor = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const legoTempSensor = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const legoTouchSensor = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const legoUsSensor = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const objectsBomb = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const objectsBoom = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const objectsFire = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const objectsFlowers = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const objectsForest = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const objectsLightOff = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const objectsLightOn = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const objectsLightning = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const objectsNight = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const objectsPirate = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const objectsSnow = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const objectsTarget = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const progressBar0 = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const progressBar1 = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const progressBar2 = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const progressBar3 = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const progressBar4 = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const progressDial0 = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const progressDial1 = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const progressDial2 = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const progressDial3 = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const progressDial4 = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const progressDots0 = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const progressDots1 = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const progressDots2 = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const progressDots3 = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const progressHourglass0 = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const progressHourglass1 = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const progressHourglass2 = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const progressTimer0 = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const progressTimer1 = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const progressTimer2 = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const progressTimer3 = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const progressTimer4 = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const progressWaterLevel0 = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const progressWaterLevel1 = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const progressWaterLevel2 = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const progressWaterLevel3 = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const systemAccept1 = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const systemAccept2 = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const systemAlert = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const systemBox = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const systemBusy0 = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const systemBusy1 = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const systemDecline1 = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const systemDecline2 = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const systemDotEmpty = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const systemDotFull = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const systemEv3small = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const systemPlay = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const systemSlider0 = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const systemSlider1 = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const systemSlider2 = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const systemSlider3 = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const systemSlider4 = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const systemSlider5 = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const systemSlider6 = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const systemSlider7 = screen.unpackPNG(hex``);
-    //% fixedInstance jres blockIdentity=brick._imagePicker
+    //% fixedInstance jres blockIdentity=brick.__imagePicker
    export const systemSlider8 = screen.unpackPNG(hex``);
 }
--- a/libs/core/input.ts
+++ b/libs/core/input.ts
@ -214,6 +214,7 @@ namespace sensors.internal {
        }

        public setLevel(level: number) {
+            if (this == null) return
            this.level = this.clampValue(level);

            if (this.level >= this.highThreshold) {
--- a/libs/core/output.ts
+++ b/libs/core/output.ts
@ -14,7 +14,7 @@ enum Output {
    //% block="C+D"
    CD = Output.C | Output.D,
    //% block="A+D"
-    AD = Output.B | Output.C,
+    AD = Output.A | Output.D,
    //% block="All"
    ALL = 0x0f
 }
@ -399,9 +399,13 @@ namespace motors {

    //% fixedInstances
    export class SynchedMotorPair extends MotorBase {
+        private wheelRadius: number;
+        private baseLength: number;

        constructor(ports: Output) {
            super(ports, () => this.__init(), (speed) => this.__setSpeed(speed), (steps, stepsOrTime, speed) => this.__move(steps, stepsOrTime, speed));
+            this.wheelRadius = 3;
+            this.baseLength = 12;
            this.markUsed();
        }

@ -438,18 +442,82 @@ namespace motors {
        }

        /**
-         * Turns the motor and the follower motor by a number of rotations
-         * @param value the move quantity, eg: 2
-         * @param unit the meaning of the value
-         * @param steering the ratio of power sent to the follower motor, from ``-100`` to ``100``
-         * @param speed the speed from ``100`` full forward to ``-100`` full backward, eg: 50
+         * The Move Tank block can make a robot drive forward, backward, turn, or stop. 
+         * Use the Move Tank block for robot vehicles that have two Large Motors, 
+         * with one motor driving the left side of the vehicle and the other the right side. 
+         * You can make the two motors go at different speeds or in different directions 
+         * to make your robot turn.
+         * @param value the amount of movement, eg: 2
+         * @param unit 
+         * @param speedLeft the speed on the left motor, eg: 50
+         * @param speedRight the speed on the right motor, eg: 50
         */
-        //% blockId=motorPairTurn block="steer %chassis|%steering|%|at speed %speed|%|by %value|%unit"
+        //% blockId=motorPairTank block="tank %chassis|left %speedLeft|%|right %speedRight|%|for %value|%unit"
        //% weight=9 blockGap=8
-        //% steering.min=-100 steering=100
+        //% speedLeft.min=-100 speedLeft=100
+        //% speedRight.min=-100 speedRight=100
        //% inlineInputMode=inline
        //% group="Chassis"
-        steer(steering: number, speed: number, value: number, unit: MoveUnit) {
+        tank(speedLeft: number, speedRight: number, value: number, unit: MoveUnit) {
+            this.init();
+
+            speedLeft = Math.clamp(-100, 100, speedLeft >> 0);
+            speedRight = Math.clamp(-100, 100, speedRight >> 0);
+
+            const speed = Math.abs(speedLeft) > Math.abs(speedRight) ? speedLeft : speedRight;
+            const turnRatio = speedLeft == speed
+                ? (100 - speedRight / speedLeft * 100)
+                : (speedLeft / speedRight * 100 - 100);
+            this.steer(turnRatio, speed, value, unit);
+        }
+
+        /**
+         * Makes a differential drive robot move with a given speed (%) and rotation rate (deg/s)
+         * using a unicycle model.
+         * @param speed speed of the center point between motors, eg: 10
+         * @param rotationSpeed rotation of the robot around the center point, eg: 30
+         * @param value the amount of movement, eg: 2
+         * @param unit 
+         */
+        //% blockId=motorDrive block="drive %chassis|at %speed|cm/s|turning %rotationSpeed|deg/s|for %value|%unit"
+        //% inlineInputMode=inline
+        //% group="Chassis"
+        //% weight=8 blockGap=8
+        drive(speed: number, rotationSpeed: number, value: number, unit: MoveUnit) {
+            this.init();
+
+            // speed is expressed in %
+            const R = this.wheelRadius; // cm
+            const L = this.baseLength; // cm
+            const PI = 3.14;
+            const maxw = 170 / 60 * 2 * PI; // rad / s
+            const maxv = maxw * R; // cm / s
+            // speed is cm / s
+            const v = speed; // cm / s
+            const w = rotationSpeed / 360 * 2 * PI; // rad / s
+
+            const vr = (2 * v + w * L) / (2 * R); // rad / s
+            const vl = (2 * v - w * L) / (2 * R); // rad / s
+
+            const sr = vr / maxw * 100; // % 
+            const sl = vl / maxw * 100; // %
+
+            this.tank(sr, sl, value, unit)
+        }    
+        
+        /**
+         * Turns the motor and the follower motor by a number of rotations
+         * @param turnRatio the ratio of power sent to the follower motor, from ``-200`` to ``200``, eg: 0
+         * @param speed the speed from ``100`` full forward to ``-100`` full backward, eg: 50
+         * @param value the move quantity, eg: 2
+         * @param unit the meaning of the value
+         */
+        //% blockId=motorPairTurn block="steer %chassis turn by|%turnRatio|at speed %speed|%|for %value|%unit"
+        //% weight=6 blockGap=8
+        //% turnRatio.min=-200 turnRatio=200
+        //% inlineInputMode=inline
+        //% group="Chassis"
+        steer(turnRatio: number, speed: number, value: number, unit: MoveUnit) {
            this.init();
            speed = Math.clamp(-100, 100, speed >> 0);
            if (!speed) {
@ -457,7 +525,7 @@ namespace motors {
                return;
            }

-            const turnRatio = Math.clamp(-200, 200, steering + 100 >> 0);
+            turnRatio = Math.clamp(-200, 200, turnRatio >> 0);
            let useSteps: boolean;
            let stepsOrTime: number;
            switch (unit) {
@ -470,7 +538,7 @@ namespace motors {
                    useSteps = true;
                    break;
                default:
-                    stepsOrTime = value;
+                    stepsOrTime = value >> 0;
                    useSteps = false;
                    break;
            }
@ -482,30 +550,17 @@ namespace motors {
                stepsOrTime: stepsOrTime,
                useBrake: this._brake
            });
-        }
+        }        

        /**
-         * The Move Tank block can make a robot drive forward, backward, turn, or stop. 
-         * Use the Move Tank block for robot vehicles that have two Large Motors, 
-         * with one motor driving the left side of the vehicle and the other the right side. 
-         * You can make the two motors go at different speeds or in different directions 
-         * to make your robot turn.
-         * @param value the amount of movement, eg: 2
-         * @param unit 
-         * @param speedLeft the speed on the left motor, eg: 50
-         * @param speedRight the speed on the right motor, eg: 50
+         * Sets the wheels radius and base length of a directional drive robot
+         * @param wheelRadius 
+         * @param baseLength 
         */
-        //% blockId=motorPairTank block="tank %chassis|left %speedLeft|%|right %speedRight|%|by %value|%unit"
-        //% weight=9 blockGap=8
-        //% speedLeft.min=-100 speedLeft=100
-        //% speedRight.min=-100 speedRight=100
-        //% inlineInputMode=inline
        //% group="Chassis"
-        tank(speedLeft: number, speedRight: number, value: number, unit: MoveUnit) {
-            speedLeft = Math.clamp(speedLeft >> 0, -100, 100);
-            speedRight = Math.clamp(speedRight >> 0, -100, 100);
-            const steering = (speedRight * 100 / speedLeft) >> 0;
-            this.steer(speedLeft, steering, value, unit);
+        setDimensions(wheelRadius: number, baseLength: number): void {
+            this.wheelRadius = wheelRadius;
+            this.baseLength = baseLength;
        }

        /**
@ -513,6 +568,8 @@ namespace motors {
         */
        //%
        toString(): string {
+            this.init();
+
            let r = outputToName(this._port);
            for (let i = 0; i < DAL.NUM_OUTPUTS; ++i) {
                if (this._port & (1 << i)) {
--- a/libs/core/screen.ts
+++ b/libs/core/screen.ts
@ -80,15 +80,6 @@ namespace brick {
        }
    }

-    /**
-     * Sets a pixel on or off
-     * @param on a value indicating if the pixel should be on or off
-     * @param x the starting position's x coordinate, eg: 0
-     * @param y the starting position's x coordinate, eg: 0
-     */
-    //% blockId=screen_setpixel block="set pixel %on| at x: %x| y: %y"
-    //% weight=98 group="Screen"
-    //% x.min=0 x.max=178 y.min=0 y.max=128 on.fieldEditor=toggleonoff
    export function setPixel(on: boolean, x: number, y: number) {
        x |= 0
        y |= 0
@ -97,14 +88,20 @@ namespace brick {
    }

    /**
-     * Show text on the screen.
+     * Show text on the screen at a specific line.
     * @param text the text to print on the screen, eg: "Hello world"
-     * @param x the starting position's x coordinate, eg: 0
-     * @param y the starting position's x coordinate, eg: 0
+     * @param line the line number to print the text at, eg: 0
     */
-    //% blockId=screen_print block="print %text| at x: %x| y: %y"
-    //% weight=99 group="Screen" inlineInputMode="inline" blockGap=8
-    //% x.min=0 x.max=178 y.min=0 y.max=128
+    //% blockId=screen_print block="print %text| at line %line"
+    //% weight=98 group="Screen" inlineInputMode="inline" blockGap=8
+    //% line.min=0 line.max=9
+    export function printLine(text: string, line: number) {
+        const NUM_LINES = 9;
+        const offset = 5;
+        const y = offset + (Math.clamp(0, NUM_LINES, line) / (NUM_LINES + 2)) * DAL.LCD_HEIGHT;
+        brick.print(text, offset, y);
+    }
+
    export function print(text: string, x: number, y: number, mode = Draw.Normal) {
        x |= 0
        y |= 0
@ -140,7 +137,7 @@ namespace brick {
     * @param image image to draw
     */
    //% blockId=screen_show_image block="show image %image=screen_image_picker"
-    //% weight=95 group="Screen" blockGap=8
+    //% weight=100 group="Screen" blockGap=8
    export function showImage(image: Image, delay: number = 400) {
        if (!image) return;
        image.draw(0, 0, Draw.Normal);
@ -158,7 +155,7 @@ namespace brick {
    //% image.fieldOptions.columns=6
    //% image.fieldOptions.hasSearchBar=true
    //% group="Screen" weight=0 blockHidden=1
-    export function _imagePicker(image: Image): Image {
+    export function __imagePicker(image: Image): Image {
        return image;
    }

@ -166,7 +163,7 @@ namespace brick {
     * Clears the screen
     */
    //% blockId=screen_clear_screen block="clear screen"
-    //% weight=94 group="Screen" blockGap=8
+    //% weight=90 group="Screen"
    export function clearScreen() {
        screen.clear();
    }
@ -221,10 +218,14 @@ namespace brick {
        // motors
        const datas = motors.getAllMotorData();
        for(let i = 0; i < datas.length; ++i) {
-            const x = i * 52;
            const data = datas[i];
+            if (!data.actualSpeed && !data.count) continue;
+            const x = i * 52;
            print(`${data.actualSpeed}%`, x, brick.LINE_HEIGHT)
            print(`${data.count}>`, x, 2 * brick.LINE_HEIGHT)
+
+            console.logValue(`speed.` + "ABCD"[i], data.actualSpeed);
+            console.logValue(`angle.` + "ABCD"[i], data.count);
        }

        // sensors
@ -232,7 +233,10 @@ namespace brick {
        for(let i =0; i < sis.length; ++i) {
            const si = sis[i];
            const x = (si.port() - 1) * 52;
-            print(`${si._query()}`, x, 9 * brick.LINE_HEIGHT)
+            const v = si._query();
+            print(`${v}`, x, 9 * brick.LINE_HEIGHT)
+
+            console.logValue(`sensor.` + si.port(), v);
        }
    }
 }
--- a/libs/ev3/ns.ts
+++ b/libs/ev3/ns.ts
@ -1,30 +1,30 @@

-//% color="#68C3E2" weight=100
+//% color="#68C3E2" weight=100 icon="\uf106"
 //% groups='["Buttons", "Screen"]'
 //% labelLineWidth=0
 namespace brick {
 }


-//% color="#C8509B" weight=95 icon="\uf192"
+//% color="#C8509B" weight=95 icon="\uf10f"
 //% labelLineWidth=0
 //% groups='["Ultrasonic Sensor", "Touch Sensor", "Color Sensor", "Infrared Sensor", "Remote Infrared Beacon", "Gyro Sensor"]'
 //% groupIcons='["\uf101","\uf103","\uf102","","","\uf104"]'
 namespace sensors {
 }

-//% color="#A5CA18" weight=90 icon="\uf185"
+//% color="#A5CA18" weight=90 icon="\uf10d"
 //% groups='["Motion", "Sensors", "Chassis"]'
 //% labelLineWidth=0
 namespace motors {
 }

-//% color="#D67923" weight=80
+//% color="#D67923" weight=80 icon="\uf10e"
 namespace music {

 }

-//% color="#5F3109"
+//% color="#5F3109" icon="\uf107"
 namespace control {

 }
--- a/libs/infrared-sensor/ir.ts
+++ b/libs/infrared-sensor/ir.ts
@ -112,7 +112,7 @@ namespace sensors {
        //% blockId=remotebuttonWasPressed
        //% parts="remote"
        //% blockNamespace=sensors
-        //% weight=80 blockGap=8
+        //% weight=80
        //% group="Remote Infrared Beacon"
        wasPressed() {
            return this.button.wasPressed();
@ -238,7 +238,7 @@ namespace sensors {
        //% blockId=infraredGetRemoteCommand
        //% parts="infrared"
        //% blockNamespace=sensors
-        //% weight=65 blockGap=8        
+        //% weight=65       
        //% group="Infrared Sensor"     
        remoteCommand(): number {
            this._setMode(IrSensorMode.RemoteControl)
--- a/libs/music/_locales/music-jsdoc-strings.json
+++ b/libs/music/_locales/music-jsdoc-strings.json
@ -2,8 +2,6 @@
  "Sound.buffer": "Returns the underlaying Buffer object.",
  "Sound.play": "Play sound.",
  "music": "Generation of music tones.",
-  "music._soundPicker": "A sound",
-  "music._soundPicker|param|sound": "the sound",
  "music.beat": "Return the duration of a beat in milliseconds (the beat fraction).",
  "music.beat|param|fraction": "the fraction of the current whole note, eg: BeatFraction.Half",
  "music.changeTempoBy": "Change the tempo up or down by some amount of beats per minute (bpm).",
--- a/libs/music/_locales/music-strings.json
+++ b/libs/music/_locales/music-strings.json
@ -20,7 +20,6 @@
  "Note.GSharp|block": "G#",
  "SoundOutputDestination.Pin|block": "pin",
  "SoundOutputDestination.Speaker|block": "speaker",
-  "music._soundPicker|block": "%sound",
  "music.beat|block": "%fraction|beat",
  "music.changeTempoBy|block": "change tempo by %value|(bpm)",
  "music.noteFrequency|block": "%note",
--- a/libs/music/music.cpp
+++ b/libs/music/music.cpp
@ -170,7 +170,7 @@ void playTone(int frequency, int ms) {
 //% blockId=music_stop_all_sounds block="stop all sounds"
 //% parts="headphone"
 //% blockNamespace=music
-//% weight=76 blockGap=8
+//% weight=97
 void stopAllSounds() {
    if (currentSample) {
        samplePtr = currentSample->length;
--- a/libs/music/shims.d.ts
+++ b/libs/music/shims.d.ts
@ -32,7 +32,7 @@ declare namespace music {
    //% blockId=music_stop_all_sounds block="stop all sounds"
    //% parts="headphone"
    //% blockNamespace=music
-    //% weight=76 blockGap=8 shim=music::stopAllSounds
+    //% weight=97 shim=music::stopAllSounds
    function stopAllSounds(): void;

    /** Makes a sound bound to a buffer in WAV format. */
--- a/libs/music/sounds.ts
+++ b/libs/music/sounds.ts
@ -264,7 +264,7 @@ namespace music {
     * @param sound the sound to play
     */
    //% blockId=music_play_sound_effect_until_done block="play sound effect %sound|until done"
-    //% weight=98
+    //% weight=98 blockGap=8
    export function playSoundEffectUntilDone(sound: Sound) {
        if (!sound) return;
        sound.play();
@ -276,7 +276,7 @@ namespace music {
     */
    //% blockId=music_sound_picker block="%sound" shim=TD_ID
    //% weight=0 blockHidden=1
-    export function _soundPicker(sound: Sound): Sound {
+    export function __soundPicker(sound: Sound): Sound {
        return sound;
    }

@ -285,7 +285,7 @@ namespace music {
     * @param sound the sound to play
     */
    //% blockId=music_play_sound_effect block="play sound effect %sound"
-    //% weight=99
+    //% weight=99 blockGap=8
    export function playSoundEffect(sound: Sound) {
        if (!sound || numSoundsPlaying >= soundsLimit) return;
        numSoundsPlaying++;
--- a/libs/touch-sensor/touch.ts
+++ b/libs/touch-sensor/touch.ts
@ -75,7 +75,7 @@ namespace sensors {
        //% blockId=touchIsPressed
        //% parts="touch"
        //% blockNamespace=sensors
-        //% weight=81 blockGap=8
+        //% weight=81
        //% group="Touch Sensor"
        isPressed() {
            return this.button.isPressed();
--- a/libs/ultrasonic-sensor/ultrasonic.ts
+++ b/libs/ultrasonic-sensor/ultrasonic.ts
@ -75,7 +75,7 @@ namespace sensors {
        //% blockId=sonarGetDistance
        //% parts="ultrasonicsensor"
        //% blockNamespace=sensors
-        //% weight=65 blockGap=8   
+        //% weight=65
        //% group="Ultrasonic Sensor"     
        distance(): number {
            // it supposedly also has an inch mode, but we stick to cm
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "pxt-ev3",
-  "version": "0.0.46",
+  "version": "0.0.49",
  "description": "LEGO Mindstorms EV3 for Microsoft MakeCode",
  "private": true,
  "keywords": [
@ -45,7 +45,7 @@
  },
  "dependencies": {
    "pxt-common-packages": "0.14.13",
-    "pxt-core": "3.0.2"
+    "pxt-core": "3.0.5"
  },
  "scripts": {
    "test": "node node_modules/pxt-core/built/pxt.js travis"
--- a/pxtarget.json
+++ b/pxtarget.json
@ -137,6 +137,15 @@
            "functions": "#19325A",
            "arrays": "#901F76"
        },
+        "blockIcons": {
+            "loops": "\uf10b",
+            "logic": "\uf10a",
+            "math": "\uf10c",
+            "variables": "\uf111",
+            "text": "\uf110",
+            "functions": "\uf108",
+            "arrays": "\uf109"
+        },
        "monacoColors": {
            "editor.background": "#ecf6ff"
        }
--- a/sim/state/color.ts
+++ b/sim/state/color.ts
@ -3,12 +3,13 @@
 namespace pxsim {

    export enum ColorSensorMode {
+        None = -1,
        Reflected = 0,
        Ambient = 1,
        Colors = 2,
        RefRaw = 3,
        RgbRaw = 4,
-        ColorCal = 5
+        ColorCal = 5,
    }

    export enum ThresholdState {
@ -24,6 +25,7 @@ namespace pxsim {

        constructor(port: number) {
            super(port);
+            this.mode = -1;
        }

        getDeviceType() {
--- a/sim/state/control.ts
+++ b/sim/state/control.ts
@ -81,7 +81,6 @@ namespace pxsim.control {
    export function dmesg(s: string) {
        console.log("DMESG: " + s)
    }
-
 }

 namespace pxsim.output {
--- a/sim/state/motornode.ts
+++ b/sim/state/motornode.ts
@ -15,6 +15,7 @@ namespace pxsim {
        private speedCmdValues: number[];
        private speedCmdTacho: number;
        private speedCmdTime: number;
+        private _synchedMotor: MotorNode; // non-null if master motor

        constructor(port: number, large: boolean) {
            super(port);
@ -22,22 +23,34 @@ namespace pxsim {
        }

        getSpeed() {
-            return this.speed * (this.polarity  == 0 ? -1 : 1);
+            return this.speed * (this.polarity == 0 ? -1 : 1);
        }

        getAngle() {
            return this.angle;
        }

+        // returns the slave motor if any
+        getSynchedMotor() {
+            return this._synchedMotor;
+        }
+
        setSpeedCmd(cmd: DAL, values: number[]) {
            this.speedCmd = cmd;
            this.speedCmdValues = values;
            this.speedCmdTacho = this.angle;
            this.speedCmdTime = pxsim.U.now();
+            delete this._synchedMotor;
+        }
+
+        setSyncCmd(motor: MotorNode, cmd: DAL, values: number[]) {
+            this.setSpeedCmd(cmd, values);
+            this._synchedMotor = motor;
        }

        clearSpeedCmd() {
            delete this.speedCmd;
+            delete this._synchedMotor;
        }

        setLarge(large: boolean) {
@ -67,6 +80,7 @@ namespace pxsim {

        stop() {
            this.started = false;
+            this.clearSpeedCmd();
        }

        start() {
@ -77,7 +91,7 @@ namespace pxsim {
            console.log(`motor: ${elapsed}ms - ${this.speed}% - ${this.angle}> - ${this.tacho}|`)
            const interval = Math.min(20, elapsed);
            let t = 0;
-            while(t < elapsed) {
+            while (t < elapsed) {
                let dt = interval;
                if (t + dt > elapsed) dt = elapsed - t;
                this.updateStateStep(dt);
@ -97,14 +111,14 @@ namespace pxsim {
                case DAL.opOutputTimeSpeed:
                case DAL.opOutputTimePower:
                case DAL.opOutputStepPower:
-                case DAL.opOutputStepSpeed:
+                case DAL.opOutputStepSpeed: {
                    // ramp up, run, ramp down, <brake> using time
                    const speed = this.speedCmdValues[0];
                    const step1 = this.speedCmdValues[1];
                    const step2 = this.speedCmdValues[2];
                    const step3 = this.speedCmdValues[3];
                    const brake = this.speedCmdValues[4];
-                    const dstep = (this.speedCmd == DAL.opOutputTimePower || this.speedCmd == DAL.opOutputTimeSpeed) 
+                    const dstep = (this.speedCmd == DAL.opOutputTimePower || this.speedCmd == DAL.opOutputTimeSpeed)
                        ? pxsim.U.now() - this.speedCmdTime
                        : this.tacho - this.speedCmdTacho;
                    if (dstep < step1) // rampup
@ -117,9 +131,36 @@ namespace pxsim {
                        if (brake) this.speed = 0;
                        this.clearSpeedCmd();
                    }
-                    this.speed = Math.round(this.speed); // integer only
                    break;
+                }
+                case DAL.opOutputStepSync:
+                case DAL.opOutputTimeSync: {
+                    if (!this._synchedMotor) // handled in other motor code
+                        break;
+
+                    const otherMotor = this._synchedMotor;
+                    const speed = this.speedCmdValues[0];
+                    const turnRatio = this.speedCmdValues[1];
+                    const stepsOrTime = this.speedCmdValues[2];
+                    const brake = this.speedCmdValues[3];
+                    const dstep = this.speedCmd == DAL.opOutputTimeSync
+                        ? pxsim.U.now() - this.speedCmdTime
+                        : this.tacho - this.speedCmdTacho;
+                    // 0 is special case, run infinite
+                    if (!stepsOrTime || dstep < stepsOrTime)
+                        this.speed = speed;
+                    else {
+                        if (brake) this.speed = 0;
+                        this.clearSpeedCmd();
+                    }
+                    // send synched motor state
+                    otherMotor.speed = Math.floor(this.speed * turnRatio / 100);
+                    if (!this._synchedMotor)
+                        otherMotor.clearSpeedCmd();
+                    break;
+                }
            }
+            this.speed = Math.round(this.speed); // integer only

            // compute delta angle
            const rotations = this.getSpeed() / 100 * this.rotationsPerMilliSecond * elapsed;
--- a/sim/state/output.ts
+++ b/sim/state/output.ts
@ -56,6 +56,25 @@ namespace pxsim {
                            motors.forEach(motor => motor.setSpeedCmd(cmd, [speed, step1, step2, step3, brake]));
                            return 2;
                        }
+                        case DAL.opOutputStepSync:
+                        case DAL.opOutputTimeSync: {
+                            const port = buf.data[1];
+                            const speed = pxsim.BufferMethods.getNumber(buf, BufferMethods.NumberFormat.Int8LE, 2); // signed byte
+                            // note that b[3] is padding
+                            const turnRatio = pxsim.BufferMethods.getNumber(buf, BufferMethods.NumberFormat.Int16LE, 4);
+                            // b[6], b[7] is padding
+                            const stepsOrTime = pxsim.BufferMethods.getNumber(buf, BufferMethods.NumberFormat.Int32LE, 8);
+                            const brake = pxsim.BufferMethods.getNumber(buf, BufferMethods.NumberFormat.Int8LE, 12);
+
+                            const motors = ev3board().getMotor(port);
+                            for (const motor of motors) {
+                                const otherMotor = motors.filter(m => m.port != motor.port)[0];
+                                motor.setSyncCmd(
+                                    motor.port < otherMotor.port ? otherMotor : undefined,
+                                    cmd, [speed, turnRatio, stepsOrTime, brake]);
+                            }
+                            return 2;
+                        }
                        case DAL.opOutputStop: {
                            // stop
                            const port = buf.data[1];
--- a/sim/state/sensor.ts
+++ b/sim/state/sensor.ts
@ -5,6 +5,7 @@ namespace pxsim {

        protected mode: number;
        protected valueChanged: boolean;
+        protected modeChanged: boolean;

        constructor(port: number) {
            super(port);
@ -24,6 +25,8 @@ namespace pxsim {

        setMode(mode: number) {
            this.mode = mode;
+            this.changed = true;
+            this.modeChanged = true;
        }

        getMode() {
@ -44,6 +47,12 @@ namespace pxsim {
            return res;
        }

+        modeChange() {
+            const res = this.modeChanged;
+            this.modeChanged = false;
+            return res;
+        }
+
        setChangedState() {
            this.changed = true;
            this.valueChanged = false;
--- a/sim/visuals/board.ts
+++ b/sim/visuals/board.ts
@ -183,8 +183,8 @@ namespace pxsim.visuals {
            this.layoutView.updateTheme(theme);
        }

-        private getControlForNode(id: NodeType, port: number) {
-            if (this.cachedControlNodes[id] && this.cachedControlNodes[id][port]) {
+        private getControlForNode(id: NodeType, port: number, useCache = true) {
+            if (useCache && this.cachedControlNodes[id] && this.cachedControlNodes[id][port]) {
                return this.cachedControlNodes[id][port];
            }

@ -340,6 +340,28 @@ namespace pxsim.visuals {
                    cancelAnimationFrame(animationId);
                })
            }
+            // Save previous inputs for the next cycle
+            EV3View.previousSelectedInputs = ev3board().getInputNodes().map((node, index) => (this.getDisplayViewForNode(node.id, index).getSelected()) ? node.id : -1)
+            EV3View.previousSeletedOutputs = ev3board().getMotors().map((node, index) => (this.getDisplayViewForNode(node.id, index).getSelected()) ? node.id : -1);
+        }
+
+        private static previousSelectedInputs: number[];
+        private static previousSeletedOutputs: number[];
+
+        private static isPreviousInputSelected(index: number, id: number) {
+            if (EV3View.previousSelectedInputs && EV3View.previousSelectedInputs[index] == id) {
+                EV3View.previousSelectedInputs[index] = undefined;
+                return true;
+            }
+            return false;
+        }
+
+        private static isPreviousOutputSelected(index: number, id: number) {
+            if (EV3View.previousSeletedOutputs && EV3View.previousSeletedOutputs[index] == id) {
+                EV3View.previousSeletedOutputs[index] = undefined;
+                return true;
+            }
+            return false;
        }

        private begin() {
@ -382,7 +404,9 @@ namespace pxsim.visuals {
                const view = this.getDisplayViewForNode(node.id, index);
                if (!node.didChange() && !view.didChange()) return;
                if (view) {
-                    const control = view.getSelected() ? this.getControlForNode(node.id, index) : undefined;
+                    const isSelected = EV3View.isPreviousInputSelected(index, node.id) || view.getSelected();
+                    if (isSelected && !view.getSelected()) view.setSelected(true);
+                    const control = isSelected ? this.getControlForNode(node.id, index, !node.modeChange()) : undefined;
                    const closeIcon = control ? this.getCloseIconView() : undefined;
                    this.layoutView.setInput(index, view, control, closeIcon);
                    view.updateState();
@ -401,7 +425,9 @@ namespace pxsim.visuals {
                const view = this.getDisplayViewForNode(node.id, index);
                if (!node.didChange() && !view.didChange()) return;
                if (view) {
-                    const control = view.getSelected() ? this.getControlForNode(node.id, index) : undefined;
+                    const isSelected = EV3View.isPreviousOutputSelected(index, node.id) || view.getSelected();
+                    if (isSelected && !view.getSelected()) view.setSelected(true);
+                    const control = isSelected ? this.getControlForNode(node.id, index) : undefined;
                    const closeIcon = control ? this.getCloseIconView() : undefined;
                    this.layoutView.setOutput(index, view, control, closeIcon);
                    view.updateState();
--- a/sim/visuals/controls/colorGrid.ts
+++ b/sim/visuals/controls/colorGrid.ts
@ -7,7 +7,7 @@ namespace pxsim.visuals {

        getInnerView() {
            this.group = svg.elt("g") as SVGGElement;
-            this.group.setAttribute("transform", `translate(1.02, 1.5) scale(0.8)`)
+            this.group.setAttribute("transform", `translate(2, 2.5) scale(0.6)`)

            const colorIds = ['red', 'yellow', 'blue', 'green', undefined, 'grey'];
            const colors = ['#f12a21', '#ffd01b', '#006db3', '#00934b', undefined, '#6c2d00'];
--- a/sim/visuals/nodes/colorSensorView.ts
+++ b/sim/visuals/nodes/colorSensorView.ts
@ -14,6 +14,7 @@ namespace pxsim.visuals {
        }

        public updateState() {
+            super.updateState();
            // TODO: show different color modes
        }
    }
--- a/sim/visuals/nodes/largeMotorView.ts
+++ b/sim/visuals/nodes/largeMotorView.ts
@ -10,6 +10,7 @@ namespace pxsim.visuals {
        }

        updateState() {
+            super.updateState();
            const motorState = ev3board().getMotors()[this.port];
            if (!motorState) return;
            const speed = motorState.getSpeed();
--- a/sim/visuals/nodes/mediumMotorView.ts
+++ b/sim/visuals/nodes/mediumMotorView.ts
@ -20,6 +20,7 @@ namespace pxsim.visuals {
        }

        updateState() {
+            super.updateState();
            const motorState = ev3board().getMotors()[this.port];
            if (!motorState) return;
            const speed = motorState.getSpeed();
--- a/sim/visuals/nodes/moduleView.ts
+++ b/sim/visuals/nodes/moduleView.ts
@ -4,7 +4,8 @@ namespace pxsim.visuals {
        protected content: SVGSVGElement;

        protected controlShown: boolean;
-        protected selected: boolean;
+
+        protected opacity: number;

        constructor(protected xml: string, protected prefix: string, protected id: NodeType, protected port: NodeType) {
            super();
@ -106,19 +107,24 @@ namespace pxsim.visuals {
            this.updateOpacity();
        }

+        public updateState() {
+            this.updateOpacity();
+        }
+
        protected updateOpacity() {
            if (this.rendered) {
-                const opacity = this.selected ? "0.2" : "1";
-                if (this.hasClick()) {
-                    this.setOpacity(opacity);
+                const opacity = this.selected ? 0.2 : 1;
+                if (this.hasClick() && this.opacity != opacity) {
+                    this.opacity = opacity;
+                    this.setOpacity(this.opacity);
                    if (this.selected) this.content.style.cursor = "";
                    else this.content.style.cursor = "pointer";
                }
            }
        }

-        protected setOpacity(opacity: string) {
-            this.element.setAttribute("opacity", opacity);
+        protected setOpacity(opacity: number) {
+            this.element.setAttribute("opacity", `${opacity}`);
        }
    }
 }
--- a/sim/visuals/view.ts
+++ b/sim/visuals/view.ts
@ -219,7 +219,6 @@ namespace pxsim.visuals {
            this.changed = false;
            return res;
        }
-
    }

    export abstract class SimView<T extends BaseNode> extends View implements LayoutElement {
--- a/svgicons/categories/addpackage.svg
+++ b/svgicons/categories/addpackage.svg
@ -9,15 +9,7 @@
 <title>color</title>
 <g id="menu_icn_expansions" transform="translate(-9596 11554)">
 	<circle id="Ellipse_34" class="st0" cx="9607.5" cy="-11542" r="9"/>
-	<g id="Rectangle_253_1_" transform="translate(527 574)">
-		<rect x="9079.5" y="-12122" class="st0" width="2" height="12"/>
-		<rect x="9080" y="-12121.5" class="st1" width="1" height="11"/>
-	</g>
-	<g id="Rectangle_254_1_" transform="translate(522 581) rotate(-90)">
-		
-			<rect x="12117" y="9084.5" transform="matrix(-2.535182e-06 -1 1 -2.535182e-06 3037.5305 21208.5234)" class="st0" width="12" height="2"/>
-		
-			<rect x="12117.5" y="9085" transform="matrix(-2.535182e-06 -1 1 -2.535182e-06 3037.5305 21208.5234)" class="st1" width="11" height="1"/>
-	</g>
+	<polygon class="st1" points="9613.5,-11543 9608.5,-11543 9608.5,-11548 9606.5,-11548 9606.5,-11543 9601.5,-11543 9601.5,-11541 
+		9606.5,-11541 9606.5,-11536 9608.5,-11536 9608.5,-11541 9613.5,-11541 	"/>
 </g>
 </svg>
--- a/svgicons/categories/advancedcollapsed.svg
+++ b/svgicons/categories/advancedcollapsed.svg
@ -6,18 +6,5 @@
 	.st0{fill:#FFFFFF;}
 </style>
 <title>color</title>
-<g id="menu_icn_advanced_closed" transform="translate(-9594 10075)">
-	<g id="Line_9_1_">
-		
-			<rect x="9600.7" y="-10067" transform="matrix(0.7071 -0.7071 0.7071 0.7071 9926.6836 3842.5476)" class="st0" width="2" height="11.3"/>
-	</g>
-	<g id="Line_10_1_">
-		
-			<rect x="9603" y="-10062.3" transform="matrix(0.7071 -0.7071 0.7071 0.7071 9928.7334 3847.4973)" class="st0" width="11.3" height="2"/>
-	</g>
-	<g id="menu_icn_advanced_closed-2">
-		
-			<rect x="9604.7" y="-10057.6" transform="matrix(0.7071 -0.7071 0.7071 0.7071 9924.7324 3846.2527)" class="st0" width="1" height="1"/>
-	</g>
-</g>
+<polygon class="st0" points="22.8,6.8 20.8,4.9 11.5,14.2 2.2,4.9 0.2,6.8 10.5,17.1 10.5,17.1 11.5,18.1 11.8,17.8 11.8,17.8 "/>
 </svg>
--- a/svgicons/categories/advancedexpanded.svg
+++ b/svgicons/categories/advancedexpanded.svg
@ -6,18 +6,5 @@
 	.st0{fill:#FFFFFF;}
 </style>
 <title>color</title>
-<g id="menu_icn_advanced_open" transform="translate(-8544 12422.914) rotate(180)">
-	<g id="Line_9">
-		
-			<rect x="-8559.7" y="12406.3" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -11283.3965 -2416.5291)" class="st0" width="2" height="11.3"/>
-	</g>
-	<g id="Line_10">
-		
-			<rect x="-8557.4" y="12411" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -11281.3467 -2411.5793)" class="st0" width="11.3" height="2"/>
-	</g>
-	<g id="Rectangle_251">
-		
-			<rect x="-8555.7" y="12415.7" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -11285.3848 -2412.8174)" class="st0" width="1" height="1"/>
-	</g>
-</g>
+<polygon class="st0" points="22.6,16.1 12.5,6 12.5,6 11.5,5 11.2,5.3 11.2,5.3 0.4,16.1 2.3,18 11.5,8.8 20.7,18 "/>
 </svg>
--- a/svgicons/categories/functions.svg
+++ b/svgicons/categories/functions.svg
@ -7,25 +7,24 @@
 </style>
 <title>color</title>
 <g id="menu_icn_FX" transform="translate(-9079.886 11883.081)">
-	<path id="Path_166" class="st0" d="M9087.2-11874.5h-1.7c0-0.5,0-0.6,0.5-0.6c0.8,0,1.4-0.4,1.7-1.1c0.4-0.8,0.9-1.6,1.4-2.4
-		c0.5-0.7,1.3-1.2,2.2-1.3c0.6-0.1,1.2,0.1,1.5,0.6c0.2,0.3,0.2,0.6,0.1,0.9c-0.2,0.3-0.5,0.4-0.8,0.3c-0.3,0-0.5-0.3-0.5-0.6
-		c0-0.1,0-0.1,0-0.2c0-0.2,0.1-0.4,0.1-0.6c-0.2,0-0.5-0.1-0.7,0c-0.4,0.2-0.7,0.4-0.9,0.8c-0.4,0.6-0.7,1.3-0.9,2
-		c-0.2,0.5-0.4,1.1-0.5,1.6h1.3c-0.1,0.2-0.1,0.4-0.2,0.6h-1.3c-0.3,1-0.5,1.9-0.8,2.8c-0.4,1.9-1.1,3.7-1.9,5.5
-		c-0.4,0.8-0.9,1.5-1.5,2.1c-0.5,0.5-1.1,0.8-1.8,0.8c-0.4,0.1-0.8-0.1-1.2-0.3c-0.2-0.2-0.3-0.6-0.2-0.9c0.2-0.3,0.5-0.5,0.9-0.4
-		c0.3,0,0.4,0.3,0.4,0.6c0,0.1-0.1,0.2-0.1,0.2c-0.1,0.1-0.1,0.2-0.1,0.3c0.1,0,0.2,0.1,0.4,0.1c0.5,0,1-0.3,1.3-0.8
-		c0.3-0.5,0.6-1,0.7-1.5c0.8-2.8,1.6-5.6,2.4-8.4C9087.2-11874.4,9087.2-11874.4,9087.2-11874.5z"/>
-	<path id="Path_167" class="st0" d="M9098.2-11863.3c0.1-0.1,0.1-0.2,0.2-0.3c1-0.6,1.7-1.7,1.9-2.8c0.4-1.9,0.4-3.8-0.1-5.6
-		c-0.3-1-0.9-1.8-1.7-2.4c-0.1-0.1-0.2-0.2-0.2-0.3c1.8,0.7,3.5,2.9,3.5,5.7C9101.8-11866.6,9100.4-11864.3,9098.2-11863.3z"/>
-	<path id="Path_168" class="st0" d="M9093.5-11874.7c0,0.1-0.1,0.2-0.1,0.2c-1,0.6-1.7,1.7-1.9,2.8c-0.4,1.9-0.4,3.8,0.1,5.7
-		c0.3,1,0.9,1.8,1.7,2.4c0.1,0.1,0.2,0.1,0.2,0.3c-2.1-1-3.5-3.2-3.4-5.6C9090-11872,9091.9-11874.2,9093.5-11874.7z"/>
-	<path id="Path_169" class="st0" d="M9097.9-11867.4c0,0,0.1,0,0.2,0.1c0,0,0,0,0,0.1c-0.3,0.5-0.6,0.9-1.1,1.2
-		c-0.2,0.2-0.6,0.3-0.9,0c-0.1-0.1-0.2-0.2-0.2-0.4c-0.2-0.6-0.3-1.1-0.4-1.7c0-0.1,0-0.1-0.1-0.2c-0.1,0.2-0.2,0.4-0.4,0.6
-		c-0.3,0.4-0.6,0.9-1,1.3c-0.2,0.2-0.4,0.4-0.7,0.5c-0.3,0.1-0.6,0-0.8-0.3c0,0,0-0.1,0-0.1c0-0.2,0-0.4,0.2-0.5
-		c0.1-0.1,0.3-0.1,0.5,0c0,0,0.1,0.1,0.1,0.1c0.3,0.2,0.4,0.3,0.6-0.1c0.4-0.6,0.8-1.3,1.3-1.9c0-0.1,0-0.2,0-0.3
-		c-0.1-0.4-0.2-0.8-0.3-1.2c-0.2-0.7-0.5-0.9-1.2-0.9h-0.1c-0.1-0.1,0-0.2,0.1-0.2c0.4-0.1,0.9-0.2,1.3-0.2c0.1,0,0.2,0,0.3,0.1
-		c0.3,0.4,0.5,0.8,0.6,1.3c0,0.1,0.1,0.3,0.1,0.4c0.1-0.2,0.3-0.5,0.5-0.7c0.3-0.3,0.6-0.7,0.9-0.9c0.2-0.1,0.4-0.2,0.6-0.2
-		c0.3,0,0.5,0.2,0.5,0.5c0,0,0,0.1,0,0.1c-0.1,0.3-0.3,0.4-0.6,0.3c0,0,0,0,0,0c-0.1,0-0.1,0-0.2,0c-0.3-0.2-0.7-0.1-0.9,0.2
-		c0,0,0,0,0,0c-0.2,0.3-0.5,0.7-0.7,1c0,0.1,0,0.1,0,0.2c0.2,0.7,0.3,1.4,0.5,2.2c0,0.1,0,0.1,0.1,0.2c0.1,0.3,0.3,0.4,0.5,0.1
-		C9097.5-11866.9,9097.6-11867.2,9097.9-11867.4z"/>
+	<path id="Path_166" class="st0" d="M9086.9-11874.7h-1.8c0-0.5,0-0.6,0.5-0.6c0.9,0,1.5-0.4,1.8-1.2c0.4-0.9,1-1.7,1.5-2.6
+		c0.5-0.7,1.4-1.3,2.3-1.4c0.6-0.1,1.3,0.1,1.6,0.6c0.2,0.3,0.2,0.6,0.1,1c-0.2,0.3-0.5,0.4-0.9,0.3c-0.3,0-0.5-0.3-0.5-0.6
+		c0-0.1,0-0.1,0-0.2c0-0.2,0.1-0.4,0.1-0.6c-0.2,0-0.5-0.1-0.7,0c-0.4,0.2-0.7,0.4-1,0.9c-0.4,0.6-0.7,1.4-1,2.1
+		c-0.2,0.5-0.4,1.2-0.5,1.7h1.4c-0.1,0.2-0.1,0.4-0.2,0.6h-1.4c-0.3,1.1-0.5,2-0.9,3c-0.4,2-1.2,3.9-2,5.8c-0.4,0.9-1,1.6-1.6,2.2
+		c-0.5,0.5-1.2,0.8-1.9,0.8c-0.4,0.1-0.9-0.1-1.3-0.3c-0.2-0.2-0.3-0.6-0.2-1c0.2-0.3,0.5-0.5,1-0.4c0.3,0,0.4,0.3,0.4,0.6
+		c0,0.1-0.1,0.2-0.1,0.2c-0.1,0.1-0.1,0.2-0.1,0.3c0.1,0,0.2,0.1,0.4,0.1c0.5,0,1.1-0.3,1.4-0.8c0.3-0.5,0.6-1.1,0.7-1.6
+		c0.8-3,1.7-6,2.6-8.9C9086.9-11874.6,9086.9-11874.6,9086.9-11874.7z"/>
+	<path id="Path_167" class="st0" d="M9098.6-11862.8c0.1-0.1,0.1-0.2,0.2-0.3c1.1-0.6,1.8-1.8,2-3c0.4-2,0.4-4-0.1-6
+		c-0.3-1.1-1-1.9-1.8-2.6c-0.1-0.1-0.2-0.2-0.2-0.3c1.9,0.7,3.7,3.1,3.7,6.1C9102.5-11866.3,9101-11863.8,9098.6-11862.8z"/>
+	<path id="Path_168" class="st0" d="M9093.6-11874.9c0,0.1-0.1,0.2-0.1,0.2c-1.1,0.6-1.8,1.8-2,3c-0.4,2-0.4,4,0.1,6.1
+		c0.3,1.1,1,1.9,1.8,2.6c0.1,0.1,0.2,0.1,0.2,0.3c-2.2-1.1-3.7-3.4-3.6-6C9089.9-11872,9091.9-11874.4,9093.6-11874.9z"/>
+	<path id="Path_169" class="st0" d="M9098.3-11867.1c0,0,0.1,0,0.2,0.1c0,0,0,0,0,0.1c-0.3,0.5-0.6,1-1.2,1.3c-0.2,0.2-0.6,0.3-1,0
+		c-0.1-0.1-0.2-0.2-0.2-0.4c-0.2-0.6-0.3-1.2-0.4-1.8c0-0.1,0-0.1-0.1-0.2c-0.1,0.2-0.2,0.4-0.4,0.6c-0.3,0.4-0.6,1-1.1,1.4
+		c-0.2,0.2-0.4,0.4-0.7,0.5c-0.3,0.1-0.6,0-0.9-0.3v-0.1c0-0.2,0-0.4,0.2-0.5c0.1-0.1,0.3-0.1,0.5,0l0.1,0.1
+		c0.3,0.2,0.4,0.3,0.6-0.1c0.4-0.6,0.9-1.4,1.4-2c0-0.1,0-0.2,0-0.3c-0.1-0.4-0.2-0.9-0.3-1.3c-0.2-0.7-0.5-1-1.3-1h-0.1
+		c-0.1-0.1,0-0.2,0.1-0.2c0.4-0.1,1-0.2,1.4-0.2c0.1,0,0.2,0,0.3,0.1c0.3,0.4,0.5,0.8,0.6,1.4c0,0.1,0.1,0.3,0.1,0.4
+		c0.1-0.2,0.3-0.5,0.5-0.7c0.3-0.3,0.6-0.7,1-1c0.2-0.1,0.4-0.2,0.6-0.2c0.3,0,0.5,0.2,0.5,0.5v0.1c-0.1,0.3-0.3,0.4-0.6,0.3l0,0
+		c-0.1,0-0.1,0-0.2,0c-0.3-0.2-0.7-0.1-1,0.2l0,0c-0.2,0.3-0.5,0.7-0.7,1.1c0,0.1,0,0.1,0,0.2c0.2,0.7,0.3,1.5,0.5,2.3
+		c0,0.1,0,0.1,0.1,0.2c0.1,0.3,0.3,0.4,0.5,0.1C9097.9-11866.6,9098-11866.9,9098.3-11867.1z"/>
 </g>
 </svg>
--- a/svgicons/categories/loops.svg
+++ b/svgicons/categories/loops.svg
@ -7,10 +7,11 @@
 </style>
 <title>color</title>
 <g id="menu_icn_loops" transform="translate(-9080.903 10401.478)">
-	<path id="Path_141" class="st0" d="M9085.3-10385.5c-0.9-1.3-1.9-2.5-2.8-3.8h1.9c0-2.2,0.9-4.4,2.5-5.9c1.1-1.1,2.4-1.8,3.9-2.1
-		c2.7-0.6,5.6,0.2,7.6,2.2c-0.5,0.5-0.9,0.9-1.3,1.3c-2.4-2-4.9-2.4-7.7-0.9c-2,1.1-3.1,3.2-3.1,5.4h1.9
-		C9087.2-10388,9086.2-10386.7,9085.3-10385.5z"/>
-	<path id="Path_142" class="st0" d="M9098.9-10389.3h-1.9c1-1.3,1.9-2.5,2.8-3.8c1,1.3,1.9,2.5,2.8,3.8h-1.9c0,2.3-1,4.5-2.6,6
-		c-1.1,1-2.4,1.7-3.8,2c-2.7,0.6-5.6-0.2-7.6-2.2l1.3-1.3c2.3,2,4.9,2.5,7.7,0.9C9097.7-10384.9,9098.9-10387,9098.9-10389.3z"/>
+	<path id="Path_141" class="st0" d="M9084.5-10385.8c-1-1.4-2.1-2.7-3.1-4.2h2.1c0-2.4,1-4.8,2.7-6.5c1.2-1.2,2.6-2,4.3-2.3
+		c3-0.7,6.1,0.2,8.3,2.4c-0.5,0.5-1,1-1.4,1.4c-2.6-2.2-5.4-2.6-8.4-1c-2.2,1.2-3.4,3.5-3.4,5.9h2.1
+		C9086.5-10388.6,9085.4-10387.1,9084.5-10385.8z"/>
+	<path id="Path_142" class="st0" d="M9099.4-10390h-2.1c1.1-1.4,2.1-2.7,3.1-4.2c1.1,1.4,2.1,2.7,3.1,4.2h-2.1
+		c0,2.5-1.1,4.9-2.9,6.6c-1.2,1.1-2.6,1.9-4.2,2.2c-3,0.7-6.1-0.2-8.3-2.4l1.4-1.4c2.5,2.2,5.4,2.7,8.4,1
+		C9098.1-10385.2,9099.4-10387.5,9099.4-10390z"/>
 </g>
 </svg>
--- a/svgicons/categories/math.svg
+++ b/svgicons/categories/math.svg
@ -8,12 +8,12 @@
 </style>
 <title>color</title>
 <g id="menu_icn_math" transform="translate(-9078.442 10583.172)">
-	<path id="Path_153" class="st0" d="M9087.4-10564.7c-0.2,0.2-0.5,0.5-0.7,0.7l-2.2-2.2c-0.8,0.8-1.5,1.5-2.2,2.2
-		c-0.2-0.2-0.5-0.5-0.7-0.7l2.2-2.2c-0.8-0.8-1.5-1.5-2.2-2.2c0.2-0.2,0.5-0.5,0.7-0.7l2.2,2.2l2.2-2.2c0.2,0.2,0.5,0.5,0.7,0.7
-		l-2.2,2.2C9085.9-10566.1,9086.7-10565.4,9087.4-10564.7z"/>
-	<path id="Path_154" class="st0" d="M9080.9-10575.6v-0.9h3.1v-3.1c0.3,0,0.6,0,0.9,0v3.1h3.1v0.9h-3.1v3.1h-1v-3.1H9080.9z"/>
-	<path id="Path_155" class="st1" d="M9098.5-10567.3h-7.8v-1.7h7.8V-10567.3z"/>
-	<path id="Path_156" class="st1" d="M9098.5-10565.6v1.7h-7.8v-1.7H9098.5z"/>
-	<path id="Path_157" class="st1" d="M9098.5-10577v1.7h-7.8v-1.7H9098.5z"/>
+	<path id="Path_153" class="st0" d="M9087.2-10563.2c-0.2,0.2-0.6,0.6-0.8,0.8l-2.6-2.6c-1,1-1.8,1.8-2.6,2.6
+		c-0.2-0.2-0.6-0.6-0.8-0.8l2.6-2.6c-1-1-1.8-1.8-2.6-2.6c0.2-0.2,0.6-0.6,0.8-0.8l2.6,2.6l2.6-2.6c0.2,0.2,0.6,0.6,0.8,0.8
+		l-2.6,2.6C9085.4-10564.9,9086.3-10564,9087.2-10563.2z"/>
+	<path id="Path_154" class="st0" d="M9079.3-10576.3v-1.1h3.7v-3.7c0.4,0,0.7,0,1.1,0v3.7h3.7v1.1h-3.7v3.7h-1.2v-3.7H9079.3z"/>
+	<path id="Path_155" class="st1" d="M9100.5-10566.3h-9.4v-2h9.4V-10566.3z"/>
+	<path id="Path_156" class="st1" d="M9100.5-10564.3v2h-9.4v-2H9100.5z"/>
+	<path id="Path_157" class="st1" d="M9100.5-10578v2h-9.4v-2H9100.5z"/>
 </g>
 </svg>
--- a/svgicons/categories/sensors.svg
+++ b/svgicons/categories/sensors.svg
@ -3,16 +3,10 @@
 <svg version="1.1" id="svg41" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 23 23" style="enable-background:new 0 0 23 23;" xml:space="preserve">
 <style type="text/css">
-	.st0{fill:none;}
-	.st1{fill:#FFFFFF;}
+	.st0{fill:#FFFFFF;}
 </style>
 <title>color</title>
-<g id="menu_icn_sensor" transform="translate(-9778 10128)">
-	<g id="Path_170" transform="translate(697 95)">
-		<path class="st0" d="M9092.5-10221.5c5.5,0,10,4.5,10,10s-4.5,10-10,10s-10-4.5-10-10S9087-10221.5,9092.5-10221.5z"/>
-		<path class="st1" d="M9092.5-10204.5c3.9,0,7-3.1,7-7s-3.1-7-7-7s-7,3.1-7,7S9088.6-10204.5,9092.5-10204.5 M9092.5-10201.5
-			c-5.5,0-10-4.5-10-10s4.5-10,10-10s10,4.5,10,10S9098-10201.5,9092.5-10201.5z"/>
-	</g>
-	<path id="Path_171" class="st1" d="M9789.5-10120.5c2.2,0,4,1.8,4,4s-1.8,4-4,4s-4-1.8-4-4S9787.3-10120.5,9789.5-10120.5z"/>
-</g>
+<path class="st0" d="M11.5,1.8c-5.4,0-9.8,4.4-9.8,9.8c0,5.4,4.4,9.8,9.8,9.8s9.8-4.4,9.8-9.8C21.2,6.1,16.9,1.8,11.5,1.8z
+	 M11.5,18.3c-3.8,0-6.8-3.1-6.8-6.8s3.1-6.8,6.8-6.8s6.8,3.1,6.8,6.8S15.3,18.3,11.5,18.3z"/>
+<circle class="st0" cx="11.5" cy="11.5" r="3.9"/>
 </svg>
--- a/svgicons/categories/variables.svg
+++ b/svgicons/categories/variables.svg
@ -3,27 +3,18 @@
 <svg version="1.1" id="svg41" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 23 23" style="enable-background:new 0 0 23 23;" xml:space="preserve">
 <style type="text/css">
-	.st0{clip-path:url(#SVGID_2_);}
-	.st1{fill:#FFFFFF;}
+	.st0{fill:#FFFFFF;}
 </style>
 <title>color</title>
-<g>
-	<defs>
-		<rect id="SVGID_1_" x="3" y="5" width="16" height="13"/>
-	</defs>
-	<clipPath id="SVGID_2_">
-		<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
-	</clipPath>
-	<g id="menu_icn_variables" transform="translate(-9077.432 10524.199)" class="st0">
-		<g transform="translate(-518.568 -458.199)">
-			<path id="Path_165" class="st1" d="M9615-10061v2h-16v-2H9615z"/>
-		</g>
-		<g transform="translate(-518.568 -453.199)">
-			<path id="Path_165-2" class="st1" d="M9615-10061v2h-16v-2H9615z"/>
-		</g>
-		<g transform="translate(-518.568 -448.199)">
-			<path id="Path_165-3" class="st1" d="M9615-10061v2h-16v-2H9615z"/>
-		</g>
+<g transform="translate(-518.568 -448.199)">
+	<path id="Path_165-3" class="st0" d="M539.7,464.3v2.4h-19.2v-2.4H539.7z"/>
+</g>
+<g transform="translate(-518.568 -453.199)">
+	<path id="Path_165-2" class="st0" d="M539.7,463.5v2.4h-19.2v-2.4H539.7z"/>
+</g>
+<g id="menu_icn_variables" transform="translate(-9077.432 10524.199)">
+	<g transform="translate(-518.568 -458.199)">
+		<path id="Path_165" class="st0" d="M9617.1-10061.5v2.4h-19.2v-2.4H9617.1z"/>
 	</g>
 </g>
 </svg>
--- a/svgicons/generateIcons.js
+++ b/svgicons/generateIcons.js
@ -2,10 +2,29 @@ const webfontsGenerator = require('webfonts-generator');

 webfontsGenerator({
  files: [
-    './ultrasonic.svg',
+    "./ultrasonic.svg",
    "./color.svg",
    "./touch.svg",
-    "./gyro.svg"
+    "./gyro.svg",
+    "./categories/addpackage.svg",
+    "./categories/brick.svg",
+    "./categories/controls.svg",
+    "./categories/functions.svg",
+    "./categories/list.svg",
+    "./categories/logic.svg",
+    "./categories/loops.svg",
+    "./categories/math.svg",
+    "./categories/motors.svg",
+    "./categories/music.svg",
+    "./categories/sensors.svg",
+    "./categories/text.svg",
+    "./categories/variables.svg",
+    "./icons/cancel.svg",
+    "./icons/check.svg",
+    "./icons/download.svg",
+    "./icons/save.svg",
+    "./categories/advancedcollapsed.svg",
+    "./categories/advancedexpanded.svg"
  ],
  dest: '../docs/static/fonts/icons/',
  round: 10
--- a/svgicons/icons/download.svg
+++ b/svgicons/icons/download.svg
@ -8,12 +8,7 @@
 <title>color</title>
 <g id="menu_icn_download" transform="translate(-9563 11322)">
 	<rect id="Rectangle_167" x="9566" y="-11308" class="st0" width="18" height="8"/>
-	<g id="arrow" transform="translate(6 -5)">
-		<rect id="Rectangle_168" x="9568" y="-11315" class="st0" width="2" height="10"/>
-		
-			<rect id="Rectangle_169" x="9567.6" y="-11307.6" transform="matrix(0.7071 -0.7071 0.7071 0.7071 10798.123 3455.804)" class="st0" width="6" height="2"/>
-		
-			<rect id="Rectangle_170" x="9566.6" y="-11309.6" transform="matrix(0.7071 -0.7071 0.7071 0.7071 10797.2441 3453.6824)" class="st0" width="2" height="6"/>
-	</g>
+	<polygon class="st0" points="9579.4,-11312.9 9578,-11314.3 9576,-11312.3 9576,-11320 9574,-11320 9574,-11312.5 9572.2,-11314.3 
+		9570.8,-11312.9 9575,-11308.6 9575.1,-11308.7 9575.2,-11308.6 	"/>
 </g>
 </svg>
--- a/svgicons/icons/save.svg
+++ b/svgicons/icons/save.svg
@ -9,16 +9,17 @@
 </style>
 <title>color</title>
 <g id="menu_icn_savedisc" transform="translate(-8886 12201.056)">
-	<path id="Path_116" class="st0" d="M8888.4-12189.1v-8.4c0-0.6,0.1-0.7,0.7-0.7h4c0.6,0,0.7,0.1,0.7,0.7v4.1c0,0.5,0.1,0.6,0.6,0.6
-		h6c0.5,0,0.6-0.1,0.6-0.6v-4.2c0-0.5,0.1-0.6,0.6-0.6c1.2,0,1.2,0,2,0.8c0.9,0.9,1.7,1.7,2.6,2.6c0.2,0.2,0.3,0.4,0.3,0.7v13.5
-		c0,0.5-0.1,0.7-0.6,0.7h-16.9c-0.5,0-0.6-0.1-0.6-0.7C8888.4-12183.5,8888.4-12186.3,8888.4-12189.1z M8897.5-12181.9h6.6
-		c0.6,0,0.7-0.1,0.7-0.7v-7.7c0-0.5-0.1-0.7-0.7-0.7h-13.2c-0.5,0-0.7,0.1-0.7,0.7v7.7c0,0.6,0.1,0.7,0.7,0.7H8897.5z"/>
-	<path id="Path_117" class="st0" d="M8899.8-12196.4c0,0.4,0,0.9,0,1.3c0,0.4-0.2,0.5-0.5,0.5c-0.3,0-0.6,0-0.8,0
-		c-0.2,0-0.5-0.1-0.5-0.4c0,0,0-0.1,0-0.1v-2.6c0-0.2,0.1-0.4,0.4-0.5c0,0,0,0,0.1,0c0.3,0,0.6,0,0.9,0c0.3,0,0.5,0.2,0.5,0.4
-		c0,0,0,0,0,0.1C8899.8-12197.3,8899.8-12196.8,8899.8-12196.4z"/>
+	<path id="Path_116" class="st0" d="M8887.3-12189.6v-9.5c0-0.7,0.1-0.8,0.8-0.8h4.5c0.7,0,0.8,0.1,0.8,0.8v4.6
+		c0,0.6,0.1,0.7,0.7,0.7h6.8c0.6,0,0.7-0.1,0.7-0.7v-4.7c0-0.6,0.1-0.7,0.7-0.7c1.4,0,1.4,0,2.3,0.9c1,1,1.9,1.9,2.9,2.9
+		c0.2,0.2,0.3,0.5,0.3,0.8v15.2c0,0.6-0.1,0.8-0.7,0.8H8888c-0.6,0-0.7-0.1-0.7-0.8C8887.3-12183.3,8887.3-12186.5,8887.3-12189.6z
+		 M8897.6-12181.5h7.4c0.7,0,0.8-0.1,0.8-0.8v-8.7c0-0.6-0.1-0.8-0.8-0.8h-14.9c-0.6,0-0.8,0.1-0.8,0.8v8.7c0,0.7,0.1,0.8,0.8,0.8
+		H8897.6z"/>
+	<path id="Path_117" class="st0" d="M8900.2-12197.9c0,0.5,0,1,0,1.5c0,0.5-0.2,0.6-0.6,0.6c-0.3,0-0.7,0-0.9,0s-0.6-0.1-0.6-0.5
+		v-0.1v-2.9c0-0.2,0.1-0.5,0.5-0.6c0,0,0,0,0.1,0c0.3,0,0.7,0,1,0c0.3,0,0.6,0.2,0.6,0.5c0,0,0,0,0,0.1
+		C8900.2-12198.9,8900.2-12198.3,8900.2-12197.9z"/>
 	<g id="Rectangle_166" transform="translate(1.445 6.558)">
-		<rect x="8888.4" y="-12198.2" class="st1" width="15.4" height="10.3"/>
-		<rect x="8888.9" y="-12197.7" class="st2" width="14.4" height="9.3"/>
+		<rect x="8887.5" y="-12199" class="st1" width="17.4" height="11.6"/>
+		<rect x="8888.1" y="-12198.5" class="st2" width="16.3" height="10.5"/>
 	</g>
 </g>
 </svg>
--- a/theme/blockly.less
+++ b/theme/blockly.less
@ -13,11 +13,18 @@
 }

 .blocklyFlyoutLabel:not(.blocklyFlyoutHeading) .blocklyFlyoutLabelIcon {
-    font-family: 'legoIcons';
    fill: white;
    font-size: 1.7rem;
 }

+.blocklyFlyoutLabel .blocklyFlyoutLabelIcon {
+    font-family: 'legoIcons';
+}
+
+span.blocklyTreeIcon {
+    font-family: 'legoIcons' !important;
+}
+
 /* Toolbox padding */
 .blocklyToolboxDiv, .monacoToolboxDiv {
    padding: 0.5rem;
@ -62,9 +69,83 @@ span.blocklyTreeLabel {
    border-radius: 1rem !important;
 }

+
+/* Square shaped corners */
+.blocklyDropDownDiv {
+    border-radius: 0px !important;
+}
+
 /* Mobile */
@media only screen and (max-width: @largestMobileScreen) {
    #blocklyTrashIcon {
        margin: 0.2rem;
    }
-}
+}
+
+span.blocklyTreeIcon.blocklyTreeIconloops::before {
+    content: "\f10b";
+}
+
+span.blocklyTreeIcon.blocklyTreeIconlogic::before {
+    content: "\f10a";
+}
+
+span.blocklyTreeIcon.blocklyTreeIconvariables::before {
+    content: "\f111";
+}
+
+span.blocklyTreeIcon.blocklyTreeIconmath::before {
+    content: "\f10c";
+}
+
+span.blocklyTreeIcon.blocklyTreeIconfunctions {
+    font-family: 'legoIcons' !important;
+}
+span.blocklyTreeIcon.blocklyTreeIconfunctions::before {
+    content: "\f108";
+}
+
+span.blocklyTreeIcon.blocklyTreeIconarrays::before {
+    content: "\f109";
+}
+
+span.blocklyTreeIcon.blocklyTreeIcontext::before {
+    content: "\f110";
+}
+
+span.blocklyTreeIcon.blocklyTreeIconaddpackage::before {
+    content: "\f105";
+}
+
+span.blocklyTreeIcon.blocklyTreeIconadvancedcollapsed::before {
+    content: "\f116";
+}
+
+span.blocklyTreeIcon.blocklyTreeIconadvancedexpanded::before {
+    content: "\f117";
+}
+
+.save-editortools-btn .icon.save,
+    .download-button .icon.download.icon-and-text,
+    .button.approve.positive .i.icon.checkmark,
+    .button.approve.cancel .i.icon.cancel
+{
+    font-family: 'legoIcons';
+}
+
+.save-editortools-btn .icon.save:before {
+    content: "\f115";
+}
+
+.download-button .icon.download.icon-and-text:before {
+    content: "\f114";
+}
+
+.button.approve.positive .i.icon.checkmark:before {
+    content: "\f113";
+}
+
+.button.approve.cancel .i.icon.cancel:before {
+    content: "\f112";
+}
+
Author	SHA1	Message	Date
Sam El-Husseini	783a561941	0.0.49	2018-01-03 15:02:35 -08:00
Sam El-Husseini	c916664ae7	Fix download and save icons.	2018-01-03 15:02:24 -08:00
Sam El-Husseini	4b836ede1b	Merge pull request #167 from Microsoft/blockfixes Block layout fixes.	2018-01-03 14:22:18 -08:00
Sam El-Husseini	52fdaeec99	remove colon from print line block	2018-01-03 14:22:00 -08:00
Sam El-Husseini	2aaa45e10d	Merge pull request #168 from Microsoft/remainingiconfixes Remaining icon fixes.	2018-01-03 14:21:04 -08:00
Sam El-Husseini	7993363e89	Remaining icon fixes. Using blockIcons to show custom icons for built in categories	2018-01-03 14:20:33 -08:00
Sam El-Husseini	4d671f6cb0	Block layout fixes. Fixes to screen blocks. Adding print line API.	2018-01-03 14:00:08 -08:00
Sam El-Husseini	cc020d5a81	Merge pull request #124 from Microsoft/icon_font Icon font	2018-01-03 12:35:52 -08:00
Sam El-Husseini	5c39862a44	Fix the rest of the icons (sensors, math, variables and extensions)	2018-01-03 12:35:33 -08:00
Sam El-Husseini	e0e5c95989	Merge branch 'master' into icon_font	2018-01-03 11:56:28 -08:00
Sam El-Husseini	800b4ad224	Merge pull request #165 from Microsoft/fixnullrefthis Fix null ref for this when _update is called.	2018-01-03 11:42:38 -08:00
Caitlin Hennessy	40c3b4b0cf	Tweaking sensor icon	2018-01-03 11:36:43 -08:00
Caitlin Hennessy	64bdc35e6f	Merge paths for sensor icon	2018-01-03 11:29:49 -08:00
Sam El-Husseini	2b5f702bb6	Fix null ref for this when _update is called.	2018-01-03 11:20:37 -08:00
Peli de Halleux	1c81ecd23f	send ports data to console	2018-01-03 08:24:54 -08:00
Peli de Halleux	4d223374b5	Differential drive (#164 ) * clear sync speed cmd * differential drive model * use cm/s * fixed aggressive clearing of motor sync command * better computation of turn artio * improved robot dimensions * moving block up * hanbdle infinite case * correct handling of inifinte time/step * better stop handling	2018-01-03 00:27:05 -08:00
Sam El-Husseini	dd9cf9014f	Merge pull request #163 from Microsoft/fixnullderefbuttons Fix null dereferencing issue for buttons	2018-01-02 23:19:55 -08:00
Sam El-Husseini	eb11d7926c	Fix null dereferencing issue for buttons	2018-01-02 23:18:54 -08:00
Sam El-Husseini	609740dc48	Merge pull request #162 from Microsoft/moresensorfixes Better fix for null dereferencing issue.	2018-01-02 22:51:45 -08:00
Sam El-Husseini	955a2c9757	Better fix for null dereferencing issue. Fix initial Color sensor mode (default).	2018-01-02 22:51:12 -08:00
Sam El-Husseini	02838e6c30	Merge pull request #161 from Microsoft/colorgridfixes Update Color sensor control (colorGrid) to match spec	2018-01-02 22:30:04 -08:00
Sam El-Husseini	b0c54e84e6	Update Color sensor control (colorGrid) to match spec	2018-01-02 22:29:12 -08:00
Sam El-Husseini	b6644b7a23	Merge pull request #160 from Microsoft/sensorfixes Sensor fixes. Fix race condition	2018-01-02 22:23:14 -08:00
Sam El-Husseini	3c4c38eb59	Fix null dereferencing issue. Fix sensor mode changed not clearing cached control.	2018-01-02 22:22:14 -08:00
Sam El-Husseini	29aba7b10b	Fix advanced icons	2018-01-02 17:30:19 -08:00
Sam El-Husseini	7427142243	Merge branch 'icon_font' of https://github.com/Microsoft/pxt-ev3 into icon_font	2018-01-02 17:17:13 -08:00
Sam El-Husseini	436500babb	Merge	2018-01-02 17:11:24 -08:00
Caitlin Hennessy	82be4e344b	More work	2018-01-02 17:07:36 -08:00
Peli de Halleux	81bfca4ed6	0.0.48	2018-01-02 16:20:30 -08:00
Peli de Halleux	c35dbdd38f	Motor sync support in simulator (#159 ) * parse sync motor command * better sim support * sync support * fixing tank	2018-01-02 16:20:00 -08:00
Sam El-Husseini	1bc93013e6	0.0.47	2018-01-02 14:51:00 -08:00
Sam El-Husseini	58148eb1c3	Square shaped corners for Blockly blocks and dropdowns. (#158 )	2018-01-02 13:32:07 -08:00
Caitlin Hennessy	a7c62b45b2	Use legoIcons font for flyout headings	2018-01-02 13:01:28 -08:00
Sam El-Husseini	bd765d49ee	Add lego resources.AI	2018-01-02 12:59:48 -08:00
Caitlin Hennessy	383ca5467d	Remove advexpanded/advcollapsed	2018-01-02 12:49:25 -08:00
Caitlin Hennessy	e240e3b394	Check, cancel	2018-01-02 10:47:04 -08:00
Caitlin Hennessy	7affbf8cb6	Save, download	2018-01-02 10:47:04 -08:00
Caitlin Hennessy	4dff282633	Initial work	2018-01-02 10:47:04 -08:00
Sam El-Husseini	5d470fdcef	Merge pull request #143 from Microsoft/persistselected Persist selected state of controls across simulator restarts	2017-12-29 14:02:50 -08:00
Sam El-Husseini	f30eac41e9	Persist selected state of controls across simulator restarts	2017-12-28 11:17:18 -08:00
Sam El-Husseini	d7f46c0fb5	Hide screen picker properly from typescript	2017-12-28 11:15:53 -08:00
Caitlin Hennessy	995527675a	Check, cancel	2017-12-21 11:30:32 -08:00
Caitlin Hennessy	84eb849bc7	Save, download	2017-12-21 11:10:47 -08:00
Caitlin Hennessy	5e0e35b4bd	Initial work	2017-12-21 11:00:54 -08:00