Batched tweaks and bug fixes:
1. Bugfix: Hide tree grouping/background coloring when inside of collapsed subtree. 2. Bugfix: Don't measure and udpate indentation when Components tab is hidden. 3. Tweak: Lower background color for selected subtree in light theme to increase contrast for text. 4. Tweak: Remove FB-specific displayName check/hack since we will address that by modifying the internal require JS transform.
Brian Vaughn committed
Jun 3, 2019 at 12:47 UTC
ef139a181176d533291d90d2a48d959c1af3597d
4 files changed
+10
-19
src/devtools/views/Components/SelectedTreeHighlight.js
+4
-1
@@ -24,7 +24,10 @@ export default function SelectedTreeHighlight(_: {||}) {
24
const subscription = useMemo(
25
() => ({
26
getCurrentValue: () => {
27
- if (selectedElementID === null) {
27
+ if (
28
+ selectedElementID === null ||
29
+ store.isInsideCollapsedSubTree(selectedElementID)
30
+ ) {
31
return null;
32
}
33
src/devtools/views/Components/Tree.js
+5
@@ -380,6 +380,11 @@ function updateIndentationSizeVar(
380
const list = ((innerDiv.parentElement: any): HTMLDivElement);
381
const listWidth = list.clientWidth;
382
383
+ // Skip measurements when the Components panel is hidden.
384
+ if (listWidth === 0) {
385
+ return;
386
+ }
387
+
388
// Reset the max indentation size if the width of the tree has increased.
389
if (listWidth > prevListWidthRef.current) {
390
indentationSizeRef.current = DEFAULT_INDENTATION_SIZE;
src/devtools/views/root.css
+1
-1
@@ -38,7 +38,7 @@
38
--light-color-commit-gradient-text: #000000;
39
--light-color-component-name: #6a51b2;
40
--light-color-component-name-inverted: #ffffff;
41
- --light-color-component-badge-background: rgba(0, 0, 0, 0.15);
41
+ --light-color-component-badge-background: rgba(0, 0, 0, 0.1);
42
--light-color-component-badge-background-inverted: rgba(255, 255, 255, 0.25);
43
--light-color-component-badge-count: #777d88;
44
--light-color-component-badge-count-inverted: rgba(255, 255, 255, 0.7);
src/utils.js
-17
@@ -12,7 +12,6 @@ import {
12
13
import type { ComponentFilter, ElementType } from './types';
14
15
-const FB_MODULE_RE = /^(.*) \[from (.*)\]$/;
15
const cachedDisplayNames: WeakMap<Function, string> = new WeakMap();
16
17
// On large trees, encoding takes significant time.
@@ -41,22 +40,6 @@ export function getDisplayName(
40
displayName = type.name || fallbackName;
41
}
42
44
- // Facebook-specific hack to turn "Image [from Image.react]" into just "Image".
45
- // We need displayName with module name for error reports but it clutters the DevTools.
46
- const match = displayName.match(FB_MODULE_RE);
47
- if (match) {
48
- const componentName = match[1];
49
- const moduleName = match[2];
50
- if (componentName && moduleName) {
51
- if (
52
- moduleName === componentName ||
53
- moduleName.startsWith(componentName + '.')
54
- ) {
55
- displayName = componentName;
56
- }
57
- }
58
- }
59
-
43
cachedDisplayNames.set(type, displayName);
44
return displayName;
45
}