Devtools: Display as link if value is in specified protocols (#21964)
Piotr Szulc committed
Jul 28, 2021 at 15:29 UTC
9f88b5355ba21e06e0a3c4442c5199de354ed1cf
3 files changed
+33
packages/react-devtools-shared/src/devtools/views/Components/KeyValue.css
+8
@@ -32,6 +32,14 @@
32
flex: 1;
33
}
34
35
+.Link {
36
+ color: var(--color-link);
37
+ white-space: pre;
38
+ overflow: hidden;
39
+ text-overflow: ellipsis;
40
+ flex: 1;
41
+}
42
+
43
.None {
44
color: var(--color-dimmer);
45
font-style: italic;
packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js
+19
@@ -24,6 +24,7 @@ import styles from './KeyValue.css';
24
import Button from 'react-devtools-shared/src/devtools/views/Button';
25
import ButtonIcon from 'react-devtools-shared/src/devtools/views/ButtonIcon';
26
import {InspectedElementContext} from './InspectedElementContext';
27
+import {PROTOCOLS_SUPPORTED_AS_LINKS_IN_KEY_VALUE} from './constants';
28
29
import type {InspectedElement} from './types';
30
import type {Element} from 'react-devtools-shared/src/devtools/views/Components/types';
@@ -243,6 +244,16 @@ export default function KeyValue({
244
displayValue = 'undefined';
245
}
246
247
+ let shouldDisplayValueAsLink = false;
248
+ if (
249
+ dataType === 'string' &&
250
+ PROTOCOLS_SUPPORTED_AS_LINKS_IN_KEY_VALUE.some(protocolPrefix =>
251
+ value.startsWith(protocolPrefix),
252
+ )
253
+ ) {
254
+ shouldDisplayValueAsLink = true;
255
+ }
256
+
257
children = (
258
<div
259
key="root"
@@ -259,6 +270,14 @@ export default function KeyValue({
270
path={path}
271
value={value}
272
/>
273
+ ) : shouldDisplayValueAsLink ? (
274
+ <a
275
+ className={styles.Link}
276
+ href={value}
277
+ target="_blank"
278
+ rel="noopener noreferrer">
279
+ {displayValue}
280
+ </a>
281
) : (
282
<span className={styles.Value}>{displayValue}</span>
283
)}
packages/react-devtools-shared/src/devtools/views/Components/constants.js
new
+6
@@ -0,0 +1,6 @@
1
+export const PROTOCOLS_SUPPORTED_AS_LINKS_IN_KEY_VALUE = [
2
+ 'file:///',
3
+ 'http://',
4
+ 'https://',
5
+ 'vscode://',
6
+];