[sources] Use correct icon for the automatic workspace folders.

Drive-by-fix: Refactor the code a bit to make dealing with file system
projects a little bit more consistent.

Screenshot: http://screen/8yGPbaqXP97ZxdD.png
Fixed: 404170628
Change-Id: Ie341e59d5fdb0e16a3102c6473a86630dad69368
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6445823
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>
Commit-Queue: Benedikt Meurer <bmeurer@chromium.org>
Commit-Queue: Alex Rudenko <alexrudenko@chromium.org>
Auto-Submit: Benedikt Meurer <bmeurer@chromium.org>

Author: bmeurer

front_end/models/persistence/AutomaticFileSystemWorkspaceBinding.ts

@@ -12,16 +12,22 @@ import * as Workspace from '../workspace/workspace.js';
 import {type AutomaticFileSystem, type AutomaticFileSystemManager, Events} from './AutomaticFileSystemManager.js';
 
 /**
- * @internal
+ * Placeholder project that acts as an empty file system within the workspace,
+ * and automatically disappears when the user connects the automatic workspace
+ * folder.
  *
  * @see AutomaticFileSystemWorkspaceBinding
  */
-class ConnectableFileSystemProject implements Workspace.Workspace.Project {
+export class FileSystem implements Workspace.Workspace.Project {
   readonly automaticFileSystem: Readonly<AutomaticFileSystem>;
+  readonly automaticFileSystemManager: AutomaticFileSystemManager;
   readonly #workspace: Workspace.Workspace.WorkspaceImpl;
 
-  constructor(automaticFileSystem: Readonly<AutomaticFileSystem>, workspace: Workspace.Workspace.WorkspaceImpl) {
+  constructor(
+      automaticFileSystem: Readonly<AutomaticFileSystem>, automaticFileSystemManager: AutomaticFileSystemManager,
+      workspace: Workspace.Workspace.WorkspaceImpl) {
     this.automaticFileSystem = automaticFileSystem;
+    this.automaticFileSystemManager = automaticFileSystemManager;
     this.#workspace = workspace;
   }
 
@@ -156,7 +162,7 @@ let automaticFileSystemWorkspaceBindingInstance: AutomaticFileSystemWorkspaceBin
  */
 export class AutomaticFileSystemWorkspaceBinding {
   readonly #automaticFileSystemManager: AutomaticFileSystemManager;
-  #automaticFileSystemProject: ConnectableFileSystemProject|null = null;
+  #fileSystem: FileSystem|null = null;
   readonly #workspace: Workspace.Workspace.WorkspaceImpl;
 
   /**
@@ -206,25 +212,29 @@ export class AutomaticFileSystemWorkspaceBinding {
   }
 
   #dispose(): void {
-    if (this.#automaticFileSystemProject) {
-      this.#workspace.removeProject(this.#automaticFileSystemProject);
+    if (this.#fileSystem) {
+      this.#workspace.removeProject(this.#fileSystem);
     }
     this.#automaticFileSystemManager.removeEventListener(
         Events.AUTOMATIC_FILE_SYSTEM_CHANGED, this.#automaticFileSystemChanged, this);
   }
 
   #automaticFileSystemChanged(event: Common.EventTarget.EventTargetEvent<AutomaticFileSystem|null>): void {
     const automaticFileSystem = event.data;
-    if (this.#automaticFileSystemProject !== null) {
-      if (this.#automaticFileSystemProject.automaticFileSystem === automaticFileSystem) {
+    if (this.#fileSystem !== null) {
+      if (this.#fileSystem.automaticFileSystem === automaticFileSystem) {
         return;
       }
-      this.#workspace.removeProject(this.#automaticFileSystemProject);
-      this.#automaticFileSystemProject = null;
+      this.#workspace.removeProject(this.#fileSystem);
+      this.#fileSystem = null;
     }
     if (automaticFileSystem !== null && automaticFileSystem.state !== 'connected') {
-      this.#automaticFileSystemProject = new ConnectableFileSystemProject(automaticFileSystem, this.#workspace);
-      this.#workspace.addProject(this.#automaticFileSystemProject);
+      this.#fileSystem = new FileSystem(
+          automaticFileSystem,
+          this.#automaticFileSystemManager,
+          this.#workspace,
+      );
+      this.#workspace.addProject(this.#fileSystem);
     }
   }
 }

front_end/models/persistence/PlatformFileSystem.ts

@@ -48,11 +48,16 @@ export enum PlatformFileSystemType {
 export class PlatformFileSystem {
   private readonly pathInternal: Platform.DevToolsPath.UrlString;
   #type: PlatformFileSystemType;
-  #automatic: boolean;
+  /**
+   * True if the filesystem was automatically discovered (see
+   * https://goo.gle/devtools-json-design).
+   */
+  readonly automatic: boolean;
+
   constructor(path: Platform.DevToolsPath.UrlString, type: PlatformFileSystemType, automatic: boolean) {
     this.pathInternal = path;
     this.#type = type;
-    this.#automatic = automatic;
+    this.automatic = automatic;
   }
 
   getMetadata(_path: Platform.DevToolsPath.EncodedPathString): Promise<{modificationTime: Date, size: number}|null> {
@@ -79,14 +84,6 @@ export class PlatformFileSystem {
     return this.#type;
   }
 
-  /**
-   * True if the filesystem was automatically discovered (see
-   * https://goo.gle/devtools-json-design).
-   */
-  automatic(): boolean {
-    return this.#automatic;
-  }
-
   async createFile(_path: Platform.DevToolsPath.EncodedPathString, _name: Platform.DevToolsPath.RawPathString|null):
       Promise<Platform.DevToolsPath.EncodedPathString|null> {
     return await Promise.resolve(null);

front_end/panels/sources/NavigatorView.ts

@@ -168,7 +168,7 @@ const str_ = i18n.i18n.registerUIStrings('panels/sources/NavigatorView.ts', UISt
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export const Types = {
   Authored: 'authored',
-  ConnectableFileSystem: 'connectable-fs',
+  AutomaticFileSystem: 'automatic-fs',
   Deployed: 'deployed',
   Domain: 'domain',
   File: 'file',
@@ -190,7 +190,7 @@ const TYPE_ORDERS = new Map([
   [Types.File, 10],
   [Types.Frame, 70],
   [Types.Worker, 90],
-  [Types.ConnectableFileSystem, 100],
+  [Types.AutomaticFileSystem, 100],
   [Types.FileSystem, 100],
 ]);
 
@@ -567,11 +567,12 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
         Snippets.ScriptSnippetFileSystem.isSnippetsProject(project) || rootOrDeployed.child(project.id())) {
       return;
     }
-    rootOrDeployed.appendChild(new NavigatorGroupTreeNode(
-        this, project, project.id(),
-        project.type() === Workspace.Workspace.projectTypes.ConnectableFileSystem ? Types.ConnectableFileSystem :
-                                                                                    Types.FileSystem,
-        project.displayName()));
+    const type =
+        (project instanceof Persistence.AutomaticFileSystemWorkspaceBinding.FileSystem ||
+         (project instanceof Persistence.FileSystemWorkspaceBinding.FileSystem && project.fileSystem().automatic)) ?
+        Types.AutomaticFileSystem :
+        Types.FileSystem;
+    rootOrDeployed.appendChild(new NavigatorGroupTreeNode(this, project, project.id(), type, project.displayName()));
     this.selectDefaultTreeNode();
   }
 
@@ -1284,8 +1285,9 @@ export class NavigatorFolderTreeElement extends UI.TreeOutline.TreeElement {
   private hovered?: boolean;
   private isIgnoreListed?: boolean;
 
-  constructor(navigatorView: NavigatorView, type: string, title: string, hoverCallback?: ((arg0: boolean) => void)) {
-    const expandable = type !== Types.ConnectableFileSystem;
+  constructor(
+      navigatorView: NavigatorView, type: string, title: string, hoverCallback?: ((arg0: boolean) => void),
+      expandable = true) {
     super('', expandable, NavigatorFolderTreeElement.#contextForType(type));
     this.listItemElement.classList.add('navigator-' + type + '-tree-item', 'navigator-folder-tree-item');
     UI.ARIAUtils.setLabel(this.listItemElement, `${title}, ${type}`);
@@ -1307,6 +1309,8 @@ export class NavigatorFolderTreeElement extends UI.TreeOutline.TreeElement {
       iconType = 'code';
     } else if (type === Types.Deployed) {
       iconType = 'deployed';
+    } else if (type === Types.AutomaticFileSystem) {
+      iconType = 'folder-asterisk';
     }
 
     const icon = IconButton.Icon.create(iconType);
@@ -2067,11 +2071,12 @@ export class NavigatorGroupTreeNode extends NavigatorTreeNode {
     if (this.treeElement) {
       return this.treeElement;
     }
-    this.treeElement = new NavigatorFolderTreeElement(this.navigatorView, this.type, this.title, this.hoverCallback);
+    const expandable = !(this.project instanceof Persistence.AutomaticFileSystemWorkspaceBinding.FileSystem);
+    this.treeElement =
+        new NavigatorFolderTreeElement(this.navigatorView, this.type, this.title, this.hoverCallback, expandable);
     this.treeElement.setNode(this);
-    if (this.project && this.project.type() === Workspace.Workspace.projectTypes.ConnectableFileSystem) {
-      const automaticFileSystemManager = Persistence.AutomaticFileSystemManager.AutomaticFileSystemManager.instance();
-      const {automaticFileSystem} = automaticFileSystemManager;
+    if (this.project instanceof Persistence.AutomaticFileSystemWorkspaceBinding.FileSystem) {
+      const {automaticFileSystem, automaticFileSystemManager} = this.project;
       switch (automaticFileSystem?.state) {
         case 'connecting': {
           const spinner = new Spinners.Spinner.Spinner();

front_end/panels/sources/navigatorTree.css

@@ -47,7 +47,7 @@
   color: var(--icon-folder-workspace);
 }
 
-.navigator-connectable-fs-tree-item devtools-icon,
+.navigator-automatic-fs-tree-item devtools-icon,
 .navigator-fs-tree-item devtools-icon {
   color: var(--icon-file-authored);
 }