From 3b253455489e32c0dbe9542c5c2e4fda26616b32 Mon Sep 17 00:00:00 2001
From: Alok Yadav <alokkumaryadav.cse@gmail.com>
Date: Thu, 20 Mar 2025 19:59:49 +0530
Subject: [PATCH 1/5] feat: add run from ASAR button

---
 src/renderer/components/commands-runner.tsx   |  40 +-
 src/renderer/components/commands.tsx          |   2 +
 src/renderer/runner.ts                        |  14 +-
 .../commands-runner-spec.tsx.snap             | 405 +++++++++++++++---
 .../__snapshots__/commands-spec.tsx.snap      |  10 +
 5 files changed, 407 insertions(+), 64 deletions(-)

diff --git a/src/renderer/components/commands-runner.tsx b/src/renderer/components/commands-runner.tsx
index e2fdd124ae..14e939dacd 100644
--- a/src/renderer/components/commands-runner.tsx
+++ b/src/renderer/components/commands-runner.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 
-import { Button, ButtonProps, Spinner } from '@blueprintjs/core';
+import { Button, ButtonGroup, ButtonProps, Spinner } from '@blueprintjs/core';
+import { Popover2 } from '@blueprintjs/popover2';
 import { observer } from 'mobx-react';
 
 import { InstallState, VersionSource } from '../../interfaces';
@@ -16,6 +17,30 @@ interface RunnerProps {
  */
 export const Runner = observer(
   class Runner extends React.Component<RunnerProps> {
+    private renderAsarButton = (disabled: boolean) => {
+      const asarButton = (
+        <Button
+          text="Run from ASAR"
+          icon="play"
+          disabled={disabled}
+          small
+          onClick={() => {
+            window.app.runner.run({ runFromAsar: true });
+          }}
+        />
+      );
+
+      return (
+        <Popover2 fill={true} content={asarButton} placement="bottom">
+          <Button
+            icon="caret-down"
+            style={{ minWidth: 20 }}
+            disabled={disabled}
+          />
+        </Popover2>
+      );
+    };
+
     public render() {
       const { downloaded, downloading, missing, installing, installed } =
         InstallState;
@@ -59,7 +84,9 @@ export const Runner = observer(
             props.icon = <Spinner size={16} />;
           } else {
             props.text = 'Run';
-            props.onClick = window.app.runner.run;
+            props.onClick = () => {
+              window.app.runner.run({ runFromAsar: false });
+            };
             props.icon = 'play';
           }
           break;
@@ -76,8 +103,15 @@ export const Runner = observer(
           props.icon = <Spinner size={16} />;
         }
       }
+      const isAsarDisabled: boolean =
+        props.disabled || isRunning || isInstallingModules;
 
-      return <Button id="button-run" {...props} type={undefined} />;
+      return (
+        <ButtonGroup>
+          <Button id="button-run" {...props} type={undefined} />
+          {this.renderAsarButton(isAsarDisabled)}
+        </ButtonGroup>
+      );
     }
   },
 );
