From 847f9679b8e5314f2892bbb7e182d7fe1bc4c152 Mon Sep 17 00:00:00 2001
From: kkragoth <kkragoth@gmail.com>
Date: Mon, 26 Jul 2021 16:24:14 +0200
Subject: [PATCH 1/2] Devtools: Display as link if value is in specified
 protocols

---
 .../src/devtools/views/Components/KeyValue.js       | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

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..b0476bd3f70f4 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js
@@ -243,6 +243,13 @@ export default function KeyValue({
       displayValue = 'undefined';
     }
 
+    let shouldDisplayAsLink = false;
+    let protocolsAllowedAsLinks = ['file:///', 'http://', 'https://', 'vscode://'];
+
+    if (dataType === 'string' && protocolsAllowedAsLinks.some((protocolPrefix) => value.startsWith(protocolPrefix))) {
+      shouldDisplayAsLink = true;
+    }
+
     children = (
       <div
         key="root"
@@ -260,7 +267,11 @@ export default function KeyValue({
             value={value}
           />
         ) : (
-          <span className={styles.Value}>{displayValue}</span>
+          (shouldDisplayAsLink) ? (
+            <a href={value} target="_blank">{displayValue}</a>
+          ) : (
+            <span className={styles.Value}>{displayValue}</span>
+          )
         )}
       </div>
     );

From 6ccffe450f05574394cab2ba1a76be3c42ba18e5 Mon Sep 17 00:00:00 2001
From: kkragoth <kkragoth@gmail.com>
Date: Wed, 28 Jul 2021 15:20:08 +0200
Subject: [PATCH 2/2] PR fixes - replace-fork - styling of Link; add rel
 noopener - move protocols array out of render function

---
 .../devtools/views/Components/KeyValue.css    |  8 ++++++
 .../src/devtools/views/Components/KeyValue.js | 28 ++++++++++++-------
 .../devtools/views/Components/constants.js    |  6 ++++
 3 files changed, 32 insertions(+), 10 deletions(-)
 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 b0476bd3f70f4..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,11 +244,14 @@ export default function KeyValue({
       displayValue = 'undefined';
     }
 
-    let shouldDisplayAsLink = false;
-    let protocolsAllowedAsLinks = ['file:///', 'http://', 'https://', 'vscode://'];
-
-    if (dataType === 'string' && protocolsAllowedAsLinks.some((protocolPrefix) => value.startsWith(protocolPrefix))) {
-      shouldDisplayAsLink = true;
+    let shouldDisplayValueAsLink = false;
+    if (
+      dataType === 'string' &&
+      PROTOCOLS_SUPPORTED_AS_LINKS_IN_KEY_VALUE.some(protocolPrefix =>
+        value.startsWith(protocolPrefix),
+      )
+    ) {
+      shouldDisplayValueAsLink = true;
     }
 
     children = (
@@ -266,12 +270,16 @@ export default function KeyValue({
             path={path}
             value={value}
           />
+        ) : shouldDisplayValueAsLink ? (
+          <a
+            className={styles.Link}
+            href={value}
+            target="_blank"
+            rel="noopener noreferrer">
+            {displayValue}
+          </a>
         ) : (
-          (shouldDisplayAsLink) ? (
-            <a href={value} target="_blank">{displayValue}</a>
-          ) : (
-            <span className={styles.Value}>{displayValue}</span>
-          )
+          <span className={styles.Value}>{displayValue}</span>
         )}
       </div>
     );
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://',
+];