angular · AleksanderBodurri · Jan 26, 2024 · Jan 26, 2024
diff --git a/devtools/projects/demo-standalone/src/app/devtools-app/BUILD.bazel b/devtools/projects/demo-standalone/src/app/devtools-app/BUILD.bazel
@@ -7,6 +7,7 @@ ng_module(
     srcs = ["devtools-app.component.ts"],
     deps = [
         "//devtools/projects/ng-devtools",
+        "//devtools/projects/ng-devtools/src/lib:frame_manager",
         "//devtools/projects/protocol",
         "//devtools/src:iframe_message_bus",
         "//packages/common",

diff --git a/devtools/projects/demo-standalone/src/app/devtools-app/devtools-app.component.ts b/devtools/projects/demo-standalone/src/app/devtools-app/devtools-app.component.ts
@@ -11,11 +11,13 @@ import {Events, MessageBus, PriorityAwareMessageBus} from 'protocol';
 
 import {IFrameMessageBus} from '../../../../../src/iframe-message-bus';
 import {DevToolsComponent} from 'ng-devtools';
+import {FrameManager} from '../../../../../projects/ng-devtools/src/lib/frame_manager';
 
 @Component({
   standalone: true,
   imports: [DevToolsComponent],
   providers: [
+    {provide: FrameManager, useFactory: () => FrameManager.initialize(null)},
     {
       provide: MessageBus,
       useFactory(): MessageBus<Events> {

diff --git a/devtools/projects/ng-devtools-backend/src/lib/client-event-subscribers.ts b/devtools/projects/ng-devtools-backend/src/lib/client-event-subscribers.ts
@@ -86,6 +86,10 @@ export const subscribeToClientEvents = (
 
   messageBus.on('logProvider', logProvider);
 
+  messageBus.on('log', ({message, level}) => {
+    console[level](`[Angular DevTools]: ${message}`);
+  });
+
   if (appIsAngularInDevMode() && appIsSupportedAngularVersion() && appIsAngularIvy()) {
     setupInspector(messageBus);
     // Often websites have `scroll` event listener which triggers
@@ -216,8 +220,8 @@ const getRoutes = (messageBus: MessageBus<Events>) => {
 const checkForAngular = (messageBus: MessageBus<Events>): void => {
   const ngVersion = getAngularVersion();
   const appIsIvy = appIsAngularIvy();
+
   if (!ngVersion) {
-    setTimeout(() => checkForAngular(messageBus), 500);
     return;
   }
 

diff --git a/devtools/projects/ng-devtools/src/lib/BUILD.bazel b/devtools/projects/ng-devtools/src/lib/BUILD.bazel
@@ -1,5 +1,7 @@
 load("//devtools/tools:ng_module.bzl", "ng_module")
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
+load("//devtools/tools:typescript.bzl", "ts_test_library")
+load("//devtools/tools:defaults.bzl", "karma_web_test_suite")
 
 package(default_visibility = ["//visibility:public"])
 
@@ -12,13 +14,18 @@ ng_module(
     name = "lib",
     srcs = glob(
         include = ["*.ts"],
-        exclude = ["theme-service.ts"],
+        exclude = [
+            "theme-service.ts",
+            "frame_manager.ts",
+            "*_spec.ts",
+        ],
     ),
     angular_assets = [
         "devtools.component.html",
         ":devtools_component_styles",
     ],
     deps = [
+        ":frame_manager",
         ":theme",
         "//devtools/projects/ng-devtools/src/lib/devtools-tabs",
         "//devtools/projects/protocol",
@@ -34,6 +41,58 @@ ng_module(
     ],
 )
 
+ts_test_library(
+    name = "devtools_test",
+    srcs = ["devtools_spec.ts"],
+    deps = [
+        ":frame_manager",
+        ":lib",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs",
+        "//devtools/projects/protocol",
+        "//packages/core",
+        "//packages/core/testing",
+    ],
+)
+
+karma_web_test_suite(
+    name = "test",
+    deps = [
+        ":devtools_test",
+    ],
+)
+
+ng_module(
+    name = "frame_manager",
+    srcs = glob(
+        include = ["frame_manager.ts"],
+    ),
+    deps = [
+        "//devtools/projects/ng-devtools/src/lib/application-environment",
+        "//devtools/projects/protocol",
+        "//packages/core",
+    ],
+)
+
+ts_test_library(
+    name = "test_frame_manager_lib",
+    srcs = [
+        "frame_manager_spec.ts",
+    ],
+    deps = [
+        ":frame_manager",
+        "//devtools/projects/ng-devtools/src/lib/application-environment",
+        "//devtools/projects/protocol",
+        "//packages/core/testing",
+    ],
+)
+
+karma_web_test_suite(
+    name = "test_frame_manager",
+    deps = [
+        ":test_frame_manager_lib",
+    ],
+)
+
 ng_module(
     name = "theme",
     srcs = glob(

diff --git a/devtools/projects/ng-devtools/src/lib/application-environment/index.ts b/devtools/projects/ng-devtools/src/lib/application-environment/index.ts
@@ -15,6 +15,15 @@ export interface Environment {
   LATEST_SHA: string;
 }
 
+export const TOP_LEVEL_FRAME_ID = 0;
+
+export interface Frame {
+  id: number;
+  name: string;
+  url: URL;
+}
+
 export abstract class ApplicationEnvironment {
   abstract get environment(): Environment;
+  abstract frameSelectorEnabled: boolean;
 }
diff --git a/devtools/projects/ng-devtools/src/lib/application-operations/index.ts b/devtools/projects/ng-devtools/src/lib/application-operations/index.ts
@@ -9,7 +9,7 @@
 import {DirectivePosition, ElementPosition} from 'protocol';
 
 export abstract class ApplicationOperations {
-  abstract viewSource(position: ElementPosition, directiveIndex?: number): void;
-  abstract selectDomElement(position: ElementPosition): void;
-  abstract inspect(directivePosition: DirectivePosition, objectPath: string[]): void;
+  abstract viewSource(position: ElementPosition, directiveIndex?: number, target?: URL): void;
+  abstract selectDomElement(position: ElementPosition, target?: URL): void;
+  abstract inspect(directivePosition: DirectivePosition, objectPath: string[], target?: URL): void;
 }
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/BUILD.bazel b/devtools/projects/ng-devtools/src/lib/devtools-tabs/BUILD.bazel
@@ -20,6 +20,7 @@ ng_module(
         ":devtools_tabs_component_styles",
     ],
     deps = [
+        "//devtools/projects/ng-devtools/src/lib:frame_manager",
         "//devtools/projects/ng-devtools/src/lib:theme",
         "//devtools/projects/ng-devtools/src/lib/application-environment",
         "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer",
@@ -42,6 +43,7 @@ ts_test_library(
     srcs = ["devtools-tabs.spec.ts"],
     deps = [
         ":devtools-tabs",
+        "//devtools/projects/ng-devtools/src/lib:frame_manager",
         "//devtools/projects/ng-devtools/src/lib:theme",
         "//devtools/projects/ng-devtools/src/lib/application-environment",
         "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer",
@@ -56,7 +58,6 @@ ts_test_library(
     ],
 )
 
-# todo(aleksanderbodurri): fix this test suite
 karma_web_test_suite(
     name = "test",
     deps = [
@@ -65,16 +66,3 @@ karma_web_test_suite(
         "//packages/platform-browser/animations",
     ],
 )
-
-# spec_bundle(
-#     name = "test_bundle",
-#     deps = [
-#         ":devtools_tabs_test",
-#         "//packages/platform-browser/animations",
-#         "//packages/animations",
-#         "//packages/common/http",
-#         "//packages/core",
-#         "//packages/core/src/util",
-#     ],
-#     platform = "browser",
-# )
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.html b/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.html
@@ -10,6 +10,21 @@
       <mat-icon> info </mat-icon>
     </button>
   </div>
+
+  <select matTooltip="Select a frame to inspect with Angular Devtools" class="frame-selector" (change)="emitSelectedFrame($event.target.value)">
+    @for (frame of frameManager.frames; track frame.id) {
+      <option [value]="frame.id" [selected]="frameManager.isSelectedFrame(frame)">
+        @if (frame.id === TOP_LEVEL_FRAME_ID) {
+          top
+        } @else {
+          {{ frame.name }} ({{ frame.id }})
+        }
+      </option>
+    } @empty {
+      <option value="0" selected>top</option>
+    }
+  </select>
+
   @for (tab of tabs; track $index) {
     <a class="mat-tab-link" mat-tab-link (click)="changeTab(tab)" [active]="activeTab === tab">
       {{ tab }}
@@ -27,19 +42,23 @@
     </section>
   }
 </nav>
+
 <mat-tab-nav-panel #tabPanel>
-<div class="tab-content">
-  <ng-directive-explorer
-    [showCommentNodes]="showCommentNodes"
-    [isHydrationEnabled]="isHydrationEnabled"
-    [class.hidden]="activeTab !== 'Components'"
-    (toggleInspector)="toggleInspector()"
-  />
-  <ng-profiler [class.hidden]="activeTab !== 'Profiler'"/>
-  <ng-router-tree [routes]="routes" [class.hidden]="activeTab !== 'Router Tree'"/>
-  <ng-injector-tree [class.hidden]="activeTab !== 'Injector Tree'"/>
-</div>
+  @if (!applicationEnvironment.frameSelectorEnabled || frameManager.selectedFrame !== null) {
+    <div class="tab-content">
+      <ng-directive-explorer
+        [showCommentNodes]="showCommentNodes"
+        [isHydrationEnabled]="isHydrationEnabled"
+        [class.hidden]="activeTab !== 'Components'"
+        (toggleInspector)="toggleInspector()"
+      />
+      <ng-profiler [class.hidden]="activeTab !== 'Profiler'"/>
+      <ng-router-tree [routes]="routes" [class.hidden]="activeTab !== 'Router Tree'"/>
+      <ng-injector-tree [class.hidden]="activeTab !== 'Injector Tree'"/>
+    </div>
+  }
 </mat-tab-nav-panel>
+
 <mat-menu #menu="matMenu">
   <div mat-menu-item disableRipple (click)="$event.stopPropagation(); toggleTimingAPI()">
     <mat-slide-toggle [checked]="timingAPIEnabled">
@@ -57,6 +76,7 @@
     </mat-slide-toggle>
   </div>
 </mat-menu>
+
 <mat-menu #info="matMenu">
   <a mat-menu-item href="https://angular.io/devtools" target="_blank">
     <mat-icon>library_books</mat-icon>

diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.scss
@@ -119,3 +119,22 @@ mat-icon {
     }
   }
 }
+
+.frame-selector {
+  background-color: #e2e2e2;
+  border-radius: 2px;
+  color: #474747;
+  border: none;
+  margin: 4px 4px 2px 4px;
+  padding: 2px;
+  outline-offset: -2px;
+  width: 100px;
+  font-size: 12px;
+}
+
+:host-context(.dark-theme) {
+  .frame-selector {
+    background-color: #464646;
+    color: #fff;
+  }
+}
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.ts
@@ -6,7 +6,16 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {AfterViewInit, Component, Input, OnInit, ViewChild} from '@angular/core';
+import {
+  AfterViewInit,
+  Component,
+  EventEmitter,
+  inject,
+  Input,
+  OnInit,
+  Output,
+  ViewChild,
+} from '@angular/core';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 import {MatIcon} from '@angular/material/icon';
 import {MatMenu, MatMenuItem, MatMenuTrigger} from '@angular/material/menu';
@@ -15,7 +24,8 @@ import {MatTabLink, MatTabNav, MatTabNavPanel} from '@angular/material/tabs';
 import {MatTooltip} from '@angular/material/tooltip';
 import {Events, MessageBus, Route} from 'protocol';
 
-import {ApplicationEnvironment} from '../application-environment/index';
+import {ApplicationEnvironment, Frame, TOP_LEVEL_FRAME_ID} from '../application-environment/index';
+import {FrameManager} from '../frame_manager';
 import {Theme, ThemeService} from '../theme-service';
 
 import {DirectiveExplorerComponent} from './directive-explorer/directive-explorer.component';
@@ -52,25 +62,28 @@ export class DevToolsTabsComponent implements OnInit, AfterViewInit {
   @Input() angularVersion: string | undefined = undefined;
   @Input() isHydrationEnabled = false;
 
+  @Output() frameSelected = new EventEmitter<Frame>();
   @ViewChild(DirectiveExplorerComponent) directiveExplorer!: DirectiveExplorerComponent;
   @ViewChild('navBar', {static: true}) navbar!: MatTabNav;
 
+  applicationEnvironment = inject(ApplicationEnvironment);
   activeTab: Tabs = 'Components';
-
   inspectorRunning = false;
   routerTreeEnabled = false;
   showCommentNodes = false;
   timingAPIEnabled = false;
 
   currentTheme!: Theme;
-
   routes: Route[] = [];
 
+  frameManager = inject(FrameManager);
+
+  TOP_LEVEL_FRAME_ID = TOP_LEVEL_FRAME_ID;
+
   constructor(
     public tabUpdate: TabUpdate,
     public themeService: ThemeService,
     private _messageBus: MessageBus<Events>,
-    private _applicationEnvironment: ApplicationEnvironment,
   ) {
     this.themeService.currentTheme
       .pipe(takeUntilDestroyed())
@@ -81,6 +94,11 @@ export class DevToolsTabsComponent implements OnInit, AfterViewInit {
     });
   }
 
+  emitSelectedFrame(frameId: string): void {
+    const frame = this.frameManager.frames.find((frame) => frame.id === parseInt(frameId, 10));
+    this.frameSelected.emit(frame);
+  }
+
   ngOnInit(): void {
     this.navbar.stretchTabs = false;
   }
@@ -95,7 +113,7 @@ export class DevToolsTabsComponent implements OnInit, AfterViewInit {
   }
 
   get latestSHA(): string {
-    return this._applicationEnvironment.environment.LATEST_SHA.slice(0, 8);
+    return this.applicationEnvironment.environment.LATEST_SHA.slice(0, 8);
   }
 
   changeTab(tab: Tabs): void {