@robotical/martyblocksjr 4.2.3 → 4.2.5

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

@@ -59,6 +59,15 @@
     padding-top: 2px;
 }
 
+.connectButton:focus-visible {
+    outline: ${css_vh(0.3)} solid #133C46;
+    outline-offset: ${css_vh(0.15)};
+}
+
+.connectButton.connectButtonPointerFocus:focus {
+    outline: none;
+}
+
 .extensionAddButton {
     position: absolute;
     right: -${css_vh(1.45)};
@@ -68,7 +77,7 @@
     height: ${css_vh(5)};
     background: transparent;
     border: 0;
-    display: flex;
+    display: none !important;
     justify-content: center;
     align-items: center;
     cursor: pointer;
@@ -107,8 +116,11 @@
 .connectButtonConnected {
     /* background: #4bfaa3; */
     display: grid;
-    grid-template-rows: 1fr 1fr 1fr;
-    grid-template-columns: 1fr;
+    grid-template-rows:
+        minmax(0, 2.2fr)
+        minmax(0, 1fr)
+        minmax(0, 0.95fr);
+    grid-template-columns: minmax(0, 1fr);
     justify-content: space-between;
     align-items: center;
     flex-direction: column;
@@ -116,14 +128,22 @@
 }
 
 .connectButtonConnected .connectIcon {
-    margin-bottom: 1px;
+    margin-bottom: 0;
     display: grid;
-    width: ${css_vh(4.5)}; 
+    width: ${css_vh(4.5)};
+    height: 100%;
     align-items: center;
     align-self: center;
     justify-self: center;
 }
 
+.connectButtonConnected .connectIcon svg,
+.connectButtonConnected .batteryAndSignalContainer svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+
 .iconButtonContainer {
     width: 65%;
     height: 20%;
@@ -142,32 +162,46 @@
 } */
 .connectedButtonContainer {
     position: absolute;
-    top: -10px;
-    left: -10px;
-    width: 30px;
-    height: 30px;
+    top: -${css_vh(0.9)};
+    left: -${css_vh(0.9)};
+    width: ${css_vh(3)};
+    height: ${css_vh(3)};
     background-image: url('../assets/connection/disconnect_btn-default.svg');
 }
-.connectButton:hover .connectedButtonContainer {
-    background-image: url('../assets/connection/disconnect_btn-hover.svg');
+@media (hover: hover) and (pointer: fine) {
+    .connectButton:hover .connectedButtonContainer {
+        background-image: url('../assets/connection/disconnect_btn-hover.svg');
+    }
 }
 
 .raftNameConnectButton {
     display: flex;
+    box-sizing: border-box;
+    min-width: 0;
+    max-width: 100%;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-start;
     color: #17351d;
     align-self: center;
     justify-self: center;
     background: #89c761;
     font-family: 'Lato Regular';
-    text-align: center;
+    font-size: ${css_vh(1.25)};
+    line-height: 1;
+    padding: 0 ${css_vh(0.15)};
+    text-align: left;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
     height: 100%;
     width: 100%;
     border-radius: 4px;
 }
 
 .batteryAndSignalContainer {
+    box-sizing: border-box;
+    min-width: 0;
+    max-width: 100%;
     width: 100%;
     display: flex;
     /* justify-content: space-evenly; */
@@ -177,7 +211,14 @@
 }
 
 .connectButtonConnected .batteryAndSignalContainer {
-    margin-bottom: ${css_vh(0.35)};
+    height: 100%;
+    margin-bottom: 0;
+}
+
+.connectButtonConnected .batteryIndicatorContainer,
+.connectButtonConnected .signalIndicatorContainer {
+    height: 100%;
+    align-items: center;
 }
 
 .batteryIndicatorContainer {

package/package.json

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

package/tests/e2e/marty-connection-ui.e2e.test.js

@@ -1,5 +1,9 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
+const { newHTMLMock } = vi.hoisted(() => ({
+    newHTMLMock: vi.fn()
+}));
+
 vi.mock('@/editor/ScratchJr', () => ({
     default: {
         isMartyModeEnabled: false,
@@ -42,7 +46,7 @@ vi.mock('@/utils/lib', () => ({
     gn: vi.fn(),
     CSSTransition: vi.fn(),
     localx: vi.fn(),
-    newHTML: vi.fn(),
+    newHTML: newHTMLMock,
     newButton: vi.fn(),
     scaleMultiplier: 1,
     fullscreenScaleMultiplier: 1,
@@ -75,18 +79,36 @@ vi.mock('@/html-svgs/sprite_toggle_on', () => ({ spriteToggleOn: '<svg></svg>' }
 vi.mock('@/html-svgs/battery-svg', () => ({ batterySvg: () => '<svg id="battery"></svg>' }));
 vi.mock('@/html-svgs/signal-svg', () => ({ signalSvg: () => '<svg id="signal"></svg>' }));
 vi.mock('@/utils/raft-subscription-helpers', () => ({
-    createRaftConnectionIssueDetectedHelper: () => ({
-        subscribe: vi.fn(),
-        unsubscribe: vi.fn()
-    }),
-    createRaftConnectionIssueResolvedHelper: () => ({
-        subscribe: vi.fn(),
-        unsubscribe: vi.fn()
+    createRaftConnectionIssueDetectedHelper: raft => ({
+        subscribe: vi.fn(callback => {
+            raft.__connectionIssueDetectedCallback = callback;
+        }),
+        unsubscribe: vi.fn(() => {
+            raft.__connectionIssueDetectedUnsubscribed = true;
+        })
     }),
-    raftVerifiedSubscriptionHelper: () => ({
-        subscribe: vi.fn(),
-        unsubscribe: vi.fn()
+    createRaftConnectionIssueResolvedHelper: raft => ({
+        subscribe: vi.fn(callback => {
+            raft.__connectionIssueResolvedCallback = callback;
+        }),
+        unsubscribe: vi.fn(() => {
+            raft.__connectionIssueResolvedUnsubscribed = true;
+        })
     }),
+    raftVerifiedSubscriptionHelper: raft => {
+        let callback;
+        return {
+            subscribe: vi.fn(nextCallback => {
+                callback = nextCallback;
+                raft.__verifiedCallbacks = raft.__verifiedCallbacks || [];
+                raft.__verifiedCallbacks.push(callback);
+            }),
+            unsubscribe: vi.fn(() => {
+                raft.__verifiedUnsubscribeCount = (raft.__verifiedUnsubscribeCount || 0) + 1;
+                raft.__verifiedCallbacks = (raft.__verifiedCallbacks || []).filter(item => item !== callback);
+            })
+        };
+    },
     raftDisconnectedSubscriptionHelper: raft => {
         const helper = {
             subscribe: vi.fn(callback => {
@@ -128,6 +150,11 @@ describe('Marty connection UI', () => {
                 removeMarty: vi.fn(),
                 setMartySensorAvailability: vi.fn()
             },
+            cogManager: {
+                addCog: vi.fn(),
+                wireCogWithBlocks: vi.fn(),
+                removeCog: vi.fn()
+            },
             microBitManager: {
                 addMicroBit: vi.fn(),
                 wireMicroBitWithBlocks: vi.fn(),
@@ -139,6 +166,13 @@ describe('Marty connection UI', () => {
             import('@/editor/ui/UI.js'),
             import('@/editor/ScratchJr')
         ]);
+        newHTMLMock.mockImplementation((type, className, parent) => {
+            const element = new FakeElement(className ? [className] : []);
+            if (parent) {
+                parent.appendChild(element);
+            }
+            return element;
+        });
         UI = uiModule.default;
         ScratchJr = scratchJrModule.default;
         ScratchJr.isMartyModeEnabled = false;
@@ -249,6 +283,102 @@ describe('Marty connection UI', () => {
         expect(button.querySelector('.iconButtonContainer').classList.contains('connectedButtonContainer')).toBe(true);
     });
 
+    it('uses one verified subscription instance and cleans it up after setup', () => {
+        const button = createConnectionButton();
+        const raft = createCogRaft();
+        const setupConnectionButton = vi.fn();
+
+        UI.setupConnectionButtonWhenVerified(button, raft, setupConnectionButton);
+
+        expect(raft.__verifiedCallbacks).toHaveLength(1);
+        const verifiedCallback = raft.__verifiedCallbacks[0];
+        raft.isVerified = true;
+        verifiedCallback();
+        verifiedCallback();
+
+        expect(setupConnectionButton).toHaveBeenCalledTimes(1);
+        expect(setupConnectionButton).toHaveBeenCalledWith(button, raft);
+        expect(raft.__verifiedUnsubscribeCount).toBe(1);
+        expect(raft.__verifiedCallbacks).toHaveLength(0);
+    });
+
+    it('sets up an already verified Cog even when its verified event was missed', () => {
+        const button = createConnectionButton();
+        const raft = createCogRaft();
+        const setupConnectionButton = vi.fn();
+        raft.isVerified = true;
+
+        UI.setupConnectionButtonWhenVerified(button, raft, setupConnectionButton);
+
+        expect(setupConnectionButton).toHaveBeenCalledWith(button, raft);
+        expect(raft.__verifiedUnsubscribeCount).toBe(1);
+        expect(raft.__verifiedCallbacks).toHaveLength(0);
+    });
+
+    it('reconciles an existing verified Cog after the host application manager is injected', () => {
+        const cogButton = createConnectionButton();
+        const martyButton = createConnectionButton();
+        const raft = createCogRaft();
+        raft.isVerified = true;
+        const setupCogSpy = vi.spyOn(UI, 'setupCogConnectionButton').mockImplementation(() => {});
+        window.applicationManager = undefined;
+
+        expect(UI.reconcileConnectionButtonsWhenApplicationManagerReady(cogButton, martyButton)).toBe(false);
+        window.applicationManager = {
+            getTheCurrentlySelectedDeviceOrFirstOfItsKind: vi.fn(type => type === 'Cog' ? raft : undefined)
+        };
+        vi.advanceTimersByTime(100);
+
+        expect(setupCogSpy).toHaveBeenCalledWith(cogButton, raft);
+        expect(raft.__verifiedUnsubscribeCount).toBe(1);
+        setupCogSpy.mockRestore();
+    });
+
+    it('disconnects and clears a stale Cog when the connection issue countdown expires', () => {
+        const button = createConnectionButton();
+        const raft = createCogRaft();
+        window.applicationManager.disconnectGeneric = vi.fn((disconnectedRaft, onDisconnected) => {
+            onDisconnected();
+        });
+
+        UI.setupCogConnectionButton(button, raft);
+        raft.__connectionIssueDetectedCallback();
+
+        expect(button.querySelector('.connIssueOverlay').textContent).toBe('A11Y_CONNECTION_LOST 60');
+        expect(button.style.pointerEvents).toBe('none');
+
+        vi.advanceTimersByTime(59000);
+        expect(window.applicationManager.disconnectGeneric).not.toHaveBeenCalled();
+        expect(button.querySelector('.connIssueOverlay').textContent).toBe('A11Y_CONNECTION_LOST 1');
+
+        vi.advanceTimersByTime(1000);
+
+        expect(window.applicationManager.disconnectGeneric).toHaveBeenCalledWith(raft, expect.any(Function), true);
+        expect(window.cogManager.removeCog).toHaveBeenCalledWith(raft);
+        expect(button.querySelector('.connIssueOverlay')).toBeNull();
+        expect(button.style.pointerEvents).toBe('auto');
+        expect(button.classList.contains('connectButtonConnected')).toBe(false);
+        expect(raft.__connectionIssueDetectedUnsubscribed).toBe(true);
+        expect(raft.__connectionIssueResolvedUnsubscribed).toBe(true);
+    });
+
+    it('cancels the Cog countdown when the connection issue resolves', () => {
+        const button = createConnectionButton();
+        const raft = createCogRaft();
+
+        UI.setupCogConnectionButton(button, raft);
+        raft.__connectionIssueDetectedCallback();
+        vi.advanceTimersByTime(30000);
+        raft.__connectionIssueResolvedCallback();
+        vi.advanceTimersByTime(31000);
+
+        expect(window.applicationManager.disconnectGeneric).not.toHaveBeenCalled();
+        expect(button.querySelector('.connIssueOverlay')).toBeNull();
+        expect(button.style.pointerEvents).toBe('auto');
+
+        raft.__disconnectCallback();
+    });
+
     it('uses a friendly message when the micro:bit chooser is cancelled', () => {
         const message = UI.getMicroBitConnectionErrorMessage(
             new DOMException('User cancelled the requestDevice() chooser.', 'NotFoundError')
@@ -293,6 +423,19 @@ function createMartyRaft() {
     };
 }
 
+function createCogRaft() {
+    return {
+        id: 'cog-1',
+        isVerified: false,
+        hasVerifiedConnection() {
+            return this.isVerified;
+        },
+        getFriendlyName: () => 'Cog One',
+        getBatteryStrength: () => 70,
+        getRSSI: () => -45
+    };
+}
+
 function createConnectionButton() {
     const button = new FakeElement();
     button.children['.iconButtonContainer'] = new FakeElement(['iconButtonContainer', 'notConnectedButtonContainer']);
@@ -325,6 +468,7 @@ class FakeElement {
     constructor(classes = []) {
         this.classList = new FakeClassList(classes);
         this.children = {};
+        this.childNodes = [];
         this.style = {};
         this.attributes = {};
         this.textContent = '';
@@ -333,7 +477,28 @@ class FakeElement {
     }
 
     querySelector(selector) {
-        return this.children[selector] || null;
+        if (this.children[selector]) {
+            return this.children[selector];
+        }
+        if (selector.startsWith('.')) {
+            const className = selector.slice(1);
+            return this.childNodes.find(child => child.classList.contains(className)) || null;
+        }
+        return null;
+    }
+
+    appendChild(child) {
+        if (!this.childNodes.includes(child)) {
+            this.childNodes.push(child);
+        }
+        child.parentNode = this;
+        return child;
+    }
+
+    removeChild(child) {
+        this.childNodes = this.childNodes.filter(item => item !== child);
+        child.parentNode = null;
+        return child;
     }
 
     setAttribute(name, value) {