Skip to content

Commit 133319e

Browse files
dgp1130dylhunn
dgp1130
authored and
dylhunn
committed
Revert "refactor(devtools): implement multiframe support in devtools page (#53934)" (#54629)
This reverts commit ebcdc8d. PR Close #54629
1 parent 3e0b3a1 commit 133319e

27 files changed

Lines changed: 166 additions & 1024 deletions

‎devtools/projects/demo-standalone/src/app/devtools-app/BUILD.bazel‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ ng_module(
77
srcs = ["devtools-app.component.ts"],
88
deps = [
99
"//devtools/projects/ng-devtools",
10-
"//devtools/projects/ng-devtools/src/lib:frame_manager",
1110
"//devtools/projects/protocol",
1211
"//devtools/src:iframe_message_bus",
1312
"//packages/common",

‎devtools/projects/demo-standalone/src/app/devtools-app/devtools-app.component.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,11 @@ import {Events, MessageBus, PriorityAwareMessageBus} from 'protocol';
1111

1212
import {IFrameMessageBus} from '../../../../../src/iframe-message-bus';
1313
import {DevToolsComponent} from 'ng-devtools';
14-
import {FrameManager} from '../../../../../projects/ng-devtools/src/lib/frame_manager';
1514

1615
@Component({
1716
standalone: true,
1817
imports: [DevToolsComponent],
1918
providers: [
20-
{provide: FrameManager, useFactory: () => FrameManager.initialize(null)},
2119
{
2220
provide: MessageBus,
2321
useFactory(): MessageBus<Events> {

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

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -86,10 +86,6 @@ export const subscribeToClientEvents = (
8686

8787
messageBus.on('logProvider', logProvider);
8888

89-
messageBus.on('log', ({message, level}) => {
90-
console[level](`[Angular DevTools]: ${message}`);
91-
});
92-
9389
if (appIsAngularInDevMode() && appIsSupportedAngularVersion() && appIsAngularIvy()) {
9490
setupInspector(messageBus);
9591
// Often websites have `scroll` event listener which triggers
@@ -220,8 +216,8 @@ const getRoutes = (messageBus: MessageBus<Events>) => {
220216
const checkForAngular = (messageBus: MessageBus<Events>): void => {
221217
const ngVersion = getAngularVersion();
222218
const appIsIvy = appIsAngularIvy();
223-
224219
if (!ngVersion) {
220+
setTimeout(() => checkForAngular(messageBus), 500);
225221
return;
226222
}
227223

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

Lines changed: 1 addition & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
load("//devtools/tools:ng_module.bzl", "ng_module")
22
load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
3-
load("//devtools/tools:typescript.bzl", "ts_test_library")
4-
load("//devtools/tools:defaults.bzl", "karma_web_test_suite")
53

64
package(default_visibility = ["//visibility:public"])
75

@@ -14,18 +12,13 @@ ng_module(
1412
name = "lib",
1513
srcs = glob(
1614
include = ["*.ts"],
17-
exclude = [
18-
"theme-service.ts",
19-
"frame_manager.ts",
20-
"*_spec.ts",
21-
],
15+
exclude = ["theme-service.ts"],
2216
),
2317
angular_assets = [
2418
"devtools.component.html",
2519
":devtools_component_styles",
2620
],
2721
deps = [
28-
":frame_manager",
2922
":theme",
3023
"//devtools/projects/ng-devtools/src/lib/devtools-tabs",
3124
"//devtools/projects/protocol",
@@ -41,58 +34,6 @@ ng_module(
4134
],
4235
)
4336

44-
ts_test_library(
45-
name = "devtools_test",
46-
srcs = ["devtools_spec.ts"],
47-
deps = [
48-
":frame_manager",
49-
":lib",
50-
"//devtools/projects/ng-devtools/src/lib/devtools-tabs",
51-
"//devtools/projects/protocol",
52-
"//packages/core",
53-
"//packages/core/testing",
54-
],
55-
)
56-
57-
karma_web_test_suite(
58-
name = "test",
59-
deps = [
60-
":devtools_test",
61-
],
62-
)
63-
64-
ng_module(
65-
name = "frame_manager",
66-
srcs = glob(
67-
include = ["frame_manager.ts"],
68-
),
69-
deps = [
70-
"//devtools/projects/ng-devtools/src/lib/application-environment",
71-
"//devtools/projects/protocol",
72-
"//packages/core",
73-
],
74-
)
75-
76-
ts_test_library(
77-
name = "test_frame_manager_lib",
78-
srcs = [
79-
"frame_manager_spec.ts",
80-
],
81-
deps = [
82-
":frame_manager",
83-
"//devtools/projects/ng-devtools/src/lib/application-environment",
84-
"//devtools/projects/protocol",
85-
"//packages/core/testing",
86-
],
87-
)
88-
89-
karma_web_test_suite(
90-
name = "test_frame_manager",
91-
deps = [
92-
":test_frame_manager_lib",
93-
],
94-
)
95-
9637
ng_module(
9738
name = "theme",
9839
srcs = glob(

‎devtools/projects/ng-devtools/src/lib/application-environment/index.ts‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,6 @@ export interface Environment {
1515
LATEST_SHA: string;
1616
}
1717

18-
export const TOP_LEVEL_FRAME_ID = 0;
19-
20-
export interface Frame {
21-
id: number;
22-
name: string;
23-
url: URL;
24-
}
25-
2618
export abstract class ApplicationEnvironment {
2719
abstract get environment(): Environment;
28-
abstract frameSelectorEnabled: boolean;
2920
}

‎devtools/projects/ng-devtools/src/lib/application-operations/index.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
import {DirectivePosition, ElementPosition} from 'protocol';
1010

1111
export abstract class ApplicationOperations {
12-
abstract viewSource(position: ElementPosition, directiveIndex?: number, target?: URL): void;
13-
abstract selectDomElement(position: ElementPosition, target?: URL): void;
14-
abstract inspect(directivePosition: DirectivePosition, objectPath: string[], target?: URL): void;
12+
abstract viewSource(position: ElementPosition, directiveIndex?: number): void;
13+
abstract selectDomElement(position: ElementPosition): void;
14+
abstract inspect(directivePosition: DirectivePosition, objectPath: string[]): void;
1515
}

‎devtools/projects/ng-devtools/src/lib/devtools-tabs/BUILD.bazel‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ ng_module(
2020
":devtools_tabs_component_styles",
2121
],
2222
deps = [
23-
"//devtools/projects/ng-devtools/src/lib:frame_manager",
2423
"//devtools/projects/ng-devtools/src/lib:theme",
2524
"//devtools/projects/ng-devtools/src/lib/application-environment",
2625
"//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer",
@@ -43,7 +42,6 @@ ts_test_library(
4342
srcs = ["devtools-tabs.spec.ts"],
4443
deps = [
4544
":devtools-tabs",
46-
"//devtools/projects/ng-devtools/src/lib:frame_manager",
4745
"//devtools/projects/ng-devtools/src/lib:theme",
4846
"//devtools/projects/ng-devtools/src/lib/application-environment",
4947
"//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer",
@@ -58,6 +56,7 @@ ts_test_library(
5856
],
5957
)
6058

59+
# todo(aleksanderbodurri): fix this test suite
6160
karma_web_test_suite(
6261
name = "test",
6362
deps = [
@@ -66,3 +65,16 @@ karma_web_test_suite(
6665
"//packages/platform-browser/animations",
6766
],
6867
)
68+
69+
# spec_bundle(
70+
# name = "test_bundle",
71+
# deps = [
72+
# ":devtools_tabs_test",
73+
# "//packages/platform-browser/animations",
74+
# "//packages/animations",
75+
# "//packages/common/http",
76+
# "//packages/core",
77+
# "//packages/core/src/util",
78+
# ],
79+
# platform = "browser",
80+
# )

‎devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.html‎

Lines changed: 11 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -10,21 +10,6 @@
1010
<mat-icon> info </mat-icon>
1111
</button>
1212
</div>
13-
14-
<select matTooltip="Select a frame to inspect with Angular Devtools" class="frame-selector" (change)="emitSelectedFrame($event.target.value)">
15-
@for (frame of frameManager.frames; track frame.id) {
16-
<option [value]="frame.id" [selected]="frameManager.isSelectedFrame(frame)">
17-
@if (frame.id === TOP_LEVEL_FRAME_ID) {
18-
top
19-
} @else {
20-
{{ frame.name }} ({{ frame.id }})
21-
}
22-
</option>
23-
} @empty {
24-
<option value="0" selected>top</option>
25-
}
26-
</select>
27-
2813
@for (tab of tabs; track $index) {
2914
<a class="mat-tab-link" mat-tab-link (click)="changeTab(tab)" [active]="activeTab === tab">
3015
{{ tab }}
@@ -42,23 +27,19 @@
4227
</section>
4328
}
4429
</nav>
45-
4630
<mat-tab-nav-panel #tabPanel>
47-
@if (!applicationEnvironment.frameSelectorEnabled || frameManager.selectedFrame !== null) {
48-
<div class="tab-content">
49-
<ng-directive-explorer
50-
[showCommentNodes]="showCommentNodes"
51-
[isHydrationEnabled]="isHydrationEnabled"
52-
[class.hidden]="activeTab !== 'Components'"
53-
(toggleInspector)="toggleInspector()"
54-
/>
55-
<ng-profiler [class.hidden]="activeTab !== 'Profiler'"/>
56-
<ng-router-tree [routes]="routes" [class.hidden]="activeTab !== 'Router Tree'"/>
57-
<ng-injector-tree [class.hidden]="activeTab !== 'Injector Tree'"/>
58-
</div>
59-
}
31+
<div class="tab-content">
32+
<ng-directive-explorer
33+
[showCommentNodes]="showCommentNodes"
34+
[isHydrationEnabled]="isHydrationEnabled"
35+
[class.hidden]="activeTab !== 'Components'"
36+
(toggleInspector)="toggleInspector()"
37+
/>
38+
<ng-profiler [class.hidden]="activeTab !== 'Profiler'"/>
39+
<ng-router-tree [routes]="routes" [class.hidden]="activeTab !== 'Router Tree'"/>
40+
<ng-injector-tree [class.hidden]="activeTab !== 'Injector Tree'"/>
41+
</div>
6042
</mat-tab-nav-panel>
61-
6243
<mat-menu #menu="matMenu">
6344
<div mat-menu-item disableRipple (click)="$event.stopPropagation(); toggleTimingAPI()">
6445
<mat-slide-toggle [checked]="timingAPIEnabled">
@@ -76,7 +57,6 @@
7657
</mat-slide-toggle>
7758
</div>
7859
</mat-menu>
79-
8060
<mat-menu #info="matMenu">
8161
<a mat-menu-item href="https://angular.io/devtools" target="_blank">
8262
<mat-icon>library_books</mat-icon>

‎devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.scss‎

Lines changed: 0 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -119,22 +119,3 @@ mat-icon {
119119
}
120120
}
121121
}
122-
123-
.frame-selector {
124-
background-color: #e2e2e2;
125-
border-radius: 2px;
126-
color: #474747;
127-
border: none;
128-
margin: 4px 4px 2px 4px;
129-
padding: 2px;
130-
outline-offset: -2px;
131-
width: 100px;
132-
font-size: 12px;
133-
}
134-
135-
:host-context(.dark-theme) {
136-
.frame-selector {
137-
background-color: #464646;
138-
color: #fff;
139-
}
140-
}

‎devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.ts‎

Lines changed: 6 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,7 @@
66
* found in the LICENSE file at https://angular.io/license
77
*/
88

9-
import {
10-
AfterViewInit,
11-
Component,
12-
EventEmitter,
13-
inject,
14-
Input,
15-
OnInit,
16-
Output,
17-
ViewChild,
18-
} from '@angular/core';
9+
import {AfterViewInit, Component, Input, OnInit, ViewChild} from '@angular/core';
1910
import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
2011
import {MatIcon} from '@angular/material/icon';
2112
import {MatMenu, MatMenuItem, MatMenuTrigger} from '@angular/material/menu';
@@ -24,8 +15,7 @@ import {MatTabLink, MatTabNav, MatTabNavPanel} from '@angular/material/tabs';
2415
import {MatTooltip} from '@angular/material/tooltip';
2516
import {Events, MessageBus, Route} from 'protocol';
2617

27-
import {ApplicationEnvironment, Frame, TOP_LEVEL_FRAME_ID} from '../application-environment/index';
28-
import {FrameManager} from '../frame_manager';
18+
import {ApplicationEnvironment} from '../application-environment/index';
2919
import {Theme, ThemeService} from '../theme-service';
3020

3121
import {DirectiveExplorerComponent} from './directive-explorer/directive-explorer.component';
@@ -62,28 +52,25 @@ export class DevToolsTabsComponent implements OnInit, AfterViewInit {
6252
@Input() angularVersion: string | undefined = undefined;
6353
@Input() isHydrationEnabled = false;
6454

65-
@Output() frameSelected = new EventEmitter<Frame>();
6655
@ViewChild(DirectiveExplorerComponent) directiveExplorer!: DirectiveExplorerComponent;
6756
@ViewChild('navBar', {static: true}) navbar!: MatTabNav;
6857

69-
applicationEnvironment = inject(ApplicationEnvironment);
7058
activeTab: Tabs = 'Components';
59+
7160
inspectorRunning = false;
7261
routerTreeEnabled = false;
7362
showCommentNodes = false;
7463
timingAPIEnabled = false;
7564

7665
currentTheme!: Theme;
77-
routes: Route[] = [];
78-
79-
frameManager = inject(FrameManager);
8066

81-
TOP_LEVEL_FRAME_ID = TOP_LEVEL_FRAME_ID;
67+
routes: Route[] = [];
8268

8369
constructor(
8470
public tabUpdate: TabUpdate,
8571
public themeService: ThemeService,
8672
private _messageBus: MessageBus<Events>,
73+
private _applicationEnvironment: ApplicationEnvironment,
8774
) {
8875
this.themeService.currentTheme
8976
.pipe(takeUntilDestroyed())
@@ -94,11 +81,6 @@ export class DevToolsTabsComponent implements OnInit, AfterViewInit {
9481
});
9582
}
9683

97-
emitSelectedFrame(frameId: string): void {
98-
const frame = this.frameManager.frames.find((frame) => frame.id === parseInt(frameId, 10));
99-
this.frameSelected.emit(frame);
100-
}
101-
10284
ngOnInit(): void {
10385
this.navbar.stretchTabs = false;
10486
}
@@ -113,7 +95,7 @@ export class DevToolsTabsComponent implements OnInit, AfterViewInit {
11395
}
11496

11597
get latestSHA(): string {
116-
return this.applicationEnvironment.environment.LATEST_SHA.slice(0, 8);
98+
return this._applicationEnvironment.environment.LATEST_SHA.slice(0, 8);
11799
}
118100

119101
changeTab(tab: Tabs): void {

0 commit comments

Comments
 (0)