[DevTools] [Profiler]: Save profile now working in Firefox (#16612)
* Added anchor dom element in order to successfully download profiling data. * Reworked downloadFile to accept a DOMElement in order for FF to successfully download profiling data. * Prettify downloadFile changes.
Hristo Kanchev committed
Sep 3, 2019 at 17:35 UTC
77bb1023986225a12aaa1b45b85703df5deaf95a
2 files changed
+9
-7
packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js
+4
-1
@@ -29,6 +29,7 @@ export default function ProfilingImportExportButtons() {
29
const {profilerStore} = store;
30
31
const inputRef = useRef<HTMLInputElement | null>(null);
32
+ const downloadRef = useRef<HTMLAnchorElement | null>(null);
33
34
const {dispatch: modalDialogDispatch} = useContext(ModalDialogContext);
35
@@ -38,7 +39,7 @@ export default function ProfilingImportExportButtons() {
39
return;
40
}
41
41
- if (profilingData !== null) {
42
+ if (profilingData !== null && downloadRef.current !== null) {
43
const profilingDataExport = prepareProfilingDataExport(profilingData);
44
const date = new Date();
45
const dateString = date
@@ -54,6 +55,7 @@ export default function ProfilingImportExportButtons() {
55
})
56
.replace(/:/g, '-');
57
downloadFile(
58
+ downloadRef.current,
59
`profiling-data.${dateString}.${timeString}.json`,
60
JSON.stringify(profilingDataExport, null, 2),
61
);
@@ -114,6 +116,7 @@ export default function ProfilingImportExportButtons() {
116
onChange={handleFiles}
117
tabIndex={-1}
118
/>
119
+ <a ref={downloadRef} className={styles.Input} />
120
<Button
121
disabled={isProfiling}
122
onClick={uploadData}
packages/react-devtools-shared/src/devtools/views/utils.js
+5
-6
@@ -178,7 +178,11 @@ export function serializeHooksForCopy(hooks: HooksTree | null): string {
178
// Without this, we would see a "Download failed: network error" failure.
179
let downloadUrl = null;
180
181
-export function downloadFile(filename: string, text: string): void {
181
+export function downloadFile(
182
+ element: HTMLAnchorElement,
183
+ filename: string,
184
+ text: string,
185
+): void {
186
const blob = new Blob([text], {type: 'text/plain;charset=utf-8'});
187
188
if (downloadUrl !== null) {
@@ -187,15 +191,10 @@ export function downloadFile(filename: string, text: string): void {
191
192
downloadUrl = URL.createObjectURL(blob);
193
190
- const element = document.createElement('a');
194
element.setAttribute('href', downloadUrl);
195
element.setAttribute('download', filename);
193
- element.style.display = 'none';
194
- ((document.body: any): HTMLBodyElement).appendChild(element);
196
197
element.click();
197
-
198
- ((document.body: any): HTMLBodyElement).removeChild(element);
198
}
199
200
export function truncateText(text: string, maxLength: number): string {