[persistence] Use property instead of constructor for EditFileSystemView

This CL prepares `EditFileSystemView` for use in a lit template in it's
parent. Instead of passing the file system path via constructor, we use
a setter and pass the file system directly. This way, we loose the
dependency on the global singleton.

R=dsv@chromium.org

Bug: 407735766
Change-Id: I86dc70e2099f91d349c11860eec9ede580c40480
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6562902
Commit-Queue: Simon Zünd <szuend@chromium.org>
Reviewed-by: Danil Somsikov <dsv@chromium.org>

Author: szuend

front_end/models/persistence/EditFileSystemView.test.ts

@@ -59,11 +59,11 @@ describeWithEnvironment('EditFileSystemView view', () => {
 describeWithEnvironment('EditFileSystemView widget', () => {
   async function setup(initialExcludedFolders: Set<string>) {
     const view = createViewFunctionStub(EditFileSystemView);
-    const widget = new EditFileSystemView(urlString`file:///home/user`, view);
+    const widget = new EditFileSystemView(view);
     const fileSystem = sinon.createStubInstance(Persistence.IsolatedFileSystem.IsolatedFileSystem);
-    sinon.stub(Persistence.IsolatedFileSystemManager.IsolatedFileSystemManager.instance(), 'fileSystem')
-        .returns(fileSystem);
+    fileSystem.path.returns(urlString`file:///home/user`);
     fileSystem.excludedFolders.returns(initialExcludedFolders as Set<Platform.DevToolsPath.EncodedPathString>);
+    widget.fileSystem = fileSystem;
 
     const container = document.createElement('div');
     renderElementIntoDOM(container);

front_end/models/persistence/EditFileSystemView.ts

@@ -31,12 +31,11 @@
 import '../../ui/legacy/components/data_grid/data_grid.js';
 
 import * as i18n from '../../core/i18n/i18n.js';
-import type * as Platform from '../../core/platform/platform.js';
+import * as Platform from '../../core/platform/platform.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {Directives, html, render} from '../../ui/lit/lit.js';
 
 import editFileSystemViewStyles from './editFileSystemView.css.js';
-import {IsolatedFileSystemManager} from './IsolatedFileSystemManager.js';
 import type {PlatformFileSystem} from './PlatformFileSystem.js';
 
 const {styleMap} = Directives;
@@ -132,28 +131,37 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
 };
 
 export class EditFileSystemView extends UI.Widget.VBox {
-  readonly #fileSystemPath: Platform.DevToolsPath.UrlString;
+  #fileSystem?: PlatformFileSystem;
   #excludedFolderPaths: PathWithStatus[] = [];
   readonly #view: View;
 
-  constructor(fileSystemPath: Platform.DevToolsPath.UrlString, view: View = DEFAULT_VIEW) {
+  constructor(view: View = DEFAULT_VIEW) {
     super();
-    this.#fileSystemPath = fileSystemPath;
     this.#view = view;
   }
 
+  set fileSystem(fileSystem: PlatformFileSystem) {
+    this.#fileSystem = fileSystem;
+    this.#resyncExcludedFolderPaths();
+    this.requestUpdate();
+  }
+
   override wasShown(): void {
-    this.#excludedFolderPaths = this.#getFileSystem()
-                                    .excludedFolders()
+    this.#resyncExcludedFolderPaths();
+    this.requestUpdate();
+  }
+
+  #resyncExcludedFolderPaths(): void {
+    this.#excludedFolderPaths = this.#fileSystem?.excludedFolders()
                                     .values()
                                     .map(path => ({path, status: ExcludedFolderStatus.VALID}))
-                                    .toArray();
-    this.requestUpdate();
+                                    .toArray() ??
+        [];
   }
 
   override performUpdate(): void {
     const input: EditFileSystemViewInput = {
-      fileSystemPath: this.#fileSystemPath,
+      fileSystemPath: this.#fileSystem?.path() ?? Platform.DevToolsPath.urlString``,
       excludedFolderPaths: this.#excludedFolderPaths,
       onCreate: e => this.#onCreate(e.detail.url),
       onEdit: e => this.#onEdit(e.detail.node.dataset.index ?? '-1', e.detail.valueBeforeEditing, e.detail.newText),
@@ -172,7 +180,7 @@ export class EditFileSystemView extends UI.Widget.VBox {
     const pathWithStatus = this.#validateFolder(url);
     this.#excludedFolderPaths.push(pathWithStatus);
     if (pathWithStatus.status === ExcludedFolderStatus.VALID) {
-      this.#getFileSystem().addExcludedFolder(pathWithStatus.path);
+      this.#fileSystem?.addExcludedFolder(pathWithStatus.path);
     }
 
     this.requestUpdate();
@@ -189,11 +197,11 @@ export class EditFileSystemView extends UI.Widget.VBox {
     this.#excludedFolderPaths[index] = pathWithStatus;
 
     if (oldPathWithStatus.status === ExcludedFolderStatus.VALID) {
-      this.#getFileSystem().removeExcludedFolder(valueBeforeEditing as Platform.DevToolsPath.EncodedPathString);
+      this.#fileSystem?.removeExcludedFolder(valueBeforeEditing as Platform.DevToolsPath.EncodedPathString);
     }
 
     if (pathWithStatus.status === ExcludedFolderStatus.VALID) {
-      this.#getFileSystem().addExcludedFolder(pathWithStatus.path);
+      this.#fileSystem?.addExcludedFolder(pathWithStatus.path);
     }
 
     this.requestUpdate();
@@ -205,7 +213,7 @@ export class EditFileSystemView extends UI.Widget.VBox {
       return;
     }
 
-    this.#getFileSystem().removeExcludedFolder(this.#excludedFolderPaths[index].path);
+    this.#fileSystem?.removeExcludedFolder(this.#excludedFolderPaths[index].path);
     this.#excludedFolderPaths.splice(index, 1);
 
     this.requestUpdate();
@@ -230,8 +238,4 @@ export class EditFileSystemView extends UI.Widget.VBox {
     }
     return prefix + (prefix[prefix.length - 1] === '/' ? '' : '/');
   }
-
-  #getFileSystem(): PlatformFileSystem {
-    return IsolatedFileSystemManager.instance().fileSystem(this.#fileSystemPath) as PlatformFileSystem;
-  }
 }

front_end/models/persistence/WorkspaceSettingsTab.ts

@@ -141,7 +141,8 @@ export class WorkspaceSettingsTab extends UI.Widget.VBox {
     fileSystemExcludeCard.heading = filename;
     fileSystemExcludeCard.append(folderIcon, removeButton, mappingViewContainer);
     this.containerElement.insertBefore(fileSystemExcludeCard, this.#addButtonContainer);
-    const mappingView = new EditFileSystemView(fileSystem.path());
+    const mappingView = new EditFileSystemView();
+    mappingView.fileSystem = fileSystem;
     this.mappingViewByPath.set(fileSystem.path(), mappingView);
     mappingView.element.classList.add('file-system-mapping-view');