fix: replace SVG RECORDBUTTON with Material Icons ligature in toolbar

Record button used an SVG string set via innerHTML, which broke when
PR 7757 converted innerHTML to textContent for security. Instead of
reverting to innerHTML, move the icon to index.html as a static
Material Icons ligature element, matching how Play and Stop work.

- Add fiber_manual_record to #record in HTML
- Remove dynamic icon creation from toolbar-ui.js
- Refactor recorder.js to use CSS class on #record instead of
  targeting the now-removed rec_inside SVG element
- Add #record.recording CSS for blink animation and red color
- Remove dead RECORDBUTTON SVG constant from artwork.js
- Remove unused RECORDBUTTON imports from toolbar-ui.js and turtledefs.js
- Update tests to reflect static icon and class-based recording state

Author: ssz2605

css/activities.css

@@ -448,7 +448,8 @@ body:not(.dark):not(.highcontrast) #helpfulSearchDiv {
     line-height: 30px;
 }
 
-.blink {
+#record.recording .material-icons {
+    color: red;
     animation: blink-animation 1.5s infinite;
 }
 

index.html

@@ -549,7 +549,8 @@
                                         data-tooltip="Record"
                                         role="button"
                                         tabindex="0"
-                                    ></a>
+                                        ><i class="material-icons main">fiber_manual_record</i></a
+                                    >
                                     <a
                                         id="recordDropdownArrow"
                                         class="left dropdown-trigger"

js/__tests__/toolbar.test.js