diff --git a/src/renderer/components/commands.tsx b/src/renderer/components/commands.tsx
index 86292d2b38..933b774660 100644
--- a/src/renderer/components/commands.tsx
+++ b/src/renderer/components/commands.tsx
@@ -55,6 +55,8 @@ export const Commands = observer(
             </ControlGroup>
             <ControlGroup fill={true} vertical={false}>
               <VersionChooser appState={appState} />
+            </ControlGroup>
+            <ControlGroup fill={true} vertical={false}>
               <Runner appState={appState} />
             </ControlGroup>
             {isBisectCommandShowing && (
diff --git a/src/renderer/runner.ts b/src/renderer/runner.ts
index fa38415a9c..069b0034da 100644
--- a/src/renderer/runner.ts
+++ b/src/renderer/runner.ts
@@ -20,11 +20,16 @@ export enum ForgeCommands {
   MAKE = 'make',
 }
 
+interface runOptions {
+  runFromAsar: boolean;
+}
+
 interface RunFiddleParams {
   localPath: string | undefined;
   isValidBuild: boolean; // If the localPath is a valid Electron build
   version: string; // The user selected version
   dir: string;
+  runFromAsar: boolean;
 }
 
 const resultString: Record<RunResult, string> = Object.freeze({
@@ -139,8 +144,9 @@ export class Runner {
   /**
    * Actually run the fiddle.
    */
-  public async run(): Promise<RunResult> {
+  public async run(runOptions?: runOptions): Promise<RunResult> {
     const options = { includeDependencies: false, includeElectron: false };
+    const runFromAsar = runOptions?.runFromAsar ?? false;
 
     const { appState } = this;
     const currentRunnable = appState.currentElectronVersion;
@@ -220,6 +226,7 @@ export class Runner {
       isValidBuild,
       dir,
       version,
+      runFromAsar,
     });
   }
 
@@ -362,12 +369,15 @@ export class Runner {
    * or the user selected electron version
    */
   private async runFiddle(params: RunFiddleParams): Promise<RunResult> {
-    const { version, dir } = params;
+    const { version, dir, runFromAsar } = params;
     const { pushOutput, flushOutput, executionFlags } = this.appState;
     const env = this.buildChildEnvVars();
 
     // Add user-specified cli flags if any have been set.
     const options = [dir, '--inspect'].concat(executionFlags);
+    if (runFromAsar) {
+      options.push('runFromAsar');
+    }
 
     const cleanup = async () => {
       flushOutput();
diff --git a/tests/renderer/components/__snapshots__/commands-runner-spec.tsx.snap b/tests/renderer/components/__snapshots__/commands-runner-spec.tsx.snap
index 11b5693e11..b603fc02ab 100644
--- a/tests/renderer/components/__snapshots__/commands-runner-spec.tsx.snap
+++ b/tests/renderer/components/__snapshots__/commands-runner-spec.tsx.snap
@@ -1,85 +1,372 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Runner component renders InstallState.downloading 1`] = `
-<Blueprint3.Button
-  disabled={true}
-  icon={
-    <Blueprint3.Spinner
-      size={16}
-      value={50}
+<Blueprint3.ButtonGroup>
+  <Blueprint3.Button
+    disabled={true}
+    icon={
+      <Blueprint3.Spinner
+        size={16}
+        value={50}
+      />
+    }
+    id="button-run"
+    text="Downloading"
+  />
+  <Blueprint3.Popover2
+    boundary="clippingParents"
+    captureDismiss={false}
+    content={
+      <Blueprint3.Button
+        disabled={true}
+        icon="play"
+        onClick={[Function]}
+        small={true}
+        text="Run from ASAR"
+      />
+    }
+    defaultIsOpen={false}
+    disabled={false}
+    fill={true}
+    hasBackdrop={false}
+    hoverCloseDelay={300}
+    hoverOpenDelay={150}
+    inheritDarkTheme={true}
+    interactionKind="click"
+    minimal={false}
+    openOnTargetFocus={true}
+    placement="bottom"
+    positioningStrategy="absolute"
+    shouldReturnFocusOnClose={false}
+    targetTagName="span"
+    transitionDuration={300}
+    usePortal={true}
+  >
+    <Blueprint3.Button
+      disabled={true}
+      icon="caret-down"
+      style={
+        {
+          "minWidth": 20,
+        }
+      }
     />
-  }
-  id="button-run"
-  text="Downloading"
-/>
+  </Blueprint3.Popover2>
+</Blueprint3.ButtonGroup>
 `;
 
 exports[`Runner component renders InstallState.installed 1`] = `
-<Blueprint3.Button
-  disabled={false}
-  icon="play"
-  id="button-run"
-  onClick={[MockFunction]}
-  text="Run"
-/>
+<Blueprint3.ButtonGroup>
+  <Blueprint3.Button
+    disabled={false}
+    icon="play"
+    id="button-run"
+    onClick={[Function]}
+    text="Run"
+  />
+  <Blueprint3.Popover2
+    boundary="clippingParents"
+    captureDismiss={false}
+    content={
+      <Blueprint3.Button
+        disabled={false}
+        icon="play"
+        onClick={[Function]}
+        small={true}
+        text="Run from ASAR"
+      />
+    }
+    defaultIsOpen={false}
+    disabled={false}
+    fill={true}
+    hasBackdrop={false}
+    hoverCloseDelay={300}
+    hoverOpenDelay={150}
+    inheritDarkTheme={true}
+    interactionKind="click"
+    minimal={false}
+    openOnTargetFocus={true}
+    placement="bottom"
+    positioningStrategy="absolute"
+    shouldReturnFocusOnClose={false}
+    targetTagName="span"
+    transitionDuration={300}
+    usePortal={true}
+  >
+    <Blueprint3.Button
+      disabled={false}
+      icon="caret-down"
+      style={
+        {
+          "minWidth": 20,
+        }
+      }
+    />
+  </Blueprint3.Popover2>
+</Blueprint3.ButtonGroup>
 `;
 
 exports[`Runner component renders InstallState.installing 1`] = `
-<Blueprint3.Button
-  disabled={true}
-  icon={
-    <Blueprint3.Spinner
-      size={16}
+<Blueprint3.ButtonGroup>
+  <Blueprint3.Button
+    disabled={true}
+    icon={
+      <Blueprint3.Spinner
+        size={16}
+      />
+    }
+    id="button-run"
+    text="Unzipping"
+  />
+  <Blueprint3.Popover2
+    boundary="clippingParents"
+    captureDismiss={false}
+    content={
+      <Blueprint3.Button
+        disabled={true}
+        icon="play"
+        onClick={[Function]}
+        small={true}
+        text="Run from ASAR"
+      />
+    }
+    defaultIsOpen={false}
+    disabled={false}
+    fill={true}
+    hasBackdrop={false}
+    hoverCloseDelay={300}
+    hoverOpenDelay={150}
+    inheritDarkTheme={true}
+    interactionKind="click"
+    minimal={false}
+    openOnTargetFocus={true}
+    placement="bottom"
+    positioningStrategy="absolute"
+    shouldReturnFocusOnClose={false}
+    targetTagName="span"
+    transitionDuration={300}
+    usePortal={true}
+  >
+    <Blueprint3.Button
+      disabled={true}
+      icon="caret-down"
+      style={
+        {
+          "minWidth": 20,
+        }
+      }
     />
-  }
-  id="button-run"
-  text="Unzipping"
-/>
+  </Blueprint3.Popover2>
+</Blueprint3.ButtonGroup>
 `;
 
 exports[`Runner component renders InstallState.missing 1`] = `
-<Blueprint3.Button
-  disabled={true}
-  icon={
-    <Blueprint3.Spinner
-      size={16}
+<Blueprint3.ButtonGroup>
+  <Blueprint3.Button
+    disabled={true}
+    icon={
+      <Blueprint3.Spinner
+        size={16}
+      />
+    }
+    id="button-run"
+    text="Checking status"
+  />
+  <Blueprint3.Popover2
+    boundary="clippingParents"
+    captureDismiss={false}
+    content={
+      <Blueprint3.Button
+        disabled={true}
+        icon="play"
+        onClick={[Function]}
+        small={true}
+        text="Run from ASAR"
+      />
+    }
+    defaultIsOpen={false}
+    disabled={false}
+    fill={true}
+    hasBackdrop={false}
+    hoverCloseDelay={300}
+    hoverOpenDelay={150}
+    inheritDarkTheme={true}
+    interactionKind="click"
+    minimal={false}
+    openOnTargetFocus={true}
+    placement="bottom"
+    positioningStrategy="absolute"
+    shouldReturnFocusOnClose={false}
+    targetTagName="span"
+    transitionDuration={300}
+    usePortal={true}
+  >
+    <Blueprint3.Button
+      disabled={true}
+      icon="caret-down"
+      style={
+        {
+          "minWidth": 20,
+        }
+      }
     />
-  }
-  id="button-run"
-  text="Checking status"
-/>
+  </Blueprint3.Popover2>
+</Blueprint3.ButtonGroup>
 `;
 
 exports[`Runner component renders idle 1`] = `
-<Blueprint3.Button
-  disabled={false}
-  icon="play"
-  id="button-run"
-  onClick={[MockFunction]}
-  text="Run"
-/>
+<Blueprint3.ButtonGroup>
+  <Blueprint3.Button
+    disabled={false}
+    icon="play"
+    id="button-run"
+    onClick={[Function]}
+    text="Run"
+  />
+  <Blueprint3.Popover2
+    boundary="clippingParents"
+    captureDismiss={false}
+    content={
+      <Blueprint3.Button
+        disabled={false}
+        icon="play"
+        onClick={[Function]}
+        small={true}
+        text="Run from ASAR"
+      />
+    }
+    defaultIsOpen={false}
+    disabled={false}
+    fill={true}
+    hasBackdrop={false}
+    hoverCloseDelay={300}
+    hoverOpenDelay={150}
+    inheritDarkTheme={true}
+    interactionKind="click"
+    minimal={false}
+    openOnTargetFocus={true}
+    placement="bottom"
+    positioningStrategy="absolute"
+    shouldReturnFocusOnClose={false}
+    targetTagName="span"
+    transitionDuration={300}
+    usePortal={true}
+  >
+    <Blueprint3.Button
+      disabled={false}
+      icon="caret-down"
+      style={
+        {
+          "minWidth": 20,
+        }
+      }
+    />
+  </Blueprint3.Popover2>
+</Blueprint3.ButtonGroup>
 `;
 
 exports[`Runner component renders installing modules 1`] = `
-<Blueprint3.Button
-  disabled={false}
-  icon={
-    <Blueprint3.Spinner
-      size={16}
+<Blueprint3.ButtonGroup>
+  <Blueprint3.Button
+    disabled={false}
+    icon={
+      <Blueprint3.Spinner
+        size={16}
+      />
+    }
+    id="button-run"
+    text="Installing modules"
+  />
+  <Blueprint3.Popover2
+    boundary="clippingParents"
+    captureDismiss={false}
+    content={
+      <Blueprint3.Button
+        disabled={true}
+        icon="play"
+        onClick={[Function]}
+        small={true}
+        text="Run from ASAR"
+      />
+    }
+    defaultIsOpen={false}
+    disabled={false}
+    fill={true}
+    hasBackdrop={false}
+    hoverCloseDelay={300}
+    hoverOpenDelay={150}
+    inheritDarkTheme={true}
+    interactionKind="click"
+    minimal={false}
+    openOnTargetFocus={true}
+    placement="bottom"
+    positioningStrategy="absolute"
+    shouldReturnFocusOnClose={false}
+    targetTagName="span"
+    transitionDuration={300}
+    usePortal={true}
+  >
+    <Blueprint3.Button
+      disabled={true}
+      icon="caret-down"
+      style={
+        {
+          "minWidth": 20,
+        }
+      }
     />
-  }
-  id="button-run"
-  text="Installing modules"
-/>
+  </Blueprint3.Popover2>
+</Blueprint3.ButtonGroup>
 `;
 
 exports[`Runner component renders running 1`] = `
-<Blueprint3.Button
-  active={true}
-  disabled={false}
-  icon="stop"
-  id="button-run"
-  onClick={[MockFunction]}
-  text="Stop"
-/>
+<Blueprint3.ButtonGroup>
+  <Blueprint3.Button
+    active={true}
+    disabled={false}
+    icon="stop"
+    id="button-run"
+    onClick={[MockFunction]}
+    text="Stop"
+  />
+  <Blueprint3.Popover2
+    boundary="clippingParents"
+    captureDismiss={false}
+    content={
+      <Blueprint3.Button
+        disabled={true}
+        icon="play"
+        onClick={[Function]}
+        small={true}
+        text="Run from ASAR"
+      />
+    }
+    defaultIsOpen={false}
+    disabled={false}
+    fill={true}
+    hasBackdrop={false}
+    hoverCloseDelay={300}
+    hoverOpenDelay={150}
+    inheritDarkTheme={true}
+    interactionKind="click"
+    minimal={false}
+    openOnTargetFocus={true}
+    placement="bottom"
+    positioningStrategy="absolute"
+    shouldReturnFocusOnClose={false}
+    targetTagName="span"
+    transitionDuration={300}
+    usePortal={true}
+  >
+    <Blueprint3.Button
+      disabled={true}
+      icon="caret-down"
+      style={
+        {
+          "minWidth": 20,
+        }
+      }
+    />
+  </Blueprint3.Popover2>
+</Blueprint3.ButtonGroup>
 `;
diff --git a/tests/renderer/components/__snapshots__/commands-spec.tsx.snap b/tests/renderer/components/__snapshots__/commands-spec.tsx.snap
index 58a2265b00..cd642dd334 100644
--- a/tests/renderer/components/__snapshots__/commands-spec.tsx.snap
+++ b/tests/renderer/components/__snapshots__/commands-spec.tsx.snap
@@ -23,6 +23,11 @@ exports[`Commands component renders when system is darwin 1`] = `
       <version-chooser
         appState={"default StateMock"}
       />
+    </Blueprint3.ControlGroup>
+    <Blueprint3.ControlGroup
+      fill={true}
+      vertical={false}
+    >
       <runner
         appState={"default StateMock"}
       />
@@ -77,6 +82,11 @@ exports[`Commands component renders when system not is darwin 1`] = `
       <version-chooser
         appState={"default StateMock"}
       />
+    </Blueprint3.ControlGroup>
+    <Blueprint3.ControlGroup
+      fill={true}
+      vertical={false}
+    >
       <runner
         appState={"default StateMock"}
       />

From 7fe1b2113b573012ef6ee48e6030879667a294fb Mon Sep 17 00:00:00 2001
From: Alok Yadav <alokkumaryadav.cse@gmail.com>
Date: Sat, 29 Mar 2025 14:21:52 +0530
Subject: [PATCH 2/5] refactor: extract Asar button UI into a separate
 component

---
 src/renderer/components/commands-runner.tsx   |  46 ++-
 .../commands-runner-spec.tsx.snap             | 290 ++----------------
 2 files changed, 40 insertions(+), 296 deletions(-)

diff --git a/src/renderer/components/commands-runner.tsx b/src/renderer/components/commands-runner.tsx
index 14e939dacd..1e72113195 100644
--- a/src/renderer/components/commands-runner.tsx
+++ b/src/renderer/components/commands-runner.tsx
@@ -17,30 +17,6 @@ interface RunnerProps {
  */
 export const Runner = observer(
   class Runner extends React.Component<RunnerProps> {
-    private renderAsarButton = (disabled: boolean) => {
-      const asarButton = (
-        <Button
-          text="Run from ASAR"
-          icon="play"
-          disabled={disabled}
-          small
-          onClick={() => {
-            window.app.runner.run({ runFromAsar: true });
-          }}
-        />
-      );
-
-      return (
-        <Popover2 fill={true} content={asarButton} placement="bottom">
-          <Button
-            icon="caret-down"
-            style={{ minWidth: 20 }}
-            disabled={disabled}
-          />
-        </Popover2>
-      );
-    };
-
     public render() {
       const { downloaded, downloading, missing, installing, installed } =
         InstallState;
@@ -109,9 +85,29 @@ export const Runner = observer(
       return (
         <ButtonGroup>
           <Button id="button-run" {...props} type={undefined} />
-          {this.renderAsarButton(isAsarDisabled)}
+          <AsarButton disabled={isAsarDisabled} />
         </ButtonGroup>
       );
     }
   },
 );
+
+const AsarButton = ({ disabled }: { disabled: boolean }): JSX.Element => {
+  const asarButton = (
+    <Button
+      text="Run from ASAR"
+      icon="play"
+      disabled={disabled}
+      small={true}
+      onClick={() => {
+        window.app.runner.run({ runFromAsar: true });
+      }}
+    />
+  );
+
+  return (
+    <Popover2 fill={true} content={asarButton} placement="bottom">
+      <Button icon="caret-down" style={{ minWidth: 20 }} disabled={disabled} />
+    </Popover2>
+  );
+};
diff --git a/tests/renderer/components/__snapshots__/commands-runner-spec.tsx.snap b/tests/renderer/components/__snapshots__/commands-runner-spec.tsx.snap
index b603fc02ab..ce8a4aa652 100644
--- a/tests/renderer/components/__snapshots__/commands-runner-spec.tsx.snap
+++ b/tests/renderer/components/__snapshots__/commands-runner-spec.tsx.snap
@@ -13,45 +13,9 @@ exports[`Runner component renders InstallState.downloading 1`] = `
     id="button-run"
     text="Downloading"
   />
-  <Blueprint3.Popover2
-    boundary="clippingParents"
-    captureDismiss={false}
-    content={
-      <Blueprint3.Button
-        disabled={true}
-        icon="play"
-        onClick={[Function]}
-        small={true}
-        text="Run from ASAR"
-      />
-    }
-    defaultIsOpen={false}
-    disabled={false}
-    fill={true}
-    hasBackdrop={false}
-    hoverCloseDelay={300}
-    hoverOpenDelay={150}
-    inheritDarkTheme={true}
-    interactionKind="click"
-    minimal={false}
-    openOnTargetFocus={true}
-    placement="bottom"
-    positioningStrategy="absolute"
-    shouldReturnFocusOnClose={false}
-    targetTagName="span"
-    transitionDuration={300}
-    usePortal={true}
-  >
-    <Blueprint3.Button
-      disabled={true}
-      icon="caret-down"
-      style={
-        {
-          "minWidth": 20,
-        }
-      }
-    />
-  </Blueprint3.Popover2>
+  <AsarButton
+    disabled={true}
+  />
 </Blueprint3.ButtonGroup>
 `;
 
@@ -64,45 +28,9 @@ exports[`Runner component renders InstallState.installed 1`] = `
     onClick={[Function]}
     text="Run"
   />
-  <Blueprint3.Popover2
-    boundary="clippingParents"
-    captureDismiss={false}
-    content={
-      <Blueprint3.Button
-        disabled={false}
-        icon="play"
-        onClick={[Function]}
-        small={true}
-        text="Run from ASAR"
-      />
-    }
-    defaultIsOpen={false}
+  <AsarButton
     disabled={false}
-    fill={true}
-    hasBackdrop={false}
-    hoverCloseDelay={300}
-    hoverOpenDelay={150}
-    inheritDarkTheme={true}
-    interactionKind="click"
-    minimal={false}
-    openOnTargetFocus={true}
-    placement="bottom"
-    positioningStrategy="absolute"
-    shouldReturnFocusOnClose={false}
-    targetTagName="span"
-    transitionDuration={300}
-    usePortal={true}
-  >
-    <Blueprint3.Button
-      disabled={false}
-      icon="caret-down"
-      style={
-        {
-          "minWidth": 20,
-        }
-      }
-    />
-  </Blueprint3.Popover2>
+  />
 </Blueprint3.ButtonGroup>
 `;
 
@@ -118,45 +46,9 @@ exports[`Runner component renders InstallState.installing 1`] = `
     id="button-run"
     text="Unzipping"
   />
-  <Blueprint3.Popover2
-    boundary="clippingParents"
-    captureDismiss={false}
-    content={
-      <Blueprint3.Button
-        disabled={true}
-        icon="play"
-        onClick={[Function]}
-        small={true}
-        text="Run from ASAR"
-      />
-    }
-    defaultIsOpen={false}
-    disabled={false}
-    fill={true}
-    hasBackdrop={false}
-    hoverCloseDelay={300}
-    hoverOpenDelay={150}
-    inheritDarkTheme={true}
-    interactionKind="click"
-    minimal={false}
-    openOnTargetFocus={true}
-    placement="bottom"
-    positioningStrategy="absolute"
-    shouldReturnFocusOnClose={false}
-    targetTagName="span"
-    transitionDuration={300}
-    usePortal={true}
-  >
-    <Blueprint3.Button
-      disabled={true}
-      icon="caret-down"
-      style={
-        {
-          "minWidth": 20,
-        }
-      }
-    />
-  </Blueprint3.Popover2>
+  <AsarButton
+    disabled={true}
+  />
 </Blueprint3.ButtonGroup>
 `;
 
@@ -172,45 +64,9 @@ exports[`Runner component renders InstallState.missing 1`] = `
     id="button-run"
     text="Checking status"
   />
-  <Blueprint3.Popover2
-    boundary="clippingParents"
-    captureDismiss={false}
-    content={
-      <Blueprint3.Button
-        disabled={true}
-        icon="play"
-        onClick={[Function]}
-        small={true}
-        text="Run from ASAR"
-      />
-    }
-    defaultIsOpen={false}
-    disabled={false}
-    fill={true}
-    hasBackdrop={false}
-    hoverCloseDelay={300}
-    hoverOpenDelay={150}
-    inheritDarkTheme={true}
-    interactionKind="click"
-    minimal={false}
-    openOnTargetFocus={true}
-    placement="bottom"
-    positioningStrategy="absolute"
-    shouldReturnFocusOnClose={false}
-    targetTagName="span"
-    transitionDuration={300}
-    usePortal={true}
-  >
-    <Blueprint3.Button
-      disabled={true}
-      icon="caret-down"
-      style={
-        {
-          "minWidth": 20,
-        }
-      }
-    />
-  </Blueprint3.Popover2>
+  <AsarButton
+    disabled={true}
+  />
 </Blueprint3.ButtonGroup>
 `;
 
@@ -223,45 +79,9 @@ exports[`Runner component renders idle 1`] = `
     onClick={[Function]}
     text="Run"
   />
-  <Blueprint3.Popover2
-    boundary="clippingParents"
-    captureDismiss={false}
-    content={
-      <Blueprint3.Button
-        disabled={false}
-        icon="play"
-        onClick={[Function]}
-        small={true}
-        text="Run from ASAR"
-      />
-    }
-    defaultIsOpen={false}
+  <AsarButton
     disabled={false}
-    fill={true}
-    hasBackdrop={false}
-    hoverCloseDelay={300}
-    hoverOpenDelay={150}
-    inheritDarkTheme={true}
-    interactionKind="click"
-    minimal={false}
-    openOnTargetFocus={true}
-    placement="bottom"
-    positioningStrategy="absolute"
-    shouldReturnFocusOnClose={false}
-    targetTagName="span"
-    transitionDuration={300}
-    usePortal={true}
-  >
-    <Blueprint3.Button
-      disabled={false}
-      icon="caret-down"
-      style={
-        {
-          "minWidth": 20,
-        }
-      }
-    />
-  </Blueprint3.Popover2>
+  />
 </Blueprint3.ButtonGroup>
 `;
 
@@ -277,45 +97,9 @@ exports[`Runner component renders installing modules 1`] = `
     id="button-run"
     text="Installing modules"
   />
-  <Blueprint3.Popover2
-    boundary="clippingParents"
-    captureDismiss={false}
-    content={
-      <Blueprint3.Button
-        disabled={true}
-        icon="play"
-        onClick={[Function]}
-        small={true}
-        text="Run from ASAR"
-      />
-    }
-    defaultIsOpen={false}
-    disabled={false}
-    fill={true}
-    hasBackdrop={false}
-    hoverCloseDelay={300}
-    hoverOpenDelay={150}
-    inheritDarkTheme={true}
-    interactionKind="click"
-    minimal={false}
-    openOnTargetFocus={true}
-    placement="bottom"
-    positioningStrategy="absolute"
-    shouldReturnFocusOnClose={false}
-    targetTagName="span"
-    transitionDuration={300}
-    usePortal={true}
-  >
-    <Blueprint3.Button
-      disabled={true}
-      icon="caret-down"
-      style={
-        {
-          "minWidth": 20,
-        }
-      }
-    />
-  </Blueprint3.Popover2>
+  <AsarButton
+    disabled={true}
+  />
 </Blueprint3.ButtonGroup>
 `;
 
@@ -329,44 +113,8 @@ exports[`Runner component renders running 1`] = `
     onClick={[MockFunction]}
     text="Stop"
   />
-  <Blueprint3.Popover2
-    boundary="clippingParents"
-    captureDismiss={false}
-    content={
-      <Blueprint3.Button
-        disabled={true}
-        icon="play"
-        onClick={[Function]}
-        small={true}
-        text="Run from ASAR"
-      />
-    }
-    defaultIsOpen={false}
-    disabled={false}
-    fill={true}
-    hasBackdrop={false}
-    hoverCloseDelay={300}
-    hoverOpenDelay={150}
-    inheritDarkTheme={true}
-    interactionKind="click"
-    minimal={false}
-    openOnTargetFocus={true}
-    placement="bottom"
-    positioningStrategy="absolute"
-    shouldReturnFocusOnClose={false}
-    targetTagName="span"
-    transitionDuration={300}
-    usePortal={true}
-  >
-    <Blueprint3.Button
-      disabled={true}
-      icon="caret-down"
-      style={
-        {
-          "minWidth": 20,
-        }
-      }
-    />
-  </Blueprint3.Popover2>
+  <AsarButton
+    disabled={true}
+  />
 </Blueprint3.ButtonGroup>
 `;

From 177b40256ba68ec1e7bd98bd99c76117daa31c58 Mon Sep 17 00:00:00 2001
From: Alok Yadav <alokkumaryadav.cse@gmail.com>
Date: Fri, 4 Apr 2025 16:13:21 +0530
Subject: [PATCH 3/5] refactor: address review feedback

---
 src/interfaces.ts       |  1 +
 src/main/fiddle-core.ts |  3 ++-
 src/renderer/runner.ts  | 13 +++++--------
 3 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/interfaces.ts b/src/interfaces.ts
index 51f73fde5a..1a50b29b35 100644
--- a/src/interfaces.ts
+++ b/src/interfaces.ts
@@ -280,6 +280,7 @@ export interface StartFiddleParams {
   dir: string;
   options: string[];
   env: { [x: string]: string | undefined };
+  runFromAsar?: boolean;
 }
 
 export interface DownloadVersionParams {
diff --git a/src/main/fiddle-core.ts b/src/main/fiddle-core.ts
index bc516c2699..cd90e3db53 100644
--- a/src/main/fiddle-core.ts
+++ b/src/main/fiddle-core.ts
@@ -35,6 +35,7 @@ export async function startFiddle(
     localPath,
     options,
     version,
+    runFromAsar,
   } = params;
   const env = { ...process.env };
 
@@ -53,7 +54,7 @@ export async function startFiddle(
   const child = await runner.spawn(
     isValidBuild && localPath ? Installer.getExecPath(localPath) : version,
     dir,
-    { args: options, cwd: dir, env },
+    { args: options, cwd: dir, env, runFromAsar },
   );
   fiddleProcesses.set(webContents, child);
 
diff --git a/src/renderer/runner.ts b/src/renderer/runner.ts
index 069b0034da..cb1f338272 100644
--- a/src/renderer/runner.ts
+++ b/src/renderer/runner.ts
@@ -20,8 +20,8 @@ export enum ForgeCommands {
   MAKE = 'make',
 }
 
-interface runOptions {
-  runFromAsar: boolean;
+export interface RunOptions {
+  runFromAsar?: boolean;
 }
 
 interface RunFiddleParams {
@@ -29,7 +29,7 @@ interface RunFiddleParams {
   isValidBuild: boolean; // If the localPath is a valid Electron build
   version: string; // The user selected version
   dir: string;
-  runFromAsar: boolean;
+  runFromAsar?: boolean;
 }
 
 const resultString: Record<RunResult, string> = Object.freeze({
@@ -144,7 +144,7 @@ export class Runner {
   /**
    * Actually run the fiddle.
    */
-  public async run(runOptions?: runOptions): Promise<RunResult> {
+  public async run(runOptions?: RunOptions): Promise<RunResult> {
     const options = { includeDependencies: false, includeElectron: false };
     const runFromAsar = runOptions?.runFromAsar ?? false;
 
@@ -369,15 +369,12 @@ export class Runner {
    * or the user selected electron version
    */
   private async runFiddle(params: RunFiddleParams): Promise<RunResult> {
-    const { version, dir, runFromAsar } = params;
+    const { version, dir } = params;
     const { pushOutput, flushOutput, executionFlags } = this.appState;
     const env = this.buildChildEnvVars();
 
     // Add user-specified cli flags if any have been set.
     const options = [dir, '--inspect'].concat(executionFlags);
-    if (runFromAsar) {
-      options.push('runFromAsar');
-    }
 
     const cleanup = async () => {
       flushOutput();

From 4126b858cc04bdecf0093093e023f999959cbfa3 Mon Sep 17 00:00:00 2001
From: Alok Yadav <alokkumaryadav.cse@gmail.com>
Date: Tue, 8 Apr 2025 01:43:36 +0530
Subject: [PATCH 4/5] chore(deps): bump @electron/fiddle-core from 1.3.3 to
 1.4.0

---
 package.json |  2 +-
 yarn.lock    | 18 ++++++++++++++----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 203c1fb812..daa31e306c 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,7 @@
     "@blueprintjs/core": "^3.36.0",
     "@blueprintjs/popover2": "^0.12.2",
     "@blueprintjs/select": "^3.15.0",
-    "@electron/fiddle-core": "^1.3.3",
+    "@electron/fiddle-core": "^1.4.0",
     "@octokit/rest": "^17.0.0",
     "@sentry/electron": "^5.11.0",
     "algoliasearch": "^4.12.0",
diff --git a/yarn.lock b/yarn.lock
index ddad25caf6..156b932a9b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1089,11 +1089,21 @@
     glob "^7.1.6"
     minimatch "^3.0.4"
 
-"@electron/fiddle-core@^1.3.3":
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/@electron/fiddle-core/-/fiddle-core-1.3.3.tgz#adb54cd4cb3c63726c945c028808e39baa562747"
-  integrity sha512-aBUN+jsNsLo+Ywfl0wQy2TRRGC8TvLF42Lt9zOdrzGgT7vzDNiFvr7+UiRVvC5inGR0XgeTmZpwaS6CnT6ZPWA==
+"@electron/asar@^3.3.1":
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/@electron/asar/-/asar-3.4.1.tgz#4e9196a4b54fba18c56cd8d5cac67c5bdc588065"
+  integrity sha512-i4/rNPRS84t0vSRa2HorerGRXWyF4vThfHesw0dmcWHp+cspK743UanA0suA5Q5y8kzY2y6YKrvbIUn69BCAiA==
+  dependencies:
+    commander "^5.0.0"
+    glob "^7.1.6"
+    minimatch "^3.0.4"
+
+"@electron/fiddle-core@^1.4.0":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@electron/fiddle-core/-/fiddle-core-1.4.0.tgz#b19840053a1a8e2e6cba45db3bd80b296b90fb88"
+  integrity sha512-dPoLYJJ5HtvnWG8p29JorKn6mlX4JOsQb6eGKT41Q48SqAm96WXkarHCGDA4PQWj5qJq1R75aBHtH78pLjX46A==
   dependencies:
+    "@electron/asar" "^3.3.1"
     "@electron/get" "^2.0.0"
     debug "^4.3.3"
     env-paths "^2.2.1"

From 15a7597380866512e1a39d85fe1a2ce3dcaff466 Mon Sep 17 00:00:00 2001
From: Alok Yadav <alokkumaryadav.cse@gmail.com>
Date: Thu, 10 Apr 2025 00:50:56 +0530
Subject: [PATCH 5/5] refactor: improve "Run from ASAR" dropdown styling

---
 src/renderer/components/commands-runner.tsx | 28 +++++++++++++--------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/renderer/components/commands-runner.tsx b/src/renderer/components/commands-runner.tsx
index 1e72113195..2c1bd6228a 100644
--- a/src/renderer/components/commands-runner.tsx
+++ b/src/renderer/components/commands-runner.tsx
@@ -1,6 +1,13 @@
 import * as React from 'react';
 
-import { Button, ButtonGroup, ButtonProps, Spinner } from '@blueprintjs/core';
+import {
+  Button,
+  ButtonGroup,
+  ButtonProps,
+  Menu,
+  MenuItem,
+  Spinner,
+} from '@blueprintjs/core';
 import { Popover2 } from '@blueprintjs/popover2';
 import { observer } from 'mobx-react';
 
@@ -94,15 +101,16 @@ export const Runner = observer(
 
 const AsarButton = ({ disabled }: { disabled: boolean }): JSX.Element => {
   const asarButton = (
-    <Button
-      text="Run from ASAR"
-      icon="play"
-      disabled={disabled}
-      small={true}
-      onClick={() => {
-        window.app.runner.run({ runFromAsar: true });
-      }}
-    />
+    <Menu>
+      <MenuItem
+        text="Run from ASAR"
+        icon="play"
+        active={!disabled}
+        onClick={() => {
+          window.app.runner.run({ runFromAsar: true });
+        }}
+      />
+    </Menu>
   );
 
   return (