0.1.49

bump pxt-core to 3.12.26,
Update download dialog (#589 )
2018-05-07 15:07:28 -07:00 · 2018-05-07 15:07:22 -07:00 · 2018-05-07 14:59:29 -07:00 · 2018-05-07 13:20:10 -07:00 · 2018-05-07 13:03:26 -07:00 · 2018-05-07 13:03:20 -07:00
48 changed files with 473 additions and 419 deletions
--- a/cmds/pxtrequire.ts
+++ b/cmds/pxtrequire.ts
@ -1,6 +0,0 @@
 /// <reference path="../node_modules/pxt-core/built/pxtlib.d.ts" />
 import * as path from "path";
 export let pxtCore = require("pxt-core");
 // require.resolve() gives path to [pxt dir]/built/pxt.js, so move up twice to get pxt root dir
 export let pxtCoreDir = path.resolve(require.resolve("pxt-core"), "..", "..");
--- a/docs/index-ref.json
+++ b/docs/index-ref.json
@ -1,3 +1,3 @@
 {
-    "appref": "v0.1.27"
+    "appref": "v0.1.48"
 }
--- a/docs/static/download/firmware.png
+++ b/docs/static/download/firmware.png
--- a/docs/static/download/firmware.svg
+++ b/docs/static/download/firmware.svg
@ -1,130 +1,63 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="261.3" height="109.3" viewBox="0 0 69.1 28.9" id="svg9461">
+<?xml version="1.0" encoding="utf-8"?>
-  <defs id="defs9455">
+<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-    <clipPath id="clipPath8689">
+<svg version="1.1" id="svg9461" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-      <path d="M0 1145.9h1366V0H0z" id="path8687"/>
+	 viewBox="0 0 85.6 95.6" style="enable-background:new 0 0 85.6 95.6;" xml:space="preserve">
-    </clipPath>
+<style type="text/css">
-    <clipPath id="clipPath8663">
+	.st0{fill:url(#path8773_1_);}
-      <path d="M309.8 89.4h3.7v3.7h-3.7z" id="path8661"/>
+	.st1{clip-path:url(#SVGID_2_);}
-    </clipPath>
+	.st2{fill:#F2F2F2;}
-    <clipPath id="clipPath8647">
+	.st3{fill:url(#path8805_1_);}
-      <path d="M0 1145.9h1366V0H0z" id="path8645"/>
+	.st4{clip-path:url(#SVGID_4_);}
-    </clipPath>
+	.st5{fill:#393939;}
-    <linearGradient x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 .6661 -.32488 0 300.7 115)" id="linearGradient8637">
+	.st6{fill:#98B6A7;}
-      <stop offset="0" id="stop8633" stop-color="#757575"/>
+	.st7{fill:url(#path8841_1_);}
-      <stop offset="1" id="stop8635" stop-color="#393939"/>
+	.st8{clip-path:url(#SVGID_6_);}
-    </linearGradient>
+	.st9{fill:#6A6A6A;}
-    <clipPath id="clipPath8595">
+	.st10{fill:url(#path8875_1_);}
-      <path d="M0 1145.9h1366V0H0z" id="path8593"/>
+	.st11{clip-path:url(#SVGID_8_);}
-    </clipPath>
+	.st12{fill:#A9ABA9;}
-    <linearGradient x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 12.8096 -17.18704 0 300.7 98.4)" id="linearGradient8585">
+	.st13{fill:#9B9B9B;}
-      <stop offset="0" id="stop8579" stop-color="#6a6a6a"/>
+	.st14{fill:url(#path8927_1_);}
-      <stop offset=".5" id="stop8581" stop-color="#48e400"/>
+	.st15{clip-path:url(#SVGID_10_);}
-      <stop offset="1" id="stop8583" stop-color="#6a6a6a"/>
+	.st16{fill:#818181;}
-    </linearGradient>
+	.st17{fill:#FFFFFF;}
-    <clipPath id="clipPath8561">
+	.st18{clip-path:url(#SVGID_12_);}
-      <path d="M0 1145.9h1366V0H0z" id="path8559"/>
+	.st19{fill:#FFEE00;}
-    </clipPath>
+	.st20{fill:#D52715;}
-    <linearGradient x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 -1.33016 5.597 0 300.7 88.4)" id="linearGradient8551">
+	.st21{fill:#171714;}
-      <stop offset="0" id="stop8547" stop-color="#a9aba9"/>
+	.st22{clip-path:url(#SVGID_14_);}
-      <stop offset="1" id="stop8549" stop-color="#535453"/>
+	.st23{fill:#303030;}
-    </linearGradient>
+</style>
    <clipPath id="clipPath8525">
      <path d="M0 1145.9h1366V0H0z" id="path8523"/>
    </clipPath>
    <linearGradient x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 -.56074 .70884 0 300.7 115.6)" id="linearGradient8515">
      <stop offset="0" id="stop8511" stop-color="#a9aba9"/>
      <stop offset="1" id="stop8513" stop-color="#818181"/>
    </linearGradient>
    <clipPath id="clipPath8493">
      <path d="M0 1145.9h1366V0H0z" id="path8491"/>
    </clipPath>
    <linearGradient x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 -2.39765 2.48247 0 300.7 98.1)" id="linearGradient8483">
      <stop offset="0" id="stop8479" stop-color="#f2f2f2"/>
      <stop offset="1" id="stop8481" stop-color="#7a7a7a"/>
    </linearGradient>
    <clipPath id="clipPath8449">
      <path d="M0 1145.9h1366V0H0z" id="path8447"/>
    </clipPath>
    <clipPath id="clipPath8977">
      <path d="M0 1145.9h1366V0H0z" id="path8975"/>
    </clipPath>
    <clipPath id="clipPath8951">
      <path d="M593 101h3.6v3.7H593z" id="path8949"/>
    </clipPath>
    <clipPath id="clipPath8935">
      <path d="M0 1145.9h1366V0H0z" id="path8933"/>
    </clipPath>
    <linearGradient x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 .67046 -.32706 0 583.8 126.8)" id="linearGradient8925">
      <stop offset="0" id="stop8921" stop-color="#757575"/>
      <stop offset="1" id="stop8923" stop-color="#393939"/>
    </linearGradient>
    <clipPath id="clipPath8883">
      <path d="M0 1145.9h1366V0H0z" id="path8881"/>
    </clipPath>
    <linearGradient x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 12.89405 -17.29507 0 583.7 110)" id="linearGradient8873">
      <stop offset="0" id="stop8867" stop-color="#6a6a6a"/>
      <stop offset=".5" id="stop8869" stop-color="#48e400"/>
      <stop offset="1" id="stop8871" stop-color="#6a6a6a"/>
    </linearGradient>
    <clipPath id="clipPath8849">
      <path d="M0 1145.9h1366V0H0z" id="path8847"/>
    </clipPath>
    <linearGradient x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 -1.33884 5.6329 0 583.7 100)" id="linearGradient8839">
      <stop offset="0" id="stop8835" stop-color="#a9aba9"/>
      <stop offset="1" id="stop8837" stop-color="#535453"/>
    </linearGradient>
    <clipPath id="clipPath8813">
      <path d="M0 1145.9h1366V0H0z" id="path8811"/>
    </clipPath>
    <linearGradient x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 -.56429 .71345 0 583.7 127.4)" id="linearGradient8803">
      <stop offset="0" id="stop8799" stop-color="#a9aba9"/>
      <stop offset="1" id="stop8801" stop-color="#818181"/>
    </linearGradient>
    <clipPath id="clipPath8781">
      <path d="M0 1145.9h1366V0H0z" id="path8779"/>
    </clipPath>
    <linearGradient x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 -2.41323 2.4988 0 583.7 109.8)" id="linearGradient8771">
      <stop offset="0" id="stop8767" stop-color="#f2f2f2"/>
      <stop offset="1" id="stop8769" stop-color="#7a7a7a"/>
    </linearGradient>
    <clipPath id="clipPath8737">
      <path d="M0 1145.9h1366V0H0z" id="path8735"/>
    </clipPath>
  </defs>
 <g id="layer1" transform="translate(0 -268)">
 	<g id="g10860" transform="translate(-20.8 -2)">
      <g transform="matrix(.35278 0 0 -.35278 62.8 291.4)" id="g8727">
        <path id="path8729" d="M0 0h24" fill="none" stroke="#000" stroke-width="2"/>
      </g>
      <g id="g8731" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
        <g clip-path="url(#clipPath8737)" id="g8733">
          <g transform="translate(458 159.9)" id="g8739">
            <path id="path8741" d="M0 0h83a4 4 0 0 0 4-4v-52.5H-4V-4a4 4 0 0 0 4 4" fill="#e6e6e6"/>
          </g>
          <g transform="translate(458 158.4)" id="g8743">
            <path id="path8745" d="M0 0h83c1.3 0 2.4-1.1 2.4-2.5V-52c0-.9-.6-1.5-1.5-1.5H-1c-.8 0-1.5.6-1.5 1.5v49.5C-2.5-1.1-1.4 0 0 0z" fill="none" stroke="#282828" stroke-width="3"/>
          </g>
          <g transform="translate(445 102.9)" id="g8747">
            <path id="path8749" d="M0 0h108.8v-1.2a3 3 0 0 0-3-3H3a3 3 0 0 0-3 3z" fill="#626262"/>
          </g>
          <g transform="translate(489.8 102.9)" id="g8751">
            <path id="path8753" d="M0 0h19.3c0-.8-.6-1.4-1.4-1.4H1.4C.6-1.4 0-.8 0 0" fill="#818181"/>
          </g>
        </g>
      </g>
 		<g id="g8755" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
 			<g id="g8757">
 				<g id="g8763">
 					<g id="g8765">
-              <path id="path8773" d="M567.9 139.7a.6.6 0 0 1-.6-.6v-30.6c0-.3.2-.6.6-.6h31.7c.3 0 .5.3.5.6v30.6c0 .3-.2.6-.5.6z" fill="url(#linearGradient8771)"/>
+						
 							<linearGradient id="path8773_1_" gradientUnits="userSpaceOnUse" x1="-839.9431" y1="-715.001" x2="-838.9431" y2="-715.001" gradientTransform="matrix(0 -3.2193 3.3335 0 2933.3757 -2723.9758)">
 							<stop  offset="0" style="stop-color:#F2F2F2"/>
 							<stop  offset="1" style="stop-color:#7A7A7A"/>
 						</linearGradient>
 						<path id="path8773" class="st0" d="M490.2,93.1c-1.3,0-2.3-1-2.3-2.3V-24.8c0-1.1,0.8-2.3,2.3-2.3h119.9
 							c1.1,0,1.9,1.1,1.9,2.3V90.9c0,1.1-0.8,2.3-1.9,2.3H490.2z"/>
 					</g>
 				</g>
 			</g>
 		</g>
 		<g id="g8775" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
-        <g clip-path="url(#clipPath8781)" id="g8777">
+			<g>
-          <g transform="translate(569.7 111.2)" id="g8783">
+				<defs>
-            <path id="path8785" d="M0 0h28c.3 0 .6-.3.6-.6V-12c0-.4-.3-.6-.6-.6H0c-.3 0-.6.2-.6.6V-.6c0 .3.3.6.6.6" fill="#f2f2f2"/>
+					<rect id="SVGID_1_" x="14.3" y="967.1" width="1822.3" height="1528.7"/>
 				</defs>
 				<clipPath id="SVGID_2_">
 					<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
 				</clipPath>
 				<g id="g8777" class="st1">
 					<g id="g8783" transform="translate(569.7 111.2)">
 						<path id="path8785" class="st2" d="M-72.7-125.8H33.2c1.1,0,2.3-1.1,2.3-2.3v-43.1c0-1.5-1.1-2.3-2.3-2.3H-72.7
 							c-1.1,0-2.3,0.8-2.3,2.3v43.1C-75-127-73.8-125.8-72.7-125.8"/>
 					</g>
 				</g>
 			</g>
 		</g>
@ -132,18 +65,34 @@
 			<g id="g8789">
 				<g id="g8795">
 					<g id="g8797">
-              <path id="path8805" d="M569.4 149.1a.6.6 0 0 1-.6-.6v-22.3c0-.3.3-.6.6-.6H598c.3 0 .6.3.6.6v22.3c0 .3-.3.6-.6.6z" fill="url(#linearGradient8803)"/>
+						
 							<linearGradient id="path8805_1_" gradientUnits="userSpaceOnUse" x1="106.3515" y1="93.6155" x2="107.3515" y2="93.6155" gradientTransform="matrix(0 -0.7528 0.9518 0 460.8399 126.682)">
 							<stop  offset="0" style="stop-color:#A9ABA9"/>
 							<stop  offset="1" style="stop-color:#818181"/>
 						</linearGradient>
 						<path id="path8805" class="st3" d="M495.9,128.7c-1.3,0-2.3-1-2.3-2.3V42.1c0-1.1,1.1-2.3,2.3-2.3H604c1.1,0,2.3,1.1,2.3,2.3
 							v84.3c0,1.1-1.1,2.3-2.3,2.3H495.9z"/>
 					</g>
 				</g>
 			</g>
 		</g>
 		<g id="g8807" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
-        <g clip-path="url(#clipPath8813)" id="g8809">
+			<g>
-          <g transform="translate(572.7 146)" id="g8815">
+				<defs>
-            <path id="path8817" d="M0 0h22.1c.6 0 1.1-.5 1.1-1.1v-12.5c0-.6-.5-1-1-1H0c-.6 0-1.1.4-1.1 1V-1c0 .5.5 1 1.1 1" fill="#393939"/>
+					<rect id="SVGID_3_" x="14.3" y="967.1" width="1822.3" height="1528.7"/>
 				</defs>
 				<clipPath id="SVGID_4_">
 					<use xlink:href="#SVGID_3_"  style="overflow:visible;"/>
 				</clipPath>
 				<g id="g8809" class="st4">
 					<g id="g8815" transform="translate(572.7 146)">
 						<path id="path8817" class="st5" d="M-64.4-29h83.6c2.3,0,4.2-1.9,4.2-4.2v-47.3c0-2.3-1.9-3.8-3.8-3.8h-83.9
 							c-2.3,0-4.2,1.5-4.2,3.8v47.6C-68.5-30.9-66.6-29-64.4-29"/>
 					</g>
 					<g id="g8819" transform="translate(574.4 145.4)">
 						<path id="path8821" class="st6" d="M-59.6-30.7h71.1c1.5,0,3-1.5,3-3v-45.4c0-1.5-1.5-3-3-3h-71.1c-1.5,0-3,1.5-3,3v45.4
 							C-62.7-32.2-61.1-30.7-59.6-30.7"/>
 					</g>
          <g transform="translate(574.4 145.4)" id="g8819">
            <path id="path8821" d="M0 0h18.8c.4 0 .8-.4.8-.8v-12c0-.4-.4-.8-.8-.8H0c-.4 0-.8.4-.8.8v12c0 .4.4.8.8.8" fill="#98b6a7"/>
 				</g>
 			</g>
 		</g>
@ -151,15 +100,29 @@
 			<g id="g8825">
 				<g id="g8831">
 					<g id="g8833">
-              <path id="path8841" d="M569.1 105.6v-6.4c0-.3.3-.6.6-.6h28c.3 0 .6.3.6.6v6.4z" fill="url(#linearGradient8839)"/>
+						
 							<linearGradient id="path8841_1_" gradientUnits="userSpaceOnUse" x1="-608.1827" y1="-894.7903" x2="-607.1827" y2="-894.7903" gradientTransform="matrix(0 -1.7861 7.5145 0 7273.7993 -1143.2354)">
 							<stop  offset="0" style="stop-color:#A9ABA9"/>
 							<stop  offset="1" style="stop-color:#535453"/>
 						</linearGradient>
 						<path id="path8841" class="st7" d="M494.7-35.8V-60c0-1.1,1.1-2.3,2.3-2.3h105.9c1.1,0,2.3,1.1,2.3,2.3v24.2H494.7z"/>
 					</g>
 				</g>
 			</g>
 		</g>
 		<g id="g8843" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
-        <g clip-path="url(#clipPath8849)" id="g8845">
+			<g>
-          <g transform="translate(581.7 109.3)" id="g8851">
+				<defs>
-            <path id="path8853" d="M0 0l-4.2 4.2v.6h-1a2.5 2.5 0 0 0 0 4.9h1v.5L0 14.5h4l4.2-4.2v-.6h1a2.5 2.5 0 0 0 0-5h-1v-.5L4.2 0z" fill="#6a6a6a"/>
+					<rect id="SVGID_5_" x="14.3" y="967.1" width="1822.3" height="1528.7"/>
 				</defs>
 				<clipPath id="SVGID_6_">
 					<use xlink:href="#SVGID_5_"  style="overflow:visible;"/>
 				</clipPath>
 				<g id="g8845" class="st8">
 					<g id="g8851" transform="translate(581.7 109.3)">
 						<path id="path8853" class="st9" d="M-39.3-131.1l-15.9,15.9v2.3H-59c-5.1,1-8.4,6-7.4,11.1c0.8,3.7,3.7,6.6,7.4,7.4h3.8v1.9
 							l15.9,16.3h15.1l15.9-15.9v-2.3h3.8c5.2,0,9.5-4.2,9.5-9.5c0-5.2-4.2-9.5-9.5-9.5h-3.8v-1.9l-15.1-15.9H-39.3z"/>
 					</g>
 				</g>
 			</g>
 		</g>
@ -167,83 +130,147 @@
 			<g id="g8857">
 				<g id="g8863">
 					<g id="g8865">
-              <path id="path8875" d="M581.7 123.8l-4.2-4.2v-.6h-1a2.5 2.5 0 1 1 0-5v.1h1v-.5l4.2-4.3h4.2l4.2 4.3v.5h1a2.5 2.5 0 0 1-.1 4.9h-1v.7l-4.1 4.1z" fill="url(#linearGradient8873)"/>
+						
 							<linearGradient id="path8875_1_" gradientUnits="userSpaceOnUse" x1="-1182.8013" y1="-1084.7936" x2="-1181.8013" y2="-1084.7936" gradientTransform="matrix(0 17.201 -23.0721 0 -24479.207 20326.2344)">
 							<stop  offset="0" style="stop-color:#6A6A6A"/>
 							<stop  offset="0.5" style="stop-color:#48E400"/>
 							<stop  offset="1" style="stop-color:#6A6A6A"/>
 						</linearGradient>
 						<path id="path8875" class="st10" d="M542.4,33l-15.9-15.9v-2.3h-3.8c-5.2,0-9.5-4.2-9.5-9.5s4.2-9.5,9.5-9.5v0.4h3.8v-1.9
 							l15.9-16.3h15.9l15.9,16.3v1.9h3.8c5.1,1.1,8.3,6.2,7.2,11.3c-0.8,3.7-3.8,6.6-7.5,7.2h-3.8v2.6L558.3,33H542.4z"/>
 					</g>
 				</g>
 			</g>
 		</g>
 		<g id="g8877" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
-        <g clip-path="url(#clipPath8883)" id="g8879">
+			<g>
-          <g transform="translate(576.4 118.4)" id="g8885">
+				<defs>
-            <path id="path8887" d="M0 0h3v-3.6H0A1.8 1.8 0 1 0 0 0" fill="#a9aba9"/>
+					<rect id="SVGID_7_" x="14.3" y="967.1" width="1822.3" height="1528.7"/>
 				</defs>
 				<clipPath id="SVGID_8_">
 					<use xlink:href="#SVGID_7_"  style="overflow:visible;"/>
 				</clipPath>
 				<g id="g8879" class="st11">
 					<g id="g8885" transform="translate(576.4 118.4)">
 						<path id="path8887" class="st12" d="M-54.1-105.8h11.3v-13.6h-11.3c-3.8,0-6.8,3-6.8,6.8C-60.9-108.9-57.8-105.8-54.1-105.8"
 							/>
 					</g>
-          <g transform="translate(591 114.8)" id="g8889">
+					<g id="g8889" transform="translate(591 114.8)">
-            <path id="path8891" d="M0 0h-3v3.6h3A1.8 1.8 0 1 0 0 0" fill="#a9aba9"/>
+						<path id="path8891" class="st12" d="M-13.5-115.8h-11.3v13.6h11.3c3.8,0,6.8-3,6.8-6.8C-6.6-112.8-9.7-115.8-13.5-115.8"/>
 					</g>
-          <g transform="translate(582 118.4)" id="g8893">
+					<g id="g8893" transform="translate(582 118.4)">
-            <path id="path8895" d="M0 0h3.6v-3.6H-.1V0H0" fill="#393939"/>
+						<path id="path8895" class="st5" d="M-38.5-105.8h13.6v-13.6h-14v13.6H-38.5"/>
 					</g>
-          <g transform="translate(581.9 123.2)" id="g8897">
+					<g id="g8897" transform="translate(581.9 123.2)">
-            <path id="path8899" d="M0 0h3.8l2.8-2.9L5.5-4v-2H4.3v1c0 .5-.4 1-1 1h-3a.7.7 0 0 1-.8-.8v-1.4h-1V-4l-1.2 1.2z" fill="#a9aba9"/>
+						<path id="path8899" class="st12" d="M-38.8-92.5h14.4l10.6-11l-4.2-4.2v-7.6h-4.5v3.8c0,1.9-1.5,3.8-3.8,3.8h-11.3
 							c-1.4,0.2-2.8-0.8-3-2.2c0-0.3,0-0.5,0-0.8v-5.3h-3.8v8.3L-49-103L-38.8-92.5z"/>
 					</g>
-          <g transform="translate(585.6 110)" id="g8901">
+					<g id="g8901" transform="translate(585.6 110)">
-            <path id="path8903" d="M0 0h-3.8l-2.8 2.9 1.2 1.2v2h1V5c0-.5.5-1 1-1h3.2c.5 0 .8.4.8.8v1.4h1.1V4l1.2-1.2z" fill="#a9aba9"/>
+						<path id="path8903" class="st12" d="M-28.5-129.2h-14.4l-10.6,11l4.5,4.5v7.6h3.8v-4.2c0-1.9,1.9-3.8,3.8-3.8h12.1
 							c1.9,0,3,1.5,3,3v5.3h4.2v-8.3l4.5-4.5L-28.5-129.2z"/>
 					</g>
 					<path id="path8905" class="st5" d="M548.4,61.7h3.4V46.2h-3.4V61.7z"/>
 					<path id="path8907" class="st13" d="M548.4,46.6h3.4v-6.8h-3.4V46.6z"/>
 				</g>
          <path id="path8905" d="M583.3 131.4h.9v-4.1h-.9z" fill="#393939"/>
          <path id="path8907" d="M583.3 127.4h.9v-1.8h-.9z" fill="#9b9b9b"/>
 			</g>
 		</g>
 		<g id="g8909" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
 			<g id="g8911">
 				<g id="g8917">
 					<g id="g8919">
-              <path id="path8927" d="M583.3 125.6h.9v1.8h-.9z" fill="url(#linearGradient8925)"/>
+						
 							<linearGradient id="path8927_1_" gradientUnits="userSpaceOnUse" x1="-2168.2661" y1="-3506.5073" x2="-2167.2661" y2="-3506.5073" gradientTransform="matrix(0 0.8944 -0.4363 0 -979.787 1983.6796)">
 							<stop  offset="0" style="stop-color:#757575"/>
 							<stop  offset="1" style="stop-color:#393939"/>
 						</linearGradient>
 						<path id="path8927" class="st14" d="M548.4,39.8h3.4v6.8h-3.4V39.8z"/>
 					</g>
 				</g>
 			</g>
 		</g>
 		<g id="g8929" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
-        <g clip-path="url(#clipPath8935)" id="g8931">
+			<g>
-          <path id="path8937" d="M583.3 125.6h.9v-1.8h-.9z" fill="#818181"/>
+				<defs>
-          <g transform="translate(571.2 125.6)" id="g8939">
+					<rect id="SVGID_9_" x="14.3" y="967.1" width="1822.3" height="1528.7"/>
-            <path id="path8941" d="M0 0h7v-1.7L5.3-3.5H.6c-.3 0-.6.3-.6.6z" fill="#a9aba9"/>
+				</defs>
 				<clipPath id="SVGID_10_">
 					<use xlink:href="#SVGID_9_"  style="overflow:visible;"/>
 				</clipPath>
 				<g id="g8931" class="st15">
 					<path id="path8937" class="st16" d="M548.4,39.8h3.4V33h-3.4V39.8z"/>
 					<g id="g8939" transform="translate(571.2 125.6)">
 						<path id="path8941" class="st12" d="M-68.5-85.8h26.5v-6.4l-6.4-6.8h-17.8c-1.1,0-2.3,1.1-2.3,2.3V-85.8z"/>
 					</g>
 					<path id="path8943" class="st17" d="M585.1-39.2h13.6v-14h-13.6V-39.2z"/>
 				</g>
          <path id="path8943" d="M593 104.7h3.6V101H593z" fill="#fff"/>
 			</g>
 		</g>
 		<g id="g8945" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
-        <g clip-path="url(#clipPath8951)" id="g8947">
+			<g>
-          <g transform="translate(596.4 103.2)" id="g8953">
+				<defs>
-            <path id="path8955" d="M0 0v-.3C-.3-.8-.4-1-.8-1l-.3.2a.6.6 0 0 0-.5-.2c-.1 0-.2 0-.3.2C-2-1-2.1-1-2.2-1h-.6a.3.3 0 0 0-.3.2l.3 1h.5l.5.2.2-.1h.4c.1.1.3 0 .4 0V.1l.4.2.3-.1L0 0m-3.4-2.1H.2v3.6h-3.6z" fill="#fe0"/>
+					<rect id="SVGID_11_" x="589.5" y="-48.7" width="4.8" height="4.9"/>
 				</defs>
 				<clipPath id="SVGID_12_">
 					<use xlink:href="#SVGID_11_"  style="overflow:visible;"/>
 				</clipPath>
 				<g id="g8947" class="st18">
 					<g id="g8953" transform="translate(596.4 103.2)">
 						<path id="path8955" class="st19" d="M1.6-148.1v-1.1c-1.1-1.9-1.5-2.6-3-2.6l-1.1,0.8c-0.5-0.5-1.2-0.8-1.9-0.8
 							c-0.4,0-0.8,0-1.1,0.8c-0.4-0.8-0.8-0.8-1.1-0.8H-9c-0.5,0-1,0.3-1.1,0.8l1.1,3.8h1.9l1.9,0.8l0.8-0.4H-3c0.4,0.4,1.1,0,1.5,0
 							v-0.8l1.5,0.8l1.1-0.4L1.6-148.1 M-11.3-156H2.3v13.6h-13.6L-11.3-156z"/>
 					</g>
-          <g transform="translate(596.5 103)" id="g8957">
+					<g id="g8957" transform="translate(596.5 103)">
-            <path id="path8959" d="M0 0c0-.2 0-.3-.2-.5 0-.2-.3-.4-.6-.4l-.4.1a.7.7 0 0 0-.4-.1H-2a.7.7 0 0 0-.4 0H-3c-.2 0-.3.1-.4.3 0 .4.2.7.4 1 0 .2.2.2.4.2h2.1L0 .5V0m-3.5-2H.1v3.6h-3.6z" fill="#d52715"/>
+						<path id="path8959" class="st20" d="M1.8-148.6c0-0.8,0-1.1-0.8-1.9c0-0.8-1.1-1.5-2.3-1.5l-1.5,0.4c-0.5-0.3-1-0.4-1.5-0.4
 							h-1.5c-0.5-0.1-1-0.1-1.5,0h-2.3c-0.8,0-1.1,0.4-1.5,1.1c0,1.5,0.8,2.6,1.5,3.8c0,0.8,0.8,0.8,1.5,0.8H0l1.9-0.4V-148.6
 							 M-11.4-156.2H2.2v13.6h-13.6V-156.2z"/>
 					</g>
-          <path id="path8961" d="M596.6 101H593v3.6h3.6zm-3.7 0h3.7v3.7H593z" fill="#171714"/>
+					<path id="path8961" class="st21" d="M598.7-53.2h-13.6v13.6h13.6V-53.2z M584.7-53.2h14v14h-13.6L584.7-53.2z"/>
-          <g transform="translate(596.5 103.7)" id="g8963">
+					<g id="g8963" transform="translate(596.5 103.7)">
-            <path id="path8965" d="M0 0v-.2.2m0 0v-.2.1m0 0zm0 0z" fill="#171714"/>
+						<path id="path8965" class="st21" d="M1.8-146.7v-0.8V-146.7 M1.8-146.7v-0.8v0.4V-146.7z"/>
 					</g>
 					<g id="g8967" transform="translate(596 103.2)">
 						<path id="path8969" class="st21" d="M0.5-148.1c-0.2-0.8-0.4-1.5-0.8-2.3h-0.4c0,0.8,0,1.5,0.8,2.3H0.5 M1.6-148.8l-1.1-1.5
 							c0-0.8-0.8-1.5-1.1-1.5c-0.8,0-1.1,0-1.1,1.1l0.4,1.5c0.4,1.1,0.8,1.9,1.9,1.9s1.1-1.1,1.1-1.9 M-3.3-147.7v-0.4l-1.1-1.9
 							l0.4-0.4l0.8,0.8c0,0.8,0,0.8,0.8,0.8s0.8-0.4,0.4-0.8c0-1.1-0.8-1.9-1.9-1.9c-0.6,0-1.1,0.5-1.1,1.1l0,0l0.8,1.9
 							c0,0.8,0.8,1.5,1.9,1.5c0.8,0,1.1,0,1.1-0.8c0-0.4,0-0.8-0.8-0.8h-0.4v0.8 M-6.4-149.6v-0.8h1.1c0-0.8-0.8-1.1-1.1-1.1
 							c-0.8,0-1.1,0.4-1.1,0.8c0,1.1,0,1.9,0.8,2.6c0,0.8,0.8,1.1,1.5,1.1l0.8-0.4c0-0.8,0-0.8-0.8-0.8h-0.4v-0.4
 							c0.4,0,0.8,0,0.4-0.8L-6.4-149.6 M-8.6-150.4h0.8c0-0.8-0.4-1.1-1.1-1.1c0,0-0.8,0-0.8,0.8l1.1,3.4c0,0,0.4,0.4,0.8,0h0.4
 							C-7.5-148.5-8.2-149.2-8.6-150.4 M0.5-146.6c-0.8,0-1.1,0-1.5-0.8l-1.5,0.8l-1.5-0.4l-1.1,0.4c-0.8,0-1.1,0-1.5-0.8v0.4
 							l-1.1,0.4c-0.4,0-0.8,0-1.1-0.8c-0.4-1.1-1.1-2.3-1.1-3.8c0,0,0.4-0.8,1.1-0.8l1.1,0.4c0.4,0,0.8-0.4,1.5,0h2.3l1.9,0.4
 							l1.5-0.8c1.1,0,1.9,1.1,2.3,2.3v1.5C1.6-147.4,1.1-146.8,0.5-146.6"/>
 					</g>
          <g transform="translate(596 103.2)" id="g8967">
            <path id="path8969" d="M0 0a3 3 0 0 0-.2-.6h-.1c0 .2 0 .4.2.6H0m.3-.2L0-.6C0-.8-.2-1-.3-1c-.2 0-.3 0-.3.3l.1.4c.1.3.2.5.5.5s.3-.3.3-.5M-1 .1V0l-.3-.5.1-.1.2.2c0 .2 0 .2.2.2s.2-.1.1-.2c0-.3-.2-.5-.5-.5a.3.3 0 0 0-.3.3l.2.5c0 .2.2.4.5.4.2 0 .3 0 .3-.2 0-.1 0-.2-.2-.2h-.1v.2m-1-.5v-.2h.3c0-.2-.2-.3-.3-.3-.2 0-.3.1-.3.2 0 .3 0 .5.2.7 0 .2.2.3.4.3l.2-.1c0-.2 0-.2-.2-.2h-.1v-.1c.1 0 .2 0 .1-.2l-.3-.1m-.6-.2h.2c0-.2-.1-.3-.3-.3 0 0-.2 0-.2.2l.3.9s.1.1.2 0h.1c0-.3-.2-.5-.3-.8M0 .4C-.2.4-.3.4-.4.2l-.4.2-.4-.1-.3.1c-.2 0-.3 0-.4-.2v.1l-.3.1c-.1 0-.2 0-.3-.2-.1-.3-.3-.6-.3-1 0 0 .1-.2.3-.2l.3.1c.1 0 .2-.1.4 0h.6l.5.1.4-.2c.3 0 .5.3.6.6V0a.4.4 0 0 1-.3.4" fill="#171714"/>
 				</g>
 			</g>
 		</g>
 		<g id="g8971" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
-        <g clip-path="url(#clipPath8977)" id="g8973">
+			<g>
-          <g transform="translate(578 103)" id="g8979">
+				<defs>
-            <path id="path8981" d="M0 0v-.3h-.6l-.1-.1v-.4H0v-.4h-1l-.2.2h-.3l-.1-.1v-.6H.7V.5h-2.3v-.6h.5V0H0z" fill="#f2f2f2"/>
+					<rect id="SVGID_13_" x="14.3" y="967.1" width="1822.3" height="1528.7"/>
 				</defs>
 				<clipPath id="SVGID_14_">
 					<use xlink:href="#SVGID_13_"  style="overflow:visible;"/>
 				</clipPath>
 				<g id="g8973" class="st22">
 					<g id="g8979" transform="translate(578 103)">
 						<path id="path8981" class="st2" d="M-49.6-148.6v-1.1h-2.3l-0.4-0.4v-1.5h2.6v-1.5h-3.8l-0.8,0.8h-1.1l-0.4-0.4v-2.3h8.7v8.3
 							h-8.7v-2.3h1.9v0.4H-49.6z"/>
 					</g>
-          <g transform="translate(576 103.6)" id="g8983">
+					<g id="g8983" transform="translate(576 103.6)">
-            <path id="path8985" d="M0 0h-.5l-.1-.1-.6-1.3L-2-.1V0h-.5s-.1 0 0-.1l.9-2 .2-.1h.5l1 2L0 0" fill="#f2f2f2"/>
+						<path id="path8985" class="st2" d="M-55.2-147h-1.9l-0.4-0.4l-2.3-4.9l-3,4.9v0.4h-1.9c0,0-0.4,0,0-0.4l3.4-7.6l0.8-0.4h1.9
 							l3.8,7.6L-55.2-147"/>
 					</g>
-          <g transform="translate(573 102.8)" id="g8987">
+					<g id="g8987" transform="translate(573 102.8)">
-            <path id="path8989" d="M0 0h.1v-.4L0-.5h-1.5v-.3H0L.1-1v-.4h-2.2v2l.1.2H.1V.4h-1.6V0z" fill="#f2f2f2"/>
+						<path id="path8989" class="st2" d="M-63.5-149.2h0.4v-1.5l-0.4-0.4h-5.7v-1.1h5.7l0.4-0.8v-1.5h-8.3v7.6l0.4,0.8h7.9v-1.5
 							h-6.1v-1.5H-63.5z"/>
 					</g>
-          <g transform="translate(583.5 136.6)" id="g8991">
+					<g id="g8991" transform="translate(583.5 136.6)">
-            <path id="path8993" d="M0 0l-.8 1.3-1.4-2.9 4-1c-.5.5-.5.7-.9 1.3.5.1 1 .4 1.4.7.8.4 1.5 1 2 1.9a4 4 0 0 1-.6 3.6c-.4 0-.8 0-1.3-.2C3.5 3 3.5 1 0 0" fill="#303030"/>
+						<path id="path8993" class="st23" d="M-34.3-55.2l-3,4.9l-5.3-11l15.1-3.8c-1.9,1.9-1.9,2.6-3.4,4.9c1.9,0.4,3.8,1.5,5.3,2.6
 							c3,1.5,5.7,3.8,7.6,7.2c1.5,4.6,0.6,9.7-2.3,13.6c-1.5,0-3,0-4.9-0.8C-21.1-43.8-21.1-51.4-34.3-55.2"/>
 					</g>
 					<g id="g8995" transform="translate(583.1 141.4)">
 						<path id="path8997" class="st23" d="M-35.4-41.8l3-4.5l5.3,10.6L-41.5-32l2.6-4.9l-4.9-2.6c-3.3-1.6-5.9-4.3-7.6-7.6
 							c-1.5-3.8-0.8-9.1,1.9-12.9c1.5,0,3,0,4.5,0.8C-47.9-53.2-47.9-45.6-35.4-41.8"/>
 					</g>
          <g transform="translate(583.1 141.4)" id="g8995">
            <path id="path8997" d="M0 0l.8-1.2 1.4 2.8-3.8 1 .7-1.3-1.3-.7a4.5 4.5 0 0 1-2-2c-.4-1-.2-2.4.5-3.4.4 0 .8 0 1.2.2C-3.3-3-3.3-1 0 0" fill="#303030"/>
 				</g>
 			</g>
 		</g>
--- a/docs/static/icons/android-chrome-192x192.png
+++ b/docs/static/icons/android-chrome-192x192.png
--- a/docs/static/tutorials/line-following/line-following.gif
+++ b/docs/static/tutorials/line-following/line-following.gif
--- a/docs/static/tutorials/object-near/play-sound-effect-dropdown.png
+++ b/docs/static/tutorials/object-near/play-sound-effect-dropdown.png
--- a/docs/static/tutorials/object-near/ultrasonic-near.gif
+++ b/docs/static/tutorials/object-near/ultrasonic-near.gif
--- a/docs/static/tutorials/redlight-greenlight/redlight-greenlight.gif
+++ b/docs/static/tutorials/redlight-greenlight/redlight-greenlight.gif
--- a/docs/static/tutorials/run-motors/motor-port-dropdown.png
+++ b/docs/static/tutorials/run-motors/motor-port-dropdown.png
--- a/docs/static/tutorials/run-motors/run-motor-dropdown.png
+++ b/docs/static/tutorials/run-motors/run-motor-dropdown.png
--- a/docs/static/tutorials/run-motors/run-motors.gif
+++ b/docs/static/tutorials/run-motors/run-motors.gif
--- a/docs/static/tutorials/security-alert/play-sound-effect-dropdown.png
+++ b/docs/static/tutorials/security-alert/play-sound-effect-dropdown.png
--- a/docs/static/tutorials/security-alert/security-alert.gif
+++ b/docs/static/tutorials/security-alert/security-alert.gif
--- a/docs/static/tutorials/touch-sensor-values/touch-to-stop.gif
+++ b/docs/static/tutorials/touch-sensor-values/touch-to-stop.gif
--- a/docs/static/tutorials/touch-to-run/touch-to-run.gif
+++ b/docs/static/tutorials/touch-to-run/touch-to-run.gif
--- a/docs/static/tutorials/wake-up/show-mood.gif
+++ b/docs/static/tutorials/wake-up/show-mood.gif
--- a/docs/static/tutorials/what-animal-am-i/guess-animal.gif
+++ b/docs/static/tutorials/what-animal-am-i/guess-animal.gif
--- a/docs/static/tutorials/what-animal-am-i/play-sound-effect-dropdown.png
+++ b/docs/static/tutorials/what-animal-am-i/play-sound-effect-dropdown.png
--- a/docs/static/tutorials/what-color/color-detector.gif
+++ b/docs/static/tutorials/what-color/color-detector.gif
--- a/docs/tutorials/line-following.md
+++ b/docs/tutorials/line-following.md
@ -1,6 +1,6 @@
 # Line Following
-## Introduction @fullscreen
+## Introduction @unplugged
 Make a program to follow a line using the Color sensor and reflected light. Let's test reflected light to see if it's white or black (on the line), and drive our robot accordingly. 
--- a/docs/tutorials/make-an-animation.md
+++ b/docs/tutorials/make-an-animation.md
@ -1,6 +1,6 @@
 # Make a custom animation
-## Introduction @fullscreen
+## Introduction @unplugged
 Create a custom animation for your @boardname@.
@ -10,7 +10,7 @@ Create a custom animation for your @boardname@.
 Open the ``||brick:Brick||`` Toolbox drawer. Drag out a ``||brick:show string||`` block onto the Workspace, and drop it into the ``||loops:on Start||`` block. You should hear and see the block click into place.
-```block
+```blocks
 brick.showString("Hello world", 1) 
 ```
--- a/docs/tutorials/music-brick.md
+++ b/docs/tutorials/music-brick.md
@ -1,6 +1,6 @@
 # Music Brick
-## Introduction @fullscreen
+## Introduction @unplugged
 Transform your @boardname@ into a musical instrument!
--- a/docs/tutorials/object-near.md
+++ b/docs/tutorials/object-near.md
@ -1,10 +1,10 @@
 # Object Near?
-## Introduction @fullscreen
+## Introduction @unplugged
 The digital Ultrasonic Sensor generates sound waves and reads their echoes to detect and measure distance from objects in centimeters. Build a program that will detect when an object is nearby.
-![Simualtor with brick and ultrasonic sensor](/static/tutorials/object-near/ultrasonic-near.gif)
+![Simulator with brick and ultrasonic sensor](/static/tutorials/object-near/ultrasonic-near.gif)
 ## Step 1
--- a/docs/tutorials/redlight-greenlight.md
+++ b/docs/tutorials/redlight-greenlight.md
@ -1,6 +1,6 @@
 # Red Light, Green Light
-## Introduction @fullscreen
+## Introduction @unplugged
 Use the ``||sensors:pause color sensor||`` block to play Red Light, Green Light with your @boardname@ robot! 
--- a/docs/tutorials/run-motors.md
+++ b/docs/tutorials/run-motors.md
@ -1,6 +1,6 @@
 # Run motors
-## Introduction @fullscreen
+## Introduction @unplugged
 Use the buttons to start and stop the large and medium motors.
@ -66,8 +66,7 @@ brick.buttonDown.onEvent(ButtonEvent.Pressed, function () {
 ## Step 5
-Now, let’s add a Medium motor, and tell it how many rotations we want it to run for. 
+Now, let’s add a Medium motor, and tell it how many rotations we want it to run for. Open the ``||brick:Brick||`` Toolbox drawer. Drag out **2** ``|brick:on button||`` blocks. In the ``||brick:on button||`` blocks, use the drop-down menu to select the ``left`` and ``right`` buttons.
 Open the ``||brick:Brick||`` Toolbox drawer. Drag out **2** ``|brick:on button||`` blocks. In the ``||brick:on button||`` blocks, use the drop-down menu to select the ``left`` and ``right`` buttons.
 ```blocks
 brick.buttonUp.onEvent(ButtonEvent.Pressed, function () {
@ -105,9 +104,11 @@ brick.buttonRight.onEvent(ButtonEvent.Pressed, function () {
 ## Step 7
-For the ``||motors:run||`` blocks that are in the ``||brick:on button left||`` and ``||brick:on button right||`` blocks, use the drop-down menu to select ``medium motor D``. 
+For the ``||motors:run||`` blocks that are in the ``||brick:on button left||`` and ``||brick:on button right||`` blocks, use the drop-down menu to select a ``medium motor`` on port ``D``. 
-![Select motor on a port dropdown](/static/tutorials/run-motors/run-motor-dropdown.png)
+| | | |
 |-|-|-|
 | ![Select a motor type dropdown](/static/tutorials/run-motors/run-motor-dropdown.png) | | | ![Select a motor port dropdown](/static/tutorials/run-motors/motor-port-dropdown.png) |
 ```blocks
 brick.buttonUp.onEvent(ButtonEvent.Pressed, function () {
@ -203,7 +204,7 @@ brick.buttonEnter.onEvent(ButtonEvent.Pressed, function () {
 })
 ```
-# Step 12
+## Step 12
 Open the ``||motors:Motors||`` Toolbox drawer. Drag out a ``||motors:stop all motors||`` block onto the Workspace, and drop into the ``||brick:on button||`` enter block.
--- a/docs/tutorials/security-alert.md
+++ b/docs/tutorials/security-alert.md
@ -1,6 +1,6 @@
 # Security Alert
-## Introduction @fullscreen
+## Introduction @unplugged
 The Infrared Sensor uses infrared light waves to detect proximity to the robot. Build an security alert using the infrared sensor. 
--- a/docs/tutorials/touch-sensor-values.md
+++ b/docs/tutorials/touch-sensor-values.md
@ -1,6 +1,6 @@
 # Using Touch Sensor Values
-## Introduction @fullscreen
+## Introduction @unplugged
 Use the Touch sensor value to stop a running motor.
--- a/docs/tutorials/touch-to-run.md
+++ b/docs/tutorials/touch-to-run.md
@ -1,6 +1,6 @@
 # Touch to Run
-## Introduction @fullscreen
+## Introduction @unplugged
 Use the Touch sensor to run a motor.
--- a/docs/tutorials/wake-up.md
+++ b/docs/tutorials/wake-up.md
@ -1,6 +1,6 @@
 # Wake Up!
-## Introduction @fullscreen
+## Introduction @unplugged
 Show different moods on your @boardname@.
--- a/docs/tutorials/what-animal-am-i.md
+++ b/docs/tutorials/what-animal-am-i.md
@ -1,6 +1,6 @@
 # What Animal Am I?
-## Introduction @fullscreen
+## Introduction @unplugged
 Create different animal effects with your @boardname@.
@ -10,7 +10,7 @@ Create different animal effects with your @boardname@.
 Open the ``||brick:Brick||`` Toolbox drawer. Drag out a ``||brick:show string||`` block from the **Screen** section onto the Workspace, and drop it into the ``||loops:on start||`` block. You should hear and see the block click into place.
-```block
+```blocks
 brick.showString("Hello world", 1)
 ```
--- a/docs/tutorials/what-color.md
+++ b/docs/tutorials/what-color.md
@ -1,6 +1,6 @@
 # What Color is it?
-## Introduction @fullscreen
+## Introduction @unplugged
 Use the Color sensor to detect different colors.
@ -111,7 +111,7 @@ brick.showString("What color?", 1)
 ## Step 8
-In the ``||music::play sound effect||`` blocks, use the drop-down menu to select the ``colors red``, ``colors green``, and ``colors yellow`` sound effects corresponding to the different colors detected. 
+In the ``||music:play sound effect||`` blocks, use the drop-down menu to select the ``colors red``, ``colors green``, and ``colors yellow`` sound effects corresponding to the different colors detected. 
 ```blocks
 sensors.color3.onColorDetected(ColorSensorColor.Red, function () {
--- a/editor/extension.ts
+++ b/editor/extension.ts
@ -25,18 +25,31 @@ pxt.editor.initExtensionsAsync = function (opts: pxt.editor.ExtensionOptions): P
            const saveAs = pxt.BrowserUtils.hasSaveAs();
            const htmlBody = `
-            <div class="ui two column grid stackable">
+            <div class="ui grid stackable">
                <div class="column five wide" style="background-color: #E2E2E2;">
                    <div class="ui header">${lf("First time here?")}</div>
                    <strong style="font-size:small">${lf("You must have version 1.10 or above of the firmware")}</strong>
                    <div style="justify-content: center;display: flex;padding: 1rem;">
                        <img class="ui image" src="./static/download/firmware.png" style="height:100px;" />
                    </div>
                    <a href="/troubleshoot" target="_blank">${lf("Check your firmware version here and update if needed")}</a>
                </div>
                <div class="column eleven wide">
                    <div class="ui grid">
                        <div class="row">
                            <div class="column">
                                <div class="ui two column grid padded">
                                    <div class="column">
                                        <div class="ui">
                                            <div class="image">
-                            <img class="ui medium rounded image" src="./static/download/connect.svg" style="height:109px;width:261px;margin-bottom:1rem;">
+                                                <img class="ui medium rounded image" src="./static/download/connect.svg" style="height:109px;width:261px;margin-bottom:1rem;" />
                                            </div>
                                            <div class="content">
                                                <div class="description">
                                                    <span class="ui yellow circular label">1</span>
-                                <strong>${lf("Connect EV3 to computer with USB cable")}</strong>
+                                                    <strong>${lf("Connect the EV3 to your computer with a USB cable")}</strong>
                                                    <br />
-                                ${lf("Use the miniUSB port on top of EV3 brick")}
+                                                    <span style="font-size:small">${lf("Use the miniUSB port on the top of the EV3 brick")}</span>
                                                </div>
                                            </div>
                                        </div>
@ -44,23 +57,22 @@ pxt.editor.initExtensionsAsync = function (opts: pxt.editor.ExtensionOptions): P
                                    <div class="column">
                                        <div class="ui">
                                            <div class="image">
-                            <img class="ui medium rounded image" src="./static/download/transfer.svg" style="height:109px;width:261px;margin-bottom:1rem;">
+                                                <img class="ui medium rounded image" src="./static/download/transfer.svg" style="height:109px;width:261px;margin-bottom:1rem;" />
                                            </div>
                                            <div class="content">
                                                <div class="description">
-                                <span class="ui blue circular label">2</span>
+                                                    <span class="ui yellow circular label">2</span>
-                                ${lf("Locate the downloaded .uf2 file and drag it to the EV3 drive")}
+                                                    <strong>${lf("Move the .uf2 file to the EV3 brick")}</strong>
                                                    <br />
                                                    <span style="font-size:small">${lf("Locate the downloaded .uf2 file and drag it to the EV3 USB drive")}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
            <div class="ui one column grid">
                <div class="column">
                    <a href="/troubleshoot" target="_blank" class="ui segment container yellow">
                        <i class="icon exclamation circle large" aria-hidden="true"></i>
                        ${lf("Something wrong? Click here to troubleshoot..")}
                    </a>
                </div>
            </div>`;
@ -71,6 +83,7 @@ pxt.editor.initExtensionsAsync = function (opts: pxt.editor.ExtensionOptions): P
                hideCancel: true,
                hideAgree: false,
                agreeLbl: lf("I got it"),
                className: 'downloaddialog',
                buttons: [downloadAgain ? {
                    label: fn,
                    icon: "download",
--- a/libs/color-sensor/color.ts
+++ b/libs/color-sensor/color.ts
@ -185,7 +185,7 @@ namespace sensors {
         * @param handler the code to run when detected
         */
        //% help=sensors/color-sensor/on-light-detected
-        //% block="on **color sensor** %this|detected %mode|%condition"
+        //% block="on **color sensor** %this|%mode|%condition"
        //% blockId=colorOnLightDetected
        //% parts="colorsensor"
        //% blockNamespace=sensors
@ -202,7 +202,7 @@ namespace sensors {
         * @param color the color to detect
         */
        //% help=sensors/color-sensor/pause-until-light-detected
-        //% block="pause until **color sensor** %this|detected %mode|%condition"
+        //% block="pause until **color sensor** %this|%mode|%condition"
        //% blockId=colorPauseUntilLightDetected
        //% parts="colorsensor"
        //% blockNamespace=sensors
--- a/package-lock.json
+++ b/package-lock.json
@ -1,25 +1,25 @@
 {
  "name": "pxt-ev3",
-  "version": "0.1.35",
+  "version": "0.1.49",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
    "@types/bluebird": {
      "version": "2.0.33",
      "resolved": "https://registry.npmjs.org/@types/bluebird/-/bluebird-2.0.33.tgz",
-      "integrity": "sha512-iq7ss0qO31YCYeLEPrBoVMDLw1dBotOS7394a+Dj2CSvQNjQfJvryVo9es5ghvQZmIqO7Q0tlCe9YpwTZKOoXg==",
+      "integrity": "sha1-J3wmM9z1qAgDvXGHEMK4VyWWYoU=",
      "dev": true
    },
    "@types/marked": {
      "version": "0.3.0",
      "resolved": "https://registry.npmjs.org/@types/marked/-/marked-0.3.0.tgz",
-      "integrity": "sha512-CSf9YWJdX1DkTNu9zcNtdCcn6hkRtB5ILjbhRId4ZOQqx30fXmdecuaXhugQL6eyrhuXtaHJ7PHI+Vm7k9ZJjg==",
+      "integrity": "sha1-WDwiPdMzhaHdoBqvd7DNBBHEtSQ=",
      "dev": true
    },
    "@types/node": {
      "version": "8.0.53",
      "resolved": "https://registry.npmjs.org/@types/node/-/node-8.0.53.tgz",
-      "integrity": "sha512-54Dm6NwYeiSQmRB1BLXKr5GELi0wFapR1npi8bnZhEcu84d/yQKqnwwXQ56hZ0RUbTG6L5nqDZaN3dgByQXQRQ==",
+      "integrity": "sha1-OWs1r4JvpmqtRyyMt7jV4nf05tg=",
      "dev": true
    },
    "JSONStream": {
@ -34,7 +34,7 @@
    "abbrev": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
-      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
+      "integrity": "sha1-+PLIh60Qv2f2NPAFtph/7TF5qsg=",
      "dev": true
    },
    "acorn": {
@ -361,7 +361,7 @@
    "aproba": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
-      "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw=="
+      "integrity": "sha1-aALmJk79GMeQobDVF/DyYnvyyUo="
    },
    "are-we-there-yet": {
      "version": "1.1.4",
@ -499,7 +499,7 @@
    "base64-js": {
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.2.1.tgz",
-      "integrity": "sha512-dwVUVIXsBZXwTuwnXI9RK8sBmgq09NDHzyR9SAph9eqk76gKK2JSQmZARC2zRC81JC2QTtxD0ARU5qTS25gIGw=="
+      "integrity": "sha1-qRlH2h9KUW6jjltOwOw3c2deCIY="
    },
    "bcrypt-pbkdf": {
      "version": "1.0.1",
@ -763,7 +763,7 @@
    "bufferstreams": {
      "version": "1.1.3",
      "resolved": "https://registry.npmjs.org/bufferstreams/-/bufferstreams-1.1.3.tgz",
-      "integrity": "sha512-HaJnVuslRF4g2kSDeyl++AaVizoitCpL9PglzCYwy0uHHyvWerfvEb8jWmYbF1z4kiVFolGomnxSGl+GUQp2jg==",
+      "integrity": "sha1-qFFawCT6kOj6fVjBGxPeofKKvnI=",
      "dev": true,
      "requires": {
        "readable-stream": "2.3.3"
@ -864,7 +864,7 @@
    "cipher-base": {
      "version": "1.0.4",
      "resolved": "https://registry.npmjs.org/cipher-base/-/cipher-base-1.0.4.tgz",
-      "integrity": "sha512-Kkht5ye6ZGmwv40uUDZztayT2ThLQGfnj/T71N/XzeZeo3nf8foyW7zGTsPYkEya3m5f3cAypH+qe7YOrM1U2Q==",
+      "integrity": "sha1-h2Dk7MJy9MNjUy+SbYdKriwTl94=",
      "requires": {
        "inherits": "2.0.3",
        "safe-buffer": "5.1.1"
@ -873,7 +873,7 @@
    "clap": {
      "version": "1.2.3",
      "resolved": "https://registry.npmjs.org/clap/-/clap-1.2.3.tgz",
-      "integrity": "sha512-4CoL/A3hf90V3VIEjeuhSvlGFEHKzOz+Wfc2IVZc+FaUgU0ZQafJTP49fvnULipOPcAfqhyI2duwQyns6xqjYA==",
+      "integrity": "sha1-TzZ0WzIAhJJVf0ZBLWbVDLmbzlE=",
      "requires": {
        "chalk": "1.1.3"
      }
@ -1544,7 +1544,7 @@
    "glob": {
      "version": "7.1.2",
      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
-      "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
+      "integrity": "sha1-wZyd+aAocC1nhhI4SmVSQExjbRU=",
      "requires": {
        "fs.realpath": "1.0.0",
        "inflight": "1.0.6",
@ -1654,7 +1654,7 @@
    "hash.js": {
      "version": "1.1.3",
      "resolved": "https://registry.npmjs.org/hash.js/-/hash.js-1.1.3.tgz",
-      "integrity": "sha512-/UETyP0W22QILqS+6HowevwhEFJ3MBJnwTf75Qob9Wz9t0DPuisL8kW8YZMK62dHAKE1c1p+gY1TtOLY+USEHA==",
+      "integrity": "sha1-NA3tvmKQGHFRweodd3o0SJNd+EY=",
      "requires": {
        "inherits": "2.0.3",
        "minimalistic-assert": "1.0.0"
@ -2277,6 +2277,11 @@
        "object-visit": "1.0.1"
      }
    },
    "marked": {
      "version": "0.3.19",
      "resolved": "https://registry.npmjs.org/marked/-/marked-0.3.19.tgz",
      "integrity": "sha512-ea2eGWOqNxPcXv8dyERdSr/6FmzvWwzjMxpfGB/sbMccXoct+xY+YukPD+QTUZwyvK7BZwcr4m21WBOW41pAkg=="
    },
    "math-expression-evaluator": {
      "version": "1.2.17",
      "resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz",
@ -2349,7 +2354,7 @@
    "minimatch": {
      "version": "3.0.4",
      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
-      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+      "integrity": "sha1-UWbihkV/AzBgZL5Ul+jbsMPTIIM=",
      "requires": {
        "brace-expansion": "1.1.8"
      }
@ -2541,7 +2546,7 @@
    "npmlog": {
      "version": "4.1.2",
      "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
-      "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
+      "integrity": "sha1-CKfyqL9zRgR3mp76StXMcXq7lUs=",
      "requires": {
        "are-we-there-yet": "1.1.4",
        "console-control-strings": "1.1.0",
@ -3279,19 +3284,17 @@
      "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4="
    },
    "pxt-common-packages": {
-      "version": "0.22.1",
+      "version": "0.22.2",
-      "resolved": "https://registry.npmjs.org/pxt-common-packages/-/pxt-common-packages-0.22.1.tgz",
+      "resolved": "https://registry.npmjs.org/pxt-common-packages/-/pxt-common-packages-0.22.2.tgz",
-      "integrity": "sha512-GdqA/7tk1OQbkeMeCiPG4oRocV7lMb9HCya6gp5RuCPLKNpbLaCDHyLsXQGR8sXJOoFqrLjUWaQILbMKhCGNMQ==",
+      "integrity": "sha512-bndrU1Aqig0O504QuaQYICrSQfQF7QFBoOArl0hdY7NWfq2yNJu8CHoW2oKJm+r+LTz150D4XuHjCIGLEv2MBQ==",
      "requires": {
-        "autoprefixer": "6.7.7",
+        "pxt-core": "3.12.18"
        "pxt-core": "3.12.12",
        "rtlcss": "2.2.1"
      }
    },
    "pxt-core": {
-      "version": "3.12.12",
+      "version": "3.12.18",
-      "resolved": "https://registry.npmjs.org/pxt-core/-/pxt-core-3.12.12.tgz",
+      "resolved": "https://registry.npmjs.org/pxt-core/-/pxt-core-3.12.18.tgz",
-      "integrity": "sha512-o/u+Qxt2Xuid8f6f2KHDYnJ7qcxOvcbiUqxoOMFZrQkgnME7Pekly+mQPn2w1kjpO9M84BX70Mi9ld8dY/nLRg==",
+      "integrity": "sha512-Dd1XHjMjSR6gqf8B2LB7mtppD+VI49wckd/jCK8dHZcjb7RbngqTnfjOuHcDbXfSrvDrGFNzBhYvYaLf70AV7g==",
      "requires": {
        "bluebird": "3.5.1",
        "browserify": "16.2.0",
@ -3300,6 +3303,7 @@
        "keytar": "4.2.1",
        "less": "2.7.3",
        "lzma": "2.3.2",
        "marked": "0.3.19",
        "node-hid": "0.5.7",
        "pngjs": "3.3.2",
        "postcss": "6.0.21",
@ -3468,7 +3472,7 @@
    "readable-stream": {
      "version": "2.3.3",
      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.3.tgz",
-      "integrity": "sha512-m+qzzcn7KUxEmd1gMbchF+Y2eIUbieUaxkWtptyHywrX0rE8QEYqPC07Vuy4Wm32/xE16NcdBctb8S0Xe/5IeQ==",
+      "integrity": "sha1-No8lEtefnUb9/HE0mueHi7weuVw=",
      "requires": {
        "core-util-is": "1.0.2",
        "inherits": "2.0.3",
@ -3482,7 +3486,7 @@
        "string_decoder": {
          "version": "1.0.3",
          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
-          "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
+          "integrity": "sha1-D8Z9fBQYJd6UKC3VNr7GubzoYKs=",
          "requires": {
            "safe-buffer": "5.1.1"
          }
@ -3727,12 +3731,12 @@
    "safe-buffer": {
      "version": "5.1.1",
      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz",
-      "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg=="
+      "integrity": "sha1-iTMSr2myEj3vcfV4iQAWce6yyFM="
    },
    "sax": {
      "version": "1.2.4",
      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
-      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
+      "integrity": "sha1-KBYjTiN4vdxOU1T6tcqold9xANk="
    },
    "semantic-ui-less": {
      "version": "2.2.14",
@ -4044,7 +4048,7 @@
    "stream-http": {
      "version": "2.7.2",
      "resolved": "https://registry.npmjs.org/stream-http/-/stream-http-2.7.2.tgz",
-      "integrity": "sha512-c0yTD2rbQzXtSsFSVhtpvY/vS6u066PcXOX9kBB3mSO76RiUQzL340uJkGBWnlBg4/HZzqiUXtaVA7wcRcJgEw==",
+      "integrity": "sha1-QKBQ7I3DtTsz2ZCUFcAsC/Gr+60=",
      "requires": {
        "builtin-status-codes": "3.0.0",
        "inherits": "2.0.3",
@ -4195,7 +4199,7 @@
        "commander": {
          "version": "2.12.2",
          "resolved": "https://registry.npmjs.org/commander/-/commander-2.12.2.tgz",
-          "integrity": "sha512-BFnaq5ZOGcDN7FlrtBT4xxkgIToalIIxwjxLWVJ8bGTpe1LroqMiqQXdA7ygc7CRvaYS+9zfPGFnJqFSayx+AA==",
+          "integrity": "sha1-D1lGxCftnsDZGka7ne9T5UZQ5VU=",
          "dev": true
        }
      }
@ -4355,7 +4359,7 @@
        "pako": {
          "version": "1.0.6",
          "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.6.tgz",
-          "integrity": "sha512-lQe48YPsMJAig+yngZ87Lus+NF+3mtu7DVOBu6b/gHO1YpKwIj5AWjZ/TOS7i46HD/UixzWb1zeWDZfGZ3iYcg==",
+          "integrity": "sha1-AQEhG6pwxLykoPY/Igbpe3368lg=",
          "dev": true
        }
      }
@ -4510,7 +4514,7 @@
    "uuid": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.1.0.tgz",
-      "integrity": "sha512-DIWtzUkw04M4k3bf1IcpS2tngXEL26YUD2M0tMDUpnUrz2hgzUBlD55a4FjdLGPvfHxS6uluGWvaVEqgBcVa+g=="
+      "integrity": "sha1-PdPT55Crwk17DToDT/q6vijrvAQ="
    },
    "varstream": {
      "version": "0.3.2",
@ -4606,7 +4610,7 @@
    "which": {
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/which/-/which-1.3.0.tgz",
-      "integrity": "sha512-xcJpopdamTuY5duC/KnTTNBraPK54YwpenP4lzxU8H91GudWpFv38u0CKjclE1Wi2EH2EDz5LRcHcKbCIzqGyg==",
+      "integrity": "sha1-/wS9/AEO5UfXgL7DjhrBwnd9JTo=",
      "dev": true,
      "requires": {
        "isexe": "2.0.0"
@ -4615,7 +4619,7 @@
    "wide-align": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.2.tgz",
-      "integrity": "sha512-ijDLlyQ7s6x1JgCLur53osjm/UXUYD9+0PbYKrBsYisYXzCxN+HC3mYDNy/dWdmf3AwqwU3CXwDCvsNgGK1S0w==",
+      "integrity": "sha1-Vx4PGwYEY268DfwhsDObvjE0FxA=",
      "requires": {
        "string-width": "1.0.2"
      }
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "pxt-ev3",
-  "version": "0.1.35",
+  "version": "0.1.49",
  "description": "LEGO MINDSTORMS EV3 for Microsoft MakeCode",
  "private": true,
  "keywords": [
@ -30,8 +30,6 @@
    "docs/*/*.md",
    "docs/*/*/*.md"
  ],
  "main": "built/pxtrequire.js",
  "typings": "built/pxtrequire.d.ts",
  "devDependencies": {
    "typescript": "2.6.1",
    "semantic-ui-less": "2.2.14",
@ -41,8 +39,8 @@
    "webfonts-generator": "^0.4.0"
  },
  "dependencies": {
-    "pxt-common-packages": "0.22.1",
+    "pxt-common-packages": "0.22.7",
-    "pxt-core": "3.12.12"
+    "pxt-core": "3.12.26"
  },
  "scripts": {
    "test": "node node_modules/pxt-core/built/pxt.js travis"
--- a/pxtarget.json
+++ b/pxtarget.json
@ -81,7 +81,6 @@
        "accentColor": "#0089BF",
        "logoUrl": "https://education.lego.com/",
        "logo": "./static/lego_education_logo.png",
        "highContrastLogo": "./static/lego_education_logo_white.png",
        "docsLogo": "./static/lego-logo.svg",
        "portraitLogo": "./static/lego-logo.svg",
        "footerLogo": "./static/lego-logo.svg",
@ -96,7 +95,6 @@
        "privacyUrl": "https://go.microsoft.com/fwlink/?LinkId=521839",
        "termsOfUseUrl": "https://go.microsoft.com/fwlink/?LinkID=206977",
        "githubUrl": "https://github.com/Microsoft/pxt-ev3",
        "betaUrl": "https://makecode.legoeducation.com/about",
        "driveDisplayName": "EV3",
        "boardName": "LEGO® MINDSTORMS® Education EV3",
        "selectLanguage": true,
@ -110,8 +108,8 @@
                "path": "http://service.lego.com"
            },
            {
-                "name": "Upgrade Firmware",
+                "name": "Troubleshoot",
-                "path": "https://ev3manager.education.lego.com/"
+                "path": "/troubleshoot"
            },
            {
                "name": "Blocks",
--- a/sim/state/motornode.ts
+++ b/sim/state/motornode.ts
@ -17,7 +17,8 @@ namespace pxsim {
        private speedCmdTime: number;
        private _synchedMotor: MotorNode; // non-null if synchronized
-        private manualSpeed: number = undefined;
+        private manualReferenceAngle: number = undefined;
        private manualAngle: number = undefined;
        constructor(port: number, large: boolean) {
            super(port);
@ -103,14 +104,18 @@ namespace pxsim {
        }
        manualMotorDown() {
            this.manualReferenceAngle = this.angle;
            this.manualAngle = 0;
        }
-        manualMotorMove(speed: number) {
+        // position: 0, 360
-            this.manualSpeed = speed;
+        manualMotorAngle(angle: number) {
            this.manualAngle = angle;
        }
        manualMotorUp() {
-            this.manualSpeed = undefined;
+            delete this.manualReferenceAngle;
            delete this.manualAngle;
        }
        updateState(elapsed: number) {
@ -126,7 +131,7 @@ namespace pxsim {
        }
        private updateStateStep(elapsed: number) {
-            if (!this.manualSpeed) {
+            if (this.manualAngle === undefined) {
                // compute new speed
                switch (this.speedCmd) {
                    case DAL.opOutputSpeed:
@ -202,7 +207,11 @@ namespace pxsim {
                }
            }
            else {
-                this.speed = this.manualSpeed;
+                // the user is holding the handle - so position is the angle
                this.speed = 0;
                // rotate by the desired angle change
                this.angle = this.manualReferenceAngle + this.manualAngle;
                this.setChangedState();
            }
            this.speed = Math.round(this.speed); // integer only
@ -217,7 +226,8 @@ namespace pxsim {
            // if the motor was stopped or there are no speed commands,
            // let it coast to speed 0
-            if (this.speed && !(this.started || this.speedCmd)) {
+            if ((this.manualReferenceAngle === undefined)
                && this.speed && !(this.started || this.speedCmd)) {
                // decay speed 5% per tick
                this.speed = Math.round(Math.max(0, Math.abs(this.speed) - 10) * sign(this.speed));
            }
--- a/sim/visuals/board.ts
+++ b/sim/visuals/board.ts
@ -101,10 +101,13 @@ namespace pxsim.visuals {
    export const SCREEN_HEIGHT = 128;
    export interface IBoardTheme {
        accent?: string;
        highContrast?: boolean;
        display?: string;
        buttonOuter?: string;
        buttonUps: string[];
        buttonDown?: string;
        wireColor?: string;
        backgroundViewColor?: string;
    }
    export var themes: IBoardTheme[] = ["#3ADCFE"].map(accent => {
@ -112,12 +115,21 @@ namespace pxsim.visuals {
            accent: accent,
            buttonOuter: "#979797",
            buttonUps: ["#a8aaa8", "#393939", "#a8aaa8", "#a8aaa8", "#a8aaa8", '#a8aaa8'],
-            buttonDown: "#000"
+            buttonDown: "#000",
            wireColor: '#5A5A5A',
            backgroundViewColor: '#d6edff'
        }
    });
    export function randomTheme(highContrast?: boolean, light?: boolean): IBoardTheme {
-        return themes[Math.floor(Math.random() * themes.length)];
+        let theme = themes[Math.floor(Math.random() * themes.length)];
        if (highContrast) {
            theme = JSON.parse(JSON.stringify(theme)) as IBoardTheme;
            theme.highContrast = true;
            theme.wireColor = '#ffffff';
            theme.backgroundViewColor = '#ffffff';
        }
        return theme;
    }
    export interface IBoardProps {
@ -334,7 +346,7 @@ namespace pxsim.visuals {
            this.style.textContent = EV3_STYLE;
            this.layoutView = new LayoutView();
-            this.layoutView.inject(this.element);
+            this.layoutView.inject(this.element, this.props.theme);
            const brick = new BrickViewPortrait(-1);
            this.layoutView.setBrick(brick);
--- a/sim/visuals/controls/backgroundView.ts
+++ b/sim/visuals/controls/backgroundView.ts
@ -13,7 +13,7 @@ namespace pxsim.visuals {
                    'x': 0, 'y': 0,
                    'width': '100%',
                    'height': '100%',
-                    'style': `fill: #d6edff; stroke: #A8A9A8; stroke-width: 3px; stroke-opacity: 0.2`
+                    'style': `fill: ${this.theme.backgroundViewColor};stroke: #A8A9A8; stroke-width: 3px; stroke-opacity: 0.2`
                }) as SVGRectElement;
            return this.backgroundGroup;
        }
--- a/sim/visuals/controls/colorGrid.ts
+++ b/sim/visuals/controls/colorGrid.ts
@ -8,6 +8,8 @@ namespace pxsim.visuals {
        private static colorIds = ['red', 'yellow', 'blue', 'green', 'black', 'grey', 'white'];
        private static colorValue = [5, 4, 2, 3, 1, 7, 6];
        private colorDivs: Element[] = [];
        getInnerView() {
            this.group = svg.elt("g") as SVGGElement;
            this.group.setAttribute("transform", `translate(2, 2.5) scale(0.6)`)
@ -23,6 +25,7 @@ namespace pxsim.visuals {
                    const circle = pxsim.svg.child(this.group, "circle", { 
                        'class': `sim-color-grid-circle sim-color-grid-${colorIds[c]}`,
                        'cx': cx, 'cy': cy, 'r': '2', 'style': `fill: ${colors[c]}` });
                    this.colorDivs.push(circle);
                    pointerEvents.down.forEach(evid => circle.addEventListener(evid, ev => {
                        this.setColor(ColorGridControl.colorValue[c]);
                    }));
@ -30,7 +33,8 @@ namespace pxsim.visuals {
            }
            const whiteCircleWrapper = pxsim.svg.child(this.group, "g", { 'id': 'white-cirlce-wrapper' });
-            pxsim.svg.child(whiteCircleWrapper, "circle", { 'class': 'sim-color-grid-circle sim-color-grid-white', 'cx': 2.2, 'cy': '16', 'r': '2', 'style': `fill: #fff` });
+            const circle = pxsim.svg.child(whiteCircleWrapper, "circle", { 'class': 'sim-color-grid-circle sim-color-grid-white', 'cx': 2.2, 'cy': '16', 'r': '2', 'style': `fill: #fff` });
            this.colorDivs.push(circle);
            pxsim.svg.child(whiteCircleWrapper, "circle", { 'cx': 2.2, 'cy': '16', 'r': '2', 'style': `fill: none;stroke: #94989b;stroke-width: 0.1px` });
            pointerEvents.down.forEach(evid => whiteCircleWrapper.addEventListener(evid, ev => {
                this.setColor(6);
@ -56,7 +60,7 @@ namespace pxsim.visuals {
            for (let c = 0; c < ColorGridControl.colorValue.length; c++) {
                const colorId = ColorGridControl.colorIds[c];
                const colorValue = ColorGridControl.colorValue[c];
-                const colorDiv = this.group.getElementsByClassName(`sim-color-grid-${colorId}`)[0] as HTMLElement;
+                const colorDiv = this.colorDivs[c] as HTMLElement;
                if (colorValue == color) {
                    pxsim.U.addClass(colorDiv, 'sim-color-selected');
--- a/sim/visuals/controls/motorSlider.ts
+++ b/sim/visuals/controls/motorSlider.ts
@ -13,7 +13,7 @@ namespace pxsim.visuals {
        private static SLIDER_RADIUS = 100;
-        private internalSpeed: number = 0;
+        private internalAngle: number = 0;
        getInnerView(parent: SVGSVGElement, globalDefs: SVGDefsElement) {
            this.group = svg.elt("g") as SVGGElement;
@ -102,9 +102,9 @@ namespace pxsim.visuals {
            } else if (dx >= 0 && dy <= 0) {
                deg = 90 - deg;
            }
-            const value = Math.abs(Math.ceil((deg % 360) / 360 * this.getMax()));
+            const value = Math.abs(Math.ceil((deg % 360)));
-            this.internalSpeed = value;
+            this.internalAngle = value;
            this.updateDial();
            this.prevVal = deg;
@ -119,7 +119,7 @@ namespace pxsim.visuals {
        private handleSliderMove() {
            this.dial.setAttribute('cursor', '-webkit-grabbing');
            const state = this.state;
-            state.manualMotorMove(this.internalSpeed);
+            state.manualMotorAngle(this.internalAngle);
        }
        private handleSliderUp() {
@ -127,19 +127,18 @@ namespace pxsim.visuals {
            const state = this.state;
            state.manualMotorUp();
-            this.internalSpeed = 0;
+            this.internalAngle = 0;
            this.updateDial();
        }
        private updateDial() {
-            let speed = this.internalSpeed;
+            let angle = this.internalAngle;
            // Update dial position
            const deg = speed / this.getMax() * 360; // degrees
            const radius = MotorSliderControl.SLIDER_RADIUS;
            const dialRadius = 5;
-            const x = Math.ceil((radius - dialRadius) * Math.sin(deg * Math.PI / 180)) + radius;
+            const x = Math.ceil((radius - dialRadius) * Math.sin(angle * Math.PI / 180)) + radius;
-            const y = Math.ceil((radius - dialRadius) * -Math.cos(deg * Math.PI / 180)) + radius;
+            const y = Math.ceil((radius - dialRadius) * -Math.cos(angle * Math.PI / 180)) + radius;
            this.dial.setAttribute('transform', `translate(${x}, ${y})`);
        }
@ -148,18 +147,10 @@ namespace pxsim.visuals {
                return;
            }
            const node = this.state;
-            const speed = node.getSpeed();
+            const angle = node.getAngle() % 360;
            // Update reporter
-            this.reporter.textContent = `${speed}`;
+            this.reporter.textContent = `${angle}°`;
        }
        private getMin() {
            return 0;
        }
        private getMax() {
            return 100;
        }
    }
--- a/sim/visuals/layoutView.ts
+++ b/sim/visuals/layoutView.ts
@ -12,6 +12,7 @@ namespace pxsim.visuals {
    export const MODULE_INNER_PADDING_RATIO = 1 / 35;
    export const MAX_MODULE_WIDTH = 100;
    export const MIN_MODULE_HEIGHT = 40;
    export const CLOSE_ICON_GAP_MULTIPLIER = 0.3;
@ -78,8 +79,8 @@ namespace pxsim.visuals {
        public setBrick(brick: BrickView) {
            this.brick = brick;
-            this.brick.inject(this.scrollGroup);
+            this.brick.inject(this.scrollGroup, this.theme);
-            this.brickLandscape.inject(this.scrollGroup);
+            this.brickLandscape.inject(this.scrollGroup, this.theme);
            this.brick.setSelected(false);
            this.brickLandscape.setSelected(true);
            this.brickLandscape.setVisible(false);
@ -211,16 +212,16 @@ namespace pxsim.visuals {
            // Inject all wires
            for (let port = 0; port < DAL.NUM_OUTPUTS; port++) {
-                this.outputWires[port].inject(this.scrollGroup);
+                this.outputWires[port].inject(this.scrollGroup, this.theme);
            }
            for (let port = 0; port < DAL.NUM_INPUTS; port++) {
-                this.inputWires[port].inject(this.scrollGroup);
+                this.inputWires[port].inject(this.scrollGroup, this.theme);
            }
            // Inject all view containers
            for (let i = 0; i < 4; i++) {
-                this.inputContainers[i].inject(this.scrollGroup);
+                this.inputContainers[i].inject(this.scrollGroup, this.theme);
-                this.outputContainers[i].inject(this.scrollGroup);
+                this.outputContainers[i].inject(this.scrollGroup, this.theme);
            }
            // Inject all ports
@ -252,6 +253,12 @@ namespace pxsim.visuals {
        }
        public updateTheme(theme: IBoardTheme) {
            this.inputWires.forEach(n => {
                n.updateTheme(theme);
            })
            this.outputWires.forEach(n => {
                n.updateTheme(theme);
            })
            this.inputs.forEach(n => {
                n.updateTheme(theme);
            })
@ -372,7 +379,7 @@ namespace pxsim.visuals {
                    // Translate and resize view
                    view.resize(inputWidth - inputPadding * 2, inputHeight);
-                    const viewHeight = view.getActualHeight();
+                    const viewHeight = Math.max(view.getActualHeight(), MIN_MODULE_HEIGHT);
                    view.translate(inputPadding, 0, true);
                    // Resize control
--- a/sim/visuals/nodes/colorSensorView.ts
+++ b/sim/visuals/nodes/colorSensorView.ts
@ -36,7 +36,10 @@ namespace pxsim.visuals {
        private updateSensorLightVisual(color: string) {
            const sensorHole = this.content.getElementById(this.normalizeId(ColorSensorView.sensor_hole_id)) as SVGCircleElement;
-            sensorHole.style.fill = color;
+            sensorHole.style.stroke = color;
            if (color != '#ffffff') {
                sensorHole.style.strokeWidth = '2px';
            }
        }
    }
 }
--- a/sim/visuals/view.ts
+++ b/sim/visuals/view.ts
@ -19,8 +19,9 @@ namespace pxsim.visuals {
        public abstract getInnerWidth(): number;
        public abstract getInnerHeight(): number;
-        public inject(parent: SVGElement, width?: number, visible = true) {
+        public inject(parent: SVGElement, theme: IBoardTheme, width?: number, visible = true) {
            this.width = width;
            this.theme = theme;
            parent.appendChild(this.getView());
            if (visible) {
@ -276,7 +277,7 @@ namespace pxsim.visuals {
        }
        public addView(view: View) {
-            view.inject(this.element);
+            view.inject(this.element, this.theme);
        }
        public clear() {
--- a/sim/visuals/wireView.ts
+++ b/sim/visuals/wireView.ts
@ -41,6 +41,11 @@ namespace pxsim.visuals {
            return this.wire;
        }
        public updateThemeCore() {
            let theme = this.theme;
            this.path.setAttribute('stroke', theme.wireColor);
        }
        updatePath() {
            if (!this.hasDimensions) return;
            const height = this.endY - this.startY;
--- a/targetconfig.json
+++ b/targetconfig.json
@ -15,6 +15,6 @@
        "Maker": "maker"
    },
    "electronManifest": {
-        "latest": "v0.1.30"
+        "latest": "v0.1.43"
    }
 }
--- a/theme/style.less
+++ b/theme/style.less
@ -111,9 +111,11 @@
 }
 /* Editor download dialog */
-.ui.button.troubleshoot {
+.ui.downloaddialog.modal>.content {
-    background: none !important;
+    padding: 1rem;
-    color: @blue;
+}
 .ui.downloaddialog.modal>.actions {
    background-color: #FAFAFA;
 }
 /* Tutorial */
@ -155,22 +157,6 @@
    }
 }
 /** high contrast **/
 .hc {
    .ui.menu, #downloadArea,
    .menubar .ui.menu.fixed .ui.item.editor-menuitem .item.active {
        background-color: black !important;
        color: white !important;
    }
    .ui.red.corner.label {
        border-color: #d4000d!important;
    }
    .menubar .ui.menu.fixed .item.editor-menuitem .ui.grid {
        border-color: white !important;
    }
 }
 /*******************************
     Custom icons
 *******************************/
Author	SHA1	Message	Date
Sam El-Husseini	90204ce58f	0.1.49	2018-05-07 15:07:28 -07:00
Sam El-Husseini	d8c4eeeb13	bump pxt-core to 3.12.26,	2018-05-07 15:07:22 -07:00
Sam El-Husseini	df6249931d	Update download dialog (#589 )	2018-05-07 14:59:29 -07:00
Sam El-Husseini	de61919fc1	Don't use ```block in tutorials. (#588 )	2018-05-07 13:20:10 -07:00
Peli de Halleux	105da90f3f	Merge branch 'master' of https://github.com/microsoft/pxt-ev3	2018-05-07 13:03:26 -07:00
Peli de Halleux	023fc8fe96	typo	2018-05-07 13:03:20 -07:00
Sam El-Husseini	442b014233	Release beta (#587 )	2018-05-07 12:57:46 -07:00
Peli de Halleux	54681668ad	0.1.48	2018-05-07 12:35:51 -07:00
Peli de Halleux	db1724b9fa	moving to .24	2018-05-07 12:29:30 -07:00
Sam El-Husseini	7ed5a9bca6	0.1.47	2018-05-07 11:25:04 -07:00
Sam El-Husseini	7de61c7254	Remove beta (#586 )	2018-05-07 11:24:45 -07:00
Sam El-Husseini	df99f18c8d	0.1.46	2018-05-07 11:07:12 -07:00
Sam El-Husseini	6d7bd63c3a	bump pxt-core to 3.12.23,	2018-05-07 11:07:06 -07:00
Guillaume Jenkins	9d1f39981d	Release electron 0.1.43	2018-05-07 10:01:47 -04:00
Peli de Halleux	e4e87c427d	0.1.45	2018-05-05 07:45:59 -07:00
Peli de Halleux	1fece05e5e	bump pxt	2018-05-05 07:37:24 -07:00
Galen Nickel	186c7e2e3f	Small tutorial fixes and FE image updates (#585 )	2018-05-04 18:43:29 -07:00
Galen Nickel	3322119f35	Unplug tutorial intros from step path (#584 )	2018-05-04 16:23:53 -07:00
Sam El-Husseini	515be621a0	0.1.44	2018-05-04 15:54:10 -07:00
Sam El-Husseini	b337f4cf1c	bump pxt-core to 3.12.21,	2018-05-04 15:54:04 -07:00
Sam El-Husseini	e6e6016bc0	0.1.43	2018-05-04 10:37:55 -07:00
Sam El-Husseini	3f23f5afa8	bump pxt-core to 3.12.19, bump pxt-common-packages to 0.22.7,	2018-05-04 10:37:48 -07:00
Sam El-Husseini	f0df0222c0	Fixes for High contrast mode as per lego design. Most changes are in PXT. Adding high contrast theme in the simulator (#564 )	2018-05-04 10:36:48 -07:00
Guillaume Jenkins	2a371b9cc6	Release electron v0.1.40	2018-05-04 10:04:39 -04:00
Peli de Halleux	3211999583	0.1.42	2018-05-03 17:07:09 -07:00
Peli de Halleux	b29862d566	update packaglock	2018-05-03 17:04:22 -07:00
Peli de Halleux	b262d944b7	bump pxt-core to 3.12.18, bump pxt-common-packages to 0.22.2,	2018-05-03 17:03:16 -07:00
Galen Nickel	1b89d08337	Reduce size of tutorial gifs (#562 )	2018-05-03 17:02:22 -07:00
Sam El-Husseini	6bdae6547a	0.1.41	2018-05-03 15:03:24 -07:00
Sam El-Husseini	30a67b729d	Align all modules to a minimum height. (#563 )	2018-05-03 15:02:13 -07:00
Peli de Halleux	3e2c61e212	0.1.40	2018-05-03 11:59:50 -07:00
Peli de Halleux	7a37dec196	Merge branch 'master' of https://github.com/microsoft/pxt-ev3	2018-05-03 11:48:19 -07:00
Peli de Halleux	bac792f188	upgrade firmware -> troubleshoot	2018-05-03 11:48:10 -07:00
Sam El-Husseini	e4c3fa0e57	Make the light around the color sensor appear bright and not a reflection of the current color detected. (#561 )	2018-05-03 08:39:06 -07:00
Sam El-Husseini	76f7df7579	Update favicon	2018-05-03 08:06:39 -07:00
Peli de Halleux	d7e671175c	0.1.39	2018-05-03 06:57:18 -07:00
Peli de Halleux	f4b7230a67	remove "pxtrequire"	2018-05-03 06:55:50 -07:00
Peli de Halleux	afe0f9b0f7	updated pxt	2018-05-03 06:54:30 -07:00
Guillaume Jenkins	23b6edc4bf	Release app 0.1.36	2018-05-03 09:22:18 -04:00
Sam El-Husseini	13b3c1a194	Attempt to shorten color sensor ambient and reflected blocks by removing detected keyword (#560 )	2018-05-02 22:09:04 -07:00
Peli de Halleux	7e58b9b699	Motor angle (#559 ) * control angle with slider * called changed state * remove logging	2018-05-02 22:04:29 -07:00
Galen Nickel	08a860bd80	Update tutorial gifs to match new sim inputs (#558 )	2018-05-02 17:15:29 -07:00
Sam El-Husseini	4a966a73f1	0.1.38	2018-05-02 16:24:41 -07:00
Sam El-Husseini	542216000c	0.1.37	2018-05-02 16:24:35 -07:00
Sam El-Husseini	b323929f03	Fix color grid on IE. (#556 )	2018-05-02 16:23:53 -07:00
Sam El-Husseini	1e3647738d	Update download dialog. (#555 )	2018-05-02 15:15:25 -07:00
Sam El-Husseini	838b3f7f9a	0.1.36	2018-05-02 15:07:55 -07:00
Sam El-Husseini	0ff2d7866d	bump pxt-core to 3.12.16,	2018-05-02 15:07:45 -07:00