Skip to content

Commit f74c89b

Browse files
author
Brian Vaughn
committed
Misc improvements based on user feedback from Tim
* Added shadow to modals * Change default "collapse new nodes" to be disabled rather than enabled * Changed setting label "Collapse newly added components by default" to "Expand component tree by default" * Change CSS media query for settings popup to show labels at smaller size * Hide "Inspect the matching DOM element" button (since it doesnt really serve a purpose in standalone) * Fixed small size bug for settings icon (viewbox of 20x20 instead of 24x24) * bugfix: window.addEventListener/window.removeEventListener is not defined in Hermes.
1 parent 13959aa commit f74c89b

File tree

19 files changed

+148
-82
lines changed

19 files changed

+148
-82
lines changed

‎packages/react-devtools-core/src/standalone.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,7 @@ function reload() {
8585
root.render(
8686
createElement(DevTools, {
8787
bridge: ((bridge: any): FrontendBridge),
88+
isBrowserMode: false,
8889
showTabBar: true,
8990
store: ((store: any): Store),
9091
warnIfLegacyBackendDetected: true,

‎src/backend/renderer.js

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,12 @@ type ReactTypeOfSideEffectType = {|
135135
Placement: number,
136136
|};
137137

138+
// Some environments (e.g. React Native / Hermes) don't support the performace API yet.
139+
const getCurrentTime =
140+
typeof performance === 'object' && typeof performance.now === 'function'
141+
? () => performance.now()
142+
: () => Date.now();
143+
138144
export function getInternalReactConstants(
139145
version: string
140146
): {|
@@ -1645,7 +1651,7 @@ export function attach(
16451651
currentCommitProfilingMetadata = {
16461652
changeDescriptions: recordChangeDescriptions ? new Map() : null,
16471653
durations: [],
1648-
commitTime: performance.now() - profilingStartTime,
1654+
commitTime: getCurrentTime() - profilingStartTime,
16491655
interactions: Array.from(root.memoizedInteractions).map(
16501656
(interaction: Interaction) => ({
16511657
...interaction,
@@ -1689,7 +1695,7 @@ export function attach(
16891695
currentCommitProfilingMetadata = {
16901696
changeDescriptions: recordChangeDescriptions ? new Map() : null,
16911697
durations: [],
1692-
commitTime: performance.now() - profilingStartTime,
1698+
commitTime: getCurrentTime() - profilingStartTime,
16931699
interactions: Array.from(root.memoizedInteractions).map(
16941700
(interaction: Interaction) => ({
16951701
...interaction,
@@ -2738,7 +2744,7 @@ export function attach(
27382744
});
27392745

27402746
isProfiling = true;
2741-
profilingStartTime = performance.now();
2747+
profilingStartTime = getCurrentTime();
27422748
rootToCommitProfilingMetadataMap = new Map();
27432749
}
27442750

‎src/backend/views/Highlighter/index.js

Lines changed: 25 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,11 @@ import { hideOverlay, showOverlay } from './Highlighter';
77

88
import type { BackendBridge } from 'src/bridge';
99

10+
// This plug-in provides in-page highlighting of the selected element.
11+
// It is used by the browser extension nad the standalone DevTools shell (when connected to a browser).
12+
// It is not currently the mechanism used to highlight React Native views.
13+
// That is done by the React Native Inspector component.
14+
1015
export default function setupHighlighter(
1116
bridge: BackendBridge,
1217
agent: Agent
@@ -21,25 +26,31 @@ export default function setupHighlighter(
2126
bridge.addListener('stopInspectingNative', stopInspectingNative);
2227

2328
function startInspectingNative() {
24-
window.addEventListener('click', onClick, true);
25-
window.addEventListener('mousedown', onMouseEvent, true);
26-
window.addEventListener('mouseover', onMouseEvent, true);
27-
window.addEventListener('mouseup', onMouseEvent, true);
28-
window.addEventListener('pointerdown', onPointerDown, true);
29-
window.addEventListener('pointerover', onPointerOver, true);
30-
window.addEventListener('pointerup', onPointerUp, true);
29+
// This plug-in may run in non-DOM environments (e.g. React Native).
30+
if (window && typeof window.addEventListener === 'function') {
31+
window.addEventListener('click', onClick, true);
32+
window.addEventListener('mousedown', onMouseEvent, true);
33+
window.addEventListener('mouseover', onMouseEvent, true);
34+
window.addEventListener('mouseup', onMouseEvent, true);
35+
window.addEventListener('pointerdown', onPointerDown, true);
36+
window.addEventListener('pointerover', onPointerOver, true);
37+
window.addEventListener('pointerup', onPointerUp, true);
38+
}
3139
}
3240

3341
function stopInspectingNative() {
3442
hideOverlay();
3543

36-
window.removeEventListener('click', onClick, true);
37-
window.removeEventListener('mousedown', onMouseEvent, true);
38-
window.removeEventListener('mouseover', onMouseEvent, true);
39-
window.removeEventListener('mouseup', onMouseEvent, true);
40-
window.removeEventListener('pointerdown', onPointerDown, true);
41-
window.removeEventListener('pointerover', onPointerOver, true);
42-
window.removeEventListener('pointerup', onPointerUp, true);
44+
// This plug-in may run in non-DOM environments (e.g. React Native).
45+
if (window && typeof window.removeEventListener === 'function') {
46+
window.removeEventListener('click', onClick, true);
47+
window.removeEventListener('mousedown', onMouseEvent, true);
48+
window.removeEventListener('mouseover', onMouseEvent, true);
49+
window.removeEventListener('mouseup', onMouseEvent, true);
50+
window.removeEventListener('pointerdown', onPointerDown, true);
51+
window.removeEventListener('pointerover', onPointerOver, true);
52+
window.removeEventListener('pointerup', onPointerUp, true);
53+
}
4354
}
4455

4556
function clearNativeElementHighlight() {

‎src/devtools/store.js

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -136,10 +136,9 @@ export default class Store extends EventEmitter<{|
136136
debug('constructor', 'subscribing to Bridge');
137137
}
138138

139-
// Default this setting to true unless otherwise specified.
140139
this._collapseNodesByDefault =
141-
localStorageGetItem(LOCAL_STORAGE_COLLAPSE_ROOTS_BY_DEFAULT_KEY) !==
142-
'false';
140+
localStorageGetItem(LOCAL_STORAGE_COLLAPSE_ROOTS_BY_DEFAULT_KEY) ===
141+
'true';
143142

144143
this._recordChangeDescriptions =
145144
localStorageGetItem(LOCAL_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY) ===

‎src/devtools/views/ButtonIcon.js

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -208,12 +208,13 @@ const PATH_SEARCH = `
208208
`;
209209

210210
const PATH_SETTINGS = `
211-
M15.95 10.78c.03-.25.05-.51.05-.78s-.02-.53-.06-.78l1.69-1.32c.15-.12.19-.34.1-.51l-1.6-2.77c-.1-.18-.31-.24-.49-.18l-1.99.8c-.42-.32-.86-.58-1.35-.78L12
212-
2.34c-.03-.2-.2-.34-.4-.34H8.4c-.2 0-.36.14-.39.34l-.3 2.12c-.49.2-.94.47-1.35.78l-1.99-.8c-.18-.07-.39
213-
0-.49.18l-1.6 2.77c-.1.18-.06.39.1.51l1.69
214-
1.32c-.04.25-.07.52-.07.78s.02.53.06.78L2.37 12.1c-.15.12-.19.34-.1.51l1.6 2.77c.1.18.31.24.49.18l1.99-.8c.42.32.86.58
215-
1.35.78l.3 2.12c.04.2.2.34.4.34h3.2c.2 0 .37-.14.39-.34l.3-2.12c.49-.2.94-.47 1.35-.78l1.99.8c.18.07.39 0
216-
.49-.18l1.6-2.77c.1-.18.06-.39-.1-.51l-1.67-1.32zM10 13c-1.65 0-3-1.35-3-3s1.35-3 3-3 3 1.35 3 3-1.35 3-3 3z
211+
M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49
212+
1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38
213+
2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11
214+
1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4
215+
1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49
216+
1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5
217+
3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z
217218
`;
218219

219220
const PATH_SUSPEND = `

‎src/devtools/views/Components/Components.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { SettingsModalContextController } from 'src/devtools/views/Settings/Sett
1313

1414
import styles from './Components.css';
1515

16-
function Components(_: {||}) {
16+
function Components({ isBrowserMode }: {| isBrowserMode?: boolean |}) {
1717
// TODO Flex wrappers below should be user resizable.
1818
return (
1919
<SettingsModalContextController>
@@ -26,7 +26,7 @@ function Components(_: {||}) {
2626
<div className={styles.SelectedElementWrapper}>
2727
<NativeStyleContextController>
2828
<Suspense fallback={<Loading />}>
29-
<SelectedElement />
29+
<SelectedElement isBrowserMode={isBrowserMode} />
3030
</Suspense>
3131
</NativeStyleContextController>
3232
</div>

‎src/devtools/views/Components/SelectedElement.css

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,6 @@
7474
}
7575

7676
.CannotSuspendWarningMessage {
77-
font-size: var(--font-size-sans-large);
7877
}
7978

8079
.NotInStore {

‎src/devtools/views/Components/SelectedElement.js

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,11 @@ import type { GetInspectedElementPath } from './InspectedElementContext';
3030
import type { Element, InspectedElement } from './types';
3131
import type { ElementType } from 'src/types';
3232

33-
export type Props = {||};
33+
export type Props = {|
34+
isBrowserMode?: boolean,
35+
|};
3436

35-
export default function SelectedElement(_: Props) {
37+
export default function SelectedElement({ isBrowserMode }: Props) {
3638
const { inspectedElementID } = useContext(TreeStateContext);
3739
const dispatch = useContext(TreeDispatcherContext);
3840
const { isFileLocationRequired, viewElementSourceFunction } = useContext(
@@ -186,13 +188,15 @@ export default function SelectedElement(_: Props) {
186188
<ButtonIcon type="suspend" />
187189
</Toggle>
188190
)}
189-
<Button
190-
className={styles.IconButton}
191-
onClick={highlightElement}
192-
title="Inspect the matching DOM element"
193-
>
194-
<ButtonIcon type="view-dom" />
195-
</Button>
191+
{isBrowserMode && (
192+
<Button
193+
className={styles.IconButton}
194+
onClick={highlightElement}
195+
title="Inspect the matching DOM element"
196+
>
197+
<ButtonIcon type="view-dom" />
198+
</Button>
199+
)}
196200
<Button
197201
className={styles.IconButton}
198202
onClick={logElement}

‎src/devtools/views/DevTools.js

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ export type Props = {|
3737
bridge: FrontendBridge,
3838
browserTheme?: BrowserTheme,
3939
defaultTab?: TabID,
40+
isBrowserMode?: boolean,
4041
showTabBar?: boolean,
4142
store: Store,
4243
warnIfLegacyBackendDetected?: boolean,
@@ -77,6 +78,7 @@ export default function DevTools({
7778
browserTheme = 'light',
7879
defaultTab = 'components',
7980
componentsPortalContainer,
81+
isBrowserMode = true,
8082
overrideTab,
8183
profilerPortalContainer,
8284
settingsPortalContainer,
@@ -124,16 +126,19 @@ export default function DevTools({
124126
currentTab={tab}
125127
id="DevTools"
126128
selectTab={setTab}
127-
size="large"
128129
tabs={tabs}
130+
type="navigation"
129131
/>
130132
</div>
131133
)}
132134
<div
133135
className={styles.TabContent}
134136
hidden={tab !== 'components'}
135137
>
136-
<Components portalContainer={componentsPortalContainer} />
138+
<Components
139+
isBrowserMode={isBrowserMode}
140+
portalContainer={componentsPortalContainer}
141+
/>
137142
</div>
138143
<div
139144
className={styles.TabContent}

‎src/devtools/views/Icon.js

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -101,10 +101,11 @@ const PATH_SEARCH = `
101101
const PATH_RANKED_CHART = 'M3 5h18v3H3zM3 10.5h13v3H3zM3 16h8v3H3z';
102102

103103
const PATH_SETTINGS = `
104-
M15.95 10.78c.03-.25.05-.51.05-.78s-.02-.53-.06-.78l1.69-1.32c.15-.12.19-.34.1-.51l-1.6-2.77c-.1-.18-.31-.24-.49-.18l-1.99.8c-.42-.32-.86-.58-1.35-.78L12
105-
2.34c-.03-.2-.2-.34-.4-.34H8.4c-.2 0-.36.14-.39.34l-.3 2.12c-.49.2-.94.47-1.35.78l-1.99-.8c-.18-.07-.39
106-
0-.49.18l-1.6 2.77c-.1.18-.06.39.1.51l1.69
107-
1.32c-.04.25-.07.52-.07.78s.02.53.06.78L2.37 12.1c-.15.12-.19.34-.1.51l1.6 2.77c.1.18.31.24.49.18l1.99-.8c.42.32.86.58
108-
1.35.78l.3 2.12c.04.2.2.34.4.34h3.2c.2 0 .37-.14.39-.34l.3-2.12c.49-.2.94-.47 1.35-.78l1.99.8c.18.07.39 0
109-
.49-.18l1.6-2.77c.1-.18.06-.39-.1-.51l-1.67-1.32zM10 13c-1.65 0-3-1.35-3-3s1.35-3 3-3 3 1.35 3 3-1.35 3-3 3z
104+
M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49
105+
1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38
106+
2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11
107+
1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4
108+
1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49
109+
1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5
110+
3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z
110111
`;

‎src/devtools/views/ModalDialog.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
max-width: 100%;
1919
display: inline-block;
2020
background-color: var(--color-background);
21+
box-shadow: 0 2px 4px var(--color-shadow);
2122
padding: 0.5rem;
2223
border: 1px solid var(--color-border);
2324
border-radius: 0.25rem;

‎src/devtools/views/Profiler/Profiler.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,8 +92,8 @@ function Profiler(_: {||}) {
9292
currentTab={selectedTabID}
9393
id="Profiler"
9494
selectTab={selectTab}
95-
size="small"
9695
tabs={tabs}
96+
type="profiler"
9797
/>
9898
<RootSelector />
9999
<div className={styles.Spacer} />

‎src/devtools/views/Settings/ComponentsSettings.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ export default function ComponentsSettings(_: {||}) {
6161

6262
const updateCollapseNodesByDefault = useCallback(
6363
({ currentTarget }) => {
64-
store.collapseNodesByDefault = currentTarget.checked;
64+
store.collapseNodesByDefault = !currentTarget.checked;
6565
},
6666
[store]
6767
);
@@ -240,10 +240,10 @@ export default function ComponentsSettings(_: {||}) {
240240
<label className={styles.Setting}>
241241
<input
242242
type="checkbox"
243-
checked={collapseNodesByDefault}
243+
checked={!collapseNodesByDefault}
244244
onChange={updateCollapseNodesByDefault}
245245
/>{' '}
246-
Collapse newly added components by default
246+
Expand component tree by default
247247
</label>
248248

249249
<div className={styles.Header}>Hide components where...</div>

‎src/devtools/views/Settings/SettingsContext.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -308,6 +308,7 @@ function updateThemeVariables(
308308
updateStyleHelper(theme, 'color-color-scroll-thumb', documentElements);
309309
updateStyleHelper(theme, 'color-color-scroll-track', documentElements);
310310
updateStyleHelper(theme, 'color-search-match', documentElements);
311+
updateStyleHelper(theme, 'color-shadow', documentElements);
311312
updateStyleHelper(theme, 'color-search-match-current', documentElements);
312313
updateStyleHelper(
313314
theme,

‎src/devtools/views/Settings/SettingsModal.css

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
.Background {
22
position: absolute;
3+
z-index: 3;
34
width: 100%;
45
top: 0;
56
bottom: 0;
@@ -18,6 +19,7 @@
1819
max-height: 100%;
1920
background-color: var(--color-background);
2021
border: 1px solid var(--color-border);
22+
box-shadow: 0 2px 4px var(--color-shadow);
2123
border-radius: 0.25rem;
2224
overflow: auto;
2325
width: 400px;

‎src/devtools/views/Settings/SettingsModal.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,8 +100,8 @@ function SettingsModalImpl(_: {||}) {
100100
currentTab={selectedTabID}
101101
id="Settings"
102102
selectTab={selectTab}
103-
size="small"
104103
tabs={tabs}
104+
type="settings"
105105
/>
106106
<div className={styles.Spacer} />
107107
<Button onClick={dismissModal} title="Close settings dialog">

0 commit comments

Comments
 (0)