OSSForks/react
1
0
Fork 0
mirror of https://github.com/zebrajr/react.git synced 2025-12-06 00:20:04 +01:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

[DevTools] Style clickable Owner components with angle brackets and bold (#34096)

Browse Source 
We have two type of links that appear next to each other now. One type
of link jumps to a Component instance in the DevTools. The other opens a
source location - e.g. in your editor.

This clarifies that something will jump to the Component instance by
marking it as bold and using angle brackets around the name.

This can be seen in the "rendered by" list of owner as well as in the
async stack traces when the stack was in a different owner than the one
currently selected.

<img width="516" height="387" alt="Screenshot 2025-08-03 at 11 27 38 PM"
src="https://github.com/user-attachments/assets/5da50262-1e74-4e46-a6f8-96b4c1e4db31"
/>

The idea is to connect this styling to the owner stacks using
`createTask` where this same pattern occurs (albeit the task name is not
clickable):

<img width="454" height="188" alt="Screenshot 2025-08-03 at 11 23 45 PM"
src="https://github.com/user-attachments/assets/81a55c8f-963a-4fda-846a-97f49ef0c469"
/>

In fact, I was going to add the stack traces to the "rendered by" list
to give the ability to jump to the JSX location in the owner stack so
that it becomes this same view.
This commit is contained in:
Sebastian Markbåge 2025-08-04 09:28:31 -04:00 committed by GitHub
parent 8e3db095aa
commit d3f800d47a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 6 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/react-devtools-inline/__tests__/__e2e__/components.test.js
View File

@ -52,7 +52,7 @@ test.describe('Components', () => {
test('Should allow elements to be inspected', async () => {
// Select the first list item in DevTools.
await devToolsUtils.selectElement(page, 'ListItem', 'List\nApp');
await devToolsUtils.selectElement(page, 'ListItem', '<List>\n<App>');
// Prop names/values may not be editable based on the React version.
// If they're not editable, make sure they degrade gracefully
@ -119,7 +119,7 @@ test.describe('Components', () => {
runOnlyForReactRange('>=16.8');
// Select the first list item in DevTools.
await devToolsUtils.selectElement(page, 'ListItem', 'List\nApp', true);
await devToolsUtils.selectElement(page, 'ListItem', '<List>\n<App>', true);
// Then read the inspected values.
const sourceText = await page.evaluate(() => {
@ -142,7 +142,7 @@ test.describe('Components', () => {
runOnlyForReactRange('>=16.8');
// Select the first list item in DevTools.
await devToolsUtils.selectElement(page, 'ListItem', 'List\nApp');
await devToolsUtils.selectElement(page, 'ListItem', '<List>\n<App>');
// Then edit the label prop.
await page.evaluate(() => {
@ -177,7 +177,7 @@ test.describe('Components', () => {
runOnlyForReactRange('>=16.8');
// Select the List component DevTools.
await devToolsUtils.selectElement(page, 'List', 'App');
await devToolsUtils.selectElement(page, 'List', '<App>');
// Then click to load and parse hook names.
await devToolsUtils.clickButton(page, 'LoadHookNamesButton');

1
packages/react-devtools-shared/src/devtools/views/Components/OwnerView.css
View File

@ -2,6 +2,7 @@
color: var(--color-component-name);
font-family: var(--font-family-monospace);
font-size: var(--font-size-monospace-normal);
font-weight: bold;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

2
packages/react-devtools-shared/src/devtools/views/Components/OwnerView.js vendored
View File

@ -59,7 +59,7 @@ export default function OwnerView({
<span
className={`${styles.Owner} ${isInStore ? '' : styles.NotInStore}`}
title={displayName}>
{displayName}
{'<' + displayName + '>'}
</span>
<ElementBadges