Record the whole editor from the main menu

The game view could already record itself through nodes. Making a
video of the editor itself, to show how something is done, needed an
outside screen recorder. The main menu now starts and stops one, with
no options to set.

- "Start recording" sits in its own group before General settings, and
  reads "Stop recording" while one runs. The name is
  "Recording <time>", the size is the whole canvas in device pixels
  (an odd row or column is cut), 60 fps always. Sound is the master,
  saving goes the same way as for the game view.
- The encoder, the sound and the Matroska writing of a take moved from
  GameRecorder.ts to RecordingTake.ts. A take now reads its pictures
  from a FrameSource, so the game view and the editor share it.
- The editor's picture is copied from the canvas after each render, in
  the same frame, so nothing is drawn twice. A resting editor does not
  render, and the recording repeats its last picture.
- The mouse pointer is drawn into the recording in the shape the editor
  shows (arrow, hand, resize arrows, I-beam, crosshair, move).
- A red dot with the running time stands beside the menu button on
  screen only. It is drawn after the copy, and the toolbar makes room
  for it.
- Drawing that dot made Pixi take it as the root for every hit test,
  and the menu would not open any more. The stage is set back as the
  last rendered object after it.

Tests:
- Gate on melektaus-atx green: 303 files, 4686 tests.
- Unit recording: 20 green, 5 new.
- e2e 67: 8 checks, 67e new. It records through the menu and decodes
  the MP4: 1280x800 at 60 fps, the pointer black at the mouse, the dot
  missing, 238 plain spots alike with the canvas. Without the pointer
  and with the dot drawn before the copy, 67e is red.
- e2e 46: the main menu lists "Start recording".

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

tools/e2e/46-topbar.mjs

@@ -61,11 +61,13 @@ export async function topbar(t) {
     'Master routing',
     'Clear saved data',
     null,
+    'Start recording',
+    null,
     'General settings…',
     'Plugins',
   ];
   check(
-    'the menu button opens new project, the project picker, the settings, the master routing, clearing saves, the general settings and the plugins',
+    'the menu button opens new project, the project picker, the settings, the master routing, clearing saves, recording the editor, the general settings and the plugins',
     JSON.stringify(rows) === JSON.stringify(expected),
     JSON.stringify(rows),
   );

tools/e2e/67-recording.mjs

@@ -174,9 +174,162 @@ export async function recording(t) {
     colors,
   );
 
+  // 67e. The editor records itself from the main menu: the whole canvas at 60 fps, the mouse pointer
+  //      drawn in where the system draws it over the canvas, and the red dot beside the menu on
+  //      screen only. The frame is read where the pointer rested on the empty middle of the top bar.
+  const { mouse, cdp, clickToolbar, clickText } = t;
+  await clickToolbar('menu');
+  const idle = await json('__gm.menuRows()');
+  await clickText('Start recording');
+  await waitUntil(`__gm.recording().editor.takes[0]?.state === 'recording'`, { label: 'the editor records' });
+  const redo = await json('__gm.toolbarAt("redo")');
+  const playAt = await json('__gm.toolbarAt("play")');
+  const rest = { x: Math.round((redo.x + playAt.x) / 2), y: Math.round(playAt.y) };
+  await mouse('mouseMoved', rest.x, rest.y);
+  await sleep(200);
+  const restFrom = (await json('__gm.recording().editor.takes[0]')).durationMs;
+  await sleep(1000);
+  const restTo = (await json('__gm.recording().editor.takes[0]')).durationMs;
+  const canvas = await json(
+    "({ w: document.querySelector('canvas').width, h: document.querySelector('canvas').height })",
+  );
+  // Points of the canvas below the top bar, whose notice changes, while the editor rests: the frame
+  // of that moment has to show the same. Only points amid one colour count: H.264 shares a colour
+  // between 2×2 pixels, so a hairline over red comes out pink.
+  const near = [];
+  for (let gy = 1; gy < 14; gy++)
+    for (let gx = 1; gx < 24; gx++) {
+      const x = Math.round((canvas.w * gx) / 24);
+      const y = 40 + Math.round(((canvas.h - 40) * gy) / 14);
+      for (let dy = -2; dy <= 2; dy += 2)
+        for (let dx = -2; dx <= 2; dx += 2) near.push({ x: x + dx, y: y + dy });
+    }
+  const around = await json(`__gm.pixels(${JSON.stringify(near)})`);
+  const grid = [];
+  const live = [];
+  for (let i = 0; i < near.length; i += 9) {
+    const patch = around.slice(i, i + 9);
+    if (patch.every((c) => c === patch[0])) {
+      grid.push(near[i + 4]);
+      live.push(patch[4]);
+    }
+  }
+  const badge = (await json('__gm.recording().editor')).badge;
+  const dot = { x: Math.round(badge.x + 7), y: Math.round(badge.y + badge.h / 2) };
+  await evaluate('window.__gm.wake()');
+  await sleep(100);
+  const { data: screen } = await cdp.send('Page.captureScreenshot', { format: 'png' });
+  const onScreen = JSON.parse(
+    await evaluate(`new Promise((resolve) => {
+      const image = new Image();
+      image.onload = () => {
+        const canvas = document.createElement('canvas');
+        canvas.width = image.width;
+        canvas.height = image.height;
+        const pen = canvas.getContext('2d');
+        pen.drawImage(image, 0, 0);
+        resolve(JSON.stringify([...pen.getImageData(${dot.x}, ${dot.y}, 1, 1).data].slice(0, 3)));
+      };
+      image.src = 'data:image/png;base64,${screen}';
+    })`),
+  );
+  await clickToolbar('menu');
+  const busy = await json('__gm.menuRows()');
+  await clickText('Stop recording');
+  await waitUntil(`__gm.recording().editor.takes[0]?.state === 'done'`, {
+    label: 'the editor take is saved',
+  });
+  const take = (await json('__gm.recording().editor')).takes[0];
+  await waitUntil(
+    `__gm.recording().uploads.some((u) => u.name === ${JSON.stringify(take.name)} && (u.state === 'added' || u.state === 'failed'))`,
+    { timeout: 60_000, label: 'the editor recording is in the project' },
+  );
+  const upload = (await recordings()).uploads.find((u) => u.name === take.name);
+  const made = await json(
+    `__gm.state.project.assets.filter((a) => a.id === ${JSON.stringify(upload.assetId)}).map((a) => ({ file: a.file, fps: a.fps }))[0] ?? null`,
+  );
+  const file = made?.file ?? '';
+  const at = (restFrom + restTo) / 2000;
+  const frame = JSON.parse(
+    await evaluate(`new Promise((resolve) => {
+      const video = document.createElement('video');
+      video.muted = true;
+      video.onerror = () => resolve('null');
+      video.src = '/game-maker/data/videos/${file}';
+      video.play().then(() => video.requestVideoFrameCallback(() => {
+        video.pause();
+        video.onseeked = () => setTimeout(() => {
+          const canvas = document.createElement('canvas');
+          canvas.width = video.videoWidth;
+          canvas.height = video.videoHeight;
+          const pen = canvas.getContext('2d');
+          pen.drawImage(video, 0, 0);
+          const px = (x, y) => [...pen.getImageData(x, y, 1, 1).data].slice(0, 3);
+          resolve(JSON.stringify({
+            w: canvas.width,
+            h: canvas.height,
+            inside: px(${rest.x + 2}, ${rest.y + 8}),
+            beside: px(${rest.x - 4}, ${rest.y + 8}),
+            dot: px(${dot.x}, ${dot.y}),
+            grid: ${JSON.stringify(grid)}.map((p) => px(p.x, p.y)),
+          }));
+        }, 150);
+        video.currentTime = ${at};
+      }), () => resolve('null'));
+    })`),
+  );
+  const hex = (rgb) => rgb.map((v) => v.toString(16).padStart(2, '0')).join('');
+  const off = frame
+    ? frame.grid.filter((rgb, i) => {
+        const want = live[i]
+          .slice(1)
+          .match(/../g)
+          .map((v) => parseInt(v, 16));
+        return rgb.some((v, c) => Math.abs(v - want[c]) > 24);
+      }).length
+    : -1;
+  check(
+    'Start recording in the main menu records the whole editor at 60 fps with the pointer drawn in, the red dot on screen only, and Stop recording saves it',
+    idle.includes('Start recording') &&
+      busy.includes('Stop recording') &&
+      take.width === canvas.w - (canvas.w % 2) &&
+      take.height === canvas.h - (canvas.h % 2) &&
+      take.fps === 60 &&
+      made?.fps === 60 &&
+      upload.state === 'added' &&
+      frame !== null &&
+      frame.w === take.width &&
+      Math.max(...frame.inside) < 60 &&
+      Math.min(...frame.beside) > 25 &&
+      onScreen[0] > 180 &&
+      onScreen[1] < 120 &&
+      frame.dot[0] < 120 &&
+      grid.length >= 50 &&
+      off <= grid.length / 20,
+    JSON.stringify({
+      idle,
+      busy,
+      take,
+      made,
+      upload,
+      canvas,
+      at,
+      onScreen,
+      frame: frame && {
+        ...frame,
+        inside: hex(frame.inside),
+        beside: hex(frame.beside),
+        dot: hex(frame.dot),
+        grid: undefined,
+      },
+      flat: grid.length,
+      off,
+    }),
+  );
+
   await mutate(`
     const p = __gm.state.project;
-    const made = ${JSON.stringify(assets.map((a) => a.id))};
+    const made = ${JSON.stringify([...assets.map((a) => a.id), upload.assetId])};
     p.assets = p.assets.filter((a) => a.id !== '${CONTROL}' && !made.includes(a.id));
     const scene = __gm.state.activeScene;
     scene.objects = scene.objects.filter((o) => !o.id.startsWith('rc67-'));`);