Fixed a couple of edge case styling and layout issues I noticed while testing the inline target
Brian Vaughn committed
Aug 12, 2019 at 08:26 UTC
b5195a5f16fb900c924401066ee453e6ef53baea
8 files changed
+61
-51
package.json
+1
@@ -139,6 +139,7 @@
139
"opener": "^1.5.1",
140
"prettier": "^1.16.4",
141
"prop-types": "^15.6.2",
142
+ "raw-loader": "^3.1.0",
143
"react": "^0.0.0-424099da6",
144
"react-15": "npm:react@^15",
145
"react-color": "^2.11.7",
src/constants.js
+18
@@ -1,8 +1,26 @@
1
// @flow
2
3
+// $FlowFixMe Cannot resolve module
4
+import rawStyleString from '!!raw-loader!src/devtools/views/root.css'; // eslint-disable-line import/no-webpack-loader-syntax
5
+
6
// Flip this flag to true to enable verbose console debug logging.
7
export const __DEBUG__ = false;
8
9
+const extractVar = varName => {
10
+ const regExp = new RegExp(`${varName}: ([0-9]+)`);
11
+ const match = rawStyleString.match(regExp);
12
+ return parseInt(match[1], 10);
13
+};
14
+
15
+// TRICKY
16
+// Extracting during build time avoids a temporarily invalid state for the inline target.
17
+// Sometimes the inline target is rendered before root styles are applied,
18
+// which would result in e.g. NaN itemSize being passed to react-window list.
19
+export const COMFORTABLE_LINE_HEIGHT = extractVar(
20
+ 'comfortable-line-height-data'
21
+);
22
+export const COMPACT_LINE_HEIGHT = extractVar('compact-line-height-data');
23
+
24
export const TREE_OPERATION_ADD = 1;
25
export const TREE_OPERATION_REMOVE = 2;
26
export const TREE_OPERATION_REORDER_CHILDREN = 3;
src/devtools/views/Components/SearchInput.css
+4
-2
@@ -1,11 +1,12 @@
1
.SearchInput {
2
- flex: 1;
2
+ flex: 1 1;
3
display: flex;
4
align-items: center;
5
}
6
7
.Input {
8
- flex: 1;
8
+ flex: 1 1 100px;
9
+ width: 100px;
10
font-size: var(--font-size-sans-large);
11
outline: none;
12
border: none;
@@ -24,6 +25,7 @@
25
.IndexLabel {
26
color: var(--color-dim);
27
font-size: var(--font-size-sans-normal);
28
+ white-space: pre;
29
}
30
31
.LeftVRule,
src/devtools/views/Components/Tree.js
+4
@@ -104,6 +104,10 @@ export default function Tree(props: Props) {
104
return;
105
}
106
107
+ // TODO We should ignore arrow keys if the focus is outside of DevTools.
108
+ // Otherwise the inline (embedded) DevTools might change selection unexpectedly,
109
+ // e.g. when a text input or a select has focus.
110
+
111
let element;
112
switch (event.key) {
113
case 'ArrowDown':
src/devtools/views/Profiler/ProfilerContext.js
+2
-2
@@ -33,8 +33,8 @@ export type Context = {|
33
isProcessingData: boolean,
34
isProfiling: boolean,
35
profilingData: ProfilingDataFrontend | null,
36
- startProfiling(value: boolean): void,
37
- stopProfiling(value: boolean): void,
36
+ startProfiling(): void,
37
+ stopProfiling(): void,
38
supportsProfiling: boolean,
39
40
// Which root should profiling data be shown for?
src/devtools/views/Profiler/ReloadAndProfileButton.js
+9
-4
@@ -6,6 +6,7 @@ import ButtonIcon from '../ButtonIcon';
6
import { BridgeContext, StoreContext } from '../context';
7
import { useSubscription } from '../hooks';
8
import Store from 'src/devtools/store';
9
+import { ProfilerContext } from './ProfilerContext';
10
11
type SubscriptionData = {|
12
recordChangeDescriptions: boolean,
@@ -16,6 +17,8 @@ export default function ReloadAndProfileButton() {
17
const bridge = useContext(BridgeContext);
18
const store = useContext(StoreContext);
19
20
+ const { startProfiling } = useContext(ProfilerContext);
21
+
22
const subscription = useMemo(
23
() => ({
24
getCurrentValue: () => ({
@@ -38,10 +41,12 @@ export default function ReloadAndProfileButton() {
41
supportsReloadAndProfile,
42
} = useSubscription<SubscriptionData, Store>(subscription);
43
41
- const reloadAndProfile = useCallback(
42
- () => bridge.send('reloadAndProfile', recordChangeDescriptions),
43
- [bridge, recordChangeDescriptions]
44
- );
44
+ const reloadAndProfile = useCallback(() => {
45
+ bridge.send('reloadAndProfile', recordChangeDescriptions);
46
+
47
+ // In case the DevTools UI itself doesn't reload along with the app, also start profiling.
48
+ startProfiling();
49
+ }, [bridge, recordChangeDescriptions, startProfiling]);
50
51
if (!supportsReloadAndProfile) {
52
return null;
src/devtools/views/Settings/SettingsContext.js
+7
-43
@@ -6,9 +6,12 @@ import React, {
6
useEffect,
7
useLayoutEffect,
8
useMemo,
9
- useState,
9
} from 'react';
11
-import { LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY } from 'src/constants';
10
+import {
11
+ COMFORTABLE_LINE_HEIGHT,
12
+ COMPACT_LINE_HEIGHT,
13
+ LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY,
14
+} from 'src/constants';
15
import { useLocalStorage } from '../hooks';
16
import { BridgeContext } from '../context';
17
@@ -37,11 +40,6 @@ SettingsContext.displayName = 'SettingsContext';
40
41
type DocumentElements = Array<HTMLElement>;
42
40
-type CurrentLineHeights = {|
41
- comfortableLineHeight: number,
42
- compactLineHeight: number,
43
-|};
44
-
43
type Props = {|
44
browserTheme: BrowserTheme,
45
children: React$Node,
@@ -89,25 +87,6 @@ function SettingsContextController({
87
return array;
88
}, [componentsPortalContainer, profilerPortalContainer]);
89
92
- const [
93
- currentLineHeights,
94
- setCurrentLineHeights,
95
- ] = useState<CurrentLineHeights>(getCurrentLineHeights);
96
-
97
- // In case the root styles have not yet been applied, wait a bit and then check again.
98
- // This avoids a bad case of NaN line heights in lists/trees.
99
- useEffect(() => {
100
- if (Number.isNaN(currentLineHeights.compactLineHeight)) {
101
- const intervalID = setInterval(() => {
102
- const newLineHeights = getCurrentLineHeights();
103
- if (!Number.isNaN(newLineHeights.compactLineHeight)) {
104
- setCurrentLineHeights(newLineHeights);
105
- }
106
- }, 100);
107
- return () => clearInterval(intervalID);
108
- }
109
- }, [currentLineHeights]);
110
-
90
useLayoutEffect(() => {
91
switch (displayDensity) {
92
case 'comfortable':
@@ -151,11 +130,10 @@ function SettingsContextController({
130
setAppendComponentStack,
131
lineHeight:
132
displayDensity === 'compact'
154
- ? currentLineHeights.compactLineHeight
155
- : currentLineHeights.comfortableLineHeight,
133
+ ? COMPACT_LINE_HEIGHT
134
+ : COMFORTABLE_LINE_HEIGHT,
135
}),
136
[
158
- currentLineHeights,
137
displayDensity,
138
setDisplayDensity,
139
setTheme,
@@ -172,20 +150,6 @@ function SettingsContextController({
150
);
151
}
152
175
-function getCurrentLineHeights(): CurrentLineHeights {
176
- const computedStyle = getComputedStyle((document.body: any));
177
- return {
178
- comfortableLineHeight: parseInt(
179
- computedStyle.getPropertyValue('--comfortable-line-height-data'),
180
- 10
181
- ),
182
- compactLineHeight: parseInt(
183
- computedStyle.getPropertyValue('--compact-line-height-data'),
184
- 10
185
- ),
186
- };
187
-}
188
-
153
function setStyleVariable(
154
name: string,
155
value: string,
yarn.lock
+16
@@ -9931,6 +9931,14 @@ raw-body@2.3.3:
9931
iconv-lite "0.4.23"
9932
unpipe "1.0.0"
9933
9934
+raw-loader@^3.1.0:
9935
+ version "3.1.0"
9936
+ resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-3.1.0.tgz#5e9d399a5a222cc0de18f42c3bc5e49677532b3f"
9937
+ integrity sha512-lzUVMuJ06HF4rYveaz9Tv0WRlUMxJ0Y1hgSkkgg+50iEdaI0TthyEDe08KIHb0XsF6rn8WYTqPCaGTZg3sX+qA==
9938
+ dependencies:
9939
+ loader-utils "^1.1.0"
9940
+ schema-utils "^2.0.1"
9941
+
9942
rc@^1.0.1, rc@^1.1.6, rc@^1.2.1, rc@^1.2.7:
9943
version "1.2.8"
9944
resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
@@ -10715,6 +10723,14 @@ schema-utils@^1.0.0:
10723
ajv-errors "^1.0.0"
10724
ajv-keywords "^3.1.0"
10725
10726
+schema-utils@^2.0.1:
10727
+ version "2.1.0"
10728
+ resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.1.0.tgz#940363b6b1ec407800a22951bdcc23363c039393"
10729
+ integrity sha512-g6SViEZAfGNrToD82ZPUjq52KUPDYc+fN5+g6Euo5mLokl/9Yx14z0Cu4RR1m55HtBXejO0sBt+qw79axN+Fiw==
10730
+ dependencies:
10731
+ ajv "^6.1.0"
10732
+ ajv-keywords "^3.1.0"
10733
+
10734
select-hose@^2.0.0:
10735
version "2.0.0"
10736
resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"