refactor(devtools): disable unsupported features (angular#60585)

Prepare the app for Wiz & ACX and handle unsupported features by disabling their respective UI.

PR Close angular#60585

Author: hawkgs

devtools/projects/ng-devtools-backend/src/BUILD.bazel

@@ -7,6 +7,6 @@ ts_library(
     srcs = ["public-api.ts"],
     deps = [
         "//devtools/projects/ng-devtools-backend/src/lib",
-        "//devtools/projects/ng-devtools-backend/src/lib:component_tree",
+        "//devtools/projects/ng-devtools-backend/src/lib/component-tree",
     ],
 )

devtools/projects/ng-devtools-backend/src/lib/BUILD.bazel

@@ -158,13 +158,13 @@ ts_library(
     name = "client_event_subscribers",
     srcs = ["client-event-subscribers.ts"],
     deps = [
-        ":component_tree",
         ":highlighter",
         ":interfaces",
         ":router_tree",
         ":set_console_reference",
         ":utils",
         "//devtools/projects/ng-devtools-backend/src/lib/component-inspector",
+        "//devtools/projects/ng-devtools-backend/src/lib/component-tree",
         "//devtools/projects/ng-devtools-backend/src/lib/hooks",
         "//devtools/projects/ng-devtools-backend/src/lib/ng-debug-api",
         "//devtools/projects/ng-devtools-backend/src/lib/state-serializer",
@@ -173,33 +173,3 @@ ts_library(
         "@npm//rxjs",
     ],
 )
-
-ts_library(
-    name = "component_tree",
-    srcs = ["component-tree.ts"],
-    deps = [
-        ":interfaces",
-        ":property_mutation",
-        ":utils",
-        "//devtools/projects/ng-devtools-backend/src/lib/directive-forest",
-        "//devtools/projects/ng-devtools-backend/src/lib/ng-debug-api",
-        "//devtools/projects/ng-devtools-backend/src/lib/state-serializer",
-        "//devtools/projects/protocol",
-        "//packages/core",
-    ],
-)
-
-ts_test_library(
-    name = "component_tree_test_lib",
-    srcs = ["component-tree.spec.ts"],
-    deps = [
-        ":component_tree",
-        "//packages/core",
-        "@npm//jasmine",
-    ],
-)
-
-karma_web_test_suite(
-    name = "component_tree_test",
-    deps = [":component_tree_test_lib"],
-)

devtools/projects/ng-devtools-backend/src/lib/client-event-subscribers.ts

@@ -45,7 +45,7 @@ import {
   serializeProviderRecord,
   serializeResolutionPath,
   updateState,
-} from './component-tree';
+} from './component-tree/component-tree';
 import {unHighlight} from './highlighter';
 import {disableTimingAPI, enableTimingAPI, initializeOrGetDirectiveForestHooks} from './hooks';
 import {start as startProfiling, stop as stopProfiling} from './hooks/capture';
@@ -56,6 +56,7 @@ import {setConsoleReference} from './set-console-reference';
 import {serializeDirectiveState} from './state-serializer/state-serializer';
 import {runOutsideAngular, unwrapSignal} from './utils';
 import {DirectiveForestHooks} from './hooks/hooks';
+import {getSupportedApis} from './ng-debug-api/supported-apis';
 
 type InspectorRef = {ref: ComponentInspector | null};
 
@@ -337,6 +338,7 @@ const checkForAngular = (messageBus: MessageBus<Events>): void => {
       devMode: appIsAngularInDevMode(),
       ivy: appIsIvy,
       hydration: isHydrationEnabled(),
+      supportedApis: getSupportedApis(),
     },
   ]);
 };

devtools/projects/ng-devtools-backend/src/lib/component-inspector/BUILD.bazel

@@ -1,15 +1,15 @@
-load("//devtools/tools:typescript.bzl", "ts_library", "ts_test_library")
 load("//devtools/tools:defaults.bzl", "karma_web_test_suite")
