Content-Length: 383446 | pFad | http://github.com/angular/angular/pull/60744/files

7F refactor(devtools): create highlight overlay on node selection by hawkgs · Pull Request #60744 · angular/angular · GitHub
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(devtools): create highlight overlay on node selection #60744

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

refactor(devtools): create highlight overlay on node selection #60744

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 12 additions & 4 deletions devtools/projects/ng-devtools-backend/src/lib/client-event-subscribers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,12 +57,16 @@ import {serializeDirectiveState} from './state-serializer/state-serializer';
import {runOutsideAngular, unwrapSignal} from './utils';
import {DirectiveForestHooks} from './hooks/hooks';

type InspectorRef = {ref: ComponentInspector | null};
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Any specfic reason for introducing this type instead of using ComponentInspector | null directly ?

Copy link
Member Author

@hawkgs hawkgs Apr 4, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Mainly for emphasizing and making it clear what's the role of this object. I added the type after the fact.

Edit: Also, the type is used in 2 places so it prevents minor repetition.


export const subscribeToClientEvents = (
messageBus: MessageBus<Events>,
depsForTestOnly?: {
directiveForestHooks?: typeof DirectiveForestHooks;
},
): void => {
const inspector: InspectorRef = {ref: null};

messageBus.on('shutdown', shutdownCallback(messageBus));

messageBus.on(
Expand All @@ -75,7 +79,7 @@ export const subscribeToClientEvents = (
messageBus.on('startProfiling', startProfilingCallback(messageBus));
messageBus.on('stopProfiling', stopProfilingCallback(messageBus));

messageBus.on('setSelectedComponent', selectedComponentCallback);
messageBus.on('setSelectedComponent', selectedComponentCallback(inspector));

messageBus.on('getNestedProperties', getNestedPropertiesCallback(messageBus));
messageBus.on('getRoutes', getRoutesCallback(messageBus));
Expand All @@ -94,7 +98,8 @@ export const subscribeToClientEvents = (
});

if (appIsAngularInDevMode() && appIsSupportedAngularVersion() && appIsAngularIvy()) {
setupInspector(messageBus);
inspector.ref = setupInspector(messageBus);

// Often websites have `scroll` event listener which triggers
// Angular's change detection. We don't want to constantly send
// update requests, instead we want to request an update at most
Expand Down Expand Up @@ -175,12 +180,13 @@ const stopProfilingCallback = (messageBus: MessageBus<Events>) => () => {
messageBus.emit('profilerResults', [stopProfiling()]);
};

const selectedComponentCallback = (position: ElementPosition) => {
const selectedComponentCallback = (inspector: InspectorRef) => (position: ElementPosition) => {
const node = queryDirectiveForest(
position,
initializeOrGetDirectiveForestHooks().getIndexedDirectiveForest(),
);
setConsoleReference({node, position});
inspector.ref?.highlightByPosition(position);
};

const getNestedPropertiesCallback =
Expand Down Expand Up @@ -335,7 +341,7 @@ const checkForAngular = (messageBus: MessageBus<Events>): void => {
]);
};

const setupInspector = (messageBus: MessageBus<Events>) => {
const setupInspector = (messageBus: MessageBus<Events>): ComponentInspector => {
const inspector = new ComponentInspector({
onComponentEnter: (id: number) => {
messageBus.emit('highlightComponent', [id]);
Expand All @@ -358,6 +364,8 @@ const setupInspector = (messageBus: MessageBus<Events>) => {

messageBus.on('createHydrationOverlay', inspector.highlightHydrationNodes);
messageBus.on('removeHydrationOverlay', inspector.removeHydrationHighlights);

return inspector;
};

export interface SerializableDirectiveInstanceType extends DirectiveType {
Expand Down
5 changes: 5 additions & 0 deletions devtools/projects/ng-devtools-backend/src/lib/highlighter.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {ngDebugClient} from './ng-debug-api/ng-debug-api';

let hydrationOverlayItems: HTMLElement[] = [];
let selectedElementOverlay: HTMLElement | null = null;
let selectedElement: Node | null = null;

const DEV_TOOLS_HIGHLIGHT_NODE_ID = '____ngDevToolsHighlight';

Expand Down Expand Up @@ -83,8 +84,12 @@ export function getDirectiveName(dir: Type<unknown> | undefined | null): string
}

export function highlightSelectedElement(el: Node): void {
if (el === selectedElement) {
return;
}
unHighlight();
selectedElementOverlay = addHighlightForElement(el);
selectedElement = el;
}

export function highlightHydrationElement(el: Node, status: HydrationStatus) {
Expand Down








ApplySandwichStrip

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier!      Saves Data!


--- a PPN by Garber Painting Akron. With Image Size Reduction included!

Fetched URL: http://github.com/angular/angular/pull/60744/files

Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy