[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.

Author: hristo-kanchev

packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js

@@ -29,6 +29,7 @@ export default function ProfilingImportExportButtons() {
   const {profilerStore} = store;
 
   const inputRef = useRef<HTMLInputElement | null>(null);
+  const downloadRef = useRef<HTMLAnchorElement | null>(null);
 
   const {dispatch: modalDialogDispatch} = useContext(ModalDialogContext);
 
@@ -38,7 +39,7 @@ export default function ProfilingImportExportButtons() {
         return;
       }
 
-      if (profilingData !== null) {
+      if (profilingData !== null && downloadRef.current !== null) {
         const profilingDataExport = prepareProfilingDataExport(profilingData);
         const date = new Date();
         const dateString = date
@@ -54,6 +55,7 @@ export default function ProfilingImportExportButtons() {
           })
           .replace(/:/g, '-');
         downloadFile(
+          downloadRef.current,
           `profiling-data.${dateString}.${timeString}.json`,
           JSON.stringify(profilingDataExport, null, 2),
         );
@@ -114,6 +116,7 @@ export default function ProfilingImportExportButtons() {
         onChange={handleFiles}
         tabIndex={-1}
       />
+      <a ref={downloadRef} className={styles.Input} />
       <Button
         disabled={isProfiling}
         onClick={uploadData}

packages/react-devtools-shared/src/devtools/views/utils.js

@@ -178,7 +178,11 @@ export function serializeHooksForCopy(hooks: HooksTree | null): string {
 // Without this, we would see a "Download failed: network error" failure.
 let downloadUrl = null;
 
-export function downloadFile(filename: string, text: string): void {
+export function downloadFile(
+  element: HTMLAnchorElement,
+  filename: string,
+  text: string,
+): void {
   const blob = new Blob([text], {type: 'text/plain;charset=utf-8'});
 
   if (downloadUrl !== null) {
@@ -187,15 +191,10 @@ export function downloadFile(filename: string, text: string): void {
 
   downloadUrl = URL.createObjectURL(blob);
 
-  const element = document.createElement('a');
   element.setAttribute('href', downloadUrl);
   element.setAttribute('download', filename);
-  element.style.display = 'none';
-  ((document.body: any): HTMLBodyElement).appendChild(element);
 
   element.click();
-
-  ((document.body: any): HTMLBodyElement).removeChild(element);
 }
 
 export function truncateText(text: string, maxLength: number): string {