Element keys are selectable text
Changed truncation to be CSS-driven, and enabled double-click selection of text, so that long keys could be copied from within the tree.
Brian Vaughn committed
Jul 31, 2019 at 14:48 UTC
aed31fdf12b01eb508b347fff8e3c237a0c91a3f
2 files changed
+45
-41
src/devtools/views/Components/Element.css
+6
-2
@@ -43,12 +43,16 @@
43
--color-expand-collapse-toggle: var(--color-component-name-inverted);
44
}
45
46
-.AttributeName {
46
+.KeyName {
47
color: var(--color-attribute-name);
48
}
49
50
-.AttributeValue {
50
+.KeyValue {
51
color: var(--color-attribute-value);
52
+ user-select: text;
53
+ max-width: 100px;
54
+ overflow-x: hidden;
55
+ text-overflow: ellipsis;
56
}
57
58
.Highlight {
src/devtools/views/Components/Element.js
+39
-39
@@ -1,16 +1,10 @@
1
// @flow
2
3
-import React, {
4
- Fragment,
5
- useCallback,
6
- useContext,
7
- useMemo,
8
- useState,
9
-} from 'react';
3
+import React, { Fragment, useContext, useMemo, useState } from 'react';
4
import Store from 'src/devtools/store';
5
import Badge from './Badge';
6
import ButtonIcon from '../ButtonIcon';
13
-import { createRegExp, truncateText } from '../utils';
7
+import { createRegExp } from '../utils';
8
import { TreeDispatcherContext, TreeStateContext } from './TreeContext';
9
import { StoreContext } from '../context';
10
@@ -43,34 +37,38 @@ export default function ElementView({ data, index, style }: Props) {
37
const id = element === null ? null : element.id;
38
const isSelected = selectedElementID === id;
39
46
- const handleDoubleClick = useCallback(() => {
40
+ const handleDoubleClick = () => {
41
if (id !== null) {
42
dispatch({ type: 'SELECT_OWNER', payload: id });
43
}
50
- }, [dispatch, id]);
51
-
52
- const handleMouseDown = useCallback(
53
- ({ metaKey }) => {
54
- if (id !== null) {
55
- dispatch({
56
- type: 'SELECT_ELEMENT_BY_ID',
57
- payload: metaKey ? null : id,
58
- });
59
- }
60
- },
61
- [dispatch, id]
62
- );
44
+ };
45
+
46
+ const handleMouseDown = ({ metaKey }) => {
47
+ if (id !== null) {
48
+ dispatch({
49
+ type: 'SELECT_ELEMENT_BY_ID',
50
+ payload: metaKey ? null : id,
51
+ });
52
+ }
53
+ };
54
64
- const handleMouseEnter = useCallback(() => {
55
+ const handleMouseEnter = () => {
56
setIsHovered(true);
57
if (id !== null) {
58
onElementMouseEnter(id);
59
}
69
- }, [id, onElementMouseEnter]);
60
+ };
61
71
- const handleMouseLeave = useCallback(() => {
62
+ const handleMouseLeave = () => {
63
setIsHovered(false);
73
- }, []);
64
+ };
65
+
66
+ const handleKeyDoubleClick = event => {
67
+ // Double clicks on key value are used for text selection (if the text has been truncated).
68
+ // They should not enter the owners tree view.
69
+ event.stopPropagation();
70
+ event.preventDefault();
71
+ };
72
73
// Handle elements that are removed from the tree while an async render is in progress.
74
if (element == null) {
@@ -122,10 +120,15 @@ export default function ElementView({ data, index, style }: Props) {
120
<DisplayName displayName={displayName} id={((id: any): number)} />
121
{key && (
122
<Fragment>
125
- <span className={styles.AttributeName}>key</span>=
126
- <span className={styles.AttributeValue} title={key}>
127
- "{truncateText(`${key}`, 10)}"
123
+ <span className={styles.KeyName}>key</span>="
124
+ <span
125
+ className={styles.KeyValue}
126
+ title={key}
127
+ onDoubleClick={handleKeyDoubleClick}
128
+ >
129
+ {key}
130
</span>
131
+ "
132
</Fragment>
133
)}
134
<Badge
@@ -152,20 +155,17 @@ type ExpandCollapseToggleProps = {|
155
function ExpandCollapseToggle({ element, store }: ExpandCollapseToggleProps) {
156
const { children, id, isCollapsed } = element;
157
155
- const toggleCollapsed = useCallback(
156
- event => {
157
- event.preventDefault();
158
- event.stopPropagation();
158
+ const toggleCollapsed = event => {
159
+ event.preventDefault();
160
+ event.stopPropagation();
161
160
- store.toggleIsCollapsed(id, !isCollapsed);
161
- },
162
- [id, isCollapsed, store]
163
- );
162
+ store.toggleIsCollapsed(id, !isCollapsed);
163
+ };
164
165
- const stopPropagation = useCallback(event => {
165
+ const stopPropagation = event => {
166
// Prevent the row from selecting
167
event.stopPropagation();
168
- }, []);
168
+ };
169
170
if (children.length === 0) {
171
return <div className={styles.ExpandCollapseToggle} />;