[sources] Add infobar to Sources panel for automatic workspace folders.

This adds a preliminary UI to the Workspace tab in the Sources panel,
which allows users to automatically connect workspace folders that are
reported via project settings.

Doc: http://go/chrome-devtools:automatic-workspace-folders-design
Bug: 395562934
Change-Id: If8f7cd03a830a9e6636a94d7e3e4209e061311b9
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6281767
Auto-Submit: Benedikt Meurer <[email protected]>
Reviewed-by: Alex Rudenko <[email protected]>
Commit-Queue: Benedikt Meurer <[email protected]>

Author: bmeurer

front_end/models/persistence/persistence-meta.ts

@@ -52,6 +52,10 @@ const UIStrings = {
    *@description Title of a setting under the Persistence category that can be invoked through the Command Menu
    */
   disableOverrideNetworkRequests: 'Disable override network requests',
+  /**
+   * @description Title of a setting to enable the Automatic Workspace Folders.
+   */
+  enableAutomaticWorkspaceFolders: 'Enable automatic workspace folders',
 };
 const str_ = i18n.i18n.registerUIStrings('models/persistence/persistence-meta.ts', UIStrings);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
@@ -78,6 +82,14 @@ UI.ViewManager.registerViewExtension({
   iconName: 'folder',
 });
 
+Common.Settings.registerSettingExtension({
+  category: Common.Settings.SettingCategory.PERSISTENCE,
+  title: i18nLazyString(UIStrings.enableAutomaticWorkspaceFolders),
+  settingName: 'persistence-automatic-workspace-folders',
+  settingType: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: false,
+});
+
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.PERSISTENCE,
   title: i18nLazyString(UIStrings.enableLocalOverrides),

front_end/panels/sources/SourcesNavigator.ts

@@ -109,6 +109,17 @@ const UIStrings = {
    *@description Text to save content as a specific file type
    */
   saveAs: 'Save as...',
+  /**
+   * @description Text in Workspaces tab in the Sources panel when an automatic
+   *              workspace folder is detected.
+   * @example {/path/to/foo} PH1
+   */
+  automaticWorkspaceFolderDetected: 'Workspace folder {PH1} detected.',
+  /**
+   * @description Button description in Workspaces tab in the Sources panel
+   *              to connect to an automatic workspace folder.
+   */
+  automaticWorkspaceFolderConnect: 'Connect...',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/sources/SourcesNavigator.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -182,6 +193,10 @@ export class NetworkNavigatorView extends NavigatorView {
 }
 
 export class FilesNavigatorView extends NavigatorView {
+  #automaticFileSystemManager = Persistence.AutomaticFileSystemManager.AutomaticFileSystemManager.instance();
+  #infobar: UI.Infobar.Infobar|null = null;
+  #eventListeners: Common.EventTarget.EventDescriptor[] = [];
+
   constructor() {
     super('navigator-files');
     const placeholder =
@@ -198,6 +213,22 @@ export class FilesNavigatorView extends NavigatorView {
     });
   }
 
+  override wasShown(): void {
+    super.wasShown();
+    this.#eventListeners = [
+      this.#automaticFileSystemManager.addEventListener(
+          Persistence.AutomaticFileSystemManager.Events.AUTOMATIC_FILE_SYSTEM_CHANGED, this.#automaticFileSystemChanged,
+          this),
+    ];
+    this.#automaticFileSystemChanged({data: this.#automaticFileSystemManager.automaticFileSystem});
+  }
+
+  override willHide(): void {
+    Common.EventTarget.removeEventListeners(this.#eventListeners);
+    this.#automaticFileSystemChanged({data: null});
+    super.willHide();
+  }
+
   override sourceSelected(uiSourceCode: Workspace.UISourceCode.UISourceCode, focusSource: boolean): void {
     Host.userMetrics.actionTaken(Host.UserMetrics.Action.WorkspaceSourceSelected);
     super.sourceSelected(uiSourceCode, focusSource);
@@ -214,6 +245,33 @@ export class FilesNavigatorView extends NavigatorView {
     contextMenu.defaultSection().appendAction('sources.add-folder-to-workspace', undefined, true);
     void contextMenu.show();
   }
+
+  #automaticFileSystemChanged(
+      event: Common.EventTarget.EventTargetEvent<Persistence.AutomaticFileSystemManager.AutomaticFileSystem|null>):
+      void {
+    const automaticFileSystem = event.data;
+    if (automaticFileSystem === null || automaticFileSystem.state !== 'disconnected') {
+      this.#infobar?.dispose();
+      this.#infobar = null;
+    } else {
+      this.#infobar = UI.Infobar.Infobar.create(
+          UI.Infobar.Type.INFO,
+          i18nString(UIStrings.automaticWorkspaceFolderDetected, {PH1: automaticFileSystem.root}),
+          [{
+            text: i18nString(UIStrings.automaticWorkspaceFolderConnect),
+            highlight: true,
+            delegate: () => this.#automaticFileSystemManager.connectAutomaticFileSystem(/* addIfMissing= */ true),
+            dismiss: true,
+            jslogContext: 'automatic-workspace-folders.connect',
+          }],
+          Common.Settings.Settings.instance().moduleSetting('persistence-automatic-workspace-folders'),
+          'automatic-workspace-folders',
+      );
+      if (this.#infobar) {
+        this.contentElement.append(this.#infobar.element);
+      }
+    }
+  }
 }
 
 let overridesNavigatorViewInstance: OverridesNavigatorView;

front_end/ui/visual_logging/KnownContextValues.ts

@@ -484,6 +484,7 @@ export const knownContextValues = new Set([
   'autofill-view',
   'autofill-view-documentation',
   'autofill-view-feedback',
+  'automatic-workspace-folders.connect',
   'automatically-ignore-list-known-third-party-scripts',
   'auxclick',
   'avif-format-disabled',
@@ -2610,6 +2611,7 @@ export const knownContextValues = new Set([
   'performance.sidebar-toggle',
   'periodic-background-sync',
   'periodic-sync-tag',
+  'persistence-automatic-workspace-folders',
   'persistence-network-overrides-enabled',
   'persistence-network-overrides-enabled-true',
   'perspective',