skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(devtools): implement multiframe support in devtools page (#53934)

Browse Source 
In the Angular DevTools Chrome DevTools page:

- Angular DevTools is able to ask the background script to list each frame that has been registered on a page.
- Angular Devtools is able to ask the background script to "enable" the connection on a particular frame. This enables the messaging between the content script <-> background script <-> devtools page
- Implements detection of non unique urls on the inspected page

Limitations:
- The `inspectedWindow.eval` API is only able to target frames by frameURL. This means some features that integrate with Chrome DevTools like inspect element and open source will not be available when inspecting frames that do not have a unique url on the page.

PR Close #53934
This commit is contained in:
AleksanderBodurri
2024-01-25 19:35:36 -05:00
committed by Andrew Kushnir
parent dd3dac9cc9
commit ebcdc8dc96
27 changed files with 1024 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files
devtools/projects/ng-devtools/src/lib/devtools.component.ts
+40 -14
View File
@@ -9,13 +9,36 @@
import {animate, style, transition, trigger} from '@angular/animations';
import {Platform} from '@angular/cdk/platform';
import {DOCUMENT} from '@angular/common';
import {Component, Inject, OnDestroy, OnInit} from '@angular/core';
import {Component, inject, OnDestroy, OnInit} from '@angular/core';
import {Events, MessageBus} from 'protocol';
import {interval} from 'rxjs';
import {FrameManager} from './frame_manager';
import {ThemeService} from './theme-service';
import {MatTooltip} from '@angular/material/tooltip';
import {MatTooltip, MatTooltipModule} from '@angular/material/tooltip';
import {DevToolsTabsComponent} from './devtools-tabs/devtools-tabs.component';
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import {Frame} from './application-environment';
const DETECT_ANGULAR_ATTEMPTS = 10;
enum AngularStatus {
/**
* This page may have Angular but we don't know yet. We're still trying to detect it.
*/
UNKNOWN,
/**
* We've given up on trying to detect Angular. We tried ${DETECT_ANGULAR_ATTEMPTS} times and
* failed.
*/
DOES_NOT_EXIST,
/**
* Angular was detected somewhere on the page.
*/
EXISTS,
}
@Component({
selector: 'ng-devtools',
@@ -28,10 +51,11 @@ import {DevToolsTabsComponent} from './devtools-tabs/devtools-tabs.component';
]),
],
standalone: true,
imports: [DevToolsTabsComponent, MatTooltip],
imports: [DevToolsTabsComponent, MatTooltip, MatProgressSpinnerModule, MatTooltipModule],
})
export class DevToolsComponent implements OnInit, OnDestroy {
angularExists: boolean | null = null;
AngularStatus = AngularStatus;
angularStatus: AngularStatus = AngularStatus.UNKNOWN;
angularVersion: string | boolean | undefined = undefined;
angularIsInDevMode = true;
hydration: boolean = false;
@@ -39,26 +63,28 @@ export class DevToolsComponent implements OnInit, OnDestroy {
private readonly _firefoxStyleName = 'firefox_styles.css';
private readonly _chromeStyleName = 'chrome_styles.css';
constructor(
private _messageBus: MessageBus<Events>,
private _themeService: ThemeService,
private _platform: Platform,
@Inject(DOCUMENT) private _document: Document,
) {}
private readonly _messageBus = inject<MessageBus<Events>>(MessageBus);
private readonly _themeService = inject(ThemeService);
private readonly _platform = inject(Platform);
private readonly _document = inject(DOCUMENT);
private readonly _frameManager = inject(FrameManager);
private _interval$ = interval(500).subscribe((attempt) => {
if (attempt === 10) {
this.angularExists = false;
if (attempt === DETECT_ANGULAR_ATTEMPTS) {
this.angularStatus = AngularStatus.DOES_NOT_EXIST;
}
this._messageBus.emit('queryNgAvailability');
});
inspectFrame(frame: Frame) {
this._frameManager.inspectFrame(frame);
}
ngOnInit(): void {
this._themeService.initializeThemeWatcher();
this._messageBus.once('ngAvailability', ({version, devMode, ivy, hydration}) => {
this.angularExists = !!version;
this.angularStatus = version ? AngularStatus.EXISTS : AngularStatus.DOES_NOT_EXIST;
this.angularVersion = version;
this.angularIsInDevMode = devMode;
this.ivy = ivy;