+load("//devtools/tools:typescript.bzl", "ts_library", "ts_test_library")
 
 package(default_visibility = ["//visibility:public"])
 
 ts_library(
     name = "component-inspector",
     srcs = ["component-inspector.ts"],
     deps = [
-        "//devtools/projects/ng-devtools-backend/src/lib:component_tree",
         "//devtools/projects/ng-devtools-backend/src/lib:highlighter",
         "//devtools/projects/ng-devtools-backend/src/lib:interfaces",
+        "//devtools/projects/ng-devtools-backend/src/lib/component-tree",
         "//devtools/projects/ng-devtools-backend/src/lib/hooks",
         "//devtools/projects/protocol",
     ],
@@ -27,10 +27,10 @@ ts_test_library(
     ],
     deps = [
         ":component-inspector",
-        "//devtools/projects/ng-devtools-backend/src/lib:component_tree",
         "//devtools/projects/ng-devtools-backend/src/lib:highlighter",
         "//devtools/projects/ng-devtools-backend/src/lib:interfaces",
         "//devtools/projects/ng-devtools-backend/src/lib:utils",
+        "//devtools/projects/ng-devtools-backend/src/lib/component-tree",
         "//devtools/projects/ng-devtools-backend/src/lib/hooks",
         "//devtools/projects/protocol",
         "//packages/core",

devtools/projects/ng-devtools-backend/src/lib/component-inspector/component-inspector.ts

@@ -8,7 +8,7 @@
 
 import {ElementPosition, HydrationStatus} from 'protocol';
 
-import {findNodeInForest} from '../component-tree';
+import {findNodeInForest} from '../component-tree/component-tree';
 import {
   findComponentAndHost,
   highlightHydrationElement,

devtools/projects/ng-devtools-backend/src/lib/component-tree/BUILD.bazel

@@ -0,0 +1,47 @@
+load("//devtools/tools:defaults.bzl", "karma_web_test_suite")
+load("//devtools/tools:typescript.bzl", "ts_library", "ts_test_library")
+
+package(default_visibility = ["//visibility:public"])
+
+ts_library(
+    name = "get-roots",
+    srcs = ["get-roots.ts"],
+)
+
+ts_library(
+    name = "core-enums",
+    srcs = ["core-enums.ts"],
+)
+
+ts_library(
+    name = "component-tree",
+    srcs = ["component-tree.ts"],
+    deps = [
+        ":core-enums",
+        ":get-roots",
+        "//devtools/projects/ng-devtools-backend/src/lib:interfaces",
+        "//devtools/projects/ng-devtools-backend/src/lib:property_mutation",
+        "//devtools/projects/ng-devtools-backend/src/lib:utils",
+        "//devtools/projects/ng-devtools-backend/src/lib/directive-forest",
+        "//devtools/projects/ng-devtools-backend/src/lib/ng-debug-api",
+        "//devtools/projects/ng-devtools-backend/src/lib/state-serializer",
+        "//devtools/projects/protocol",
+        "//packages/core",
+    ],
+)
+
+ts_test_library(
+    name = "test_lib",
+    srcs = glob(["*.spec.ts"]),
+    deps = [
+        ":component-tree",
+        ":get-roots",
+        "//packages/core",
+        "@npm//jasmine",
+    ],
+)
+
+karma_web_test_suite(
+    name = "test",
+    deps = [":test_lib"],
+)

devtools/projects/ng-devtools-backend/src/lib/component-tree.spec.ts renamed to devtools/projects/ng-devtools-backend/src/lib/component-tree/component-tree.spec.ts

@@ -30,38 +30,23 @@ import {
   SerializedProviderRecord,
   UpdatedStateData,
 } from 'protocol';
-import {buildDirectiveTree, getLViewFromDirectiveOrElementInstance} from './directive-forest/index';
+import {
+  buildDirectiveTree,
+  getLViewFromDirectiveOrElementInstance,
+} from '../directive-forest/index';
 import {
   ngDebugApiIsSupported,
   ngDebugClient,
   ngDebugDependencyInjectionApiIsSupported,
-} from './ng-debug-api/ng-debug-api';
+} from '../ng-debug-api/ng-debug-api';
 import {
   deeplySerializeSelectedProperties,
   serializeDirectiveState,
-} from './state-serializer/state-serializer';
-import {mutateNestedProp} from './property-mutation';
-import {ComponentTreeNode, DirectiveInstanceType, ComponentInstanceType} from './interfaces';
-
-// Need to be kept in sync with Angular framework
-// We can't directly import it from framework now
-// because this also pulls up the security policies
-// for Trusted Types, which we reinstantiate.
-enum ChangeDetectionStrategy {
-  OnPush = 0,
-  Default = 1,
-}
-
-enum AcxChangeDetectionStrategy {
-  Default = 0,
-  OnPush = 1,
-}
-
-enum Framework {
-  Angular = 'angular',
-  ACX = 'acx',
-  Wiz = 'wiz',
-}
+} from '../state-serializer/state-serializer';
+import {mutateNestedProp} from '../property-mutation';
+import {ComponentTreeNode, DirectiveInstanceType, ComponentInstanceType} from '../interfaces';
+import {getRoots} from './get-roots';
+import {AcxChangeDetectionStrategy, ChangeDetectionStrategy, Framework} from './core-enums';
 
 export const injectorToId = new WeakMap<Injector | HTMLElement, string>();
 export const nodeInjectorToResolutionPath = new WeakMap<HTMLElement, SerializedInjector[]>();
@@ -559,25 +544,6 @@ const getRootLViewsHelper = (element: Element, rootLViews = new Set<any>()): Set
   return rootLViews;
 };
 
