Preserve state when switching tabs
Dan Abramov committed
Apr 8, 2019 at 15:29 UTC
132529da79feeb790db3c9633715a11bf2707111
2 files changed
+26
-23
shells/browser/shared/src/main.js
+11
-3
@@ -154,6 +154,14 @@ function createPanelIfReactLoaded() {
154
155
initBridgeAndStore();
156
157
+ function ensureInitialHTMLIsCleared(container) {
158
+ if (container._hasInitialHTMLBeenCleared) {
159
+ return;
160
+ }
161
+ container.innerHTML = '';
162
+ container._hasInitialHTMLBeenCleared = true;
163
+ }
164
+
165
let currentPanel = null;
166
167
chrome.devtools.panels.create('⚛ Components', '', 'panel.html', panel => {
@@ -166,7 +174,7 @@ function createPanelIfReactLoaded() {
174
componentsPortalContainer = panel.container;
175
176
if (componentsPortalContainer != null) {
169
- componentsPortalContainer.innerHTML = '';
177
+ ensureInitialHTMLIsCleared(componentsPortalContainer);
178
render('components');
179
panel.injectStyles(cloneStyleTags);
180
}
@@ -188,7 +196,7 @@ function createPanelIfReactLoaded() {
196
profilerPortalContainer = panel.container;
197
198
if (profilerPortalContainer != null) {
191
- profilerPortalContainer.innerHTML = '';
199
+ ensureInitialHTMLIsCleared(profilerPortalContainer);
200
render('profiler');
201
panel.injectStyles(cloneStyleTags);
202
}
@@ -205,7 +213,7 @@ function createPanelIfReactLoaded() {
213
settingsPortalContainer = panel.container;
214
215
if (settingsPortalContainer != null) {
208
- settingsPortalContainer.innerHTML = '';
216
+ ensureInitialHTMLIsCleared(settingsPortalContainer);
217
render('settings');
218
panel.injectStyles(cloneStyleTags);
219
}
src/devtools/views/DevTools.js
+15
-20
@@ -107,25 +107,6 @@ export default function DevTools({
107
};
108
}, [store, supportsProfiling]);
109
110
- let tabElement;
111
- switch (tab) {
112
- case 'profiler':
113
- tabElement = (
114
- <Profiler
115
- portalContainer={profilerPortalContainer}
116
- supportsProfiling={supportsProfiling}
117
- />
118
- );
119
- break;
120
- case 'settings':
121
- tabElement = <Settings portalContainer={settingsPortalContainer} />;
122
- break;
123
- case 'components':
124
- default:
125
- tabElement = <Components portalContainer={componentsPortalContainer} />;
126
- break;
127
- }
128
-
110
return (
111
<BridgeContext.Provider value={bridge}>
112
<StoreContext.Provider value={store}>
@@ -158,7 +139,21 @@ export default function DevTools({
139
/>
140
</div>
141
)}
161
- <div className={styles.TabContent}>{tabElement}</div>
142
+ <div
143
+ className={styles.TabContent}
144
+ hidden={tab !== 'components'}
145
+ >
146
+ <Components portalContainer={componentsPortalContainer} />
147
+ </div>
148
+ <div className={styles.TabContent} hidden={tab !== 'profiler'}>
149
+ <Profiler
150
+ portalContainer={profilerPortalContainer}
151
+ supportsProfiling={supportsProfiling}
152
+ />
153
+ </div>
154
+ <div className={styles.TabContent} hidden={tab !== 'settings'}>
155
+ <Settings portalContainer={settingsPortalContainer} />
156
+ </div>
157
</div>
158
</ProfilerContextController>
159
</TreeContextController>