Devtools: Display as link if value is in specified protocols (#21964)

Author: Piotr Szulc

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

@@ -32,6 +32,14 @@
   flex: 1;
 }
 
+.Link {
+  color: var(--color-link);
+  white-space: pre;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+}
+
 .None {
   color: var(--color-dimmer);
   font-style: italic;

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

@@ -24,6 +24,7 @@ import styles from './KeyValue.css';
 import Button from 'react-devtools-shared/src/devtools/views/Button';
 import ButtonIcon from 'react-devtools-shared/src/devtools/views/ButtonIcon';
 import {InspectedElementContext} from './InspectedElementContext';
+import {PROTOCOLS_SUPPORTED_AS_LINKS_IN_KEY_VALUE} from './constants';
 
 import type {InspectedElement} from './types';
 import type {Element} from 'react-devtools-shared/src/devtools/views/Components/types';
@@ -243,6 +244,16 @@ export default function KeyValue({
       displayValue = 'undefined';
     }
 
+    let shouldDisplayValueAsLink = false;
+    if (
+      dataType === 'string' &&
+      PROTOCOLS_SUPPORTED_AS_LINKS_IN_KEY_VALUE.some(protocolPrefix =>
+        value.startsWith(protocolPrefix),
+      )
+    ) {
+      shouldDisplayValueAsLink = true;
+    }
+
     children = (
       <div
         key="root"
@@ -259,6 +270,14 @@ export default function KeyValue({
             path={path}
             value={value}
           />
+        ) : shouldDisplayValueAsLink ? (
+          <a
+            className={styles.Link}
+            href={value}
+            target="_blank"
+            rel="noopener noreferrer">
+            {displayValue}
+          </a>
         ) : (
           <span className={styles.Value}>{displayValue}</span>
         )}

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

@@ -0,0 +1,6 @@
+export const PROTOCOLS_SUPPORTED_AS_LINKS_IN_KEY_VALUE = [
+  'file:///',
+  'http://',
+  'https://',
+  'vscode://',
+];