Tab bar resizes properly for narrow screens
Brian Vaughn committed
Feb 15, 2019 at 11:42 UTC
2fbacbff01b722bc61aa1d5835286993905ecf84
5 files changed
+37
-6
shells/dev/app/InspectableElements/CustomHooks.js
+2
@@ -35,6 +35,8 @@ function useCustomObject() {
35
36
function FunctionWithHooks(props: any, ref: React$Ref<any>) {
37
const [count, updateCount] = useState(0);
38
+
39
+ // eslint-disable-next-line no-unused-vars
40
const [_, __] = useState(object);
41
42
// Custom hook with a custom debug label
src/devtools/views/HooksTree.js
-1
@@ -1,7 +1,6 @@
1
// @flow
2
3
import React from 'react';
4
-import { getMetaValueLabel } from './utils';
4
import { KeyValue } from './InspectedElementTree';
5
import styles from './HooksTree.css';
6
src/devtools/views/TabBar.css
+23
@@ -9,6 +9,10 @@
9
font-size: var(--font-size-sans-large);
10
}
11
12
+.DevToolsVersion:before {
13
+ content: 'DevTools ';
14
+}
15
+
16
.Tabs {
17
flex: 1 1 auto;
18
display: flex;
@@ -49,3 +53,22 @@
53
width: 1.5rem;
54
height: 1.5rem;
55
}
56
+
57
+.TabLabel {
58
+}
59
+
60
+@media screen and (max-width: 600px) {
61
+ .Icon {
62
+ margin-right: 0;
63
+ }
64
+
65
+ .TabLabel {
66
+ display: none;
67
+ }
68
+}
69
+
70
+@media screen and (max-width: 350px) {
71
+ .DevToolsVersion:before {
72
+ content: '';
73
+ }
74
+}
src/devtools/views/TabBar.js
+10
-4
@@ -21,10 +21,14 @@ export default function TabBar({ currentTab, selectTab }: Props) {
21
22
return (
23
<div className={styles.TabBar}>
24
- <ReactLogo /> DevTools {process.env.DEVTOOLS_VERSION}
24
+ <ReactLogo />
25
+ <span className={styles.DevToolsVersion}>
26
+ {process.env.DEVTOOLS_VERSION}
27
+ </span>
28
<div className={styles.Tabs}>
29
<label
30
className={currentTab === 'elements' ? styles.TabCurrent : styles.Tab}
31
+ title="React Elements"
32
>
33
<input
34
type="radio"
@@ -35,10 +39,11 @@ export default function TabBar({ currentTab, selectTab }: Props) {
39
onChange={onChange}
40
/>
41
<Icon className={styles.Icon} type="elements" />
38
- Elements
42
+ <span className={styles.TabLabel}>Elements</span>
43
</label>
44
<label
45
className={currentTab === 'profiler' ? styles.TabCurrent : styles.Tab}
46
+ title="React Profiler"
47
>
48
<input
49
type="radio"
@@ -49,10 +54,11 @@ export default function TabBar({ currentTab, selectTab }: Props) {
54
onChange={onChange}
55
/>
56
<Icon className={styles.Icon} type="profiler" />
52
- Profiler
57
+ <span className={styles.TabLabel}>Profiler</span>
58
</label>
59
<label
60
className={currentTab === 'settings' ? styles.TabCurrent : styles.Tab}
61
+ title="React Settings"
62
>
63
<input
64
type="radio"
@@ -63,7 +69,7 @@ export default function TabBar({ currentTab, selectTab }: Props) {
69
onChange={onChange}
70
/>
71
<Icon className={styles.Icon} type="settings" />
66
- Settings
72
+ <span className={styles.TabLabel}>Settings</span>
73
</label>
74
</div>
75
</div>
src/devtools/views/hooks.js
+2
-1
@@ -30,7 +30,8 @@ export function useLocalStorage<T>(
30
}
31
};
32
33
- // Listen for changes in other extension panels.
33
+ // Listen for changes to this local storage value made from other windows.
34
+ // This enables the e.g. "⚛️ Elements" tab to update in response to changes from "⚛️ Settings".
35
useLayoutEffect(() => {
36
const onStorage = event => {
37
const newValue = getValueFromLocalStorage();