Massive changelog, and fix left/right detection-ish

Reproduction:
1. Press and hold ShiftLeft
2. Press and hold ShiftRight
3. Release ShiftLeft. This does not fire a mouseup event.
4. Release ShiftRight. `code` is ShiftRight.

mouseup with code=ShiftLeft never fires.

Author: SheepTester

index.html

@@ -70,8 +70,41 @@ <h3><em>Convert a Scratch project to HTML</em></h3>
       <div id="notes"></div>
       <h2 id="updates">Update history</h2>
       <p>See the code and previous versions on <a href="https://github.com/SheepTester/htmlifier/">Github</a>.</p>
-      <h3>Upcoming</h3>
+      <h3>2021-02-07 (<a href="https://github.com/SheepTester/htmlifier/releases/download/2021-02-07/htmlifier-offline.html">download</a>)</h3>
       <ul>
+        <li>Save the options in the URL</li>
+        <li>
+          New customisation options:
+          <ul>
+            <li>Background image</li>
+            <li>Cursor</li>
+            <li>Favicon</li>
+            <li>New loading bar design with customisable colours</li>
+            <li>
+              Loading screen image from a URL
+              <ul>
+                <li>Option to stretch only the loading screen image</li>
+              </ul>
+            </li>
+          </ul>
+        </li>
+        <li>Option to show start/stop buttons (equivalent to the green flag/stop sign)</li>
+        <li>
+          New special cloud behaviours:
+          <ul>
+            <li>Better support for <code>☁ eval</code> returning Promises</li>
+            <li><code>☁ open link</code> opens a URL in a new tab.</li>
+            <li><code>☁ redirect</code> redirects to a URL.</li>
+            <li><code>☁ set clipboard</code> tries to copy text to the clipboard.</li>
+            <li><code>☁ set server ip</code> changes the cloud server URL.</li>
+          </ul>
+        </li>
+        <li>Ability to distinguish between left/right modifier keys using <code>&lt;key (join [code_ShiftLeft] []) pressed?>&gt;</code>, for example.</li>
+        <li>Clicking on a variable slider no longer gives it focus, so keys will continue to work.</li>
+        <li>A bookmarklet creator</li>
+        <li>BREAKING: The mouse lock position now sets mouse x/y to the accumulative mouse position, which should be more reliable. This works best with the "Remove limits" option.</li>
+        <li>Updated CSS by <a href="https://scratch.mit.edu/users/mrcringekidyt/">Mr. Cringe Kid</a></li>
+        <li>Fixed the HTMLification log progress not resetting</li>
         <li>Also, the <a href="https://github.com/SheepTester/primitive-cloud-server">primitive cloud server</a> has been updated.</li>
       </ul>
       <h3>2020-12-18</h3>
@@ -624,10 +657,11 @@ <h2 id="see-also">See also</h2>
         }
       ), 'url')
   )
-  .add(
-    new Label('Include the project data in the HTML file? This will make the file larger, but it will work offline. (Must be checked if uploading a file.)')
-      .addCheckable(new Checkbox('include-file', true))
-  )
+  // TODO
+  // .add(
+  //   new Label('Include the project data in the HTML file? This will make the file larger, but it will work offline. (Must be checked if uploading a file.)')
+  //     .addCheckable(new Checkbox('include-file', true))
+  // )
   .add(
     new Fieldset('Options')
       .add(new Input(

offlineifier.js

@@ -37,6 +37,8 @@ function offlineify ({
       .catch(problemFetching('the Scratch engine'))
       .then(toText('the Scratch engine'))
       .then(async vmCode => {
+        // TODO: ??? What happened here, with `extensionWorkerGet` being
+        // undefined and `extensionWorker` being unused?
         let extensionWorker
         const extensionWorkerMatch = vmCode.match(extensionWorkerGet)
         if (!extensionWorkerMatch) throw new Error('Cannot find extension-worker.js')

template.html

@@ -981,17 +981,28 @@
 
   // KEY PRESSED?
   /* https://github.com/LLK/scratch-gui/blob/develop/src/lib/vm-listener-hoc.jsx#L86-L115 */
+  const keyToCode = new Map()
   document.addEventListener('keydown', e => {
     if (e.target !== document && e.target !== document.body) return;
     const key = !e.key || e.key === 'Dead' ? e.keyCode : e.key;
     vm.postIOData('keyboard', {
       key: key,
       isDown: true
     });
+    const prevCode = keyToCode.get(e.key);
+    if (prevCode) {
+      if (prevCode !== e.code) {
+        vm.postIOData('keyboard', {
+          key: 'code_' + prevCode,
+          isDown: false
+        });
+      }
+    }
     vm.postIOData('keyboard', {
       key: 'code_' + e.code,
       isDown: true
     });
+    keyToCode.set(e.key, e.code);
     if (e.keyCode === 32 || e.keyCode >= 37 && e.keyCode <= 40) {
       e.preventDefault();
     }
@@ -1006,6 +1017,7 @@
       key: 'code_' + e.code,
       isDown: false
     });
+    keyToCode.delete(e.key);
     if (e.target !== document && e.target !== document.body) {
       e.preventDefault();
     }