Skip to content

[DevTools] [Profiler]: Save profile now working in Firefox #16612

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Sep 3, 2019
Merged

[DevTools] [Profiler]: Save profile now working in Firefox #16612

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
01019aa
Added anchor dom element in order to successfully download profiling …
hristo-kanchev Aug 29, 2019
cdbe738
Reworked downloadFile to accept a DOMElement in order for FF to succe…
hristo-kanchev Aug 29, 2019
1705e47
Prettify downloadFile changes.
hristo-kanchev Aug 29, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand All @@ -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
Expand All @@ -54,6 +55,7 @@ export default function ProfilingImportExportButtons() {
})
.replace(/:/g, '-');
downloadFile(
downloadRef.current,
`profiling-data.${dateString}.${timeString}.json`,
JSON.stringify(profilingDataExport, null, 2),
);
Expand Down Expand Up @@ -114,6 +116,7 @@ export default function ProfilingImportExportButtons() {
onChange={handleFiles}
tabIndex={-1}
/>
<a ref={downloadRef} className={styles.Input} />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: At this point we might consider renaming the Input class to e.g. Hidden or something but this is minor, given the small scope.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good shout. We can fix this in another PR. I'll reference this comment.

<Button
disabled={isProfiling}
onClick={uploadData}
Expand Down
11 changes: 5 additions & 6 deletions packages/react-devtools-shared/src/devtools/views/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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 {
Expand Down