Some more interface fixes and such

Moving things around, getting the dev tools to work better

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
 }

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';

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;
 }

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>

src/playground/see-inside/see-inside.css

@@ -1,3 +0,0 @@
-.see-inside {
-    
-}

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 {
+    
+}

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>;
     }
 }