From 77bb1023986225a12aaa1b45b85703df5deaf95a Mon Sep 17 00:00:00 2001
From: Hristo Kanchev <hristokkanchev@gmail.com>
Date: Tue, 3 Sep 2019 17:35:12 +0200
Subject: [PATCH 1/3] [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.
---
 .../views/Profiler/ProfilingImportExportButtons.js    |  5 ++++-
 .../react-devtools-shared/src/devtools/views/utils.js | 11 +++++------
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js
index 376afcf45e883..8f6b40199ea2e 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js
+++ b/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}
diff --git a/packages/react-devtools-shared/src/devtools/views/utils.js b/packages/react-devtools-shared/src/devtools/views/utils.js
index 9ad71b5cd805a..247f860ac6273 100644
--- a/packages/react-devtools-shared/src/devtools/views/utils.js
+++ b/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 {

From f705e2bac7582b2114f381f14546ff6ca02436b9 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 3 Sep 2019 08:37:12 -0700
Subject: [PATCH 2/3] Updated pending CHANGELOG for DevTools

---
 packages/react-devtools/CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index 894bc3c75a613..84960a7a6194c 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -7,6 +7,8 @@
   </summary>
   
   <!-- Upcoming changes go here -->
+#### Bug fixes
+* Profiler correctly saves/exports profiling data in Firefox now. ([hristo-kanchev](https://github.com/hristo-kanchev) in [#16612](https://github.com/facebook/react/pull/16612))
 </details>
 
 ## 4.0.6 (August 26, 2019)

From af032764a9f244633eb7ff1a3205d2ec6073b501 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Wed, 4 Sep 2019 01:38:36 +0100
Subject: [PATCH 3/3] [react-events] Adds preventKeys support to Keyboard
 responder (#16642)

---
 packages/react-events/src/dom/Keyboard.js     |  49 ++++++-
 .../dom/__tests__/Keyboard-test.internal.js   | 128 ++++++++++++++++++
 2 files changed, 174 insertions(+), 3 deletions(-)

diff --git a/packages/react-events/src/dom/Keyboard.js b/packages/react-events/src/dom/Keyboard.js
index f6926059681fc..00f4ffb16a880 100644
--- a/packages/react-events/src/dom/Keyboard.js
+++ b/packages/react-events/src/dom/Keyboard.js
@@ -22,6 +22,7 @@ type KeyboardProps = {
   disabled: boolean,
   onKeyDown: (e: KeyboardEvent) => void,
   onKeyUp: (e: KeyboardEvent) => void,
+  preventKeys: Array<string>,
 };
 
 type KeyboardEvent = {|
@@ -36,9 +37,12 @@ type KeyboardEvent = {|
   target: Element | Document,
   type: KeyboardEventType,
   timeStamp: number,
+  defaultPrevented: boolean,
 |};
 
-const targetEventTypes = ['keydown', 'keyup'];
+const isArray = Array.isArray;
+const targetEventTypes = ['keydown_active', 'keyup'];
+const modifiers = ['altKey', 'ctrlKey', 'metaKey', 'shiftKey'];
 
 /**
  * Normalization of deprecated HTML5 `key` values
@@ -107,7 +111,7 @@ function isFunction(obj): boolean {
   return typeof obj === 'function';
 }
 
-function getEventKey(nativeEvent): string {
+function getEventKey(nativeEvent: Object): string {
   const nativeKey = nativeEvent.key;
   if (nativeKey) {
     // Normalize inconsistent values reported by browsers due to
@@ -128,6 +132,7 @@ function createKeyboardEvent(
   context: ReactDOMResponderContext,
   type: KeyboardEventType,
   target: Document | Element,
+  defaultPrevented: boolean,
 ): KeyboardEvent {
   const nativeEvent = (event: any).nativeEvent;
   const {
@@ -143,6 +148,7 @@ function createKeyboardEvent(
   return {
     altKey,
     ctrlKey,
+    defaultPrevented,
     isComposing,
     key: getEventKey(nativeEvent),
     location,
@@ -161,8 +167,15 @@ function dispatchKeyboardEvent(
   context: ReactDOMResponderContext,
   type: KeyboardEventType,
   target: Element | Document,
+  defaultPrevented: boolean,
 ): void {
-  const syntheticEvent = createKeyboardEvent(event, context, type, target);
+  const syntheticEvent = createKeyboardEvent(
+    event,
+    context,
+    type,
+    target,
+    defaultPrevented,
+  );
   context.dispatchEvent(syntheticEvent, listener, DiscreteEvent);
 }
 
@@ -174,11 +187,39 @@ const keyboardResponderImpl = {
     props: KeyboardProps,
   ): void {
     const {responderTarget, type} = event;
+    const nativeEvent: any = event.nativeEvent;
 
     if (props.disabled) {
       return;
     }
+    let defaultPrevented = nativeEvent.defaultPrevented === true;
     if (type === 'keydown') {
+      const preventKeys = props.preventKeys;
+      if (!defaultPrevented && isArray(preventKeys)) {
+        preventKeyLoop: for (let i = 0; i < preventKeys.length; i++) {
+          const preventKey = preventKeys[i];
+          let key = preventKey;
+
+          if (isArray(preventKey)) {
+            key = preventKey[0];
+            const config = ((preventKey[1]: any): Object);
+            for (let s = 0; s < modifiers.length; s++) {
+              const modifier = modifiers[s];
+              if (
+                (config[modifier] && !nativeEvent[modifier]) ||
+                (!config[modifier] && nativeEvent[modifier])
+              ) {
+                continue preventKeyLoop;
+              }
+            }
+          }
+          if (key === getEventKey(nativeEvent)) {
+            defaultPrevented = true;
+            nativeEvent.preventDefault();
+            break;
+          }
+        }
+      }
       const onKeyDown = props.onKeyDown;
       if (isFunction(onKeyDown)) {
         dispatchKeyboardEvent(
@@ -187,6 +228,7 @@ const keyboardResponderImpl = {
           context,
           'keydown',
           ((responderTarget: any): Element | Document),
+          defaultPrevented,
         );
       }
     } else if (type === 'keyup') {
@@ -198,6 +240,7 @@ const keyboardResponderImpl = {
           context,
           'keyup',
           ((responderTarget: any): Element | Document),
+          defaultPrevented,
         );
       }
     }
diff --git a/packages/react-events/src/dom/__tests__/Keyboard-test.internal.js b/packages/react-events/src/dom/__tests__/Keyboard-test.internal.js
index f5688b56c62aa..412aaa84b98d2 100644
--- a/packages/react-events/src/dom/__tests__/Keyboard-test.internal.js
+++ b/packages/react-events/src/dom/__tests__/Keyboard-test.internal.js
@@ -92,6 +92,134 @@ describe('Keyboard event responder', () => {
     });
   });
 
+  describe('preventKeys', () => {
+    it('onKeyDown is default prevented', () => {
+      const onKeyDown = jest.fn();
+      const ref = React.createRef();
+      const Component = () => {
+        const listener = useKeyboard({
+          onKeyDown,
+          preventKeys: ['Tab'],
+        });
+        return <div ref={ref} listeners={listener} />;
+      };
+      ReactDOM.render(<Component />, container);
+
+      const preventDefault = jest.fn();
+      const target = createEventTarget(ref.current);
+      target.keydown({key: 'Tab', preventDefault});
+      expect(onKeyDown).toHaveBeenCalledTimes(1);
+      expect(preventDefault).toBeCalled();
+      expect(onKeyDown).toHaveBeenCalledWith(
+        expect.objectContaining({
+          key: 'Tab',
+          type: 'keydown',
+          defaultPrevented: true,
+        }),
+      );
+    });
+
+    it('onKeyDown is default prevented (falsy modifier keys)', () => {
+      let onKeyDown = jest.fn();
+      let ref = React.createRef();
+      let Component = () => {
+        const listener = useKeyboard({
+          onKeyDown,
+          preventKeys: [['Tab', {metaKey: false}]],
+        });
+        return <div ref={ref} listeners={listener} />;
+      };
+      ReactDOM.render(<Component />, container);
+
+      let preventDefault = jest.fn();
+      let target = createEventTarget(ref.current);
+      target.keydown({key: 'Tab', preventDefault, metaKey: true});
+      expect(onKeyDown).toHaveBeenCalledTimes(1);
+      expect(preventDefault).not.toBeCalled();
+      expect(onKeyDown).toHaveBeenCalledWith(
+        expect.objectContaining({
+          key: 'Tab',
+          type: 'keydown',
+          defaultPrevented: false,
+        }),
+      );
+
+      onKeyDown = jest.fn();
+      ref = React.createRef();
+      Component = () => {
+        const listener = useKeyboard({
+          onKeyDown,
+          preventKeys: [['Tab', {metaKey: true}]],
+        });
+        return <div ref={ref} listeners={listener} />;
+      };
+      ReactDOM.render(<Component />, container);
+
+      preventDefault = jest.fn();
+      target = createEventTarget(ref.current);
+      target.keydown({key: 'Tab', preventDefault, metaKey: false});
+      expect(onKeyDown).toHaveBeenCalledTimes(1);
+      expect(preventDefault).not.toBeCalled();
+      expect(onKeyDown).toHaveBeenCalledWith(
+        expect.objectContaining({
+          key: 'Tab',
+          type: 'keydown',
+          defaultPrevented: false,
+        }),
+      );
+    });
+
+    it('onKeyDown is default prevented (truthy modifier keys)', () => {
+      let onKeyDown = jest.fn();
+      let ref = React.createRef();
+      let Component = () => {
+        const listener = useKeyboard({
+          onKeyDown,
+          preventKeys: [['Tab', {metaKey: true}]],
+        });
+        return <div ref={ref} listeners={listener} />;
+      };
+      ReactDOM.render(<Component />, container);
+
+      let preventDefault = jest.fn();
+      let target = createEventTarget(ref.current);
+      target.keydown({key: 'Tab', preventDefault, metaKey: true});
+      expect(onKeyDown).toHaveBeenCalledTimes(1);
+      expect(preventDefault).toBeCalled();
+      expect(onKeyDown).toHaveBeenCalledWith(
+        expect.objectContaining({
+          key: 'Tab',
+          type: 'keydown',
+          defaultPrevented: true,
+        }),
+      );
+
+      onKeyDown = jest.fn();
+      ref = React.createRef();
+      Component = () => {
+        const listener = useKeyboard({
+          onKeyDown,
+          preventKeys: [['Tab', {metaKey: false}]],
+        });
+        return <div ref={ref} listeners={listener} />;
+      };
+      ReactDOM.render(<Component />, container);
+
+      preventDefault = jest.fn();
+      target = createEventTarget(ref.current);
+      target.keydown({key: 'Tab', preventDefault, metaKey: false});
+      expect(onKeyDown).toHaveBeenCalledTimes(1);
+      expect(preventDefault).toBeCalled();
+      expect(onKeyDown).toHaveBeenCalledWith(
+        expect.objectContaining({
+          key: 'Tab',
+          type: 'keydown',
+          defaultPrevented: true,
+        }),
+      );
+    });
+  });
+
   describe('onKeyUp', () => {
     let onKeyDown, onKeyUp, ref;