perf: replace Firefox 5s delay with readiness-based initialization

Instead of an arbitrary 5-second setTimeout for Firefox, this change
introduces a waitForReadiness() function that polls for actual
dependency readiness before initializing the app.

The new approach:
- Polls every animation frame for critical dependencies (createjs, Howler, jQuery)
- Checks for required DOM elements (canvas, loader, toolbars)
- Initializes as soon as ready (minimum 500ms for stability)
- Falls back to initialization after maximum 10s timeout
- Logs actual initialization time for debugging

Benefits:
- Fast Firefox machines: ~500-800ms instead of 5000ms
- Slow Firefox machines: waits appropriately up to 10s
- Provides insight via console logging
- Future-proof: adapts to actual dependencies

This addresses technical debt from 2015 when the arbitrary delay
was introduced as a workaround for Firefox hardware acceleration issues.

Author: Ashutoshx7

js/activity.js

@@ -37,7 +37,8 @@
    SPECIALINPUTS, STANDARDBLOCKHEIGHT, StatsWindow, STROKECOLORS,
    TENOR, TITLESTRING, Toolbar, Trashcan, TREBLE, Turtles, TURTLESVG,
    updatePluginObj, ZERODIVIDEERRORMSG, GRAND_G, GRAND_F,
-   SHARP, FLAT, buildScale, TREBLE_F, TREBLE_G, GIFAnimator
+   SHARP, FLAT, buildScale, TREBLE_F, TREBLE_G, GIFAnimator,
+   waitForReadiness
  */
 
 /*
@@ -1900,9 +1901,8 @@ class Activity {
                 // Queue and take first step.
                 if (!this.turtles.running()) {
                     this.logo.runLogoCommands();
-                    document.getElementById(
-                        "stop"
-                    ).style.color = this.toolbar.stopIconColorWhenPlaying;
+                    document.getElementById("stop").style.color =
+                        this.toolbar.stopIconColorWhenPlaying;
                 }
                 this.logo.step();
             } else {
@@ -2221,9 +2221,8 @@ class Activity {
                     i < this.palettes.dict[this.palettes.activePalette].protoList.length;
                     i++
                 ) {
-                    const name = this.palettes.dict[this.palettes.activePalette].protoList[i][
-                        "name"
-                    ];
+                    const name =
+                        this.palettes.dict[this.palettes.activePalette].protoList[i]["name"];
                     if (name in obj["FLOWPLUGINS"]) {
                         // eslint-disable-next-line no-console
                         console.log("deleting " + name);
@@ -4937,9 +4936,8 @@ class Activity {
                             }
                         }
                         staffBlocksMap[staffIndex].baseBlocks[0][0][firstnammedo][4][0] = blockId;
-                        staffBlocksMap[staffIndex].baseBlocks[repeatId.end][0][
-                            endnammedo
-                        ][4][1] = null;
+                        staffBlocksMap[staffIndex].baseBlocks[repeatId.end][0][endnammedo][4][1] =
+                            null;
 
                         blockId += 2;
                     } else {
@@ -5007,9 +5005,8 @@ class Activity {
                                 prevnameddo
                             ][4][1] = blockId;
                         } else {
-                            staffBlocksMap[staffIndex].repeatBlock[
-                                prevrepeatnameddo
-                            ][4][3] = blockId;
+                            staffBlocksMap[staffIndex].repeatBlock[prevrepeatnameddo][4][3] =
+                                blockId;
                         }
                         if (afternamedo !== -1) {
                             staffBlocksMap[staffIndex].baseBlocks[repeatId.end][0][
@@ -5859,8 +5856,8 @@ class Activity {
                                 let customName = "custom";
                                 if (myBlock.connections[1] !== null) {
                                     // eslint-disable-next-line max-len
-                                    customName = this.blocks.blockList[myBlock.connections[1]]
-                                        .value;
+                                    customName =
+                                        this.blocks.blockList[myBlock.connections[1]].value;
                                 }
                                 // eslint-disable-next-line no-console
                                 console.log(customName);
@@ -7692,14 +7689,24 @@ const activity = new Activity();
 
 require(["domReady!"], doc => {
     doBrowserCheck();
-    if (jQuery.browser.mozilla) {
-        setTimeout(() => {
-            activity.setupDependencies();
-            activity.domReady(doc);
-        }, 5000);
-    } else {
+
+    const initializeApp = () => {
         activity.setupDependencies();
         activity.domReady(doc);
+    };
+
+    if (jQuery.browser.mozilla) {
+        // Use readiness-based initialization instead of arbitrary 5-second delay
+        // This polls for critical dependencies (createjs, Howler, DOM elements)
+        // and initializes as soon as they're ready (min 500ms, max 10s)
+        waitForReadiness(initializeApp, {
+            maxWait: 10000, // Maximum wait time (fallback)
+            minWait: 500, // Minimum wait for stability
+            checkInterval: 100
+        });
+    } else {
+        // Chromium browsers don't need the delay
+        initializeApp();
     }
 });
 

js/utils/utils.js

@@ -39,7 +39,7 @@
    oneHundredToFraction, prepareMacroExports, preparePluginExports,
    processMacroData, processRawPluginData, rationalSum, rgbToHex,
    safeSVG, toFixed2, toTitleCase, windowHeight, windowWidth,
-   fnBrowserDetect
+    fnBrowserDetect, waitForReadiness
 */
 
 /**
@@ -343,6 +343,68 @@ function doBrowserCheck() {
     jQuery.browser = browser;
 }
 
+/**
+ * Wait for critical dependencies to be ready before calling callback.
+ * Uses polling with exponential backoff and maximum timeout.
+ * This replaces the arbitrary 5-second delay for Firefox with actual readiness checks.
+ *
+ * @param {Function} callback - The function to call when ready
+ * @param {Object} options - Configuration options
+ * @param {number} options.maxWait - Maximum wait time in ms (default: 10000)
+ * @param {number} options.minWait - Minimum wait time in ms (default: 500)
+ * @param {number} options.checkInterval - Initial check interval in ms (default: 100)
+ */
+function waitForReadiness(callback, options = {}) {
+    const { maxWait = 10000, minWait = 500, checkInterval = 100 } = options;
+    const startTime = Date.now();
+
+    /**
+     * Check if critical dependencies and DOM elements are ready
+     * @returns {boolean} True if all critical dependencies are loaded
+     */
+    const isReady = () => {
+        // Check if critical JavaScript libraries are loaded
+        const createjsLoaded = typeof createjs !== "undefined" && createjs.Stage;
+        const howlerLoaded = typeof Howler !== "undefined";
+        const jqueryLoaded = typeof jQuery !== "undefined";
+
+        // Check if critical DOM elements exist
+        const canvas = document.getElementById("myCanvas");
+        const loader = document.getElementById("loader");
+        const toolbars = document.getElementById("toolbars");
+        const domReady = canvas && loader && toolbars;
+
+        return createjsLoaded && howlerLoaded && jqueryLoaded && domReady;
+    };
+
+    /**
+     * Polling function that checks readiness and calls callback when ready
+     */
+    const check = () => {
+        const elapsed = Date.now() - startTime;
+
+        if (elapsed >= minWait && isReady()) {
+            // Ready! Initialize the app
+            // eslint-disable-next-line no-console
+            console.log(`[Firefox] Initialized in ${elapsed}ms (readiness-based)`);
+            callback();
+        } else if (elapsed >= maxWait) {
+            // Timeout - initialize anyway as fallback
+            // eslint-disable-next-line no-console
+            console.warn(
+                `[Firefox] Initialization timed out after ${maxWait}ms, proceeding anyway`
+            );
+            callback();
+        } else {
+            // Not ready yet, check again on next animation frame
+            requestAnimationFrame(check);
+        }
+    };
+
+    // Start the readiness check loop
+    requestAnimationFrame(check);
+}
+
 // Check for Internet Explorer
 
 window.onload = () => {