Update Flow to 0.263 (#34269)

This update was a bit more involved.

- `React$Component` was removed, I replaced it with Flow component
types.
- Flow removed shipping the standard library. This adds the environment
libraries back from `flow-typed` which seemed to have changed slightly
(probably got more precise and less `any`s). Suppresses some new type
errors.

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

@@ -24,6 +24,7 @@ import SettingsModal from 'react-devtools-shared/src/devtools/views/Settings/Set
 import {NativeStyleContextController} from './NativeStyleEditor/context';
 
 import styles from './Components.css';
+import typeof {SyntheticPointerEvent} from 'react-dom-bindings/src/events/SyntheticEvent';
 
 type Orientation = 'horizontal' | 'vertical';
 
@@ -79,17 +80,17 @@ function Components(_: {}) {
     return () => clearTimeout(timeoutID);
   }, [horizontalPercentage, verticalPercentage]);
 
-  const onResizeStart = (event: SyntheticPointerEvent<HTMLElement>) => {
+  const onResizeStart = (event: SyntheticPointerEvent) => {
     const element = event.currentTarget;
     element.setPointerCapture(event.pointerId);
   };
 
-  const onResizeEnd = (event: SyntheticPointerEvent<HTMLElement>) => {
+  const onResizeEnd = (event: SyntheticPointerEvent) => {
     const element = event.currentTarget;
     element.releasePointerCapture(event.pointerId);
   };
 
-  const onResize = (event: SyntheticPointerEvent<HTMLElement>) => {
+  const onResize = (event: SyntheticPointerEvent) => {
     const element = event.currentTarget;
     const isResizing = element.hasPointerCapture(event.pointerId);
     if (!isResizing) {

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

@@ -10,16 +10,17 @@
 import * as React from 'react';
 
 import styles from './ChartNode.css';
+import typeof {SyntheticMouseEvent} from 'react-dom-bindings/src/events/SyntheticEvent';
 
 type Props = {
   color: string,
   height: number,
   isDimmed?: boolean,
   label: string,
-  onClick: (event: SyntheticMouseEvent<any>) => mixed,
-  onDoubleClick?: (event: SyntheticMouseEvent<any>) => mixed,
-  onMouseEnter: (event: SyntheticMouseEvent<any>) => mixed,
-  onMouseLeave: (event: SyntheticMouseEvent<any>) => mixed,
+  onClick: (event: SyntheticMouseEvent) => mixed,
+  onDoubleClick?: (event: SyntheticMouseEvent) => mixed,
+  onMouseEnter: (event: SyntheticMouseEvent) => mixed,
+  onMouseLeave: (event: SyntheticMouseEvent) => mixed,
   placeLabelAboveNode?: boolean,
   textStyle?: Object,
   width: number,

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

@@ -17,6 +17,7 @@ import {SettingsContext} from '../Settings/SettingsContext';
 
 import type {ChartNode as ChartNodeType} from './FlamegraphChartBuilder';
 import type {ItemData} from './CommitFlamegraph';
+import typeof {SyntheticMouseEvent} from 'react-dom-bindings/src/events/SyntheticEvent';
 
 type Props = {
   data: ItemData,
@@ -41,7 +42,7 @@ function CommitFlamegraphListItem({data, index, style}: Props): React.Node {
   const {lineHeight} = useContext(SettingsContext);
 
   const handleClick = useCallback(
-    (event: SyntheticMouseEvent<EventTarget>, id: number, name: string) => {
+    (event: SyntheticMouseEvent, id: number, name: string) => {
       event.stopPropagation();
       selectFiber(id, name);
     },

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

@@ -4,6 +4,7 @@ import * as React from 'react';
 import {useRef} from 'react';
 
 import styles from './Tooltip.css';
+import typeof {SyntheticMouseEvent} from 'react-dom-bindings/src/events/SyntheticEvent';
 
 const initialTooltipState = {height: 0, mouseX: 0, mouseY: 0, width: 0};
 
@@ -17,7 +18,7 @@ export default function Tooltip({
   const tooltipRef = useRef(null);
 
   // update the position of the tooltip based on current mouse position
-  const updateTooltipPosition = (event: SyntheticMouseEvent<EventTarget>) => {
+  const updateTooltipPosition = (event: SyntheticMouseEvent) => {
     const element = tooltipRef.current;
     if (element != null) {
       // first find the mouse position
@@ -30,7 +31,7 @@ export default function Tooltip({
     }
   };
 
-  const onMouseMove = (event: SyntheticMouseEvent<EventTarget>) => {
+  const onMouseMove = (event: SyntheticMouseEvent) => {
     updateTooltipPosition(event);
   };
 
@@ -94,7 +95,7 @@ function getTooltipPosition(
 // method used to find the current mouse position inside the container
 function getMousePosition(
   relativeContainer: null,
-  mouseEvent: SyntheticMouseEvent<EventTarget>,
+  mouseEvent: SyntheticMouseEvent,
 ) {
   if (relativeContainer !== null) {
     // Position within the nearest position:relative container.

packages/react-devtools-shared/src/devtools/views/Settings/ProfilerSettings.js

@@ -14,6 +14,7 @@ import {StoreContext} from '../context';
 import {ProfilerContext} from 'react-devtools-shared/src/devtools/views/Profiler/ProfilerContext';
 
 import styles from './SettingsShared.css';
+import typeof {SyntheticEvent} from 'react-dom-bindings/src/events/SyntheticEvent';
 
 export default function ProfilerSettings(_: {}): React.Node {
   const {
@@ -45,7 +46,7 @@ export default function ProfilerSettings(_: {}): React.Node {
     [store],
   );
   const updateMinCommitDuration = useCallback(
-    (event: SyntheticEvent<HTMLInputElement>) => {
+    (event: SyntheticEvent) => {
       const newValue = parseFloat(event.currentTarget.value);
       setMinCommitDuration(
         Number.isNaN(newValue) || newValue <= 0 ? 0 : newValue,
@@ -54,7 +55,7 @@ export default function ProfilerSettings(_: {}): React.Node {
     [setMinCommitDuration],
   );
   const updateIsCommitFilterEnabled = useCallback(
-    (event: SyntheticEvent<HTMLInputElement>) => {
+    (event: SyntheticEvent) => {
       const checked = event.currentTarget.checked;
       setIsCommitFilterEnabled(checked);
       if (checked) {

packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js

@@ -23,6 +23,10 @@ import {StoreContext} from '../context';
 import {useHighlightHostInstance} from '../hooks';
 import styles from './SuspenseRects.css';
 import {SuspenseTreeStateContext} from './SuspenseTreeContext';
+import typeof {
+  SyntheticMouseEvent,
+  SyntheticPointerEvent,
+} from 'react-dom-bindings/src/events/SyntheticEvent';
 
 function SuspenseRect({rect}: {rect: Rect}): React$Node {
   return (
@@ -55,7 +59,7 @@ function SuspenseRects({
     return null;
   }
 
-  function handleClick(event: SyntheticMouseEvent<>) {
+  function handleClick(event: SyntheticMouseEvent) {
     if (event.defaultPrevented) {
       // Already clicked on an inner rect
       return;
@@ -64,7 +68,7 @@ function SuspenseRects({
     dispatch({type: 'SELECT_ELEMENT_BY_ID', payload: suspenseID});
   }
 
-  function handlePointerOver(event: SyntheticPointerEvent<>) {
+  function handlePointerOver(event: SyntheticPointerEvent) {
     if (event.defaultPrevented) {
       // Already hovered an inner rect
       return;
@@ -73,7 +77,7 @@ function SuspenseRects({
     highlightHostInstance(suspenseID);
   }
 
-  function handlePointerLeave(event: SyntheticPointerEvent<>) {
+  function handlePointerLeave(event: SyntheticPointerEvent) {
     if (event.defaultPrevented) {
       // Already hovered an inner rect
       return;

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

@@ -22,6 +22,7 @@ import styles from './SuspenseTab.css';
 import SuspenseRects from './SuspenseRects';
 import SuspenseTreeList from './SuspenseTreeList';
 import Button from '../Button';
+import typeof {SyntheticPointerEvent} from 'react-dom-bindings/src/events/SyntheticEvent';
 
 type Orientation = 'horizontal' | 'vertical';
 
@@ -180,17 +181,17 @@ function SuspenseTab(_: {}) {
     treeListHorizontalFraction,
   ]);
 
-  const onResizeStart = (event: SyntheticPointerEvent<HTMLElement>) => {
+  const onResizeStart = (event: SyntheticPointerEvent) => {
     const element = event.currentTarget;
     element.setPointerCapture(event.pointerId);
   };
 
-  const onResizeEnd = (event: SyntheticPointerEvent<HTMLElement>) => {
+  const onResizeEnd = (event: SyntheticPointerEvent) => {
     const element = event.currentTarget;
     element.releasePointerCapture(event.pointerId);
   };
 
-  const onResizeTree = (event: SyntheticPointerEvent<HTMLElement>) => {
+  const onResizeTree = (event: SyntheticPointerEvent) => {
     const element = event.currentTarget;
     const isResizing = element.hasPointerCapture(event.pointerId);
     if (!isResizing) {
@@ -241,7 +242,7 @@ function SuspenseTab(_: {}) {
     }
   };
 
-  const onResizeTreeList = (event: SyntheticPointerEvent<HTMLElement>) => {
+  const onResizeTreeList = (event: SyntheticPointerEvent) => {
     const element = event.currentTarget;
     const isResizing = element.hasPointerCapture(event.pointerId);
     if (!isResizing) {