-const getRoots = () => {
-  const roots = Array.from(document.documentElement.querySelectorAll('[ng-version]'));
-
-  const isTopLevel = (element: Element) => {
-    let parent: Element | null = element;
-
-    while (parent?.parentElement) {
-      parent = parent.parentElement;
-      if (parent.hasAttribute('ng-version')) {
-        return false;
-      }
-    }
-
-    return true;
-  };
-
-  return roots.filter(isTopLevel);
-};
-
 export const buildDirectiveForest = (): ComponentTreeNode[] => {
   const roots = getRoots();
   return Array.prototype.concat.apply([], Array.from(roots).map(buildDirectiveTree));

devtools/projects/ng-devtools-backend/src/lib/component-tree.ts renamed to devtools/projects/ng-devtools-backend/src/lib/component-tree/component-tree.ts

@@ -0,0 +1,27 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+// Need to be kept in sync with Angular framework
+// We can't directly import it from framework now
+// because this also pulls up the security policies
+// for Trusted Types, which we reinstantiate.
+export enum ChangeDetectionStrategy {
+  OnPush = 0,
+  Default = 1,
+}
+
+export enum AcxChangeDetectionStrategy {
+  Default = 0,
+  OnPush = 1,
+}
+
+export enum Framework {
+  Angular = 'angular',
+  ACX = 'acx',
+  Wiz = 'wiz',
+}

devtools/projects/ng-devtools-backend/src/lib/component-tree/core-enums.ts

@@ -0,0 +1,48 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import {getRoots} from './get-roots';
+
+function createRoot() {
+  const root = document.createElement('div');
+  root.setAttribute('ng-version', '');
+  return root;
+}
+
+describe('getRoots', () => {
+  afterEach(() => {
+    document.body.replaceChildren();
+  });
+
+  it('should return root element', () => {
+    const rootElement = createRoot();
+    const childElement = createRoot();
+
+    rootElement.appendChild(childElement);
+    document.body.appendChild(rootElement);
+
+    const roots = getRoots();
+
+    expect(roots.length).toEqual(1);
+    expect(roots.pop()).toEqual(rootElement);
+  });
+
+  it('should return root elements', () => {
+    const firstRoot = createRoot();
+    const secondRoot = createRoot();
+
+    document.body.appendChild(firstRoot);
+    document.body.appendChild(secondRoot);
+
+    const roots = getRoots();
+
+    expect(roots.length).toEqual(2);
+    expect(roots).toContain(firstRoot);
+    expect(roots).toContain(secondRoot);
+  });
+});

devtools/projects/ng-devtools-backend/src/lib/component-tree/get-roots.spec.ts

@@ -0,0 +1,27 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+/** Returns all app roots. */
+export function getRoots(): Element[] {
+  const roots = Array.from(document.documentElement.querySelectorAll('[ng-version]'));
+
+  const isTopLevel = (element: Element) => {
+    let parent: Element | null = element;
+
+    while (parent?.parentElement) {
+      parent = parent.parentElement;
+      if (parent.hasAttribute('ng-version')) {
+        return false;
+      }
+    }
+
+    return true;
+  };
+
+  return roots.filter(isTopLevel);
+}

devtools/projects/ng-devtools-backend/src/lib/component-tree/get-roots.ts

@@ -25,8 +25,8 @@ ts_library(
     name = "identity_tracker",
     srcs = ["identity-tracker.ts"],
     deps = [
-        "//devtools/projects/ng-devtools-backend/src/lib:component_tree",
         "//devtools/projects/ng-devtools-backend/src/lib:interfaces",
+        "//devtools/projects/ng-devtools-backend/src/lib/component-tree",
         "//devtools/projects/protocol",
     ],
 )

devtools/projects/ng-devtools-backend/src/lib/hooks/BUILD.bazel

@@ -8,7 +8,7 @@
 
 import {DevToolsNode, ElementPosition} from 'protocol';
 
-import {buildDirectiveForest} from '../component-tree';
+import {buildDirectiveForest} from '../component-tree/component-tree';
 import {ComponentInstanceType, ComponentTreeNode, DirectiveInstanceType} from '../interfaces';
 
 export declare interface Type<T> extends Function {

devtools/projects/ng-devtools-backend/src/lib/hooks/identity-tracker.ts

@@ -11,6 +11,9 @@ ng_module(
         exclude = ["*.spec.ts"],
     ),
     deps = [
+        "//devtools/projects/ng-devtools-backend/src/lib/component-tree:core-enums",
+        "//devtools/projects/ng-devtools-backend/src/lib/component-tree:get-roots",
+        "//devtools/projects/protocol",
         "//packages/core",
     ],
 )
@@ -20,6 +23,7 @@ ts_test_library(
     srcs = ["ng-debug-api.spec.ts"],
     deps = [
         ":ng-debug-api",
+        "//devtools/projects/ng-devtools-backend/src/lib/component-tree:core-enums",
         "//packages/core",
         "@npm//jasmine",
     ],