@robotical/martyblocksjr 4.2.1 → 4.2.2

package/editions/free/src/css/editor.css

@@ -390,6 +390,11 @@ div.frame {
     outline-offset: 4px;
 }
 
+#blockspalette .categoryselector button[aria-pressed="true"]:focus,
+#blockspalette .categoryselectorright button[aria-pressed="true"]:focus{
+    outline: none;
+}
+
 #blockspalette .categoryselectorright{
     display: inline-block;
     word-spacing: -1;

package/editions/free/src/css/editorleftpanel.css

@@ -313,11 +313,11 @@
 }
 
 .marty-mode-card {
-    background: url('../assets/ui/viewOn.png') no-repeat left top;
-    background-size: 100%;
+    background: url('../assets/ui/viewOnCompactWideLabel.png') no-repeat left top;
+    background-size: 100% 100%;
     position: relative;
     display: inline-block;
-    width: ${css_vh(29.95)};
+    width: ${css_vh(23.18)};
     height: ${css_vh(10.16)};
     margin: 0px;
     margin-bottom: ${css_vh(-0.39)};
@@ -346,7 +346,7 @@
     position: absolute;
     text-align: center;
     top: ${css_vh(3.91)};
-    left: ${css_vh(8.46)};
+    left: ${css_vh(9.24)};
     margin: 0px;
     padding: 0px;
     line-height: ${css_vh(2.60)};
@@ -356,7 +356,7 @@
     font-family: 'Lato Regular';
     font-weight: bold;
     font-size: ${css_vh(1.69)};
-    width: ${css_vh(13.54)};
+    width: ${css_vh(11.97)};
     cursor: default;
     color: #F9A737;
 }
@@ -493,9 +493,9 @@
     position: absolute;
     background:  url('../assets/paint/paintbrush.svg');
     background-size: 100% 100%;
-    width: ${css_vh(5.73)};
-    height: ${css_vh(5.73)};
-    top: ${css_vh(2.21)};
+    width: ${css_vh(5.08)};
+    height: ${css_vh(5.08)};
+    top: ${css_vh(2.54)};
     left: ${css_vh(17.45)};
     margin: 0px;
     padding: 0px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@robotical/martyblocksjr",
