Chrome extension: reveal the selected component in Elements and open its source file #164

Problem

The extension links Elements to Components in one direction only (extension/panel-bridge.js:123-126). Selecting a node in Elements selects its component. You cannot go from a component to its host element in Elements, or to its class in Sources. The panel's highlight-in-page (packages/ng-devtools/src/overlay.ts:384) only draws a box on the page.

In dev mode Angular stores debugInfo on each component def, with className and optional filePath and lineNumber (https://github.com/angular/angular/blob/main/packages/core/src/render3/interfaces/definition.ts, https://github.com/angular/angular/blob/main/packages/core/src/render3/debug/set_debug_info.ts). Today only className is read (packages/ng-devtools/src/router.ts:313). Chrome supports inspect(el) through chrome.devtools.inspectedWindow.eval and chrome.devtools.panels.openResource(url, lineNumber) (https://developer.chrome.com/docs/extensions/reference/api/devtools/panels#method-openResource).

Proposed scope

• Add a page helper, next to __ngDevtoolsComponentOf, that returns the host element for a component id. The bridge can then call inspect() on it.
• Send filePath and lineNumber with each component when debugInfo has them.
• In the extension, add "Reveal in Elements" and "Open source" actions. The panel posts them to the bridge.
• filePath is relative to the project and lineNumber is 0-based. Resolve the path to a source URL the Sources panel knows from source maps before calling openResource. If it does not resolve, show the path and line instead.
• Hide the actions outside the extension, and hide "Open source" when there is no debugInfo.