Bug 1572214 - Part 3: Update debugger to use new react-redux flow-typed bindings for better typechecking. r=jlast
authorLogan Smyth <loganfsmyth@gmail.com>
Tue, 08 Oct 2019 17:59:46 +0000
changeset 496862 bee723fdb043afb5e1485cc0b8e7f658c8b9354b
parent 496861 93fa4a718f1939a7c86a64938cf142c645d2c1b5
child 496863 5e3149673e9345667919a04dff47f325ce0b1685
push id36669
push usershindli@mozilla.com
push dateWed, 09 Oct 2019 09:58:06 +0000
treeherdermozilla-central@be9a6289486a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjlast
bugs1572214
milestone71.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1572214 - Part 3: Update debugger to use new react-redux flow-typed bindings for better typechecking. r=jlast Depends on D48477 Differential Revision: https://phabricator.services.mozilla.com/D48478
devtools/client/debugger/flow-typed/npm/react-redux_v5.x.x.js
devtools/client/debugger/src/components/App.js
devtools/client/debugger/src/components/Editor/Breakpoints.js
devtools/client/debugger/src/components/Editor/ColumnBreakpoints.js
devtools/client/debugger/src/components/Editor/ConditionalPanel.js
devtools/client/debugger/src/components/Editor/DebugLine.js
devtools/client/debugger/src/components/Editor/EditorMenu.js
devtools/client/debugger/src/components/Editor/EmptyLines.js
devtools/client/debugger/src/components/Editor/Footer.js
devtools/client/debugger/src/components/Editor/HighlightLine.js
devtools/client/debugger/src/components/Editor/HighlightLines.js
devtools/client/debugger/src/components/Editor/InlinePreviewRow.js
devtools/client/debugger/src/components/Editor/InlinePreviews.js
devtools/client/debugger/src/components/Editor/Preview/Popup.js
devtools/client/debugger/src/components/Editor/Preview/index.js
devtools/client/debugger/src/components/Editor/SearchBar.js
devtools/client/debugger/src/components/Editor/Tab.js
devtools/client/debugger/src/components/Editor/Tabs.js
devtools/client/debugger/src/components/Editor/index.js
devtools/client/debugger/src/components/PrimaryPanes/Outline.js
devtools/client/debugger/src/components/PrimaryPanes/SourcesTree.js
devtools/client/debugger/src/components/PrimaryPanes/SourcesTreeItem.js
devtools/client/debugger/src/components/PrimaryPanes/index.js
devtools/client/debugger/src/components/ProjectSearch.js
devtools/client/debugger/src/components/QuickOpenModal.js
devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/Breakpoint.js
devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/BreakpointHeading.js
devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/index.js
devtools/client/debugger/src/components/SecondaryPanes/CommandBar.js
devtools/client/debugger/src/components/SecondaryPanes/EventListeners.js
devtools/client/debugger/src/components/SecondaryPanes/Expressions.js
devtools/client/debugger/src/components/SecondaryPanes/Frames/index.js
devtools/client/debugger/src/components/SecondaryPanes/Scopes.js
devtools/client/debugger/src/components/SecondaryPanes/Thread.js
devtools/client/debugger/src/components/SecondaryPanes/Threads.js
devtools/client/debugger/src/components/SecondaryPanes/WhyPaused.js
devtools/client/debugger/src/components/SecondaryPanes/XHRBreakpoints.js
devtools/client/debugger/src/components/SecondaryPanes/index.js
devtools/client/debugger/src/components/WelcomeBox.js
devtools/client/debugger/src/components/shared/SourceIcon.js
devtools/client/debugger/src/utils/connect.js
--- a/devtools/client/debugger/flow-typed/npm/react-redux_v5.x.x.js
+++ b/devtools/client/debugger/flow-typed/npm/react-redux_v5.x.x.js
@@ -1,192 +1,273 @@
-// flow-typed signature: d4e793bc07ef1dc9906a244b12960f7b
-// flow-typed version: cf33ff8762/react-redux_v5.x.x/flow_>=v0.63.0
+/**
+The order of type arguments for connect() is as follows:
 
-import type { Dispatch, Store } from "redux";
+connect<Props, OwnProps, StateProps, DispatchProps, State, Dispatch>(…)
 
-declare module "react-redux" {
-  import type { ComponentType, ElementConfig } from 'react';
+In Flow v0.89 only the first two are mandatory to specify. Other 4 can be repaced with the new awesome type placeholder:
+
+connect<Props, OwnProps, _, _, _, _>(…)
 
-  declare export class Provider<S, A> extends React$Component<{
-    store: Store<S, A>,
-    children?: any
-  }> {}
+But beware, in case of weird type errors somewhere in random places
+just type everything and get to a green field and only then try to
+remove the definitions you see bogus.
 
-  declare export function createProvider(
-    storeKey?: string,
-    subKey?: string
-  ): Provider<*, *>;
-
-  /*
-
+Decrypting the abbreviations:
+  WC = Component being wrapped
   S = State
-  A = Action
+  D = Dispatch
   OP = OwnProps
   SP = StateProps
   DP = DispatchProps
   MP = Merge props
-  MDP = Map dispatch to props object
   RSP = Returned state props
   RDP = Returned dispatch props
   RMP = Returned merge props
   CP = Props for returned component
   Com = React Component
-  */
-
-  declare type MapStateToProps<S: Object, SP: Object, RSP: Object> = (state: S, props: SP) => RSP;
-
-  declare type MapDispatchToProps<A, OP: Object, RDP: Object> = (dispatch: Dispatch<A>, ownProps: OP) => RDP;
+  ST = Static properties of Com
+  EFO = Extra factory options (used only in connectAdvanced)
+*/
 