-  "version": "4.2.1",
+  "version": "4.2.2",
   "description": "ScratchJr",
   "repository": {
     "type": "git",

package/tests/e2e/accessibility.e2e.test.js

@@ -378,6 +378,7 @@ describe('Accessibility shell audit', () => {
                 const motionButton = document.getElementById('sprite-motion');
                 return motionButton && motionButton.getAttribute('aria-pressed') === 'true';
             }, { timeout: 5_000 });
+            expect((await getFocusStyles(page, '#sprite-motion')).outlineStyle).toBe('none');
             await page.waitForSelector('#forward_block[role="button"]', { timeout: 30_000 });
 
             await expectNamedControls(page, ['#forward_block', '#back_block']);

package/tests/e2e/animated-sprite-paint-disabled.e2e.test.js

@@ -72,7 +72,94 @@ async function openEditor() {
   return { browser, page, errors };
 }
 
-describe("animated sprite paint editing", () => {
+async function dragBlockToScripts(page, categorySelector, blockSelector, blockType) {
+  const blockCount = await page.evaluate(() => window.ScratchJr.getBlocks().length);
+  await page.click(categorySelector);
+  await page.waitForSelector(blockSelector, { visible: true });
+
+  const source = await page.$eval(blockSelector, (node) => {
+    const rect = node.getBoundingClientRect();
+    return {
+      x: rect.left + rect.width / 2,
+      y: rect.top + rect.height / 2,
+    };
+  });
+  const target = await page.$eval("#scripts", (node) => {
+    const rect = node.getBoundingClientRect();
+    return {
+      x: rect.left + Math.min(220, rect.width / 2),
+      y: rect.top + Math.min(170, rect.height / 2),
+    };
+  });
+
+  await page.mouse.move(source.x, source.y);
+  await page.mouse.down();
+  await page.mouse.move(target.x, target.y, { steps: 12 });
+  await page.mouse.up();
+
+  await page.waitForFunction(
+    (before, type) => window.ScratchJr.getBlocks().length > before
+      && window.ScratchJr.getBlocks().some((block) => block.blocktype === type),
+    { timeout: 30_000 },
+    blockCount,
+    blockType
+  );
+}
+
+async function getSelectedSpritePaintState(page) {
+  return page.evaluate(() => {
+    const sprite = window.ScratchJr && window.ScratchJr.getSprite();
+    const thumb = sprite && sprite.thumbnail;
+    const brush = thumb && thumb.querySelector(".brush");
+    if (!sprite || !thumb || !brush) {
+      throw new Error("Selected sprite paint controls were not found");
+    }
+    return {
+      md5: sprite.md5,
+      thumbClass: thumb.className,
+      brushDisplay: window.getComputedStyle(brush).display,
+      blockTypes: window.ScratchJr.getBlocks().map((block) => block.blocktype),
+    };
+  });
+}
+
+describe("sprite paint editing availability", () => {
+  it(
+    "keeps Marty paint editing disabled after dropping a block",
+    async () => {
+      const { browser, page, errors } = await openEditor();
+
+      try {
+        const beforeDrop = await getSelectedSpritePaintState(page);
+        expect(beforeDrop.md5).toBe("Sprites_Marty.svg");
+        expect(beforeDrop.thumbClass).toContain("martynoneditable");
+        expect(beforeDrop.brushDisplay).toBe("none");
+
+        await dragBlockToScripts(page, "#sprite-motion", "#forward_block", "forward");
+
+        const afterDrop = await getSelectedSpritePaintState(page);
+        expect(afterDrop.thumbClass).toContain("martynoneditable");
+        expect(afterDrop.brushDisplay).toBe("none");
+        expect(afterDrop.blockTypes).toContain("forward");
+
+        const paintFrameVisible = await page.evaluate(() => {
+          const brush = window.ScratchJr.getSprite().thumbnail.querySelector(".brush");
+          brush.dispatchEvent(new PointerEvent("pointerdown", {
+            bubbles: true,
+            cancelable: true,
+            pointerType: "mouse",
+          }));
+          return window.getComputedStyle(document.getElementById("paintframe")).display !== "none";
+        });
+        expect(paintFrameVisible).toBe(false);
+        expect(errors).toEqual([]);
+      } finally {
+        await browser.close();
+      }
+    },
+    60_000
+  );
+
   it(
     "disables paint editing for the animated bee in the library and sprite panel",
     async () => {
@@ -231,7 +318,8 @@ describe("animated sprite paint editing", () => {
         expect(layoutState.selectedBackgroundSize).toBe("100% 100%");
         expect(layoutState.name.right).toBeLessThanOrEqual(layoutState.brush.left + 0.5);
         expect(layoutState.brush.left).toBeGreaterThanOrEqual(layoutState.selected.left);
-        expect(layoutState.brush.right).toBeLessThanOrEqual(layoutState.selected.right + 0.5);
+        expect(layoutState.selected.right - layoutState.brush.right)
+          .toBeGreaterThanOrEqual(layoutState.brush.width * 0.1);
         expect(layoutState.brush.top).toBeGreaterThanOrEqual(layoutState.selected.top);
         expect(layoutState.brush.bottom).toBeLessThanOrEqual(layoutState.selected.bottom);
 

package/tests/e2e/marty-script-activation-paths.e2e.test.js

@@ -249,6 +249,77 @@ describe("Marty script activation paths", () => {
         }
     });
 
+    it("keeps the Marty mode sidebar card and full label stable after block drops", async () => {
+        const { browser, page, errors } = await openPage("/editor.html?mode=edit");
+        try {
+            await waitForEditorReady(page);
+            const spriteCardLayout = await page.evaluate(() => {
+                const card = document.querySelector("#spritecc .spritethumb[aria-pressed=\"true\"]");
+                const label = card && card.querySelector(".sname");
+                if (!card || !label) {
+                    throw new Error("Selected sprite card layout was not found");
+                }
+                return {
+                    cardWidth: card.getBoundingClientRect().width,
+                    labelWidth: label.getBoundingClientRect().width
+                };
+            });
+
+            await setMartyMode(page, true);
+            const getMartyCardLayout = () => page.evaluate(() => {
+                const card = document.getElementById("martyModeSidebarCard");
+                const label = card && card.querySelector(".marty-mode-card-label");
+                if (!card || !label) {
+                    throw new Error("Marty mode sidebar card layout was not found");
+                }
+                const cardStyle = window.getComputedStyle(card);
+                const labelStyle = window.getComputedStyle(label);
+                const cardRect = card.getBoundingClientRect();
+                const labelRect = label.getBoundingClientRect();
+                return {
+                    className: card.className,
+                    cardWidth: cardRect.width,
+                    cardLeft: cardRect.left,
+                    cardRight: cardRect.right,
+                    labelText: label.textContent,
+                    labelWidth: labelRect.width,
+                    labelLeft: labelRect.left,
+                    labelRight: labelRect.right,
+                    labelClientWidth: label.clientWidth,
+                    labelScrollWidth: label.scrollWidth,
+                    hasBrush: Boolean(card.querySelector(".brush")),
+                    backgroundImage: cardStyle.backgroundImage,
+                    backgroundSize: cardStyle.backgroundSize,
+                    overflow: labelStyle.overflow,
+                    textOverflow: labelStyle.textOverflow,
+                    whiteSpace: labelStyle.whiteSpace
+                };
+            });
+            const martyCardLayout = await getMartyCardLayout();
+
+            expect(martyCardLayout.cardWidth).toBeCloseTo(spriteCardLayout.cardWidth, 1);
+            expect(martyCardLayout.labelWidth).toBeGreaterThan(spriteCardLayout.labelWidth);
+            expect(martyCardLayout.labelLeft).toBeGreaterThanOrEqual(martyCardLayout.cardLeft);
+            expect(martyCardLayout.labelRight).toBeLessThanOrEqual(martyCardLayout.cardRight);
+            expect(martyCardLayout.labelText).toBe("Marty Mode");
+            expect(martyCardLayout.hasBrush).toBe(false);
+            expect(martyCardLayout.backgroundImage).toContain("viewOnCompactWideLabel.png");
+            expect(martyCardLayout.backgroundSize).toBe("100% 100%");
+            expect(martyCardLayout).toMatchObject({
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap"
+            });
+            expect(martyCardLayout.labelScrollWidth).toBeLessThanOrEqual(martyCardLayout.labelClientWidth);
+
+            await dragMartyBlock(page);
+            expect(await getMartyCardLayout()).toEqual(martyCardLayout);
+            expect(errors).toEqual([]);
+        } finally {
+            await browser.close();
+        }
+    }, 60000);
+
     it("activates the script after duplicating a page in Marty mode", async () => {
         const { browser, page, errors } = await openPage("/editor.html?mode=edit");
         try {