Bug 1515951 - [release 112] Fixes flow typing support for reselect (#7573). r=bhackett

devtools/client/debugger/new/src/client/chrome/create.js

@@ -4,7 +4,7 @@
 
 // @flow
 
-import type { SourceLocation, LoadedObject } from "../../types";
+import type { ChromeFrame, SourceLocation, LoadedObject } from "../../types";
 import type { ServerLocation } from "./types";
 
 export function fromServerLocation(
@@ -27,7 +27,7 @@ export function toServerLocation(location: SourceLocation): ServerLocation {
   };
 }
 
-export function createFrame(frame: any) {
+export function createFrame(frame: any): ChromeFrame {
   return {
     id: frame.callFrameId,
     displayName: frame.functionName,

devtools/client/debugger/new/src/components/Editor/Footer.js

@@ -248,12 +248,14 @@ class SourceFooter extends PureComponent<Props, State> {
 
 const mapStateToProps = state => {
   const selectedSource = getSelectedSource(state);
-  const selectedId = selectedSource.id;
 
   return {
     selectedSource,
     mappedSource: getGeneratedSource(state, selectedSource),
-    prettySource: getPrettySource(state, selectedId),
+    prettySource: getPrettySource(
+      state,
+      selectedSource ? selectedSource.id : null
+    ),
     endPanelCollapsed: getPaneCollapse(state, "end")
   };
 };

devtools/client/debugger/new/src/components/PrimaryPanes/Outline.js

@@ -261,12 +261,19 @@ export class Outline extends Component<Props, State> {
 
 const mapStateToProps = state => {
   const selectedSource = getSelectedSource(state);
-  const symbols = getSymbols(state, selectedSource);
+  const symbols = selectedSource ? getSymbols(state, selectedSource) : null;
+
   return {
     symbols,
     selectedSource,
     selectedLocation: getSelectedLocation(state),
-    getFunctionText: line => findFunctionText(line, selectedSource, symbols)
+    getFunctionText: line => {
+      if (selectedSource) {
+        return findFunctionText(line, selectedSource, symbols);
+      }
+
+      return null;
+    }
   };
 };
 

devtools/client/debugger/new/src/components/SecondaryPanes/Breakpoints/Breakpoint.js

@@ -175,7 +175,7 @@ class Breakpoint extends PureComponent<Props> {
 const getFormattedFrame = createSelector(
   getSelectedSource,
   getSelectedFrame,
-  (selectedSource: Source, frame: Frame): ?FormattedFrame => {
+  (selectedSource: ?Source, frame: ?Frame): ?FormattedFrame => {
     if (!frame) {
       return null;
     }

devtools/client/debugger/new/src/reducers/ast.js

@@ -159,7 +159,7 @@ function update(
 // https://github.com/devtools-html/debugger.html/blob/master/src/reducers/sources.js#L179-L185
 type OuterState = { ast: Record<ASTState> };
 
-export function getSymbols(state: OuterState, source?: Source): ?Symbols {
+export function getSymbols(state: OuterState, source: ?Source): ?Symbols {
   if (!source) {
     return null;
   }
@@ -177,7 +177,7 @@ export function hasSymbols(state: OuterState, source: Source): boolean {
   return !symbols.loading;
 }
 
-export function isSymbolsLoading(state: OuterState, source: Source): boolean {
+export function isSymbolsLoading(state: OuterState, source: ?Source): boolean {
   const symbols = getSymbols(state, source);
   if (!symbols) {
     return false;

devtools/client/debugger/new/src/reducers/expressions.js

@@ -13,10 +13,11 @@ import makeRecord from "../utils/makeRecord";
 import { List, Map } from "immutable";
 import { omit, zip } from "lodash";
 
-import { createSelector } from "../utils/createSelector";
+import { createSelector } from "reselect";
 import { prefs } from "../utils/prefs";
 
 import type { Expression } from "../types";
+import type { Selector, State } from "../reducers/types";
 import type { Action } from "../actions/types";
 import type { Record } from "../utils/makeRecord";
 
@@ -158,38 +159,36 @@ function updateExpressionInList(
 }
 
 function deleteExpression(state: Record<ExpressionState>, input: string) {
-  const index = getExpressions({ expressions: state }).findIndex(
-    e => e.input == input
-  );
+  const index = state.expressions.findIndex(e => e.input == input);
   const newState = state.deleteIn(["expressions", index]);
   storeExpressions(newState);
   return newState;
 }
 
-type OuterState = { expressions: Record<ExpressionState> };
-
 const getExpressionsWrapper = state => state.expressions;
 
-export const getExpressions = createSelector(
+export const getExpressions: Selector<List<Expression>> = createSelector(
   getExpressionsWrapper,
   expressions => expressions.expressions
 );
 
-export const getAutocompleteMatches = createSelector(
+export const getAutocompleteMatches: Selector<
+  Map<string, List<string>>
+> = createSelector(
   getExpressionsWrapper,
   expressions => expressions.autocompleteMatches
 );
 
-export function getExpression(state: OuterState, input: string) {
+export function getExpression(state: State, input: string) {
   return getExpressions(state).find(exp => exp.input == input);
 }
 
-export function getAutocompleteMatchset(state: OuterState) {
+export function getAutocompleteMatchset(state: State) {
   const input = state.expressions.get("currentAutocompleteInput");
   return getAutocompleteMatches(state).get(input);
 }
 
-export const getExpressionError = createSelector(
+export const getExpressionError: Selector<boolean> = createSelector(
   getExpressionsWrapper,
   expressions => expressions.expressionError
 );

devtools/client/debugger/new/src/reducers/pause.js

@@ -10,15 +10,23 @@
  * @module reducers/pause
  */
 
-import { createSelector } from "../utils/createSelector";
+import { createSelector } from "reselect";
 import { isGeneratedId } from "devtools-source-map";
 import { prefs } from "../utils/prefs";
 import { getSelectedSource } from "./sources";
 
 import type { OriginalScope } from "../utils/pause/mapScopes";
 import type { Action } from "../actions/types";
-import type { State } from "./types";
-import type { Why, Scope, SourceId, FrameId, MappedLocation } from "../types";
+import type { Selector, State } from "./types";
+import type {
+  Why,
+  Scope,
+  SourceId,
+  ChromeFrame,
+  Frame,
+  FrameId,
+  MappedLocation
+} from "../types";
 
 export type Command =
   | null
@@ -340,7 +348,7 @@ function getCurrentPauseState(state: OuterState): ThreadPauseState {
   return getThreadPauseState(state.pause, state.pause.currentThread);
 }
 
-export const getAllPopupObjectProperties = createSelector(
+export const getAllPopupObjectProperties: Selector<{}> = createSelector(
   getCurrentPauseState,
   pauseWrapper => pauseWrapper.loadedObjects
 );
@@ -534,7 +542,7 @@ export function getTopFrame(state: OuterState) {
   return frames && frames[0];
 }
 
-export const getSelectedFrame = createSelector(
+export const getSelectedFrame: Selector<?Frame> = createSelector(
   getSelectedFrameId,
   getFrames,
   (selectedFrameId, frames) => {
@@ -556,7 +564,7 @@ export function getSkipPausing(state: OuterState) {
 
 // NOTE: currently only used for chrome
 export function getChromeScopes(state: OuterState) {
-  const frame = getSelectedFrame(state);
+  const frame: ?ChromeFrame = (getSelectedFrame(state): any);
   return frame ? frame.scopeChain : undefined;
 }
 

devtools/client/debugger/new/src/reducers/sources.js

@@ -9,7 +9,7 @@
  * @module reducers/sources
  */
 
-import { createSelector } from "../utils/createSelector";
+import { createSelector } from "reselect";
 import {
   getPrettySourceURL,
   underRoot,
@@ -21,7 +21,7 @@ import { originalToGeneratedId } from "devtools-source-map";
 import { prefs } from "../utils/prefs";
 
 import type { Source, SourceId, SourceLocation } from "../types";
-import type { PendingSelectedLocation } from "./types";
+import type { PendingSelectedLocation, Selector } from "./types";
 import type { Action, DonePromiseAction } from "../actions/types";
 import type { LoadSourceAction } from "../actions/types/SourceAction";
 
@@ -345,7 +345,14 @@ export function getSourcesByURL(state: OuterState, url: string): Source[] {
   return getSourcesByUrlInSources(getSources(state), getUrls(state), url);
 }
 
-export function getGeneratedSource(state: OuterState, source: Source): Source {
+export function getGeneratedSource(
+  state: OuterState,
+  source: ?Source
+): ?Source {
+  if (!source) {
+    return null;
+  }
+
   if (isGenerated(source)) {
     return source;
   }
@@ -357,7 +364,11 @@ export function getPendingSelectedLocation(state: OuterState) {
   return state.sources.pendingSelectedLocation;
 }
 
-export function getPrettySource(state: OuterState, id: string) {
+export function getPrettySource(state: OuterState, id: ?string) {
+  if (!id) {
+    return;
+  }
+
   const source = getSource(state, id);
   if (!source) {
     return;
@@ -470,17 +481,17 @@ export function getSourceList(state: OuterState): Source[] {
   return (Object.values(getSources(state)): any);
 }
 
-export const getSourceCount = createSelector(
+export const getSourceCount: Selector<number> = createSelector(
   getSources,
   sources => Object.keys(sources).length
 );
 
-export const getSelectedLocation = createSelector(
+export const getSelectedLocation: Selector<?SourceLocation> = createSelector(
   getSourcesState,
   sources => sources.selectedLocation
 );
 
-export const getSelectedSource = createSelector(
+export const getSelectedSource: Selector<?Source> = createSelector(
   getSelectedLocation,
   getSources,
   (selectedLocation: ?SourceLocation, sources: SourcesMap): ?Source => {

devtools/client/debugger/new/src/reducers/tabs.js

@@ -9,7 +9,7 @@
  * @module reducers/tabs
  */
 
-import { createSelector } from "../utils/createSelector";
+import { createSelector } from "reselect";
 import { isOriginalId } from "devtools-source-map";
 import move from "lodash-move";
 
@@ -25,6 +25,7 @@ import {
 import type { Action } from "../actions/types";
 import type { SourcesState } from "./sources";
 import type { Source } from "../types";
+import type { Selector } from "./types";
 
 export type Tab = {
   url: string,
@@ -194,7 +195,7 @@ type OuterState = { tabs: TabList, sources: SourcesState };
 
 export const getTabs = (state: OuterState): TabList => state.tabs;
 
-export const getSourceTabs = createSelector(
+export const getSourceTabs: Selector<Tab[]> = createSelector(
   getTabs,
   getSources,
   getUrls,
@@ -202,7 +203,7 @@ export const getSourceTabs = createSelector(
     tabs.filter(tab => getTabWithOrWithoutUrl(tab, sources, urls))
 );
 
-export const getSourcesForTabs = createSelector(
+export const getSourcesForTabs: Selector<Source[]> = createSelector(
   getSourceTabs,
   getSources,
   getUrls,

devtools/client/debugger/new/src/selectors/breakpointSources.js

@@ -5,7 +5,7 @@
 // @flow
 
 import { sortBy, uniq } from "lodash";
-import { createSelector } from "../utils/createSelector";
+import { createSelector } from "reselect";
 import {
   getSources,
   getBreakpointsList,
@@ -20,7 +20,7 @@ import type {
   BreakpointId,
   SourceLocation
 } from "../types";
-import type { SourcesMap } from "../reducers/types";
+import type { Selector, SourcesMap } from "../reducers/types";
 
 export type BreakpointSources = Array<{
   source: Source,
@@ -37,7 +37,7 @@ export type FormattedBreakpoint = {|
 
 function formatBreakpoint(
   breakpoint: Breakpoint,
-  selectedSource: Source
+  selectedSource: ?Source
 ): FormattedBreakpoint {
   const { id, condition, disabled } = breakpoint;
 
@@ -55,7 +55,7 @@ function formatBreakpoint(
 
 function getBreakpointsForSource(
   source: Source,
-  selectedSource: Source,
+  selectedSource: ?Source,
   breakpoints: Breakpoint[]
 ) {
   return breakpoints
@@ -72,7 +72,6 @@ function getBreakpointsForSource(
 
 function findBreakpointSources(
   sources: SourcesMap,
-  selectedSource: Source,
   breakpoints: Breakpoint[]
 ): Source[] {
   const sourceIds: string[] = uniq(breakpoints.map(bp => bp.location.sourceId));
@@ -84,12 +83,12 @@ function findBreakpointSources(
   return sortBy(breakpointSources, (source: Source) => getFilename(source));
 }
 
-export const getBreakpointSources = createSelector(
+export const getBreakpointSources: Selector<BreakpointSources> = createSelector(
   getBreakpointsList,
   getSources,
   getSelectedSource,
-  (breakpoints: Breakpoint[], sources: SourcesMap, selectedSource: Source) =>
-    findBreakpointSources(sources, selectedSource, breakpoints)
+  (breakpoints: Breakpoint[], sources: SourcesMap, selectedSource: ?Source) =>
+    findBreakpointSources(sources, breakpoints)
       .map(source => ({
         source,
         breakpoints: getBreakpointsForSource(

devtools/client/debugger/new/src/selectors/breakpoints.js

@@ -4,12 +4,13 @@
 
 // @flow
 
-import { createSelector } from "../utils/createSelector";
+import { createSelector } from "reselect";
 
 import type {
   BreakpointsState,
   XHRBreakpointsList
 } from "../reducers/breakpoints";
+import type { Selector } from "../reducers/types";
 
 type OuterState = { breakpoints: BreakpointsState };
 
@@ -17,7 +18,7 @@ export function getXHRBreakpoints(state: OuterState): XHRBreakpointsList {
   return state.breakpoints.xhrBreakpoints;
 }
 
-export const shouldPauseOnAnyXHR = createSelector(
+export const shouldPauseOnAnyXHR: Selector<boolean> = createSelector(
   getXHRBreakpoints,
   xhrBreakpoints => {
     const emptyBp = xhrBreakpoints.find(({ path }) => path.length === 0);

devtools/client/debugger/new/src/selectors/getCallStackFrames.js

@@ -13,7 +13,7 @@ import { isOriginal } from "../utils/source";
 import { get } from "lodash";
 import type { Frame, Source } from "../types";
 import type { SourcesMap } from "../reducers/sources";
-import { createSelector } from "../utils/createSelector";
+import { createSelector } from "reselect";
 
 function getLocation(frame, isGeneratedSource) {
   return isGeneratedSource

devtools/client/debugger/new/src/selectors/visibleBreakpoints.js

@@ -5,7 +5,7 @@
 // @flow
 
 import { isGeneratedId } from "devtools-source-map";
-import { createSelector } from "../utils/createSelector";
+import { createSelector } from "reselect";
 import { uniqBy } from "lodash";
 
 import { getBreakpointsList } from "../reducers/breakpoints";
@@ -15,6 +15,7 @@ import memoize from "../utils/memoize";
 import { sortBreakpoints } from "../utils/breakpoint";
 
 import type { Breakpoint, Source } from "../types";
+import type { Selector } from "../reducers/types";
 
 function getLocation(breakpoint, isGeneratedSource) {
   return isGeneratedSource
@@ -36,7 +37,7 @@ const formatBreakpoint = memoize(function(breakpoint, selectedSource) {
   };
 });
 
-function isVisible(breakpoint, selectedSource) {
+function isVisible(breakpoint: Breakpoint, selectedSource: Source) {
   const sourceId = selectedSource.id;
   const isGeneratedSource = isGeneratedId(sourceId);
 
@@ -47,16 +48,20 @@ function isVisible(breakpoint, selectedSource) {
 /*
  * Finds the breakpoints, which appear in the selected source.
  */
-export const getVisibleBreakpoints = createSelector(
+export const getVisibleBreakpoints: Selector<?(Breakpoint[])> = createSelector(
   getSelectedSource,
   getBreakpointsList,
-  (selectedSource: Source, breakpoints: Breakpoint[]) => {
-    if (!selectedSource) {
+  (selectedSource: ?Source, breakpoints: Breakpoint[]) => {
+    if (selectedSource == null) {
       return null;
     }
 
+    // FIXME: Even though selectedSource is checked above, it fails type
+    // checking for isVisible
+    const source: Source = selectedSource;
+
     return breakpoints
-      .filter(bp => isVisible(bp, selectedSource))
+      .filter(bp => isVisible(bp, source))
       .map(bp => formatBreakpoint(bp, selectedSource));
   }
 );
@@ -64,13 +69,12 @@ export const getVisibleBreakpoints = createSelector(
 /*
  * Finds the first breakpoint per line, which appear in the selected source.
  */
-export const getFirstVisibleBreakpoints = createSelector(
-  getVisibleBreakpoints,
-  breakpoints => {
-    if (!breakpoints) {
-      return null;
-    }
-
-    return uniqBy(sortBreakpoints(breakpoints), bp => bp.location.line);
+export const getFirstVisibleBreakpoints: Selector<
+  Breakpoint[]
+> = createSelector(getVisibleBreakpoints, breakpoints => {
+  if (!breakpoints) {
+    return [];
   }
-);
+
+  return (uniqBy(sortBreakpoints(breakpoints), bp => bp.location.line): any);
+});

devtools/client/debugger/new/src/selectors/visibleColumnBreakpoints.js

@@ -3,7 +3,7 @@
  * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
 
 import { groupBy, get, sortedUniqBy } from "lodash";
-import { createSelector } from "../utils/createSelector";
+import { createSelector } from "reselect";
 
 import { getViewport } from "../selectors";
 import { getVisibleBreakpoints } from "./visibleBreakpoints";

devtools/client/debugger/new/src/selectors/visibleSelectedFrame.js

@@ -7,11 +7,12 @@
 import { getSelectedLocation } from "../reducers/sources";
 import { getSelectedFrame } from "../reducers/pause";
 import { isOriginalId } from "devtools-source-map";
-import { createSelector } from "../utils/createSelector";
+import { createSelector } from "reselect";
 
 import type { Frame, SourceLocation } from "../types";
+import type { Selector } from "../reducers/types";
 
-function getLocation(frame: Frame, location?: SourceLocation) {
+function getLocation(frame: Frame, location: ?SourceLocation) {
   if (!location) {
     return frame.location;
   }
@@ -21,7 +22,10 @@ function getLocation(frame: Frame, location?: SourceLocation) {
     : frame.location;
 }
 
-export const getVisibleSelectedFrame = createSelector(
+export const getVisibleSelectedFrame: Selector<?{
+  id: string,
+  location: SourceLocation
+}> = createSelector(
   getSelectedLocation,
   getSelectedFrame,
   (selectedLocation, selectedFrame) => {

devtools/client/debugger/new/src/utils/moz.build

@@ -18,7 +18,6 @@ DebuggerModules(
     'build-query.js',
     'clipboard.js',
     'connect.js',
-    'createSelector.js',
     'dbg.js',
     'defer.js',
     'DevToolsUtils.js',