-  declare type MergeProps<SP: Object, DP: Object, MP: Object, RMP: Object> = (
-    stateProps: SP,
-    dispatchProps: DP,
-    ownProps: MP
-  ) => RMP;
+declare module "react-redux" {
+  // ------------------------------------------------------------
+  // Typings for connect()
+  // ------------------------------------------------------------
 
-  declare type ConnectOptions<S: Object, OP: Object, RSP: Object, RMP: Object> = {|
+  declare export type Options<S, OP, SP, MP> = {|
     pure?: boolean,
     withRef?: boolean,
     areStatesEqual?: (next: S, prev: S) => boolean,
     areOwnPropsEqual?: (next: OP, prev: OP) => boolean,
-    areStatePropsEqual?: (next: RSP, prev: RSP) => boolean,
-    areMergedPropsEqual?: (next: RMP, prev: RMP) => boolean,
-    storeKey?: string
+    areStatePropsEqual?: (next: SP, prev: SP) => boolean,
+    areMergedPropsEqual?: (next: MP, prev: MP) => boolean,
+    storeKey?: string,
   |};
 
-  declare type OmitDispatch<Component> = $Diff<Component, {dispatch: Dispatch<*>}>;
+  declare type MapStateToProps<-S, -OP, +SP> =
+    | ((state: S, ownProps: OP) => SP)
+    // If you want to use the factory function but get a strange error
+    // like "function is not an object" then just type the factory function
+    // like this:
+    // const factory: (State, OwnProps) => (State, OwnProps) => StateProps
+    // and provide the StateProps type to the SP type parameter.
+    | ((state: S, ownProps: OP) => (state: S, ownProps: OP) => SP);
 
-  declare export function connect<
-    Com: ComponentType<*>,
-    S: Object,
-    DP: Object,
-    RSP: Object,
-    CP: $Diff<OmitDispatch<ElementConfig<Com>>, RSP>
-    >(
-    mapStateToProps: MapStateToProps<S, DP, RSP>,
-    mapDispatchToProps?: null
-  ): (component: Com) => ComponentType<CP & DP>;
+  declare type Bind<D> = <A, R>((...A) => R) => (...A) => $Call<D, R>;
+
+  declare type MapDispatchToPropsFn<D, -OP, +DP> =
+    | ((dispatch: D, ownProps: OP) => DP)
+    // If you want to use the factory function but get a strange error
+    // like "function is not an object" then just type the factory function
+    // like this:
+    // const factory: (Dispatch, OwnProps) => (Dispatch, OwnProps) => DispatchProps
+    // and provide the DispatchProps type to the DP type parameter.
+    | ((dispatch: D, ownProps: OP) => (dispatch: D, ownProps: OP) => DP);
 
-  declare export function connect<Com: ComponentType<*>>(
-    mapStateToProps?: null,
-    mapDispatchToProps?: null
-  ): (component: Com) => ComponentType<OmitDispatch<ElementConfig<Com>>>;
+  declare class ConnectedComponent<OP, +WC> extends React$Component<OP> {
+    static +WrappedComponent: WC;
+    getWrappedInstance(): React$ElementRef<WC>;
+  }
+  // The connection of the Wrapped Component and the Connected Component
+  // happens here in `MP: P`. It means that type wise MP belongs to P,
+  // so to say MP >= P.
+  declare type Connector<P, OP, MP: P> = <WC: React$ComponentType<P>>(
+    WC,
+  ) => Class<ConnectedComponent<OP, WC>> & WC;
+
+  // No `mergeProps` argument
 
-  declare export function connect<
-    Com: ComponentType<*>,
-    A,
-    S: Object,
-    DP: Object,
-    SP: Object,
-    RSP: Object,
-    RDP: Object,
-    CP: $Diff<$Diff<ElementConfig<Com>, RSP>, RDP>
-    >(
-    mapStateToProps: MapStateToProps<S, SP, RSP>,
-    mapDispatchToProps: MapDispatchToProps<A, DP, RDP>
-  ): (component: Com) => ComponentType<CP & SP & DP>;
+  // Got error like inexact OwnProps is incompatible with exact object type?
+  // Just make the OP parameter for `connect()` an exact object.
+  declare type MergeOP<OP, D> = {| ...$Exact<OP>, dispatch: D |};
+  declare type MergeOPSP<OP, SP, D> = {| ...$Exact<OP>, ...SP, dispatch: D |};
+  declare type MergeOPDP<OP, DP> = {| ...$Exact<OP>, ...DP |};
+  declare type MergeOPSPDP<OP, SP, DP> = {| ...$Exact<OP>, ...SP, ...DP |};
+
+  declare export function connect<-P, -OP, -SP, -DP, -S, -D>(
+    mapStateToProps?: null | void,
+    mapDispatchToProps?: null | void,
+    mergeProps?: null | void,
+    options?: ?Options<S, OP, {||}, MergeOP<OP, D>>,
+  ): Connector<P, OP, MergeOP<OP, D>>;
 
-  declare export function connect<
-    Com: ComponentType<*>,
-    A,
-    OP: Object,
-    DP: Object,
-    PR: Object,
-    CP: $Diff<ElementConfig<Com>, DP>
-    >(
-    mapStateToProps?: null,
-    mapDispatchToProps: MapDispatchToProps<A, OP, DP>
-  ): (Com) => ComponentType<CP & OP>;
+  declare export function connect<-P, -OP, -SP, -DP, -S, -D>(
+    // If you get error here try adding return type to your mapStateToProps function
+    mapStateToProps: MapStateToProps<S, OP, SP>,
+    mapDispatchToProps?: null | void,
+    mergeProps?: null | void,
+    options?: ?Options<S, OP, SP, MergeOPSP<OP, SP, D>>,
+  ): Connector<P, OP, MergeOPSP<OP, SP, D>>;
+
+  // In this case DP is an object of functions which has been bound to dispatch
+  // by the given mapDispatchToProps function.
+  declare export function connect<-P, -OP, -SP, -DP, S, D>(
+    mapStateToProps: null | void,
+    mapDispatchToProps: MapDispatchToPropsFn<D, OP, DP>,
+    mergeProps?: null | void,
+    options?: ?Options<S, OP, {||}, MergeOPDP<OP, DP>>,
+  ): Connector<P, OP, MergeOPDP<OP, DP>>;
+
+  // In this case DP is an object of action creators not yet bound to dispatch,
+  // this difference is not important in the vanila redux,
+  // but in case of usage with redux-thunk, the return type may differ.
+  declare export function connect<-P, -OP, -SP, -DP, S, D>(
+    mapStateToProps: null | void,
+    mapDispatchToProps: DP,
+    mergeProps?: null | void,
+    options?: ?Options<S, OP, {||}, MergeOPDP<OP, DP>>,
+  ): Connector<P, OP, MergeOPDP<OP, $ObjMap<DP, Bind<D>>>>;
 
-  declare export function connect<
-    Com: ComponentType<*>,
-    MDP: Object
-    >(
-    mapStateToProps?: null,
-    mapDispatchToProps: MDP
-  ): (component: Com) => ComponentType<$Diff<ElementConfig<Com>, MDP>>;
+  declare export function connect<-P, -OP, -SP, -DP, S, D>(
+    // If you get error here try adding return type to your mapStateToProps function
+    mapStateToProps: MapStateToProps<S, OP, SP>,
+    mapDispatchToProps: MapDispatchToPropsFn<D, OP, DP>,
+    mergeProps?: null | void,
+    options?: ?Options<S, OP, SP, {| ...OP, ...SP, ...DP |}>,
+  ): Connector<P, OP, {| ...OP, ...SP, ...DP |}>;
+
+  declare export function connect<-P, -OP, -SP, -DP, S, D>(
+    // If you get error here try adding return type to your mapStateToProps function
+    mapStateToProps: MapStateToProps<S, OP, SP>,
+    mapDispatchToProps: DP,
+    mergeProps?: null | void,
+    options?: ?Options<S, OP, SP, MergeOPSPDP<OP, SP, DP>>,
+  ): Connector<P, OP, MergeOPSPDP<OP, SP, $ObjMap<DP, Bind<D>>>>;
 
-  declare export function connect<
-    Com: ComponentType<*>,
-    S: Object,
-    SP: Object,
-    RSP: Object,
-    MDP: Object,
-    CP: $Diff<ElementConfig<Com>, RSP>
-    >(
-    mapStateToProps: MapStateToProps<S, SP, RSP>,
-    mapDispatchToPRops: MDP
-  ): (component: Com) => ComponentType<$Diff<CP, MDP> & SP>;
+  // With `mergeProps` argument
+
+  declare type MergeProps<+P, -OP, -SP, -DP> = (
+    stateProps: SP,
+    dispatchProps: DP,
+    ownProps: OP,
+  ) => P;
+
+  declare export function connect<-P, -OP, -SP: {||}, -DP: {||}, S, D>(
+    mapStateToProps: null | void,
+    mapDispatchToProps: null | void,
+    // If you get error here try adding return type to you mapStateToProps function
+    mergeProps: MergeProps<P, OP, {||}, {| dispatch: D |}>,
+    options?: ?Options<S, OP, {||}, P>,
+  ): Connector<P, OP, P>;
 
-  declare export function connect<
-    Com: ComponentType<*>,
-    A,
-    S: Object,
-    DP: Object,
-    SP: Object,
-    RSP: Object,
-    RDP: Object,
-    MP: Object,
-    RMP: Object,
-    CP: $Diff<ElementConfig<Com>, RMP>
-    >(
-    mapStateToProps: MapStateToProps<S, SP, RSP>,
-    mapDispatchToProps: ?MapDispatchToProps<A, DP, RDP>,
-    mergeProps: MergeProps<RSP, RDP, MP, RMP>
-  ): (component: Com) => ComponentType<CP & SP & DP & MP>;
+  declare export function connect<-P, -OP, -SP, -DP: {||}, S, D>(
+    mapStateToProps: MapStateToProps<S, OP, SP>,
+    mapDispatchToProps: null | void,
+    // If you get error here try adding return type to you mapStateToProps function
+    mergeProps: MergeProps<P, OP, SP, {| dispatch: D |}>,
+    options?: ?Options<S, OP, SP, P>,
+  ): Connector<P, OP, P>;
+
+  // In this case DP is an object of functions which has been bound to dispatch
+  // by the given mapDispatchToProps function.
+  declare export function connect<-P, -OP, -SP: {||}, -DP, S, D>(
+    mapStateToProps: null | void,
+    mapDispatchToProps: MapDispatchToPropsFn<D, OP, DP>,
+    mergeProps: MergeProps<P, OP, {||}, DP>,
+    options?: ?Options<S, OP, {||}, P>,
+  ): Connector<P, OP, P>;
+
+  // In this case DP is an object of action creators not yet bound to dispatch,
+  // this difference is not important in the vanila redux,
+  // but in case of usage with redux-thunk, the return type may differ.
+  declare export function connect<-P, -OP, -SP: {||}, -DP, S, D>(
+    mapStateToProps: null | void,
+    mapDispatchToProps: DP,
+    mergeProps: MergeProps<P, OP, {||}, $ObjMap<DP, Bind<D>>>,
+    options?: ?Options<S, OP, {||}, P>,
+  ): Connector<P, OP, P>;
+
+  // In this case DP is an object of functions which has been bound to dispatch
+  // by the given mapDispatchToProps function.
+  declare export function connect<-P, -OP, -SP, -DP, S, D>(
+    mapStateToProps: MapStateToProps<S, OP, SP>,
+    mapDispatchToProps: MapDispatchToPropsFn<D, OP, DP>,
+    mergeProps: MergeProps<P, OP, SP, DP>,
+    options?: ?Options<S, OP, SP, P>,
+  ): Connector<P, OP, P>;
+
+  // In this case DP is an object of action creators not yet bound to dispatch,
+  // this difference is not important in the vanila redux,
+  // but in case of usage with redux-thunk, the return type may differ.
+  declare export function connect<-P, -OP, -SP, -DP, S, D>(
+    mapStateToProps: MapStateToProps<S, OP, SP>,
+    mapDispatchToProps: DP,
+    mergeProps: MergeProps<P, OP, SP, $ObjMap<DP, Bind<D>>>,
+    options?: ?Options<S, OP, SP, P>,
+  ): Connector<P, OP, P>;
 
-  declare export function connect<
-    Com: ComponentType<*>,
-    A,
+  // ------------------------------------------------------------
+  // Typings for Provider
+  // ------------------------------------------------------------
+
+  declare export class Provider<Store> extends React$Component<{
+    store: Store,
+    children?: React$Node,
+  }> {}
+
+  declare export function createProvider(
+    storeKey?: string,
+    subKey?: string,
+  ): Class<Provider<*>>;
+
+  // ------------------------------------------------------------
+  // Typings for connectAdvanced()
+  // ------------------------------------------------------------
+
+  declare type ConnectAdvancedOptions = {
+    getDisplayName?: (name: string) => string,
+    methodName?: string,
+    renderCountProp?: string,
+    shouldHandleStateChanges?: boolean,
+    storeKey?: string,
+    withRef?: boolean,
+  };
+
+  declare type SelectorFactoryOptions<Com> = {
+    getDisplayName: (name: string) => string,
+    methodName: string,
+    renderCountProp: ?string,
+    shouldHandleStateChanges: boolean,
+    storeKey: string,
+    withRef: boolean,
+    displayName: string,
+    wrappedComponentName: string,
+    WrappedComponent: Com,
+  };
+
+  declare type MapStateToPropsEx<S: Object, SP: Object, RSP: Object> = (
+    state: S,
+    props: SP,
+  ) => RSP;
+
+  declare type SelectorFactory<
+    Com: React$ComponentType<*>,
+    Dispatch,
     S: Object,
-    DP: Object,
-    SP: Object,
-    RSP: Object,
-    RDP: Object,
-    MDP: Object,
-    MP: Object,
-    RMP: Object,
-    CP: $Diff<ElementConfig<Com>, RMP>
-    >(
-    mapStateToProps: MapStateToProps<S, SP, RSP>,
-    mapDispatchToProps: MDP,
-    mergeProps: MergeProps<RSP, RDP, MP, RMP>
-  ): (component: Com) => ComponentType<CP & SP & DP & MP>;
+    OP: Object,
+    EFO: Object,
+    CP: Object,
+  > = (
+    dispatch: Dispatch,
+    factoryOptions: SelectorFactoryOptions<Com> & EFO,
+  ) => MapStateToPropsEx<S, OP, CP>;
 
-  declare export function connect<Com: ComponentType<*>,
-    A,
+  declare export function connectAdvanced<
+    Com: React$ComponentType<*>,
+    D,
     S: Object,
-    DP: Object,
-    SP: Object,
-    RSP: Object,
-    RDP: Object,
-    MP: Object,
-    RMP: Object
-    >(
-    mapStateToProps: ?MapStateToProps<S, SP, RSP>,
-    mapDispatchToProps: ?MapDispatchToProps<A, DP, RDP>,
-    mergeProps: ?MergeProps<RSP, RDP, MP, RMP>,
-    options: ConnectOptions<S, SP & DP & MP, RSP, RMP>
-  ): (component: Com) => ComponentType<$Diff<ElementConfig<Com>, RMP> & SP & DP & MP>;
-
-  declare export function connect<Com: ComponentType<*>,
-    A,
-    S: Object,
-    DP: Object,
-    SP: Object,
-    RSP: Object,
-    RDP: Object,
-    MDP: Object,
-    MP: Object,
-    RMP: Object
-    >(
-    mapStateToProps: ?MapStateToProps<S, SP, RSP>,
-    mapDispatchToProps: ?MapDispatchToProps<A, DP, RDP>,
-    mergeProps: MDP,
-    options: ConnectOptions<S, SP & DP & MP, RSP, RMP>
-  ): (component: Com) => ComponentType<$Diff<ElementConfig<Com>, RMP> & SP & DP & MP>;
+    OP: Object,
+    CP: Object,
+    EFO: Object,
+    ST: { [_: $Keys<Com>]: any },
+  >(
+    selectorFactory: SelectorFactory<Com, D, S, OP, EFO, CP>,
+    connectAdvancedOptions: ?(ConnectAdvancedOptions & EFO),
+  ): (component: Com) => React$ComponentType<OP> & $Shape<ST>;
 
   declare export default {
     Provider: typeof Provider,
     createProvider: typeof createProvider,
     connect: typeof connect,
+    connectAdvanced: typeof connectAdvanced,
   };
 }
--- a/devtools/client/debugger/src/components/App.js
+++ b/devtools/client/debugger/src/components/App.js
@@ -54,16 +54,17 @@ import PrimaryPanes from "./PrimaryPanes
 import Editor from "./Editor";
 import SecondaryPanes from "./SecondaryPanes";
 import WelcomeBox from "./WelcomeBox";
 import EditorTabs from "./Editor/Tabs";
 import EditorFooter from "./Editor/Footer";
 import QuickOpenModal from "./QuickOpenModal";
 import WhyPaused from "./SecondaryPanes/WhyPaused";
 
+type OwnProps = {||};
 type Props = {
   selectedSource: ?Source,
   orientation: OrientationType,
   startPanelCollapsed: boolean,
   endPanelCollapsed: boolean,
   activeSearch: ?ActiveSearchType,
   quickOpenEnabled: boolean,
   canRewind: boolean,
@@ -346,17 +347,17 @@ const mapStateToProps = state => ({
   selectedSource: getSelectedSource(state),
   startPanelCollapsed: getPaneCollapse(state, "start"),
   endPanelCollapsed: getPaneCollapse(state, "end"),
   activeSearch: getActiveSearch(state),
   quickOpenEnabled: getQuickOpenEnabled(state),
   orientation: getOrientation(state),
 });
 
-export default connect(
+export default connect<Props, OwnProps, _, _, _, _>(
   mapStateToProps,
   {
     setActiveSearch: actions.setActiveSearch,
     closeActiveSearch: actions.closeActiveSearch,
     closeProjectSearch: actions.closeProjectSearch,
     openQuickOpen: actions.openQuickOpen,
     closeQuickOpen: actions.closeQuickOpen,
     setOrientation: actions.setOrientation,
--- a/devtools/client/debugger/src/components/Editor/Breakpoints.js
+++ b/devtools/client/debugger/src/components/Editor/Breakpoints.js
@@ -15,16 +15,20 @@ import { editorItemActions } from "./men
 import type { BreakpointItemActions } from "./menus/breakpoints";
 import type { EditorItemActions } from "./menus/editor";
 import type {
   Breakpoint as BreakpointType,
   Source,
   ThreadContext,
 } from "../../types";
 
+type OwnProps = {|
+  cx: ThreadContext,
+  editor: Object,
+|};
 type Props = {
   cx: ThreadContext,
   selectedSource: ?Source,
   breakpoints: BreakpointType[],
   editor: Object,
   breakpointActions: BreakpointItemActions,
   editorActions: EditorItemActions,
 };
@@ -59,17 +63,17 @@ class Breakpoints extends Component<Prop
             />
           );
         })}
       </div>
     );
   }
 }
 
