From 2f9b6fdb8dff7d8aa96452f4e372d0ef8e408896 Mon Sep 17 00:00:00 2001
From: Thomas Weber <tommyweber33@gmail.com>
Date: Tue, 28 Jul 2020 15:57:50 -0500
Subject: [PATCH] Some more interface fixes and such

Moving things around, getting the dev tools to work better
---
 src/containers/tw-s3-dev-tools-loader.js      | 27 ++++++++++++++-----
 src/playground/index.jsx                      |  2 +-
 src/playground/player.css                     |  1 +
 src/playground/player.jsx                     |  6 +++--
 src/playground/see-inside/see-inside.css      |  3 ---
 ...ogress-bar.js => tw-hacky-progress-bar.js} |  0
 src/playground/tw-see-inside/see-inside.css   |  5 ++++
 .../see-inside.jsx                            |  8 +++---
 8 files changed, 35 insertions(+), 17 deletions(-)
 delete mode 100644 src/playground/see-inside/see-inside.css
 rename src/playground/{hacky-progress-bar.js => tw-hacky-progress-bar.js} (100%)
 create mode 100644 src/playground/tw-see-inside/see-inside.css
 rename src/playground/{see-inside => tw-see-inside}/see-inside.jsx (86%)

diff --git a/src/containers/tw-s3-dev-tools-loader.js b/src/containers/tw-s3-dev-tools-loader.js
index 3e33344b1..686a76091 100644
--- a/src/containers/tw-s3-dev-tools-loader.js
+++ b/src/containers/tw-s3-dev-tools-loader.js
@@ -1,22 +1,35 @@
+// Loader for https://github.com/griffpatch/Scratch3-Dev-Tools
+
 let injected = false;
 
-// git tag of the version to use
-const VERSION = '0.2.4';
+// git tag or commit of the version to use
+// we use commits so that the version loaded is always the same and known to work, no surprises
+const VERSION = '62a4369a78d2c560e6d59fcaa3ae9afcef2fa46b';
 
-const load = () => {
-    if (injected) return;
-    injected = true;
-    
+const inject = () => {
     const script = document.createElement('script');
     script.src = `https://cdn.jsdelivr.net/gh/griffpatch/Scratch3-Dev-Tools@${VERSION}/inject3.js`;
     const style = document.createElement('link');
     style.href = `https://cdn.jsdelivr.net/gh/griffpatch/Scratch3-Dev-Tools@${VERSION}/inject.css`;
     style.rel = 'stylesheet';
-    
+
     document.head.appendChild(script);
     document.head.appendChild(style);
 };
 
+const load = () => {
+    if (injected) return;
+    injected = true;
+
+    // We try to delay the script loading until everything else is complete.
+    // Otherwise we might end up starting heavy network activity or script parsing on the main thread while critical things are still loading.
+    if (window.requestIdleCallback) {
+        requestIdleCallback(inject);
+    } else {
+        setTimeout(inject, 0);
+    }
+};
+
 export default {
     load
 }
diff --git a/src/playground/index.jsx b/src/playground/index.jsx
index 465714a1e..4481a3f0a 100644
--- a/src/playground/index.jsx
+++ b/src/playground/index.jsx
@@ -1,5 +1,5 @@
 // must be first for progress bar to work
-import "./hacky-progress-bar";
+import "./tw-hacky-progress-bar";
 
 // Polyfills
 import 'es6-object-assign/auto';
diff --git a/src/playground/player.css b/src/playground/player.css
index bfe9720c6..9f20313d0 100644
--- a/src/playground/player.css
+++ b/src/playground/player.css
@@ -19,6 +19,7 @@ p {
     box-sizing: border-box;
 }
 
+/* make sure this isn't "see-inside-button" or anything because that might cause the dev tools to wrongly reinject */
 .see-inside {
     float: right;
 }
diff --git a/src/playground/player.jsx b/src/playground/player.jsx
index dc5d190bd..2256a833f 100644
--- a/src/playground/player.jsx
+++ b/src/playground/player.jsx
@@ -20,7 +20,7 @@ import styles from './player.css';
 import ProjectInput from '../components/tw-project-input/project-input.jsx';
 import About from '../components/tw-home/about/about.jsx';
 import Title from '../components/tw-home/title/title.jsx';
-import SeeInside from './see-inside/see-inside.jsx';
+import SeeInside from './tw-see-inside/see-inside.jsx';
 
 document.body.classList.add('tw-loaded');
 
@@ -41,7 +41,9 @@ const Player = ({isPlayerOnly, onSeeInside, projectId}) => (
         {isPlayerOnly ? (
             <Box>
                 <ProjectInput></ProjectInput>
-                <SeeInside className={classNames(styles.seeInside)}></SeeInside>
+                <div className={styles.seeInside}>
+                    <SeeInside></SeeInside>
+                </div>
             </Box>
         ) : null}
     </Box>
diff --git a/src/playground/see-inside/see-inside.css b/src/playground/see-inside/see-inside.css
deleted file mode 100644
index 217f2b4e0..000000000
--- a/src/playground/see-inside/see-inside.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.see-inside {
-    
-}
\ No newline at end of file
diff --git a/src/playground/hacky-progress-bar.js b/src/playground/tw-hacky-progress-bar.js
similarity index 100%
rename from src/playground/hacky-progress-bar.js
rename to src/playground/tw-hacky-progress-bar.js
diff --git a/src/playground/tw-see-inside/see-inside.css b/src/playground/tw-see-inside/see-inside.css
new file mode 100644
index 000000000..0b6f65929
--- /dev/null
+++ b/src/playground/tw-see-inside/see-inside.css
@@ -0,0 +1,5 @@
+/* this class must contain "see-inside-button" somewhere for the s3 dev tools to be able to reinject itself */
+/* https://github.com/griffpatch/Scratch3-Dev-Tools/blob/0.2.4/inject3.js#L1804-L1807 */
+.see-inside-button {
+    
+}
diff --git a/src/playground/see-inside/see-inside.jsx b/src/playground/tw-see-inside/see-inside.jsx
similarity index 86%
rename from src/playground/see-inside/see-inside.jsx
rename to src/playground/tw-see-inside/see-inside.jsx
index 24b5643e1..25be82cec 100644
--- a/src/playground/see-inside/see-inside.jsx
+++ b/src/playground/tw-see-inside/see-inside.jsx
@@ -12,13 +12,13 @@ class SeeInside extends React.Component {
     render () {
         const {
             onSeeInside,
-            ...props
         } = this.props;
         return <button
             onClick={onSeeInside}
-            className={styles.seeInside}
-            {...props}
-        >See inside</button>;
+            className={styles.seeInsideButton}
+        >
+            See inside
+        </button>;
     }
 }