@@ -584,10 +584,7 @@ describe("Toolbar Class", () => {
     test("updateRecordButton hides record button", () => {
         const recordButton = {
             classList: { add: jest.fn() },
-            style: { display: "" },
-            innerHTML: "",
-            textContent: "",
-            appendChild: jest.fn()
+            style: { display: "" }
         };
         global.docById.mockReturnValue(recordButton);
         global.fnBrowserDetect = jest.fn(() => "firefox");
@@ -597,14 +594,9 @@ describe("Toolbar Class", () => {
     });
 
     test("updateRecordButton keeps only one outside-click listener and dispose removes it", () => {
-        global.RECORDBUTTON = "fiber_manual_record";
-
         const recordButton = {
             classList: { add: jest.fn(), remove: jest.fn() },
             style: { display: "" },
-            innerHTML: "",
-            textContent: "",
-            appendChild: jest.fn(),
             onclick: null
         };
 

js/__tests__/turtledefs.test.js

@@ -101,7 +101,6 @@ describe("Music Blocks mode (_THIS_IS_TURTLE_BLOCKS_ = false)", () => {
             "WRAPTURTLEBUTTON",
             "MOUSEPALETTEICON",
             "FULLSCREENBUTTON",
-            "RECORDBUTTON",
             "PLUGINSBUTTON",
             "OPENMERGEBUTTON",
             "PITCHPREVIEWBUTTON",

js/activity/__tests__/recorder.test.js

@@ -1,6 +1,5 @@
 describe("recorder", () => {
     let mockStart;
-    let mockRecInside;
 
     beforeEach(() => {
         jest.useFakeTimers();
@@ -15,17 +14,12 @@ describe("recorder", () => {
             addEventListener: jest.fn(),
             removeEventListener: jest.fn(),
             dispatchEvent: jest.fn(),
-            _recordHandler: null
-        };
-
-        mockRecInside = {
             classList: { add: jest.fn(), remove: jest.fn() },
-            setAttribute: jest.fn()
+            _recordHandler: null
         };
 
         jest.spyOn(document, "getElementById").mockImplementation(id => {
             if (id === "record") return mockStart;
-            if (id === "rec_inside") return mockRecInside;
             return null;
         });
 

js/activity/recorder.js

@@ -42,8 +42,7 @@ const doRecordButton = activity => {
 const setupActivityRecorder = activityInstance => {
     activityInstance._doRecordButton = () => {
         const that = activityInstance;
-        const start = document.getElementById("record"),
-            recInside = document.getElementById("rec_inside");
+        const start = document.getElementById("record");
         let mediaRecorder;
         const clickEvent = new Event("click");
         let flag = 0;
@@ -182,7 +181,7 @@ const setupActivityRecorder = activityInstance => {
          * @param {Blob[]} recordedChunks - The accumulated recorded chunks.
          */
         function saveFile(recordedChunks) {
-            recInside.classList.remove("blink");
+            start.classList.remove("recording");
 
             const showAlert = message => {
                 if (window.MBDialog && typeof window.MBDialog.alert === "function") {
@@ -276,7 +275,7 @@ const setupActivityRecorder = activityInstance => {
          */
         function createRecorder(stream) {
             flag = 1;
-            recInside.classList.add("blink");
+            start.classList.add("recording");
             that.textMsg(_("Recording started. Click stop to finish."));
             start.removeEventListener("click", createRecorder, true);
             let recordedChunks = [];
@@ -290,7 +289,6 @@ const setupActivityRecorder = activityInstance => {
             mediaRecorder.onstop = function () {
                 saveFile(recordedChunks);
                 recordedChunks = [];
-                recInside.setAttribute("fill", "#ffffff");
             };
 
             mediaRecorder.ondataavailable = function (e) {
@@ -326,7 +324,7 @@ const setupActivityRecorder = activityInstance => {
                         const stopHandler = function stopHandler() {
                             if (mediaRecorder && mediaRecorder.state === "recording") {
                                 mediaRecorder.stop();
-                                recInside.classList.remove("blink");
+                                start.classList.remove("recording");
                                 flag = 0;
                                 cleanupStreams();
                             }
@@ -336,7 +334,6 @@ const setupActivityRecorder = activityInstance => {
                         };
                         start.addEventListener("click", stopHandler);
                     }
-                    recInside.setAttribute("fill", "red");
                 } catch (error) {
                     ErrorHandler.recoverable(error, { operation: "recording" });
                     that.textMsg(_("Recording failed: %s").replace(/%s/g, error.message));

js/artwork.js

@@ -11,7 +11,7 @@
 
 /*
   global _THIS_IS_MUSIC_BLOCKS_, docById, doSVG, fnBrowserDetect,
-  RECORDBUTTON, saveButton, saveButtonAdvanced, ActivityContext
+  saveButton, saveButtonAdvanced, ActivityContext
 */
 
 /* exported ToolbarUI */
@@ -1049,7 +1049,6 @@ class ToolbarUI {
             Record.classList.remove("hide");
             Record.style.display = "block";
         }
-        Record.innerHTML = `<i class="material-icons main">${RECORDBUTTON}</i>`;
 
         // Remove any existing onclick handler
         Record.onclick = null;

js/toolbar-ui.js

@@ -20,7 +20,7 @@
    RHYTHMPALETTEICON, RUNBUTTON, SAVEBUTTON, SCROLLUNLOCKBUTTON,
    TABBUTTON_LIGHT, TABBUTTON_DARK, SLOWBUTTON, SMALLERBUTTON, STATSBUTTON,
    STEPBUTTON, STOPTURTLEBUTTON, WRAPTURTLEBUTTON, _THIS_IS_TURTLE_BLOCKS_,
-   _THIS_IS_MUSIC_BLOCKS_, MOUSEPALETTEICON, FULLSCREENBUTTON, RECORDBUTTON,
+   _THIS_IS_MUSIC_BLOCKS_, MOUSEPALETTEICON, FULLSCREENBUTTON,
    PLUGINSBUTTON, OPENMERGEBUTTON, PITCHPREVIEWBUTTON, JAVASCRIPTBUTTON,
    RECORDHELPBUTTON, DARKMODEBUTTON, SELECTHELPBUTTON, BLOCKMENUBUTTON,
    CANVASMENUBUTTON, RHYTHMPALETTEHELPICON, PITCHPREVIEWHELPBUTTON