Use file-system-access ponyfill for Firefox support

components/src/stores/base.context.ts

@@ -22,7 +22,6 @@ import {
 
 export interface BaseContext {
   fs: FileSystem;
-  canUpgradeFs: boolean;
   upgradeFs: (force?: boolean) => void;
   closeFs: () => void;
   upgraded?: string;
@@ -59,10 +58,9 @@ export function useBaseContext(): BaseContext {
     });
   }, [upgraded, replaceFs]);
 
-  const canUpgradeFs = `showDirectoryPicker` in window;
   const upgradeFs = useCallback(
     async (force = false) => {
-      if (!canUpgradeFs || (upgraded && !force)) return;
+      if (upgraded && !force) return;
       const handler = await openNand2TetrisDirectory();
       const adapter = await createAndStoreLocalAdapterInIndexedDB(handler);
       replaceFs(adapter);
@@ -84,7 +82,6 @@ export function useBaseContext(): BaseContext {
     status,
     setStatus,
     storage: localStorage,
-    canUpgradeFs,
     upgradeFs,
     closeFs,
     upgraded,
@@ -93,7 +90,6 @@ export function useBaseContext(): BaseContext {
 
 export const BaseContext = createContext<BaseContext>({
   fs: new FileSystem(new LocalStorageFileSystemAdapter()),
-  canUpgradeFs: false,
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   upgradeFs() {},
   // eslint-disable-next-line @typescript-eslint/no-empty-function

components/src/stores/base/fs.ts

@@ -4,14 +4,15 @@
   SEP,
   Stats,
 } from "@davidsouther/jiffies/lib/esm/fs.js";
+import { showDirectoryPicker } from "file-system-access";
 
 function dirname(path: string): string {
   return path.split(SEP).slice(0, -1).join(SEP);
 }
 
 export function openNand2TetrisDirectory(): Promise<FileSystemDirectoryHandle> {
-  return window.showDirectoryPicker({
+  return showDirectoryPicker({
     id: "nand2tetris",
     mode: "readwrite",
     startIn: "documents",
   });

extension/views/hdl/src/index.tsx

@@ -13,7 +13,6 @@ const baseContext: BaseContext = {
     new ObjectFileSystemAdapter({ "projects/01/Not.hdl": Not.hdl })
   ),
   upgraded: "true",
-  canUpgradeFs: false,
   upgradeFs() {},
   closeFs() {},
   storage: {},

package.json

@@ -48,5 +48,8 @@
   "engines": {
     "node": ">=16",
     "npm": ">=7"
+  },
+  "dependencies": {
+    "file-system-access": "^1.0.4"
   }
 }

web/src/shell/header.tsx

@@ -67,12 +67,7 @@ const headerButtons: HeaderButton[] = [
   headerButtonFromURL(URLs["cpu"], "developer_board"),
   headerButtonFromURL(URLs["asm"], "list_alt"),
   headerButtonFromURL(URLs["vm"], "computer"),
-  // TODO(https://github.com/nand2tetris/web-ide/issues/349)
-  // reenable when this is resolved for Firefox and safari
-  // https://caniuse.com/?search=showDirectoryPicker
-  ...("showDirectoryPicker" in window
-    ? [headerButtonFromURL(URLs["compiler"], "code")]
-    : []),
+  headerButtonFromURL(URLs["compiler"], "code"),
   headerButtonFromURL(URLs["bitmap"], "grid_on"),
   headerButtonFromURL(URLs["util"], "function", "Converter Tool"),
   {

web/src/shell/settings.tsx

@@ -14,7 +14,7 @@ const showUpgradeFs = false;
 
 export const Settings = () => {
   const { toolStates } = useContext(AppContext);
-  const { fs, setStatus, canUpgradeFs, upgradeFs, closeFs, upgraded } =
+  const { fs, setStatus, upgradeFs, closeFs, upgraded } =
     useContext(BaseContext);
   const { settings, monaco, theme, setTheme, tracking } =
     useContext(AppContext);
@@ -155,7 +155,7 @@ export const Settings = () => {
                 <Trans>Files</Trans>
               </dt>
               <dd>
-                {showUpgradeFs && canUpgradeFs ? (
+                {showUpgradeFs && (
                   <>
                     <button
                       disabled={upgrading}
@@ -194,8 +194,6 @@ export const Settings = () => {
                       <></>
                     )}
                   </>
-                ) : (
-                  <></>
                 )}
                 <button
                   onClick={async () => {

web/src/testing/index.tsx

@@ -37,7 +37,6 @@ export const useTestingAppContext = () => ({
         "projects/01/Not/Not.cmp": Not.cmp,
       }),
     ),
-    canUpgradeFs: false,
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     upgradeFs() {},
     // eslint-disable-next-line @typescript-eslint/no-empty-function