PR fixes

- replace-fork
- styling of Link; add rel noopener
- move protocols array out of render function

Author: kkragoth

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;
@@ -53,4 +61,4 @@
 
 .HookName {
   color: var(--color-component-name);
-}
+}

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

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://',
+];