Reduced tree padding (left) slightly to make larger trees easier to inspect
Brian Vaughn committed
Feb 14, 2019 at 15:13 UTC
47a5fd59cbcdbd5c390491cefe3b9fbb32bf9c44
5 files changed
+10
-16
src/devtools/views/Element.js
+1
-1
@@ -53,7 +53,7 @@ export default function ElementView({ index, style }: Props) {
53
onDoubleClick={handleDoubleClick}
54
style={{
55
...style, // "style" comes from react-window
56
- paddingLeft: `${depth - baseDepth}.25rem`,
56
+ paddingLeft: `${(depth - baseDepth) * 0.75 + 0.25}rem`,
57
}}
58
>
59
<span className={styles.Component}>
src/devtools/views/HooksTree.css
+1
-1
@@ -4,7 +4,7 @@
4
}
5
6
.HooksNode {
7
- padding-left: 1rem;
7
+ padding-left: 0.75rem;
8
}
9
10
.NameValueRow {
src/devtools/views/InspectedElementTree.css
+1
-1
@@ -25,5 +25,5 @@
25
.Empty {
26
color: var(--color-dimmer);
27
font-style: italic;
28
- padding-left: 1rem;
28
+ padding-left: 0.75rem;
29
}
src/devtools/views/InspectedElementTree.js
+6
-12
@@ -55,6 +55,8 @@ function KeyValue({ depth, name, value }: KeyValueProps) {
55
dataType === 'boolean' ||
56
value == null;
57
58
+ const paddingLeft = `${depth * 0.75}rem`;
59
+
60
let children = null;
61
if (isSimpleType) {
62
let displayValue = value;
@@ -65,22 +67,14 @@ function KeyValue({ depth, name, value }: KeyValueProps) {
67
}
68
69
children = (
68
- <div
69
- key="root"
70
- className={styles.Item}
71
- style={{ paddingLeft: `${depth}rem` }}
72
- >
70
+ <div key="root" className={styles.Item} style={{ paddingLeft }}>
71
<span className={styles.Name}>{name}</span>:{' '}
72
<span className={styles.Value}>{displayValue}</span>
73
</div>
74
);
75
} else if (value.hasOwnProperty(meta.type)) {
76
children = (
79
- <div
80
- key="root"
81
- className={styles.Item}
82
- style={{ paddingLeft: `${depth}rem` }}
83
- >
77
+ <div key="root" className={styles.Item} style={{ paddingLeft }}>
78
<span className={styles.Name}>{name}</span>:{' '}
79
<span className={styles.Value}>{getMetaValueLabel(value)}</span>
80
</div>
@@ -99,7 +93,7 @@ function KeyValue({ depth, name, value }: KeyValueProps) {
93
<div
94
key={`${depth}-root`}
95
className={styles.Item}
102
- style={{ paddingLeft: `${depth}rem` }}
96
+ style={{ paddingLeft }}
97
>
98
<span className={styles.Name}>{name}</span>: <span>Array</span>
99
</div>
@@ -112,7 +106,7 @@ function KeyValue({ depth, name, value }: KeyValueProps) {
106
<div
107
key={`${depth}-root`}
108
className={styles.Item}
115
- style={{ paddingLeft: `${depth}rem` }}
109
+ style={{ paddingLeft }}
110
>
111
<span className={styles.Name}>{name}</span>: <span>Object</span>
112
</div>
src/devtools/views/SelectedElement.css
+1
-1
@@ -58,7 +58,7 @@
58
}
59
60
.Owner {
61
- padding-left: 1rem;
61
+ padding-left: 0.75rem;
62
cursor: pointer;
63
}
64