-export default connect(
+export default connect<Props, OwnProps, _, _, _, _>(
   state => ({
     // Retrieves only the first breakpoint per line so that the
     // breakpoint marker represents only the first breakpoint
     breakpoints: getFirstVisibleBreakpoints(state),
     selectedSource: getSelectedSource(state),
   }),
   dispatch => ({
     breakpointActions: breakpointItemActions(dispatch),
--- a/devtools/client/debugger/src/components/Editor/ColumnBreakpoints.js
+++ b/devtools/client/debugger/src/components/Editor/ColumnBreakpoints.js
@@ -17,16 +17,19 @@ import { connect } from "../../utils/con
 import { makeBreakpointId } from "../../utils/breakpoint";
 import { breakpointItemActions } from "./menus/breakpoints";
 import type { BreakpointItemActions } from "./menus/breakpoints";
 
 import type { Source, Context } from "../../types";
 // eslint-disable-next-line max-len
 import type { ColumnBreakpoint as ColumnBreakpointType } from "../../selectors/visibleColumnBreakpoints";
 
+type OwnProps = {|
+  editor: Object,
+|};
 type Props = {
   cx: Context,
   editor: Object,
   selectedSource: ?Source,
   columnBreakpoints: ColumnBreakpointType[],
   breakpointActions: BreakpointItemActions,
 };
 
@@ -68,12 +71,12 @@ class ColumnBreakpoints extends Componen
 }
 
 const mapStateToProps = state => ({
   cx: getContext(state),
   selectedSource: getSelectedSource(state),
   columnBreakpoints: visibleColumnBreakpoints(state),
 });
 
-export default connect(
+export default connect<Props, OwnProps, _, _, _, _>(
   mapStateToProps,
   dispatch => ({ breakpointActions: breakpointItemActions(dispatch) })
 )(ColumnBreakpoints);
--- a/devtools/client/debugger/src/components/Editor/ConditionalPanel.js
+++ b/devtools/client/debugger/src/components/Editor/ConditionalPanel.js
@@ -21,16 +21,19 @@ import {
 import type { SourceLocation, Context, Breakpoint } from "../../types";
 
 function addNewLine(doc: Object) {
   const cursor = doc.getCursor();
   const pos = { line: cursor.line, ch: cursor.ch };
   doc.replaceRange("\n", pos);
 }
 
+type OwnProps = {|
+  editor: Object,
+|};
 type Props = {
   cx: Context,
   breakpoint: ?Object,
   setBreakpointOptions: typeof actions.setBreakpointOptions,
   location: SourceLocation,
   log: boolean,
   editor: Object,
   openConditionalPanel: typeof actions.openConditionalPanel,
@@ -255,12 +258,12 @@ const {
 } = actions;
 
 const mapDispatchToProps = {
   setBreakpointOptions,
   openConditionalPanel,
   closeConditionalPanel,
 };
 
-export default connect(
+export default connect<Props, OwnProps, _, _, _, _>(
   mapStateToProps,
   mapDispatchToProps
 )(ConditionalPanel);
--- a/devtools/client/debugger/src/components/Editor/DebugLine.js
+++ b/devtools/client/debugger/src/components/Editor/DebugLine.js
@@ -20,16 +20,17 @@ import {
   getPauseReason,
   getSourceWithContent,
   getCurrentThread,
   getPausePreviewLocation,
 } from "../../selectors";
 
 import type { SourceLocation, Why, SourceWithContent } from "../../types";
 
+type OwnProps = {||};
 type Props = {
   location: ?SourceLocation,
   why: ?Why,
   source: ?SourceWithContent,
 };
 
 type TextClasses = {
   markTextClass: string,
@@ -140,9 +141,9 @@ const mapStateToProps = state => {
   return {
     frame,
     location,
     source: location && getSourceWithContent(state, location.sourceId),
     why: getPauseReason(state, getCurrentThread(state)),
   };
 };
 
-export default connect(mapStateToProps)(DebugLine);
+export default connect<Props, OwnProps, _, _, _, _>(mapStateToProps)(DebugLine);
--- a/devtools/client/debugger/src/components/Editor/EditorMenu.js
+++ b/devtools/client/debugger/src/components/Editor/EditorMenu.js
@@ -20,16 +20,22 @@ import {
 } from "../../selectors";
 
 import { editorMenuItems, editorItemActions } from "./menus/editor";
 
 import type { SourceWithContent, ThreadContext } from "../../types";
 import type { EditorItemActions } from "./menus/editor";
 import type SourceEditor from "../../utils/editor/source-editor";
 
+type OwnProps = {|
+  selectedSource: SourceWithContent,
+  contextMenu: ?MouseEvent,
+  clearContextMenu: () => void,
+  editor: SourceEditor,
+|};
 type Props = {
   cx: ThreadContext,
   contextMenu: ?MouseEvent,
   editorActions: EditorItemActions,
   clearContextMenu: () => void,
   editor: SourceEditor,
   hasMappedLocation: boolean,
   isPaused: boolean,
@@ -91,12 +97,12 @@ const mapStateToProps = (state, props) =
       isPretty(props.selectedSource)) &&
     !getPrettySource(state, props.selectedSource.id),
 });
 
 const mapDispatchToProps = dispatch => ({
   editorActions: editorItemActions(dispatch),
 });
 
-export default connect(
+export default connect<Props, OwnProps, _, _, _, _>(
   mapStateToProps,
   mapDispatchToProps
 )(EditorMenu);
--- a/devtools/client/debugger/src/components/Editor/EmptyLines.js
+++ b/devtools/client/debugger/src/components/Editor/EmptyLines.js
@@ -5,16 +5,19 @@
 // @flow
 
 import { connect } from "../../utils/connect";
 import { Component } from "react";
 import { getSelectedSource, getSelectedBreakableLines } from "../../selectors";
 import type { Source } from "../../types";
 import { fromEditorLine } from "../../utils/editor";
 
+type OwnProps = {|
+  editor: Object,
+|};
 type Props = {
   selectedSource: Source,
   editor: Object,
   breakableLines: Set<number>,
 };
 
 class EmptyLines extends Component<Props> {
   componentDidMount() {
@@ -67,9 +70,11 @@ const mapStateToProps = state => {
   const breakableLines = getSelectedBreakableLines(state);
 
   return {
     selectedSource,
     breakableLines,
   };
 };
 
-export default connect(mapStateToProps)(EmptyLines);
+export default connect<Props, OwnProps, _, _, _, _>(mapStateToProps)(
+  EmptyLines
+);
--- a/devtools/client/debugger/src/components/Editor/Footer.js
+++ b/devtools/client/debugger/src/components/Editor/Footer.js
@@ -32,16 +32,19 @@ import type { SourceWithContent, Source,
 
 import "./Footer.css";
 
 type CursorPosition = {
   line: number,
   column: number,
 };
 
+type OwnProps = {|
+  horizontal: boolean,
+|};
 type Props = {
   cx: Context,
   selectedSource: ?SourceWithContent,
   mappedSource: ?Source,
   endPanelCollapsed: boolean,
   horizontal: boolean,
   canPrettyPrint: boolean,
   togglePrettyPrint: typeof actions.togglePrettyPrint,
@@ -279,17 +282,17 @@ const mapStateToProps = state => {
     ),
     endPanelCollapsed: getPaneCollapse(state, "end"),
     canPrettyPrint: selectedSource
       ? canPrettyPrintSource(state, selectedSource.id)
       : false,
   };
 };
 
-export default connect(
+export default connect<Props, OwnProps, _, _, _, _>(
   mapStateToProps,
   {
     togglePrettyPrint: actions.togglePrettyPrint,
     toggleBlackBox: actions.toggleBlackBox,
     jumpToMappedLocation: actions.jumpToMappedLocation,
     togglePaneCollapse: actions.togglePaneCollapse,
   }
 )(SourceFooter);
--- a/devtools/client/debugger/src/components/Editor/HighlightLine.js
+++ b/devtools/client/debugger/src/components/Editor/HighlightLine.js
@@ -22,16 +22,17 @@ import type {
   SourceDocuments,
 } from "../../types";
 import type { Command } from "../../reducers/types";
 
 type HighlightFrame = {
   location: SourceLocation,
 };
 
+type OwnProps = {||};
 type Props = {
   pauseCommand: Command,
   selectedFrame: ?HighlightFrame,
   selectedLocation: SourceLocation,
   selectedSource: ?SourceWithContent,
 };
 
 function isDebugLine(
@@ -177,17 +178,17 @@ export class HighlightLine extends Compo
     doc.removeLineClass(editorLine, "line", "highlight-line");
   }
 
   render() {
     return null;
   }
 }
 
-export default connect(state => {
+export default connect<Props, OwnProps, _, _, _, _>(state => {
   const selectedLocation = getSelectedLocation(state);
 
   if (!selectedLocation) {
     throw new Error("must have selected location");
   }
   return {
     pauseCommand: getPauseCommand(state, getCurrentThread(state)),
     selectedFrame: getVisibleSelectedFrame(state),
--- a/devtools/client/debugger/src/components/Editor/HighlightLines.js
+++ b/devtools/client/debugger/src/components/Editor/HighlightLines.js
@@ -3,16 +3,19 @@
  * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
 
 // @flow
 import { Component } from "react";
 import { range, isEmpty } from "lodash";
 import { connect } from "../../utils/connect";
 import { getHighlightedLineRange } from "../../selectors";
 
+type OwnProps = {|
+  editor: Object,
+|};
 type Props = {
   highlightedLineRange: Object,
   editor: Object,
 };
 
 class HighlightLines extends Component<Props> {
   highlightLineRange: Function;
 
@@ -69,11 +72,11 @@ class HighlightLines extends Component<P
     });
   };
 
   render() {
     return null;
   }
 }
 
-export default connect(state => ({
+export default connect<Props, OwnProps, _, _, _, _>(state => ({
   highlightedLineRange: getHighlightedLineRange(state),
 }))(HighlightLines);
--- a/devtools/client/debugger/src/components/Editor/InlinePreviewRow.js
+++ b/devtools/client/debugger/src/components/Editor/InlinePreviewRow.js
@@ -8,16 +8,21 @@ import ReactDOM from "react-dom";
 
 import actions from "../../actions";
 import assert from "../../utils/assert";
 import { connect } from "../../utils/connect";
 import InlinePreview from "./InlinePreview";
 
 import type { Preview } from "../../types";
 
+type OwnProps = {|
+  editor: Object,
+  line: number,
+  previews: Array<Preview>,
+|};
 type Props = {
   editor: Object,
   line: number,
   previews: Array<Preview>,
   openElementInInspector: typeof actions.openElementInInspectorCommand,
   highlightDomElement: typeof actions.highlightDomElement,
   unHighlightDomElement: typeof actions.unHighlightDomElement,
 };
@@ -103,16 +108,16 @@ class InlinePreviewRow extends PureCompo
     );
   }
 
   render() {
     return null;
   }
 }
 
-export default connect(
+export default connect<Props, OwnProps, _, _, _, _>(
   () => ({}),
   {
     openElementInInspector: actions.openElementInInspectorCommand,
     highlightDomElement: actions.highlightDomElement,
     unHighlightDomElement: actions.unHighlightDomElement,
   }
 )(InlinePreviewRow);
--- a/devtools/client/debugger/src/components/Editor/InlinePreviews.js
+++ b/devtools/client/debugger/src/components/Editor/InlinePreviews.js
@@ -9,16 +9,20 @@ import { connect } from "../../utils/con
 import {
   getSelectedFrame,
   getCurrentThread,
   getInlinePreviews,
 } from "../../selectors";
 
 import type { Frame } from "../../types";
 
+type OwnProps = {|
+  editor: Object,
+  selectedSource: Object,
+|};
 type Props = {
   editor: Object,
   +selectedFrame: ?Frame,
   selectedSource: Object,
   +previews: ?Object,
 };
 
 function hasPreviews(previews: ?Object) {
@@ -80,9 +84,11 @@ const mapStateToProps = (
   }
 
   return {
     selectedFrame,
     previews: getInlinePreviews(state, thread, selectedFrame.id),
   };
 };
 
-export default connect(mapStateToProps)(InlinePreviews);
+export default connect<Props, OwnProps, _, _, _, _>(mapStateToProps)(
+  InlinePreviews
+);
--- a/devtools/client/debugger/src/components/Editor/Preview/Popup.js
+++ b/devtools/client/debugger/src/components/Editor/Preview/Popup.js
@@ -27,16 +27,21 @@ import PreviewFunction from "../../share
 
 import { createObjectClient } from "../../../client/firefox";
 
 import "./Popup.css";
 
 import type { ThreadContext } from "../../../types";
 import type { Preview } from "../../../reducers/types";
 
+type OwnProps = {|
+  editor: any,
+  preview: Preview,
+  editorRef: ?HTMLDivElement,
+|};
 type Props = {
   cx: ThreadContext,
   preview: Preview,
   editor: any,
   editorRef: ?HTMLDivElement,
   addExpression: typeof actions.addExpression,
   selectSourceURL: typeof actions.selectSourceURL,
   openLink: typeof actions.openLink,
@@ -313,12 +318,12 @@ const mapDispatchToProps = {
   selectSourceURL,
   openLink,
   openElementInInspector: openElementInInspectorCommand,
   highlightDomElement,
   unHighlightDomElement,
   clearPreview,
 };
 
-export default connect(
+export default connect<Props, OwnProps, _, _, _, _>(
   mapStateToProps,
   mapDispatchToProps
 )(Popup);
--- a/devtools/client/debugger/src/components/Editor/Preview/index.js
+++ b/devtools/client/debugger/src/components/Editor/Preview/index.js
@@ -11,16 +11,20 @@ import Popup from "./Popup";
 
 import { getPreview, getThreadContext } from "../../../selectors";
 import actions from "../../../actions";
 
 import type { ThreadContext } from "../../../types";
 
 import type { Preview as PreviewType } from "../../../reducers/types";
 
+type OwnProps = {|
+  editor: any,
+  editorRef: ?HTMLDivElement,
+|};
 type Props = {
   cx: ThreadContext,
   editor: any,
   editorRef: ?HTMLDivElement,
   preview: ?PreviewType,
   clearPreview: typeof actions.clearPreview,
   addExpression: typeof actions.addExpression,
   updatePreview: typeof actions.updatePreview,
@@ -104,16 +108,16 @@ class Preview extends PureComponent<Prop
   }
 }
 
 const mapStateToProps = state => ({
   cx: getThreadContext(state),
   preview: getPreview(state),
 });
 
-export default connect(
+export default connect<Props, OwnProps, _, _, _, _>(
   mapStateToProps,
   {
     clearPreview: actions.clearPreview,
     addExpression: actions.addExpression,
     updatePreview: actions.updatePreview,
   }
 )(Preview);
--- a/devtools/client/debugger/src/components/Editor/SearchBar.js
+++ b/devtools/client/debugger/src/components/Editor/SearchBar.js
@@ -50,16 +50,21 @@ function getShortcuts() {
 type State = {
   query: string,
   selectedResultIndex: number,
   count: number,
   index: number,
   inputFocused: boolean,
 };
 
+type OwnProps = {|
+  editor: SourceEditor,
+  showClose?: boolean,
+  size?: string,
+|};
 type Props = {
   cx: Context,
   editor: SourceEditor,
   selectedSource: ?Source,
   selectedContentLoaded: boolean,
   searchOn: boolean,
   searchResults: SearchResults,
   modifiers: Modifiers,
@@ -359,33 +364,33 @@ class SearchBar extends Component<Props,
     );
   }
 }
 
 SearchBar.contextTypes = {
   shortcuts: PropTypes.object,
 };
 
-const mapStateToProps = state => {
+const mapStateToProps = (state, p: OwnProps) => {
   const selectedSource = getSelectedSource(state);
 
   return {
     cx: getContext(state),
     searchOn: getActiveSearch(state) === "file",
     selectedSource,
     selectedContentLoaded: selectedSource
       ? !!getSourceContent(state, selectedSource.id)
       : false,
     query: getFileSearchQuery(state),
     modifiers: getFileSearchModifiers(state),
     searchResults: getFileSearchResults(state),
   };
 };
 
-export default connect(
+export default connect<Props, OwnProps, _, _, _, _>(
   mapStateToProps,
   {
     toggleFileSearchModifier: actions.toggleFileSearchModifier,
     setFileSearchQuery: actions.setFileSearchQuery,
     setActiveSearch: actions.setActiveSearch,
     closeFileSearch: actions.closeFileSearch,
     doSearch: actions.doSearch,
     traverseResults: actions.traverseResults,
--- a/devtools/client/debugger/src/components/Editor/Tab.js
+++ b/devtools/client/debugger/src/components/Editor/Tab.js
@@ -34,16 +34,19 @@ import {
   getSourcesForTabs,
   getHasSiblingOfSameName,
   getContext,
 } from "../../selectors";
 import type { ActiveSearchType } from "../../selectors";
 
 import classnames from "classnames";
 
+type OwnProps = {|
+  source: Source,
+|};
 type Props = {
   cx: Context,
   tabSources: Source[],
   selectedSource: ?Source,
   source: Source,
   activeSearch: ?ActiveSearchType,
   hasSiblingOfSameName: boolean,
   selectSource: typeof actions.selectSource,
@@ -243,17 +246,17 @@ const mapStateToProps = (state, { source
     cx: getContext(state),
     tabSources: getSourcesForTabs(state),
     selectedSource,
     activeSearch: getActiveSearch(state),
     hasSiblingOfSameName: getHasSiblingOfSameName(state, source),
   };
 };
 
-export default connect(
+export default connect<Props, OwnProps, _, _, _, _>(
   mapStateToProps,
   {
     selectSource: actions.selectSource,
     copyToClipboard: actions.copyToClipboard,
     closeTab: actions.closeTab,
     closeTabs: actions.closeTabs,
     togglePrettyPrint: actions.togglePrettyPrint,
     showSource: actions.showSource,
--- a/devtools/client/debugger/src/components/Editor/Tabs.js
+++ b/devtools/client/debugger/src/components/Editor/Tabs.js
@@ -28,16 +28,21 @@ import { PaneToggleButton } from "../sha
 import Dropdown from "../shared/Dropdown";
 import AccessibleImage from "../shared/AccessibleImage";
 import CommandBar from "../SecondaryPanes/CommandBar";
 
 import type { Source, Context } from "../../types";
 
 type SourcesList = Source[];
 
+type OwnProps = {|
+  horizontal: boolean,
+  startPanelCollapsed: boolean,
+  endPanelCollapsed: boolean,
+|};
 type Props = {
   cx: Context,
   tabSources: SourcesList,
   selectedSource: ?Source,
   horizontal: boolean,
   startPanelCollapsed: boolean,
   endPanelCollapsed: boolean,
   moveTab: typeof actions.moveTab,
@@ -229,17 +234,17 @@ class Tabs extends PureComponent<Props, 
 
 const mapStateToProps = state => ({
   cx: getContext(state),
   selectedSource: getSelectedSource(state),
   tabSources: getSourcesForTabs(state),
   isPaused: getIsPaused(state, getCurrentThread(state)),
 });
 
-export default connect(
+export default connect<Props, OwnProps, _, _, _, _>(
   mapStateToProps,
   {
     selectSource: actions.selectSource,
     moveTab: actions.moveTab,
     closeTab: actions.closeTab,
     togglePaneCollapse: actions.togglePaneCollapse,
     showSource: actions.showSource,
   }
--- a/devtools/client/debugger/src/components/Editor/index.js
+++ b/devtools/client/debugger/src/components/Editor/index.js
@@ -90,16 +90,20 @@ import type {
   SourceWithContent,
   ThreadContext,
 } from "../../types";
 
 const cssVars = {
   searchbarHeight: "var(--editor-searchbar-height)",
 };
 
+type OwnProps = {|
+  startPanelSize: number,
+  endPanelSize: number,
+|};
 export type Props = {
   cx: ThreadContext,
   selectedLocation: ?SourceLocation,
   selectedSource: ?SourceWithContent,
   searchOn: boolean,
   startPanelSize: number,
   endPanelSize: number,
   conditionalPanelLocation: SourceLocation,
@@ -707,12 +711,12 @@ const mapDispatchToProps = dispatch => (
       toggleBlackBox: actions.toggleBlackBox,
     },
     dispatch
   ),
   breakpointActions: breakpointItemActions(dispatch),
   editorActions: editorItemActions(dispatch),
 });
 
-export default connect(
+export default connect<Props, OwnProps, _, _, _, _>(
   mapStateToProps,
   mapDispatchToProps
 )(Editor);
--- a/devtools/client/debugger/src/components/PrimaryPanes/Outline.js
+++ b/devtools/client/debugger/src/components/PrimaryPanes/Outline.js
@@ -30,16 +30,20 @@ import { uniq, sortBy } from "lodash";
 import type { Symbols } from "../../reducers/ast";
 
 import type {
   SymbolDeclaration,
   FunctionDeclaration,
 } from "../../workers/parser";
 import type { Source, Context, SourceLocation } from "../../types";
 
+type OwnProps = {|
+  alphabetizeOutline: boolean,
+  onAlphabetizeClick: Function,
+|};
 type Props = {
   cx: Context,
   symbols: ?Symbols,
   selectedSource: ?Source,
   alphabetizeOutline: boolean,
   onAlphabetizeClick: Function,
   cursorPosition: ?SourceLocation,
   getFunctionText: Function,
@@ -360,15 +364,15 @@ const mapStateToProps = state => {
         return findFunctionText(line, selectedSource, symbols);
       }
 
       return null;
     },
   };
 };
 
-export default connect(
+export default connect<Props, OwnProps, _, _, _, _>(
   mapStateToProps,
   {
     selectLocation: actions.selectLocation,
     flashLineRange: actions.flashLineRange,
   }
 )(Outline);
--- a/devtools/client/debugger/src/components/PrimaryPanes/SourcesTree.js
+++ b/devtools/client/debugger/src/components/PrimaryPanes/SourcesTree.js
@@ -50,16 +50,19 @@ import type {
 } from "../../utils/sources-tree/types";
 import type { Source, Context, Thread } from "../../types";
 import type {
   SourcesMapByThread,
   State as AppState,
 } from "../../reducers/types";
 import type { Item } from "../shared/ManagedTree";
 
+type OwnProps = {|
+  threads: Thread[],
+|};
 type Props = {
   cx: Context,
   threads: Thread[],
   sources: SourcesMapByThread,
   sourceCount: number,
   shownSource: ?Source,
   selectedSource: ?Source,
   debuggeeUrl: string,
@@ -359,16 +362,16 @@ const mapStateToProps = (state, props) =
     expanded: getExpandedState(state),
     focused: getFocusedSourceItem(state),
     projectRoot: getProjectDirectoryRoot(state),
     sources: displayedSources,
     sourceCount: Object.values(displayedSources).length,
   };
 };
 
-export default connect(
+export default connect<Props, OwnProps, _, _, _, _>(
   mapStateToProps,
   {
     selectSource: actions.selectSource,
     setExpandedState: actions.setExpandedState,
     focusItem: actions.focusItem,
   }
 )(SourcesTree);
--- a/devtools/client/debugger/src/components/PrimaryPanes/SourcesTreeItem.js
+++ b/devtools/client/debugger/src/components/PrimaryPanes/SourcesTreeItem.js
@@ -34,16 +34,30 @@ import { isDirectory, getPathWithoutThre
 import { copyToTheClipboard } from "../../utils/clipboard";
 import { features } from "../../utils/prefs";
 import { downloadFile } from "../../utils/utils";
 import { isFulfilled } from "../../utils/async-value";
 
 import type { TreeNode } from "../../utils/sources-tree/types";
 import type { Source, Context, Thread, SourceContent } from "../../types";
 
+type OwnProps = {|
+  item: TreeNode,
+  threads: Thread[],
+  depth: number,
+  focused: boolean,
+  autoExpand: ?boolean,
+  expanded: boolean,
+  focusItem: TreeNode => void,
+  selectItem: TreeNode => void,
+  source: ?Source,
+  debuggeeUrl: string,
+  projectRoot: string,
+  setExpanded: (TreeNode, boolean, boolean) => void,
+|};
 type Props = {
   source: ?Source,
   item: TreeNode,
   autoExpand: ?boolean,
   cx: Context,
   debuggeeUrl: string,
   projectRoot: string,
   extensionName: string | null,
@@ -363,35 +377,33 @@ function getSourceContentValue(state, so
   const content = getSourceContent(state, source.id);
   return content && isFulfilled(content) ? content.value : null;
 }
 
 function isExtensionDirectory(depth, extensionName) {
   return extensionName && depth === 1;
 }
 
-const mapStateToProps = (state, props) => {
+const mapStateToProps = (state, props: OwnProps) => {
   const { source, item } = props;
   return {
     cx: getContext(state),
     mainThread: getMainThread(state),
     hasMatchingGeneratedSource: getHasMatchingGeneratedSource(state, source),
     hasSiblingOfSameName: getHasSiblingOfSameName(state, source),
     hasPrettySource: source ? checkHasPrettySource(state, source.id) : false,
-    sourceContent: source
-      ? (getSourceContentValue(state, source): ?SourceContent)
-      : null,
+    sourceContent: source ? getSourceContentValue(state, source) : null,
     extensionName:
       (isUrlExtension(item.name) &&
         getExtensionNameBySourceUrl(state, item.name)) ||
       null,
   };
 };
 
-export default connect(
+export default connect<Props, OwnProps, _, _, _, _>(
   mapStateToProps,
   {
     setProjectDirectoryRoot: actions.setProjectDirectoryRoot,
     clearProjectDirectoryRoot: actions.clearProjectDirectoryRoot,
     toggleBlackBox: actions.toggleBlackBox,
     loadSourceText: actions.loadSourceText,
   }
 )(SourceTreeItem);
--- a/devtools/client/debugger/src/components/PrimaryPanes/index.js
+++ b/devtools/client/debugger/src/components/PrimaryPanes/index.js
@@ -30,16 +30,19 @@ import type { SelectedPrimaryPaneTabType
 import type { Thread, Context } from "../../types";
 
 import "./Sources.css";
 
 type State = {
   alphabetizeOutline: boolean,
 };
 
+type OwnProps = {|
+  horizontal: boolean,
+|};
 type Props = {
   cx: Context,
   selectedTab: SelectedPrimaryPaneTabType,
   sources: SourcesMapByThread,
   horizontal: boolean,
   projectRoot: string,
   sourceSearchOn: boolean,
   setPrimaryPaneTab: typeof actions.setPrimaryPaneTab,
@@ -167,17 +170,17 @@ const mapStateToProps = state => ({
   cx: getContext(state),
   selectedTab: getSelectedPrimaryPaneTab(state),
   sources: getDisplayedSources(state),
   sourceSearchOn: getActiveSearch(state) === "source",
   threads: getAllThreads(state),
   projectRoot: getProjectDirectoryRoot(state),
 });
 
-const connector = connect(
+const connector = connect<Props, OwnProps, _, _, _, _>(
   mapStateToProps,
   {
     setPrimaryPaneTab: actions.setPrimaryPaneTab,
     setActiveSearch: actions.setActiveSearch,
     closeActiveSearch: actions.closeActiveSearch,
     clearProjectDirectoryRoot: actions.clearProjectDirectoryRoot,
   }
 );
--- a/devtools/client/debugger/src/components/ProjectSearch.js
+++ b/devtools/client/debugger/src/components/ProjectSearch.js
@@ -56,16 +56,17 @@ type Result = {
 type Item = Result | Match;
 
 type State = {
   inputValue: string,
   inputFocused: boolean,
   focusedItem: ?Item,
 };
 
+type OwnProps = {||};
 type Props = {
   cx: Context,
   query: string,
   results: List<Result>,
   status: StatusType,
   activeSearch: ?ActiveSearchType,
   closeProjectSearch: typeof actions.closeProjectSearch,
   searchSources: typeof actions.searchSources,
@@ -340,17 +341,17 @@ ProjectSearch.contextTypes = {
 const mapStateToProps = state => ({
   cx: getContext(state),
   activeSearch: getActiveSearch(state),
   results: getTextSearchResults(state),
   query: getTextSearchQuery(state),
   status: getTextSearchStatus(state),
 });
 
-export default connect(
+export default connect<Props, OwnProps, _, _, _, _>(
   mapStateToProps,
   {
     closeProjectSearch: actions.closeProjectSearch,
     searchSources: actions.searchSources,
     clearSearch: actions.clearSearch,
     selectSpecificLocation: actions.selectSpecificLocation,
     setActiveSearch: actions.setActiveSearch,
     doSearchForHighlight: actions.doSearchForHighlight,
--- a/devtools/client/debugger/src/components/QuickOpenModal.js
+++ b/devtools/client/debugger/src/components/QuickOpenModal.js
@@ -40,16 +40,20 @@ import type {
 } from "../utils/quick-open";
 
 import type { Source, Context } from "../types";
 import type { QuickOpenType } from "../reducers/quick-open";
 import type { Tab } from "../reducers/tabs";
 
 import "./QuickOpenModal.css";
 
+type OwnProps = {|
+  shortcutsModalEnabled: boolean,
+  toggleShortcutsModal: () => void,
+|};
 type Props = {
   cx: Context,
   enabled: boolean,
   displayedSources: Source[],
   selectedSource: ?Source,
   selectedContentLoaded?: boolean,
   query: string,
   searchType: QuickOpenType,
@@ -466,17 +470,17 @@ function mapStateToProps(state) {
     symbolsLoading: isSymbolsLoading(state, selectedSource),
     query: getQuickOpenQuery(state),
     searchType: getQuickOpenType(state),
     tabs,
   };
 }
 
 /* istanbul ignore next: ignoring testing of redux connection stuff */
-export default connect(
+export default connect<Props, OwnProps, _, _, _, _>(
   mapStateToProps,
   {
     selectSpecificLocation: actions.selectSpecificLocation,
     setQuickOpenQuery: actions.setQuickOpenQuery,
     highlightLineRange: actions.highlightLineRange,
     closeQuickOpen: actions.closeQuickOpen,
   }
 )(QuickOpenModal);
--- a/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/Breakpoint.js
+++ b/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/Breakpoint.js
@@ -38,16 +38,22 @@ type FormattedFrame = Frame & {
 import {
   getBreakpointsList,
   getSelectedFrame,
   getSelectedSource,
   getCurrentThread,
   getContext,
 } from "../../../selectors";
 
+type OwnProps = {|
+  source: Source,
+  selectedSource: ?Source,
+  breakpoint: BreakpointType,
+  editor: SourceEditor,
+|};
 type Props = {
   cx: Context,
   breakpoint: BreakpointType,
   breakpoints: BreakpointType[],
   selectedSource: ?Source,
   source: Source,
   frame: FormattedFrame,
   editor: SourceEditor,
@@ -206,23 +212,23 @@ const getFormattedFrame = createSelector
 
     return {
       ...frame,
       selectedLocation: getSelectedLocation(frame, selectedSource),
     };
   }
 );
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state, p: OwnProps) => ({
   cx: getContext(state),
   breakpoints: getBreakpointsList(state),
   frame: getFormattedFrame(state, getCurrentThread(state)),
 });
 
-export default connect(
+export default connect<Props, OwnProps, _, _, _, _>(
   mapStateToProps,
   {
     enableBreakpoint: actions.enableBreakpoint,
     removeBreakpoint: actions.removeBreakpoint,
     removeBreakpoints: actions.removeBreakpoints,
     removeAllBreakpoints: actions.removeAllBreakpoints,
     disableBreakpoint: actions.disableBreakpoint,
     selectSpecificLocation: actions.selectSpecificLocation,
--- a/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/BreakpointHeading.js
+++ b/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/BreakpointHeading.js
@@ -18,16 +18,20 @@ import {
   getContext,
 } from "../../../selectors";
 
 import SourceIcon from "../../shared/SourceIcon";
 
 import type { Source, Breakpoint, Context } from "../../../types";
 import showContextMenu from "./BreakpointHeadingsContextMenu";
 
+type OwnProps = {|
+  sources: Source[],
+  source: Source,
+|};
 type Props = {
   cx: Context,
   sources: Source[],
   source: Source,
   hasSiblingOfSameName: boolean,
   breakpointsForSource: Breakpoint[],
   disableBreakpointsInSource: typeof actions.disableBreakpointsInSource,
   enableBreakpointsInSource: typeof actions.enableBreakpointsInSource,
@@ -73,17 +77,17 @@ class BreakpointHeading extends PureComp
 }
 
 const mapStateToProps = (state, { source }) => ({
   cx: getContext(state),
   hasSiblingOfSameName: getHasSiblingOfSameName(state, source),
   breakpointsForSource: getBreakpointsForSource(state, source.id),
 });
 
-export default connect(
+export default connect<Props, OwnProps, _, _, _, _>(
   mapStateToProps,
   {
     selectSource: actions.selectSource,
     enableBreakpointsInSource: actions.enableBreakpointsInSource,
     disableBreakpointsInSource: actions.disableBreakpointsInSource,
     removeBreakpointsInSource: actions.removeBreakpointsInSource,
   }
 )(BreakpointHeading);
--- a/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/index.js
+++ b/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/index.js
@@ -25,16 +25,21 @@ import {
 import { getSelectedSource, getBreakpointSources } from "../../../selectors";
 
 import type { Source } from "../../../types";
 import type { BreakpointSources } from "../../../selectors/breakpointSources";
 import type SourceEditor from "../../../utils/editor/source-editor";
 
 import "./Breakpoints.css";
 
+type OwnProps = {|
+  shouldPauseOnExceptions: boolean,
+  shouldPauseOnCaughtExceptions: boolean,
+  pauseOnExceptions: Function,
+|};
 type Props = {
   breakpointSources: BreakpointSources,
   selectedSource: ?Source,
   shouldPauseOnExceptions: boolean,
   shouldPauseOnCaughtExceptions: boolean,
   pauseOnExceptions: Function,
 };
 
@@ -144,14 +149,14 @@ class Breakpoints extends Component<Prop
   }
 }
 
 const mapStateToProps = state => ({
   breakpointSources: getBreakpointSources(state),
   selectedSource: getSelectedSource(state),
 });
 
-export default connect(
+export default connect<Props, OwnProps, _, _, _, _>(
   mapStateToProps,
   {
     pauseOnExceptions: actions.pauseOnExceptions,
   }
 )(Breakpoints);
--- a/devtools/client/debugger/src/components/SecondaryPanes/CommandBar.js
+++ b/devtools/client/debugger/src/components/SecondaryPanes/CommandBar.js
@@ -70,16 +70,19 @@ function formatKey(action) {
     const winKey =
       getKeyForOS("WINNT", `${action}Display`) || getKeyForOS("WINNT", action);
     // display both Windows type and Mac specific keys
     return formatKeyShortcut([key, winKey].join(" "));
   }
   return formatKeyShortcut(key);
 }
 
+type OwnProps = {|
+  horizontal: boolean,
+|};
 type Props = {
   cx: ThreadContext,
   isWaitingOnBreak: boolean,
   horizontal: boolean,
   canRewind: boolean,
   skipPausing: boolean,
   resume: typeof actions.resume,
   stepIn: typeof actions.stepIn,
@@ -310,17 +313,17 @@ CommandBar.contextTypes = {
 
 const mapStateToProps = state => ({
   cx: getThreadContext(state),
   isWaitingOnBreak: getIsWaitingOnBreak(state, getCurrentThread(state)),
   canRewind: getCanRewind(state),
   skipPausing: getSkipPausing(state),
 });
 
-export default connect(
+export default connect<Props, OwnProps, _, _, _, _>(
   mapStateToProps,
   {
     resume: actions.resume,
     stepIn: actions.stepIn,
     stepOut: actions.stepOut,
     stepOver: actions.stepOver,
     breakOnNext: actions.breakOnNext,
     rewind: actions.rewind,
--- a/devtools/client/debugger/src/components/SecondaryPanes/EventListeners.js
+++ b/devtools/client/debugger/src/components/SecondaryPanes/EventListeners.js
@@ -27,16 +27,17 @@ import type {
 
 import "./EventListeners.css";
 
 type State = {
   searchText: string,
   focused: boolean,
 };
 
+type OwnProps = {||};
 type Props = {
   categories: EventListenerCategoryList,
   expandedCategories: EventListenerExpandedList,
   activeEventListeners: EventListenerActiveList,
   addEventListeners: typeof actions.addEventListenerBreakpoints,
   removeEventListeners: typeof actions.removeEventListenerBreakpoints,
   addEventListenerExpanded: typeof actions.addEventListenerExpanded,
   removeEventListenerExpanded: typeof actions.removeEventListenerExpanded,
@@ -293,17 +294,17 @@ class EventListeners extends Component<P
 }
 
 const mapStateToProps = state => ({
   activeEventListeners: getActiveEventListeners(state),
   categories: getEventListenerBreakpointTypes(state),
   expandedCategories: getEventListenerExpanded(state),
 });
 
-export default connect(
+export default connect<Props, OwnProps, _, _, _, _>(
   mapStateToProps,
   {
     addEventListeners: actions.addEventListenerBreakpoints,
     removeEventListeners: actions.removeEventListenerBreakpoints,
     addEventListenerExpanded: actions.addEventListenerExpanded,
     removeEventListenerExpanded: actions.removeEventListenerExpanded,
   }
 )(EventListeners);
--- a/devtools/client/debugger/src/components/SecondaryPanes/Expressions.js
+++ b/devtools/client/debugger/src/components/SecondaryPanes/Expressions.js
@@ -33,16 +33,20 @@ const { ObjectInspector } = objectInspec
 
 type State = {
   editing: boolean,
   editIndex: number,
   inputValue: string,
   focused: boolean,
 };
 
+type OwnProps = {|
+  showInput: boolean,
+  onExpressionAdded: () => void,
+|};
 type Props = {
   cx: ThreadContext,
   expressions: List<Expression>,
   expressionError: boolean,
   showInput: boolean,
   autocompleteMatches: ?(string[]),
   onExpressionAdded: () => void,
   autocomplete: typeof actions.autocomplete,
@@ -388,17 +392,17 @@ class Expressions extends Component<Prop
 
 const mapStateToProps = state => ({
   cx: getThreadContext(state),
   autocompleteMatches: (getAutocompleteMatchset(state): ?(string[])),
   expressions: getExpressions(state),
   expressionError: getExpressionError(state),
 });
 
-export default connect(
+export default connect<Props, OwnProps, _, _, _, _>(
   mapStateToProps,
   {
     autocomplete: actions.autocomplete,
     clearAutocomplete: actions.clearAutocomplete,
     addExpression: actions.addExpression,
     clearExpressionError: actions.clearExpressionError,
     evaluateExpressions: actions.evaluateExpressions,
     updateExpression: actions.updateExpression,
--- a/devtools/client/debugger/src/components/SecondaryPanes/Frames/index.js
+++ b/devtools/client/debugger/src/components/SecondaryPanes/Frames/index.js
@@ -24,16 +24,20 @@ import {
   getCurrentThread,
   getThreadContext,
 } from "../../../selectors";
 
 import "./Frames.css";
 
 const NUM_FRAMES_SHOWN = 7;
 
+type OwnProps = {|
+  getFrameTitle?: string => string,
+  selectable?: boolean,
+|};
 type Props = {
   cx: ThreadContext,
   frames: Array<Frame>,
   frameworkGroupingOn: boolean,
   selectedFrame: Object,
   selectFrame: typeof actions.selectFrame,
   toggleBlackBox: Function,
   toggleFrameworkGrouping: Function,
@@ -219,17 +223,17 @@ const mapStateToProps = state => ({
   frames: getCallStackFrames(state),
   frameworkGroupingOn: getFrameworkGroupingState(state),
   selectedFrame: getSelectedFrame(state, getCurrentThread(state)),
   disableFrameTruncate: false,
   disableContextMenu: false,
   displayFullUrl: false,
 });
 
-export default connect(
+export default connect<Props, OwnProps, _, _, _, _>(
   mapStateToProps,
   {
     selectFrame: actions.selectFrame,
     toggleBlackBox: actions.toggleBlackBox,
     toggleFrameworkGrouping: actions.toggleFrameworkGrouping,
   }
 )(Frames);
 
--- a/devtools/client/debugger/src/components/SecondaryPanes/Scopes.js
+++ b/devtools/client/debugger/src/components/SecondaryPanes/Scopes.js
@@ -28,16 +28,17 @@ import { objectInspector } from "devtool
 
 import type { ThreadContext, Why } from "../../types";
 import type { NamedValue } from "../../utils/pause/scopes/types";
 
 import "./Scopes.css";
 
 const { ObjectInspector } = objectInspector;
 
+type OwnProps = {||};
 type Props = {
   cx: ThreadContext,
   selectedFrame: Object,
   generatedFrameScopes: Object,
   originalFrameScopes: Object | null,
   isLoading: boolean,
   why: ?Why,
   mapScopesEnabled: boolean,
@@ -270,17 +271,17 @@ const mapStateToProps = state => {
     isLoading: generatedPending || originalPending,
     why: getPauseReason(state, cx.thread),
     originalFrameScopes,
     generatedFrameScopes,
     expandedScopes: getLastExpandedScopes(state, cx.thread),
   };
 };
 
-export default connect(
+export default connect<Props, OwnProps, _, _, _, _>(
   mapStateToProps,
   {
     openLink: actions.openLink,
     openElementInInspector: actions.openElementInInspectorCommand,
     highlightDomElement: actions.highlightDomElement,
     unHighlightDomElement: actions.unHighlightDomElement,
     toggleMapScopes: actions.toggleMapScopes,
     setExpandedScope: actions.setExpandedScope,
--- a/devtools/client/debugger/src/components/SecondaryPanes/Thread.js
+++ b/devtools/client/debugger/src/components/SecondaryPanes/Thread.js
@@ -10,16 +10,19 @@ import classnames from "classnames";
 
 import actions from "../../actions";
 import { getCurrentThread, getIsPaused, getContext } from "../../selectors";
 import { isWorker } from "../../utils/threads";
 import AccessibleImage from "../shared/AccessibleImage";
 
 import type { Context, Thread as ThreadType } from "../../types";
 
+type OwnProps = {|
+  thread: ThreadType,
+|};
 type Props = {
   cx: Context,
   selectThread: typeof actions.selectThread,
   isPaused: boolean,
   thread: ThreadType,
   currentThread: string,
 };
 
@@ -58,14 +61,14 @@ export class Thread extends Component<Pr
 }
 
 const mapStateToProps = (state, props) => ({
   cx: getContext(state),
   currentThread: getCurrentThread(state),
   isPaused: getIsPaused(state, props.thread.actor),
 });
 
-export default connect(
+export default connect<Props, OwnProps, _, _, _, _>(
   mapStateToProps,
   {
     selectThread: actions.selectThread,
   }
 )(Thread);
--- a/devtools/client/debugger/src/components/SecondaryPanes/Threads.js
+++ b/devtools/client/debugger/src/components/SecondaryPanes/Threads.js
@@ -9,16 +9,17 @@ import { connect } from "../../utils/con
 
 import { getAllThreads } from "../../selectors";
 import Thread from "./Thread";
 
 import type { Thread as ThreadType } from "../../types";
 
 import "./Threads.css";
 
+type OwnProps = {||};
 type Props = {
   threads: ThreadType[],
 };
 
 export class Threads extends Component<Props> {
   render() {
     const { threads } = this.props;
 
@@ -31,9 +32,9 @@ export class Threads extends Component<P
     );
   }
 }
 
 const mapStateToProps = state => ({
   threads: getAllThreads(state),
 });
 
-export default connect(mapStateToProps)(Threads);
+export default connect<Props, OwnProps, _, _, _, _>(mapStateToProps)(Threads);
--- a/devtools/client/debugger/src/components/SecondaryPanes/WhyPaused.js
+++ b/devtools/client/debugger/src/components/SecondaryPanes/WhyPaused.js
@@ -12,16 +12,19 @@ import {
   getCurrentThread,
   getPaneCollapse,
   getPauseReason as getWhy,
 } from "../../selectors";
 import type { Grip, Why } from "../../types";
 
 import "./WhyPaused.css";
 
+type OwnProps = {|
+  +delay?: number,
+|};
 type Props = {
   endPanelCollapsed: boolean,
   +delay: ?number,
   why: ?Why,
 };
 
 type State = {
   hideWhyPaused: string,
@@ -97,9 +100,9 @@ class WhyPaused extends PureComponent<Pr
   }
 }
 
 const mapStateToProps = state => ({
   endPanelCollapsed: getPaneCollapse(state, "end"),
   why: getWhy(state, getCurrentThread(state)),
 });
 
-export default connect(mapStateToProps)(WhyPaused);
+export default connect<Props, OwnProps, _, _, _, _>(mapStateToProps)(WhyPaused);
--- a/devtools/client/debugger/src/components/SecondaryPanes/XHRBreakpoints.js
+++ b/devtools/client/debugger/src/components/SecondaryPanes/XHRBreakpoints.js
@@ -13,16 +13,20 @@ import { CloseButton } from "../shared/B
 
 import "./XHRBreakpoints.css";
 import { getXHRBreakpoints, shouldPauseOnAnyXHR } from "../../selectors";
 import ExceptionOption from "./Breakpoints/ExceptionOption";
 
 import type { XHRBreakpointsList } from "../../reducers/types";
 import type { XHRBreakpoint } from "../../types";
 
+type OwnProps = {|
+  onXHRAdded: () => void,
+  showInput: boolean,
+|};
 type Props = {
   xhrBreakpoints: XHRBreakpointsList,
   shouldPauseOnAny: boolean,
   showInput: boolean,
   onXHRAdded: Function,
   setXHRBreakpoint: Function,
   removeXHRBreakpoint: typeof actions.removeXHRBreakpoint,
   enableXHRBreakpoint: typeof actions.enableXHRBreakpoint,
@@ -357,17 +361,17 @@ class XHRBreakpoints extends Component<P
   }
 }
 
 const mapStateToProps = state => ({
   xhrBreakpoints: getXHRBreakpoints(state),
   shouldPauseOnAny: shouldPauseOnAnyXHR(state),
 });
 
-export default connect(
+export default connect<Props, OwnProps, _, _, _, _>(
   mapStateToProps,
   {
     setXHRBreakpoint: actions.setXHRBreakpoint,
     removeXHRBreakpoint: actions.removeXHRBreakpoint,
     enableXHRBreakpoint: actions.enableXHRBreakpoint,
     disableXHRBreakpoint: actions.disableXHRBreakpoint,
     updateXHRBreakpoint: actions.updateXHRBreakpoint,
     togglePauseOnAny: actions.togglePauseOnAny,
--- a/devtools/client/debugger/src/components/SecondaryPanes/index.js
+++ b/devtools/client/debugger/src/components/SecondaryPanes/index.js
@@ -80,16 +80,20 @@ function debugBtn(onClick, type, classNa
   );
 }
 
 type State = {
   showExpressionsInput: boolean,
   showXHRInput: boolean,
 };
 
+type OwnProps = {|
+  horizontal: boolean,
+  toggleShortcutsModal: () => void,
+|};
 type Props = {
   cx: ThreadContext,
   expressions: List<Expression>,
   hasFrames: boolean,
   horizontal: boolean,
   breakpoints: Object,
   selectedFrame: ?Frame,
   breakpointsDisabled: boolean,
@@ -564,17 +568,17 @@ const mapStateToProps = state => {
     workers: getThreads(state),
     skipPausing: getSkipPausing(state),
     logEventBreakpoints: shouldLogEventBreakpoints(state),
     source:
       selectedFrame && getSourceFromId(state, selectedFrame.location.sourceId),
   };
 };
 
-export default connect(
+export default connect<Props, OwnProps, _, _, _, _>(
   mapStateToProps,
   {
     toggleAllBreakpoints: actions.toggleAllBreakpoints,
     evaluateExpressions: actions.evaluateExpressions,
     pauseOnExceptions: actions.pauseOnExceptions,
     toggleMapScopes: actions.toggleMapScopes,
     breakOnNext: actions.breakOnNext,
     toggleEventLogging: actions.toggleEventLogging,
--- a/devtools/client/debugger/src/components/WelcomeBox.js
+++ b/devtools/client/debugger/src/components/WelcomeBox.js
@@ -10,16 +10,20 @@ import { connect } from "../utils/connec
 import actions from "../actions";
 import { getPaneCollapse } from "../selectors";
 import { formatKeyShortcut } from "../utils/text";
 
 import type { ActiveSearchType } from "../reducers/ui";
 
 import "./WelcomeBox.css";
 
+type OwnProps = {|
+  horizontal: boolean,
+  toggleShortcutsModal: () => void,
+|};
 type Props = {
   horizontal: boolean,
   endPanelCollapsed: boolean,
   togglePaneCollapse: Function,
   setActiveSearch: (ActiveSearchType | void) => any,
   openQuickOpen: typeof actions.openQuickOpen,
   toggleShortcutsModal: () => void,
 };
@@ -80,16 +84,16 @@ export class WelcomeBox extends Componen
     );
   }
 }
 
 const mapStateToProps = state => ({
   endPanelCollapsed: getPaneCollapse(state, "end"),
 });
 
-export default connect(
+export default connect<Props, OwnProps, _, _, _, _>(
   mapStateToProps,
   {
     togglePaneCollapse: actions.togglePaneCollapse,
     setActiveSearch: actions.setActiveSearch,
     openQuickOpen: actions.openQuickOpen,
   }
 )(WelcomeBox);
--- a/devtools/client/debugger/src/components/shared/SourceIcon.js
+++ b/devtools/client/debugger/src/components/shared/SourceIcon.js
@@ -14,16 +14,22 @@ import { getSourceClassnames } from "../
 import { getFramework } from "../../utils/tabs";
 import { getSymbols, getTabs } from "../../selectors";
 
 import type { Source } from "../../types";
 import type { Symbols } from "../../reducers/types";
 
 import "./SourceIcon.css";
 
+type OwnProps = {|
+  source: Source,
+
+  // An additional validator for the icon returned
+  shouldHide?: string => boolean,
+|};
 type Props = {
   source: Source,
   shouldHide?: string => boolean,
 
   // symbols will provide framework information
   symbols: ?Symbols,
   framework: ?string,
 };
@@ -38,12 +44,12 @@ class SourceIcon extends PureComponent<P
     if (shouldHide && shouldHide(iconClass)) {
       return null;
     }
 
     return <AccessibleImage className={`source-icon ${iconClass}`} />;
   }
 }
 
-export default connect((state, props) => ({
+export default connect<Props, OwnProps, _, _, _, _>((state, props) => ({
   symbols: getSymbols(state, props.source),
   framework: getFramework(getTabs(state), props.source.url),
 }))(SourceIcon);
--- a/devtools/client/debugger/src/utils/connect.js
+++ b/devtools/client/debugger/src/utils/connect.js
@@ -1,22 +1,8 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
 // @flow
 
 import { connect as reduxConnect } from "react-redux";
-import * as React from "react";
 
-export function connect<Config, RSP: {}, MDP: {}>(
-  mapStateToProps: (state: any, props: any) => RSP,
-  mapDispatchToProps?: (Function => MDP) | MDP,
-  mergeProps?: void,
-  opts?: ?{|
-    storeKey?: string,
-  |}
-): (
-  Component: React.AbstractComponent<Config>
-) => React.AbstractComponent<$Diff<Config, RSP & MDP>> {
-  // TODO: Bug 1572214 - We should use the standard type definitions directly.
-  // $FlowFixMe
-  return reduxConnect(mapStateToProps, mapDispatchToProps, null, opts);
-}
+export const connect: typeof reduxConnect = reduxConnect;