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

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.

Author: sebmarkbage

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

@@ -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');

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

@@ -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;

packages/react-devtools-shared/src/devtools/views/Components/OwnerView.js

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