[sources] Add nudge for Automatic Workspace Folders feature.

When the Automatic Workspace Folders feature is available but not
utilized by the developer, display a message to nudge developers
to look into adopting `com.chrome.devtools.json` for this (per
UX seed[^1]).

[^1]: http://go/chrome-devtools:automatic-workspace-folders-ux

Bug: 404170628
Change-Id: I7d6020c7862e68edfb74635df4574b6fb4adaa1a
Screenshot: http://screen/PCS4kAnxuTmfwCv.png
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6438855
Auto-Submit: Benedikt Meurer <[email protected]>
Reviewed-by: Alex Rudenko <[email protected]>
Commit-Queue: Alex Rudenko <[email protected]>

Author: bmeurer

front_end/models/persistence/AutomaticFileSystemManager.test.ts

@@ -21,6 +21,7 @@ describe('AutomaticFileSystemManager', () => {
   it('initially doesn\'t report an automatic file system', () => {
     const inspectorFrontendHost = sinon.createStubInstance(Host.InspectorFrontendHost.InspectorFrontendHostStub);
     const projectSettingsModel = sinon.createStubInstance(ProjectSettings.ProjectSettingsModel.ProjectSettingsModel);
+    sinon.stub(projectSettingsModel, 'availability').value('available');
     sinon.stub(projectSettingsModel, 'projectSettings').value({});
 
     const manager = AutomaticFileSystemManager.instance({
@@ -51,6 +52,7 @@ describe('AutomaticFileSystemManager', () => {
   it('attempts to automatically connect the file system initially', () => {
     const inspectorFrontendHost = sinon.createStubInstance(Host.InspectorFrontendHost.InspectorFrontendHostStub);
     const projectSettingsModel = sinon.createStubInstance(ProjectSettings.ProjectSettingsModel.ProjectSettingsModel);
+    sinon.stub(projectSettingsModel, 'availability').value('available');
     sinon.stub(projectSettingsModel, 'projectSettings').value({workspace: {root, uuid}});
 
     const manager = AutomaticFileSystemManager.instance({
@@ -67,6 +69,7 @@ describe('AutomaticFileSystemManager', () => {
   it('reflects state correctly when automatic connection succeeds', async () => {
     const inspectorFrontendHost = sinon.createStubInstance(Host.InspectorFrontendHost.InspectorFrontendHostStub);
     const projectSettingsModel = sinon.createStubInstance(ProjectSettings.ProjectSettingsModel.ProjectSettingsModel);
+    sinon.stub(projectSettingsModel, 'availability').value('available');
     sinon.stub(projectSettingsModel, 'projectSettings').value({workspace: {root, uuid}});
 
     const manager = AutomaticFileSystemManager.instance({
@@ -86,6 +89,7 @@ describe('AutomaticFileSystemManager', () => {
   it('reflects state correctly when automatic connection fails', async () => {
     const inspectorFrontendHost = sinon.createStubInstance(Host.InspectorFrontendHost.InspectorFrontendHostStub);
     const projectSettingsModel = sinon.createStubInstance(ProjectSettings.ProjectSettingsModel.ProjectSettingsModel);
+    sinon.stub(projectSettingsModel, 'availability').value('available');
     sinon.stub(projectSettingsModel, 'projectSettings').value({workspace: {root, uuid}});
 
     const manager = AutomaticFileSystemManager.instance({
@@ -105,6 +109,7 @@ describe('AutomaticFileSystemManager', () => {
   it('performs first-time setup of automatic file system correctly', async () => {
     const inspectorFrontendHost = sinon.createStubInstance(Host.InspectorFrontendHost.InspectorFrontendHostStub);
     const projectSettingsModel = sinon.createStubInstance(ProjectSettings.ProjectSettingsModel.ProjectSettingsModel);
+    sinon.stub(projectSettingsModel, 'availability').value('available');
     sinon.stub(projectSettingsModel, 'projectSettings').value({workspace: {root, uuid}});
     const manager = AutomaticFileSystemManager.instance({
       forceNew: true,
@@ -134,6 +139,7 @@ describe('AutomaticFileSystemManager', () => {
   it('correctly disconnects automatic file systems', async () => {
     const inspectorFrontendHost = sinon.createStubInstance(Host.InspectorFrontendHost.InspectorFrontendHostStub);
     const projectSettingsModel = sinon.createStubInstance(ProjectSettings.ProjectSettingsModel.ProjectSettingsModel);
+    sinon.stub(projectSettingsModel, 'availability').value('available');
     sinon.stub(projectSettingsModel, 'projectSettings').value({workspace: {root, uuid}});
     const manager = AutomaticFileSystemManager.instance({
       forceNew: true,
@@ -153,4 +159,51 @@ describe('AutomaticFileSystemManager', () => {
     assert.strictEqual(manager.automaticFileSystem, automaticFileSystem);
     assert.deepEqual(manager.automaticFileSystem, {root, uuid, state: 'disconnected'});
   });
+
+  it('reports unavailable when `devToolsAutomaticFileSystems` is off', () => {
+    const hostConfig = {devToolsAutomaticFileSystems: {enabled: false}};
+    const inspectorFrontendHost = sinon.createStubInstance(Host.InspectorFrontendHost.InspectorFrontendHostStub);
+    const projectSettingsModel = sinon.createStubInstance(ProjectSettings.ProjectSettingsModel.ProjectSettingsModel);
+
+    const manager = AutomaticFileSystemManager.instance({
+      forceNew: true,
+      hostConfig,
+      inspectorFrontendHost,
+      projectSettingsModel,
+    });
+
+    assert.strictEqual(manager.availability, 'unavailable');
+  });
+
+  it('reports available when project settings are available', () => {
+    const inspectorFrontendHost = sinon.createStubInstance(Host.InspectorFrontendHost.InspectorFrontendHostStub);
+    const projectSettingsModel = sinon.createStubInstance(ProjectSettings.ProjectSettingsModel.ProjectSettingsModel);
+    sinon.stub(projectSettingsModel, 'availability').value('available');
+    sinon.stub(projectSettingsModel, 'projectSettings').value({});
+
+    const manager = AutomaticFileSystemManager.instance({
+      forceNew: true,
+      hostConfig,
+      inspectorFrontendHost,
+      projectSettingsModel,
+    });
+
+    assert.strictEqual(manager.availability, 'available');
+  });
+
+  it('reports unavailable when project settings are unavailable', () => {
+    const inspectorFrontendHost = sinon.createStubInstance(Host.InspectorFrontendHost.InspectorFrontendHostStub);
+    const projectSettingsModel = sinon.createStubInstance(ProjectSettings.ProjectSettingsModel.ProjectSettingsModel);
+    sinon.stub(projectSettingsModel, 'availability').value('unavailable');
+    sinon.stub(projectSettingsModel, 'projectSettings').value({});
+
+    const manager = AutomaticFileSystemManager.instance({
+      forceNew: true,
+      hostConfig,
+      inspectorFrontendHost,
+      projectSettingsModel,
+    });
+
+    assert.strictEqual(manager.availability, 'unavailable');
+  });
 });

front_end/models/persistence/AutomaticFileSystemManager.ts

@@ -17,6 +17,16 @@ export interface AutomaticFileSystem {
   state: 'disconnected'|'connecting'|'connected';
 }
 
+/**
+ * Indicates the availability of the Automatic Workspace Folders feature.
+ *
+ * `'available'` means that the feature is enabled and the project settings
+ * are also available. It doesn't indicate whether or not the page is actually
+ * providing a `com.chrome.devtools.json` or not, and whether or not that file
+ * (if it exists) provides workspace information.
+ */
+export type AutomaticFileSystemAvailability = 'available'|'unavailable';
+
 let automaticFileSystemManagerInstance: AutomaticFileSystemManager|undefined;
 
 /**
@@ -26,6 +36,7 @@ let automaticFileSystemManagerInstance: AutomaticFileSystemManager|undefined;
  */
 export class AutomaticFileSystemManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   #automaticFileSystem: AutomaticFileSystem|null;
+  #availability: AutomaticFileSystemAvailability = 'unavailable';
   #inspectorFrontendHost: Host.InspectorFrontendHostAPI.InspectorFrontendHostAPI;
   #projectSettingsModel: ProjectSettings.ProjectSettingsModel.ProjectSettingsModel;
 
@@ -38,6 +49,21 @@ export class AutomaticFileSystemManager extends Common.ObjectWrapper.ObjectWrapp
     return this.#automaticFileSystem;
   }
 
+  /**
+   * Yields the availability of the Automatic Workspace Folders feature.
+   *
+   * `'available'` means that the feature is enabled and the project settings
+   * are also available. It doesn't indicate whether or not the page is actually
+   * providing a `com.chrome.devtools.json` or not, and whether or not that file
+   * (if it exists) provides workspace information.
+   *
+   * @return `'available'` if the feature is available and the project settings
+   *         feature is also available, otherwise `'unavailable'`.
+   */
+  get availability(): AutomaticFileSystemAvailability {
+    return this.#availability;
+  }
+
   /**
    * @internal
    */
@@ -50,6 +76,9 @@ export class AutomaticFileSystemManager extends Common.ObjectWrapper.ObjectWrapp
     this.#inspectorFrontendHost = inspectorFrontendHost;
     this.#projectSettingsModel = projectSettingsModel;
     if (hostConfig.devToolsAutomaticFileSystems?.enabled) {
+      this.#projectSettingsModel.addEventListener(
+          ProjectSettings.ProjectSettingsModel.Events.AVAILABILITY_CHANGED, this.#availabilityChanged, this);
+      this.#availabilityChanged({data: this.#projectSettingsModel.availability});
       this.#projectSettingsModel.addEventListener(
           ProjectSettings.ProjectSettingsModel.Events.PROJECT_SETTINGS_CHANGED, this.#projectSettingsChanged, this);
       this.#projectSettingsChanged({data: this.#projectSettingsModel.projectSettings});
@@ -94,10 +123,22 @@ export class AutomaticFileSystemManager extends Common.ObjectWrapper.ObjectWrapp
   }
 
   #dispose(): void {
+    this.#projectSettingsModel.removeEventListener(
+        ProjectSettings.ProjectSettingsModel.Events.AVAILABILITY_CHANGED, this.#availabilityChanged, this);
     this.#projectSettingsModel.removeEventListener(
         ProjectSettings.ProjectSettingsModel.Events.PROJECT_SETTINGS_CHANGED, this.#projectSettingsChanged, this);
   }
 
+  #availabilityChanged(
+      event: Common.EventTarget.EventTargetEvent<ProjectSettings.ProjectSettingsModel.ProjectSettingsAvailability>):
+      void {
+    const availability = event.data;
+    if (this.#availability !== availability) {
+      this.#availability = availability;
+      this.dispatchEventToListeners(Events.AVAILABILITY_CHANGED, this.#availability);
+    }
+  }
+
   #projectSettingsChanged(
       event: Common.EventTarget.EventTargetEvent<ProjectSettings.ProjectSettingsModel.ProjectSettings>): void {
     const projectSettings = event.data;
@@ -172,11 +213,18 @@ export const enum Events {
    * `AutomaticFileSystemManager` changes.
    */
   AUTOMATIC_FILE_SYSTEM_CHANGED = 'AutomaticFileSystemChanged',
+
+  /**
+   * Emitted whenever the `availability` property of the
+   * `AutomaticFileSystemManager` changes.
+   */
+  AVAILABILITY_CHANGED = 'AvailabilityChanged',
 }
 
 /**
  * @internal
  */
 export interface EventTypes {
   [Events.AUTOMATIC_FILE_SYSTEM_CHANGED]: Readonly<AutomaticFileSystem>|null;
+  [Events.AVAILABILITY_CHANGED]: AutomaticFileSystemAvailability;
 }

front_end/models/project_settings/ProjectSettingsModel.test.ts

@@ -207,4 +207,54 @@ describe('ProjectSettingsModel', () => {
 
     assert.isTrue(targetManager.addEventListener.notCalled);
   });
+
+  it('reports unavailable when `devToolsWellKnown` is disabled', () => {
+    const hostConfig = {devToolsWellKnown: {enabled: false}};
+    const pageResourceLoader = sinon.createStubInstance(SDK.PageResourceLoader.PageResourceLoader);
+    const targetManager = sinon.createStubInstance(SDK.TargetManager.TargetManager);
+
+    const projectSettingsModel = ProjectSettingsModel.instance({
+      forceNew: true,
+      hostConfig,
+      pageResourceLoader,
+      targetManager,
+    });
+
+    assert.strictEqual(projectSettingsModel.availability, 'unavailable');
+  });
+
+  it('reports available for local origins', async () => {
+    const hostConfig = {devToolsWellKnown: {enabled: true}};
+    const pageResourceLoader = sinon.createStubInstance(SDK.PageResourceLoader.PageResourceLoader);
+    const targetManager = sinon.createStubInstance(SDK.TargetManager.TargetManager);
+
+    const target = sinon.createStubInstance(SDK.Target.Target);
+    targetManager.primaryPageTarget.returns(target);
+
+    const resourceTreeModel = sinon.createStubInstance(SDK.ResourceTreeModel.ResourceTreeModel);
+    target.model.withArgs(SDK.ResourceTreeModel.ResourceTreeModel).returns(resourceTreeModel);
+
+    const url = urlString`http://localhost:5713/.well-known/appspecific/com.chrome.devtools.json`;
+    const frameId = 'frame1';
+    const initiatorUrl = urlString`http://localhost:5713/index.html`;
+    const frame = sinon.createStubInstance(SDK.ResourceTreeModel.ResourceTreeFrame);
+    resourceTreeModel.mainFrame = frame;
+    sinon.stub(frame, 'securityOriginDetails').get(() => ({isLocalhost: true}));
+    sinon.stub(frame, 'url').get(() => initiatorUrl);
+    sinon.stub(frame, 'id').get(() => frameId);
+
+    const content = '{"workspace":{"root":"/home/foo","uuid":"8f7b028c-0323-485f-bcb9-b404edc0f186"}}';
+    pageResourceLoader.loadResource.withArgs(url, sinon.match({target, frameId, initiatorUrl}))
+        .returns(Promise.resolve({content}));
+
+    const projectSettingsModel = ProjectSettingsModel.instance({
+      forceNew: true,
+      hostConfig,
+      pageResourceLoader,
+      targetManager,
+    });
+    await projectSettingsModel.projectSettingsPromise;
+
+    assert.strictEqual(projectSettingsModel.availability, 'available');
+  });
 });

front_end/models/project_settings/ProjectSettingsModel.ts

@@ -60,6 +60,15 @@ export interface ProjectSettings {
   readonly workspace?: {readonly root: Platform.DevToolsPath.RawPathString, readonly uuid: string};
 }
 
+/**
+ * Indicates the availability of the project settings feature.
+ *
+ * `'available'` means that the feature is enabled, the origin of the inspected
+ * page is `localhost`. It doesn't however indicate whether or not the page is
+ * actually providing a `com.chrome.devtools.json` or not.
+ */
+export type ProjectSettingsAvailability = 'available'|'unavailable';
+
 const EMPTY_PROJECT_SETTINGS: ProjectSettings = Object.freeze({});
 const IDLE_PROMISE: Promise<void> = Promise.resolve();
 
@@ -68,9 +77,24 @@ let projectSettingsModelInstance: ProjectSettingsModel|undefined;
 export class ProjectSettingsModel extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   readonly #pageResourceLoader: SDK.PageResourceLoader.PageResourceLoader;
   readonly #targetManager: SDK.TargetManager.TargetManager;
+  #availability: ProjectSettingsAvailability = 'unavailable';
   #projectSettings: ProjectSettings = EMPTY_PROJECT_SETTINGS;
   #promise: Promise<void> = IDLE_PROMISE;
 
+  /**
+   * Yields the availability of the project settings feature.
+   *
+   * `'available'` means that the feature is enabled, the origin of the inspected
+   * page is `localhost`. It doesn't however indicate whether or not the page is
+   * actually providing a `com.chrome.devtools.json` or not.
+   *
+   * @return `'available'` if the feature is enabled and the inspected page is
+   *         `localhost`, otherwise `'unavailable'`.
+   */
+  get availability(): ProjectSettingsAvailability {
+    return this.#availability;
+  }
+
   /**
    * Yields the current project settings.
    *
@@ -169,8 +193,16 @@ export class ProjectSettingsModel extends Common.ObjectWrapper.ObjectWrapper<Eve
   async #loadAndValidateProjectSettings(target: SDK.Target.Target): Promise<ProjectSettings> {
     const frame = target.model(SDK.ResourceTreeModel.ResourceTreeModel)?.mainFrame;
     if (!isLocalFrame(frame)) {
+      if (this.#availability !== 'unavailable') {
+        this.#availability = 'unavailable';
+        this.dispatchEventToListeners(Events.AVAILABILITY_CHANGED, this.#availability);
+      }
       return EMPTY_PROJECT_SETTINGS;
     }
+    if (this.#availability !== 'available') {
+      this.#availability = 'available';
+      this.dispatchEventToListeners(Events.AVAILABILITY_CHANGED, this.#availability);
+    }
     const initiatorUrl = frame.url;
     const frameId = frame.id;
     let url = WELL_KNOWN_DEVTOOLS_JSON_PATH;
@@ -199,10 +231,27 @@ export class ProjectSettingsModel extends Common.ObjectWrapper.ObjectWrapper<Eve
   }
 }
 
+/**
+ * Events emitted by the `ProjectSettingsModel`.
+ */
 export const enum Events {
+  /**
+   * Emitted whenever the `availability` property of the
+   * `ProjectSettingsModel` changes.
+   */
+  AVAILABILITY_CHANGED = 'AvailabilityChanged',
+
+  /**
+   * Emitted whenever the `projectSettings` property of the
+   * `ProjectSettingsModel` changes.
+   */
   PROJECT_SETTINGS_CHANGED = 'ProjectSettingsChanged',
 }
 
+/**
+ * @internal
+ */
 export interface EventTypes {
+  [Events.AVAILABILITY_CHANGED]: ProjectSettingsAvailability;
   [Events.PROJECT_SETTINGS_CHANGED]: ProjectSettings;
 }