Enhancement: Keep FedCM EE state paused by default

.github/workflows/tests-cli-e2e-tests.yml

@@ -38,7 +38,8 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version-file: '.nvmrc'
+          cache: npm
 
       - name: Set Chrome executable path
         run: |

.github/workflows/tests-extension-e2e-tests.yml

@@ -44,7 +44,8 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version-file: '.nvmrc'
+          cache: npm
 
       - name: Set Chrome executable path
         run: |

packages/ee-workflow/src/main.ts

@@ -171,6 +171,7 @@ export class Main {
    * @param position.y - The y-coordinate of the canvas.
    * @param figureToStart - The figure to start from.
    * @param preloader - The preloader function to run before setup.
+   * @param paused - Whether to start the canvas in a paused state.
    * @param performanceCheck - Whether to enable performance check.
    */
   constructor(
@@ -183,6 +184,7 @@ export class Main {
     position: { x: number; y: number } = { x: 0, y: 0 },
     private figureToStart?: string,
     private preloader?: (p: p5) => void,
+    paused = false,
     performanceCheck = false
   ) {
     this.p5 = new p5((p: p5) => this.init(p, position), this.container);
@@ -195,6 +197,12 @@ export class Main {
       this.stats.dom.style.top = '0';
       document.body.appendChild(this.stats.dom);
     }
+
+    if (paused) {
+      if (!this.figureToStart) {
+        this.togglePause(true);
+      }
+    }
   }
 
   /**
@@ -524,12 +532,18 @@ export class Main {
       this.runner(true);
     }
 
-    while (
-      this.figureToStart &&
-      this.stepsQueue.length > 0 &&
-      !this.instantQueue.length
-    ) {
-      this.runner(false, false, true);
+    if (this.figureToStart) {
+      while (
+        this.figureToStart &&
+        this.stepsQueue.length > 0 &&
+        !this.instantQueue.length
+      ) {
+        this.runner(false, false, true);
+      }
+
+      if (!this.figureToStart) {
+        this.togglePause(true);
+      }
     }
 
     this.stats?.end();

packages/extension/package.json

@@ -28,9 +28,9 @@
     "@google-psat/explorable-explanations": "*",
     "@google-psat/i18n": "*",
     "@google-psat/report": "*",
-    "@p5-wrapper/react": "^5.0.0-rc.2",
-    "@types/lodash-es": "^4.17.12",
+    "@p5-wrapper/react": "5.0.0-rc.2",
     "@types/elliptic": "^6.4.18",
+    "@types/lodash-es": "^4.17.12",
     "classnames": "^2.3.2",
     "d3": "^7.9.0",
     "elliptic": "^6.6.1",

packages/extension/src/view/devtools/pages/siteBoundaries/federatedCredential/explorableExplanation/canvas/index.ts

@@ -250,7 +250,9 @@ export const initializeCanvas = (
     flowContainer,
     undefined,
     undefined,
-    idToStartWith
+    idToStartWith,
+    undefined,
+    true
   );
 
   const componentFigureFactory = new FigureFactory(

packages/extension/src/view/devtools/pages/siteBoundaries/federatedCredential/explorableExplanation/store/provider.tsx

@@ -35,7 +35,7 @@ import { scenarios } from './scenarios';
 
 const Provider = ({ children }: PropsWithChildren) => {
   const [canvas, setCanvas] = useState<Main>();
-  const [play, setPlay] = useState<boolean>(true);
+  const [play, setPlay] = useState<boolean>(false);
   const [speed, _setSpeed] = useState<number>(1.5);
   const [currentScenarioKey, setCurrentScenarioKey] = useState<ScenarioKeys>(
     ScenarioKeys.REGISTRATION

packages/extension/src/view/devtools/pages/siteBoundaries/federatedCredential/explorableExplanation/tests/index.tsx

@@ -43,10 +43,10 @@ describe('Index file', () => {
 
     const playPauseButton = screen.getByTestId('play-pause-button');
     expect(playPauseButton).toBeInTheDocument();
-    expect(playPauseButton).toHaveAccessibleDescription('Pause');
+    expect(playPauseButton).toHaveAccessibleDescription('Play');
 
     fireEvent.click(playPauseButton!);
-    expect(playPauseButton).toHaveAccessibleDescription('Play');
+    expect(playPauseButton).toHaveAccessibleDescription('Pause');
 
     const permissionsNode = screen.getByText('5. Permissions');
     expect(permissionsNode).toBeInTheDocument();