From 9f88b5355ba21e06e0a3c4442c5199de354ed1cf Mon Sep 17 00:00:00 2001
From: Piotr Szulc <ps347277@students.mimuw.edu.pl>
Date: Wed, 28 Jul 2021 15:29:13 +0200
Subject: [PATCH] Devtools: Display as link if value is in specified protocols
 (#21964)

---
 .../devtools/views/Components/KeyValue.css    |  8 ++++++++
 .../src/devtools/views/Components/KeyValue.js | 19 +++++++++++++++++++
 .../devtools/views/Components/constants.js    |  6 ++++++
 3 files changed, 33 insertions(+)
 create mode 100644 packages/react-devtools-shared/src/devtools/views/Components/constants.js

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.css b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.css
index bca22c8786c6f..0f6bee239d3d8 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.css
+++ b/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;
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js
index 39ba220efbc1f..be45bab429dda 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js
+++ b/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>
         )}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/constants.js b/packages/react-devtools-shared/src/devtools/views/Components/constants.js
new file mode 100644
index 0000000000000..f1fa5e9dd5bbb
--- /dev/null
+++ b/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://',
+];