Friendlier download dialog + pairing (#1212)

* first shot at new download

* fixing image

* handle column width

* fixed colors

* updated images

* PR feedback

docs/static/githubfilelogo.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M16.097 2.686c-7.64 0-13.834 6.194-13.834 13.835 0 6.113 3.964 11.298 9.462 13.128.692.127.944-.301.944-.667 0-.328-.012-1.199-.019-2.353-3.848.836-4.66-1.855-4.66-1.855-.629-1.598-1.536-2.023-1.536-2.023-1.256-.859.095-.842.095-.842 1.388.099 2.119 1.426 2.119 1.426 1.234 2.114 3.238 1.504 4.027 1.15.125-.894.482-1.504.878-1.85-3.072-.349-6.302-1.536-6.302-6.838 0-1.51.539-2.745 1.424-3.712-.143-.35-.617-1.756.135-3.661 0 0 1.162-.372 3.805 1.418a13.228 13.228 0 0 1 3.464-.465c1.174.005 2.358.158 3.463.465 2.642-1.79 3.801-1.418 3.801-1.418.755 1.905.28 3.311.137 3.661.887.967 1.423 2.202 1.423 3.712 0 5.316-3.235 6.485-6.317 6.827.497.428.939 1.272.939 2.563 0 1.849-.017 3.341-.017 3.795 0 .37.249.8.951.665 5.494-1.833 9.454-7.015 9.454-13.126 0-7.641-6.195-13.835-13.836-13.835" fill="#696969"/></svg>

editor/extension.ts

@@ -739,6 +739,7 @@ namespace pxt.editor {
             }
 
         res.blocklyPatch = patchBlocks;
+        res.showUploadInstructionsAsync = showUploadInstructionsAsync;
         return Promise.resolve<pxt.editor.ExtensionResult>(res);
     }
 
@@ -772,4 +773,99 @@ namespace pxt.editor {
         s.appendChild(f);
         valueNode.appendChild(s);
     }
+
+    function showUploadInstructionsAsync(fn: string, url: string, confirmAsync: (options: any) => Promise<number>) {
+        const boardName = pxt.appTarget.appTheme.boardName || "???";
+        const boardDriveName = pxt.appTarget.appTheme.driveDisplayName || pxt.appTarget.compile.driveName || "???";
+        const canWebusb = pxt.usb.isEnabled;
+
+        // https://msdn.microsoft.com/en-us/library/cc848897.aspx
+        // "For security reasons, data URIs are restricted to downloaded resources. 
+        // Data URIs cannot be used for navigation, for scripting, or to populate frame or iframe elements"
+        const downloadAgain = false // !pxt.BrowserUtils.isIE() && !pxt.BrowserUtils.isEdge();
+        const docUrl = pxt.appTarget.appTheme.usbDocs;
+        const columns = canWebusb ? "eleven" : "sixteen";
+
+        const htmlBody = `
+        <div class="ui grid stackable">
+            ${canWebusb ? `<div class="column five wide" style="background-color: #E2E2E2;">
+                <div class="ui header">${lf("One click download?")}</div>
+                <strong style="font-size:small">${lf("Pair your device to download instantly.")}</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="https://support.microbit.org/support/solutions/articles/19000084059-beta-testing-web-usb" target="_blank">${lf("Check your firmware version here and update if needed")}</a>
+            </div>` : ''}
+            <div class="column ${columns} 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.png" style="margin-bottom:1rem;" />
+                                        </div>
+                                        <div class="content">
+                                            <div class="description">
+                                                <span class="ui purple circular label">1</span>
+                                                <strong>${lf("Connect the {0} to your computer with a USB cable", boardName)}</strong>
+                                                <br />
+                                                <span style="font-size:small">${lf("Use the microUSB port on the top of the {0}", boardName)}</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="column">
+                                    <div class="ui">
+                                        <div class="image">
+                                            <img class="ui medium rounded image" src="./static/download/transfer.png" style="margin-bottom:1rem;" />
+                                        </div>
+                                        <div class="content">
+                                            <div class="description">
+                                                <span class="ui purple circular label">2</span>
+                                                <strong>${lf("Move the .hex file to the {0}", boardName)}</strong>
+                                                <br />
+                                                <span style="font-size:small">${lf("Locate the downloaded .hex file and drag it to the {0} drive", boardDriveName)}</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>`;
+
+        return confirmAsync({
+            header: lf("Download to your micro:bit"),
+            htmlBody,
+            hasCloseIcon: true,
+            hideCancel: true,
+            hideAgree: false,
+            agreeLbl: lf("I got it"),
+            className: 'downloaddialog',
+            buttons: [downloadAgain ? {
+                label: fn,
+                icon: "download",
+                className: "lightgrey focused",
+                url,
+                fileName: fn
+            } : undefined, canWebusb ? {
+                label: lf("Pair device"),
+                icon: "usb",
+                className: "lightgrey focused",
+                onclick: () => {
+                    pxt.usb.pairAsync().done();
+                }
+            } : undefined, docUrl ? {
+                label: lf("Help"),
+                icon: "help",
+                className: "lightgrey",
+                url: docUrl
+            } : undefined]
+            //timeout: 20000
+        }).then(() => { });
+    }
 }

libs/core/_locales/core-jsdoc-strings.json

@@ -159,6 +159,12 @@
   "String.concat": "Returns a string that contains the concatenation of two or more strings.",
   "String.concat|param|other": "The string to append to the end of the string.",
   "String.fromCharCode": "Make a string from the given ASCII character code.",
+  "String.includes": "Determines whether a string contains the characters of a specified string.",
+  "String.includes|param|searchValue": "the text to find",
+  "String.includes|param|start": "optional start index for the search",
+  "String.indexOf": "Returns the position of the first occurrence of a specified value in a string.",
+  "String.indexOf|param|searchValue": "the text to find",
+  "String.indexOf|param|start": "optional start index for the search",
   "String.isEmpty": "Returns a value indicating if the string is empty",
   "String.length": "Returns the length of a String object.",
   "String.substr": "Return a substring of the current string.",